refactor: ♻️ 设置面板调整
This commit is contained in:
郝先瑞
parent
aca2606c03
commit
6245adce95
|
|
@ -1,14 +1,8 @@
|
|||
<template>
|
||||
<div ref="rightPanel" :class="{ show: show }">
|
||||
<div class="right-panel-overlay"></div>
|
||||
<div class="right-panel-container">
|
||||
<div
|
||||
class="right-panel-btn"
|
||||
:style="{
|
||||
top: buttonTop + 'px',
|
||||
}"
|
||||
@click="show = !show"
|
||||
>
|
||||
<div ref="rightPanelRef" :class="{ show: show }">
|
||||
<div class="rightPanel-background"></div>
|
||||
<div class="rightPanel">
|
||||
<div class="handle-button" @click="show = !show">
|
||||
<i-ep-close v-show="show" />
|
||||
<i-ep-setting v-show="!show" />
|
||||
</div>
|
||||
|
|
@ -23,43 +17,32 @@
|
|||
import { addClass, removeClass } from "@/utils/index";
|
||||
|
||||
const show = ref(false);
|
||||
|
||||
defineProps({
|
||||
buttonTop: {
|
||||
default: 250,
|
||||
type: Number,
|
||||
},
|
||||
});
|
||||
const rightPanelRef = ref<HTMLElement | null>(null);
|
||||
|
||||
watch(show, (value) => {
|
||||
if (value) {
|
||||
addEventClick();
|
||||
}
|
||||
if (value) {
|
||||
window.addEventListener("click", closeSidebar, { passive: true });
|
||||
addClass(document.body, "showRightPanel");
|
||||
} else {
|
||||
removeClass(document.body, "showRightPanel");
|
||||
}
|
||||
});
|
||||
|
||||
function addEventClick() {
|
||||
window.addEventListener("click", closeSidebar, { passive: true });
|
||||
}
|
||||
|
||||
function closeSidebar(evt: any) {
|
||||
// 主题选择点击不关闭
|
||||
let parent = evt.target.closest(".right-panel-container");
|
||||
if (!parent) {
|
||||
function closeSidebar(evt: MouseEvent) {
|
||||
const target = evt.target as HTMLElement;
|
||||
console.log("target", target);
|
||||
console.log("closest", target.closest(".rightPanel"));
|
||||
if (show.value && target && !target.closest(".rightPanel")) {
|
||||
show.value = false;
|
||||
window.removeEventListener("click", closeSidebar);
|
||||
}
|
||||
}
|
||||
|
||||
const rightPanel = ref();
|
||||
|
||||
function insertToBody() {
|
||||
const body = document.querySelector("body") as any;
|
||||
body.insertBefore(rightPanel.value, body.firstChild);
|
||||
const body = document.querySelector("body");
|
||||
if (body && rightPanelRef.value instanceof Node) {
|
||||
body.insertBefore(rightPanelRef.value, body.firstChild);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -67,25 +50,29 @@ onMounted(() => {
|
|||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
rightPanel.value.remove();
|
||||
if (rightPanelRef.value) {
|
||||
rightPanelRef.value.remove();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style>
|
||||
.showRightPanel {
|
||||
position: relative;
|
||||
width: calc(100% - 15px);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
.right-panel-overlay {
|
||||
<style lang="scss" scoped>
|
||||
.rightPanel-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
.right-panel-container {
|
||||
.rightPanel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -102,33 +89,29 @@ onBeforeUnmount(() => {
|
|||
.show {
|
||||
transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
|
||||
.right-panel-overlay {
|
||||
.rightPanel-background {
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.right-panel-container {
|
||||
.rightPanel {
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.right-panel-btn {
|
||||
.handle-button {
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -36px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
color: var(--el-color-white);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: var(--el-color-primary);
|
||||
border-radius: 6px 0 0 6px;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: -10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="setting-container">
|
||||
<h3 class="text-base font-bold">项目配置</h3>
|
||||
<el-text tag="b">项目配置</el-text>
|
||||
<el-divider>主题设置</el-divider>
|
||||
|
||||
<div class="flex-center">
|
||||
|
|
@ -8,45 +8,51 @@
|
|||
v-model="isDark"
|
||||
:active-icon="Moon"
|
||||
:inactive-icon="Sunny"
|
||||
@change="handleThemeChange"
|
||||
@change="changeTheme"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-divider>界面设置</el-divider>
|
||||
<div class="py-[8px] flex-x-between">
|
||||
|
||||
<div class="py-1 flex-x-between">
|
||||
<el-text>主题颜色</el-text>
|
||||
<el-color-picker
|
||||
v-model="settingsStore.themeColor"
|
||||
:predefine="[
|
||||
'#409EFF',
|
||||
'#1890ff',
|
||||
'#304156',
|
||||
'#212121',
|
||||
'#11a983',
|
||||
'#13c2c2',
|
||||
'#6959CD',
|
||||
'#f5222d',
|
||||
]"
|
||||
@change="changeThemeColor"
|
||||
popper-class="theme-picker-dropdown"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="py-1 flex-x-between">
|
||||
<el-text>开启 Tags-View</el-text>
|
||||
<el-switch v-model="settingsStore.tagsView" />
|
||||
</div>
|
||||
|
||||
<div class="py-[8px] flex-x-between">
|
||||
<div class="py-1 flex-x-between">
|
||||
<span class="text-xs">固定 Header</span>
|
||||
<el-switch v-model="settingsStore.fixedHeader" />
|
||||
</div>
|
||||
|
||||
<div class="py-[8px] flex-x-between">
|
||||
<div class="py-1 flex-x-between">
|
||||
<span class="text-xs">侧边栏 Logo</span>
|
||||
<el-switch v-model="settingsStore.sidebarLogo" />
|
||||
</div>
|
||||
|
||||
<div class="py-[8px] flex-x-between">
|
||||
<div class="py-1 flex-x-between">
|
||||
<span class="text-xs">开启水印</span>
|
||||
<el-switch v-model="settingsStore.watermarkEnabled" />
|
||||
</div>
|
||||
|
||||
<el-divider>主题颜色</el-divider>
|
||||
|
||||
<ul class="w-full space-x-2 flex-x-center py-2">
|
||||
<li
|
||||
v-for="(color, index) in themeColors"
|
||||
:key="index"
|
||||
class="w-[30px] h-[30px] cursor-pointer flex-center color-white"
|
||||
:style="{ background: color }"
|
||||
@click="changeThemeColor(color)"
|
||||
>
|
||||
<i-ep-check v-show="color === currentThemeColor" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<el-divider>导航设置</el-divider>
|
||||
|
||||
<ul class="layout">
|
||||
|
|
@ -95,10 +101,50 @@ import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
|
|||
import { Sunny, Moon } from "@element-plus/icons-vue";
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const appStore = useAppStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const permissionStore = usePermissionStore();
|
||||
/**
|
||||
* 切换布局
|
||||
*/
|
||||
function changeLayout(layout: string) {
|
||||
settingsStore.changeSetting({ key: "layout", value: layout });
|
||||
if (layout === "mix") {
|
||||
route.name && againActiveTop(route.name as string);
|
||||
} else if (layout === "top") {
|
||||
appStore.openSideBar();
|
||||
}
|
||||
}
|
||||
|
||||
function againActiveTop(newVal: string) {
|
||||
const parent = findOutermostParent(permissionStore.routes, newVal);
|
||||
if (appStore.activeTopMenu !== parent.path) {
|
||||
appStore.activeTopMenu(parent.path);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换主题颜色
|
||||
*/
|
||||
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 = {};
|
||||
|
|
@ -128,59 +174,6 @@ function findOutermostParent(tree: any[], findName: string) {
|
|||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换布局
|
||||
*/
|
||||
function changeLayout(layout: string) {
|
||||
settingsStore.changeSetting({ key: "layout", value: layout });
|
||||
if (layout === "mix") {
|
||||
route.name && againActiveTop(route.name as string);
|
||||
} else if (layout === "top") {
|
||||
appStore.openSideBar();
|
||||
}
|
||||
}
|
||||
|
||||
function againActiveTop(newVal: string) {
|
||||
const parent = findOutermostParent(permissionStore.routes, newVal);
|
||||
if (appStore.activeTopMenu !== parent.path) {
|
||||
appStore.activeTopMenu(parent.path);
|
||||
}
|
||||
}
|
||||
|
||||
// 主题颜色
|
||||
const themeColors = ref<string[]>([
|
||||
"#409EFF",
|
||||
"#304156",
|
||||
"#11a983",
|
||||
"#13c2c2",
|
||||
"#6959CD",
|
||||
"#f5222d",
|
||||
]);
|
||||
|
||||
/**
|
||||
* 切换主题颜色
|
||||
*/
|
||||
function changeThemeColor(color: string) {
|
||||
document.documentElement.style.setProperty("--el-color-primary", color);
|
||||
settingsStore.changeSetting({ key: "themeColor", value: color });
|
||||
}
|
||||
|
||||
const currentThemeColor = computed(() => {
|
||||
return settingsStore.themeColor;
|
||||
});
|
||||
|
||||
/**
|
||||
* 切换暗黑模式
|
||||
*/
|
||||
const isDark = ref<boolean>(settingsStore.theme === "dark");
|
||||
const handleThemeChange = (isDark: any) => {
|
||||
useToggle(isDark);
|
||||
settingsStore.changeSetting({
|
||||
key: "theme",
|
||||
value: isDark ? "dark" : "light",
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.document.body.setAttribute("layout", settingsStore.layout);
|
||||
const theme = settingsStore.theme;
|
||||
|
|
@ -261,4 +254,8 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.theme-picker-dropdown) {
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@
|
|||
<!-- 遮罩层 -->
|
||||
<div
|
||||
v-if="classObj.mobile && classObj.openSidebar"
|
||||
class="fixed z-1000 bg-black bg-opacity-20"
|
||||
class="fixed z-999 bg-black bg-opacity-30 wh-full top-0"
|
||||
@click="handleOutsideClick"
|
||||
></div>
|
||||
<Sidebar class="sidebar-container" />
|
||||
|
||||
<!-- 混合布局 -->
|
||||
<div v-if="layout === 'mix'" class="mix-container">
|
||||
<div class="mix-container__left">
|
||||
<div class="sidebar-container__left">
|
||||
<SidebarMenu :menu-list="mixLeftMenus" :base-path="activeTopMenuPath" />
|
||||
<div class="sidebar-toggle">
|
||||
<hamburger
|
||||
|
|
@ -113,6 +113,15 @@ function toggleSidebar() {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fixed-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
width: calc(100% - $sidebar-width);
|
||||
transition: width 0.28s;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -130,15 +139,6 @@ function toggleSidebar() {
|
|||
}
|
||||
}
|
||||
|
||||
.fixed-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
width: calc(100% - $sidebar-width);
|
||||
transition: width 0.28s;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
|
|
@ -204,18 +204,12 @@ function toggleSidebar() {
|
|||
}
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
.sidebar-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mix-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-top: $navbar-height;
|
||||
|
||||
&__left {
|
||||
.sidebar-container__left {
|
||||
position: relative;
|
||||
width: $sidebar-width;
|
||||
height: 100%;
|
||||
|
|
@ -259,6 +253,11 @@ function toggleSidebar() {
|
|||
}
|
||||
|
||||
.hideSidebar {
|
||||
.fixed-header {
|
||||
left: $sidebar-width-collapsed;
|
||||
width: calc(100% - $sidebar-width-collapsed);
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
width: $sidebar-width-collapsed !important;
|
||||
}
|
||||
|
|
@ -267,29 +266,32 @@ function toggleSidebar() {
|
|||
margin-left: $sidebar-width-collapsed;
|
||||
}
|
||||
|
||||
.mix-container__left {
|
||||
.sidebar-container__left {
|
||||
width: $sidebar-width-collapsed;
|
||||
}
|
||||
|
||||
.fixed-header {
|
||||
left: $sidebar-width-collapsed;
|
||||
width: calc(100% - $sidebar-width-collapsed);
|
||||
&.layout-mix {
|
||||
.sidebar-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mobile {
|
||||
.mobile {
|
||||
.fixed-header {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.layout-left {
|
||||
.main-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
.sidebar-container {
|
||||
pointer-events: none;
|
||||
transition-duration: 0.3s;
|
||||
transform: translate3d(-$sidebar-width, 0, 0);
|
||||
transform: translate3d(-210px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -317,5 +319,4 @@ function toggleSidebar() {
|
|||
--el-menu-item-height: $navbar-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
/**
|
||||
* 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