diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 081aaf4..8536e9a 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -791,6 +791,58 @@ const local: any = {
       editSsid:'Edit ssid',
       updateSuccess:'Update success',
     },
+    portal: {
+      title: 'Portal management',
+      name: 'Name',
+      selectSite:'no site',
+      authType: 'Authentication Type',
+      auth: {
+        none: 'No Authentication',
+        simplePassword: 'Simple password',
+        externalRadius: 'RADIUS server',
+        externalPortal: 'External Portal server',
+        hotspot: 'Hotspot',
+        ldap: 'LDAP'
+      },
+      addPortal: 'Add Portal',
+      enable: 'Enable',
+      ssid: 'SSID',
+      selectSsid: 'Please select SSID',
+      authTimeout: 'Authentication Timeout',
+      dailyLimit: 'Daily Limit',
+      enableDailyLimit: 'Enable',
+      httpsRedirect: 'HTTPS Redirection',
+      enableHttpsRedirect: 'Enable',
+      landingPage: 'Landing Page',
+      landingUrl: 'URL',
+      enterUrl: 'Please enter URL',
+      nameRequired: 'Please enter portal name',
+      ssidRequired: 'Please select SSID',
+      urlRequired: 'Please enter URL',
+      addSuccess: 'Add Success',
+      addError: 'Add Error',
+      total:'Total',
+      updateSuccess:'Update success',
+      editPortal:'Edit Portal',
+      timeUnit: {
+        min: 'Min',
+        hour: 'Hour',
+        day: 'Day'
+      },
+      landing: {
+        originalUrl: 'The Original URL',
+        promotionUrl: 'The Promotional URL',
+        logoutPage: 'The Success Page'
+      },
+      externalPortal: 'External Portal server',
+      ipAddress: 'IP Address',
+      url: 'URL',
+      ipRequired: 'Please enter IP',
+      invalidUrl: 'The URL is not formatted correctly',
+      confirmDelete: 'Confirm Delete',
+      deleteConfirmContent: 'Sure to delete portal {name} ？',
+      deleteSuccess: 'Delete success'
+    },
     terminal:{
       title:'Terminal',
       total:'Total',
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 305a1dc..e664eac 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -736,7 +736,7 @@ const local:any = {
       forgetConfirm:'确认要移除设备吗?',
       restartConfirm:'确认要重启设备吗？',
       led:'LED',
-      useSiteSettings:'站点设置',
+      useSiteSettings:'使用站点设置',
       on:'打开',
       off:'关闭',
       longitude:'经度(可选)',
@@ -758,6 +758,92 @@ const local:any = {
       configError:'配置失败',
 
     },
+    wlan:{
+      title:'无线网络',
+      selectSite:'无站点',
+      selectGroup:'无网络组',
+      total:'共',
+      name:'SSid名称',
+      security:'安全性',
+      none:'无',
+      wpaEnterprise:'WPA-Enterprise',
+      wpaPersonal:'WPA-Personal',
+      ppskWithoutRadius:'PPSK without RADIUS',
+      ppskWithRadius:'PPSK with RADIUS',
+      band:'频段',
+      guestNetwork:'访客网络',
+      enable:'开启',
+      disable:'关闭',
+      deviceType:'设备类型',
+      broadcast:'广播',
+      vlan:'VLAN',
+      addSsid:'Ssid配置',
+      open:'开启',
+      vlanId:'VLAN ID',
+      default:'默认',
+      custom:'定制',
+      nameRequired:'名称不能为空',
+      nameLength:'名称长度1~32字符',
+      vlanIdRequired:'VLAN ID不能为空',
+      addSuccess:'添加成功',
+      confirmDelete:'删除设备',
+      deleteConfirmContent:'确认要删除设备吗',
+      deleteSuccess:'删除成功',
+      editSsid:'修改配置',
+      updateSuccess:'修改成功',
+    },
+    portal: {
+      title: '门户管理',
+      name: '名称',
+      selectSite:'无站点',
+      authType: '身份验证类型',
+      auth: {
+        none: '无认证',
+        simplePassword: '简单密码',
+        externalRadius: '外部 Radius 服务器',
+        externalPortal: '外部 Portal 服务器',
+        hotspot: '热点',
+        ldap: 'LDAP 格式'
+      },
+      addPortal: '添加门户',
+      enable: '启用',
+      ssid: 'SSID',
+      selectSsid: '请选择SSID',
+      authTimeout: '身份验证时间',
+      dailyLimit: '每日限额',
+      enableDailyLimit: '启用每日限额',
+      httpsRedirect: 'HTTPS 重定向',
+      enableHttpsRedirect: '启用 HTTPS 重定向',
+      landingPage: '登录页面',
+      landingUrl: '促销 URL',
+      enterUrl: '请输入 URL',
+      nameRequired: '请输入门户名称',
+      ssidRequired: '请选择 SSID',
+      urlRequired: '请输入 URL',
+      addSuccess: '添加成功',
+      addError: '添加失败',
+      total:'共',
+      updateSuccess:'更新成功',
+      editPortal:'修改配置',
+      timeUnit: {
+        min: '分钟',
+        hour: '小时',
+        day: '天'
+      },
+      landing: {
+        originalUrl: '重定向到原始 URL',
+        promotionUrl: '重定向到促销 URL',
+        logoutPage: '重定向到注销页面'
+      },
+      externalPortal: '自定义 Portal 服务器',
+      ipAddress: 'IP地址',
+      url: 'URL',
+      ipRequired: '请输入IP地址',
+      invalidUrl: 'URL 格式不正确',
+      confirmDelete: '确认删除',
+      deleteConfirmContent: '确定要删除门户 {name} 吗？',
+      deleteSuccess: '删除成功'
+    },
     terminal:{
       title:'终端设备',
       total:'共',
diff --git a/src/service/api/auth.ts b/src/service/api/auth.ts
index 1c371f6..efdbee3 100644
--- a/src/service/api/auth.ts
+++ b/src/service/api/auth.ts
@@ -348,6 +348,59 @@ export function updateWlanSsid(siteId: string, wlanId: string, ssidId: string, p
     data: params
   });
 }
+/** 获取门户列表 */
+export function fetchPortalList(siteId: string, params: { pageNum: number; pageSize: number }) {
+  return request<Api.Portal.PortalResponse>({
+    url: `/system/portal/${siteId}`,
+    method: 'get',
+    params: {
+      pageNum: params.pageNum,
+      pageSize: params.pageSize
+    }
+  });
+}
+/** 获取 SSID 列表 */
+export function fetchSsidList(siteId: string) {
+  return request<Api.Portal.SsidListResponse>({
+    url: `/system/wlan/ssids/${siteId}`,
+    method: 'get'
+  });
+}
+
+/** 添加门户 */
+export function addPortal(siteId: string, params: Api.Portal.AddPortalParams) {
+  return request<any>({
+    url: `/system/portal/${siteId}`,
+    method: 'post',
+    data: params
+  });
+}
+/** 获取门户配置 */
+export function getPortalConfig(siteId: string, portalId: string) {
+  return request<Api.Portal.AddPortalParams>({
+    url: `/system/portal/${siteId}/${portalId}`,
+    method: 'get'
+  });
+}
+
+/** 更新门户配置 */
+export function updatePortalConfig(siteId: string, portalId: string, params: Api.Portal.AddPortalParams) {
+  return request<any>({
+    url: `/system/portal/${siteId}/${portalId}`,
+    method: 'put',
+    data: params
+  });
+}
+/** 删除门户 */
+export function deletePortal(siteId: string, portalId: string) {
+  return request<any>({
+    url: `/system/portal/${siteId}/${portalId}`,
+    method: 'delete'
+  });
+}
+
+
+
 
 
 
diff --git a/src/typings/api.d.ts b/src/typings/api.d.ts
index 02f13b5..b50bc19 100644
--- a/src/typings/api.d.ts
+++ b/src/typings/api.d.ts
@@ -807,8 +807,8 @@ declare namespace Api {
   namespace Wlan {
     interface WlanGroup {
       wlanId: string;
-      name: string;
-      primary: boolean;
+      wlanName: string;
+      ssidList: SsidInfo[];
     }
 
     type WlanGroupResponse = App.Service.ApiResponse<WlanGroup[]>;
@@ -876,6 +876,91 @@ declare namespace Api {
       vlanId?: number;
     }
   }
+  namespace Portal {
+    interface Portal {
+      id: string;
+      name: string;
+      enable: boolean;
+      ssidNames: string[];
+      ssidList: string[];
+      networkList: string[];
+      authType: number;
+      hotspotTypes: any;
+    }
+
+
+    interface PortalResponse extends App.Service.ApiResponse<{
+      rows: Portal[];
+      total: number;
+    }> {}
+  }
+  namespace Portal {
+    // 先定义基础类型
+    interface SsidInfo {
+      ssidId: string;
+      ssidName: string;
+    }
+
+    interface WlanGroup {
+      wlanId: string;
+      wlanName: string;
+      ssidList: SsidInfo[];
+    }
+    interface Portal {
+      id: string;
+      name: string;
+      enable: boolean;
+      ssidNames: string[];
+      ssidList: string[];
+      networkList: string[];
+      authType: number;
+      hotspotTypes: any;
+    }
+
+
+    interface PortalResponse extends App.Service.ApiResponse<{
+      rows: Portal[];
+      total: number;
+    }> {}
+
+
+    interface SsidListResponse extends App.Service.ApiResponse<WlanGroup[]> {}
+
+    interface AuthTimeout {
+      customTimeout: number;
+      customTimeoutUnit: 1 | 2 | 3; // 1:分钟 2:小时 3:天
+    }
+
+    interface NoAuth {
+      dailyLimitEnable: boolean;
+    }
+    interface ExternalPortal {
+      hostType: 1 | 2;  // 1: IP地址 2: URL
+      serverUrl: string;       // IP地址或URL值
+      serverUrlScheme?: string;  // URL时的协议类型
+    }
+
+    interface ImportedPortalPage {
+      id: string;
+    }
+
+    interface AddPortalParams {
+      name: string;
+      enable: boolean;
+      ssidList: string[];
+      authType: number;
+      authTimeout: AuthTimeout;
+      noAuth: NoAuth;
+      httpsRedirectEnable: boolean;
+      landingPage: 1 | 2 | 3;
+      landingUrlScheme?: string;
+      landingUrl?: string;
+      externalPortal?: ExternalPortal; // 添加外部Portal配置
+      pageType: number;
+      importedPortalPage: ImportedPortalPage;
+
+    }
+  }
 }
 
 declare namespace App {
diff --git a/src/typings/auto-imports.d.ts b/src/typings/auto-imports.d.ts
index 3297b01..2969bc8 100644
--- a/src/typings/auto-imports.d.ts
+++ b/src/typings/auto-imports.d.ts
@@ -14,6 +14,7 @@ declare global {
   const addData: typeof import('../service/api/dictData')['addData']
   const addJob: typeof import('../service/api/job')['addJob']
   const addPackage: typeof import('../service/api/auth')['addPackage']
+  const addPortal: typeof import('../service/api/auth')['addPortal']
   const addRateLimit: typeof import('../service/api/auth')['addRateLimit']
   const addThemeVarsToHtml: typeof import('../store/modules/theme/shared')['addThemeVarsToHtml']
   const addWlanSsid: typeof import('../service/api/auth')['addWlanSsid']
@@ -66,6 +67,7 @@ declare global {
   const delJobLog: typeof import('../service/api/job')['delJobLog']
   const deleteApDevices: typeof import('../service/api/auth')['deleteApDevices']
   const deletePackage: typeof import('../service/api/auth')['deletePackage']
+  const deletePortal: typeof import('../service/api/auth')['deletePortal']
   const deleteWlanSsid: typeof import('../service/api/auth')['deleteWlanSsid']
   const describe: typeof import('vitest')['describe']
   const dict: typeof import('../store/modules/dict/index')['default']
@@ -142,10 +144,12 @@ declare global {
   const fetchKycList: typeof import('../service/api/auth')['fetchKycList']
   const fetchLogin: typeof import('../service/api/auth')['fetchLogin']
   const fetchPackageList: typeof import('../service/api/auth')['fetchPackageList']
+  const fetchPortalList: typeof import('../service/api/auth')['fetchPortalList']
   const fetchRateLimitList: typeof import('../service/api/auth')['fetchRateLimitList']
   const fetchRefreshToken: typeof import('../service/api/auth')['fetchRefreshToken']
   const fetchRegister: typeof import('../service/api/auth')['fetchRegister']
   const fetchSiteList: typeof import('../service/api/auth')['fetchSiteList']
+  const fetchSsidList: typeof import('../service/api/auth')['fetchSsidList']
   const fetchTerminalList: typeof import('../service/api/auth')['fetchTerminalList']
   const fetchWlanGroups: typeof import('../service/api/auth')['fetchWlanGroups']
   const fetchWlanSsidList: typeof import('../service/api/auth')['fetchWlanSsidList']
@@ -175,6 +179,7 @@ declare global {
   const getFixedTabs: typeof import('../store/modules/tab/shared')['getFixedTabs']
   const getGlobalMenusByAuthRoutes: typeof import('../store/modules/route/shared')['getGlobalMenusByAuthRoutes']
   const getLocalizedTimeUnit: typeof import('../utils/units')['getLocalizedTimeUnit']
+  const getPortalConfig: typeof import('../service/api/auth')['getPortalConfig']
   const getRouteIcons: typeof import('../store/modules/tab/shared')['getRouteIcons']
   const getSelectedMenuKeyPathByKey: typeof import('../store/modules/route/shared')['getSelectedMenuKeyPathByKey']
   const getServiceBaseURL: typeof import('../utils/service')['getServiceBaseURL']
@@ -299,6 +304,7 @@ declare global {
   const updateJob: typeof import('../service/api/job')['updateJob']
   const updateLocaleOfGlobalMenus: typeof import('../store/modules/route/shared')['updateLocaleOfGlobalMenus']
   const updatePackage: typeof import('../service/api/auth')['updatePackage']
+  const updatePortalConfig: typeof import('../service/api/auth')['updatePortalConfig']
   const updateTabByI18nKey: typeof import('../store/modules/tab/shared')['updateTabByI18nKey']
   const updateTabsByI18nKey: typeof import('../store/modules/tab/shared')['updateTabsByI18nKey']
   const updateWlanSsid: typeof import('../service/api/auth')['updateWlanSsid']
diff --git a/src/views/device/portal/index.vue b/src/views/device/portal/index.vue
index 803f1b7..cb43f9b 100644
--- a/src/views/device/portal/index.vue
+++ b/src/views/device/portal/index.vue
@@ -1,6 +1,669 @@
-<script>
-
-</script>
 <template>
+  <SimpleScrollbar>
+    <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+      <ACard
+        :title="t('page.portal.title')"
+        :bordered="false"
+        :body-style="{ flex: 1, overflow: 'hidden' }"
+        class="flex-col-stretch sm:flex-1-hidden card-wrapper"
+      >
+        <template #extra>
+          <div class="flex items-center gap-4">
+            <!-- 站点选择 -->
+            <a-select
+              v-model:value="selectedSiteId"
+              :loading="siteLoading"
+              :placeholder="t('page.portal.selectSite')"
+              style="width: 200px"
+              @change="handleSiteChange"
+            >
+              <a-select-option
+                v-for="site in siteList"
+                :key="site.siteId"
+                :value="site.siteId"
+              >
+                {{ site.name }}
+              </a-select-option>
+            </a-select>
 
+            <!-- 表格操作组件 -->
+            <TableHeaderOperation
+              v-model:columns="columnChecks"
+              :loading="tableLoading"
+              :show-delete="false"
+              @add="handleAdd"
+              @refresh="getData"
+            />
+          </div>
+        </template>
+
+        <!-- 表格 -->
+        <ATable
+          :columns="columns"
+          :data-source="tableData"
+          :loading="tableLoading"
+          :pagination="{
+            ...mobilePagination,
+            total: mobilePagination.total,
+            current: searchParams.pageNum,
+            pageSize: searchParams.pageSize,
+            showTotal: (total: number) => `${t('page.portal.total')} ${total} `
+          }"
+          @change="(pagination) => {
+            searchParams.pageNum = pagination.current;
+            searchParams.pageSize = pagination.pageSize;
+            getData();
+          }"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'operate'">
+              <div class="flex items-center justify-center gap-2">
+                <a-tooltip :title="t('common.edit')">
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click="() => handleEdit(record)"
+                  >
+                    <template #icon>
+                      <EditOutlined />
+                    </template>
+                  </a-button>
+                </a-tooltip>
+
+                <a-tooltip :title="t('common.delete')">
+                  <a-button
+                    type="link"
+                    size="small"
+                    class="text-red-500"
+                    @click="() => handleDelete(record)"
+                  >
+                    <template #icon>
+                      <DeleteOutlined />
+                    </template>
+                  </a-button>
+                </a-tooltip>
+              </div>
+            </template>
+          </template>
+        </ATable>
+      </ACard>
+
+      <!-- 添加门户对话框 -->
+      <a-modal
+        v-model:visible="addVisible"
+        :title="t('page.portal.addPortal')"
+        @ok="handleAddConfirm"
+        width="600px"
+      >
+        <a-form
+          :model="addForm"
+          :rules="addRules"
+          :label-col="{ span: 6 }"
+          :wrapper-col="{ span: 16 }"
+          layout="horizontal"
+          ref="formRef"
+        >
+          <a-form-item name="name" :label="t('page.portal.name')">
+            <a-input v-model:value="addForm.name" />
+          </a-form-item>
+
+          <a-form-item name="enable" :label="t('page.portal.enable')">
+            <a-switch v-model:checked="addForm.enable" />
+          </a-form-item>
+
+          <a-form-item name="ssidList" :label="t('page.portal.ssid')">
+            <a-tree-select
+              v-model:value="addForm.ssidList"
+              :tree-data="treeData"
+              :loading="ssidLoading"
+              :placeholder="t('page.portal.selectSsid')"
+              multiple
+              tree-checkable
+              :tree-default-expand-all="true"
+              :show-checked-strategy="TreeSelect.SHOW_CHILD"
+              style="width: 100%"
+            />
+          </a-form-item>
+
+          <!-- 外部Portal服务器配置 -->
+          <a-form-item name="externalPortal" :label="t('page.portal.externalPortal')">
+            <div class="flex-col gap-2">
+              <!-- URL输入框 -->
+              <a-form-item
+                :name="['externalPortal', 'serverUrl']"
+                :label="t('page.portal.url')"
+              >
+                <a-input-group compact>
+                  <a-select
+                    v-model:value="addForm.externalPortal.serverUrlScheme"
+                    style="width: 30%"
+                  >
+                    <a-select-option value="http">http://</a-select-option>
+                    <a-select-option value="https">https://</a-select-option>
+                  </a-select>
+                  <a-input
+                    v-model:value="addForm.externalPortal.serverUrl"
+                    style="width: 70%"
+                    :placeholder="t('page.portal.enterUrl')"
+                  />
+                </a-input-group>
+              </a-form-item>
+            </div>
+          </a-form-item>
+
+          <!-- 身份验证时间配置项，仅在非外部Portal认证时显示 -->
+          <a-form-item
+            v-if="addForm.authType !== 4"
+            name="authTimeout"
+            :label="t('page.portal.authTimeout')"
+          >
+            <a-input-group compact>
+              <a-input-number
+                v-model:value="addForm.authTimeout.customTimeout"
+                style="width: 60%"
+                :min="1"
+                :max="getMaxTimeout(addForm.authTimeout.customTimeoutUnit)"
+              />
+              <a-select
+                v-model:value="addForm.authTimeout.customTimeoutUnit"
+                style="width: 40%"
+              >
+                <a-select-option :value="1">{{ t('page.portal.timeUnit.min') }}</a-select-option>
+                <a-select-option :value="2">{{ t('page.portal.timeUnit.hour') }}</a-select-option>
+                <a-select-option :value="3">{{ t('page.portal.timeUnit.day') }}</a-select-option>
+              </a-select>
+            </a-input-group>
+          </a-form-item>
+
+          <a-form-item name="noAuth" :label="t('page.portal.dailyLimit')">
+            <a-checkbox v-model:checked="addForm.noAuth.dailyLimitEnable">
+              {{ t('page.portal.enableDailyLimit') }}
+            </a-checkbox>
+          </a-form-item>
+
+          <a-form-item name="httpsRedirectEnable" :label="t('page.portal.httpsRedirect')">
+            <a-checkbox v-model:checked="addForm.httpsRedirectEnable">
+              {{ t('page.portal.enableHttpsRedirect') }}
+            </a-checkbox>
+          </a-form-item>
+        </a-form>
+      </a-modal>
+
+      <!-- 添加编辑门户对话框 -->
+      <a-modal
+        v-model:visible="editVisible"
+        :title="t('page.portal.editPortal')"
+        @ok="handleEditConfirm"
+        width="600px"
+      >
+        <a-form
+          :model="editForm"
+          :rules="addRules"
+          :label-col="{ span: 6 }"
+          :wrapper-col="{ span: 16 }"
+          layout="horizontal"
+          ref="editFormRef"
+        >
+          <a-form-item name="name" :label="t('page.portal.name')">
+            <a-input v-model:value="editForm.name" />
+          </a-form-item>
+
+          <a-form-item name="enable" :label="t('page.portal.enable')">
+            <a-switch v-model:checked="editForm.enable" />
+          </a-form-item>
+
+          <a-form-item name="ssidList" :label="t('page.portal.ssid')">
+            <a-tree-select
+              v-model:value="editForm.ssidList"
+              :tree-data="treeData"
+              :loading="ssidLoading"
+              :placeholder="t('page.portal.selectSsid')"
+              multiple
+              tree-checkable
+              :tree-default-expand-all="true"
+              :show-checked-strategy="TreeSelect.SHOW_CHILD"
+              style="width: 100%"
+            />
+          </a-form-item>
+
+          <!-- 外部Portal服务器配置 -->
+          <a-form-item name="externalPortal" :label="t('page.portal.externalPortal')">
+            <div class="flex-col gap-2">
+              <!-- URL输入框 -->
+              <a-form-item
+                :name="['externalPortal', 'serverUrl']"
+                :label="t('page.portal.url')"
+              >
+                <a-input-group compact>
+                  <a-select
+                    v-model:value="editForm.externalPortal.serverUrlScheme"
+                    style="width: 30%"
+                  >
+                    <a-select-option value="http">http://</a-select-option>
+                    <a-select-option value="https">https://</a-select-option>
+                  </a-select>
+                  <a-input
+                    v-model:value="editForm.externalPortal.serverUrl"
+                    style="width: 70%"
+                    :placeholder="t('page.portal.enterUrl')"
+                  />
+                </a-input-group>
+              </a-form-item>
+            </div>
+          </a-form-item>
+
+          <!-- 身份验证时间配置项，仅在非外部Portal认证时显示 -->
+          <a-form-item
+            v-if="editForm.authType !== 4"
+            name="authTimeout"
+            :label="t('page.portal.authTimeout')"
+          >
+            <a-input-group compact>
+              <a-input-number
+                v-model:value="editForm.authTimeout.customTimeout"
+                style="width: 60%"
+                :min="1"
+                :max="getMaxTimeout(editForm.authTimeout.customTimeoutUnit)"
+              />
+              <a-select
+                v-model:value="editForm.authTimeout.customTimeoutUnit"
+                style="width: 40%"
+              >
+                <a-select-option :value="1">{{ t('page.portal.timeUnit.min') }}</a-select-option>
+                <a-select-option :value="2">{{ t('page.portal.timeUnit.hour') }}</a-select-option>
+                <a-select-option :value="3">{{ t('page.portal.timeUnit.day') }}</a-select-option>
+              </a-select>
+            </a-input-group>
+          </a-form-item>
+
+          <a-form-item name="httpsRedirectEnable" :label="t('page.portal.httpsRedirect')">
+            <a-checkbox v-model:checked="editForm.httpsRedirectEnable">
+              {{ t('page.portal.enableHttpsRedirect') }}
+            </a-checkbox>
+          </a-form-item>
+        </a-form>
+      </a-modal>
+    </div>
+  </SimpleScrollbar>
 </template>
+
+<script setup lang="ts">
+import { SimpleScrollbar } from '~/packages/materials/src';
+import { ref, onMounted, watch } from 'vue';
+import { Card as ACard, Table as ATable, message, TreeSelect, Modal } from 'ant-design-vue';
+import { useI18n } from 'vue-i18n';
+import {
+  fetchSiteList,
+  fetchPortalList,
+  fetchSsidList,
+  addPortal,
+  getPortalConfig,
+  updatePortalConfig,
+  deletePortal
+} from '@/service/api/auth';
+import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
+import { useTable } from '@/hooks/common/table';
+import type { TreeSelectProps } from 'ant-design-vue';
+
+const { t } = useI18n();
+
+// 站点相关
+const siteList = ref<Api.Site.SiteInfo[]>([]);
+const selectedSiteId = ref<string>('');
+const siteLoading = ref(false);
+
+// 使用 useTable hook
+const {
+  columns,
+  columnChecks,
+  data: tableData,
+  loading: tableLoading,
+  getData,
+  mobilePagination,
+  searchParams,
+} = useTable<Api.Portal.Portal>({
+  apiFn: async (params) => {
+    if (!selectedSiteId.value) {
+      return {
+        data: {
+          rows: [],
+          total: 0
+        }
+      };
+    }
+    return fetchPortalList(selectedSiteId.value, {
+      pageNum: params.pageNum || 1,
+      pageSize: params.pageSize || 10
+    });
+  },
+  rowKey: 'id',
+  columns: () => [
+    {
+      title: t('page.portal.name'),
+      dataIndex: 'name',
+      key: 'name',
+      width: 150
+    },
+    {
+      title: 'SSID',
+      dataIndex: 'ssidNames',
+      key: 'ssidNames',
+      width: 200,
+      customRender: ({ text }: { text: string[] }) => {
+        return text ? text.join(', ') : '-';
+      }
+    },
+    {
+      title: t('page.portal.authType'),
+      dataIndex: 'authType',
+      key: 'authType',
+      width: 150,
+      customRender: ({ text }: { text: number }) => {
+        const authTypeMap: Record<number, string> = {
+          0: t('page.portal.auth.none'),
+          1: t('page.portal.auth.simplePassword'),
+          2: t('page.portal.auth.externalRadius'),
+          4: t('page.portal.auth.externalPortal'),
+          11: t('page.portal.auth.hotspot'),
+          15: t('page.portal.auth.ldap')
+        };
+        return authTypeMap[text] || text;
+      }
+    },
+    {
+      title: t('common.operate'),
+      key: 'operate',
+      width: 120,
+      fixed: 'right',
+      align: 'center'
+    }
+  ]
+});
+
+// 获取站点列表
+const getSiteList = async () => {
+  siteLoading.value = true;
+  const { data, error } = await fetchSiteList({
+    pageNum: 1,
+    pageSize: 100
+  });
+
+  if (!error) {
+    siteList.value = data.rows || [];
+    // 如果有站点数据，默认选择第一个
+    if (siteList.value.length > 0) {
+      selectedSiteId.value = siteList.value[0].siteId;
+      // 获取第一个站点的数据
+      await getData();
+    }
+  }
+  siteLoading.value = false;
+};
+
+// 处理站点变更
+const handleSiteChange = async (value: string) => {
+  selectedSiteId.value = value;
+  await getData();
+};
+
+// 组件挂载时获取站点列表
+onMounted(() => {
+  getSiteList();
+});
+
+// 添加表单相关
+const addVisible = ref(false);
+const formRef = ref();
+const ssidList = ref<Api.Portal.SsidInfo[]>([]);
+const ssidLoading = ref(false);
+const treeData = ref<TreeSelectProps['treeData']>([]);
+
+// URL 格式校验正则
+const URL_PATTERN = new RegExp(
+  '^(([-a-zA-Z0-9@:%._+~#=]{2,256}\\.[a-z]{2,63})|(((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\\.)){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)))' +
+  '((:([1-9]|[1-9]\\d|[1-9]\\d{2}|[1-9]\\d{3}|[1-5]\\d{4}|6[0-4]\\d{3}|65[0-4]\\d{2}|655[0-2]\\d|6553[0-5]))?)' +
+  '(/[-a-zA-Z0-9@:%_+.~#?&//=]*)?$'
+);
+
+const addForm = ref({
+  name: '',
+  enable: true,
+  ssidList: [],
+  authType: 4,  // 固定为外部 Portal 认证
+  authTimeout: {
+    customTimeout: 8,
+    customTimeoutUnit: 2
+  },
+  noAuth: {
+    dailyLimitEnable: false
+  },
+  httpsRedirectEnable: false,
+  landingPage: 1,
+  pageType: 2,
+  importedPortalPage: {
+    id: 'test'
+  },
+  externalPortal: {
+    hostType: 2,
+    serverUrl: '',
+    serverUrlScheme: 'http'
+  }
+});
+
+const addRules = {
+  name: [
+    { required: true, message: t('page.portal.nameRequired'), trigger: 'blur' }
+  ],
+  ssidList: [
+    {
+      validator: (_rule: any, value: Record<string, string>) => {
+        if (Object.keys(value).length === 0) {
+          return Promise.reject(t('page.portal.ssidRequired'));
+        }
+        return Promise.resolve();
+      },
+      trigger: 'change'
+    }
+  ],
+  externalPortal: [
+    {
+      validator: (_rule: any, value: Api.Portal.ExternalPortal) => {
+        if (addForm.value.authType === 4) {
+          if (!value.serverUrl) {
+            return Promise.reject(t('page.portal.urlRequired'));
+          }
+          // URL 格式校验
+          if (!URL_PATTERN.test(value.serverUrl)) {
+            return Promise.reject(t('page.portal.invalidUrl'));
+          }
+        }
+        return Promise.resolve();
+      }
+    }
+  ]
+};
+
+// 获取 SSID 列表
+const getSsidList = async () => {
+  if (!selectedSiteId.value) return;
+
+  ssidLoading.value = true;
+  const { data, error } = await fetchSsidList(selectedSiteId.value);
+
+  if (!error) {
+    // 转换数据为树形结构
+    treeData.value = data.map((group: Api.Portal.WlanGroup) => ({
+      title: group.wlanName,
+      value: group.wlanId, // 这个值不会被选中,只是为了符合树结构
+      key: group.wlanId,
+      selectable: false, // 禁止选择父节点
+      children: group.ssidList.map((ssid: Api.Portal.SsidInfo) => ({
+        title: ssid.ssidName,
+        value: ssid.ssidId,
+        key: ssid.ssidId,
+        isLeaf: true
+      }))
+    }));
+  } else {
+    message.error(t('common.error'));
+  }
+
+  ssidLoading.value = false;
+};
+
+// 根据时间单位获取最大超时时间
+const getMaxTimeout = (unit: number) => {
+  switch (unit) {
+    case 1: return 1000000; // 分钟
+    case 2: return 10000;   // 小时
+    case 3: return 1000;    // 天
+    default: return 1000000;
+  }
+};
+
+// 处理添加
+const handleAdd = async () => {
+  addVisible.value = true;
+  await getSsidList();
+};
+
+// 修改添加确认处理函数
+const handleAddConfirm = async () => {
+  await formRef.value?.validate();
+
+  const hide = message.loading(t('common.loading'), 0);
+
+  // 创建一个新对象来存储要提交的数据
+  const submitData = { ...addForm.value };
+
+  // 设置默认参数
+  submitData.authTimeout = {
+    customTimeout: 8,
+    customTimeoutUnit: 2
+  };
+  submitData.externalPortal = {
+    hostType: 2,
+    serverUrl: submitData.externalPortal.serverUrl,
+    serverUrlScheme: submitData.externalPortal.serverUrlScheme
+  };
+
+  const { error } = await addPortal(selectedSiteId.value, submitData);
+
+  hide();
+  if (!error) {
+    message.success(t('page.portal.addSuccess'));
+    addVisible.value = false;
+    getData(); // 刷新列表
+  }
+};
+
+// 添加响应式变量
+const currentPortalId = ref<string>('');
+const editVisible = ref(false);
+const editFormRef = ref();
+const editForm = ref({
+  name: '',
+  enable: true,
+  ssidList: [],
+  authType: 4,  // 固定为外部 Portal 认证
+  authTimeout: {
+    customTimeout: 8,
+    customTimeoutUnit: 2
+  },
+  httpsRedirectEnable: false,
+  landingPage: 1,
+  pageType: 2,
+  importedPortalPage: {
+    id: 'test'
+  },
+  externalPortal: {
+    hostType: 2,
+    serverUrl: '',
+    serverUrlScheme: 'http'
+  }
+});
+
+// 处理编辑按钮点击
+const handleEdit = async (record: Api.Portal.Portal) => {
+  currentPortalId.value = record.id;
+  editVisible.value = true;
+
+  // 获取 SSID 列表
+  await getSsidList();
+
+  // 获取当前门户的配置
+  const hide = message.loading(t('common.loading'), 0);
+  const { data, error } = await getPortalConfig(selectedSiteId.value, currentPortalId.value);
+  hide();
+
+  if (!error && data) {
+    // 移除 noAuth 字段后再赋值
+    const { noAuth, ...configWithoutNoAuth } = data;
+    editForm.value = configWithoutNoAuth;
+  }
+};
+
+// 修改编辑确认处理函数
+const handleEditConfirm = async () => {
+  await editFormRef.value?.validate();
+
+  const hide = message.loading(t('common.loading'), 0);
+
+  const submitData = {
+    name: editForm.value.name,
+    enable: editForm.value.enable,
+    ssidList: editForm.value.ssidList,
+    authType: 4,  // 固定为外部 Portal 认证
+    httpsRedirectEnable: editForm.value.httpsRedirectEnable,
+    landingPage: 1,
+    pageType: 2,
+    importedPortalPage: {
+      id: 'test'
+    },
+    authTimeout: {
+      customTimeout: 8,
+      customTimeoutUnit: 2
+    },
+    externalPortal: {
+      hostType: 2,
+      serverUrl: editForm.value.externalPortal.serverUrl,
+      serverUrlScheme: editForm.value.externalPortal.serverUrlScheme
+    }
+  };
+
+  const { error } = await updatePortalConfig(selectedSiteId.value, currentPortalId.value, submitData);
+
+  hide();
+  if (!error) {
+    message.success(t('page.portal.updateSuccess'));
+    editVisible.value = false;
+    getData(); // 刷新列表
+  }
+};
+
+// 添加删除门户的 API 函数
+const handleDelete = (record: Api.Portal.Portal) => {
+  Modal.confirm({
+    title: t('page.portal.confirmDelete'),
+    content: t('page.portal.deleteConfirmContent', { name: record.name }),
+    okText: t('common.confirm'),
+    cancelText: t('common.cancel'),
+    onOk: async () => {
+      const hide = message.loading(t('common.loading'), 0);
+      const { error } = await deletePortal(selectedSiteId.value, record.id);
+      hide();
+
+      if (!error) {
+        message.success(t('page.portal.deleteSuccess'));
+        getData(); // 刷新列表
+      }
+    }
+  });
+};
+</script>
+
+<style scoped>
+.card-wrapper {
+  margin-top: 16px;
+}
+</style>