From 09498ec02e49c8d36faabaa34ea41ed6fdc0b7eb Mon Sep 17 00:00:00 2001
From: juetan <contact@juetan.cn>
Date: Thu, 26 Oct 2023 22:42:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/breadcrumb/bread-page.vue      | 12 ++--
 src/components/editor/panel-header/index.vue  |  2 +-
 src/components/form/form-modal.tsx            |  1 +
 src/components/table/table.tsx                |  4 +-
 src/pages/_layout/components/menu.vue         |  2 +-
 src/pages/_layout/index.vue                   | 15 +++--
 src/pages/post/media/index.vue                | 65 ++++++++++++-------
 src/pages/system/role/index.vue               |  4 +-
 src/pages/system/user/components/password.tsx |  2 +-
 src/pages/system/user/index.vue               | 39 +++++++----
 src/styles/css-unocss.less                    |  4 ++
 src/types/auto-component.d.ts                 |  2 +-
 12 files changed, 99 insertions(+), 53 deletions(-)

diff --git a/src/components/breadcrumb/bread-page.vue b/src/components/breadcrumb/bread-page.vue
index 3c5c75f..34bcc86 100644
--- a/src/components/breadcrumb/bread-page.vue
+++ b/src/components/breadcrumb/bread-page.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="h-full overflow-hidden grid grid-rows-[auto_1fr]">
     <div class="bg-white px-4 py-2">
       <div class="flex justify-between gap-4">
         <BreadCrumb></BreadCrumb>
@@ -9,9 +9,11 @@
       </div>
     </div>
     <slot name="content">
-      <div class="m-4 p-4 bg-white">
-        <slot></slot>
-      </div>
+      <a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-auto" type="track">
+        <div class="m-4 p-4 bg-white overflow-hidden">
+          <slot></slot>
+        </div>
+      </a-scrollbar>
     </slot>
   </div>
 </template>
@@ -20,4 +22,4 @@
 import BreadCrumb from "./bread-crumb.vue";
 </script>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>
diff --git a/src/components/editor/panel-header/index.vue b/src/components/editor/panel-header/index.vue
index bb02207..aaa5e9f 100644
--- a/src/components/editor/panel-header/index.vue
+++ b/src/components/editor/panel-header/index.vue
@@ -16,7 +16,7 @@
           <a-doption>保存为图片</a-doption>
         </template>
       </a-dropdown-button>
-      <a-button status="danger">退出</a-button>
+      <a-button type="outline" status="danger">退出</a-button>
     </div>
   </div>
 </template>
