@befly-addon/admin 1.8.4 → 1.8.6

package/adminViews/log/email/index.vue

@@ -1,13 +1,13 @@
 <template>
-    <PagedTableDetailPage class="page-email page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['sendResult', 'sendTime']">
+    <PagedTableDetail class="page-email page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['sendResult', 'sendTime']">
         <template #toolLeft>
-            <TButton theme="primary" @click="$Method.openSendDialog">
+            <TButton theme="primary" @click="openSendDialog">
                 <template #icon>
                     <ILucideSend />
                 </template>
                 发送邮件
             </TButton>
-            <TButton variant="outline" @click="$Method.onVerify">
+            <TButton variant="outline" @click="onVerify">
                 <template #icon>
                     <ILucideCheckCircle />
                 </template>
@@ -16,7 +16,7 @@
         </template>
 
         <template #toolRight="scope">
-            <TButton shape="circle" @click="$Method.onReload(scope.reload)">
+            <TButton shape="circle" @click="onReload(scope.reload)">
                 <template #icon>
                     <ILucideRotateCw />
                 </template>
@@ -29,17 +29,17 @@
         </template>
 
         <template #sendTime="{ row }">
-            {{ $Method.formatTime(row.sendTime) }}
+            {{ formatTime(row.sendTime) }}
         </template>
 
         <template #detail="scope">
-            <DetailPanel :data="scope.currentRow" :fields="$Data.detailFields">
+            <DetailPanel :data="scope.row" :fields="$Data.columns">
                 <template #sendResult="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 #sendTime="slotScope">
-                    {{ $Method.formatTime(slotScope.value) }}
+                    {{ formatTime(slotScope.value) }}
                 </template>
                 <template #content="slotScope">
                     <div class="email-content" v-html="slotScope.value"></div>
@@ -48,7 +48,7 @@
         </template>
 
         <template #dialogs="scope">
-            <TDialog v-model:visible="$Data.sendDialogVisible" header="发送邮件" :footer="false" width="600px">
+            <PageDialog v-model="$Data.sendDialogVisible" title="发送邮件" :confirm-loading="$Data.sending" @confirm="(context) => onSend(scope.reload, context)" @cancel="onCancelSend" @close="onCancelSend">
                 <TForm :ref="(el) => ($From.sendForm = el)" :data="$Data.sendForm" :rules="$Data.sendRules" label-width="80px">
                     <TFormItem label="收件人" name="to">
                         <TInput v-model="$Data.sendForm.to" placeholder="请输入收件人邮箱" />
@@ -62,26 +62,21 @@
                     <TFormItem label="内容" name="content">
                         <TTextarea v-model="$Data.sendForm.content" placeholder="请输入邮件内容（支持HTML）" :autosize="{ minRows: 6, maxRows: 12 }" />
                     </TFormItem>
-                    <TFormItem>
-                        <TSpace>
-                            <TButton theme="primary" :loading="$Data.sending" @click="$Method.onSend(scope.reload)">发送</TButton>
-                            <TButton variant="outline" @click="$Method.onCancelSend">取消</TButton>
-                        </TSpace>
-                    </TFormItem>
                 </TForm>
-            </TDialog>
+            </PageDialog>
         </template>
-    </PagedTableDetailPage>
+    </PagedTableDetail>
 </template>
 
 <script setup lang="ts">
-import { Button as TButton, Dialog as TDialog, Form as TForm, FormItem as TFormItem, Input as TInput, MessagePlugin, Space as TSpace, Tag as TTag, Textarea as TTextarea } from "tdesign-vue-next";
+import { Button as TButton, Form as TForm, FormItem as TFormItem, Input as TInput, MessagePlugin, Space as TSpace, Tag as TTag, Textarea as TTextarea } from "tdesign-vue-next";
 import ILucideRotateCw from "~icons/lucide/rotate-cw";
 import ILucideSend from "~icons/lucide/send";
 import ILucideCheckCircle from "~icons/lucide/check-circle";
-import DetailPanel from "@/components/DetailPanel.vue";
+import PageDialog from "@/components/pageDialog.vue";
+import DetailPanel from "@/components/detailPanel.vue";
 import { $Http } from "@/plugins/http";
