@befly-addon/admin 1.2.1 → 1.2.3

package/adminViews/index/components/performanceMetrics.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <ILucideActivity />
+            <h2>性能指标</h2>
+        </div>
+        <div class="section-content">
+            <div class="performance-grid">
+                <div class="perf-metric">
+                    <div class="perf-icon">
+                        <ILucideClock />
+                    </div>
+                    <div class="perf-info">
+                        <div class="perf-label">平均响应</div>
+                        <div class="perf-value">{{ performanceMetrics.avgResponseTime }}ms</div>
+                    </div>
+                </div>
+                <div class="perf-metric">
+                    <div class="perf-icon">
+                        <ILucideTrendingUp />
+                    </div>
+                    <div class="perf-info">
+                        <div class="perf-label">QPS</div>
+                        <div class="perf-value">{{ performanceMetrics.qps }}/s</div>
+                    </div>
+                </div>
+                <div class="perf-metric">
+                    <div class="perf-icon">
+                        <ILucideAlertCircle />
+                    </div>
+                    <div class="perf-info">
+                        <div class="perf-label">错误率</div>
+                        <div class="perf-value">{{ performanceMetrics.errorRate }}%</div>
+                    </div>
+                </div>
+                <div class="perf-metric">
+                    <div class="perf-icon">
+                        <ILucideActivity />
+                    </div>
+                    <div class="perf-info">
+                        <div class="perf-label">活跃连接</div>
+                        <div class="perf-value">{{ performanceMetrics.activeConnections }}</div>
+                    </div>
+                </div>
+            </div>
+            <!-- 最慢接口提示 -->
+            <div v-if="performanceMetrics.slowestApi" class="perf-slowest">
+                <ILucideAlertTriangle />
+                <span>最慢接口: {{ performanceMetrics.slowestApi.path }} ({{ performanceMetrics.slowestApi.time }}ms)</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import ILucideActivity from "~icons/lucide/activity";
+import ILucideClock from "~icons/lucide/clock";
+import ILucideTrendingUp from "~icons/lucide/trending-up";
+import ILucideAlertCircle from "~icons/lucide/alert-circle";
+import ILucideAlertTriangle from "~icons/lucide/alert-triangle";
+import { $Http } from "@/plugins/http";
+
+// 组件内部数据
+const performanceMetrics = $ref({
+    avgResponseTime: 0,
+    qps: 0,
+    errorRate: 0,
+    activeConnections: 0,
+    slowestApi: null
+});
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http("/addon/admin/dashboard/performanceMetrics");
+        Object.assign(performanceMetrics, data);
+    } catch (error) {
+        // 静默失败：不阻断页面展示
+    }
+};
+
+fetchData();
+</script>
+
+<style scoped lang="scss">
+.performance-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--spacing-sm);
+    margin-bottom: var(--spacing-sm);
+
+    .perf-metric {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-sm);
+        padding: var(--spacing-sm) var(--spacing-md);
+        background: rgba(var(--primary-color-rgb), 0.02);
+        border-radius: var(--border-radius);
+        border: 1px solid var(--border-color);
+        transition: all 0.2s;
+
+        &:hover {
+            background: rgba(var(--primary-color-rgb), 0.05);
+            border-color: var(--primary-color);
+        }
+
+        .perf-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 36px;
+            border-radius: var(--border-radius-small);
+            background: linear-gradient(135deg, rgba(0, 168, 112, 0.1) 0%, rgba(0, 168, 112, 0.05) 100%);
+            color: var(--success-color);
+            flex-shrink: 0;
+        }
+
+        .perf-info {
+            flex: 1;
+
+            .perf-label {
+                font-size: 14px;
+                color: var(--text-secondary);
+                margin-bottom: 2px;
+            }
+
+            .perf-value {
+                font-size: 16px;
+                font-weight: 700;
+                color: var(--primary-color);
+            }
+        }
+    }
+}
+
+.warning-tip {
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: rgba(var(--warning-color-rgb), 0.05);
+    border-radius: var(--border-radius-small);
+    border: 1px solid rgba(var(--warning-color-rgb), 0.2);
+    font-size: 13px;
+    color: var(--warning-color);
+}
+</style>

package/adminViews/index/components/quickActions.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="section-block">
+        <div class="section-content">
+            <TButton theme="primary" size="large" @click="handleClearCache">
+                <template #prefix>
+                    <ILucideRotateCw />
+                </template>
+                刷新缓存
+            </TButton>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { Button as TButton } from "tdesign-vue-next";
+import ILucideRotateCw from "~icons/lucide/rotate-cw";
+
+const handleClearCache = () => {
+    // TODO: 接入刷新缓存接口
+};
+</script>
+
+<style scoped lang="scss">
+.section-block {
+    .section-content {
+        display: flex;
+        justify-content: center;
+    }
+}
+</style>

