d758563a13
三层架构组件库： - 第 1 层原子组件：PageShell/ContentCard/StatusTag/SectionTitle/LoadingCard - 第 2 层组合模式：PageHeader/SearchSection/CardList/PaginationBar - 第 3 层 Hook：useListPage（列表页通用逻辑抽象） Token 扩展：新增 --tk-card-*/--tk-gap-*/--tk-page-* 等结构化 CSS 变量， 关怀模式通过变量覆写自动生效，新组件零额外代码即获关怀支持。 设计规格：docs/superpowers/specs/2026-05-16-miniprogram-unified-components-design.md
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { View, Input, Text } from '@tarojs/components';
|
|
import SegmentTabs from '../../SegmentTabs';
|
|
import './index.scss';
|
|
|
|
interface SearchSectionProps {
|
|
value: string;
|
|
onChange: (v: string) => void;
|
|
onSearch?: () => void;
|
|
placeholder?: string;
|
|
filters?: { key: string; label: string }[];
|
|
activeFilter?: string;
|
|
onFilterChange?: (key: string) => void;
|
|
}
|
|
|
|
const SearchSection: React.FC<SearchSectionProps> = ({
|
|
value,
|
|
onChange,
|
|
onSearch,
|
|
placeholder = '搜索...',
|
|
filters,
|
|
activeFilter,
|
|
onFilterChange,
|
|
}) => {
|
|
return (
|
|
<View className="search-section">
|
|
<View className="search-section__input-wrap">
|
|
<Text className="search-section__icon">🔍</Text>
|
|
<Input
|
|
className="search-section__input"
|
|
value={value}
|
|
onInput={(e) => onChange(e.detail.value)}
|
|
onConfirm={onSearch}
|
|
placeholder={placeholder}
|
|
placeholderClass="search-section__placeholder"
|
|
confirmType="search"
|
|
/>
|
|
</View>
|
|
{filters && filters.length > 0 && (
|
|
<View className="search-section__filters">
|
|
<SegmentTabs
|
|
tabs={filters.map((f) => ({ key: f.key, label: f.label }))}
|
|
activeKey={activeFilter ?? filters[0]?.key ?? ''}
|
|
onChange={onFilterChange ?? (() => {})}
|
|
variant="pill"
|
|
/>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default React.memo(SearchSection);
|