gasInjection-project/src/layouts/default/header/components/user-dropdown/ThemeSelect.vue

<template>
  <BasicModal v-bind="config" title="切换主题" v-model:visible="visible" style="padding: 0 10px">
    <a-radio-group v-model:value="themeSelected" @change="change">
      <a-radio v-for="item in options" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
    </a-radio-group>
  </BasicModal>
</template>
<script lang="ts" setup>
  // 更换主题后的逻辑参考 /@/components/Application 的主题切换组件
  import { ref } from 'vue';
  import { BasicModal } from '/@/components/Modal';
  import { ThemeEnum } from '@/enums/appEnum';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
  import { updateDarkTheme } from '/@/logics/theme/dark';
  import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';

  const visible = ref(false);
  const config = {
    maskClosable: false,
    canFullscreen: false,
    width: '320px',
    minHeight: 20,
    maxHeight: 20,
    showCancelBtn: false,
    showOkBtn: false,
  };
  // const layout = {
  //   labelCol: { span: 6 },
  //   wrapperCol: { span: 16 },
  // };
  const options = [
    {
      value: ThemeEnum.DARK,
      label: '深色',
    },
    {
      value: ThemeEnum.LIGHT,
      label: '浅色',
    },
    {
      value: ThemeEnum.VENT1,
      label: '默认',
    },
    {
      value: ThemeEnum.DEEPBLUE,
      label: '深蓝',
    },
    {
      value: ThemeEnum.GREEN,
      label: '绿色',
    },
  ];

  const { getDarkMode, setDarkMode } = useRootSetting();

  const themeSelected = ref<ThemeEnum>(getDarkMode.value as ThemeEnum);

  function show() {
    visible.value = true;
  }
  // function close() {
  //   visible.value = false;
  // }
  function change() {
    setDarkMode(themeSelected.value);
    updateDarkTheme(themeSelected.value);
    updateHeaderBgColor();
    updateSidebarBgColor();
  }
  defineExpose({
    show,
  });
</script>
<style lang="less" scoped></style>