@deppon/create-deppon-app 2.2.0

package/template/preview-server.js

@@ -0,0 +1,117 @@
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+
+const PORT = process.env.PORT ? parseInt(process.env.PORT, 10) : 4174;
+// 注意：需要根据实际项目路径修改 BASE_PATH
+const BASE_PATH = '/your-app-name/';
+const DIST_DIR = path.join(__dirname, 'dist');
+
+// MIME 类型映射
+const mimeTypes = {
+    '.html': 'text/html',
+    '.js': 'application/javascript',
+    '.css': 'text/css',
+    '.json': 'application/json',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.woff': 'font/woff',
+    '.woff2': 'font/woff2',
+    '.ttf': 'font/ttf',
+    '.eot': 'application/vnd.ms-fontobject',
+    '.otf': 'font/otf',
+    '.ico': 'image/x-icon',
+};
+
+const server = http.createServer((req, res) => {
+    let filePath = req.url;
+
+    // 移除查询参数和 hash
+    const queryIndex = filePath.indexOf('?');
+    if (queryIndex !== -1) {
+        filePath = filePath.substring(0, queryIndex);
+    }
+
+    // 调试日志
+    console.log(`[${new Date().toISOString()}] 请求: ${req.method} ${req.url} -> ${filePath}`);
+
+    // 移除 base path
+    if (filePath.startsWith(BASE_PATH)) {
+        filePath = filePath.slice(BASE_PATH.length - 1); // 保留开头的 /
+    } else if (filePath.startsWith(BASE_PATH.slice(0, -1))) {
+        // 处理没有尾部斜杠的情况
+        filePath = filePath.replace(BASE_PATH.slice(0, -1), '') || '/';
+    }
+
+    // 默认加载 index.html
+    if (filePath === '/' || filePath === '') {
+        filePath = '/index.html';
+    }
+
+    // 移除开头的 /
+    const relativePath = filePath.startsWith('/') ? filePath.slice(1) : filePath;
+    const fullPath = path.join(DIST_DIR, relativePath);
+    const extname = path.extname(filePath).toLowerCase();
+
+    // 调试日志
+    console.log(`   处理后路径: ${filePath} -> ${relativePath} -> ${fullPath}`);
+
+    // 检查文件是否存在
+    fs.stat(fullPath, (err, stats) => {
+        if (err || !stats.isFile()) {
+            // 文件不存在，如果是 HTML 请求或者是没有扩展名的路径，返回 index.html（SPA 路由回退）
+            if (!extname || extname === '.html' || filePath.endsWith('/')) {
+                const indexPath = path.join(DIST_DIR, 'index.html');
+                fs.readFile(indexPath, (err, data) => {
+                    if (err) {
+                        res.writeHead(404, { 'Content-Type': 'text/plain' });
+                        res.end('404 Not Found: index.html');
+                        return;
+                    }
+                    res.writeHead(200, { 'Content-Type': 'text/html' });
+                    res.end(data);
+                });
+                return;
+            }
+            // 其他文件不存在，返回 404
+            res.writeHead(404, { 'Content-Type': 'text/plain' });
+            res.end(`404 Not Found: ${filePath}`);
+            return;
+        }
+
+        // 文件存在，读取并返回
+        fs.readFile(fullPath, (err, data) => {
+            if (err) {
+                res.writeHead(500, { 'Content-Type': 'text/plain' });
+                res.end('500 Internal Server Error');
+                return;
+            }
+
+            const contentType = mimeTypes[extname] || 'application/octet-stream';
+            res.writeHead(200, {
+                'Content-Type': contentType,
+                'Cache-Control': 'no-cache',
+            });
+            res.end(data);
+        });
+    });
+});
+
+server.on('error', err => {
+    if (err.code === 'EADDRINUSE') {
+        console.error(`\n❌ 端口 ${PORT} 已被占用！`);
+        console.error(`请先停止占用该端口的进程，或修改 PORT 变量使用其他端口。\n`);
+        process.exit(1);
+    } else {
+        console.error(`\n❌ 服务器启动失败: ${err.message}\n`);
+        process.exit(1);
+    }
+});
+
+server.listen(PORT, '0.0.0.0', () => {
+    console.log(`\n🚀 预览服务器已启动！`);
+    console.log(`\n📍 本地访问: http://localhost:${PORT}${BASE_PATH}`);
+    console.log(`\n按 Ctrl+C 停止服务器\n`);
+});

