befly-admin 3.4.37 → 3.4.38

package/.env.development

@@ -1,7 +1,7 @@
 # 开发环境配置
 
 # 接口请求地址
-VITE_API_BASE_URL=http://localhost:3000/api
+VITE_API_BASE_URL="http://localhost:3000/api"
 
 # 存储命名空间
-VITE_STORAGE_NAMESPACE=befly_admin_dev
+VITE_STORAGE_NAMESPACE="befly_admin_dev"

package/.env.production

@@ -1,7 +1,7 @@
 # 生产环境配置
 
 # 接口请求地址（部署时修改为实际的生产环境地址）
-VITE_API_BASE_URL=https://api.your-domain.com/api
+VITE_API_BASE_URL="http://localhost:3000/api"
 
 # 存储命名空间
-VITE_STORAGE_NAMESPACE=befly_admin_prod
+VITE_STORAGE_NAMESPACE="befly_admin_prod"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "befly-admin",
-    "version": "3.4.37",
+    "version": "3.4.38",
     "description": "Befly Admin - 基于 Vue3 + OpenTiny Vue 的后台管理系统",
     "type": "module",
     "private": false,
@@ -27,21 +27,22 @@
         "sync:admin": "bunx befly sync:admin"
     },
     "dependencies": {
-        "@befly-addon/admin": "1.0.37",
+        "@befly-addon/admin": "1.0.38",
+        "@iconify-json/lucide": "^1.2.72",
         "axios": "^1.13.2",
+        "befly-util": "0.1.1",
+        "befly-vite": "1.0.3",
+        "echarts": "^6.0.0",
         "pinia": "^3.0.4",
         "tdesign-vue-next": "^1.10.6",
+        "vite": "^7.2.2",
         "vue": "^3.5.22",
         "vue-router": "^4.6.3"
     },
-    "devDependencies": {
-        "@iconify-json/lucide": "^1.2.72",
-        "befly-vite": "1.0.2",
-        "vite": "^7.2.2"
-    },
     "engines": {
         "node": ">=24.0.0",
-        "pnpm": ">=10.0.0"
+        "pnpm": ">=10.0.0",
+        "bun": ">=1.3.0"
     },
-    "gitHead": "784849eea6ddee5491efbad70a9f829a4b6e77f5"
+    "gitHead": "afb329b2cce2ab5f5821d8515ae7dba4622a4f1f"
 }

package/src/App.vue

@@ -1,12 +1,19 @@
 <template>
-    <div id="app">
-        <RouterView />
-    </div>
+    <ConfigProvider :global-config="globalConfig">
+        <div id="app">
+            <RouterView />
+        </div>
+    </ConfigProvider>
 </template>
 
 <script setup>
-// 自动导入的 API，无需手动引入
-// import { RouterView } from 'vue-router'
+import { ConfigProvider } from 'tdesign-vue-next';
+
+const globalConfig = {
+    dialog: {
+        closeOnOverlayClick: false
+    }
+};
 </script>
 
 <style scoped>

package/src/layouts/default.vue

@@ -11,9 +11,9 @@
                         <span class="user-name">{{ $Data.userInfo.nickname || '管理员' }}</span>
                         <t-tag theme="primary" size="small" variant="light">{{ $Data.userInfo.role || '超级管理员' }}</t-tag>
                     </div>
-                    <t-button variant="text" size="medium" @click="$Method.handleLogout">
+                    <t-button class="logout-btn" theme="danger" shape="square" @click="$Method.handleLogout">
                         <template #icon>
-                            <i-lucide:x />
+                            <i-lucide:log-out style="color: #fff" />
                         </template>
                     </t-button>
                 </div>
@@ -22,24 +22,24 @@
 
         <!-- 菜单栏 -->
         <div class="layout-menu">
