befly-admin-ui 1.8.14

package/views/index/components/systemOverview.vue

@@ -0,0 +1,194 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <InfoCircleIcon />
+            <h2>系统概览</h2>
+        </div>
+        <div class="section-content">
+            <div class="info-block">
+                <div class="stats-grid">
+                    <div class="stat-box stat-primary">
+                        <MenuIcon />
+                        <div class="stat-content">
+                            <div class="stat-value">{{ permissionStats.menuCount }}</div>
+                            <div class="stat-label">菜单总数</div>
+                        </div>
+                    </div>
+                    <div class="stat-box stat-success">
+                        <LinkIcon />
+                        <div class="stat-content">
+                            <div class="stat-value">{{ permissionStats.apiCount }}</div>
+                            <div class="stat-label">接口总数</div>
+                        </div>
+                    </div>
+                    <div class="stat-box stat-warning">
+                        <UsergroupIcon />
+                        <div class="stat-content">
+                            <div class="stat-value">{{ permissionStats.roleCount }}</div>
+                            <div class="stat-label">角色总数</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import { InfoCircleIcon, LinkIcon, MenuIcon, UsergroupIcon } from "tdesign-icons-vue-next";
+import { $Http } from "@/plugins/http";
+
+// 组件内部数据
+const permissionStats = reactive({
+    menuCount: 0,
+    apiCount: 0,
+    roleCount: 0
+});
+
+// 获取数据
+const fetchData = async () => {
+    try {
+        const { data } = await $Http.post(
+            "/core/dashboard/systemOverview",
+            {},
+            {
+                dropValues: [""]
+            }
+        );
+        Object.assign(permissionStats, data);
+    } catch (_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 var(--primary-color);
+
+        .info-title {
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--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(var(--primary-color-rgb), 0.02);
+            border-radius: var(--border-radius-small);
+            border: 1px solid var(--border-color);
+            transition: all 0.2s ease;
+
+            &:hover {
+                background: rgba(var(--primary-color-rgb), 0.05);
+                border-color: var(--primary-color);
+            }
+
+            .label {
+                font-size: 14px;
+                color: var(--text-secondary);
+                font-weight: 500;
+            }
+
+            .value {
+                font-size: 14px;
+                color: var(--text-primary);
+                font-weight: 600;
+
+                &.highlight {
+                    color: var(--primary-color);
+                }
+            }
+        }
+    }
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+
+    .stat-box {
+        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;
+        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);
+        }
+
+        .stat-content {
+            flex: 1;
+
+            .stat-value {
+                font-size: 20px;
+                font-weight: 700;
+                margin-bottom: 2px;
+            }
+
+            .stat-label {
+                font-size: 14px;
+                color: var(--text-secondary);
+            }
+        }
+
+        &.stat-primary {
+            border-color: var(--primary-color);
+            background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05), white);
+
+            .stat-value {
+                color: var(--primary-color);
+            }
+        }
+
+        &.stat-success {
+            border-color: var(--success-color);
+            background: linear-gradient(135deg, rgba(var(--success-color-rgb), 0.05), white);
+
+            .stat-value {
+                color: var(--success-color);
+            }
+        }
+
+        &.stat-warning {
+            border-color: var(--warning-color);
+            background: linear-gradient(135deg, rgba(var(--warning-color-rgb), 0.05), white);
+
+            .stat-value {
+                color: var(--warning-color);
+            }
+        }
+    }
+}
+</style>

