feat(ip-list): 优化 IP列表和新增页面

-重构 IP 列表页面，使用 computed 计算属性优化 gatewayGroupId
- 在 IP 新增页面添加标签和归属地字段
- 初始化表单数据，避免 undefined

web/src/pages/menu/components/ip-list-modal.vue

@@ -11,9 +11,11 @@ const isEdit = computed(() => !!formState.id)
 const title = computed(() => isEdit.value ? '编辑IP' : '新增IP')
 
 const formState = reactive({
-  id: undefined,
-  gatewayGroupId: undefined,
+  id: 0,
+  gatewayGroupId: 0,
   ip: '',
+  tag: '',
+  originPlace: '',
   comment: '',
 })
 
@@ -60,6 +62,12 @@ defineExpose({ open })
       <a-form-item label="IP地址" v-bind="validateInfos.ip">
         <a-input v-model:value="formState.ip" placeholder="请输入IP地址" />
       </a-form-item>
+      <a-form-item label="标签">
+        <a-input v-model:value="formState.tag" placeholder="请输入标签" />
+      </a-form-item>
+      <a-form-item label="归属地">
+        <a-input v-model:value="formState.originPlace" placeholder="请输入归属地" />
+      </a-form-item>
       <a-form-item label="备注">
         <a-input v-model:value="formState.comment" placeholder="请输入备注" />
       </a-form-item>

web/src/pages/menu/ip-list.vue

@@ -8,6 +8,7 @@ import { useTableQuery } from '~@/composables/table-query'
 
 const route = useRoute()
 const message = useMessage()
+const gatewayGroupId = Number(route.query.id)
 
 const columns = shallowRef([
   { title: 'ID', dataIndex: 'id', key: 'id' },
@@ -23,7 +24,7 @@ const columns = shallowRef([
 const { state, initQuery, resetQuery, query } = useTableQuery({
   queryApi: getListApi,
   queryParams: {
-    gatewayGroupId: route.query.id,
+    gatewayGroupId: gatewayGroupId,
     ip: undefined,
   },
   afterQuery: (res) => {
@@ -52,7 +53,7 @@ async function handleDelete(record) {
 }
 
 function handleAdd() {
-  crudTableModal.value?.open({ gatewayGroupId: route.query.id })
+  crudTableModal.value?.open({ gatewayGroupId: gatewayGroupId })
 }
 
 function handleEdit(record) {