diff --git a/web/package.json b/web/package.json index bb6ef7ee..8ca3ed7a 100644 --- a/web/package.json +++ b/web/package.json @@ -1,7 +1,7 @@ { "name": "skillhub-web", "private": true, - "version": "0.1.13", + "version": "0.1.14", "type": "module", "packageManager": "pnpm@10.33.0", "pnpm": { diff --git a/web/src/features/skill/skill-card.test.ts b/web/src/features/skill/skill-card.test.ts index 2e7b9cdc..f1f87a16 100644 --- a/web/src/features/skill/skill-card.test.ts +++ b/web/src/features/skill/skill-card.test.ts @@ -40,6 +40,30 @@ describe('skill-card module exports', () => { expect(typeof mod.SkillCard).toBe('function') }) + it('limits long summaries to the stable three-line description region', () => { + const summary = 'A long skill summary that should remain available as a tooltip while the visible card content stays clamped.' + const html = renderToStaticMarkup( + createElement(SkillCard, { + skill: { + id: 1, + slug: 'summary-writer', + displayName: 'Summary Writer', + summary, + downloadCount: 0, + starCount: 0, + ratingCount: 0, + namespace: 'global', + updatedAt: '2026-09-07T00:00:00Z', + canSubmitPromotion: false, + }, + }) + ) + + expect(html).toContain('skill-card-summary') + expect(html).toContain(`title="${summary}"`) + expect(html).toContain('[overflow-wrap:anywhere]') + }) + it('renders compliance badges from the skill summary snapshot', () => { const html = renderToStaticMarkup( createElement(SkillCard, { diff --git a/web/src/features/skill/skill-card.tsx b/web/src/features/skill/skill-card.tsx index 4d08d73f..f244bb34 100644 --- a/web/src/features/skill/skill-card.tsx +++ b/web/src/features/skill/skill-card.tsx @@ -77,7 +77,10 @@ export function SkillCard({ skill, onClick, highlightStarred = true }: SkillCard {skill.summary && ( -
+
{skill.summary}
)} diff --git a/web/src/index.css b/web/src/index.css index f159f3d0..5be47fd4 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -567,6 +567,16 @@ color: hsl(var(--text-placeholder)); } +/* 技能卡片描述固定为三行,避免长文案拉高网格;完整内容通过 title 提供。 */ +.skill-card-summary { + display: -webkit-box; + min-height: 3.75rem; + max-height: 3.75rem; + overflow: hidden; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} + /* ═══════════════════════════════════════════ 样式细节增强(不改颜色,只改交互/布局/字体) ═══════════════════════════════════════════ */