befly-admin-ui 1.10.18 → 1.11.0

package/views/index/components/systemResources.vue

@@ -5,35 +5,46 @@
             <h2>系统资源</h2>
         </div>
         <div class="section-content">
-            <div class="resource-compact-list">
-                <div class="resource-compact-item">
-                    <div class="resource-compact-header">
-                        <span class="resource-label">CPU</span>
-                        <span class="resource-value">{{ $Data.systemResources.cpu.usage }}%</span>
-                        <span class="resource-desc">{{ $Data.systemResources.cpu.cores }}核心</span>
+            <t-row :gutter="[16, 16]" class="dashboard-card-row">
+                <t-col :span="2" class="dashboard-card-col">
+                    <div class="dashboard-card">
+                        <div class="dashboard-card-content">
+                            <span class="dashboard-card-label">CPU</span>
+                            <div class="dashboard-card-value-row">
+                                <span class="dashboard-card-main dashboard-card-main--muted">{{ $Data.systemResources.cpu.cores }}核心</span>
+                                <span class="dashboard-card-accent">{{ $Data.systemResources.cpu.usage }}%</span>
+                            </div>
+                        </div>
                     </div>
-                </div>
-                <div class="resource-compact-item">
-                    <div class="resource-compact-header">
-                        <span class="resource-label">内存</span>
-                        <span class="resource-value">{{ $Data.systemResources.memory.percentage }}%</span>
-                        <span class="resource-desc">{{ $Data.systemResources.memory.used }}GB / {{ $Data.systemResources.memory.total }}GB</span>
+                </t-col>
+                <t-col :span="2" class="dashboard-card-col">
+                    <div class="dashboard-card">
+                        <div class="dashboard-card-content">
+                            <span class="dashboard-card-label">内存</span>
+                            <div class="dashboard-card-value-row">
+                                <span class="dashboard-card-main dashboard-card-main--muted">{{ $Data.systemResources.memory.used }}GB / {{ $Data.systemResources.memory.total }}GB</span>
+                                <span class="dashboard-card-accent">{{ $Data.systemResources.memory.percentage }}%</span>
+                            </div>
+                        </div>
                     </div>
-                </div>
-                <div class="resource-compact-item">
-                    <div class="resource-compact-header">
-                        <span class="resource-label">磁盘</span>
-                        <span class="resource-value">{{ $Data.systemResources.disk.percentage }}%</span>
-                        <span class="resource-desc">{{ $Data.systemResources.disk.used }}GB / {{ $Data.systemResources.disk.total }}GB</span>
+                </t-col>
+                <t-col :span="2" class="dashboard-card-col">
+                    <div class="dashboard-card">
+                        <div class="dashboard-card-content">
+                            <span class="dashboard-card-label">磁盘</span>
+                            <div class="dashboard-card-value-row">
+                                <span class="dashboard-card-main dashboard-card-main--muted">{{ $Data.systemResources.disk.used }}GB / {{ $Data.systemResources.disk.total }}GB</span>
+                                <span class="dashboard-card-accent">{{ $Data.systemResources.disk.percentage }}%</span>
+                            </div>
+                        </div>
                     </div>
-                </div>
-            </div>
+                </t-col>
+            </t-row>
         </div>
     </div>
 </template>
 
 <script setup>
-import { ChartIcon } from "tdesign-icons-vue-next";
 import { reactive } from "vue";
 
 import { $Http } from "@/plugins/http.js";
@@ -62,79 +73,9 @@ $Method.fetchData();
 </script>
 
 <style scoped lang="scss">
