From d9433396a0472d805beaba5c602964b620fc5082 Mon Sep 17 00:00:00 2001
From: hehh <lingtinzhe@icloud.com>
Date: Tue, 25 Nov 2025 00:07:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(css):=20=E4=BC=98=E5=8C=96=E8=8B=B1?=
 =?UTF-8?q?=E6=96=87=20bio=20=E6=96=87=E6=9C=AC=E6=A0=B7=E5=BC=8F=E5=8F=8A?=
 =?UTF-8?q?=E6=8A=80=E6=9C=AF=E6=A0=87=E7=AD=BE=E9=A2=9C=E8=89=B2=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为英文 bio 文本添加专门的排版样式，包括字体、行高和斜体设置
- 在白天模式下为 .tech-tag 类增加基于 data-theme 的颜色定义
- 将原有的渐变样式限制在夜间模式下应用
- 技术标签颜色方案扩展至 10 种，并区分日夜主题显示效果

fix(js): 设置页面语言属性并调整技术栈索引逻辑

- 页面加载时动态设置 html 根元素的 data-lang 属性值
- 修改技术栈项的 gradientId 计算方式，由名称哈希改为索引取模
- 注释掉旧的哈希计算相关代码以避免干扰
---
 css/about.css | 120 +++++++++++++++++++++++++++++++++++++++++++++-----
 js/about.js   |   7 +--
 2 files changed, 114 insertions(+), 13 deletions(-)

diff --git a/css/about.css b/css/about.css
index 5bedd0f..76cc106 100644
--- a/css/about.css
+++ b/css/about.css
@@ -528,6 +528,15 @@ body {
     overflow: hidden;
 }
 
+[data-lang="en"] .bio-text.collapsed {
+    /* 英文渲染友好的格式，字间距行间距 样式*/
+    font-size: 1rem;
+    line-height: 1.5;
+    font-family: 'Noto Serif', serif;
+    font-style: oblique;
+}
+
+
 .link-btn {
     background: none;
     border: none;
@@ -1946,36 +1955,127 @@ body {
     z-index: 10;
 }
 
+/* 白天模式下为 tag-color 类增强可读性 */
+[data-theme="day"] .tech-tag-3d.tag-color-1,
+[data-theme="day"] .tech-tag-mobile.tag-color-1 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #0ea5e9 !important; /* 蓝色 */
+    -webkit-text-fill-color: #0ea5e9 !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-2,
+[data-theme="day"] .tech-tag-mobile.tag-color-2 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #ef4444 !important; /* 红色 */
+    -webkit-text-fill-color: #ef4444 !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-3,
+[data-theme="day"] .tech-tag-mobile.tag-color-3 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #10b981 !important; /* 绿色 */
+    -webkit-text-fill-color: #10b981 !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-4,
+[data-theme="day"] .tech-tag-mobile.tag-color-4 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #f59e0b !important; /* 黄色 */
+    -webkit-text-fill-color: #f59e0b !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-5,
+[data-theme="day"] .tech-tag-mobile.tag-color-5 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #8b5cf6 !important; /* 紫色 */
+    -webkit-text-fill-color: #8b5cf6 !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-6,
+[data-theme="day"] .tech-tag-mobile.tag-color-6 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #ec4899 !important; /* 粉色 */
+    -webkit-text-fill-color: #ec4899 !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-7,
+[data-theme="day"] .tech-tag-mobile.tag-color-7 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #06b6d4 !important; /* 青色 */
+    -webkit-text-fill-color: #06b6d4 !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-8,
+[data-theme="day"] .tech-tag-mobile.tag-color-8 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #f97316 !important; /* 橙色 */
+    -webkit-text-fill-color: #f97316 !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-9,
+[data-theme="day"] .tech-tag-mobile.tag-color-9 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #6b7280 !important; /* 灰色 */
+    -webkit-text-fill-color: #6b7280 !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-10,
+[data-theme="day"] .tech-tag-mobile.tag-color-10 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #1f2937 !important; /* 深灰 */
+    -webkit-text-fill-color: #1f2937 !important;
+}
+
 /* 不同颜色的标签 */
