befly-admin-ui 1.8.14

package/views/log/email/index.vue

@@ -0,0 +1,221 @@
+<template>
+    <PagedTableDetail class="page-email page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['sendResult', 'sendTime']">
+        <template #toolLeft>
+            <TButton theme="primary" @click="openSendDialog">
+                <template #icon>
+                    <SendIcon />
+                </template>
+                发送邮件
+            </TButton>
+            <TButton variant="outline" @click="onVerify">
+                <template #icon>
+                    <CheckCircleIcon />
+                </template>
+                验证配置
+            </TButton>
+        </template>
+
+        <template #toolRight="scope">
+            <TButton shape="circle" @click="onReload(scope.reload)">
+                <template #icon>
+                    <RefreshIcon />
+                </template>
+            </TButton>
+        </template>
+
+        <template #sendResult="{ row }">
+            <TTag v-if="row.sendResult === 1" shape="round" theme="success" variant="light-outline">成功</TTag>
+            <TTag v-else shape="round" theme="danger" variant="light-outline">失败</TTag>
+        </template>
+
+        <template #sendTime="{ row }">
+            {{ formatTime(row.sendTime) }}
+        </template>
+
+        <template #detail="scope">
+            <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">
+                    {{ formatTime(slotScope.value) }}
+                </template>
+                <template #content="slotScope">
+                    <div class="email-content" v-html="slotScope.value"></div>
+                </template>
+            </DetailPanel>
+        </template>
+
+        <template #dialogs="scope">
+            <PageDialog v-model="$Data.sendDialogVisible" title="发送邮件" :confirm-loading="$Data.sending" @confirm="(context) => onSend(scope.reload, context)" @cancel="onCancelSend" @close="onCancelSend">
+                <TForm ref="sendFormRef" :data="$Data.sendForm" :rules="$Data.sendRules" label-width="80px">
+                    <TFormItem label="收件人" name="to">
+                        <TInput v-model="$Data.sendForm.to" placeholder="请输入收件人邮箱" />
+                    </TFormItem>
+                    <TFormItem label="抄送" name="cc">
+                        <TInput v-model="$Data.sendForm.cc" placeholder="多个邮箱用逗号分隔（可选）" />
+                    </TFormItem>
+                    <TFormItem label="主题" name="subject">
+                        <TInput v-model="$Data.sendForm.subject" placeholder="请输入邮件主题" />
+                    </TFormItem>
+                    <TFormItem label="内容" name="content">
+                        <TTextarea v-model="$Data.sendForm.content" placeholder="请输入邮件内容（支持HTML）" :autosize="{ minRows: 6, maxRows: 12 }" />
+                    </TFormItem>
+                </TForm>
+            </PageDialog>
+        </template>
+    </PagedTableDetail>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+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 { CheckCircleIcon, RefreshIcon, SendIcon } from "tdesign-icons-vue-next";
+import PageDialog from "@/components/pageDialog.vue";
+import DetailPanel from "@/components/detailPanel.vue";
+import { $Http } from "@/plugins/http";
+import PagedTableDetail from "@/components/pagedTableDetail.vue";
+import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
+
+type TDesignFormInstance = {
+    validate: () => Promise<unknown>;
+};
+
+const sendFormRef = ref<TDesignFormInstance | null>(null);
+
+// 响应式数据
+const $Data = reactive({
+    columns: withDefaultColumns([
+        { colKey: "username", title: "发送人", fixed: "left" },
+        { colKey: "toEmail", title: "收件人" },
+        { colKey: "subject", title: "主题" },
+        { colKey: "sendTime", title: "发送时间" },
+        { colKey: "sendResult", 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: "/core/email/logList",
+            dropValues: [""]
+        }
+    },
+    sendDialogVisible: false,
+    sending: false,
+    sendForm: {
+        to: "",
+        cc: "",
+        subject: "",
+        content: ""
+    },
+    sendRules: {
+        to: [{ required: true, message: "请输入收件人邮箱", trigger: "blur" }],
+        subject: [{ required: true, message: "请输入邮件主题", trigger: "blur" }],
+        content: [{ required: true, message: "请输入邮件内容", trigger: "blur" }]
+    }
+});
+
+function onReload(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
+
+function onCancelSend(): void {
+    $Data.sendDialogVisible = false;
+}
+
+function openSendDialog(): void {
+    $Data.sendForm = {
+        to: "",
+        cc: "",
+        subject: "",
+        content: ""
+    };
+    $Data.sendDialogVisible = true;
+}
+
+type PageDialogEventContext = {
+    close: () => void;
+};
+
+async function onSend(reload: ((options: { keepSelection?: boolean; resetPage?: boolean }) => void) | null, context?: PageDialogEventContext): Promise<void> {
+    const form = sendFormRef.value;
+    if (!form) {
+        MessagePlugin.warning("表单未就绪");
+        return;
+    }
+
+    const valid = await form.validate();
+    if (valid !== true) return;
+
+    $Data.sending = true;
+    try {
+        const res = await $Http.post("/core/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 {
+                $Data.sendDialogVisible = false;
+            }
+            if (reload) {
+                reload({ keepSelection: false, resetPage: true });
+            }
+        } else {
+            MessagePlugin.error(res.msg || "发送失败");
+        }
+    } catch (_error) {
+        MessagePlugin.error("发送失败");
+    } finally {
+        $Data.sending = false;
+    }
+}
+
+async function onVerify(): Promise<void> {
+    try {
+        const res = await $Http.post("/core/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">
+.email-content {
+    max-height: 300px;
+    overflow-y: auto;
+    padding: 8px;
+    background: #f5f5f5;
+    border-radius: 4px;
+    font-size: 13px;
+    line-height: 1.6;
+}
+</style>

package/views/log/index.vue

@@ -0,0 +1,3 @@
+<template>
+    <RouterView />
+</template>

package/views/log/login/index.vue

@@ -0,0 +1,95 @@
+<template>
+    <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>
+                    <RefreshIcon />
+                </template>
+            </TButton>
+        </template>
+
+        <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 }">
+            {{ formatTime(row.loginTime) }}
+        </template>
+
+        <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 { reactive } from "vue";
+import { Button as TButton, Tag as TTag } from "tdesign-vue-next";
+import { RefreshIcon } from "tdesign-icons-vue-next";
+import DetailPanel from "@/components/detailPanel.vue";
+import PagedTableDetail from "@/components/pagedTableDetail.vue";
+import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
+
+// 响应式数据
+const $Data = reactive({
+    columns: withDefaultColumns([
+        { colKey: "username", title: "用户名", fixed: "left" },
+        { colKey: "ip", title: "登录IP" },
+        { colKey: "browserName", title: "浏览器" },
+        { colKey: "osName", title: "操作系统" },
+        { colKey: "deviceType", title: "设备类型" },
+        { colKey: "loginTime", title: "登录时间" },
+        { colKey: "loginResult", 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: "/core/loginLog/list",
+            dropValues: [""]
+        }
+    }
+});
+
+function onReload(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
+
+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">
+// 样式继承自全局 page-table
+</style>

package/views/log/operate/index.vue

@@ -0,0 +1,169 @@
+<template>
+    <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>
+                    <RefreshIcon />
+                </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 { reactive } from "vue";
+import { Button as TButton, Option as TOption, Select as TSelect, Tag as TTag } from "tdesign-vue-next";
+import { RefreshIcon } from "tdesign-icons-vue-next";
+import DetailPanel from "@/components/detailPanel.vue";
+import PagedTableDetail from "@/components/pagedTableDetail.vue";
+import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
+
+// 响应式数据
+const $Data = reactive({
+    columns: withDefaultColumns([
+        { colKey: "username", title: "操作人", fixed: "left", width: 100 },
+        { colKey: "module", title: "模块", width: 100 },
+        { colKey: "action", title: "操作", width: 80 },
+        { colKey: "path", title: "请求路径", ellipsis: true },
+        { colKey: "ip", title: "IP地址", width: 130 },
+        { colKey: "duration", title: "耗时", width: 100 },
+        { colKey: "operateTime", title: "操作时间", width: 170 },
+        { 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 }
+    ]),
+    endpoints: {
+        list: {
+            path: "/core/operateLog/list",
+            dropValues: [""],
+            dropKeyValue: {
+                module: [""],
+                action: [""]
+            },
+            buildData: () => {
+                return {
+                    module: $Data.filter.module,
+                    action: $Data.filter.action,
+                    result: $Data.filter.result
+                };
+            }
+        }
+    },
+    filter: {
+        module: "",
+        action: "",
+        result: null
+    },
+    moduleOptions: [
+        { label: "管理员", value: "管理员" },
+        { label: "角色", value: "角色" },
+        { label: "菜单", value: "菜单" },
+        { label: "接口", value: "接口" },
+        { label: "字典", value: "字典" }
+    ],
+    actionOptions: [
+        { label: "新增", value: "新增" },
+        { label: "编辑", value: "编辑" },
+        { label: "删除", value: "删除" },
+        { label: "查询", value: "查询" }
+    ]
+});
+
+function handleFilter(reload: (options: { keepSelection?: boolean; resetPage?: boolean }) => void): void {
+    reload({ keepSelection: false, resetPage: true });
+}
+
+function onReload(reload: (options: { keepSelection?: boolean }) => void): void {
+    reload({ keepSelection: true });
+}
+
+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}`;
+}
+
+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">
+.json-content {
+    margin: 0;
+    padding: 8px;
+    background: var(--td-bg-color-container);
+    border-radius: 4px;
+    font-size: 12px;
+    max-height: 200px;
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+</style>