v3.1.7

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
 

cfg.ts

@@ -55,8 +55,13 @@ const config: AppConfigExport = {
     tagColor: '#ff6700',
     titleColor: '#2d8cf0',
   },
-  /** 默认主题色 */
+  /** 默认主题色(不可省略, 必填), 也用于 ejs 注入 */
-  primaryColor: '#2d8cf0',
+  appPrimaryColor: {
+    /** 主题色 */
+    primaryColor: '#2d8cf0',
+    /** 主题辅助色(用于整体 hover、active 等之类颜色) */
+    primaryFadeColor: 'rgba(45, 140, 240, 0.25)',
+  },
   /**
    *
    * 配置根页面

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 {

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",

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": "注册",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": true,
-  "version": "3.1.6",
+  "version": "3.1.7",
   "type": "module",
   "scripts": {
     "dev": "vite",

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 配置 */

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` 方法注入数据

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);
       }
     }
 

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);
     }
   }
 }

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` 作为图标使用

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>

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)}

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;
+      }
+    }
+  }
+}

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

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>

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"

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 {

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

src/store/modules/menu/index.ts

@@ -167,59 +167,67 @@ export const useMenu = defineStore(
       /** 取出所有 layout 下子路由 */
       const layout = router.getRoutes().find((route) => route.name === 'layout')
 
+      const resolveOption = (option: IMenuOptions) => {
+        const { meta } = option
+
+        /** 设置 label, i18nKey 优先级最高 */
+        const label = computed(() =>
+          meta?.i18nKey
+            ? t(`GlobalMenuOptions.${meta!.i18nKey}`)
+            : meta?.noLocalTitle,
+        )
+        /** 拼装菜单项 */
+        const route = {
+          ...option,
+          key: option.path,
+          label: () =>
+            h(NEllipsis, null, {
+              default: () => label.value,
+            }),
+          breadcrumbLabel: label.value,
+        } as IMenuOptions
+        /** 是否有 icon */
+        const expandIcon = {
+          icon: () =>
+            h(
+              RayIcon,
+              {
+                name: meta!.icon as string,
+                size: 20,
+              },
+              {},
+            ),
+        }
+        const attr: IMenuOptions = meta?.icon
+          ? Object.assign({}, route, expandIcon)
+          : route
+
+        if (option.path === cacheMenuKey) {
+          /** 设置菜单标签 */
+          setMenuTagOptions(attr)
+          /** 设置浏览器标题 */
+          updateDocumentTitle(attr)
+        }
+
+        attr.show = validRole(option)
+
+        return attr
+      }
+
       const resolveRoutes = (routes: IMenuOptions[], index: number) => {
-        return routes.map((curr) => {
+        const catchArr: IMenuOptions[] = []
-          if (curr.children?.length) {
+
+        for (const curr of routes) {
+          if (curr.children?.length && validRole(curr)) {
             curr.children = resolveRoutes(curr.children, index++)
+          } else if (!validRole(curr)) {
+            continue
           }
 
-          const { meta } = curr
+          catchArr.push(resolveOption(curr))
-          /** 设置 label, i18nKey 优先级最高 */
+        }
-          const label = computed(() =>
-            meta?.i18nKey
-              ? t(`GlobalMenuOptions.${meta!.i18nKey}`)
-              : meta?.noLocalTitle,
-          )
 
-          /** 拼装菜单项 */
+        return catchArr
-          const route = {
-            ...curr,
-            key: curr.path,
-            label: () =>
-              h(NEllipsis, null, {
-                default: () => label.value,
-              }),
-            breadcrumbLabel: label.value,
-          } as IMenuOptions
-
-          /** 是否有 icon */
-          const expandIcon = {
-            icon: () =>
-              h(
-                RayIcon,
-                {
-                  name: meta!.icon as string,
-                  size: 20,
-                },
-                {},
-              ),
-          }
-
-          const attr: IMenuOptions = meta?.icon
-            ? Object.assign({}, route, expandIcon)
-            : route
-
-          if (curr.path === cacheMenuKey) {
-            /** 设置菜单标签 */
-            setMenuTagOptions(attr)
-            /** 设置浏览器标题 */
-            updateDocumentTitle(attr)
-          }
-
-          attr.show = validRole(curr)
-
-          return attr
-        })
       }
 
       /** 缓存菜单列表 */

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,

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);
+}

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);

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

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
+}

src/views/echart/index.tsx

@@ -1,18 +1,6 @@
 import './index.scss'
 
-import {
+import { NCard, NSwitch, NSpace, NP, NH6, NH2, NH3 } from 'naive-ui'
-  NCard,
-  NSwitch,
-  NLayout,
-  NDescriptions,
-  NDescriptionsItem,
-  NTag,
-  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) {
+      state.loading = bool
-        const { echartInstance } = baseChartRef.value
-
-        bool ? echartInstance.showLoading() : echartInstance.hideLoading()
-      }
     }
 
     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

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: {