chore: update

CHANGELOG.zh_CN.md

@@ -26,7 +26,7 @@
 
 ### 🐞 Bug fixes
 
-- 修复`ReSegmented`分段控制器组件在浅色和深色整体风格切换时的闪烁问题
+- 修复`ReSegmented`分段控制器组件在浅色和深色主题模式切换时的闪烁问题
 - 修复`resetRouter`未清空全部路由数据问题
 - 修复标签页-关闭左侧标签页关闭异常问题
 
@@ -231,8 +231,8 @@
 
 - 修复`windwos`下点击注册页面会出现滚动条问题
 - 修复`windows`下页面切换，内容区会出现滚动条问题
-- 修复`pure-table`带状态表格在深色整体风格下状态样式消失的问题
-- 修复系统配置中开启灰色模式和深色整体风格，刷新页面整体风格异常
+- 修复`pure-table`带状态表格在深色主题模式下状态样式消失的问题
+- 修复系统配置中开启灰色模式和深色主题模式，刷新页面主题模式异常
 
 ### 🍏 Perf
 
@@ -285,7 +285,7 @@
 - 内嵌`iframe`页支持设置`keepAlive`，保持页面状态
 - 优化导航，弹出的菜单超出内容区自适应且可滚动
 - 添加文件上传示例
-- 添加整体风格自适应操作系统浅色、深色、自动主题功能
+- 添加主题模式自适应操作系统浅色、深色、自动主题功能
 - 添加页脚
 - 支持多标签页打开已经登录的系统后无需再登录并添加内免登录功能（用户可选择免登录的天数）
 - 带来高级感的终端命令行
@@ -485,7 +485,7 @@
 - 修复菜单搜索功能弹框打开后搜索框未自动聚集的问题
 - 修复按 `ESC` 退出全屏后，工具栏按钮文案展示问题
 - 修复移动端通知栏 `tooltip` 点击穿透问题
-- 修复当左侧菜单收起后，切换到 `horizontal` 导航模式时文字不展示的问题
+- 修复当左侧菜单收起后，切换到 `horizontal` 菜单布局时文字不展示的问题
 - 修复导航 `tab` 关闭其他标签页无法重置状态问题
 - 修复 `getHistoryMode` 函数中环境变量未初始化带来的页面热更新报错
 - 修复导航 `tab` 过多导致关闭左侧标签页无法正常显示

locales/en.yaml

@@ -31,15 +31,15 @@ panel:
   pureCloseSystemSet: Close System Configs
   pureClearCacheAndToLogin: Clear cache and return to login page
   pureClearCache: Clear Cache
-  pureOverallStyle: Overall Style
-  pureOverallStyleLight: Light
-  pureOverallStyleLightTip: Set sail freshly and light up the comfortable work interface
-  pureOverallStyleDark: Dark
-  pureOverallStyleDarkTip: Moonlight Overture, indulge in the tranquility and elegance of the night
-  pureOverallStyleSystem: Auto
-  pureOverallStyleSystemTip: Synchronize time, the interface naturally responds to morning and dusk
+  pureThemeMode: Theme Mode
+  pureThemeModeLight: Light
+  pureThemeModeLightTip: Set sail freshly and light up the comfortable work interface
+  pureThemeModeDark: Dark
+  pureThemeModeDarkTip: Moonlight Overture, indulge in the tranquility and elegance of the night
+  pureThemeModeSystem: Auto
+  pureThemeModeSystemTip: Synchronize time, the interface naturally responds to morning and dusk
   pureThemeColor: Theme Color
-  pureLayoutModel: Layout Model
+  pureMenuLayout: Menu Layout
   pureVerticalTip: The menu on the left is familiar and friendly
   pureHorizontalTip: Top menu, concise overview
   pureMixTip: Mixed menu, flexible
@@ -108,6 +108,7 @@ menus:
   pureTypeit: Typeit
   pureJsonEditor: JSON Editor
   pureColorPicker: Color Picker
+  pureColorPickerPanel: Color PickerPanel
   pureDatePicker: Date Picker
   pureDateTimePicker: DateTimePicker
   pureTimePicker: TimePicker

locales/zh-CN.yaml

