From 8d93c843ad50c277e3c37f8ed0bf1b2a895164d4 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 5 Sep 2025 23:27:12 +0800
Subject: [PATCH] =?UTF-8?q?reactor=EF=BC=9A=E3=80=90system=20=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E7=AE=A1=E7=90=86=E3=80=91area=20=E5=9C=A8=20element-?=
 =?UTF-8?q?plus=20=E5=92=8C=20antd=20=E4=BF=9D=E6=8C=81=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/system/area/data.ts   |  2 ++
 apps/web-antd/src/views/system/area/index.vue | 19 +++++++++++--------
 apps/web-ele/src/views/system/area/data.ts    |  4 +++-
 apps/web-ele/src/views/system/area/index.vue  | 19 +++++++++++--------
 4 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/apps/web-antd/src/views/system/area/data.ts b/apps/web-antd/src/views/system/area/data.ts
index 0f79f576a..e6cc06c99 100644
--- a/apps/web-antd/src/views/system/area/data.ts
+++ b/apps/web-antd/src/views/system/area/data.ts
@@ -34,6 +34,7 @@ export function useGridColumns(): VxeTableGridOptions<SystemAreaApi.Area>['colum
     {
       field: 'id',
       title: '地区编码',
+      minWidth: 120,
       align: 'left',
       fixed: 'left',
       treeNode: true,
@@ -41,6 +42,7 @@ export function useGridColumns(): VxeTableGridOptions<SystemAreaApi.Area>['colum
     {
       field: 'name',
       title: '地区名称',
+      minWidth: 200,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/system/area/index.vue b/apps/web-antd/src/views/system/area/index.vue
index 96159c0c8..a2b0cccb5 100644
--- a/apps/web-antd/src/views/system/area/index.vue
+++ b/apps/web-antd/src/views/system/area/index.vue
@@ -2,11 +2,8 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { Search } from '@vben/icons';
 
-import { Button } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getAreaTree } from '#/api/system/area';
 
 import { useGridColumns } from './data';
@@ -65,10 +62,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="地区列表">
       <template #toolbar-tools>
-        <Button type="primary" @click="handleQueryIp">
-          <Search class="size-5" />
-          IP 查询
-        </Button>
+        <TableAction
+          :actions="[
+            {
+              label: 'IP 查询',
+              type: 'primary',
+              icon: ACTION_ICON.SEARCH,
+              onClick: handleQueryIp,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>
diff --git a/apps/web-ele/src/views/system/area/data.ts b/apps/web-ele/src/views/system/area/data.ts
index 48339f19e..e6cc06c99 100644
--- a/apps/web-ele/src/views/system/area/data.ts
+++ b/apps/web-ele/src/views/system/area/data.ts
@@ -2,6 +2,8 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemAreaApi } from '#/api/system/area';
 
+import { z } from '#/adapter/form';
+
 /** 查询 IP 的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -12,7 +14,7 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入 IP 地址',
       },
-      rules: 'required',
+      rules: z.string().ip({ message: '请输入正确的 IP 地址' }),
     },
     {
       fieldName: 'result',
diff --git a/apps/web-ele/src/views/system/area/index.vue b/apps/web-ele/src/views/system/area/index.vue
index 59b242da6..c8495ce2a 100644
--- a/apps/web-ele/src/views/system/area/index.vue
+++ b/apps/web-ele/src/views/system/area/index.vue
@@ -2,11 +2,8 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { Search } from '@vben/icons';
 
-import { ElButton } from 'element-plus';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getAreaTree } from '#/api/system/area';
 
 import { useGridColumns } from './data';
@@ -65,10 +62,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="onRefresh" />
     <Grid table-title="地区列表">
       <template #toolbar-tools>
-        <ElButton type="primary" @click="onQueryIp">
-          <Search class="mr-2 size-5" />
-          IP 查询
-        </ElButton>
+        <TableAction
+          :actions="[
+            {
+              label: 'IP 查询',
+              type: 'primary',
+              icon: ACTION_ICON.SEARCH,
+              onClick: onQueryIp,
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>