@befly-addon/admin 1.0.10 → 1.0.12

package/views/index/components/systemNotifications.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="section-block">
+        <div class="section-header">
+            <i-lucide:bell style="width: 20px; height: 20px" />
+            <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}`">
+                        <i-lucide:info v-if="notification.type === 'info'" style="width: 16px; height: 16px" />
+                        <i-lucide:check-circle v-else-if="notification.type === 'success'" style="width: 16px; height: 16px" />
+                        <i-lucide:alert-triangle v-else-if="notification.type === 'warning'" style="width: 16px; height: 16px" />
+                        <i-lucide:x-circle v-else-if="notification.type === 'error'" style="width: 16px; height: 16px" />
+                        <i-lucide:bell v-else style="width: 16px; height: 16px" />
+                    </div>
+                    <div class="notification-content">
+                        <span class="notification-title">{{ notification.title }}</span>
+                        <span class="notification-time">{{ formatTime(notification.createdAt) }}</span>
+                    </div>
+                    <tiny-tag v-if="!notification.isRead" type="primary" size="small">新</tiny-tag>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 组件内部数据
+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: $spacing-xs;
+
+    .notification-compact-item {
+        display: flex;
+        align-items: center;
+        gap: $spacing-sm;
+        padding: $spacing-sm $spacing-md;
+        background: rgba($primary-color, 0.02);
+        border-radius: $border-radius-small;
+        border: 1px solid $border-color;
+        transition: all 0.2s ease;
+
+        &:hover {
+            background: rgba($primary-color, 0.05);
+            border-color: $primary-color;
+        }
+
+        .notification-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 32px;
+            height: 32px;
+            border-radius: $border-radius-small;
+            flex-shrink: 0;
+
+            &.type-info {
+                background: rgba($primary-color, 0.1);
+                color: $primary-color;
+            }
+
+            &.type-success {
+                background: rgba($success-color, 0.1);
+                color: $success-color;
+            }
+
+            &.type-warning {
+                background: rgba($warning-color, 0.1);
+                color: $warning-color;
+            }
+
+            &.type-error {
+                background: rgba($error-color, 0.1);
+                color: $error-color;
+            }
+        }
+
+        .notification-content {
+            display: flex;
+            align-items: center;
+            gap: $spacing-sm;
+            flex: 1;
+            min-width: 0;
+
+            .notification-title {
+                font-size: 14px;
+                color: $text-primary;
+                font-weight: 500;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                flex: 1;
+            }
+
+            .notification-time {
+                font-size: 14px;
+                color: $text-placeholder;
+                flex-shrink: 0;
+            }
+        }
+    }
+}
+</style>

package/views/index/components/systemOverview.vue

@@ -0,0 +1,190 @@
+<template>
+    <div class="section-block">
+        <div class="section-header">
+            <i-lucide:info style="width: 20px; height: 20px" />
+            <h2>系统概览</h2>
+        </div>
+        <div class="section-content">
+            <tiny-row :flex="true" :gap="12">
+                <tiny-col :xs="24" :sm="12" :md="12" :lg="12">
+                    <div class="info-block">
+                        <div class="stats-grid">
+                            <div class="stat-box stat-primary">
+                                <i-lucide:menu style="width: 24px; height: 24px" />
+                                <div class="stat-content">
+                                    <div class="stat-value">{{ permissionStats.menuCount }}</div>
+                                    <div class="stat-label">菜单总数</div>
+                                </div>
+                            </div>
+                            <div class="stat-box stat-success">
+                                <i-lucide:webhook style="width: 24px; height: 24px" />
+                                <div class="stat-content">
+                                    <div class="stat-value">{{ permissionStats.apiCount }}</div>
+                                    <div class="stat-label">接口总数</div>
+                                </div>
+                            </div>
+                            <div class="stat-box stat-warning">
+                                <i-lucide:users style="width: 24px; height: 24px" />
+                                <div class="stat-content">
+                                    <div class="stat-value">{{ permissionStats.roleCount }}</div>
+                                    <div class="stat-label">角色总数</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </tiny-col>
+            </tiny-row>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 组件内部数据
+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) {
+        console.error('获取系统概览失败:', 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 $primary-color;
+
+        .info-title {
+            font-size: 14px;
+            font-weight: 600;
+            color: $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($primary-color, 0.02);
+            border-radius: $border-radius-small;
+            border: 1px solid $border-color;
+            transition: all 0.2s ease;
+
+            &:hover {
+                background: rgba($primary-color, 0.05);
+                border-color: $primary-color;
+            }
+
+            .label {
+                font-size: 14px;
+                color: $text-secondary;
+                font-weight: 500;
+            }
+
+            .value {
+                font-size: 14px;
+                color: $text-primary;
+                font-weight: 600;
+
+                &.highlight {
+                    color: $primary-color;
+                }
+            }
+        }
+    }
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+
+    .stat-box {
+        background: rgba($primary-color, 0.02);
+        border: 1px solid $border-color;
+        border-radius: 6px;
+        padding: 12px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        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);
+        }
+
+        .stat-content {
+            flex: 1;
+
+            .stat-value {
+                font-size: 20px;
+                font-weight: 700;
+                margin-bottom: 2px;
+            }
+
+            .stat-label {
+                font-size: 14px;
+                color: $text-secondary;
+            }
+        }
+
+        &.stat-primary {
+            border-color: $primary-color;
+            background: linear-gradient(135deg, rgba(0, 82, 217, 0.05), white);
+
+            .stat-value {
+                color: $primary-color;
+            }
+        }
+
+        &.stat-success {
+            border-color: $success-color;
+            background: linear-gradient(135deg, rgba(82, 196, 26, 0.05), white);
+
+            .stat-value {
+                color: $success-color;
+            }
+        }
+
+        &.stat-warning {
+            border-color: $warning-color;
+            background: linear-gradient(135deg, rgba(250, 173, 20, 0.05), white);
+
+            .stat-value {
+                color: $warning-color;
+            }
+        }
+    }
+}
+</style>

package/views/index/components/systemResources.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="section-block">
+        <div class="section-header">
+            <i-lucide:activity style="width: 20px; height: 20px" />
+            <h2>系统资源</h2>
+        </div>
+        <div class="section-content">
+            <div class="resource-compact-list">
+                <div class="resource-compact-item">
+                    <div class="resource-compact-header">
+                        <i-lucide:cpu style="width: 16px; height: 16px" />
+                        <span class="resource-label">CPU</span>
+                        <span class="resource-value">{{ systemResources.cpu.usage }}%</span>
+                        <span class="resource-desc">{{ systemResources.cpu.cores }}核心</span>
+                    </div>
+                    <tiny-progress :percentage="systemResources.cpu.usage" :status="getProgressColor(systemResources.cpu.usage)" />
+                </div>
+                <div class="resource-compact-item">
+                    <div class="resource-compact-header">
+                        <i-lucide:hard-drive style="width: 16px; height: 16px" />
+                        <span class="resource-label">内存</span>
+                        <span class="resource-value">{{ systemResources.memory.percentage }}%</span>
+                        <span class="resource-desc">{{ systemResources.memory.used }}GB / {{ systemResources.memory.total }}GB</span>
+                    </div>
+                    <tiny-progress :percentage="systemResources.memory.percentage" :status="getProgressColor(systemResources.memory.percentage)" />
+                </div>
+                <div class="resource-compact-item">
+                    <div class="resource-compact-header">
+                        <i-lucide:disc style="width: 16px; height: 16px" />
+                        <span class="resource-label">磁盘</span>
+                        <span class="resource-value">{{ systemResources.disk.percentage }}%</span>
+                        <span class="resource-desc">{{ systemResources.disk.used }}GB / {{ systemResources.disk.total }}GB</span>
+                    </div>
+                    <tiny-progress :percentage="systemResources.disk.percentage" :status="getProgressColor(systemResources.disk.percentage)" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 组件内部数据
+const systemResources = $ref({
+    cpu: { usage: 0, cores: 0 },
+    memory: { used: 0, total: 0, percentage: 0 },
+    disk: { used: 0, total: 0, percentage: 0 }
+});
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http('/addon/admin/dashboard/systemResources');
+        Object.assign(systemResources, data);
+    } catch (error) {
+        console.error('获取系统资源失败:', error);
+    }
+};
+
+fetchData();
+
+// 工具函数
+const getProgressColor = (percentage) => {
+    if (percentage < 50) return 'success';
+    if (percentage < 80) return 'warning';
+    return 'danger';
+};
+</script>
+
+<style scoped lang="scss">
+.resource-compact-list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: $spacing-md;
+
+    .resource-compact-item {
+        .resource-compact-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 8px;
+
+            .resource-label {
+                font-size: 14px;
+                font-weight: 600;
+                color: $text-secondary;
+                min-width: 50px;
+            }
+
+            .resource-value {
+                font-size: 16px;
+                font-weight: 700;
+                color: $primary-color;
+                min-width: 60px;
+            }
+
+            .resource-desc {
+                font-size: 14px;
+                color: $text-placeholder;
+                flex: 1;
+            }
+        }
+    }
+}
+</style>

package/views/index/components/userInfo.vue

@@ -0,0 +1,206 @@
+<template>
+    <div class="section-block user-info-card">
+        <div class="user-header">
+            <div class="user-avatar">
+                <i-lucide:user style="width: 32px; height: 32px" />
+            </div>
+            <div class="user-basic">
+                <div class="user-name">{{ $Data.userInfo.nickname || $Data.userInfo.name || $Data.userInfo.username || '未设置' }}</div>
+                <div class="user-role">{{ $Data.userInfo.role?.name || '普通用户' }}</div>
+            </div>
+        </div>
+        <div class="user-details">
+            <div class="detail-item">
+                <i-lucide:mail style="width: 14px; height: 14px" />
+                <span>{{ $Data.userInfo.email || '未设置' }}</span>
+            </div>
+            <div v-if="$Data.userInfo.phone" class="detail-item">
+                <i-lucide:phone style="width: 14px; height: 14px" />
+                <span>{{ $Data.userInfo.phone }}</span>
+            </div>
+            <div v-if="$Data.userInfo.lastLoginTime" class="detail-item">
+                <i-lucide:clock style="width: 14px; height: 14px" />
+                <span>{{ $Method.formatTime($Data.userInfo.lastLoginTime) }}</span>
+            </div>
+        </div>
+
+        <!-- 仅 dev 角色显示刷新缓存按钮 -->
+        <div v-if="$Data.userInfo.roleCode === 'dev'" class="user-actions">
+            <tiny-button type="primary" size="mini" :loading="$Data.refreshing" @click="$Method.handleRefreshCache">
+                <template #icon>
+                    <i-lucide:rotate-cw style="width: 14px; height: 14px" />
+                </template>
+                刷新缓存
+            </tiny-button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 响应式数据
+const $Data = $ref({
+    userInfo: {},
+    refreshing: false
+});
+
+// 方法集合
+const $Method = {
+    // 获取数据
+    async fetchData() {
+        try {
+            const { data } = await $Http('/addon/admin/admin/info');
+            Object.assign($Data.userInfo, data);
+        } catch (error) {
+            console.error('获取用户信息失败:', error);
+        }
+    },
+
+    // 刷新缓存
+    async handleRefreshCache() {
+        try {
+            $Data.refreshing = true;
+            const result = await $Http('/addon/admin/admin/cacheRefresh');
+
+            if (result.code === 0) {
+                const { apis, menus, roles } = result.data;
+                const messages = [];
+
+                if (apis.success) {
+                    messages.push(`接口缓存: ${apis.count} 个`);
+                }
+                if (menus.success) {
+                    messages.push(`菜单缓存: ${menus.count} 个`);
+                }
+                if (roles.success) {
+                    messages.push(`角色缓存: ${roles.count} 个`);
+                }
+
+                TinyMessage.success({
+                    message: `缓存刷新成功！${messages.join('，')}`,
+                    duration: 3000
+                });
+            } else {
+                TinyMessage.warning({
+                    message: result.msg || '部分缓存刷新失败',
+                    duration: 3000
+                });
+            }
+        } catch (error) {
+            console.error('刷新缓存失败:', error);
+            TinyMessage.error({
+                message: '刷新缓存失败，请稍后重试',
+                duration: 3000
+            });
+        } finally {
+            $Data.refreshing = false;
+        }
+    },
+
+    // 格式化时间
+    formatTime(timestamp) {
+        if (!timestamp) return '';
+        const date = new Date(Number(timestamp));
+        const now = new Date();
+        const diff = now - date;
+
+        // 小于1分钟
+        if (diff < 60000) {
+            return '刚刚';
+        }
+        // 小于1小时
+        if (diff < 3600000) {
+            return `${Math.floor(diff / 60000)}分钟前`;
+        }
+        // 小于24小时
+        if (diff < 86400000) {
+            return `${Math.floor(diff / 3600000)}小时前`;
+        }
+        // 小于7天
+        if (diff < 604800000) {
+            return `${Math.floor(diff / 86400000)}天前`;
+        }
+        // 超过7天显示具体日期
+        return `${date.getMonth() + 1}月${date.getDate()}日`;
+    }
+};
+
+// 初始化
+$Method.fetchData();
+</script>
+
+<style scoped lang="scss">
+.user-info-card {
+    background-color: #fff;
+    padding: 15px;
+    .user-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding-bottom: 12px;
+        border-bottom: 1px solid $border-color;
+
+        .user-avatar {
+            width: 48px;
+            height: 48px;
+            background: linear-gradient(135deg, $primary-color, #764ba2);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            flex-shrink: 0;
+        }
+
+        .user-basic {
+            flex: 1;
+            min-width: 0;
+
+            .user-name {
+                font-size: 16px;
+                font-weight: 600;
+                color: $text-primary;
+                margin-bottom: 4px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .user-role {
+                font-size: 12px;
+                color: $text-secondary;
+            }
+        }
+    }
+
+    .user-details {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-top: 12px;
+
+        .detail-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 12px;
+            color: $text-secondary;
+
+            span {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+    }
+
+    .user-actions {
+        margin-top: 16px;
+        padding-top: 12px;
+        border-top: 1px solid $border-color;
+        display: flex;
+        justify-content: center;
+    }
+}
+</style>

package/views/index/index.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="dashboard-container">
+        <SystemOverview />
+        <ServiceStatus />
+        <SystemResources />
+        <PerformanceMetrics />
+        <EnvironmentInfo />
+    </div>
+</template>
+
+<script setup>
+import SystemOverview from './components/systemOverview.vue';
+import ServiceStatus from './components/serviceStatus.vue';
+import SystemResources from './components/systemResources.vue';
+import PerformanceMetrics from './components/performanceMetrics.vue';
+import EnvironmentInfo from './components/environmentInfo.vue';
+</script>
+
+<style scoped lang="scss">
+.dashboard-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    overflow-y: auto;
+    height: 100%;
+    background-color: #fff;
+    padding: 15px;
+}
+</style>