diff --git a/CHANGELOG.md b/CHANGELOG.md index ef3ef462..f39a6803 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,17 @@ # CHANGE LOG +## 4.1.1 + +### Feats + +- 取消模板默认的 Transition loading 动画，采用 NSpin 组件实现 +- 新增 router meta env 属性，可以根据当前构建环境判断显示、隐藏菜单项 + +### Fixes + +- 修复页面切换闪烁问题 +- 修复刷新页面方法执行后抛出 vue 相关的错误 + ## 4.1.0 ### Feats diff --git a/src/axios/index.ts b/src/axios/index.ts index 3c821e02..0ea7f864 100644 --- a/src/axios/index.ts +++ b/src/axios/index.ts @@ -21,13 +21,23 @@ * 由于中间件注册了自动取消重复请求的方法，所以会导致方法在初始化时，会抛出一个重复请求被取消的错误（该问题不影响使用） */ -import inst from './instance' import useHookPlusRequest from 'vue-hooks-plus/es/useRequest' import request from '@/axios/instance' import type { UseRequestOptions } from 'vue-hooks-plus/es/useRequest/types' import type { AxiosRequestConfig } from 'axios' +/** + * + * 该方法有一定的局限性，仅可在 setup 环境中使用 + * 如果在非 vue component 文件中使用，会抛出一些警告 + * + * 非 vue component 中使用 + * @example + * + * const getUser = () => request({ url: 'http://localhost:3000/user' }) + * const { data } = useHookPlusRequest(getUser) + */ function useRequest< Response, HookPlusParams extends unknown[] = unknown[], @@ -37,7 +47,7 @@ function useRequest< option?: UseRequestOptions, ) { const fc = () => { - const cb = inst(fetchOption) + const cb = request(fetchOption) return cb } diff --git a/src/components/RayTransitionComponent/index.vue b/src/components/RayTransitionComponent/index.vue index abf43f2b..7970c719 100644 --- a/src/components/RayTransitionComponent/index.vue +++ b/src/components/RayTransitionComponent/index.vue @@ -48,7 +48,7 @@ defineProps({ }, transitionAppear: { type: Boolean, - default: true, + default: false, }, }) diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx index 60804127..f7cd4e7c 100644 --- a/src/layout/components/SiderBar/index.tsx +++ b/src/layout/components/SiderBar/index.tsx @@ -95,7 +95,7 @@ const SiderBar = defineComponent({ reload: () => { changeSwitcher(false, 'reloadRouteSwitch') - setTimeout(() => changeSwitcher(true, 'reloadRouteSwitch')) + setTimeout(() => changeSwitcher(true, 'reloadRouteSwitch'), 300) }, setting: () => { showSettings.value = true @@ -104,10 +104,14 @@ const SiderBar = defineComponent({ window.open('https://github.com/XiaoDaiGua-Ray/ray-template') }, fullscreen: () => { - if (screenfull.isEnabled) { - screenfull.toggle() + if (!screenfull.isEnabled) { + return (() => { + window.$message.warning('您的浏览器不支持全屏~') + })() } else { - window.$message.warning('您的浏览器不支持全屏~') + return (() => { + screenfull.toggle() + })() } }, search: () => { diff --git a/src/layout/default/ContentWrapper/index.scss b/src/layout/default/ContentWrapper/index.scss index a2c09a37..5596d922 100644 --- a/src/layout/default/ContentWrapper/index.scss +++ b/src/layout/default/ContentWrapper/index.scss @@ -1,3 +1,7 @@ .content-wrapper { box-sizing: border-box; + + &[v-cloak] { + display: none; + } } diff --git a/src/layout/default/ContentWrapper/index.tsx b/src/layout/default/ContentWrapper/index.tsx index 144cccdd..b5be58ba 100644 --- a/src/layout/default/ContentWrapper/index.tsx +++ b/src/layout/default/ContentWrapper/index.tsx @@ -9,6 +9,12 @@ * @remark 今天也是元气满满撸代码的一天 */ +/** + * + * 使用 NSpin 组件实现 loading 效果 + * 默认添加 300ms 延迟 + */ + import './index.scss' import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue' @@ -51,17 +57,22 @@ const ContentWrapper = defineComponent({ } }, render() { - return this.reloadRouteSwitch ? ( + return ( - + {this.reloadRouteSwitch ? ( + + ) : ( + '' + )} - ) : ( - <> ) }, }) diff --git a/src/locales/lang/en-US/menu.json b/src/locales/lang/en-US/menu.json index 3fc2dfac..bacf1daf 100644 --- a/src/locales/lang/en-US/menu.json +++ b/src/locales/lang/en-US/menu.json @@ -10,6 +10,7 @@ "MultiMenu": "MultiMenu(catch)", "Doc": "Doc", "DocLocal": "Doc (China)", + "DocLocalInside": "Doc（inside）", "Office": "Office", "Office_Document": "Document", "Office_Presentation": "Presentation", diff --git a/src/locales/lang/zh-CN/menu.json b/src/locales/lang/zh-CN/menu.json index 6af1d92f..84844afb 100644 --- a/src/locales/lang/zh-CN/menu.json +++ b/src/locales/lang/zh-CN/menu.json @@ -9,7 +9,8 @@ "Table": "表格", "MultiMenu": "多级菜单(缓存)", "Doc": "文档", - "DocLocal": "文档 (国内地址)", + "DocLocal": "文档 (加速地址)", + "DocLocalInside": "文档（内嵌）", "Office": "办公", "Office_Document": "文档", "Office_Presentation": "演示", diff --git a/src/router/README.md b/src/router/README.md index ce17f340..3a00d4b0 100644 --- a/src/router/README.md +++ b/src/router/README.md @@ -54,6 +54,7 @@ interface RouteMeta { ignoreAutoResetScroll?: boolean keepAlive?: boolean sameLevel?: boolean + dev?: string | string[] } ``` @@ -69,7 +70,8 @@ hidden: 是否显示 noLocalTitle: 不使用国际化渲染 Menu Titile ignoreAutoResetScroll: 该页面内容区域自动初始化滚动条位置 keepAlive: 是否缓存该页面（需要配置 APP_KEEP_ALIVE setupKeepAlive 属性为 true 启用才有效） -sameLevel: 是否标记该路由为平级模式，如果标记为平级模式，会使路由菜单项隐藏。如果在含有子节点处，设置了该属性，会导致子节点全部被隐藏。并且该模块，在后续的使用 url 地址导航跳转时，如果在非当前路由层级层面跳转的该路由，会在当前的面包屑后面追加该模块的信息，触发跳转时，不会修改面包屑、标签页 +sameLevel: 是否标记该路由为平级模式，如果标记为平级模式，会使路由菜单项隐藏。如果在含有子节点处，设置了该属性，会导致子节点全部被隐藏。并且该模块，在后续的使用 url 地址导航跳转时，如果在非当前路由层级层面跳转的该路由，会在当前的面包屑后面追加该模块的信息，触发跳转时，不会修改面包屑、标签页（优先级最高） +dev: 按照当前环境进行匹配（优先级最低） ``` ### routerCopilot diff --git a/src/router/helper/routerCopilot.ts b/src/router/helper/routerCopilot.ts index 4caec228..5c22fa51 100644 --- a/src/router/helper/routerCopilot.ts +++ b/src/router/helper/routerCopilot.ts @@ -10,7 +10,6 @@ */ import { permissionRouter } from './permission' - import { SETUP_ROUTER_LOADING_BAR, SETUP_ROUTER_GUARD, @@ -20,6 +19,7 @@ import { useSignin } from '@/store' import { useVueRouter } from '@/router/helper/useVueRouter' import { ROOT_ROUTE } from '@/appConfig/appConfig' import { setStorage } from '@/utils/cache' +import { getAppEnvironment } from '@/utils/hook' import type { Router } from 'vue-router' import type { AppRouteMeta } from '@/router/type' @@ -58,14 +58,13 @@ export const validRole = (meta: AppRouteMeta) => { * * @remark 校验当前路由是否显示 * - * 该方法进行校验时, 会将 hidden 与 sameLevel 一起进行校验 - * sameLevel 的优先级最高 - * + * 该方法进行校验时, sameLevel 的优先级最高 * 如果你仅仅是希望校验是否满足权限, 应该使用另一个方法 validRole */ export const validMenuItemShow = (option: AppMenuOption) => { const { meta = {} } = option - const { hidden, sameLevel } = meta + const { hidden, sameLevel, env } = meta + const { MODE } = getAppEnvironment() // 如果该路由被标记为平级模式, 则会强制不显示在菜单中 if (sameLevel) { @@ -76,6 +75,14 @@ export const validMenuItemShow = (option: AppMenuOption) => { return false } + if (env && typeof env === 'string' && env !== MODE) { + return false + } + + if (env && Array.isArray(env) && !env.includes(MODE)) { + return false + } + return true } diff --git a/src/router/modules/demo/doc-local.ts b/src/router/modules/demo/doc-local.ts deleted file mode 100644 index c65ba3c8..00000000 --- a/src/router/modules/demo/doc-local.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { t } from '@/locales/useI18n' -import { LAYOUT } from '@/router/constant/index' - -import type { AppRouteRecordRaw } from '@/router/type' - -const docLocal: AppRouteRecordRaw = { - path: '/doc', - name: 'RDocLocal', - component: () => import('@/views/doc/index'), - meta: { - i18nKey: t('menu.DocLocal'), - icon: 'doc', - windowOpen: 'https://ray-template.yunkuangao.com/ray-template-doc/', - order: 6, - }, -} - -export default docLocal diff --git a/src/router/modules/demo/doc.ts b/src/router/modules/demo/doc.ts index a4e65910..16e94385 100644 --- a/src/router/modules/demo/doc.ts +++ b/src/router/modules/demo/doc.ts @@ -4,15 +4,43 @@ import { LAYOUT } from '@/router/constant/index' import type { AppRouteRecordRaw } from '@/router/type' const doc: AppRouteRecordRaw = { - path: '/doc', - name: 'RDoc', - component: () => import('@/views/doc/index'), + path: '', + name: 'RDocLayout', + component: LAYOUT, meta: { i18nKey: t('menu.Doc'), icon: 'doc', - windowOpen: 'https://xiaodaigua-ray.github.io/ray-template-doc/', order: 5, + env: 'development', }, + children: [ + { + path: '/doc', + name: 'RDocInside', + component: () => import('@/views/doc/index'), + meta: { + i18nKey: t('menu.DocLocalInside'), + }, + }, + { + path: '', + name: 'RDoc', + component: LAYOUT, + meta: { + i18nKey: t('menu.Doc'), + windowOpen: 'https://xiaodaigua-ray.github.io/ray-template-doc/', + }, + }, + { + path: '', + name: 'RDocLocal', + component: LAYOUT, + meta: { + i18nKey: t('menu.DocLocal'), + windowOpen: 'https://ray-template.yunkuangao.com/ray-template-doc/', + }, + }, + ], } export default doc diff --git a/src/router/type.ts b/src/router/type.ts index 6625f92e..1d51ddb3 100644 --- a/src/router/type.ts +++ b/src/router/type.ts @@ -20,6 +20,7 @@ export interface AppRouteMeta { order?: number keepAlive?: boolean sameLevel?: boolean + env?: string | string[] } // @ts-ignore diff --git a/src/styles/animate.scss b/src/styles/animate.scss index c4590c20..c3983103 100644 --- a/src/styles/animate.scss +++ b/src/styles/animate.scss @@ -1,6 +1,23 @@ +// 采用 NSpin 组件进行 loading 效果，移除之前的 Transition 组件的国度 +// 避免闪烁添加此动画 +.layout-content-enter-active, +.layout-content-leave-active { + transition: all 0.35s; +} + +.layout-content-enter-from, +.layout-content-enter-to { + opacity: 0; +} + +.layout-content-leave-from, +.layout-content-leave-to { + opacity: 0; +} + .fade-enter-active, .fade-leave-active { - transition: all 0.35s; + transition: all 0.35s ease; } .fade-enter-from { diff --git a/src/views/doc/index.tsx b/src/views/doc/index.tsx index bfb8624b..383bbf8b 100644 --- a/src/views/doc/index.tsx +++ b/src/views/doc/index.tsx @@ -2,19 +2,29 @@ * * @author Ray * - * @date 2022-12-29 + * @date 2023-07-14 * * @workspace ray-template * * @remark 今天也是元气满满撸代码的一天 */ -const RayTemplateDoc = defineComponent({ - name: 'RayTemplateDoc', - // setup() {}, +import RayIframe from '@/components/RayIframe/index' + +const RTemplateDoc = defineComponent({ + name: 'RTemplateDoc', + setup() { + return {} + }, render() { - return
+ return ( + + ) }, }) -export default RayTemplateDoc +export default RTemplateDoc diff --git a/src/views/router-demo/router-demo-home/index.tsx b/src/views/router-demo/router-demo-home/index.tsx index 80c20c1b..ac1cc952 100644 --- a/src/views/router-demo/router-demo-home/index.tsx +++ b/src/views/router-demo/router-demo-home/index.tsx @@ -11,8 +11,6 @@ import { NSpace, NDataTable, NButton } from 'naive-ui' -import { useVueRouter } from '@/router/helper/useVueRouter' - import type { DataTableColumns } from 'naive-ui' export interface RowData { @@ -25,7 +23,7 @@ export interface RowData { const RouterDemoHome = defineComponent({ name: 'RouterDemoHome', setup() { - const { router } = useVueRouter() + const router = useRouter() const columns: DataTableColumns = [ {