~yxh/opo-web.git

			@@ -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>