package/views/index/components/systemResources.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <ChartIcon />
+            <h2>系统资源</h2>
+        </div>
+        <div class="section-content">
+            <div class="resource-compact-list">
+                <div class="resource-compact-item">
+                    <div class="resource-compact-header">
+                        <CpuIcon />
+                        <span class="resource-label">CPU</span>
+                        <span class="resource-value">{{ systemResources.cpu.usage }}%</span>
+                        <span class="resource-desc">{{ systemResources.cpu.cores }}核心</span>
+                    </div>
+                    <TProgress :percentage="systemResources.cpu.usage" :status="getProgressColor(systemResources.cpu.usage)" />
+                </div>
+                <div class="resource-compact-item">
+                    <div class="resource-compact-header">
+                        <SystemStorageIcon />
+                        <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>
+                    <TProgress :percentage="systemResources.memory.percentage" :status="getProgressColor(systemResources.memory.percentage)" />
+                </div>
+                <div class="resource-compact-item">
+                    <div class="resource-compact-header">
+                        <HardDiskStorageIcon />
+                        <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>
+                    <TProgress :percentage="systemResources.disk.percentage" :status="getProgressColor(systemResources.disk.percentage)" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import { Progress as TProgress } from "tdesign-vue-next";
+import { ChartIcon, CpuIcon, HardDiskStorageIcon, SystemStorageIcon } from "tdesign-icons-vue-next";
+import { $Http } from "@/plugins/http";
+
+type SystemResourcesInfo = {
+    cpu: { usage: number; cores: number };
+    memory: { used: number; total: number; percentage: number };
+    disk: { used: number; total: number; percentage: number };
+};
+
+// 组件内部数据
+const systemResources = reactive<SystemResourcesInfo>({
+    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.post(
+            "/core/dashboard/systemResources",
+            {},
+            {
+                dropValues: [""]
+            }
+        );
+        Object.assign(systemResources, data);
+    } catch (_error) {
+        // 静默失败：不阻断页面展示
+    }
+};
+
+fetchData();
+
+// 工具函数
+const getProgressColor = (percentage: number): string => {
+    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: var(--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: var(--text-secondary);
+                min-width: 50px;
+            }
+
+            .resource-value {
+                font-size: 16px;
+                font-weight: 700;
+                color: var(--primary-color);
+                min-width: 60px;
+            }
+
+            .resource-desc {
+                font-size: 14px;
+                color: var(--text-placeholder);
+                flex: 1;
+            }
+        }
+    }
+}
+</style>

package/views/index/components/userInfo.vue

