feat(menu): 优化菜单列表页面

- 添加表格排序功能
- 增加 IP、订单 ID 和区域筛选条件
- 优化查询参数初始化
- 调整表单布局和样式
- 完善表格变更事件处理

web/src/pages/menu/menu1.vue

@@ -71,6 +71,7 @@ const columns = shallowRef([
     dataIndex: 'createdAt',
     key: 'createdAt',
     width: 180,
+    sorter: true,
     customRender: ({ text }) => text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '',
   },
   {
@@ -91,8 +92,13 @@ const columns = shallowRef([
 const { state, initQuery, resetQuery, query } = useTableQuery({
   queryApi: getListApi,
   queryParams: {
-    name: undefined,
-    comment: undefined,
+    name: '',
+    ip: '',
+    hostId: null,
+    nodeArea: '',
+    comment: '',
+    column: '',
+    order: '',
   },
   afterQuery: (res) => {
     if (!res || !Array.isArray(res.records)) {
@@ -102,6 +108,17 @@ const { state, initQuery, resetQuery, query } = useTableQuery({
   },
 })
 const crudTableModal = ref()
+function handleTableChange(pagination, filters, sorter) {
+  if (sorter.field === 'createdAt' && sorter.order) {
+    state.queryParams.column = 'createTime'
+    state.queryParams.order = sorter.order === 'ascend' ? 'asc' : 'desc'
+  } else {
+    state.queryParams.column = ''
+    state.queryParams.order = ''
+  }
+  query()
+}
+
 const selectedRowKeys = ref([])
 
 const rowSelection = computed(() => {
@@ -163,19 +180,38 @@ function handleViewIpList(record) {
   <page-container>
     <a-card class="mb-4">
       <a-form class="system-crud-wrapper" :label-col="{ span: 7 }" :model="state.queryParams">
-        <a-row :gutter="[15, 0]">
+        <a-row :gutter="[15, 15]">
           <a-col :xs="24" :sm="12" :md="8" :lg="6">
-            <a-form-item name="name" label="名称">
+            <a-form-item label="名称">
               <a-input v-model:value="state.queryParams.name" placeholder="请输入名称" />
             </a-form-item>
           </a-col>
           <a-col :xs="24" :sm="12" :md="8" :lg="6">
-            <a-form-item name="comment" label="备注">
+            <a-form-item label="IP">
+              <a-input v-model:value="state.queryParams.ip" placeholder="请输入IP" />
+            </a-form-item>
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="8" :lg="6">
+            <a-form-item label="订单ID">
+              <a-input-number v-model:value="state.queryParams.hostId" placeholder="请输入订单ID" class="w-full" />
+            </a-form-item>
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="8" :lg="6">
+            <a-form-item label="区域">
+              <a-select v-model:value="state.queryParams.nodeArea" placeholder="请选择区域">
+                <a-select-option value="">全部</a-select-option>
+                <a-select-option value="宁波">宁波</a-select-option>
+                <a-select-option value="香港">香港</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="8" :lg="6">
+            <a-form-item label="备注">
               <a-input v-model:value="state.queryParams.comment" placeholder="请输入备注" />
             </a-form-item>
           </a-col>
           <a-col :xs="24" :sm="12" :md="8" :lg="6">
-            <a-space flex justify-end w-full>
+            <a-space flex justify-end w-full size="middle">
               <a-button :loading="state.loading" type="primary" @click="initQuery">
                 查询
               </a-button>
@@ -212,6 +248,7 @@ function handleViewIpList(record) {
         bordered
         striped
         :scroll="{ x: 1820 }"
+        @change="handleTableChange"
       >
         <template #bodyCell="scope">
           <template v-if="scope?.column?.dataIndex === 'action'">