fix: 自定义标签融入原生标签栏,点击切换而非消失
- StyleSelector 新增 customTags 属性,自定义标签作为「自定义标签」行展示在原生标签栏中 - 自定义标签点击切换 true/false,不再移除 key,解决点击消失问题 - CustomTagsEditor 简化为仅输入框+添加按钮 - extractTags 仅提取激活态自定义标签(value=true) - 导出 CUSTOM_PREFIX 供组件使用
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user