befly-admin 3.0.1

package/src/views/index/components/AddonList.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="section-block">
+        <div class="section-header">
+            <Icon name="Package" :size="20" />
+            <h2>已安装插件</h2>
+        </div>
+        <div class="section-content">
+            <div class="addon-list">
+                <div v-for="addon in addonList" :key="addon.name" class="addon-item">
+                    <div class="addon-status-badge" :class="{ active: addon.enabled }"></div>
+                    <div class="addon-icon">
+                        <Icon name="Box" :size="20" />
+                    </div>
+                    <div class="addon-info">
+                        <div class="addon-title">
+                            <span class="addon-name">{{ addon.title }}</span>
+                            <t-tag theme="success" variant="outline" size="small">{{ addon.version }}</t-tag>
+                        </div>
+                        <div class="addon-desc">{{ addon.description }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+// 组件内部数据
+const addonList = $ref([]);
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http('/addon/admin/dashboardAddonList');
+        addonList.splice(0, addonList.length, ...data);
+    } catch (error) {
+        console.error('获取插件列表失败:', error);
+    }
+};
+
+fetchData();
+</script>
+
+<style scoped lang="scss">
+.addon-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .addon-item {
+        position: relative;
+        background: $bg-color-container;
+        border: 1px solid $border-color;
+        border-left: 3px solid $primary-color;
+        border-radius: $border-radius-small;
+        padding: 10px 12px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        transition: all 0.3s;
+
+        &:hover {
+            border-left-color: $success-color;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+            transform: translateY(-2px);
+        }
+
+        .addon-status-badge {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: $text-disabled;
+            transition: all 0.3s;
+
+            &.active {
+                background: $success-color;
+                box-shadow: 0 0 0 2px rgba($success-color, 0.2);
+            }
+        }
+
+        .addon-icon {
+            width: 32px;
+            height: 32px;
+            background: linear-gradient(135deg, $primary-color, #764ba2);
+            border-radius: $border-radius-small;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            flex-shrink: 0;
+        }
+
+        .addon-info {
+            flex: 1;
+            min-width: 0;
+            padding-right: 16px;
+
+            .addon-title {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+                margin-bottom: 2px;
+
+                .addon-name {
+                    font-size: 14px;
+                    font-weight: 600;
+                    color: $text-primary;
+                }
+            }
+
+            .addon-desc {
+                font-size: 14px;
+                color: $text-secondary;
+                line-height: 1.3;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+    }
+}
+</style>

package/src/views/index/components/EnvironmentInfo.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="section-block">
+        <div class="section-header">
+            <Icon name="Server" :size="20" />
+            <h2>运行环境</h2>
+        </div>
+        <div class="section-content">
+            <div class="env-grid-compact">
+                <div class="env-compact-item">
+                    <span class="env-label">操作系统</span>
+                    <span class="env-value">{{ environmentInfo.os }}</span>
+                </div>
+                <div class="env-compact-item">
+                    <span class="env-label">服务器</span>
+                    <span class="env-value">{{ environmentInfo.server }}</span>
+                </div>
+                <div class="env-compact-item">
+                    <span class="env-label">Node版本</span>
+                    <span class="env-value">{{ environmentInfo.nodeVersion }}</span>
+                </div>
+                <div class="env-compact-item">
+                    <span class="env-label">数据库</span>
+                    <span class="env-value">{{ environmentInfo.database }}</span>
+                </div>
+                <div class="env-compact-item">
+                    <span class="env-label">缓存</span>
+                    <span class="env-value">{{ environmentInfo.cache }}</span>
+                </div>
+                <div class="env-compact-item">
+                    <span class="env-label">时区</span>
+                    <span class="env-value">{{ environmentInfo.timezone }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+// 组件内部数据
+const environmentInfo = $ref({
+    os: '',
+    server: '',
+    nodeVersion: '',
+    database: '',
+    cache: '',
+    timezone: ''
+});
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http('/addon/admin/dashboardEnvironmentInfo');
+        Object.assign(environmentInfo, data);
+    } catch (error) {
+        console.error('获取运行环境信息失败:', error);
+    }
+};
+
+fetchData();
+</script>
+
+<style scoped lang="scss">
+.env-grid-compact {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+
+    .env-compact-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 12px;
+        background: $bg-color-container;
+        border-radius: 6px;
+        border: 1px solid $border-color;
+        transition: all 0.2s ease;
+
+        &:hover {
+            background: rgba($primary-color, 0.03);
+            border-color: rgba($primary-color, 0.2);
+        }
+
+        .env-label {
+            font-size: 14px;
+            color: $text-secondary;
+            font-weight: 500;
+        }
+
+        .env-value {
+            font-size: 14px;
+            color: $text-primary;
+            font-weight: 600;
+            text-align: right;
+        }
+    }
+}
+</style>

