feat: 优化页面

src/components/table/table.config.tsx

@@ -1,4 +1,4 @@
-import { Button, Link } from "@arco-design/web-vue";
+import { Button } from "@arco-design/web-vue";
 import { IconRefresh, IconSearch } from "@arco-design/web-vue/es/icon";
 
 export const config = {
@@ -25,7 +25,7 @@ export const config = {
               {{ icon: () => <IconRefresh></IconRefresh>, default: () => "重置" }}
             </Button>
           )}
-          <Button type="outline" loading={tableRef?.loading.value} onClick={() => tableRef?.loadData()}>
+          <Button type="primary" loading={tableRef?.loading.value} onClick={() => tableRef?.loadData()}>
             {{ icon: () => <IconSearch></IconSearch>, default: () => "查询" }}
           </Button>
         </div>

src/components/table/table.tsx

@@ -166,9 +166,13 @@ export const Table = defineComponent({
         )}
 
         <div class={`mb-3 flex justify-between ${!this.inlined && "mt-2"}`}>
-          <div class="flex-1 flex gap-2">
+          <div class={`${this.create || this.$slots.action ? null : '!hidden'} flex-1 flex gap-2 `}>
             {this.create && (
-              <FormModal ref="createRef" onSubmited={this.reloadData} {...(this.create as any)}></FormModal>
+              <FormModal 
+                {...(this.create as any)}
+                ref="createRef" 
+                onSubmited={this.reloadData} 
+              ></FormModal>
             )}
             {this.modify && (
               <FormModal
@@ -180,7 +184,9 @@ export const Table = defineComponent({
             )}
             {this.$slots.action?.()}
           </div>
-          <div>{this.inlined && <Form ref="searchRef" {...this.search}></Form>}</div>
+          <div>
+            {this.inlined && <Form ref="searchRef" {...this.search}></Form>}
+          </div>
         </div>
 
         <BaseTable

src/pages/demo/index.vue

@@ -8,19 +8,37 @@
       <template #extra>
         <a-checkbox>全部选择</a-checkbox>
       </template>
-      <a-tree :data="items" :block-node="true" :field-names="{ title: 'title' }" checkable :default-expand-all="true">
-        <template #extra="nodeData">
-          <div class="flex-1 flex justify-end px-1">
-            <a-tag v-if="nodeData.children" color="orange">菜单</a-tag>
-            <a-tag v-else color="green">页面</a-tag>
-          </div>
-        </template>
-      </a-tree>
     </a-card>
+    <a-modal :visible="true" :width="1280" :title="'选择素材'" title-align="start" :closable="false">
+      <div class="w-full h-[600px] flex gap-4">
+        <div class="w-64 p-2 pr-4 border">
+          <a-input-search placeholder="请输入关键字"></a-input-search>
+          <a-tree
+            :data="items"
+            :block-node="true"
+            :field-names="{ title: 'title' }"
+            :default-expand-all="true"
+            class="mt-2"
+          >
+            <template #extra="nodeData">
+              <div class="text-slate-400 mr-2">
+                10
+              </div>
+            </template>
+          </a-tree>
+        </div>
+        <div class="flex-1 h-full">
+          <Table v-bind="table"></Table>
+        </div>
+      </div>
+    </a-modal>
   </bread-page>
 </template>
 
 <script setup lang="tsx">
+import { api } from '@/api';
+import { Table, useTable } from '@/components';
+import { dayjs } from '@/libs/dayjs';
 import { menus } from "@/router";
 import { cloneDeep } from "lodash-es";
 
@@ -30,7 +48,6 @@ for (const item of items) {
   if (item.icon) {
     const icon = item.icon;
     item.icon = () => <i class={icon}></i>;
-
   }
   item.switcherIcon = () => null;
   if (item.children) {
@@ -64,14 +81,125 @@ const onItemChange = (item: any, menu: any) => {
     menu.checked = true;
   }
 };
+
+const table = useTable({
+  data: async (model, paging) => {
+    return api.role.getRoles();
+  },
+  columns: [
+    {
+      title: "角色名称",
+      dataIndex: "username",
+      width: 180,
+      render({ record }) {
+        return (
+          <div class="flex flex-col overflow-hidden">
+            <span>{record.name}</span>
+            <span class="text-gray-400 text-xs truncate">{record.slug}</span>
+          </div>
+        );
+      },
+    },
+    {
+      title: "角色描述",
+      dataIndex: "description",
+    },
+    {
+      title: "创建时间",
+      dataIndex: "createdAt",
+      width: 200,
+      render: ({ record }) => dayjs(record.createdAt).format(),
+    },
+    {
+      title: "操作",
+      type: "button",
+      width: 184,
+      buttons: [
+        {
+          type: "modify",
+          text: "修改",
+        },
+        {
+          text: '分配权限',
+          onClick: ({ record }) => {
+            console.log(record);
+          },
+        },
+        {
+          text: "删除",
+          type: "delete",
+          onClick: ({ record }) => {
+            return api.role.delRole(record.id);
+          },
+        }
+      ],
+    },
+  ],
+  search: {
+    items: [
+      {
+        extend: "name",
+        required: false,
+        nodeProps: {
+          placeholder: '请输入角色名称'
+        },
+        itemProps: {
+          hideLabel: true,
+        }
+      },
+    ],
+  },
+  create: {
+    title: "新建角色",
+    modalProps: {
+      width: 580,
+      maskClosable: false,
+    },
+    formProps: {
+      layout: "vertical",
+    },
+    items: [
+      {
+        field: "name",
+        label: "角色名称",
+        type: "input",
+        required: true,
+      },
+      {
+        field: "slug",
+        label: "角色标识",
+        type: "input",
+      },
+      {
+        field: "description",
+        label: "个人描述",
+        type: "textarea",
+      },
+      {
+        field: "permissionIds",
+        label: "关联权限",
+        type: "select",
+        options: () => api.permission.getPermissions(),
+        nodeProps: {
+          multiple: true,
+        },
+      },
+    ],
+    submit: ({ model }) => {
+      return api.role.addRole(model);
+    },
+  },
+  modify: {
+    extend: true,
+    title: "修改角色",
+    submit: ({ model }) => {
+      return api.role.updateRole(model.id, model);
+    },
+  },
+});
 </script>
 
 <style lang="less">
-.arco-tree-node {
-  &:hover {
-    background: rgb(var(--primary-1));
-  }
-}
 </style>
 
 <route lang="json">

src/pages/post/index.vue

@@ -69,13 +69,10 @@ const table = useTable({
     return api.post.getPosts({ ...model, ...paging });
   },
   columns: [
-    {
-      type: "index",
-    },
     {
       title: "文章名称",
       dataIndex: "title",
-      width: 200,
+      width: 240,
     },
     {
       title: "文章描述",
@@ -112,6 +109,9 @@ const table = useTable({
     },
   ],
   search: {
+    formProps: {
+      layout: 'inline',
+    },
     items: [
       {
         extend: "title",

src/pages/system/login-log/index.vue

@@ -18,7 +18,7 @@ const table = useTable({
     {
       title: "登陆账号",
       dataIndex: "nickname",
-      width: 200,
+      width: 140,
     },
     {
       title: "操作描述",
@@ -37,20 +37,23 @@ const table = useTable({
     {
       title: "登陆地址",
       dataIndex: "ip",
+      width: 200,
       render: ({ record }) => `${record.addr || "未知"}(${record.ip})`,
     },
     {
       title: "操作系统",
       dataIndex: "os",
+      width: 160,
     },
     {
       title: "浏览器",
       dataIndex: "browser",
+      width: 160,
     },
     {
       title: "登陆时间",
       dataIndex: "createdAt",
-      width: 200,
+      width: 120,
       render: ({ record }) => dayjs(record.createdAt).fromNow(),
     },
   ],

src/pages/system/permission/index.vue

@@ -60,6 +60,12 @@ const table = useTable({
         label: "权限名称",
         type: "input",
         required: false,
+        nodeProps: {
+          placeholder: '请输入名称关键字'
+        },
+        itemProps: {
+          hideLabel: true,
+        }
       },
     ],
   },
@@ -72,6 +78,14 @@ const table = useTable({
         type: "input",
         required: true,
       },
+      {
+        field: 'order',
+        label: '排序',
+        type: 'number',
+        nodeProps: {
+          min: 0,
+        }
+      },
       {
         field: "slug",
         label: "角色标识",

src/pages/system/role/index.vue

@@ -17,7 +17,7 @@ const table = useTable({
     {
       title: "角色名称",
       dataIndex: "username",
-      width: 200,
+      width: 180,
       render({ record }) {
         return (
           <div class="flex flex-col overflow-hidden">
@@ -67,6 +67,12 @@ const table = useTable({
       {
         extend: "name",
         required: false,
+        nodeProps: {
+          placeholder: '请输入角色名称'
+        },
+        itemProps: {
+          hideLabel: true,
+        }
       },
     ],
   },

src/pages/system/user/index.vue

@@ -3,7 +3,15 @@
     <template #content>
       <a-tabs default-active-key="1" size="large" class="bg-white m-4">
         <a-tab-pane key="1" title="全部">
-          <Table v-bind="table" class="px-4 pb-4"></Table>
+          <Table v-bind="table" class="px-4 pb-4">
+            <template #action>
+              <a-button status="danger" type="outline" :disabled="true">
+                <template #icon>
+                  <i class="icon-park-outline-delete"></i>
+                </template>
+                删除</a-button>
+            </template>
+          </Table>
         </a-tab-pane>
         <a-tab-pane key="2" title="已通过(12)"></a-tab-pane>
       </a-tabs>
@@ -25,15 +33,19 @@ const table = useTable({
     {
       title: "用户昵称",
       dataIndex: "username",
-      width: 200,
+      width: 180,
       render: ({ record }) => (
         <div class="flex items-center">
           <Avatar size={32}>
-            <img src={record.avatar} alt="" />
+            <img src={record.avatar || 'https://github.com/juetan.png'} alt="" />
           </Avatar>
           <span class="ml-2 flex-1 flex flex-col overflow-hidden">
-            <span>{record.nickname}</span>
+            <span>
-            <span class="text-gray-400 text-xs truncate">{record.username}</span>
+              {record.nickname}
+            </span>
+            <span class="text-gray-400 text-xs truncate">
+              {record.username}
+            </span>
           </span>
         </div>
       ),
@@ -45,6 +57,7 @@ const table = useTable({
     {
       title: "用户邮箱",
       dataIndex: "email",
+      width: 200,
     },
     {
       title: "创建时间",
@@ -55,7 +68,7 @@ const table = useTable({
     {
       title: "操作",
       type: "button",
-      width: 148,
+      width: 110,
       buttons: [
         {
           type: "modify",