befly-admin-ui 1.10.17 → 1.10.19

package/README.md

@@ -14,7 +14,8 @@
 
 - 仅使用 `tdesign-icons-vue-next` 的组件形式（如 `<AddIcon />`），禁止 `<Icon name="..." />`。
 - 统一使用 **outline** 风格：不要使用 `*FilledIcon`。
-- 图标必须显式导入（adminUI 视图不依赖自动导入）。
+- `packages/adminUI/**/*.vue` 可直接依赖 befly-vite 的自动注册：TDesign 组件和 `*Icon` 不再手动导入。
+- `MessagePlugin`、`DialogPlugin` 等非组件 API 仍需显式导入。
 - 已验证存在性（基于 `tdesign-icons-vue-next/esm/icons.d.ts`）的当前使用清单：
 
 `AddIcon`, `CallIcon`, `ChartIcon`, `CheckCircleIcon`, `ChevronDownIcon`, `CircleIcon`, `CloseCircleIcon`, `CloudIcon`, `CodeIcon`, `CpuIcon`, `DataBaseIcon`, `DeleteIcon`, `EditIcon`, `ErrorCircleIcon`, `ErrorTriangleIcon`, `HardDiskStorageIcon`, `InfoCircleIcon`, `LightingCircleIcon`, `LinkIcon`, `LockOnIcon`, `MailIcon`, `MenuIcon`, `NotificationIcon`, `RefreshIcon`, `SearchIcon`, `SendIcon`, `ServerIcon`, `SettingIcon`, `SystemStorageIcon`, `TimeIcon`, `TrendingUpIcon`, `UsergroupIcon`, `UserIcon`

package/components/detailPanel.vue

@@ -31,7 +31,6 @@
 </template>
 
 <script setup>
-import { Tag as TTag } from "tdesign-vue-next";
 import { computed, reactive } from "vue";
 
 import { formatFieldValue } from "../utils/formatFieldValue.js";

package/components/pageDialog.vue

@@ -28,7 +28,6 @@
 </template>
 
 <script setup>