package/template/src/App.vue

@@ -0,0 +1,123 @@
+<template>
+    <el-config-provider :locale="zhCn">
+        <RouterView />
+    </el-config-provider>
+</template>
+
+<script setup lang="ts">
+import { RouterView } from '@deppon/deppon-router';
+import { ElConfigProvider } from '@deppon/deppon-ui';
+// @ts-ignore - zhCn 导出需要构建包后生效
+import zhCnLocale from '@deppon/deppon-ui/locale/lang/zh-cn';
+// 将导入的 locale 赋值给常量，确保类型正确
+const zhCn = zhCnLocale;
+</script>
+
+<style lang="less">
+@import '@deppon/deppon-assets/dist/css/fonts.css';
+
+/* Element Plus 主题色设置 - 使用 !important 确保优先级 */
+:root {
+    --el-color-primary: #1957ff !important;
+    --el-font-size: 14px !important;
+    --el-line-width: 1px !important;
+    --el-line-type: solid !important;
+    --el-text-color-primary: rgba(0, 0, 0, 0.88) !important;
+    --el-text-color-regular: rgba(0, 0, 0, 0.6) !important;
+    --el-disabled-text-color: rgba(0, 0, 0, 0.88) !important;
+
+    --el-color-primary-light-3: rgb(94, 137, 255) !important;
+    --el-color-primary-light-5: rgb(140, 171, 255) !important;
+    --el-color-primary-light-7: rgb(186, 205, 255) !important;
+    --el-color-primary-light-8: rgb(209, 221, 255) !important;
+    --el-color-primary-light-9: rgb(232, 238, 255) !important;
+    --el-text-color-placeholder: rgba(0, 0, 0, 0.25) !important;
+    --el-card-border-color: rgba(0, 0, 0, 0.2) !important;
+    --el-bg-color-page:#f4f4f4 !important;
+
+    /* ==================== 字体设置 ==================== */
+    /* 通用字体 - 用于大部分组件 */
+    --pro-font-family: AlibabaSans !important;
+    /* Logo 字体 - 用于 Logo 文字显示 */
+    --pro-font-family-logo: JDLangZhengTi !important;
+
+    /* ==================== 阴影颜色设置 ==================== */
+    /* 标准阴影 - 用于 Dialog 等组件 */
+    --pro-shadow-color: rgba(0, 0, 0, 0.1) !important;
+    /* 浅色阴影 - 用于下拉菜单等组件 */
+    --pro-shadow-color-light: rgba(0, 0, 0, 0.08) !important;
+    /* 侧边栏阴影 - 用于侧边栏组件 */
+    --pro-shadow-color-sider: rgba(0, 0, 0, 0.12) !important;
+    /* 按钮阴影 - 用于按钮组件 */
+    --pro-shadow-color-btn: rgba(0, 0, 0, 0.15) !important;
+    /* Logo 阴影 - 用于 Logo 组件 */
+    --pro-shadow-color-logo: rgba(0, 21, 41, 0.02) !important;
+
+    /* ==================== 表格相关颜色 ==================== */
+    /* 表格边框颜色 - 用于表格边框 */
+    --pro-table-border-color: rgba(0, 0, 0, 0.08) !important;
+    /* 表格底部边框颜色 - 用于表格无边框模式下的底部边框 */
+    --pro-table-border-bottom-color: #f3f4f5 !important;
+    /* 表格表头背景色 - 用于表格表头 */
+    --pro-table-header-bg: #f4f4f4 !important;
+    --pro-table-th-color-primary: rgba(0, 0, 0, 0.88) !important;
+    --pro-table-td-color-primary: rgba(0, 0, 0, 0.88) !important;
+    /* 表格单元格背景色 - 用于指定列的背景色 */
+    --pro-table-cell-bg-color: #f4f4f4 !important;
+    /* 表格红色单元格背景色 - 用于红色标记的单元格 */
+    --pro-table-cell-red-bg: #fef0f0 !important;
+    /* 表格红色单元格文字颜色 - 用于红色标记的单元格文字 */
+    --pro-table-cell-red-color: #f56c6c !important;
+    /* 表格浅红色单元格背景色 - 用于浅红色标记的单元格 */
+    --pro-table-cell-light-red-bg: #fef5f5 !important;
+    /* 表格浅红色单元格文字颜色 - 用于浅红色标记的单元格文字 */
+    --pro-table-cell-light-red-color: #f56c6c !important;
+    /* 表格错误行背景色 - 用于错误状态的行 */
+    --pro-table-row-error-bg: #fff5f5 !important;
+    /* 表格分页器背景色 - 用于分页器背景 */
+    --pro-table-pagination-bg: rgba(255, 255, 255, 0.6) !important;
+    /* 表格分页器边框颜色 - 用于分页器边框 */
+    --pro-table-pagination-border: rgba(5, 5, 5, 0.06) !important;
+    /* 表格分页器文字颜色 - 用于分页器文字 */
+    --pro-table-pagination-color: rgba(0, 0, 0, 0.88) !important;
+    /* 表格底部栏背景色 - 用于批量操作底部栏背景 */
+    --pro-table-footer-bg: rgba(255, 255, 255, 0.6) !important;
+    /* 表格底部栏边框颜色 - 用于批量操作底部栏边框 */
+    --pro-table-footer-border: rgba(5, 5, 5, 0.06) !important;
+    /* 表格底部栏文字颜色 - 用于批量操作底部栏文字 */
+    --pro-table-footer-color: rgba(0, 0, 0, 0.88) !important;
+    /* 表格选中数量文字颜色 - 用于批量操作选中数量文字 */
+    --pro-table-selected-count-color: rgba(0, 0, 0, 0.88) !important;
+    --pro-el-scrollbar-opacity: 0.5 !important;
+    --pro-el-scrollbar-bg-color: rgba(0, 0, 0, 0.6) !important;
+    --pro-el-scrollbar-hover-opacity: 0.6 !important;
+    --pro-el-scrollbar-hover-bg-color: rgba(0, 0, 0, 0.6) !important;
+    /* Element Plus 滚动条宽度配置 */
+    --pro-el-scrollbar-width: 9px !important;
+      /* 表格选中行背景色 - 用于表格选中行和悬停行背景 */
+    --pro-table-selected-bg-color: #f5f7fa !important;
+    /* 禁用状态背景色 - 用于所有禁用状态的背景色（统一使用此变量） */
+    --pro-bg-disabled-color: #f4f4f4 !important;
+    /* 输入框前缀图标颜色 - 用于输入框前缀图标颜色 */
+    --pro-prefix-color: rgba(0, 0, 0, 0.88) !important;
+    /* 输入框后缀图标颜色 - 用于输入框后缀图标颜色 */
+    --pro-suffix-color: rgba(0, 0, 0, 0.88) !important;
+    --el-border-radius-base:8px !important;
+}
+/* 覆盖浏览器默认样式 */
+html,
+body,
+#app {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    width: 100vw;
+    /* 确保字体变量全局生效 */
+    // font-family: var(--pro-font-family, JDLangZhengTi, sans-serif);
+    font-family: AlibabaSans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+        'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    font-size: 14px;
+    font-weight: 400;
+}
+ 
+</style>

