befly-admin-ui 1.10.1 → 1.10.2

package/components/pageTableDetail.vue

@@ -1,42 +1,42 @@
 <template>
-    <div :class="['page-table-detail', 'page-table', { 'page-table--with-pagination': props.isPagination }]">
-        <div v-if="hasToolBar" class="main-tool">
+    <div :class="['page-table-detail', 'page-table', { 'page-table--with-pagination': $Prop.isPagination }]">
+        <div v-if="$Computed.hasToolBar" class="main-tool">
             <div class="left">
-                <slot name="toolLeft" :reload="reload" :current-row="$Data.currentRow"></slot>
+                <slot name="toolLeft" :reload="$Method.reload" :current-row="$Data.currentRow"></slot>
             </div>
             <div class="right">
-                <slot name="toolRight" :reload="reload" :current-row="$Data.currentRow"></slot>
+                <slot name="toolRight" :reload="$Method.reload" :current-row="$Data.currentRow"></slot>
             </div>
         </div>
 
         <div class="main-content">
             <div class="main-table">
-                <TTable :data="$Data.rows" :columns="tableColumns" :loading="$Data.loading" :active-row-keys="$Data.activeRowKeys" :row-key="rowKey" :height="resolvedTableHeight" active-row-type="single" @active-change="onActiveChange">
+                <TTable :data="$Data.rows" :columns="$Computed.tableColumns" :loading="$Data.loading" :active-row-keys="$Data.activeRowKeys" :row-key="$Prop.rowKey" :height="$Computed.resolvedTableHeight" active-row-type="single" @active-change="$Method.onActiveChange">
                     <template #operation="scope">
-                        <slot name="operation" v-bind="buildOperationSlotProps(scope)"></slot>
+                        <slot name="operation" v-bind="$Method.buildOperationSlotProps(scope)"></slot>
                     </template>
 
-                    <template v-for="name in tableRenderSlotNames" :key="name" v-slot:[name]="scope">
+                    <template v-for="name in $Computed.tableRenderSlotNames" :key="name" v-slot:[name]="scope">
                         <slot v-if="$slots[name]" :name="name" v-bind="scope"></slot>
                         <template v-else>
-                            {{ formatTableCell(scope.row, name) }}
+                            {{ $Method.formatTableCell(scope.row, name) }}
                         </template>
                     </template>
                 </TTable>
             </div>
 
             <div class="main-detail">
-                <slot name="detail" :row="$Data.currentRow" :reload="reload">
-                    <DetailPanel :data="$Data.currentRow" :fields="detailFields" />
+                <slot name="detail" :row="$Data.currentRow" :reload="$Method.reload">
+                    <DetailPanel :data="$Data.currentRow" :fields="$Computed.detailFields" />
                 </slot>
             </div>
         </div>
 
-        <div v-if="props.isPagination" class="main-page">
-            <TPagination :current-page="$Data.pager.currentPage" :page-size="$Data.pager.limit" :total="$Data.pager.total" align="right" :layout="paginationLayout" @current-change="onPageChange" @page-size-change="onPageSizeChange" />
+        <div v-if="$Prop.isPagination" class="main-page">
+            <TPagination :current-page="$Data.pager.currentPage" :page-size="$Data.pager.limit" :total="$Data.pager.total" align="right" :layout="$Prop.paginationLayout" @current-change="$Method.onPageChange" @page-size-change="$Method.onPageSizeChange" />
         </div>
 
-        <slot name="dialogs" :reload="reload" :current-row="$Data.currentRow"></slot>
+        <slot name="dialogs" :reload="$Method.reload" :current-row="$Data.currentRow"></slot>
     </div>
 </template>
 
@@ -44,10 +44,10 @@
 import { computed, onMounted, reactive, useSlots } from "vue";
 import { DialogPlugin, MessagePlugin, Pagination as TPagination, Table as TTable } from "tdesign-vue-next";
 import DetailPanel from "./detailPanel.vue";
-import { $Http } from "@/plugins/http";
+import { $Http } from "@/plugins/http.js";
 import { formatFieldValue } from "../utils/formatFieldValue.js";
 