-import { Button as TButton, Dialog as TDialog } from "tdesign-vue-next";
 import { onBeforeUnmount, onMounted, reactive, watch } from "vue";
 
 defineOptions({

package/components/pageTableDetail.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script setup>
-import { DialogPlugin, MessagePlugin, Pagination as TPagination, Table as TTable } from "tdesign-vue-next";
+import { DialogPlugin, MessagePlugin } from "tdesign-vue-next";
 import { computed, onMounted, reactive, useSlots } from "vue";
 
 import { $Http } from "@/plugins/http.js";

package/layouts/default.vue

@@ -101,8 +101,7 @@
 import PageDialog from "befly-admin-ui/components/pageDialog.vue";
 import { arrayToTree } from "befly-admin-ui/utils/arrayToTree";
 import { hashPassword } from "befly-admin-ui/utils/hashPassword";
-import { AppIcon, ChevronDownIcon, CloseCircleIcon, ControlPlatformIcon, HomeIcon, LockOnIcon, UserIcon } from "tdesign-icons-vue-next";
-import { DialogPlugin, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Form as TForm, FormItem as TFormItem, Input as TInput, Menu as TMenu, MenuItem as TMenuItem, MessagePlugin, Submenu as TSubmenu } from "tdesign-vue-next";
+import { DialogPlugin, MessagePlugin } from "tdesign-vue-next";
 import { reactive, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "befly-admin-ui",
-    "version": "1.10.17",
+    "version": "1.10.19",
     "gitHead": "071d17be177355cdd61f30659c6e4c5873f87d39",
     "private": false,
     "description": "Befly - 管理后台功能组件",
@@ -49,7 +49,7 @@
     "dependencies": {
         "tdesign-icons-vue-next": "^0.4.4",
         "tdesign-vue-next": "^1.20.0",
-        "vue": "^3.5.34",
+        "vue": "^3.5.35",
         "vue-router": "^5.0.7"
     }
 }

package/styles/dashboardCard.scss

@@ -0,0 +1,228 @@
+@mixin dashboardCardCol($className) {
+    :deep(.#{$className}) {
+        min-width: 0;
+    }
+}
+
+@mixin dashboardCardShell() {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    min-width: 0;
+    min-height: 84px;
+    padding: 12px;
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--card-radius);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.018), rgba(255, 255, 255, 0.96));
+    box-shadow: 0 4px 14px rgba(31, 35, 41, 0.04);
+    transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease,
+        background 0.2s ease,
+        border-color 0.2s ease;
+
+    &:hover {
+        background: rgba(var(--primary-color-rgb), 0.05);
+        border-color: rgba(0, 0, 0, 0.12);
+        box-shadow: 0 8px 20px rgba(31, 35, 41, 0.08);
+        transform: translateY(-2px);
+    }
+}
+
+@mixin dashboardCardContent($gap: 4px) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: $gap;
+    width: 100%;
+    min-width: 0;
+}
+
+@mixin dashboardCardTwoLine($gap: 8px) {
+    @include dashboardCardContent($gap);
+}
+
+@mixin dashboardCardValueRow($gap: 10px) {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: $gap;
+    width: 100%;
+    min-width: 0;
+}
+
+@mixin dashboardCardTitle() {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    line-height: 1.2;
+}
+
+@mixin dashboardCardLabel() {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-primary);
+    line-height: 1.2;
+}
+
+@mixin dashboardCardNumericValue($color: var(--primary-color)) {
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 1.1;
+    letter-spacing: -0.3px;
+    font-variant-numeric: tabular-nums;
+    color: $color;
+}
+
+@mixin dashboardCardTextValue($fontSize: 14px, $color: var(--text-primary)) {
+    font-size: $fontSize;
+    font-weight: 600;
+    line-height: 1.35;
+    color: $color;
+    min-width: 0;
+    width: 100%;
+    word-break: break-word;
+}
+
+@mixin dashboardCardMainValue($fontSize: 16px, $color: var(--text-primary), $fontWeight: 700) {
+    font-size: $fontSize;
+    font-weight: $fontWeight;
+    line-height: 1.25;
+    color: $color;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@mixin dashboardCardAccentValue($color: var(--primary-color)) {
+    @include dashboardCardNumericValue($color);
+
+    flex: 0 0 auto;
+    white-space: nowrap;
+}
+
+@mixin dashboardCardMeta($color: var(--text-placeholder)) {
+    font-size: 12px;
+    color: $color;
+    line-height: 1.3;
+    min-width: 0;
+    word-break: break-word;
+}
+
+@mixin dashboardCardStandard($colClass: "dashboard-card-col") {
+    @include dashboardCardCol($colClass);
+
+    .dashboard-card {
+        @include dashboardCardShell();
+
+        align-items: flex-start;
+    }
+
+    .dashboard-card-content {
+        @include dashboardCardTwoLine();
+
+        flex: 1;
+    }
+
+    .dashboard-card-label {
+        @include dashboardCardLabel();
+    }
+
+    .dashboard-card-value-row {
+        @include dashboardCardValueRow();
+    }
+
+    .dashboard-card-main {
+        @include dashboardCardMainValue();
+
+        text-align: left;
+    }
+
+    .dashboard-card-main--muted {
+        @include dashboardCardMainValue(15px, var(--text-primary), 700);
+    }
+
+    .dashboard-card-main--metric {
+        @include dashboardCardNumericValue(var(--text-primary));
+
+        flex: 0 0 auto;
+        min-width: 0;
+        text-align: left;
+        white-space: nowrap;
+    }
+
+    .dashboard-card-accent {
+        @include dashboardCardAccentValue();
+    }
+
+    .dashboard-card--success {
+        .dashboard-card-main {
+            color: var(--success-color);
+        }
+    }
+
+    .dashboard-card--warning {
+        .dashboard-card-main {
+            color: var(--warning-color);
+        }
+    }
+
+    .dashboard-card--error {
+        .dashboard-card-main {
+            color: #d54941;
+        }
+    }
+
+    .dashboard-card-label--success {
+        color: var(--text-primary);
+    }
+
+    .dashboard-card-label--warning {
+        color: var(--text-primary);
+    }
+
+    .dashboard-card-label--error {
+        color: var(--text-primary);
+    }
+
+    .dashboard-card-main--black {
+        color: var(--text-primary);
+    }
+
+    .dashboard-card-main--blue {
+        color: var(--primary-color);
+    }
+
+    .dashboard-card-main--green {
+        color: var(--success-color);
+    }
+
+    .dashboard-card-main--yellow {
+        color: var(--warning-color);
+    }
+
+    .dashboard-card-main--red {
+        color: #d54941;
+    }
+
+    .dashboard-card-main--primary {
+        color: var(--primary-color);
+    }
+
+    .dashboard-card-main--success {
+        color: var(--success-color);
+    }
+
+    .dashboard-card-main--warning {
+        color: var(--warning-color);
+    }
+
+    .dashboard-card-main--critical {
+        color: #d54941;
+    }
+}

package/views/config/dict/components/edit.vue

@@ -33,7 +33,7 @@
 
 <script setup>
 import PageDialog from "befly-admin-ui/components/pageDialog.vue";
-import { Form as TForm, FormItem as TFormItem, Input as TInput, Select as TSelect, Option as TOption, Textarea as TTextarea, InputNumber as TInputNumber, MessagePlugin } from "tdesign-vue-next";
+import { MessagePlugin } from "tdesign-vue-next";
 import { computed, reactive } from "vue";
 
 import { $Http } from "@/plugins/http.js";

package/views/config/dict/index.vue

@@ -47,8 +47,7 @@
 <script setup>
 import PageTableDetail from "befly-admin-ui/components/pageTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
-import { AddIcon, ChevronDownIcon, DeleteIcon, EditIcon, SearchIcon } from "tdesign-icons-vue-next";
-import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Input as TInput, Option as TOption, Select as TSelect, MessagePlugin } from "tdesign-vue-next";
+import { MessagePlugin } from "tdesign-vue-next";
 import { onMounted, reactive } from "vue";
 
 import { $Http } from "@/plugins/http.js";

