@utogether/udp-core 2.0.0-beta.1 → 2.0.0-beta.3

package/src/layout/components/lay-setting/index.vue

@@ -1,503 +1,503 @@
-<script setup lang="ts">
-import { reactive, ref, unref, watch, computed, nextTick, onUnmounted, onBeforeMount } from 'vue';
-import { templateRef } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';
-import { useDark, useGlobal, useDebounce } from '@utogether/utils';
-import panel from '../lay-panel/index.vue';
-import { emitter } from '../../../utils/mitt';
-import { useAppStoreHook } from '../../../store/modules/app';
-import { useMultiTagsStoreHook } from '../../../store/modules/multiTags';
-import { useDataThemeChange } from '../../hooks/useDataThemeChange';
-import { useNav } from '../../hooks/useNav';
-import { useRenderIcon } from '../../../components/ReIcon/src/hooks';
-import dayIcon from '../../../assets/svg/day.svg?component';
-import darkIcon from '../../../assets/svg/dark.svg?component';
-import systemIcon from '../../../assets/svg/system.svg?component';
-
-interface IThemeOption {
-  label: string;
-  icon: any;
-  theme: string;
-  value: number;
-  iconAttrs: { fill: string };
-}
-
-const { device } = useNav();
-const { t } = useI18n();
-const { isDark } = useDark();
-const { $storage } = useGlobal();
-
-const mixRef = templateRef<HTMLElement | null>('mixRef', null);
-const verticalRef = templateRef<HTMLElement | null>('verticalRef', null);
-const horizontalRef = templateRef<HTMLElement | null>('horizontalRef', null);
-
-const { dataTheme, overallStyle, layoutTheme, themeColors, toggleClass, dataThemeChange, setLayoutThemeColor } =
-  useDataThemeChange();
-
-/* body添加layout属性，作用于src/style/sidebar.scss */
-if (unref(layoutTheme)) {
-  const layout = unref(layoutTheme).layout;
-  const theme = unref(layoutTheme).theme;
-  document.documentElement.setAttribute('data-theme', theme);
-  setLayoutModel(layout);
-}
-
-/** 默认灵动模式 */
-const markValue = ref($storage.configure?.showModel ?? 'smart');
-
-const logoVal = ref($storage.configure?.showLogo ?? true);
-
-const settings = reactive({
-  greyVal: $storage.configure.grey,
-  weakVal: $storage.configure.weak,
-  tabsVal: $storage.configure.hideTabs,
-  showLogo: $storage.configure.showLogo,
-  showModel: $storage.configure.showModel,
-  multiTagsCache: $storage.configure.multiTagsCache
-});
-
-const getThemeColorStyle = computed(() => {
-  return color => {
-    return { background: color };
-  };
-});
-
-/** 当网页整体为暗色风格时不显示亮白色主题配色切换选项 */
-const showThemeColors = computed(() => {
-  return themeColor => {
-    return themeColor === 'light' && isDark.value ? false : true;
-  };
-});
-
-function storageConfigureChange<T>(key: string, val: T): void {
-  const storageConfigure = $storage.configure;
-  storageConfigure[key] = val;
-  $storage.configure = storageConfigure;
-}
-
-/** 灰色模式设置 */
-const greyChange = (value): void => {
-  const htmlEl = document.querySelector('html');
-  toggleClass(settings.greyVal, 'html-grey', htmlEl);
-  storageConfigureChange('grey', value);
-};
-
-/** 色弱模式设置 */
-const weekChange = (value): void => {
-  const htmlEl = document.querySelector('html');
-  toggleClass(settings.weakVal, 'html-weakness', htmlEl);
-  storageConfigureChange('weak', value);
-};
-
-/** 隐藏标签页设置 */
-const tagsChange = () => {
-  const showVal = settings.tabsVal;
-  storageConfigureChange('hideTabs', showVal);
-  emitter.emit('tagViewsChange', showVal as unknown as string);
-};
-
-/** 标签页持久化设置 */
-const multiTagsCacheChange = () => {
-  const multiTagsCache = settings.multiTagsCache;
-  storageConfigureChange('multiTagsCache', multiTagsCache);
-  useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache);
-};
-
-function onChange(value) {
-  markValue.value = value;
-  storageConfigureChange('showModel', value);
-  emitter.emit('tagViewsShowModel', value);
-}
-/** 主题切换 */
-function onThemeChange(theme) {
-  // dataTheme.value = !dataTheme.value;
-  // dataThemeChange();
-  theme === 1 && theme !== 2 ? (dataTheme.value = true) : (dataTheme.value = false);
-  overallStyle.value = themeOptions.value[theme].theme;
-  dataThemeChange(overallStyle.value);
-  theme === 2 && watchSystemThemeChange();
-}
-/** 侧边栏Logo */
-function logoChange() {
-  unref(logoVal) ? storageConfigureChange('showLogo', true) : storageConfigureChange('showLogo', false);
-  emitter.emit('logoChange', unref(logoVal));
-}
-
-function setFalse(Doms): any {
-  Doms.forEach(v => {
-    toggleClass(false, 'is-select', unref(v));
-  });
-}
-
-/** 主题色 激活选择项 */
-const getThemeColor = computed(() => {
-  return current => {
-    if (current === layoutTheme.value.theme && layoutTheme.value.theme !== 'light') {
-      return '#fff';
-    } else if (current === layoutTheme.value.theme && layoutTheme.value.theme === 'light') {
-      return '#1d2b45';
-    } else {
-      return 'transparent';
-    }
-  };
-});
-
-const themeOptions = computed<IThemeOption[]>(() => {
-  return [
-    {
-      label: t('message.udp.light'),
-      icon: dayIcon,
-      theme: 'light',
-      value: 0,
-      iconAttrs: { fill: isDark.value ? '#fff' : '#000' }
-    },
-    {
-      label: t('message.udp.dark'),
-      icon: darkIcon,
-      theme: 'dark',
-      value: 1,
-      iconAttrs: { fill: isDark.value ? '#fff' : '#000' }
-    },
-    {
-      label: '自动',
-      icon: systemIcon,
-      theme: 'system',
-      value: 2,
-      iconAttrs: { fill: isDark.value ? '#fff' : '#000' }
-    }
-  ];
-});
-
-const markOptions = [
-  { label: t('message.udp.smart'), value: 'smart' },
-  { label: t('message.udp.card'), value: 'card' },
-  { label: '丝滑', value: 'chrome' }
-];
-
-/** 设置菜单布局 */
-function setLayoutModel(layout: string) {
-  layoutTheme.value.layout = layout;
-  window.document.body.setAttribute('layout', layout);
-  window.document.body.setAttribute('layoutType', window.top === window.self ? 'normal' : 'iframe');
-  $storage.layout = {
-    layout,
-    theme: layoutTheme.value.theme,
-    darkMode: $storage.layout?.darkMode,
-    sidebarStatus: $storage.layout?.sidebarStatus,
-    epThemeColor: $storage.layout?.epThemeColor,
-    themeColor: layoutTheme.value.theme,
-    overallStyle: $storage.layout?.overallStyle
-  };
-  useAppStoreHook().setLayout(layout);
-}
-
-watch($storage, ({ layout }) => {
-  switch (layout['layout']) {
-    case 'vertical':
-      toggleClass(true, 'is-select', unref(verticalRef));
-      useDebounce(setFalse([horizontalRef]), 50);
-      useDebounce(setFalse([mixRef]), 50);
-      break;
-    case 'horizontal':
-      toggleClass(true, 'is-select', unref(horizontalRef));
-      useDebounce(setFalse([verticalRef]), 50);
-      useDebounce(setFalse([mixRef]), 50);
-      break;
-    case 'mix':
-      toggleClass(true, 'is-select', unref(mixRef));
-      useDebounce(setFalse([verticalRef]), 50);
-      useDebounce(setFalse([horizontalRef]), 50);
-      break;
-  }
-});
-
-const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
-
-/** 根据操作系统主题设置平台主题模式 */
-function updateTheme() {
-  if (overallStyle.value !== 'system') return;
-  if (mediaQueryList.matches) {
-    dataTheme.value = true;
-  } else {
-    dataTheme.value = false;
-  }
-  dataThemeChange(overallStyle.value);
-}
-
-function removeMatchMedia() {
-  mediaQueryList.removeEventListener('change', updateTheme);
-}
-
-/** 监听操作系统主题改变 */
-function watchSystemThemeChange() {
-  updateTheme();
-  removeMatchMedia();
-  mediaQueryList.addEventListener('change', updateTheme);
-}
-
-onBeforeMount(() => {
-  /* 初始化项目配置 */
-  nextTick(() => {
-    watchSystemThemeChange();
-    settings.greyVal && document.querySelector('html')?.classList.add('html-grey');
-    settings.weakVal && document.querySelector('html')?.classList.add('html-weakness');
-    settings.tabsVal && tagsChange();
-  });
-});
-
-onUnmounted(() => removeMatchMedia);
-</script>
-<script lang="ts">
-export default { name: 'SettingPanel' };
-</script>
-<template>
-  <panel>
-    <div class="p-6">
-      <p class="mb-3 text-sm font-medium dark:text-white">{{ $t('message.udp.pageStyle') }}</p>
-      <el-segmented
-        :model-value="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
-        :options="themeOptions"
-        @change="onThemeChange"
-      >
-        <template #default="{ item }">
-          <div class="flex items-center gap-2 p-2">
-            <component :is="useRenderIcon(item.icon)" />
-            <span class="pl-1">{{ item.label }}</span>
-          </div>
-        </template>
-      </el-segmented>
-
-      <p class="mt-5 mb-3 text-sm font-medium dark:text-white">{{ $t('message.udp.theme') }}</p>
-      <ul class="theme-color">
-        <li
-          v-for="(item, index) in themeColors"
-          v-show="showThemeColors(item.themeColor)"
-          :key="index"
-          :style="getThemeColorStyle(item.color)"
-          @click="setLayoutThemeColor(item.themeColor)"
-        >
-          <el-icon style="margin: 0.1em 0.1em 0 0" :size="17" :color="getThemeColor(item.themeColor)">
-            <IconifyIconOffline icon="ri:check-line" />
-          </el-icon>
-        </li>
-      </ul>
-
-      <p class="mt-5 mb-3 text-sm font-medium dark:text-white">{{ $t('message.udp.navigationMode') }}</p>
-      <ul class="udp-theme">
-        <li
-          ref="verticalRef"
-          v-tippy="{
-            content: '左侧菜单',
-            zIndex: 41000
-          }"
-          :class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
-          @click="setLayoutModel('vertical')"
-        >
-          <div />
-          <div />
-        </li>
-        <li
-          v-if="device !== 'mobile'"
-          ref="horizontalRef"
-          v-tippy="{
-            content: '顶部菜单',
-            zIndex: 41000
-          }"
-          :class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
-          @click="setLayoutModel('horizontal')"
-        >
-          <div />
-          <div />
-        </li>
-        <li
-          v-if="device !== 'mobile'"
-          ref="mixRef"
-          v-tippy="{
-            content: '混合菜单',
-            zIndex: 41000
-          }"
-          :class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
-          @click="setLayoutModel('mix')"
-        >
-          <div />
-          <div />
-        </li>
-      </ul>
-
-      <p class="mt-5 mb-3 text-base font-medium dark:text-white">{{ $t('message.udp.tagStyle') }}</p>
-      <el-segmented :model-value="markValue" :options="markOptions" @change="onChange" />
-
-      <p class="mt-5 mb-1 text-base font-medium dark:text-white">界面显示</p>
-      <ul class="setting">
-        <li>
-          <span class="dark:text-white">灰色模式</span>
-          <el-switch
-            v-model="settings.greyVal"
-            inline-prompt
-            active-text="开"
-            inactive-text="关"
-            @change="greyChange"
-          />
-        </li>
-        <li>
-          <span class="dark:text-white">色弱模式</span>
-          <el-switch
-            v-model="settings.weakVal"
-            inline-prompt
-            active-text="开"
-            inactive-text="关"
-            @change="weekChange"
-          />
-        </li>
-        <li>
-          <span class="dark:text-white">隐藏标签页</span>
-          <el-switch
-            v-model="settings.tabsVal"
-            inline-prompt
-            active-text="开"
-            inactive-text="关"
-            @change="tagsChange"
-          />
-        </li>
-        <li>
-          <span class="dark:text-white">Logo</span>
-          <el-switch
-            v-model="logoVal"
-            inline-prompt
-            :active-value="true"
-            :inactive-value="false"
-            active-text="开"
-            inactive-text="关"
-            @change="logoChange"
-          />
-        </li>
-        <li>
-          <span class="dark:text-white">页签持久化</span>
-          <el-switch
-            v-model="settings.multiTagsCache"
-            inline-prompt
-            active-text="开"
-            inactive-text="关"
-            @change="multiTagsCacheChange"
-          />
-        </li>
-      </ul>
-    </div>
-  </panel>
-</template>
-
-<style lang="scss" scoped>
-::v-deep(.el-divider__text) {
-  font-size: 16px;
-  font-weight: 700;
-}
-
-::v-deep(.el-switch__core) {
-  --el-switch-off-color: var(--udp-switch-off-color);
-
-  min-width: 36px;
-  height: 18px;
-}
-
-::v-deep(.el-switch__core .el-switch__action) {
-  height: 14px;
-}
-
-.theme-color {
-  height: 20px;
-
-  li {
-    float: left;
-    height: 20px;
-    margin-right: 8px;
-    cursor: pointer;
-    border-radius: 4px;
-
-    &:nth-child(2) {
-      border: 1px solid #ddd;
-    }
-  }
-}
-
-.udp-theme {
-  display: flex;
-  gap: 12px;
-
-  li {
-    position: relative;
-    width: 46px;
-    height: 36px;
-    overflow: hidden;
-    cursor: pointer;
-    background: #f0f2f5;
-    border-radius: 4px;
-    box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
-
-    &:nth-child(1) {
-      div {
-        &:nth-child(1) {
-          width: 30%;
-          height: 100%;
-          background: #1b2a47;
-        }
-
-        &:nth-child(2) {
-          position: absolute;
-          top: 0;
-          right: 0;
-          width: 70%;
-          height: 30%;
-          background: #fff;
-          box-shadow: 0 0 1px #888;
-        }
-      }
-    }
-
-    &:nth-child(2) {
-      div {
-        &:nth-child(1) {
-          width: 100%;
-          height: 30%;
-          background: #1b2a47;
-          box-shadow: 0 0 1px #888;
-        }
-      }
-    }
-
-    &:nth-child(3) {
-      div {
-        &:nth-child(1) {
-          width: 100%;
-          height: 30%;
-          background: #1b2a47;
-          box-shadow: 0 0 1px #888;
-        }
-
-        &:nth-child(2) {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 30%;
-          height: 70%;
-          background: #fff;
-          box-shadow: 0 0 1px #888;
-        }
-      }
-    }
-  }
-}
-
-.is-select {
-  border: 2px solid var(--el-color-primary);
-}
-
-.setting {
-  li {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 4px 0;
-    font-size: 14px;
-  }
-}
-</style>
+<script setup lang="ts">
+import { reactive, ref, unref, watch, computed, nextTick, onUnmounted, onBeforeMount } from 'vue';
+import { templateRef } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { useDark, useGlobal, useDebounce } from '@utogether/utils';
+import panel from '../lay-panel/index.vue';
+import { emitter } from '../../../utils/mitt';
+import { useAppStoreHook } from '../../../store/modules/app';
+import { useMultiTagsStoreHook } from '../../../store/modules/multiTags';
+import { useDataThemeChange } from '../../hooks/useDataThemeChange';
+import { useNav } from '../../hooks/useNav';
+import { useRenderIcon } from '../../../components/ReIcon/src/hooks';
+import dayIcon from '../../../assets/svg/day.svg?component';
+import darkIcon from '../../../assets/svg/dark.svg?component';
+import systemIcon from '../../../assets/svg/system.svg?component';
+
+interface IThemeOption {
+  label: string;
+  icon: any;
+  theme: string;
+  value: number;
+  iconAttrs: { fill: string };
+}
+
+const { device } = useNav();
+const { t } = useI18n();
+const { isDark } = useDark();
+const { $storage } = useGlobal();
+
+const mixRef = templateRef<HTMLElement | null>('mixRef', null);
+const verticalRef = templateRef<HTMLElement | null>('verticalRef', null);
+const horizontalRef = templateRef<HTMLElement | null>('horizontalRef', null);
+
+const { dataTheme, overallStyle, layoutTheme, themeColors, toggleClass, dataThemeChange, setLayoutThemeColor } =
+  useDataThemeChange();
+
+/* body添加layout属性，作用于src/style/sidebar.scss */
+if (unref(layoutTheme)) {
+  const layout = unref(layoutTheme).layout;
+  const theme = unref(layoutTheme).theme;
+  document.documentElement.setAttribute('data-theme', theme);
+  setLayoutModel(layout);
+}
+
+/** 默认灵动模式 */
+const markValue = ref($storage.configure?.showModel ?? 'smart');
+
+const logoVal = ref($storage.configure?.showLogo ?? true);
+
+const settings = reactive({
+  greyVal: $storage.configure.grey,
+  weakVal: $storage.configure.weak,
+  tabsVal: $storage.configure.hideTabs,
+  showLogo: $storage.configure.showLogo,
+  showModel: $storage.configure.showModel,
+  multiTagsCache: $storage.configure.multiTagsCache
+});
+
+const getThemeColorStyle = computed(() => {
+  return color => {
+    return { background: color };
+  };
+});
+
+/** 当网页整体为暗色风格时不显示亮白色主题配色切换选项 */
+const showThemeColors = computed(() => {
+  return themeColor => {
+    return themeColor === 'light' && isDark.value ? false : true;
+  };
+});
+
+function storageConfigureChange<T>(key: string, val: T): void {
+  const storageConfigure = $storage.configure;
+  storageConfigure[key] = val;
+  $storage.configure = storageConfigure;
+}
+
+/** 灰色模式设置 */
+const greyChange = (value): void => {
+  const htmlEl = document.querySelector('html');
+  toggleClass(settings.greyVal, 'html-grey', htmlEl);
+  storageConfigureChange('grey', value);
+};
+
+/** 色弱模式设置 */
+const weekChange = (value): void => {
+  const htmlEl = document.querySelector('html');
+  toggleClass(settings.weakVal, 'html-weakness', htmlEl);
+  storageConfigureChange('weak', value);
+};
+
+/** 隐藏标签页设置 */
+const tagsChange = () => {
+  const showVal = settings.tabsVal;
+  storageConfigureChange('hideTabs', showVal);
+  emitter.emit('tagViewsChange', showVal as unknown as string);
+};
+
+/** 标签页持久化设置 */
+const multiTagsCacheChange = () => {
+  const multiTagsCache = settings.multiTagsCache;
+  storageConfigureChange('multiTagsCache', multiTagsCache);
+  useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache);
+};
+
+function onChange(value) {
+  markValue.value = value;
+  storageConfigureChange('showModel', value);
+  emitter.emit('tagViewsShowModel', value);
+}
+/** 主题切换 */
+function onThemeChange(theme) {
+  // dataTheme.value = !dataTheme.value;
+  // dataThemeChange();
+  theme === 1 && theme !== 2 ? (dataTheme.value = true) : (dataTheme.value = false);
+  overallStyle.value = themeOptions.value[theme].theme;
+  dataThemeChange(overallStyle.value);
+  theme === 2 && watchSystemThemeChange();
+}
+/** 侧边栏Logo */
+function logoChange() {
+  unref(logoVal) ? storageConfigureChange('showLogo', true) : storageConfigureChange('showLogo', false);
+  emitter.emit('logoChange', unref(logoVal));
+}
+
+function setFalse(Doms): any {
+  Doms.forEach(v => {
+    toggleClass(false, 'is-select', unref(v));
+  });
+}
+
+/** 主题色 激活选择项 */
+const getThemeColor = computed(() => {
+  return current => {
+    if (current === layoutTheme.value.theme && layoutTheme.value.theme !== 'light') {
+      return '#fff';
+    } else if (current === layoutTheme.value.theme && layoutTheme.value.theme === 'light') {
+      return '#1d2b45';
+    } else {
+      return 'transparent';
+    }
+  };
+});
+
+const themeOptions = computed<IThemeOption[]>(() => {
+  return [
+    {
+      label: t('message.udp.light'),
+      icon: dayIcon,
+      theme: 'light',
+      value: 0,
+      iconAttrs: { fill: isDark.value ? '#fff' : '#000' }
+    },
+    {
+      label: t('message.udp.dark'),
+      icon: darkIcon,
+      theme: 'dark',
+      value: 1,
+      iconAttrs: { fill: isDark.value ? '#fff' : '#000' }
+    },
+    {
+      label: '自动',
+      icon: systemIcon,
+      theme: 'system',
+      value: 2,
+      iconAttrs: { fill: isDark.value ? '#fff' : '#000' }
+    }
+  ];
+});
+
+const markOptions = [
+  { label: t('message.udp.smart'), value: 'smart' },
+  { label: t('message.udp.card'), value: 'card' },
+  { label: '丝滑', value: 'chrome' }
+];
+
+/** 设置菜单布局 */
+function setLayoutModel(layout: string) {
+  layoutTheme.value.layout = layout;
+  window.document.body.setAttribute('layout', layout);
+  window.document.body.setAttribute('layoutType', window.top === window.self ? 'normal' : 'iframe');
+  $storage.layout = {
+    layout,
+    theme: layoutTheme.value.theme,
+    darkMode: $storage.layout?.darkMode,
+    sidebarStatus: $storage.layout?.sidebarStatus,
+    epThemeColor: $storage.layout?.epThemeColor,
+    themeColor: layoutTheme.value.theme,
+    overallStyle: $storage.layout?.overallStyle
+  };
+  useAppStoreHook().setLayout(layout);
+}
+
+watch($storage, ({ layout }) => {
+  switch (layout['layout']) {
+    case 'vertical':
+      toggleClass(true, 'is-select', unref(verticalRef));
+      useDebounce(setFalse([horizontalRef]), 50);
+      useDebounce(setFalse([mixRef]), 50);
+      break;
+    case 'horizontal':
+      toggleClass(true, 'is-select', unref(horizontalRef));
+      useDebounce(setFalse([verticalRef]), 50);
+      useDebounce(setFalse([mixRef]), 50);
+      break;
+    case 'mix':
+      toggleClass(true, 'is-select', unref(mixRef));
+      useDebounce(setFalse([verticalRef]), 50);
+      useDebounce(setFalse([horizontalRef]), 50);
+      break;
+  }
+});
+
+const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+
+/** 根据操作系统主题设置平台主题模式 */
+function updateTheme() {
+  if (overallStyle.value !== 'system') return;
+  if (mediaQueryList.matches) {
+    dataTheme.value = true;
+  } else {
+    dataTheme.value = false;
+  }
+  dataThemeChange(overallStyle.value);
+}
+
+function removeMatchMedia() {
+  mediaQueryList.removeEventListener('change', updateTheme);
+}
+
+/** 监听操作系统主题改变 */
+function watchSystemThemeChange() {
+  updateTheme();
+  removeMatchMedia();
+  mediaQueryList.addEventListener('change', updateTheme);
+}
+
+onBeforeMount(() => {
+  /* 初始化项目配置 */
+  nextTick(() => {
+    watchSystemThemeChange();
+    settings.greyVal && document.querySelector('html')?.classList.add('html-grey');
+    settings.weakVal && document.querySelector('html')?.classList.add('html-weakness');
+    settings.tabsVal && tagsChange();
+  });
+});
+
+onUnmounted(() => removeMatchMedia);
+</script>
+<script lang="ts">
+export default { name: 'SettingPanel' };
+</script>
+<template>
+  <panel>
+    <div class="p-6">
+      <p class="mb-3 text-sm font-medium dark:text-white">{{ $t('message.udp.pageStyle') }}</p>
+      <el-segmented
+        :model-value="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
+        :options="themeOptions"
+        @change="onThemeChange"
+      >
+        <template #default="{ item }">
+          <div class="flex items-center gap-2 p-2">
+            <component :is="useRenderIcon(item.icon)" />
+            <span class="pl-1">{{ item.label }}</span>
+          </div>
+        </template>
+      </el-segmented>
+
+      <p class="mt-5 mb-3 text-sm font-medium dark:text-white">{{ $t('message.udp.theme') }}</p>
+      <ul class="theme-color">
+        <li
+          v-for="(item, index) in themeColors"
+          v-show="showThemeColors(item.themeColor)"
+          :key="index"
+          :style="getThemeColorStyle(item.color)"
+          @click="setLayoutThemeColor(item.themeColor)"
+        >
+          <el-icon style="margin: 0.1em 0.1em 0 0" :size="17" :color="getThemeColor(item.themeColor)">
+            <IconifyIconOffline icon="ri:check-line" />
+          </el-icon>
+        </li>
+      </ul>
+
+      <p class="mt-5 mb-3 text-sm font-medium dark:text-white">{{ $t('message.udp.navigationMode') }}</p>
+      <ul class="udp-theme">
+        <li
+          ref="verticalRef"
+          v-tippy="{
+            content: '左侧菜单',
+            zIndex: 41000
+          }"
+          :class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
+          @click="setLayoutModel('vertical')"
+        >
+          <div />
+          <div />
+        </li>
+        <li
+          v-if="device !== 'mobile'"
+          ref="horizontalRef"
+          v-tippy="{
+            content: '顶部菜单',
+            zIndex: 41000
+          }"
+          :class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
+          @click="setLayoutModel('horizontal')"
+        >
+          <div />
+          <div />
+        </li>
+        <li
+          v-if="device !== 'mobile'"
+          ref="mixRef"
+          v-tippy="{
+            content: '混合菜单',
+            zIndex: 41000
+          }"
+          :class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
+          @click="setLayoutModel('mix')"
+        >
+          <div />
+          <div />
+        </li>
+      </ul>
+
+      <p class="mt-5 mb-3 text-base font-medium dark:text-white">{{ $t('message.udp.tagStyle') }}</p>
+      <el-segmented :model-value="markValue" :options="markOptions" @change="onChange" />
+
+      <p class="mt-5 mb-1 text-base font-medium dark:text-white">界面显示</p>
+      <ul class="setting">
+        <li>
+          <span class="dark:text-white">灰色模式</span>
+          <el-switch
+            v-model="settings.greyVal"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+            @change="greyChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">色弱模式</span>
+          <el-switch
+            v-model="settings.weakVal"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+            @change="weekChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">隐藏标签页</span>
+          <el-switch
+            v-model="settings.tabsVal"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+            @change="tagsChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">Logo</span>
+          <el-switch
+            v-model="logoVal"
+            inline-prompt
+            :active-value="true"
+            :inactive-value="false"
+            active-text="开"
+            inactive-text="关"
+            @change="logoChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">页签持久化</span>
+          <el-switch
+            v-model="settings.multiTagsCache"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+            @change="multiTagsCacheChange"
+          />
+        </li>
+      </ul>
+    </div>
+  </panel>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-divider__text) {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+::v-deep(.el-switch__core) {
+  --el-switch-off-color: var(--udp-switch-off-color);
+
+  min-width: 36px;
+  height: 18px;
+}
+
+::v-deep(.el-switch__core .el-switch__action) {
+  height: 14px;
+}
+
+.theme-color {
+  height: 20px;
+
+  li {
+    float: left;
+    height: 20px;
+    margin-right: 8px;
+    cursor: pointer;
+    border-radius: 4px;
+
+    &:nth-child(2) {
+      border: 1px solid #ddd;
+    }
+  }
+}
+
+.udp-theme {
+  display: flex;
+  gap: 12px;
+
+  li {
+    position: relative;
+    width: 46px;
+    height: 36px;
+    overflow: hidden;
+    cursor: pointer;
+    background: #f0f2f5;
+    border-radius: 4px;
+    box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
+
+    &:nth-child(1) {
+      div {
+        &:nth-child(1) {
+          width: 30%;
+          height: 100%;
+          background: #1b2a47;
+        }
+
+        &:nth-child(2) {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 70%;
+          height: 30%;
+          background: #fff;
+          box-shadow: 0 0 1px #888;
+        }
+      }
+    }
+
+    &:nth-child(2) {
+      div {
+        &:nth-child(1) {
+          width: 100%;
+          height: 30%;
+          background: #1b2a47;
+          box-shadow: 0 0 1px #888;
+        }
+      }
+    }
+
+    &:nth-child(3) {
+      div {
+        &:nth-child(1) {
+          width: 100%;
+          height: 30%;
+          background: #1b2a47;
+          box-shadow: 0 0 1px #888;
+        }
+
+        &:nth-child(2) {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 30%;
+          height: 70%;
+          background: #fff;
+          box-shadow: 0 0 1px #888;
+        }
+      }
+    }
+  }
+}
+
+.is-select {
+  border: 2px solid var(--el-color-primary);
+}
+
+.setting {
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 0;
+    font-size: 14px;
+  }
+}
+</style>