@befly-addon/admin 1.8.2 → 1.8.5

package/adminViews/log/login/index.vue

@@ -1,65 +1,52 @@
 <template>
-    <div class="page-login-log page-table">
-        <div class="main-tool">
-            <div class="left"></div>
-            <div class="right">
-                <TButton shape="circle" @click="$Method.handleRefresh">
-                    <template #icon>
-                        <ILucideRotateCw />
-                    </template>
-                </TButton>
-            </div>
-        </div>
+    <PagedTableDetail class="page-login-log page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['loginResult', 'loginTime', 'deviceType']">
+        <template #toolRight="scope">
+            <TButton shape="circle" @click="onReload(scope.reload)">
+                <template #icon>
+                    <ILucideRotateCw />
+                </template>
+            </TButton>
+        </template>
 
-        <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 #loginResult="{ row }">
-                        <TTag v-if="row.loginResult === 1" shape="round" theme="success" variant="light-outline">成功</TTag>
-                        <TTag v-else shape="round" theme="danger" variant="light-outline">失败</TTag>
-                    </template>
-                    <template #loginTime="{ row }">
-                        {{ $Method.formatTime(row.loginTime) }}
-                    </template>
-                    <template #deviceType="{ row }">
-                        <TTag shape="round" variant="light-outline">{{ row.deviceType || "desktop" }}</TTag>
-                    </template>
-                </TTable>
-            </div>
+        <template #loginResult="{ row }">
+            <TTag v-if="row.loginResult === 1" shape="round" theme="success" variant="light-outline">成功</TTag>
+            <TTag v-else shape="round" theme="danger" variant="light-outline">失败</TTag>
+        </template>
 
-            <div class="main-detail">
-                <DetailPanel :data="$Data.currentRow" :fields="$Data.detailFields">
-                    <template #loginResult="{ value }">
-                        <TTag v-if="value === 1" shape="round" theme="success" variant="light-outline">成功</TTag>
-                        <TTag v-else shape="round" theme="danger" variant="light-outline">失败</TTag>
-                    </template>
-                    <template #loginTime="{ value }">
-                        {{ $Method.formatTime(value) }}
-                    </template>
-                    <template #deviceType="{ value }">
-                        <TTag shape="round" variant="light-outline">{{ value || "desktop" }}</TTag>
-                    </template>
-                </DetailPanel>
-            </div>
-        </div>
+        <template #loginTime="{ row }">
+            {{ formatTime(row.loginTime) }}
+        </template>
 
-        <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>
-    </div>
+        <template #deviceType="{ row }">
+            <TTag shape="round" variant="light-outline">{{ row.deviceType || "desktop" }}</TTag>
+        </template>
+
+        <template #detail="scope">
+            <DetailPanel :data="scope.row" :fields="$Data.columns">
+                <template #loginResult="slotScope">
+                    <TTag v-if="slotScope.value === 1" shape="round" theme="success" variant="light-outline">成功</TTag>
+                    <TTag v-else shape="round" theme="danger" variant="light-outline">失败</TTag>
+                </template>
+                <template #loginTime="slotScope">
+                    {{ formatTime(slotScope.value) }}
+                </template>
+                <template #deviceType="slotScope">
+                    <TTag shape="round" variant="light-outline">{{ slotScope.value || "desktop" }}</TTag>
+                </template>
+            </DetailPanel>
+        </template>
+    </PagedTableDetail>
 </template>
 
 <script setup lang="ts">
-import { Button as TButton, Table as TTable, Tag as TTag, Pagination as TPagination, MessagePlugin } from "tdesign-vue-next";
+import { Button as TButton, Tag as TTag } from "tdesign-vue-next";
 import ILucideRotateCw from "~icons/lucide/rotate-cw";
-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: "username", title: "用户名", fixed: "left" },
         { colKey: "ip", title: "登录IP" },