-.resource-compact-list {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 10px;
+@use "../../../styles/dashboardCard.scss" as dashboardCard;
 
-    .resource-compact-item {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        min-width: 0;
-        min-height: 92px;
-        padding: 14px;
-        border-radius: 8px;
-        border: 1px solid rgba(0, 0, 0, 0.06);
-        background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.018), rgba(255, 255, 255, 0.96));
-        transition: all 0.2s ease;
-
-        &: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);
-        }
-
-        .resource-compact-header {
-            display: flex;
-            align-items: baseline;
-            flex-wrap: wrap;
-            gap: 10px;
-            row-gap: 4px;
-
-            .resource-label {
-                font-size: 14px;
-                font-weight: 600;
-                color: var(--text-secondary);
-                min-width: 36px;
-                line-height: 1.2;
-            }
-
-            .resource-value {
-                font-size: 22px;
-                font-weight: 700;
-                line-height: 1.1;
-                letter-spacing: -0.3px;
-                font-variant-numeric: tabular-nums;
-                color: var(--primary-color);
-                min-width: 48px;
-            }
-
-            .resource-desc {
-                font-size: 12px;
-                color: var(--text-placeholder);
-                flex: 0 0 100%;
-                width: 100%;
-                margin-top: 2px;
-                padding-left: 0;
-                line-height: 1.3;
-                min-width: 0;
-                word-break: break-word;
-            }
-        }
-    }
-}
-
-@media (max-width: 1200px) {
-    .resource-compact-list {
-        grid-template-columns: 1fr;
-    }
-}
-
-@media (max-width: 640px) {
-    .resource-compact-list {
-        grid-template-columns: 1fr;
-        gap: var(--spacing-sm);
-    }
+.dashboard-card-row {
+    @include dashboardCard.dashboardCardStandard();
 }
 </style>

package/views/index/index.vue

@@ -1,27 +1,30 @@
 <template>
     <div class="dashboard-container">
-        <!-- 第一行：系统概览（全宽） -->
         <div class="dashboard-row full-width">
             <SystemOverview />
         </div>
 
-        <!-- 第二行：服务状态 + 系统资源 -->
-        <div class="dashboard-row two-columns">
+        <div class="dashboard-row full-width">
             <ServiceStatus />
+        </div>
+
+        <div class="dashboard-row full-width">
             <SystemResources />
         </div>
 
-        <!-- 第三行：性能指标 + 环境信息 -->
-        <div class="dashboard-row two-columns">
-            <PerformanceMetrics />
+        <div class="dashboard-row full-width">
             <EnvironmentInfo />
         </div>
+
+        <div class="dashboard-row full-width">
+            <ProjectStats />
+        </div>
     </div>
 </template>
 
 <script setup>
 import EnvironmentInfo from "./components/environmentInfo.vue";
-import PerformanceMetrics from "./components/performanceMetrics.vue";
+import ProjectStats from "./components/projectStats.vue";
 import ServiceStatus from "./components/serviceStatus.vue";
 import SystemOverview from "./components/systemOverview.vue";
 import SystemResources from "./components/systemResources.vue";

package/views/log/email/index.vue

@@ -74,8 +74,7 @@ import DetailPanel from "befly-admin-ui/components/detailPanel.vue";
 import PageDialog from "befly-admin-ui/components/pageDialog.vue";
 import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
-import { CheckCircleIcon, SendIcon } from "tdesign-icons-vue-next";
-import { Button as TButton, Form as TForm, FormItem as TFormItem, Input as TInput, MessagePlugin, Tag as TTag, Textarea as TTextarea } from "tdesign-vue-next";
+import { MessagePlugin } from "tdesign-vue-next";
 import { reactive } from "vue";
 
 import { $Http } from "@/plugins/http.js";

package/views/log/error/index.vue

@@ -94,8 +94,7 @@
 import DetailPanel from "befly-admin-ui/components/detailPanel.vue";
 import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
-import { SearchIcon } from "tdesign-icons-vue-next";
-import { Button as TButton, Input as TInput, MessagePlugin, Option as TOption, Select as TSelect, Tag as TTag } from "tdesign-vue-next";
+import { MessagePlugin } from "tdesign-vue-next";
 import { reactive } from "vue";
 
 const $Data = reactive({

package/views/log/login/index.vue

@@ -34,7 +34,6 @@
 import DetailPanel from "befly-admin-ui/components/detailPanel.vue";
 import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
-import { Tag as TTag } from "tdesign-vue-next";
 import { reactive } from "vue";
 
 // 响应式数据

package/views/log/operate/index.vue

@@ -57,7 +57,6 @@
 import DetailPanel from "befly-admin-ui/components/detailPanel.vue";
 import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
-import { Option as TOption, Select as TSelect, Tag as TTag } from "tdesign-vue-next";
 import { reactive } from "vue";
 
 // 响应式数据

package/views/login_1/index.vue

@@ -75,8 +75,7 @@
 
 <script setup>
 import { hashPassword } from "befly-admin-ui/utils/hashPassword";
-import { LockOnIcon, UserIcon } from "tdesign-icons-vue-next";
-import { Form as TForm, FormItem as TFormItem, Input as TInput, Button as TButton, Checkbox as TCheckbox, InputAdornment as TInputAdornment, Select as TSelect, Option as TOption, MessagePlugin } from "tdesign-vue-next";
+import { MessagePlugin } from "tdesign-vue-next";
 import { reactive } from "vue";
 import { useRouter } from "vue-router";
 

package/views/people/admin/components/edit.vue

@@ -30,12 +30,6 @@ import { fieldClear } from "befly-admin-ui/utils/fieldClear";
 import { hashPassword } from "befly-admin-ui/utils/hashPassword";
 import {
     //
-    Form as TForm,
-    FormItem as TFormItem,
-    Input as TInput,
-    Select as TSelect,
-    RadioGroup as TRadioGroup,
-    Radio as TRadio,
     MessagePlugin
 } from "tdesign-vue-next";
 import { computed, reactive } from "vue";

package/views/people/admin/index.vue

@@ -42,8 +42,6 @@
 <script setup>
 import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
-import { AddIcon, ChevronDownIcon, DeleteIcon, EditIcon } from "tdesign-icons-vue-next";
-import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Tag as TTag } from "tdesign-vue-next";
 import { reactive } from "vue";
 
 import EditDialog from "./components/edit.vue";

package/views/permission/api/index.vue

@@ -54,8 +54,7 @@
 <script setup>
 import DetailPanel from "befly-admin-ui/components/detailPanel.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
-import { SearchIcon } from "tdesign-icons-vue-next";
-import { Table as TTable, Tag as TTag, Input as TInput, MessagePlugin } from "tdesign-vue-next";
+import { MessagePlugin } from "tdesign-vue-next";
 import { reactive } from "vue";
 
 import { $Http } from "@/plugins/http.js";

package/views/permission/menu/index.vue

@@ -32,7 +32,7 @@
 import DetailPanel from "befly-admin-ui/components/detailPanel.vue";
 import { arrayToTree } from "befly-admin-ui/utils/arrayToTree";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
-import { Table as TTable, Tag as TTag, MessagePlugin } from "tdesign-vue-next";
+import { MessagePlugin } from "tdesign-vue-next";
 import { reactive } from "vue";
 
 import { $Http } from "@/plugins/http.js";

package/views/permission/role/components/api.vue

@@ -33,8 +33,7 @@
 
 <script setup>
 import PageDialog from "befly-admin-ui/components/pageDialog.vue";
-import { SearchIcon } from "tdesign-icons-vue-next";
-import { Input as TInput, CheckboxGroup as TCheckboxGroup, Checkbox as TCheckbox, MessagePlugin } from "tdesign-vue-next";
+import { MessagePlugin } from "tdesign-vue-next";
 import { computed, reactive } from "vue";
 
 import { $Http } from "@/plugins/http.js";

package/views/permission/role/components/edit.vue

@@ -40,12 +40,6 @@ import PageDialog from "befly-admin-ui/components/pageDialog.vue";
 import { fieldClear } from "befly-admin-ui/utils/fieldClear";
 import {
     //
-    Form as TForm,
-    FormItem as TFormItem,
-    Input as TInput,
-    InputNumber as TInputNumber,
-    RadioGroup as TRadioGroup,
-    Radio as TRadio,
     MessagePlugin
 } from "tdesign-vue-next";
 import { computed, reactive, ref } from "vue";

package/views/permission/role/components/menu.vue

@@ -35,8 +35,7 @@
 <script setup>
 import PageDialog from "befly-admin-ui/components/pageDialog.vue";
 import { arrayToTree } from "befly-admin-ui/utils/arrayToTree";
-import { SearchIcon } from "tdesign-icons-vue-next";
-import { CheckboxGroup as TCheckboxGroup, Checkbox as TCheckbox, Input as TInput, MessagePlugin } from "tdesign-vue-next";
+import { MessagePlugin } from "tdesign-vue-next";
 import { computed, reactive } from "vue";
 
 import { $Http } from "@/plugins/http.js";

package/views/permission/role/index.vue

@@ -65,8 +65,6 @@
 <script setup>
 import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
-import { AddIcon, ChevronDownIcon, CodeIcon, DeleteIcon, EditIcon, SettingIcon } from "tdesign-icons-vue-next";
-import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Tag as TTag } from "tdesign-vue-next";
 import { reactive } from "vue";
 
 import ApiDialog from "./components/api.vue";

package/views/resource/gallery/index.vue

@@ -79,8 +79,7 @@
 import DetailPanel from "befly-admin-ui/components/detailPanel.vue";
 import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
-import { SearchIcon, UploadIcon } from "tdesign-icons-vue-next";
-import { Button as TButton, Image as TImage, Input as TInput, MessagePlugin, Tag as TTag, Upload as TUpload } from "tdesign-vue-next";
+import { MessagePlugin } from "tdesign-vue-next";
 import { reactive } from "vue";
 
 import { $Config } from "@/plugins/config.js";

package/views/index/components/addonList.vue

@@ -1,140 +0,0 @@
-<template>
-    <div class="section-block">
-        <div class="section-header flex items-center gap-2">
-            <MenuIcon />
-            <h2>已安装插件</h2>
-        </div>
-        <div class="section-content">
-            <div class="addon-list">
-                <div v-for="addon in $Data.addonList" :key="addon.name" class="addon-item">
-                    <div class="addon-icon">
-                        <SystemStorageIcon />
-                    </div>
-                    <div class="addon-info">
-                        <div class="addon-title">
-                            <span class="addon-name">{{ addon.title }}</span>
-                            <t-tag type="success" size="small">{{ addon.version }}</t-tag>
-                        </div>
-                        <div class="addon-desc">{{ addon.description }}</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { MenuIcon, SystemStorageIcon } from "tdesign-icons-vue-next";
-import { Tag as TTag } from "tdesign-vue-next";
-import { reactive } from "vue";
-
-import { $Http } from "@/plugins/http.js";
-
-// 组件内部数据
-const $Data = reactive({
-    addonList: []
-});
-
-const $Method = {
-    fetchData: async function () {
-        try {
-            const res = await $Http("/core/dashboard/addonList", {}, [""]);
-            $Data.addonList.splice(0, $Data.addonList.length, ...res.data);
-        } catch (_error) {
-            // 静默失败：不阻断页面展示
-        }
-    }
-};
-
-$Method.fetchData();
-</script>
-
-<style scoped lang="scss">
-.addon-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    .addon-item {
-        position: relative;
-        background: var(--bg-color-container);
-        border: 1px solid var(--border-color);
-        border-left: 3px solid var(--primary-color);
-        border-radius: var(--border-radius-small);
-        padding: 10px 12px;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        transition: all 0.3s;
-
-        &:hover {
-            border-left-color: var(--success-color);
-            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
-            transform: translateY(-2px);
-        }
-
-        .addon-status-badge {
-            position: absolute;
-            top: 8px;
-            right: 8px;
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: var(--text-disabled);
-            transition: all 0.3s;
-
-            &::after {
-                content: "";
-                position: absolute;
-                top: -2px;
-                right: -2px;
-                width: 8px;
-                height: 8px;
-                border-radius: 50%;
-                background: var(--success-color);
-                box-shadow: 0 0 0 2px rgba(var(--success-color-rgb), 0.2);
-            }
-        }
-
-        .addon-icon {
-            width: 32px;
-            height: 32px;
-            background: linear-gradient(135deg, var(--primary-color), #764ba2);
-            border-radius: var(--border-radius-small);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            flex-shrink: 0;
-        }
-
-        .addon-info {
-            flex: 1;
-            min-width: 0;
-            padding-right: 16px;
-
-            .addon-title {
-                display: flex;
-                align-items: center;
-                gap: 6px;
-                margin-bottom: 2px;
-
-                .addon-name {
-                    font-size: 14px;
-                    font-weight: 600;
-                    color: var(--text-primary);
-                }
-            }
-
-            .addon-desc {
-                font-size: 14px;
-                color: var(--text-secondary);
-                line-height: 1.3;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-        }
-    }
-}
-</style>

package/views/index/components/operationLogs.vue

@@ -1,120 +0,0 @@
-<template>
-    <div class="section-block">
-        <div class="section-header flex items-center gap-2">
-            <CodeIcon />
-            <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 $Const.operationLogs" :key="log.id" class="operation-row">
-                        <span class="col-time">{{ $Method.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">
-                            <t-tag :type="log.status === 'success' ? 'success' : 'danger'" size="small">
-                                {{ log.status === "success" ? "成功" : "失败" }}
-                            </t-tag>
-                        </span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { CodeIcon } from "tdesign-icons-vue-next";
-import { Tag as TTag } from "tdesign-vue-next";
-import { reactive } from "vue";
-
-// 组件内部数据
-const $Const = {
-    operationLogs: [
-        { 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 $Method = {
-    formatTime: function (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(var(--primary-color-rgb), 0.05) 0%, rgba(var(--primary-color-rgb), 0.02) 100%);
-        border-radius: 6px;
-        font-size: 14px;
-        font-weight: 600;
-        color: var(--text-secondary);
-        margin-bottom: 6px;
-    }
-
-    .operation-body {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-    }
-
-    .operation-row {
-        padding: 6px 12px;
-        background: var(--bg-color-container);
-        border-radius: 6px;
-        border: 1px solid var(--border-color);
-        font-size: 14px;
-        transition: all 0.2s ease;
-
-        &:hover {
-            background: rgba(var(--primary-color-rgb), 0.02);
-            border-color: rgba(var(--primary-color-rgb), 0.2);
-        }
-
-        .col-time {
-            color: var(--text-secondary);
-            font-size: 14px;
-        }
-
-        .col-user,
-        .col-action,
-        .col-module,
-        .col-ip {
-            color: var(--text-primary);
-        }
-
-        .col-action {
-            font-weight: 600;
-        }
-    }
-}
-</style>