v4.1.1

CHANGELOG.md

@@ -1,5 +1,17 @@
 # CHANGE LOG
 
+## 4.1.1
+
+### Feats
+
+- 取消模板默认的 Transition loading 动画，采用 NSpin 组件实现
+- 新增 router meta env 属性，可以根据当前构建环境判断显示、隐藏菜单项
+
+### Fixes
+
+- 修复页面切换闪烁问题
+- 修复刷新页面方法执行后抛出 vue 相关的错误
+
 ## 4.1.0
 
 ### Feats

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<Response, HookPlusParams, HookPlusPlugin>,
 ) {
   const fc = () => {
-    const cb = inst<Response>(fetchOption)
+    const cb = request<Response>(fetchOption)
 
     return cb
   }

src/components/RayTransitionComponent/index.vue

@@ -48,7 +48,7 @@ defineProps({
   },
   transitionAppear: {
     type: Boolean,
-    default: true,
+    default: false,
   },
 })
 

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: () => {

src/layout/default/ContentWrapper/index.scss

@@ -1,3 +1,7 @@
 .content-wrapper {
   box-sizing: border-box;
+
+  &[v-cloak] {
+    display: none;
+  }
 }

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 (
       <NSpin
-        show={this.spinning}
+        show={this.spinning || !this.reloadRouteSwitch}
         description="loading..."
         size="large"
         themeOverrides={this.thmeOverridesSpin}
       >
-        <RayTransitionComponent class="content-wrapper" />
+        {this.reloadRouteSwitch ? (
+          <RayTransitionComponent
+            class="content-wrapper"
+            transitionPropName="layout-content"
+          />
+        ) : (
+          ''
+        )}
       </NSpin>
-    ) : (
-      <></>
     )
   },
 })

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

src/locales/lang/zh-CN/menu.json

@@ -9,7 +9,8 @@
   "Table": "表格",
   "MultiMenu": "多级菜单(缓存)",
   "Doc": "文档",
-  "DocLocal": "文档 (国内地址)",
+  "DocLocal": "文档 (加速地址)",
+  "DocLocalInside": "文档（内嵌）",
   "Office": "办公",
   "Office_Document": "文档",
   "Office_Presentation": "演示",

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

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
 }
 

src/router/modules/demo/doc-local.ts

@@ -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

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

src/router/type.ts

@@ -20,6 +20,7 @@ export interface AppRouteMeta {
   order?: number
   keepAlive?: boolean
   sameLevel?: boolean
+  env?: string | string[]
 }
 
 // @ts-ignore

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 {

src/views/doc/index.tsx

@@ -2,19 +2,29 @@
  *
  * @author Ray <https://github.com/XiaoDaiGua-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 <div></div>
+    return (
+      <RayIframe
+        width="100%"
+        height="100%"
+        src="https://ray-template.yunkuangao.com/ray-template-doc/"
+      ></RayIframe>
+    )
   },
 })
 
-export default RayTemplateDoc
+export default RTemplateDoc

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<RowData> = [
       {