feat:wlan增加密码配置以及band限制提示

src/views/device/wlan/index.vue

@@ -132,7 +132,17 @@
             </a-space>
           </a-form-item>
 
-          <a-form-item name="band" :label="t('page.wlan.band')">
+          <a-form-item name="band">
+            <template #label>
+              <span class="ant-form-item-label-wrap">
+                <span class="ant-form-item-label-text">{{ t('page.wlan.band') }}</span>
+                <a-tooltip placement="topLeft" :title="t('page.wlan.bandtip')">
+                  <span class="ant-form-item-tooltip">
+                    <InfoCircleOutlined />
+                  </span>
+                </a-tooltip>
+              </span>
+            </template>
             <a-space>
               <a-checkbox v-model:checked="addForm.band.band24G">2.4GHz</a-checkbox>
               <a-checkbox v-model:checked="addForm.band.band5G">5GHz</a-checkbox>
@@ -147,9 +157,20 @@
           <a-form-item name="security" :label="t('page.wlan.security.security')">
             <a-select v-model:value="addForm.security">
               <a-select-option :value="0">{{ t('page.wlan.none') }}</a-select-option>
+              <a-select-option :value="3">{{ t('page.wlan.security.wpaPersonal') }}</a-select-option>
             </a-select>
           </a-form-item>
 
+          <a-form-item
+            v-if="addForm.security === 3"
+            name="password"
+            :label="t('page.wlan.password')"
+          >
+            <a-input
+              v-model:value="addForm.password"
+            />
+          </a-form-item>
+
           <a-form-item name="broadcast" :label="t('page.wlan.broadcast')">
             <a-checkbox v-model:checked="addForm.broadcast" /> {{t('page.wlan.open')}}
           </a-form-item>
@@ -197,7 +218,17 @@
             </a-space>
           </a-form-item>
 
-          <a-form-item name="band" :label="t('page.wlan.band')">
+          <a-form-item name="band">
+            <template #label>
+              <span class="ant-form-item-label-wrap">
+                <span class="ant-form-item-label-text">{{ t('page.wlan.band') }}</span>
+                <a-tooltip placement="topLeft" :title="t('page.wlan.bandtip')">
+                  <span class="ant-form-item-tooltip">
+                    <InfoCircleOutlined />
+                  </span>
+                </a-tooltip>
+              </span>
+            </template>
             <a-space>
               <a-checkbox v-model:checked="editForm.band.band24G">2.4GHz</a-checkbox>
               <a-checkbox v-model:checked="editForm.band.band5G">5GHz</a-checkbox>
@@ -212,9 +243,22 @@
           <a-form-item name="security" :label="t('page.wlan.security.security')">
             <a-select v-model:value="editForm.security">
               <a-select-option :value="0">{{ t('page.wlan.none') }}</a-select-option>
+              <a-select-option :value="3">{{ t('page.wlan.security.wpaPersonal') }}</a-select-option>
             </a-select>
           </a-form-item>
 
+          <a-form-item
+            v-if="editForm.security === 3"
+            name="password"
+            :label="t('page.wlan.password')"
+            validateFirst
+          >
+            <a-input
+              v-model:value="editForm.password"
+              :placeholder="t('page.wlan.passwordPlaceholder')"
+            />
+          </a-form-item>
+
           <a-form-item name="broadcast" :label="t('page.wlan.broadcast')">
             <a-checkbox v-model:checked="editForm.broadcast" /> {{t('page.wlan.open')}}
           </a-form-item>
@@ -246,7 +290,7 @@ import { Card as ACard, Table as ATable, message, Modal } from 'ant-design-vue';
 import { useI18n } from 'vue-i18n';
 import { fetchSiteList, fetchWlanGroups, fetchWlanSsidList, addWlanSsid, deleteWlanSsid, updateWlanSsid, getWlanSsidConfig } from '@/service/api/auth';
 import { useTable } from '@/hooks/common/table';
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
+import { DeleteOutlined, EditOutlined,InfoCircleOutlined } from '@ant-design/icons-vue';
 import {centerAlign} from "consola/utils";
 
 const { t } = useI18n();
@@ -443,8 +487,15 @@ const addForm = ref<Api.Wlan.WlanSsidForm>({
     band5G: true,
     band6G: false
   },
+  password:'',
   guestNetEnable: false,
-  security: 0,
+  pskSetting:{
+    securityKey:'',
+    versionPsk:2,
+    encryptionPsk:3,
+    gikRekeyPskEnable:false,
+  },
+  security:0,
   broadcast: true,
   vlanEnable: false,
   vlanId: undefined
@@ -456,6 +507,10 @@ const addRules = {
     { required: true, message: t('page.wlan.nameRequired') },
     { min: 1, max: 32, message: t('page.wlan.nameLength') }
   ],
+  password: [
+    { required: true, message: t('page.wlan.passwordRequired') },
+    { min: 8, max: 63, message: t('page.wlan.passwordLength') },
+  ],
   vlanId: [
     {
       required: true,
@@ -466,7 +521,7 @@ const addRules = {
         return Promise.resolve();
       }
     }
-  ]
+  ],
 };
 
 // 处理添加按钮点击
@@ -497,9 +552,19 @@ const handleAddConfirm = async () => {
     pmfMode: 1,
     enable11r: false,
     hidePwd: false,
-    greEnable:false,
+    greEnable: false,
   };
 
+  // 只有当 security 为 WPA Personal (3) 时才添加 pskSetting
+  if (addForm.value.security === 3) {
+    params.pskSetting = {
+      securityKey: addForm.value.password,
+      versionPsk: 2,
+      encryptionPsk: 3,
+      gikRekeyPskEnable: false
+    };
+  }
+
   const { error } = await addWlanSsid(selectedSiteId.value, selectedGroupId.value, params);
 
   hide();
@@ -528,6 +593,13 @@ const editForm = ref<Api.Wlan.WlanSsidForm>({
   },
   guestNetEnable: false,
   security: 0,
+  password:'',
+  pskSetting:{
+    securityKey:'',
+    versionPsk:2,
+    encryptionPsk:3,
+    gikRekeyPskEnable:false,
+  },
   broadcast: true,
   vlanEnable: false,
   vlanId: undefined
@@ -561,6 +633,12 @@ const handleEdit = async (record: Api.Wlan.WlanSsid) => {
         band5G: !!(data.band & 2),
         band6G: !!(data.band & 4)
       },
+      pskSetting:{
+        securityKey:data.securityKey,
+        versionPsk:data.versionPsk,
+        encryptionPsk:data.encryptionPsk,
+        gikRekeyPskEnable:data.gikRekeyPskEnable,
+      },
       guestNetEnable: data.guestNetEnable,
       security: data.security,
       broadcast: data.broadcast,
@@ -598,6 +676,16 @@ const handleEditConfirm = async () => {
     greEnable: false,
   };
 
+  // 只有当 security 为 WPA Personal (3) 时才添加 pskSetting
+  if (editForm.value.security === 3) {
+    params.pskSetting = {
+      securityKey: editForm.value.password,
+      versionPsk: 2,
+      encryptionPsk: 3,
+      gikRekeyPskEnable: false
+    };
+  }
+
   const { error } = await updateWlanSsid(
     selectedSiteId.value,
     selectedGroupId.value,