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-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';
|
|
|
|
|
2024-09-01 12:19:02 +08:00
|
|
|
import {
|
|
|
|
onMounted, onBeforeUnmount,
|
|
|
|
} from 'vue';
|
|
|
|
|
2024-08-26 14:07:57 +08:00
|
|
|
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;
|
|
|
|
|
2024-08-29 14:28:53 +08:00
|
|
|
/** 默认主题变量 */
|
|
|
|
const themeVars = useThemeVars();
|
2024-09-01 12:19:02 +08:00
|
|
|
|
|
|
|
/**
|
|
|
|
* @description 阻止默认右键菜单
|
|
|
|
* @param {PointerEvent} event
|
|
|
|
*/
|
|
|
|
function handleContextMenu(event) {
|
|
|
|
|
|
|
|
let element = event.target;
|
|
|
|
|
2024-09-01 18:05:58 +08:00
|
|
|
// 排除按住 Ctrl 键时
|
|
|
|
if (event.ctrlKey) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2024-09-01 12:19:02 +08:00
|
|
|
// 排除输入框元素
|
|
|
|
if (
|
|
|
|
element instanceof HTMLInputElement &&
|
|
|
|
['password', 'text', 'textarea'].includes(element.type)
|
|
|
|
) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2024-10-13 23:23:40 +08:00
|
|
|
/** 初始化 CSS 变量列表 */
|
|
|
|
function initCssVars() {
|
|
|
|
|
|
|
|
let rootStyle = document.documentElement.style;
|
|
|
|
let overrides = themeOverrides.common;
|
|
|
|
let variables = themeVars.value;
|
|
|
|
|
|
|
|
let cssVars = {
|
|
|
|
// 主题变量
|
|
|
|
'--border-radius': overrides.borderRadius,
|
|
|
|
'--border-radius-small': overrides.borderRadiusSmall,
|
|
|
|
'--box-shadow-1': variables.boxShadow1,
|
|
|
|
'--box-shadow-2': variables.boxShadow2,
|
|
|
|
'--box-shadow-3': variables.boxShadow3,
|
|
|
|
'--color-action': variables.actionColor,
|
|
|
|
'--color-border': variables.borderColor,
|
|
|
|
'--color-error': overrides.errorColor,
|
|
|
|
'--color-info': overrides.infoColor,
|
|
|
|
'--color-primary': overrides.primaryColor,
|
|
|
|
'--color-success': overrides.successColor,
|
|
|
|
'--color-text-1': variables.textColor1,
|
|
|
|
'--color-text-2': variables.textColor2,
|
|
|
|
'--color-text-3': variables.textColor3,
|
|
|
|
'--color-warning': overrides.warningColor,
|
|
|
|
// 其他颜色
|
|
|
|
'--color-bg-dark': 'var(--color-text-2)',
|
|
|
|
'--color-bg-light': '#F8F8F8',
|
|
|
|
'--color-black': 'var(--color-text-2)',
|
|
|
|
'--color-gray': '#E0E0E0',
|
|
|
|
'--color-red': 'var(--color-error)',
|
|
|
|
'--color-green': 'var(--color-success)',
|
|
|
|
'--color-blue': 'var(--color-info)',
|
|
|
|
'--color-orange': 'var(--color-warning)',
|
|
|
|
// 滚动条大小
|
|
|
|
'--scrollbar-size': '8px',
|
|
|
|
};
|
|
|
|
|
|
|
|
for (let key in cssVars) {
|
|
|
|
rootStyle.setProperty(key, cssVars[key]);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2024-09-01 12:19:02 +08:00
|
|
|
onMounted(() => {
|
2024-10-13 23:23:40 +08:00
|
|
|
initCssVars();
|
2024-09-01 12:19:02 +08:00
|
|
|
window.addEventListener('contextmenu', handleContextMenu);
|
|
|
|
});
|
|
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
window.removeEventListener('contextmenu', handleContextMenu);
|
|
|
|
});
|
2024-08-26 14:07:57 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less">
|
|
|
|
// 滚动条
|
|
|
|
::-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;
|
2024-09-06 20:43:47 +08:00
|
|
|
position: relative;
|
2024-08-29 14:28:53 +08:00
|
|
|
padding: 0 16px;
|
|
|
|
height: 64px;
|
|
|
|
background-color: #FFF;
|
|
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
font-size: 18px;
|
|
|
|
font-weight: bold;
|
2024-09-01 17:11:14 +08:00
|
|
|
|
|
|
|
.placeholder {
|
|
|
|
flex-grow: 1;
|
|
|
|
width: 0;
|
|
|
|
}
|
2024-08-29 14:28:53 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.app-view-content {
|
2024-08-30 13:29:55 +08:00
|
|
|
flex-grow: 1;
|
2024-09-06 20:43:47 +08:00
|
|
|
position: relative;
|
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;
|
|
|
|
|
2024-08-31 18:11:50 +08:00
|
|
|
&.is-transparent {
|
|
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
|
2024-08-29 14:28:53 +08:00
|
|
|
&.with-margin {
|
|
|
|
margin: 20px;
|
|
|
|
width: calc(100% - 40px);
|
|
|
|
border: 1px solid var(--color-border);
|
|
|
|
}
|
|
|
|
}
|
2024-08-26 14:07:57 +08:00
|
|
|
}
|
2024-09-01 17:11:14 +08:00
|
|
|
|
|
|
|
// -- Naive UI --
|
|
|
|
|
|
|
|
.n-drawer--right-placement {
|
|
|
|
.n-drawer-body {
|
|
|
|
height: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.n-drawer-body-content-wrapper {
|
|
|
|
padding: 20px !important;
|
|
|
|
line-height: 1;
|
|
|
|
}
|
|
|
|
}
|
2024-08-26 14:07:57 +08:00
|
|
|
</style>
|