@befly-addon/admin 1.8.2 → 1.8.5

package/adminViews/config/system/index.vue

@@ -1,102 +1,93 @@
 <template>
-    <div class="page-sys-config page-table">
-        <div class="main-tool">
-            <div class="left">
-                <TButton theme="primary" @click="$Method.onAction('add', {})">
-                    <template #icon>
-                        <ILucidePlus />
-                    </template>
-                    新增配置
+    <PagedTableDetail class="page-sys-config page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['isSystem', 'valueType', 'state']">
+        <template #toolLeft="scope">
+            <TButton theme="primary" @click="onAdd">
+                <template #icon>
+                    <ILucidePlus />
+                </template>
+                新增配置
+            </TButton>
+            <TSelect v-model="$Data.filter.group" placeholder="配置分组" clearable style="width: 150px" @change="handleFilter(scope.reload)">
+                <TOption v-for="item in $Data.groupOptions" :key="item" :label="item" :value="item" />
+            </TSelect>
+        </template>
+
+        <template #toolRight="scope">
+            <TButton shape="circle" @click="onReload(scope.reload)">
+                <template #icon>
+                    <ILucideRotateCw />
+                </template>
+            </TButton>
+        </template>
+
+        <template #isSystem="{ row }">
+            <TTag v-if="row.isSystem === 1" shape="round" theme="warning" variant="light-outline">系统</TTag>
+            <TTag v-else shape="round" variant="light-outline">自定义</TTag>
+        </template>
+
+        <template #valueType="{ row }">
+            <TTag shape="round" variant="light-outline">{{ row.valueType }}</TTag>
+        </template>
+
+        <template #state="{ row }">
+            <TTag v-if="row.state === 1" shape="round" theme="success" variant="light-outline">正常</TTag>
+            <TTag v-else-if="row.state === 2" shape="round" theme="warning" variant="light-outline">禁用</TTag>
+        </template>
+
+        <template #operation="{ row, deleteRow }">
+            <TDropdown trigger="click" placement="bottom-right" @click="onDropdownAction($event, row, deleteRow)">
+                <TButton theme="primary" size="small">
+                    操作
+                    <template #suffix><ILucideChevronDown /></template>
                 </TButton>
