feat: 分组图标统一(iconfont 名字优先,字符兜底)+ 后台选图标

- 新增 components/common/GroupMark:值是图标名就渲染图标,否则按字符显示,
  兼容旧数据里的 emoji;后台的 GroupMark 改为复用同一判断
- 分组详情页 hero 之前把图标名当文本渲染(会直接显示 folder_2_line),已修
- 分组编辑弹窗加「选择图标」:搜索 + 网格,446 个图标按关键字过滤(默认展示前 120)
- 输入框仍可手填字符,旧数据不用迁移
This commit is contained in:
2026-11-01 15:43:53 +08:00
parent 2f2ceb9ea0
commit 18e9543607
4 changed files with 121 additions and 15 deletions
+40
View File
@@ -1053,6 +1053,46 @@
cursor: default;
}
/* 分组图标选择:搜索 + 图标网格 */
.icon-picker {
display: flex;
flex-direction: column;
gap: var(--su-space-3);
margin-top: var(--su-space-3);
padding: var(--su-space-3);
border: 1px solid var(--su-border);
border-radius: var(--su-radius-md);
background-color: var(--su-bg-subtle);
}
.icon-picker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
gap: var(--su-space-2);
max-height: 220px;
overflow-y: auto;
}
.icon-picker-item {
display: grid;
place-items: center;
height: 36px;
border: 1px solid transparent;
border-radius: var(--su-radius-sm);
background-color: var(--su-bg-card);
color: var(--su-text-sub);
font-size: var(--su-font-size-lg);
cursor: pointer;
transition:
border-color var(--su-duration-fast) var(--su-ease-in-out),
color var(--su-duration-fast) var(--su-ease-in-out);
}
.icon-picker-item:hover {
border-color: var(--su-color-primary);
color: var(--su-color-primary);
}
.group-mark {
display: inline-flex;
flex: none;