feat(ui): 为导航菜单项添加图标并优化设置页的标签输入组件

- 在导航菜单项中引入图标组件,提升视觉识别性
- 将设置页中的文本域输入替换为交互式标签输入组件,支持添加/删除标签
- 新增标签输入组件的样式和交互逻辑,改善用户体验
This commit is contained in:
anghunk
2026-02-02 11:11:02 +08:00
parent fd2cecc6d4
commit e6bbac8366
4 changed files with 321 additions and 47 deletions

View File

@@ -90,6 +90,83 @@
box-shadow: 0 0 0 1px rgba(9, 105, 218, 0.2);
}
.tag-input {
padding: 4px 6px;
border-radius: 4px;
border: 1px solid var(--border-color);
background-color: var(--bg-input);
}
.tag-input-inner {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tag-input-tag {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 2px 8px;
border-radius: 999px;
background-color: var(--bg-sider);
color: var(--text-primary);
font-size: 13px;
position: relative;
}
.tag-input-tag-text {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tag-input-tag-remove {
border: none;
padding: 0;
background: none;
cursor: pointer;
color: var(--text-secondary);
font-size: 12px;
opacity: 0;
visibility: hidden;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.tag-input-tag-remove:hover {
color: var(--color-danger);
}
.tag-input-tag:hover .tag-input-tag-text {
opacity: 0;
visibility: hidden;
}
.tag-input-tag:hover .tag-input-tag-remove {
opacity: 1;
visibility: visible;
}
.tag-input-input {
flex: 1;
min-width: 120px;
border: none;
outline: none;
background: transparent;
padding: 4px 2px;
font-size: 14px;
color: var(--text-primary);
}
.toast {
position: fixed;
top: 20px;