feat(主题): 新增暗色模式支持

buhuazhen

2026-03-17 e597b6da4faa1f30c7b3479cdbb96ac5b4fbb0f5

 src/layout/components/Settings/index.vue

@@ -71,6 +71,24 @@
        />

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

      </span>

    </div>

    <el-divider />



    <h3 class="drawer-title">系统布局配置</h3>

@@ -152,6 +170,11 @@
  "#8F4B28",

  "#4C0009",

]);

const darkModeOptions = ref([

  { label: "跟随系统", value: "auto" },

  { label: "浅色", value: "light" },

  { label: "深色", value: "dark" },

]);



/** 是否需要topnav */

function topNavChange(val) {

@@ -164,6 +187,10 @@
function themeChange(val) {

  settingsStore.theme = val;

  handleThemeStyle(val);

}



function darkModeChange(val) {

  settingsStore.setDarkMode(val);

}



function handleTheme(val) {

@@ -181,6 +208,7 @@
    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);