@jnrs/vue-core 1.0.1

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * as router from './utils/router';

package/dist/index.js

@@ -0,0 +1 @@
+export * as router from './utils/router';

package/dist/utils/router/defaults.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 默认配置项
+ * @property history - 路由历史模式
+ * @property routes - 路由记录数组
+ */
+declare const DEFAULT_OPTIONS: {
+    history: import("vue-router").RouterHistory;
+    routes: never[];
+};
+/**
+ * 默认布局名称
+ * @description 用于标识应用的主布局组件
+ */
+declare const LAYOUT_NAME = "Layout";
+/**
+ * 模块基础路径
+ * @description 用于动态导入视图组件的基础路径
+ */
+declare const MODULES_BASE = "";
+/**
+ * 异步获取菜单项的默认实现
+ * @returns 空菜单项数组的 Promise
+ */
+declare const asyncGetMenus: () => Promise<never[]>;
+export { DEFAULT_OPTIONS, LAYOUT_NAME, MODULES_BASE, asyncGetMenus };

package/dist/utils/router/defaults.js

@@ -0,0 +1,26 @@
+import { createWebHistory } from 'vue-router';
+/**
+ * 默认配置项
+ * @property history - 路由历史模式
+ * @property routes - 路由记录数组
+ */
+const DEFAULT_OPTIONS = {
+    history: createWebHistory(),
+    routes: []
+};
+/**
+ * 默认布局名称
+ * @description 用于标识应用的主布局组件
+ */
+const LAYOUT_NAME = 'Layout';
+/**
+ * 模块基础路径
+ * @description 用于动态导入视图组件的基础路径
+ */
+const MODULES_BASE = '';
+/**
+ * 异步获取菜单项的默认实现
+ * @returns 空菜单项数组的 Promise
+ */
+const asyncGetMenus = () => Promise.resolve([]);
+export { DEFAULT_OPTIONS, LAYOUT_NAME, MODULES_BASE, asyncGetMenus };

package/dist/utils/router/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : index.ts
+ * @Date   : 2025/10/07
+ * @Desc.  : 路由入口
+ */
+import { useRoute, type RouteLocationRaw, type NavigationFailure } from 'vue-router';
+import type { MenuItem, CreateVueRouterOptions } from './types';
+/**
+ * 创建 Vue Router 实例
+ * @param options - 实例的配置项
+ * @param layoutName - 布局组件名称，默认为 'Layout'
+ * @param modulesBase - 模块基础路径，默认为 ''
+ * @param modulesList - 模块列表对象
+ * @param asyncGetMenusFn - 异步获取菜单项处理函数
+ * @returns router 路由实例
+ * @returns setupDynamicRoutes 动态路由加载函数
+ * @returns useRoute 路由使用函数
+ * @returns routerPush 路由跳转函数
+ * @returns routerReplace 路由替换函数
+ * @returns getRoutes 获取路由函数
+ * @example const { router, setupDynamicRoutes } = createVueRouter({})
+ */
+declare const createVueRouter: ({ options, layoutName, modulesBase, modulesList, asyncGetMenusFn }?: CreateVueRouterOptions) => {
+    router: import("vue-router").Router;
+    setupDynamicRoutes: () => Promise<void>;
+    useRoute: typeof useRoute;
+    routerPush: (to: RouteLocationRaw) => Promise<undefined | void | NavigationFailure>;
+    routerReplace: (to: RouteLocationRaw) => Promise<undefined | void | NavigationFailure>;
+    getRoutes: () => MenuItem[];
+};
+export { createVueRouter };

package/dist/utils/router/index.js

