@deppon/create-deppon-app 2.2.0

package/template/src/main.ts

@@ -0,0 +1,27 @@
+import { createApp } from 'vue';
+import { setCookieDomain, initIframeStyleFix } from '@deppon/deppon-utils';
+import { VuePlugin as pinia } from '@deppon/deppon-pinia';
+import router from './router';
+import { VuePlugin as request } from '@deppon/deppon-request';
+import App from './App.vue';
+import { vPermission } from './directives/permission';
+
+// ==================== 样式导入 ====================
+// 统一导入所有组件样式，确保构建时样式被正确打包
+import './styles/index';
+
+// ==================== iframe 样式修复 ====================
+// 在 iframe 嵌套时，修复外部壳子页面的 CSS 样式  fix uap css
+initIframeStyleFix();
+
+// ==================== 应用初始化 ====================
+const app = createApp(App);
+// 初始化 cookie 域名
+setCookieDomain();
+// 注册权限指令
+app.directive('permission', vPermission);
+// 安装 Request、Pinia、Router
+app.use(request)
+    .use(pinia)
+    .use(router as any)
+    .mount('#app');

package/template/src/router/index.ts

@@ -0,0 +1,179 @@
+import { createAuthGuard, parseToken, resolveRoutes, type MenuNode } from '@deppon/deppon-auth';
+import { createDepponRouter, type Router } from '@deppon/deppon-router';
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+import { useRouteStore } from '../stores/route';
+import { useUserStore } from '../stores/user';
+import { useProductStore } from '../stores/product';
+import { staticRoutes, developmentRoutes } from './route';
+
+const viewModules = import.meta.glob('../views/**/*.vue');
+const routerBase = import.meta.env.DP_PUBLIC_PATH || '/';
+
+/**
+ * 计算节点的 path（与 pathTransformer 逻辑保持一致）
+ */
+const getNodePath = (node: MenuNode): string => {
+    if (node.uri === null) {
+        return '';
+    }
+    return node.uri || node.path || `/${node.id}`;
+};
+
+/**
+ * 过滤菜单节点，排除 path 为 '/' 的节点
+ */
+const filterMenuNodes = (nodes: MenuNode[]): MenuNode[] => {
+    return nodes.filter(node => {
+        const uri = node.uri;
+        const path = node.path;
+
+        if (uri === '/' || path === '/') {
+            return false;
+        }
+
+        if (uri === null) {
+            return false;
+        }
+
+        const finalPath = getNodePath(node);
+        const trimmedPath = finalPath.trim();
+        return trimmedPath !== '/' && trimmedPath !== '';
+    });
+};
+
+const resolveMenuRoutes = (menuTree: MenuNode[]) =>
+    resolveRoutes(menuTree, {
+        componentResolver: path => {
+            const normalized = path.startsWith('/') ? path.slice(1) : path;
+            return viewModules[`../views/${normalized}.vue`];
+        },
+        metaTransformer: node => ({
+            title: node.text || node.name,
+            icon: node.iconCls || node.icon,
+            hidden: node.hidden === false ? false : node.hidden || false,
+        }),
+        pathTransformer: node => getNodePath(node),
+        nameTransformer: node => node.text || node.name || node.id,
+        skipNoComponent: true,
+    }).filter(route => route.component);
+
+/**
+ * 加载动态路由
+ */
+const loadDynamicRoutes = async () => {
+    const routeStore = useRouteStore();
+
+    if (routeStore.isRoutesLoaded) {
+        return;
+    }
+    if (routeStore.hasMenuTree) {
+        appendDynamicRoutes(routeStore.menuTree);
+        routeStore.setRoutesLoaded(true);
+        return;
+    }
+
+    // TODO: 从服务端获取菜单树
+    // const response = await getMenu(0);
+    // if (response.success) {
+    //     const allNodes: MenuNode[] = response?.nodes || [];
+    //     const menuTree: MenuNode[] = filterMenuNodes(allNodes);
+    //     if (menuTree.length > 0) {
+    //         routeStore.setMenuTree(menuTree);
+    //         appendDynamicRoutes(menuTree);
+    //     }
+    // }
+    routeStore.setRoutesLoaded(true);
+};
+
+const getUserStore = () => {
+    try {
+        return useUserStore();
+    } catch (error) {
+        console.warn('[deppon-auth] 获取用户 Store 失败，请确认 Pinia 是否已初始化', error);
+        return null;
+    }
+};
+
+const authGuard = createAuthGuard({
+    enableLoginCheck: import.meta.env.DP_ENABLE_LOGIN_CHECK === 'true',
+    cookieKeys: ['TGC', '_TOKENUUMS', 'U'],
+    checkLogin: cookies => {
+        return Boolean(cookies.TGC && cookies._TOKENUUMS);
+    },
+    onRequireLogin: () => {
+        getUserStore()?.clearAuth();
+        if (import.meta.env.DEV) {
+            window.open(import.meta.env.DP_LOGIN_URL || '/', '_blank');
+        } else {
+            window.location.href = import.meta.env.DP_LOGIN_URL || '/';
+        }
+    },
+    whiteList: ['/404'],
+    showProgress: true,
+    progressBar: {
+        start: () => NProgress.start(),
+        done: () => NProgress.done(),
+    },
+    onLoggedIn: async cookies => {
+        const token = cookies._TOKENUUMS;
+        if (!token) {
+            return;
+        }
+        const profile = parseToken(token);
+        const userStore = getUserStore();
+        const routeStore = useRouteStore();
+
+        const previousToken = userStore?.token;
+        const isUserChanged = previousToken && previousToken !== token;
+        const isRelogin = !previousToken && token;
+
+        if (isUserChanged || isRelogin) {
+            routeStore.clearMenuTree();
+            routeStore.setRoutesLoaded(false);
+        }
+
+        userStore?.setAuth({ profile, token });
+
+        // 初始化产品信息
+        const productStore = useProductStore();
+        // 如果用户切换或重新登录，清空产品信息并重新加载
+        if (isUserChanged || isRelogin) {
+            productStore.clearProductInfo();
+        }
+        productStore.fetchProductInfo();
+
+        await loadDynamicRoutes();
+    },
+});
+
+// 根据环境决定使用的路由
+const isDevOrTest =
+    import.meta.env.MODE === 'development' || import.meta.env.MODE === 'test' || import.meta.env.MODE === 'dev-local';
+const routes = isDevOrTest ? [...developmentRoutes, ...staticRoutes] : staticRoutes;
+
+const router = createDepponRouter({
+    routes,
+    guards: {
+        beforeEach: authGuard.beforeEach,
+        afterEach: authGuard.afterEach,
+    },
+    routerOptions: {
+        history: 'web',
+        base: routerBase,
+        scrollBehavior: () => ({ top: 0 }),
+    } as any,
+}) as Router;
+
+const appendDynamicRoutes = (menuTree: MenuNode[]) => {
+    const dynamicRoutes = resolveMenuRoutes(menuTree);
+    dynamicRoutes.forEach(route => {
+        const routeName = route.name as string;
+        if (!router.hasRoute(routeName)) {
+            router.addRoute(route);
+        }
+    });
+};
+
+export default router;
+

