From c179929e164f479c9be2103b12d6336c205f57ed Mon Sep 17 00:00:00 2001 From: ray_wuhao <443547225@qq.com> Date: Mon, 17 Apr 2023 12:37:25 +0800 Subject: [PATCH] v3.1.7 --- CHANGELOG.md | 17 ++ cfg.ts | 9 +- index.html | 2 + locales/en-US.json | 6 +- locales/zh-CN.json | 6 +- package.json | 2 +- src/App.tsx | 16 -- src/components/RayChart/index.tsx | 30 ++- .../src/components/TableSetting/index.scss | 2 +- .../src/components/TableSize/index.scss | 4 +- src/icons/AA_READMEmd | 17 ++ src/icons/search.svg | 6 + src/layout/components/MenuTag/index.tsx | 11 +- .../Components/GlobalSeach/index.scss | 89 ++++++++ .../SiderBar/Components/GlobalSeach/index.tsx | 208 ++++++++++++++++++ .../Components/SettingDrawer/index.tsx | 18 +- src/layout/components/SiderBar/index.tsx | 14 ++ src/layout/index.scss | 8 + src/spin/index.tsx | 39 ++-- src/store/modules/menu/index.ts | 104 +++++---- src/store/modules/setting.ts | 22 +- src/styles/base.scss | 4 + src/styles/theme.scss | 1 - src/types/cfg.ts | 8 +- src/utils/element.ts | 40 ++++ src/views/echart/index.tsx | 26 +-- vite.config.ts | 5 +- 27 files changed, 586 insertions(+), 128 deletions(-) create mode 100644 src/icons/AA_READMEmd create mode 100644 src/icons/search.svg create mode 100644 src/layout/components/SiderBar/Components/GlobalSeach/index.scss create mode 100644 src/layout/components/SiderBar/Components/GlobalSeach/index.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 94cd5ea5..72a7349d 100644 --- 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 diff --git a/cfg.ts b/cfg.ts index 2e38e669..c3113cac 100644 --- a/cfg.ts +++ b/cfg.ts @@ -55,8 +55,13 @@ const config: AppConfigExport = { tagColor: '#ff6700', titleColor: '#2d8cf0', }, - /** 默认主题色 */ - primaryColor: '#2d8cf0', + /** 默认主题色(不可省略, 必填), 也用于 ejs 注入 */ + appPrimaryColor: { + /** 主题色 */ + primaryColor: '#2d8cf0', + /** 主题辅助色(用于整体 hover、active 等之类颜色) */ + primaryFadeColor: 'rgba(45, 140, 240, 0.25)', + }, /** * * 配置根页面 diff --git a/index.html b/index.html index 8041a841..b5fa5c4e 100644 --- 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 { diff --git a/locales/en-US.json b/locales/en-US.json index a503ac0f..af08fd55 100644 --- 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", diff --git a/locales/zh-CN.json b/locales/zh-CN.json index 51085b1d..1a77f172 100644 --- 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": "注册", diff --git a/package.json b/package.json index 7a1cee4a..2845845a 100644 --- 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", diff --git a/src/App.tsx b/src/App.tsx index 8436c983..c5754090 100644 --- 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 配置 */ diff --git a/src/components/RayChart/index.tsx b/src/components/RayChart/index.tsx index 92e49292..622577ea 100644 --- 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, + default: () => loadingOptions(), + }, }, setup(props) { const settingStore = useSetting() @@ -196,7 +205,7 @@ const RayChart = defineComponent({ const rayChartRef = ref() // `echart` 容器实例 const echartInstanceRef = ref() // `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` 方法注入数据 diff --git a/src/components/RayTable/src/components/TableSetting/index.scss b/src/components/RayTable/src/components/TableSetting/index.scss index b0f3a0e0..d7483125 100644 --- 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); } } diff --git a/src/components/RayTable/src/components/TableSize/index.scss b/src/components/RayTable/src/components/TableSize/index.scss index 2968e449..9e705b53 100644 --- 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); } } } diff --git a/src/icons/AA_READMEmd b/src/icons/AA_READMEmd new file mode 100644 index 00000000..5ffe5148 --- /dev/null +++ b/src/icons/AA_READMEmd @@ -0,0 +1,17 @@ +## 说明 + +该文件包属于全局 `svg icon`，配合 `RayIcon` 组件使用。 + +## TIP + +添加新的 `svg` 图标时，应该注意图标自带 `fill` 属性的管理。如果自带了 `fill` 属性的图标，则会导致使用组件 `color` 属性失效的问题。所以如果是需要动态使用 `css` 属性控制样式的图标，应该去掉其 `fill` 属性或者配置为 `fill = currentColor`。 + +```html + +``` + +## 使用方法 + +- 导入 `svg` 图标 +- 命名（`命名必须全局唯一，并且尽量避免使用特殊符号`） +- 导入 `RayIcon` 组件，配置 `name` 属性即可将 `svg` 作为图标使用 diff --git a/src/icons/search.svg b/src/icons/search.svg new file mode 100644 index 00000000..d1952363 --- /dev/null +++ b/src/icons/search.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/src/layout/components/MenuTag/index.tsx b/src/layout/components/MenuTag/index.tsx index 748ff299..7d3e8250 100644 --- 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)} diff --git a/src/layout/components/SiderBar/Components/GlobalSeach/index.scss b/src/layout/components/SiderBar/Components/GlobalSeach/index.scss new file mode 100644 index 00000000..b7898ddb --- /dev/null +++ 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; + } + } + } +} diff --git a/src/layout/components/SiderBar/Components/GlobalSeach/index.tsx b/src/layout/components/SiderBar/Components/GlobalSeach/index.tsx new file mode 100644 index 00000000..189344dc --- /dev/null +++ b/src/layout/components/SiderBar/Components/GlobalSeach/index.tsx @@ -0,0 +1,208 @@ +/** + * + * @author 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 ( + +
+
+
+
+ + {{ + prefix: () => , + }} + +
+ + + {this.searchOptions.map((curr) => ( + +
+ {curr?.meta?.icon ? ( + + ) : ( + + )} +
+
+ {curr.breadcrumbLabel} +
+ + ))} + + +
+ + {this.tiptextOptions.map((curr) => ( +
+
+ {curr.plain ? ( + {curr.icon} + ) : ( + + )} +
+
{curr.label}
+
+ ))} + +
+
+
+
+ + ) + }, +}) + +export default GlobalSeach diff --git a/src/layout/components/SiderBar/Components/SettingDrawer/index.tsx b/src/layout/components/SiderBar/Components/SettingDrawer/index.tsx index 10de9919..382cb613 100644 --- 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)} /> - 界面显示 + + {t('LayoutHeaderSettingOptions.InterfaceDisplay')} + - + @@ -101,7 +105,7 @@ const SettingDrawer = defineComponent({ } /> - + @@ -109,6 +113,14 @@ const SettingDrawer = defineComponent({ } /> + + + this.changeSwitcher(bool, 'invertSwitch') + } + /> + diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx index 55543c3d..34d952d6 100644 --- 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 ( + - {{ - default: () => this.$slots.default?.(), - description: () => 'loading...', - }} + {{ ...this.$slots }} ) }, }) export default GlobalSpin - -/** - * - * 全屏加载效果 - * - * 基于 Naive UI Spin 组件 - * - * 使用方法 - * 1. import { useSpin } from '@/spin' - * 2. useSpin(true) | useSpin(false) - * - * 仅需按照上述步骤实现全屏加载动画 - * - * 注意 - * 1. 该组件为全屏加载动画效果, 其遮罩会导致页面元素不可被命中 - * 2. 如果需要使用该组件请注意控制取消时机 - */ diff --git a/src/store/modules/menu/index.ts b/src/store/modules/menu/index.ts index 0e559aaf..99bc4785 100644 --- a/src/store/modules/menu/index.ts +++ b/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) => { - if (curr.children?.length) { + 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 } - const { meta } = curr - /** 设置 label, i18nKey 优先级最高 */ - const label = computed(() => - meta?.i18nKey - ? t(`GlobalMenuOptions.${meta!.i18nKey}`) - : meta?.noLocalTitle, - ) + catchArr.push(resolveOption(curr)) + } - /** 拼装菜单项 */ - 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 - }) + return catchArr } /** 缓存菜单列表 */ diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts index b6bdae6a..a4a74b66 100644 --- 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({ @@ -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, diff --git a/src/styles/base.scss b/src/styles/base.scss index 2cd59438..26d35043 100644 --- 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); +} diff --git a/src/styles/theme.scss b/src/styles/theme.scss index dced985b..53269eb2 100644 --- 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); diff --git a/src/types/cfg.ts b/src/types/cfg.ts index 0e4194b6..41352b51 100644 --- 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 = Record @@ -68,6 +73,7 @@ export interface AppConfig { rootRoute: RootRoute primaryColor: string base?: string + appPrimaryColor: AppPrimaryColor } export type AppConfigExport = Config & UserConfigExport diff --git a/src/utils/element.ts b/src/utils/element.ts index 69821f0b..69150404 100644 --- 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 +} diff --git a/src/views/echart/index.tsx b/src/views/echart/index.tsx index 9d519596..a65795e0 100644 --- 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({ }}
- +
贴画可视化图 { }), ViteEjsPlugin({ preloadingConfig, + appPrimaryColor, }), ], optimizeDeps: {