@deppon/create-deppon-app 2.2.0

package/template/src/utils/request.ts

@@ -0,0 +1,293 @@
+import request from '@deppon/deppon-request';
+import { ElMessageBox, ElMessage } from '@deppon/deppon-ui';
+import { copyErrorToClipboard } from './errorAnalyzer';
+import { createExpandableMessageVNode } from './messageVNode';
+
+/**
+ * 从环境变量获取 API 地址
+ * @param key - 环境变量键名
+ * @returns API 地址，如果不存在则返回空字符串
+ */
+const getApiUrl = (key: string): string => {
+    const env = import.meta.env as Record<string, string | undefined>;
+    return env[key] ?? '';
+};
+
+/**
+ * 检查 URL 是否应该使用代理
+ * @param url - 请求的 URL 路径（此参数保留以保持接口一致性，但当前不检查具体路径）
+ * @returns 是否应该使用代理
+ *
+ * 说明：
+ * - 仅在开发服务器运行时（import.meta.env.DEV === true）使用代理
+ * - 构建后的代码（即使是 development mode）也会使用完整的 API URL
+ * - 在开发环境中，所有相对路径都使用代理，代理配置在 vite.config.ts 中管理
+ * - 这样本地开发时使用代理避免 CORS，测试服务器构建后直接请求 API
+ * - 添加新的 API 路径时，只需在 vite.config.ts 中配置代理，无需修改此文件
+ */
+const shouldUseProxy = (url: string): boolean => {
+    // 只有在开发服务器运行时才使用代理
+    // import.meta.env.DEV 在 dev server 运行时为 true，构建后为 false
+    return import.meta.env.DEV;
+};
+
+/**
+ * 根据 URL 路径自动识别应该使用的 API 地址
+ * @param url - 请求的 URL 路径
+ */
+const getBaseURLByUrl = (url: string): string => {
+    // 如果 URL 已经是完整地址，直接返回空（不添加 baseURL）
+    if (url.startsWith('http')) {
+        return '';
+    }
+
+    // 开发环境中，如果 URL 会被代理处理，则不添加 baseURL
+    if (shouldUseProxy(url)) {
+        return '';
+    }
+
+    // 根据 URL 路径特征判断使用哪个系统的哪个 API 地址
+    // prefercenter 系统路径特征
+    if (url.includes('/cmc-prefer-web/')) {
+        return getApiUrl('DP_API_HOST');
+    }
+
+    // UAP 用户信息服务
+    if (url.includes('/uap-index-service/')) {
+        return getApiUrl('DP_UAP_API_HOST') || '';
+    }
+
+    // 默认使用主业务 API 地址
+    return getApiUrl('DP_API_HOST');
+};
+
+// 包装请求函数，自动添加 baseURL
+const requestWithBaseURL = async (options: any) => {
+    // 检查 Content-Type 是否为 multipart/form-data
+    const contentType = options.headers?.['Content-Type'] || options.headers?.['content-type'];
+    const isMultipartFormData = contentType && contentType.includes('multipart/form-data');
+    
+    // 过滤掉空参数（处理 params 和 data），但 multipart/form-data 不处理
+    if (!isMultipartFormData) {
+        if (options.params && typeof options.params === 'object') {
+            options.params = filterEmptyParams(options.params);
+        }
+        if (options.data && typeof options.data === 'object') {
+            options.data = filterEmptyParams(options.data);
+        }
+    }
+
+    const baseURL = getBaseURLByUrl(options.url ?? '');
+    // 如果 URL 不是以 http 开头，且配置了 baseURL，则添加 baseURL
+    if (options.url && !options.url.startsWith('http') && baseURL) {
+        options.url = `${baseURL}${options.url}`;
+    }
+    
+    try {
+        const response = await request(options);
+        // 统一处理 success: false 的情况
+        if (response && response.success === false) {
+            // 优先使用 errMessage，确保是字符串类型
+            let errorMessage: string = '';
+            if (response?.errMessage) {
+                errorMessage = typeof response.errMessage === 'string' ? response.errMessage : String(response.errMessage);
+            } else {
+                const fallbackMessage = response?.data || response?.message;
+                errorMessage = typeof fallbackMessage === 'string' ? fallbackMessage : String(fallbackMessage || '请求失败');
+            }
+            // 使用可展开/收缩的消息 vnode
+            const messageVNode = createExpandableMessageVNode(errorMessage, 5);
+            
+            // 使用 ElMessageBox 显示错误信息
+            ElMessageBox({
+                title: '提示',
+                message: messageVNode,
+                confirmButtonText: '知道了',
+                type: 'warning',
+                draggable: true,
+                dangerouslyUseHTMLString: false,
+            })
+                .then(() => {
+                    // 用户点击确定后的处理
+                })
+                .catch(() => {
+                    // 用户关闭对话框
+                });
+            // 使用 warn 记录
+            console.error('Request success: false:', response);
+            // 不抛出错误，直接返回，让调用方知道请求失败但不影响后续流程
+        }
+        return response;
+    } catch (error: any) {
+        // 使用 error 记录
+        console.error('Request error:', error);
+        
+        // 统一处理错误消息，安全地拼接 message 和 errMessage
+        let errorMessage = '请求失败';
+        if (error?.data) {
+            const data = error.data;
+            const message = data.message || '';
+            const errMessage = data.errMessage || '';
+            if (message || errMessage) {
+                errorMessage = message + (errMessage ? (message ? '：' : '') + errMessage : '');
+            } else if (typeof data === 'string') {
+                errorMessage = data;
+            }
+        } else if (error?.message) {
+            errorMessage = error.message;
+        }
+        
+        // success: false 的情况下不显示复制错误信息按钮
+        const showCancelButton = !error?.isSuccessFalse;
+        
+        // 统一处理错误消息，格式化显示错误信息
+        let finalMessage = String(errorMessage);
+        const responseData = error?.response?.data || error?.data || {};
+        const status = error?.response?.status || error?.status || responseData.status || '';
+        const url = error?.response?.config?.url || error?.config?.url || responseData.path || '';
+        
+        // 格式化错误信息
+        const errorParts: string[] = [];
+        
+        // 错误类型
+        if (responseData.error) {
+            // 将错误类型转换为中文
+            const errorTypeMap: Record<string, string> = {
+                'Internal Server Error': '服务异常',
+                'Bad Request': '请求错误',
+                'Unauthorized': '未授权',
+                'Forbidden': '禁止访问',
+                'Not Found': '未找到',
+                'Method Not Allowed': '方法不允许',
+                'Conflict': '冲突',
+                'Unprocessable Entity': '无法处理的实体',
+                'Too Many Requests': '请求过多',
+                'Gateway Timeout': '网关超时',
+                'Service Unavailable': '服务不可用',
+                'Bad Gateway': '网关错误',
+            };
+            const errorType = errorTypeMap[responseData.error] || '服务异常';
+            errorParts.push(`错误类型：${errorType}`);
+        } else if (status === 502) {
+            // 处理 502 状态码错误
+            errorParts.push(`错误类型：网关错误`);
+        }
+        
+        // 错误消息
+        const message = responseData.message || '';
+        const errMessage = responseData.errMessage || '';
+        if (message || errMessage) {
+            const msg = message + (errMessage ? (message ? '：' : '') + errMessage : '');
+            if (msg) {
+                errorParts.push(`错误信息：${msg}`);
+            }
+        } else if (finalMessage && finalMessage !== '请求失败') {
+            // 处理常见的 HTTP 错误消息，转换为更友好的中文提示
+            let displayMessage = finalMessage;
+            if (status === 502) {
+                if (finalMessage.includes('502') || finalMessage.includes('Bad Gateway')) {
+                    displayMessage = '服务器收到无效响应，请稍后重试';
+                }
+            }
+            errorParts.push(`错误信息：${displayMessage}`);
+        }
+        
+        // 接口路径
+        if (url) {
+            errorParts.push(`接口路径：${url}`);
+        }
+        
+        // 状态码
+        if (status) {
+            errorParts.push(`状态码：${status}`);
+        }
+        
+        // 时间戳
+        if (responseData.timestamp) {
+            const date = new Date(responseData.timestamp);
+            const formattedTime = date.toLocaleString('zh-CN', {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit'
+            });
+            errorParts.push(`时间：${formattedTime}`);
+        }
+        
+        // 组合最终消息，使用 <br> 标签换行
+        if (errorParts.length > 0) {
+            finalMessage = errorParts.join('<br>');
+        }
+        
+        // 使用可展开/收缩的消息 vnode
+        const messageVNode = createExpandableMessageVNode(finalMessage, 5);
+        
+        ElMessageBox({
+            title: '提示',
+            message: messageVNode,
+            confirmButtonText: '知道了',
+            cancelButtonText: '复制错误信息',
+            showCancelButton: showCancelButton,
+            distinguishCancelAndClose: true, // 区分取消按钮和关闭按钮
+            type: 'error',
+            draggable: true,
+            dangerouslyUseHTMLString: false, // 使用 vnode，不使用 HTML
+        })
+            .then(() => {
+                // 用户点击确定后的处理
+            })
+            .catch(async (action: string) => {
+                // 只有当用户点击"复制错误信息"按钮时才执行复制操作
+                // action === 'cancel' 表示点击了取消按钮（复制错误信息）
+                // action === 'close' 表示点击了关闭按钮（x）
+                if (action === 'cancel') {
+                    try {
+                        await copyErrorToClipboard(error);
+                        ElMessage.success('完整错误信息已复制到剪贴板，可发送给开发人员');
+                    } catch (err: any) {
+                        console.error('复制错误信息失败:', err);
+                        ElMessage.error(`复制失败: ${err?.message || '未知错误'}，请手动复制控制台中的错误信息`);
+                    }
+                }
+                // 如果 action === 'close'，不做任何处理，只是关闭对话框
+            });
+        
+        throw error; // 重新抛出错误，让调用方知道请求失败
+    }
+};
+
+/**
+ * 过滤掉空参数
+ * @param params - 参数对象
+ * @returns 过滤后的参数对象（只包含有效值）
+ */
+export const filterEmptyParams = (params: Record<string, any> | any[]): Record<string, any> | any[] => {
+    // 如果是数组，直接返回（不处理数组）
+    if (Array.isArray(params)) {
+        return params;
+    }
+    
+    if (!params || typeof params !== 'object') {
+        return {};
+    }
+
+    return Object.keys(params).reduce((acc: any, key: string) => {
+        const value = params[key];
+        // 检查值是否有效（不为空、null、undefined、空字符串、空数组）
+        const isValid =
+            value !== null &&
+            value !== undefined &&
+            value !== '' &&
+            !(Array.isArray(value) && value.length === 0) &&
+            !(typeof value === 'object' && value !== null && !Array.isArray(value) && Object.keys(value).length === 0);
+
+        if (isValid) {
+            acc[key] = value;
+        }
+        return acc;
+    }, {});
+};
+
+export default requestWithBaseURL;