package/src/views/index/components/OperationLogs.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="section-block">
+        <div class="section-header">
+            <Icon name="List" :size="20" />
+            <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 :theme="log.status === 'success' ? 'success' : 'danger'" size="small" variant="light">
+                                {{ 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($primary-color, 0.05) 0%, rgba($primary-color, 0.02) 100%);
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 600;
+        color: $text-secondary;
+        margin-bottom: 6px;
+    }
+
+    .operation-body {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .operation-row {
+        padding: 10px 12px;
+        background: $bg-color-container;
+        border-radius: 6px;
+        border: 1px solid $border-color;
+        font-size: 14px;
+        transition: all 0.2s ease;
+
+        &:hover {
+            background: rgba($primary-color, 0.02);
+            border-color: rgba($primary-color, 0.2);
+        }
+
+        .col-time {
+            color: $text-secondary;
+            font-size: 14px;
+        }
+
+        .col-user,
+        .col-action,
+        .col-module,
+        .col-ip {
+            color: $text-primary;
+        }
+
+        .col-action {
+            font-weight: 600;
+        }
+    }
+}
+</style>

package/src/views/index/components/PerformanceMetrics.vue

@@ -0,0 +1,148 @@
+<template>
+    <div class="section-block">
+        <div class="section-header">
+            <Icon name="Zap" :size="20" />
+            <h2>性能指标</h2>
+        </div>
+        <div class="section-content">
+            <div class="performance-grid">
+                <div class="perf-metric">
+                    <div class="perf-icon">
+                        <Icon name="Clock" :size="18" />
+                    </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">
+                        <Icon name="TrendingUp" :size="18" />
+                    </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">
+                        <Icon name="AlertCircle" :size="18" />
+                    </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">
+                        <Icon name="Activity" :size="18" />
+                    </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">
+                <Icon name="AlertTriangle" :size="14" />
+                <span>最慢接口: {{ performanceMetrics.slowestApi.path }} ({{ performanceMetrics.slowestApi.time }}ms)</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+// 组件内部数据
+const performanceMetrics = $ref({
+    avgResponseTime: 0,
+    qps: 0,
+    errorRate: 0,
+    activeConnections: 0,
+    slowestApi: null
+});
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http('/addon/admin/dashboardPerformanceMetrics');
+        Object.assign(performanceMetrics, data);
+    } catch (error) {
+        console.error('获取性能指标失败:', error);
+    }
+};
+
+fetchData();
+</script>
+
+<style scoped lang="scss">
+.performance-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: $spacing-sm;
+    margin-bottom: $spacing-sm;
+
+    .perf-metric {
+        display: flex;
+        align-items: center;
+        gap: $spacing-sm;
+        padding: $spacing-sm $spacing-md;
+        background: rgba($primary-color, 0.02);
+        border-radius: $border-radius;
+        border: 1px solid $border-color;
+        transition: all 0.2s ease;
+
+        &:hover {
+            background: rgba($primary-color, 0.05);
+            border-color: $primary-color;
+        }
+
+        .perf-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 36px;
+            border-radius: $border-radius-small;
+            background: linear-gradient(135deg, rgba($success-color, 0.1) 0%, rgba($success-color, 0.05) 100%);
+            color: $success-color;
+            flex-shrink: 0;
+        }
+
+        .perf-info {
+            flex: 1;
+
+            .perf-label {
+                font-size: 14px;
+                color: $text-secondary;
+                margin-bottom: 2px;
+            }
+
+            .perf-value {
+                font-size: 16px;
+                font-weight: 700;
+                color: $primary-color;
+            }
+        }
+    }
+}
+
+.perf-slowest {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: $spacing-sm $spacing-md;
+    background: rgba($warning-color, 0.05);
+    border-radius: $border-radius-small;
+    border: 1px solid rgba($warning-color, 0.2);
+    font-size: 14px;
+    color: $warning-color;
+
+    span {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+</style>

package/src/views/index/components/QuickActions.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="section-block">
+        <div class="section-content">
+            <t-button theme="primary" size="large" @click="handleClearCache">
+                <template #icon>
+                    <Icon name="RotateCw" :size="18" />
+                </template>
+                刷新缓存
+            </t-button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const handleClearCache = () => {
+    console.log('刷新缓存');
+};
+</script>
+
+<style scoped lang="scss">
+.section-block {
+    .section-content {
+        display: flex;
+        justify-content: center;
+    }
+}
+</style>

package/src/views/index/components/ServiceStatus.vue

@@ -0,0 +1,193 @@
+<template>
+    <div class="section-block">
+        <div class="section-header">
+            <Icon name="Settings" :size="20" />
+            <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">
+                        <Icon :name="getServiceIcon(service.name)" :size="20" />
+                    </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">
+                        <Icon :name="getStatusIcon(service.status)" :size="32" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+// 组件内部数据
+const services = $ref([]);
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http('/addon/admin/dashboardServiceStatus');
+        services.splice(0, services.length, ...data.services);
+    } catch (error) {
+        console.error('获取服务状态失败:', 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;
+};
+
+const getServiceIcon = (name) => {
+    const icons = {
+        数据库: 'Database',
+        Redis: 'Zap',
+        文件系统: 'HardDrive',
+        邮件服务: 'Mail',
+        OSS存储: 'Cloud'
+    };
+    return icons[name] || 'Circle';
+};
+
+const getStatusIcon = (status) => {
+    const icons = {
+        running: 'CheckCircle',
+        stopped: 'XCircle',
+        unconfigured: 'AlertCircle'
+    };
+    return icons[status] || 'Circle';
+};
+</script>
+
+<style scoped lang="scss">
+.config-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 10px;
+
+    .config-card {
+        background: rgba($primary-color, 0.02);
+        border: 1px solid $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($primary-color, 0.05);
+            border-color: $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: $text-placeholder;
+                }
+            }
+        }
+
+        .config-badge {
+            position: absolute;
+            top: 6px;
+            right: 6px;
+            opacity: 0.2;
+        }
+
+        &.config-running {
+            border-color: $success-color;
+            background: linear-gradient(135deg, rgba(82, 196, 26, 0.05), white);
+
+            .config-icon {
+                background: rgba(82, 196, 26, 0.1);
+                color: $success-color;
+            }
+
+            .config-name {
+                color: $success-color;
+            }
+        }
+
+        &.config-unconfigured {
+            border-color: $warning-color;
+            background: linear-gradient(135deg, rgba(250, 173, 20, 0.05), white);
+
+            .config-icon {
+                background: rgba(250, 173, 20, 0.1);
+                color: $warning-color;
+            }
+
+            .config-name {
+                color: $warning-color;
+            }
+        }
+
+        &.config-stopped {
+            border-color: $error-color;
+            background: linear-gradient(135deg, rgba(255, 77, 79, 0.05), white);
+
+            .config-icon {
+                background: rgba(255, 77, 79, 0.1);
+                color: $error-color;
+            }
+
+            .config-name {
+                color: $error-color;
+            }
+        }
+    }
+}
+</style>