Merge branch 'master' of https://github.com/zouzhibin/vue-admin-perfect into vue-i18n
Conflicts: src/store/modules/setting.ts
This commit is contained in:
zouzhibing
commit
6fb99e7536
51
README.md
51
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 配置
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -34,6 +34,15 @@ export const useSettingStore = defineStore({
|
|||
globalComSize:'default',
|
||||
// 中英文切换，默认中文
|
||||
language:'zh'
|
||||
globalComSize:'default',
|
||||
// 是否只保持一个子菜单的展开
|
||||
uniqueOpened:true,
|
||||
// 固定header
|
||||
fixedHeader:true,
|
||||
// 灰色模式
|
||||
gray:false,
|
||||
// 色弱模式
|
||||
weak:false
|
||||
},
|
||||
}),
|
||||
getters: {},
|
||||
|
|
|
|||
Loading…
Reference in New Issue