@befly-addon/admin 1.1.34 → 1.2.0

package/views/index/components/operationLogs.vue

@@ -1,112 +0,0 @@
-<template>
-    <div class="section-block">
-        <div class="section-header flex items-center gap-2">
-            <i-lucide:file-text />
-            <h2>操作日志</h2>
-        </div>
-        <div class="section-content">
-            <div class="operation-table">
-                <div class="operation-header">
-                    <span class="col-time">时间</span>
-                    <span class="col-user">操作人</span>
-                    <span class="col-action">操作</span>
-                    <span class="col-module">模块</span>
-                    <span class="col-ip">IP地址</span>
-                    <span class="col-status">状态</span>
-                </div>
-                <div class="operation-body">
-                    <div v-for="log in operationLogs" :key="log.id" class="operation-row">
-                        <span class="col-time">{{ formatTime(log.createdAt) }}</span>
-                        <span class="col-user">{{ log.userName }}</span>
-                        <span class="col-action">{{ log.action }}</span>
-                        <span class="col-module">{{ log.module }}</span>
-                        <span class="col-ip">{{ log.ip }}</span>
-                        <span class="col-status">
-                            <t-tag :type="log.status === 'success' ? 'success' : 'danger'" size="small">
-                                {{ log.status === "success" ? "成功" : "失败" }}
-                            </t-tag>
-                        </span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-// 组件内部数据
-const operationLogs = $ref([
-    { id: 1, userName: "管理员", action: "创建角色", module: "权限管理", ip: "192.168.1.100", status: "success", createdAt: Date.now() - 120000 },
-    { id: 2, userName: "张三", action: "修改菜单", module: "系统设置", ip: "192.168.1.101", status: "success", createdAt: Date.now() - 900000 },
-    { id: 3, userName: "李四", action: "删除接口", module: "接口管理", ip: "192.168.1.102", status: "failed", createdAt: Date.now() - 3600000 },
-    { id: 4, userName: "管理员", action: "同步数据库", module: "数据库", ip: "192.168.1.100", status: "success", createdAt: Date.now() - 7200000 },
-    { id: 5, userName: "王五", action: "登录系统", module: "系统", ip: "192.168.1.103", status: "success", createdAt: Date.now() - 10800000 }
-]);
-
-const formatTime = (timestamp) => {
-    const date = new Date(timestamp);
-    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");
-    return `${month}-${day} ${hours}:${minutes}`;
-};
-</script>
-
-<style scoped lang="scss">
-.operation-table {
-    .operation-header,
-    .operation-row {
-        display: grid;
-        grid-template-columns: 100px 100px 1fr 120px 120px 80px;
-        gap: 12px;
-        align-items: center;
-    }
-
-    .operation-header {
-        padding: 10px 12px;
-        background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05) 0%, rgba(var(--primary-color-rgb), 0.02) 100%);
-        border-radius: 6px;
-        font-size: 14px;
-        font-weight: 600;
-        color: var(--text-secondary);
-        margin-bottom: 6px;
-    }
-
-    .operation-body {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-    }
-
-    .operation-row {
-        padding: 6px 12px;
-        background: var(--bg-color-container);
-        border-radius: 6px;
-        border: 1px solid var(--border-color);
-        font-size: 14px;
-        transition: all 0.2s ease;
-
-        &:hover {
-            background: rgba(var(--primary-color-rgb), 0.02);
-            border-color: rgba(var(--primary-color-rgb), 0.2);
-        }
-
-        .col-time {
-            color: var(--text-secondary);
-            font-size: 14px;
-        }
-
-        .col-user,
-        .col-action,
-        .col-module,
-        .col-ip {
-            color: var(--text-primary);
-        }
-
-        .col-action {
-            font-weight: 600;
-        }
-    }
-}
-</style>

package/views/index/components/performanceMetrics.vue

@@ -1,145 +0,0 @@
-<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/views/index/components/quickActions.vue

@@ -1,30 +0,0 @@
-<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/views/index/components/serviceStatus.vue

@@ -1,192 +0,0 @@
-<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/views/index/components/systemNotifications.vue

@@ -1,137 +0,0 @@
-<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>