Honesty/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 调整项目描述最大高度从100px到80px
- 更新折叠遮罩渐变效果适配日夜主题
- 重构切换按钮样式为内联文本链接形式
- 修改展开收起逻辑使用innerHTML动态更新内容
- 添加箭头图标指示当前折叠状态
- 移除冗余CSS类定义提升代码整洁度
This commit is contained in:
hehh
2025-11-20 22:17:17 +08:00
parent c6428d1224
commit b5b5eb9b2a
2 changed files with 41 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
js/about.js
View File

@@ -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>' +
(isLongDescription ? '<button class="toggle-description" onclick="toggleDescription(event, this)">显示更多</button>' : '') +
'<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)">更多<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 === '显示更多') {
// 展开描述
description.textContent = fullText;
button.textContent = '收起';
} else {
if (description.classList.contains('expanded')) {
// 收起描述
description.textContent = shortText;
button.textContent = '显示更多';
description.classList.remove('expanded');
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>';
}
}