@befly-addon/admin 1.2.1 → 1.2.3

package/adminViews/index/components/systemResources.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <ILucideActivity />
+            <h2>系统资源</h2>
+        </div>
+        <div class="section-content">
+            <div class="resource-compact-list">
+                <div class="resource-compact-item">
+                    <div class="resource-compact-header">
+                        <ILucideCpu />
+                        <span class="resource-label">CPU</span>
+                        <span class="resource-value">{{ systemResources.cpu.usage }}%</span>
+                        <span class="resource-desc">{{ systemResources.cpu.cores }}核心</span>
+                    </div>
+                    <TProgress :percentage="systemResources.cpu.usage" :status="getProgressColor(systemResources.cpu.usage)" />
+                </div>
+                <div class="resource-compact-item">
+                    <div class="resource-compact-header">
+                        <ILucideHardDrive />
+                        <span class="resource-label">内存</span>
+                        <span class="resource-value">{{ systemResources.memory.percentage }}%</span>
+                        <span class="resource-desc">{{ systemResources.memory.used }}GB / {{ systemResources.memory.total }}GB</span>
+                    </div>
+                    <TProgress :percentage="systemResources.memory.percentage" :status="getProgressColor(systemResources.memory.percentage)" />
+                </div>
+                <div class="resource-compact-item">
+                    <div class="resource-compact-header">
+                        <ILucideDisc />
+                        <span class="resource-label">磁盘</span>
+                        <span class="resource-value">{{ systemResources.disk.percentage }}%</span>
+                        <span class="resource-desc">{{ systemResources.disk.used }}GB / {{ systemResources.disk.total }}GB</span>
+                    </div>
+                    <TProgress :percentage="systemResources.disk.percentage" :status="getProgressColor(systemResources.disk.percentage)" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { Progress as TProgress } from "tdesign-vue-next";
+import ILucideActivity from "~icons/lucide/activity";
+import ILucideCpu from "~icons/lucide/cpu";
+import ILucideHardDrive from "~icons/lucide/hard-drive";
+import ILucideDisc from "~icons/lucide/disc";
+import { $Http } from "@/plugins/http";
+
+// 组件内部数据
+const systemResources = $ref({
+    cpu: { usage: 0, cores: 0 },
+    memory: { used: 0, total: 0, percentage: 0 },
+    disk: { used: 0, total: 0, percentage: 0 }
+});
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http("/addon/admin/dashboard/systemResources");
+        Object.assign(systemResources, data);
+    } catch (error) {
+        // 静默失败：不阻断页面展示
+    }
+};
+
+fetchData();
+
+// 工具函数
+const getProgressColor = (percentage) => {
+    if (percentage < 50) return "success";
+    if (percentage < 80) return "warning";
+    return "danger";
+};
+</script>
+
+<style scoped lang="scss">
+.resource-compact-list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--spacing-md);
+
+    .resource-compact-item {
+        .resource-compact-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 8px;
+
+            .resource-label {
+                font-size: 14px;
+                font-weight: 600;
+                color: var(--text-secondary);
+                min-width: 50px;
+            }
+
+            .resource-value {
+                font-size: 16px;
+                font-weight: 700;
+                color: var(--primary-color);
+                min-width: 60px;
+            }
+
+            .resource-desc {
+                font-size: 14px;
+                color: var(--text-placeholder);
+                flex: 1;
+            }
+        }
+    }
+}
+</style>

package/adminViews/index/components/userInfo.vue