package/adminViews/index/components/serviceStatus.vue

@@ -0,0 +1,192 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <ILucideCheckCircle />
+            <h2>服务状态</h2>
+        </div>
+        <div class="section-content">
+            <div class="config-grid">
+                <div v-for="service in services" :key="service.name" class="config-card" :class="`config-${service.status}`">
+                    <div class="config-icon">
+                        <ILucideDatabase v-if="service.name === '数据库'" style="width: 20px; height: 20px" />
+                        <ILucideZap v-else-if="service.name === 'Redis'" style="width: 20px; height: 20px" />
+                        <ILucideHardDrive v-else-if="service.name === '文件系统'" style="width: 20px; height: 20px" />
+                        <ILucideMail v-else-if="service.name === '邮件服务'" style="width: 20px; height: 20px" />
+                        <ILucideCloud v-else-if="service.name === 'OSS存储'" style="width: 20px; height: 20px" />
+                        <ILucideCircle v-else style="width: 20px; height: 20px" />
+                    </div>
+                    <div class="config-info">
+                        <div class="config-name">{{ service.name }}</div>
+                        <div class="config-status">
+                            {{ getStatusText(service.status) }}
+                            <span v-if="service.responseTime && service.responseTime !== '-'" class="latency">{{ service.responseTime }}</span>
+                        </div>
+                    </div>
+                    <div class="config-badge">
+                        <ILucideCheckCircle v-if="service.status === 'running'" style="width: 32px; height: 32px" />
+                        <ILucideXCircle v-else-if="service.status === 'stopped'" style="width: 32px; height: 32px" />
+                        <ILucideAlertCircle v-else-if="service.status === 'unconfigured'" style="width: 32px; height: 32px" />
+                        <ILucideCircle v-else style="width: 32px; height: 32px" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import ILucideCheckCircle from "~icons/lucide/check-circle";
+import ILucideDatabase from "~icons/lucide/database";
+import ILucideZap from "~icons/lucide/zap";
+import ILucideHardDrive from "~icons/lucide/hard-drive";
+import ILucideMail from "~icons/lucide/mail";
+import ILucideCloud from "~icons/lucide/cloud";
+import ILucideCircle from "~icons/lucide/circle";
+import ILucideXCircle from "~icons/lucide/x-circle";
+import ILucideAlertCircle from "~icons/lucide/alert-circle";
+import { $Http } from "@/plugins/http";
+
+// 组件内部数据
+const services = $ref([]);
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http("/addon/admin/dashboard/serviceStatus");
+        services.splice(0, services.length, ...data.services);
+    } catch (error) {
+        // 静默失败：不阻断页面展示
+    }
+};
+
+fetchData();
+
+// 工具函数
+const getStatusColor = (status) => {
+    const colors = {
+        running: "success",
+        stopped: "error",
+        unconfigured: "warning"
+    };
+    return colors[status] || "default";
+};
+
+const getStatusText = (status) => {
+    const texts = {
+        running: "正常",
+        stopped: "停止",
+        unconfigured: "未配置"
+    };
+    return texts[status] || status;
+};
+</script>
+
+<style scoped lang="scss">
+.config-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 10px;
+
+    .config-card {
+        background: rgba(var(--primary-color-rgb), 0.02);
+        border: 1px solid var(--border-color);
+        border-radius: 6px;
+        padding: 12px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        position: relative;
+        overflow: hidden;
+        transition: all 0.3s;
+
+        &:hover {
+            background: rgba(var(--primary-color-rgb), 0.05);
+            border-color: var(--primary-color);
+            transform: translateY(-2px);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        }
+
+        .config-icon {
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 6px;
+            flex-shrink: 0;
+        }
+
+        .config-info {
+            flex: 1;
+            min-width: 0;
+
+            .config-name {
+                font-size: 14px;
+                font-weight: 600;
+                margin-bottom: 2px;
+            }
+
+            .config-status {
+                font-size: 14px;
+                display: flex;
+                align-items: center;
+                gap: 4px;
+
+                .latency {
+                    margin-left: 4px;
+                    color: var(--text-placeholder);
+                }
+            }
+        }
+
+        .config-badge {
+            position: absolute;
+            top: 6px;
+            right: 6px;
+            opacity: 0.2;
+        }
+
+        &.config-running {
+            border-color: var(--success-color);
+            background: linear-gradient(135deg, rgba(82, 196, 26, 0.05), white);
+
+            .config-icon {
+                background: rgba(82, 196, 26, 0.1);
+                color: var(--success-color);
+            }
+
+            .config-name {
+                color: var(--success-color);
+            }
+        }
+
+        &.config-unconfigured {
+            border-color: var(--warning-color);
+            background: linear-gradient(135deg, rgba(250, 173, 20, 0.05), white);
+
+            .config-icon {
+                background: rgba(250, 173, 20, 0.1);
+                color: var(--warning-color);
+            }
+
+            .config-name {
+                color: var(--warning-color);
+            }
+        }
+
+        &.config-stopped {
+            border-color: var(--error-color);
+            background: linear-gradient(135deg, rgba(255, 77, 79, 0.05), white);
+
+            .config-icon {
+                background: rgba(255, 77, 79, 0.1);
+                color: var(--error-color);
+            }
+
+            .config-name {
+                color: var(--error-color);
+            }
+        }
+    }
+}
+</style>

