feat: 优化表格样式

src/components/table/more_item.vue

 <template>
-    <div>
-        <label>{{ label }}</label>
+    <div class="tw-flex tw-items-center tw-flex-1 tw-pr-3" :class="$style.container">
+        <label :class="$style.label">{{ label }}</label>
         <slot />
     </div>
 </template>
@@ -12,3 +12,19 @@ export default {
     },
 };
 </script>
+
+<style module lang="less">
+.container:last-child {
+    min-width: 250px;
+}
+.label {
+    color: rgba(0, 0, 0, 0.85);
+    width: 6em;
+    text-align: right;
+    margin-right: 1em;
+
+    &::after {
+        content: ':';
+    }
+}
+</style>

src/components/table/table.vue

 <template>
-    <div>
+    <div :style="`min-width: ${width}px`" class="tw-overflow-x-auto">
         <my-card v-if="$scopedSlots.search" class="tw-mb-2.5">
-            <a-form-model :model="queryForm" layout="inline">
+            <div class="tw-flex">
                 <slot name="search" :query="queryForm" />
-            </a-form-model>
+            </div>
 
             <div class="tw-text-right tw-mt-2">
                 <a-space>
@@ -97,6 +97,7 @@ export default {
         },
         noPadding: Boolean,
         scroll: Object,
+        width: { type: Number, default: 900 },
     },
 
     data() {
@@ -228,20 +229,7 @@ export default {
     padding: 15px 0 0 0;
 
     > div {
-        display: flex;
-        align-items: center;
         @apply tw-mb-3;
-
-        > label {
-            color: rgba(0, 0, 0, 0.85);
-            width: 6em;
-            text-align: right;
-            margin-right: 1em;
-
-            &::after {
-                content: ':';
-            }
-        }
     }
 }
 </style>

src/pages/frame/layouts/PageLayout.vue

 <template>
-    <div class="page-layout">
+    <div class="page-layout tw-overflow-x-auto">
         <page-header
             ref="pageHeader"
             :style="`margin-top: ${multiPage ? 0 : -24}px`"
@@ -79,11 +79,11 @@ export default {
         ...mapMutations('settingModule', ['correctPageMinHeight']),
         getRouteBreadcrumb() {
             const path = this.$route.path;
-            const currentMenu = this.menuList.find(m => m.menuUrl === path);
+            const currentMenu = this.menuList.find((m) => m.menuUrl === path);
             let parentMenuId = currentMenu.parentMenuId;
             const breadcrumb = [currentMenu.menuName];
             while (parentMenuId !== 0) {
-                const parentMenu = this.menuList.find(m => m.menuId === parentMenuId);
+                const parentMenu = this.menuList.find((m) => m.menuId === parentMenuId);
                 breadcrumb.unshift(parentMenu.menuName);
                 parentMenuId = parentMenu.parentMenuId;
             }

src/pages/xunjian/task_managment/center/detail.vue

 <template>
     <Wraper :hidden="hidden" noFooter>
-        <Table :url="tableUrl" rowKey="taskId" noPadding :buttons="buttons" :scroll="scroll">
+        <Table :url="tableUrl" rowKey="taskId" noPadding :buttons="buttons" :scroll="scroll" :width="600">
             <template #search="{ query }">
-                <a-form-model-item label="开始时间">
+                <MoreItem label="开始时间">
                     <a-date-picker
                         class="tw-w-full"
                         show-time
                         v-model="query.startTime"
                         valueFormat="YYYY-MM-DD HH:mm:ss"
                     />
-                </a-form-model-item>
-                <a-form-model-item label="结束时间">
+                </MoreItem>
+                <MoreItem label="结束时间">
                     <a-date-picker
                         class="tw-w-full"
                         show-time
                         v-model="query.endTime"
                         valueFormat="YYYY-MM-DD HH:mm:ss"
                     />
-                </a-form-model-item>
+                </MoreItem>
             </template>
 
             <template #moreSearch="{ query }">

src/pages/xunjian/task_managment/center/index.vue

@@ -9,31 +9,31 @@
         :drawerWidth="800"
     >
         <template #search="{ query }">
-            <a-form-model-item label="开始时间">
+            <MoreItem label="开始时间">
                 <a-date-picker
                     class="tw-w-full"
                     show-time
                     v-model="query.startTime"
                     valueFormat="YYYY-MM-DD HH:mm:ss"
                 />
-            </a-form-model-item>
-            <a-form-model-item label="结束时间">
+            </MoreItem>
+
+            <MoreItem label="结束时间">
                 <a-date-picker
                     class="tw-w-full"
                     show-time
                     v-model="query.endTime"
                     valueFormat="YYYY-MM-DD HH:mm:ss"
                 />
-            </a-form-model-item>
-            <a-form-model-item label="地区">
+            </MoreItem>
+            <MoreItem label="地区">
                 <RequestSelect
-                    style="width: 220px"
                     :request="getAreaListDataApi"
                     v-model="query.regionId"
                     labelFiled="regionName"
                     valueFiled="regionId"
                 />
-            </a-form-model-item>
+            </MoreItem>
         </template>
 
         <template #moreSearch="{ query }">
@@ -157,7 +157,16 @@ import Detail from './detail.vue';
 import MoreItem from '@/components/table/more_item.vue';
 
 export default {
-    components: { Table, Form, RequestSelect, UrlSelect, SearchSelect, Progress, Detail, MoreItem },
+    components: {
+        Table,
+        Form,
+        RequestSelect,
+        UrlSelect,
+        SearchSelect,
+        Progress,
+        Detail,
+        MoreItem,
+    },
     data() {
         return {
             getAreaListDataApi,