From 649ca40f12fa9f76b5bcd0059edd12671ff420e9 Mon Sep 17 00:00:00 2001
From: juetan <contact@juetan.cn>
Date: Mon, 16 Oct 2023 22:15:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/breadcrumb/bread-page.vue      |   4 +-
 src/pages/_layout/components/userDropdown.vue |  38 +++++-
 src/pages/_layout/index.vue                   |  11 +-
 src/pages/home/home.vue                       |   2 +-
 src/pages/post/media/index.vue                | 124 +++++++++---------
 src/pages/post/post/index.vue                 |   2 +-
 src/pages/system/login-log/index.vue          |  12 +-
 src/pages/system/role/index.vue               |   1 -
 src/styles/css-arco.less                      |  10 +-
 9 files changed, 117 insertions(+), 87 deletions(-)

diff --git a/src/components/breadcrumb/bread-page.vue b/src/components/breadcrumb/bread-page.vue
index 6d13514..1574785 100644
--- a/src/components/breadcrumb/bread-page.vue
+++ b/src/components/breadcrumb/bread-page.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="h-full grid grid-rows-[auto_1fr]">
-    <div class="bg-white dark:bg-gray-800 px-4 py-2">
+    <div class="bg-[#f8f8f8] dark:bg-gray-800 px-4 py-2">
       <div class="flex justify-between gap-4">
         <BreadCrumb></BreadCrumb>
         <div>
@@ -9,7 +9,7 @@
       </div>
     </div>
     <slot name="content">
-      <div class="m-4 p-4 bg-white dark:bg-gray-700">
+      <div class="w-full h-full overflow-hidden p-6">
         <slot></slot>
       </div>
     </slot>
diff --git a/src/pages/_layout/components/userDropdown.vue b/src/pages/_layout/components/userDropdown.vue
index 5cb29d6..5386e42 100644
--- a/src/pages/_layout/components/userDropdown.vue
+++ b/src/pages/_layout/components/userDropdown.vue
@@ -8,6 +8,7 @@
         {{ userStore.nickname }}
       </span>
       <i class="icon-park-outline-down"></i>
+      <password-modal></password-modal>
     </span>
     <template #content>
       <a-doption>
@@ -22,7 +23,7 @@
         </div>
       </a-doption>
       <a-divider :margin="4"></a-divider>
-      <a-doption>
+      <a-doption @click="password.open()">
         <template #icon>
           <i class="icon-park-outline-lock"></i>
         </template>
@@ -46,6 +47,7 @@
 </template>
 
 <script setup lang="ts">
+import { useAniFormModal } from "@/components";
 import { useUserStore } from "@/store";
 import { Message } from "@arco-design/web-vue";
 
@@ -58,6 +60,40 @@ const logout = async () => {
   Message.success("提示：已退出登陆!");
   router.push({ path: "/login", query: { redirect: route.path } });
 };
+
+const [PasswordModal, password] = useAniFormModal({
+  title: "修改密码",
+  trigger: false,
+  modalProps: {
+    width: 452,
+  },
+  items: [
+    {
+      field: "password",
+      label: "原密码",
+      type: "input",
+      nodeProps: {
+        placeholder: "请输入原密码",
+      },
+    },
+    {
+      field: "password1",
+      label: "新密码",
+      type: "input",
+      nodeProps: {
+        placeholder: "请输入新密码",
+      },
+    },
+    {
+      field: "password2",
+      label: "确认密码",
+      type: "input",
+      nodeProps: {
+        placeholder: "请再次输入新密码",
+      },
+    },
+  ],
+});
 </script>
 
 <style scoped></style>
diff --git a/src/pages/_layout/index.vue b/src/pages/_layout/index.vue
index 7239fd4..8903c5d 100644
--- a/src/pages/_layout/index.vue
+++ b/src/pages/_layout/index.vue
@@ -1,7 +1,7 @@
 <template>
   <a-layout class="layout">
     <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"
+      class="h-13 overflow-hidden flex justify-between items-center gap-4 px-2 pr-4 bg-[#dddddd] dark:bg-slate-800"
     >
       <div class="h-13 flex items-center border-b border-slate-200 dark:border-slate-800">
         <router-link to="/" class="px-2 py-2 rounded flex items-center gap-2 text-slate-700">