package/template/src/router/route.ts

@@ -0,0 +1,61 @@
+import type { RouteRecordRaw } from 'vue-router';
+import BaseLayout from '@/layouts/BaseLayout.vue';
+// 统一使用 BaseLayout 作为父级容器（iframe 测试请使用 public/iframe-test.html）
+
+// 根据环境变量判断是否使用 BaseLayout
+// DP_USE_LAYOUT 默认为 true（测试环境），false 表示 iframe 模式（生产环境）
+const useLayout = import.meta.env.DP_USE_LAYOUT !== 'false';
+
+// 静态路由（生产环境使用）
+export const staticRoutes: RouteRecordRaw[] = [
+    {
+        path: '/401',
+        name: 'Unauthorized',
+        component: () => import('../views/error/401.vue'),
+        meta: {
+            title: '未授权',
+            hidden: true,
+        },
+    },
+    {
+        path: '/403',
+        name: 'Forbidden',
+        component: () => import('../views/error/403.vue'),
+        meta: {
+            title: '禁止访问',
+            hidden: true,
+        },
+    },
+    {
+        path: '/404',
+        name: 'NotFound',
+        component: () => import('../views/error/404.vue'),
+        meta: {
+            title: '页面不存在',
+            hidden: true,
+        },
+    },
+    {
+        path: '/:pathMatch(.*)*',
+        redirect: '/404',
+    },
+];
+
+// 开发环境路由（开发环境和测试环境使用）
+export const developmentRoutes: RouteRecordRaw[] = [
+    {
+        path: '/',
+        component: useLayout ? BaseLayout : undefined,
+        redirect: '/home',
+        children: [
+            {
+                path: '/home',
+                name: 'Home',
+                component: () => import('../views/home/index.vue'),
+                meta: { title: '首页' },
+            },
+            // 可以在这里添加开发环境专用的路由
+        ],
+    },
+];
+