-            <t-menu :value="$Data.currentMenuKey" :expanded="$Data.expandedKeys" style="height: 100%" @change="$Method.onMenuClick" @expand="(value) => ($Data.expandedKeys = value)">
+            <t-menu v-model:value="$Data.currentMenuKey" v-model:expanded="$Data.expandedKeys" style="height: 100%" @change="$Method.onMenuClick">
                 <template v-for="menu in $Data.userMenus" :key="menu.id">
                     <!-- 无子菜单 -->
                     <t-menu-item v-if="!menu.children || menu.children.length === 0" :value="menu.path">
                         <template #icon>
-                            <i-lucide:home v-if="menu.path === '/addon/admin/'" />
-                            <i-lucide:file-text v-else />
+                            <i-lucide:home v-if="menu.path === '/addon/admin/'" style="margin-right: 8px" />
+                            <i-lucide:file-text v-else style="margin-right: 8px" />
                         </template>
                         {{ menu.name }}
                     </t-menu-item>
                     <!-- 有子菜单 -->
                     <t-submenu v-else :value="String(menu.id)" :title="menu.name">
                         <template #icon>
-                            <i-lucide:folder />
+                            <i-lucide:folder style="margin-right: 8px" />
                         </template>
                         <t-menu-item v-for="child in menu.children" :key="child.id" :value="child.path">
                             <template #icon>
-                                <i-lucide:file-text />
+                                <i-lucide:file-text style="margin-right: 8px" />
                             </template>
                             {{ child.name }}
                         </t-menu-item>
@@ -49,14 +49,19 @@
         </div>
 
         <!-- 内容区域 -->
-        <div class="layout-main">
+        <div class="layout-content">
             <RouterView />
         </div>
+
+        <!-- 底部分页栏 -->
+        <div class="layout-footer">
+            <span>© 2024 Befly. All rights reserved.</span>
+        </div>
     </div>
 </template>
 
 <script setup>
-import { arrayToTree } from '@/utils';
+import { arrayToTree } from 'befly-util/arrayToTree';
 
 const router = useRouter();
 const route = useRoute();
@@ -119,11 +124,9 @@ const $Method = {
             }
         }
 
-        // 使用 nextTick 确保 DOM 更新后再设置高亮
-        nextTick(() => {
-            $Data.expandedKeys = expandedKeys;
-            $Data.currentMenuKey = currentPath;
-        });
+        // 设置展开的父级和当前激活的菜单
+        $Data.expandedKeys = expandedKeys;
+        $Data.currentMenuKey = currentPath;
     },
 
     // 处理菜单点击
