befly-admin-ui 1.8.14

package/views/index/components/performanceMetrics.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <ChartIcon />
+            <h2>性能指标</h2>
+        </div>
+        <div class="section-content">
+            <div class="performance-grid">
+                <div class="perf-metric">
+                    <div class="perf-icon">
+                        <TimeIcon />
+                    </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">
+                        <TrendingUpIcon />
+                    </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">
+                        <ErrorCircleIcon />
+                    </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">
+                        <ChartIcon />
+                    </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">
+                <ErrorTriangleIcon />
+                <span>最慢接口: {{ performanceMetrics.slowestApi.path }} ({{ performanceMetrics.slowestApi.time }}ms)</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import { ChartIcon, ErrorCircleIcon, ErrorTriangleIcon, TimeIcon, TrendingUpIcon } from "tdesign-icons-vue-next";
+import { $Http } from "@/plugins/http";
+
+type SlowestApiInfo = {
+    path: string;
+    time: number;
+};
+
+// 组件内部数据
+const performanceMetrics = reactive({
+    avgResponseTime: 0,
+    qps: 0,
+    errorRate: 0,
+    activeConnections: 0,
+    slowestApi: null as SlowestApiInfo | null
+});
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http.post(
+            "/core/dashboard/performanceMetrics",
+            {},
+            {
+                dropValues: [""]
+            }
+        );
+        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/views/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>
+                    <RefreshIcon />
+                </template>
+                刷新缓存
+            </TButton>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Button as TButton } from "tdesign-vue-next";
+import { RefreshIcon } from "tdesign-icons-vue-next";
+
+const handleClearCache = () => {
+    // TODO: 接入刷新缓存接口
+};
+</script>
+
+<style scoped lang="scss">
+.section-block {
+    .section-content {
+        display: flex;
+        justify-content: center;
+    }
+}
+</style>

package/views/index/components/serviceStatus.vue

@@ -0,0 +1,197 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <CheckCircleIcon />
+            <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">
+                        <DataBaseIcon v-if="service.name === '数据库'" style="width: 20px; height: 20px" />
+                        <LightingCircleIcon v-else-if="service.name === 'Redis'" style="width: 20px; height: 20px" />
+                        <HardDiskStorageIcon v-else-if="service.name === '文件系统'" style="width: 20px; height: 20px" />
+                        <MailIcon v-else-if="service.name === '邮件服务'" style="width: 20px; height: 20px" />
+                        <CloudIcon v-else-if="service.name === 'OSS存储'" style="width: 20px; height: 20px" />
+                        <CircleIcon 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">
+                        <CheckCircleIcon v-if="service.status === 'running'" style="width: 32px; height: 32px" />
+                        <CloseCircleIcon v-else-if="service.status === 'stopped'" style="width: 32px; height: 32px" />
+                        <ErrorCircleIcon v-else-if="service.status === 'unconfigured'" style="width: 32px; height: 32px" />
+                        <CircleIcon v-else style="width: 32px; height: 32px" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import { CheckCircleIcon, CircleIcon, CloudIcon, CloseCircleIcon, DataBaseIcon, ErrorCircleIcon, HardDiskStorageIcon, LightingCircleIcon, MailIcon } from "tdesign-icons-vue-next";
+import { $Http } from "@/plugins/http";
+
+type ServiceStatusItem = {
+    name: string;
+    status: string;
+    responseTime?: string;
+};
+
+// 组件内部数据
+const services = reactive<ServiceStatusItem[]>([]);
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http.post(
+            "/core/dashboard/serviceStatus",
+            {},
+            {
+                dropValues: [""]
+            }
+        );
+        services.splice(0, services.length, ...data.services);
+    } catch (_error) {
+        // 静默失败：不阻断页面展示
+    }
+};
+
+fetchData();
+
+// 工具函数
+const getStatusColor = (status: string): string => {
+    const colors = {
+        running: "success",
+        stopped: "error",
+        unconfigured: "warning"
+    };
+    return colors[status] || "default";
+};
+
+const getStatusText = (status: string): string => {
+    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/views/index/components/systemNotifications.vue

@@ -0,0 +1,144 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <NotificationIcon />
+            <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}`">
+                        <InfoCircleIcon v-if="notification.type === 'info'" />
+                        <CheckCircleIcon v-else-if="notification.type === 'success'" />
+                        <ErrorTriangleIcon v-else-if="notification.type === 'warning'" />
+                        <CloseCircleIcon v-else-if="notification.type === 'error'" />
+                        <NotificationIcon 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 lang="ts">
+import { reactive } from "vue";
+import { Tag as TTag } from "tdesign-vue-next";
+import { CheckCircleIcon, CloseCircleIcon, ErrorTriangleIcon, InfoCircleIcon, NotificationIcon } from "tdesign-icons-vue-next";
+
+type NotificationType = "info" | "success" | "warning" | "error" | "other";
+
+type NotificationItem = {
+    id: number;
+    type: NotificationType;
+    title: string;
+    isRead: boolean;
+    createdAt: number;
+};
+
+// 组件内部数据
+const notifications = reactive<NotificationItem[]>([
+    { 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: number): string => {
+    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>