@@ -67,117 +54,39 @@ const $Data = $ref({
         { colKey: "osName", title: "操作系统" },
         { colKey: "deviceType", title: "设备类型" },
         { colKey: "loginTime", title: "登录时间" },
-        { colKey: "loginResult", title: "登录结果" }
-    ]),
-    // 详情面板显示更多字段
-    detailFields: [
-        { colKey: "username", title: "用户名" },
-        { colKey: "nickname", title: "昵称" },
-        { colKey: "ip", title: "登录IP" },
-        { colKey: "browserName", title: "浏览器" },
-        { colKey: "browserVersion", title: "浏览器版本" },
-        { colKey: "osName", title: "操作系统" },
-        { colKey: "osVersion", title: "系统版本" },
-        { colKey: "deviceType", title: "设备类型" },
-        { colKey: "deviceVendor", title: "设备厂商" },
-        { colKey: "deviceModel", title: "设备型号" },
-        { colKey: "engineName", title: "渲染引擎" },
-        { colKey: "cpuArchitecture", title: "CPU架构" },
-        { colKey: "loginTime", title: "登录时间" },
         { colKey: "loginResult", title: "登录结果" },
-        { colKey: "failReason", title: "失败原因" }
-    ],
-    pagerConfig: {
-        currentPage: 1,
-        limit: 30,
-        total: 0
-    },
-    currentRow: null,
-    activeRowKeys: []
-});
-
-// 方法
-const $Method = {
-    async initData() {
-        await $Method.apiLoginLogList();
-    },
-
-    // 加载登录日志列表
-    async apiLoginLogList() {
-        $Data.loading = true;
-        try {
-            const res = await $Http.post(
-                "/addon/admin/loginLog/list",
-                {
-                    page: $Data.pagerConfig.currentPage,
-                    limit: $Data.pagerConfig.limit
-                },
-                {
-                    dropValues: [""]
-                }
-            );
-            $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;
-        }
-    },
-
-    // 刷新
-    handleRefresh() {
-        $Method.apiLoginLogList();
-    },
-
-    // 分页改变
-    onPageChange(currentPage) {
-        $Data.pagerConfig.currentPage = currentPage;
-        $Method.apiLoginLogList();
-    },
-
-    // 每页条数改变
-    handleSizeChange(pageSize) {
-        $Data.pagerConfig.limit = pageSize;
-        $Data.pagerConfig.currentPage = 1;
-        $Method.apiLoginLogList();
-    },
-
-    // 高亮行变化
-    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;
+        { colKey: "nickname", title: "昵称", detail: true },
+        { colKey: "browserVersion", title: "浏览器版本", detail: true },
+        { colKey: "osVersion", title: "系统版本", detail: true },
+        { colKey: "deviceVendor", title: "设备厂商", detail: true },
+        { colKey: "deviceModel", title: "设备型号", detail: true },
+        { colKey: "engineName", title: "渲染引擎", detail: true },
+        { colKey: "cpuArchitecture", title: "CPU架构", detail: true },
+        { colKey: "failReason", title: "失败原因", detail: true }
+    ]),
+    endpoints: {
+        list: {
+            path: "/addon/admin/loginLog/list",
+            dropValues: [""]
         }
-    },
-
-    // 格式化时间
-    formatTime(timestamp) {
-        if (!timestamp) return "-";
-        const date = new Date(timestamp);
-        const year = date.getFullYear();
-        const month = String(date.getMonth() + 1).padStart(2, "0");
-        const day = String(date.getDate()).padStart(2, "0");
-        const hours = String(date.getHours()).padStart(2, "0");
-        const minutes = String(date.getMinutes()).padStart(2, "0");
-        const seconds = String(date.getSeconds()).padStart(2, "0");
-        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
     }
