From a79d67f8a9a9fa02f9d25f987b9611af965c484f Mon Sep 17 00:00:00 2001
From: yxh <172933527@qq.com>
Date: 星期四, 22 十月 2026 18:41:01 +0800
Subject: [PATCH] 修改了风格
---
src/layout/components/Settings/index.vue | 49 ++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 48 insertions(+), 1 deletions(-)
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 7cd2979..fc5d99f 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -36,6 +36,21 @@
<span>涓婚棰滆壊</span>
<theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
</div>
+
+ <div class="drawer-item">
+ <span>棰勮鐨偆</span>
+ <div class="opo-preset-list">
+ <span
+ v-for="p in presets"
+ :key="p.color"
+ class="opo-preset-item"
+ :class="{ 'is-active': isCurrent(p.color) }"
+ :style="{ backgroundColor: p.color }"
+ :title="p.name"
+ @click="themeChange(p.color)"
+ />
+ </div>
+ </div>
</div>
<el-divider/>
@@ -77,13 +92,15 @@
<script>
import ThemePicker from '@/components/ThemePicker'
+import { PRESETS, applyTheme, setStoredTheme } from '@/utils/theme'
export default {
components: { ThemePicker },
data() {
return {
theme: this.$store.state.settings.theme,
- sideTheme: this.$store.state.settings.sideTheme
+ sideTheme: this.$store.state.settings.sideTheme,
+ presets: PRESETS
};
},
computed: {
@@ -147,12 +164,18 @@
},
},
methods: {
+ isCurrent(color) {
+ return !!this.theme && String(this.theme).toUpperCase() === String(color).toUpperCase();
+ },
themeChange(val) {
this.$store.dispatch('settings/changeSetting', {
key: 'theme',
value: val
})
this.theme = val;
+ // 绔嬪嵆鐢熸晥骞惰浣忥細涓嶄緷璧� ThemePicker 浠� CDN 鎷夊彇 theme-chalk
+ applyTheme(val);
+ setStoredTheme(val);
},
handleTheme(val) {
this.$store.dispatch('settings/changeSetting', {
@@ -252,5 +275,29 @@
.drawer-switch {
float: right
}
+
+ // 棰勮鐨偆鑹插潡
+ .opo-preset-list {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ margin-top: 8px;
+ }
+
+ .opo-preset-item {
+ display: inline-block;
+ width: 22px;
+ height: 22px;
+ margin-right: 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ border: 2px solid transparent;
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
+
+ &.is-active {
+ border-color: #1F2937;
+ box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.18);
+ }
+ }
}
</style>
--
Gitblit v1.9.3