-.tech-tag-3d.tag-color-1, .tech-tag-mobile.tag-color-1 {
+[data-theme="night"] .tech-tag-3d.tag-color-1, .tech-tag-mobile.tag-color-1 {
     background: var(--gradient-1);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }
 
-.tech-tag-3d.tag-color-2, .tech-tag-mobile.tag-color-2 {
+[data-theme="night"] .tech-tag-3d.tag-color-2, .tech-tag-mobile.tag-color-2 {
     background: var(--gradient-2);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }
 
-.tech-tag-3d.tag-color-3, .tech-tag-mobile.tag-color-3 {
+[data-theme="night"] .tech-tag-3d.tag-color-3, .tech-tag-mobile.tag-color-3 {
     background: var(--gradient-3);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }
 
-.tech-tag-3d.tag-color-4, .tech-tag-mobile.tag-color-4 {
+[data-theme="night"] .tech-tag-3d.tag-color-4, .tech-tag-mobile.tag-color-4 {
     background: var(--gradient-4);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }
 
-.tech-tag-3d.tag-color-5, .tech-tag-mobile.tag-color-5 {
+[data-theme="night"] .tech-tag-3d.tag-color-5, .tech-tag-mobile.tag-color-5 {
     background: var(--gradient-5);
     -webkit-background-clip: text;
     background-clip: text;
@@ -1983,35 +2083,35 @@ body {
 }
 
 /* 扩展更多渐变方案 */
-.tech-tag-3d.tag-color-6, .tech-tag-mobile.tag-color-6 {
+[data-theme="night"] .tech-tag-3d.tag-color-6, .tech-tag-mobile.tag-color-6 {
     background: var(--gradient-6);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }
 
-.tech-tag-3d.tag-color-7, .tech-tag-mobile.tag-color-7 {
+[data-theme="night"] .tech-tag-3d.tag-color-7, .tech-tag-mobile.tag-color-7 {
     background: var(--gradient-7);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }
 
-.tech-tag-3d.tag-color-8, .tech-tag-mobile.tag-color-8 {
+[data-theme="night"] .tech-tag-3d.tag-color-8, .tech-tag-mobile.tag-color-8 {
     background: var(--gradient-8);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }
 
-.tech-tag-3d.tag-color-9, .tech-tag-mobile.tag-color-9 {
+[data-theme="night"] .tech-tag-3d.tag-color-9, .tech-tag-mobile.tag-color-9 {
     background: var(--gradient-9);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }
 
-.tech-tag-3d.tag-color-10, .tech-tag-mobile.tag-color-10 {
+[data-theme="night"] .tech-tag-3d.tag-color-10, .tech-tag-mobile.tag-color-10 {
     background: var(--gradient-10);
     -webkit-background-clip: text;
     background-clip: text;
diff --git a/js/about.js b/js/about.js
index 69ca1ee..df59efb 100644
--- a/js/about.js
+++ b/js/about.js
@@ -161,6 +161,7 @@ class I18nManager {
 
     apply() {
         const t = this.dict[this.lang];
+        document.documentElement.setAttribute('data-lang', this.lang)
         $('[data-i18n]').each(function () {
             const k = $(this).data('i18n');
             if (t[k]) $(this).text(t[k]);
@@ -661,11 +662,11 @@ class UIManager {
 
         const techStackRaw = window.SiteConfig?.techStack || [];
         const techStack = techStackRaw.map((item, idx) => {
-            const name = item.name || '';
-            const hash = Array.from(name).reduce((a, c) => a + c.charCodeAt(0), 0);
+            //const name = item.name || '';
+            //const hash = Array.from(name).reduce((a, c) => a + c.charCodeAt(0), 0);
             const gid = Number(item.gradientId) && Number.isFinite(Number(item.gradientId))
                 ? Math.max(1, Math.min(10, Number(item.gradientId)))
-                : (hash % 10) + 1;
+                : (idx % 10) + 1;
             return {...item, gradientId: gid};
         });