diff --git a/frontend/src/features/seller/SellerListingFormPage.tsx b/frontend/src/features/seller/SellerListingFormPage.tsx index 7412d0e..be2db73 100644 --- a/frontend/src/features/seller/SellerListingFormPage.tsx +++ b/frontend/src/features/seller/SellerListingFormPage.tsx @@ -200,6 +200,84 @@ function ChoiceField(props: { ) } +/** + * 移动端「常玩地区」选择器:固定宫格常驻页面,点选即切换,不渲染输入框。 + * iOS 上输入型下拉会立刻唤起键盘,把候选列表顶到键盘下面,故移动端改用宫格。 + */ +function MobileRegionPicker(props: { + value: string[] + options: string[] + onChange: (value: string[]) => void +}) { + const { value, options, onChange } = props + // 连续快速点选时 React 可能还未重渲染,用 ref 累积最新值,避免后一次点击覆盖前一次。 + const valueRef = useRef(value) + valueRef.current = value + const selected = new Set(valueRef.current) + const customValues = valueRef.current.filter(region => !options.includes(region)) + + function toggle(region: string) { + const current = valueRef.current + const next = current.includes(region) + ? current.filter(item => item !== region) + : [...current, region] + valueRef.current = next + onChange(next) + } + + return ( +
+
+ 已选 {value.length} 个地区 + {value.length > 0 ? ( + + ) : null} +
+
+ {options.map(region => { + const active = selected.has(region) + return ( + + ) + })} +
+ {customValues.length > 0 ? ( +
+ 自定义 + {customValues.map(region => ( + + ))} +
+ ) : null} +
+ ) +} + const PUBLISH_DRAFT_KEY_PREFIX = 'jieyou:seller:publish-draft:v1' interface StoredPublishDraft extends PublishDraft { @@ -1276,17 +1354,25 @@ export function SellerListingFormPage({ mobile = false }: { mobile?: boolean } = onChange={value => updateForm('next_season_pass', value)} /> ) : null} -