package/template/src/api/index.ts

@@ -0,0 +1,13 @@
+/**
+ * API 统一导出
+ * 按系统模块组织 API 接口
+ */
+
+// prefercenter 系统 API
+export * from './prefercenter';
+
+// 用户信息 API（UAP）
+export * from './user';
+
+// 产品信息 API
+export * from './product';

package/template/src/api/prefercenter.ts

@@ -0,0 +1,23 @@
+/**
+ * prefercenter 系统 API
+ * 包含 /cmc-prefer-web/ 前缀的所有接口
+ */
+import request from '../utils/request';
+
+/**
+ * 获取按钮权限
+ * @param code - 权限代码数组，格式: [{ code: '/cmc-prefer-web/pricing/request/queryAddWeb' }]
+ * @returns 返回权限信息，isAuth === true 表示有权限
+ */
+export const getButtonAuth = (code: Array<{ code: string }>) => {
+    return request({
+        url: '/cmc-prefer-web/login/findPermission.action',
+        method: 'post',
+        data: {
+            list: JSON.stringify(code),
+        },
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+        },
+    });
+};

package/template/src/api/product.ts

@@ -0,0 +1,16 @@
+/**
+ * 产品信息相关 API
+ */
+import request from '../utils/request';
+
+/**
+ * 查询产品信息
+ * @param operType - 操作类型（可选），如 'PRODUCT_INFO_TIERED'
+ * @returns Promise 返回产品信息响应
+ */
+export const queryProductInfo = (operType?: string) => {
+    return request({
+        url: `/prefer/online/common/queryProductInfo${operType ? `?operType=${operType}` : ''}`,
+        method: 'get',
+    });
+};

