GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(components): 添加主题配置抽屉，添加暗黑主题

Browse Source
This commit is contained in:
Soybean 2021-09-01 17:43:25 +08:00
parent 205037397f
commit a87593f58a
27 changed files with 364 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env
View File

@ -1,5 +1,5 @@
# 变量需要以VITE开头
VITE_APP_TITLE=web-cli
VITE_APP_TITLE_LABEL=web脚手架
VITE_APP_TITLE=SoybeanAdmin
VITE_APP_TITLE_LABEL=Soybean后台管理系统
VITE_BASE_URL=/

4
index.html
View File

@ -4,10 +4,10 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<title><%= title %></title>
</head>
<body>
<div id="naiveApp" style="display: none"></div>
<div id="appProvider" style="display: none"></div>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/assets/img/common/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

9
src/enum/animate.ts Normal file
View File

@ -0,0 +1,9 @@
/** 动画类型 */
export enum EnumAnimate {
'zoom-fade' = '渐变',
'zoom-out' = '闪现',
'fade-slide' = '滑动',
'fade' = '消退',
'fade-bottom' = '底部消退',
'fade-scale' = '缩放消退'
}

2
src/enum/common.ts
View File

@ -1,4 +1,4 @@
/** 请求头的content-type类型 */
/** http请求头的content-type类型 */
export enum ContentType {
json = 'application/json',
formUrlencoded = 'application/x-www-form-urlencoded',

2
src/enum/index.ts
View File

@ -1 +1,3 @@
export { ContentType } from './common';
export { EnumAnimate } from './animate';
export { EnumNavMode, EnumNavTheme } from './theme';

13
src/enum/theme.ts Normal file
View File

@ -0,0 +1,13 @@
/** 导航模式 */
export enum EnumNavMode {
'vertical' = '左侧菜单模式',
'horizontal' = '顶部菜单模式',
'horizontal-mix' = '顶部菜单混合模式'
}
/** 导航风格 */
export enum EnumNavTheme {
'dark' = '暗色侧边栏',
'light' = '白色侧边栏',
'header-dark' = '暗色的侧边栏和顶栏'
}

73
src/interface/app.ts
View File

@ -1,3 +1,5 @@
import { EnumAnimate, EnumNavMode, EnumNavTheme } from '@/enum';
export interface ThemeSettings {
/** 深色模式 */
darkMode: boolean;
@ -7,6 +9,18 @@ export interface ThemeSettings {
themeColorList: string[];
/** 其他颜色 */
otherColor: OtherColor;
/** 导航样式 */
navStyle: NavStyle;
/** 头部样式 */
headerStyle: HeaderStyle;
/** 菜单样式 */
menuStyle: MenuStyle;
/** 多标签样式 */
multiTabStyle: MultiTabStyle;
/** 面包屑样式 */
crumbsStyle: CrumbsStyle;
/** 页面样式 */
pageStyle: PageStyle;
}
interface OtherColor {
@ -19,3 +33,62 @@ interface OtherColor {
/** 错误 */
error: string;
}
type NavMode = keyof typeof EnumNavMode;
type NavTheme = keyof typeof EnumNavTheme;
interface NavStyle {
/** 导航模式 */
mode: NavMode;
/** 导航主题 */
theme: NavTheme;
}
interface HeaderStyle {
/** 顶部高度 */
height: number;
/** 背景颜色 */
bgColor: string;
/** 固定顶部 */
fixed: boolean;
/** 显示重载按钮 */
showReload: boolean;
}
interface MenuStyle {
/** 折叠菜单 */
collapsed: boolean;
/** 菜单宽度 */
width: number;
/** 菜单折叠时的宽度 */
collapsedWidth: number;
/** 固定菜单 */
fixed: boolean;
/** 分割菜单 */
splitMenu: boolean;
}
interface MultiTabStyle {
/** 多标签可见 */
visible: boolean;
/** 背景颜色 */
bgColor: string;
/** 固定标签页 */
fixed: boolean;
}
interface CrumbsStyle {
/** 面包屑可见 */
visible: boolean;
/** 显示图标 */
showIcon: boolean;
}
type AnimateType = keyof typeof EnumAnimate;
interface PageStyle {
/** 页面是否开启动画 */
animate: boolean;
/** 动画类型 */
animateType: AnimateType;
}

8
src/layouts/BasicLayout/components/GlobalHeader/components/HeaderItemContainer.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<div class="flex-center cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]">
<slot></slot>
</div>
</template>
<script lang="ts" setup></script>
<style scoped></style>

3
src/layouts/BasicLayout/components/GlobalHeader/components/index.ts Normal file
View File

@ -0,0 +1,3 @@
import HeaderItemContainer from './HeaderItemContainer.vue';
export { HeaderItemContainer };

20
src/layouts/BasicLayout/components/GlobalHeader/index.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<div class="global-header flex-y-center justify-between">
<h2>123</h2>
<header-item-container class="w-40px h-full" @click="openSettingDrawer">
<icon-mdi-light-cog class="text-16px" />
</header-item-container>
</div>
</template>
<script lang="ts" setup>
import { useAppStore } from '@/store';
import { HeaderItemContainer } from './components';
const { openSettingDrawer } = useAppStore();
</script>
<style scoped>
.global-header {
box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
}
</style>

16
src/layouts/BasicLayout/components/GlobalLogo/index.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<router-link to="/" class="nowrap-hidden flex-center h-64px">
<img src="@/assets/img/common/logo.png" alt="" class="w-32px h-32px" />
<h2 v-show="showTitle" class="pl-8px text-16px text-primary font-bold">{{ title }}</h2>
</router-link>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { useAppStore } from '@/store';
const app = useAppStore();
const showTitle = computed(() => !app.themeSettings.menuStyle.collapsed);
const title = import.meta.env.VITE_APP_TITLE as string;
</script>
<style scoped></style>

6
src/layouts/BasicLayout/components/GlobalMenu/index.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<div>菜单</div>
</template>
<script lang="ts" setup></script>
<style scoped></style>

25
src/layouts/BasicLayout/components/SettingDrawer/components/DarkMode.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<n-divider title-placement="center">深色主题</n-divider>
<div class="flex-center">
<n-switch v-model:value="app.themeSettings.darkMode">
<template #checked>
<icon-mdi-white-balance-sunny class="text-14px text-primary" />
</template>
<template #unchecked>
<icon-mdi-moon-waning-crescent class="text-14px text-primary" />
</template>
</n-switch>
</div>
</template>
<script lang="ts" setup>
import { NDivider, NSwitch } from 'naive-ui';
import { useAppStore } from '@/store';
const app = useAppStore();
</script>
<style scoped>
:deep(.n-switch__rail) {
background-color: #000e1c !important;
}
</style>

0
src/layouts/BasicLayout/components/SettingDrawer/components/ThemeStyle.vue Normal file
View File

3
src/layouts/BasicLayout/components/SettingDrawer/components/index.ts Normal file
View File

@ -0,0 +1,3 @@
import DarkMode from './DarkMode.vue';
export { DarkMode };

16
src/layouts/BasicLayout/components/SettingDrawer/index.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<n-drawer v-model:show="app.settingDrawer.visible">
<n-drawer-content title="主题配置">
<dark-mode />
</n-drawer-content>
</n-drawer>
</template>
<script lang="ts" setup>
import { NDrawer, NDrawerContent } from 'naive-ui';
import { useAppStore } from '@/store';
import { DarkMode } from './components';
const app = useAppStore();
</script>
<style scoped></style>

6
src/layouts/BasicLayout/components/index.ts Normal file
View File

@ -0,0 +1,6 @@
import GlobalHeader from './GlobalHeader/index.vue';
import GlobalLogo from './GlobalLogo/index.vue';
import GlobalMenu from './GlobalMenu/index.vue';
import SettingDrawer from './SettingDrawer/index.vue';
export { GlobalHeader, GlobalLogo, GlobalMenu, SettingDrawer };

66
src/layouts/BasicLayout/index.vue
View File

@ -1,15 +1,67 @@
<template>
<n-layout has-sider>
<n-layout-sider />
<n-layout>
<n-layout-header></n-layout-header>
<n-layout-content>
<n-layout has-sider :position="position">
<n-layout-sider
class="layout-sider min-h-100vh"
:native-scrollbar="false"
:inverted="inverted"
collapse-mode="width"
:collapsed="app.themeSettings.menuStyle.collapsed"
:collapsed-width="app.themeSettings.menuStyle.collapsedWidth"
:width="menuWidth"
@collapse="handleMenuCollapse(true)"
@expand="handleMenuCollapse(false)"
>
<global-logo />
<global-menu />
</n-layout-sider>
<n-layout :inverted="inverted">
<n-layout-header :position="position" :inverted="headerInverted" class="z-10">
<global-header class="header-height" />
</n-layout-header>
<n-layout-content class="main-padding flex-auto min-h-100vh">
<router-view />
</n-layout-content>
<n-layout-footer></n-layout-footer>
</n-layout>
<setting-drawer />
</n-layout>
</template>
<script lang="ts" setup></script>
<style scoped></style>
<script lang="ts" setup>
import { computed } from 'vue';
import { NLayout, NLayoutSider, NLayoutHeader, NLayoutContent, NLayoutFooter } from 'naive-ui';
import { useAppStore } from '@/store';
import { GlobalHeader, GlobalLogo, GlobalMenu, SettingDrawer } from './components';
const app = useAppStore();
const { handleMenuCollapse } = useAppStore();
const position = computed(() => (app.themeSettings.headerStyle.fixed ? 'absolute' : 'static'));
const menuWidth = computed(() => {
const { collapsed, collapsedWidth, width } = app.themeSettings.menuStyle;
return collapsed ? collapsedWidth : width;
});
const inverted = computed(() => {
const { theme } = app.themeSettings.navStyle;
return theme !== 'light';
});
const headerInverted = computed(() => {
const { theme } = app.themeSettings.navStyle;
return theme !== 'dark' ? inverted.value : !inverted.value;
});
const headerHeight = computed(() => {
const { height } = app.themeSettings.headerStyle;
return `${height}px`;
});
</script>
<style scoped>
.layout-sider {
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
}
.header-height {
height: v-bind(headerHeight);
}
.main-padding {
padding-top: v-bind(headerHeight);
}
</style>

17
src/main.ts
View File

@ -3,30 +3,29 @@ import App from './App.vue';
import AppProvider from './AppProvider.vue';
import { setupStore } from './store';
import { router, setupRouter } from './router';
import { setupSmoothScroll, setupNaive } from './plugins';
import { setupSmoothScroll, setupWindicssDarkMode } from './plugins';
import 'virtual:windi.css';
import './styles/css/global.css';
async function setupApp() {
const naiveApp = createApp(AppProvider);
const appProvider = createApp(AppProvider);
const app = createApp(App);
/** 注册naive UI组件 */
setupNaive(app);
/** 挂载全局状态 */
// 挂载全局状态
setupStore(app);
// 优先挂载一下 naiveApp 解决路由守卫，Axios中可使用，LoadingBar，Dialog，Message 等之类组件
naiveApp.mount('#naiveApp', true);
// 优先挂载一下 appProvider 解决路由守卫，Axios中可使用，LoadingBar，Dialog，Message 等之类组件
appProvider.mount('#appProvider', true);
// 挂载路由
await setupRouter(app);
setupRouter(app);
// 路由准备就绪后挂载APP实例
await router.isReady();
app.mount('#app', true);
setupWindicssDarkMode();
}
setupSmoothScroll();

31
src/plugins/dark-mode.ts Normal file
View File

@ -0,0 +1,31 @@
import { watch } from 'vue';
import { useAppStore } from '@/store';
export default function setupWindicssDarkMode() {
const app = useAppStore();
const DARK_CLASS = 'dark';
function getHtmlElement() {
return document.querySelector('html')!;
}
function addDarkClass() {
const html = getHtmlElement();
html.classList.add(DARK_CLASS);
}
function removeDarkClass() {
const html = getHtmlElement();
html.classList.remove(DARK_CLASS);
}
watch(
() => app.themeSettings.darkMode,
newValue => {
if (newValue) {
addDarkClass();
} else {
removeDarkClass();
}
}
);
}

3
src/plugins/index.ts
View File

@ -1,4 +1,5 @@
import setupSmoothScroll from './smooth-scroll';
import setupNaive from './naive';
import setupWindicssDarkMode from './dark-mode';
export { setupSmoothScroll, setupNaive };
export { setupSmoothScroll, setupNaive, setupWindicssDarkMode };

34
src/settings/theme/index.ts
View File

@ -23,18 +23,44 @@ const themeColorList = [
];
const themeSettings: ThemeSettings = {
/** 深色主题 */
darkMode: false,
/** 系统主题色 */
themeColor: themeColorList[0],
/** 系统内置主题色列表 */
themeColorList,
/** 其他颜色 */
otherColor: {
info: '#2080f0',
success: '#67C23A',
warning: '#E6A23C',
error: '#F56C6C'
},
navStyle: {
mode: 'vertical',
theme: 'light'
},
headerStyle: {
height: 64,
bgColor: '#fff',
fixed: true,
showReload: true
},
menuStyle: {
collapsed: false,
width: 200,
collapsedWidth: 64,
fixed: true,
splitMenu: false
},
multiTabStyle: {
visible: true,
bgColor: '#fff',
fixed: true
},
crumbsStyle: {
visible: true,
showIcon: false
},
pageStyle: {
animate: true,
animateType: 'zoom-fade'
}
};

32
src/store/modules/app/index.ts
View File

@ -1,22 +1,28 @@
import { defineStore } from 'pinia';
import type { GlobalThemeOverrides } from 'naive-ui';
import { store } from '../../index';
import { themeSettings } from '@/settings';
import type { ThemeSettings } from '@/interface';
import { store } from '../../index';
import { getHoverAndPressedColor } from './helpers';
interface AppState {
/** 主题配置 */
themeSettings: ThemeSettings;
/** 侧边栏折叠 */
asideCollapse: boolean;
/** 主题配置抽屉 */
settingDrawer: SettingDrawer;
}
interface SettingDrawer {
visible: boolean;
}
const appStore = defineStore({
id: 'app-store',
state: (): AppState => ({
themeSettings,
asideCollapse: false
settingDrawer: {
visible: false
}
}),
getters: {
/** naive UI主题配置 */
@ -59,11 +65,21 @@ const appStore = defineStore({
}
},
actions: {
handleAsideCollapse(collapse: boolean) {
this.asideCollapse = collapse;
/** 折叠/展开菜单 */
handleMenuCollapse(collapsed: boolean) {
this.themeSettings.menuStyle.collapsed = collapsed;
},
toggleAside() {
this.asideCollapse = !this.asideCollapse;
/** 切换折叠/展开菜单 */
toggleMenu() {
this.themeSettings.menuStyle.collapsed = !this.themeSettings.menuStyle.collapsed;
},
/** 打开配置抽屉 */
openSettingDrawer() {
this.settingDrawer.visible = true;
},
/** 关闭配置抽屉 */
closeSettingDrawer() {
this.settingDrawer.visible = false;
}
}
});

2
src/views/home/index.vue
View File

@ -25,7 +25,7 @@
</template>
<script lang="ts" setup>
import { useDialog, useNotification, useMessage } from 'naive-ui';
import { NButton, NSpace, useDialog, useNotification, useMessage } from 'naive-ui';
type ActionType = 'dialog' | 'notification' | 'message';
interface Action {

5
src/views/system/index.vue
View File

@ -4,8 +4,11 @@
<n-button>
<router-link to="/home">home</router-link>
</n-button>
<n-switch :value="true" />
</div>
</template>
<script lang="ts" setup></script>
<script lang="ts" setup>
import { NButton, NSwitch } from 'naive-ui';
</script>
<style scoped></style>