@@ -31,15 +31,15 @@ panel:
   pureCloseSystemSet: 关闭配置
   pureClearCacheAndToLogin: 清空缓存并返回登录页
   pureClearCache: 清空缓存
-  pureOverallStyle: 整体风格
-  pureOverallStyleLight: 浅色
-  pureOverallStyleLightTip: 清新启航，点亮舒适的工作界面
-  pureOverallStyleDark: 深色
-  pureOverallStyleDarkTip: 月光序曲，沉醉于夜的静谧雅致
-  pureOverallStyleSystem: 自动
-  pureOverallStyleSystemTip: 同步时光，界面随晨昏自然呼应
+  pureThemeMode: 主题模式
+  pureThemeModeLight: 浅色
+  pureThemeModeLightTip: 清新启航，点亮舒适的工作界面
+  pureThemeModeDark: 深色
+  pureThemeModeDarkTip: 月光序曲，沉醉于夜的静谧雅致
+  pureThemeModeSystem: 自动
+  pureThemeModeSystemTip: 同步时光，界面随晨昏自然呼应
   pureThemeColor: 主题色
-  pureLayoutModel: 导航模式
+  pureMenuLayout: 菜单布局
   pureVerticalTip: 左侧菜单，亲切熟悉
   pureHorizontalTip: 顶部菜单，简洁概览
   pureMixTip: 混合菜单，灵活多变
@@ -108,6 +108,7 @@ menus:
   pureTypeit: 打字机
   pureJsonEditor: JSON编辑器
   pureColorPicker: 颜色选择器
+  pureColorPickerPanel: 颜色选择器面板
   pureDatePicker: 日期选择器
   pureDateTimePicker: 日期时间选择器
   pureTimePicker: 时间选择器

public/platform-config.json

@@ -9,7 +9,7 @@
   "Layout": "vertical",
   "Theme": "light",
   "DarkMode": false,
-  "OverallStyle": "light",
+  "ThemeMode": "light",
   "Grey": false,
   "Weak": false,
   "HideTabs": false,

src/App.vue

@@ -54,23 +54,23 @@ export default defineComponent({
         }
       );
     }
+  },
+  mounted() {
+    ElNotification({
+      title: "高级服务",
+      duration: 0,
+      customClass: "fullpage-notification",
+      // @ts-expect-error
+      style: { width: "260px" },
+      position: "bottom-right",
+      dangerouslyUseHTMLString: true,
+      message: `
+        <a target='_blank' class='block text-base text-center border mt-4 rounded hover:text-[red]!' href='https://pure-admin.cn/pages/service/'>
+        新功能更新，点我查看
+        </a>
+      `
+    });
   }
-  // mounted() {
-  //   ElNotification({
-  //     title: "平台最新活动与动态",
-  //     duration: 0,
-  //     customClass: "fullpage-notification",
-  //     // @ts-expect-error
-  //     style: { width: "260px" },
-  //     position: "bottom-right",
-  //     dangerouslyUseHTMLString: true,
-  //     message: `
-  //       <a target='_blank' class='block text-base text-center border mt-4 rounded hover:text-[red]!' href='https://pure-admin.cn/pages/service/#%E6%9C%80%E6%96%B0%E6%B4%BB%E5%8A%A8%E4%B8%8E%E5%8A%A8%E6%80%81'>
-  //       点我查看
-  //       </a>
-  //     `
-  //   });
-  // }
 });
 </script>
 

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

@@ -37,7 +37,7 @@ const horizontalRef = ref();
 
 const {
   dataTheme,
-  overallStyle,
+  themeMode,
   layoutTheme,
   themeColors,
   toggleClass,
@@ -50,7 +50,7 @@ if (unref(layoutTheme)) {
   const layout = unref(layoutTheme).layout;
   const theme = unref(layoutTheme).theme;
   document.documentElement.setAttribute("data-theme", theme);
-  setLayoutModel(layout);
+  setMenuLayout(layout);
 }
 
 /** 默认灵动模式 */
@@ -195,24 +195,24 @@ const pClass = computed(() => {
 const themeOptions = computed<Array<OptionsType>>(() => {
   return [
     {
-      label: t("panel.pureOverallStyleLight"),
+      label: t("panel.pureThemeModeLight"),
       icon: DayIcon,
       theme: "light",
-      tip: t("panel.pureOverallStyleLightTip"),
+      tip: t("panel.pureThemeModeLightTip"),
       iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
     },
     {
-      label: t("panel.pureOverallStyleDark"),
+      label: t("panel.pureThemeModeDark"),
       icon: DarkIcon,
       theme: "dark",
-      tip: t("panel.pureOverallStyleDarkTip"),
+      tip: t("panel.pureThemeModeDarkTip"),
       iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
     },
     {
-      label: t("panel.pureOverallStyleSystem"),
+      label: t("panel.pureThemeModeSystem"),
       icon: SystemIcon,
       theme: "system",
-      tip: t("panel.pureOverallStyleSystemTip"),
+      tip: t("panel.pureThemeModeSystemTip"),
       iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
     }
   ];
@@ -238,8 +238,8 @@ const markOptions = computed<Array<OptionsType>>(() => {
   ];
 });
 
-/** 设置导航模式 */
-function setLayoutModel(layout: string) {
+/** 设置菜单布局 */
+function setMenuLayout(layout: string) {
   layoutTheme.value.layout = layout;
   window.document.body.setAttribute("layout", layout);
   $storage.layout = {
@@ -249,7 +249,7 @@ function setLayoutModel(layout: string) {
     sidebarStatus: $storage.layout?.sidebarStatus,
     epThemeColor: $storage.layout?.epThemeColor,
     themeColor: $storage.layout?.themeColor,
-    overallStyle: $storage.layout?.overallStyle
+    themeMode: $storage.layout?.themeMode
   };
   useAppStoreHook().setLayout(layout);
 }
@@ -276,15 +276,15 @@ watch($storage, ({ layout }) => {
 
 const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
 
-/** 根据操作系统主题设置平台整体风格 */
+/** 根据操作系统主题设置平台主题模式 */
 function updateTheme() {
-  if (overallStyle.value !== "system") return;
+  if (themeMode.value !== "system") return;
   if (mediaQueryList.matches) {
     dataTheme.value = true;
   } else {
     dataTheme.value = false;
   }
-  dataThemeChange(overallStyle.value);
+  dataThemeChange(themeMode.value);
 }
 
 function removeMatchMedia() {
@@ -317,18 +317,18 @@ onUnmounted(() => removeMatchMedia);
 <template>
   <LayPanel>
     <div class="p-5">
-      <p :class="pClass">{{ t("panel.pureOverallStyle") }}</p>
+      <p :class="pClass">{{ t("panel.pureThemeMode") }}</p>
       <Segmented
         resize
         class="select-none"
-        :modelValue="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
+        :modelValue="themeMode === 'system' ? 2 : dataTheme ? 1 : 0"
         :options="themeOptions"
         @change="
           theme => {
             theme.index === 1 && theme.index !== 2
               ? (dataTheme = true)
               : (dataTheme = false);
-            overallStyle = theme.option.theme;
+            themeMode = theme.option.theme;
             dataThemeChange(theme.option.theme);
             theme.index === 2 && watchSystemThemeChange();
           }
@@ -354,7 +354,7 @@ onUnmounted(() => removeMatchMedia);
         </li>
       </ul>
 
-      <p :class="['mt-5!', pClass]">{{ t("panel.pureLayoutModel") }}</p>
+      <p :class="['mt-5!', pClass]">{{ t("panel.pureMenuLayout") }}</p>
       <ul class="pure-theme">
         <li
           ref="verticalRef"
@@ -363,7 +363,7 @@ onUnmounted(() => removeMatchMedia);
             zIndex: 41000
           }"
           :class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
-          @click="setLayoutModel('vertical')"
+          @click="setMenuLayout('vertical')"
         >
           <div />
           <div />
@@ -376,7 +376,7 @@ onUnmounted(() => removeMatchMedia);
             zIndex: 41000
           }"
           :class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
-          @click="setLayoutModel('horizontal')"
+          @click="setMenuLayout('horizontal')"
         >
           <div />
           <div />
@@ -389,7 +389,7 @@ onUnmounted(() => removeMatchMedia);
             zIndex: 41000
           }"
           :class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
-          @click="setLayoutModel('mix')"
+          @click="setMenuLayout('mix')"
         >
           <div />
           <div />

src/layout/components/lay-tag/index.scss

@@ -321,10 +321,9 @@
 
   .chrome-tab-divider {
     position: absolute;
-    right: 7px;
+    left: 7px;
     width: 1px;
     height: 14px;
-    background-color: #2b2d2f;
   }
 
   &:hover {

src/layout/components/lay-tag/index.vue

@@ -618,6 +618,10 @@ onBeforeUnmount(() => {
             />
           </template>
           <div v-else class="chrome-tab">
+            <span
+              v-if="index !== 0 && index !== activeIndex"
+              class="chrome-tab-divider bg-[#e2e2e2] dark:bg-[#2d2d2d]"
+            />
             <div class="chrome-tab__bg">
               <TagChrome />
             </div>
@@ -631,7 +635,6 @@ onBeforeUnmount(() => {
             >
               <IconifyIconOffline :icon="Close" />
             </span>
-            <span class="chrome-tab-divider" />
           </div>
         </div>
       </div>

src/layout/hooks/useDataThemeChange.ts

@@ -33,7 +33,7 @@ export function useDataThemeChange() {
 
   const { $storage } = useGlobal<GlobalPropertiesApi>();
   const dataTheme = ref<boolean>($storage?.layout?.darkMode);
-  const overallStyle = ref<string>($storage?.layout?.overallStyle);
+  const themeMode = ref<string>($storage?.layout?.themeMode);
   const body = document.documentElement as HTMLElement;
 
   function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
@@ -59,7 +59,7 @@ export function useDataThemeChange() {
       sidebarStatus: $storage.layout?.sidebarStatus,
       epThemeColor: $storage.layout?.epThemeColor,
       themeColor: isClick ? theme : storageThemeColor,
-      overallStyle: overallStyle.value
+      themeMode: themeMode.value
     };
 
     if (theme === "default" || theme === "light") {
@@ -89,9 +89,9 @@ export function useDataThemeChange() {
     }
   };
 
-  /** 浅色、深色整体风格切换 */
-  function dataThemeChange(overall?: string) {
-    overallStyle.value = overall;
+  /** 浅色、深色主题模式切换 */
+  function dataThemeChange(mode?: string) {
+    themeMode.value = mode;
     if (useEpThemeStoreHook().epTheme === "light" && dataTheme.value) {
       setLayoutThemeColor("default", false);
     } else {
@@ -126,7 +126,7 @@ export function useDataThemeChange() {
   return {
     body,
     dataTheme,
-    overallStyle,
+    themeMode,
     layoutTheme,
     themeColors,
     onReset,

src/layout/hooks/useLayout.ts

@@ -29,7 +29,7 @@ export function useLayout() {
         sidebarStatus: $config?.SidebarStatus ?? true,
         epThemeColor: $config?.EpThemeColor ?? "#409EFF",
         themeColor: $config?.Theme ?? "light",
-        overallStyle: $config?.OverallStyle ?? "light"
+        themeMode: $config?.ThemeMode ?? "light"
       };
     }
     /** 灰色模式、色弱模式、隐藏标签页 */

src/layout/index.vue

@@ -67,16 +67,16 @@ const set: setType = reactive({
   })
 });
 
-function setTheme(layoutModel: string) {
-  window.document.body.setAttribute("layout", layoutModel);
+function setTheme(menuLayout: string) {
+  window.document.body.setAttribute("layout", menuLayout);
   $storage.layout = {
-    layout: `${layoutModel}`,
+    layout: `${menuLayout}`,
     theme: $storage.layout?.theme,
     darkMode: $storage.layout?.darkMode,
     sidebarStatus: $storage.layout?.sidebarStatus,
     epThemeColor: $storage.layout?.epThemeColor,
     themeColor: $storage.layout?.themeColor,
-    overallStyle: $storage.layout?.overallStyle
+    themeMode: $storage.layout?.themeMode
   };
 }
 
@@ -123,7 +123,7 @@ onMounted(() => {
 });
 
 onBeforeMount(() => {
-  useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
+  useDataThemeChange().dataThemeChange($storage.layout?.themeMode);
 });
 
 const LayHeader = defineComponent({

src/plugins/elementPlus.ts

@@ -3,15 +3,13 @@ import type { App, Component } from "vue";
 import {
   /**
    * 为了方便演示平台将 element-plus 导出的所有组件引入，实际使用中如果你没用到哪个组件，将其注释掉就行
-   * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/component.ts#L111-L211
+   * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/component.ts#L116-L226
    * */
   ElAffix,
   ElAlert,
   ElAutocomplete,
   ElAutoResizer,
   ElAvatar,
-  ElAnchor,
-  ElAnchorLink,
   ElBacktop,
   ElBadge,
   ElBreadcrumb,
@@ -32,6 +30,7 @@ import {
   ElCollapse,
   ElCollapseItem,
   ElCollapseTransition,
+  ElColorPickerPanel,
   ElColorPicker,
   ElConfigProvider,
   ElContainer,
@@ -40,6 +39,7 @@ import {
   ElHeader,
   ElMain,
   ElDatePicker,
+  ElDatePickerPanel,
   ElDescriptions,
   ElDescriptionsItem,
   ElDialog,
@@ -56,6 +56,7 @@ import {
   ElImageViewer,
   ElInput,
   ElInputNumber,
+  ElInputTag,
   ElLink,
   ElMenu,
   ElMenuItem,
@@ -107,17 +108,22 @@ import {
   ElWatermark,
   ElTour,
   ElTourStep,
+  ElAnchor,
+  ElAnchorLink,
   ElSegmented,
+  ElMention,
+  ElSplitter,
+  ElSplitterPanel,
   /**
    * 为了方便演示平台将 element-plus 导出的所有插件引入，实际使用中如果你没用到哪个插件，将其注释掉就行
    * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/plugin.ts#L11-L16
    * */
-  ElLoading, // v-loading 指令
   ElInfiniteScroll, // v-infinite-scroll 指令
-  ElPopoverDirective, // v-popover 指令
+  ElLoading, // v-loading 指令
   ElMessage, // $message 全局属性对象globalProperties
   ElMessageBox, // $msgbox、$alert、$confirm、$prompt 全局属性对象globalProperties
-  ElNotification // $notify 全局属性对象globalProperties
+  ElNotification, // $notify 全局属性对象globalProperties
+  ElPopoverDirective // v-popover 指令
 } from "element-plus";
 
 const components = [
@@ -126,8 +132,6 @@ const components = [
   ElAutocomplete,
   ElAutoResizer,
   ElAvatar,
-  ElAnchor,
-  ElAnchorLink,
   ElBacktop,
   ElBadge,
   ElBreadcrumb,
@@ -148,6 +152,7 @@ const components = [
   ElCollapse,
   ElCollapseItem,
   ElCollapseTransition,
+  ElColorPickerPanel,
   ElColorPicker,
   ElConfigProvider,
   ElContainer,
@@ -156,6 +161,7 @@ const components = [
   ElHeader,
   ElMain,
   ElDatePicker,
+  ElDatePickerPanel,
   ElDescriptions,
   ElDescriptionsItem,
   ElDialog,
@@ -172,6 +178,7 @@ const components = [
   ElImageViewer,
   ElInput,
   ElInputNumber,
+  ElInputTag,
   ElLink,
   ElMenu,
   ElMenuItem,
@@ -223,16 +230,21 @@ const components = [
   ElWatermark,
   ElTour,
   ElTourStep,
-  ElSegmented
+  ElAnchor,
+  ElAnchorLink,
+  ElSegmented,
+  ElMention,
+  ElSplitter,
+  ElSplitterPanel
 ];
 
 const plugins = [
-  ElLoading,
   ElInfiniteScroll,
-  ElPopoverDirective,
+  ElLoading,
   ElMessage,
   ElMessageBox,
-  ElNotification
+  ElNotification,
+  ElPopoverDirective
 ];
 
 /** 按需引入`element-plus` */

src/router/modules/components.ts

@@ -119,8 +119,7 @@ export default {
       name: "PureSlider",
       component: () => import("@/views/components/slider/index.vue"),
       meta: {
-        title: $t("menus.pureSlider"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureSlider")
       }
     },
     {
@@ -195,6 +194,15 @@ export default {
         title: $t("menus.pureColorPicker")
       }
     },
+    {
+      path: "/components/color-picker-panel",
+      name: "ColorPickerPanel",
+      component: () => import("@/views/components/color-picker-panel.vue"),
+      meta: {
+        title: $t("menus.pureColorPickerPanel"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
     {
       path: "/components/selector",
       name: "Selector",

src/store/modules/app.ts

@@ -18,7 +18,7 @@ export const useAppStore = defineStore("pure-app", {
       withoutAnimation: false,
       isClickCollapse: false
     },
-    // 这里的layout用于监听容器拖拉后恢复对应的导航模式
+    // 这里的layout用于监听容器拖拉后恢复对应的菜单布局
     layout:
       storageLocal().getItem<StorageConfigs>(
         `${responsiveStorageNameSpace()}layout`

src/store/modules/epTheme.ts

@@ -21,7 +21,7 @@ export const useEpThemeStore = defineStore("pure-epTheme", {
     getEpThemeColor(state) {
       return state.epThemeColor;
     },
-    /** 用于mix导航模式下hamburger-svg的fill属性 */
+    /** 用于mix菜单布局下hamburger-svg的fill属性 */
     fill(state) {
       if (state.epTheme === "light") {
         return "#409eff";

src/utils/message.ts

@@ -4,6 +4,13 @@ import { type MessageHandler, ElMessage } from "element-plus";
 
 type messageStyle = "el" | "antd";
 type messageTypes = "info" | "success" | "warning" | "error";
+type messagePlacement =
+  | "top"
+  | "top-left"
+  | "top-right"
+  | "bottom"
+  | "bottom-left"
+  | "bottom-right";
 
 interface MessageParams {
   /** 消息类型，可选 `info` 、`success` 、`warning` 、`error` ，默认 `info` */
@@ -20,8 +27,10 @@ interface MessageParams {
   duration?: number;
   /** 是否显示关闭按钮，默认值 `false` */
   showClose?: boolean;
-  /** `Message` 距离窗口顶部的偏移量，默认 `16` */
+  /** `Message` 消息距离窗口边缘的偏移量，默认 `16` */
   offset?: number;
+  /** `Message` 消息放置位置，默认 `top` */
+  placement?: messagePlacement;
   /** 设置组件的根元素，默认 `document.body` */
   appendTo?: string | HTMLElement;
   /** 合并内容相同的消息，不支持 `VNode` 类型的消息，默认值 `false` */
@@ -56,6 +65,7 @@ const message = (
       duration = 2000,
       showClose = false,
       offset = 16,
+      placement = "top",
       appendTo = document.body,
       grouping = false,
       repeatNum = 1,
@@ -71,6 +81,7 @@ const message = (
       duration,
       showClose,
       offset,
+      placement,
       appendTo,
       grouping,
       repeatNum,

src/utils/responsive.ts

@@ -19,8 +19,8 @@ export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => {
         darkMode: config.DarkMode ?? false,
         sidebarStatus: config.SidebarStatus ?? true,
         epThemeColor: config.EpThemeColor ?? "#409EFF",
-        themeColor: config.Theme ?? "light", // 主题色（对应系统配置中的主题色，与theme不同的是它不会受到浅色、深色整体风格切换的影响，只会在手动点击主题色时改变）
-        overallStyle: config.OverallStyle ?? "light" // 整体风格（浅色：light、深色：dark、自动：system）
+        themeColor: config.Theme ?? "light", // 主题色（对应系统配置中的主题色，与theme不同的是它不会受到浅色、深色主题模式切换的影响，只会在手动点击主题色时改变）
+        themeMode: config.ThemeMode ?? "light" // 主题模式（浅色：light、深色：dark、自动：system）
       },
       // 系统配置-界面显示
       configure: Storage.getData("configure", nameSpace) ?? {

src/views/account-settings/index.vue

@@ -25,7 +25,7 @@ const router = useRouter();
 const isOpen = ref(deviceDetection() ? false : true);
 const { $storage } = useGlobal<GlobalPropertiesApi>();
 onBeforeMount(() => {
-  useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
+  useDataThemeChange().dataThemeChange($storage.layout?.themeMode);
 });
 
 const userInfo = ref({

src/views/components/color-picker-panel.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+defineOptions({
+  name: "ColorPickerPanel"
+});
+
+const disabled = ref(false);
+const color = ref("rgba(255, 69, 0, 0.68)");
+const predefineColors = [
+  "#ff4500",
+  "#ff8c00",
+  "#ffd700",
+  "#90ee90",
+  "#00ced1",
+  "#1e90ff",
+  "#c71585",
+  "rgba(255, 69, 0, 0.68)",
+  "rgb(255, 120, 0)",
+  "hsv(51, 100, 98)",
+  "hsva(120, 40, 94, 0.5)",
+  "hsl(181, 100%, 37%)",
+  "hsla(209, 100%, 56%, 0.73)",
+  "#c7158577"
+];
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/color-picker-panel.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            颜色选择器面板
+          </el-link>
+          <el-radio-group v-model="disabled">
+            <el-radio :value="false">启用</el-radio>
+            <el-radio :value="true">禁用</el-radio>
+          </el-radio-group>
+        </el-space>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/color-picker-panel.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/color-picker-panel.vue
+      </el-link>
+    </template>
+
+    <div class="mb-2">选择透明度、预定义颜色、无边框</div>
+    <el-color-picker-panel
+      v-model="color"
+      show-alpha
+      :border="false"
+      :disabled="disabled"
+      :predefine="predefineColors"
+    />
+    <el-divider />
+  </el-card>
+</template>

src/views/components/message.vue

@@ -199,6 +199,31 @@ defineOptions({
 
     <el-divider />
 
+    <h4 class="mb-4!">
+      控制消息出现的位置，消息可以显示在窗口的顶部(默认) 或其他位置
+    </h4>
+
+    <el-space wrap>
+      <el-button @click="message('顶部中间')"> 顶部中间 </el-button>
+      <el-button @click="message('顶部左侧', { placement: 'top-left' })">
+        顶部左侧
+      </el-button>
+      <el-button @click="message('顶部右侧', { placement: 'top-right' })">
+        顶部右侧
+      </el-button>
+      <el-button @click="message('底部中间', { placement: 'bottom' })">
+        底部中间
+      </el-button>
+      <el-button @click="message('底部左侧', { placement: 'bottom-left' })">
+        底部左侧
+      </el-button>
+      <el-button @click="message('底部右侧', { placement: 'bottom-right' })">
+        底部右侧
+      </el-button>
+    </el-space>
+
+    <el-divider />
+
     <el-button @click="closeAllMessage"> 关闭所有消息提示 </el-button>
   </el-card>
 </template>

src/views/login/index.vue

@@ -52,8 +52,8 @@ const currentPage = computed(() => {
 const { t } = useI18n();
 const { initStorage } = useLayout();
 initStorage();
-const { dataTheme, overallStyle, dataThemeChange } = useDataThemeChange();
-dataThemeChange(overallStyle.value);
+const { dataTheme, themeMode, dataThemeChange } = useDataThemeChange();
+dataThemeChange(themeMode.value);
 const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
 const { locale, translationCh, translationEn } = useTranslationLang();
 

types/global.d.ts

@@ -93,7 +93,7 @@ declare global {
     Layout?: string;
     Theme?: string;
     DarkMode?: boolean;
-    OverallStyle?: string;
+    ThemeMode?: string;
     Grey?: boolean;
     Weak?: boolean;
     HideTabs?: boolean;
@@ -140,7 +140,7 @@ declare global {
     sidebarStatus?: boolean;
     epThemeColor?: string;
     themeColor?: string;
-    overallStyle?: string;
+    themeMode?: string;
     showLogo?: boolean;
     showModel?: string;
     menuSearchHistory?: number;
@@ -169,7 +169,7 @@ declare global {
       sidebarStatus?: boolean;
       epThemeColor?: string;
       themeColor?: string;
-      overallStyle?: string;
+      themeMode?: string;
     };
     configure: {
       grey?: boolean;