@@ -0,0 +1,210 @@
+<template>
+    <div class="section-block user-info-card">
+        <div class="user-header">
+            <div class="user-avatar">
+                <UserIcon />
+            </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">
+                <MailIcon />
+                <span>{{ $Data.userInfo.email || "未设置" }}</span>
+            </div>
+            <div v-if="$Data.userInfo.phone" class="detail-item">
+                <CallIcon />
+                <span>{{ $Data.userInfo.phone }}</span>
+            </div>
+            <div v-if="$Data.userInfo.lastLoginTime" class="detail-item">
+                <TimeIcon />
+                <span>{{ formatTime($Data.userInfo.lastLoginTime) }}</span>
+            </div>
+        </div>
+
+        <!-- 仅 dev 角色显示刷新缓存按钮 -->
+        <div v-if="$Data.userInfo.roleCode === 'dev'" class="user-actions">
+            <TButton theme="primary" size="mini" :loading="$Data.refreshing" @click="handleRefreshCache">
+                <template #icon>
+                    <RefreshIcon />
+                </template>
+                刷新缓存
+            </TButton>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+import { Button as TButton, MessagePlugin } from "tdesign-vue-next";
+import { CallIcon, MailIcon, RefreshIcon, TimeIcon, UserIcon } from "tdesign-icons-vue-next";
+import { $Http } from "@/plugins/http";
+
+type UserInfo = {
+    nickname?: string;
+    name?: string;
+    username?: string;
+    role?: {
+        name?: string;
+    };
+    roleCode?: string;
+    email?: string;
+    phone?: string;
+    lastLoginTime?: number | string;
+};
+
+// 响应式数据
+const $Data = reactive({
+    userInfo: {} as UserInfo,
+    refreshing: false
+});
+
+async function fetchData(): Promise<void> {
+    try {
+        const { data } = await $Http.post(
+            "/core/admin/detail",
+            {},
+            {
+                dropValues: [""]
+            }
+        );
+        Object.assign($Data.userInfo, data as UserInfo);
+    } catch (_error) {
+        MessagePlugin.error("获取用户信息失败");
+    }
+}
+
+async function handleRefreshCache(): Promise<void> {
+    try {
+        $Data.refreshing = true;
+        const result = await $Http.post("/core/admin/cacheRefresh");
+
+        if (result.code === 0) {
+            const apis = result.data.apis;
+            const menus = result.data.menus;
+            const roles = result.data.roles;
+            const messages: string[] = [];
+
+            if (apis && apis.success) {
+                messages.push(`接口缓存: ${apis.count} 个`);
+            }
+            if (menus && menus.success) {
+                messages.push(`菜单缓存: ${menus.count} 个`);
+            }
+            if (roles && roles.success) {
+                messages.push(`角色缓存: ${roles.count} 个`);
+            }
+
+            MessagePlugin.success(`缓存刷新成功！${messages.join("，")}`);
+        } else {
+            MessagePlugin.warning(result.msg || "部分缓存刷新失败");
+        }
+    } catch (_error) {
+        MessagePlugin.error("刷新缓存失败，请稍后重试");
+    } finally {
+        $Data.refreshing = false;
+    }
+}
+
+function formatTime(timestamp: unknown): string {
+    if (!timestamp) return "";
+    const date = new Date(Number(timestamp));
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+
+    if (diff < 60000) {
+        return "刚刚";
+    }
+    if (diff < 3600000) {
+        return `${Math.floor(diff / 60000)}分钟前`;
+    }
+    if (diff < 86400000) {
+        return `${Math.floor(diff / 3600000)}小时前`;
+    }
+    if (diff < 604800000) {
+        return `${Math.floor(diff / 86400000)}天前`;
+    }
+    return `${date.getMonth() + 1}月${date.getDate()}日`;
+}
+
+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 var(--border-color);
+
+        .user-avatar {
+            width: 48px;
+            height: 48px;
+            background: linear-gradient(135deg, var(--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: var(--text-primary);
+                margin-bottom: 4px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .user-role {
+                font-size: 12px;
+                color: var(--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: var(--text-secondary);
+
+            span {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+    }
+
+    .user-actions {
+        margin-top: 16px;
+        padding-top: 12px;
+        border-top: 1px solid var(--border-color);
+        display: flex;
+        justify-content: center;
+    }
+}
+</style>

package/views/index/index.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="dashboard-container">
+        <!-- 第一行：系统概览（全宽） -->
+        <div class="dashboard-row full-width">
+            <SystemOverview />
+        </div>
+
+        <!-- 第二行：服务状态 + 系统资源 -->
+        <div class="dashboard-row two-columns">
+            <ServiceStatus />
+            <SystemResources />
+        </div>
+
+        <!-- 第三行：性能指标 + 环境信息 -->
+        <div class="dashboard-row two-columns">
+            <PerformanceMetrics />
+            <EnvironmentInfo />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+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: var(--layout-gap);
+    overflow-y: auto;
+    height: 100%;
+    padding: 0;
+
+    .dashboard-row {
+        display: flex;
+        gap: var(--layout-gap);
+
+        &.full-width {
+            > * {
+                flex: 1;
+            }
+        }
+
+        &.two-columns {
+            > * {
+                flex: 1;
+                min-width: 0;
+            }
+        }
+    }
+
+    // 每个组件都是独立的卡片
+    :deep(.section-block) {
+        background: var(--bg-color-container);
+        border-radius: var(--card-radius);
+        box-shadow: var(--shadow-1);
+        padding: var(--spacing-md);
+        border: none;
+        height: 100%;
+    }
+}
+</style>

package/views/jsconfig.json

@@ -0,0 +1,15 @@
+{
+    "extends": "../../../jsconfig.base.json",
+    "compilerOptions": {
+        "noEmit": true,
+        "verbatimModuleSyntax": true,
+        "allowJs": true,
+        "types": ["vite/client"],
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["../../admin/src/*"]
+        }
+    },
+    "include": ["**/*.vue", "**/*.js"],
+    "exclude": ["node_modules", "dist", "logs", "temp"]
+}