Merge branch 'main' of http://10.1.1.5:8418/acdiu/AcdiuTools

wwwroot/ac/ac.scss

@@ -6,11 +6,29 @@ $breakpoints: ( 'mobile': 768px, 'tablet': 1024px, 'desktop': 1920px, '2k': 2560
 // 字号常量
 $font-size-small: 14px; // 手机/平板基准
 $font-size-standard: 16px; // 桌面基准 (1024px - 3840px)
-$font-size-4k-base: 24px; // 4K 触发点字号
+$font-size-4k-base: 20px; // 4K 触发点字号
 
 // 容器配置
 $container-paddings: 1rem;
 
+/// 去除单位函数
+@function strip-unit($number) {
+    @if type-of($number) == 'number' and not unitless($number) {
+        @return $number / ($number * 0 + 1);
+    }
+
+    @return $number;
+}
+
+/// 计算基于屏幕宽度的线性 VW 比例
+/// @param $size - 目标字号 (如 24px)
+/// @param $breakpoint - 触发断点 (如 3840)
+@function get-linear-vw($size, $breakpoint) {
+    $raw-size: strip-unit($size);
+    $raw-breakpoint: strip-unit($breakpoint);
+    @return ($raw-size / $raw-breakpoint) * 100vw;
+}
+
 // ========================================================
 // 2. 媒体查询 Mixin
 // ========================================================
@@ -35,21 +53,19 @@ $container-paddings: 1rem;
 :root {
     // --- [阶段 A] 默认状态 (手机/小屏幕) ---
     font-size: $font-size-small;
-    // --- [阶段 B] 1024px 以上到 4K 之前：保持标准 16px ---
+    // --- [阶段 B] 1024px 以上到 4K 之前: 保持标准 16px ---
     @include respond-to('tablet') {
         font-size: $font-size-standard;
     }
-    // --- [阶段 C] 大于 4K：开启线性增长 ---
+    // --- [阶段 C] 大于 4K: 开启线性增长 ---
     @include respond-to('4k') {
-        /* 逻辑：从 3840px 开始，字号从 24px 线性向上。
-       公式：(24 / 3840) * 100vw = 0.625vw
-    */
-        font-size: 0.625vw;
+        // 锁定最小字号为 20px，确保在任何情况下都不会比基准值小
+        font-size: clamp(#{$font-size-4k-base}, get-linear-vw($font-size-4k-base, 3840), 100vw);
     }
 }
 
 /* --- 全局布局容器适配 --- */
-// 其中 4k-40 为准 4K, 以适配 PC 端部分浏览器最大化时边框占位从而影响到 4K 宽度判定
+// 其中 4k-40 为准 4K (即 3840px - 40px), 以适配 PC 端部分浏览器最大化时边框占位从而影响到 4K 宽度判定
 .container {
     width: 100%;
     margin: 0 auto;
@@ -77,28 +93,24 @@ $container-paddings: 1rem;
     }
     // 当容器等于 4K 时，随之线性扩大
     @include respond-to('4k') {
-        // 保持容器宽度占比：(3600 / 3840) * 100vw = 93.75vw
-        max-width: 93.75vw;
+        // 保持容器宽度占比: (3600 / 3840) * 100vw = 93.75vw
+        max-width: (3600 / 3840) * 100vw;
     }
 }
 
 // ========================================================
 // 4. 工具类与组件样式
 // ========================================================
-/* 这里的 1rem 会随着 :root 的 font-size 变化而自动缩放 */
-.w-1r {
-    width: 1rem;
-}
-
-.h-1r {
-    height: 1rem;
-}
-
+// 这里的 1rem 会随着 :root 的 font-size 变化而自动缩放
+/* --- 工具与组件样式 --- */
 .nav-link {
+    &:visited {
+        color: inherit;
+    }
     &.active {
         font-weight: bold;
-        color: var(--bs-primary) !important;
-        border-bottom: 2px solid var(--bs-primary);
+        color: var(--bs-link-hover-color, rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1))) !important;
+        border-bottom: 2px solid var(--bs-link-hover-color, rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)));
     }
 }
 
@@ -107,6 +119,29 @@ $container-paddings: 1rem;
     top: -1px;
 }
 
-mg-0 {
+.mg-0 {
     margin: 0 auto;
-}
+}
+
+// 去除 a 标签默认下划线
+a {
+    text-decoration: none;
+    color: var(--bs-link-hover-color, rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)));
+    // 访问过的链接变更颜色，提供视觉反馈
+    &:visited {
+        color: var(--bs-purple, rgba(var(--bs-primary), var(--bs-link-opacity, 0.8)));
+    }
+}
+
+// 定义宽与高的工具类，使用 rem 单位以适配响应式字体大小
+$widthOrheight-map: ( '1r': 1rem, '1_5r': 1.5rem, '2r': 2rem, '2_5r': 2.5rem, '3r': 3rem, '3_5r': 3.5rem, '4r': 4rem, '4_5r': 4.5rem, '5r': 5rem, '5_5r': 5.5rem );
+
+@each $key, $value in $widthOrheight-map {
+    .w-#{$key} {
+        width: $value;
+    }
+
+    .h-#{$key} {
+        height: $value;
+    }
+}