package/template/src/api/user.ts

@@ -0,0 +1,41 @@
+/**
+ * 用户信息相关 API（UAP 等）
+ */
+import request from '../utils/request';
+
+/** findUserByCode 接口返回的 body 结构 */
+export interface FindUserByCodeBody {
+    id?: number;
+    empCode?: string;
+    empName?: string;
+    gender?: number;
+    status?: number;
+    jobCode?: string;
+    position?: string;
+    deptStandCode?: string;
+    deptStandName?: string;
+    deptCode?: string;
+    deptName?: string;
+    crowdCode?: string;
+    crowdName?: string;
+    currentTime?: string;
+}
+
+/** findUserByCode 接口响应 */
+export interface FindUserByCodeResponse {
+    status?: string;
+    body?: FindUserByCodeBody;
+}
+
+/**
+ * 根据员工编码查询用户信息
+ * 开发环境通过 Vite 代理请求 /uap-index-service，生产环境由 request 根据 DP_UAP_API_HOST 拼接 baseURL
+ * @param empCode - 员工编码（与 userCode 一致）
+ */
+export const findUserByCode = (empCode: string) => {
+    return request({
+        url: '/uap-index-service/userInfoSync/findUserByCode',
+        method: 'get',
+        params: { empCode },
+    }) as Promise<FindUserByCodeResponse>;
+};

package/template/src/components/ExpandableMessage.vue

