eab08d8c96
- 新增「设置」Tab，支持物品分类的增删改（数据库持久化） - 物品分类由硬编码枚举迁移为动态分类，通过 CategoriesContext 全局共享 - items 表新增 unit（单位）、spec（规格）字段，附带旧库迁移 - markers 表 CHECK 约束扩展支持第 4 楼（楼顶），附带重建表迁移 - SVG 地图渲染：overdraw 预渲染提升清晰度，嵌入图片改用原生 Image 渲染 - FoldableLayout 改为 showDetail prop 控制动画宽度 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
|
|
import type { FloorNumber } from '@repo/types'
|
|
|
|
const FLOORS: FloorNumber[] = [1, 2, 3, 4]
|
|
const FLOOR_LABEL: Record<FloorNumber, string> = { 1: '1F', 2: '2F', 3: '3F', 4: '楼顶' }
|
|
|
|
interface FloorTabsProps {
|
|
currentFloor: FloorNumber
|
|
onChange: (floor: FloorNumber) => void
|
|
}
|
|
|
|
export function FloorTabs({ currentFloor, onChange }: FloorTabsProps) {
|
|
return (
|
|
<View style={styles.container}>
|
|
{FLOORS.map((floor) => {
|
|
const active = floor === currentFloor
|
|
return (
|
|
<TouchableOpacity
|
|
key={floor}
|
|
style={[styles.tab, active && styles.activeTab]}
|
|
onPress={() => onChange(floor)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={[styles.label, active && styles.activeLabel]}>
|
|
{FLOOR_LABEL[floor]}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)
|
|
})}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
backgroundColor: '#F9FAFB',
|
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
borderBottomColor: '#E5E7EB',
|
|
},
|
|
tab: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
paddingVertical: 10,
|
|
},
|
|
activeTab: {
|
|
borderBottomWidth: 2,
|
|
borderBottomColor: '#10B981',
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
fontWeight: '500',
|
|
color: '#6B7280',
|
|
},
|
|
activeLabel: {
|
|
color: '#10B981',
|
|
fontWeight: '700',
|
|
},
|
|
})
|