18278715334@163.com

src/api/index.js

@@ -229,9 +229,15 @@ export const apiKeysApi = {
 
 export const whiteListApi = {
   // 获取用户白名单列表 (需认证)
-  getWhiteList: () => request.get('/white-list'),
+  getWhiteList: (remark = '') => {
+    const params = {}
+    if (remark) {
+      params.remark = remark
+    }
+    return request.get('/white-list', { params })
+  },
   // 添加白名单IP (需认证)
-  addWhiteListIP: (ipAddress) => request.post('/white-list', { ip_address: ipAddress }),
+  addWhiteListIP: (ipAddress, remark = '') => request.post('/white-list', { ip_address: ipAddress, remark: remark }),
   // 删除白名单IP (需认证)
   deleteWhiteListIP: (ipAddress) => request.delete(`/white-list/${encodeURIComponent(ipAddress)}`)
 }

src/pages/api/WhiteList.vue

@@ -26,18 +26,18 @@
           </el-input>
         </FilterItem>
 
-        <FilterItem label="状态筛选">
-          <el-select
-            v-model="filters.status"
-            placeholder="选择状态"
+        <FilterItem label="备注搜索">
+          <el-input
+            v-model="filters.remark"
+            placeholder="输入备注关键词进行搜索"
             clearable
-            @change="handleFilterChange"
+            @input="handleSearch"
             class="w-full"
           >
-            <el-option label="全部" value="" />
-            <el-option label="已添加" value="active" />
-            <el-option label="待添加" value="pending" />
-          </el-select>
+            <template #prefix>
+              <DocumentTextIcon class="w-4 h-4 text-gray-400" />
+            </template>
+          </el-input>
         </FilterItem>
 
         <template #stats>
@@ -89,6 +89,12 @@
             </template>
           </el-table-column>
 
+          <el-table-column prop="remark" label="备注" min-width="150">
+            <template #default="{ row }">
+              <span class="text-sm text-gray-600">{{ row.remark || '-' }}</span>
+            </template>
+          </el-table-column>
+
           <el-table-column label="状态" width="120">
             <template #default>
               <el-tag type="success" size="small">
@@ -140,6 +146,18 @@
             </el-input>
           </el-form-item>
 
+          <el-form-item label="备注" prop="remark">
+            <el-input
+              v-model="addForm.remark"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入备注信息（可选）"
+              :disabled="whiteListData.length >= 10"
+              maxlength="200"
+              show-word-limit
+            />
+          </el-form-item>
+
           <el-form-item v-if="whiteListData.length >= 10">
             <el-alert
               title="白名单已满"
@@ -223,6 +241,7 @@ import { useCertification } from '@/composables/useCertification'
 import {
   CalendarIcon,
   ComputerDesktopIcon,
+  DocumentTextIcon,
   PlusIcon,
   QuestionMarkCircleIcon,
   ShieldCheckIcon,
@@ -249,13 +268,14 @@ const showAddForm = ref(false)
 
 // 表单数据
 const addForm = reactive({
-  ipAddress: ''
+  ipAddress: '',
+  remark: ''
 })
 
 // 筛选条件
 const filters = reactive({
   keyword: '',
-  status: ''
+  remark: ''
 })
 
 // 表单验证规则
@@ -282,7 +302,7 @@ onMounted(() => {
 const loadWhiteList = async () => {
   loading.value = true
   try {
-    const response = await callProtectedAPI(whiteListApi.getWhiteList)
+    const response = await callProtectedAPI(() => whiteListApi.getWhiteList(filters.remark))
     if (response) {
       whiteListData.value = response.data.items || []
     } else {
@@ -316,10 +336,11 @@ const handleAddIP = async () => {
 
   addLoading.value = true
   try {
-    const response = await callProtectedAPI(whiteListApi.addWhiteListIP, addForm.ipAddress)
+    const response = await callProtectedAPI(whiteListApi.addWhiteListIP, addForm.ipAddress, addForm.remark)
     if (response) {
       ElMessage.success('添加IP地址成功')
       addForm.ipAddress = ''
+      addForm.remark = ''
       showAddForm.value = false
       await loadWhiteList()
     }
@@ -366,11 +387,6 @@ const handleDeleteIP = async (ipAddress) => {
   }
 }
 
-// 处理筛选变化
-const handleFilterChange = () => {
-  loadWhiteList()
-}
-
 // 处理搜索
 const handleSearch = () => {
   if (searchTimer) {
@@ -384,7 +400,7 @@ const handleSearch = () => {
 // 重置筛选
 const resetFilters = () => {
   filters.keyword = ''
-  filters.status = ''
+  filters.remark = ''
   loadWhiteList()
 }