-                <TSelect v-model="$Data.filter.group" placeholder="配置分组" clearable style="width: 150px" @change="$Method.handleFilter">
-                    <TOption v-for="item in $Data.groupOptions" :key="item" :label="item" :value="item" />
-                </TSelect>
-            </div>
-            <div class="right">
-                <TButton shape="circle" @click="$Method.handleRefresh">
-                    <template #icon>
-                        <ILucideRotateCw />
-                    </template>
-                </TButton>
-            </div>
-        </div>
-
-        <div class="main-content">
-            <div class="main-table">
-                <TTable :data="$Data.tableData" :columns="$Data.columns" :loading="$Data.loading" :active-row-keys="$Data.activeRowKeys" row-key="id" height="100%" active-row-type="single" @active-change="$Method.onActiveChange">
-                    <template #isSystem="{ row }">
-                        <TTag v-if="row.isSystem === 1" shape="round" theme="warning" variant="light-outline">系统</TTag>
-                        <TTag v-else shape="round" variant="light-outline">自定义</TTag>
-                    </template>
-                    <template #valueType="{ row }">
-                        <TTag shape="round" variant="light-outline">{{ row.valueType }}</TTag>
-                    </template>
-                    <template #state="{ row }">
-                        <TTag v-if="row.state === 1" shape="round" theme="success" variant="light-outline">正常</TTag>
-                        <TTag v-else-if="row.state === 2" shape="round" theme="warning" variant="light-outline">禁用</TTag>
-                    </template>
-                    <template #operation="{ row }">
-                        <TDropdown trigger="click" placement="bottom-right" @click="(data) => $Method.onAction(data.value, row)">
-                            <TButton theme="primary" size="small">
-                                操作
-                                <template #suffix><ILucideChevronDown /></template>
-                            </TButton>
-                            <TDropdownMenu slot="dropdown">
-                                <TDropdownItem value="upd">
-                                    <ILucidePencil />
-                                    编辑
-                                </TDropdownItem>
-                                <TDropdownItem v-if="row.isSystem !== 1" value="del" :divider="true">
-                                    <ILucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
-                                    删除
-                                </TDropdownItem>
-                            </TDropdownMenu>
-                        </TDropdown>
-                    </template>
-                </TTable>
-            </div>
-
-            <div class="main-detail">
-                <DetailPanel :data="$Data.currentRow" :fields="$Data.detailFields">
-                    <template #isSystem="{ value }">
-                        <TTag v-if="value === 1" shape="round" theme="warning" variant="light-outline">系统配置</TTag>
-                        <TTag v-else shape="round" variant="light-outline">自定义配置</TTag>
-                    </template>
-                    <template #valueType="{ value }">
-                        <TTag shape="round" variant="light-outline">{{ value }}</TTag>
-                    </template>
-                    <template #value="{ value }">
-                        <pre class="config-value">{{ value }}</pre>
-                    </template>
-                </DetailPanel>
-            </div>
-        </div>
-
-        <div class="main-page">
-            <TPagination :current-page="$Data.pagerConfig.currentPage" :page-size="$Data.pagerConfig.limit" :total="$Data.pagerConfig.total" @current-change="$Method.onPageChange" @page-size-change="$Method.handleSizeChange" />
-        </div>
-
-        <!-- 编辑对话框 -->
-        <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="$Method.apiConfigList" />
-    </div>
+                <TDropdownMenu slot="dropdown">
+                    <TDropdownItem value="upd">
+                        <ILucidePencil />
+                        编辑
+                    </TDropdownItem>
+                    <TDropdownItem v-if="row.isSystem !== 1" value="del" :divider="true">
+                        <ILucideTrash2 style="width: 14px; height: 14px; margin-right: 6px" />
+                        删除
+                    </TDropdownItem>
+                </TDropdownMenu>
+            </TDropdown>
+        </template>
+
+        <template #detail="scope">
+            <DetailPanel :data="scope.row" :fields="$Data.columns">
+                <template #isSystem="slotScope">
+                    <TTag v-if="slotScope.value === 1" shape="round" theme="warning" variant="light-outline">系统配置</TTag>
+                    <TTag v-else shape="round" variant="light-outline">自定义配置</TTag>
+                </template>
+                <template #valueType="slotScope">
+                    <TTag shape="round" variant="light-outline">{{ slotScope.value }}</TTag>
+                </template>
+                <template #value="slotScope">
+                    <pre class="config-value">{{ slotScope.value }}</pre>
+                </template>
+            </DetailPanel>
+        </template>
+
+        <template #dialogs="scope">
+            <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="onDialogSuccess(scope.reload)" />
+        </template>
+    </PagedTableDetail>
 </template>
 
 <script setup lang="ts">
-import { Button as TButton, Table as TTable, Tag as TTag, Select as TSelect, Option as TOption, Dropdown as TDropdown, DropdownMenu as TDropdownMenu, DropdownItem as TDropdownItem, Pagination as TPagination, MessagePlugin, DialogPlugin } from "tdesign-vue-next";
+import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Option as TOption, Select as TSelect, Tag as TTag } from "tdesign-vue-next";
 import ILucidePlus from "~icons/lucide/plus";
 import ILucideRotateCw from "~icons/lucide/rotate-cw";
 import ILucidePencil from "~icons/lucide/pencil";
 import ILucideTrash2 from "~icons/lucide/trash-2";
 import ILucideChevronDown from "~icons/lucide/chevron-down";
 import EditDialog from "./components/edit.vue";
