136c800084
- 创建目标管理演示页面，展示高保真的目标管理界面 - 实现待办事项卡片的横向滑动展示，支持时间筛选功能 - 新增时间轴组件，展示选中日期的具体任务 - 更新底部导航，添加目标管理和演示页面的路由 - 优化个人页面菜单项，提供目标管理的快速访问 - 编写目标管理功能实现文档，详细描述功能和组件架构
99 lines
2.3 KiB
TypeScript
99 lines
2.3 KiB
TypeScript
import { Colors } from '@/constants/Colors';
|
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
|
import React from 'react';
|
|
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
|
|
export type TimeTabType = 'day' | 'week' | 'month';
|
|
|
|
interface TimeTabSelectorProps {
|
|
selectedTab: TimeTabType;
|
|
onTabChange: (tab: TimeTabType) => void;
|
|
}
|
|
|
|
interface TabOption {
|
|
key: TimeTabType;
|
|
label: string;
|
|
}
|
|
|
|
const tabOptions: TabOption[] = [
|
|
{ key: 'day', label: '按天' },
|
|
{ key: 'week', label: '按周' },
|
|
{ key: 'month', label: '按月' },
|
|
];
|
|
|
|
export function TimeTabSelector({ selectedTab, onTabChange }: TimeTabSelectorProps) {
|
|
const theme = useColorScheme() ?? 'light';
|
|
const colorTokens = Colors[theme];
|
|
|
|
return (
|
|
<View style={[styles.container]}>
|
|
<View style={[styles.tabContainer]}>
|
|
{tabOptions.map((option) => {
|
|
const isSelected = selectedTab === option.key;
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
key={option.key}
|
|
style={[
|
|
styles.tab,
|
|
{
|
|
backgroundColor: isSelected
|
|
? colorTokens.primary
|
|
: 'transparent',
|
|
}
|
|
]}
|
|
onPress={() => onTabChange(option.key)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.tabText,
|
|
{
|
|
color: isSelected
|
|
? 'white'
|
|
: colorTokens.textSecondary,
|
|
fontWeight: isSelected ? '700' : '500',
|
|
}
|
|
]}
|
|
>
|
|
{option.label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 16,
|
|
},
|
|
tabContainer: {
|
|
flexDirection: 'row',
|
|
borderRadius: 12,
|
|
padding: 4,
|
|
shadowColor: '#000',
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 4,
|
|
elevation: 2,
|
|
},
|
|
tab: {
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 32,
|
|
borderRadius: 16,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
tabText: {
|
|
fontSize: 14,
|
|
textAlign: 'center',
|
|
},
|
|
});
|