befly-admin 3.12.2 → 3.12.4

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "befly-admin",
-    "version": "3.12.2",
-    "gitHead": "0e9cfa6f2979b12725e06e34936737738a219747",
+    "version": "3.12.4",
+    "gitHead": "9823cc29996ba9950dd08bfd72856e3b65815039",
     "private": false,
     "description": "Befly Admin - 基于 Vue3 + TDesign Vue Next 的后台管理系统",
     "files": [
@@ -28,7 +28,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@befly-addon/admin": "^1.8.2",
+        "@befly-addon/admin": "^1.8.4",
         "@iconify-json/lucide": "^1.2.85",
         "axios": "^1.13.2",
         "befly-shared": "1.4.3",

package/src/components/PagedTableDetailPage.vue

@@ -0,0 +1,470 @@
+<template>
+    <div class="page-table-detail page-table">
+        <div class="main-tool">
+            <div class="left">
+                <slot name="toolLeft" :reload="reload" :current-row="currentRow"></slot>
+            </div>
+            <div class="right">
+                <slot name="toolRight" :reload="reload" :current-row="currentRow"></slot>
+            </div>
+        </div>
+
+        <div class="main-content">
+            <div class="main-table">
+                <TTable :data="rows" :columns="columns" :loading="loading" :active-row-keys="activeRowKeys" :row-key="rowKey" :height="tableHeight" active-row-type="single" @active-change="onActiveChange">
+                    <template #operation="scope">
+                        <slot name="operation" v-bind="buildOperationSlotProps(scope)"></slot>
+                    </template>
+
+                    <template v-for="name in forwardedTableSlotNames" :key="name" v-slot:[name]="scope">
+                        <slot :name="name" v-bind="scope"></slot>
+                    </template>
+                </TTable>
+            </div>
+
+            <div class="main-detail">
+                <slot name="detail" :row="currentRow" :reload="reload">
+                    <DetailPanel :data="currentRow" :fields="detailFields" />
+                </slot>
+            </div>
+        </div>
+
+        <div class="main-page">
+            <TPagination :current-page="pager.currentPage" :page-size="pager.limit" :total="pager.total" :align="paginationAlign" :layout="paginationLayout" @current-change="onPageChange" @page-size-change="onPageSizeChange" />
+        </div>
+
+        <slot name="dialogs" :reload="reload" :current-row="currentRow"></slot>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, useSlots } from "vue";
+import { DialogPlugin, MessagePlugin, Pagination as TPagination, Table as TTable, type PrimaryTableCol, type TableRowData } from "tdesign-vue-next";
+
+import DetailPanel from "@/components/DetailPanel.vue";
+import { $Http, type HttpApiResponse } from "@/plugins/http";
+
+type PagerState = {
+    currentPage: number;
+    limit: number;
+    total: number;
+};
+
+type DeleteConfirmContent = {
+    header: string;
+    body: string;
+    confirmBtn?: string;
+    cancelBtn?: string;
+    status?: "warning" | "danger" | "info" | "success";
+};
+
+type DeleteEndpoint<Row extends TableRowData> = {
+    path: string;
+    idKey?: string;
+    confirm?: DeleteConfirmContent | ((row: Row) => DeleteConfirmContent);
+    dropValues?: readonly (string | number | boolean | null | undefined)[];
+    dropKeyValue?: Record<string, readonly (string | number | boolean | null | undefined)[]>;
+    buildData?: (row: Row) => Record<string, unknown>;
+};
+
+type ListEndpoint = {
+    path: string;
+    pageKey?: string;
+    limitKey?: string;
+    dropValues?: readonly (string | number | boolean | null | undefined)[];
+    dropKeyValue?: Record<string, readonly (string | number | boolean | null | undefined)[]>;
+    buildData?: (pager: { currentPage: number; limit: number }) => Record<string, unknown>;
+};
+
+type Endpoints<Row extends TableRowData> = {
+    list?: ListEndpoint;
+    delete?: DeleteEndpoint<Row>;
+};
+
+type ListResponse<Row extends TableRowData> = {
+    lists: Row[];
+    total: number;
+};
+
+type LoadListOptions = {
+    keepSelection?: boolean;
+    allowPageFallback?: boolean;
+};
+
+const props = withDefaults(
+    defineProps<{
+        columns: PrimaryTableCol[];
+        detailFields?: PrimaryTableCol[];
+        rowKey?: string;
+        tableHeight?: string;
+        pageSize?: number;
+        endpoints?: Endpoints<TableRowData>;
+        paginationAlign?: "left" | "center" | "right";
+        paginationLayout?: string;
+        autoLoad?: boolean;
+        tableSlotNames?: string[];
+    }>(),
+    {
+        detailFields: undefined,
+        rowKey: "id",
+        tableHeight: "calc(100vh - var(--search-height) - var(--pagination-height) - var(--layout-gap) * 4)",
+        pageSize: 30,
+        endpoints: undefined,
+        paginationAlign: "right",
+        paginationLayout: "total, prev, pager, next, jumper",
+        autoLoad: true,
+        tableSlotNames: undefined
+    }
+);
+
+const emit = defineEmits<{
+    (e: "loaded", payload: { rows: TableRowData[]; total: number }): void;
+    (e: "row-change", payload: { row: TableRowData | null }): void;
+    (e: "deleted", payload: { row: TableRowData }): void;
+}>();
+
+const slots = useSlots();
+
+const rows = ref<TableRowData[]>([]);
+const loading = ref<boolean>(false);
+const pager = ref<PagerState>({
+    currentPage: 1,
+    limit: props.pageSize,
+    total: 0
+});
+
+const currentRow = ref<TableRowData | null>(null);
+const activeRowKeys = ref<Array<string | number>>([]);
+
+let requestSeq = 0;
+
+const detailFields = computed(() => {
+    if (props.detailFields && Array.isArray(props.detailFields)) {
+        return props.detailFields;
+    }
+    return props.columns;
+});
+
+const forwardedTableSlotNames = computed(() => {
+    if (Array.isArray(props.tableSlotNames) && props.tableSlotNames.length > 0) {
+        const out: string[] = [];
+        const set = new Set<string>();
+        for (const name of props.tableSlotNames) {
+            if (typeof name !== "string") continue;
+            const trimmed = name.trim();
+            if (trimmed.length === 0) continue;
+            if (set.has(trimmed)) continue;
+            set.add(trimmed);
+            out.push(trimmed);
+        }
+        return out;
+    }
+
+    const names: string[] = [];
+    const reserved = ["toolLeft", "toolRight", "detail", "dialogs", "operation", "default"]; // operation 单独处理
+
+    for (const key of Object.keys(slots)) {
+        if (reserved.includes(key)) continue;
+        names.push(key);
+    }
+
+    return names;
+});
+
+function setCurrentRow(row: TableRowData | null): void {
+    currentRow.value = row;
+    emit("row-change", { row: row });
+}
+
+function getRowKeyValue(row: TableRowData): string | number | null {
+    const key = props.rowKey;
+    if (!key) return null;
+
+    const record = row as Record<string, unknown>;
+    const raw = record[key];
+    if (typeof raw === "string") return raw;
+    if (typeof raw === "number") return raw;
+    return null;
+}
+
+function applyAutoSelection(list: TableRowData[], preferKey: string | number | null): void {
+    if (!Array.isArray(list) || list.length === 0) {
+        setCurrentRow(null);
+        activeRowKeys.value = [];
+        return;
+    }
+
+    if (preferKey !== null) {
+        for (const row of list) {
+            const k = getRowKeyValue(row);
+            if (k === preferKey) {
+                setCurrentRow(row);
+                activeRowKeys.value = [k];
+                return;
+            }
+        }
+    }
+
+    const first = list[0] as TableRowData;
+    const firstKey = getRowKeyValue(first);
+    setCurrentRow(first);
+
+    if (firstKey === null) {
+        activeRowKeys.value = [];
+        return;
+    }
+
+    activeRowKeys.value = [firstKey];
+}
+
+function getLastPage(total: number, limit: number): number {
+    if (total <= 0) return 1;
+    if (limit <= 0) return 1;
+    const pages = Math.ceil(total / limit);
+    if (!Number.isFinite(pages) || pages <= 0) return 1;
+    return pages;
+}
+
+async function loadList(options?: LoadListOptions): Promise<void> {
+    const listEndpoint = props.endpoints?.list;
+    if (!listEndpoint) {
+        return;
+    }
+
+    const preferKey = options?.keepSelection ? (currentRow.value ? getRowKeyValue(currentRow.value) : null) : null;
+
+    requestSeq += 1;
+    const seq = requestSeq;
+
+    loading.value = true;
+    try {
+        const pageKey = listEndpoint.pageKey || "page";
+        const limitKey = listEndpoint.limitKey || "limit";
+
+        const data: Record<string, unknown> = {};
+        data[pageKey] = pager.value.currentPage;
+        data[limitKey] = pager.value.limit;
+
+        if (listEndpoint.buildData) {
+            const extra = listEndpoint.buildData({ currentPage: pager.value.currentPage, limit: pager.value.limit });
+            if (extra && typeof extra === "object") {
+                for (const k of Object.keys(extra)) {
+                    data[k] = extra[k];
+                }
+            }
+        }
+
+        const res = (await $Http.post<ListResponse<TableRowData>>(listEndpoint.path, data, {
+            dropValues: listEndpoint.dropValues,
+            dropKeyValue: listEndpoint.dropKeyValue
+        })) as HttpApiResponse<ListResponse<TableRowData>>;
+
+        // 并发保护：旧请求返回后不应覆盖新请求的状态
+        if (seq !== requestSeq) {
+            return;
+        }
+
+        const lists = Array.isArray(res?.data?.lists) ? res.data.lists : [];
+        const total = typeof res?.data?.total === "number" ? res.data.total : 0;
+
+        // B：页码越界修正（删除/过滤等导致 total 变小后，当前页可能已不存在）
+        const allowPageFallback = options?.allowPageFallback !== false;
+        if (allowPageFallback && lists.length === 0 && total > 0) {
+            const lastPage = getLastPage(total, pager.value.limit);
+            if (pager.value.currentPage > lastPage) {
+                pager.value.currentPage = lastPage;
+                await loadList({ keepSelection: false, allowPageFallback: false });
+                return;
+            }
+        }
+
+        rows.value = lists;
+        pager.value.total = total;
+
+        applyAutoSelection(lists, preferKey);
+        emit("loaded", { rows: lists, total: total });
+    } catch (error) {
+        if (seq !== requestSeq) {
+            return;
+        }
+        MessagePlugin.error("加载数据失败");
+    } finally {
+        if (seq === requestSeq) {
+            loading.value = false;
+        }
+    }
+}
+
+async function reload(options?: { keepSelection?: boolean; resetPage?: boolean }): Promise<void> {
+    if (options?.resetPage) {
+        pager.value.currentPage = 1;
+    }
+    await loadList({ keepSelection: options?.keepSelection, allowPageFallback: true });
+}
+
+function onPageChange(info: { currentPage: number }): void {
+    pager.value.currentPage = info.currentPage;
+    void reload({ keepSelection: true });
+}
+
+function onPageSizeChange(info: { pageSize: number }): void {
+    pager.value.limit = info.pageSize;
+    pager.value.currentPage = 1;
+    void reload({ keepSelection: false });
+}
+
+function onActiveChange(value: Array<string | number>, context: { activeRowList?: Array<{ row: TableRowData }> }): void {
+    // 禁止取消高亮：如果新值为空，保持当前选中
+    if (value.length === 0) {
+        if (activeRowKeys.value.length > 0) {
+            return;
+        }
+
+        activeRowKeys.value = [];
+        setCurrentRow(null);
+        return;
+    }
+
+    activeRowKeys.value = value;
+
+    const list = context.activeRowList;
+    if (list && Array.isArray(list) && list.length > 0) {
+        const row = list[0]?.row || null;
+        setCurrentRow(row);
+        return;
+    }
+
+    // C1：兜底回查（activeRowList 缺失时按 key 在 rows 中回查）
+    const activeKey = value[0];
+    for (const row of rows.value) {
+        const key = getRowKeyValue(row);
+        if (key === activeKey) {
+            setCurrentRow(row);
+            return;
+        }
+    }
+}
+
+function getDeleteConfirmContent(ep: DeleteEndpoint<TableRowData>, row: TableRowData): DeleteConfirmContent {
+    const confirm = ep.confirm;
+    if (!confirm) {
+        return {
+            header: "确认删除",
+            body: "确认删除该记录吗？",
+            confirmBtn: "删除"
+        };
+    }
+
+    if (typeof confirm === "function") {
+        return confirm(row);
+    }
+
+    return confirm;
+}
+
+async function deleteRow(row: TableRowData): Promise<void> {
+    const ep = props.endpoints?.delete;
+    if (!ep) {
+        MessagePlugin.error("未配置删除接口");
+        return;
+    }
+
+    const idKey = ep.idKey || "id";
+    const record = row as Record<string, unknown>;
+    const rawId = record[idKey];
+
+    if (rawId === null || rawId === undefined || rawId === "") {
+        MessagePlugin.error("删除失败：缺少主键");
+        return;
+    }
+
+    const confirmContent = getDeleteConfirmContent(ep, row);
+
+    let dialog: { destroy?: () => void; setConfirmLoading?: (v: boolean) => void } | null = null;
+    let destroyed = false;
+
+    const destroy = () => {
+        if (destroyed) return;
+        destroyed = true;
+        if (dialog && typeof dialog.destroy === "function") {
+            dialog.destroy();
+        }
+    };
+
+    dialog = DialogPlugin.confirm({
+        header: confirmContent.header,
+        body: confirmContent.body,
+        status: confirmContent.status || "warning",
+        confirmBtn: confirmContent.confirmBtn || "删除",
+        cancelBtn: confirmContent.cancelBtn || "取消",
+        onConfirm: async () => {
+            if (dialog && typeof dialog.setConfirmLoading === "function") {
+                dialog.setConfirmLoading(true);
+            }
+
+            try {
+                const data: Record<string, unknown> = {};
+                data[idKey] = rawId;
+
+                if (ep.buildData) {
+                    const extra = ep.buildData(row);
+                    if (extra && typeof extra === "object") {
+                        for (const k of Object.keys(extra)) {
+                            data[k] = extra[k];
+                        }
+                    }
+                }
+
+                await $Http.post(ep.path, data, {
+                    dropValues: ep.dropValues,
+                    dropKeyValue: ep.dropKeyValue
+                });
+
+                MessagePlugin.success("删除成功");
+                destroy();
+                emit("deleted", { row: row });
+                await reload({ keepSelection: true });
+            } catch (error) {
+                MessagePlugin.error("删除失败");
+            } finally {
+                if (dialog && typeof dialog.setConfirmLoading === "function") {
+                    dialog.setConfirmLoading(false);
+                }
+            }
+        },
+        onClose: () => {
+            destroy();
+        }
+    });
+}
+
+function buildOperationSlotProps(scope: Record<string, unknown>): Record<string, unknown> {
+    const out: Record<string, unknown> = {};
+
+    for (const k of Object.keys(scope)) {
+        out[k] = scope[k];
+    }
+
+    out["deleteRow"] = deleteRow;
+    out["reload"] = reload;
+
+    return out;
+}
+
+defineExpose({
+    reload: reload,
+    deleteRow: deleteRow,
+    rows: rows,
+    pager: pager,
+    currentRow: currentRow
+});
+
+onMounted(() => {
+    if (!props.autoLoad) return;
+    void reload({ keepSelection: false });
+});
+</script>
+
+<style scoped lang="scss">
+// 样式继承自全局 page-table
+</style>

package/src/types/components.d.ts

@@ -20,6 +20,7 @@ declare module 'vue' {
     'ILucide:logOut': typeof import('~icons/lucide/log-out')['default']
     'ILucide:settings': typeof import('~icons/lucide/settings')['default']
     'ILucide:user': typeof import('~icons/lucide/user')['default']
+    PagedTableDetailPage: typeof import('./../components/PagedTableDetailPage.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TButton: typeof import('tdesign-vue-next')['Button']