befly-admin 3.0.1

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

@@ -0,0 +1,136 @@
+<template>
+    <div class="section-block">
+        <div class="section-header">
+            <Icon name="Bell" :size="20" />
+            <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}`">
+                        <Icon :name="getNotificationIcon(notification.type)" :size="16" />
+                    </div>
+                    <div class="notification-content">
+                        <span class="notification-title">{{ notification.title }}</span>
+                        <span class="notification-time">{{ formatTime(notification.createdAt) }}</span>
+                    </div>
+                    <t-tag v-if="!notification.isRead" theme="primary" size="small" variant="light">新</t-tag>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+// 组件内部数据
+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 getNotificationIcon = (type) => {
+    const iconMap = {
+        info: 'Info',
+        success: 'CheckCircle',
+        warning: 'AlertTriangle',
+        error: 'XCircle'
+    };
+    return iconMap[type] || 'Bell';
+};
+
+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/src/views/index/components/SystemOverview.vue

@@ -0,0 +1,188 @@
+<template>
+    <div class="section-block">
+        <div class="section-header">
+            <Icon name="Info" :size="20" />
+            <h2>系统概览</h2>
+        </div>
+        <div class="section-content">
+            <t-row :gutter="12">
+                <t-col :xs="24" :sm="12" :md="12" :lg="12">
+                    <div class="info-block">
+                        <div class="stats-grid">
+                            <div class="stat-box stat-primary">
+                                <Icon name="Menu" :size="24" />
+                                <div class="stat-content">
+                                    <div class="stat-value">{{ permissionStats.menuCount }}</div>
+                                    <div class="stat-label">菜单总数</div>
+                                </div>
+                            </div>
+                            <div class="stat-box stat-success">
+                                <Icon name="Webhook" :size="24" />
+                                <div class="stat-content">
+                                    <div class="stat-value">{{ permissionStats.apiCount }}</div>
+                                    <div class="stat-label">接口总数</div>
+                                </div>
+                            </div>
+                            <div class="stat-box stat-warning">
+                                <Icon name="Users" :size="24" />
+                                <div class="stat-content">
+                                    <div class="stat-value">{{ permissionStats.roleCount }}</div>
+                                    <div class="stat-label">角色总数</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </t-col>
+            </t-row>
+        </div>
+    </div>
+</template>
+
+<script setup>
+// 组件内部数据
+const permissionStats = $ref({
+    menuCount: 0,
+    apiCount: 0,
+    roleCount: 0
+});
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http('/addon/admin/dashboardSystemOverview');
+        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/src/views/index/components/SystemResources.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="section-block">
+        <div class="section-header">
+            <Icon name="Activity" :size="20" />
+            <h2>系统资源</h2>
+        </div>
+        <div class="section-content">
+            <div class="resource-compact-list">
+                <div class="resource-compact-item">
+                    <div class="resource-compact-header">
+                        <Icon name="Cpu" :size="16" />
+                        <span class="resource-label">CPU</span>
+                        <span class="resource-value">{{ systemResources.cpu.usage }}%</span>
+                        <span class="resource-desc">{{ systemResources.cpu.cores }}核心</span>
+                    </div>
+                    <t-progress :percentage="systemResources.cpu.usage" :theme="getProgressColor(systemResources.cpu.usage)" size="small" />
+                </div>
+                <div class="resource-compact-item">
+                    <div class="resource-compact-header">
+                        <Icon name="HardDrive" :size="16" />
+                        <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>
+                    <t-progress :percentage="systemResources.memory.percentage" :theme="getProgressColor(systemResources.memory.percentage)" size="small" />
+                </div>
+                <div class="resource-compact-item">
+                    <div class="resource-compact-header">
+                        <Icon name="Disc" :size="16" />
+                        <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>
+                    <t-progress :percentage="systemResources.disk.percentage" :theme="getProgressColor(systemResources.disk.percentage)" size="small" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+// 组件内部数据
+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/dashboardSystemResources');
+        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/src/views/index/components/UserInfo.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="section-block user-info-card">
+        <div class="user-header">
+            <div class="user-avatar">
+                <Icon name="User" :size="32" />
+            </div>
+            <div class="user-basic">
+                <div class="user-name">{{ userInfo.nickname || userInfo.name || userInfo.username || '未设置' }}</div>
+                <div class="user-role">{{ userInfo.role?.name || '普通用户' }}</div>
+            </div>
+        </div>
+        <div class="user-details">
+            <div class="detail-item">
+                <Icon name="Mail" :size="14" />
+                <span>{{ userInfo.email || '未设置' }}</span>
+            </div>
+            <div v-if="userInfo.phone" class="detail-item">
+                <Icon name="Phone" :size="14" />
+                <span>{{ userInfo.phone }}</span>
+            </div>
+            <div v-if="userInfo.lastLoginTime" class="detail-item">
+                <Icon name="Clock" :size="14" />
+                <span>{{ formatTime(userInfo.lastLoginTime) }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+// 组件内部数据
+const userInfo = $ref({});
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http('/addon/admin/adminInfo');
+        Object.assign(userInfo, data);
+    } catch (error) {
+        console.error('获取用户信息失败:', error);
+    }
+};
+
+// 格式化时间
+const 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()}日`;
+};
+
+fetchData();
+</script>
+
+<style scoped lang="scss">
+.user-info-card {
+    .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;
+            }
+        }
+    }
+}
+</style>

package/src/views/index/index.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="dashboard-container">
+        <div class="dashboard-left">
+            <SystemOverview />
+            <ServiceStatus />
+            <SystemResources />
+            <PerformanceMetrics />
+            <EnvironmentInfo />
+        </div>
+        <div class="dashboard-right">
+            <UserInfo />
+            <AddonList />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import SystemOverview from './components/SystemOverview.vue';
+import ServiceStatus from './components/ServiceStatus.vue';
+import UserInfo from './components/UserInfo.vue';
+import AddonList from './components/AddonList.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;
+    gap: 12px;
+    overflow: hidden;
+    height: 100%;
+
+    .dashboard-left {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        overflow-y: auto;
+        min-width: 0;
+    }
+
+    .dashboard-right {
+        width: 400px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        overflow-y: auto;
+        flex-shrink: 0;
+    }
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+        padding: 10px;
+        gap: 10px;
+
+        .dashboard-right {
+            width: 100%;
+        }
+    }
+}
+</style>