types: 添加完整路由配置表类型声明

xiaoxian521 · xiaoxian521 · commit 28e58e4b4ea9 · 2022-08-19T15:03:52.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@ dist
 dist-ssr
 *.local
 .eslintcache
+report.html
 
 yarn.lock
 npm-debug.log*
diff --git a/src/layout/types.ts b/src/layout/types.ts
@@ -12,7 +12,6 @@ export const routerArrays: Array<RouteConfigs> = [
 
 export type routeMetaType = {
   title?: string;
-  i18n?: boolean;
   icon?: string;
   showLink?: boolean;
   savedPosition?: boolean;
@@ -65,7 +64,6 @@ export type childrenType = {
   meta?: {
     icon?: string;
     title?: string;
-    i18n?: boolean;
     showParent?: boolean;
     extraIcon?: {
       svg?: boolean;
diff --git a/src/router/modules/able.ts b/src/router/modules/able.ts
@@ -1,7 +1,8 @@
 import { $t } from "/@/plugins/i18n";
+import type { RouteConfigsTable } from "/#/index";
 const Layout = () => import("/@/layout/index.vue");
 
-const ableRouter = {
+const ableRouter: RouteConfigsTable = {
   path: "/able",
   component: Layout,
   redirect: "/able/watermark",
diff --git a/src/router/modules/about.ts b/src/router/modules/about.ts
@@ -1,7 +1,8 @@
 import { $t } from "/@/plugins/i18n";
+import type { RouteConfigsTable } from "/#/index";
 const Layout = () => import("/@/layout/index.vue");
 
-const aboutRouter = {
+const aboutRouter: RouteConfigsTable = {
   path: "/about",
   component: Layout,
   redirect: "/about/index",
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
@@ -1,7 +1,8 @@
 import { $t } from "/@/plugins/i18n";
+import type { RouteConfigsTable } from "/#/index";
 const Layout = () => import("/@/layout/index.vue");
 
-const componentsRouter = {
+const componentsRouter: RouteConfigsTable = {
   path: "/components",
   component: Layout,
   redirect: "/components/video",
diff --git a/src/router/modules/editor.ts b/src/router/modules/editor.ts
@@ -1,7 +1,8 @@
 import { $t } from "/@/plugins/i18n";
+import type { RouteConfigsTable } from "/#/index";
 const Layout = () => import("/@/layout/index.vue");
 
-const editorRouter = {
+const editorRouter: RouteConfigsTable = {
   path: "/editor",
   component: Layout,
   redirect: "/editor/index",
diff --git a/src/router/modules/error.ts b/src/router/modules/error.ts
@@ -1,7 +1,8 @@
 import { $t } from "/@/plugins/i18n";
+import type { RouteConfigsTable } from "/#/index";
 const Layout = () => import("/@/layout/index.vue");
 
-const errorRouter = {
+const errorRouter: RouteConfigsTable = {
   path: "/error",
   component: Layout,
   redirect: "/error/403",
diff --git a/src/router/modules/flowchart.ts b/src/router/modules/flowchart.ts
@@ -1,7 +1,8 @@
 import { $t } from "/@/plugins/i18n";
+import type { RouteConfigsTable } from "/#/index";
 const Layout = () => import("/@/layout/index.vue");
 
-const flowChartRouter = {
+const flowChartRouter: RouteConfigsTable = {
   path: "/flowChart",
   component: Layout,
   redirect: "/flowChart/index",
diff --git a/src/router/modules/formdesign.ts b/src/router/modules/formdesign.ts
@@ -1,7 +1,8 @@
 import { $t } from "/@/plugins/i18n";
+import type { RouteConfigsTable } from "/#/index";
 const Layout = () => import("/@/layout/index.vue");
 
-const formDesignRouter = {
+const formDesignRouter: RouteConfigsTable = {
   path: "/formDesign",
   component: Layout,
   redirect: "/formDesign/index",
diff --git a/src/router/modules/guide.ts b/src/router/modules/guide.ts
@@ -1,7 +1,8 @@
 import { $t } from "/@/plugins/i18n";
+import type { RouteConfigsTable } from "/#/index";
 const Layout = () => import("/@/layout/index.vue");
 
-const guideRouter = {
+const guideRouter: RouteConfigsTable = {
   path: "/guide",
   component: Layout,
   redirect: "/guide/index",
diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
@@ -1,7 +1,8 @@
 import { $t } from "/@/plugins/i18n";
+import type { RouteConfigsTable } from "/#/index";
 const Layout = () => import("/@/layout/index.vue");
 
-const homeRouter = {
+const homeRouter: RouteConfigsTable = {
   path: "/",
   name: "Home",
   component: Layout,
diff --git a/src/router/modules/list.ts b/src/router/modules/list.ts
@@ -1,7 +1,8 @@
 import { $t } from "/@/plugins/i18n";
+import type { RouteConfigsTable } from "/#/index";
 const Layout = () => import("/@/layout/index.vue");
 
-const ableRouter = {
+const ableRouter: RouteConfigsTable = {
   path: "/list",
   component: Layout,
   redirect: "/list/card",
diff --git a/src/router/modules/nested.ts b/src/router/modules/nested.ts
@@ -1,7 +1,8 @@
 import { $t } from "/@/plugins/i18n";
+import type { RouteConfigsTable } from "/#/index";
 const Layout = () => import("/@/layout/index.vue");
 
-const nestedRouter = {
+const nestedRouter: RouteConfigsTable = {
   path: "/nested",
   component: Layout,
   redirect: "/nested/menu1/menu1-1",
diff --git a/src/router/modules/ppt.ts b/src/router/modules/ppt.ts
@@ -1,7 +1,8 @@
+import type { RouteConfigsTable } from "/#/index";
 const Layout = () => import("/@/layout/index.vue");
 const IFrame = () => import("/@/layout/frameView.vue");
 
-const pptRouter = {
+const pptRouter: RouteConfigsTable = {
   path: "/ppt",
   component: Layout,
   redirect: "/ppt/index",
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
@@ -1,7 +1,8 @@
 import { $t } from "/@/plugins/i18n";
+import type { RouteConfigsTable } from "/#/index";
 const Layout = () => import("/@/layout/index.vue");
 
-const remainingRouter = [
+const remainingRouter: Array<RouteConfigsTable> = [
   {
     path: "/login",
     name: "Login",
diff --git a/src/router/modules/result.ts b/src/router/modules/result.ts
@@ -1,7 +1,8 @@
 import { $t } from "/@/plugins/i18n";
+import type { RouteConfigsTable } from "/#/index";
 const Layout = () => import("/@/layout/index.vue");
 
-const resultRouter = {
+const resultRouter: RouteConfigsTable = {
   path: "/result",
   component: Layout,
   redirect: "/result/success",
diff --git a/types/index.ts b/types/index.ts
@@ -1,3 +1,5 @@
+import { type RouteComponent } from "vue-router";
+
 export interface StorageConfigs {
   version?: string;
   title?: string;
@@ -48,3 +50,82 @@ export interface ResponsiveStorage {
   };
   tags?: Array<any>;
 }
+
+export interface RouteChildrenConfigsTable {
+  /** 子路由地址 `必填` */
+  path: string;
+  /** 路由名字（对应不要重复，根当前组件的`name`保持一致）`必填` */
+  name?: string;
+  /** 路由重定向 `可选` */
+  redirect?: string;
+  /** 按需加载组件 `可选` */
+  component?: RouteComponent;
+  meta?: {
+    /** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加） `必填` */
+    title: string;
+    /** 菜单图标 `可选` */
+    icon?: string;
+    /** 菜单名称右侧的额外图标，支持`fontawesome`、`iconfont`、`element-plus-icon` `可选` */
+    extraIcon?: {
+      svg?: boolean;
+      name?: string;
+    };
+    /** 是否在菜单中显示（默认`true`）`可选` */
+    showLink?: boolean;
+    /** 是否显示父级菜单 `可选` */
+    showParent?: boolean;
+    /** 路由权限设置 `可选` */
+    authority?: Array<string>;
+    /** 路由组件缓存（开启 `true`、关闭 `false`）`可选` */
+    keepAlive?: boolean;
+    /** 内嵌的`iframe`链接 `可选` */
+    frameSrc?: string;
+    /** `iframe`页是否开启首次加载动画（默认`true`）`可选` */
+    frameLoading?: boolean;
+    /** 页面加载动画（有两种形式，一种直接采用vue内置的`transitions`动画，另一种是使用`animate.css`写进、离场动画）`可选` */
+    transition?: {
+      /**
+       * @description 当前路由动画效果
+       * @see {@link https://next.router.vuejs.org/guide/advanced/transitions.html#transitions}
+       */
+      name?: string;
+      /** 进场动画 */
+      enterTransition?: string;
+      /** 离场动画 */
+      leaveTransition?: string;
+    };
+    /** 动态路由可打开的最大数量 `可选` */
+    dynamicLevel?: number;
+    /** 刷新重定向（用于未开启标签页缓存，刷新页面获取不到动态`title`）`可选` */
+    refreshRedirect?: string;
+  };
+  /** 子路由配置项 */
+  children?: Array<RouteChildrenConfigsTable>;
+}
+
+/**
+ * @description 完整路由配置表
+ * @see {@link https://pure-admin-doc.vercel.app/pages/782b6e/#%E4%B8%80-%E9%85%8D%E7%BD%AE%E9%A1%B9}
+ */
+export interface RouteConfigsTable {
+  /** 路由地址 `必填` */
+  path: string;
+  /** 路由名字（保持唯一）`可选` */
+  name?: string;
+  /** `Layout`组件 `可选` */
+  component?: RouteComponent;
+  /** 路由重定向 `可选` */
+  redirect?: string;
+  meta?: {
+    /** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加）`必填` */
+    title: string;
+    /** 菜单图标 `可选` */
+    icon?: string;
+    /** 是否在菜单中显示（默认`true`）`可选` */
+    showLink?: boolean;
+    /** 菜单升序排序，值越高排的越后（只针对顶级路由）`可选` */
+    rank?: number;
+  };
+  /** 子路由配置项 */
+  children?: Array<RouteChildrenConfigsTable>;
+}
