befly-admin 3.13.7 → 3.13.8

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "befly-admin",
-    "version": "3.13.7",
-    "gitHead": "aed5c2a383bfcc1d8489ee880bca3f36bc2cbd28",
+    "version": "3.13.8",
+    "gitHead": "3fab09ac346b6d336a2f60b123d4856d077f8c7d",
     "private": false,
     "description": "Befly Admin - 基于 Vue3 + TDesign Vue Next 的后台管理系统",
     "files": [
@@ -29,7 +29,7 @@
     },
     "dependencies": {
         "axios": "^1.13.5",
-        "befly-admin-ui": "1.8.17",
+        "befly-admin-ui": "1.8.18",
         "befly-vite": "^1.5.3",
         "pinia": "^3.0.4",
         "tdesign-icons-vue-next": "^0.4.0",

package/src/layouts/2.vue

@@ -1,8 +1,6 @@
 <template>
-    <router-view />
+    <div class="layout-2">
+        222
+        <RouterView />
+    </div>
 </template>
-
-<script setup>
-// 布局 2 - 空布局
-// 用于特殊页面，不包含任何框架结构
-</script>

package/src/plugins/router.js

@@ -2,13 +2,27 @@ import { Layouts } from "befly-vite";
 import { createRouter, createWebHashHistory } from "vue-router";
 import { routes } from "vue-router/auto-routes";
 
+const builtinLayouts = {
+    default: () => import("befly-admin-ui/layouts/default.vue"),
+    1: () => import("befly-admin-ui/layouts/1.vue")
+};
+
+const localLayouts = import.meta.glob("../layouts/*.vue");
+
 // 应用自定义布局系统（同时可选注入根路径重定向）
 const finalRoutes = Layouts(routes, $Config.homePath, (layoutName) => {
-    if (layoutName === "default") {
-        return () => import("../layouts/default.vue");
+    const key = String(layoutName || "default");
+
+    if (Object.hasOwn(builtinLayouts, key)) {
+        return builtinLayouts[key];
+    }
+
+    const localKey = `../layouts/${key}.vue`;
+    if (Object.hasOwn(localLayouts, localKey)) {
+        return localLayouts[localKey];
     }
 
-    return () => import(`../layouts/${layoutName}.vue`);
+    return builtinLayouts["1"];
 });
 
 /**

package/src/views/test.vue

@@ -0,0 +1,306 @@
+<template>
+    <div class="dashboard">
+        <h1>后台数据面板</h1>
+    </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.dashboard {
+    padding: 20px;
+    min-height: 100vh;
+    background-color: #f5f7fa;
+    font-family: "Arial", sans-serif;
+}
+
+h1 {
+    color: #2c3e50;
+    font-size: 24px;
+    margin-bottom: 20px;
+    font-weight: 600;
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.stat-card {
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    display: flex;
+    align-items: center;
+    transition:
+        transform 0.2s,
+        box-shadow 0.2s;
+
+    &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+}
+
+.stat-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    margin-right: 20px;
+    color: #fff;
+
+    &.blue {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    }
+
+    &.green {
+        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    }
+
+    &.purple {
+        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    }
+
+    &.orange {
+        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+    }
+}
+
+.stat-content {
+    flex: 1;
+}
+
+.stat-number {
+    font-size: 24px;
+    font-weight: 700;
+    color: #2c3e50;
+    margin-bottom: 4px;
+}
+
+.stat-label {
+    font-size: 14px;
+    color: #90a4ae;
+    margin-bottom: 4px;
+}
+
+.stat-change {
+    font-size: 12px;
+    font-weight: 600;
+
+    &.positive {
+        color: #4caf50;
+    }
+
+    &.negative {
+        color: #f44336;
+    }
+}
+
+.charts-section {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+    gap: 20px;
+    margin-bottom: 20px;
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+    }
+}
+
+.chart-card {
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.chart-card h3 {
+    color: #2c3e50;
+    font-size: 18px;
+    margin-bottom: 20px;
+    font-weight: 600;
+}
+
+.chart-container {
+    height: 250px;
+    background-color: #fafafa;
+    border-radius: 8px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.line-chart {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .chart-grid {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
+        background-size: 40px 40px;
+    }
+
+    .chart-line {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: linear-gradient(to right, #3498db, #9b59b6);
+        animation: lineMove 3s ease-in-out infinite;
+    }
+
+    .chart-labels {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        justify-content: space-between;
+        font-size: 11px;
+        color: #90a4ae;
+        padding: 0 10px;
+    }
+}
+
+@keyframes lineMove {
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-50px);
+    }
+}
+
+.bar-chart {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 40px;
+}
+
+.bar-group {
+    display: flex;
+    align-items: flex-end;
+    gap: 20px;
+}
+
+.bar {
+    width: 80px;
+    border-radius: 4px 4px 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 10px 0;
+    position: relative;
+    transition: transform 0.3s ease;
+
+    &:hover {
+        transform: scaleY(1.05);
+    }
+
+    .bar-label {
+        font-size: 12px;
+        color: #2c3e50;
+        margin-bottom: 4px;
+        font-weight: 600;
+    }
+
+    .bar-value {
+        font-size: 14px;
+        color: #fff;
+        font-weight: 700;
+        margin-bottom: 4px;
+    }
+}
+
+.orders-table-card {
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.orders-table-card h3 {
+    color: #2c3e50;
+    font-size: 18px;
+    margin-bottom: 20px;
+    font-weight: 600;
+}
+
+.table-container {
+    overflow-x: auto;
+}
+
+.orders-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.orders-table th {
+    background-color: #f5f7fa;
+    color: #2c3e50;
+    text-align: left;
+    padding: 12px;
+    font-weight: 600;
+    font-size: 14px;
+    border-bottom: 2px solid #e0e0e0;
+}
+
+.orders-table td {
+    padding: 12px;
+    font-size: 14px;
+    color: #455a64;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.orders-table tbody tr:hover {
+    background-color: #fafafa;
+}
+
+.status {
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 600;
+
+    &.completed {
+        background-color: #e8f5e9;
+        color: #4caf50;
+    }
+
+    &.pending {
+        background-color: #fff3e0;
+        color: #ff9800;
+    }
+
+    &.shipping {
+        background-color: #e3f2fd;
+        color: #2196f3;
+    }
+
+    &.cancelled {
+        background-color: #ffebee;
+        color: #f44336;
+    }
+}
+</style>

package/src/components/detailPanel.vue

@@ -1,192 +0,0 @@
-<template>
-    <div class="detail-panel">
-        <div class="detail-content">
-            <div v-if="data">
-                <div v-for="field in normalizedFields" :key="field.colKey" class="detail-item">
-                    <div class="detail-label">{{ field.title }}</div>
-                    <div class="detail-value">
-                        <!-- 状态字段特殊处理 -->
-                        <template v-if="field.colKey === 'state'">
-                            <TTag v-if="data.state === 1" shape="round" theme="success" variant="light-outline">正常</TTag>
-                            <TTag v-else-if="data.state === 2" shape="round" theme="warning" variant="light-outline">禁用</TTag>
-                            <TTag v-else-if="data.state === 0" shape="round" theme="danger" variant="light-outline">已删除</TTag>
-                        </template>
-                        <!-- 自定义插槽 -->
-                        <template v-else-if="$slots[field.colKey]">
-                            <slot :name="field.colKey" :value="data[field.colKey]" :row="data"></slot>
-                        </template>
-                        <!-- 默认显示 -->
-                        <template v-else>
-                            {{ formatValue(data[field.colKey], field) }}
-                        </template>
-                    </div>
-                </div>
-            </div>
-            <div v-else class="detail-empty">
-                <div class="empty-icon">📋</div>
-                <div class="empty-text">{{ emptyText }}</div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-const props = defineProps({
-    /**
-     * 当前行数据
-     */
-    data: {
-        type: Object,
-        default: null
-    },
-    /**
-     * 字段配置（columns 格式）：[{ colKey: 'id', title: 'ID' }]
-     * 自动过滤 row-select、operation 等非数据列
-     */
-    fields: {
-        type: Array,
-        required: true
-    },
-    /**
-     * 需要过滤的列 key
-     */
-    excludeKeys: {
-        type: Array,
-        default: () => ["row-select", "operation", "index"]
-    },
-    /**
-     * 空数据时的提示文字
-     */
-    emptyText: {
-        type: String,
-        default: "暂无数据"
-    }
-});
-
-/**
- * 标准化字段配置（仅 columns：colKey/title）
- * 注意：模板对“嵌套 ref（对象属性里的 computed/ref）”不会自动解包，
- * 所以这里必须暴露为顶层 computed，避免 v-for 误迭代 computed 对象本身。
- */
-const normalizedFields = computed(() => {
-    const row = props.data && typeof props.data === "object" ? props.data : null;
-    const dataId = row && Object.hasOwn(row, "id") ? row.id : undefined;
-
-    const rawFields = props.fields;
-    const inputFields = Array.isArray(rawFields) ? rawFields : [];
-    const excludeKeys = Array.isArray(props.excludeKeys) ? props.excludeKeys : [];
-
-    const fields = inputFields
-        .filter((item) => {
-            return Boolean(item) && typeof item === "object";
-        })
-        .map((item) => {
-            const colKey = item.colKey;
-            if (item.colKey.length === 0) {
-                return null;
-            }
-            if (excludeKeys.includes(item.colKey)) {
-                return null;
-            }
-
-            return {
-                colKey: item.colKey,
-                title: item.title || item.colKey,
-                default: item.default,
-                formatter: item.formatter
-            };
-        })
-        .filter((item) => {
-            return Boolean(item);
-        });
-
-    // 约定：页面表格不展示 id，但右侧详情始终展示 id（如果 data.id 存在）
-    if (typeof dataId !== "undefined" && !fields.some((f) => f.colKey === "id")) {
-        fields.unshift({
-            colKey: "id",
-            title: "ID",
-            default: "-",
-            formatter: undefined
-        });
-    }
-
-    const safeFields = fields.filter((item) => {
-        if (!item || typeof item !== "object") {
-            return false;
-        }
-        return item.colKey?.length > 0;
-    });
-
-    return safeFields;
-});
-
-function formatValue(value, field) {
-    if (value === null || value === undefined || value === "") {
-        return field.default || "-";
-    }
-    if (field.formatter) {
-        const result = field.formatter(value);
-        return result;
-    }
-    return value;
-}
-</script>
-
-<style scoped lang="scss">
-.detail-panel {
-    height: 100%;
-    overflow: auto;
-    background: var(--bg-color-container);
-}
-
-.detail-content {
-    padding: var(--spacing-md);
-}
-
-.detail-item {
-    margin-bottom: var(--spacing-sm);
-    padding: var(--spacing-sm) 0;
-    border-bottom: 1px solid var(--border-color-light);
-
-    &:first-child {
-        padding-top: 0;
-    }
-
-    &:last-child {
-        margin-bottom: 0;
-        padding-bottom: 0;
-        border-bottom: none;
-    }
-}
-
-.detail-label {
-    color: var(--text-secondary);
-    margin-bottom: 6px;
-    font-size: var(--font-size-xs);
-    font-weight: var(--font-weight-medium);
-}
-
-.detail-value {
-    color: var(--text-primary);
-    font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-medium);
-    word-break: break-all;
-    line-height: 1.5;
-}
-
-.detail-empty {
-    text-align: center;
-    padding: var(--spacing-xl) 0;
-    color: var(--text-placeholder);
-}
-
-.empty-icon {
-    font-size: 40px;
-    margin-bottom: var(--spacing-sm);
-    opacity: 0.5;
-}
-
-.empty-text {
-    font-size: var(--font-size-sm);
-}
-</style>