fix: 自定义标签融入原生标签栏,点击切换而非消失

- StyleSelector 新增 customTags 属性,自定义标签作为「自定义标签」行展示在原生标签栏中
- 自定义标签点击切换 true/false,不再移除 key,解决点击消失问题
- CustomTagsEditor 简化为仅输入框+添加按钮
- extractTags 仅提取激活态自定义标签(value=true)
- 导出 CUSTOM_PREFIX 供组件使用
This commit is contained in:
2026-05-25 19:55:29 +08:00
parent 9d3b8fcd20
commit f44fd56e22
8 changed files with 50 additions and 49 deletions
+30 -1
View File
@@ -1,5 +1,5 @@
import type { StyleCategory } from '../utils/style'
import { STYLE_CATEGORIES } from '../utils/style'
import { STYLE_CATEGORIES, CUSTOM_PREFIX } from '../utils/style'
import styles from './StyleSelector.module.css'
interface StyleSelectorProps {
@@ -7,6 +7,13 @@ interface StyleSelectorProps {
onChange: (key: string, value: string) => void
compact?: boolean
categories?: StyleCategory[]
customTags?: string[]
}
const CUSTOM_TAG_CATEGORY: StyleCategory = {
key: '', // unused, pills use custom: prefix directly
label: '自定义标签',
options: [],
}
export default function StyleSelector({
@@ -14,6 +21,7 @@ export default function StyleSelector({
onChange,
compact,
categories,
customTags,
}: StyleSelectorProps) {
const cats = categories ?? STYLE_CATEGORIES
return (
@@ -37,6 +45,27 @@ export default function StyleSelector({
</div>
</div>
))}
{customTags && customTags.length > 0 && (
<div key="_custom" className={styles.category}>
<span className={styles.label}>{CUSTOM_TAG_CATEGORY.label}</span>
<div className={styles.options}>
{customTags.map(tag => {
const key = `${CUSTOM_PREFIX}${tag}`
const isActive = value[key] === 'true'
return (
<button
key={tag}
type="button"
className={`${styles.pill} ${isActive ? styles.pillActive : ''}`}
onClick={() => onChange(key, isActive ? 'false' : 'true')}
>
{tag}
</button>
)
})}
</div>
</div>
)}
</div>
)
}