@@ -0,0 +1,204 @@
+<template>
+    <div class="section-block user-info-card">
+        <div class="user-header">
+            <div class="user-avatar">
+                <ILucideUser />
+            </div>
+            <div class="user-basic">
+                <div class="user-name">
+                    {{ $Data.userInfo.nickname || $Data.userInfo.name || $Data.userInfo.username || "未设置" }}
+                </div>
+                <div class="user-role">{{ $Data.userInfo.role?.name || "普通用户" }}</div>
+            </div>
+        </div>
+        <div class="user-details">
+            <div class="detail-item">
+                <ILucideMail />
+                <span>{{ $Data.userInfo.email || "未设置" }}</span>
+            </div>
+            <div v-if="$Data.userInfo.phone" class="detail-item">
+                <ILucidePhone />
+                <span>{{ $Data.userInfo.phone }}</span>
+            </div>
+            <div v-if="$Data.userInfo.lastLoginTime" class="detail-item">
+                <ILucideClock />
+                <span>{{ $Method.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">
+                <template #icon>
+                    <ILucideRotateCw />
+                </template>
+                刷新缓存
+            </TButton>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { Button as TButton, MessagePlugin } from "tdesign-vue-next";
+import ILucideUser from "~icons/lucide/user";
+import ILucideMail from "~icons/lucide/mail";
+import ILucidePhone from "~icons/lucide/phone";
+import ILucideClock from "~icons/lucide/clock";
+import ILucideRotateCw from "~icons/lucide/rotate-cw";
+import { $Http } from "@/plugins/http";
+
+// 响应式数据
+const $Data = $ref({
+    userInfo: {},
+    refreshing: false
+});
+
+// 方法集合
+const $Method = {
+    // 获取数据
+    async fetchData() {
+        try {
+            const { data } = await $Http("/addon/admin/admin/detail");
+            Object.assign($Data.userInfo, data);
+        } catch (error) {
+            MessagePlugin.error("获取用户信息失败");
+        }
+    },
+
+    // 刷新缓存
+    async handleRefreshCache() {
+        try {
+            $Data.refreshing = true;
+            const result = await $Http("/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 || "部分缓存刷新失败");
+            }
+        } 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)}天前`;
+        }
+        // 超过7天显示具体日期
+        return `${date.getMonth() + 1}月${date.getDate()}日`;
+    }
+};
+
+// 初始化
+$Method.fetchData();
+</script>
+
+<style scoped lang="scss">
+.user-info-card {
+    background-color: #fff;
+    padding: 15px;
+    .user-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding-bottom: 12px;
+        border-bottom: 1px solid var(--border-color);
+
+        .user-avatar {
+            width: 48px;
+            height: 48px;
+            background: linear-gradient(135deg, var(--primary-color), #764ba2);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            flex-shrink: 0;
+        }
+
+        .user-basic {
+            flex: 1;
+            min-width: 0;
+
+            .user-name {
+                font-size: 16px;
+                font-weight: 600;
+                color: var(--text-primary);
+                margin-bottom: 4px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .user-role {
+                font-size: 12px;
+                color: var(--text-secondary);
+            }
+        }
+    }
+
+    .user-details {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-top: 12px;
+
+        .detail-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 12px;
+            color: var(--text-secondary);
+
+            span {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+    }
+
+    .user-actions {
+        margin-top: 16px;
+        padding-top: 12px;
+        border-top: 1px solid var(--border-color);
+        display: flex;
+        justify-content: center;
+    }
+}
+</style>

package/adminViews/index/index.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="dashboard-container">
+        <!-- 第一行：系统概览（全宽） -->
+        <div class="dashboard-row full-width">
+            <SystemOverview />
+        </div>
+
+        <!-- 第二行：服务状态 + 系统资源 -->
+        <div class="dashboard-row two-columns">
+            <ServiceStatus />
+            <SystemResources />
+        </div>
+
+        <!-- 第三行：性能指标 + 环境信息 -->
+        <div class="dashboard-row two-columns">
+            <PerformanceMetrics />
+            <EnvironmentInfo />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import SystemOverview from "./components/systemOverview.vue";
+import ServiceStatus from "./components/serviceStatus.vue";
+import SystemResources from "./components/systemResources.vue";
+import PerformanceMetrics from "./components/performanceMetrics.vue";
+import EnvironmentInfo from "./components/environmentInfo.vue";
+
+definePage({
+    meta: {
+        title: "首页",
+        order: 1
+    }
+});
+</script>
+
+<style scoped lang="scss">
+.dashboard-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--layout-gap);
+    overflow-y: auto;
+    height: 100%;
+    padding: 0;
+
+    .dashboard-row {
+        display: flex;
+        gap: var(--layout-gap);
+
+        &.full-width {
+            > * {
+                flex: 1;
+            }
+        }
+
+        &.two-columns {
+            > * {
+                flex: 1;
+                min-width: 0;
+            }
+        }
+    }
+
+    // 每个组件都是独立的卡片
+    :deep(.section-block) {
+        background: var(--bg-color-container);
+        border-radius: var(--card-radius);
+        box-shadow: var(--shadow-1);
+        padding: var(--spacing-md);
+        border: none;
+        height: 100%;
+    }
+}
+</style>

package/adminViews/log/email/index.vue

@@ -0,0 +1,292 @@
+<template>
+    <div class="page-email page-table">
+        <div class="main-tool">
+            <div class="left">
+                <TButton theme="primary" @click="$Method.openSendDialog">
+                    <template #icon>
+                        <ILucideSend />
+                    </template>
+                    发送邮件
+                </TButton>
+                <TButton variant="outline" @click="$Method.onVerify">
+                    <template #icon>
+                        <ILucideCheckCircle />
+                    </template>
+                    验证配置
+                </TButton>
+            </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 #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 }">
+                        {{ $Method.formatTime(row.sendTime) }}
+                    </template>
+                </TTable>
+            </div>
+
+            <div class="main-detail">
+                <DetailPanel :data="$Data.currentRow" :fields="$Data.detailFields">
+                    <template #sendResult="{ 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 #sendTime="{ value }">
+                        {{ $Method.formatTime(value) }}
+                    </template>
+                    <template #content="{ value }">
+                        <div class="email-content" v-html="value"></div>
+                    </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>
+
+        <!-- 发送邮件弹框 -->
+        <TDialog v-model:visible="$Data.sendDialogVisible" header="发送邮件" :footer="false" width="600px">
+            <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>
+                <TFormItem>
+                    <TSpace>
+                        <TButton theme="primary" :loading="$Data.sending" @click="$Method.onSend">发送</TButton>
+                        <TButton variant="outline" @click="$Data.sendDialogVisible = false">取消</TButton>
+                    </TSpace>
+                </TFormItem>
+            </TForm>
+        </TDialog>
+    </div>
+</template>
+
+<script setup>
+import { Button as TButton, Table as TTable, Tag as TTag, Pagination as TPagination, Dialog as TDialog, Form as TForm, FormItem as TFormItem, Input as TInput, Textarea as TTextarea, Space as TSpace, MessagePlugin } 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 { $Http } from "@/plugins/http";
+import { withDefaultColumns } from "befly-vite/utils/withDefaultColumns";
+
+definePage({
+    meta: {
+        title: "邮件日志",
+        order: 2
+    }
+});
+
+const sendFormRef = $ref(null);
+
+// 响应式数据
+const $Data = $ref({
+    tableData: [],
+    loading: false,
+    columns: withDefaultColumns([
+        { colKey: "username", title: "发送人", fixed: "left" },
+        { colKey: "id", title: "序号" },
+        { 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: "失败原因" }
+    ],
+    pagerConfig: {
+        currentPage: 1,
+        limit: 30,
+        total: 0
+    },
+    currentRow: null,
+    activeRowKeys: [],
+    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" }]
+    }
+});
+
+// 方法
+const $Method = {
+    async initData() {
+        await $Method.apiEmailLogList();
+    },
+
+    // 加载邮件日志列表
+    async apiEmailLogList() {
+        $Data.loading = true;
+        try {
+            const res = await $Http("/addon/admin/email/logList", {
+                page: $Data.pagerConfig.currentPage,
+                limit: $Data.pagerConfig.limit
+            });
+            $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;
+        }
+    },
+
+    // 打开发送弹框
+    openSendDialog() {
+        $Data.sendForm = {
+            to: "",
+            cc: "",
+            subject: "",
+            content: ""
+        };
+        $Data.sendDialogVisible = true;
+    },
+
+    // 发送邮件
+    async onSend() {
+        const valid = await sendFormRef?.validate();
+        if (valid !== true) return;
+
+        $Data.sending = true;
+        try {
+            const res = await $Http("/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;
+                $Method.apiEmailLogList();
+            } else {
+                MessagePlugin.error(res.msg || "发送失败");
+            }
+        } catch (error) {
+            MessagePlugin.error("发送失败");
+        } finally {
+            $Data.sending = false;
+        }
+    },
+
+    // 验证配置
+    async onVerify() {
+        try {
+            const res = await $Http("/addon/admin/email/verify");
+            if (res.code === 0) {
+                MessagePlugin.success("邮件服务配置正常");
+            } else {
+                MessagePlugin.error(res.msg || "配置异常");
+            }
+        } catch (error) {
+            MessagePlugin.error("验证失败");
+        }
+    },
+
+    // 刷新
+    handleRefresh() {
+        $Method.apiEmailLogList();
+    },
+
+    // 分页改变
+    onPageChange(currentPage) {
+        $Data.pagerConfig.currentPage = currentPage;
+        $Method.apiEmailLogList();
+    },
+
+    // 每页条数改变
+    handleSizeChange(pageSize) {
+        $Data.pagerConfig.limit = pageSize;
+        $Data.pagerConfig.currentPage = 1;
+        $Method.apiEmailLogList();
+    },
+
+    // 高亮行变化
+    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;
+        }
+    },
+
+    // 格式化时间
+    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}`;
+    }
+};
+
+$Method.initData();
+</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/adminViews/log/index.vue

@@ -0,0 +1,12 @@
+<template>
+    <RouterView />
+</template>
+
+<script setup>
+definePage({
+    meta: {
+        title: "日志管理",
+        order: 40
+    }
+});
+</script>