package/template/src/views/error/401.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="error-page">
+        <h1>401</h1>
+        <p>未授权，请先登录</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+// 401 未授权页面
+</script>
+
+<style scoped lang="less">
+.error-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    h1 {
+        font-size: 72px;
+        color: #1957ff;
+        margin-bottom: 20px;
+    }
+    p {
+        color: #666;
+        font-size: 18px;
+    }
+}
+</style>
+

package/template/src/views/error/403.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="error-page">
+        <h1>403</h1>
+        <p>禁止访问</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+// 403 禁止访问页面
+</script>
+
+<style scoped lang="less">
+.error-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    h1 {
+        font-size: 72px;
+        color: #1957ff;
+        margin-bottom: 20px;
+    }
+    p {
+        color: #666;
+        font-size: 18px;
+    }
+}
+</style>
+

package/template/src/views/error/404.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="error-page">
+        <h1>404</h1>
+        <p>页面未找到</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+// 404 错误页面
+</script>
+
+<style scoped lang="less">
+.error-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    h1 {
+        font-size: 72px;
+        color: #1957ff;
+        margin-bottom: 20px;
+    }
+    p {
+        color: #666;
+        font-size: 18px;
+    }
+}
+</style>
+

package/template/src/views/home/index.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="home">
+        <h1>欢迎使用德邦前端脚手架</h1>
+        <p>基于 Vue 3 + TypeScript + Vite</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+// 首页组件
+</script>
+
+<style scoped lang="less">
+.home {
+    padding: 20px;
+    text-align: center;
+    h1 {
+        color: #1957ff;
+        margin-bottom: 10px;
+    }
+    p {
+        color: #666;
+    }
+}
+</style>
+