@@ -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 !bg-[#f3f3f3] dark:bg-slate-800"
         :width="224"
         :collapsed-width="52"
         :collapsible="true"
@@ -55,8 +55,8 @@
           ></i>
         </template>
       </a-layout-sider>
-      <a-layout class="layout-content flex-1">
-        <a-layout-header class="h-8 bg-white border-b border-slate-200 dark:bg-slate-800 dark:border-slate-700">
+      <a-layout class="layout-content flex-1 bg-white">
+        <a-layout-header class="h-8 bg-[#ececec] dark:bg-slate-800">
           <div class="h-full flex items-center justify-between gap-2 px-4">
             <div class="space-x-2">
               <a-tag
@@ -83,7 +83,7 @@
           </div>
         </a-layout-header>
         <a-layout-content class="overflow-x-auto">
-          <a-spin :loading="appStore.pageLoding" tip="加载中，请稍等..." class="block h-full w-full">
+          <a-spin :loading="appStore.pageLoding" tip="页面加载中，请稍等..." class="block h-full w-full">
             <router-view v-slot="{ Component }">
               <component :is="Component"></component>
             </router-view>
@@ -246,7 +246,6 @@ const tagItems = [
   // 导致部分内容被截取
   // min-height: 100vh;
   overflow-y: hidden;
-  background-color: var(--color-fill-2);
   transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 </style>
diff --git a/src/pages/home/home.vue b/src/pages/home/home.vue
index 1d16737..e5ad594 100644
--- a/src/pages/home/home.vue
+++ b/src/pages/home/home.vue
@@ -19,7 +19,7 @@
 {
   "meta": {
     "sort": 10001,
-    "title": "首页",
+    "title": "概览",
     "icon": "icon-park-outline-home"
   }
 }
diff --git a/src/pages/post/media/index.vue b/src/pages/post/media/index.vue
index 8612d8b..fe1bc64 100644
--- a/src/pages/post/media/index.vue
+++ b/src/pages/post/media/index.vue
@@ -1,71 +1,69 @@
 <template>
   <BreadPage>
-    <template #content>
-      <div class="overflow-hidden grid grid-cols-[auto_auto_1fr] m-4 p-4 bg-white">
-        <div class="w-[210px] h-full overflow-hidden grid grid-rows-[auto_1fr]">
-          <div class="flex gap-2 pr-2">
-            <a-input-search allow-clear placeholder="分组名称..." class="mb-2"></a-input-search>
-            <a-button>
-              <template #icon>
-                <i class="icon-park-outline-add"></i>
-              </template>
-            </a-button>
-          </div>
-          <a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-auto">
-            <ul class="pr-4 pl-0 mt-0">
-              <li
-                v-for="i in 50"
-                class="group flex items-center justify-between gap-2 h-8 rounded mb-2 pl-3 hover:bg-gray-100 cursor-pointer"
-              >
-                <div>
-                  <i class="icon-file-folder text-gray-600"></i>
-                  日常素材
-                  <span class="text-xs text-gray-400">(10)</span>
-                </div>
-                <div>
-                  <a-dropdown>
-                    <a-button size="small" type="text">
-                      <template #icon>
-                        <i class="icon-park-outline-more-one text-gray-400 hover:text-gray-700"></i>
-                      </template>
-                    </a-button>
-                    <template #content>
-                      <a-doption @click="typeCtx.open()">
-                        <template #icon>
-                          <i class="icon-park-outline-edit"></i>
-                        </template>
-                        修改
-                      </a-doption>
-                      <a-doption class="!text-red-500">
-                        <template #icon>
-                          <i class="icon-park-outline-delete"></i>
-                        </template>
-                        删除
-                      </a-doption>
-                    </template>
-                  </a-dropdown>
-                  <type-modal></type-modal>
-                </div>
-              </li>
-            </ul>
-          </a-scrollbar>
-        </div>
-        <a-divider direction="vertical" :margin="16"></a-divider>
-        <div>
-          <Table v-bind="table">
-            <template #action>
-              <a-button type="primary" @click="uploadRef?.open()">
-                <template #icon>
-                  <i class="icon-park-outline-upload"></i>
-                </template>
-                上传
-              </a-button>
-              <ani-upload ref="uploadRef"></ani-upload>
+    <div class="overflow-hidden grid grid-cols-[auto_auto_1fr]">
+      <div class="w-[210px] h-full overflow-hidden grid grid-rows-[auto_1fr]">
+        <div class="flex gap-2 pr-4">
+          <a-input-search allow-clear placeholder="分组名称..." class="mb-2"></a-input-search>
+          <a-button>
+            <template #icon>
+              <i class="icon-park-outline-add"></i>
             </template>
-          </Table>
+          </a-button>
         </div>
+        <a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-auto">
+          <ul class="pr-4 pl-0 mt-0">
+            <li
+              v-for="i in 5"
+              class="group flex items-center justify-between gap-2 h-8 rounded mb-2 pl-3 hover:bg-gray-100 cursor-pointer"
+            >
+              <div>
+                <i class="icon-file-folder text-gray-600"></i>
+                日常素材
+                <span class="text-xs text-gray-400">(10)</span>
+              </div>
+              <div>
+                <a-dropdown>
+                  <a-button size="small" type="text">
+                    <template #icon>
+                      <i class="icon-park-outline-more-one text-gray-400 hover:text-gray-700"></i>
+                    </template>
+                  </a-button>
+                  <template #content>
+                    <a-doption @click="typeCtx.open()">
+                      <template #icon>
+                        <i class="icon-park-outline-edit"></i>
+                      </template>
+                      修改
+                    </a-doption>
+                    <a-doption class="!text-red-500">
+                      <template #icon>
+                        <i class="icon-park-outline-delete"></i>
+                      </template>
+                      删除
+                    </a-doption>
+                  </template>
+                </a-dropdown>
+                <type-modal></type-modal>
+              </div>
+            </li>
+          </ul>
+        </a-scrollbar>
       </div>
-    </template>
+      <a-divider direction="vertical" :margin="16"></a-divider>
+      <div>
+        <Table v-bind="table">
+          <template #action>
+            <a-button type="primary" @click="uploadRef?.open()">
+              <template #icon>
+                <i class="icon-park-outline-upload"></i>
+              </template>
+              上传
+            </a-button>
+            <ani-upload ref="uploadRef"></ani-upload>
+          </template>
+        </Table>
+      </div>
+    </div>
   </BreadPage>
 </template>
 
diff --git a/src/pages/post/post/index.vue b/src/pages/post/post/index.vue
index 2201b82..2d2321f 100644
--- a/src/pages/post/post/index.vue
+++ b/src/pages/post/post/index.vue
@@ -13,7 +13,7 @@
         </div>
       </div>
     </div>
-    <div class="flex gap-4 mt-6 px-6">
+    <div class="flex gap-4">
       <div class="flex-1 bg-white p-4">
         <a-form :model="{}" layout="vertical">
           <a-form-item label="标题">
diff --git a/src/pages/system/login-log/index.vue b/src/pages/system/login-log/index.vue
index b856901..eb4af9f 100644
--- a/src/pages/system/login-log/index.vue
+++ b/src/pages/system/login-log/index.vue
@@ -1,13 +1,11 @@
 <template>
   <BreadPage>
-    <template #content>
-      <div class="p-4">
-        <a-alert :closable="true" class="mb-2"> 仅展示近 90 天内的数据，如需查看更多数据，请联系管理员。 </a-alert>
-        <div class="bg-white p-4">
-          <Table v-bind="table"></Table>
-        </div>
+    <div class="">
+      <a-alert :closable="true" class="mb-4"> 仅展示近 90 天内的数据，如需查看更多数据，请联系管理员。 </a-alert>
+      <div class="">
+        <Table v-bind="table"></Table>
       </div>
-    </template>
+    </div>
   </BreadPage>
 </template>
 
diff --git a/src/pages/system/role/index.vue b/src/pages/system/role/index.vue
index ac425be..aff5a52 100644
--- a/src/pages/system/role/index.vue
+++ b/src/pages/system/role/index.vue
@@ -1,6 +1,5 @@
 <template>
   <BreadPage>
-    <a-button @click="roleCtx.refresh()">刷新</a-button>
     <role-table></role-table>
   </BreadPage>
 </template>
diff --git a/src/styles/css-arco.less b/src/styles/css-arco.less
index 69f34f6..eb611c8 100644
--- a/src/styles/css-arco.less
+++ b/src/styles/css-arco.less
@@ -34,7 +34,7 @@ body {
     box-shadow: none;
   }
   .arco-menu,
-  .arco-menu-item {
+  .arco-menu-light .arco-menu-item {
     background-color: transparent;
   }
   .arco-menu-group-title {
@@ -68,10 +68,10 @@ body {
         background-color: var(--color-neutral-2);
       }
       &.arco-menu-selected {
-        color: @arcoblue-6;
-        background-color: @arcoblue-1;
-        // color: #fff;
-        // background-color: @arcoblue-6;
+        // color: @arcoblue-6;
+        // background-color: @arcoblue-1;
+        color: #fff;
+        background-color: rgb(var(--primary-6));
         .arco-menu-icon {
           color: inherit;
         }