@deppon/create-deppon-app 2.2.0

package/template/src/components/PageLayout.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="page-layout">
+        <el-scrollbar class="page-layout-scrollbar">
+            <slot />
+        </el-scrollbar>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ElScrollbar } from '@deppon/deppon-ui';
+</script>
+
+<style scoped lang="less">
+.page-layout {
+    width: 100%;
+    height: 100%;
+    padding: 15px 0 0 15px;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .page-layout-scrollbar {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        position: relative;
+        z-index: 1;
+        overflow-x: hidden;
+
+        :deep(.el-scrollbar__wrap) {
+            overflow-x: hidden;
+        }
+
+        :deep(.el-scrollbar__view) {
+            height: 100%;
+        }
+
+        :deep(.el-scrollbar__bar) {
+            z-index: 10;
+        }
+    }
+}
+</style>
+

package/template/src/config/dictionaryConfig.ts

@@ -0,0 +1,24 @@
+/**
+ * 前端字典配置文件
+ * 在这里配置所有的字典数据
+ */
+import type { DictionaryItem } from '@/types/dictionary';
+
+/**
+ * 字典配置数据
+ * key: 字典类型标识
+ * value: 字典项数组
+ */
+export const dictionaryConfig: Record<string, DictionaryItem[]> = {
+    // 示例：状态字典
+    statusOptions: [
+        { code: '1', label: '启用', sort: 1 },
+        { code: '0', label: '禁用', sort: 2 },
+    ],
+    
+    // 示例：类型字典
+    typeOptions: [
+        { code: 'TYPE_A', label: '类型A', sort: 1 },
+        { code: 'TYPE_B', label: '类型B', sort: 2 },
+    ],
+};

package/template/src/directives/permission.ts

@@ -0,0 +1,162 @@
+import { Directive, type DirectiveBinding } from 'vue';
+import { getButtonAuth } from '@/api/prefercenter';
+
+/**
+ * 权限指令缓存，避免重复请求
+ * key: 权限代码，value: 是否有权限
+ */
+const permissionCache = new Map<string, boolean>();
+
+/**
+ * 正在请求的权限 Promise Map，用于去重并发请求
+ * key: 权限代码，value: Promise<boolean>
+ */
+const pendingRequests = new Map<string, Promise<boolean>>();
+
+/**
+ * 权限指令
+ * 用法: v-permission="/cmc-prefer-web/pricing/request/queryAddWeb"
+ * 或者: v-permission="{ code: '/cmc-prefer-web/pricing/request/queryAddWeb' }"
+ * 
+ * 如果用户有权限，元素显示；否则隐藏
+ */
+export const vPermission: Directive = {
+    async mounted(el: HTMLElement, binding: DirectiveBinding) {
+        await checkPermission(el, binding);
+    },
+    async updated(el: HTMLElement, binding: DirectiveBinding) {
+        // 如果权限代码没有变化，不需要重新检查
+        const oldValue = (el as any).__permissionCode;
+        const newValue = getPermissionCode(binding);
+        if (oldValue === newValue) {
+            return;
+        }
+        (el as any).__permissionCode = newValue;
+        await checkPermission(el, binding);
+    },
+};
+
+/**
+ * 从 binding 中提取权限代码
+ */
+function getPermissionCode(binding: DirectiveBinding): string | null {
+    if (typeof binding.value === 'string') {
+        return binding.value;
+    } else if (binding.value && typeof binding.value === 'object' && binding.value.code) {
+        return binding.value.code;
+    }
+    return null;
+}
+
+/**
+ * 请求权限（带去重机制）
+ */
+async function requestPermission(permissionCode: string): Promise<boolean> {
+    // 如果正在请求中，等待该请求完成
+    if (pendingRequests.has(permissionCode)) {
+        return await pendingRequests.get(permissionCode)!;
+    }
+
+    // 创建新的请求 Promise
+    const requestPromise = (async () => {
+        try {
+            const params = [{ code: permissionCode }];
+            const response = await getButtonAuth(params);
+
+            // 判断是否有权限
+            // 返回数据格式: [{ isAuth: true, code: "/cmc-prefer-web/pricing/request/queryAddWeb" }]
+            // response 直接就是数组，没有 success 和 data 字段
+            let hasPermission = false;
+            
+            // 获取返回的数据数组
+            let permissionData: any[] = [];
+            
+            if (Array.isArray(response)) {
+                // response 本身就是数组（主要情况）
+                permissionData = response;
+            } else if (response && response.data && Array.isArray(response.data)) {
+                // 兼容有 data 字段的情况
+                permissionData = response.data;
+            } else if (response && response.success !== false && response.data && Array.isArray(response.data)) {
+                // 兼容有 success 和 data 字段的情况
+                permissionData = response.data;
+            }
+            
+            // 从数组中查找对应权限代码的项
+            if (permissionData.length > 0) {
+                const permissionItem = permissionData.find((item: any) => item.code === permissionCode);
+                if (permissionItem) {
+                    hasPermission = permissionItem.isAuth === true;
+                }
+            } else if (response && typeof response === 'object' && !Array.isArray(response) && response.isAuth !== undefined) {
+                // 兼容单个对象的情况
+                hasPermission = response.isAuth === true;
+            }
+
+            // 缓存权限结果
+            permissionCache.set(permissionCode, hasPermission);
+
+            return hasPermission;
+        } catch (error) {
+            console.error('权限检查失败:', error);
+            // 出错时默认返回 false，保证安全性
+            permissionCache.set(permissionCode, false);
+            return false;
+        } finally {
+            // 请求完成后，从 pendingRequests 中移除
+            pendingRequests.delete(permissionCode);
+        }
+    })();
+
+    // 将请求 Promise 存入 Map
+    pendingRequests.set(permissionCode, requestPromise);
+
+    return await requestPromise;
+}
+
+/**
+ * 检查权限并控制元素显示/隐藏
+ */
+async function checkPermission(el: HTMLElement, binding: DirectiveBinding) {
+    try {
+        // 获取权限代码
+        const permissionCode = getPermissionCode(binding);
+        
+        if (!permissionCode) {
+            // 无效值，默认隐藏
+            el.style.display = 'none';
+            return;
+        }
+
+        // 检查缓存
+        if (permissionCache.has(permissionCode)) {
+            const hasPermission = permissionCache.get(permissionCode)!;
+            el.style.display = hasPermission ? '' : 'none';
+            return;
+        }
+
+        // 请求权限（带去重机制）
+        const hasPermission = await requestPermission(permissionCode);
+
+        // 控制元素显示/隐藏
+        el.style.display = hasPermission ? '' : 'none';
+    } catch (error) {
+        console.error('权限检查失败:', error);
+        // 出错时默认隐藏，保证安全性
+        el.style.display = 'none';
+    }
+}
+
+/**
+ * 清除权限缓存（可选，用于权限变更时刷新）
+ */
+export const clearPermissionCache = () => {
+    permissionCache.clear();
+};
+
+/**
+ * 清除指定权限的缓存
+ */
+export const clearPermissionCacheByCode = (code: string) => {
+    permissionCache.delete(code);
+};