修改了风格

yxh

22 小时以前 a79d67f8a9a9fa02f9d25f987b9611af965c484f

 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>