-};
+});
+
+function onReload(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
 
-$Method.initData();
+function formatTime(timestamp: unknown): string {
+    if (!timestamp) return "-";
+    const date = new Date(timestamp as never);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    const seconds = String(date.getSeconds()).padStart(2, "0");
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
 </script>
 
 <style scoped lang="scss">

package/adminViews/log/operate/index.vue

@@ -1,85 +1,75 @@
 <template>
-    <div class="page-operate-log page-table">
-        <div class="main-tool">
-            <div class="left">
-                <TSelect v-model="$Data.filter.module" placeholder="操作模块" clearable style="width: 150px" @change="$Method.handleFilter">
-                    <TOption v-for="item in $Data.moduleOptions" :key="item.value" :label="item.label" :value="item.value" />
-                </TSelect>
-                <TSelect v-model="$Data.filter.action" placeholder="操作类型" clearable style="width: 150px" @change="$Method.handleFilter">
-                    <TOption v-for="item in $Data.actionOptions" :key="item.value" :label="item.label" :value="item.value" />
-                </TSelect>
-                <TSelect v-model="$Data.filter.result" placeholder="操作结果" clearable style="width: 120px" @change="$Method.handleFilter">
-                    <TOption label="成功" :value="1" />
-                    <TOption label="失败" :value="0" />
-                </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 #result="{ row }">
-                        <TTag v-if="row.result === 1" shape="round" theme="success" variant="light-outline">成功</TTag>
-                        <TTag v-else shape="round" theme="danger" variant="light-outline">失败</TTag>
-                    </template>
-                    <template #operateTime="{ row }">
-                        {{ $Method.formatTime(row.operateTime) }}
-                    </template>
-                    <template #duration="{ row }">
-                        <TTag shape="round" :theme="row.duration > 1000 ? 'warning' : 'default'" variant="light-outline">{{ row.duration }}ms</TTag>
-                    </template>
-                    <template #action="{ row }">
-                        <TTag shape="round" variant="light-outline">{{ row.action }}</TTag>
-                    </template>
-                </TTable>
-            </div>
-
-            <div class="main-detail">
-                <DetailPanel :data="$Data.currentRow" :fields="$Data.detailFields">
-                    <template #result="{ value }">
-                        <TTag v-if="value === 1" shape="round" theme="success" variant="light-outline">成功</TTag>
-                        <TTag v-else shape="round" theme="danger" variant="light-outline">失败</TTag>
-                    </template>
-                    <template #operateTime="{ value }">
-                        {{ $Method.formatTime(value) }}
-                    </template>
-                    <template #duration="{ value }">
-                        <TTag shape="round" :theme="value > 1000 ? 'warning' : 'default'" variant="light-outline">{{ value }}ms</TTag>
-                    </template>
-                    <template #params="{ value }">
-                        <pre class="json-content">{{ $Method.formatJson(value) }}</pre>
-                    </template>
-                    <template #response="{ value }">
-                        <pre class="json-content">{{ $Method.formatJson(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>
-    </div>
+    <PagedTableDetail class="page-operate-log page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['result', 'operateTime', 'duration', 'action']">
+        <template #toolLeft="scope">
+            <TSelect v-model="$Data.filter.module" placeholder="操作模块" clearable style="width: 150px" @change="handleFilter(scope.reload)">
+                <TOption v-for="item in $Data.moduleOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </TSelect>
+            <TSelect v-model="$Data.filter.action" placeholder="操作类型" clearable style="width: 150px" @change="handleFilter(scope.reload)">
+                <TOption v-for="item in $Data.actionOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </TSelect>
+            <TSelect v-model="$Data.filter.result" placeholder="操作结果" clearable style="width: 120px" @change="handleFilter(scope.reload)">
+                <TOption label="成功" :value="1" />
+                <TOption label="失败" :value="0" />
+            </TSelect>
+        </template>
+
+        <template #toolRight="scope">
+            <TButton shape="circle" @click="onReload(scope.reload)">
+                <template #icon>
+                    <ILucideRotateCw />
+                </template>
+            </TButton>
+        </template>
+
+        <template #result="{ row }">
+            <TTag v-if="row.result === 1" shape="round" theme="success" variant="light-outline">成功</TTag>
+            <TTag v-else shape="round" theme="danger" variant="light-outline">失败</TTag>
+        </template>
+
+        <template #operateTime="{ row }">
+            {{ formatTime(row.operateTime) }}
+        </template>
+
+        <template #duration="{ row }">
+            <TTag shape="round" :theme="row.duration > 1000 ? 'warning' : 'default'" variant="light-outline">{{ row.duration }}ms</TTag>
+        </template>
+
+        <template #action="{ row }">
+            <TTag shape="round" variant="light-outline">{{ row.action }}</TTag>
+        </template>
+
+        <template #detail="scope">
+            <DetailPanel :data="scope.row" :fields="$Data.columns">
+                <template #result="slotScope">
+                    <TTag v-if="slotScope.value === 1" shape="round" theme="success" variant="light-outline">成功</TTag>
+                    <TTag v-else shape="round" theme="danger" variant="light-outline">失败</TTag>
+                </template>
+                <template #operateTime="slotScope">
+                    {{ formatTime(slotScope.value) }}
+                </template>
+                <template #duration="slotScope">
+                    <TTag shape="round" :theme="slotScope.value > 1000 ? 'warning' : 'default'" variant="light-outline">{{ slotScope.value }}ms</TTag>
+                </template>
+                <template #params="slotScope">
+                    <pre class="json-content">{{ formatJson(slotScope.value) }}</pre>
+                </template>
+                <template #response="slotScope">
+                    <pre class="json-content">{{ formatJson(slotScope.value) }}</pre>
+                </template>
+            </DetailPanel>
+        </template>
+    </PagedTableDetail>
 </template>
 
 <script setup lang="ts">
-import { Button as TButton, Table as TTable, Tag as TTag, Pagination as TPagination, Select as TSelect, Option as TOption, MessagePlugin } from "tdesign-vue-next";
+import { Button as TButton, Option as TOption, Select as TSelect, Tag as TTag } from "tdesign-vue-next";
 import ILucideRotateCw from "~icons/lucide/rotate-cw";
-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: "username", title: "操作人", fixed: "left", width: 100 },
         { colKey: "module", title: "模块", width: 100 },
@@ -88,30 +78,30 @@ const $Data = $ref({
         { colKey: "ip", title: "IP地址", width: 130 },
         { colKey: "duration", title: "耗时", width: 100 },
         { colKey: "operateTime", title: "操作时间", width: 170 },
-        { colKey: "result", title: "结果", width: 80 }
+        { colKey: "result", title: "结果", width: 80 },
+        { colKey: "nickname", title: "操作人昵称", detail: true },
+        { colKey: "method", title: "请求方法", detail: true },
+        { colKey: "params", title: "请求参数", detail: true },
+        { colKey: "response", title: "响应内容", detail: true },
+        { colKey: "remark", title: "备注", detail: true }
     ]),
-    detailFields: [
-        { colKey: "username", title: "操作人账号" },
-        { colKey: "nickname", title: "操作人昵称" },
-        { colKey: "module", title: "操作模块" },
-        { colKey: "action", title: "操作类型" },
-        { colKey: "method", title: "请求方法" },
-        { colKey: "path", title: "请求路径" },
-        { colKey: "ip", title: "IP地址" },
-        { colKey: "params", title: "请求参数" },
-        { colKey: "response", title: "响应内容" },
-        { colKey: "duration", title: "耗时" },
-        { colKey: "operateTime", title: "操作时间" },
-        { colKey: "result", title: "操作结果" },
-        { colKey: "remark", title: "备注" }
-    ],
-    pagerConfig: {
-        currentPage: 1,
-        limit: 30,
-        total: 0
+    endpoints: {
+        list: {
+            path: "/addon/admin/operateLog/list",
+            dropValues: [""],
+            dropKeyValue: {
+                module: [""],
+                action: [""]
+            },
+            buildData: () => {
+                return {
+                    module: $Data.filter.module,
+                    action: $Data.filter.action,
+                    result: $Data.filter.result
+                };
+            }
+        }
     },
-    currentRow: null,
-    activeRowKeys: [],
     filter: {
         module: "",
         action: "",
@@ -132,111 +122,35 @@ const $Data = $ref({
     ]
 });
 
-// 方法
-const $Method = {
-    async initData() {
-        await $Method.apiOperateLogList();
-    },
-
-    // 加载操作日志列表
-    async apiOperateLogList() {
-        $Data.loading = true;
-        try {
-            const res = await $Http.post(
-                "/addon/admin/operateLog/list",
-                {
-                    page: $Data.pagerConfig.currentPage,
-                    limit: $Data.pagerConfig.limit,
-                    module: $Data.filter.module,
-                    action: $Data.filter.action,
-                    result: $Data.filter.result
-                },
-                {
-                    dropValues: [""],
-                    dropKeyValue: {
-                        module: [""],
-                        action: [""]
-                    }
-                }
-            );
-            $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;
-        }
-    },
-
-    // 筛选
-    handleFilter() {
-        $Data.pagerConfig.currentPage = 1;
-        $Method.apiOperateLogList();
-    },
-
-    // 刷新
-    handleRefresh() {
-        $Method.apiOperateLogList();
-    },
-
-    // 分页改变
-    onPageChange(currentPage) {
-        $Data.pagerConfig.currentPage = currentPage;
-        $Method.apiOperateLogList();
-    },
-
-    // 每页条数改变
-    handleSizeChange(pageSize) {
-        $Data.pagerConfig.limit = pageSize;
-        $Data.pagerConfig.currentPage = 1;
-        $Method.apiOperateLogList();
-    },
+function handleFilter(reload: (options: { keepSelection?: boolean; resetPage?: boolean }) => void): void {
+    reload({ keepSelection: false, resetPage: 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 onReload(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
 
-    // 格式化时间
-    formatTime(timestamp) {
-        if (!timestamp) return "-";
-        const date = new Date(timestamp);
-        const year = date.getFullYear();
-        const month = String(date.getMonth() + 1).padStart(2, "0");
-        const day = String(date.getDate()).padStart(2, "0");
-        const hours = String(date.getHours()).padStart(2, "0");
-        const minutes = String(date.getMinutes()).padStart(2, "0");
-        const seconds = String(date.getSeconds()).padStart(2, "0");
-        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-    },
+function formatTime(timestamp: unknown): string {
+    if (!timestamp) return "-";
+    const date = new Date(timestamp as never);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    const seconds = String(date.getSeconds()).padStart(2, "0");
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
 
-    // 格式化 JSON
-    formatJson(value) {
-        if (!value) return "-";
-        try {
-            const obj = typeof value === "string" ? JSON.parse(value) : value;
-            return JSON.stringify(obj, null, 2);
-        } catch {
-            return value;
-        }
+function formatJson(value: unknown): string {
+    if (!value) return "-";
+    try {
+        const obj = typeof value === "string" ? JSON.parse(value) : value;
+        return JSON.stringify(obj, null, 2);
+    } catch {
+        return String(value);
     }
-};
-
-$Method.initData();
+}
 </script>
 
 <style scoped lang="scss">