Explorar o código

fix(home-card): tile_cards 窄 tile 数字溢出压标签 + bump 2.4.94/1.0.61

现象:S9 选"状态卡片"后,2×2 tile 下大数字(如 3957.62 PPM)越过自己的
max-width 边界压到左侧 label/target 上造成视觉重叠。

根因:.tile__main 用了 flex-shrink:0 + max-width:55%,value 使用 vw-based
clamp 且 white-space:nowrap 无 overflow 裁切,内容超过 55% 限宽时视觉溢出。

修复(只改 HomeCardTilesView.vue):
- .tile 开启 container-type: inline-size,让 cqi 单位可用;
- .tile__value 字号改用 clamp(14px, 14cqi, 22px)(dense 16cqi 12~18px)随
  tile 宽度自适应,窄 tile 自动缩小;
- .tile__main 改为 flex: 0 1 auto + min-width:0 + overflow:hidden(max-width
  60%),允许内部收缩并裁切,作为兜底防越界;
- .tile__unit 同步用 cqi 缩放;gap 从 8px 改 6px 给信息列腾 2px。

Made-with: Cursor
skygu hai 1 mes
pai
achega
50dcfb16c4

+ 1 - 1
Web/package.json

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

+ 18 - 7
Web/src/views/dashboard/components/HomeCardTilesView.vue

@@ -105,6 +105,8 @@ const overflowCount = computed(() => {
   border: 1px solid rgba(51, 65, 85, 0.45);
   border-radius: 8px;
   overflow: hidden;
+  /* 容器查询单位 cqi 让大数字字号随 tile 宽度自适应,避免窄 tile 下数字溢出压到左侧标签 */
+  container-type: inline-size;
   --tile-accent: #64748b;
 }
 
@@ -132,12 +134,12 @@ const overflowCount = computed(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: 6px;
   padding: 8px 10px 8px 10px;
 }
 
 .tile__info {
-  flex: 1;
+  flex: 1 1 0;
   min-width: 0;
   display: flex;
   flex-direction: column;
@@ -180,13 +182,17 @@ const overflowCount = computed(() => {
   display: flex;
   align-items: baseline;
   gap: 3px;
-  flex-shrink: 0;
-  max-width: 55%;
+  /* 允许收缩并内部裁切,彻底避免大数字越界压到左侧 label */
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 60%;
+  overflow: hidden;
   justify-content: flex-end;
 }
 
 .tile__value {
-  font-size: clamp(18px, 2.6vw, 26px);
+  /* 14cqi = tile 宽度的 14%,夹在 14px~22px 之间;窄 tile 自动缩小不再溢出 */
+  font-size: clamp(14px, 14cqi, 22px);
   font-weight: 800;
   color: #ffffff;
   line-height: 1.05;
@@ -195,13 +201,18 @@ const overflowCount = computed(() => {
 }
 
 .tile__unit {
-  font-size: 12px;
+  font-size: clamp(9px, 6cqi, 12px);
   color: #e2e8f0;
   font-weight: 500;
+  white-space: nowrap;
 }
 
 .tiles-view--dense .tile__value {
-  font-size: clamp(14px, 1.9vw, 18px);
+  font-size: clamp(12px, 16cqi, 18px);
+}
+
+.tiles-view--dense .tile__unit {
+  font-size: clamp(9px, 7cqi, 11px);
 }
 
 .tiles-view--dense .tile__label {

+ 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.60</AssemblyVersion>
-    <FileVersion>1.0.60</FileVersion>
-    <Version>1.0.60</Version>
+    <AssemblyVersion>1.0.61</AssemblyVersion>
+    <FileVersion>1.0.61</FileVersion>
+    <Version>1.0.61</Version>
   </PropertyGroup>
 
   <ItemGroup>