@@ -0,0 +1,340 @@
+<template>
+    <div class="expandable-message-container" ref="containerRef">
+        <div 
+            ref="contentRef"
+            class="expandable-message-content"
+            :class="{ 'expanded': expanded, 'clamped': !expanded && isLongText }"
+            :style="{ '--max-lines': props.maxLines }"
+        >
+            <span v-html="displayContent"></span>
+            <button 
+                v-if="isLongText" 
+                type="button" 
+                class="expand-button"
+                :class="{ 'expanded': expanded }"
+                @click="toggleExpand"
+            >
+                <span class="button-text">{{ expanded ? '收起' : '展开' }}</span>
+                <el-icon class="arrow-icon">
+                    <ArrowDown />
+                </el-icon>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick, watch } from 'vue';
+import { ElIcon } from '@deppon/deppon-ui';
+import { ArrowDown } from '@deppon/deppon-ui/icons-vue';
+
+interface Props {
+    message: string;
+    maxLines?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    maxLines: 3
+});
+
+const expanded = ref(false);
+const containerRef = ref<HTMLElement>();
+const contentRef = ref<HTMLElement>();
+const isLongText = ref(false);
+
+// 检测文本是否超出指定行数
+const checkIfOverflow = async () => {
+    await nextTick();
+    if (!contentRef.value) return;
+    
+    // 临时移除行数限制来测量实际高度
+    const originalStyle = contentRef.value.style.cssText;
+    contentRef.value.style.maxHeight = 'none';
+    contentRef.value.style.webkitLineClamp = 'none';
+    contentRef.value.style.display = 'block';
+    
+    const fullHeight = contentRef.value.scrollHeight;
+    const lineHeight = parseFloat(getComputedStyle(contentRef.value).lineHeight) || 24;
+    const maxHeight = lineHeight * props.maxLines;
+    
+    // 恢复原始样式
+    contentRef.value.style.cssText = originalStyle;
+    
+    isLongText.value = fullHeight > maxHeight;
+};
+
+// 智能截取文本，确保最后一行有空间显示"展开"按钮
+const truncateText = (html: string): string => {
+    if (!contentRef.value || !isLongText.value) {
+        return html;
+    }
+    
+    // 移除所有 HTML 标签获取纯文本
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = html;
+    const plainText = tempDiv.textContent || tempDiv.innerText || '';
+    
+    // 估算每行能显示的字符数（考虑容器宽度和字体大小）
+    const containerWidth = containerRef.value?.offsetWidth || 500;
+    const fontSize = parseFloat(getComputedStyle(contentRef.value).fontSize) || 14;
+    // 中文字符宽度约为字体大小的1倍，英文字符约为0.6倍，取平均值0.8
+    const avgCharWidth = fontSize * 0.8;
+    const charsPerLine = Math.floor(containerWidth / avgCharWidth);
+    const maxChars = charsPerLine * props.maxLines - 4; // 减去"展开"按钮的空间（约2-3个字符）
+    
+    if (plainText.length <= maxChars) {
+        return html;
+    }
+    
+    // 计算纯文本长度并截取
+    let plainTextCount = 0;
+    let htmlResult = '';
+    let inTag = false;
+    let tagStartIndex = -1;
+    
+    for (let i = 0; i < html.length; i++) {
+        const char = html[i];
+        
+        if (char === '<') {
+            inTag = true;
+            tagStartIndex = htmlResult.length;
+            htmlResult += char;
+        } else if (char === '>') {
+            inTag = false;
+            htmlResult += char;
+            tagStartIndex = -1;
+        } else if (inTag) {
+            htmlResult += char;
+        } else {
+            // 纯文本字符
+            if (plainTextCount < maxChars) {
+                plainTextCount++;
+                htmlResult += char;
+            } else {
+                // 已达到最大长度，停止添加
+                if (inTag && tagStartIndex >= 0) {
+                    htmlResult = htmlResult.substring(0, tagStartIndex);
+                }
+                break;
+            }
+        }
+    }
+    
+    // 如果循环结束时还在标签中，移除未完成的标签
+    if (inTag && tagStartIndex >= 0) {
+        htmlResult = htmlResult.substring(0, tagStartIndex);
+    }
+    
+    // 移除所有未闭合的开始标签
+    const tagStack: Array<{ name: string; startIndex: number; endIndex: number }> = [];
+    const tagRegex = /<\/?(\w+)(?:\s+[^>]*)?>/g;
+    let match;
+    
+    // 找到所有标签（开始标签和结束标签）
+    while ((match = tagRegex.exec(htmlResult)) !== null) {
+        const isClosingTag = htmlResult[match.index + 1] === '/';
+        const tagName = match[1];
+        const tagStart = match.index;
+        const tagEnd = match.index + match[0].length;
+        
+        if (isClosingTag) {
+            // 结束标签：从栈中找到对应的开始标签并移除
+            for (let i = tagStack.length - 1; i >= 0; i--) {
+                if (tagStack[i].name === tagName) {
+                    tagStack.splice(i, 1);
+                    break;
+                }
+            }
+        } else {
+            // 开始标签：添加到栈中
+            tagStack.push({ name: tagName, startIndex: tagStart, endIndex: tagEnd });
+        }
+    }
+    
+    // 移除所有未闭合的开始标签（从后往前移除，避免索引问题）
+    for (let i = tagStack.length - 1; i >= 0; i--) {
+        const tag = tagStack[i];
+        htmlResult = htmlResult.substring(0, tag.startIndex) + htmlResult.substring(tag.endIndex);
+    }
+    
+    return htmlResult;
+};
+
+const displayContent = computed(() => {
+    if (expanded.value || !isLongText.value) {
+        return props.message;
+    }
+    return truncateText(props.message);
+});
+
+const toggleExpand = () => {
+    expanded.value = !expanded.value;
+};
+
+onMounted(() => {
+    checkIfOverflow();
+});
+
+watch(() => props.message, () => {
+    checkIfOverflow();
+});
+</script>
+
+<style scoped lang="less">
+.expandable-message-container {
+    max-width: 500px;
+    word-break: break-word;
+    line-height: 1.5em;
+   
+}
+
+.expandable-message-content {
+    word-break: break-word;
+    line-height: 1.5em;
+    flex: 1;
+    min-width: 0;
+    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    display: block;
+    
+    > span {
+        display: block;
+        word-break: break-word;
+        
+        // 确保 br 标签能正确换行
+        :deep(br) {
+            display: block;
+            content: "";
+            margin: 0;
+            line-height: inherit;
+        }
+    }
+    
+    &.clamped {
+        max-height: calc(1.5em * var(--max-lines, 3));
+        overflow: hidden;
+        
+        > span {
+            display: block;
+            word-break: break-word;
+            
+            :deep(br) {
+                display: block;
+                content: "";
+                margin: 0;
+                line-height: inherit;
+            }
+        }
+        
+        .expand-button {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.85) 15%, rgba(255, 255, 255, 0.98) 100%);
+            padding-left: 12px;
+            padding-right: 0;
+            z-index: 1;
+        }
+    }
+    
+    &.expanded {
+        max-height: none;
+        overflow: visible;
+        
+        > span {
+            display: block;
+            word-break: break-word;
+            
+            :deep(br) {
+                display: block;
+                content: "";
+                margin: 0;
+                line-height: inherit;
+            }
+        }
+        
+        .expand-button {
+            display: inline-flex;
+            margin-left: 4px;
+            vertical-align: baseline;
+        }
+    }
+}
+
+.expand-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0;
+    margin-left: 4px;
+    color: var(--el-color-primary, #1957ff);
+    font-size: 14px;
+    font-weight: 400;
+    background: none;
+    border: none;
+    cursor: pointer;
+    outline: none;
+    white-space: nowrap;
+    flex-shrink: 0;
+    transition: all 0.25s ease;
+    user-select: none;
+    position: relative;
+    vertical-align: baseline;
+    
+    .button-text {
+        position: relative;
+        transition: color 0.25s ease;
+        
+        &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: -2px;
+            width: 0;
+            height: 1.5px;
+            background: linear-gradient(90deg, var(--el-color-primary, #1957ff) 0%, rgba(25, 87, 255, 0.6) 100%);
+            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+    }
+    
+    .arrow-icon {
+        font-size: 16px;
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        display: inline-flex;
+        align-items: center;
+        color: var(--el-color-primary, #1957ff);
+    }
+    
+    &:hover {
+        color: var(--el-color-primary-light-3, #5e89ff);
+        
+        .button-text::after {
+            width: 100%;
+        }
+        
+        .arrow-icon {
+            color: var(--el-color-primary-light-3, #5e89ff);
+        }
+        
+        &:not(.expanded) .arrow-icon {
+            transform: translateY(2px);
+        }
+        
+        &.expanded .arrow-icon {
+            transform: translateY(-2px) rotate(180deg);
+        }
+    }
+    
+    &:active {
+        color: var(--el-color-primary-dark-2, #0d3fd9);
+        
+        .arrow-icon {
+            color: var(--el-color-primary-dark-2, #0d3fd9);
+        }
+    }
+    
+    &.expanded .arrow-icon {
+        transform: rotate(180deg);
+    }
+}
+</style>