befly-admin 3.4.54 → 3.4.55

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "befly-admin",
-    "version": "3.4.54",
+    "version": "3.4.55",
     "description": "Befly Admin - 基于 Vue3 + OpenTiny Vue 的后台管理系统",
     "type": "module",
     "private": false,
@@ -26,11 +26,11 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@befly-addon/admin": "^1.0.54",
+        "@befly-addon/admin": "^1.0.55",
         "@iconify-json/lucide": "^1.2.76",
         "axios": "^1.13.2",
-        "befly-util": "^1.0.7",
-        "befly-vite": "^1.0.12",
+        "befly-shared": "^1.1.1",
+        "befly-vite": "^1.0.13",
         "pinia": "^3.0.4",
         "tdesign-vue-next": "^1.17.5",
         "vite": "^7.2.4",
@@ -42,5 +42,5 @@
         "pnpm": ">=10.0.0",
         "bun": ">=1.3.0"
     },
-    "gitHead": "1f3cacbe4134ee60654b75338bcaeda535898a84"
+    "gitHead": "2031550167896390ac58c50aeb52b8c23426844e"
 }

package/src/App.vue

@@ -12,6 +12,15 @@ import { ConfigProvider } from 'tdesign-vue-next';
 const globalConfig = {
     dialog: {
         closeOnOverlayClick: false
+    },
+    table: {
+        // 表格默认配置
+        size: 'medium',
+        bordered: false,
+        stripe: false,
+        showHeader: true,
+        // 列默认配置（需要在每个列上单独设置）
+        cellEmptyContent: '-'
     }
 };
 </script>