package/template/tsconfig.json

@@ -0,0 +1,27 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom", "dom.iterable"],
+        "allowJs": true,
+        "moduleResolution": "node",
+        "noImplicitThis": true,
+        "strictNullChecks": false,
+        "allowSyntheticDefaultImports": true,
+        "skipLibCheck": true,
+        "experimentalDecorators": true,
+        "emitDecoratorMetadata": true,
+        "allowUnreachableCode": true,
+        "noImplicitAny": false,
+        "jsx": "preserve",
+        "baseUrl": "./",
+        "paths": {
+            "@/*": ["src/*"],
+            "@deppon/deppon-ui/icons-vue": ["node_modules/@deppon/deppon-ui/es/icons-vue"]
+        },
+        "types": ["node", "vite/client"]
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/types/**/*.d.ts"],
+    "exclude": ["node_modules"]
+}

package/template/vite.config.ts

@@ -0,0 +1,243 @@
+import { defineConfig, loadEnv } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import legacy from '@vitejs/plugin-legacy';
+import { resolve } from 'path';
+
+// 跨平台兼容：获取项目根目录
+const rootDir = process.cwd();
+
+// 修复 @deppon/deppon-template 包中的导入路径问题
+const fixDepponTemplateImports = () => {
+    return {
+        name: 'fix-deppon-template-imports',
+        enforce: 'pre' as const,
+        transform(code: string, id: string) {
+            // 在 @deppon/deppon-template 包的文件中，修复 _virtual 导入路径
+            if (id.includes('@deppon/deppon-template') && id.endsWith('.js')) {
+                // 将 'import "_virtual/...' 替换为 'import "./_virtual/...'
+                const fixedCode = code.replace(/import\s+['"]_virtual\//g, match =>
+                    match.replace('_virtual/', './_virtual/'),
+                );
+                if (fixedCode !== code) {
+                    return { code: fixedCode, map: null };
+                }
+            }
+            return null;
+        },
+        resolveId(id: string, importer?: string) {
+            // 修复 _virtual 路径问题：将 '_virtual/...' 转换为 './_virtual/...'
+            if (id === '_virtual/_rollup-plugin-inject-process-env.js' && importer) {
+                // 处理 pnpm 的路径结构
+                const templateMatch = importer.match(/(.*@deppon[\/\\]deppon-template[^\/\\]*[\/\\]es)/);
+                if (templateMatch) {
+                    const templateEsPath = templateMatch[1].replace(/\\/g, '/');
+                    const virtualPath = resolve(templateEsPath, `./${id}`).replace(/\\/g, '/');
+                    return virtualPath;
+                }
+                // 如果是在 @deppon/deppon-template 包内，直接使用相对路径
+                if (importer.includes('@deppon/deppon-template')) {
+                    const fileDir = importer.substring(
+                        0,
+                        Math.max(importer.lastIndexOf('/'), importer.lastIndexOf('\\')),
+                    );
+                    return resolve(fileDir, `./${id}`);
+                }
+            }
+            return null;
+        },
+    };
+};
+
+// 自定义显示域名的插件（仅用于显示，不影响实际绑定）
+const customDomainDisplay = (domain?: string) => {
+    return {
+        name: 'custom-domain-display',
+        configureServer(server: any) {
+            if (domain) {
+                const originalPrintUrls = server.printUrls;
+                server.printUrls = () => {
+                    const port = server.config.server?.port || 3100;
+                    const protocol = server.config.server?.https ? 'https' : 'http';
+                    const localUrl = `${protocol}://${domain}:${port}/`;
+                    const networkUrls = server.resolvedUrls;
+                    const networkUrl = networkUrls?.network?.[0] || '';
+                    const blueColor = '\u001b[34m'; // 蓝色
+                    const resetColor = '\u001b[0m'; // 重置颜色
+                    // 使用 OSC 8 协议让终端识别为可点击链接（支持 iTerm2、Windows Terminal 等）
+                    const clickableUrl = `\u001b]8;;${localUrl}\u001b\\${blueColor}${localUrl}${resetColor}\u001b]8;;\u001b\\`;
+                    console.log(`\n  ➜  Network:   ${clickableUrl}`);
+                };
+            }
+        },
+    };
+};
+
+// 生产环境移除 console 和 debugger
+const removeConsole = (buildMode: string) => {
+    return {
+        name: 'remove-console',
+        enforce: 'post' as const,
+        apply: 'build' as const,
+        transform(code: string, id: string) {
+            // 只处理 JS/TS 文件，排除 node_modules
+            if (buildMode === 'production' && !id.includes('node_modules') && /\.(js|ts|vue)$/.test(id)) {
+                return {
+                    code: code
+                        .replace(
+                            /console\.(log|debug|info|warn|error|trace|table|group|groupEnd|time|timeEnd)\([^)]*\);?/g,
+                            '',
+                        )
+                        .replace(/debugger;?/g, ''),
+                    map: null,
+                };
+            }
+            return null;
+        },
+    };
+};
+
+export default defineConfig(({ mode }) => {
+    // 加载环境变量，使用空字符串作为前缀以加载所有变量（包括 DP_ 前缀）
+    const env = loadEnv(mode, process.cwd(), '');
+
+    // 构建代理配置
+    const getProxyConfig = () => {
+        const proxyConfig: Record<string, any> = {};
+
+        // 原有的 /api 代理配置
+        if (env.DP_API_URL) {
+            proxyConfig['/api'] = {
+                target: env.DP_API_URL,
+                changeOrigin: true,
+                rewrite: (path: string) => path.replace(/^\/api/, ''),
+            };
+        }
+
+        // prefercenter 系统代理 - /cmc-prefer-web/
+        // 在开发模式和测试模式下启用代理
+        if (env.DP_API_HOST && (mode === 'development' || mode === 'test' || mode === 'dev-local')) {
+            const apiHost = env.DP_API_HOST.replace(/\/$/, '');
+            proxyConfig['/cmc-prefer-web'] = {
+                target: apiHost,
+                changeOrigin: true,
+                secure: false,
+            };
+        }
+
+        // UAP 用户信息服务代理 - /uap-index-service/
+        if (env.DP_UAP_API_HOST && (mode === 'development' || mode === 'test' || mode === 'dev-local')) {
+            const uapHost = env.DP_UAP_API_HOST.replace(/\/$/, '').replace(/\/uap-index-service.*$/, '');
+            proxyConfig['/uap-index-service'] = {
+                target: uapHost || 'http://uapsit.deppontest.com',
+                changeOrigin: true,
+                secure: false,
+            };
+        }
+
+        return Object.keys(proxyConfig).length > 0 ? proxyConfig : undefined;
+    };
+
+    return {
+        plugins: [
+            vue(),
+            fixDepponTemplateImports(),
+            // 自定义域名显示插件（仅用于显示，不影响实际绑定）
+            customDomainDisplay(env.DP_DOMAIN),
+            // 生产环境移除 console 和 debugger
+            removeConsole(mode),
+            // Legacy 插件：支持旧版浏览器（包括 Firefox 63.0）
+            legacy({
+                targets: ['Firefox >= 60', 'Chrome >= 60', 'Safari >= 10', 'Edge >= 79'],
+                // 现代浏览器不需要 legacy 代码
+                modernPolyfills: false,
+                // 添加必要的 polyfill
+                additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
+            }),
+        ],
+        resolve: {
+            alias: {
+                '@': resolve(rootDir, 'src'),
+                // 修复 @deppon/deppon-template 包中的 _virtual 路径问题
+                '_virtual/_rollup-plugin-inject-process-env.js': resolve(
+                    rootDir,
+                    'node_modules/@deppon/deppon-template/es/_virtual/_rollup-plugin-inject-process-env.js',
+                ),
+            },
+        },
+        css: {
+            preprocessorOptions: {
+                less: {
+                    // 支持在 less 中使用 JavaScript
+                    javascriptEnabled: true,
+                    // 配置 Less 的路径选项，确保能正确解析 node_modules 中的 @import
+                    paths: [resolve(rootDir, 'node_modules'), resolve(rootDir, 'src')],
+                    // Less 配置选项：确保在构建时正确处理 @import
+                    modifyVars: {},
+                },
+            },
+            // 确保处理 node_modules 中的 CSS/Less 文件
+            postcss: undefined,
+            // 根据环境变量配置是否启用 source map
+            devSourcemap: env.DP_SOURCEMAP === 'true',
+            // 构建时确保处理所有 CSS/Less 文件，包括 node_modules
+            modules: false,
+        },
+        server: {
+            port: Number(env.DP_PORT) || 3100,
+            // 实际绑定到 0.0.0.0（允许所有网络接口访问）
+            // 显示的自定义域名通过 customDomainDisplay 插件处理
+            host: env.DP_HOST || '0.0.0.0',
+            // 如果设置了 DP_DOMAIN，自动打开时使用自定义域名；否则使用默认行为
+            open:
+                env.DP_OPEN === 'true'
+                    ? env.DP_DOMAIN
+                        ? `http://${env.DP_DOMAIN}:${Number(env.DP_PORT) || 3100}/`
+                        : true
+                    : false,
+            proxy: getProxyConfig(),
+            allowedHosts: env.DP_ALLOWED_HOSTS?.split(',') || [],
+            // allowedHosts 在 Vite 中通过 host 配置实现
+        },
+        base: env.DP_PUBLIC_PATH || '/',
+        // 配置环境变量前缀，同时支持 VITE_ 和 DP_ 前缀
+        envPrefix: ['VITE_', 'DP_'],
+        preview: {
+            // 预览服务器配置
+            port: 4173,
+            host: '0.0.0.0',
+            // 预览服务器会自动处理 SPA 路由回退
+            strictPort: false,
+            cors: true,
+        },
+        build: {
+            outDir: 'dist',
+            // 根据环境变量配置是否生成 source map
+            sourcemap: env.DP_SOURCEMAP === 'true',
+            // 启用代码压缩（生产环境使用 esbuild，速度快）
+            minify: mode === 'production' ? 'esbuild' : false,
+            // 启用 CSS 压缩（生产环境）
+            cssMinify: mode === 'production',
+            // 配置资源内联阈值，设置为 0 表示不内联任何资源，所有图片都会作为独立文件打包
+            assetsInlineLimit: 0,
+            // CSS 代码分割配置，确保样式文件被正确处理
+            cssCodeSplit: true,
+            // 确保 Rollup 正确处理 Less 文件的依赖关系
+            rollupOptions: {
+                output: {
+                    // 确保 CSS 文件被正确处理
+                    assetFileNames: assetInfo => {
+                        if (assetInfo.name && assetInfo.name.endsWith('.css')) {
+                            return 'assets/css/[name]-[hash][extname]';
+                        }
+                        return 'assets/[name]-[hash][extname]';
+                    },
+                    // 压缩输出
+                    compact: mode === 'production',
+                },
+            },
+            // 构建时移除 console 和 debugger（生产环境）
+            chunkSizeWarningLimit: 1000,
+        },
+    };
+});
+

package/template/yarnrc

@@ -0,0 +1,3 @@
+registry "https://registry.npmjs.org/"
+"@deppon:registry" "https://registry.npmjs.org/"
+network-timeout 300000