diff --git a/web/static/css/style.css b/web/static/css/style.css index d95cadf3..b13b449d 100644 --- a/web/static/css/style.css +++ b/web/static/css/style.css @@ -30350,6 +30350,27 @@ html[data-theme="dark"] .skills-management-page .skill-card-actions .btn-seconda line-height: 1.45; } +.skills-management-page .skill-card-tags { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-top: 2px; +} + +.skills-management-page .skill-card-tags span { + max-width: 160px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding: 2px 7px; + border-radius: 999px; + border: 1px solid rgba(15, 23, 42, 0.1); + background: rgba(15, 23, 42, 0.04); + color: var(--text-secondary); + font-size: 0.72rem; + line-height: 1.3; +} + .skills-management-page .skill-card-actions { display: flex; grid-column: auto; diff --git a/web/static/js/skills.js b/web/static/js/skills.js index 9d1805c3..ec0e66ce 100644 --- a/web/static/js/skills.js +++ b/web/static/js/skills.js @@ -168,6 +168,12 @@ function renderSkillsList() { ? _t('skills.cardFiles', { count: skill.file_count }) : ''; const metaItems = [ver, fc, sc].filter(Boolean); + const tags = Array.isArray(skill.tags) ? skill.tags.filter(Boolean) : []; + const visibleTags = tags.slice(0, 4); + const hiddenTagCount = Math.max(0, tags.length - visibleTags.length); + const tagsHtml = visibleTags.length + ? `
${visibleTags.map(tag => `${escapeHtml(tag)}`).join('')}${hiddenTagCount ? `+${hiddenTagCount}` : ''}
` + : ''; return `
@@ -177,6 +183,7 @@ function renderSkillsList() { ${metaItems.length ? `
${metaItems.map(item => `${escapeHtml(item)}`).join('')}
` : ''}
${escapeHtml(skill.description || _t('skills.noDescription'))}
+ ${tagsHtml}