2024-08-26 14:07:57 +08:00
|
|
|
<template>
|
|
|
|
<n-config-provider
|
|
|
|
:date-locale="configProviderProps.dateLocale"
|
|
|
|
:inline-theme-disabled="configProviderProps.inlineThemeDisabled"
|
|
|
|
:locale="configProviderProps.locale"
|
2024-08-27 20:59:54 +08:00
|
|
|
:style="{
|
2024-08-29 14:28:53 +08:00
|
|
|
'--box-shadow-1': themeVars.boxShadow1,
|
|
|
|
'--box-shadow-2': themeVars.boxShadow2,
|
|
|
|
'--box-shadow-3': themeVars.boxShadow3,
|
|
|
|
'--color-action': themeVars.actionColor,
|
|
|
|
'--color-border': themeVars.borderColor,
|
2024-08-28 13:42:06 +08:00
|
|
|
'--color-error': themeCommon.errorColor,
|
|
|
|
'--color-info': themeCommon.infoColor,
|
|
|
|
'--color-primary': themeCommon.primaryColor,
|
|
|
|
'--color-success': themeCommon.successColor,
|
|
|
|
'--color-warning': themeCommon.warningColor,
|
2024-08-27 20:59:54 +08:00
|
|
|
}"
|
2024-08-28 13:42:06 +08:00
|
|
|
:theme-overrides="themeOverrides"
|
2024-08-26 14:07:57 +08:00
|
|
|
>
|
|
|
|
|
|
|
|
<!-- Naive UI 全局样式 -->
|
|
|
|
<n-global-style></n-global-style>
|
|
|
|
|
|
|
|
<!-- 全局侧边栏 -->
|
2024-08-27 20:59:54 +08:00
|
|
|
<div class="app-aside-wrapper">
|
|
|
|
<app-aside />
|
|
|
|
</div>
|
2024-08-26 14:07:57 +08:00
|
|
|
|
|
|
|
<!-- 路由页面 -->
|
|
|
|
<router-view class="app-view"></router-view>
|
|
|
|
|
|
|
|
</n-config-provider>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
import {
|
2024-08-28 13:42:06 +08:00
|
|
|
NConfigProvider, NGlobalStyle,
|
2024-08-29 14:28:53 +08:00
|
|
|
useThemeVars,
|
2024-08-26 14:07:57 +08:00
|
|
|
} from 'naive-ui';
|
|
|
|
|
|
|
|
import {
|
|
|
|
configProviderProps,
|
|
|
|
} from './assets/js/naive-ui';
|
2024-08-27 20:59:54 +08:00
|
|
|
|
|
|
|
import AppAside from './components/AppAside.vue';
|
|
|
|
|
2024-08-28 13:42:06 +08:00
|
|
|
/** 主题变量配置 */
|
|
|
|
const themeOverrides = configProviderProps.themeOverrides;
|
|
|
|
|
|
|
|
/** 主题变量配置 - common */
|
|
|
|
const themeCommon = themeOverrides.common;
|
2024-08-29 14:28:53 +08:00
|
|
|
|
|
|
|
/** 默认主题变量 */
|
|
|
|
const themeVars = useThemeVars();
|
2024-08-26 14:07:57 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less">
|
|
|
|
// 全局 CSS 变量
|
|
|
|
:root {
|
|
|
|
// 基础颜色
|
|
|
|
--color-black: #252525;
|
|
|
|
--color-gray: #E0E0E0;
|
|
|
|
// 分类颜色
|
|
|
|
--color-bg-dark: #252525;
|
|
|
|
--color-bg-light: #F8F8F8;
|
|
|
|
// 滚动条大小
|
|
|
|
--scrollbar-size: 8px;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 滚动条
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
width: var(--scrollbar-size);
|
|
|
|
height: var(--scrollbar-size);
|
|
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
border-radius: 16px;
|
|
|
|
background-color: #CFCFCF;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background-color: #C0C0C0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-08-29 14:28:53 +08:00
|
|
|
// 预设样式
|
|
|
|
.shadow-1 {
|
|
|
|
box-shadow: var(--box-shadow-1);
|
|
|
|
}
|
|
|
|
.shadow-2 {
|
|
|
|
box-shadow: var(--box-shadow-2);
|
|
|
|
}
|
|
|
|
.shadow-3 {
|
|
|
|
box-shadow: var(--box-shadow-3);
|
|
|
|
}
|
|
|
|
|
2024-08-26 14:07:57 +08:00
|
|
|
html, body, #app, .n-config-provider {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
html, body {
|
|
|
|
user-select: none;
|
|
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
}
|
|
|
|
html {
|
2024-08-29 14:28:53 +08:00
|
|
|
box-sizing: border-box;
|
2024-08-26 14:07:57 +08:00
|
|
|
background-color: #FFF;
|
|
|
|
color: var(--color-black);
|
|
|
|
font-size: 16px;
|
2024-08-27 20:59:54 +08:00
|
|
|
line-height: 1;
|
2024-08-29 14:28:53 +08:00
|
|
|
|
|
|
|
* {
|
|
|
|
box-sizing: inherit;
|
|
|
|
}
|
2024-08-26 14:07:57 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.n-config-provider {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row
|
|
|
|
}
|
|
|
|
|
|
|
|
.app-aside, .app-view {
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
2024-08-27 20:59:54 +08:00
|
|
|
.app-aside-wrapper {
|
|
|
|
width: 64px;
|
2024-08-29 14:28:53 +08:00
|
|
|
border-right: 1px solid var(--color-border);
|
2024-08-26 14:07:57 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.app-view {
|
|
|
|
flex-grow: 1;
|
|
|
|
width: 0;
|
2024-08-29 14:28:53 +08:00
|
|
|
background-color: var(--color-action);
|
|
|
|
|
|
|
|
&.flex-col {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
|
|
|
|
.app-view-header {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
padding: 0 16px;
|
|
|
|
height: 64px;
|
|
|
|
background-color: #FFF;
|
|
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
font-size: 18px;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
.app-view-content {
|
2024-08-30 13:29:55 +08:00
|
|
|
flex-grow: 1;
|
2024-08-29 14:28:53 +08:00
|
|
|
padding: 20px;
|
|
|
|
width: 100%;
|
2024-08-30 13:29:55 +08:00
|
|
|
height: 0;
|
2024-08-29 14:28:53 +08:00
|
|
|
background-color: #FFF;
|
|
|
|
|
|
|
|
&.with-margin {
|
|
|
|
margin: 20px;
|
|
|
|
width: calc(100% - 40px);
|
|
|
|
border: 1px solid var(--color-border);
|
|
|
|
}
|
|
|
|
}
|
2024-08-26 14:07:57 +08:00
|
|
|
}
|
|
|
|
</style>
|