feat: 优化食物相机界面，调整导航和取景框样式

app/food-camera.tsx

@@ -144,34 +144,35 @@ export default function FoodCameraScreen() {
     <View style={styles.container}>
       <StatusBar barStyle="light-content" backgroundColor="transparent" translucent />
 
-      {/* 相机视图 */}
+      {/* 头部导航 */}
-      <CameraView
+      <HeaderBar
-        ref={cameraRef}
+        title=""
-        style={styles.camera}
+        onBack={() => router.back()}
-        facing={facing}
+        transparent={true}
-        ratio="16:9"
+        backColor={'#333'}
-      >
+      />
-        {/* 头部导航 */}
-        <HeaderBar
-          title=""
-          onBack={() => router.back()}
-          transparent={true}
-          backColor={'#fff'}
-        />
 
-        {/* 取景框和提示文本 */}
+      {/* 主要内容区域 */}
-        <View style={styles.overlayContainer}>
+      <View style={styles.contentContainer}>
-          <Text style={styles.hintText}>确保食物在辅助框内</Text>
+        {/* 取景框容器 */}
-
+        <View style={styles.cameraFrameContainer}>
-          {/* 取景框 */}
+          <Text style={styles.hintText}>确保食物在取景框内</Text>
-          <View style={styles.viewfinderContainer}>
+          
-            <View style={styles.viewfinder}>
+          {/* 相机取景框 */}
-              {/* 四个角的装饰 */}
+          <View style={styles.cameraFrame}>
-              <View style={[styles.corner, styles.topLeft]} />
+            <CameraView
-              <View style={[styles.corner, styles.topRight]} />
+              ref={cameraRef}
-              <View style={[styles.corner, styles.bottomLeft]} />
+              style={styles.cameraView}
-              <View style={[styles.corner, styles.bottomRight]} />
+              facing={facing}
-            </View>
+            >
+              {/* 取景框装饰 */}
+              <View style={styles.viewfinderOverlay}>
+                <View style={[styles.corner, styles.topLeft]} />
+                <View style={[styles.corner, styles.topRight]} />
+                <View style={[styles.corner, styles.bottomLeft]} />
+                <View style={[styles.corner, styles.bottomRight]} />
+              </View>
+            </CameraView>
           </View>
         </View>
 
@@ -198,31 +199,15 @@ export default function FoodCameraScreen() {
         </View>
 
         {/* 底部控制栏 */}
-        <SafeAreaView style={styles.bottomContainer}>
+        <View style={styles.bottomContainer}>
           <View style={styles.controlsContainer}>
-            {/* 相册按钮 */}
-            {/* <TouchableOpacity style={styles.controlButton} onPress={pickImageFromGallery}>
-              <View style={styles.albumButton}>
-                <Ionicons name="images-outline" size={24} color="#FFF" />
-              </View>
-              <Text style={styles.controlButtonText}>相册</Text>
-            </TouchableOpacity> */}
-
             {/* 拍照按钮 */}
             <TouchableOpacity style={styles.captureButton} onPress={takePicture}>
               <View style={styles.captureButtonInner} />
             </TouchableOpacity>
-
-            {/* AR按钮 */}
-            {/* <TouchableOpacity style={styles.controlButton} onPress={handleARPress}>
-              <View style={styles.arButton}>
-                <Text style={styles.arButtonText}>AR</Text>
-              </View>
-              <Text style={styles.controlButtonText}>AR</Text>
-            </TouchableOpacity> */}
           </View>
-        </SafeAreaView>
+        </View>
-      </CameraView>
+      </View>
     </View>
   );
 }
@@ -232,6 +217,32 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#000',
   },
+  contentContainer: {
+    flex: 1,
+    paddingTop: 100,
+  },
+  cameraFrameContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  cameraFrame: {
+    width: 300,
+    height: 300,
+    borderRadius: 20,
+    overflow: 'hidden',
+    borderWidth: 3,
+    borderColor: '#FFF',
+    backgroundColor: '#000',
+  },
+  cameraView: {
+    flex: 1,
+  },
+  viewfinderOverlay: {
+    flex: 1,
+    position: 'relative',
+  },
   camera: {
     flex: 1,
   },
@@ -284,31 +295,12 @@ const styles = StyleSheet.create({
     right: 0,
     zIndex: 10,
   },
-  overlayContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingTop: 100,
-  },
   hintText: {
     color: '#FFF',
     fontSize: 16,
     fontWeight: '500',
-    marginBottom: 30,
+    marginBottom: 20,
     textAlign: 'center',
-    textShadowColor: 'rgba(0, 0, 0, 0.75)',
-    textShadowOffset: { width: 0, height: 1 },
-    textShadowRadius: 3,
-  },
-  viewfinderContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  viewfinder: {
-    width: 280,
-    height: 280,
-    position: 'relative',
   },
   corner: {
     position: 'absolute',
@@ -345,7 +337,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     paddingHorizontal: 20,
-    marginBottom: 20,
+    marginVertical: 20,
   },
   mealTypeButton: {
     alignItems: 'center',
@@ -372,11 +364,11 @@ const styles = StyleSheet.create({
     color: '#333',
   },
   bottomContainer: {
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    paddingBottom: 40,
   },
   controlsContainer: {
     flexDirection: 'row',
-    justifyContent: 'space-around',
+    justifyContent: 'center',
     alignItems: 'center',
     paddingVertical: 20,
     paddingHorizontal: 40,