package/adminViews/index/components/systemNotifications.vue

@@ -0,0 +1,137 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <ILucideBell />
+            <h2>系统通知</h2>
+        </div>
+        <div class="section-content">
+            <div class="notification-compact-list">
+                <div v-for="notification in notifications" :key="notification.id" class="notification-compact-item">
+                    <div class="notification-icon" :class="`type-${notification.type}`">
+                        <ILucideInfo v-if="notification.type === 'info'" />
+                        <ILucideCheckCircle v-else-if="notification.type === 'success'" />
+                        <ILucideAlertTriangle v-else-if="notification.type === 'warning'" />
+                        <ILucideXCircle v-else-if="notification.type === 'error'" />
+                        <ILucideBell v-else />
+                    </div>
+                    <div class="notification-content">
+                        <span class="notification-title">{{ notification.title }}</span>
+                        <span class="notification-time">{{ formatTime(notification.createdAt) }}</span>
+                    </div>
+                    <TTag v-if="!notification.isRead" type="primary" size="small">新</TTag>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { Tag as TTag } from "tdesign-vue-next";
+import ILucideBell from "~icons/lucide/bell";
+import ILucideInfo from "~icons/lucide/info";
+import ILucideCheckCircle from "~icons/lucide/check-circle";
+import ILucideAlertTriangle from "~icons/lucide/alert-triangle";
+import ILucideXCircle from "~icons/lucide/x-circle";
+
+// 组件内部数据
+const notifications = $ref([
+    { id: 1, type: "warning", title: "系统更新提醒 - v1.1.0 版本已发布", isRead: false, createdAt: Date.now() - 3600000 },
+    { id: 2, type: "info", title: "数据备份完成 - 今日凌晨自动备份成功", isRead: true, createdAt: Date.now() - 21600000 },
+    { id: 3, type: "error", title: "SSL证书即将过期 - 请及时更新证书", isRead: false, createdAt: Date.now() - 86400000 },
+    { id: 4, type: "success", title: "性能优化完成 - 响应速度提升30%", isRead: true, createdAt: Date.now() - 172800000 }
+]);
+
+const formatTime = (timestamp) => {
+    const date = new Date(timestamp);
+    const now = Date.now();
+    const diff = now - timestamp;
+
+    if (diff < 3600000) {
+        return `${Math.floor(diff / 60000)}分钟前`;
+    } else if (diff < 86400000) {
+        return `${Math.floor(diff / 3600000)}小时前`;
+    } else {
+        const month = String(date.getMonth() + 1).padStart(2, "0");
+        const day = String(date.getDate()).padStart(2, "0");
+        return `${month}-${day}`;
+    }
+};
+</script>
+
+<style scoped lang="scss">
+.notification-compact-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+
+    .notification-compact-item {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-sm);
+        padding: var(--spacing-sm) var(--spacing-md);
+        background: rgba(var(--primary-color-rgb), 0.02);
+        border-radius: var(--border-radius-small);
+        border: 1px solid var(--border-color);
+        transition: all 0.2s;
+
+        &:hover {
+            background: rgba(var(--primary-color-rgb), 0.05);
+            border-color: var(--primary-color);
+        }
+
+        .notification-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 32px;
+            height: 32px;
+            border-radius: var(--border-radius-small);
+            flex-shrink: 0;
+
+            &.type-info {
+                background: rgba(var(--primary-color-rgb), 0.1);
+                color: var(--primary-color);
+            }
+
+            &.type-success {
+                background: rgba(var(--success-color-rgb), 0.1);
+                color: var(--success-color);
+            }
+
+            &.type-warning {
+                background: rgba(var(--warning-color-rgb), 0.1);
+                color: var(--warning-color);
+            }
+
+            &.type-error {
+                background: rgba(var(--error-color-rgb), 0.1);
+                color: var(--error-color);
+            }
+        }
+
+        .notification-content {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-sm);
+            flex: 1;
+            min-width: 0;
+
+            .notification-title {
+                font-size: 14px;
+                color: var(--text-primary);
+                font-weight: 500;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                flex: 1;
+            }
+
+            .notification-time {
+                font-size: 14px;
+                color: var(--text-placeholder);
+                flex-shrink: 0;
+            }
+        }
+    }
+}
+</style>

