feat(ui): 优化项目描述折叠交互与样式

- 调整项目描述最大高度从100px到80px
- 更新折叠遮罩渐变效果适配日夜主题
- 重构切换按钮样式为内联文本链接形式
- 修改展开收起逻辑使用innerHTML动态更新内容
- 添加箭头图标指示当前折叠状态
- 移除冗余CSS类定义提升代码整洁度

css/about.css

@@ -1476,23 +1476,33 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
     margin-bottom: 1.5rem;
     line-height: 1.6;
     font-weight: 500;
-}
-
-/* 项目描述折叠样式 */
-.project-description.collapsible {
     position: relative;
-    max-height: 100px;
-    overflow: hidden;
 }
 
-.project-description.collapsible::after {
+.project-description.collapsible {
+    max-height: 80px;
+    overflow: hidden;
+    position: relative;
+}
+
+.theme-day .project-description.collapsible::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
-    height: 40px;
+    height: 30px;
-    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, var(--glass-alpha)));
+    background: linear-gradient(to bottom, transparent, rgba(248, 249, 250, 0.8));
+}
+
+.theme-night .project-description.collapsible::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 30px;
+    background: linear-gradient(to bottom, transparent, rgba(30, 30, 30, 0.8));
 }
 
 .project-description.expanded {
@@ -1503,28 +1513,28 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
     display: none;
 }
 
-.project-description.collapsible {
-    position: relative;
-}
-
 .toggle-description {
-    background: rgba(255, 255, 255, 0.1);
     color: var(--text-strong);
+    background: none;
     border: none;
-    padding: 0.5rem 1rem;
-    border-radius: 20px;
     cursor: pointer;
     font-size: 0.9rem;
-    margin-top: 1rem;
+    margin-left: 5px;
-    transition: all 0.3s ease;
+    vertical-align: baseline;
+    text-decoration: underline;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
 }
 
 .toggle-description:hover {
-    background: rgba(255, 255, 255, 0.2);
+    opacity: 0.8;
 }
 
-.project-description.collapsible + .toggle-description {
+.arrow {
-    display: inline-block;
+    font-size: 0.8em;
+    margin-left: 2px;
 }
 
 .project-stats {

js/about.js

@@ -227,7 +227,6 @@ function displayProjects(repos) {
         var description = repo.description || '暂无描述';
         var isLongDescription = description.length > 100;
         var displayDescription = isLongDescription ? description.substring(0, 100) + '...' : description;
-        var descriptionClass = isLongDescription ? 'project-description collapsible' : 'project-description';
         
         var starSvg = '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-label="Star" role="img"><path d="M12 17.27l6.18 3.73-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"></path></svg>';
         var forkSvg = '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-label="Fork" role="img"><path d="M7 4a3 3 0 106 0 3 3 0 00-6 0zm10 0a3 3 0 106 0 3 3 0 00-6 0v6a3 3 0 01-3 3H7"></path></svg>';
@@ -235,8 +234,8 @@ function displayProjects(repos) {
             '<div class="project-header">' +
                 '<div>' +
                     '<h3 class="project-title">' + repo.name + '</h3>' +
-                    '<p class="' + descriptionClass + '" data-full-text="' + description + '" data-short-text="' + (isLongDescription ? description.substring(0, 100) + '...' : description) + '">' + displayDescription + '</p>' +
+                    '<p class="project-description' + (isLongDescription ? ' collapsible' : '') + '" data-full-text="' + description + '" data-short-text="' + (isLongDescription ? description.substring(0, 100) : description) + '">' + displayDescription + 
-                    (isLongDescription ? '<button class="toggle-description" onclick="toggleDescription(event, this)">显示更多</button>' : '') +
+                    (isLongDescription ? '<button class="toggle-description" onclick="toggleDescription(event, this)">更多<span class="arrow">▼</span></button>' : '') + '</p>' +
                 '</div>' +
                 '<div class="project-stats">' +
                     '<span>' + starSvg + ' ' + (repo.stargazers_count || 0) + '</span>' +
@@ -255,18 +254,18 @@ function displayProjects(repos) {
 function toggleDescription(event, button) {
     event.stopPropagation(); // 阻止事件冒泡，避免触发项目卡片的点击事件
     
-    var description = button.previousElementSibling;
+    var description = button.parentElement;
     var fullText = description.getAttribute('data-full-text');
     var shortText = description.getAttribute('data-short-text');
     
-    if (button.textContent === '显示更多') {
+    if (description.classList.contains('expanded')) {
-        // 展开描述
-        description.textContent = fullText;
-        button.textContent = '收起';
-    } else {
         // 收起描述
-        description.textContent = shortText;
+        description.classList.remove('expanded');
-        button.textContent = '显示更多';
+        description.innerHTML = shortText + '... <button class="toggle-description" onclick="toggleDescription(event, this)">更多<span class="arrow">▼</span></button>';
+    } else {
+        // 展开描述
+        description.classList.add('expanded');
+        description.innerHTML = fullText + ' <button class="toggle-description" onclick="toggleDescription(event, this)">收起<span class="arrow">▲</span></button>';
     }
 }