-const props = defineProps({
+const $Prop = defineProps({
     columns: {
         type: Array,
         required: true
@@ -86,485 +86,464 @@ const props = defineProps({
     }
 });
 
-const emit = defineEmits(["loaded", "row-change", "deleted"]);
+const $Emit = defineEmits(["loaded", "row-change", "deleted"]);
 
-const slots = useSlots();
+const $From = {
+    slots: useSlots(),
+    requestSeq: 0
+};
+
+const $Const = {
+    reservedSlotNames: ["toolLeft", "toolRight", "detail", "dialogs", "operation", "default"]
+};
 
 const $Data = reactive({
     rows: [],
     loading: false,
     pager: {
         currentPage: 1,
-        limit: props.pageSize,
+        limit: $Prop.pageSize,
         total: 0
     },
     currentRow: null,
     activeRowKeys: []
 });
 
-let requestSeq = 0;
-
-function getColKey(col) {
-    const record = col;
-    const rawColKey = record["colKey"];
-    if (typeof rawColKey === "string") return rawColKey;
-    if (typeof rawColKey === "number") return String(rawColKey);
-    return "";
-}
-
-function filterValidColumns(input) {
-    if (!Array.isArray(input)) {
-        return [];
-    }
+const $Method = {
+    getColKey(col) {
+        const record = col;
+        const rawColKey = record["colKey"];
+        if (typeof rawColKey === "string") return rawColKey;
+        if (typeof rawColKey === "number") return String(rawColKey);
+        return "";
+    },
+    filterValidColumns(input) {
+        if (!Array.isArray(input)) {
+            return [];
+        }
 
-    const out = [];
+        const out = [];
 
-    for (const col of input) {
-        if (!col || typeof col !== "object") {
-            continue;
-        }
-        const key = getColKey(col);
-        if (key.length === 0) {
-            continue;
+        for (const col of input) {
+            if (!col || typeof col !== "object") {
+                continue;
+            }
+            const key = $Method.getColKey(col);
+            if (key.length === 0) {
+                continue;
+            }
+            out.push(col);
         }
-        out.push(col);
-    }
-
-    return out;
-}
 
-function mergeDetailColumns(mainColumns, extraColumns) {
-    const out = [];
-    const set = new Set();
+        return out;
+    },
+    mergeDetailColumns(mainColumns, extraColumns) {
+        const out = [];
+        const set = new Set();
 
-    for (const col of mainColumns) {
-        out.push(col);
-        const key = getColKey(col);
-        if (key) {
-            set.add(key);
+        for (const col of mainColumns) {
+            out.push(col);
+            const key = $Method.getColKey(col);
+            if (key) {
+                set.add(key);
+            }
         }
-    }
 
-    for (const col of extraColumns) {
-        const key = getColKey(col);
-        if (key && set.has(key)) {
-            continue;
-        }
-        out.push(col);
-        if (key) {
-            set.add(key);
+        for (const col of extraColumns) {
+            const key = $Method.getColKey(col);
+            if (key && set.has(key)) {
+                continue;
+            }
+            out.push(col);
+            if (key) {
+                set.add(key);
+            }
         }
-    }
 
-    return out;
-}
-
-const columnsMeta = computed(() => {
-    // 只维护一个 columns：
-    // - detail: false（默认）=> 表格展示（同时也会出现在详情里，且顺序靠前）
-    // - detail: true          => 仅在详情展示（顺序靠后）
-    const tableColumns = [];
-    const extraDetailColumns = [];
-    const tableColumnMap = {};
-    const formatKeys = [];
-
-    const cols = filterValidColumns(props.columns);
-    for (const col of cols) {
-        if (col?.detail === true) {
-            extraDetailColumns.push(col);
-            continue;
+        return out;
+    },
+    formatTableCell(row, colKey) {
+        const record = row && typeof row === "object" ? row : {};
+        const value = record[colKey];
+        const field = $Computed.columnsMeta.tableColumnMap[colKey] || {};
+        return formatFieldValue(value, field);
+    },
+    setCurrentRow(row) {
+        $Data.currentRow = row;
+        $Emit("row-change", { row: row });
+    },
+    getRowKeyValue(row) {
+        const key = $Prop.rowKey;
+        if (!key) return null;
+
+        const record = row;
+        const raw = record[key];
+        if (typeof raw === "string") return raw;
+        if (typeof raw === "number") return raw;
+        return null;
+    },
+    applyAutoSelection(list, preferKey) {
+        if (!Array.isArray(list) || list.length === 0) {
+            $Method.setCurrentRow(null);
+            $Data.activeRowKeys = [];
+            return;
         }
 
-        tableColumns.push(col);
-
-        const key = getColKey(col);
-        if (!key) {
-            continue;
+        if (preferKey !== null) {
+            for (const row of list) {
+                const key = $Method.getRowKeyValue(row);
+                if (key === preferKey) {
+                    $Method.setCurrentRow(row);
+                    $Data.activeRowKeys = [key];
+                    return;
+                }
+            }
         }
 
-        tableColumnMap[key] = col;
+        const first = list[0];
+        const firstKey = $Method.getRowKeyValue(first);
+        $Method.setCurrentRow(first);
 
-        const format = col.format;
-        if ((typeof format === "string" && format.trim().length > 0) || typeof format === "function") {
-            formatKeys.push(key);
+        if (firstKey === null) {
+            $Data.activeRowKeys = [];
+            return;
         }
-    }
-
-    const detailFields = extraDetailColumns.length > 0 ? mergeDetailColumns(tableColumns, extraDetailColumns) : tableColumns;
-
-    return {
-        tableColumns: tableColumns,
-        detailFields: detailFields,
-        tableColumnMap: tableColumnMap,
-        formatKeys: formatKeys
-    };
-});
-
-const tableColumns = computed(() => columnsMeta.value.tableColumns);
-
-const detailFields = computed(() => columnsMeta.value.detailFields);
-
-const resolvedTableHeight = computed(() => {
-    if (props.isPagination) {
-        return props.tableHeight;
-    }
-    return "calc(100vh - var(--search-height) - var(--layout-gap) * 2)";
-});
 
-const forwardedTableSlotNames = computed(() => {
-    if (Array.isArray(props.tableSlotNames) && props.tableSlotNames.length > 0) {
-        const out = [];
-        const set = new Set();
-        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);
+        $Data.activeRowKeys = [firstKey];
+    },
+    getLastPage(total, limit) {
+        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 loadList(options) {
+        const listEndpoint = $Prop.endpoints?.list;
+        if (!listEndpoint) {
+            return;
         }
-        return out;
-    }
 
-    const names = [];
-    const reserved = ["toolLeft", "toolRight", "detail", "dialogs", "operation", "default"]; // operation 单独处理
+        const preferKey = options?.keepSelection ? ($Data.currentRow ? $Method.getRowKeyValue($Data.currentRow) : null) : null;
 
-    for (const key of Object.keys(slots)) {
-        if (reserved.includes(key)) continue;
-        names.push(key);
-    }
+        $From.requestSeq += 1;
+        const seq = $From.requestSeq;
 
-    return names;
-});
+        $Data.loading = true;
+        try {
+            const pageKey = listEndpoint.pageKey || "page";
+            const limitKey = listEndpoint.limitKey || "limit";
 
-const hasToolBar = computed(() => {
-    return Boolean(slots.toolLeft) || Boolean(slots.toolRight);
-});
+            const data = {};
+            data[pageKey] = $Data.pager.currentPage;
+            data[limitKey] = $Data.pager.limit;
 
-const tableRenderSlotNames = computed(() => {
-    const out = [];
-    const set = new Set();
+            if (listEndpoint.buildData) {
+                const extra = listEndpoint.buildData({
+                    currentPage: $Data.pager.currentPage,
+                    limit: $Data.pager.limit
+                });
+                if (extra && typeof extra === "object") {
+                    for (const key of Object.keys(extra)) {
+                        data[key] = extra[key];
+                    }
+                }
+            }
 
-    for (const name of forwardedTableSlotNames.value) {
-        if (!name || set.has(name)) {
-            continue;
-        }
-        set.add(name);
-        out.push(name);
-    }
+            const res = await $Http(listEndpoint.path, data, listEndpoint.dropValues, listEndpoint.dropKeyValue);
 
-    for (const key of columnsMeta.value.formatKeys) {
-        if (!key || set.has(key)) {
-            continue;
-        }
-        set.add(key);
-        out.push(key);
-    }
+            if (seq !== $From.requestSeq) {
+                return;
+            }
 
-    return out;
-});
+            const lists = Array.isArray(res?.data?.lists) ? res.data.lists : [];
+            const total = typeof res?.data?.total === "number" ? res.data.total : 0;
+
+            const allowPageFallback = options?.allowPageFallback !== false;
+            if (allowPageFallback && lists.length === 0 && total > 0) {
+                const lastPage = $Method.getLastPage(total, $Data.pager.limit);
+                if ($Data.pager.currentPage > lastPage) {
+                    $Data.pager.currentPage = lastPage;
+                    await $Method.loadList({
+                        keepSelection: false,
+                        allowPageFallback: false
+                    });
+                    return;
+                }
+            }
 
-function formatTableCell(row, colKey) {
-    const record = row && typeof row === "object" ? row : {};
-    const value = record[colKey];
-    const field = columnsMeta.value.tableColumnMap[colKey] || {};
-    return formatFieldValue(value, field);
-}
-
-function setCurrentRow(row) {
-    $Data.currentRow = row;
-    emit("row-change", { row: row });
-}
-
-function getRowKeyValue(row) {
-    const key = props.rowKey;
-    if (!key) return null;
-
-    const record = row;
-    const raw = record[key];
-    if (typeof raw === "string") return raw;
-    if (typeof raw === "number") return raw;
-    return null;
-}
-
-function applyAutoSelection(list, preferKey) {
-    if (!Array.isArray(list) || list.length === 0) {
-        setCurrentRow(null);
-        $Data.activeRowKeys = [];
-        return;
-    }
+            $Data.rows = lists;
+            $Data.pager.total = total;
 
-    if (preferKey !== null) {
-        for (const row of list) {
-            const k = getRowKeyValue(row);
-            if (k === preferKey) {
-                setCurrentRow(row);
-                $Data.activeRowKeys = [k];
+            $Method.applyAutoSelection(lists, preferKey);
+            $Emit("loaded", { rows: lists, total: total });
+        } catch (error) {
+            if (seq !== $From.requestSeq) {
                 return;
             }
+            MessagePlugin.error("加载数据失败");
+        } finally {
+            if (seq === $From.requestSeq) {
+                $Data.loading = false;
+            }
         }
-    }
-
-    const first = list[0];
-    const firstKey = getRowKeyValue(first);
-    setCurrentRow(first);
-
-    if (firstKey === null) {
-        $Data.activeRowKeys = [];
-        return;
-    }
-
-    $Data.activeRowKeys = [firstKey];
-}
-
-function getLastPage(total, limit) {
-    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) {
-    const listEndpoint = props.endpoints?.list;
-    if (!listEndpoint) {
-        return;
-    }
-
-    const preferKey = options?.keepSelection ? ($Data.currentRow ? getRowKeyValue($Data.currentRow) : null) : null;
-
-    requestSeq += 1;
-    const seq = requestSeq;
-
-    $Data.loading = true;
-    try {
-        const pageKey = listEndpoint.pageKey || "page";
-        const limitKey = listEndpoint.limitKey || "limit";
-
-        const data = {};
-        data[pageKey] = $Data.pager.currentPage;
-        data[limitKey] = $Data.pager.limit;
-
-        if (listEndpoint.buildData) {
-            const extra = listEndpoint.buildData({
-                currentPage: $Data.pager.currentPage,
-                limit: $Data.pager.limit
-            });
-            if (extra && typeof extra === "object") {
-                for (const k of Object.keys(extra)) {
-                    data[k] = extra[k];
-                }
+    },
+    async reload(options) {
+        if (options?.resetPage) {
+            $Data.pager.currentPage = 1;
+        }
+        await $Method.loadList({
+            keepSelection: options?.keepSelection,
+            allowPageFallback: true
+        });
+    },
+    onPageChange(info) {
+        $Data.pager.currentPage = info.currentPage;
+        $Method.reload({ keepSelection: true });
+    },
+    onPageSizeChange(info) {
+        $Data.pager.limit = info.pageSize;
+        $Data.pager.currentPage = 1;
+        $Method.reload({ keepSelection: false });
+    },
+    onActiveChange(value, context) {
+        if (value.length === 0) {
+            if ($Data.activeRowKeys.length > 0) {
+                return;
             }
+
+            $Data.activeRowKeys = [];
+            $Method.setCurrentRow(null);
+            return;
         }
 
-        const res = await $Http(listEndpoint.path, data, listEndpoint.dropValues, listEndpoint.dropKeyValue);
+        $Data.activeRowKeys = value;
 
-        // 并发保护：旧请求返回后不应覆盖新请求的状态
-        if (seq !== requestSeq) {
+        const list = context.activeRowList;
+        if (list && Array.isArray(list) && list.length > 0) {
+            const row = list[0]?.row || null;
+            $Method.setCurrentRow(row);
             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, $Data.pager.limit);
-            if ($Data.pager.currentPage > lastPage) {
-                $Data.pager.currentPage = lastPage;
-                await loadList({
-                    keepSelection: false,
-                    allowPageFallback: false
-                });
+        const activeKey = value[0];
+        for (const row of $Data.rows) {
+            const key = $Method.getRowKeyValue(row);
+            if (key === activeKey) {
+                $Method.setCurrentRow(row);
                 return;
             }
         }
+    },
+    getDeleteConfirmContent(ep, row) {
+        const confirm = ep.confirm;
+        if (!confirm) {
+            return {
+                header: "确认删除",
+                body: "确认删除该记录吗？",
+                confirmBtn: "删除"
+            };
+        }
 
-        $Data.rows = lists;
-        $Data.pager.total = total;
+        if (typeof confirm === "function") {
+            return confirm(row);
+        }
 
-        applyAutoSelection(lists, preferKey);
-        emit("loaded", { rows: lists, total: total });
-    } catch (error) {
-        if (seq !== requestSeq) {
+        return confirm;
+    },
+    async deleteRow(row) {
+        const ep = $Prop.endpoints?.delete;
+        if (!ep) {
+            MessagePlugin.error("未配置删除接口");
             return;
         }
-        MessagePlugin.error("加载数据失败");
-    } finally {
-        if (seq === requestSeq) {
-            $Data.loading = false;
-        }
-    }
-}
 
-async function reload(options) {
-    if (options?.resetPage) {
-        $Data.pager.currentPage = 1;
-    }
-    await loadList({
-        keepSelection: options?.keepSelection,
-        allowPageFallback: true
-    });
-}
-
-function onPageChange(info) {
-    $Data.pager.currentPage = info.currentPage;
-    reload({ keepSelection: true });
-}
-
-function onPageSizeChange(info) {
-    $Data.pager.limit = info.pageSize;
-    $Data.pager.currentPage = 1;
-    reload({ keepSelection: false });
-}
-
-function onActiveChange(value, context) {
-    // 禁止取消高亮：如果新值为空，保持当前选中
-    if (value.length === 0) {
-        if ($Data.activeRowKeys.length > 0) {
+        const idKey = ep.idKey || "id";
+        const record = row;
+        const rawId = record[idKey];
+
+        if (rawId === null || rawId === undefined || rawId === "") {
+            MessagePlugin.error("删除失败：缺少主键");
             return;
         }
 
-        $Data.activeRowKeys = [];
-        setCurrentRow(null);
-        return;
-    }
+        const confirmContent = $Method.getDeleteConfirmContent(ep, row);
 
-    $Data.activeRowKeys = value;
+        let dialog = null;
+        let destroyed = false;
 
-    const list = context.activeRowList;
-    if (list && Array.isArray(list) && list.length > 0) {
-        const row = list[0]?.row || null;
-        setCurrentRow(row);
-        return;
-    }
+        const destroy = () => {
+            if (destroyed) return;
+            destroyed = true;
+            if (dialog && typeof dialog.destroy === "function") {
+                dialog.destroy();
+            }
+        };
 
-    // C1：兜底回查（activeRowList 缺失时按 key 在 rows 中回查）
-    const activeKey = value[0];
-    for (const row of $Data.rows) {
-        const key = getRowKeyValue(row);
-        if (key === activeKey) {
-            setCurrentRow(row);
-            return;
-        }
-    }
-}
+        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);
+                }
 
-function getDeleteConfirmContent(ep, row) {
-    const confirm = ep.confirm;
-    if (!confirm) {
-        return {
-            header: "确认删除",
-            body: "确认删除该记录吗？",
-            confirmBtn: "删除"
-        };
-    }
+                try {
+                    const data = {};
+                    data[idKey] = rawId;
 
-    if (typeof confirm === "function") {
-        return confirm(row);
-    }
+                    if (ep.buildData) {
+                        const extra = ep.buildData(row);
+                        if (extra && typeof extra === "object") {
+                            for (const key of Object.keys(extra)) {
+                                data[key] = extra[key];
+                            }
+                        }
+                    }
 
-    return confirm;
-}
+                    await $Http(ep.path, data, ep.dropValues, ep.dropKeyValue);
+
+                    MessagePlugin.success("删除成功");
+                    destroy();
+                    $Emit("deleted", { row: row });
+                    await $Method.reload({ keepSelection: true });
+                } catch (error) {
+                    MessagePlugin.error("删除失败");
+                } finally {
+                    if (dialog && typeof dialog.setConfirmLoading === "function") {
+                        dialog.setConfirmLoading(false);
+                    }
+                }
+            },
+            onClose: () => {
+                destroy();
+            }
+        });
+    },
+    buildOperationSlotProps(scope) {
+        const out = {};
 
-async function deleteRow(row) {
-    const ep = props.endpoints?.delete;
-    if (!ep) {
-        MessagePlugin.error("未配置删除接口");
-        return;
-    }
+        for (const key of Object.keys(scope)) {
+            out[key] = scope[key];
+        }
 
-    const idKey = ep.idKey || "id";
-    const record = row;
-    const rawId = record[idKey];
+        out["deleteRow"] = $Method.deleteRow;
+        out["reload"] = $Method.reload;
 
-    if (rawId === null || rawId === undefined || rawId === "") {
-        MessagePlugin.error("删除失败：缺少主键");
-        return;
+        return out;
     }
+};
+
+const $Computed = reactive({
+    columnsMeta: computed(() => {
+        const tableColumns = [];
+        const extraDetailColumns = [];
+        const tableColumnMap = {};
+        const formatKeys = [];
+
+        const cols = $Method.filterValidColumns($Prop.columns);
+        for (const col of cols) {
+            if (col?.detail === true) {
+                extraDetailColumns.push(col);
+                continue;
+            }
 
-    const confirmContent = getDeleteConfirmContent(ep, row);
-
-    let dialog = null;
-    let destroyed = false;
+            tableColumns.push(col);
 
-    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);
+            const key = $Method.getColKey(col);
+            if (!key) {
+                continue;
             }
 
-            try {
-                const data = {};
-                data[idKey] = rawId;
+            tableColumnMap[key] = col;
 
-                if (ep.buildData) {
-                    const extra = ep.buildData(row);
-                    if (extra && typeof extra === "object") {
-                        for (const k of Object.keys(extra)) {
-                            data[k] = extra[k];
-                        }
-                    }
-                }
+            const format = col.format;
+            if ((typeof format === "string" && format.trim().length > 0) || typeof format === "function") {
+                formatKeys.push(key);
+            }
+        }
 
-                await $Http(ep.path, data, ep.dropValues, ep.dropKeyValue);
+        const detailFields = extraDetailColumns.length > 0 ? $Method.mergeDetailColumns(tableColumns, extraDetailColumns) : tableColumns;
 
-                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);
-                }
+        return {
+            tableColumns: tableColumns,
+            detailFields: detailFields,
+            tableColumnMap: tableColumnMap,
+            formatKeys: formatKeys
+        };
+    }),
+    tableColumns: computed(() => $Computed.columnsMeta.tableColumns),
+    detailFields: computed(() => $Computed.columnsMeta.detailFields),
+    resolvedTableHeight: computed(() => {
+        if ($Prop.isPagination) {
+            return $Prop.tableHeight;
+        }
+        return "calc(100vh - var(--search-height) - var(--layout-gap) * 2)";
+    }),
+    forwardedTableSlotNames: computed(() => {
+        if (Array.isArray($Prop.tableSlotNames) && $Prop.tableSlotNames.length > 0) {
+            const out = [];
+            const set = new Set();
+            for (const name of $Prop.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);
             }
-        },
-        onClose: () => {
-            destroy();
+            return out;
         }
-    });
-}
 
-function buildOperationSlotProps(scope) {
-    const out = {};
+        const names = [];
+        for (const key of Object.keys($From.slots)) {
+            if ($Const.reservedSlotNames.includes(key)) continue;
+            names.push(key);
+        }
 
-    for (const k of Object.keys(scope)) {
-        out[k] = scope[k];
-    }
+        return names;
+    }),
+    hasToolBar: computed(() => {
+        return Boolean($From.slots.toolLeft) || Boolean($From.slots.toolRight);
+    }),
+    tableRenderSlotNames: computed(() => {
+        const out = [];
+        const set = new Set();
 
-    out["deleteRow"] = deleteRow;
-    out["reload"] = reload;
+        for (const name of $Computed.forwardedTableSlotNames) {
+            if (!name || set.has(name)) {
+                continue;
+            }
+            set.add(name);
+            out.push(name);
+        }
 
-    return out;
-}
+        for (const key of $Computed.columnsMeta.formatKeys) {
+            if (!key || set.has(key)) {
+                continue;
+            }
+            set.add(key);
+            out.push(key);
+        }
+
+        return out;
+    })
+});
 
 defineExpose({
-    reload: reload,
-    deleteRow: deleteRow,
+    reload: $Method.reload,
+    deleteRow: $Method.deleteRow,
     rows: $Data.rows,
     pager: $Data.pager,
     currentRow: $Data.currentRow
 });
 
 onMounted(() => {
-    if (!props.autoLoad) return;
-    reload({ keepSelection: false });
+    if (!$Prop.autoLoad) return;
+    $Method.reload({ keepSelection: false });
 });
 </script>