@@ -0,0 +1,162 @@
+/**
+ * @Author : TanRui
+ * @WeChat : Tan578853789
+ * @File   : index.ts
+ * @Date   : 2025/10/07
+ * @Desc.  : 路由入口
+ */
+import { createRouter, useRoute } from 'vue-router';
+import { DEFAULT_OPTIONS, LAYOUT_NAME, MODULES_BASE, asyncGetMenus } from './defaults';
+/**
+ * 创建 Vue Router 实例
+ * @param options - 实例的配置项
+ * @param layoutName - 布局组件名称，默认为 'Layout'
+ * @param modulesBase - 模块基础路径，默认为 ''
+ * @param modulesList - 模块列表对象
+ * @param asyncGetMenusFn - 异步获取菜单项处理函数
+ * @returns router 路由实例
+ * @returns setupDynamicRoutes 动态路由加载函数
+ * @returns useRoute 路由使用函数
+ * @returns routerPush 路由跳转函数
+ * @returns routerReplace 路由替换函数
+ * @returns getRoutes 获取路由函数
+ * @example const { router, setupDynamicRoutes } = createVueRouter({})
+ */
+const createVueRouter = ({ options = {}, layoutName = LAYOUT_NAME, modulesBase = MODULES_BASE, modulesList = [], asyncGetMenusFn } = {}) => {
+    const ops = { ...DEFAULT_OPTIONS, ...options };
+    // 创建路由实例
+    const router = createRouter(ops);
+    // 组件加载器
+    const getComponentLoader = (safePath) => {
+        // console.log(modulesBase + `/src/views${safePath}.vue`)
+        return modulesList[modulesBase + `/src/views${safePath}.vue`];
+    };
+    // 异步获取菜单项处理函数
+    const handleAsyncGetMenus = asyncGetMenusFn ?? asyncGetMenus;
+    // 将菜单项转换为路由记录
+    const menuToRoute = async (menus, parent) => {
+        for (const menu of menus) {
+            menu.meta.fullPathTitle = parent
+                ? parent.meta.fullPathTitle + ',' + menu.meta.title
+                : menu.meta.title;
+            // 当前项若没有component，则为目录，直接递归处理
+            if (!menu.component) {
+                if (menu.children && menu.children.length > 0) {
+                    await menuToRoute(menu.children, menu);
+                }
+                continue;
+            }
+            // 安全处理组件路径
+            const safePath = menu.component.replace(/[^a-zA-Z0-9/._-]/g, '');
+            if (!safePath.startsWith('/') || safePath.includes('..')) {
+                console.warn('[Router] 组件加载失败', {
+                    code: 'INVALID_COMPONENT_PATH',
+                    message: `组件路径拼写不符合规则，应以 '/' 开头且不能包含 '..'，请检查 component 字段是否配置正确`,
+                    menu: {
+                        path: menu.path,
+                        name: menu.name,
+                        component: menu.component
+                    },
+                    timestamp: new Date().toISOString()
+                });
+                continue;
+            }
+            // 获取组件加载器
+            const loader = getComponentLoader(safePath);
+            if (!loader) {
+                console.warn('[Router] 组件加载失败', {
+                    code: 'COMPONENT_NOT_FOUND',
+                    message: `组件加载器无效，请检查 component 字段是否配置正确`,
+                    menu: {
+                        path: menu.path,
+                        name: menu.name,
+                        component: menu.component
+                    },
+                    timestamp: new Date().toISOString()
+                });
+                continue;
+            }
+            // 构建路由记录
+            const routeRecord = {
+                name: menu.name,
+                path: menu.path,
+                meta: menu.meta,
+                redirect: menu.redirect,
+                component: () => loader()
+            };
+            // 根据 global 字段决定添加为全局路由还是布局子路由
+            if (menu.meta?.global) {
+                router.addRoute(routeRecord);
+            }
+            else {
+                router.addRoute(layoutName, routeRecord);
+            }
+        }
+    };
+    // 加载动态路由
+    const setupDynamicRoutes = async () => {
+        const userRoutes = await handleAsyncGetMenus();
+        menuToRoute(userRoutes);
+    };
+    // 获取用户权限
+    const canUserAccess = async (to) => {
+        const isAuthenticated = true;
+        return to.name === 'Login' || to.meta.noAuth || isAuthenticated;
+    };
+    // 全局前置守卫
+    router.beforeEach(async (to) => {
+        const canAccess = await canUserAccess(to);
+        if (!canAccess) {
+            return {
+                name: 'Login',
+                query: { redirect: to.name?.toString() }
+            };
+        }
+    });
+    // 路由跳转
+    const routerPush = async (to) => {
+        try {
+            const failure = await router.push(to);
+            return failure;
+        }
+        catch (e) {
+            console.warn('[router.push] 失败', {
+                code: 'ROUTER_NOT_MATCH',
+                message: '未匹配到有效路由',
+                error: to || e,
+                timestamp: new Date().toISOString()
+            });
+            router.push({ name: '404' });
+        }
+    };
+    // 路由替换
+    const routerReplace = async (to) => {
+        try {
+            const failure = await router.replace(to);
+            return failure;
+        }
+        catch (e) {
+            console.warn('[router.replace] 失败', {
+                code: 'ROUTER_NOT_MATCH',
+                message: '未匹配到有效路由',
+                error: to || e,
+                timestamp: new Date().toISOString()
+            });
+            router.replace({ name: '404' });
+        }
+    };
+    // 获取路由
+    const getRoutes = () => {
+        const temp = [];
+        for (const route of router.getRoutes()) {
+            temp.push({
+                name: route.name,
+                path: route.path,
+                meta: route.meta
+            });
+        }
+        return temp;
+    };
+    return { router, setupDynamicRoutes, useRoute, routerPush, routerReplace, getRoutes };
+};
+export { createVueRouter };

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@jnrs/vue-core",
+  "version": "1.0.1",
+  "description": "As the name suggests.",
+  "author": "Talia-Tan",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "keywords": [
+    "jnrs",
+    "vue-core",
+    "typescript",
+    "helper"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "rimraf": "^6.0.1",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "dev": "tsc --watch --declaration --outDir dist",
+    "build": "rimraf dist && tsc",
+    "release": "node ./scripts/release.mjs"
+  }
+}