feat: 优化系统模块样式

src/components/table/use-table.tsx

@@ -191,7 +191,7 @@ export const useTable = (optionsOrFn: UseTableOptions | (() => UseTableOptions))
           }
         }
       }
-      const merged = merge({}, options.create, options.modify);
+      const merged = merge({ modalProps: { titleAlign: 'start', closable: false } }, options.create, options.modify);
       options.modify = useFormModal(merged as any) as any;
     } else {
       options.modify = useFormModal(options.modify as any) as any;

src/pages/my/index.vue

@@ -225,7 +225,7 @@ const user = reactive({
   "meta": {
     "sort": 30401,
     "title": "个人设置",
-    "icon": "icon-park-outline-user"
+    "icon": "icon-park-outline-config"
   }
 }
 </route>

src/pages/post/index.vue

@@ -2,12 +2,18 @@
   <div class="m-4 p-4 bg-white">
     <Table v-bind="table">
       <template #action>
-        <a-button type="outline" @click="model.visible = true">
+        <a-button @click="model.visible = true">
           <template #icon>
-            <i class="icon-park-outline-export"></i>
+            <i class="icon-park-outline-download"></i>
           </template>
           导出
         </a-button>
+        <a-button @click="model.visible = true">
+          <template #icon>
+            <i class="icon-park-outline-upload"></i>
+          </template>
+          导入
+        </a-button>
       </template>
     </Table>
     <a-modal title="导出为文件" v-model:visible="model.visible" title-align="start">
@@ -46,6 +52,12 @@
         </a-form-item>
       </a-form>
     </a-modal>
+    <a-modal title="导入文件" :visible="false" title-align="start">
+      <a-alert>
+        请按照 <a-link>上传模板</a-link> 中的格式进行填写，上传文件后系统将自动导入数据
+      </a-alert>
+      <a-upload draggable class="mt-4"></a-upload>
+    </a-modal>
   </div>
 </template>
 

src/pages/system/role/index.vue

@@ -97,7 +97,7 @@ const table = useTable({
         type: "textarea",
       },
       {
-        field: "permissions",
+        field: "permissionIds",
         label: "关联权限",
         type: "select",
         options: () => api.permission.getPermissions(),

src/pages/system/user/index.vue

@@ -81,7 +81,7 @@ const table = useTable({
         },
         nodeProps: {
           placeholder: "输入用户昵称关键字",
-        }
+        },
       },
     ],
   },
@@ -101,7 +101,7 @@ const table = useTable({
     },
     formProps: {
       layout: "vertical",
-      class: "!grid grid-cols-2 gap-x-3",
+      class: "!grid grid-cols-2 gap-x-6",
     },
     items: [
       {
@@ -118,7 +118,10 @@ const table = useTable({
       {
         field: "description",
         label: "个人描述",
-        type: "input",
+        type: "textarea",
+        itemProps: {
+          class: 'col-span-2'
+        }
       },
       {
         field: "password",
@@ -126,15 +129,25 @@ const table = useTable({
         type: "password",
       },
       {
-        label: "头像",
+        field: "roleIds",
-        field: "avatar",
+        label: "关联角色",
         type: "select",
+        options: () => api.role.getRoles(),
+        nodeProps: {
+          multiple: true,
+        },
       },
       {
-        field: "[startTime,endTime]",
+        label: "头像",
-        label: "日期范围",
+        field: "avatarId",
-        type: "dateRange",
+        type: "custom",
-        nodeProps: {},
+        component: ({ field, model }) => {
+          return (
+            <Avatar size={40}>
+              <img src={model?.[field]} alt="" />
+            </Avatar>
+          );
+        },
       },
     ],
     submit: ({ model }) => {

src/types/auto-component.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AAlert: typeof import('@arco-design/web-vue')['Alert']
     AAvatar: typeof import('@arco-design/web-vue')['Avatar']
     ABadge: typeof import('@arco-design/web-vue')['Badge']
     ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
@@ -50,6 +51,7 @@ declare module '@vue/runtime-core' {
     ATextarea: typeof import('@arco-design/web-vue')['Textarea']
     ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
     ATree: typeof import('@arco-design/web-vue')['Tree']
+    AUpload: typeof import('@arco-design/web-vue')['Upload']
     BreadCrumb: typeof import('./../components/breadcrumb/bread-crumb.vue')['default']
     BreadPage: typeof import('./../components/breadcrumb/bread-page.vue')['default']
     Page403: typeof import('./../components/error/page-403.vue')['default']