From acd6bbae394c997523b5051d019e584db1845c4c Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期三, 17 六月 2026 14:29:04 +0800
Subject: [PATCH] 样式修改
---
src/layout/components/Settings/index.vue | 437 ++++++++++++++++++++++++++---------------------------
1 files changed, 215 insertions(+), 222 deletions(-)
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 917b28b..c478c78 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -1,287 +1,280 @@
<template>
- <el-drawer v-model="showSettings" direction="rtl" size="300px">
-<!-- <div class="setting-drawer-title">-->
-<!-- <h3 class="drawer-title">涓婚椋庢牸璁剧疆</h3>-->
-<!-- </div>-->
-<!-- <div class="setting-drawer-block-checbox">-->
-<!-- <div-->
-<!-- class="setting-drawer-block-checbox-item"-->
-<!-- @click="handleTheme('theme-dark')"-->
-<!-- >-->
-<!-- <img src="@/assets/images/dark.svg" alt="dark" />-->
-<!-- <div-->
-<!-- v-if="sideTheme === 'theme-dark'"-->
-<!-- class="setting-drawer-block-checbox-selectIcon"-->
-<!-- style="display: block"-->
-<!-- >-->
-<!-- <i aria-label="鍥炬爣: check" class="anticon anticon-check">-->
-<!-- <svg-->
-<!-- viewBox="64 64 896 896"-->
-<!-- data-icon="check"-->
-<!-- width="1em"-->
-<!-- height="1em"-->
-<!-- :fill="theme"-->
-<!-- aria-hidden="true"-->
-<!-- focusable="false"-->
-<!-- class-->
-<!-- >-->
-<!-- <path-->
-<!-- d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"-->
-<!-- />-->
-<!-- </svg>-->
-<!-- </i>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- <div-->
-<!-- class="setting-drawer-block-checbox-item"-->
-<!-- @click="handleTheme('theme-light')"-->
-<!-- >-->
-<!-- <img src="@/assets/images/light.svg" alt="light" />-->
-<!-- <div-->
-<!-- v-if="sideTheme === 'theme-light'"-->
-<!-- class="setting-drawer-block-checbox-selectIcon"-->
-<!-- style="display: block"-->
-<!-- >-->
-<!-- <i aria-label="鍥炬爣: check" class="anticon anticon-check">-->
-<!-- <svg-->
-<!-- viewBox="64 64 896 896"-->
-<!-- data-icon="check"-->
-<!-- width="1em"-->
-<!-- height="1em"-->
-<!-- :fill="theme"-->
-<!-- aria-hidden="true"-->
-<!-- focusable="false"-->
-<!-- class-->
-<!-- >-->
-<!-- <path-->
-<!-- d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"-->
-<!-- />-->
-<!-- </svg>-->
-<!-- </i>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- </div>-->
+ <el-drawer v-model="showSettings"
+ direction="rtl"
+ size="300px">
+ <!-- <div class="setting-drawer-title">-->
+ <!-- <h3 class="drawer-title">涓婚椋庢牸璁剧疆</h3>-->
+ <!-- </div>-->
+ <!-- <div class="setting-drawer-block-checbox">-->
+ <!-- <div-->
+ <!-- class="setting-drawer-block-checbox-item"-->
+ <!-- @click="handleTheme('theme-dark')"-->
+ <!-- >-->
+ <!-- <img src="@/assets/images/dark.svg" alt="dark" />-->
+ <!-- <div-->
+ <!-- v-if="sideTheme === 'theme-dark'"-->
+ <!-- class="setting-drawer-block-checbox-selectIcon"-->
+ <!-- style="display: block"-->
+ <!-- >-->
+ <!-- <i aria-label="鍥炬爣: check" class="anticon anticon-check">-->
+ <!-- <svg-->
+ <!-- viewBox="64 64 896 896"-->
+ <!-- data-icon="check"-->
+ <!-- width="1em"-->
+ <!-- height="1em"-->
+ <!-- :fill="theme"-->
+ <!-- aria-hidden="true"-->
+ <!-- focusable="false"-->
+ <!-- class-->
+ <!-- >-->
+ <!-- <path-->
+ <!-- d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"-->
+ <!-- />-->
+ <!-- </svg>-->
+ <!-- </i>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- <div-->
+ <!-- class="setting-drawer-block-checbox-item"-->
+ <!-- @click="handleTheme('theme-light')"-->
+ <!-- >-->
+ <!-- <img src="@/assets/images/light.svg" alt="light" />-->
+ <!-- <div-->
+ <!-- v-if="sideTheme === 'theme-light'"-->
+ <!-- class="setting-drawer-block-checbox-selectIcon"-->
+ <!-- style="display: block"-->
+ <!-- >-->
+ <!-- <i aria-label="鍥炬爣: check" class="anticon anticon-check">-->
+ <!-- <svg-->
+ <!-- viewBox="64 64 896 896"-->
+ <!-- data-icon="check"-->
+ <!-- width="1em"-->
+ <!-- height="1em"-->
+ <!-- :fill="theme"-->
+ <!-- aria-hidden="true"-->
+ <!-- focusable="false"-->
+ <!-- class-->
+ <!-- >-->
+ <!-- <path-->
+ <!-- d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"-->
+ <!-- />-->
+ <!-- </svg>-->
+ <!-- </i>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- </div>-->
<div class="drawer-item">
<span>涓婚棰滆壊</span>
<span class="comp-style">
- <el-color-picker
- v-model="theme"
- :predefine="predefineColors"
- @change="themeChange"
- />
+ <el-color-picker v-model="theme"
+ :predefine="predefineColors"
+ @change="themeChange" />
</span>
</div>
<div class="drawer-item">
<span>鏄剧ず妯″紡</span>
<span class="comp-style">
- <el-select
- v-model="settingsStore.darkMode"
- placeholder="璇烽�夋嫨"
- style="width: 130px"
- @change="darkModeChange"
- >
- <el-option
- v-for="item in darkModeOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
+ <el-select v-model="settingsStore.darkMode"
+ placeholder="璇烽�夋嫨"
+ style="width: 130px"
+ @change="darkModeChange">
+ <el-option v-for="item in darkModeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value" />
</el-select>
</span>
</div>
<el-divider />
-
<h3 class="drawer-title">绯荤粺甯冨眬閰嶇疆</h3>
-
<div class="drawer-item">
<span>寮�鍚� TopNav</span>
<span class="comp-style">
- <el-switch
- v-model="settingsStore.topNav"
- @change="topNavChange"
- class="drawer-switch"
- />
+ <el-switch v-model="settingsStore.topNav"
+ @change="topNavChange"
+ class="drawer-switch" />
</span>
</div>
-
<div class="drawer-item">
<span>寮�鍚� Tags-Views</span>
<span class="comp-style">
- <el-switch v-model="settingsStore.tagsView" class="drawer-switch" />
+ <el-switch v-model="settingsStore.tagsView"
+ class="drawer-switch" />
</span>
</div>
-
<div class="drawer-item">
<span>鍥哄畾 Header</span>
<span class="comp-style">
- <el-switch v-model="settingsStore.fixedHeader" class="drawer-switch" />
+ <el-switch v-model="settingsStore.fixedHeader"
+ class="drawer-switch" />
</span>
</div>
-
<div class="drawer-item">
<span>鏄剧ず Logo</span>
<span class="comp-style">
- <el-switch v-model="settingsStore.sidebarLogo" class="drawer-switch" />
+ <el-switch v-model="settingsStore.sidebarLogo"
+ class="drawer-switch" />
</span>
</div>
-
<div class="drawer-item">
<span>鍔ㄦ�佹爣棰�</span>
<span class="comp-style">
- <el-switch v-model="settingsStore.dynamicTitle" class="drawer-switch" />
+ <el-switch v-model="settingsStore.dynamicTitle"
+ class="drawer-switch" />
</span>
</div>
-
<el-divider />
-
- <el-button type="primary" plain icon="DocumentAdd" @click="saveSetting"
- >淇濆瓨閰嶇疆</el-button
- >
- <el-button plain icon="Refresh" @click="resetSetting">閲嶇疆閰嶇疆</el-button>
+ <el-button type="primary"
+ plain
+ icon="DocumentAdd"
+ @click="saveSetting">淇濆瓨閰嶇疆</el-button>
+ <el-button plain
+ icon="Refresh"
+ @click="resetSetting">閲嶇疆閰嶇疆</el-button>
</el-drawer>
</template>
<script setup>
-import variables from "@/assets/styles/variables.module.scss";
-import axios from "axios";
-import { ElLoading, ElMessage } from "element-plus";
-import { useDynamicTitle } from "@/utils/dynamicTitle";
-import useAppStore from "@/store/modules/app";
-import useSettingsStore from "@/store/modules/settings";
-import usePermissionStore from "@/store/modules/permission";
-import { handleThemeStyle } from "@/utils/theme";
+ import variables from "@/assets/styles/variables.module.scss";
+ import axios from "axios";
+ import { ElLoading, ElMessage } from "element-plus";
+ import { useDynamicTitle } from "@/utils/dynamicTitle";
+ import useAppStore from "@/store/modules/app";
+ import useSettingsStore from "@/store/modules/settings";
+ import usePermissionStore from "@/store/modules/permission";
+ import { handleThemeStyle } from "@/utils/theme";
-const { proxy } = getCurrentInstance();
-const appStore = useAppStore();
-const settingsStore = useSettingsStore();
-const permissionStore = usePermissionStore();
-const showSettings = ref(false);
-const theme = ref(settingsStore.theme);
-const sideTheme = ref(settingsStore.sideTheme);
-const storeSettings = computed(() => settingsStore);
-const predefineColors = ref([
- "#002fa7",
- "#81D8D0",
- "#E85827",
- "#008C8C",
- "#F9DC24",
- "#B05923",
- "#003153",
- "#8F4B28",
- "#4C0009",
-]);
-const darkModeOptions = ref([
- { label: "璺熼殢绯荤粺", value: "auto" },
- { label: "娴呰壊", value: "light" },
- { label: "娣辫壊", value: "dark" },
-]);
+ const { proxy } = getCurrentInstance();
+ const appStore = useAppStore();
+ const settingsStore = useSettingsStore();
+ const permissionStore = usePermissionStore();
+ const showSettings = ref(false);
+ const theme = ref(settingsStore.theme);
+ const sideTheme = ref(settingsStore.sideTheme);
+ const storeSettings = computed(() => settingsStore);
+ const predefineColors = ref([
+ "#374D77",
+ "#81D8D0",
+ "#E85827",
+ "#008C8C",
+ "#F9DC24",
+ "#B05923",
+ "#003153",
+ "#8F4B28",
+ "#4C0009",
+ ]);
+ const darkModeOptions = ref([
+ { label: "璺熼殢绯荤粺", value: "auto" },
+ { label: "娴呰壊", value: "light" },
+ { label: "娣辫壊", value: "dark" },
+ ]);
-/** 鏄惁闇�瑕乼opnav */
-function topNavChange(val) {
- if (!val) {
- appStore.toggleSideBarHide(false);
- permissionStore.setSidebarRouters(permissionStore.defaultRoutes);
+ /** 鏄惁闇�瑕乼opnav */
+ function topNavChange(val) {
+ if (!val) {
+ appStore.toggleSideBarHide(false);
+ permissionStore.setSidebarRouters(permissionStore.defaultRoutes);
+ }
}
-}
-function themeChange(val) {
- settingsStore.theme = val;
- handleThemeStyle(val);
-}
+ function themeChange(val) {
+ settingsStore.theme = val;
+ handleThemeStyle(val);
+ }
-function darkModeChange(val) {
- settingsStore.setDarkMode(val);
-}
+ function darkModeChange(val) {
+ settingsStore.setDarkMode(val);
+ }
-function handleTheme(val) {
- settingsStore.sideTheme = val;
- sideTheme.value = val;
-}
+ function handleTheme(val) {
+ settingsStore.sideTheme = val;
+ sideTheme.value = val;
+ }
-function saveSetting() {
- proxy.$modal.loading("姝ｅ湪淇濆瓨鍒版湰鍦帮紝璇风◢鍊�...");
- let layoutSetting = {
- topNav: storeSettings.value.topNav,
- tagsView: storeSettings.value.tagsView,
- fixedHeader: storeSettings.value.fixedHeader,
- sidebarLogo: storeSettings.value.sidebarLogo,
- dynamicTitle: storeSettings.value.dynamicTitle,
- sideTheme: storeSettings.value.sideTheme,
- theme: storeSettings.value.theme,
- darkMode: storeSettings.value.darkMode,
- };
- localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));
- setTimeout(proxy.$modal.closeLoading(), 1000);
-}
+ function saveSetting() {
+ proxy.$modal.loading("姝ｅ湪淇濆瓨鍒版湰鍦帮紝璇风◢鍊�...");
+ let layoutSetting = {
+ topNav: storeSettings.value.topNav,
+ tagsView: storeSettings.value.tagsView,
+ fixedHeader: storeSettings.value.fixedHeader,
+ sidebarLogo: storeSettings.value.sidebarLogo,
+ dynamicTitle: storeSettings.value.dynamicTitle,
+ sideTheme: storeSettings.value.sideTheme,
+ theme: storeSettings.value.theme,
+ darkMode: storeSettings.value.darkMode,
+ };
+ localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));
+ setTimeout(proxy.$modal.closeLoading(), 1000);
+ }
-function resetSetting() {
- proxy.$modal.loading("姝ｅ湪娓呴櫎璁剧疆缂撳瓨骞跺埛鏂帮紝璇风◢鍊�...");
- localStorage.removeItem("layout-setting");
- setTimeout("window.location.reload()", 1000);
-}
+ function resetSetting() {
+ proxy.$modal.loading("姝ｅ湪娓呴櫎璁剧疆缂撳瓨骞跺埛鏂帮紝璇风◢鍊�...");
+ localStorage.removeItem("layout-setting");
+ setTimeout("window.location.reload()", 1000);
+ }
-function openSetting() {
- showSettings.value = true;
-}
+ function openSetting() {
+ showSettings.value = true;
+ }
-defineExpose({
- openSetting,
-});
+ defineExpose({
+ openSetting,
+ });
</script>
<style lang="scss" scoped>
-.setting-drawer-title {
- margin-bottom: 12px;
- color: var(--el-text-color-primary, rgba(0, 0, 0, 0.85));
- line-height: 22px;
- font-weight: bold;
+ .setting-drawer-title {
+ margin-bottom: 12px;
+ color: var(--el-text-color-primary, rgba(0, 0, 0, 0.85));
+ line-height: 22px;
+ font-weight: bold;
- .drawer-title {
- font-size: 14px;
- }
-}
-
-.setting-drawer-block-checbox {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- margin-top: 10px;
- margin-bottom: 20px;
-
- .setting-drawer-block-checbox-item {
- position: relative;
- margin-right: 16px;
- border-radius: 2px;
- cursor: pointer;
-
- img {
- width: 48px;
- height: 48px;
- }
-
- .setting-drawer-block-checbox-selectIcon {
- position: absolute;
- top: 0;
- right: 0;
- width: 100%;
- height: 100%;
- padding-top: 15px;
- padding-left: 24px;
- color: #1890ff;
- font-weight: 700;
+ .drawer-title {
font-size: 14px;
}
}
-}
-.drawer-item {
- color: var(--el-text-color-regular, rgba(0, 0, 0, 0.65));
- padding: 12px 0;
- font-size: 14px;
+ .setting-drawer-block-checbox {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ margin-top: 10px;
+ margin-bottom: 20px;
- .comp-style {
- float: right;
- margin: -3px 8px 0px 0px;
+ .setting-drawer-block-checbox-item {
+ position: relative;
+ margin-right: 16px;
+ border-radius: 2px;
+ cursor: pointer;
+
+ img {
+ width: 48px;
+ height: 48px;
+ }
+
+ .setting-drawer-block-checbox-selectIcon {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ padding-top: 15px;
+ padding-left: 24px;
+ color: #1890ff;
+ font-weight: 700;
+ font-size: 14px;
+ }
+ }
}
-}
+
+ .drawer-item {
+ color: var(--el-text-color-regular, rgba(0, 0, 0, 0.65));
+ padding: 12px 0;
+ font-size: 14px;
+
+ .comp-style {
+ float: right;
+ margin: -3px 8px 0px 0px;
+ }
+ }
</style>
--
Gitblit v1.9.3