@@ -152,31 +155,26 @@ $Method.fetchUserMenus();
 
 <style scoped lang="scss">
 .layout-0-wrapper {
-    $menu-width: 240px;
-    $head-height: 64px;
-    $gap: 16px;
     position: absolute;
     top: 0;
     left: 0;
     height: 100vh;
     width: 100vw;
-    background: #f5f7fa;
+    background: var(--bg-color-page);
     overflow: hidden;
 
     .layout-header {
         position: absolute;
-        top: $gap;
-        left: $gap;
-        right: $gap;
-        height: $head-height;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: var(--header-height);
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 0 15px;
-        background: #ffffff;
-        border-radius: 8px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-        border: 1px solid #e8eaed;
+        padding: 0 var(--spacing-md) 0 var(--spacing-lg);
+        background: var(--bg-color-page);
+        border-bottom: 1px solid var(--border-color);
         z-index: 100;
 
         .logo {
@@ -184,30 +182,23 @@ $Method.fetchUserMenus();
                 margin: 0;
                 font-size: 22px;
                 font-weight: 700;
-                color: #1f2329;
+                color: var(--text-primary);
                 letter-spacing: 0.5px;
-                background: linear-gradient(135deg, #0052d9 0%, #0084f4 100%);
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-                background-clip: text;
             }
         }
 
         .header-right {
             display: flex;
             align-items: center;
-            gap: 16px;
+            gap: var(--spacing-md);
 
             .user-info-bar {
                 display: flex;
                 align-items: center;
-                gap: 12px;
-
-                .user-avatar {
-                    width: 32px;
-                    height: 32px;
-                    flex-shrink: 0;
-                }
+                padding: var(--spacing-xs) var(--spacing-sm);
+                background: var(--bg-color-container);
+                border: 1px solid var(--border-color);
+                border-radius: var(--border-radius-small);
 
                 .user-text {
                     display: flex;
@@ -215,36 +206,55 @@ $Method.fetchUserMenus();
                     align-items: flex-start;
 
                     .user-name {
-                        font-size: 14px;
+                        font-size: var(--font-size-sm);
                         font-weight: 500;
-                        color: $text-primary;
+                        color: var(--text-primary);
                     }
                 }
+                .logout-btn {
+                    color: var(--text-secondary);
+                    margin-left: var(--spacing-md);
+                }
             }
         }
     }
 
     .layout-menu {
         position: absolute;
-        top: calc($head-height + $gap * 2);
-        left: $gap;
-        bottom: $gap;
-        width: $menu-width;
-        background: #ffffff;
-        border-radius: 8px;
+        top: var(--header-height);
+        left: 0;
+        bottom: var(--footer-height);
+        width: var(--sidebar-width);
+        background: var(--bg-color-container);
+        border-right: 1px solid var(--border-color);
         z-index: 99;
-        padding: 16px 12px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-        border: 1px solid #e8eaed;
+        overflow-y: auto;
     }
 
-    .layout-main {
+    .layout-content {
         position: absolute;
-        top: calc($head-height + $gap * 2);
-        left: calc($menu-width + $gap * 2);
-        right: $gap;
-        bottom: $gap;
-        background: #f5f7fa;
+        top: var(--header-height);
+        left: var(--sidebar-width);
+        right: 0;
+        bottom: var(--footer-height);
+        background: var(--bg-color-page);
+        overflow-y: auto;
+    }
+
+    .layout-footer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: var(--footer-height);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--bg-color-container);
+        border-top: 1px solid var(--border-color);
+        color: var(--text-secondary);
+        font-size: var(--font-size-sm);
+        z-index: 98;
     }
 }
 </style>

package/src/main.js

@@ -6,12 +6,18 @@ import 'tdesign-vue-next/es/style/index.css';
 // 引入 UnoCSS 样式
 import 'virtual:uno.css';
 
+// 引入 addonAdmin 的 CSS 变量
+import '@befly-addon/admin/styles/variables.scss';
+
 // 引入全局基础样式（reset、通用类、滚动条等）
 import '@/styles/global.scss';
 
 // 引入路由实例
 import { router } from './router';
 
+// 引入 TDesign 组件
+import { Table as TTable } from 'tdesign-vue-next';
+
 const app = createApp(App);
 
 // 安装基础插件
@@ -20,4 +26,36 @@ app.use(createPinia());
 // 使用路由
 app.use(router);
 
+// 全局配置 TTable 默认属性
+app.component('TTable', {
+    ...TTable,
+    props: {
+        ...TTable.props,
+        bordered: {
+            type: [Boolean, Object],
+            default: () => ({ cell: 'horizontal' })
+        },
+        size: {
+            type: String,
+            default: 'small'
+        },
+        height: {
+            type: [String, Number],
+            default: '100%'
+        },
+        headerCellClassName: {
+            type: String,
+            default: 'custom-table-cell-class'
+        },
+        selectOnRowClick: {
+            type: Boolean,
+            default: true
+        },
+        activeRowType: {
+            type: String,
+            default: 'single'
+        }
+    }
+});
+
 app.mount('#app');

package/src/plugins/http.js

@@ -47,17 +47,25 @@ request.interceptors.response.use(
     (response) => {
         const res = response.data;
 
-        // 如果code不是0,说明业务失败
+        // 如果code不是0,说明业务失败（不显示提示，由业务层处理）
         if (res.code !== 0) {
-            MessagePlugin.error(res.msg || '请求失败');
-            return Promise.reject(res.data);
+            return Promise.reject({
+                code: res.code,
+                msg: res.msg || '请求失败',
+                data: res.data
+            });
         }
 
+        // 成功时返回 data
         return res;
     },
     (error) => {
         MessagePlugin.error('网络连接失败');
-        return Promise.reject(error);
+        return Promise.reject({
+            code: -1,
+            msg: '网络连接失败',
+            error: error
+        });
     }
 );
 
