befly-admin-ui 1.10.18 → 1.10.19

package/views/index/components/performanceMetrics.vue

@@ -1,223 +0,0 @@
-<template>
-    <div class="section-block">
-        <div class="section-header flex items-center gap-2">
-            <ChartIcon />
-            <h2>性能指标</h2>
-        </div>
-        <div class="section-content">
-            <div class="performance-grid">
-                <div class="perf-metric">
-                    <div class="perf-info">
-                        <div class="perf-label">平均响应</div>
-                        <div class="perf-value">{{ $Data.performanceMetrics.avgResponseTime }}ms</div>
-                    </div>
-                </div>
-                <div class="perf-metric">
-                    <div class="perf-info">
-                        <div class="perf-label">QPS</div>
-                        <div class="perf-value">{{ $Data.performanceMetrics.qps }}/s</div>
-                    </div>
-                </div>
-                <div class="perf-metric">
-                    <div class="perf-info">
-                        <div class="perf-label">错误率</div>
-                        <div class="perf-value">{{ $Data.performanceMetrics.errorRate }}%</div>
-                    </div>
-                </div>
-                <div class="perf-metric">
-                    <div class="perf-info">
-                        <div class="perf-label">活跃请求</div>
-                        <div class="perf-value">{{ $Data.performanceMetrics.activeRequests }}</div>
-                    </div>
-                </div>
-            </div>
-            <!-- 最慢接口列表 -->
-            <div v-if="$Data.slowestApis.length > 0" class="perf-slowest">
-                <ErrorTriangleIcon />
-                <div class="perf-slowest-list">
-                    <div v-for="(item, index) in $Data.slowestApis" :key="`${item.path}-${index}`" class="perf-slowest-item">
-                        <span class="perf-slowest-rank">{{ index + 1 }}.</span>
-                        <span class="perf-slowest-path">{{ item.path }}</span>
-                        <span class="perf-slowest-time">{{ item.time }}ms</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ChartIcon, ErrorTriangleIcon } from "tdesign-icons-vue-next";
-import { reactive } from "vue";
-
-import { $Http } from "@/plugins/http.js";
-
-// 组件内部数据
-const $Data = reactive({
-    performanceMetrics: {
-        avgResponseTime: 0,
-        qps: 0,
-        errorRate: 0,
-        activeRequests: 0,
-        activeConnections: 0,
-        slowestApi: null,
-        slowestApis: []
-    },
-    slowestApis: []
-});
-
-const $Method = {
-    normalizeSlowestApis: function (resData) {
-        const apiList = [];
-
-        if (Array.isArray(resData?.slowestApis) && resData.slowestApis.length > 0) {
-            for (const item of resData.slowestApis) {
-                if (!item || !item.path) {
-                    continue;
-                }
-
-                apiList.push({
-                    path: String(item.path),
-                    time: Number(item.time || 0)
-                });
-            }
-        } else if (resData?.slowestApi?.path) {
-            apiList.push({
-                path: String(resData.slowestApi.path),
-                time: Number(resData.slowestApi.time || 0)
-            });
-        }
-
-        return apiList.slice(0, 3);
-    },
-    fetchData: async function () {
-        try {
-            const res = await $Http("/core/dashboard/performanceMetrics", {}, [""]);
-            Object.assign($Data.performanceMetrics, res.data);
-            $Data.performanceMetrics.activeRequests = Number(res.data?.activeRequests ?? res.data?.activeConnections ?? 0);
-            $Data.slowestApis = $Method.normalizeSlowestApis(res.data);
-        } catch (_error) {
-            // 静默失败：不阻断页面展示
-        }
-    }
-};
-
-$Method.fetchData();
-</script>
-
-<style scoped lang="scss">
-.performance-grid {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: 10px;
-    margin-bottom: 8px;
-
-    .perf-metric {
-        display: flex;
-        align-items: flex-start;
-        justify-content: center;
-        min-height: 92px;
-        padding: 14px;
-        background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.018), rgba(255, 255, 255, 0.96));
-        border-radius: 8px;
-        border: 1px solid rgba(0, 0, 0, 0.06);
-        transition: all 0.2s;
-
-        &:hover {
-            background: rgba(var(--primary-color-rgb), 0.05);
-            border-color: var(--primary-color);
-            box-shadow: 0 8px 18px rgba(31, 35, 41, 0.08);
-        }
-
-        .perf-info {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            gap: 4px;
-            flex: 1;
-            width: 100%;
-            min-width: 0;
-
-            .perf-label {
-                font-size: 12px;
-                color: var(--text-secondary);
-                line-height: 1.2;
-            }
-
-            .perf-value {
-                font-size: 22px;
-                font-weight: 700;
-                line-height: 1.1;
-                letter-spacing: -0.3px;
-                font-variant-numeric: tabular-nums;
-                color: var(--primary-color);
-            }
-        }
-    }
-}
-
-@media (max-width: 1200px) {
-    .performance-grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-}
-
-.perf-slowest {
-    display: flex;
-    align-items: flex-start;
-    gap: 6px;
-    padding: 8px 10px;
-    background: rgba(var(--warning-color-rgb), 0.05);
-    border-radius: 8px;
-    border: 1px solid rgba(var(--warning-color-rgb), 0.2);
-    font-size: 12px;
-    color: var(--warning-color);
-    word-break: break-word;
-
-    .perf-slowest-list {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        min-width: 0;
-    }
-
-    .perf-slowest-item {
-        display: flex;
-        align-items: baseline;
-        gap: 6px;
-        min-width: 0;
-    }
-
-    .perf-slowest-rank {
-        font-weight: 700;
-    }
-
-    .perf-slowest-path {
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        flex: 1;
-    }
-
-    .perf-slowest-time {
-        font-weight: 600;
-        font-variant-numeric: tabular-nums;
-    }
-}
-
-.warning-tip {
-    padding: var(--spacing-sm) var(--spacing-md);
-    background: rgba(var(--warning-color-rgb), 0.05);
-    border-radius: var(--border-radius-small);
-    border: 1px solid rgba(var(--warning-color-rgb), 0.2);
-    font-size: 14px;
-    color: var(--warning-color);
-}
-
-@media (max-width: 640px) {
-    .performance-grid {
-        grid-template-columns: 1fr;
-    }
-}
-</style>