-import DetailPanel from "@/components/DetailPanel.vue";
-import { $Http } from "@/plugins/http";
+import DetailPanel from "@/components/detailPanel.vue";
+import PagedTableDetail from "@/components/pagedTableDetail.vue";
 import { withDefaultColumns } from "befly-shared/utils/withDefaultColumns";
 
 // 响应式数据
 const $Data = $ref({
-    tableData: [],
-    loading: false,
     columns: withDefaultColumns([
         { colKey: "name", title: "配置名称", fixed: "left", width: 150 },
         { colKey: "code", title: "配置代码", ellipsis: true },
@@ -106,25 +97,35 @@ const $Data = $ref({
         { colKey: "sort", title: "排序", width: 80 },
         { colKey: "isSystem", title: "类型", width: 80 },
         { colKey: "state", title: "状态", width: 80 },
-        { colKey: "operation", title: "操作", width: 100 }
+        { colKey: "operation", title: "操作", width: 100 },
+        { colKey: "description", title: "描述说明", detail: true }
     ]),
-    detailFields: [
-        { colKey: "name", title: "配置名称" },
-        { colKey: "code", title: "配置代码" },
-        { colKey: "value", title: "配置值" },
-        { colKey: "valueType", title: "值类型" },
-        { colKey: "group", title: "配置分组" },
-        { colKey: "sort", title: "排序" },
-        { colKey: "isSystem", title: "配置类型" },
-        { colKey: "description", title: "描述说明" }
-    ],
-    pagerConfig: {
-        currentPage: 1,
-        limit: 30,
-        total: 0
+    endpoints: {
+        list: {
+            path: "/addon/admin/sysConfig/list",
+            dropValues: [0, ""],
+            dropKeyValue: {
+                group: [""]
+            },
+            buildData: () => {
+                return {
+                    group: $Data.filter.group
+                };
+            }
+        },
+        delete: {
+            path: "/addon/admin/sysConfig/del",
+            idKey: "id",
+            confirm: (row) => {
+                return {
+                    header: "确认删除",
+                    body: `确认删除配置“${row.name}”吗？`,
+                    confirmBtn: "删除",
+                    status: "warning"
+                };
+            }
+        }
     },
-    currentRow: null,
-    activeRowKeys: [],
     editVisible: false,
     actionType: "add",
     rowData: {},
@@ -134,147 +135,45 @@ const $Data = $ref({
     groupOptions: ["基础配置", "邮件配置", "存储配置", "安全配置", "其他"]
 });
 
-// 方法
-const $Method = {
-    async initData() {
-        await $Method.apiConfigList();
-    },
-
-    // 加载配置列表
-    async apiConfigList() {
-        $Data.loading = true;
-        try {
-            const res = await $Http.post(
-                "/addon/admin/sysConfig/list",
-                {
-                    page: $Data.pagerConfig.currentPage,
-                    limit: $Data.pagerConfig.limit,
-                    group: $Data.filter.group
-                },
-                {
-                    dropValues: [0, ""],
-                    dropKeyValue: {
-                        page: [],
-                        limit: [],
-                        group: [""]
-                    }
-                }
-            );
-            $Data.tableData = res.data.lists || [];
-            $Data.pagerConfig.total = res.data.total || 0;
-
-            if ($Data.tableData.length > 0) {
-                $Data.currentRow = $Data.tableData[0];
-                $Data.activeRowKeys = [$Data.tableData[0].id];
-            } else {
-                $Data.currentRow = null;
-                $Data.activeRowKeys = [];
-            }
-        } catch (error) {
-            MessagePlugin.error("加载数据失败");
-        } finally {
-            $Data.loading = false;
-        }
-    },
-
-    // 删除配置
-    async apiConfigDel(row) {
-        if (row.isSystem === 1) {
-            MessagePlugin.warning("系统配置不允许删除");
-            return;
-        }
-
-        let dialog = null;
-        let destroyed = false;
-
-        const destroy = () => {
-            if (destroyed) return;
-            destroyed = true;
-            if (dialog && typeof dialog.destroy === "function") {
-                dialog.destroy();
-            }
-        };
-
-        dialog = DialogPlugin.confirm({
-            header: "确认删除",
-            body: `确认删除配置“${row.name}”吗？`,
-            status: "warning",
-            confirmBtn: "删除",
-            cancelBtn: "取消",
-            onConfirm: async () => {
-                if (dialog && typeof dialog.setConfirmLoading === "function") {
-                    dialog.setConfirmLoading(true);
-                }
-
-                try {
-                    await $Http.post("/addon/admin/sysConfig/del", {
-                        id: row.id
-                    });
-                    MessagePlugin.success("删除成功");
-                    destroy();
-                    await $Method.apiConfigList();
-                } catch (error) {
-                    MessagePlugin.error("删除失败");
-                } finally {
-                    if (dialog && typeof dialog.setConfirmLoading === "function") {
-                        dialog.setConfirmLoading(false);
-                    }
-                }
-            },
-            onClose: () => {
-                destroy();
-            }
-        });
-    },
-
-    // 筛选
-    handleFilter() {
-        $Data.pagerConfig.currentPage = 1;
-        $Method.apiConfigList();
-    },
+function onAdd(): void {
+    onAction("add", {});
+}
 
-    // 刷新
-    handleRefresh() {
-        $Method.apiConfigList();
-    },
+function handleFilter(reload: (options: { keepSelection?: boolean; resetPage?: boolean }) => void): void {
+    reload({ keepSelection: false, resetPage: true });
+}
 
-    // 分页改变
-    onPageChange(currentPage) {
-        $Data.pagerConfig.currentPage = currentPage;
-        $Method.apiConfigList();
-    },
+function onReload(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
 
-    // 每页条数改变
-    handleSizeChange(pageSize) {
-        $Data.pagerConfig.limit = pageSize;
-        $Data.pagerConfig.currentPage = 1;
-        $Method.apiConfigList();
-    },
+function onDialogSuccess(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
 
-    // 高亮行变化
-    onActiveChange(value, context) {
-        if (value.length === 0 && $Data.activeRowKeys.length > 0) {
-            return;
-        }
-        $Data.activeRowKeys = value;
-        if (context.activeRowList && context.activeRowList.length > 0) {
-            $Data.currentRow = context.activeRowList[0].row;
-        }
-    },
+function onAction(command: string, rowData: Record<string, unknown>): void {
+    $Data.actionType = command;
+    if (command === "add") {
+        $Data.rowData = {};
+    } else {
+        $Data.rowData = Object.assign({}, rowData);
+    }
 
-    // 操作菜单点击
-    onAction(command, rowData) {
-        $Data.actionType = command;
-        $Data.rowData = rowData;
-        if (command === "add" || command === "upd") {
-            $Data.editVisible = true;
-        } else if (command === "del") {
-            $Method.apiConfigDel(rowData);
-        }
+    if (command === "add" || command === "upd") {
+        $Data.editVisible = true;
     }
-};
+}
 
-$Method.initData();
+function onDropdownAction(data: unknown, rowData: Record<string, unknown>, deleteRow: (row: Record<string, unknown>) => void): void {
+    const record = data as Record<string, unknown>;
+    const rawValue = record && record["value"] ? record["value"] : "";
+    const cmd = rawValue ? String(rawValue) : "";
+    if (cmd === "del") {
+        deleteRow(rowData);
+        return;
+    }
+    onAction(cmd, rowData);
+}
 </script>
 
 <style scoped lang="scss">

package/adminViews/index/components/userInfo.vue

@@ -22,13 +22,13 @@
             </div>
             <div v-if="$Data.userInfo.lastLoginTime" class="detail-item">
                 <ILucideClock />
-                <span>{{ $Method.formatTime($Data.userInfo.lastLoginTime) }}</span>
+                <span>{{ formatTime($Data.userInfo.lastLoginTime) }}</span>
             </div>
         </div>
 
         <!-- 仅 dev 角色显示刷新缓存按钮 -->
         <div v-if="$Data.userInfo.roleCode === 'dev'" class="user-actions">
-            <TButton theme="primary" size="mini" :loading="$Data.refreshing" @click="$Method.handleRefreshCache">
+            <TButton theme="primary" size="mini" :loading="$Data.refreshing" @click="handleRefreshCache">
                 <template #icon>
                     <ILucideRotateCw />
                 </template>
@@ -53,85 +53,75 @@ const $Data = $ref({
     refreshing: false
 });
 
-// 方法集合
-const $Method = {
-    // 获取数据
-    async fetchData() {
-        try {
-            const { data } = await $Http.post(
-                "/addon/admin/admin/detail",
-                {},
-                {
-                    dropValues: [""]
-                }
-            );
-            Object.assign($Data.userInfo, data);
-        } catch (error) {
-            MessagePlugin.error("获取用户信息失败");
-        }
-    },
-
-    // 刷新缓存
-    async handleRefreshCache() {
-        try {
-            $Data.refreshing = true;
-            const result = await $Http.post("/addon/admin/admin/cacheRefresh");
-
-            if (result.code === 0) {
-                const { apis, menus, roles } = result.data;
-                const messages = [];
-
-                if (apis.success) {
-                    messages.push(`接口缓存: ${apis.count} 个`);
-                }
-                if (menus.success) {
-                    messages.push(`菜单缓存: ${menus.count} 个`);
-                }
-                if (roles.success) {
-                    messages.push(`角色缓存: ${roles.count} 个`);
-                }
-
-                MessagePlugin.success(`缓存刷新成功！${messages.join("，")}`);
-            } else {
-                MessagePlugin.warning(result.msg || "部分缓存刷新失败");
+async function fetchData(): Promise<void> {
+    try {
+        const { data } = await $Http.post(
+            "/addon/admin/admin/detail",
+            {},
+            {
+                dropValues: [""]
             }
-        } catch (error) {
-            MessagePlugin.error("刷新缓存失败，请稍后重试");
-        } finally {
-            $Data.refreshing = false;
-        }
-    },
-
-    // 格式化时间
-    formatTime(timestamp) {
-        if (!timestamp) return "";
-        const date = new Date(Number(timestamp));
-        const now = new Date();
-        const diff = now - date;
-
-        // 小于1分钟
-        if (diff < 60000) {
-            return "刚刚";
-        }
-        // 小于1小时
-        if (diff < 3600000) {
-            return `${Math.floor(diff / 60000)}分钟前`;
-        }
-        // 小于24小时
-        if (diff < 86400000) {
-            return `${Math.floor(diff / 3600000)}小时前`;
-        }
-        // 小于7天
-        if (diff < 604800000) {
-            return `${Math.floor(diff / 86400000)}天前`;
+        );
+        Object.assign($Data.userInfo, data);
+    } catch (error) {
+        MessagePlugin.error("获取用户信息失败");
+    }
+}
+
+async function handleRefreshCache(): Promise<void> {
+    try {
+        $Data.refreshing = true;
+        const result = await $Http.post("/addon/admin/admin/cacheRefresh");
+
+        if (result.code === 0) {
+            const apis = result.data.apis;
+            const menus = result.data.menus;
+            const roles = result.data.roles;
+            const messages: string[] = [];
+
+            if (apis && apis.success) {
+                messages.push(`接口缓存: ${apis.count} 个`);
+            }
+            if (menus && menus.success) {
+                messages.push(`菜单缓存: ${menus.count} 个`);
+            }
+            if (roles && roles.success) {
+                messages.push(`角色缓存: ${roles.count} 个`);
+            }
+
+            MessagePlugin.success(`缓存刷新成功！${messages.join("，")}`);
+        } else {
+            MessagePlugin.warning(result.msg || "部分缓存刷新失败");
         }
-        // 超过7天显示具体日期
-        return `${date.getMonth() + 1}月${date.getDate()}日`;
+    } catch (error) {
+        MessagePlugin.error("刷新缓存失败，请稍后重试");
+    } finally {
+        $Data.refreshing = false;
     }
-};
+}
+
+function formatTime(timestamp: unknown): string {
+    if (!timestamp) return "";
+    const date = new Date(Number(timestamp));
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+
+    if (diff < 60000) {
+        return "刚刚";
+    }
+    if (diff < 3600000) {
+        return `${Math.floor(diff / 60000)}分钟前`;
+    }
+    if (diff < 86400000) {
+        return `${Math.floor(diff / 3600000)}小时前`;
+    }
+    if (diff < 604800000) {
+        return `${Math.floor(diff / 86400000)}天前`;
+    }
+    return `${date.getMonth() + 1}月${date.getDate()}日`;
+}
 
-// 初始化
-$Method.fetchData();
+fetchData();
 </script>
 
 <style scoped lang="scss">