package/template/src/stores/menu.ts

@@ -0,0 +1,334 @@
+import { defineStore } from '@deppon/deppon-pinia';
+import { ref, computed } from 'vue';
+
+export interface CommonMenuItem {
+    key: string;
+    path: string;
+    title: string;
+    icon?: any;
+    timestamp?: number; // 添加时间戳，用于判断最早添加的项
+}
+
+const COMMON_MENU_STORAGE_KEY = 'deppon-common-menu';
+const ROUTE_HISTORY_STORAGE_KEY = 'deppon-route-history';
+const MAX_HISTORY_COUNT = 20; // 最多保存20条历史记录
+const DEFAULT_MAX_COMMON_MENU_COUNT = 5; // 默认最多显示5个常用菜单
+
+export const useMenuStore = defineStore('menu', () => {
+    // 常用菜单列表
+    const commonMenuItems = ref<CommonMenuItem[]>([]);
+
+    // 常用菜单最大数量（可动态设置）
+    const maxCommonMenuCount = ref<number>(DEFAULT_MAX_COMMON_MENU_COUNT);
+
+    // 路由访问历史（用于自动填充常用菜单）
+    const routeHistory = ref<Array<{ path: string; title: string; timestamp: number }>>([]);
+
+    // 是否已初始化标志
+    const isInitialized = ref<boolean>(false);
+
+    /**
+     * 从本地存储加载常用菜单
+     */
+    const loadCommonMenuFromStorage = () => {
+        try {
+            const stored = localStorage.getItem(COMMON_MENU_STORAGE_KEY);
+            if (stored) {
+                const parsed = JSON.parse(stored);
+                commonMenuItems.value = Array.isArray(parsed) ? parsed : [];
+            }
+        } catch (error) {
+            commonMenuItems.value = [];
+        }
+    };
+
+    /**
+     * 保存常用菜单到本地存储
+     */
+    const saveCommonMenuToStorage = () => {
+        // 如果还未初始化，不保存（避免在初始化前保存空数据）
+        if (!isInitialized.value) {
+            return;
+        }
+
+        try {
+            localStorage.setItem(COMMON_MENU_STORAGE_KEY, JSON.stringify(commonMenuItems.value));
+        } catch (error) {
+            // 静默失败
+        }
+    };
+
+    /**
+     * 从本地存储加载路由历史
+     */
+    const loadRouteHistoryFromStorage = () => {
+        try {
+            const stored = localStorage.getItem(ROUTE_HISTORY_STORAGE_KEY);
+            if (stored) {
+                routeHistory.value = JSON.parse(stored);
+            }
+        } catch (error) {
+            routeHistory.value = [];
+        }
+    };
+
+    /**
+     * 保存路由历史到本地存储
+     */
+    const saveRouteHistoryToStorage = () => {
+        try {
+            // 只保留最近的记录
+            const recentHistory = routeHistory.value
+                .sort((a, b) => b.timestamp - a.timestamp)
+                .slice(0, MAX_HISTORY_COUNT);
+            localStorage.setItem(ROUTE_HISTORY_STORAGE_KEY, JSON.stringify(recentHistory));
+        } catch (error) {
+            // 静默失败
+        }
+    };
+
+    /**
+     * 添加路由访问记录
+     */
+    const addRouteToHistory = (path: string, title: string) => {
+        // 排除一些不需要记录的路径
+        const excludePaths = ['/', '/404', '/401', '/403', '/home'];
+        if (excludePaths.includes(path)) {
+            return;
+        }
+
+        // 检查是否已存在相同路径的记录
+        const existingIndex = routeHistory.value.findIndex(item => item.path === path);
+
+        if (existingIndex >= 0) {
+            // 更新现有记录的时间戳
+            routeHistory.value[existingIndex].timestamp = Date.now();
+            routeHistory.value[existingIndex].title = title;
+        } else {
+            // 添加新记录
+            routeHistory.value.push({
+                path,
+                title,
+                timestamp: Date.now(),
+            });
+        }
+
+        // 保存到本地存储
+        saveRouteHistoryToStorage();
+
+        // 自动更新常用菜单
+        updateCommonMenuFromHistory();
+    };
+
+    /**
+     * 根据路由历史自动更新常用菜单
+     * 根据最新打开的前5个路由进行填充
+     * 如果已经在常用菜单中存在，则更新其时间戳
+     * 如果常用菜单已满，移除最早添加的项，然后添加新的
+     */
+    const updateCommonMenuFromHistory = () => {
+        if (routeHistory.value.length === 0) {
+            return;
+        }
+
+        // 按时间戳排序，获取最近访问的路由
+        const recentRoutes = routeHistory.value.sort((a, b) => b.timestamp - a.timestamp);
+
+        // 确保常用菜单项有时间戳（兼容旧数据）
+        commonMenuItems.value.forEach(item => {
+            if (!item.timestamp) {
+                item.timestamp = Date.now();
+            }
+        });
+
+        // 获取当前常用菜单中已存在的路径映射
+        const existingItemsMap = new Map<string, CommonMenuItem>();
+        commonMenuItems.value.forEach(item => {
+            existingItemsMap.set(item.path, item);
+        });
+
+        // 处理最近访问的路由，最多处理 maxCommonMenuCount 个
+        // 使用递增的时间戳，确保最新访问的路由时间戳最大（显示在最前面）
+        let baseTimestamp = Date.now();
+        const processedRoutes: CommonMenuItem[] = [];
+
+        for (let i = 0; i < recentRoutes.slice(0, maxCommonMenuCount.value).length; i++) {
+            const route = recentRoutes[i];
+
+            // 排除首页
+            if (route.path === '/home') {
+                continue;
+            }
+
+            const existingItem = existingItemsMap.get(route.path);
+            // 使用递增的时间戳，确保最新访问的路由时间戳最大
+            const itemTimestamp = baseTimestamp + (maxCommonMenuCount.value - i);
+
+            if (existingItem) {
+                // 如果已存在，更新其时间戳（使用更大的时间戳，确保显示在最前面）
+                existingItem.timestamp = itemTimestamp;
+                existingItem.title = route.title; // 更新标题（可能变化）
+                processedRoutes.push(existingItem);
+            } else {
+                // 如果不存在，创建新项
+                processedRoutes.push({
+                    key: `common-${route.path.replace(/\//g, '-')}-${itemTimestamp}`,
+                    path: route.path,
+                    title: route.title,
+                    timestamp: itemTimestamp,
+                });
+            }
+        }
+
+        // 合并现有项和新项，去重（按路径）
+        const mergedMap = new Map<string, CommonMenuItem>();
+        // 先添加现有项（保留已有的）
+        commonMenuItems.value.forEach(item => {
+            mergedMap.set(item.path, item);
+        });
+        // 再添加新项（会覆盖已存在的，更新其时间戳）
+        processedRoutes.forEach(item => {
+            mergedMap.set(item.path, item);
+        });
+
+        // 按时间戳排序，最新的在前（时间戳大的在前）
+        const sortedItems = Array.from(mergedMap.values()).sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
+
+        // 保留最新的 maxCommonMenuCount 个
+        commonMenuItems.value = sortedItems.slice(0, maxCommonMenuCount.value);
+
+        saveCommonMenuToStorage();
+    };
+
+    /**
+     * 删除常用菜单项
+     */
+    const handleCommonMenuDelete = (key: string) => {
+        const index = commonMenuItems.value.findIndex(item => item.key === key);
+        if (index >= 0) {
+            commonMenuItems.value.splice(index, 1);
+            saveCommonMenuToStorage();
+        }
+    };
+
+    /**
+     * 手动添加常用菜单项
+     */
+    const addCommonMenuItem = (item: CommonMenuItem) => {
+        // 排除首页
+        if (item.path === '/home') {
+            return;
+        }
+
+        // 确保有时间戳
+        if (!item.timestamp) {
+            item.timestamp = Date.now();
+        }
+
+        // 检查是否已存在
+        const existingIndex = commonMenuItems.value.findIndex(menu => menu.path === item.path);
+        if (existingIndex >= 0) {
+            // 如果已存在，更新其时间戳为当前时间（确保显示在最前面）
+            commonMenuItems.value[existingIndex].timestamp = Date.now();
+            commonMenuItems.value[existingIndex].title = item.title;
+        } else {
+            // 如果不存在，添加新项，使用当前时间戳（确保显示在最前面）
+            item.timestamp = Date.now();
+            commonMenuItems.value.push(item);
+        }
+
+        // 按时间戳排序，最新的在前（时间戳最大的在最前面）
+        commonMenuItems.value.sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
+
+        // 如果超过最大数量，移除最早添加的项（时间戳最小的）
+        if (commonMenuItems.value.length > maxCommonMenuCount.value) {
+            commonMenuItems.value = commonMenuItems.value.slice(0, maxCommonMenuCount.value);
+        }
+
+        saveCommonMenuToStorage();
+    };
+
+    /**
+     * 设置常用菜单最大数量
+     */
+    const setMaxCommonMenuCount = (max: number) => {
+        maxCommonMenuCount.value = max || DEFAULT_MAX_COMMON_MENU_COUNT;
+        // 如果当前菜单数量超过新的最大值，移除多余的
+        if (commonMenuItems.value.length > maxCommonMenuCount.value) {
+            commonMenuItems.value = commonMenuItems.value.slice(0, maxCommonMenuCount.value);
+            saveCommonMenuToStorage();
+        }
+    };
+
+    /**
+     * 初始化：从本地存储加载数据
+     */
+    const init = (maxCount?: number) => {
+        // 先加载历史记录和常用菜单（在设置最大值之前）
+        loadRouteHistoryFromStorage();
+        loadCommonMenuFromStorage();
+
+        // 清理已存在的首页
+        const hasExcludedPath = commonMenuItems.value.some(item => item.path === '/home');
+        if (hasExcludedPath) {
+            commonMenuItems.value = commonMenuItems.value.filter(item => item.path !== '/home');
+            saveCommonMenuToStorage();
+        }
+
+        // 如果传入了最大数量，设置它
+        if (maxCount !== undefined) {
+            setMaxCommonMenuCount(maxCount);
+        }
+
+        // 如果常用菜单为空且历史记录不为空，尝试从历史记录填充
+        // 注意：只有在常用菜单完全为空时才填充，避免覆盖已有数据
+        if (commonMenuItems.value.length === 0 && routeHistory.value.length > 0) {
+            updateCommonMenuFromHistory();
+        }
+
+        // 确保菜单数量不超过最大值（但不要清空已有数据）
+        // 只有在超过最大值时才截取，保留最新的
+        if (commonMenuItems.value.length > maxCommonMenuCount.value) {
+            // 按时间戳排序，保留最新的
+            commonMenuItems.value.sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
+            commonMenuItems.value = commonMenuItems.value.slice(0, maxCommonMenuCount.value);
+            saveCommonMenuToStorage();
+        }
+
+        // 标记为已初始化，之后可以正常保存
+        isInitialized.value = true;
+    };
+
+    // 计算属性：获取格式化的常用菜单（用于 ProLayout）
+    const formattedCommonMenu = computed(() => {
+        // 过滤掉首页
+        const filteredItems = commonMenuItems.value.filter(item => item.path !== '/home');
+
+        if (filteredItems.length === 0) {
+            return [];
+        }
+        // 直接使用过滤后的数组，顺序已经正确（最新的在前）
+        return [
+            {
+                type: 'common',
+                title: '常用菜单',
+                children: filteredItems,
+            },
+        ];
+    });
+
+    return {
+        commonMenuItems,
+        routeHistory,
+        formattedCommonMenu,
+        maxCommonMenuCount,
+        isInitialized,
+        addRouteToHistory,
+        handleCommonMenuDelete,
+        addCommonMenuItem,
+        updateCommonMenuFromHistory,
+        setMaxCommonMenuCount,
+        init,
+    };
+});
+