package/views/index/components/quickActions.vue

@@ -1,30 +0,0 @@
-<template>
-    <div class="section-block">
-        <div class="section-content">
-            <TButton theme="primary" size="large" @click="handleClearCache">
-                <template #prefix>
-                    <RefreshIcon />
-                </template>
-                刷新缓存
-            </TButton>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { RefreshIcon } from "tdesign-icons-vue-next";
-import { Button as TButton } from "tdesign-vue-next";
-
-const handleClearCache = () => {
-    // TODO: 接入刷新缓存接口
-};
-</script>
-
-<style scoped lang="scss">
-.section-block {
-    .section-content {
-        display: flex;
-        justify-content: center;
-    }
-}
-</style>

package/views/index/components/systemNotifications.vue

@@ -1,139 +0,0 @@
-<template>
-    <div class="section-block">
-        <div class="section-header flex items-center gap-2">
-            <NotificationIcon />
-            <h2>系统通知</h2>
-        </div>
-        <div class="section-content">
-            <div class="notification-compact-list">
-                <div v-for="notification in $Const.notifications" :key="notification.id" class="notification-compact-item">
-                    <div class="notification-icon" :class="`type-${notification.type}`">
-                        <InfoCircleIcon v-if="notification.type === 'info'" />
-                        <CheckCircleIcon v-else-if="notification.type === 'success'" />
-                        <ErrorTriangleIcon v-else-if="notification.type === 'warning'" />
-                        <CloseCircleIcon v-else-if="notification.type === 'error'" />
-                        <NotificationIcon v-else />
-                    </div>
-                    <div class="notification-content">
-                        <span class="notification-title">{{ notification.title }}</span>
-                        <span class="notification-time">{{ $Method.formatTime(notification.createdAt) }}</span>
-                    </div>
-                    <TTag v-if="!notification.isRead" type="primary" size="small">新</TTag>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { CheckCircleIcon, CloseCircleIcon, ErrorTriangleIcon, InfoCircleIcon, NotificationIcon } from "tdesign-icons-vue-next";
-import { Tag as TTag } from "tdesign-vue-next";
-import { reactive } from "vue";
-
-// 组件内部数据
-const $Const = {
-    notifications: [
-        { 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 $Method = {
-    formatTime: function (timestamp) {
-        const date = new Date(timestamp);
-        const now = Date.now();
-        const diff = now - timestamp;
-
-        if (diff < 3600000) {
-            return `${Math.floor(diff / 60000)}分钟前`;
-        }
-        if (diff < 86400000) {
-            return `${Math.floor(diff / 3600000)}小时前`;
-        }
-
-        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: var(--spacing-xs);
-
-    .notification-compact-item {
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-sm);
-        padding: var(--spacing-sm) var(--spacing-md);
-        background: rgba(var(--primary-color-rgb), 0.02);
-        border-radius: var(--border-radius-small);
-        border: 1px solid var(--border-color);
-        transition: all 0.2s;
-
-        &:hover {
-            background: rgba(var(--primary-color-rgb), 0.05);
-            border-color: var(--primary-color);
-        }
-
-        .notification-icon {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 32px;
-            height: 32px;
-            border-radius: var(--border-radius-small);
-            flex-shrink: 0;
-
-            &.type-info {
-                background: rgba(var(--primary-color-rgb), 0.1);
-                color: var(--primary-color);
-            }
-
-            &.type-success {
-                background: rgba(var(--success-color-rgb), 0.1);
-                color: var(--success-color);
-            }
-
-            &.type-warning {
-                background: rgba(var(--warning-color-rgb), 0.1);
-                color: var(--warning-color);
-            }
-
-            &.type-error {
-                background: rgba(var(--error-color-rgb), 0.1);
-                color: var(--error-color);
-            }
-        }
-
-        .notification-content {
-            display: flex;
-            align-items: center;
-            gap: var(--spacing-sm);
-            flex: 1;
-            min-width: 0;
-
-            .notification-title {
-                font-size: 14px;
-                color: var(--text-primary);
-                font-weight: 500;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                flex: 1;
-            }
-
-            .notification-time {
-                font-size: 14px;
-                color: var(--text-placeholder);
-                flex-shrink: 0;
-            }
-        }
-    }
-}
-</style>

package/views/index/components/userInfo.vue

@@ -1,188 +0,0 @@
-<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>{{ $Method.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="$Method.handleRefreshCache">
-                <template #icon>
-                    <RefreshIcon />
-                </template>
-                刷新缓存
-            </TButton>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { CallIcon, MailIcon, RefreshIcon, TimeIcon, UserIcon } from "tdesign-icons-vue-next";
-import { Button as TButton, MessagePlugin } from "tdesign-vue-next";
-import { reactive } from "vue";
-
-import { $Http } from "@/plugins/http.js";
-
-// 响应式数据
-const $Data = reactive({
-    userInfo: {},
-    refreshing: false
-});
-
-const $Method = {
-    fetchData: async function () {
-        try {
-            const res = await $Http("/core/admin/detail", {}, [""]);
-            Object.assign($Data.userInfo, res.data);
-        } catch (error) {
-            MessagePlugin.error(error.msg || error.message || "获取用户信息失败");
-        }
-    },
-    handleRefreshCache: async function () {
-        try {
-            $Data.refreshing = true;
-            const result = await $Http("/core/admin/cacheRefresh");
-
-            const apis = result.data.apis;
-            const menus = result.data.menus;
-            const roles = result.data.roles;
-            const messages = [];
-
-            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("，")}`);
-        } catch (error) {
-            MessagePlugin.error(error.msg || error.message || "刷新缓存失败，请稍后重试");
-        } finally {
-            $Data.refreshing = false;
-        }
-    },
-    formatTime: function (timestamp) {
-        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()}日`;
-    }
-};
-
-$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 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>