-import PagedTableDetailPage from "@/components/PagedTableDetailPage.vue";
+import PagedTableDetail from "@/components/pagedTableDetail.vue";
 import { withDefaultColumns } from "befly-shared/utils/withDefaultColumns";
 
 const $From = $shallowRef({
@@ -95,21 +90,14 @@ const $Data = $ref({
         { colKey: "toEmail", title: "收件人" },
         { colKey: "subject", title: "主题" },
         { colKey: "sendTime", title: "发送时间" },
-        { colKey: "sendResult", title: "发送结果" }
-    ]),
-    detailFields: [
-        { colKey: "username", title: "发送人账号" },
-        { colKey: "nickname", title: "发送人昵称" },
-        { colKey: "toEmail", title: "收件人" },
-        { colKey: "ccEmail", title: "抄送" },
-        { colKey: "bccEmail", title: "密送" },
-        { colKey: "subject", title: "主题" },
-        { colKey: "content", title: "内容" },
-        { colKey: "sendTime", title: "发送时间" },
         { colKey: "sendResult", title: "发送结果" },
-        { colKey: "messageId", title: "消息ID" },
-        { colKey: "failReason", title: "失败原因" }
-    ],
+        { colKey: "nickname", title: "发送人昵称", detail: true },
+        { colKey: "ccEmail", title: "抄送", detail: true },
+        { colKey: "bccEmail", title: "密送", detail: true },
+        { colKey: "content", title: "内容", detail: true },
+        { colKey: "messageId", title: "消息ID", detail: true },
+        { colKey: "failReason", title: "失败原因", detail: true }
+    ]),
     endpoints: {
         list: {
             path: "/addon/admin/email/logList",
@@ -131,85 +119,86 @@ const $Data = $ref({
     }
 });
 
-// 方法
-const $Method = {
-    onReload(reload) {
-        reload({ keepSelection: true });
-    },
+function onReload(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
 
-    onCancelSend() {
-        $Data.sendDialogVisible = false;
-    },
+function onCancelSend(): void {
+    $Data.sendDialogVisible = false;
+}
 
-    // 打开发送弹框
-    openSendDialog() {
-        $Data.sendForm = {
-            to: "",
-            cc: "",
-            subject: "",
-            content: ""
-        };
-        $Data.sendDialogVisible = true;
-    },
+function openSendDialog(): void {
+    $Data.sendForm = {
+        to: "",
+        cc: "",
+        subject: "",
+        content: ""
+    };
+    $Data.sendDialogVisible = true;
+}
 
-    // 发送邮件
-    async onSend(reload) {
-        const valid = await $From.sendForm?.validate();
-        if (valid !== true) return;
-
-        $Data.sending = true;
-        try {
-            const res = await $Http.post("/addon/admin/email/send", {
-                to: $Data.sendForm.to,
-                subject: $Data.sendForm.subject,
-                content: $Data.sendForm.content,
-                cc: $Data.sendForm.cc || undefined,
-                isHtml: true
-            });
-
-            if (res.code === 0) {
-                MessagePlugin.success("发送成功");
-                $Data.sendDialogVisible = false;
-                if (reload) {
-                    reload({ keepSelection: false, resetPage: true });
-                }
-            } else {
-                MessagePlugin.error(res.msg || "发送失败");
-            }
-        } catch (error) {
-            MessagePlugin.error("发送失败");
-        } finally {
-            $Data.sending = false;
-        }
-    },
+type PageDialogEventContext = {
+    close: () => void;
+};
 
-    // 验证配置
-    async onVerify() {
-        try {
-            const res = await $Http.post("/addon/admin/email/verify");
-            if (res.code === 0) {
-                MessagePlugin.success("邮件服务配置正常");
+async function onSend(reload: ((options: { keepSelection?: boolean; resetPage?: boolean }) => void) | null, context?: PageDialogEventContext): Promise<void> {
+    const valid = await $From.sendForm?.validate();
+    if (valid !== true) return;
+
+    $Data.sending = true;
+    try {
+        const res = await $Http.post("/addon/admin/email/send", {
+            to: $Data.sendForm.to,
+            subject: $Data.sendForm.subject,
+            content: $Data.sendForm.content,
+            cc: $Data.sendForm.cc || undefined,
+            isHtml: true
+        });
+
+        if (res.code === 0) {
+            MessagePlugin.success("发送成功");
+            if (context && typeof context.close === "function") {
+                context.close();
             } else {
-                MessagePlugin.error(res.msg || "配置异常");
+                $Data.sendDialogVisible = false;
+            }
+            if (reload) {
+                reload({ keepSelection: false, resetPage: true });
             }
-        } catch (error) {
-            MessagePlugin.error("验证失败");
+        } else {
+            MessagePlugin.error(res.msg || "发送失败");
         }
-    },
+    } catch (error) {
+        MessagePlugin.error("发送失败");
+    } finally {
+        $Data.sending = false;
+    }
+}
 
-    // 格式化时间
-    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}`;
+async function onVerify(): Promise<void> {
+    try {
+        const res = await $Http.post("/addon/admin/email/verify");
+        if (res.code === 0) {
+            MessagePlugin.success("邮件服务配置正常");
+        } else {
+            MessagePlugin.error(res.msg || "配置异常");
+        }
+    } catch (error) {
+        MessagePlugin.error("验证失败");
     }
-};
+}
+
+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/login/index.vue

@@ -1,7 +1,7 @@
 <template>
-    <PagedTableDetailPage class="page-login-log page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['loginResult', 'loginTime', 'deviceType']">
+    <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="$Method.onReload(scope.reload)">
+            <TButton shape="circle" @click="onReload(scope.reload)">
                 <template #icon>
                     <ILucideRotateCw />
                 </template>
@@ -14,7 +14,7 @@
         </template>
 
         <template #loginTime="{ row }">
-            {{ $Method.formatTime(row.loginTime) }}
+            {{ formatTime(row.loginTime) }}
         </template>
 
         <template #deviceType="{ row }">
@@ -22,27 +22,27 @@
         </template>
 
         <template #detail="scope">
-            <DetailPanel :data="scope.currentRow" :fields="$Data.detailFields">
+            <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">
-                    {{ $Method.formatTime(slotScope.value) }}
+                    {{ formatTime(slotScope.value) }}
                 </template>
                 <template #deviceType="slotScope">
                     <TTag shape="round" variant="light-outline">{{ slotScope.value || "desktop" }}</TTag>
                 </template>
             </DetailPanel>
         </template>
-    </PagedTableDetailPage>
+    </PagedTableDetail>
 </template>
 
 <script setup lang="ts">
 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 PagedTableDetailPage from "@/components/PagedTableDetailPage.vue";
+import DetailPanel from "@/components/detailPanel.vue";
+import PagedTableDetail from "@/components/pagedTableDetail.vue";
 import { withDefaultColumns } from "befly-shared/utils/withDefaultColumns";
 
 // 响应式数据
@@ -54,26 +54,16 @@ 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: "失败原因" }
-    ],
+        { 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",
@@ -82,25 +72,21 @@ const $Data = $ref({
     }
 });
 
-// 方法
-const $Method = {
-    onReload(reload) {
-        reload({ keepSelection: true });
-    },
+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}`;
+}
 </script>
 
 <style scoped lang="scss">

package/adminViews/log/operate/index.vue

@@ -1,20 +1,20 @@
 <template>
-    <PagedTableDetailPage class="page-operate-log page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['result', 'operateTime', 'duration', 'action']">
+    <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="$Method.handleFilter(scope.reload)">
+            <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="$Method.handleFilter(scope.reload)">
+            <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="$Method.handleFilter(scope.reload)">
+            <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="$Method.onReload(scope.reload)">
+            <TButton shape="circle" @click="onReload(scope.reload)">
                 <template #icon>
                     <ILucideRotateCw />
                 </template>
@@ -27,7 +27,7 @@
         </template>
 
         <template #operateTime="{ row }">
-            {{ $Method.formatTime(row.operateTime) }}
+            {{ formatTime(row.operateTime) }}
         </template>
 
         <template #duration="{ row }">
@@ -39,33 +39,33 @@
         </template>
 
         <template #detail="scope">
-            <DetailPanel :data="scope.currentRow" :fields="$Data.detailFields">
+            <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">
-                    {{ $Method.formatTime(slotScope.value) }}
+                    {{ 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">{{ $Method.formatJson(slotScope.value) }}</pre>
+                    <pre class="json-content">{{ formatJson(slotScope.value) }}</pre>
                 </template>
                 <template #response="slotScope">
-                    <pre class="json-content">{{ $Method.formatJson(slotScope.value) }}</pre>
+                    <pre class="json-content">{{ formatJson(slotScope.value) }}</pre>
                 </template>
             </DetailPanel>
         </template>
-    </PagedTableDetailPage>
+    </PagedTableDetail>
 </template>
 
 <script setup lang="ts">
 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 PagedTableDetailPage from "@/components/PagedTableDetailPage.vue";
+import DetailPanel from "@/components/detailPanel.vue";
+import PagedTableDetail from "@/components/pagedTableDetail.vue";
 import { withDefaultColumns } from "befly-shared/utils/withDefaultColumns";
 
 // 响应式数据
@@ -78,23 +78,13 @@ 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: "备注" }
-    ],
     endpoints: {
         list: {
             path: "/addon/admin/operateLog/list",
@@ -132,40 +122,35 @@ const $Data = $ref({
     ]
 });
 
-// 方法
-const $Method = {
-    handleFilter(reload) {
-        reload({ keepSelection: false, resetPage: true });
-    },
+function handleFilter(reload: (options: { keepSelection?: boolean; resetPage?: boolean }) => void): void {
+    reload({ keepSelection: false, resetPage: true });
+}
 
-    onReload(reload) {
-        reload({ keepSelection: true });
-    },
+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);
     }
-};
+}
 </script>
 
 <style scoped lang="scss">