diff --git a/.eslintignore b/.eslintignore index 19cbffed..1548840c 100644 --- a/.eslintignore +++ b/.eslintignore @@ -8,7 +8,6 @@ public yarn.* vite-env.* .prettierrc.* -.eslintrc visualizer.* visualizer.html .env.* diff --git a/CHANGELOG.md b/CHANGELOG.md index 6305b8d8..d19d8807 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,11 +8,17 @@ - 修改路由菜单显示、隐藏逻辑，现在仅会针对权限的验证匹配选择是否加入菜单列表中 - 更新 setupAppMenu 方法触发时机（Layout => menu store），现在将在 pinia menu store 初始化时触发 App Menu 更新 - 更新了 utils 包中的一些方法，进行了一些重写和重命名 +- GlobalSearch 组件支持上下按键切换、回车键选择 +- 整合 router 模块的一些包，让它看起来更合理一点 +- 剔除 styles 包中一些不合理的样式模块 +- 补充了一些注释与说明文档 ### Fixes - 修复不能正确渲染浏览器标题问题 - 修复初始化模板菜单函数与菜单更新函数重复执行一些方法的问题 +- 修复指令示例变量绑定错误导致示例错误问题 +- 修复路由白名单失效 bug ## 4.0.1 diff --git a/cfg.ts b/cfg.ts index 9ec373fd..01d41f59 100644 --- a/cfg.ts +++ b/cfg.ts @@ -74,7 +74,6 @@ const config: AppConfigExport = { mixinCSS: mixinCSSPlugin([ './src/styles/mixins.scss', './src/styles/setting.scss', - './src/styles/theme.scss', ]), /** * diff --git a/src/App.tsx b/src/App.tsx index a0dd9d3e..bc602e83 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -27,21 +27,23 @@ const App = defineComponent({ const primaryColorOverride = getStorage( 'piniaSettingStore', 'localStorage', - primaryColor, ) - const _p = get( - primaryColorOverride as SettingState, - 'primaryColorOverride.common.primaryColor', - primaryColor, - ) - const _fp = colorToRgba(_p, 0.3) - /** 设置全局主题色 css 变量 */ - body.style.setProperty('--ray-theme-primary-color', _p) - body.style.setProperty( - '--ray-theme-primary-fade-color', - _fp || primaryFadeColor, - ) + if (primaryColorOverride) { + const _p = get( + primaryColorOverride, + 'primaryColorOverride.common.primaryColor', + primaryColor, + ) + const _fp = colorToRgba(_p, 0.3) + + /** 设置全局主题色 css 变量 */ + body.style.setProperty('--ray-theme-primary-color', _p) + body.style.setProperty( + '--ray-theme-primary-fade-color', + _fp || primaryFadeColor, + ) + } } /** 隐藏加载动画 */ diff --git a/src/appConfig/regConfig.ts b/src/appConfig/regexConfig.ts similarity index 100% rename from src/appConfig/regConfig.ts rename to src/appConfig/regexConfig.ts diff --git a/src/appConfig/routerConfig.ts b/src/appConfig/routerConfig.ts index b4258828..49b62053 100644 --- a/src/appConfig/routerConfig.ts +++ b/src/appConfig/routerConfig.ts @@ -17,6 +17,16 @@ import type { LayoutInst } from 'naive-ui' * * 内容区域 ref 注册 * 可以控制内容区域当前滚动位置 + * 如果你需要在切换路由时候配置自定义滚动到某个视图区域时, 可以使用该属性提供的方法(scrollTo) + * + * 请注意 + * 如果你动态的添加了某个属性后, 希望控制滚动条滚动到某个区域时, 应该注意 dom 挂载后再执行该方法 + * @example + * ```ts + * nextTick().then(() => { + * LAYOUT_CONTENT_REF.value?.scrollTo() + * }) + * ``` */ export const LAYOUT_CONTENT_REF = ref() @@ -33,15 +43,9 @@ export const SETUP_ROUTER_GUARD = true * 路由表单白名单 * * 如果需要启用该功能, 则需要配置路由 name 属性, 并且需要一一对应(对大小写敏感) - * 如果未设置, 则不会生效 - * - * 配置该路由白名单列表后, 则不会对配置中的路由列表进行鉴权处理(配合 basic.ts 中的方法进行使用) - * - * 配置动态路由菜单 - * 可以根据权限与白名单进行过滤, 但是 meta hidden 属性拥有最高的控制权限 - * 如果 mete hidden 设置为 false 则永远不会显示菜单选项 + * 并且在配置 route name 属性时, 如果 name 类型为 symbol 的话, 会认为该路由永远不与白名单列表进行匹配 */ -export const WHITE_ROUTES = ['RLogin', 'ErrorPage', 'RayTemplateDoc'] +export const WHITE_ROUTES: string[] = ['RLogin', 'ErrorPage', 'RayTemplateDoc'] /** * diff --git a/src/axios/inject/requestInject.ts b/src/axios/inject/request/provide.ts similarity index 100% rename from src/axios/inject/requestInject.ts rename to src/axios/inject/request/provide.ts diff --git a/src/axios/inject/responseInject.ts b/src/axios/inject/response/provide.ts similarity index 100% rename from src/axios/inject/responseInject.ts rename to src/axios/inject/response/provide.ts diff --git a/src/axios/instance.ts b/src/axios/instance.ts index 56d7663d..5f717cf1 100644 --- a/src/axios/instance.ts +++ b/src/axios/instance.ts @@ -22,11 +22,11 @@ import { useAxiosInterceptor, axiosCanceler } from '@/axios/helper/interceptor' import { setupResponseInterceptor, setupResponseErrorInterceptor, -} from '@/axios/inject/responseInject' +} from '@/axios/inject/response/provide' import { setupRequestInterceptor, setupRequestErrorInterceptor, -} from '@/axios/inject/requestInject' +} from '@/axios/inject/request/provide' import type { AxiosInstanceExpand } from './type' diff --git a/src/components/RayTable/src/components/TableSetting/index.scss b/src/components/RayTable/src/components/TableSetting/index.scss index f70b1f40..3bae6b52 100644 --- a/src/components/RayTable/src/components/TableSetting/index.scss +++ b/src/components/RayTable/src/components/TableSetting/index.scss @@ -47,7 +47,7 @@ & .draggable-item__d--icon, & .draggable-item__icon { - padding: $iconSpace; + padding: 5px; outline: none; border: none; } diff --git a/src/layout/components/MenuTag/index.tsx b/src/layout/components/MenuTag/index.tsx index 3f7fff0c..df87d860 100644 --- a/src/layout/components/MenuTag/index.tsx +++ b/src/layout/components/MenuTag/index.tsx @@ -33,7 +33,7 @@ import { uuid } from '@/utils/hook' import { hasClass } from '@/utils/element' import { redirectRouterToDashboard } from '@/router/helper/routerCopilot' import { ROOT_ROUTE } from '@/appConfig/appConfig' -import { getElements } from '@use-utils/element' +import { queryElements } from '@use-utils/element' import type { MenuOption, ScrollbarInst } from 'naive-ui' import type { MenuTagOptions, AppMenuOption } from '@/types/modules/app' @@ -381,7 +381,7 @@ const MenuTag = defineComponent({ /** 动态更新 menu tag 所在位置 */ const positionMenuTag = () => { nextTick().then(() => { - const tags = getElements( + const tags = queryElements( `attr:${MENU_TAG_DATA}="${menuKey.value}"`, ) diff --git a/src/layout/components/SiderBar/Components/GlobalSeach/index.scss b/src/layout/components/SiderBar/Components/GlobalSeach/index.scss index cb994426..95592308 100644 --- a/src/layout/components/SiderBar/Components/GlobalSeach/index.scss +++ b/src/layout/components/SiderBar/Components/GlobalSeach/index.scss @@ -75,6 +75,7 @@ $globalSearchWidth: 650px; & .global-seach__card-content .content-item { background-color: #2f2f2f; + &.content-item--active, &:hover { background-color: var(--ray-theme-primary-fade-color); } @@ -91,6 +92,7 @@ $globalSearchWidth: 650px; & .global-seach__card-content .content-item { background-color: #ffffff; + &.content-item--active, &:hover { background-color: var(--ray-theme-primary-fade-color); } diff --git a/src/layout/components/SiderBar/Components/GlobalSeach/index.tsx b/src/layout/components/SiderBar/Components/GlobalSeach/index.tsx index 284ddf5a..69b33eb4 100644 --- a/src/layout/components/SiderBar/Components/GlobalSeach/index.tsx +++ b/src/layout/components/SiderBar/Components/GlobalSeach/index.tsx @@ -14,12 +14,11 @@ import './index.scss' import { NInput, NModal, NResult, NScrollbar, NSpace } from 'naive-ui' import RayIcon from '@/components/RayIcon/index' -import { on, off } from '@/utils/element' +import { on, off, queryElements, addClass, removeClass } from '@/utils/element' import { debounce } from 'lodash-es' import { useMenu } from '@/store' import { validMenuItemShow } from '@/router/helper/routerCopilot' -import type { MenuOption } from 'naive-ui' import type { AppRouteMeta } from '@/router/type' import type { AppMenuOption } from '@/types/modules/app' @@ -42,8 +41,7 @@ const GlobalSeach = defineComponent({ emit('update:show', val) if (!val) { - state.searchOptions = [] - state.searchValue = null + resetSearchSomeValue() } }, }) @@ -52,27 +50,44 @@ const GlobalSeach = defineComponent({ searchValue: null, searchOptions: [] as AppMenuOption[], }) - const tiptextOptions = [ { icon: 'cmd / ctrl + k', label: '唤起', plain: true, }, + { + icon: '↑ ↓', + label: '切换', + plain: true, + }, { icon: 'esc', label: '关闭', plain: true, }, ] + /** 初始化索引 */ + let searchElementIndex = 0 + /** 缓存索引 */ + let preSearchElementIndex = searchElementIndex + + /** 初始化一些值 */ + const resetSearchSomeValue = () => { + state.searchOptions = [] + state.searchValue = null + searchElementIndex = 0 + preSearchElementIndex = searchElementIndex + } /** 按下 ctrl + k 或者 command + k 激活搜索栏 */ - const registerKeyboard = (e: Event) => { - const _e = e as KeyboardEvent + const registerArouseKeyboard = (e: KeyboardEvent) => { + if ((e.ctrlKey || e.metaKey) && e.key === 'k') { + e.preventDefault() + e.stopPropagation() + resetSearchSomeValue() - if ((_e.ctrlKey || _e.metaKey) && _e.key === 'k') { modelShow.value = true - console.log(modelMenuOptions.value) } } @@ -107,18 +122,53 @@ const GlobalSeach = defineComponent({ } else { state.searchOptions = [] } + + nextTick().then(() => { + autoFouceSearchItem() + }) } const handleSearchItemClick = (option: AppMenuOption) => { - const meta = option.meta as AppRouteMeta + if (option) { + const { meta } = option - /** 如果配置站外跳转则不会关闭搜索框 */ - if (meta.windowOpen) { - window.open(meta.windowOpen) - } else { - modelShow.value = false + /** 如果配置站外跳转则不会关闭搜索框 */ + if (meta.windowOpen) { + window.open(meta.windowOpen) + } else { + modelShow.value = false - changeMenuModelValue(option.key, option) + changeMenuModelValue(option.key, option) + } + } + } + + /** 自动聚焦检索项 */ + const autoFouceSearchItem = () => { + const currentOption = state.searchOptions[searchElementIndex] + const preOption = state.searchOptions[preSearchElementIndex] + + if (currentOption) { + nextTick().then(() => { + const searchElementOptions = queryElements( + `attr:data_path="${currentOption.path}"`, + ) + const preSearchElementOptions = preOption + ? queryElements(`attr:data_path="${preOption?.path}"`) + : null + + if (preSearchElementOptions?.length) { + const [el] = preSearchElementOptions + + removeClass(el, 'content-item--active') + } + + if (searchElementOptions?.length) { + const [el] = searchElementOptions + + addClass(el, 'content-item--active') + } + }) } } @@ -135,12 +185,68 @@ const GlobalSeach = defineComponent({ } } + /** 注册按键: 上、下、回车 */ + const registerChangeSearchElementIndex = (e: KeyboardEvent) => { + const keyCode = e.key + + if (keyCode === 'ArrowUp' || keyCode === 'ArrowDown') { + e.preventDefault() + e.stopPropagation() + } + + preSearchElementIndex = searchElementIndex <= 0 ? 0 : searchElementIndex + + /** 更新索引 */ + const updateIndex = (type: 'up' | 'down') => { + if (type === 'up') { + searchElementIndex = + searchElementIndex - 1 < 0 ? 0 : searchElementIndex - 1 + } else if (type === 'down') { + searchElementIndex = + searchElementIndex + 1 >= state.searchOptions.length + ? state.searchOptions.length - 1 + : searchElementIndex + 1 + } + } + + switch (keyCode) { + case 'ArrowUp': + updateIndex('up') + + break + case 'ArrowDown': + updateIndex('down') + + break + case 'Enter': + // eslint-disable-next-line no-case-declarations + const option = state.searchOptions[searchElementIndex] + + if (option) { + handleSearchItemClick(option) + } + + break + + default: + break + } + + autoFouceSearchItem() + } + onMounted(() => { - on(window, 'keydown', registerKeyboard) + on(window, 'keydown', (e: Event) => { + registerArouseKeyboard(e as KeyboardEvent) + registerChangeSearchElementIndex(e as KeyboardEvent) + }) }) onBeforeUnmount(() => { - off(window, 'keydown', registerKeyboard) + off(window, 'keydown', (e: Event) => { + registerArouseKeyboard(e as KeyboardEvent) + registerChangeSearchElementIndex(e as KeyboardEvent) + }) }) return { @@ -180,6 +286,7 @@ const GlobalSeach = defineComponent({ class="content-item" {...{ onClick: this.handleSearchItemClick.bind(this, curr), + data_path: curr.path, }} >
diff --git a/src/locales/helper.ts b/src/locales/helper.ts index dcf44d8f..66f722a3 100644 --- a/src/locales/helper.ts +++ b/src/locales/helper.ts @@ -132,5 +132,5 @@ export const getAppDefaultLanguage = () => { SYSTEM_DEFAULT_LOCAL, ) - return language || SYSTEM_DEFAULT_LOCAL + return language } diff --git a/src/locales/index.ts b/src/locales/index.ts index 7b88d771..1901f192 100644 --- a/src/locales/index.ts +++ b/src/locales/index.ts @@ -25,9 +25,7 @@ import { createI18n } from 'vue-i18n' import { LOCAL_OPTIONS } from '@/appConfig/localConfig' -import { getAppDefaultLanguage } from '@/locales/helper' - -import { getAppLocalMessages } from '@/locales/helper' +import { getAppDefaultLanguage, getAppLocalMessages } from '@/locales/helper' import type { App } from 'vue' import type { I18n, I18nOptions } from 'vue-i18n' diff --git a/src/locales/lang/zh-CN/menu.json b/src/locales/lang/zh-CN/menu.json index 139029e8..6af1d92f 100644 --- a/src/locales/lang/zh-CN/menu.json +++ b/src/locales/lang/zh-CN/menu.json @@ -16,5 +16,5 @@ "Office_Spreadsheet": "表格", "CalculatePrecision": "数字精度", "Directive": "指令", - "RouterDemo": "平层路由详情" + "RouterDemo": "页面详情模式" } diff --git a/src/main.ts b/src/main.ts index 100b428f..57fec277 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,17 +1,17 @@ -import type { App as AppType } from 'vue' +import App from './App' import '@/styles/base.scss' import 'virtual:svg-icons-register' // `vite-plugin-svg-icons` 脚本, 如果不使用此插件注释即可 -import App from './App' - import { setupRouter } from './router/index' import { setupStore } from './store/index' import { setupI18n } from './locales/index' import { setupDayjs } from './dayjs/index' import { setupDirective } from './directives/index' +import type { App as AppType } from 'vue' + /** * * 普通应用注册方法 diff --git a/src/router/README.md b/src/router/README.md index 90cf3399..201d5866 100644 --- a/src/router/README.md +++ b/src/router/README.md @@ -1,5 +1,37 @@ ## router 拓展 +## 类型 + +```ts +interface RouteMeta { + order?: number + i18nKey: string + icon?: string + windowOpen?: string + role?: string[] + hidden?: boolean + noLocalTitle?: string | number + ignoreAutoResetScroll?: boolean + keepAlive?: boolean + sameLevel?: boolean +} +``` + +## 说明 + +``` +order: 菜单顺序，值越大越靠后。仅对顶层有效，子菜单该值无效 +i18nKey: i18n 国际化 key, 会优先使用该字段 +icon: icon 图标， 用于 Menu 菜单(依赖 RayIcon 组件实现) +windowOpen: 超链接打开（新开窗口打开） +role: 权限表 +hidden: 是否显示 +noLocalTitle: 不使用国际化渲染 Menu Titile +ignoreAutoResetScroll: 该页面内容区域自动初始化滚动条位置 +keepAlive: 是否缓存该页面（需要配置 APP_KEEP_ALIVE setupKeepAlive 属性为 true 启用才有效） +sameLevel: 是否标记该路由为平级模式，如果标记为平级模式，会使路由菜单项隐藏。如果在含有子节点处，设置了该属性，会导致子节点全部被隐藏。并且该模块，在后续的使用 url 地址导航跳转时，如果在非当前路由层级层面跳转的该路由，会在当前的面包屑后面追加该模块的信息，触发跳转时，不会修改面包屑、标签页 +``` + ### routerCopilot > 该文件提供了一些辅助方法，让你更方便的做一些事情。系统其他地方引用了该方法，所以删除需谨慎。 @@ -85,35 +117,3 @@ const transform = [ }, ] ``` - -## 类型 - -```ts -interface RouteMeta { - order?: number - i18nKey: string - icon?: string - windowOpen?: string - role?: string[] - hidden?: boolean - noLocalTitle?: string | number - ignoreAutoResetScroll?: boolean - keepAlive?: boolean - sameLevel?: boolean -} -``` - -## 说明 - -``` -order: 菜单顺序，值越大越靠后。仅对顶层有效，子菜单该值无效 -i18nKey: i18n 国际化 key, 会优先使用该字段 -icon: icon 图标， 用于 Menu 菜单(依赖 RayIcon 组件实现) -windowOpen: 超链接打开（新开窗口打开） -role: 权限表 -hidden: 是否显示 -noLocalTitle: 不使用国际化渲染 Menu Titile -ignoreAutoResetScroll: 该页面内容区域自动初始化滚动条位置 -keepAlive: 是否缓存该页面（需要配置 APP_KEEP_ALIVE setupKeepAlive 属性为 true 启用才有效） -sameLevel: 是否标记该路由为平级模式，如果标记为平级模式，会使路由菜单项隐藏。如果在含有子节点处，设置了该属性，会导致子节点全部被隐藏 -``` diff --git a/src/router/constant/index.ts b/src/router/constant/index.ts index 28bc3be2..25093f6b 100644 --- a/src/router/constant/index.ts +++ b/src/router/constant/index.ts @@ -4,6 +4,7 @@ * * 默认布局, 统一使用该组件管理右侧现实内容区域展示 * + * @example * 使用示例: * ``` * { diff --git a/src/router/helper/combine.ts b/src/router/helper/combine.ts deleted file mode 100644 index 12e35dcf..00000000 --- a/src/router/helper/combine.ts +++ /dev/null @@ -1,40 +0,0 @@ -/** - * - * @author Ray - * - * @date 2023-06-01 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -import type { AppRouteRecordRaw, RouteModules } from '@/router/type' - -/** - * - * @returns 所有路由模块 - * - * @remark 自动合并所有路由模块, 每一个 ts 文件都视为一个 route module 与 views 一一对应 - */ -export const combineRawRouteModules = () => { - const modulesFiles: RouteModules = import.meta.glob('../modules/**/*.ts', { - eager: true, - }) - - const modules = Object.keys(modulesFiles).reduce((modules, modulePath) => { - const route = modulesFiles[modulePath].default - - if (route) { - modules.push(route) - } else { - throw new Error( - 'router helper combine: an exception occurred while parsing the routing file!', - ) - } - - return modules - }, [] as AppRouteRecordRaw[]) - - return modules -} diff --git a/src/router/helper/helper.ts b/src/router/helper/helper.ts new file mode 100644 index 00000000..baf8ed50 --- /dev/null +++ b/src/router/helper/helper.ts @@ -0,0 +1,104 @@ +/** + * + * @author Ray + * + * @date 2023-07-04 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** + * + * helper 包入口 + * + * 该包一般是用于该模块一些处理的辅助方法 + * 通常不会用于其他地方 + * 如果有需要查看 router 模块的全局通用辅助方法可以查看 routerCopilot 包 + */ + +import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig' + +import type { RouteLocationNormalized } from 'vue-router' +import type { AppRouteRecordRaw, RouteModules } from '@/router/type' + +/** + * + * @returns 所有路由模块 + * + * @remark 自动合并所有路由模块, 每一个 ts 文件都视为一个 route module 与 views 一一对应 + */ +export const combineRawRouteModules = () => { + const modulesFiles: RouteModules = import.meta.glob('../modules/**/*.ts', { + eager: true, + }) + + const modules = Object.keys(modulesFiles).reduce((modules, modulePath) => { + const route = modulesFiles[modulePath].default + + if (route) { + modules.push(route) + } else { + throw new Error( + 'router helper combine: an exception occurred while parsing the routing file!', + ) + } + + return modules + }, [] as AppRouteRecordRaw[]) + + return modules +} + +/** + * + * @param routes 路由模块表(route 表) + * @returns 排序后的新路由表 + * + * @remark 必须配置 meta 属性, order 属性会影响页面菜单排序 + * + * 如果为配置 order 属性, 则会自动按照前合并路由的顺序前后排序 + * 如果 order 属性值相同, 则会按照路由名称进行排序 + */ +export const orderRoutes = (routes: AppRouteRecordRaw[]) => { + return routes.sort((curr, next) => { + const currOrder = curr.meta?.order ?? 1 + const nextOrder = next.meta?.order ?? 0 + + if (typeof currOrder !== 'number' || typeof nextOrder !== 'number') { + throw new Error('orderRoutes error: order must be a number!') + } + + if (currOrder === nextOrder) { + // 如果两个路由的 order 值相同，则按照路由名进行排序 + return curr.name + ? next.name + ? curr.name.localeCompare(next.name) + : -1 + : 1 + } + + return currOrder - nextOrder + }) +} + +/** + * + * 切换路由时, 手动将容器区域回归默认值 + * + * 由于官方不支持这个方法了, 所以自己手写了一个 + * 如果需要忽略恢复默认位置, 仅需要在 meta 中配置 ignoreAutoResetScroll 属性即可 + */ +export const scrollViewToTop = (route: RouteLocationNormalized) => { + const { meta } = route + + /** 这个 id 是注入在 layout 中 */ + if (!meta?.ignoreAutoResetScroll) { + LAYOUT_CONTENT_REF.value?.scrollTo({ + top: 0, + left: 0, + behavior: 'smooth', + }) + } +} diff --git a/src/router/helper/orderRoutes.ts b/src/router/helper/orderRoutes.ts deleted file mode 100644 index 95ba43fc..00000000 --- a/src/router/helper/orderRoutes.ts +++ /dev/null @@ -1,36 +0,0 @@ -/** - * - * @author Ray - * - * @date 2023-06-01 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -import type { AppRouteRecordRaw } from '@/router/type' - -/** - * - * @param routes 路由模块表(route 表) - * @returns 排序后的新路由表 - * - * @remark 必须配置 meta 属性, order 属性会影响页面菜单排序 - */ -export const orderRoutes = (routes: AppRouteRecordRaw[]) => { - return routes.sort((curr, next) => { - try { - const { - meta: { order: currOrder = 1 }, - } = curr - const { - meta: { order: nextOrder = 0 }, - } = next - - return currOrder - nextOrder - } catch (e) { - throw new Error('orderRoutes error: order must be number!') - } - }) -} diff --git a/src/router/helper/permission.ts b/src/router/helper/permission.ts index 733998c2..f608398b 100644 --- a/src/router/helper/permission.ts +++ b/src/router/helper/permission.ts @@ -23,7 +23,9 @@ import { getStorage } from '@/utils/cache' import { APP_CATCH_KEY, ROOT_ROUTE } from '@/appConfig/appConfig' import { redirectRouterToDashboard } from '@/router/helper/routerCopilot' +import { WHITE_ROUTES } from '@/appConfig/routerConfig' import { validRole } from '@/router/helper/routerCopilot' +import { isValueType } from '@/utils/hook' import type { Router, @@ -33,34 +35,58 @@ import type { import type { AppMenuOption } from '@/types/modules/app' import type { AppRouteMeta } from '@/router/type' +/** 路由守卫 */ export const permissionRouter = (router: Router) => { const { beforeEach } = router + const isToLogin = ( + to: RouteLocationNormalized, + from: RouteLocationNormalized, + ) => to.path === '/' || from.path === '/login' + beforeEach((to, from, next) => { const token = getStorage(APP_CATCH_KEY.token) - const route = getStorage( + const catchRoutePath = getStorage( 'menuKey', 'sessionStorage', ROOT_ROUTE.path, - ) as string - const { meta } = to + ) + const { meta, name } = to + /** 是否含有 token */ if (token !== null) { - if (validRole(meta as AppRouteMeta)) { - if (to.path === '/' || from.path === '/login') { - if (route !== 'no') { - next(route) + /** 是否在有 token 时去到登陆页 */ + if (isToLogin(to, from)) { + redirectRouterToDashboard(true) + } else { + /** 是否为白名单 */ + if ( + !isValueType(name, 'Symbol') && + name && + WHITE_ROUTES.includes(name) + ) { + next() + } else { + /** 是否有权限 */ + if (validRole(meta as AppRouteMeta)) { + /** 是否在有权限时去到登陆页 */ + if (isToLogin(to, from)) { + /** 容错处理, 如果没有预设地址与获取到缓存地址, 则重定向到首页去 */ + if (catchRoutePath) { + next(catchRoutePath) + } else { + redirectRouterToDashboard(true) + } + } else { + next() + } } else { redirectRouterToDashboard(true) } - } else { - next() } - } else { - redirectRouterToDashboard(true) } } else { - if (to.path === '/' || from.path === '/login') { + if (isToLogin(to, from)) { next() } else { next('/') diff --git a/src/router/helper/routerCopilot.ts b/src/router/helper/routerCopilot.ts index 6bbd5d98..f19c0ee1 100644 --- a/src/router/helper/routerCopilot.ts +++ b/src/router/helper/routerCopilot.ts @@ -14,7 +14,6 @@ import { permissionRouter } from './permission' import { SETUP_ROUTER_LOADING_BAR, SETUP_ROUTER_GUARD, - WHITE_ROUTES, SUPER_ADMIN, } from '@/appConfig/routerConfig' import { useSignin } from '@/store' @@ -35,11 +34,10 @@ import type { AppMenuOption } from '@/types/modules/app' */ export const validRole = (meta: AppRouteMeta) => { const { signinCallback } = storeToRefs(useSignin()) - const role = computed(() => signinCallback.value.role) - + const modelRole = computed(() => signinCallback.value.role) const { role: metaRole } = meta - if (SUPER_ADMIN?.length && SUPER_ADMIN.includes(role.value)) { + if (SUPER_ADMIN?.length && SUPER_ADMIN.includes(modelRole.value)) { return true } else { // 如果 role 为 undefind 或者空数组, 则认为该路由不做权限过滤 @@ -49,7 +47,7 @@ export const validRole = (meta: AppRouteMeta) => { // 判断是否含有该权限 if (metaRole) { - return metaRole.includes(role.value) + return metaRole.includes(modelRole.value) } return true diff --git a/src/router/helper/useVueRouter.ts b/src/router/helper/useVueRouter.ts index f0ba3a54..5f8465c4 100644 --- a/src/router/helper/useVueRouter.ts +++ b/src/router/helper/useVueRouter.ts @@ -16,6 +16,9 @@ import { router } from '@/router/index' * @returns vue router instance * * @remark 使用 vue router instance, 可以在 setup 环境外使用 + * + * 使用该方法时候, 可能会出现热更新错误的问题... 所以遇到的时候不要紧张, 刷新一下就好 + * 如果确定使用环境就在 setup 中, 还是建议使用官方的 useRouter useRoute 方法, 避免热更新报错的问题 */ export const useVueRouter = () => { try { diff --git a/src/router/index.ts b/src/router/index.ts index dbebfeb8..4d5a4259 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,5 +1,5 @@ import { createRouter, createWebHashHistory } from 'vue-router' -import scrollViewToTop from '@/router/utils/viewScrollTop' +import { scrollViewToTop } from '@/router/helper/helper' import { vueRouterRegister } from '@/router/helper/routerCopilot' import { useVueRouter } from '@/router/helper/useVueRouter' diff --git a/src/router/modules/multi-menu.ts b/src/router/modules/multi-menu.ts index 1e8d0e06..ab6149e7 100644 --- a/src/router/modules/multi-menu.ts +++ b/src/router/modules/multi-menu.ts @@ -31,14 +31,25 @@ const multiMenu: AppRouteRecordRaw = { }, children: [ { - path: 'sub-menu', - name: 'SubMenu', + path: 'sub-menu-other', + name: 'SubMenuOther', component: () => - import('@/views/multi/views/multi-menu-two/views/sub-menu/index'), + import( + '@/views/multi/views/multi-menu-two/views/sub-menu-other/index' + ), meta: { noLocalTitle: '多级菜单-2-1', keepAlive: true, }, + }, + { + path: 'sub-menu', + name: 'SubMenu', + component: LAYOUT, + meta: { + noLocalTitle: '多级菜单-2-2', + keepAlive: true, + }, children: [ { path: 'sub-menu-one', @@ -48,7 +59,7 @@ const multiMenu: AppRouteRecordRaw = { '@/views/multi/views/multi-menu-two/views/sub-menu/views/multi-menu-two-one/index' ), meta: { - noLocalTitle: '多级菜单-2-1-1', + noLocalTitle: '多级菜单-2-2-1', keepAlive: true, }, }, diff --git a/src/router/modules/router-demo.ts b/src/router/modules/router-demo.ts index d28acc22..192078c1 100644 --- a/src/router/modules/router-demo.ts +++ b/src/router/modules/router-demo.ts @@ -18,7 +18,7 @@ const routerDemo: AppRouteRecordRaw = { name: 'RouterDemoHome', component: () => import('@/views/router-demo/router-demo-home/index'), meta: { - noLocalTitle: '人员信息', + noLocalTitle: '人员信息(平级模式)', }, }, { diff --git a/src/router/modules/scroll-reveal.ts b/src/router/modules/scroll-reveal.ts index 8cf9d085..ca53f267 100644 --- a/src/router/modules/scroll-reveal.ts +++ b/src/router/modules/scroll-reveal.ts @@ -1,3 +1,9 @@ +/** + * + * 由于还未找到如何解决 scrollReveal 插件问题 + * 所以暂时隐藏该页面 + */ + import { t } from '@/locales/useI18n' import { LAYOUT } from '@/router/constant/index' diff --git a/src/router/routeModules.ts b/src/router/routeModules.ts index ab921679..6dd7edfa 100644 --- a/src/router/routeModules.ts +++ b/src/router/routeModules.ts @@ -20,8 +20,8 @@ * 如果不设置 order 属性, 则会默认排在前面 */ -import { combineRawRouteModules } from '@/router/helper/combine' -import { orderRoutes } from '@/router/helper/orderRoutes' +import { combineRawRouteModules } from '@/router/helper/helper' +import { orderRoutes } from '@/router/helper/helper' /** 获取所有被合并与排序的路由 */ export const getAppRawRoutes = () => orderRoutes(combineRawRouteModules()) diff --git a/src/router/routes.ts b/src/router/routes.ts index b21daa7a..37bc076d 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -18,10 +18,10 @@ export default () => [ component: Layout, children: expandRoutes(getAppRawRoutes()), }, - // { - // path: '/:catchAll(.*)', - // name: 'errorPage', - // component: Layout, - // redirect: '/error', - // }, + { + path: '/:catchAll(.*)', + name: 'errorPage', + component: Layout, + redirect: '/error', + }, ] diff --git a/src/router/type.ts b/src/router/type.ts index ddc179a7..6625f92e 100644 --- a/src/router/type.ts +++ b/src/router/type.ts @@ -13,7 +13,7 @@ export interface AppRouteMeta { i18nKey?: string icon?: string | VNode windowOpen?: string - role?: string[] + role?: (string | number)[] hidden?: boolean noLocalTitle?: string | number ignoreAutoResetScroll?: boolean diff --git a/src/router/utils/viewScrollTop.ts b/src/router/utils/viewScrollTop.ts deleted file mode 100644 index 901ed8c6..00000000 --- a/src/router/utils/viewScrollTop.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig' - -import type { RouteLocationNormalized } from 'vue-router' - -/** - * - * 切换路由时, 手动将容器区域回归默认值 - * - * 由于官方不支持这个方法了, 所以自己手写了一个 - * 如果需要忽略恢复默认位置, 仅需要在 meta 中配置 ignoreAutoResetScroll 属性即可 - */ -const scrollViewToTop = (route: RouteLocationNormalized) => { - const { meta } = route - - /** 这个 id 是注入在 layout 中 */ - if (!meta?.ignoreAutoResetScroll) { - LAYOUT_CONTENT_REF.value?.scrollTo({ - top: 0, - left: 0, - behavior: 'smooth', - }) - } -} - -export default scrollViewToTop diff --git a/src/store/modules/keep-alive/index.ts b/src/store/modules/keep-alive/index.ts index e6e02fd5..af699bfc 100644 --- a/src/store/modules/keep-alive/index.ts +++ b/src/store/modules/keep-alive/index.ts @@ -49,11 +49,18 @@ export const useKeepAlive = defineStore( } = option if (keepAlive) { + if ( + length < maxKeepAliveLength && + !state.keepAliveInclude.includes(name) + ) { + state.keepAliveInclude.push(name) + + return + } + if (length >= maxKeepAliveLength) { state.keepAliveInclude.splice(0, 1) state.keepAliveInclude.push(name) - } else { - state.keepAliveInclude.push(name) } } } diff --git a/src/styles/theme.scss b/src/styles/theme.scss deleted file mode 100644 index 0de9d560..00000000 --- a/src/styles/theme.scss +++ /dev/null @@ -1,8 +0,0 @@ -/** - * 明暗主题变量 - * - * 全局自定义组件使用变量 - */ - -$iconSpace: 5px; -$width: 140px; diff --git a/src/types/global.d.ts b/src/types/global.d.ts index c2bade79..2ff174ea 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import type { AppConfig } from './cfg' +import type { AppConfig } from './modules/cfg' import type { MessageApi, DialogApi, @@ -7,7 +7,7 @@ import type { NotificationApi, } from 'naive-ui' -declare global { +export declare global { declare interface UnknownObjectKey { [propName: string]: any } diff --git a/src/utils/cache.ts b/src/utils/cache.ts index 93f8a2a3..e929fcd7 100644 --- a/src/utils/cache.ts +++ b/src/utils/cache.ts @@ -18,11 +18,11 @@ import type { CacheType } from '@/types/modules/utils' * @param key 需要设置的key * @param value 需要缓存的值 */ -export const setStorage = ( +export function setStorage( key: string, value: T, type: CacheType = 'sessionStorage', -) => { +) { if (!key) { console.error('Failed to set stored data: key is empty or undefined') @@ -40,16 +40,30 @@ export const setStorage = ( } } +/** 重载函数 getStorage */ +export function getStorage( + key: string, + storageType: CacheType, + defaultValue: T, +): T + +/** 重载函数 getStorage */ +export function getStorage( + key: string, + storageType?: CacheType, + defaultValue?: T, +): T | null + /** * * @param key 需要获取目标缓存的key * @returns 获取缓存值 */ -export const getStorage = ( +export function getStorage( key: string, storageType: CacheType = 'sessionStorage', defaultValue?: T, -): T | null => { +): T | null { try { const data = storageType === 'localStorage' @@ -77,10 +91,10 @@ export const getStorage = ( * - all-sessionStorage: 删除所有 sessionStorage 缓存值 * - all-localStorage: 删除所有 localStorage 缓存值 */ -export const removeStorage = ( +export function removeStorage( key: string | 'all' | 'all-sessionStorage' | 'all-localStorage', type: CacheType = 'sessionStorage', -) => { +) { switch (key) { case 'all': window.window.localStorage.clear() diff --git a/src/utils/element.ts b/src/utils/element.ts index 4bfb48cb..5cc73641 100644 --- a/src/utils/element.ts +++ b/src/utils/element.ts @@ -1,5 +1,5 @@ import { isValueType } from '@use-utils/hook' -import { APP_REGEX } from '@/appConfig/regConfig' +import { APP_REGEX } from '@/appConfig/regexConfig' import type { EventListenerOrEventListenerObject, @@ -240,15 +240,15 @@ export const colorToRgba = (color: string, alpha = 1) => { * 示例: * * class: - * const el = getElements('.demo') + * const el = queryElements('.demo') * id: - * const el = getElements('#demo') + * const el = queryElements('#demo') * attribute: - * const el = getElements('attr:type=button') + * const el = queryElements('attr:type=button') * 或者可以这样写 - * const el = getElements('attr:type') + * const el = queryElements('attr:type') */ -export const getElements = ( +export const queryElements = ( selector: ElementSelector, ) => { if (!selector) { diff --git a/src/views/directive/index.tsx b/src/views/directive/index.tsx index 1bf76616..620bfc03 100644 --- a/src/views/directive/index.tsx +++ b/src/views/directive/index.tsx @@ -64,7 +64,7 @@ const RDirective = defineComponent({ - 多级菜单2-1-1 + 多级菜单2-2-1
) diff --git a/src/views/router-demo/router-demo-detail/index.tsx b/src/views/router-demo/router-demo-detail/index.tsx index 266326f9..49e9005a 100644 --- a/src/views/router-demo/router-demo-detail/index.tsx +++ b/src/views/router-demo/router-demo-detail/index.tsx @@ -18,6 +18,7 @@ const RouterDemoDetail = defineComponent({ return ( 我是平层路由详情页面 + 可以点击面包屑或者菜单返回到主页面 ) }, diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index de66dbc0..bb2e02f1 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1,3 +1,4 @@ +/// /// /// /// diff --git a/tsconfig.json b/tsconfig.json index f2511d9b..31eaf844 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -26,7 +26,12 @@ "@use-micro/*": ["src/micro/*"] }, "suppressImplicitAnyIndexErrors": true, - "types": ["@intlify/unplugin-vue-i18n/messages", "naive-ui/volar"], + "types": [ + "@intlify/unplugin-vue-i18n/messages", + "naive-ui/volar", + "vite/client", + "src/types/global.d.ts" + ], "ignoreDeprecations": "5.0" }, "include": [ @@ -36,15 +41,8 @@ "cfg.ts", "package.json", "vite-env.d.ts", - "src/appConfig/*.ts", - "src/types/cfg.ts", - "src/**/*.ts", - "src/**/*.d.ts", - "src/**/*.tsx", - "src/**/*.ts", - "src/**/*.vue", "components.d.ts", "auto-imports.d.ts", - "src/types/global.d.ts" + "src/**/*" ] } diff --git a/vite.config.ts b/vite.config.ts index 0a3bebac..9fa84a54 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -108,6 +108,11 @@ export default defineConfig(async ({ mode }) => { libDirectory: '', camel2DashComponentName: false, }, + { + libName: 'lodash', + libDirectory: '', + camel2DashComponentName: false, + }, ], }), {