package/src/components/DetailPanel.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="detail-panel">
+        <div class="detail-content">
+            <div v-if="data">
+                <div v-for="field in fields" :key="field.key" class="detail-item">
+                    <div class="detail-label">{{ field.label }}</div>
+                    <div class="detail-value">
+                        <!-- 状态字段特殊处理 -->
+                        <template v-if="field.key === '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.key]">
+                            <slot :name="field.key" :value="data[field.key]" :row="data"></slot>
+                        </template>
+                        <!-- 默认显示 -->
+                        <template v-else>
+                            {{ formatValue(data[field.key], 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>
+import { Tag as TTag } from 'tdesign-vue-next';
+
+defineProps({
+    /**
+     * 当前行数据
+     */
+    data: {
+        type: Object,
+        default: null
+    },
+    /**
+     * 字段配置
+     * @example [{ key: 'id', label: 'ID' }, { key: 'name', label: '名称', default: '-' }]
+     */
+    fields: {
+        type: Array,
+        required: true
+    },
+    /**
+     * 空数据时的提示文字
+     */
+    emptyText: {
+        type: String,
+        default: '暂无数据'
+    }
+});
+
+/**
+ * 格式化字段值
+ * @param {any} value - 字段值
+ * @param {Object} field - 字段配置
+ * @returns {string} 格式化后的值
+ */
+function formatValue(value, field) {
+    if (value === null || value === undefined || value === '') {
+        return field.default || '-';
+    }
+    if (field.formatter) {
+        return field.formatter(value);
+    }
+    return value;
+}
+</script>
+
+<style scoped lang="scss">
+.detail-panel {
+    height: 100%;
+    overflow: auto;
+}
+
+.detail-content {
+    padding: 16px;
+}
+
+.detail-item {
+    margin-bottom: 16px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.detail-label {
+    color: var(--text-secondary);
+    margin-bottom: 4px;
+    font-size: 12px;
+}
+
+.detail-value {
+    color: var(--text-primary);
+    font-size: 14px;
+    word-break: break-all;
+}
+
+.detail-empty {
+    text-align: center;
+    padding: 48px 0;
+    color: var(--text-placeholder);
+}
+
+.empty-icon {
+    font-size: 48px;
+    margin-bottom: 8px;
+}
+
+.empty-text {
+    font-size: 14px;
+}
+</style>

package/src/layouts/default.vue

@@ -61,7 +61,7 @@
 </template>
 
 <script setup>
-import { arrayToTree } from 'befly-util/arrayToTree';
+import { arrayToTree } from 'befly-shared/arrayToTree';
 
 const router = useRouter();
 const route = useRoute();

package/src/router/index.js

@@ -1,10 +1,10 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 import { routes } from 'vue-router/auto-routes';
 import { $Storage } from '@/plugins/storage';
-import { Layouts } from 'befly-util/layouts';
+import { Layouts } from 'befly-shared/layouts';
 
 /**
- * @typedef {import('befly-util').LayoutConfig} LayoutConfig
+ * @typedef {import('befly-shared').LayoutConfig} LayoutConfig
  */
 
 /**

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

@@ -82,11 +82,15 @@ declare global {
   const useRoute: typeof import('vue-router').useRoute
   const useRouter: typeof import('vue-router').useRouter
   const useSlots: typeof import('vue').useSlots
+  const useTablePage: typeof import('../utils/useTablePage.js').useTablePage
   const useTemplateRef: typeof import('vue').useTemplateRef
   const watch: typeof import('vue').watch
   const watchEffect: typeof import('vue').watchEffect
   const watchPostEffect: typeof import('vue').watchPostEffect
   const watchSyncEffect: typeof import('vue').watchSyncEffect
+  const withDefaultColumns: typeof import('../utils/index.js').withDefaultColumns
+  const withTableProps: typeof import('../utils/index.js').withTableProps
+  const withTreeTableProps: typeof import('../utils/index.js').withTreeTableProps
 }
 // for type re-export
 declare global {
@@ -176,10 +180,14 @@ declare module 'vue' {
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useTablePage: UnwrapRef<typeof import('../utils/useTablePage.js')['useTablePage']>
     readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
     readonly watch: UnwrapRef<typeof import('vue')['watch']>
     readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
     readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
     readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
+    readonly withDefaultColumns: UnwrapRef<typeof import('../utils/index.js')['withDefaultColumns']>
+    readonly withTableProps: UnwrapRef<typeof import('../utils/index.js')['withTableProps']>
+    readonly withTreeTableProps: UnwrapRef<typeof import('../utils/index.js')['withTreeTableProps']>
   }
 }

package/src/types/components.d.ts

@@ -11,6 +11,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    DetailPanel: typeof import('./../components/DetailPanel.vue')['default']
     Dialog: typeof import('./../components/Dialog.vue')['default']
     'ILucide:fileText': typeof import('~icons/lucide/file-text')['default']
     'ILucide:folder': typeof import('~icons/lucide/folder')['default']

package/src/types/typed-router.d.ts

@@ -2,7 +2,7 @@
 /* prettier-ignore */
 // @ts-nocheck
 // noinspection ES6UnusedImports
-// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// Generated by unplugin-vue-router. !! DO NOT MODIFY THIS FILE !!
 // It's recommended to commit this file.
 // Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
 
@@ -44,6 +44,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/addon/admin/api/': RouteRecordInfo<
+      '/addon/admin/api/',
+      '/addon/admin/api',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/addon/admin/dict/': RouteRecordInfo<
       '/addon/admin/dict/',
       '/addon/admin/dict',
@@ -117,6 +124,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'node_modules/@befly-addon/admin/views/api/index.vue': {
+      routes:
+        | '/addon/admin/api/'
+      views:
+        | never
+    }
     'node_modules/@befly-addon/admin/views/dict/index.vue': {
       routes:
         | '/addon/admin/dict/'

package/src/utils/index.js

@@ -23,3 +23,75 @@ export function arrayToTree(items, pid = 0) {
 
     return tree;
 }
+
+/**
+ * 表格列默认配置
+ * 统一设置超出显示省略号等通用配置
+ */
+const defaultColumnConfig = {
+    ellipsis: true,
+    ellipsisTitle: true
+};
+
+/**
+ * 为表格列添加默认配置
+ * @param {Array} columns - 列配置数组
+ * @returns {Array} 添加默认配置后的列数组
+ */
+export function withDefaultColumns(columns) {
+    return columns.map((col) => ({
+        ...defaultColumnConfig,
+        ...col
+    }));
+}
+
+/**
+ * 表格通用属性配置
+ * 统一管理 height、row-key、active-row-type 等通用配置
+ */
+const defaultTableProps = {
+    rowKey: 'id',
+    height: '100%',
+    activeRowType: 'single'
+};
+
+/**
+ * 生成表格通用属性
+ * @param {Object} overrides - 覆盖或扩展的属性
+ * @returns {Object} 合并后的表格属性
+ */
+export function withTableProps(overrides = {}) {
+    return {
+        ...defaultTableProps,
+        ...overrides
+    };
+}
+
+/**
+ * 树形表格默认配置
+ */
+const defaultTreeConfig = {
+    childrenKey: 'children',
+    treeNodeColumnIndex: 0,
+    defaultExpandAll: true
+};
+
+/**
+ * 生成树形表格通用属性
+ * @param {Object} treeOverrides - 树形配置覆盖
+ * @param {Object} tableOverrides - 表格属性覆盖
+ * @returns {Object} 合并后的树形表格属性
+ */
+export function withTreeTableProps(treeOverrides = {}, tableOverrides = {}) {
+    return {
+        ...defaultTableProps,
+        ...tableOverrides,
+        tree: {
+            ...defaultTreeConfig,
+            ...treeOverrides
+        }
+    };
+}
+
+// 导出组合式函数
+export { useTablePage } from './useTablePage.js';

package/src/utils/useTablePage.js

@@ -0,0 +1,174 @@
+/**
+ * 表格页面通用组合式函数
+ * 封装分页、loading、数据加载等公共逻辑
+ */
+import { ref, reactive } from 'vue';
+import { MessagePlugin } from 'tdesign-vue-next';
+import { $Http } from '@/plugins/http';
+
+/**
+ * 创建表格页面通用逻辑
+ * @param {Object} options 配置项
+ * @param {string} options.apiUrl - 列表接口地址
+ * @param {Function} [options.afterLoad] - 数据加载后的回调
+ * @param {Function} [options.transformData] - 数据转换函数
+ * @returns {Object} 响应式数据和方法
+ */
+export function useTablePage(options) {
+    const { apiUrl, afterLoad, transformData } = options;
+
+    // 分页配置
+    const pagerConfig = reactive({
+        currentPage: 1,
+        limit: 30,
+        total: 0
+    });
+
+    // 加载状态
+    const loading = ref(false);
+
+    // 表格数据
+    const tableData = ref([]);
+
+    // 当前选中行
+    const currentRow = ref(null);
+
+    // 选中行的 keys
+    const activeRowKeys = ref([]);
+    const selectedRowKeys = ref([]);
+
+    /**
+     * 加载列表数据
+     * @param {Object} [extraParams={}] - 额外的查询参数
+     */
+    async function loadData(extraParams = {}) {
+        loading.value = true;
+        try {
+            const res = await $Http(apiUrl, {
+                page: pagerConfig.currentPage,
+                limit: pagerConfig.limit,
+                ...extraParams
+            });
+
+            let data = res.data.lists || [];
+
+            // 数据转换
+            if (transformData) {
+                data = transformData(data);
+            }
+
+            tableData.value = data;
+            pagerConfig.total = res.data.total || 0;
+
+            // 自动选中并高亮第一行
+            if (tableData.value.length > 0) {
+                currentRow.value = tableData.value[0];
+                selectedRowKeys.value = [tableData.value[0].id];
+                activeRowKeys.value = [tableData.value[0].id];
+            } else {
+                currentRow.value = null;
+                selectedRowKeys.value = [];
+                activeRowKeys.value = [];
+            }
+
+            // 执行加载后回调
+            if (afterLoad) {
+                afterLoad(tableData.value);
+            }
+        } catch (error) {
+            console.error('加载数据失败:', error);
+            MessagePlugin.error('加载数据失败');
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    /**
+     * 刷新数据
+     */
+    function handleRefresh() {
+        loadData();
+    }
+
+    /**
+     * 分页改变
+     * @param {Object} param
+     * @param {number} param.currentPage - 当前页码
+     */
+    function onPageChange({ currentPage }) {
+        pagerConfig.currentPage = currentPage;
+        loadData();
+    }
+
+    /**
+     * 每页条数改变
+     * @param {Object} param
+     * @param {number} param.pageSize - 每页条数
+     */
+    function handleSizeChange({ pageSize }) {
+        pagerConfig.limit = pageSize;
+        pagerConfig.currentPage = 1;
+        loadData();
+    }
+
+    /**
+     * 高亮行变化（点击行选中）
+     * @param {Array} value - 选中的行 keys
+     * @param {Object} param
+     * @param {Array} param.activeRowData - 选中的行数据
+     */
+    function onActiveChange(value, { activeRowData }) {
+        activeRowKeys.value = value;
+        selectedRowKeys.value = value;
+        // 更新当前高亮的行数据
+        if (activeRowData && activeRowData.length > 0) {
+            currentRow.value = activeRowData[0];
+        } else if (tableData.value.length > 0) {
+            // 如果取消高亮，默认显示第一行
+            currentRow.value = tableData.value[0];
+            selectedRowKeys.value = [tableData.value[0].id];
+            activeRowKeys.value = [tableData.value[0].id];
+        } else {
+            currentRow.value = null;
+        }
+    }
+
+    /**
+     * 单选变化
+     * @param {Array} value - 选中的行 keys
+     * @param {Object} param
+     * @param {Array} param.selectedRowData - 选中的行数据
+     */
+    function onSelectChange(value, { selectedRowData }) {
+        selectedRowKeys.value = value;
+        activeRowKeys.value = value;
+        // 更新当前选中的行数据
+        if (selectedRowData && selectedRowData.length > 0) {
+            currentRow.value = selectedRowData[0];
+        } else if (tableData.value.length > 0) {
+            // 如果取消选中，默认显示第一行
+            currentRow.value = tableData.value[0];
+            selectedRowKeys.value = [tableData.value[0].id];
+            activeRowKeys.value = [tableData.value[0].id];
+        } else {
+            currentRow.value = null;
+        }
+    }
+
+    return {
+        // 数据
+        pagerConfig: pagerConfig,
+        loading: loading,
+        tableData: tableData,
+        currentRow: currentRow,
+        activeRowKeys: activeRowKeys,
+        selectedRowKeys: selectedRowKeys,
+        // 方法
+        loadData: loadData,
+        handleRefresh: handleRefresh,
+        onPageChange: onPageChange,
+        handleSizeChange: handleSizeChange,
+        onActiveChange: onActiveChange,
+        onSelectChange: onSelectChange
+    };
+}

package/vite.config.js

@@ -1,11 +1,11 @@
 import { createBeflyViteConfig } from 'befly-vite';
-import { scanViews } from 'befly-util/scanViews';
+import { scanViews } from 'befly-shared/scanViews';
 import { fileURLToPath } from 'node:url';
 
 export default createBeflyViteConfig({
     root: fileURLToPath(new URL('.', import.meta.url)),
     scanViews: scanViews,
     optimizeDeps: {
-        include: ['befly-util']
+        include: ['befly-shared']
     }
 });