diff --git a/src/components/form/form-modal.tsx b/src/components/form/form-modal.tsx
index 92e264f..9ac0159 100644
--- a/src/components/form/form-modal.tsx
+++ b/src/components/form/form-modal.tsx
@@ -176,6 +176,7 @@ export const FormModal = defineComponent({
           onBeforeOk={this.onBeforeOk}
           onClose={this.onClose}
           title={this.modalTitle}
+          class="ani-form-modal"
         >
           {this.visible && (
             <Form ref={(el: any) => (this.formRef = el)} {...this.formProps} model={this.model} items={this.items}>
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index 357e03c..d4690ad 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -162,12 +162,12 @@ export const Table = defineComponent({
     return (
       <div class="table w-full">
         {!this.inlined && (
-          <div class="border-b pb-2 border-slate-200 mb-5">
+          <div class="border-b pb-0 border-slate-200 mb-3">
             <Form ref="searchRef" class="!grid grid-cols-4 gap-x-6" {...this.search}></Form>
           </div>
         )}
 
-        <div class={`mb-3 flex justify-between ${!this.inlined && "mt-2"}`}>
+        <div class={`mb-3 flex toolbar justify-between ${!this.inlined && "mt-2"}`}>
           <div class={`${this.create || this.$slots.action ? null : "!hidden"} flex-1 flex gap-2 `}>
             {this.create && (
               <FormModal {...(this.create as any)} ref="createRef" onSubmited={this.reloadData}></FormModal>
diff --git a/src/pages/_layout/components/menu.vue b/src/pages/_layout/components/menu.vue
index be4f13b..98b5226 100644
--- a/src/pages/_layout/components/menu.vue
+++ b/src/pages/_layout/components/menu.vue
@@ -31,7 +31,7 @@ export default defineComponent({
         const icon = route.icon ? () => <i class={route.icon} /> : null;
         const node: any = route.children?.length ? (
           <>
-            <div class="px-2"><a-divider margin={6}></a-divider></div>
+            <div class="px-2"><a-divider margin={6} class="!border-slate-100"></a-divider></div>
             {this.renderItem(route?.children)}
           </>
         ) : (
diff --git a/src/pages/_layout/index.vue b/src/pages/_layout/index.vue
index 3e70dc9..ff0a982 100644
--- a/src/pages/_layout/index.vue
+++ b/src/pages/_layout/index.vue
@@ -3,17 +3,17 @@
     <a-layout-header
       class="h-13 overflow-hidden flex justify-between items-center gap-4 px-2 pr-4 border-b border-slate-200 bg-white dark:bg-slate-800 dark:border-slate-700"
     >
-      <div class="h-13 flex items-center border-b border-slate-200 dark:border-slate-800">
-        <router-link to="/" class="px-2 py-1 rounded flex items-center gap-2 text-slate-700 hover:bg-slate-100">
+      <div class="h-13 flex items-center">
+        <router-link to="/" class="px-2 py-1 rounded flex items-center gap-2 text-slate-700">
           <img src="/favicon.ico" alt="" width="22" height="22" class="" />
           <h1 class="relative text-lg leading-[19px] dark:text-white m-0 p-0">
             {{ appStore.title }}
-            <span
+            <!-- <span
               v-if="isDev"
               class="absolute -right-14 -top-1 text-xs font-normal text-brand-500 bg-brand-50 px-1.5 rounded-full"
             >
               本地版
-            </span>
+            </span> -->
           </h1>
         </router-link>
       </div>
@@ -35,7 +35,7 @@
 
     <a-layout class="flex flex-1 overflow-hidden">
       <a-layout-sider
-        class="h-full overflow-hidden dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700"
+        class="h-full overflow-hidden dark:bg-slate-800 border-r border-slate-100 dark:border-slate-700"
         :width="224"
         :collapsed-width="52"
         :collapsible="true"
@@ -43,9 +43,12 @@
         :hide-trigger="false"
         @collapse="onCollapse"
       >
-        <a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-hidden pt-2">
+        <a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-hidden pt-1">
           <Menu />
         </a-scrollbar>
+        <template #trigger="{ collapsed }">
+          <i :class="collapsed ? `icon-park-outline-expand-left` : 'icon-park-outline-expand-right'" class="text-gray-400 text-base hover:text-gray-700"></i>
+        </template>
       </a-layout-sider>
       <a-layout class="layout-content flex-1">
         <a-layout-content class="overflow-x-auto">
diff --git a/src/pages/post/media/index.vue b/src/pages/post/media/index.vue
index 9b21899..16ce054 100644
--- a/src/pages/post/media/index.vue
+++ b/src/pages/post/media/index.vue
@@ -15,6 +15,7 @@
             <ani-upload ref="uploadRef"></ani-upload>
           </template>
         </Table>
+        <a-image-preview v-model:visible="visible" :src="image"></a-image-preview>
       </div>
     </div>
   </BreadPage>
@@ -22,27 +23,22 @@
 
 <script setup lang="tsx">
 import { api } from "@/api";
-import { Table, createColumn, useAniFormModal, useTable } from "@/components";
-import { dayjs } from "@/libs/dayjs";
+import { Table, createColumn, updateColumn, useTable } from "@/components";
 import numeral from "numeral";
-import AniGroup from './components/group.vue';
+import AniGroup from "./components/group.vue";
 import AniUpload from "./components/upload.vue";
 
-const [typeModal, typeCtx] = useAniFormModal({
-  title: "修改分组",
-  trigger: false,
-  modalProps: {
-    width: 432,
-  },
-  items: [
-    {
-      field: "name",
-      label: "分组名称",
-      type: "input",
-    },
-  ],
-  submit: async () => {},
-});
+const visible = ref(false);
+const image = ref("");
+const preview = (record: any) => {
+  if (!record.mimetype.startsWith("image")) {
+    // Message.warning("暂不支持预览该素材");
+    window.open(record.path, "_blank");
+    return;
+  }
+  image.value = record.path;
+  visible.value = true;
+};
 
 const uploadRef = ref<InstanceType<typeof AniUpload>>();
 
@@ -72,21 +68,28 @@ const table = useTable({
       dataIndex: "name",
       render({ record }) {
         return (
-          <div class="flex items-center">
+          <div class="flex items-center gap-2">
             <div>
-              <i class={`${getIcon(record.mimetype)} text-3xl mr-2`}></i>
+              {record.mimetype.startsWith("image") ? (
+                <a-avatar size={32} shape="square">
+                  <img src={record.path}></img>
+                </a-avatar>
+              ) : (
+                <i class={`${getIcon(record.mimetype)} text-3xl mr-2`}></i>
+              )}
             </div>
             <div class="flex flex-col overflow-hidden">
-              <span class="hover:text-brand-500 cursor-pointer">{record.name}</span>
-              <span class="text-gray-400 text-xs truncate">
-                {numeral(record.size).format("0 b")}
+              <span class="hover:text-brand-500 cursor-pointer" onClick={() => preview(record)}>
+                {record.name}
               </span>
+              <span class="text-gray-400 text-xs truncate">{numeral(record.size).format("0 b")}</span>
             </div>
           </div>
         );
       },
     },
     createColumn,
+    updateColumn,
     {
       type: "button",
       title: "操作",
@@ -123,6 +126,22 @@ const table = useTable({
       },
     ],
   },
+  modify: {
+    title: "修改素材",
+    modalProps: {
+      width: 432,
+    },
+    items: [
+      {
+        field: "name",
+        label: "素材名称",
+        type: "input",
+      },
+    ],
+    submit: ({ model }) => {
+      return api.file.setFile(model.id, model);
+    },
+  },
 });
 </script>
 
diff --git a/src/pages/system/role/index.vue b/src/pages/system/role/index.vue
index 848ec93..7276a56 100644
--- a/src/pages/system/role/index.vue
+++ b/src/pages/system/role/index.vue
@@ -21,7 +21,7 @@ const [roleTable, roleCtx] = useAniTable({
         return (
           <div class="flex flex-col overflow-hidden">
             <span>{record.name}</span>
-            <span class="text-gray-400 text-xs truncate">@{record.slug}</span>
+            <span class="text-gray-400 text-xs truncate">#{record.slug}</span>
           </div>
         );
       },
@@ -74,7 +74,7 @@ const [roleTable, roleCtx] = useAniTable({
   create: {
     title: "新建角色",
     modalProps: {
-      width: 1080,
+      width: 580,
       maskClosable: false,
     },
     formProps: {
diff --git a/src/pages/system/user/components/password.tsx b/src/pages/system/user/components/password.tsx
index e54c677..1995fe8 100644
--- a/src/pages/system/user/components/password.tsx
+++ b/src/pages/system/user/components/password.tsx
@@ -17,7 +17,7 @@ export const usePassworModal = () => {
         field: "password",
         label: ({ model }) => (
           <span>
-            <span class="text-brand-500 font-semibold">{model.nickname}</span> 的新密码:
+            设置 <span class="text-brand-500 font-semibold">{model.nickname}</span> 的新密码:
           </span>
         ),
         type: "input",
diff --git a/src/pages/system/user/index.vue b/src/pages/system/user/index.vue
index 9317aa1..eeb5db3 100644
--- a/src/pages/system/user/index.vue
+++ b/src/pages/system/user/index.vue
@@ -48,7 +48,7 @@ const table = useTable({
     {
       title: "操作",
       type: "button",
-      width: 180,
+      width: 200,
       buttons: [
         {
           type: "modify",
@@ -76,22 +76,39 @@ const table = useTable({
       {
         field: "nickname",
         label: "用户昵称",
-        type: "search",
-        searchable: true,
-        enterable: true,
-        itemProps: {
-          hideLabel: true,
-        },
-        nodeProps: {
-          placeholder: "用户昵称",
-        },
+        type: "input",
+      },
+      {
+        field: "nickname",
+        label: "用户昵称",
+        type: "input",
+      },
+      {
+        field: "nickname",
+        label: "用户昵称",
+        type: "input",
+      },
+      {
+        field: "nickname",
+        label: "用户昵称",
+        type: "input",
+      },
+      {
+        field: "nickname",
+        label: "用户昵称",
+        type: "input",
+      },
+      {
+        field: "nickname",
+        label: "用户昵称",
+        type: "input",
       },
     ],
   },
   create: {
     title: "新建用户",
     modalProps: {
-      width: 732,
+      width: 820,
       maskClosable: false,
     },
     formProps: {
diff --git a/src/styles/css-unocss.less b/src/styles/css-unocss.less
index 5a2420a..5c8655d 100644
--- a/src/styles/css-unocss.less
+++ b/src/styles/css-unocss.less
@@ -13,5 +13,9 @@
 
 .table .arco-form-item-layout-inline {
   margin-right: 8px;
+  margin-bottom: 18px;
+}
+
+div.toolbar .arco-form-item-layout-inline {
   margin-bottom: 0;
 }
diff --git a/src/types/auto-component.d.ts b/src/types/auto-component.d.ts
index 329418a..ce2c22d 100644
--- a/src/types/auto-component.d.ts
+++ b/src/types/auto-component.d.ts
@@ -27,6 +27,7 @@ declare module '@vue/runtime-core' {
     AForm: typeof import('@arco-design/web-vue')['Form']
     AFormItem: typeof import('@arco-design/web-vue')['FormItem']
     AImage: typeof import('@arco-design/web-vue')['Image']
+    AImagePreview: typeof import('@arco-design/web-vue')['ImagePreview']
     AInput: typeof import('@arco-design/web-vue')['Input']
     AInputNumber: typeof import('@arco-design/web-vue')['InputNumber']
     AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
@@ -44,7 +45,6 @@ declare module '@vue/runtime-core' {
     AModal: typeof import('@arco-design/web-vue')['Modal']
     APagination: typeof import('@arco-design/web-vue')['Pagination']
     APopover: typeof import('@arco-design/web-vue')['Popover']
-    AProgress: typeof import('@arco-design/web-vue')['Progress']
     ARadio: typeof import('@arco-design/web-vue')['Radio']
     ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup']
     AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar']