v3.1.7

2025-04-05 19:42:07 +08:00 · 2023-04-17 12:37:25 +08:00 · 2023-04-17 12:37:25 +08:00 · c179929e16
commit c179929e16
parent 2d360f392e
27 changed files with 586 additions and 128 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,19 @@
 # CHANGE LOG

+## 3.1.7
+
+### Fixes
+
+- 修复默认获取容器可视区域高度问题
+
+### Feats
+
+- 修改 Menu 菜单过滤逻辑，现在如果权限不匹配或者设置了 hidden 属性，则会被过滤掉
+- 移除 $activedColor 全局 sass 变量，使用 --ray-theme-primary-color 替代
+- 新增路由菜单检索功能
+- 移除 App.tsx 中同步主题方法，改为使用 cfg 配置并且使用 ejs 注入
+- 移除 MenuTag 默认主题色，现在会以当前主题色为主色
+
 ## 3.1.6

 ### Fixes
@ -17,6 +31,9 @@
 - 现在可以直接配置首屏加载动画一些信息(cfg.ts)
 - 新增对于 ejs 支持
 - 补充一些细节注释
+- 新增 RayChart 组件 loading、loadingOptions 属性配置
+- 新增反转色模式
+- 修改 Menu 菜单过滤逻辑，现在如果权限不匹配或者设置了 hidden 属性，则会被过滤掉

 ## 3.1.5

--- a/cfg.ts
+++ b/cfg.ts
@ -55,8 +55,13 @@ const config: AppConfigExport = {
    tagColor: '#ff6700',
    titleColor: '#2d8cf0',
  },
-  /** 默认主题色 */
+  /** 默认主题色(不可省略, 必填), 也用于 ejs 注入 */
+  appPrimaryColor: {
+    /** 主题色 */
    primaryColor: '#2d8cf0',
+    /** 主题辅助色(用于整体 hover、active 等之类颜色) */
+    primaryFadeColor: 'rgba(45, 140, 240, 0.25)',
+  },
  /**
   *
   * 配置根页面
--- a/index.html
+++ b/index.html
@ -10,6 +10,8 @@
    :root {
      --preloading-tag-color: <%= preloadingConfig.tagColor %>;
      --preloading-title-color: <%= preloadingConfig.titleColor %>;
+      --ray-theme-primary-fade-color: <%= appPrimaryColor.primaryFadeColor %>;
+      --ray-theme-primary-color: <%= appPrimaryColor.primaryColor %>;
    }

    #pre-loading-animation {
--- a/locales/en-US.json
+++ b/locales/en-US.json
@ -22,7 +22,8 @@
    "Setting": "Setting",
    "Github": "Github",
    "FullScreen": "Full Screen",
-    "CancelFullScreen": "Cancel Full Screen"
+    "CancelFullScreen": "Cancel Full Screen",
+    "Search": "Search"
  },
  "LayoutHeaderSettingOptions": {
    "Title": "Configuration",
@ -31,7 +32,8 @@
      "Dark": "Dark",
      "Light": "Light",
      "PrimaryColorConfig": "Primary Color"
-    }
+    },
+    "InterfaceDisplay": "Interface Display"
  },
  "LoginModule": {
    "Register": "Register",
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@ -22,7 +22,8 @@
    "Setting": "设置",
    "Github": "Github",
    "FullScreen": "全屏",
-    "CancelFullScreen": "退出全屏"
+    "CancelFullScreen": "退出全屏",
+    "Search": "搜索"
  },
  "LayoutHeaderSettingOptions": {
    "Title": "项目配置",
@ -31,7 +32,8 @@
      "Dark": "暗色",
      "Light": "明亮",
      "PrimaryColorConfig": "主题色"
-    }
+    },
+    "InterfaceDisplay": "界面显示"
  },
  "LoginModule": {
    "Register": "注册",
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "ray-template",
  "private": true,
-  "version": "3.1.6",
+  "version": "3.1.7",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -14,21 +14,6 @@ const App = defineComponent({

    const { themeValue } = storeToRefs(settingStore)

-    /** 同步主题色变量至 body, 如果未获取到缓存值则已默认值填充 */
-    const syncPrimaryColorToBody = () => {
-      const { primaryColor } = __APP_CFG__ // 默认主题色
-      const body = document.body
-
-      const primaryColorOverride = getCache('piniaSettingStore', 'localStorage')
-      const _p = get(
-        primaryColorOverride,
-        'primaryColorOverride.common.primaryColor',
-      )
-
-      /** 设置全局主题色 css 变量 */
-      body.style.setProperty('--ray-theme-primary-color', _p || primaryColor)
-    }
-
    /** 隐藏加载动画 */
    const hiddenLoadingAnimation = () => {
      /** pre-loading-animation 是默认 id */
@ -41,7 +26,6 @@ const App = defineComponent({
      }
    }

-    syncPrimaryColorToBody()
    hiddenLoadingAnimation()

    /** 切换主题时, 同步更新 body class 以便于进行自定义 css 配置 */
--- a/src/components/RayChart/index.tsx
+++ b/src/components/RayChart/index.tsx
@ -27,7 +27,6 @@ import { cloneDeep, debounce } from 'lodash-es'
 import { on, off, addStyle } from '@/utils/element'

 import type { PropType } from 'vue'
-// import type { DebouncedFuncLeading } from 'lodash-es'

 export type AutoResize =
  | boolean
@ -59,7 +58,7 @@ export type ChartTheme = 'dark' | '' | object
 *
 * 为了方便使用加载动画, 写了此方法, 虽然没啥用
 */
-export const loadingOptions = (options: LoadingOptions) =>
+export const loadingOptions = (options?: LoadingOptions) =>
  Object.assign(
    {},
    {
@ -189,6 +188,16 @@ const RayChart = defineComponent({
      type: Boolean,
      default: true,
    },
+    loading: {
+      /** 加载动画 */
+      type: Boolean,
+      default: false,
+    },
+    loadingOptions: {
+      /** 配置加载动画样式 */
+      type: Object as PropType<LoadingOptions>,
+      default: () => loadingOptions(),
+    },
  },
  setup(props) {
    const settingStore = useSetting()
@ -196,7 +205,7 @@ const RayChart = defineComponent({
    const rayChartRef = ref<HTMLElement>() // `echart` 容器实例
    const echartInstanceRef = ref<EChartsInstance>() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
    let echartInstance: EChartsInstance // `echart` 实例
-    let resizeDebounce: AnyFunc // resize 防抖方法示例
+    let resizeDebounce: AnyFunc // resize 防抖方法实例

    const cssVarsRef = computed(() => {
      const cssVars = {
@ -206,13 +215,15 @@ const RayChart = defineComponent({

      return cssVars
    })
+    const modelLoadingOptions = computed(() =>
+      loadingOptions(props.loadingOptions),
+    )

    /**
     *
     * 注册 `echart` 组件, 图利, 渲染器等
     *
     * 会自动合并拓展 `echart` 组件
-     *
     * 该方法必须在注册图表之前调用
     */
    const registerChartCore = async () => {
@ -400,6 +411,16 @@ const RayChart = defineComponent({
      },
    )

+    /** 显示/隐藏加载动画 */
+    watch(
+      () => props.loading,
+      (newData) => {
+        newData
+          ? echartInstance?.showLoading(modelLoadingOptions.value)
+          : echartInstance?.hideLoading()
+      },
+    )
+
    /** 监听 options 变化 */
    if (props.watchOptions) {
      watch(
@ -466,7 +487,6 @@ export default RayChart
 * 暂时不支持自动解析导入 `chart` 组件, 如果使用未注册的组件, 需要在顶部手动导入并且再使用 `use` 注册
 *
 * 预引入: 柱状图, 折线图, 饼图, k线图, 散点图等
- *
 * 预引入: 提示框, 标题, 直角坐标系, 数据集, 内置数据转换器等
 *
 * 如果需要大批量数据渲染, 可以通过获取实例后阶段性调用 `setOption` 方法注入数据
--- a/src/components/RayTable/src/components/TableSetting/index.scss
+++ b/src/components/RayTable/src/components/TableSetting/index.scss
@ -58,7 +58,7 @@

    & .draggable-item__icon {
      &.draggable-item__icon--actived {
-        color: $activedColor;
+        color: var(--ray-theme-primary-color);
      }
    }

--- a/src/components/RayTable/src/components/TableSize/index.scss
+++ b/src/components/RayTable/src/components/TableSize/index.scss
@ -27,7 +27,7 @@
          &.dropdown-item--active,
          &:hover {
            background-color: $hoverLightBackgroundColor;
-            color: $activedColor;
+            color: var(--ray-theme-primary-color);
          }
        }
      }
@ -39,7 +39,7 @@
  & .table-size__dropdown-wrapper {
    & .dropdown-item:hover {
      background-color: $hoverDarkBackgroundColor;
-      color: $activedColor;
+      color: var(--ray-theme-primary-color);
    }
  }
 }
--- a/src/icons/AA_READMEmd
+++ b/src/icons/AA_READMEmd
@ -0,0 +1,17 @@
+## 说明
+
+该文件包属于全局 `svg icon`，配合 `RayIcon` 组件使用。
+
+## TIP
+
+添加新的 `svg` 图标时，应该注意图标自带 `fill` 属性的管理。如果自带了 `fill` 属性的图标，则会导致使用组件 `color` 属性失效的问题。所以如果是需要动态使用 `css` 属性控制样式的图标，应该去掉其 `fill` 属性或者配置为 `fill = currentColor`。
+
+```html
+<svg fill="currentColor"></svg>
+```
+
+## 使用方法
+
+- 导入 `svg` 图标
+- 命名（`命名必须全局唯一，并且尽量避免使用特殊符号`）
+- 导入 `RayIcon` 组件，配置 `name` 属性即可将 `svg` 作为图标使用
--- a/src/icons/search.svg
+++ b/src/icons/search.svg
@ -0,0 +1,6 @@
+<svg t="1681648912704" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="8713" width="64" height="64">
+  <path
+    d="M907.4 906.4c-29 29-76 29-105 0L657.7 761.7c-57.6 38.4-126.8 60.9-201.3 60.9-200.5 0-363.1-162.6-363.1-363.2S255.9 96.2 456.5 96.2s363.2 162.6 363.2 363.2c0 72.4-21.2 139.9-57.7 196.5l145.5 145.5c28.9 29 28.9 76-0.1 105zM456.4 231C330.3 231 228 333.3 228 459.4c0 126.1 102.3 228.4 228.4 228.4s228.4-102.3 228.4-228.4C684.9 333.3 582.6 231 456.4 231z m118.1 379.4c-1.4 2.1-3.5 3.6-6.2 4.2-5.5 1.3-11.1-2.2-12.3-7.7-1.2-5.2 1.7-10.3 6.7-12 59-46.5 80.8-126.4 53.6-196.1-0.7-1.4-1-2.9-1-4.5 0-5.7 4.6-10.3 10.3-10.3 4.2 0 7.8 2.5 9.4 6.1h0.1c30.7 78.3 6.1 168.4-60.6 220.3z"
+    p-id="8714" fill="currentColor"></path>
+</svg>
--- a/src/layout/components/MenuTag/index.tsx
+++ b/src/layout/components/MenuTag/index.tsx
@ -9,6 +9,15 @@
 * @remark 今天也是元气满满撸代码的一天
 */

+/**
+ *
+ * 操作说明:
+ *   - 关闭全部: 关闭所有标签页, 并且重定向至根页面 rootRoute.path
+ *   - 关闭右侧: 关闭右侧所有标签, 如果选中标签页与当前激活页不一致并且激活页在右侧, 则会重定向至当前选中标签页
+ *   - 关闭左侧: 关闭左侧所有标签, 如果选中标签页与当前激活页不一致并且激活页在左侧, 则会重定向至当前选中标签页
+ *   - 关闭其他: 关闭其他所有标签, 如果选中标签页与当前激活页不一致并且激活页在其中, 则会重定向至当前选中标签页
+ */
+
 import './index.scss'

 import { NScrollbar, NTag, NSpace, NLayoutHeader, NDropdown } from 'naive-ui'
@ -391,7 +400,7 @@ const MenuTag = defineComponent({
                      this.modelMenuTagOptions.length > 1
                    }
                    onClose={() => this.closeCurrentMenuTag(idx)}
-                    type={curr.key === this.menuKey ? 'success' : 'info'}
+                    type={curr.key === this.menuKey ? 'primary' : 'default'}
                    onClick={this.handleTagClick.bind(this, curr)}
                    bordered={false}
                    onContextmenu={this.handleContextMenu.bind(this, idx)}
--- a/src/layout/components/SiderBar/Components/GlobalSeach/index.scss
+++ b/src/layout/components/SiderBar/Components/GlobalSeach/index.scss
@ -0,0 +1,89 @@
+.global-seach {
+  & .global-seach__wrapper {
+    box-sizing: border-box;
+
+    & .global-seach__card {
+      width: 650px;
+      height: 600px;
+      border-radius: 6px;
+      padding: 12px;
+
+      & .ray-icon {
+        color: var(--ray-theme-primary-color);
+      }
+
+      & .global-seach__card-header {
+        margin-bottom: 12px;
+      }
+
+      & .global-seach__card-content {
+        height: calc(100% - 98px);
+
+        & .content-item {
+          padding: 12px;
+          border-radius: 6px;
+          cursor: pointer;
+          transition: background-color 0.3s var(--r-bezier);
+
+          & .content-item-icon {
+            @include flexCenter;
+          }
+        }
+      }
+
+      & .global-seach__card-footer {
+        width: 100%;
+
+        & .card-footer__tip-wrapper {
+          display: flex;
+          align-items: center;
+          margin-top: 24px;
+
+          & .tip-wrapper-item {
+            display: flex;
+            align-items: center;
+
+            & .item-icon {
+              display: flex;
+              align-items: center;
+              margin-right: 4px;
+
+              & span {
+                color: var(--ray-theme-primary-color);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.ray-template--dark {
+  & .global-seach__card {
+    background-color: #242424;
+
+    & .global-seach__card-content .content-item {
+      background-color: #2f2f2f;
+
+      &:hover {
+        // background-color: $hoverDarkBackgroundColor;
+        background-color: var(--ray-theme-primary-fade-color);
+      }
+    }
+  }
+}
+
+.ray-template--light {
+  & .global-seach__card {
+    background-color: #f9f9f9;
+
+    & .global-seach__card-content .content-item {
+      background-color: #ffffff;
+
+      &:hover {
+        background-color: $hoverLightBackgroundColor;
+      }
+    }
+  }
+}
--- a/src/layout/components/SiderBar/Components/GlobalSeach/index.tsx
+++ b/src/layout/components/SiderBar/Components/GlobalSeach/index.tsx
@ -0,0 +1,208 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-04-16
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+import { NInput, NModal, NScrollbar, NSpace } from 'naive-ui'
+import RayIcon from '@/components/RayIcon/index'
+
+import { on, off } from '@/utils/element'
+import { debounce } from 'lodash-es'
+import { useMenu } from '@/store'
+import { validRole } from '@/router/basic'
+
+import type { MenuOption } from 'naive-ui'
+import type { RouteMeta } from 'vue-router'
+
+const GlobalSeach = defineComponent({
+  name: 'GlobalSeach',
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:show'],
+  setup(props, { emit }) {
+    const menuStore = useMenu()
+
+    const { menuModelValueChange } = menuStore
+    const modelShow = computed({
+      get: () => props.show,
+      set: (val) => {
+        emit('update:show', val)
+
+        if (!val) {
+          state.searchOptions = []
+          state.searchValue = null
+        }
+      },
+    })
+    const modelMenuOptions = computed(() => menuStore.options)
+    const state = reactive({
+      searchValue: null,
+      searchOptions: [] as IMenuOptions[],
+    })
+
+    const tiptextOptions = [
+      {
+        icon: 'cmd / ctrl + k',
+        label: '唤起',
+        plain: true,
+      },
+      {
+        icon: 'esc',
+        label: '关闭',
+        plain: true,
+      },
+    ]
+
+    /** 按下 ctrl + k 或者 command + k 激活搜索栏 */
+    const registerKeyboard = (e: Event) => {
+      const _e = e as KeyboardEvent
+
+      if ((_e.ctrlKey || _e.metaKey) && _e.key === 'k') {
+        modelShow.value = true
+      }
+    }
+
+    /** 根据输入值模糊检索菜单 */
+    const handleSearchMenuOptions = (value: string) => {
+      const arr: IMenuOptions[] = []
+
+      const filterArr = (options: IMenuOptions[]) => {
+        options.forEach((curr) => {
+          if (curr.children?.length) {
+            filterArr(curr.children)
+          }
+
+          /** 处理菜单名与输入值, 不区分大小写 */
+          const _breadcrumbLabel = curr.breadcrumbLabel?.toLocaleLowerCase()
+          const _value = String(value).toLocaleLowerCase()
+
+          if (
+            _breadcrumbLabel?.includes(_value) &&
+            validRole(curr) &&
+            !curr.children?.length
+          ) {
+            arr.push(curr)
+          }
+        })
+      }
+
+      if (value) {
+        filterArr(modelMenuOptions.value)
+
+        state.searchOptions = arr
+      } else {
+        state.searchOptions = []
+      }
+    }
+
+    const handleSearchItemClick = (option: MenuOption) => {
+      const meta = option.meta as RouteMeta
+
+      /** 如果配置站外跳转则不会关闭搜索框 */
+      if (meta.windowOpen) {
+        window.open(meta.windowOpen)
+      } else {
+        modelShow.value = false
+
+        menuModelValueChange(option.key as string, option)
+      }
+    }
+
+    onMounted(() => {
+      on(window, 'keydown', registerKeyboard)
+    })
+
+    onBeforeUnmount(() => {
+      off(window, 'keydown', registerKeyboard)
+    })
+
+    return {
+      ...toRefs(state),
+      modelShow,
+      tiptextOptions,
+      handleSearchMenuOptions: debounce(handleSearchMenuOptions, 300),
+      handleSearchItemClick,
+    }
+  },
+  render() {
+    return (
+      <NModal v-model:show={this.modelShow} transform-origin="center" show>
+        <div class="global-seach">
+          <div class="global-seach__wrapper">
+            <div class="global-seach__card">
+              <div class="global-seach__card-header">
+                <NInput
+                  size="large"
+                  v-model:value={this.searchValue}
+                  onInput={this.handleSearchMenuOptions.bind(this)}
+                >
+                  {{
+                    prefix: () => <RayIcon name="search" size="24" />,
+                  }}
+                </NInput>
+              </div>
+              <NScrollbar class="global-seach__card-content">
+                <NSpace vertical wrapItem={false} size={[8, 8]}>
+                  {this.searchOptions.map((curr) => (
+                    <NSpace
+                      align="center"
+                      wrapItem={false}
+                      class="content-item"
+                      onClick={this.handleSearchItemClick.bind(this, curr)}
+                    >
+                      <div class="content-item-icon">
+                        {curr?.meta?.icon ? (
+                          <RayIcon name={curr.meta.icon} size="24" />
+                        ) : (
+                          <RayIcon name="table" size="24" />
+                        )}
+                      </div>
+                      <div class="content-item-label">
+                        {curr.breadcrumbLabel}
+                      </div>
+                    </NSpace>
+                  ))}
+                </NSpace>
+              </NScrollbar>
+              <div class="global-seach__card-footer">
+                <NSpace
+                  class="card-footer__tip-wrapper"
+                  align="center"
+                  wrapItem={false}
+                  size={[24, 8]}
+                >
+                  {this.tiptextOptions.map((curr) => (
+                    <div class="tip-wrapper-item">
+                      <div class="item-icon">
+                        {curr.plain ? (
+                          <span>{curr.icon}</span>
+                        ) : (
+                          <RayIcon name={curr.icon} size="18" />
+                        )}
+                      </div>
+                      <div class="item-laebl">{curr.label}</div>
+                    </div>
+                  ))}
+                </NSpace>
+              </div>
+            </div>
+          </div>
+        </div>
+      </NModal>
+    )
+  },
+})
+
+export default GlobalSeach
--- a/src/layout/components/SiderBar/Components/SettingDrawer/index.tsx
+++ b/src/layout/components/SiderBar/Components/SettingDrawer/index.tsx
@ -43,6 +43,7 @@ const SettingDrawer = defineComponent({
      primaryColorOverride,
      menuTagSwitch,
      breadcrumbSwitch,
+      invertSwitch,
    } = storeToRefs(settingStore)

    const modelShow = computed({
@ -66,6 +67,7 @@ const SettingDrawer = defineComponent({
      menuTagSwitch,
      changeSwitcher,
      breadcrumbSwitch,
+      invertSwitch,
    }
  },
  render() {
@ -91,9 +93,11 @@ const SettingDrawer = defineComponent({
              v-model:value={this.primaryColorOverride.common!.primaryColor}
              onUpdateValue={this.changePrimaryColor.bind(this)}
            />
-            <NDivider titlePlacement="center">界面显示</NDivider>
+            <NDivider titlePlacement="center">
+              {t('LayoutHeaderSettingOptions.InterfaceDisplay')}
+            </NDivider>
            <NDescriptions labelPlacement="left" column={1}>
-              <NDescriptionsItem label="显示多标签">
+              <NDescriptionsItem label="多标签">
                <NSwitch
                  v-model:value={this.menuTagSwitch}
                  onUpdateValue={(bool: boolean) =>
@ -101,7 +105,7 @@ const SettingDrawer = defineComponent({
                  }
                />
              </NDescriptionsItem>
-              <NDescriptionsItem label="显示面包屑">
+              <NDescriptionsItem label="面包屑">
                <NSwitch
                  v-model:value={this.breadcrumbSwitch}
                  onUpdateValue={(bool: boolean) =>
@ -109,6 +113,14 @@ const SettingDrawer = defineComponent({
                  }
                />
              </NDescriptionsItem>
+              <NDescriptionsItem label="反转色">
+                <NSwitch
+                  v-model:value={this.invertSwitch}
+                  onUpdateValue={(bool: boolean) =>
+                    this.changeSwitcher(bool, 'invertSwitch')
+                  }
+                />
+              </NDescriptionsItem>
            </NDescriptions>
          </NSpace>
        </NDrawerContent>
--- a/src/layout/components/SiderBar/index.tsx
+++ b/src/layout/components/SiderBar/index.tsx
@ -16,6 +16,7 @@ import RayIcon from '@/components/RayIcon/index'
 import RayTooltipIcon from '@/components/RayTooltipIcon/index'
 import SettingDrawer from './components/SettingDrawer/index'
 import Breadcrumb from './components/Breadcrumb/index'
+import GlobalSeach from './components/GlobalSeach/index'

 import { useSetting } from '@/store'
 import { useSignin } from '@/store'
@ -42,12 +43,14 @@ const SiderBar = defineComponent({
    const { t } = useI18n()
    const { updateLocale, changeSwitcher } = settingStore
    const { logout } = signinStore
+
    const { drawerPlacement, breadcrumbSwitch } = storeToRefs(settingStore)
    const showSettings = ref(false)
    const person = getCache('person')
    const spaceItemStyle = {
      display: 'flex',
    }
+    const globalSearchShown = ref(false)

    /**
     *
@ -65,6 +68,12 @@ const SiderBar = defineComponent({
     * 顶部右边提示框操作栏
     */
    const rightTooltipIconOptions = [
+      {
+        name: 'search',
+        size: 18,
+        tooltip: 'LayoutHeaderTooltipOptions.Search',
+        eventKey: 'search',
+      },
      {
        name: 'fullscreen',
        size: 18,
@ -103,6 +112,9 @@ const SiderBar = defineComponent({
          window.$message.warning('您的浏览器不支持全屏~')
        }
      },
+      search: () => {
+        globalSearchShown.value = true
+      },
    }

    const handleIconClick = (key: IconEventMap) => {
@ -137,11 +149,13 @@ const SiderBar = defineComponent({
      spaceItemStyle,
      drawerPlacement,
      breadcrumbSwitch,
+      globalSearchShown,
    }
  },
  render() {
    return (
      <NLayoutHeader class="layout-header" bordered>
+        <GlobalSeach v-model:show={this.globalSearchShown} />
        <NSpace
          class="layout-header__method"
          align="center"
--- a/src/layout/index.scss
+++ b/src/layout/index.scss
@ -8,6 +8,14 @@
  & .layout-content__router-view {
    height: var(--layout-content-height);
    padding: calc($layoutRouterViewContainer / 2);
+
+    & .n-scrollbar-container {
+      height: 100%;
+
+      & .n-scrollbar-content {
+        height: 100%;
+      }
+    }
  }

  & .layout-footer {
--- a/src/spin/index.tsx
+++ b/src/spin/index.tsx
@ -9,6 +9,23 @@
 * @remark 今天也是元气满满撸代码的一天
 */

+/**
+ *
+ * 全屏加载效果
+ *
+ * 基于 Naive UI Spin 组件
+ *
+ * 使用方法
+ *   1. import { useSpin } from '@/spin'
+ *   2. useSpin(true) | useSpin(false)
+ *
+ * 仅需按照上述步骤实现全屏加载动画
+ *
+ * 注意
+ *   1. 该组件为全屏加载动画效果, 其遮罩会导致页面元素不可被命中
+ *   2. 如果需要使用该组件请注意控制取消时机
+ */
+
 import { NSpin } from 'naive-ui'

 import { spinProps } from 'naive-ui'
@ -38,30 +55,10 @@ const GlobalSpin = defineComponent({
        show={this.spinValue}
        themeOverrides={this.overrides}
      >
-        {{
-          default: () => this.$slots.default?.(),
-          description: () => 'loading...',
-        }}
+        {{ ...this.$slots }}
      </NSpin>
    )
  },
 })

 export default GlobalSpin
-
-/**
- *
- * 全屏加载效果
- *
- * 基于 Naive UI Spin 组件
- *
- * 使用方法
- *   1. import { useSpin } from '@/spin'
- *   2. useSpin(true) | useSpin(false)
- *
- * 仅需按照上述步骤实现全屏加载动画
- *
- * 注意
- *   1. 该组件为全屏加载动画效果, 其遮罩会导致页面元素不可被命中
- *   2. 如果需要使用该组件请注意控制取消时机
- */
--- a/src/store/modules/menu/index.ts
+++ b/src/store/modules/menu/index.ts
@ -167,31 +167,25 @@ export const useMenu = defineStore(
      /** 取出所有 layout 下子路由 */
      const layout = router.getRoutes().find((route) => route.name === 'layout')

-      const resolveRoutes = (routes: IMenuOptions[], index: number) => {
-        return routes.map((curr) => {
-          if (curr.children?.length) {
-            curr.children = resolveRoutes(curr.children, index++)
-          }
+      const resolveOption = (option: IMenuOptions) => {
+        const { meta } = option

-          const { meta } = curr
        /** 设置 label, i18nKey 优先级最高 */
        const label = computed(() =>
          meta?.i18nKey
            ? t(`GlobalMenuOptions.${meta!.i18nKey}`)
            : meta?.noLocalTitle,
        )
-
        /** 拼装菜单项 */
        const route = {
-            ...curr,
-            key: curr.path,
+          ...option,
+          key: option.path,
          label: () =>
            h(NEllipsis, null, {
              default: () => label.value,
            }),
          breadcrumbLabel: label.value,
        } as IMenuOptions
-
        /** 是否有 icon */
        const expandIcon = {
          icon: () =>
@ -204,22 +198,36 @@ export const useMenu = defineStore(
              {},
            ),
        }
-
        const attr: IMenuOptions = meta?.icon
          ? Object.assign({}, route, expandIcon)
          : route

-          if (curr.path === cacheMenuKey) {
+        if (option.path === cacheMenuKey) {
          /** 设置菜单标签 */
          setMenuTagOptions(attr)
          /** 设置浏览器标题 */
          updateDocumentTitle(attr)
        }

-          attr.show = validRole(curr)
+        attr.show = validRole(option)

        return attr
-        })
+      }
+
+      const resolveRoutes = (routes: IMenuOptions[], index: number) => {
+        const catchArr: IMenuOptions[] = []
+
+        for (const curr of routes) {
+          if (curr.children?.length && validRole(curr)) {
+            curr.children = resolveRoutes(curr.children, index++)
+          } else if (!validRole(curr)) {
+            continue
+          }
+
+          catchArr.push(resolveOption(curr))
+        }
+
+        return catchArr
      }

      /** 缓存菜单列表 */
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@ -1,6 +1,7 @@
 import { getDefaultLocal } from '@/language/index'
 import { setCache } from '@use-utils/cache'
 import { set } from 'lodash-es'
+import { addClass, removeClass, colorToRgba } from '@/utils/element'

 import type { ConditionalPick } from '@/types/type-utils'
 import type { GlobalThemeOverrides } from 'naive-ui'
@ -14,12 +15,15 @@ interface SettingState {
  spinSwitch: boolean
  breadcrumbSwitch: boolean
  localeLanguage: string
+  invertSwitch: boolean
 }

 export const useSetting = defineStore(
  'setting',
  () => {
-    const { primaryColor } = __APP_CFG__
+    const {
+      appPrimaryColor: { primaryColor },
+    } = __APP_CFG__ // 默认主题色
    const { locale } = useI18n()

    const settingState = reactive<SettingState>({
@ -34,6 +38,7 @@ export const useSetting = defineStore(
      reloadRouteSwitch: true, // 刷新路由开关
      menuTagSwitch: true, // 多标签页开关
      spinSwitch: false, // 全屏加载
+      invertSwitch: false, // 反转色模式
      breadcrumbSwitch: true, // 面包屑开关
      localeLanguage: getDefaultLocal(),
    })
@ -58,6 +63,10 @@ export const useSetting = defineStore(

      /** 设置主题色变量 */
      body.style.setProperty('--ray-theme-primary-color', value)
+      body.style.setProperty(
+        '--ray-theme-primary-fade-color',
+        colorToRgba(value, 0.25),
+      )
    }

    /**
@ -79,6 +88,17 @@ export const useSetting = defineStore(
      }
    }

+    /** 动态添加反转色 class name */
+    watch(
+      () => settingState.invertSwitch,
+      (newData) => {
+        const body = document.body
+        const className = 'ray-template--invert'
+
+        newData ? addClass(body, className) : removeClass(body, className)
+      },
+    )
+
    return {
      ...toRefs(settingState),
      updateLocale,
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@ -49,3 +49,7 @@ body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
+
+body.ray-template--invert {
+  filter: invert(1);
+}
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@ -6,6 +6,5 @@

 $iconSpace: 5px;
 $width: 140px;
-$activedColor: #2d8cf0;
 $hoverLightBackgroundColor: rgba(45, 140, 240, 0.1);
 $hoverDarkBackgroundColor: rgba(45, 140, 240, 0.15);
--- a/src/types/cfg.ts
+++ b/src/types/cfg.ts
@ -31,6 +31,11 @@ export interface PreloadingConfig {
  titleColor?: string
 }

+export interface AppPrimaryColor {
+  primaryColor: string
+  primaryFadeColor: string
+}
+
 export interface Config {
  server: ServerOptions
  buildOptions: (mode: string) => BuildOptions
@ -40,9 +45,9 @@ export interface Config {
  sideBarLogo?: LayoutSideBarLogo
  mixinCSS?: string
  rootRoute?: RootRoute
-  primaryColor?: string
  preloadingConfig?: PreloadingConfig
  base?: string
+  appPrimaryColor?: AppPrimaryColor
 }

 export type Recordable<T = unknown> = Record<string, T>
@ -68,6 +73,7 @@ export interface AppConfig {
  rootRoute: RootRoute
  primaryColor: string
  base?: string
+  appPrimaryColor: AppPrimaryColor
 }

 export type AppConfigExport = Config & UserConfigExport
--- a/src/utils/element.ts
+++ b/src/utils/element.ts
@ -174,3 +174,43 @@ export const removeStyle = (el: HTMLElement, styles: string[]) => {
    })
  }
 }
+
+/**
+ *
+ * @param color 颜色格式
+ * @param alpha 透明度
+ * @returns 转换后的 rgba 颜色值
+ *
+ * @remark 将任意颜色值转为 rgba
+ */
+export const colorToRgba = (color: string, alpha = 1) => {
+  const hexPattern = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i
+  const rgbPattern = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/i
+  const rgbaPattern =
+    /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d*(?:\.\d+)?)\)$/i
+
+  let result: string
+
+  if (hexPattern.test(color)) {
+    const hex = color.substring(1)
+    const rgb = [
+      parseInt(hex.substring(0, 2), 16),
+      parseInt(hex.substring(2, 4), 16),
+      parseInt(hex.substring(4, 6), 16),
+    ]
+
+    result = 'rgb(' + rgb.join(', ') + ')'
+  } else if (rgbPattern.test(color)) {
+    result = color
+  } else if (rgbaPattern.test(color)) {
+    result = color
+  } else {
+    result = ''
+  }
+
+  if (result && !result.startsWith('rgba')) {
+    result = result.replace('rgb', 'rgba').replace(')', `, ${alpha})`)
+  }
+
+  return result
+}
--- a/src/views/echart/index.tsx
+++ b/src/views/echart/index.tsx
@ -1,18 +1,6 @@
 import './index.scss'

-import {
-  NCard,
-  NSwitch,
-  NLayout,
-  NDescriptions,
-  NDescriptionsItem,
-  NTag,
-  NSpace,
-  NP,
-  NH6,
-  NH2,
-  NH3,
-} from 'naive-ui'
+import { NCard, NSwitch, NSpace, NP, NH6, NH2, NH3 } from 'naive-ui'
 import RayChart from '@/components/RayChart/index'

 const Echart = defineComponent({
@ -21,6 +9,9 @@ const Echart = defineComponent({
    const baseChartRef = ref()
    const chartLoading = ref(false)
    const chartAria = ref(false)
+    const state = reactive({
+      loading: false,
+    })

    const baseOptions = {
      legend: {},
@ -177,11 +168,7 @@ const Echart = defineComponent({
    }

    const handleLoadingShow = (bool: boolean) => {
-      if (baseChartRef.value) {
-        const { echartInstance } = baseChartRef.value
-
-        bool ? echartInstance.showLoading() : echartInstance.hideLoading()
-      }
+      state.loading = bool
    }

    const handleAriaShow = (bool: boolean) => {
@ -208,6 +195,7 @@ const Echart = defineComponent({
      handleChartRenderSuccess,
      basePieOptions,
      baseLineOptions,
+      ...toRefs(state),
    }
  },
  render() {
@ -254,7 +242,7 @@ const Echart = defineComponent({
          }}
        </NSwitch>
        <div class="chart--container">
-          <RayChart ref="baseChartRef" options={this.baseOptions} />
+          <RayChart loading={this.loading} options={this.baseOptions} />
        </div>
        <NH2>贴画可视化图</NH2>
        <NSwitch
--- a/vite.config.ts
+++ b/vite.config.ts
@ -33,7 +33,7 @@ const {
  sideBarLogo,
  mixinCSS,
  rootRoute,
-  primaryColor,
+  appPrimaryColor,
  preloadingConfig,
  base,
 } = config
@ -55,7 +55,7 @@ const __APP_CFG__ = {
    sideBarLogo,
  },
  rootRoute,
-  primaryColor,
+  appPrimaryColor,
 }

 // https://vitejs.dev/config/
@ -132,6 +132,7 @@ export default defineConfig(async ({ mode }) => {
      }),
      ViteEjsPlugin({
        preloadingConfig,
+        appPrimaryColor,
      }),
    ],
    optimizeDeps: {