package/views/config/dictType/components/edit.vue

@@ -28,7 +28,7 @@
 
 <script setup>
 import PageDialog from "befly-admin-ui/components/pageDialog.vue";
-import { Form as TForm, FormItem as TFormItem, Input as TInput, Textarea as TTextarea, InputNumber as TInputNumber, MessagePlugin } from "tdesign-vue-next";
+import { MessagePlugin } from "tdesign-vue-next";
 import { computed, reactive } from "vue";
 
 import { $Http } from "@/plugins/http.js";

package/views/config/dictType/index.vue

@@ -44,8 +44,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, SearchIcon } from "tdesign-icons-vue-next";
-import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Input as TInput } from "tdesign-vue-next";
 import { reactive } from "vue";
 
 import EditDialog from "./components/edit.vue";

package/views/config/system/components/edit.vue

@@ -52,7 +52,7 @@
 
 <script setup>
 import PageDialog from "befly-admin-ui/components/pageDialog.vue";
-import { Form as TForm, FormItem as TFormItem, Input as TInput, Textarea as TTextarea, InputNumber as TInputNumber, Select as TSelect, Option as TOption, RadioGroup as TRadioGroup, Radio as TRadio, MessagePlugin } from "tdesign-vue-next";
+import { MessagePlugin } from "tdesign-vue-next";
 import { computed, reactive } from "vue";
 
 import { $Http } from "@/plugins/http.js";

package/views/config/system/index.vue

@@ -70,8 +70,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 { AddIcon, ChevronDownIcon, DeleteIcon, EditIcon } from "tdesign-icons-vue-next";
-import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Option as TOption, Select as TSelect, Tag as TTag } from "tdesign-vue-next";
 import { reactive } from "vue";
 
 import EditDialog from "./components/edit.vue";

package/views/index/components/environmentInfo.vue

@@ -5,38 +5,73 @@
             <h2>运行环境</h2>
         </div>
         <div class="section-content">
-            <div class="env-grid-compact">
-                <div class="env-compact-item">
-                    <span class="env-label">操作系统</span>
-                    <span class="env-value">{{ $Data.environmentInfo.os }}</span>
-                </div>
-                <div class="env-compact-item">
-                    <span class="env-label">服务器</span>
-                    <span class="env-value">{{ $Data.environmentInfo.server }}</span>
-                </div>
-                <div class="env-compact-item">
-                    <span class="env-label">Node版本</span>
-                    <span class="env-value">{{ $Data.environmentInfo.nodeVersion }}</span>
-                </div>
-                <div class="env-compact-item">
-                    <span class="env-label">数据库</span>
-                    <span class="env-value">{{ $Data.environmentInfo.database }}</span>
-                </div>
-                <div class="env-compact-item">
-                    <span class="env-label">缓存</span>
-                    <span class="env-value">{{ $Data.environmentInfo.cache }}</span>
-                </div>
-                <div class="env-compact-item">
-                    <span class="env-label">时区</span>
-                    <span class="env-value">{{ $Data.environmentInfo.timezone }}</span>
-                </div>
-            </div>
+            <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">操作系统</span>
+                            <div class="dashboard-card-value-row">
+                                <span class="dashboard-card-main">{{ $Data.environmentInfo.os }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </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">{{ $Data.environmentInfo.server }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </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">{{ $Data.environmentInfo.runtimeVersion || $Data.environmentInfo.nodeVersion }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </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">{{ $Data.environmentInfo.database }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </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">{{ $Data.environmentInfo.cache }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </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">{{ $Data.environmentInfo.timezone }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </t-col>
+            </t-row>
         </div>
     </div>
 </template>
 
 <script setup>
-import { ServerIcon } from "tdesign-icons-vue-next";
 import { reactive } from "vue";
 
 import { $Http } from "@/plugins/http.js";
@@ -46,6 +81,7 @@ const $Data = reactive({
     environmentInfo: {
         os: "",
         server: "",
+        runtimeVersion: "",
         nodeVersion: "",
         database: "",
         cache: "",
@@ -68,60 +104,9 @@ $Method.fetchData();
 </script>
 
 <style scoped lang="scss">
-.env-grid-compact {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 10px;
+@use "../../../styles/dashboardCard.scss" as dashboardCard;
 
-    .env-compact-item {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: flex-start;
-        min-width: 0;
-        min-height: 92px;
-        gap: 4px;
-        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 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);
-        }
-
-        .env-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-weight: 500;
-            line-height: 1.2;
-        }
-
-        .env-value {
-            font-size: 14px;
-            color: var(--text-primary);
-            font-weight: 600;
-            line-height: 1.35;
-            text-align: left;
-            min-width: 0;
-            width: 100%;
-            word-break: break-word;
-        }
-    }
-}
-
-@media (max-width: 1200px) {
-    .env-grid-compact {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-}
-
-@media (max-width: 640px) {
-    .env-grid-compact {
-        grid-template-columns: 1fr;
-    }
+.dashboard-card-row {
+    @include dashboardCard.dashboardCardStandard();
 }
 </style>