@deppon/create-deppon-app 2.2.0

package/template/src/layouts/BaseLayout.vue

@@ -0,0 +1,687 @@
+<template>
+    <pro-layout
+        :collapsed="collapsed"
+        :menu-items="menuItems"
+        :top-menu-items="topMenuItems"
+        :active-menu="activeMenu"
+        :commonMenusMax="commonMenusMax"
+        :showCommonMenu="showCommonMenu"
+        :menu-router="true"
+        :title="props.title"
+        :logo="props.logo"
+        :show-common-menus="false"
+        :fixed-header="props.fixedHeader"
+        @update:collapsed="collapsed = $event"
+        @common-menu-delete="handleCommonMenuDelete"
+    >
+        <template #header-right>
+            <el-dropdown trigger="click" placement="bottom-end" :hide-on-click="false" popper-class="header-user-dropdown-popper">
+                <div class="header-user-trigger">
+                    <span>Hi，{{ userStore.profile?.userName ?? '未登录' }}</span>
+                    <el-icon>
+                        <component :is="ArrowDownIcon" />
+                    </el-icon>
+                </div>
+                <template #dropdown>
+                    <div class="header-user-dropdown">
+                        <div class="user-dropdown-header">
+                            <div class="user-avatar">{{ avatarText }}</div>
+                            <div class="user-header-info">
+                                <div class="user-name">{{ userStore.profile?.userName ?? '—' }}</div>
+                                <div class="user-meta">{{ userStore.profile?.position ?? userStore.profile?.deptName ?? '—' }}</div>
+                            </div>
+                        </div>
+                        <div class="user-dropdown-body">
+                            <div class="detail-section">
+                                <div class="detail-section-title">基本信息</div>
+                                <div class="detail-grid">
+                                    <div class="detail-item">
+                                        <span class="detail-label">工号</span>
+                                        <span class="detail-value">{{ userStore.profile?.userCode ?? '—' }}</span>
+                                    </div>
+                                    <div class="detail-item">
+                                        <span class="detail-label">性别</span>
+                                        <span class="detail-value">{{ genderText }}</span>
+                                    </div>
+                                    <div class="detail-item">
+                                        <span class="detail-label">岗位</span>
+                                        <span class="detail-value">{{ userStore.profile?.position ?? '—' }}</span>
+                                    </div>
+                                    <div class="detail-item">
+                                        <span class="detail-label">岗位编码</span>
+                                        <span class="detail-value">{{ userStore.profile?.jobCode ?? '—' }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="detail-section">
+                                <div class="detail-section-title">部门信息</div>
+                                <div class="detail-grid">
+                                    <div class="detail-item full">
+                                        <span class="detail-label">部门</span>
+                                        <span class="detail-value">{{ userStore.profile?.deptName ?? '—' }}</span>
+                                    </div>
+                                    <div class="detail-item">
+                                        <span class="detail-label">部门编码</span>
+                                        <span class="detail-value">{{ userStore.profile?.deptCode ?? '—' }}</span>
+                                    </div>
+                                    <div class="detail-item">
+                                        <span class="detail-label">标准部门</span>
+                                        <span class="detail-value">{{ userStore.profile?.deptStandName ?? '—' }}</span>
+                                    </div>
+                                    <div class="detail-item">
+                                        <span class="detail-label">标准部门编码</span>
+                                        <span class="detail-value">{{ userStore.profile?.deptStandCode ?? '—' }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="detail-section">
+                                <div class="detail-section-title">角色与时间</div>
+                                <div class="detail-grid">
+                                    <div class="detail-item">
+                                        <span class="detail-label">人群/角色</span>
+                                        <span class="detail-value">{{ userStore.profile?.crowdName ?? '—' }}</span>
+                                    </div>
+                                    <div class="detail-item">
+                                        <span class="detail-label">角色编码</span>
+                                        <span class="detail-value">{{ userStore.profile?.crowdCode ?? '—' }}</span>
+                                    </div>
+                                    <div class="detail-item full">
+                                        <span class="detail-label">同步时间</span>
+                                        <span class="detail-value">{{ userStore.profile?.currentTime ?? '—' }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="user-dropdown-footer">
+                            <el-button type="primary" link size="small" class="logout-btn" @click="handleLogout">
+                                退出登录
+                            </el-button>
+                        </div>
+                    </div>
+                </template>
+            </el-dropdown>
+        </template>
+        <RouterView />
+    </pro-layout>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, markRaw, watch, onMounted } from 'vue';
+import { useRoute, useRouter, RouterView } from '@deppon/deppon-router';
+import { ProLayout } from '@deppon/deppon-template';
+import { ElIcon, ElDropdown, ElButton, ElDivider } from '@deppon/deppon-ui';
+import type { MenuNode } from '@deppon/deppon-auth';
+import type { RouteRecordRaw } from '@deppon/deppon-router';
+import { useRouteStore } from '../stores/route';
+import { useMenuStore } from '../stores/menu';
+import { useUserStore } from '../stores/user';
+import { developmentRoutes } from '../router/route';
+// 按需引入图标组件
+import { HomeFilled, Document, ArrowDown } from '@deppon/deppon-ui/icons-vue';
+
+const ArrowDownIcon = markRaw(ArrowDown);
+
+const props = defineProps({
+    /** 标题 */
+    title: {
+        type: String,
+        default: 'DEPPON-CMC',
+    },
+    /** Logo 图片，可以是字符串（路径）或对象（包含 src 和 size） */
+    logo: {
+        type: [String, Object],
+        default: () => ({
+            src:'logo.png',
+            // src:'https://ca.deppon.com.cn/uap2/shortCutEntryImg/logo2.png',
+            // src: 'https://jdl-oss.s3-cache-accelerate.cn-north-1.jdcloud-oss.com/static/images/home/logo-s.png',
+            size: { width: 129, height: 30 }, // 可以是数字（宽高相同）、字符串（如 '24px'）或对象（{ width: 24, height: 24 }）
+        }),
+    },
+    /** 是否固定头部 */
+    fixedHeader: {
+        type: Boolean,
+        default: true,
+    },
+    /** 菜单项（可选，如果不传则使用默认菜单） */
+    menuItems: {
+        type: Array,
+        default: null,
+    },
+    /** 是否显示常用菜单 */
+    showCommonMenu: {
+        type: Boolean,
+        default: false,
+    },
+    commonMenusMax: {
+        type: Number,
+        default: 5,
+    },
+});
+// 图标映射表：将字符串图标名映射到实际的图标组件
+const iconMap: Record<string, any> = {
+    HomeFilled,
+    Document,
+};
+
+const routeStore = useRouteStore();
+const menuStore = useMenuStore();
+const userStore = useUserStore();
+const route = useRoute();
+const router = useRouter();
+const collapsed = ref(false);
+
+/** 头像占位文字：取姓名首字，最多 2 字 */
+const avatarText = computed(() => {
+    const name = userStore.profile?.userName?.trim();
+    if (!name) return '—';
+    return name.length <= 2 ? name : name.slice(0, 2);
+});
+
+/** 性别展示：1 男 2 女 */
+const genderText = computed(() => {
+    const g = userStore.profile?.gender;
+    if (g === 1) return '男';
+    if (g === 2) return '女';
+    return g != null ? String(g) : '—';
+});
+
+function handleLogout() {
+    userStore.clearAuth();
+    router.push('/');
+}
+
+// 初始化 menu store，传入 commonMenusMax；并请求 UAP 用户信息同步到 profile
+onMounted(() => {
+    menuStore.init(props.commonMenusMax);
+   
+});
+
+// 监听路由变化，记录访问历史
+watch(
+    () => route.path,
+    newPath => {
+        const routeMeta = route.meta as { title?: string } | undefined;
+        const title = (routeMeta?.title as string) || route.name?.toString() || newPath;
+        menuStore.addRouteToHistory(newPath, title);
+        userStore.fetchUserInfoByCode();
+    },
+    { immediate: true },
+);
+
+// 根据当前路由自动设置激活菜单
+const activeMenu = computed(() => route.path);
+
+/**
+ * 将 MenuNode 转换为 ProLayout 需要的菜单格式
+ */
+const convertMenuNodeToMenuItem = (node: MenuNode): any => {
+    const path = node.uri || node.path || `/${node.id}`;
+    const menuItem: any = {
+        key: String(node.id),
+        path: path,
+        title: node.text || node.name || '',
+    };
+
+    // 如果有图标，添加图标（需要根据实际图标格式处理）
+    if (node.iconCls || node.icon) {
+        // 这里可以根据实际需求处理图标
+        menuItem.icon = node.iconCls || node.icon;
+    }
+
+    // 如果有子节点，递归转换
+    if (node.children && node.children.length > 0) {
+        menuItem.children = node.children.map(child => convertMenuNodeToMenuItem(child));
+    }
+
+    return menuItem;
+};
+
+/**
+ * 将 RouteRecordRaw 转换为 ProLayout 需要的菜单格式
+ */
+const convertRouteToMenuItem = (route: RouteRecordRaw, parentPath = ''): any | null => {
+    // 跳过隐藏的路由
+    if (route.meta?.hidden) {
+        return null;
+    }
+
+    // 跳过没有组件的路由（如 redirect）
+    if (!route.component && !route.children) {
+        return null;
+    }
+
+    // 构建完整路径
+    let fullPath: string;
+    if (parentPath) {
+        // 确保 parentPath 以 / 结尾，route.path 不以 / 开头
+        const normalizedParent = parentPath.endsWith('/') ? parentPath.slice(0, -1) : parentPath;
+        const normalizedChild = route.path.startsWith('/') ? route.path : `/${route.path}`;
+        fullPath = `${normalizedParent}${normalizedChild}`;
+    } else {
+        fullPath = route.path;
+    }
+
+    const menuItem: any = {
+        key: route.name ? String(route.name) : fullPath,
+        path: fullPath,
+        title: (route.meta?.title as string) || route.name || route.path,
+    };
+
+    // 处理图标：将字符串图标名转换为实际的图标组件
+    if (route.meta?.icon) {
+        const iconName = route.meta.icon as string;
+        // 从图标映射表中获取对应的图标组件
+        const IconComponent = iconMap[iconName];
+        if (IconComponent) {
+            menuItem.icon = IconComponent;
+        }
+    }
+
+    // 处理子路由
+    if (route.children && route.children.length > 0) {
+        const children = route.children.map(child => convertRouteToMenuItem(child, fullPath)).filter(Boolean); // 过滤掉 null 值
+
+        if (children.length > 0) {
+            menuItem.children = children;
+        }
+    }
+
+    return menuItem;
+};
+
+/**
+ * 从 developmentRoutes 中提取菜单项（分组结构）
+ */
+const getMenuItemsFromDevelopmentRoutes = (): any[] => {
+    const navMenuItems: any[] = [];
+
+    developmentRoutes.forEach(route => {
+        // 只处理有 children 的路由（通常是布局路由）
+        if (route.children && route.children.length > 0) {
+            route.children.forEach(child => {
+                // 跳过 BlankLayout，直接处理它的 children
+                if (child.name === 'BlankLayout' && child.children && child.children.length > 0) {
+                    child.children.forEach(grandChild => {
+                        const menuItem = convertRouteToMenuItem(grandChild, route.path);
+                        if (menuItem) {
+                            navMenuItems.push(menuItem);
+                        }
+                    });
+                } else {
+                    const menuItem = convertRouteToMenuItem(child, route.path);
+                    if (menuItem) {
+                        navMenuItems.push(menuItem);
+                    }
+                }
+            });
+        } else {
+            // 处理没有 children 的路由
+            const menuItem = convertRouteToMenuItem(route);
+            if (menuItem) {
+                navMenuItems.push(menuItem);
+            }
+        }
+    });
+
+    // 返回分组结构
+    const result: any[] = [];
+
+    // 从 store 获取常用菜单并添加
+    const commonMenu = menuStore.formattedCommonMenu;
+    if (commonMenu.length > 0) {
+        result.push(...commonMenu);
+    }
+
+    // 如果有导航菜单，添加导航菜单分组
+    if (navMenuItems.length > 0) {
+        result.push({
+            type: 'menu',
+            title: '导航菜单',
+            children: navMenuItems,
+        });
+    }
+    return result;
+};
+
+// 从 store 中获取菜单并转换为 ProLayout 格式（分组结构）
+// 注意：导航菜单保持原样，不进行任何修改
+const menuItemsFromStore = computed(() => {
+    const result: any[] = [];
+
+    // 从 store 获取常用菜单并添加（如果有）
+    const commonMenu = menuStore.formattedCommonMenu;
+    if (commonMenu.length > 0) {
+        result.push(...commonMenu);
+    }
+
+    // 添加导航菜单（保持原样，不修改）
+    if (routeStore.menuTree && routeStore.menuTree.length > 0) {
+        const menuItems = routeStore.menuTree.map(node => convertMenuNodeToMenuItem(node));
+        result.push({
+            type: 'menu',
+            title: '导航菜单',
+            children: menuItems,
+        });
+    }
+
+    return result;
+});
+
+// 根据环境选择菜单源：开发环境使用 developmentRoutes，其他环境使用 store
+const computedMenuItems = computed(() => {
+    if (import.meta.env.DP_USE_LOCAL_ROUTES === 'true') {
+        return getMenuItemsFromDevelopmentRoutes();
+    }
+    return menuItemsFromStore.value;
+});
+
+// 使用传入的菜单项或计算出的菜单（响应式更新常用菜单）
+const menuItems = computed(() => {
+    if (props.menuItems) {
+        return props.menuItems;
+    }
+    // 直接使用计算出的菜单（getMenuItemsFromDevelopmentRoutes 已经处理了常用菜单和导航菜单的合并）
+    return computedMenuItems.value;
+});
+
+// 删除常用菜单项
+const handleCommonMenuDelete = (menuItem: any) => {
+    if (menuItem && menuItem.key) {
+        menuStore.handleCommonMenuDelete(menuItem.key);
+    }
+};
+
+// 顶部菜单项配置
+const topMenuItems = [
+    {
+        key: 'home-1',
+        path: '/homex',
+        title: '签客户',
+        label: '签客户',
+        badge: 'NEW',
+    },
+
+    {
+        key: 'quote-management',
+        path: '/quote-management',
+        title: '销售中心',
+        label: '报价管理',
+        children: [
+            {
+                key: 'multi-product-quote',
+                path: '/quote-management/multi-product',
+                title: '多产品报价管理',
+                label: '多产品报价管理',
+            },
+            {
+                key: 'service-quote',
+                path: '/quote-management/service',
+                title: '服务+报价管理',
+                label: '服务+报价管理',
+            },
+            {
+                key: 'market-scattered-quote',
+                path: '/quote-management/market-scattered',
+                title: '市场散单报价管理',
+                label: '市场散单报价管理',
+            },
+        ],
+    },
+    {
+        key: 'quote-management1',
+        path: '/quote-management1',
+        title: '客户中心',
+        label: '客户中心',
+        children: [
+            {
+                key: 'multi-product-quote',
+                path: '/quote-management/multi-product',
+                title: '多产品报价管理',
+                label: '多产品报价管理',
+            },
+            {
+                key: 'service-quote',
+                path: '/quote-management/service',
+                title: '服务+报价管理',
+                label: '服务+报价管理',
+            },
+            {
+                key: 'market-scattered-quote',
+                path: '/quote-management/market-scattered',
+                title: '市场散单报价管理',
+                label: '市场散单报价管理',
+            },
+        ],
+    },
+    {
+        key: 'price-management',
+        path: '/price-management',
+        title: '价格中心',
+        label: '价格中心',
+        children: [
+            {
+                key: 'multi-product-quote',
+                path: '/quote-management/multi-product',
+                title: '多产品报价管理',
+                label: '多产品报价管理',
+            },
+            {
+                key: 'service-quote',
+                path: '/quote-management/service',
+                title: '服务+报价管理',
+                label: '服务+报价管理',
+            },
+            {
+                key: 'market-scattered-quote',
+                path: '/quote-management/market-scattered',
+                title: '市场散单报价管理',
+                label: '市场散单报价管理',
+            },
+        ],
+    },
+    {
+        key: 'sign-management',
+        path: '/sign-management',
+        title: '签约中心',
+        label: '签约中心',
+        children: [
+            {
+                key: 'multi-product-quote',
+                path: '/quote-management/multi-product',
+                title: '多产品报价管理',
+                label: '多产品报价管理',
+            },
+            {
+                key: 'service-quote',
+                path: '/quote-management/service',
+                title: '服务+报价管理',
+                label: '服务+报价管理',
+            },
+            {
+                key: 'market-scattered-quote',
+                path: '/quote-management/market-scattered',
+                title: '市场散单报价管理',
+                label: '市场散单报价管理',
+            },
+        ],
+    },
+
+    {
+        key: 'data-management',
+        path: '/data-management',
+        title: '数据中心',
+        label: '数据中心',
+        children: [
+            {
+                key: 'order-list',
+                path: '/order-management/list',
+                title: '订单列表',
+                label: '订单列表',
+            },
+            {
+                key: 'order-detail',
+                path: '/order-management/detail',
+                title: '订单详情',
+                label: '订单详情',
+            },
+        ],
+    },
+    {
+        key: 'more',
+        path: '/more',
+        title: '更多',
+        label: '更多',
+        children: [
+            {
+                key: 'multi-product-quote',
+                path: '/quote-management/multi-product',
+                title: '多产品报价管理',
+                label: '多产品报价管理',
+            },
+            {
+                key: 'service-quote',
+                path: '/quote-management/service',
+                title: '服务+报价管理',
+                label: '服务+报价管理',
+            },
+            {
+                key: 'market-scattered-quote',
+                path: '/quote-management/market-scattered',
+                title: '市场散单报价管理',
+                label: '市场散单报价管理',
+            },
+        ],
+    },
+];
+</script>
+
+<style scoped>
+.header-user-trigger {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 6px;
+    transition: background-color 0.2s;
+}
+.header-user-trigger:hover {
+    background: var(--el-fill-color-light);
+}
+
+.header-user-dropdown {
+    min-width: 320px;
+    max-width: 400px;
+    max-height: 80vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    background: var(--el-bg-color-overlay);
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.06);
+    border: 1px solid var(--el-border-color-lighter);
+}
+
+.user-dropdown-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    background: linear-gradient(135deg, var(--el-color-primary-light-9) 0%, var(--el-fill-color-light) 100%);
+    border-bottom: 1px solid var(--el-border-color-lighter);
+}
+.user-avatar {
+    width: 44px;
+    height: 44px;
+    border-radius: 10px;
+    background: var(--el-color-primary);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+.user-header-info {
+    min-width: 0;
+}
+.user-name {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+    line-height: 1.3;
+}
+.user-meta {
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+    margin-top: 2px;
+}
+
+.user-dropdown-body {
+    padding: 12px 16px;
+    overflow-y: auto;
+    max-height: 50vh;
+}
+
+.detail-section {
+    margin-bottom: 14px;
+}
+.detail-section:last-child {
+    margin-bottom: 0;
+}
+.detail-section-title {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--el-text-color-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 8px;
+    padding-bottom: 4px;
+    border-bottom: 1px dashed var(--el-border-color-lighter);
+}
+.detail-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px 16px;
+}
+.detail-item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+.detail-item.full {
+    grid-column: 1 / -1;
+}
+.detail-label {
+    font-size: 11px;
+    color: var(--el-text-color-secondary);
+}
+.detail-value {
+    font-size: 13px;
+    color: var(--el-text-color-primary);
+    word-break: break-all;
+}
+
+.user-dropdown-footer {
+    padding: 10px 16px;
+    border-top: 1px solid var(--el-border-color-lighter);
+    background: var(--el-fill-color-blank);
+    border-radius: 0 0 12px 12px;
+}
+.logout-btn {
+    padding: 4px 0;
+}
+</style>
+
+<!-- 下拉浮层通过 teleport 挂到 body，用非 scoped 样式为 el-popper 加圆角 -->
+<style>
+.header-user-dropdown-popper.el-dropdown__popper {
+    border-radius: 12px;
+}
+.header-user-dropdown-popper .el-scrollbar__wrap.el-scrollbar__wrap--hidden-default {
+    border-radius: 12px;
+    background: var(--el-bg-color-overlay) !important;
+}
+</style>