branch mine pull request

.eslintrc.cjs

@@ -30,7 +30,12 @@ module.exports = {
     withDefaults: 'readonly',
   },
   rules: {
-    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/no-explicit-any': [
+      'error',
+      {
+        ignoreRestArgs: true,
+      },
+    ],
     'prettier/prettier': 'error',
     'no-unused-vars': 'off',
     '@typescript-eslint/no-unused-vars': 'off',

CHANGELOG.md

@@ -1,5 +1,18 @@
 # CHANGE LOG
 
+## 3.1.8
+
+### Fixes
+
+- 修复路由切换不能复位容器位置问题（让可视区域置顶）
+
+### Feats
+
+- 新增 useI18n hook 方法
+- 手动补充 AppRouteRecordRaw、AppRouteMeta 类型
+- 重新拆分 Layout 入口文件
+- 重新指定组件暴露方法、属性
+
 ## 3.1.7
 
 ### Fixes

auto-imports.d.ts

@@ -50,6 +50,8 @@ declare global {
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
@@ -81,6 +83,7 @@ declare global {
   const refThrottled: typeof import('@vueuse/core')['refThrottled']
   const refWithControl: typeof import('@vueuse/core')['refWithControl']
   const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveDirective: typeof import('vue')['resolveDirective']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
   const setActivePinia: typeof import('pinia')['setActivePinia']
@@ -112,10 +115,12 @@ declare global {
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
   const useArraySome: typeof import('@vueuse/core')['useArraySome']
+  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']
@@ -127,6 +132,7 @@ declare global {
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
   const useCached: typeof import('@vueuse/core')['useCached']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
   const useCounter: typeof import('@vueuse/core')['useCounter']
@@ -177,6 +183,7 @@ declare global {
   const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
   const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLink: typeof import('vue-router')['useLink']
   const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
   const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
@@ -202,11 +209,14 @@ declare global {
   const useParallax: typeof import('@vueuse/core')['useParallax']
   const usePermission: typeof import('@vueuse/core')['usePermission']
   const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
   const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const usePrevious: typeof import('@vueuse/core')['usePrevious']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
@@ -220,6 +230,7 @@ declare global {
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
   const useSlots: typeof import('vue')['useSlots']
+  const useSorted: typeof import('@vueuse/core')['useSorted']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
   const useStepper: typeof import('@vueuse/core')['useStepper']

src/components/RayChart/index.tsx

@@ -199,7 +199,7 @@ const RayChart = defineComponent({
       default: () => loadingOptions(),
     },
   },
-  setup(props) {
+  setup(props, { expose }) {
     const settingStore = useSetting()
     const { themeValue } = storeToRefs(settingStore)
     const rayChartRef = ref<HTMLElement>() // `echart` 容器实例
@@ -465,6 +465,10 @@ const RayChart = defineComponent({
       off(window, 'resize', resizeDebounce)
     })
 
+    expose({
+      echart: echartInstanceRef,
+    })
+
     return {
       rayChartRef,
       cssVarsRef,

src/components/RayTable/src/index.tsx

@@ -57,7 +57,7 @@ const RayTable = defineComponent({
   name: 'RayTable',
   props: props,
   emits: ['update:columns', 'menuSelect', 'exportSuccess', 'exportError'],
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
     const rayTableInstance = ref<DataTableInst>()
 
     const tableUUID = uuid() // 表格 id, 用于打印表格
@@ -83,6 +83,7 @@ const RayTable = defineComponent({
       return cssVar
     })
     const tableSize = ref(props.size)
+    const tableMethods = ref<Omit<DataTableInst, 'clearFilter'>>()
 
     /** 注入相关属性 */
     provide('tableSettingProvider', {
@@ -196,6 +197,40 @@ const RayTable = defineComponent({
       tableSize.value = size
     }
 
+    const registerRayTableMethods = (ins: DataTableInst) => {
+      const {
+        clearFilters,
+        clearSorter,
+        filters,
+        page,
+        scrollTo,
+        sort,
+        filter,
+      } = ins
+
+      tableMethods.value = {
+        clearFilters,
+        clearSorter,
+        filters,
+        page,
+        scrollTo,
+        sort,
+        filter,
+      }
+    }
+
+    expose({
+      tableMethods: computed(() => tableMethods.value),
+    })
+
+    onMounted(() => {
+      registerRayTableMethods(rayTableInstance.value as DataTableInst)
+    })
+
+    // expose({
+    //   tableMethods: tableMethods.value,
+    // })
+
     return {
       tableUUID,
       rayTableUUID,
@@ -217,14 +252,14 @@ const RayTable = defineComponent({
         class="ray-table"
         bordered={this.bordered}
         style={[this.cssVars]}
-        id={this.rayTableUUID}
+        {...{ id: this.rayTableUUID }}
       >
         {{
           default: () => (
             <>
               <NDataTable
                 ref="rayTableInstance"
-                id={this.tableUUID}
+                {...{ id: this.tableUUID }}
                 {...this.$props}
                 rowProps={this.handleRowProps.bind(this)}
                 size={this.tableSize}

src/components/RayTable/src/type.ts

@@ -72,6 +72,6 @@ export declare type TableColumnTitle =
   | string
   | ((column: DataTableBaseColumn) => VNodeChild)
 
-export declare interface RayTableInst {
-  rayTableInstance: DataTableInst
+export declare type RayTableInst = {
+  tableMethods: Omit<DataTableInst, 'clearFilter'>
 }

src/language/index.ts

@@ -33,6 +33,9 @@ import { forIn, merge } from 'lodash-es'
 export { naiveLocales, localOptions } from './language'
 
 import type { App } from 'vue'
+import type { I18n } from 'vue-i18n'
+
+export let i18n: I18n
 
 /**
  *
@@ -88,13 +91,17 @@ export const getDefaultLocal = () => {
 export const setupI18n = (app: App<Element>) => {
   const locale = getDefaultLocal()
 
-  const i18n = createI18n({
+  const i18nInstance = createI18n({
     locale,
     allowComposition: true,
     messages: getMatchLanguageModule(),
+    legacy: false,
+    sync: true,
   })
 
-  app.use(i18n)
+  i18n = i18nInstance
+
+  app.use(i18nInstance)
 }
 
 /**

src/language/useI18n.ts

@@ -0,0 +1,48 @@
+import { i18n } from './index'
+
+const getI18nKey = (namespace: string | undefined, key: string) => {
+  if (!namespace) {
+    return key
+  }
+
+  if (key.startsWith(namespace)) {
+    return key
+  }
+
+  return `${namespace}.${key}`
+}
+
+export const useI18n = (namespace?: string) => {
+  const normalFunc = {
+    t: (key: string) => {
+      return getI18nKey(namespace, key)
+    },
+  }
+
+  if (!i18n) {
+    return normalFunc
+  }
+
+  const { t, ...methods } = i18n.global
+
+  const overridesTFunc = (key: string, ...args: any[]) => {
+    if (!key) {
+      return ''
+    }
+
+    if (!key.includes('.') && !namespace) {
+      return key
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (t as any)(getI18nKey(namespace, key), ...args)
+  }
+
+  return {
+    ...methods,
+    t: overridesTFunc,
+  }
+}
+
+/** 配合 i18n ally 插件提示使用 */
+export const t = (key: string) => key

src/layout/components/SiderBar/Components/SettingDrawer/index.tsx

@@ -13,6 +13,7 @@ import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/c
 
 import { useSwatchesColorOptions } from './hook'
 import { useSetting } from '@/store'
+import { useI18n } from '@/language/useI18n'
 
 import type { PropType } from 'vue'
 

src/layout/components/SiderBar/index.tsx

@@ -24,6 +24,7 @@ import { localOptions } from '@/language/index'
 import { useAvatarOptions } from './hook'
 import { getCache } from '@/utils/cache'
 import screenfull from 'screenfull'
+import { useI18n } from '@/language/useI18n'
 
 import type { IconEventMapOptions, IconEventMap } from './type'
 

src/layout/default/ContentWrapper/index.scss

@@ -0,0 +1,3 @@
+.content-wrapper {
+  box-sizing: border-box;
+}

src/layout/default/ContentWrapper/index.tsx

@@ -0,0 +1,38 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-04-21
+ *
+ * @workspace ray-template-mine
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
+
+import { useSetting } from '@/store'
+
+const ContentWrapper = defineComponent({
+  name: 'ContentWrapper',
+  setup() {
+    const settingStore = useSetting()
+
+    const { reloadRouteSwitch } = storeToRefs(settingStore)
+
+    return {
+      reloadRouteSwitch,
+    }
+  },
+  render() {
+    return this.reloadRouteSwitch ? (
+      <RayTransitionComponent class="content-wrapper" />
+    ) : (
+      <></>
+    )
+  },
+})
+
+export default ContentWrapper

src/layout/default/FooterWrapper/index.scss

@@ -0,0 +1,4 @@
+.layout-footer-wrapper {
+  padding: 24px;
+  text-align: center;
+}

src/layout/default/FooterWrapper/index.tsx

@@ -0,0 +1,34 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-04-21
+ *
+ * @workspace ray-template-mine
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+const FooterWrapper = defineComponent({
+  name: 'FooterWrapper',
+  setup() {
+    const {
+      layout: { copyright },
+    } = __APP_CFG__
+
+    return {
+      copyright,
+    }
+  },
+  render() {
+    return this.copyright ? (
+      <div class="layout-footer-wrapper">{this.copyright}</div>
+    ) : (
+      <></>
+    )
+  },
+})
+
+export default FooterWrapper

src/layout/index.scss

@@ -17,9 +17,4 @@
       }
     }
   }
-
-  & .layout-footer {
-    padding: 24px;
-    text-align: center;
-  }
 }

src/layout/index.tsx

@@ -1,10 +1,19 @@
+/**
+ *
+ * 页面布局入口文件
+ *
+ * 说明:
+ *   - rayLayoutContentWrapperScopeSelector: 页面切换时重置滚动条注入 id
+ */
+
 import './index.scss'
 
 import { NLayout, NLayoutContent } from 'naive-ui'
-import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
-import LayoutMenu from './components/Menu/index'
+import Menu from './components/Menu/index'
 import SiderBar from './components/SiderBar/index'
 import MenuTag from './components/MenuTag/index'
+import ContentWrapper from '@/layout/default/ContentWrapper'
+import FooterWrapper from '@/layout/default/FooterWrapper'
 
 import { useSetting } from '@/store'
 
@@ -14,10 +23,7 @@ const Layout = defineComponent({
     const settingStore = useSetting()
 
     const { height: windowHeight } = useWindowSize()
-    const {
-      reloadRouteSwitch: modelReloadRoute,
-      menuTagSwitch: modelMenuTagSwitch,
-    } = storeToRefs(settingStore)
+    const { menuTagSwitch: modelMenuTagSwitch } = storeToRefs(settingStore)
     const cssVarsRef = computed(() => {
       let cssVar = {}
 
@@ -33,16 +39,11 @@ const Layout = defineComponent({
 
       return cssVar
     })
-    const {
-      layout: { copyright },
-    } = __APP_CFG__
 
     return {
       windowHeight,
-      modelReloadRoute,
       modelMenuTagSwitch,
       cssVarsRef,
-      copyright,
     }
   },
   render() {
@@ -52,20 +53,17 @@ const Layout = defineComponent({
         style={[`height: ${this.windowHeight}px`, this.cssVarsRef]}
       >
         <NLayout class="layout-full" hasSider>
-          <LayoutMenu />
+          <Menu />
           <NLayout>
             <SiderBar />
             {this.modelMenuTagSwitch ? <MenuTag /> : ''}
             <NLayoutContent
               class="layout-content__router-view"
               nativeScrollbar={false}
+              {...{ id: 'rayLayoutContentWrapperScopeSelector' }}
             >
-              {this.modelReloadRoute ? <RayTransitionComponent /> : ''}
-              {this.copyright ? (
-                <div class="layout-footer">{this.copyright}</div>
-              ) : (
-                ''
-              )}
+              <ContentWrapper />
+              <FooterWrapper />
             </NLayoutContent>
           </NLayout>
         </NLayout>

src/router/index.ts

@@ -2,14 +2,54 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import { constantRoutes } from './routes'
 
 import { permissionRouter as _permissionRouter } from './permission'
+import { getElement } from '@/utils/element'
 
 import type { App } from 'vue'
-import type { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw, RouteLocationNormalized } from 'vue-router'
+
+/**
+ *
+ * 切换路由时, 手动将容器区域回归默认值
+ *
+ * 由于官方不支持这个方法了, 所以自己手写了一个
+ * 如果需要忽略恢复默认位置, 仅需要在 meta 中配置 ignoreResetScroll 属性即可
+ *
+ * 找到滚动元素容器的写法有点丑陋, 暂时也想不到啥好方法解决, 就凑合一下吧
+ */
+const scrollViewToTop = (route: RouteLocationNormalized) => {
+  const { meta } = route
+
+  /** 这个 id 是注入在 layout 中 */
+  if (!meta?.ignoreResetScroll) {
+    const scrollViewRoot = getElement(
+      '#rayLayoutContentWrapperScopeSelector',
+    )?.[0]
+
+    if (scrollViewRoot && typeof scrollViewRoot.scroll) {
+      /** 找到 NLayoutContent 组件滚动元素 */
+      const scrollView = scrollViewRoot?.firstElementChild
+        ?.firstChild as HTMLElement
+
+      scrollView?.scroll({
+        top: 0,
+        left: 0,
+        behavior: 'smooth',
+      })
+    }
+  }
+}
 
 export const router = createRouter({
   history: createWebHashHistory(),
   routes: constantRoutes as unknown as RouteRecordRaw[],
-  scrollBehavior: () => ({ left: 0, top: 0 }),
+  scrollBehavior: (to) => {
+    scrollViewToTop(to)
+
+    return {
+      top: 0,
+      left: 0,
+    }
+  },
 })
 
 export const permissionRouter = () => _permissionRouter(router)

src/router/modules/axios.ts

@@ -1,9 +1,13 @@
-export default {
+import type { AppRouteRecordRaw } from '@/router/type'
+
+const axios: AppRouteRecordRaw = {
   path: '/axios',
-  name: 'axios',
+  name: 'Axios',
   component: () => import('@/views/axios/index'),
   meta: {
     i18nKey: 'Axios',
     icon: 'axios',
   },
 }
+
+export default axios

src/router/modules/dashboard.ts

@@ -1,9 +1,13 @@
-export default {
+import type { AppRouteRecordRaw } from '@/router/type'
+
+const dashboard: AppRouteRecordRaw = {
   path: '/dashboard',
-  name: 'dashboard',
+  name: 'Dashboard',
   component: () => import('@/views/dashboard/index'),
   meta: {
     i18nKey: 'Dashboard',
     icon: 'dashboard',
   },
 }
+
+export default dashboard

src/router/modules/doc-local.ts

@@ -1,6 +1,8 @@
-export default {
+import type { AppRouteRecordRaw } from '@/router/type'
+
+const docLocal: AppRouteRecordRaw = {
   path: '/doc',
-  name: 'doc',
+  name: 'DocLocal',
   component: () => import('@/views/doc/index'),
   meta: {
     i18nKey: 'DocLocal',
@@ -8,3 +10,5 @@ export default {
     windowOpen: 'https://ray-template.yunkuangao.com/ray-template-doc/',
   },
 }
+
+export default docLocal

src/router/modules/doc.ts

@@ -1,6 +1,8 @@
-export default {
+import type { AppRouteRecordRaw } from '@/router/type'
+
+const doc: AppRouteRecordRaw = {
   path: '/doc',
-  name: 'doc',
+  name: 'Doc',
   component: () => import('@/views/doc/index'),
   meta: {
     i18nKey: 'Doc',
@@ -8,3 +10,5 @@ export default {
     windowOpen: 'https://xiaodaigua-ray.github.io/ray-template-doc/',
   },
 }
+
+export default doc

src/router/modules/echart.ts

@@ -1,9 +1,13 @@
-export default {
+import type { AppRouteRecordRaw } from '@/router/type'
+
+const echart: AppRouteRecordRaw = {
   path: '/echart',
-  name: 'echart',
+  name: 'Echart',
   component: () => import('@/views/echart/index'),
   meta: {
     i18nKey: 'Echart',
     icon: 'echart',
   },
 }
+
+export default echart

src/router/modules/error.ts

@@ -1,9 +1,14 @@
-export default {
+import type { AppRouteRecordRaw } from '@/router/type'
+
+const error: AppRouteRecordRaw = {
   path: '/error',
-  name: 'error',
+  name: 'ErrorPage',
   component: () => import('@/views/error/index'),
   meta: {
     i18nKey: 'Error',
     icon: 'error',
+    hidden: true,
   },
 }
+
+export default error

src/router/modules/index.ts

@@ -1,36 +0,0 @@
-import dashboard from './dashboard'
-import reyl from './rely'
-import error from './error'
-import echart from './echart'
-import scrollReveal from './scroll-reveal'
-import axios from './axios'
-import table from './table'
-import doc from './doc'
-import multiMenu from './multi-menu'
-import docLocal from './doc-local'
-import office from './office'
-
-const routes = [
-  dashboard,
-  office,
-  echart,
-  table,
-  axios,
-  scrollReveal,
-  error,
-  multiMenu,
-  doc,
-  docLocal,
-  reyl,
-]
-
-export default routes
-
-/**
- *
- * 弃用自动导入路由模块方式
- *
- * 采用手动引入子路由模块方式
- *
- * 因为自动导入路由方式在实际体验后还是有一些小问题, 综合考虑后, 还是自己手动挡吧
- */

src/router/modules/multi-menu.ts

@@ -1,6 +1,8 @@
-export default {
+import type { AppRouteRecordRaw } from '@/router/type'
+
+const multiMenu: AppRouteRecordRaw = {
   path: '/multi-menu',
-  name: 'multi-menu',
+  name: 'MultiMenu',
   component: () => import('@/views/multi-menu/index'),
   meta: {
     i18nKey: 'MultiMenu',
@@ -9,7 +11,7 @@ export default {
   children: [
     {
       path: 'multi-menu-one',
-      name: 'multi-menu-one',
+      name: 'MultiMenuOne',
       component: () => import('@/views/multi-menu/views/multi-menu-one/index'),
       meta: {
         noLocalTitle: '多级菜单-1',
@@ -17,7 +19,7 @@ export default {
     },
     {
       path: 'multi-menu-two',
-      name: 'multi-menu-two',
+      name: 'MultiMenuTwo',
       component: () => import('@/views/multi-menu/views/multi-menu-two/index'),
       meta: {
         noLocalTitle: '多级菜单-2',
@@ -25,7 +27,7 @@ export default {
       children: [
         {
           path: 'sub-menu',
-          name: 'sub-menu',
+          name: 'SubMenu',
           component: () =>
             import(
               '@/views/multi-menu/views/multi-menu-two/views/sub-menu/index'
@@ -38,3 +40,5 @@ export default {
     },
   ],
 }
+
+export default multiMenu

src/router/modules/office.ts

@@ -1,6 +1,8 @@
-export default {
+import type { AppRouteRecordRaw } from '@/router/type'
+
+const office: AppRouteRecordRaw = {
   path: '/office',
-  name: 'office',
+  name: 'Office',
   component: () => import('@/views/office/index'),
   meta: {
     i18nKey: 'Office',
@@ -10,7 +12,7 @@ export default {
   children: [
     {
       path: '/document',
-      name: 'document',
+      name: 'Document',
       component: () => import('@/views/office/views/document/index'),
       meta: {
         i18nKey: 'Office_Document',
@@ -18,7 +20,7 @@ export default {
     },
     {
       path: '/presentation',
-      name: 'presentation',
+      name: 'Presentation',
       component: () => import('@/views/office/views/presentation/index'),
       meta: {
         i18nKey: 'Office_Presentation',
@@ -26,7 +28,7 @@ export default {
     },
     {
       path: '/spreadsheet',
-      name: 'spreadsheet',
+      name: 'Spreadsheet',
       component: () => import('@/views/office/views/spreadsheet/index'),
       meta: {
         i18nKey: 'Office_Spreadsheet',
@@ -34,3 +36,5 @@ export default {
     },
   ],
 }
+
+export default office

src/router/modules/rely.ts

@@ -1,6 +1,8 @@
-export default {
+import type { AppRouteRecordRaw } from '@/router/type'
+
+const rely: AppRouteRecordRaw = {
   path: '/rely',
-  name: 'rely',
+  name: 'Rely',
   component: () => import('@/views/rely/index'),
   meta: {
     i18nKey: 'Rely',
@@ -9,7 +11,7 @@ export default {
   children: [
     {
       path: '/rely-about',
-      name: 'rely-about',
+      name: 'RelyAbout',
       component: () => import('@/views/rely/views/rely-about/index'),
       meta: {
         i18nKey: 'RelyAbout',
@@ -17,3 +19,5 @@ export default {
     },
   ],
 }
+
+export default rely

src/router/modules/scroll-reveal.ts

@@ -1,6 +1,8 @@
-export default {
+import type { AppRouteRecordRaw } from '@/router/type'
+
+const scrollReveal: AppRouteRecordRaw = {
   path: '/scroll-reveal',
-  name: 'scroll-reveal',
+  name: 'ScrollReveal',
   component: () => import('@/views/scroll-reveal/index'),
   meta: {
     i18nKey: 'scrollReveal',
@@ -8,3 +10,5 @@ export default {
     hidden: true,
   },
 }
+
+export default scrollReveal

src/router/modules/table.ts

@@ -1,9 +1,13 @@
-export default {
+import type { AppRouteRecordRaw } from '@/router/type'
+
+const table: AppRouteRecordRaw = {
   path: '/table',
-  name: 'table',
+  name: 'TableView',
   component: () => import('@/views/table/index'),
   meta: {
     i18nKey: 'Table',
     icon: 'table',
   },
 }
+
+export default table

src/router/route-module.ts

@@ -0,0 +1,38 @@
+import type { AppRouteRecordRaw } from '@/router/type'
+
+import dashboard from './modules/dashboard'
+import reyl from './modules/rely'
+import error from './modules/error'
+import echart from './modules/echart'
+import scrollReveal from './modules/scroll-reveal'
+import axios from './modules/axios'
+import table from './modules/table'
+import doc from './modules/doc'
+import multiMenu from './modules/multi-menu'
+import docLocal from './modules/doc-local'
+import office from './modules/office'
+
+const routes: AppRouteRecordRaw[] = [
+  dashboard,
+  office,
+  echart,
+  table,
+  axios,
+  scrollReveal,
+  error,
+  multiMenu,
+  doc,
+  docLocal,
+  reyl,
+]
+
+export default routes
+
+/**
+ *
+ * 弃用自动导入路由模块方式
+ *
+ * 采用手动引入子路由模块方式
+ *
+ * 因为自动导入路由方式在实际体验后还是有一些小问题, 综合考虑后, 还是自己手动挡吧
+ */

src/router/routes.ts

@@ -1,5 +1,5 @@
 import Layout from '@/layout/index'
-import childrenRoutes from './modules/index'
+import childrenRoutes from './route-module'
 
 const {
   rootRoute: { path },
@@ -22,7 +22,8 @@ export const constantRoutes = [
     /** 错误页面(404) */
     path: '/:catchAll(.*)',
     name: 'error-page',
-    component: () => import('@/views/error/index'),
+    component: Layout,
+    redirect: '/error',
   },
 ]
 

src/router/type.ts

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { RouteRecordRaw } from 'vue-router'
+import type { Recordable } from '@/types/type-utils'
+
+export type Component<T = any> =
+  | ReturnType<typeof defineComponent>
+  | (() => Promise<typeof import('*.vue')>)
+  | (() => Promise<T>)
+
+export interface AppRouteMeta extends IUnknownObjectKey {
+  i18nKey?: string
+  icon?: string
+  windowOpen?: string
+  role?: string[]
+  hidden?: boolean
+  noLocalTitle?: string | number
+  ignoreResetScroll?: boolean
+}
+
+// @ts-ignore
+export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
+  name: string
+  meta: AppRouteMeta
+  component?: Component | string
+  components?: Component
+  children?: AppRouteRecordRaw[]
+  props?: Recordable
+  fullPath?: string
+}

src/store/modules/menu/index.ts

@@ -28,6 +28,7 @@ import RayIcon from '@/components/RayIcon/index'
 import { getCache, setCache } from '@/utils/cache'
 import { validRole } from '@/router/basic'
 import { parse, matchMenuOption, updateDocumentTitle } from './helper'
+import { useI18n } from '@/language/useI18n'
 
 import type { MenuOption } from 'naive-ui'
 import type { RouteMeta } from 'vue-router'

src/types/module.d.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const Component: DefineComponent<{}, {}, any>
+  export default Component
+}
+
+declare module 'virtual:*' {
+  const result: any
+  export default result
+}

src/types/store.d.ts

@@ -3,9 +3,10 @@ export {}
 import type { RouteRecordRaw, RouteMeta } from 'vue-router'
 import type { MenuOption } from 'naive-ui'
 import type { VNode } from 'vue'
+import type { AppRouteRecordRaw } from '@/router/type'
 
 declare global {
-  declare interface IMenuOptions extends RouteRecordRaw, MenuOption {
+  declare interface IMenuOptions extends AppRouteRecordRaw, MenuOption {
     name: string
     key: string | number
     path: string

src/types/type-utils.ts

@@ -1,14 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export type ConditionalKeys<Base, Condition> = NonNullable<
-  // Wrap in `NonNullable` to strip away the `undefined` type from the produced union.
   {
-    // Map through all the keys of the given base type.
-    [Key in keyof Base]: Base[Key] extends Condition // Pick only keys with types extending the given `Condition` type.
-      ? // Retain this key since the condition passes.
-        Key
-      : // Discard this key since the condition fails.
-        never
-
-    // Convert the produced object into a union type of the keys which passed the conditional test.
+    [Key in keyof Base]: Base[Key] extends Condition ? Key : never
   }[keyof Base]
 >
 
@@ -16,3 +9,5 @@ export type ConditionalPick<Base, Condition> = Pick<
   Base,
   ConditionalKeys<Base, Condition>
 >
+
+export type Recordable<T = any> = Record<string, T>

src/utils/element.ts

@@ -1,33 +1,4 @@
 import { validteValueType } from '@use-utils/hook'
-
-/**
- *
- * @param el 父节点对象
- * @param target 是否需要过滤，可按照数组或单个字符过滤
- *
- * @returns 目标节点下所有子节点
- */
-export const getElementChildNodes = (
-  el: HTMLElement,
-  target?: string[] | string,
-) => {
-  if (el) {
-    let nodes = Array.from(el.childNodes)
-
-    if (Array.isArray(target)) {
-      nodes = nodes.filter((el) => target.includes(el.nodeName))
-    } else {
-      if (target) {
-        nodes = nodes.filter((el) => el.nodeName === target)
-      }
-    }
-
-    return nodes
-  } else {
-    return []
-  }
-}
-
 /**
  *
  * @param element Target element dom
@@ -214,3 +185,44 @@ export const colorToRgba = (color: string, alpha = 1) => {
 
   return result
 }
+
+/**
+ *
+ * @param element 需要匹配元素参数名称
+ * @returns 匹配元素列表
+ *
+ * @remark 使用 querySelectorAll 作为检索方法
+ * @remark 如果希望按照 attribute 匹配, 仅需要 'attr:xxx'传递参数即可
+ *
+ * 示例:
+ *
+ * class:
+ * const el = getElement('.demo')
+ * id:
+ * const el = getElement('#demo')
+ * attribute:
+ * const el = getElement('attr:type=button')
+ * 或者可以这样写
+ * const el = getElement('attr:type')
+ */
+export const getElement = (element: string) => {
+  if (!element) {
+    return
+  }
+
+  let queryParam: string
+
+  if (element.startsWith('attr:')) {
+    queryParam = '[' + element.replace('attr:', '') + ']'
+  } else {
+    queryParam = element
+  }
+
+  try {
+    const el = Array.from(document.querySelectorAll(queryParam))
+
+    return el
+  } catch (e) {
+    return []
+  }
+}

src/views/echart/index.tsx

@@ -182,7 +182,7 @@ const Echart = defineComponent({
         duration: 5 * 1000,
       })
 
-      console.log(chart)
+      console.log(baseChartRef.value, chart)
     }
 
     return {
@@ -214,6 +214,7 @@ const Echart = defineComponent({
         <NH2>渲染成功后运行回调函数</NH2>
         <div class="chart--container">
           <RayChart
+            ref="baseChartRef"
             options={this.basePieOptions}
             success={this.handleChartRenderSuccess.bind(this)}
           />

src/views/login/components/Signin/index.tsx

@@ -3,6 +3,7 @@ import { NForm, NFormItem, NInput, NButton, NSpace, NDivider } from 'naive-ui'
 import { setCache } from '@/utils/cache'
 import { useSpin } from '@/spin'
 import { useSignin } from '@/store'
+import { useI18n } from '@/language/useI18n'
 
 import type { FormInst } from 'naive-ui'
 

src/views/login/index.tsx

@@ -21,6 +21,7 @@ import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/c
 
 import { useSetting } from '@/store'
 import { localOptions } from '@/language/index'
+import { useI18n } from '@/language/useI18n'
 
 const Login = defineComponent({
   name: 'Login',

src/views/table/index.tsx

@@ -148,7 +148,7 @@ const TableView = defineComponent({
     }
 
     onMounted(() => {
-      console.log(tableRef.value?.rayTableInstance)
+      console.log(tableRef.value?.tableMethods)
     })
 
     return {

src/vite-env.d.ts

@@ -3,6 +3,7 @@
 /// <reference types="vite-svg-loader" />
 
 import 'vue-router'
+import { AppRouteMeta } from '@/router/type'
 
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
@@ -11,14 +12,7 @@ declare module '*.vue' {
 }
 
 declare module 'vue-router' {
-  interface RouteMeta {
-    i18nKey: string
-    icon?: string
-    windowOpen?: string
-    role?: string[]
-    hidden?: boolean
-    noLocalTitle?: string | number
-  }
+  interface RouteMeta extends AppRouteMeta {}
 }
 
 declare module 'virtual:*' {