Merge branch 'master' of https://github.com/zouzhibin/vue-admin-perfect into vue-i18n

 Conflicts:

	src/store/modules/setting.ts

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    放置一些静态文件
+vue-admin-perfect
-├─components 放置组件
+├─ public                 # 静态资源文件（忽略打包）
-├─layout 首页布局
+├─ src
-│  ├─components
+│  ├─ api                 # API 接口管理
-│  │  ├─Sidebar 侧边栏配置
+│  ├─ assets              # 静态资源文件
-│  │  ├─TagsView 标签栏配置
+│  ├─ components          # 全局组件
-│  │  └─UHeader 头部内容配置
+│  ├─ config              # 全局配置项
-│  └─hooks
+│  ├─ hooks               # 常用 Hooks
-├─router   路由配置
+│  ├─ language            # 语言国际化
-├─store    数据存储
+│  ├─ layout              # 框架布局
-├─styles   样式文件
+│  ├─ routers             # 路由管理
-├─utils   工具方法
+│  ├─ store               # pinia store
-└─views    页面配置方法
+│  ├─ styles              # 全局样式
-└─permission  路由拦截 权限配置
+│  ├─ 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 配置
 ```
 
 

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>
+        <label>灰色模式</label>
-        <el-select
+        <el-switch v-model="gray" @change="(val) => changeGrayWeak('gray',val)" />
-          v-model="layout"
+      </div>
-          placeholder="请选择"
+      <div class="theme-item">
-          style="width: 150px"
+        <label>色弱模式</label>
-          @change="(val) => changeSwitch('mode',val)"
+        <el-switch v-model="weak" @change="(val) => changeGrayWeak('weak',val)" />
-        >
-          <el-option label="纵向" value="vertical"></el-option>
-          <el-option label="横向" value="horizontal"></el-option>
-        </el-select>
       </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>

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
@@ -151,13 +152,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;

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"

src/layout/index.vue

@@ -8,10 +8,7 @@
         hideSliderLayout: mode === 'horizontal',
       }"
     >
-      <div
+      <div :style="{ height:`${showTag?80:50}px`  }" v-if="SettingStore.themeConfig.fixedHeader"></div>
-          :style="{
-        height:`${showTag?80:50}px`
-      }"></div>
       <u-header />
       <div class="m-container-content" :class="{ 'app-main-hide-tag': !showTag }">
         <u-main />

src/store/modules/setting.ts

@@ -34,6 +34,15 @@ export const useSettingStore = defineStore({
             globalComSize:'default',
             // 中英文切换，默认中文
             language:'zh'
+            globalComSize:'default',
+            // 是否只保持一个子菜单的展开
+            uniqueOpened:true,
+            // 固定header
+            fixedHeader:true,
+            // 灰色模式
+            gray:false,
+            // 色弱模式
+            weak:false
         },
     }),
     getters: {},