Преглед изворни кода

refactor(home-card): tile_cards 改垂直堆叠版式(label/目标/大数居中)+ bump 2.4.95/1.0.62

背景:
横向"info | 大数"版式在窄 tile(2×2 或 2×4 dense)下仍可能重叠——大数用 nowrap
+ 大字号容易越界压到左侧 label。前一版用 cqi 缩放 + overflow:hidden 只是兜底,
视觉仍不理想。按参考图改为纵向堆叠,从版式上消除横向挤压。

改动(只改 HomeCardTilesView.vue):
- 模板:去掉 .tile__info 包装层,label/目标/大数直接作为 .tile__body 的子节点
  三行堆叠;
- CSS:
  - .tile__body 改 flex-direction: column; align-items: center; text-align: center
  - label/target 居中 + max-width:100% + ellipsis 保底
  - .tile__value 字号 clamp(18px, 18cqi, 30px)(dense: 14~20px)——垂直布局无
    横向挤压,允许更大字号
  - .tile__main 居中对齐,margin-top 6px 与 target 拉开层级
  - dense 模式下 padding/gap/margin 压紧
- 保留左侧色条 .tile__accent 与 tile 根节点 container-type: inline-size 以继续
  用 cqi 做字号自适应。

Made-with: Cursor
skygu пре 2 недеља
родитељ
комит
8d7f2ca2b6

+ 1 - 1
Web/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "admin.net",
 	"type": "module",
-	"version": "2.4.94",
+	"version": "2.4.95",
 	"packageManager": "pnpm@10.32.1",
 	"lastBuildTime": "2026.03.15",
 	"description": "Admin.NET 站在巨人肩膀上的 .NET 通用权限开发框架",

+ 36 - 35
Web/src/views/dashboard/components/HomeCardTilesView.vue

@@ -16,19 +16,17 @@
     >
       <span class="tile__accent" aria-hidden="true"></span>
       <div class="tile__body">
-        <div class="tile__info">
-          <el-tooltip
-            v-if="cell.formulaText"
-            placement="top"
-            :show-after="200"
-            :content="cell.formulaText"
-          >
-            <div class="tile__label tile__label--formula">{{ cell.label }}</div>
-          </el-tooltip>
-          <div v-else class="tile__label">{{ cell.label }}</div>
-          <div class="tile__target">
-            目标值: <span class="tile__target-val">{{ cell.targetDisplay || '—' }}</span>
-          </div>
+        <el-tooltip
+          v-if="cell.formulaText"
+          placement="top"
+          :show-after="200"
+          :content="cell.formulaText"
+        >
+          <div class="tile__label tile__label--formula">{{ cell.label }}</div>
+        </el-tooltip>
+        <div v-else class="tile__label">{{ cell.label }}</div>
+        <div class="tile__target">
+          目标值: <span class="tile__target-val">{{ cell.targetDisplay || '—' }}</span>
         </div>
         <div class="tile__main">
           <span class="tile__value">{{ cell.value }}</span>
@@ -131,20 +129,14 @@ const overflowCount = computed(() => {
 .tile__body {
   flex: 1;
   min-width: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 6px;
-  padding: 8px 10px 8px 10px;
-}
-
-.tile__info {
-  flex: 1 1 0;
-  min-width: 0;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  align-items: center;
   justify-content: center;
+  gap: 4px;
+  padding: 10px 10px 12px;
+  text-align: center;
 }
 
 .tile__label {
@@ -152,6 +144,7 @@ const overflowCount = computed(() => {
   font-weight: 500;
   color: #cbd5e1;
   line-height: 1.25;
+  max-width: 100%;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -160,14 +153,14 @@ const overflowCount = computed(() => {
 .tile__label--formula {
   cursor: help;
   border-bottom: 1px dashed rgba(148, 163, 184, 0.55);
-  align-self: flex-start;
-  max-width: 100%;
+  padding-bottom: 1px;
 }
 
 .tile__target {
   font-size: 11px;
   color: #94a3b8;
   line-height: 1.25;
+  max-width: 100%;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -179,20 +172,19 @@ const overflowCount = computed(() => {
 }
 
 .tile__main {
+  margin-top: 6px;
   display: flex;
   align-items: baseline;
+  justify-content: center;
   gap: 3px;
-  /* 允许收缩并内部裁切,彻底避免大数字越界压到左侧 label */
-  flex: 0 1 auto;
+  max-width: 100%;
   min-width: 0;
-  max-width: 60%;
   overflow: hidden;
-  justify-content: flex-end;
 }
 
 .tile__value {
-  /* 14cqi = tile 宽度的 14%,夹在 14px~22px 之间;窄 tile 自动缩小不再溢出 */
-  font-size: clamp(14px, 14cqi, 22px);
+  /* 18cqi = tile 宽度的 18%,窄 tile 自动缩小;垂直布局无横向挤压,允许更大字号 */
+  font-size: clamp(18px, 18cqi, 30px);
   font-weight: 800;
   color: #ffffff;
   line-height: 1.05;
@@ -201,18 +193,23 @@ const overflowCount = computed(() => {
 }
 
 .tile__unit {
-  font-size: clamp(9px, 6cqi, 12px);
+  font-size: clamp(10px, 7cqi, 13px);
   color: #e2e8f0;
   font-weight: 500;
   white-space: nowrap;
 }
 
+.tiles-view--dense .tile__body {
+  gap: 2px;
+  padding: 6px 8px 8px;
+}
+
 .tiles-view--dense .tile__value {
-  font-size: clamp(12px, 16cqi, 18px);
+  font-size: clamp(14px, 15cqi, 20px);
 }
 
 .tiles-view--dense .tile__unit {
-  font-size: clamp(9px, 7cqi, 11px);
+  font-size: clamp(9px, 6cqi, 11px);
 }
 
 .tiles-view--dense .tile__label {
@@ -223,6 +220,10 @@ const overflowCount = computed(() => {
   font-size: 10px;
 }
 
+.tiles-view--dense .tile__main {
+  margin-top: 2px;
+}
+
 .tiles-view__overflow {
   position: absolute;
   right: 4px;

+ 3 - 3
server/Admin.NET.Web.Entry/Admin.NET.Web.Entry.csproj

@@ -11,9 +11,9 @@
     <GenerateSatelliteAssembliesForCore>true</GenerateSatelliteAssembliesForCore>
     <Copyright>Admin.NET</Copyright>
     <Description>Admin.NET 通用权限开发平台</Description>
-    <AssemblyVersion>1.0.61</AssemblyVersion>
-    <FileVersion>1.0.61</FileVersion>
-    <Version>1.0.61</Version>
+    <AssemblyVersion>1.0.62</AssemblyVersion>
+    <FileVersion>1.0.62</FileVersion>
+    <Version>1.0.62</Version>
   </PropertyGroup>
 
   <ItemGroup>