From 16096a2e83f413a9c6c5edf2a71020dc1694dc45 Mon Sep 17 00:00:00 2001
From: zouzhibing <esoul@654321>
Date: Tue, 13 Sep 2022 19:44:08 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:readme=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 51 ++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 90e3c54..04182d3 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# 简介
+## 简介
 vue-element-perfect 是一个后台前端解决方案, 基于Vue3.0+TS+Element-plus实现。它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件。
 
 ### 在线预览点击 —— [企业级、通用型中后台前端解决方案 ](http://182.61.5.190:8889/)
@@ -58,23 +58,40 @@ npm run lint
 npm run lint:prettier
 ```
 
-## 目录结构介绍
-
+## 文件目录结构
 ```
-├─assets    放置一些静态文件
-├─components 放置组件
-├─layout 首页布局
-│  ├─components
-│  │  ├─Sidebar 侧边栏配置
-│  │  ├─TagsView 标签栏配置
-│  │  └─UHeader 头部内容配置
-│  └─hooks
-├─router   路由配置
-├─store    数据存储
-├─styles   样式文件
-├─utils   工具方法
-└─views    页面配置方法
-└─permission  路由拦截 权限配置
+vue-admin-perfect
+├─ public                 # 静态资源文件（忽略打包）
+├─ src
+│  ├─ api                 # API 接口管理
+│  ├─ assets              # 静态资源文件
+│  ├─ components          # 全局组件
+│  ├─ config              # 全局配置项
+│  ├─ hooks               # 常用 Hooks
+│  ├─ language            # 语言国际化
+│  ├─ layout              # 框架布局
+│  ├─ routers             # 路由管理
+│  ├─ store               # pinia store
+│  ├─ styles              # 全局样式
+│  ├─ utils               # 工具库
+│  ├─ views               # 项目所有页面
+│  ├─ App.vue             # 入口页面
+│  └─ main.ts             # 入口文件
+├─ .env                   # vite 常用配置
+├─ .env.development       # 开发环境配置
+├─ .env.production        # 生产环境配置
+├─ .env.test              # 测试环境配置
+├─ .eslintignore          # 忽略 Eslint 校验
+├─ .eslintrc.cjs           # Eslint 校验配置
+├─ .gitignore             # git 提交忽略
+├─ .prettierignore        # 忽略 prettier 格式化
+├─ .prettierrc.config.js         # prettier 配置
+├─ index.html             # 入口 html
+├─ yarn.lock      # 依赖包包版本锁
+├─ package.json           # 依赖包管理
+├─ README.md              # README 介绍
+├─ tsconfig.json          # typescript 全局配置
+└─ vite.config.ts         # vite 配置
 ```
 
 

From cdbca16c87d81449f8e28d52ce7f5be64f2b6043 Mon Sep 17 00:00:00 2001
From: zouzhibing <esoul@654321>
Date: Tue, 13 Sep 2022 21:18:36 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/u-theme/index.vue       | 49 ++++++++++++++++++++------
 src/layout/Header/index.vue            |  9 +++--
 src/layout/Sidebar/components/Menu.vue |  2 +-
 src/layout/index.vue                   |  5 +--
 src/store/modules/setting.ts           | 10 +++++-
 5 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/src/components/u-theme/index.vue b/src/components/u-theme/index.vue
index cfb6c30..a6d4640 100644
--- a/src/components/u-theme/index.vue
+++ b/src/components/u-theme/index.vue
@@ -14,6 +14,18 @@
     </div>
     <el-drawer
         v-model="drawer" title="主题配置" size="300px">
+      <div class="theme-item">
+        <label>导航栏布局</label>
+        <el-select
+            v-model="layout"
+            placeholder="请选择"
+            style="width: 150px"
+            @change="(val) => changeSwitch('mode',val)"
+        >
+          <el-option label="纵向" value="vertical"></el-option>
+          <el-option label="横向" value="horizontal"></el-option>
+        </el-select>
+      </div>
       <div class="theme-item">
         <label>主题颜色</label>
         <el-color-picker v-model="primary" :predefine="predefineColor" @change="changePrimary" />
@@ -23,16 +35,12 @@
         <switch-dark></switch-dark>
       </div>
       <div class="theme-item">
-        <label>导航栏布局</label>
-        <el-select
-          v-model="layout"
-          placeholder="请选择"
-          style="width: 150px"
-          @change="(val) => changeSwitch('mode',val)"
-        >
-          <el-option label="纵向" value="vertical"></el-option>
-          <el-option label="横向" value="horizontal"></el-option>
-        </el-select>
+        <label>灰色模式</label>
+        <el-switch v-model="gray" @change="(val) => changeGrayWeak('gray',val)" />
+      </div>
+      <div class="theme-item">
+        <label>色弱模式</label>
+        <el-switch v-model="weak" @change="(val) => changeGrayWeak('weak',val)" />
       </div>
       <div class="theme-item">
         <label>标签栏</label>
@@ -42,6 +50,14 @@
         <label>侧边栏 Logo</label>
         <el-switch v-model="showLogo" @change="(val) => changeSwitch('showLogo',val)" />
       </div>
+      <div class="theme-item">
+        <label>保持一个子菜单的展开</label>
+        <el-switch v-model="uniqueOpened" @change="(val) => changeSwitch('uniqueOpened',val)" />
+      </div>
+      <div class="theme-item">
+        <label>固定header</label>
+        <el-switch v-model="fixedHeader" @change="(val) => changeSwitch('fixedHeader',val)" />
+      </div>
     </el-drawer>
   </div>
 </template>
@@ -57,7 +73,11 @@
   const layout = ref(SettingStore.themeConfig.mode)
   const showTag = ref(SettingStore.themeConfig.showTag)
   const showLogo = ref(SettingStore.themeConfig.showLogo)
+  const uniqueOpened = ref(SettingStore.themeConfig.uniqueOpened)
   const primary = ref(SettingStore.themeConfig.primary)
+  const fixedHeader = ref(SettingStore.themeConfig.fixedHeader)
+  const gray = ref(SettingStore.themeConfig.gray)
+  const weak = ref(SettingStore.themeConfig.weak)
 
   const drawer = computed({
     get() {
@@ -105,6 +125,15 @@
     changeSwitch('primary',val)
   }
 
+  // 修改灰色模式
+  const changeGrayWeak = (type,val)=>{
+    const body = document.documentElement as HTMLElement;
+    if (!val) return body.setAttribute("style", "");
+    if (type === "gray") body.setAttribute("style", "filter: grayscale(1)");
+    if (type === "weak") body.setAttribute("style", "filter: invert(80%)");
+    changeSwitch(type,val)
+  }
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layout/Header/index.vue b/src/layout/Header/index.vue
index 05c6771..02131a0 100644
--- a/src/layout/Header/index.vue
+++ b/src/layout/Header/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="m-layout-header"
+    :class="[SettingStore.themeConfig.fixedHeader&&'zb-fixed-header']"
     :style="{ left: `${mode === 'horizontal' ? 0 : isCollapse ? '60' : '210'}px` }"
   >
     <div
@@ -148,13 +149,15 @@
       }
     }
   }
-  .m-layout-header {
+  .zb-fixed-header{
     position: fixed;
     top: 0;
-    background: white;
     left: 0;
-    z-index: 9;
     right: 0;
+    z-index: 9;
+  }
+  .m-layout-header {
+    background: white;
     transition: left 0.3s;
     flex-shrink: 0;
     box-sizing: border-box;
diff --git a/src/layout/Sidebar/components/Menu.vue b/src/layout/Sidebar/components/Menu.vue
index c9c630e..5f648d3 100644
--- a/src/layout/Sidebar/components/Menu.vue
+++ b/src/layout/Sidebar/components/Menu.vue
@@ -1,10 +1,10 @@
 <template>
   <el-menu
     :default-active="activeMenu"
-    active-text-color="#ffd04b"
     background-color="#304156"
     text-color="#fff"
     :mode="mode"
+    :unique-opened="SettingStore.themeConfig.uniqueOpened"
     :collapse-transition="false"
     class="el-menu-vertical-demo"
     :collapse="isCollapse"
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 062ab45..fccf469 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -8,10 +8,7 @@
         hideSliderLayout: mode === 'horizontal',
       }"
     >
-      <div
-          :style="{
-        height:`${showTag?80:50}px`
-      }"></div>
+      <div :style="{ height:`${showTag?80:50}px`  }" v-if="SettingStore.themeConfig.fixedHeader"></div>
       <u-header />
       <div class="m-container-content" :class="{ 'app-main-hide-tag': !showTag }">
         <u-main />
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index 04750fd..3e7b7db 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -31,7 +31,15 @@ export const useSettingStore = defineStore({
             // 主题颜色
             primary:PRIMARY_COLOR,
             // element组件大小
-            globalComSize:'default'
+            globalComSize:'default',
+            // 是否只保持一个子菜单的展开
+            uniqueOpened:true,
+            // 固定header
+            fixedHeader:true,
+            // 灰色模式
+            gray:false,
+            // 色弱模式
+            weak:false
         },
     }),
     getters: {},