package/adminViews/index/components/systemOverview.vue

@@ -0,0 +1,190 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <ILucideInfo />
+            <h2>系统概览</h2>
+        </div>
+        <div class="section-content">
+            <div class="info-block">
+                <div class="stats-grid">
+                    <div class="stat-box stat-primary">
+                        <ILucideMenu />
+                        <div class="stat-content">
+                            <div class="stat-value">{{ permissionStats.menuCount }}</div>
+                            <div class="stat-label">菜单总数</div>
+                        </div>
+                    </div>
+                    <div class="stat-box stat-success">
+                        <ILucideWebhook />
+                        <div class="stat-content">
+                            <div class="stat-value">{{ permissionStats.apiCount }}</div>
+                            <div class="stat-label">接口总数</div>
+                        </div>
+                    </div>
+                    <div class="stat-box stat-warning">
+                        <ILucideUsers />
+                        <div class="stat-content">
+                            <div class="stat-value">{{ permissionStats.roleCount }}</div>
+                            <div class="stat-label">角色总数</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import ILucideInfo from "~icons/lucide/info";
+import ILucideMenu from "~icons/lucide/menu";
+import ILucideWebhook from "~icons/lucide/webhook";
+import ILucideUsers from "~icons/lucide/users";
+import { $Http } from "@/plugins/http";
+
+// 组件内部数据
+const permissionStats = $ref({
+    menuCount: 0,
+    apiCount: 0,
+    roleCount: 0
+});
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http("/addon/admin/dashboard/systemOverview");
+        Object.assign(permissionStats, data);
+    } catch (error) {
+        // 静默失败：不阻断页面展示
+    }
+};
+
+fetchData();
+</script>
+
+<style scoped lang="scss">
+.info-block {
+    background: transparent;
+    border: none;
+    padding: 0;
+    height: 100%;
+
+    .info-header {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding-bottom: 8px;
+        margin-bottom: 12px;
+        border-bottom: 2px solid var(--primary-color);
+
+        .info-title {
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+    }
+
+    .info-grid-compact {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 10px;
+
+        .info-grid-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 12px;
+            background: rgba(var(--primary-color-rgb), 0.02);
+            border-radius: var(--border-radius-small);
+            border: 1px solid var(--border-color);
+            transition: all 0.2s ease;
+
+            &:hover {
+                background: rgba(var(--primary-color-rgb), 0.05);
+                border-color: var(--primary-color);
+            }
+
+            .label {
+                font-size: 14px;
+                color: var(--text-secondary);
+                font-weight: 500;
+            }
+
+            .value {
+                font-size: 14px;
+                color: var(--text-primary);
+                font-weight: 600;
+
+                &.highlight {
+                    color: var(--primary-color);
+                }
+            }
+        }
+    }
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+
+    .stat-box {
+        background: rgba(var(--primary-color-rgb), 0.02);
+        border: 1px solid var(--border-color);
+        border-radius: 6px;
+        padding: 12px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        transition: all 0.3s;
+
+        &:hover {
+            background: rgba(var(--primary-color-rgb), 0.05);
+            border-color: var(--primary-color);
+            transform: translateY(-2px);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        }
+
+        .stat-content {
+            flex: 1;
+
+            .stat-value {
+                font-size: 20px;
+                font-weight: 700;
+                margin-bottom: 2px;
+            }
+
+            .stat-label {
+                font-size: 14px;
+                color: var(--text-secondary);
+            }
+        }
+
+        &.stat-primary {
+            border-color: var(--primary-color);
+            background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05), white);
+
+            .stat-value {
+                color: var(--primary-color);
+            }
+        }
+
+        &.stat-success {
+            border-color: var(--success-color);
+            background: linear-gradient(135deg, rgba(var(--success-color-rgb), 0.05), white);
+
+            .stat-value {
+                color: var(--success-color);
+            }
+        }
+
+        &.stat-warning {
+            border-color: var(--warning-color);
+            background: linear-gradient(135deg, rgba(var(--warning-color-rgb), 0.05), white);
+
+            .stat-value {
+                color: var(--warning-color);
+            }
+        }
+    }
+}
+</style>