feat: 移除目标管理演示页面并优化相关组件

- 删除目标管理演示页面的代码，简化项目结构
- 更新底部导航，移除目标管理演示页面的路由
- 调整相关组件的样式和逻辑，确保界面一致性
- 优化颜色常量的使用，提升视觉效果

components/ui/HeaderBar.tsx

@@ -14,6 +14,7 @@ export type HeaderBarProps = {
   showBottomBorder?: boolean;
   withSafeTop?: boolean;
   transparent?: boolean;
+  variant?: 'default' | 'elevated' | 'minimal';
 };
 
 export function HeaderBar({
@@ -24,34 +25,115 @@ export function HeaderBar({
   showBottomBorder = false,
   withSafeTop = true,
   transparent = true,
+  variant = 'default',
 }: HeaderBarProps) {
   const insets = useSafeAreaInsets();
   const colorScheme = useColorScheme() ?? 'light';
   const theme = Colors[tone ?? colorScheme];
 
+  // 根据变体确定背景色和样式
+  const getBackgroundColor = () => {
+    if (transparent) return 'transparent';
+    
+    switch (variant) {
+      case 'elevated':
+        return theme.background;
+      case 'minimal':
+        return theme.background;
+      default:
+        return theme.card;
+    }
+  };
+
+  const getBackButtonStyle = () => {
+    const baseStyle = [styles.backButton];
+    
+    switch (variant) {
+      case 'elevated':
+        return [...baseStyle, { 
+          backgroundColor: `${theme.primary}15`, // 15% 透明度
+          borderWidth: 1,
+          borderColor: `${theme.primary}20`, // 20% 透明度
+        }];
+      case 'minimal':
+        return [...baseStyle, { 
+          backgroundColor: `${theme.neutral100}80`, // 80% 透明度
+        }];
+      default:
+        return [...baseStyle, { 
+          backgroundColor: `${theme.accentGreen}20`, // 20% 透明度
+        }];
+    }
+  };
+
+  const getBackButtonIconColor = () => {
+    switch (variant) {
+      case 'elevated':
+        return theme.primary;
+      case 'minimal':
+        return theme.textSecondary;
+      default:
+        return theme.onPrimary;
+    }
+  };
+
+  const getBorderStyle = () => {
+    if (!showBottomBorder) return {};
+    
+    return {
+      borderBottomWidth: 1,
+      borderBottomColor: variant === 'elevated' 
+        ? theme.border 
+        : `${theme.border}40`, // 40% 透明度
+    };
+  };
+
   return (
     <View
       style={[
         styles.header,
         {
           paddingTop: (withSafeTop ? insets.top : 0) + 8,
-          backgroundColor: transparent ? 'transparent' : theme.card,
-          borderBottomWidth: showBottomBorder ? 1 : 0,
-          borderBottomColor: theme.border,
+          backgroundColor: getBackgroundColor(),
+          ...getBorderStyle(),
+          ...(variant === 'elevated' && {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.05,
+            shadowRadius: 3,
+            elevation: 2,
+          }),
         },
       ]}
     >
       {onBack ? (
-        <TouchableOpacity accessibilityRole="button" onPress={onBack} style={[styles.backButton, { backgroundColor: `${Colors.light.accentGreen}33` }]}>
-          <Ionicons name="chevron-back" size={20} color={theme.onPrimary} />
+        <TouchableOpacity 
+          accessibilityRole="button" 
+          onPress={onBack} 
+          style={getBackButtonStyle()}
+          activeOpacity={0.7}
+        >
+          <Ionicons 
+            name="chevron-back" 
+            size={20} 
+            color={getBackButtonIconColor()} 
+          />
         </TouchableOpacity>
       ) : (
         <View style={{ width: 32 }} />
       )}
 
-      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+      <View style={styles.titleContainer}>
         {typeof title === 'string' ? (
-          <Text style={[styles.title, { color: theme.text }]}>{title}</Text>
+          <Text style={[
+            styles.title, 
+            { 
+              color: theme.text,
+              fontWeight: variant === 'elevated' ? '700' : '800',
+            }
+          ]}>
+            {title}
+          </Text>
         ) : (
           title
         )}
@@ -68,7 +150,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     paddingHorizontal: 16,
-    paddingBottom: 10,
+    paddingBottom: 12,
+    minHeight: 44,
+    width: '100%',
   },
   backButton: {
     width: 32,
@@ -76,10 +160,25 @@ const styles = StyleSheet.create({
     borderRadius: 16,
     alignItems: 'center',
     justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  titleContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 8,
   },
   title: {
-    fontSize: 20,
-    fontWeight: '800',
+    fontSize: 18,
+    textAlign: 'center',
+    letterSpacing: -0.3,
   },
 });