@@ -68,7 +76,7 @@ request.interceptors.response.use(
  * @param {any} [data={}] - 请求数据，默认为空对象
  * @param {'get' | 'post'} [method='post'] - 请求方法，默认为 'post'，可选 'get' | 'post'
  * @param {import('axios').AxiosRequestConfig} [config] - axios 请求配置
- * @returns {Promise<ApiResponse>}
+ * @returns {Promise<any>} 成功返回 data，失败抛出 {code, msg, data} 对象
  */
 export function $Http(url, data = {}, method = 'post', config) {
     const methodLower = method.toLowerCase();

package/src/styles/global.scss

@@ -103,6 +103,17 @@ body {
 //     }
 // }
 
+.dialog-wrapper {
+    background-color: var(--bg-color-page);
+    padding: var(--spacing-md);
+    border-radius: var(--border-radius);
+}
+.dialog-footer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
 // 数据列表页面通用布局样式
 .page-table {
     position: absolute;
@@ -110,24 +121,44 @@ body {
     left: 0;
     right: 0;
     bottom: 0;
-    padding: 16px;
-    background: #f5f7fa;
+    display: flex;
+    flex-direction: column;
+    background: var(--bg-color-page);
+
+    // 搜索栏区域
+    .main-search {
+        height: var(--search-height);
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        background: var(--bg-color-container);
+        border-bottom: 1px solid var(--border-color);
+
+        .search-left {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+        }
 
-    // 工具栏
+        .search-right {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+            margin-left: auto;
+        }
+    }
+
+    // 工具栏（兼容旧代码）
     .main-tool {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 56px;
+        height: var(--search-height);
+        flex-shrink: 0;
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 0 10px;
-        background: #fff;
-        border-radius: 8px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-        border: 1px solid #e8eaed;
+        padding: 0 16px;
+        background: var(--bg-color-container);
+        border-bottom: 1px solid var(--border-color);
 
         .left,
         .toolbar-left {
@@ -150,40 +181,111 @@ body {
         }
     }
 
-    // 表格区域
-    .main-table {
-        position: absolute;
-        top: 72px;
-        left: 0;
-        right: 0;
-        bottom: 72px;
+    // 主内容区域（包含表格和详情）
+    .main-content {
+        flex: 1;
+        display: flex;
         overflow: hidden;
-        background: #fff;
-        border-radius: 8px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-        border: 1px solid #e8eaed;
+
+        // 表格区域
+        .main-table {
+            flex: 1;
+            overflow: hidden;
+            background: var(--bg-color-container);
+            border-right: 1px solid var(--border-color);
+
+            // 表格头部样式
+            .custom-table-cell-class {
+                background-color: var(--bg-color-page) !important;
+                font-weight: 600;
+                color: var(--text-primary);
+            }
+
+            // 覆盖 TDesign 默认选中行样式
+            :deep(.t-table) {
+                // 单选框选中样式
+                .t-table__row--selected {
+                    background-color: rgba(var(--primary-color-rgb), 0.08) !important;
+
+                    &:hover {
+                        background-color: rgba(var(--primary-color-rgb), 0.12) !important;
+                    }
+                }
+
+                // 行高亮样式（active-row）
+                .t-table__row--active {
+                    background-color: rgba(var(--primary-color-rgb), 0.08) !important;
+
+                    &:hover {
+                        background-color: rgba(var(--primary-color-rgb), 0.12) !important;
+                    }
+                }
+
+                // 普通行悬停样式
+                .t-table__row:hover {
+                    background-color: var(--bg-color-hover);
+                }
+            }
+        }
+
+        // 详情侧栏（默认隐藏）
+        .main-detail {
+            background: var(--bg-color-container);
+            width: var(--detail-width);
+
+            .detail-content {
+                padding: 16px;
+                overflow-y: auto;
+                height: 100%;
+            }
+        }
+    }
+
+    // 兼容旧版独立表格区域（未使用 main-content 包裹时）
+    & > .main-table {
+        flex: 1;
+        overflow: hidden;
+        background: var(--bg-color-container);
 
         .custom-table-cell-class {
-            background-color: #f5f7fa !important;
+            background-color: var(--bg-color-page) !important;
             font-weight: 600;
-            color: #1f2329;
+            color: var(--text-primary);
+        }
+
+        :deep(.t-table) {
+            .t-table__row--selected {
+                background-color: rgba(var(--primary-color-rgb), 0.08) !important;
+
+                &:hover {
+                    background-color: rgba(var(--primary-color-rgb), 0.12) !important;
+                }
+            }
+
+            .t-table__row--active {
+                background-color: rgba(var(--primary-color-rgb), 0.08) !important;
+
+                &:hover {
+                    background-color: rgba(var(--primary-color-rgb), 0.12) !important;
+                }
+            }
+
+            .t-table__row:hover {
+                background-color: var(--bg-color-hover);
+            }
         }
     }
 
-    // 分页器
+    // 分页栏
     .main-page {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: 56px;
-        padding: 0 20px;
-        background: #fff;
-        border-radius: 8px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-        border: 1px solid #e8eaed;
+        height: var(--pagination-height);
+        flex-shrink: 0;
+        padding: 0 16px;
+        background: var(--bg-color-container);
+        border-top: 1px solid var(--border-color);
         display: flex;
         align-items: center;
+
         .tiny-pager {
             width: 100%;
         }

package/src/types/auto-imports.d.ts

@@ -103,9 +103,7 @@ declare module 'vue' {
     readonly $Config: UnwrapRef<typeof import('../config/index.js')['$Config']>
     readonly $Http: UnwrapRef<typeof import('../plugins/http.js')['$Http']>
     readonly $Storage: UnwrapRef<typeof import('../plugins/storage.js')['$Storage']>
-    readonly DialogPlugin: UnwrapRef<typeof import('tdesign-vue-next')['DialogPlugin']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly MessagePlugin: UnwrapRef<typeof import('tdesign-vue-next')['MessagePlugin']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly arrayToTree: UnwrapRef<typeof import('../utils/index.js')['arrayToTree']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>

package/src/types/components.d.ts

@@ -11,15 +11,30 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    Dialog: typeof import('./../components/Dialog.vue')['default']
     'ILucide:fileText': typeof import('~icons/lucide/file-text')['default']
     'ILucide:folder': typeof import('~icons/lucide/folder')['default']
     'ILucide:home': typeof import('~icons/lucide/home')['default']
+    'ILucide:logOut': typeof import('~icons/lucide/log-out')['default']
     'ILucide:x': typeof import('~icons/lucide/x')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    TAvatar: typeof import('tdesign-vue-next')['Avatar']
     TButton: typeof import('tdesign-vue-next')['Button']
+    TCard: typeof import('tdesign-vue-next')['Card']
+    TIconBell: typeof import('tdesign-vue-next')['IconBell']
+    TIconChevronDown: typeof import('tdesign-vue-next')['IconChevronDown']
+    TIconChevronUp: typeof import('tdesign-vue-next')['IconChevronUp']
+    TIconMoney: typeof import('tdesign-vue-next')['IconMoney']
+    TIconShop: typeof import('tdesign-vue-next')['IconShop']
+    TIconUser: typeof import('tdesign-vue-next')['IconUser']
+    TLink: typeof import('tdesign-vue-next')['Link']
     TMenu: typeof import('tdesign-vue-next')['Menu']
     TMenuItem: typeof import('tdesign-vue-next')['MenuItem']
+    TOption: typeof import('tdesign-vue-next')['Option']
+    TProgress: typeof import('tdesign-vue-next')['Progress']
+    TSelect: typeof import('tdesign-vue-next')['Select']
+    TSpace: typeof import('tdesign-vue-next')['Space']
     TSubmenu: typeof import('tdesign-vue-next')['Submenu']
     TTag: typeof import('tdesign-vue-next')['Tag']
   }