refactor: ♻️ 主题色、主题、布局等设置重构
This commit is contained in:
郝先瑞
parent
11645b5df1
commit
56996ff213
|
|
@ -1,25 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useAppStore } from "@/store/modules/app";
|
||||
|
||||
const appStore = useAppStore();
|
||||
const { locale } = useI18n();
|
||||
|
||||
function handleLanguageChange(lang: string) {
|
||||
locale.value = lang;
|
||||
appStore.changeLanguage(lang);
|
||||
if (lang === "en") {
|
||||
ElMessage.success("Switch Language Successful!");
|
||||
} else {
|
||||
ElMessage.success("切换语言成功！");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dropdown trigger="click" @command="handleLanguageChange">
|
||||
<div>
|
||||
<svg-icon icon-class="language" />
|
||||
<svg-icon icon-class="language" :size="size" />
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
|
|
@ -36,3 +18,28 @@ function handleLanguageChange(lang: string) {
|
|||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useAppStore } from "@/store/modules/app";
|
||||
|
||||
defineProps({
|
||||
size: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
const appStore = useAppStore();
|
||||
const { locale } = useI18n();
|
||||
|
||||
function handleLanguageChange(lang: string) {
|
||||
locale.value = lang;
|
||||
appStore.changeLanguage(lang);
|
||||
if (lang === "en") {
|
||||
ElMessage.success("Switch Language Successful!");
|
||||
} else {
|
||||
ElMessage.success("切换语言成功！");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { useAppStore } from "@/store/modules/app";
|
||||
|
||||
const appStore = useAppStore();
|
||||
|
||||
const sizeOptions = ref([
|
||||
{ label: "默认", value: "default" },
|
||||
{ label: "大型", value: "large" },
|
||||
{ label: "小型", value: "small" },
|
||||
]);
|
||||
|
||||
function handleSizeChange(size: string) {
|
||||
appStore.changeSize(size);
|
||||
ElMessage.success("切换布局大小成功");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dropdown trigger="click" @command="handleSizeChange">
|
||||
<div>
|
||||
<svg-icon icon-class="size" />
|
||||
<svg-icon icon-class="size" :size="size" />
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
|
|
@ -34,3 +17,26 @@ function handleSizeChange(size: string) {
|
|||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAppStore } from "@/store/modules/app";
|
||||
|
||||
defineProps({
|
||||
size: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
const sizeOptions = ref([
|
||||
{ label: "默认", value: "default" },
|
||||
{ label: "大型", value: "large" },
|
||||
{ label: "小型", value: "small" },
|
||||
]);
|
||||
|
||||
const appStore = useAppStore();
|
||||
function handleSizeChange(size: string) {
|
||||
appStore.changeSize(size);
|
||||
ElMessage.success("切换布局大小成功");
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
/**
|
||||
* 菜单布局枚举
|
||||
*/
|
||||
export enum LayoutEnum {
|
||||
/**
|
||||
* 左侧菜单布局
|
||||
*/
|
||||
LEFT = "left",
|
||||
/**
|
||||
* 顶部菜单布局
|
||||
*/
|
||||
TOP = "top",
|
||||
|
||||
/**
|
||||
* 混合菜单布局
|
||||
*/
|
||||
MIX = "mix",
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
/**
|
||||
* 主题枚举
|
||||
*/
|
||||
export enum ThemeEnum {
|
||||
/**
|
||||
* 明亮主题
|
||||
*/
|
||||
LIGHT = "light",
|
||||
/**
|
||||
* 暗黑主题
|
||||
*/
|
||||
DARK = "dark",
|
||||
|
||||
/**
|
||||
* 系统自动
|
||||
*/
|
||||
AUTO = "auto",
|
||||
}
|
||||
|
|
@ -5,14 +5,15 @@
|
|||
<div class="navbar-item" @click="toggle">
|
||||
<svg-icon
|
||||
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
|
||||
size="12px"
|
||||
/>
|
||||
</div>
|
||||
<!-- 布局大小 -->
|
||||
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
||||
<size-select class="navbar-item" />
|
||||
<size-select class="navbar-item" size="12px" />
|
||||
</el-tooltip>
|
||||
|
||||
<lang-select class="navbar-item" />
|
||||
<lang-select class="navbar-item" size="12px" />
|
||||
</div>
|
||||
|
||||
<!-- 用户头像 -->
|
||||
|
|
@ -31,23 +32,17 @@
|
|||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<router-link to="/">
|
||||
<el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
|
||||
</router-link>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/youlaitech/vue3-element-admin"
|
||||
href="https://gitee.com/youlaiorg/vue3-element-admin"
|
||||
>
|
||||
<el-dropdown-item>Github</el-dropdown-item>
|
||||
</a>
|
||||
<a target="_blank" href="https://gitee.com/haoxr">
|
||||
<el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
|
||||
<el-dropdown-item>项目地址</el-dropdown-item>
|
||||
</a>
|
||||
<a target="_blank" href="https://juejin.cn/post/7228990409909108793">
|
||||
<el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
|
||||
<el-dropdown-item>项目文档</el-dropdown-item>
|
||||
</a>
|
||||
<el-dropdown-item divided @click="logout">
|
||||
{{ $t("navbar.logout") }}
|
||||
注销登出
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
|
|
@ -103,6 +98,12 @@ function logout() {
|
|||
&:hover {
|
||||
background: rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
.svg-icon,
|
||||
svg,
|
||||
.el-icon {
|
||||
vertical-align: -0.15em;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-top,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<div class="flex flex-wrap justify-around w-full h-12">
|
||||
<el-tooltip content="左侧模式" placement="bottom">
|
||||
<div
|
||||
class="layout-item left"
|
||||
:class="{ 'is-active': modelValue === LayoutEnum.LEFT }"
|
||||
@click="updateValue(LayoutEnum.LEFT)"
|
||||
>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="顶部模式" placement="bottom">
|
||||
<div
|
||||
class="layout-item top"
|
||||
:class="{ 'is-active': modelValue === LayoutEnum.TOP }"
|
||||
@click="updateValue(LayoutEnum.TOP)"
|
||||
>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="混合模式" placement="bottom">
|
||||
<div
|
||||
class="layout-item mix"
|
||||
:class="{ 'is-active': modelValue === LayoutEnum.MIX }"
|
||||
@click="updateValue(LayoutEnum.MIX)"
|
||||
>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { LayoutEnum } from "@/enums/LayoutEnum";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: String,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
function updateValue(layout: string) {
|
||||
emit("update:modelValue", layout);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout-selector {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.layout-item {
|
||||
position: relative;
|
||||
width: 18%;
|
||||
height: 45px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background: #f0f2f5;
|
||||
border-radius: 4px;
|
||||
|
||||
&.mix div:nth-child(1),
|
||||
&.top div:nth-child(1) {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: #1b2a47;
|
||||
box-shadow: 0 0 1px #888;
|
||||
}
|
||||
|
||||
&.mix div:nth-child(2) {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 30%;
|
||||
height: 70%;
|
||||
background: #1b2a47;
|
||||
box-shadow: 0 0 1px #888;
|
||||
}
|
||||
|
||||
&.left div:nth-child(1) {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background: #1b2a47;
|
||||
}
|
||||
|
||||
&.left div:nth-child(2) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 70%;
|
||||
height: 30%;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 1px #888;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-item.is-active {
|
||||
border: 2px solid var(--el-color-primary);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<el-color-picker
|
||||
v-model="currentColor"
|
||||
:predefine="colorPresets"
|
||||
popper-class="theme-picker-dropdown"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const props = defineProps({
|
||||
modelValue: String,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
// 定义颜色预设
|
||||
const colorPresets = [
|
||||
"#409EFF",
|
||||
"#ff4500",
|
||||
"#ff8c00",
|
||||
"#90ee90",
|
||||
"#00ced1",
|
||||
"#1e90ff",
|
||||
"#c71585",
|
||||
"rgba(255, 69, 0, 0.68)",
|
||||
"rgb(255, 120, 0)",
|
||||
"hsva(120, 40, 94)",
|
||||
];
|
||||
|
||||
const currentColor = ref(props.modelValue);
|
||||
|
||||
watch(currentColor, (newValue) => {
|
||||
emit("update:modelValue", newValue);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.theme-picker-dropdown) {
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,13 @@
|
|||
<template>
|
||||
<div class="setting-container">
|
||||
<el-text tag="b">项目配置</el-text>
|
||||
<div
|
||||
:class="['settings-button', { show: settingsVisible }]"
|
||||
@click="settingsVisible = !settingsVisible"
|
||||
>
|
||||
<i-ep-close v-show="settingsVisible" />
|
||||
<i-ep-setting v-show="!settingsVisible" />
|
||||
</div>
|
||||
|
||||
<el-drawer v-model="settingsVisible" size="300" title="项目配置">
|
||||
<el-divider>主题设置</el-divider>
|
||||
|
||||
<div class="flex-center">
|
||||
|
|
@ -14,104 +21,96 @@
|
|||
|
||||
<el-divider>界面设置</el-divider>
|
||||
|
||||
<div class="py-1 flex-x-between">
|
||||
<div class="settings-option">
|
||||
<el-text>主题颜色</el-text>
|
||||
<el-color-picker
|
||||
<ThemeColorPicker
|
||||
v-model="settingsStore.themeColor"
|
||||
:predefine="[
|
||||
'#409EFF',
|
||||
'#1890ff',
|
||||
'#304156',
|
||||
'#212121',
|
||||
'#11a983',
|
||||
'#13c2c2',
|
||||
'#6959CD',
|
||||
'#f5222d',
|
||||
]"
|
||||
@change="changeThemeColor"
|
||||
popper-class="theme-picker-dropdown"
|
||||
@update:model-value="changeThemeColor"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="py-1 flex-x-between">
|
||||
<div class="settings-option">
|
||||
<el-text>开启 Tags-View</el-text>
|
||||
<el-switch v-model="settingsStore.tagsView" />
|
||||
</div>
|
||||
|
||||
<div class="py-1 flex-x-between">
|
||||
<div class="settings-option">
|
||||
<span class="text-xs">固定 Header</span>
|
||||
<el-switch v-model="settingsStore.fixedHeader" />
|
||||
</div>
|
||||
|
||||
<div class="py-1 flex-x-between">
|
||||
<div class="settings-option">
|
||||
<span class="text-xs">侧边栏 Logo</span>
|
||||
<el-switch v-model="settingsStore.sidebarLogo" />
|
||||
</div>
|
||||
|
||||
<div class="py-1 flex-x-between">
|
||||
<div class="settings-option">
|
||||
<span class="text-xs">开启水印</span>
|
||||
<el-switch v-model="settingsStore.watermarkEnabled" />
|
||||
</div>
|
||||
|
||||
<el-divider>导航设置</el-divider>
|
||||
|
||||
<ul class="layout">
|
||||
<el-tooltip content="左侧模式" placement="bottom">
|
||||
<li
|
||||
:class="
|
||||
'layout-item layout-left ' +
|
||||
(settingsStore.layout === 'left' ? 'is-active' : '')
|
||||
"
|
||||
@click="changeLayout('left')"
|
||||
>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</li>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="顶部模式" placement="bottom">
|
||||
<li
|
||||
:class="
|
||||
'layout-item layout-top ' +
|
||||
(settingsStore.layout === 'top' ? 'is-active' : '')
|
||||
"
|
||||
@click="changeLayout('top')"
|
||||
>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</li>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="混合模式" placement="bottom">
|
||||
<li
|
||||
:class="
|
||||
'layout-item layout-mix ' +
|
||||
(settingsStore.layout === 'mix' ? 'is-active' : '')
|
||||
"
|
||||
@click="changeLayout('mix')"
|
||||
>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</li>
|
||||
</el-tooltip>
|
||||
</ul>
|
||||
</div>
|
||||
<LayoutSelect
|
||||
v-model="settingsStore.layout"
|
||||
@update:model-value="changeLayout"
|
||||
/>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
|
||||
import { Sunny, Moon } from "@element-plus/icons-vue";
|
||||
import { LayoutEnum } from "@/enums/LayoutEnum";
|
||||
import { ThemeEnum } from "@/enums/ThemeEnum";
|
||||
import { genMixColor } from "@/utils/color";
|
||||
|
||||
const route = useRoute();
|
||||
const appStore = useAppStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const permissionStore = usePermissionStore();
|
||||
|
||||
const settingsVisible = ref(false);
|
||||
|
||||
/**
|
||||
* 切换主题颜色
|
||||
*/
|
||||
function changeThemeColor(color: string) {
|
||||
settingsStore.changeThemeColor(color);
|
||||
|
||||
const { DEFAULT, dark, light } = genMixColor(color);
|
||||
setStyleProperty(`--el-color-primary`, DEFAULT);
|
||||
setStyleProperty(`--el-color-primary-dark-2`, dark[2]);
|
||||
setStyleProperty(`--el-color-primary-light-3`, light[3]);
|
||||
setStyleProperty(`--el-color-primary-light-5`, light[5]);
|
||||
setStyleProperty(`--el-color-primary-light-7`, light[7]);
|
||||
setStyleProperty(`--el-color-primary-light-8`, light[8]);
|
||||
setStyleProperty(`--el-color-primary-light-9`, light[9]);
|
||||
}
|
||||
|
||||
function setStyleProperty(propName: string, value: string) {
|
||||
document.documentElement.style.setProperty(propName, value);
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换主题
|
||||
*/
|
||||
const isDark = ref<boolean>(settingsStore.theme === ThemeEnum.DARK);
|
||||
const changeTheme = (isDark: any) => {
|
||||
useToggle(isDark);
|
||||
const theme = isDark ? ThemeEnum.DARK : ThemeEnum.LIGHT;
|
||||
settingsStore.changeTheme(theme);
|
||||
document.documentElement.classList.toggle("dark", theme === ThemeEnum.DARK);
|
||||
};
|
||||
|
||||
/**
|
||||
* 切换布局
|
||||
*/
|
||||
function changeLayout(layout: string) {
|
||||
settingsStore.changeSetting({ key: "layout", value: layout });
|
||||
if (layout === "mix") {
|
||||
settingsStore.changeLayout(layout);
|
||||
if (layout === LayoutEnum.MIX) {
|
||||
route.name && againActiveTop(route.name as string);
|
||||
} else if (layout === "top") {
|
||||
} else if (layout === LayoutEnum.TOP) {
|
||||
appStore.openSideBar();
|
||||
}
|
||||
}
|
||||
|
|
@ -123,29 +122,6 @@ function againActiveTop(newVal: string) {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换主题颜色
|
||||
*/
|
||||
function changeThemeColor(color: string) {
|
||||
window.document.documentElement.style.setProperty(
|
||||
"--el-color-primary",
|
||||
color
|
||||
);
|
||||
settingsStore.changeSetting({ key: "themeColor", value: color });
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换暗黑模式
|
||||
*/
|
||||
const isDark = ref<boolean>(settingsStore.theme === "dark");
|
||||
const changeTheme = (isDark: any) => {
|
||||
useToggle(isDark);
|
||||
settingsStore.changeSetting({
|
||||
key: "theme",
|
||||
value: isDark ? "dark" : "light",
|
||||
});
|
||||
};
|
||||
|
||||
function findOutermostParent(tree: any[], findName: string) {
|
||||
let parentMap: any = {};
|
||||
|
||||
|
|
@ -175,87 +151,34 @@ function findOutermostParent(tree: any[], findName: string) {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.document.body.setAttribute("layout", settingsStore.layout);
|
||||
const theme = settingsStore.theme;
|
||||
if (theme == "dark") {
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
|
||||
document.documentElement.style.setProperty(
|
||||
"--el-color-primary",
|
||||
settingsStore.themeColor
|
||||
);
|
||||
changeTheme(settingsStore.theme == ThemeEnum.DARK); // 初始化主题
|
||||
changeThemeColor(settingsStore.themeColor); // 初始化主题颜色
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.setting-container {
|
||||
padding: 16px;
|
||||
.settings-button {
|
||||
position: fixed;
|
||||
top: 250px;
|
||||
right: 0;
|
||||
z-index: 2001;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: var(--el-color-white);
|
||||
cursor: pointer;
|
||||
background-color: var(--el-color-primary);
|
||||
border-radius: 6px 0 0 6px;
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
@apply flex-center;
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
width: 18%;
|
||||
height: 45px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background: #f0f2f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&-item.is-active {
|
||||
border: 2px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
&-mix div:nth-child(1) {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: #1b2a47;
|
||||
box-shadow: 0 0 1px #888;
|
||||
}
|
||||
|
||||
&-mix div:nth-child(2) {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 30%;
|
||||
height: 70%;
|
||||
background: #1b2a47;
|
||||
box-shadow: 0 0 1px #888;
|
||||
}
|
||||
|
||||
&-top div:nth-child(1) {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: #1b2a47;
|
||||
box-shadow: 0 0 1px #888;
|
||||
}
|
||||
|
||||
&-left div:nth-child(1) {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background: #1b2a47;
|
||||
}
|
||||
|
||||
&-left div:nth-child(2) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 70%;
|
||||
height: 30%;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 1px #888;
|
||||
}
|
||||
&.show {
|
||||
right: 300px;
|
||||
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.theme-picker-dropdown) {
|
||||
z-index: 99999 !important;
|
||||
.settings-option {
|
||||
@apply py-1 flex-x-between;
|
||||
}
|
||||
</style>
|
||||
@/utils/color
|
||||
|
|
|
|||
|
|
@ -3,14 +3,16 @@
|
|||
<!-- 遮罩层 -->
|
||||
<div
|
||||
v-if="classObj.mobile && classObj.openSidebar"
|
||||
class="fixed-tl z-999 bg-black bg-opacity-30 wh-full"
|
||||
class="wh-full fixed-lt z-999 bg-black bg-opacity-30"
|
||||
@click="handleOutsideClick"
|
||||
></div>
|
||||
|
||||
<!-- 公用侧边栏 -->
|
||||
<Sidebar class="sidebar-container" />
|
||||
|
||||
<!-- 混合布局 -->
|
||||
<div v-if="layout === 'mix'" class="mix-container">
|
||||
<div class="sidebar-container__left">
|
||||
<div class="mix-container__left">
|
||||
<SidebarMenu :menu-list="mixLeftMenus" :base-path="activeTopMenuPath" />
|
||||
<div class="sidebar-toggle">
|
||||
<hamburger
|
||||
|
|
@ -25,22 +27,18 @@
|
|||
<TagsView v-if="showTagsView" />
|
||||
</div>
|
||||
<AppMain />
|
||||
<RightPanel v-if="defaultSettings.showSettings">
|
||||
<Settings />
|
||||
</RightPanel>
|
||||
<Settings v-if="defaultSettings.showSettings" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 左侧布局|| 顶部布局 -->
|
||||
<!-- 左侧和顶部布局 -->
|
||||
<div v-else :class="{ hasTagsView: showTagsView }" class="main-container">
|
||||
<div :class="{ 'fixed-header': fixedHeader }">
|
||||
<NavBar v-if="layout === 'left'" />
|
||||
<TagsView v-if="showTagsView" />
|
||||
</div>
|
||||
<AppMain />
|
||||
<RightPanel v-if="defaultSettings.showSettings">
|
||||
<Settings />
|
||||
</RightPanel>
|
||||
<Settings v-if="defaultSettings.showSettings" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -53,17 +51,11 @@ const appStore = useAppStore();
|
|||
const settingsStore = useSettingsStore();
|
||||
const permissionStore = usePermissionStore();
|
||||
|
||||
const fixedHeader = computed(() => settingsStore.fixedHeader);
|
||||
const showTagsView = computed(() => settingsStore.tagsView);
|
||||
const layout = computed(() => settingsStore.layout);
|
||||
|
||||
const activeTopMenuPath = computed(() => {
|
||||
return appStore.activeTopMenuPath;
|
||||
});
|
||||
// 混合模式左侧菜单
|
||||
const mixLeftMenus = computed(() => {
|
||||
return permissionStore.mixLeftMenus;
|
||||
});
|
||||
const fixedHeader = computed(() => settingsStore.fixedHeader); // 是否固定header
|
||||
const showTagsView = computed(() => settingsStore.tagsView); // 是否显示tagsView
|
||||
const layout = computed(() => settingsStore.layout); // 布局模式 left top mix
|
||||
const activeTopMenuPath = computed(() => appStore.activeTopMenuPath); // 顶部菜单激活path
|
||||
const mixLeftMenus = computed(() => permissionStore.mixLeftMenus); // 混合布局左侧菜单
|
||||
|
||||
watch(
|
||||
() => activeTopMenuPath.value,
|
||||
|
|
@ -209,7 +201,7 @@ function toggleSidebar() {
|
|||
height: 100%;
|
||||
padding-top: $navbar-height;
|
||||
|
||||
.sidebar-container__left {
|
||||
.mix-container__left {
|
||||
position: relative;
|
||||
width: $sidebar-width;
|
||||
height: 100%;
|
||||
|
|
@ -284,7 +276,7 @@ function toggleSidebar() {
|
|||
}
|
||||
|
||||
.mix-container {
|
||||
.sidebar-container__left {
|
||||
.mix-container__left {
|
||||
width: $sidebar-width-collapsed;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,8 +35,6 @@ export const useSettingsStore = defineStore("setting", () => {
|
|||
tagsView,
|
||||
sidebarLogo,
|
||||
layout,
|
||||
themeColor,
|
||||
theme,
|
||||
watermarkEnabled,
|
||||
};
|
||||
|
||||
|
|
@ -50,21 +48,41 @@ export const useSettingsStore = defineStore("setting", () => {
|
|||
const setting = settingsMap[key];
|
||||
if (setting) {
|
||||
setting.value = value;
|
||||
// Special handling for theme changes
|
||||
if (key === "theme") {
|
||||
document.documentElement.classList.toggle("dark", value === "dark");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换主题
|
||||
*/
|
||||
function changeTheme(val: string) {
|
||||
theme.value = val;
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换主题颜色
|
||||
*/
|
||||
function changeThemeColor(val: string) {
|
||||
themeColor.value = val;
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换布局
|
||||
*/
|
||||
function changeLayout(val: string) {
|
||||
layout.value = val;
|
||||
}
|
||||
|
||||
return {
|
||||
tagsView,
|
||||
fixedHeader,
|
||||
sidebarLogo,
|
||||
layout,
|
||||
themeColor,
|
||||
changeSetting,
|
||||
theme,
|
||||
watermarkEnabled,
|
||||
changeSetting,
|
||||
changeTheme,
|
||||
changeThemeColor,
|
||||
changeLayout,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,287 @@
|
|||
/**
|
||||
* 颜色生成
|
||||
*/
|
||||
type RGB = {
|
||||
r: number;
|
||||
g: number;
|
||||
b: number;
|
||||
};
|
||||
type HSL = {
|
||||
h: number;
|
||||
s: number;
|
||||
l: number;
|
||||
};
|
||||
type HEX =
|
||||
| "0"
|
||||
| "1"
|
||||
| "2"
|
||||
| "3"
|
||||
| "4"
|
||||
| "5"
|
||||
| "6"
|
||||
| "7"
|
||||
| "8"
|
||||
| "9"
|
||||
| "A"
|
||||
| "B"
|
||||
| "C"
|
||||
| "D"
|
||||
| "E"
|
||||
| "F";
|
||||
|
||||
const RGBUnit = 255;
|
||||
const HEX_MAP: Record<HEX, number> = {
|
||||
0: 0,
|
||||
1: 1,
|
||||
2: 2,
|
||||
3: 3,
|
||||
4: 4,
|
||||
5: 5,
|
||||
6: 6,
|
||||
7: 7,
|
||||
8: 8,
|
||||
9: 9,
|
||||
A: 10,
|
||||
B: 11,
|
||||
C: 12,
|
||||
D: 13,
|
||||
E: 14,
|
||||
F: 15,
|
||||
};
|
||||
const rgbWhite = {
|
||||
r: 255,
|
||||
g: 255,
|
||||
b: 255,
|
||||
};
|
||||
const rgbBlack = {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0,
|
||||
};
|
||||
|
||||
/**
|
||||
* RGB颜色转HSL颜色值
|
||||
* @param r 红色值
|
||||
* @param g 绿色值
|
||||
* @param b 蓝色值
|
||||
* @returns { h: [0, 360]; s: [0, 1]; l: [0, 1] }
|
||||
*/
|
||||
function rgbToHsl(rgb: RGB): HSL {
|
||||
let { r, g, b } = rgb;
|
||||
const hsl = {
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 0,
|
||||
};
|
||||
|
||||
// 计算rgb基数 ∈ [0, 1]
|
||||
r /= RGBUnit;
|
||||
g /= RGBUnit;
|
||||
b /= RGBUnit;
|
||||
const max = Math.max(r, g, b);
|
||||
const min = Math.min(r, g, b);
|
||||
|
||||
// 计算h
|
||||
if (max === min) {
|
||||
hsl.h = 0;
|
||||
} else if (max === r) {
|
||||
hsl.h = 60 * ((g - b) / (max - min)) + (g >= b ? 0 : 360);
|
||||
} else if (max === g) {
|
||||
hsl.h = 60 * ((b - r) / (max - min)) + 120;
|
||||
} else {
|
||||
hsl.h = 60 * ((r - g) / (max - min)) + 240;
|
||||
}
|
||||
hsl.h = hsl.h > 360 ? hsl.h - 360 : hsl.h;
|
||||
|
||||
// 计算l
|
||||
hsl.l = (max + min) / 2;
|
||||
|
||||
// 计算s
|
||||
if (hsl.l === 0 || max === min) {
|
||||
// 灰/白/黑
|
||||
hsl.s = 0;
|
||||
} else if (hsl.l > 0 && hsl.l <= 0.5) {
|
||||
hsl.s = (max - min) / (max + min);
|
||||
} else {
|
||||
hsl.s = (max - min) / (2 - (max + min));
|
||||
}
|
||||
|
||||
return hsl;
|
||||
}
|
||||
|
||||
/**
|
||||
* hsl -> rgb
|
||||
* @param h [0, 360]
|
||||
* @param s [0, 1]
|
||||
* @param l [0, 1]
|
||||
* @returns RGB
|
||||
*/
|
||||
function hslToRgb(hsl: HSL): RGB {
|
||||
const { h, s, l } = hsl;
|
||||
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||||
const p = 2 * l - q;
|
||||
const hUnit = h / 360; // 色相转换为 [0, 1]
|
||||
|
||||
const Cr = fillCircleVal(hUnit + 1 / 3);
|
||||
const Cg = fillCircleVal(hUnit);
|
||||
const Cb = fillCircleVal(hUnit - 1 / 3);
|
||||
|
||||
// 保持 [0, 1] 环状取值
|
||||
function fillCircleVal(val: number): number {
|
||||
return val < 0 ? val + 1 : val > 1 ? val - 1 : val;
|
||||
}
|
||||
|
||||
function computedRgb(val: number): number {
|
||||
let colorVal: number;
|
||||
if (val < 1 / 6) {
|
||||
colorVal = p + (q - p) * 6 * val;
|
||||
} else if (val >= 1 / 6 && val < 1 / 2) {
|
||||
colorVal = q;
|
||||
} else if (val >= 1 / 2 && val < 2 / 3) {
|
||||
colorVal = p + (q - p) * 6 * (2 / 3 - val);
|
||||
} else {
|
||||
colorVal = p;
|
||||
}
|
||||
return colorVal * 255;
|
||||
}
|
||||
|
||||
return {
|
||||
r: Number(computedRgb(Cr).toFixed(0)),
|
||||
g: Number(computedRgb(Cg).toFixed(0)),
|
||||
b: Number(computedRgb(Cb).toFixed(0)),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 16进制颜色转换RGB
|
||||
* @param color #rrggbb
|
||||
* @returns RGB
|
||||
*/
|
||||
function hexToRGB(hex: string): RGB {
|
||||
hex = hex.toUpperCase();
|
||||
const hexRegExp = /^#([0-9A-F]{6})$/;
|
||||
if (!hexRegExp.test(hex)) {
|
||||
throw new Error("请传入合法的16进制颜色值，eg: #FF0000");
|
||||
}
|
||||
|
||||
const hexValArr = (hexRegExp.exec(hex)?.[1] || "000000").split(
|
||||
""
|
||||
) as Array<HEX>;
|
||||
|
||||
return {
|
||||
r: HEX_MAP[hexValArr[0]] * 16 + HEX_MAP[hexValArr[1]],
|
||||
g: HEX_MAP[hexValArr[2]] * 16 + HEX_MAP[hexValArr[3]],
|
||||
b: HEX_MAP[hexValArr[4]] * 16 + HEX_MAP[hexValArr[5]],
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* rgb 转 16进制
|
||||
* @param rgb RGB
|
||||
* @returns #HEX{6}
|
||||
*/
|
||||
function rgbToHex(rgb: RGB): string {
|
||||
const HEX_MAP_REVERSE: Record<string, HEX> = {};
|
||||
for (const key in HEX_MAP) {
|
||||
HEX_MAP_REVERSE[HEX_MAP[key as HEX]] = key as HEX;
|
||||
}
|
||||
function getRemainderAndQuotient(val: number): string {
|
||||
val = Math.round(val);
|
||||
return `${HEX_MAP_REVERSE[Math.floor(val / 16)]}${
|
||||
HEX_MAP_REVERSE[val % 16]
|
||||
}`;
|
||||
}
|
||||
|
||||
return `#${getRemainderAndQuotient(rgb.r)}${getRemainderAndQuotient(
|
||||
rgb.g
|
||||
)}${getRemainderAndQuotient(rgb.b)}`;
|
||||
}
|
||||
|
||||
// hsl 转 16进制
|
||||
function hslToHex(hsl: HSL): string {
|
||||
return rgbToHex(hslToRgb(hsl));
|
||||
}
|
||||
|
||||
// 16进制 转 hsl
|
||||
function hexToHsl(hex: string): HSL {
|
||||
return rgbToHsl(hexToRGB(hex));
|
||||
}
|
||||
|
||||
// 生成混合色（混黑 + 混白）
|
||||
function genMixColor(base: string | RGB | HSL): {
|
||||
DEFAULT: string;
|
||||
dark: {
|
||||
1: string;
|
||||
2: string;
|
||||
3: string;
|
||||
4: string;
|
||||
5: string;
|
||||
6: string;
|
||||
7: string;
|
||||
8: string;
|
||||
9: string;
|
||||
};
|
||||
light: {
|
||||
1: string;
|
||||
2: string;
|
||||
3: string;
|
||||
4: string;
|
||||
5: string;
|
||||
6: string;
|
||||
7: string;
|
||||
8: string;
|
||||
9: string;
|
||||
};
|
||||
} {
|
||||
// 基准色统一转换为RGB
|
||||
if (typeof base === "string") {
|
||||
base = hexToRGB(base);
|
||||
} else if ("h" in base) {
|
||||
base = hslToRgb(base);
|
||||
}
|
||||
|
||||
// 混合色
|
||||
function mix(color: RGB, mixColor: RGB, weight: number): RGB {
|
||||
return {
|
||||
r: color.r * (1 - weight) + mixColor.r * weight,
|
||||
g: color.g * (1 - weight) + mixColor.g * weight,
|
||||
b: color.b * (1 - weight) + mixColor.b * weight,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
DEFAULT: rgbToHex(base),
|
||||
dark: {
|
||||
1: rgbToHex(mix(base, rgbBlack, 0.1)),
|
||||
2: rgbToHex(mix(base, rgbBlack, 0.2)),
|
||||
3: rgbToHex(mix(base, rgbBlack, 0.3)),
|
||||
4: rgbToHex(mix(base, rgbBlack, 0.4)),
|
||||
5: rgbToHex(mix(base, rgbBlack, 0.5)),
|
||||
6: rgbToHex(mix(base, rgbBlack, 0.6)),
|
||||
7: rgbToHex(mix(base, rgbBlack, 0.7)),
|
||||
8: rgbToHex(mix(base, rgbBlack, 0.78)),
|
||||
9: rgbToHex(mix(base, rgbBlack, 0.85)),
|
||||
},
|
||||
light: {
|
||||
1: rgbToHex(mix(base, rgbWhite, 0.1)),
|
||||
2: rgbToHex(mix(base, rgbWhite, 0.2)),
|
||||
3: rgbToHex(mix(base, rgbWhite, 0.3)),
|
||||
4: rgbToHex(mix(base, rgbWhite, 0.4)),
|
||||
5: rgbToHex(mix(base, rgbWhite, 0.5)),
|
||||
6: rgbToHex(mix(base, rgbWhite, 0.6)),
|
||||
7: rgbToHex(mix(base, rgbWhite, 0.7)),
|
||||
8: rgbToHex(mix(base, rgbWhite, 0.78)),
|
||||
9: rgbToHex(mix(base, rgbWhite, 0.85)),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export {
|
||||
genMixColor,
|
||||
rgbToHsl,
|
||||
rgbToHex,
|
||||
hslToRgb,
|
||||
hslToHex,
|
||||
hexToRGB,
|
||||
hexToHsl,
|
||||
};
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
/**
|
||||
* hex颜色转rgb颜色
|
||||
* @param str 颜色值字符串
|
||||
* @return 返回处理后的颜色值
|
||||
*/
|
||||
export function hexToRgb(str: any) {
|
||||
let hexs: any = "";
|
||||
const reg = /^\#?[0-9A-Fa-f]{6}$/;
|
||||
if (!reg.test(str)) return ElMessage.warning("错误的hex");
|
||||
str = str.replace("#", "");
|
||||
hexs = str.match(/../g);
|
||||
for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
|
||||
return hexs;
|
||||
}
|
||||
|
||||
/**
|
||||
* rgb颜色转Hex颜色
|
||||
* @param r 代表红色
|
||||
* @param g 代表绿色
|
||||
* @param b 代表蓝色
|
||||
* @return 返回处理后的颜色值
|
||||
*/
|
||||
export function rgbToHex(r: any, g: any, b: any) {
|
||||
const reg = /^\d{1,3}$/;
|
||||
if (!reg.test(r) || !reg.test(g) || !reg.test(b))
|
||||
return ElMessage.warning("错误的rgb颜色值");
|
||||
const hexs = [r.toString(16), g.toString(16), b.toString(16)];
|
||||
for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
|
||||
return `#${hexs.join("")}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 加深颜色值
|
||||
* @param color 颜色值字符串
|
||||
* @param level 加深的程度，限0-1之间
|
||||
* @return 返回处理后的颜色值
|
||||
*/
|
||||
export function getDarkColor(color: string, level: number) {
|
||||
const reg = /^\#?[0-9A-Fa-f]{6}$/;
|
||||
if (!reg.test(color)) return ElMessage.warning("错误的hex颜色值");
|
||||
const rgb = hexToRgb(color);
|
||||
for (let i = 0; i < 3; i++)
|
||||
rgb[i] = Math.round(20.5 * level + rgb[i] * (1 - level));
|
||||
return rgbToHex(rgb[0], rgb[1], rgb[2]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 变浅颜色值
|
||||
* @param color 颜色值字符串
|
||||
* @param level 加深的程度，限0-1之间
|
||||
* @return 返回处理后的颜色值
|
||||
*/
|
||||
export function getLightColor(color: string, level: number) {
|
||||
const reg = /^\#?[0-9A-Fa-f]{6}$/;
|
||||
if (!reg.test(color)) return ElMessage.warning("错误的hex颜色值");
|
||||
const rgb = hexToRgb(color);
|
||||
for (let i = 0; i < 3; i++)
|
||||
rgb[i] = Math.round(255 * level + rgb[i] * (1 - level));
|
||||
return rgbToHex(rgb[0], rgb[1], rgb[2]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据dark加工颜色值
|
||||
* @param color 颜色值字符串
|
||||
* @param level 加深的程度，限0-1之间
|
||||
* @return 返回处理后的颜色值
|
||||
*/
|
||||
export function getThemeColor(dark: boolean, color: string, level: number) {
|
||||
return dark ? getDarkColor(color, level) : getLightColor(color, level);
|
||||
}
|
||||
Loading…
Reference in New Issue