feat: 侧边栏分组图标与导航样式优化

- 分组支持 icon 字段,可按名称自动匹配或手动选择
- 左侧导航与总览卡片显示彩色 SVG 图标
- 优化侧栏链接圆角与选中态样式

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-05-30 18:06:42 +08:00
parent 11129cc3a0
commit f7ce6f1058
8 changed files with 250 additions and 24 deletions
+51
View File
@@ -0,0 +1,51 @@
{% macro render(icon_key) %}
{% set key = icon_key or 'folder' %}
<span class="sidebar-group-icon sidebar-group-icon--{{ key }}" aria-hidden="true">
{% if key == 'order' %}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/>
<rect x="9" y="3" width="6" height="4" rx="1"/>
<path d="M9 12h6M9 16h6"/>
</svg>
{% elif key == 'trade' %}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 17l6-6 4 4 8-8"/>
<path d="M14 7h7v7"/>
</svg>
{% elif key == 'review' %}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="9"/>
<path d="M12 7v5l3 2"/>
</svg>
{% elif key == 'api' %}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 9l-3 3 3 3"/>
<path d="M16 9l3 3-3 3"/>
<path d="M14 5l-4 14"/>
</svg>
{% elif key == 'gate' %}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="2"/>
<path d="M12 2v3M12 19v3M2 12h3M19 12h3"/>
<path d="M4.9 4.9l2.1 2.1M16.9 16.9l2.1 2.1M4.9 19.1l2.1-2.1M16.9 7.1l2.1-2.1"/>
</svg>
{% elif key == 'chart' %}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 19V5"/>
<path d="M4 19h16"/>
<path d="M8 15V9M12 15V7M16 15v-4"/>
</svg>
{% elif key == 'server' %}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="6" rx="2"/>
<rect x="3" y="14" width="18" height="6" rx="2"/>
<circle cx="7" cy="7" r="1" fill="currentColor" stroke="none"/>
<circle cx="7" cy="17" r="1" fill="currentColor" stroke="none"/>
</svg>
{% else %}
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 7a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7z"/>
</svg>
{% endif %}
</span>
{% endmacro %}