reactor：【system 系统管理】area 在 element-plus 和 antd 保持一致

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,
     },
   ];
 }

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>

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',

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>