@befly-addon/admin 1.0.10 → 1.0.12

package/views/index/components/environmentInfo.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="section-block">
+        <div class="section-header">
+            <i-lucide:server style="width: 20px; height: 20px" />
+            <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>
+import { ref } from 'vue';
+
+// 组件内部数据
+const environmentInfo = $ref({
+    os: '',
+    server: '',
+    nodeVersion: '',
+    database: '',
+    cache: '',
+    timezone: ''
+});
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http('/addon/admin/dashboard/environmentInfo');
+        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/views/index/components/operationLogs.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="section-block">
+        <div class="section-header">
+            <i-lucide:list style="width: 20px; height: 20px" />
+            <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">
+                            <tiny-tag :type="log.status === 'success' ? 'success' : 'danger'" size="small">
+                                {{ log.status === 'success' ? '成功' : '失败' }}
+                            </tiny-tag>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 组件内部数据
+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/views/index/components/performanceMetrics.vue

@@ -0,0 +1,150 @@
+<template>
+    <div class="section-block">
+        <div class="section-header">
+            <i-lucide:zap style="width: 20px; height: 20px" />
+            <h2>性能指标</h2>
+        </div>
+        <div class="section-content">
+            <div class="performance-grid">
+                <div class="perf-metric">
+                    <div class="perf-icon">
+                        <i-lucide:clock style="width: 18px; height: 18px" />
+                    </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">
+                        <i-lucide:trending-up style="width: 18px; height: 18px" />
+                    </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">
+                        <i-lucide:alert-circle style="width: 18px; height: 18px" />
+                    </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">
+                        <i-lucide:activity style="width: 18px; height: 18px" />
+                    </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">
+                <i-lucide:alert-triangle style="width: 14px; height: 14px" />
+                <span>最慢接口: {{ performanceMetrics.slowestApi.path }} ({{ performanceMetrics.slowestApi.time }}ms)</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 组件内部数据
+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) {
+        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/views/index/components/quickActions.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="section-block">
+        <div class="section-content">
+            <tiny-button type="primary" size="large" @click="handleClearCache">
+                <template #prefix>
+                    <i-lucide:rotate-cw style="width: 18px; height: 18px" />
+                </template>
+                刷新缓存
+            </tiny-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/views/index/components/serviceStatus.vue

@@ -0,0 +1,183 @@
+<template>
+    <div class="section-block">
+        <div class="section-header">
+            <i-lucide:settings style="width: 20px; height: 20px" />
+            <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">
+                        <i-lucide:database v-if="service.name === '数据库'" style="width: 20px; height: 20px" />
+                        <i-lucide:zap v-else-if="service.name === 'Redis'" style="width: 20px; height: 20px" />
+                        <i-lucide:hard-drive v-else-if="service.name === '文件系统'" style="width: 20px; height: 20px" />
+                        <i-lucide:mail v-else-if="service.name === '邮件服务'" style="width: 20px; height: 20px" />
+                        <i-lucide:cloud v-else-if="service.name === 'OSS存储'" style="width: 20px; height: 20px" />
+                        <i-lucide:circle 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">
+                        <i-lucide:check-circle v-if="service.status === 'running'" style="width: 32px; height: 32px" />
+                        <i-lucide:x-circle v-else-if="service.status === 'stopped'" style="width: 32px; height: 32px" />
+                        <i-lucide:alert-circle v-else-if="service.status === 'unconfigured'" style="width: 32px; height: 32px" />
+                        <i-lucide:circle v-else style="width: 32px; height: 32px" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 组件内部数据
+const services = $ref([]);
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http('/addon/admin/dashboard/serviceStatus');
+        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;
+};
+</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>