diff --git a/README.md b/README.md
index 0f33d1e29e203d565ac04ced97b09d8beda676d6..ff706feb35821b12eaed7814dbc0ab4a1f5b374b 100644
--- a/README.md
+++ b/README.md
@@ -8,12 +8,22 @@ EU-Admin App </h1>
 
 > 👉 Supports hot updates
 
+## Screenshots
+
+IOS :
+
+![image-1](./doc/images/ios/1.png)
+![image-2](./doc/images/ios/2.png)
+![image-3](./doc/images/ios/3.png)
+![image-4](./doc/images/ios/4.png)
+
+Android :
+
 ![image-1](./doc/images/android/1.png)
 ![image-2](./doc/images/android/2.png)
 ![image-3](./doc/images/android/3.png)
 ![image-4](./doc/images/android/4.png)
 ![image-5](./doc/images/android/5.png)
-![image-6](./doc/images/android/6.png)
 
 ## Requirements
 
diff --git a/doc/images/android/1.png b/doc/images/android/1.png
index 24306c09f5016520a4c08a17309ee81f27de02c1..d198ac7fd6e31763c2b708110b3c7b1c65315fef 100644
Binary files a/doc/images/android/1.png and b/doc/images/android/1.png differ
diff --git a/doc/images/android/2.png b/doc/images/android/2.png
index 6ed78994070023c4ff1da5f3ec8c010f79e2b339..51db15ef911939035295da17feeeb25f98cb2dda 100644
Binary files a/doc/images/android/2.png and b/doc/images/android/2.png differ
diff --git a/doc/images/android/3.png b/doc/images/android/3.png
index 5435cfbdd78c41dc2e417cbc4c5cda2634e1e3f6..0210ba5a861f6f95b2cbafc2b3166bcf8c3ddb67 100644
Binary files a/doc/images/android/3.png and b/doc/images/android/3.png differ
diff --git a/doc/images/android/4.png b/doc/images/android/4.png
index 7c43f3daee042e447cc982d6b143aee7845d0dbe..4cb327af1a5016eed3bd6c82ba8a69067e6d7d9b 100644
Binary files a/doc/images/android/4.png and b/doc/images/android/4.png differ
diff --git a/doc/images/android/5.png b/doc/images/android/5.png
index 9a34c1775b1e9ce4e45ee17ea8b02001c09afb9b..8693cd77c469528d053df7590ac89c7fe356f28f 100644
Binary files a/doc/images/android/5.png and b/doc/images/android/5.png differ
diff --git a/doc/images/android/6.png b/doc/images/android/6.png
deleted file mode 100644
index 470a7b16af98c62991963582f0cbb7c9c88f7ec5..0000000000000000000000000000000000000000
Binary files a/doc/images/android/6.png and /dev/null differ
diff --git a/doc/images/ios/1.png b/doc/images/ios/1.png
new file mode 100644
index 0000000000000000000000000000000000000000..bbc7baaebc3feedb14b757fd47c8a1557ec12814
Binary files /dev/null and b/doc/images/ios/1.png differ
diff --git a/doc/images/ios/2.png b/doc/images/ios/2.png
new file mode 100644
index 0000000000000000000000000000000000000000..db8a49ec05abe10889b43330e2eb532f8bf57198
Binary files /dev/null and b/doc/images/ios/2.png differ
diff --git a/doc/images/ios/3.png b/doc/images/ios/3.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c7a7008a6f7e912f47c41738de3d28482b32f23
Binary files /dev/null and b/doc/images/ios/3.png differ
diff --git a/doc/images/ios/4.png b/doc/images/ios/4.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc9d223c94b187f1104b70b2163ddc4d9cf0856b
Binary files /dev/null and b/doc/images/ios/4.png differ
diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx
index bee34c73fb8be6b2d2ece2574bfe1cab29a61232..fb435996b3417f96611f44c8651a057e1a00f614 100644
--- a/src/app/(app)/index.tsx
+++ b/src/app/(app)/index.tsx
@@ -5,7 +5,6 @@ import {
   SafeAreaView,
   ScrollView,
   StatusBar,
-  StyleSheet,
   TouchableOpacity,
 } from 'react-native';
 
@@ -29,16 +28,19 @@ const ActivityItem: React.FC<ActivityItemProps> = ({
   subtitle,
   time,
 }) => (
-  <View style={styles.activityItem}>
-    <View style={[styles.activityIcon, { backgroundColor: iconBgColor }]}>
+  <View className="flex-row items-start">
+    <View
+      className="mr-3 size-9 items-center justify-center rounded-lg"
+      style={{ backgroundColor: iconBgColor }}
+    >
       <FontAwesome name={icon as any} size={16} color="white" />
     </View>
-    <View style={styles.activityContent}>
-      <View style={styles.activityHeader}>
-        <Text style={styles.activityTitle}>{title}</Text>
-        <Text style={styles.activityTime}>{time}</Text>
+    <View className="flex-1">
+      <View className="mb-1 flex-row items-center justify-between">
+        <Text className="text-sm font-medium text-gray-800">{title}</Text>
+        <Text className="text-xs text-gray-500">{time}</Text>
       </View>
-      <Text style={styles.activitySubtitle}>{subtitle}</Text>
+      <Text className="text-xs text-gray-500">{subtitle}</Text>
     </View>
   </View>
 );
@@ -57,12 +59,14 @@ const ModuleItem: React.FC<ModuleItemProps> = ({
   title,
   onPress,
 }) => (
-  <TouchableOpacity style={styles.moduleItem} onPress={onPress}>
-    <View style={[styles.moduleIcon, { backgroundColor: bgColor }]}>
+  <TouchableOpacity className="mb-4 w-[23%] items-center" onPress={onPress}>
+    <View
+      className="mb-2 size-[50px] items-center justify-center rounded-xl"
+      style={{ backgroundColor: bgColor }}
+    >
       <FontAwesome name={icon as any} size={24} color="white" />
-      {/* <Entypo name={icon as any} size={24} color="white" /> */}
     </View>
-    <Text style={styles.moduleText}>{title}</Text>
+    <Text className="text-center text-xs text-gray-500">{title}</Text>
   </TouchableOpacity>
 );
 
@@ -75,66 +79,69 @@ const Home: React.FC = () => {
   const router = useRouter();
 
   return (
-    <SafeAreaView style={styles.container}>
-      {/* <StatusBar barStyle="dark-content" backgroundColor="transparent" /> */}
+    <SafeAreaView className="flex-1 bg-gray-100">
       <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
-      {/* <FocusAwareStatusBar /> */}
 
       {/* 顶部导航 */}
-
       <NavHeader
         title="首页"
         leftShown={false}
         right={
           <TouchableOpacity
-            style={styles.notificationButton}
-            // onPress={() => navigation.navigate('Notifications')}
+            className="relative"
+            onPress={() => router.push('/notification')}
           >
             <FontAwesome name="bell" size={20} color="#6b7280" />
-            <View style={styles.notificationBadge}>
-              <Text style={styles.notificationBadgeText}>3</Text>
+            <View className="absolute -right-[5px] -top-[5px] size-4 items-center justify-center rounded-full bg-red-500">
+              <Text className="text-[10px] font-bold text-white">3</Text>
             </View>
           </TouchableOpacity>
         }
       />
 
-      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+      <ScrollView className="flex-1 p-4" showsVerticalScrollIndicator={false}>
         {/* 欢迎信息 */}
-        <View style={styles.welcomeSection}>
-          <Text style={styles.welcomeTitle}>你好，{userInfo?.UserName}</Text>
-          <Text style={styles.welcomeSubtitle}>
-            今天是{userInfo?.WeekName}，祝您工作顺利
-          </Text>
-        </View>
+        {userInfo?.WeekName && (
+          <View className="mb-6">
+            <Text className="text-2xl font-bold text-gray-800">
+              你好，{userInfo?.UserName}
+            </Text>
+            <Text className="mt-1 text-sm text-gray-500">
+              今天是{userInfo?.WeekName}，祝您工作顺利
+            </Text>
+          </View>
+        )}
 
         {/* 数据概览 */}
-        <View style={styles.statsGrid}>
-          <View style={styles.statCard}>
-            <Text style={styles.statLabel}>今日订单</Text>
-            <Text style={[styles.statValue, { color: '#0066ff' }]}>28</Text>
-            <Text style={styles.statTrend}>↑ 12.5%</Text>
+        <View className="mb-6 flex-row flex-wrap justify-between">
+          <View className="mb-3 w-[48%] rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="text-sm text-gray-500">今日订单</Text>
+            <Text className="mt-2 text-2xl font-bold text-blue-600">28</Text>
+            <Text className="mt-1 text-xs text-green-500">↑ 12.5%</Text>
           </View>
-          <View style={styles.statCard}>
-            <Text style={styles.statLabel}>生产任务</Text>
-            <Text style={[styles.statValue, { color: '#f97316' }]}>15</Text>
-            <Text style={styles.statInfo}>进行中: 8</Text>
+          <View className="mb-3 w-[48%] rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="text-sm text-gray-500">生产任务</Text>
+            <Text className="mt-2 text-2xl font-bold text-orange-500">15</Text>
+            <Text className="mt-1 text-xs text-gray-500">进行中: 8</Text>
           </View>
-          <View style={styles.statCard}>
-            <Text style={styles.statLabel}>库存预警</Text>
-            <Text style={[styles.statValue, { color: '#ef4444' }]}>3</Text>
-            <Text style={styles.statInfo}>点击查看详情</Text>
+          <View className="mb-3 w-[48%] rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="text-sm text-gray-500">库存预警</Text>
+            <Text className="mt-2 text-2xl font-bold text-red-500">3</Text>
+            <Text className="mt-1 text-xs text-gray-500">点击查看详情</Text>
           </View>
-          <View style={styles.statCard}>
-            <Text style={styles.statLabel}>质检合格率</Text>
-            <Text style={[styles.statValue, { color: '#22c55e' }]}>98.5%</Text>
-            <Text style={styles.statTrend}>↑ 1.2%</Text>
+          <View className="mb-3 w-[48%] rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="text-sm text-gray-500">质检合格率</Text>
+            <Text className="mt-2 text-2xl font-bold text-green-500">
+              98.5%
+            </Text>
+            <Text className="mt-1 text-xs text-green-500">↑ 1.2%</Text>
           </View>
         </View>
 
         {/* 功能模块 */}
-        <View style={styles.card}>
-          <Text style={styles.sectionTitle}>功能模块</Text>
-          <View style={styles.moduleGrid}>
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+          <Text className="mb-4 text-lg font-semibold">功能模块</Text>
+          <View className="flex-row flex-wrap justify-between">
             <ModuleItem
               icon="cube"
               bgColor="#3b82f6"
@@ -145,7 +152,7 @@ const Home: React.FC = () => {
               icon="cogs"
               bgColor="#3b82f6"
               title="生产管理"
-              // onPress={() => navigation.navigate('Production')}
+              onPress={() => router.push('/production')}
             />
             <ModuleItem
               icon="boxes"
@@ -163,7 +170,7 @@ const Home: React.FC = () => {
               icon="check-circle"
               bgColor="#a855f7"
               title="质量控制"
-              // onPress={() => navigation.navigate('Quality')}
+              onPress={() => router.push('/quality')}
             />
             <ModuleItem
               icon="chart-line"
@@ -183,6 +190,18 @@ const Home: React.FC = () => {
               title="物流管理"
               onPress={() => {}}
             />
+            <ModuleItem
+              icon="truck"
+              bgColor="#7423de"
+              title="工序管理"
+              onPress={() => router.push('/process')}
+            />
+            <ModuleItem
+              icon="truck"
+              bgColor="#7423de"
+              title="设备管理"
+              onPress={() => router.push('/equipment')}
+            />
             <ModuleItem
               icon="ellipsis-h"
               bgColor="#6b7280"
@@ -193,14 +212,14 @@ const Home: React.FC = () => {
         </View>
 
         {/* 最近活动 */}
-        <View style={styles.card}>
-          <View style={styles.sectionHeader}>
-            <Text style={styles.sectionTitle}>最近活动</Text>
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+          <View className="mb-4 flex-row items-center justify-between">
+            <Text className="text-lg font-semibold">最近活动</Text>
             <TouchableOpacity>
-              <Text style={styles.sectionLink}>查看全部</Text>
+              <Text className="text-sm text-blue-600">查看全部</Text>
             </TouchableOpacity>
           </View>
-          <View style={styles.activitiesContainer}>
+          <View className="space-y-4">
             <ActivityItem
               icon="clipboard-check"
               iconBgColor="#3b82f6"
@@ -226,207 +245,10 @@ const Home: React.FC = () => {
         </View>
 
         {/* 底部空间 - 为底部导航留出空间 */}
-        <View style={styles.bottomSpace} />
+        <View className="h-[70px]" />
       </ScrollView>
     </SafeAreaView>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-  },
-  notificationButton: {
-    position: 'relative',
-  },
-  notificationBadge: {
-    position: 'absolute',
-    top: -5,
-    right: -5,
-    backgroundColor: '#ef4444',
-    width: 16,
-    height: 16,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  notificationBadgeText: {
-    color: 'white',
-    fontSize: 10,
-    fontWeight: 'bold',
-  },
-  content: {
-    flex: 1,
-    padding: 16,
-  },
-  welcomeSection: {
-    marginBottom: 24,
-  },
-  welcomeTitle: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#333',
-  },
-  welcomeSubtitle: {
-    fontSize: 14,
-    color: '#6b7280',
-    marginTop: 4,
-  },
-  statsGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'space-between',
-    marginBottom: 24,
-  },
-  statCard: {
-    width: '48%',
-    backgroundColor: 'white',
-    borderRadius: 16,
-    padding: 16,
-    marginBottom: 12,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.05,
-    shadowRadius: 10,
-    elevation: 2,
-  },
-  statLabel: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  statValue: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginTop: 8,
-  },
-  statTrend: {
-    fontSize: 12,
-    color: '#22c55e',
-    marginTop: 4,
-  },
-  statInfo: {
-    fontSize: 12,
-    color: '#6b7280',
-    marginTop: 4,
-  },
-  card: {
-    backgroundColor: 'white',
-    borderRadius: 16,
-    padding: 16,
-    marginBottom: 16,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.05,
-    shadowRadius: 10,
-    elevation: 2,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    marginBottom: 16,
-  },
-  moduleGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'space-between',
-  },
-  moduleItem: {
-    width: '23%',
-    alignItems: 'center',
-    marginBottom: 16,
-  },
-  moduleIcon: {
-    width: 50,
-    height: 50,
-    borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 8,
-  },
-  moduleText: {
-    fontSize: 12,
-    color: '#6b7280',
-    textAlign: 'center',
-  },
-  sectionHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 16,
-  },
-  sectionLink: {
-    fontSize: 14,
-    color: '#0066ff',
-  },
-  activitiesContainer: {
-    gap: 16,
-  },
-  activityItem: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-  },
-  activityIcon: {
-    width: 36,
-    height: 36,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 12,
-  },
-  activityContent: {
-    flex: 1,
-  },
-  activityHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 4,
-  },
-  activityTitle: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: '#333',
-  },
-  activityTime: {
-    fontSize: 12,
-    color: '#6b7280',
-  },
-  activitySubtitle: {
-    fontSize: 13,
-    color: '#6b7280',
-  },
-  bottomSpace: {
-    height: 70,
-  },
-  navBar: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: 70,
-    backgroundColor: 'white',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-    borderTopWidth: 1,
-    borderTopColor: '#e5e7eb',
-    paddingBottom: 10, // 为底部安全区域留出空间
-  },
-  navItem: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  navIcon: {
-    marginBottom: 4,
-  },
-  navText: {
-    fontSize: 12,
-    color: '#6b7280',
-  },
-  navTextActive: {
-    color: '#0066ff',
-  },
-});
-
 export default Home;
diff --git a/src/app/(app)/inventory.tsx b/src/app/(app)/inventory.tsx
index 5b4576e4801271bba6a9b1ecb4585b30f32b0412..1914260588736132cb19dbfd548e957de4ee463a 100644
--- a/src/app/(app)/inventory.tsx
+++ b/src/app/(app)/inventory.tsx
@@ -1,81 +1,18 @@
-import { FontAwesome } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
 import React, { useState } from 'react';
+import { TextInput, TouchableOpacity } from 'react-native';
+
+import { SegmentedControl, type SegmentedControlOption } from '@/components';
 import {
-  StatusBar,
-  StyleSheet,
+  NavHeader,
+  SafeAreaView,
+  ScrollView,
   Text,
-  TextInput,
-  TouchableOpacity,
   View,
-} from 'react-native';
-
-import { SegmentedControl, type SegmentedControlOption } from '@/components';
-import { NavHeader, SafeAreaView, ScrollView } from '@/components/ui';
-
-// 状态徽章组件
-// type StatusBadgeProps = {
-//   status: string;
-//   color: string;
-//   bgColor: string;
-// };
-
-// const StatusBadge: React.FC<StatusBadgeProps> = ({ status, color, bgColor }) => (
-//   <View style={[styles.statusBadge, { backgroundColor: bgColor }]}>
-//     <Text style={[styles.statusBadgeText, { color }]}>{status}</Text>
-//   </View>
-// );
-
-// 库存项组件
-type InventoryItemProps = {
-  name: string;
-  code: string;
-  quantity: number;
-  safetyStock: number;
-  status: 'normal' | 'warning' | 'danger';
-};
-
-const InventoryItem: React.FC<InventoryItemProps> = ({
-  name,
-  code,
-  quantity,
-  safetyStock,
-  status,
-}) => {
-  let indicatorColor = '#22c55e'; // 绿色 - 正常
-  let textColor = 'black';
-
-  if (status === 'warning') {
-    indicatorColor = '#eab308'; // 黄色 - 警告
-  } else if (status === 'danger') {
-    indicatorColor = '#ef4444'; // 红色 - 危险
-    textColor = '#ef4444';
-  }
+} from '@/components/ui';
+import { FontAwesome } from '@/components/ui/icons';
 
-  return (
-    <View style={styles.inventoryItem}>
-      <View style={styles.flex1}>
-        <View style={styles.flexRow}>
-          <View
-            style={[styles.stockIndicator, { backgroundColor: indicatorColor }]}
-          />
-          <Text style={styles.itemName}>{name}</Text>
-        </View>
-        <Text style={styles.itemCode}>编号：{code}</Text>
-      </View>
-      <View style={styles.textRight}>
-        <Text
-          style={[
-            styles.itemQuantity,
-            status === 'danger' ? { color: textColor } : null,
-          ]}
-        >
-          {quantity}
-        </Text>
-        <Text style={styles.safetyStockText}>安全库存：{safetyStock}</Text>
-      </View>
-    </View>
-  );
-};
+import InventoryItem from '../inventory/item';
 
 // 预警项组件
 type AlertItemProps = {
@@ -85,29 +22,29 @@ type AlertItemProps = {
 };
 
 const AlertItem: React.FC<AlertItemProps> = ({ name, message, type }) => {
-  const bgColor = type === 'danger' ? '#fef2f2' : '#fffbeb';
+  const bgColor = type === 'danger' ? 'bg-red-50' : 'bg-amber-50';
   const iconColor = type === 'danger' ? '#ef4444' : '#eab308';
   const icon =
     type === 'danger' ? 'exclamation-circle' : 'exclamation-triangle';
 
   return (
-    <View style={[styles.alertItem, { backgroundColor: bgColor }]}>
-      <View style={styles.alertIconContainer}>
+    <View className={`mb-2 flex-row items-center rounded-lg p-3 ${bgColor}`}>
+      <View className="mr-3 size-10 items-center justify-center rounded-full bg-black/5">
         <FontAwesome name={icon} size={20} color={iconColor} />
       </View>
-      <View style={styles.flex1}>
-        <Text style={styles.alertTitle}>{name}</Text>
-        <Text style={styles.alertMessage}>{message}</Text>
+      <View className="flex-1">
+        <Text className="mb-0.5 text-base font-medium">{name}</Text>
+        <Text className="mt-0.5 text-sm text-gray-500">{message}</Text>
       </View>
       <TouchableOpacity>
-        <Text style={styles.alertAction}>补货</Text>
+        <Text className="text-sm font-medium text-blue-600">补货</Text>
       </TouchableOpacity>
     </View>
   );
 };
 
 const Inventory: React.FC = () => {
-  // const navigation = useNavigation<InventoryScreenNavigationProp>();
+  const router = useRouter();
 
   // 分段控制器选项
   const tabOptions: SegmentedControlOption[] = [
@@ -240,29 +177,24 @@ const Inventory: React.FC = () => {
   ];
 
   return (
-    <SafeAreaView style={styles.container}>
-      <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
-
+    <SafeAreaView className="flex-1 bg-gray-100">
       {/* 顶部导航 */}
       <NavHeader
         title="库存"
         leftShown={false}
         right={
           <>
-            <TouchableOpacity style={styles.headerButton}>
+            <TouchableOpacity className="ml-4">
               <FontAwesome name="search" size={18} color="#6b7280" />
             </TouchableOpacity>
-            <TouchableOpacity style={styles.headerButton}>
+            <TouchableOpacity className="ml-4">
               <FontAwesome name="filter" size={18} color="#6b7280" />
             </TouchableOpacity>
-            {/* <TouchableOpacity style={styles.headerButton}>
-              <FontAwesome name="qrcode" size={22} color="#0066ff" />
-            </TouchableOpacity> */}
           </>
         }
       />
 
-      <View style={styles.content}>
+      <View className="flex-1 px-4 pt-4">
         {/* 分段控制器 */}
         <SegmentedControl
           options={tabOptions}
@@ -271,61 +203,69 @@ const Inventory: React.FC = () => {
         />
 
         <ScrollView
-          style={styles.scrollView}
+          className="mt-4 flex-1"
           showsVerticalScrollIndicator={false}
         >
           {/* 库存概览 */}
           {selectedTabIndex === 0 && (
             <View>
               {/* 库存概览卡片 */}
-              <View style={styles.card}>
-                <Text style={styles.cardTitle}>库存概览</Text>
-                <View style={styles.statsGrid}>
-                  <View style={styles.statItem}>
-                    <Text style={[styles.statValue, { color: '#0066ff' }]}>
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+                <Text className="mb-3 text-lg font-semibold">库存概览</Text>
+                <View className="mb-4 flex-row justify-between">
+                  <View className="flex-1 items-center">
+                    <Text className="mb-1 text-2xl font-bold text-blue-600">
                       152
                     </Text>
-                    <Text style={styles.statLabel}>物料种类</Text>
+                    <Text className="text-sm text-gray-500">物料种类</Text>
                   </View>
-                  <View style={styles.statItem}>
-                    <Text style={[styles.statValue, { color: '#22c55e' }]}>
+                  <View className="flex-1 items-center">
+                    <Text className="mb-1 text-2xl font-bold text-green-500">
                       87%
                     </Text>
-                    <Text style={styles.statLabel}>库存健康度</Text>
+                    <Text className="text-sm text-gray-500">库存健康度</Text>
                   </View>
-                  <View style={styles.statItem}>
-                    <Text style={[styles.statValue, { color: '#ef4444' }]}>
+                  <View className="flex-1 items-center">
+                    <Text className="mb-1 text-2xl font-bold text-red-500">
                       3
                     </Text>
-                    <Text style={styles.statLabel}>库存预警</Text>
+                    <Text className="text-sm text-gray-500">库存预警</Text>
                   </View>
                 </View>
-                <View style={styles.infoBox}>
+                <View className="flex-row items-center rounded-lg bg-blue-50 p-3">
                   <FontAwesome
                     name="info-circle"
                     size={20}
                     color="#0066ff"
-                    style={styles.infoIcon}
+                    className="mr-3"
                   />
                   <View>
-                    <Text style={styles.infoTitle}>本月库存周转率</Text>
-                    <View style={styles.flexRow}>
-                      <Text style={styles.infoValue}>4.2</Text>
-                      <Text style={styles.infoTrend}>↑ 0.3</Text>
+                    <Text className="mb-0.5 text-sm text-gray-500">
+                      本月库存周转率
+                    </Text>
+                    <View className="flex-row items-center">
+                      <Text className="mr-2 text-lg font-semibold text-blue-600">
+                        4.2
+                      </Text>
+                      <Text className="text-sm font-medium text-green-500">
+                        ↑ 0.3
+                      </Text>
                     </View>
                   </View>
                 </View>
               </View>
 
               {/* 库存预警 */}
-              <View style={styles.card}>
-                <View style={styles.cardHeader}>
-                  <Text style={styles.cardTitle}>库存预警</Text>
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+                <View className="mb-3 flex-row items-center justify-between">
+                  <Text className="text-lg font-semibold">库存预警</Text>
                   <TouchableOpacity>
-                    <Text style={styles.cardLink}>查看全部</Text>
+                    <Text className="text-sm font-medium text-blue-600">
+                      查看全部
+                    </Text>
                   </TouchableOpacity>
                 </View>
-                <View style={styles.alertList}>
+                <View className="mt-2">
                   {alertItems.map((item, index) => (
                     <AlertItem
                       key={index}
@@ -338,12 +278,14 @@ const Inventory: React.FC = () => {
               </View>
 
               {/* 库存列表 */}
-              <Text style={styles.sectionTitle}>库存列表</Text>
+              <Text className="mb-2 mt-4 text-base font-semibold">
+                库存列表
+              </Text>
 
-              <View style={styles.card}>
-                <View style={styles.searchContainer}>
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+                <View className="relative mb-4">
                   <TextInput
-                    style={styles.searchInput}
+                    className="rounded-lg bg-gray-100 px-10 py-2.5 text-sm"
                     placeholder="搜索物料"
                     placeholderTextColor="#9ca3af"
                   />
@@ -351,7 +293,7 @@ const Inventory: React.FC = () => {
                     name="search"
                     size={16}
                     color="#9ca3af"
-                    style={styles.searchIcon}
+                    className="absolute left-3 top-3"
                   />
                 </View>
 
@@ -364,6 +306,7 @@ const Inventory: React.FC = () => {
                     quantity={item.quantity}
                     safetyStock={item.safetyStock}
                     status={item.status}
+                    onViewDetail={() => router.push(`/inventory/${index}`)}
                   />
                 ))}
               </View>
@@ -373,17 +316,17 @@ const Inventory: React.FC = () => {
           {/* 原材料 */}
           {selectedTabIndex === 1 && (
             <View>
-              <View style={styles.card}>
-                <Text style={styles.cardTitle}>原材料库存</Text>
-                <Text style={styles.cardDescription}>
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+                <Text className="mb-3 text-lg font-semibold">原材料库存</Text>
+                <Text className="mt-1 text-sm text-gray-500">
                   此处显示原材料库存信息
                 </Text>
               </View>
 
-              <View style={styles.card}>
-                <View style={styles.searchContainer}>
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+                <View className="relative mb-4">
                   <TextInput
-                    style={styles.searchInput}
+                    className="rounded-lg bg-gray-100 px-10 py-2.5 text-sm"
                     placeholder="搜索原材料"
                     placeholderTextColor="#9ca3af"
                   />
@@ -391,7 +334,7 @@ const Inventory: React.FC = () => {
                     name="search"
                     size={16}
                     color="#9ca3af"
-                    style={styles.searchIcon}
+                    className="absolute left-3 top-3"
                   />
                 </View>
 
@@ -404,6 +347,7 @@ const Inventory: React.FC = () => {
                     quantity={item.quantity}
                     safetyStock={item.safetyStock}
                     status={item.status}
+                    onViewDetail={() => router.push(`/inventory/${index}`)}
                   />
                 ))}
               </View>
@@ -413,17 +357,17 @@ const Inventory: React.FC = () => {
           {/* 半成品 */}
           {selectedTabIndex === 2 && (
             <View>
-              <View style={styles.card}>
-                <Text style={styles.cardTitle}>半成品库存</Text>
-                <Text style={styles.cardDescription}>
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+                <Text className="mb-3 text-lg font-semibold">半成品库存</Text>
+                <Text className="mt-1 text-sm text-gray-500">
                   此处显示半成品库存信息
                 </Text>
               </View>
 
-              <View style={styles.card}>
-                <View style={styles.searchContainer}>
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+                <View className="relative mb-4">
                   <TextInput
-                    style={styles.searchInput}
+                    className="rounded-lg bg-gray-100 px-10 py-2.5 text-sm"
                     placeholder="搜索半成品"
                     placeholderTextColor="#9ca3af"
                   />
@@ -431,7 +375,7 @@ const Inventory: React.FC = () => {
                     name="search"
                     size={16}
                     color="#9ca3af"
-                    style={styles.searchIcon}
+                    className="absolute left-3 top-3"
                   />
                 </View>
 
@@ -444,6 +388,7 @@ const Inventory: React.FC = () => {
                     quantity={item.quantity}
                     safetyStock={item.safetyStock}
                     status={item.status}
+                    onViewDetail={() => router.push(`/inventory/${index}`)}
                   />
                 ))}
               </View>
@@ -453,15 +398,17 @@ const Inventory: React.FC = () => {
           {/* 成品 */}
           {selectedTabIndex === 3 && (
             <View>
-              <View style={styles.card}>
-                <Text style={styles.cardTitle}>成品库存</Text>
-                <Text style={styles.cardDescription}>此处显示成品库存信息</Text>
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+                <Text className="mb-3 text-lg font-semibold">成品库存</Text>
+                <Text className="mt-1 text-sm text-gray-500">
+                  此处显示成品库存信息
+                </Text>
               </View>
 
-              <View style={styles.card}>
-                <View style={styles.searchContainer}>
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+                <View className="relative mb-4">
                   <TextInput
-                    style={styles.searchInput}
+                    className="rounded-lg bg-gray-100 px-10 py-2.5 text-sm"
                     placeholder="搜索成品"
                     placeholderTextColor="#9ca3af"
                   />
@@ -469,7 +416,7 @@ const Inventory: React.FC = () => {
                     name="search"
                     size={16}
                     color="#9ca3af"
-                    style={styles.searchIcon}
+                    className="absolute left-3 top-3"
                   />
                 </View>
 
@@ -482,6 +429,7 @@ const Inventory: React.FC = () => {
                     quantity={item.quantity}
                     safetyStock={item.safetyStock}
                     status={item.status}
+                    onViewDetail={() => router.push(`/inventory/${index}`)}
                   />
                 ))}
               </View>
@@ -491,43 +439,45 @@ const Inventory: React.FC = () => {
           {/* 库存报表 */}
           {selectedTabIndex === 4 && (
             <View>
-              <View style={styles.card}>
-                <Text style={styles.cardTitle}>库存报表</Text>
-                <Text style={styles.cardDescription}>此处显示库存报表信息</Text>
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+                <Text className="mb-3 text-lg font-semibold">库存报表</Text>
+                <Text className="mt-1 text-sm text-gray-500">
+                  此处显示库存报表信息
+                </Text>
               </View>
 
-              <View style={styles.card}>
-                <Text style={styles.cardSubtitle}>库存周转率</Text>
-                <View style={styles.reportItem}>
-                  <View style={styles.reportRow}>
-                    <Text style={styles.reportLabel}>原材料</Text>
-                    <Text style={styles.reportValue}>4.5</Text>
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+                <Text className="text-base font-medium">库存周转率</Text>
+                <View className="mt-3">
+                  <View className="flex-row justify-between border-b border-gray-100 py-2">
+                    <Text className="text-sm text-gray-500">原材料</Text>
+                    <Text className="text-sm font-medium">4.5</Text>
                   </View>
-                  <View style={styles.reportRow}>
-                    <Text style={styles.reportLabel}>半成品</Text>
-                    <Text style={styles.reportValue}>3.8</Text>
+                  <View className="flex-row justify-between border-b border-gray-100 py-2">
+                    <Text className="text-sm text-gray-500">半成品</Text>
+                    <Text className="text-sm font-medium">3.8</Text>
                   </View>
-                  <View style={styles.reportRow}>
-                    <Text style={styles.reportLabel}>成品</Text>
-                    <Text style={styles.reportValue}>5.2</Text>
+                  <View className="flex-row justify-between border-b border-gray-100 py-2">
+                    <Text className="text-sm text-gray-500">成品</Text>
+                    <Text className="text-sm font-medium">5.2</Text>
                   </View>
                 </View>
               </View>
 
-              <View style={styles.card}>
-                <Text style={styles.cardSubtitle}>库存价值分布</Text>
-                <View style={styles.reportItem}>
-                  <View style={styles.reportRow}>
-                    <Text style={styles.reportLabel}>原材料</Text>
-                    <Text style={styles.reportValue}>¥125,000</Text>
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+                <Text className="text-base font-medium">库存价值分布</Text>
+                <View className="mt-3">
+                  <View className="flex-row justify-between border-b border-gray-100 py-2">
+                    <Text className="text-sm text-gray-500">原材料</Text>
+                    <Text className="text-sm font-medium">¥125,000</Text>
                   </View>
-                  <View style={styles.reportRow}>
-                    <Text style={styles.reportLabel}>半成品</Text>
-                    <Text style={styles.reportValue}>¥85,000</Text>
+                  <View className="flex-row justify-between border-b border-gray-100 py-2">
+                    <Text className="text-sm text-gray-500">半成品</Text>
+                    <Text className="text-sm font-medium">¥85,000</Text>
                   </View>
-                  <View style={styles.reportRow}>
-                    <Text style={styles.reportLabel}>成品</Text>
-                    <Text style={styles.reportValue}>¥210,000</Text>
+                  <View className="flex-row justify-between border-b border-gray-100 py-2">
+                    <Text className="text-sm text-gray-500">成品</Text>
+                    <Text className="text-sm font-medium">¥210,000</Text>
                   </View>
                 </View>
               </View>
@@ -537,315 +487,11 @@ const Inventory: React.FC = () => {
       </View>
 
       {/* 浮动按钮 */}
-      <TouchableOpacity style={styles.floatingButton}>
+      <TouchableOpacity className="absolute bottom-4 right-4 size-14 items-center justify-center rounded-full bg-blue-600 shadow-lg">
         <FontAwesome name="plus" size={20} color="white" />
       </TouchableOpacity>
     </SafeAreaView>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-  },
-  headerButton: {
-    marginLeft: 16,
-  },
-  content: {
-    flex: 1,
-    paddingHorizontal: 16,
-    paddingTop: 16,
-  },
-  scrollView: {
-    flex: 1,
-    marginTop: 16,
-  },
-  flex1: {
-    flex: 1,
-  },
-  flexRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  stockIndicator: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    marginRight: 8,
-  },
-  itemName: {
-    fontSize: 16,
-    fontWeight: '500',
-  },
-  alertItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 12,
-    borderRadius: 8,
-    marginBottom: 8,
-  },
-  alertIconContainer: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 12,
-  },
-  alertTitle: {
-    fontSize: 16,
-    fontWeight: '500',
-    marginBottom: 2,
-  },
-  alertMessage: {
-    fontSize: 14,
-    color: '#6b7280',
-    marginTop: 2,
-  },
-  alertAction: {
-    fontSize: 14,
-    color: '#0066ff',
-    fontWeight: '500',
-  },
-  sectionTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    marginTop: 16,
-    marginBottom: 8,
-  },
-  searchContainer: {
-    position: 'relative',
-    marginBottom: 16,
-  },
-  searchInput: {
-    backgroundColor: '#f3f4f6',
-    borderRadius: 8,
-    paddingHorizontal: 40,
-    paddingVertical: 10,
-    fontSize: 14,
-  },
-  searchIcon: {
-    position: 'absolute',
-    left: 12,
-    top: 12,
-  },
-  inventoryItem: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: '#f0f0f0',
-  },
-  reportItem: {
-    marginTop: 12,
-  },
-  card: {
-    backgroundColor: 'white',
-    borderRadius: 16,
-    padding: 16,
-    marginBottom: 16,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 1,
-  },
-  cardHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  cardTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    marginBottom: 12,
-  },
-  cardSubtitle: {
-    fontSize: 16,
-    fontWeight: '500',
-  },
-  cardDescription: {
-    fontSize: 14,
-    color: '#6b7280',
-    marginTop: 4,
-  },
-  cardLink: {
-    fontSize: 14,
-    color: '#0066ff',
-    fontWeight: '500',
-  },
-  alertList: {
-    marginTop: 8,
-  },
-  statsGrid: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 16,
-  },
-  statItem: {
-    flex: 1,
-    alignItems: 'center',
-  },
-  statValue: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 4,
-  },
-  statLabel: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  infoBox: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#f0f9ff',
-    padding: 12,
-    borderRadius: 8,
-  },
-  infoIcon: {
-    marginRight: 12,
-  },
-  infoTitle: {
-    fontSize: 14,
-    color: '#6b7280',
-    marginBottom: 2,
-  },
-  infoValue: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#0066ff',
-    marginRight: 8,
-  },
-  infoTrend: {
-    fontSize: 14,
-    color: '#22c55e',
-    fontWeight: '500',
-  },
-  itemCode: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  itemQuantity: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-  safetyStockText: {
-    fontSize: 12,
-    color: '#6b7280',
-  },
-  textRight: {
-    alignItems: 'flex-end',
-  },
-  floatingButton: {
-    position: 'absolute',
-    right: 16,
-    bottom: 16,
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    backgroundColor: '#0066ff',
-    justifyContent: 'center',
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
-  },
-  reportContainer: {
-    marginTop: 12,
-  },
-  reportCard: {
-    backgroundColor: 'white',
-    borderRadius: 8,
-    padding: 16,
-    marginBottom: 12,
-  },
-  reportHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  reportTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  reportDate: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  reportRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: '#f0f0f0',
-  },
-  reportLabel: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  reportValue: {
-    fontSize: 14,
-    fontWeight: '500',
-  },
-  statusBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4,
-  },
-  statusBadgeText: {
-    fontSize: 12,
-    fontWeight: '500',
-  },
-  equipmentInfoGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    marginVertical: 12,
-  },
-  equipmentInfoItem: {
-    width: '50%',
-    marginBottom: 12,
-  },
-  equipmentInfoLabel: {
-    fontSize: 12,
-    color: '#6b7280',
-    marginBottom: 2,
-  },
-  equipmentInfoValue: {
-    fontSize: 16,
-    fontWeight: '500',
-  },
-  equipmentAlert: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#f0f9ff',
-    padding: 12,
-    borderRadius: 8,
-    marginBottom: 12,
-  },
-  equipmentAlertIcon: {
-    marginRight: 12,
-  },
-  equipmentAlertTitle: {
-    fontSize: 14,
-    fontWeight: '500',
-    marginRight: 8,
-  },
-  equipmentAlertText: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  equipmentAlertError: {
-    backgroundColor: '#fef2f2',
-  },
-  equipmentAlertTitleError: {
-    color: '#ef4444',
-  },
-});
-
 export default Inventory;
diff --git a/src/app/(app)/order.tsx b/src/app/(app)/order.tsx
index 9deb625fd1343eaaee6ab19793951a2ba5268a53..6866795bd27b26bc983a8784fca189cd8a86602d 100644
--- a/src/app/(app)/order.tsx
+++ b/src/app/(app)/order.tsx
@@ -1,8 +1,7 @@
-import { FontAwesome } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
 import React, { useState } from 'react';
 import {
   StatusBar,
-  StyleSheet,
   Text,
   TextInput,
   TouchableOpacity,
@@ -11,6 +10,7 @@ import {
 
 import { SegmentedControl, type SegmentedControlOption } from '@/components';
 import { NavHeader, SafeAreaView, ScrollView } from '@/components/ui';
+import { FontAwesome } from '@/components/ui/icons';
 
 // 状态徽章组件
 type StatusBadgeProps = {
@@ -24,8 +24,10 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({
   color,
   bgColor,
 }) => (
-  <View style={[styles.statusBadge, { backgroundColor: bgColor }]}>
-    <Text style={[styles.statusBadgeText, { color }]}>{status}</Text>
+  <View className="rounded-full px-2 py-1" style={{ backgroundColor: bgColor }}>
+    <Text className="text-xs font-medium" style={{ color }}>
+      {status}
+    </Text>
   </View>
 );
 
@@ -53,34 +55,34 @@ const OrderItem: React.FC<OrderItemProps> = ({
   statusBgColor,
   onViewDetail,
 }) => (
-  <View style={styles.orderItem}>
-    <View style={styles.flexRowBetween}>
-      <Text style={styles.orderTitle}>订单 #{orderNumber}</Text>
+  <View className="border-b border-gray-100 py-4">
+    <View className="mb-2 flex-row items-center justify-between">
+      <Text className="text-base font-medium">订单 #{orderNumber}</Text>
       <StatusBadge
         status={status}
         color={statusColor}
         bgColor={statusBgColor}
       />
     </View>
-    <Text style={styles.customerText}>客户：{customer}</Text>
-    <View style={styles.flexRowBetween}>
-      <Text style={styles.dateText}>订单日期：{orderDate}</Text>
-      <Text style={styles.dateText}>交付日期：{deliveryDate}</Text>
+    <Text className="mb-2 text-sm text-gray-500">客户：{customer}</Text>
+    <View className="mb-2 flex-row items-center justify-between">
+      <Text className="text-sm text-gray-500">订单日期：{orderDate}</Text>
+      <Text className="text-sm text-gray-500">交付日期：{deliveryDate}</Text>
     </View>
-    <View style={styles.flexRowBetween}>
-      <View style={styles.flexRow}>
-        <Text style={styles.amountLabel}>订单金额：</Text>
-        <Text style={styles.amountValue}>¥{amount}</Text>
+    <View className="flex-row items-center justify-between">
+      <View className="flex-row items-center">
+        <Text className="text-sm text-gray-500">订单金额：</Text>
+        <Text className="text-sm font-medium">¥{amount}</Text>
       </View>
       <TouchableOpacity onPress={onViewDetail}>
-        <Text style={styles.detailLink}>查看详情</Text>
+        <Text className="text-sm text-blue-600">查看详情</Text>
       </TouchableOpacity>
     </View>
   </View>
 );
 
 const Orders: React.FC = () => {
-  // const navigation = useNavigation<OrdersScreenNavigationProp>();
+  const router = useRouter();
 
   // 分段控制器选项
   const tabOptions: SegmentedControlOption[] = [
@@ -169,45 +171,57 @@ const Orders: React.FC = () => {
         return (
           <>
             {/* 订单概览 */}
-            <View style={styles.card}>
-              <Text style={styles.cardTitle}>订单概览</Text>
-              <View style={styles.statsGrid}>
-                <View style={styles.statsItem}>
-                  <Text style={[styles.statsValue, { color: '#0066ff' }]}>
+            <View className="my-4 rounded-2xl bg-white p-4 shadow-sm">
+              <Text className="mb-3 text-lg font-semibold">订单概览</Text>
+              <View className="mb-3 flex-row justify-between">
+                <View className="flex-1 items-center">
+                  <Text
+                    className="text-xl font-bold"
+                    style={{ color: '#0066ff' }}
+                  >
                     {orderStats.total}
                   </Text>
-                  <Text style={styles.statsLabel}>总订单</Text>
+                  <Text className="text-xs text-gray-500">总订单</Text>
                 </View>
-                <View style={styles.statsItem}>
-                  <Text style={[styles.statsValue, { color: '#f97316' }]}>
+                <View className="flex-1 items-center">
+                  <Text
+                    className="text-xl font-bold"
+                    style={{ color: '#f97316' }}
+                  >
                     {orderStats.pending}
                   </Text>
-                  <Text style={styles.statsLabel}>待处理</Text>
+                  <Text className="text-xs text-gray-500">待处理</Text>
                 </View>
-                <View style={styles.statsItem}>
-                  <Text style={[styles.statsValue, { color: '#9333ea' }]}>
+                <View className="flex-1 items-center">
+                  <Text
+                    className="text-xl font-bold"
+                    style={{ color: '#9333ea' }}
+                  >
                     {orderStats.processing}
                   </Text>
-                  <Text style={styles.statsLabel}>生产中</Text>
+                  <Text className="text-xs text-gray-500">生产中</Text>
                 </View>
-                <View style={styles.statsItem}>
-                  <Text style={[styles.statsValue, { color: '#22c55e' }]}>
+                <View className="flex-1 items-center">
+                  <Text
+                    className="text-xl font-bold"
+                    style={{ color: '#22c55e' }}
+                  >
                     {orderStats.completed}
                   </Text>
-                  <Text style={styles.statsLabel}>已完成</Text>
+                  <Text className="text-xs text-gray-500">已完成</Text>
                 </View>
               </View>
-              <View style={styles.completionRateCard}>
-                <View style={styles.completionRateIcon}>
+              <View className="flex-row items-center rounded-lg bg-blue-50 p-3">
+                <View className="mr-3">
                   <FontAwesome name="pie-chart" size={20} color="#0066ff" />
                 </View>
                 <View>
-                  <Text style={styles.completionRateTitle}>本月订单完成率</Text>
-                  <View style={styles.flexRow}>
-                    <Text style={styles.completionRateValue}>
+                  <Text className="text-sm font-medium">本月订单完成率</Text>
+                  <View className="flex-row items-center">
+                    <Text className="mr-2 text-lg font-bold text-blue-600">
                       {orderStats.completionRate}%
                     </Text>
-                    <Text style={styles.completionRateChange}>
+                    <Text className="text-xs text-green-500">
                       ↑ {orderStats.rateChange}%
                     </Text>
                   </View>
@@ -216,16 +230,16 @@ const Orders: React.FC = () => {
             </View>
 
             {/* 搜索框 */}
-            <View style={styles.searchContainer}>
-              <View style={styles.searchInputContainer}>
+            <View className="mb-4">
+              <View className="relative flex-row items-center">
                 <FontAwesome
                   name="search"
                   size={16}
                   color="#9ca3af"
-                  style={styles.searchIcon}
+                  className="absolute left-3 z-10"
                 />
                 <TextInput
-                  style={styles.searchInput}
+                  className="flex-1 rounded-lg border border-gray-200 bg-white py-2 pl-10 pr-4 text-sm"
                   placeholder="搜索订单号、客户名称"
                   placeholderTextColor="#9ca3af"
                 />
@@ -233,8 +247,8 @@ const Orders: React.FC = () => {
             </View>
 
             {/* 订单列表 */}
-            <Text style={styles.sectionTitle}>订单列表</Text>
-            <View style={styles.card}>
+            <Text className="mb-3 text-lg font-semibold">订单列表</Text>
+            <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
               {orderItems.map((item) => (
                 <OrderItem
                   key={item.id}
@@ -246,9 +260,7 @@ const Orders: React.FC = () => {
                   status={item.status}
                   statusColor={item.statusColor}
                   statusBgColor={item.statusBgColor}
-                  onViewDetail={() =>
-                    console.log(`查看订单 ${item.orderNumber} 详情`)
-                  }
+                  onViewDetail={() => router.push(`/order/${item.id}`)}
                 />
               ))}
             </View>
@@ -256,30 +268,30 @@ const Orders: React.FC = () => {
         );
       case 1: // 待处理
         return (
-          <View style={styles.card}>
-            <Text style={styles.cardTitle}>待处理订单</Text>
-            <Text style={styles.placeholderText}>此处显示待处理订单信息</Text>
+          <View className="my-4 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 text-lg font-semibold">待处理订单</Text>
+            <Text className="text-gray-500">此处显示待处理订单信息</Text>
           </View>
         );
       case 2: // 生产中
         return (
-          <View style={styles.card}>
-            <Text style={styles.cardTitle}>生产中订单</Text>
-            <Text style={styles.placeholderText}>此处显示生产中订单信息</Text>
+          <View className="my-4 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 text-lg font-semibold">生产中订单</Text>
+            <Text className="text-gray-500">此处显示生产中订单信息</Text>
           </View>
         );
       case 3: // 已完成
         return (
-          <View style={styles.card}>
-            <Text style={styles.cardTitle}>已完成订单</Text>
-            <Text style={styles.placeholderText}>此处显示已完成订单信息</Text>
+          <View className="my-4 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 text-lg font-semibold">已完成订单</Text>
+            <Text className="text-gray-500">此处显示已完成订单信息</Text>
           </View>
         );
       case 4: // 已取消
         return (
-          <View style={styles.card}>
-            <Text style={styles.cardTitle}>已取消订单</Text>
-            <Text style={styles.placeholderText}>此处显示已取消订单信息</Text>
+          <View className="my-4 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 text-lg font-semibold">已取消订单</Text>
+            <Text className="text-gray-500">此处显示已取消订单信息</Text>
           </View>
         );
       default:
@@ -288,7 +300,7 @@ const Orders: React.FC = () => {
   };
 
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView className="flex-1 bg-gray-100">
       <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
 
       {/* 顶部导航 */}
@@ -297,13 +309,13 @@ const Orders: React.FC = () => {
         leftShown={false}
         right={
           <>
-            <TouchableOpacity style={styles.headerButton}>
+            <TouchableOpacity className="ml-4">
               <FontAwesome name="search" size={18} color="#6b7280" />
             </TouchableOpacity>
-            <TouchableOpacity style={styles.headerButton}>
+            <TouchableOpacity className="ml-4">
               <FontAwesome name="filter" size={18} color="#6b7280" />
             </TouchableOpacity>
-            <TouchableOpacity style={styles.headerButton}>
+            <TouchableOpacity className="ml-4">
               <FontAwesome name="plus-circle" size={22} color="#0066ff" />
             </TouchableOpacity>
           </>
@@ -311,7 +323,7 @@ const Orders: React.FC = () => {
       />
 
       {/* 内容区域 */}
-      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+      <ScrollView className="flex-1 p-4" showsVerticalScrollIndicator={false}>
         {/* 分段控制器 */}
         <SegmentedControl
           options={tabOptions}
@@ -323,192 +335,15 @@ const Orders: React.FC = () => {
         {renderTabContent()}
 
         {/* 底部间距 */}
-        <View style={styles.bottomSpacer} />
+        <View className="h-20" />
       </ScrollView>
 
       {/* 浮动按钮 */}
-      <TouchableOpacity style={styles.floatingButton}>
+      <TouchableOpacity className="absolute bottom-20 right-6 size-14 items-center justify-center rounded-full bg-blue-600 shadow-lg">
         <FontAwesome name="plus" size={20} color="#ffffff" />
       </TouchableOpacity>
     </SafeAreaView>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-  },
-  flexRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  flexRowBetween: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 8,
-  },
-  headerButton: {
-    marginLeft: 16,
-  },
-  content: {
-    flex: 1,
-    padding: 16,
-  },
-  scrollView: {
-    flex: 1,
-    marginTop: 16,
-  },
-  card: {
-    marginTop: 16,
-
-    backgroundColor: '#ffffff',
-    borderRadius: 16,
-    padding: 16,
-    marginBottom: 16,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.05,
-    shadowRadius: 10,
-    elevation: 2,
-  },
-  cardTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    marginBottom: 12,
-  },
-  statsGrid: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 12,
-  },
-  statsItem: {
-    alignItems: 'center',
-    flex: 1,
-  },
-  statsValue: {
-    fontSize: 20,
-    fontWeight: '700',
-  },
-  statsLabel: {
-    fontSize: 12,
-    color: '#6b7280',
-  },
-  completionRateCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#ebf5ff',
-    borderRadius: 8,
-    padding: 12,
-  },
-  completionRateIcon: {
-    marginRight: 12,
-  },
-  completionRateTitle: {
-    fontSize: 14,
-    fontWeight: '500',
-  },
-  completionRateValue: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#0066ff',
-    marginRight: 8,
-  },
-  completionRateChange: {
-    fontSize: 12,
-    color: '#22c55e',
-  },
-  searchContainer: {
-    marginBottom: 16,
-  },
-  searchInputContainer: {
-    position: 'relative',
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  searchIcon: {
-    position: 'absolute',
-    left: 12,
-    zIndex: 1,
-  },
-  searchInput: {
-    flex: 1,
-    backgroundColor: '#ffffff',
-    borderWidth: 1,
-    borderColor: '#e5e7eb',
-    borderRadius: 8,
-    paddingVertical: 8,
-    paddingLeft: 40,
-    paddingRight: 16,
-    fontSize: 14,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    marginBottom: 12,
-  },
-  orderItem: {
-    borderBottomWidth: 1,
-    borderBottomColor: '#f0f0f0',
-    paddingVertical: 16,
-  },
-  orderTitle: {
-    fontSize: 16,
-    fontWeight: '500',
-  },
-  customerText: {
-    fontSize: 14,
-    color: '#6b7280',
-    marginBottom: 8,
-  },
-  dateText: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  amountLabel: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  amountValue: {
-    fontSize: 14,
-    fontWeight: '500',
-  },
-  detailLink: {
-    fontSize: 14,
-    color: '#0066ff',
-  },
-  statusBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 9999,
-  },
-  statusBadgeText: {
-    fontSize: 12,
-    fontWeight: '500',
-  },
-  placeholderText: {
-    color: '#6b7280',
-  },
-  floatingButton: {
-    position: 'absolute',
-    right: 24,
-    bottom: 80,
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    backgroundColor: '#0066ff',
-    alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.2,
-    shadowRadius: 8,
-    elevation: 4,
-  },
-  bottomSpacer: {
-    height: 80,
-  },
-});
-
 export default Orders;
diff --git a/src/app/(app)/production.tsx b/src/app/(app)/production.tsx
index fcba93d3e5183eb9f8b2140fcf450eb246f7bbdb..98f172e1ff0142dedfbe3c6f0dee439e352e5e7c 100644
--- a/src/app/(app)/production.tsx
+++ b/src/app/(app)/production.tsx
@@ -1,168 +1,20 @@
-import { FontAwesome } from '@expo/vector-icons';
+// import { useRouter } from 'expo-router';
 import React, { useState } from 'react';
-import {
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 
 import { SegmentedControl, type SegmentedControlOption } from '@/components';
+import {
+  Equipment,
+  Plans,
+  Process,
+  Report,
+  Task,
+} from '@/components/production';
 import { NavHeader, SafeAreaView, ScrollView } from '@/components/ui';
-
-import ReportDateSelector from '../report-date-selector';
-
-// 进度条组件
-type ProgressBarProps = {
-  progress: number;
-  color: string;
-};
-
-const ProgressBar: React.FC<ProgressBarProps> = ({ progress, color }) => (
-  <View style={styles.progressBar}>
-    <View
-      style={[
-        styles.progressValue,
-        { width: `${progress}%`, backgroundColor: color },
-      ]}
-    />
-  </View>
-);
-
-// 状态徽章组件
-type StatusBadgeProps = {
-  status: string;
-  color: string;
-  bgColor: string;
-};
-
-const StatusBadge: React.FC<StatusBadgeProps> = ({
-  status,
-  color,
-  bgColor,
-}) => (
-  <View style={[styles.statusBadge, { backgroundColor: bgColor }]}>
-    <Text style={[styles.statusBadgeText, { color }]}>{status}</Text>
-  </View>
-);
-
-// 生产计划项组件
-type PlanItemProps = {
-  title: string;
-  code: string;
-  manager: string;
-  deadline: string;
-  progress: number;
-  total: number;
-  completed: number;
-  status: string;
-  statusColor: string;
-  statusBgColor: string;
-};
-
-const PlanItem: React.FC<PlanItemProps> = ({
-  title,
-  code,
-  manager,
-  deadline,
-  progress,
-  total,
-  completed,
-  status,
-  statusColor,
-  statusBgColor,
-}) => (
-  <View style={styles.card}>
-    <View style={styles.planItemHeader}>
-      <Text style={styles.planItemTitle}>{title}</Text>
-      <StatusBadge
-        status={status}
-        color={statusColor}
-        bgColor={statusBgColor}
-      />
-    </View>
-    <Text style={styles.planItemCode}>计划编号：{code}</Text>
-    <View style={styles.planItemInfo}>
-      <Text style={styles.planItemInfoText}>负责人：{manager}</Text>
-      <Text style={styles.planItemInfoText}>截止日期：{deadline}</Text>
-    </View>
-    <View style={styles.progressContainer}>
-      <View style={styles.progressHeader}>
-        <Text style={styles.progressLabel}>完成进度</Text>
-        <Text style={styles.progressValue}>{progress}%</Text>
-      </View>
-      <ProgressBar progress={progress} color={statusColor} />
-    </View>
-    <View style={styles.planItemFooter}>
-      <View style={styles.planItemStats}>
-        <Text style={styles.planItemStatsText}>计划产量：</Text>
-        <Text style={styles.planItemStatsValue}>{total}</Text>
-        <Text style={styles.planItemStatsText}>已完成：</Text>
-        <Text style={styles.planItemStatsValue}>{completed}</Text>
-      </View>
-      <TouchableOpacity>
-        <Text style={styles.planItemLink}>详情</Text>
-      </TouchableOpacity>
-    </View>
-  </View>
-);
-
-// 工序流程节点组件
-type ProcessNodeProps = {
-  icon: string;
-  label: string;
-  status: 'completed' | 'inProgress' | 'pending';
-};
-
-const ProcessNode: React.FC<ProcessNodeProps> = ({ icon, label, status }) => {
-  let statusIcon = null;
-  let statusText = '';
-  let bgColor = '#ebf5ff';
-  let iconColor = '#0066ff';
-
-  if (status === 'completed') {
-    statusIcon = (
-      <View style={styles.statusIconCompleted}>
-        <FontAwesome name="check" size={10} color="white" />
-      </View>
-    );
-    statusText = '已完成';
-    bgColor = '#ebf5ff';
-  } else if (status === 'inProgress') {
-    statusIcon = (
-      <View style={styles.statusIconInProgress}>
-        <FontAwesome name="spinner" size={10} color="white" />
-      </View>
-    );
-    statusText = '进行中';
-    bgColor = '#dcfce7';
-    iconColor = '#22c55e';
-  } else {
-    statusText = '待开始';
-  }
-
-  return (
-    <View style={styles.processNode}>
-      <View style={[styles.processNodeCircle, { backgroundColor: bgColor }]}>
-        <FontAwesome name={icon as any} size={20} color={iconColor} />
-        {statusIcon}
-      </View>
-      <Text style={styles.processNodeLabel}>{label}</Text>
-      <Text
-        style={[
-          styles.processNodeStatus,
-          status === 'inProgress' ? styles.processNodeStatusInProgress : null,
-        ]}
-      >
-        {statusText}
-      </Text>
-    </View>
-  );
-};
+import { FontAwesome } from '@/components/ui/icons';
 
 const Production: React.FC = () => {
-  // const navigation = useNavigation<ProductionScreenNavigationProp>();
+  // const router = useRouter();
 
   // 分段控制器状态
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
@@ -175,28 +27,26 @@ const Production: React.FC = () => {
   ];
 
   return (
-    <SafeAreaView style={styles.container}>
-      <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
-
+    <SafeAreaView className="flex-1 bg-gray-100">
       {/* 顶部导航 */}
       <NavHeader
         title="生产"
         leftShown={false}
         right={
           <>
-            <TouchableOpacity style={styles.headerButton}>
+            <TouchableOpacity className="ml-4">
               <FontAwesome name="search" size={18} color="#6b7280" />
             </TouchableOpacity>
-            <TouchableOpacity style={styles.headerButton}>
+            <TouchableOpacity className="ml-4">
               <FontAwesome name="filter" size={18} color="#6b7280" />
             </TouchableOpacity>
-            <TouchableOpacity style={styles.headerButton}>
+            <TouchableOpacity className="ml-4">
               <FontAwesome name="plus-circle" size={22} color="#0066ff" />
             </TouchableOpacity>
           </>
         }
       />
-      <View style={styles.content}>
+      <View className="flex-1 p-4">
         {/* 分段控制器 */}
         <SegmentedControl
           options={tabOptions}
@@ -207,1339 +57,26 @@ const Production: React.FC = () => {
         {/* 选项卡内容 */}
         <ScrollView
           showsVerticalScrollIndicator={false}
-          style={styles.scrollView}
+          className="mt-4 flex-1"
         >
-          {selectedTabIndex === 0 && (
-            <View>
-              {/* 生产概览 */}
-              <View style={styles.card}>
-                <Text style={styles.sectionTitle}>生产概览</Text>
-                <View style={styles.statsGrid}>
-                  <View style={styles.statItem}>
-                    <Text style={[styles.statValue, { color: '#0066ff' }]}>
-                      15
-                    </Text>
-                    <Text style={styles.statLabel}>计划总数</Text>
-                  </View>
-                  <View style={styles.statItem}>
-                    <Text style={[styles.statValue, { color: '#22c55e' }]}>
-                      8
-                    </Text>
-                    <Text style={styles.statLabel}>进行中</Text>
-                  </View>
-                  <View style={styles.statItem}>
-                    <Text style={[styles.statValue, { color: '#f97316' }]}>
-                      3
-                    </Text>
-                    <Text style={styles.statLabel}>待开始</Text>
-                  </View>
-                </View>
-                <View style={styles.completionRateCard}>
-                  <FontAwesome
-                    name="line-chart"
-                    size={20}
-                    color="#0066ff"
-                    style={styles.completionRateIcon}
-                  />
-                  <View style={styles.completionRateContent}>
-                    <Text style={styles.completionRateLabel}>
-                      本月生产完成率
-                    </Text>
-                    <View style={styles.completionRateValue}>
-                      <Text style={styles.completionRatePercentage}>78.5%</Text>
-                      <Text style={styles.completionRateTrend}>↑ 5.2%</Text>
-                    </View>
-                  </View>
-                </View>
-              </View>
-
-              {/* 生产计划列表 */}
-              <Text style={styles.sectionTitle}>生产计划列表</Text>
-
-              {/* 计划项目1 */}
-              <PlanItem
-                title="智能手表主板生产计划"
-                code="PP20231128-01"
-                manager="王工程师"
-                deadline="2023-12-15"
-                progress={65}
-                total={1000}
-                completed={650}
-                status="进行中"
-                statusColor="#22c55e"
-                statusBgColor="#dcfce7"
-              />
-
-              {/* 计划项目2 */}
-              <PlanItem
-                title="智能音箱外壳注塑计划"
-                code="PP20231125-03"
-                manager="李工程师"
-                deadline="2023-12-10"
-                progress={42}
-                total={2000}
-                completed={840}
-                status="进行中"
-                statusColor="#22c55e"
-                statusBgColor="#dcfce7"
-              />
-
-              {/* 计划项目3 */}
-              <PlanItem
-                title="智能门锁电路板生产计划"
-                code="PP20231202-03"
-                manager="张工程师"
-                deadline="2023-12-25"
-                progress={0}
-                total={500}
-                completed={0}
-                status="待开始"
-                statusColor="#f97316"
-                statusBgColor="#ffedd5"
-              />
-            </View>
-          )}
-
-          {selectedTabIndex === 1 && (
-            <View>
-              {/* 任务概览 */}
-              <View style={styles.card}>
-                <Text style={styles.sectionTitle}>任务概览</Text>
-                <View style={styles.statsGrid}>
-                  <View style={styles.statItem}>
-                    <Text style={[styles.statValue, { color: '#0066ff' }]}>
-                      24
-                    </Text>
-                    <Text style={styles.statLabel}>任务总数</Text>
-                  </View>
-                  <View style={styles.statItem}>
-                    <Text style={[styles.statValue, { color: '#22c55e' }]}>
-                      12
-                    </Text>
-                    <Text style={styles.statLabel}>进行中</Text>
-                  </View>
-                  <View style={styles.statItem}>
-                    <Text style={[styles.statValue, { color: '#f97316' }]}>
-                      5
-                    </Text>
-                    <Text style={styles.statLabel}>待分配</Text>
-                  </View>
-                </View>
-                <View style={styles.completionRateCard}>
-                  <FontAwesome
-                    name="users"
-                    size={20}
-                    color="#0066ff"
-                    style={styles.completionRateIcon}
-                  />
-                  <View style={styles.completionRateContent}>
-                    <Text style={styles.completionRateLabel}>
-                      员工任务完成率
-                    </Text>
-                    <View style={styles.completionRateValue}>
-                      <Text style={styles.completionRatePercentage}>82.3%</Text>
-                      <Text style={styles.completionRateTrend}>↑ 3.7%</Text>
-                    </View>
-                  </View>
-                </View>
-              </View>
-
-              {/* 生产任务列表 */}
-              <Text style={styles.sectionTitle}>生产任务列表</Text>
-
-              {/* 任务项目1 */}
-              <View style={styles.card}>
-                <View style={styles.planItemHeader}>
-                  <Text style={styles.planItemTitle}>主板元器件贴装任务</Text>
-                  <StatusBadge
-                    status="进行中"
-                    color="#22c55e"
-                    bgColor="#dcfce7"
-                  />
-                </View>
-                <Text style={styles.planItemCode}>任务编号：TA20231205-01</Text>
-                <View style={styles.planItemInfo}>
-                  <Text style={styles.planItemInfoText}>负责人：李技术员</Text>
-                  <Text style={styles.planItemInfoText}>
-                    截止日期：2023-12-10
-                  </Text>
-                </View>
-                <View style={styles.progressContainer}>
-                  <View style={styles.progressHeader}>
-                    <Text style={styles.progressLabel}>完成进度</Text>
-                    <Text style={styles.progressValue}>70%</Text>
-                  </View>
-                  <ProgressBar progress={70} color="#22c55e" />
-                </View>
-                <View style={styles.planItemFooter}>
-                  <View style={styles.planItemStats}>
-                    <Text style={styles.planItemStatsText}>所属计划：</Text>
-                    <Text style={styles.planItemStatsValue}>PP20231128-01</Text>
-                  </View>
-                  <TouchableOpacity>
-                    <Text style={styles.planItemLink}>详情</Text>
-                  </TouchableOpacity>
-                </View>
-              </View>
+          {selectedTabIndex === 0 && <Plans />}
 
-              {/* 任务项目2 */}
-              <View style={styles.card}>
-                <View style={styles.planItemHeader}>
-                  <Text style={styles.planItemTitle}>电路板焊接任务</Text>
-                  <StatusBadge
-                    status="待分配"
-                    color="#f97316"
-                    bgColor="#ffedd5"
-                  />
-                </View>
-                <Text style={styles.planItemCode}>任务编号：TA20231205-02</Text>
-                <View style={styles.planItemInfo}>
-                  <Text style={styles.planItemInfoText}>负责人：待分配</Text>
-                  <Text style={styles.planItemInfoText}>
-                    截止日期：2023-12-12
-                  </Text>
-                </View>
-                <View style={styles.progressContainer}>
-                  <View style={styles.progressHeader}>
-                    <Text style={styles.progressLabel}>完成进度</Text>
-                    <Text style={styles.progressValue}>0%</Text>
-                  </View>
-                  <ProgressBar progress={0} color="#f97316" />
-                </View>
-                <View style={styles.planItemFooter}>
-                  <View style={styles.planItemStats}>
-                    <Text style={styles.planItemStatsText}>所属计划：</Text>
-                    <Text style={styles.planItemStatsValue}>PP20231128-01</Text>
-                  </View>
-                  <TouchableOpacity>
-                    <Text style={styles.planItemLink}>详情</Text>
-                  </TouchableOpacity>
-                </View>
-              </View>
+          {selectedTabIndex === 1 && <Task />}
 
-              {/* 任务项目3 */}
-              <View style={styles.card}>
-                <View style={styles.planItemHeader}>
-                  <Text style={styles.planItemTitle}>音箱外壳注塑任务</Text>
-                  <StatusBadge
-                    status="进行中"
-                    color="#22c55e"
-                    bgColor="#dcfce7"
-                  />
-                </View>
-                <Text style={styles.planItemCode}>任务编号：TA20231204-03</Text>
-                <View style={styles.planItemInfo}>
-                  <Text style={styles.planItemInfoText}>负责人：王技术员</Text>
-                  <Text style={styles.planItemInfoText}>
-                    截止日期：2023-12-15
-                  </Text>
-                </View>
-                <View style={styles.progressContainer}>
-                  <View style={styles.progressHeader}>
-                    <Text style={styles.progressLabel}>完成进度</Text>
-                    <Text style={styles.progressValue}>45%</Text>
-                  </View>
-                  <ProgressBar progress={45} color="#22c55e" />
-                </View>
-                <View style={styles.planItemFooter}>
-                  <View style={styles.planItemStats}>
-                    <Text style={styles.planItemStatsText}>所属计划：</Text>
-                    <Text style={styles.planItemStatsValue}>PP20231130-02</Text>
-                  </View>
-                  <TouchableOpacity>
-                    <Text style={styles.planItemLink}>详情</Text>
-                  </TouchableOpacity>
-                </View>
-              </View>
-            </View>
-          )}
+          {selectedTabIndex === 2 && <Process />}
 
-          {selectedTabIndex === 2 && (
-            <View>
-              {/* 工序概览 */}
-              <View style={styles.card}>
-                <Text style={styles.sectionTitle}>工序概览</Text>
-                <View style={styles.statsGrid}>
-                  <View style={styles.statItem}>
-                    <Text style={[styles.statValue, { color: '#0066ff' }]}>
-                      18
-                    </Text>
-                    <Text style={styles.statLabel}>工序总数</Text>
-                  </View>
-                  <View style={styles.statItem}>
-                    <Text style={[styles.statValue, { color: '#22c55e' }]}>
-                      10
-                    </Text>
-                    <Text style={styles.statLabel}>使用中</Text>
-                  </View>
-                  <View style={styles.statItem}>
-                    <Text style={[styles.statValue, { color: '#f97316' }]}>
-                      2
-                    </Text>
-                    <Text style={styles.statLabel}>待优化</Text>
-                  </View>
-                </View>
-              </View>
+          {selectedTabIndex === 3 && <Equipment />}
 
-              {/* 工序流程图 */}
-              <View style={styles.card}>
-                <View style={styles.processFlowHeader}>
-                  <Text style={styles.processFlowTitle}>
-                    智能手表生产工序流程
-                  </Text>
-                  <View style={styles.processFlowBatch}>
-                    <Text style={styles.processFlowBatchLabel}>当前批次：</Text>
-                    <Text style={styles.processFlowBatchValue}>
-                      B20231204-01
-                    </Text>
-                  </View>
-                </View>
-
-                <ScrollView
-                  horizontal
-                  showsHorizontalScrollIndicator={false}
-                  style={styles.processFlowScroll}
-                >
-                  <View style={styles.processFlow}>
-                    <ProcessNode
-                      icon="box"
-                      label="原料准备"
-                      status="completed"
-                    />
-                    <View style={styles.processFlowLineCompleted} />
-                    <ProcessNode
-                      icon="cut"
-                      label="PCB切割"
-                      status="completed"
-                    />
-                    <View style={styles.processFlowLineCompleted} />
-                    <ProcessNode
-                      icon="microchip"
-                      label="元器件贴装"
-                      status="inProgress"
-                    />
-                    <View style={styles.processFlowLinePending} />
-                    <ProcessNode
-                      icon="fire"
-                      label="回流焊接"
-                      status="pending"
-                    />
-                    <View style={styles.processFlowLinePending} />
-                    <ProcessNode
-                      icon="check-circle"
-                      label="功能测试"
-                      status="pending"
-                    />
-                  </View>
-                </ScrollView>
-
-                <View style={styles.processFlowInfo}>
-                  <FontAwesome
-                    name="info-circle"
-                    size={16}
-                    color="#0066ff"
-                    style={styles.processFlowInfoIcon}
-                  />
-                  <View>
-                    <Text style={styles.processFlowInfoText}>
-                      当前进度：
-                      <Text style={styles.processFlowInfoValue}>40%</Text> |
-                      预计完成时间：
-                      <Text style={styles.processFlowInfoValue}>
-                        2023-12-05 18:00
-                      </Text>
-                    </Text>
-                  </View>
-                </View>
-              </View>
-
-              {/* 工序列表 */}
-              <Text style={styles.sectionTitle}>工序列表</Text>
-
-              {/* 工序项目1 */}
-              <View style={styles.card}>
-                <View style={styles.planItemHeader}>
-                  <Text style={styles.planItemTitle}>元器件贴装</Text>
-                  <StatusBadge
-                    status="使用中"
-                    color="#22c55e"
-                    bgColor="#dcfce7"
-                  />
-                </View>
-                <Text style={styles.planItemCode}>工序编号：PR20231201-03</Text>
-
-                <View style={styles.processInfoGrid}>
-                  <View style={styles.processInfoItem}>
-                    <Text style={styles.processInfoLabel}>负责人</Text>
-                    <Text style={styles.processInfoValue}>王工程师</Text>
-                  </View>
-                  <View style={styles.processInfoItem}>
-                    <Text style={styles.processInfoLabel}>标准工时</Text>
-                    <Text style={styles.processInfoValue}>45分钟/批次</Text>
-                  </View>
-                </View>
-
-                <View style={styles.progressContainer}>
-                  <View style={styles.progressHeader}>
-                    <Text style={styles.progressLabel}>设备利用率</Text>
-                    <Text style={styles.progressValue}>85%</Text>
-                  </View>
-                  <ProgressBar progress={85} color="#22c55e" />
-                </View>
-
-                <View style={styles.processEquipment}>
-                  <Text style={styles.processEquipmentLabel}>关联设备</Text>
-                  <View style={styles.processEquipmentItem}>
-                    <FontAwesome
-                      name="microchip"
-                      size={16}
-                      color="#0066ff"
-                      style={styles.processEquipmentIcon}
-                    />
-                    <Text style={styles.processEquipmentText}>SMT贴片机#2</Text>
-                  </View>
-                </View>
-
-                <View style={styles.planItemFooter}>
-                  <View style={styles.planItemStats}>
-                    <Text style={styles.planItemStatsText}>良品率：</Text>
-                    <Text style={styles.planItemStatsValue}>98.3%</Text>
-                  </View>
-                  <TouchableOpacity>
-                    <Text style={styles.planItemLink}>详情</Text>
-                  </TouchableOpacity>
-                </View>
-              </View>
-
-              {/* 工序项目2 */}
-              <View style={styles.card}>
-                <View style={styles.planItemHeader}>
-                  <Text style={styles.planItemTitle}>电路板焊接</Text>
-                  <StatusBadge
-                    status="使用中"
-                    color="#22c55e"
-                    bgColor="#dcfce7"
-                  />
-                </View>
-                <Text style={styles.planItemCode}>工序编号：PR20231201-04</Text>
-
-                <View style={styles.processInfoGrid}>
-                  <View style={styles.processInfoItem}>
-                    <Text style={styles.processInfoLabel}>负责人</Text>
-                    <Text style={styles.processInfoValue}>李工程师</Text>
-                  </View>
-                  <View style={styles.processInfoItem}>
-                    <Text style={styles.processInfoLabel}>标准工时</Text>
-                    <Text style={styles.processInfoValue}>60分钟/批次</Text>
-                  </View>
-                </View>
-
-                <View style={styles.progressContainer}>
-                  <View style={styles.progressHeader}>
-                    <Text style={styles.progressLabel}>设备利用率</Text>
-                    <Text style={styles.progressValue}>75%</Text>
-                  </View>
-                  <ProgressBar progress={75} color="#22c55e" />
-                </View>
-
-                <View style={styles.processEquipment}>
-                  <Text style={styles.processEquipmentLabel}>关联设备</Text>
-                  <View style={styles.processEquipmentItem}>
-                    <FontAwesome
-                      name="fire"
-                      size={16}
-                      color="#f97316"
-                      style={styles.processEquipmentIcon}
-                    />
-                    <Text style={styles.processEquipmentText}>
-                      波峰焊接机#1
-                    </Text>
-                  </View>
-                </View>
-
-                <View style={styles.planItemFooter}>
-                  <View style={styles.planItemStats}>
-                    <Text style={styles.planItemStatsText}>良品率：</Text>
-                    <Text style={styles.planItemStatsValue}>97.5%</Text>
-                  </View>
-                  <TouchableOpacity>
-                    <Text style={styles.planItemLink}>详情</Text>
-                  </TouchableOpacity>
-                </View>
-              </View>
-            </View>
-          )}
-
-          {selectedTabIndex === 3 && (
-            <View>
-              {/* 设备概览 */}
-              <View style={styles.card}>
-                <Text style={styles.sectionTitle}>设备概览</Text>
-                <View style={styles.statsGrid}>
-                  <View style={styles.statItem}>
-                    <Text style={[styles.statValue, { color: '#0066ff' }]}>
-                      32
-                    </Text>
-                    <Text style={styles.statLabel}>设备总数</Text>
-                  </View>
-                  <View style={styles.statItem}>
-                    <Text style={[styles.statValue, { color: '#22c55e' }]}>
-                      25
-                    </Text>
-                    <Text style={styles.statLabel}>运行中</Text>
-                  </View>
-                  <View style={styles.statItem}>
-                    <Text style={[styles.statValue, { color: '#ef4444' }]}>
-                      2
-                    </Text>
-                    <Text style={styles.statLabel}>故障</Text>
-                  </View>
-                </View>
-                <View style={styles.completionRateCard}>
-                  <FontAwesome
-                    name="wrench"
-                    size={20}
-                    color="#0066ff"
-                    style={styles.completionRateIcon}
-                  />
-                  <View style={styles.completionRateContent}>
-                    <Text style={styles.completionRateLabel}>
-                      设备综合效率(OEE)
-                    </Text>
-                    <View style={styles.completionRateValue}>
-                      <Text style={styles.completionRatePercentage}>87.2%</Text>
-                      <Text style={styles.completionRateTrend}>↑ 2.1%</Text>
-                    </View>
-                  </View>
-                </View>
-              </View>
-
-              {/* 设备列表 */}
-              <Text style={styles.sectionTitle}>设备列表</Text>
-
-              {/* 设备项目1 */}
-              <View style={styles.card}>
-                <View style={styles.planItemHeader}>
-                  <Text style={styles.planItemTitle}>SMT贴片机#2</Text>
-                  <StatusBadge
-                    status="运行中"
-                    color="#22c55e"
-                    bgColor="#dcfce7"
-                  />
-                </View>
-                <Text style={styles.planItemCode}>设备编号：EQ20230501-02</Text>
-
-                <View style={styles.equipmentInfoGrid}>
-                  <View style={styles.equipmentInfoItem}>
-                    <Text style={styles.equipmentInfoLabel}>设备温度</Text>
-                    <Text style={styles.equipmentInfoValue}>42°C</Text>
-                  </View>
-                  <View style={styles.equipmentInfoItem}>
-                    <Text style={styles.equipmentInfoLabel}>电机转速</Text>
-                    <Text style={styles.equipmentInfoValue}>1200 RPM</Text>
-                  </View>
-                  <View style={styles.equipmentInfoItem}>
-                    <Text style={styles.equipmentInfoLabel}>电压</Text>
-                    <Text style={styles.equipmentInfoValue}>220V</Text>
-                  </View>
-                  <View style={styles.equipmentInfoItem}>
-                    <Text style={styles.equipmentInfoLabel}>电流</Text>
-                    <Text style={styles.equipmentInfoValue}>5.2A</Text>
-                  </View>
-                </View>
-
-                <View style={styles.equipmentAlert}>
-                  <FontAwesome
-                    name="bell"
-                    size={16}
-                    color="#0066ff"
-                    style={styles.equipmentAlertIcon}
-                  />
-                  <View>
-                    <Text style={styles.equipmentAlertTitle}>设备警报</Text>
-                    <Text style={styles.equipmentAlertText}>无异常警报</Text>
-                  </View>
-                </View>
-
-                <View style={styles.planItemFooter}>
-                  <View style={styles.planItemStats}>
-                    <Text style={styles.planItemStatsText}>今日运行：</Text>
-                    <Text style={styles.planItemStatsValue}>8.5小时</Text>
-                  </View>
-                  <TouchableOpacity>
-                    <Text style={styles.planItemLink}>详情</Text>
-                  </TouchableOpacity>
-                </View>
-              </View>
-
-              {/* 设备项目2 */}
-              <View style={styles.card}>
-                <View style={styles.planItemHeader}>
-                  <Text style={styles.planItemTitle}>波峰焊接机#1</Text>
-                  <StatusBadge
-                    status="故障"
-                    color="#ef4444"
-                    bgColor="#fee2e2"
-                  />
-                </View>
-                <Text style={styles.planItemCode}>设备编号：EQ20230602-05</Text>
-
-                <View style={styles.equipmentInfoGrid}>
-                  <View style={styles.equipmentInfoItem}>
-                    <Text style={styles.equipmentInfoLabel}>设备温度</Text>
-                    <Text style={styles.equipmentInfoValue}>68°C</Text>
-                  </View>
-                  <View style={styles.equipmentInfoItem}>
-                    <Text style={styles.equipmentInfoLabel}>电机转速</Text>
-                    <Text style={styles.equipmentInfoValue}>0 RPM</Text>
-                  </View>
-                  <View style={styles.equipmentInfoItem}>
-                    <Text style={styles.equipmentInfoLabel}>电压</Text>
-                    <Text style={styles.equipmentInfoValue}>0V</Text>
-                  </View>
-                  <View style={styles.equipmentInfoItem}>
-                    <Text style={styles.equipmentInfoLabel}>电流</Text>
-                    <Text style={styles.equipmentInfoValue}>0A</Text>
-                  </View>
-                </View>
-
-                <View
-                  style={[styles.equipmentAlert, styles.equipmentAlertError]}
-                >
-                  <FontAwesome
-                    name="exclamation-triangle"
-                    size={16}
-                    color="#ef4444"
-                    style={styles.equipmentAlertIcon}
-                  />
-                  <View>
-                    <Text
-                      style={[
-                        styles.equipmentAlertTitle,
-                        styles.equipmentAlertTitleError,
-                      ]}
-                    >
-                      设备警报
-                    </Text>
-                    <Text style={styles.equipmentAlertText}>
-                      温控系统异常，需要维修
-                    </Text>
-                  </View>
-                </View>
-
-                <View style={styles.planItemFooter}>
-                  <View style={styles.planItemStats}>
-                    <Text style={styles.planItemStatsText}>停机时间：</Text>
-                    <Text style={styles.planItemStatsValue}>2.5小时</Text>
-                  </View>
-                  <TouchableOpacity>
-                    <Text style={styles.planItemLink}>详情</Text>
-                  </TouchableOpacity>
-                </View>
-              </View>
-
-              {/* 设备维护计划 */}
-              <Text style={styles.sectionTitle}>设备维护计划</Text>
-              <View style={styles.card}>
-                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-                  <View style={styles.maintenanceTable}>
-                    <View style={styles.maintenanceTableHeader}>
-                      <Text style={styles.maintenanceTableHeaderCell}>
-                        设备名称
-                      </Text>
-                      <Text style={styles.maintenanceTableHeaderCell}>
-                        维护类型
-                      </Text>
-                      <Text style={styles.maintenanceTableHeaderCell}>
-                        计划日期
-                      </Text>
-                      <Text style={styles.maintenanceTableHeaderCell}>
-                        负责人
-                      </Text>
-                      <Text style={styles.maintenanceTableHeaderCell}>
-                        状态
-                      </Text>
-                    </View>
-                    <View style={styles.maintenanceTableRow}>
-                      <Text style={styles.maintenanceTableCell}>
-                        SMT贴片机#2
-                      </Text>
-                      <Text style={styles.maintenanceTableCell}>例行保养</Text>
-                      <Text style={styles.maintenanceTableCell}>
-                        2023-12-15
-                      </Text>
-                      <Text style={styles.maintenanceTableCell}>王工程师</Text>
-                      <View style={styles.maintenanceTableCellStatus}>
-                        <StatusBadge
-                          status="已计划"
-                          color="#0066ff"
-                          bgColor="#ebf5ff"
-                        />
-                      </View>
-                    </View>
-                    <View style={styles.maintenanceTableRow}>
-                      <Text style={styles.maintenanceTableCell}>
-                        回流焊机#3
-                      </Text>
-                      <Text style={styles.maintenanceTableCell}>故障维修</Text>
-                      <Text style={styles.maintenanceTableCell}>
-                        2023-12-05
-                      </Text>
-                      <Text style={styles.maintenanceTableCell}>张工程师</Text>
-                      <View style={styles.maintenanceTableCellStatus}>
-                        <StatusBadge
-                          status="紧急"
-                          color="#ef4444"
-                          bgColor="#fee2e2"
-                        />
-                      </View>
-                    </View>
-                    <View style={styles.maintenanceTableRow}>
-                      <Text style={styles.maintenanceTableCell}>
-                        PCB切割机#1
-                      </Text>
-                      <Text style={styles.maintenanceTableCell}>例行保养</Text>
-                      <Text style={styles.maintenanceTableCell}>
-                        2023-12-20
-                      </Text>
-                      <Text style={styles.maintenanceTableCell}>李工程师</Text>
-                      <View style={styles.maintenanceTableCellStatus}>
-                        <StatusBadge
-                          status="已计划"
-                          color="#0066ff"
-                          bgColor="#ebf5ff"
-                        />
-                      </View>
-                    </View>
-                  </View>
-                </ScrollView>
-              </View>
-            </View>
-          )}
-
-          {selectedTabIndex === 4 && (
-            <View>
-              {/* 报表概览 */}
-              <View style={styles.reportHeader}>
-                <Text style={styles.sectionTitle}>生产报表</Text>
-                <ReportDateSelector />
-              </View>
-
-              {/* 生产数据 */}
-              <View style={styles.card}>
-                <View style={styles.reportHeader}>
-                  <Text style={styles.reportTitle}>生产数据</Text>
-                  <Text style={styles.reportDate}>2023-12-05</Text>
-                </View>
-
-                <View style={styles.reportGrid}>
-                  <View style={styles.reportItem}>
-                    <Text style={styles.reportItemValue}>1,250</Text>
-                    <Text style={styles.reportItemLabel}>计划产量</Text>
-                  </View>
-                  <View style={styles.reportItem}>
-                    <Text style={styles.reportItemValue}>1,180</Text>
-                    <Text style={styles.reportItemLabel}>实际产量</Text>
-                  </View>
-                  <View style={styles.reportItem}>
-                    <Text style={styles.reportItemValue}>94.4%</Text>
-                    <Text style={styles.reportItemLabel}>计划完成率</Text>
-                  </View>
-                  <View style={styles.reportItem}>
-                    <Text style={styles.reportItemValue}>98.3%</Text>
-                    <Text style={styles.reportItemLabel}>良品率</Text>
-                  </View>
-                </View>
-
-                <View style={styles.reportChart}>
-                  <Text style={styles.reportChartTitle}>各产品线产量对比</Text>
-                  <View style={styles.chartPlaceholder}>
-                    <FontAwesome name="bar-chart" size={40} color="#0066ff" />
-                    <Text style={styles.chartPlaceholderText}>
-                      产量数据图表
-                    </Text>
-                  </View>
-                </View>
-              </View>
-
-              {/* 设备运行报表 */}
-              <View style={styles.card}>
-                <View style={styles.reportHeader}>
-                  <Text style={styles.reportTitle}>设备运行报表</Text>
-                  <Text style={styles.reportDate}>2023-12-05</Text>
-                </View>
-
-                <View style={styles.reportGrid}>
-                  <View style={styles.reportItem}>
-                    <Text style={styles.reportItemValue}>32</Text>
-                    <Text style={styles.reportItemLabel}>设备总数</Text>
-                  </View>
-                  <View style={styles.reportItem}>
-                    <Text style={styles.reportItemValue}>28</Text>
-                    <Text style={styles.reportItemLabel}>运行设备</Text>
-                  </View>
-                  <View style={styles.reportItem}>
-                    <Text style={styles.reportItemValue}>87.5%</Text>
-                    <Text style={styles.reportItemLabel}>设备利用率</Text>
-                  </View>
-                  <View style={styles.reportItem}>
-                    <Text style={styles.reportItemValue}>4.2h</Text>
-                    <Text style={styles.reportItemLabel}>平均运行</Text>
-                  </View>
-                </View>
-
-                <View style={styles.reportChart}>
-                  <Text style={styles.reportChartTitle}>设备运行状态分布</Text>
-                  <View style={styles.chartPlaceholder}>
-                    <FontAwesome name="pie-chart" size={40} color="#0066ff" />
-                    <Text style={styles.chartPlaceholderText}>
-                      设备状态图表
-                    </Text>
-                  </View>
-                </View>
-              </View>
-
-              {/* 报表下载 */}
-              <View style={styles.card}>
-                <Text style={styles.sectionTitle}>生产报表</Text>
-                <TouchableOpacity style={styles.reportDownloadButton}>
-                  <FontAwesome
-                    name="file-pdf-o"
-                    size={20}
-                    color="#ef4444"
-                    style={styles.reportDownloadIcon}
-                  />
-                  <Text style={styles.reportDownloadText}>
-                    下载本月生产报表
-                  </Text>
-                </TouchableOpacity>
-              </View>
-            </View>
-          )}
+          {selectedTabIndex === 4 && <Report />}
         </ScrollView>
       </View>
 
       {/* 浮动按钮 */}
-      <TouchableOpacity style={styles.floatingButton}>
+      <TouchableOpacity className="absolute bottom-20 right-6 size-14 items-center justify-center rounded-full bg-blue-600 shadow-lg">
         <FontAwesome name="plus" size={24} color="white" />
       </TouchableOpacity>
     </SafeAreaView>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-  },
-  headerButton: {
-    marginLeft: 16,
-  },
-
-  scrollView: {
-    flex: 1,
-    marginTop: 16,
-  },
-  floatingButton: {
-    position: 'absolute',
-    right: 24,
-    bottom: 80,
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    backgroundColor: '#0066ff',
-    alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
-  },
-  content: {
-    flex: 1,
-    paddingHorizontal: 16,
-    paddingTop: 16,
-    paddingBottom: 16,
-  },
-  card: {
-    backgroundColor: 'white',
-    borderRadius: 16,
-    padding: 16,
-    marginBottom: 16,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.05,
-    shadowRadius: 8,
-    elevation: 2,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    marginBottom: 12,
-    color: '#333',
-  },
-  statsGrid: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 12,
-  },
-  statItem: {
-    alignItems: 'center',
-    flex: 1,
-  },
-  statValue: {
-    fontSize: 24,
-    fontWeight: 'bold',
-  },
-  statLabel: {
-    fontSize: 12,
-    color: '#6b7280',
-    marginTop: 4,
-  },
-  completionRateCard: {
-    backgroundColor: '#ebf5ff',
-    borderRadius: 12,
-    padding: 12,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  completionRateIcon: {
-    marginRight: 12,
-  },
-  completionRateContent: {
-    flex: 1,
-  },
-  completionRateLabel: {
-    fontSize: 14,
-    fontWeight: '500',
-  },
-  completionRateValue: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  completionRatePercentage: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#0066ff',
-    marginRight: 8,
-  },
-  completionRateTrend: {
-    fontSize: 12,
-    color: '#22c55e',
-  },
-  planItemHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    marginBottom: 8,
-  },
-  planItemTitle: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#333',
-  },
-  statusBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 999,
-  },
-  statusBadgeText: {
-    fontSize: 12,
-    fontWeight: '500',
-  },
-  planItemCode: {
-    fontSize: 14,
-    color: '#6b7280',
-    marginBottom: 8,
-  },
-  planItemInfo: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 12,
-  },
-  planItemInfoText: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  progressContainer: {
-    marginBottom: 8,
-  },
-  progressHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 4,
-  },
-  progressLabel: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  progressBar: {
-    height: 6,
-    backgroundColor: '#e5e7eb',
-    borderRadius: 3,
-    overflow: 'hidden',
-  },
-  progressValue: {
-    height: '100%',
-    borderRadius: 3,
-  },
-  planItemFooter: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  planItemStats: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  planItemStatsText: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  planItemStatsValue: {
-    fontSize: 14,
-    fontWeight: '500',
-    marginRight: 12,
-  },
-  planItemLink: {
-    color: '#0066ff',
-    fontSize: 14,
-  },
-  tabContent: {
-    padding: 16,
-    backgroundColor: 'white',
-    borderRadius: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-    minHeight: 200,
-  },
-  tabContentText: {
-    fontSize: 16,
-    color: '#6b7280',
-  },
-  // 工序流程图样式
-  processFlowHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  processFlowTitle: {
-    fontSize: 16,
-    fontWeight: '500',
-  },
-  processFlowBatch: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  processFlowBatchLabel: {
-    fontSize: 14,
-    color: '#0066ff',
-    fontWeight: '500',
-  },
-  processFlowBatchValue: {
-    fontSize: 14,
-  },
-  processFlowScroll: {
-    marginBottom: 12,
-  },
-  processFlow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 8,
-    minWidth: '100%',
-  },
-  processNode: {
-    alignItems: 'center',
-    width: 64,
-    marginHorizontal: 8,
-  },
-  processNodeCircle: {
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 8,
-    position: 'relative',
-  },
-  statusIconCompleted: {
-    position: 'absolute',
-    top: -4,
-    right: -4,
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    backgroundColor: '#22c55e',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  statusIconInProgress: {
-    position: 'absolute',
-    top: -4,
-    right: -4,
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    backgroundColor: '#0066ff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  processNodeLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    marginBottom: 2,
-  },
-  processNodeStatus: {
-    fontSize: 12,
-    color: '#6b7280',
-  },
-  processNodeStatusInProgress: {
-    color: '#0066ff',
-  },
-  processFlowLineCompleted: {
-    width: 48,
-    height: 2,
-    backgroundColor: '#22c55e',
-  },
-  processFlowLinePending: {
-    width: 48,
-    height: 2,
-    backgroundColor: '#e5e7eb',
-  },
-  processFlowInfo: {
-    backgroundColor: '#ebf5ff',
-    borderRadius: 12,
-    padding: 12,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  processFlowInfoIcon: {
-    marginRight: 8,
-  },
-  processFlowInfoText: {
-    fontSize: 14,
-  },
-  processFlowInfoValue: {
-    fontWeight: '500',
-  },
-  // 工序管理样式
-  processInfoGrid: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 12,
-  },
-  processInfoItem: {
-    flex: 1,
-  },
-  processInfoLabel: {
-    fontSize: 12,
-    color: '#6b7280',
-    marginBottom: 4,
-  },
-  processInfoValue: {
-    fontSize: 14,
-    fontWeight: '500',
-  },
-  processEquipment: {
-    backgroundColor: '#ebf5ff',
-    borderRadius: 12,
-    padding: 12,
-    marginBottom: 12,
-  },
-  processEquipmentLabel: {
-    fontSize: 14,
-    fontWeight: '500',
-    marginBottom: 8,
-  },
-  processEquipmentItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  processEquipmentIcon: {
-    marginRight: 8,
-  },
-  processEquipmentText: {
-    fontSize: 14,
-  },
-  // 设备管理样式
-  equipmentInfoGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    marginBottom: 12,
-  },
-  equipmentInfoItem: {
-    width: '50%',
-    marginBottom: 8,
-  },
-  equipmentInfoLabel: {
-    fontSize: 12,
-    color: '#6b7280',
-    marginBottom: 4,
-  },
-  equipmentInfoValue: {
-    fontSize: 14,
-    fontWeight: '500',
-  },
-  equipmentAlert: {
-    backgroundColor: '#ebf5ff',
-    borderRadius: 12,
-    padding: 12,
-    marginBottom: 12,
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-  },
-  equipmentAlertError: {
-    backgroundColor: '#fee2e2',
-  },
-  equipmentAlertIcon: {
-    marginRight: 8,
-    marginTop: 2,
-  },
-  equipmentAlertTitle: {
-    fontSize: 14,
-    fontWeight: '500',
-    marginBottom: 4,
-  },
-  equipmentAlertTitleError: {
-    color: '#ef4444',
-  },
-  equipmentAlertText: {
-    fontSize: 14,
-  },
-  // 设备维护计划表格样式
-  maintenanceTable: {
-    width: '100%',
-  },
-  maintenanceTableHeader: {
-    flexDirection: 'row',
-    backgroundColor: '#f3f4f6',
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: '#e5e7eb',
-  },
-  maintenanceTableHeaderCell: {
-    width: 120,
-    paddingHorizontal: 8,
-    fontSize: 12,
-    fontWeight: '500',
-    color: '#6b7280',
-    textTransform: 'uppercase',
-  },
-  maintenanceTableRow: {
-    flexDirection: 'row',
-    borderBottomWidth: 1,
-    borderBottomColor: '#e5e7eb',
-    paddingVertical: 8,
-  },
-  maintenanceTableCell: {
-    width: 120,
-    paddingHorizontal: 8,
-    fontSize: 14,
-  },
-  maintenanceTableCellStatus: {
-    width: 120,
-    paddingHorizontal: 8,
-    justifyContent: 'center',
-  },
-  // 报表样式
-  reportDateSelector: {
-    flexDirection: 'row',
-    backgroundColor: '#f3f4f6',
-    borderRadius: 8,
-    padding: 4,
-    marginTop: 12,
-  },
-  reportDateButton: {
-    flex: 1,
-    paddingVertical: 8,
-    alignItems: 'center',
-    borderRadius: 6,
-  },
-  reportDateButtonActive: {
-    backgroundColor: 'white',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.1,
-    shadowRadius: 2,
-    elevation: 1,
-  },
-  reportDateButtonText: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  reportDateButtonTextActive: {
-    color: '#0066ff',
-    fontWeight: '500',
-  },
-  reportHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  reportTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  reportDate: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  reportGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    marginBottom: 16,
-  },
-  reportItem: {
-    width: '50%',
-    marginBottom: 12,
-  },
-  reportItemValue: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#0066ff',
-    marginBottom: 4,
-  },
-  reportItemLabel: {
-    fontSize: 12,
-    color: '#6b7280',
-  },
-  reportChart: {
-    marginBottom: 12,
-  },
-  reportChartTitle: {
-    fontSize: 14,
-    fontWeight: '500',
-    marginBottom: 8,
-  },
-  chartPlaceholder: {
-    height: 160,
-    backgroundColor: '#f9fafb',
-    borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  chartPlaceholderText: {
-    fontSize: 14,
-    color: '#6b7280',
-    marginTop: 8,
-  },
-  reportDownloadButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: '#e5e7eb',
-  },
-  reportDownloadIcon: {
-    marginRight: 12,
-  },
-  reportDownloadText: {
-    fontSize: 14,
-    color: '#333',
-  },
-});
-
 export default Production;
diff --git a/src/app/(app)/profile.tsx b/src/app/(app)/profile.tsx
index de2d2cc9a12f2ffc8aa79af886f5d2a2cd2a2f0f..99379d8e87aff4f48a8164714803e164508cff3c 100644
--- a/src/app/(app)/profile.tsx
+++ b/src/app/(app)/profile.tsx
@@ -1,12 +1,6 @@
 import { Env } from '@env';
-import { Link } from 'expo-router';
-import { useRouter } from 'expo-router';
-import {
-  Image,
-  SafeAreaView,
-  StyleSheet,
-  TouchableOpacity,
-} from 'react-native';
+import { Link, useRouter } from 'expo-router';
+import { Image, SafeAreaView, TouchableOpacity } from 'react-native';
 
 import { NavHeader, ScrollView, Text, View } from '@/components/ui';
 import { FontAwesome } from '@/components/ui/icons';
@@ -15,6 +9,15 @@ import { userInfo as user } from '@/lib/user';
 
 import SettingItem from '../settings/components/setting-item';
 
+/**
+ * 个人资料页面
+ *
+ * 展示用户信息、工作统计和功能菜单，包括：
+ * 1. 用户信息卡片：头像、姓名、角色、徽章和统计数据
+ * 2. 功能菜单：个人资料、账号安全、消息通知等
+ * 3. 工作统计：任务完成率、计划执行率、质检合格率
+ * 4. 退出登录按钮
+ */
 export default function Settings() {
   const signOut = useAuth.use.signOut();
   const userInfo = user.use.userInfo();
@@ -30,9 +33,8 @@ export default function Settings() {
   return (
     <>
       {/* <FocusAwareStatusBar /> */}
-      <SafeAreaView style={styles.container}>
+      <SafeAreaView className="flex-1 bg-gray-100">
         {/* 顶部导航 */}
-
         <NavHeader
           title="我的"
           leftShown={false}
@@ -42,57 +44,55 @@ export default function Settings() {
             </Link>
           }
         />
-        <ScrollView style={styles.content}>
+        <ScrollView className="flex-1 p-4 pb-[86px]">
           {/* 用户信息卡片 */}
-          <View style={styles.card}>
-            <View style={styles.userInfoContainer}>
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+            <View className="flex-row items-center">
               <Image
                 source={{
                   uri: avatarFileUrl,
                 }}
-                style={styles.avatar}
+                className="mr-4 size-16 rounded-full"
               />
-              <View style={styles.userInfo}>
-                <Text style={styles.userName}>{userInfo?.UserName}</Text>
-                <Text style={styles.userRole}>生产部门 · 经理</Text>
-                <View style={styles.badgeContainer}>
-                  <View style={styles.adminBadge}>
-                    <Text style={styles.adminBadgeText}>管理员</Text>
+              <View className="flex-1">
+                <Text className="text-xl font-bold">{userInfo?.UserName}</Text>
+                <Text className="text-sm text-gray-500">生产部门 · 经理</Text>
+                <View className="mt-1 flex-row">
+                  <View className="rounded-xl bg-blue-100 px-2 py-0.5">
+                    <Text className="text-xs text-blue-800">管理员</Text>
                   </View>
-                  <View style={styles.verifiedBadge}>
-                    <Text style={styles.verifiedBadgeText}>已认证</Text>
+                  <View className="ml-2 rounded-xl bg-green-100 px-2 py-0.5">
+                    <Text className="text-xs text-green-800">已认证</Text>
                   </View>
                 </View>
               </View>
             </View>
 
-            <View style={styles.statsContainer}>
-              <View style={styles.statItem}>
-                <Text style={styles.statValue}>28</Text>
-                <Text style={styles.statLabel}>待处理任务</Text>
+            <View className="mt-4 flex-row border-t border-gray-100 pt-4">
+              <View className="flex-1 items-center">
+                <Text className="text-lg font-bold">28</Text>
+                <Text className="text-xs text-gray-500">待处理任务</Text>
               </View>
-              <View style={styles.statItem}>
-                <Text style={styles.statValue}>15</Text>
-                <Text style={styles.statLabel}>今日完成</Text>
+              <View className="flex-1 items-center">
+                <Text className="text-lg font-bold">15</Text>
+                <Text className="text-xs text-gray-500">今日完成</Text>
               </View>
-              <View style={styles.statItem}>
-                <Text style={styles.statValue}>98%</Text>
-                <Text style={styles.statLabel}>任务完成率</Text>
+              <View className="flex-1 items-center">
+                <Text className="text-lg font-bold">98%</Text>
+                <Text className="text-xs text-gray-500">任务完成率</Text>
               </View>
             </View>
           </View>
 
           {/* 功能菜单 */}
-          <View style={styles.card}>
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
             <SettingItem
               icon="user-edit"
               iconBgColor="#3b82f6"
               title="测试设备信息"
               subtitle="修改个人信息和联系方式"
               // text="profile.about"
-              onPress={() => {
-                router.push('/test/device');
-              }}
+              onPress={() => router.push('/test/device')}
             />
             <SettingItem
               icon="user-edit"
@@ -115,16 +115,15 @@ export default function Settings() {
               iconBgColor="#a855f7"
               title="消息通知"
               subtitle="设置接收的通知类型"
-              onPress={() => {}}
-              // text="profile.about"
+              onPress={() => router.push('/notification')}
               isLast={true}
             />
           </View>
 
           {/* 工作统计 */}
-          <View style={styles.card}>
-            <Text style={styles.sectionTitle}>工作统计</Text>
-            <View style={styles.progressContainer}>
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 text-lg font-semibold">工作统计</Text>
+            <View className="mt-1">
               <ProgressBar label="本月任务完成率" value={85} color="#3b82f6" />
               <ProgressBar label="生产计划执行率" value={92} color="#22c55e" />
               <ProgressBar label="质检合格率" value={98} color="#a855f7" />
@@ -133,11 +132,10 @@ export default function Settings() {
 
           {/* 退出登录按钮 */}
           <TouchableOpacity
-            style={styles.logoutButton}
+            className="mb-8 mt-6 items-center rounded-xl border border-gray-200 bg-red-600 py-3"
             onPress={() => signOut()}
-            className="m-10"
           >
-            <Text style={styles.logoutButtonText} tx="settings.logout" />
+            <Text className="font-medium text-white" tx="settings.logout" />
           </TouchableOpacity>
         </ScrollView>
       </SafeAreaView>
@@ -145,7 +143,13 @@ export default function Settings() {
   );
 }
 
-// 进度条组件
+/**
+ * 进度条组件
+ *
+ * @param label - 进度条标签
+ * @param value - 进度值（0-100）
+ * @param color - 进度条颜色
+ */
 type ProgressBarProps = {
   label: string;
   value: number;
@@ -153,154 +157,16 @@ type ProgressBarProps = {
 };
 
 const ProgressBar: React.FC<ProgressBarProps> = ({ label, value, color }) => (
-  <View style={styles.progressItem}>
-    <View style={styles.progressHeader}>
-      <Text style={styles.progressLabel}>{label}</Text>
-      <Text style={styles.progressValue}>{value}%</Text>
+  <View className="mb-3">
+    <View className="mb-1 flex-row justify-between">
+      <Text className="text-sm">{label}</Text>
+      <Text className="text-sm font-medium">{value}%</Text>
     </View>
-    <View style={styles.progressTrack}>
+    <View className="h-2 overflow-hidden rounded bg-gray-200">
       <View
-        style={[
-          styles.progressFill,
-          { width: `${value}%`, backgroundColor: color },
-        ]}
+        className="h-full rounded"
+        style={{ width: `${value}%`, backgroundColor: color }}
       />
     </View>
   </View>
 );
-// 样式
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-  },
-  content: {
-    flex: 1,
-    padding: 16,
-    paddingBottom: 86, // 为底部导航留出空间
-  },
-  card: {
-    backgroundColor: 'white',
-    borderRadius: 16,
-    padding: 16,
-    marginBottom: 16,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.05,
-    shadowRadius: 10,
-    elevation: 2,
-  },
-  userInfoContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  avatar: {
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    marginRight: 16,
-  },
-  userInfo: {
-    flex: 1,
-  },
-  userName: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  userRole: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  badgeContainer: {
-    flexDirection: 'row',
-    marginTop: 4,
-  },
-  adminBadge: {
-    backgroundColor: '#dbeafe',
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 12,
-  },
-  adminBadgeText: {
-    fontSize: 12,
-    color: '#1e40af',
-  },
-  verifiedBadge: {
-    backgroundColor: '#dcfce7',
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 12,
-    marginLeft: 8,
-  },
-  verifiedBadgeText: {
-    fontSize: 12,
-    color: '#166534',
-  },
-  statsContainer: {
-    flexDirection: 'row',
-    marginTop: 16,
-    paddingTop: 16,
-    borderTopWidth: 1,
-    borderTopColor: '#f3f4f6',
-  },
-  statItem: {
-    flex: 1,
-    alignItems: 'center',
-  },
-  statValue: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-  statLabel: {
-    fontSize: 12,
-    color: '#6b7280',
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    marginBottom: 12,
-  },
-  progressContainer: {
-    marginTop: 4,
-  },
-  progressItem: {
-    marginBottom: 12,
-  },
-  progressHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 4,
-  },
-  progressLabel: {
-    fontSize: 14,
-  },
-  progressValue: {
-    fontSize: 14,
-    fontWeight: '500',
-  },
-  progressTrack: {
-    height: 8,
-    backgroundColor: '#e5e7eb',
-    borderRadius: 4,
-    overflow: 'hidden',
-  },
-  progressFill: {
-    height: '100%',
-    borderRadius: 4,
-  },
-  logoutButton: {
-    backgroundColor: '#dc2626',
-    borderWidth: 1,
-    borderColor: '#e5e7eb',
-    borderRadius: 12,
-    paddingVertical: 12,
-    alignItems: 'center',
-    marginTop: 24,
-    marginBottom: 30,
-  },
-  logoutButtonText: {
-    color: '#FFFFFF',
-    fontWeight: '500',
-    // fontSize: 16,
-  },
-});
diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
index 1f61ee51d293174419231d6d73888c54479ef3cb..b1ef2ab8eb3da0484b514c2cabc5fbdabbd5154e 100644
--- a/src/app/_layout.tsx
+++ b/src/app/_layout.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable max-lines-per-function */
-// Import  global CSS file
+// 导入全局CSS文件
 import '../../global.css';
 
 import { Provider, Toast } from '@ant-design/react-native';
@@ -9,7 +9,7 @@ import { Stack } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
 import * as Updates from 'expo-updates';
 import React, { useEffect } from 'react';
-import { Platform, StyleSheet } from 'react-native';
+import { Platform } from 'react-native';
 import { getUniqueId } from 'react-native-device-info';
 import FlashMessage from 'react-native-flash-message';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
@@ -23,22 +23,34 @@ import { useThemeConfig } from '@/lib/use-theme-config';
 
 export { ErrorBoundary } from 'expo-router';
 
+// 路由设置
 export const unstable_settings = {
   initialRouteName: '(app)',
 };
 
-hydrateAuth();
-loadSelectedTheme();
-// Prevent the splash screen from auto-hiding before asset loading is complete.
+// 初始化应用状态
+hydrateAuth(); // 恢复认证状态
+loadSelectedTheme(); // 加载用户选择的主题
+
+// 防止启动屏幕在资源加载完成前自动隐藏
 SplashScreen.preventAutoHideAsync();
-// Set the animation options. This is optional.
+// 设置动画选项（可选）
 SplashScreen.setOptions({
   duration: 500,
   fade: true,
 });
+// 配置Toast提示的默认持续时间
 Toast.config({ duration: 2 });
 
+/**
+ * 应用根布局组件
+ * 负责初始化应用环境、检查更新和设置全局提供者
+ */
 export default function RootLayout() {
+  /**
+   * 检查应用更新
+   * 如果有可用更新，自动下载并重新加载应用
+   */
   const checkForUpdate = async () => {
     try {
       const update = await Updates.checkForUpdateAsync();
@@ -49,6 +61,7 @@ export default function RootLayout() {
         await Updates.reloadAsync();
       }
     } catch (error) {
+      // 错误处理（已注释）
       // alert('检查更新失败:' + error);
       // if (error instanceof Error) {
       //   alert('错误信息:' + error.message);
@@ -56,15 +69,20 @@ export default function RootLayout() {
       // }
     }
   };
+
+  // 应用启动时执行的操作
   useEffect(() => {
     if (Platform.OS !== 'web') {
+      // 检查应用更新
       checkForUpdate();
+      // 获取设备唯一ID并记录设备信息
       getUniqueId().then((uniqueId) => {
         setUniqueId(uniqueId);
         recordDevice(uniqueId);
       });
     }
   });
+
   return (
     <Provider>
       <Providers>
@@ -85,13 +103,16 @@ export default function RootLayout() {
   );
 }
 
+/**
+ * 全局提供者组件
+ * 包装所有需要的上下文提供者，如主题、API、键盘等
+ * @param {Object} props - 组件属性
+ * @param {React.ReactNode} props.children - 子组件
+ */
 function Providers({ children }: { children: React.ReactNode }) {
   const theme = useThemeConfig();
   return (
-    <GestureHandlerRootView
-      style={styles.container}
-      className={theme.dark ? `dark` : undefined}
-    >
+    <GestureHandlerRootView className={`flex-1 ${theme.dark ? 'dark' : ''}`}>
       <KeyboardProvider>
         <ThemeProvider value={theme}>
           <APIProvider>
@@ -105,9 +126,3 @@ function Providers({ children }: { children: React.ReactNode }) {
     </GestureHandlerRootView>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
diff --git a/src/app/equipment/[id].tsx b/src/app/equipment/[id].tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cffbe31610780f4932545bf3afb49d4125e89887
--- /dev/null
+++ b/src/app/equipment/[id].tsx
@@ -0,0 +1,367 @@
+import React, { useState } from 'react';
+import { SafeAreaView, TouchableOpacity } from 'react-native';
+
+import { NavHeader, ScrollView, Text, View } from '@/components/ui';
+import { FontAwesome } from '@/components/ui/icons';
+
+const EquipmentDetail = () => {
+  const [activeTab, setActiveTab] = useState('running-data');
+
+  // 切换选项卡
+  const handleTabChange = (tabId: string) => {
+    setActiveTab(tabId);
+  };
+
+  return (
+    <SafeAreaView className="flex-1 bg-gray-50">
+      <NavHeader title="设备明细" />
+      <ScrollView className="flex-1 p-4">
+        {/* 设备基本信息卡片 */}
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+          <View className="mb-3 flex-row items-start justify-between">
+            <Text className="text-lg font-semibold">贴片机 #SMT-2023-01</Text>
+            <View className="rounded-full bg-green-100 px-2 py-1">
+              <Text className="text-xs font-medium text-green-800">运行中</Text>
+            </View>
+          </View>
+
+          <View className="mb-4 flex-row flex-wrap">
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">负责人</Text>
+              <Text className="text-sm font-medium">张工程师</Text>
+            </View>
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">位置</Text>
+              <Text className="text-sm font-medium">生产车间A区</Text>
+            </View>
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">品牌型号</Text>
+              <Text className="text-sm font-medium">松下 NPM-W2</Text>
+            </View>
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">购入日期</Text>
+              <Text className="text-sm font-medium">2022-05-15</Text>
+            </View>
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">运行状态</Text>
+              <Text className="text-sm font-medium text-green-600">正常</Text>
+            </View>
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">今日产能</Text>
+              <Text className="text-sm font-medium">850件</Text>
+            </View>
+          </View>
+
+          <View className="rounded-lg bg-blue-50 p-3">
+            <View className="flex-row items-center">
+              <FontAwesome
+                name="bell"
+                size={16}
+                color="#3b82f6"
+                className="mr-2"
+              />
+              <View>
+                <Text className="text-sm font-medium">设备警报</Text>
+                <Text className="text-sm">无异常警报</Text>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        {/* 选项卡 - 分段控制器样式 */}
+        <View className="mb-10 flex-row rounded-lg bg-gray-200 p-1">
+          <TouchableOpacity
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'running-data' ? 'bg-white' : ''}`}
+            onPress={() => handleTabChange('running-data')}
+          >
+            <Text
+              className={`text-center text-sm ${activeTab === 'running-data' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+            >
+              运行数据
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'maintenance-records' ? 'bg-white' : ''}`}
+            onPress={() => handleTabChange('maintenance-records')}
+          >
+            <Text
+              className={`text-center text-sm ${activeTab === 'maintenance-records' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+            >
+              维护记录
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'performance-params' ? 'bg-white' : ''}`}
+            onPress={() => handleTabChange('performance-params')}
+          >
+            <Text
+              className={`text-center text-sm ${activeTab === 'performance-params' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+            >
+              性能参数
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'fault-records' ? 'bg-white' : ''}`}
+            onPress={() => handleTabChange('fault-records')}
+          >
+            <Text
+              className={`text-center text-sm ${activeTab === 'fault-records' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+            >
+              故障记录
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        {/* 选项卡内容区域 */}
+        {/* 运行数据 */}
+        {activeTab === 'running-data' && (
+          <View>
+            {/* 设备监控 */}
+            <View className="mb-10 rounded-2xl bg-white p-4 shadow-sm">
+              <Text className="mb-3 font-medium">设备监控</Text>
+
+              <View className="mb-4">
+                <Text className="mb-2 text-sm font-medium">实时监控</Text>
+                <View className="flex h-40 items-center justify-center rounded-lg bg-gray-50">
+                  <View className="items-center">
+                    <FontAwesome
+                      name="video-camera"
+                      size={24}
+                      color="#3b82f6"
+                    />
+                    <Text className="mt-2 text-sm text-gray-500">
+                      设备实时监控画面
+                    </Text>
+                  </View>
+                </View>
+              </View>
+
+              <View className="mb-3 flex-row flex-wrap">
+                <View className="mb-3 w-1/2">
+                  <Text className="mb-1 text-xs text-gray-500">
+                    今日运行时长
+                  </Text>
+                  <Text className="font-medium">8.5小时</Text>
+                </View>
+                <View className="mb-3 w-1/2">
+                  <Text className="mb-1 text-xs text-gray-500">今日产能</Text>
+                  <Text className="font-medium">850件</Text>
+                </View>
+                <View className="mb-3 w-1/2">
+                  <Text className="mb-1 text-xs text-gray-500">
+                    平均贴片速度
+                  </Text>
+                  <Text className="font-medium">0.1秒/个</Text>
+                </View>
+                <View className="mb-3 w-1/2">
+                  <Text className="mb-1 text-xs text-gray-500">良品率</Text>
+                  <Text className="font-medium">99.2%</Text>
+                </View>
+              </View>
+
+              <View className="mb-4 rounded-lg bg-green-50 p-3">
+                <View className="flex-row items-center">
+                  <FontAwesome
+                    name="check-circle"
+                    size={16}
+                    color="#16a34a"
+                    className="mr-2"
+                  />
+                  <View>
+                    <Text className="text-sm font-medium">设备状态良好</Text>
+                    <Text className="text-sm">
+                      下次计划维护时间：2023-12-15
+                    </Text>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        )}
+
+        {/* 维护记录 */}
+        {activeTab === 'maintenance-records' && (
+          <View className="mb-10 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 font-medium">维护记录</Text>
+
+            <ScrollView horizontal className="mb-3">
+              <View className="border-b border-gray-200">
+                <View className="flex-row bg-gray-50">
+                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500">
+                    日期
+                  </Text>
+                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500">
+                    维护类型
+                  </Text>
+                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500">
+                    维护人员
+                  </Text>
+                  <Text className="w-32 px-2 py-3 text-xs font-medium text-gray-500">
+                    维护内容
+                  </Text>
+                  <Text className="w-20 px-2 py-3 text-xs font-medium text-gray-500">
+                    状态
+                  </Text>
+                </View>
+
+                <View className="border-t border-gray-200">
+                  <View className="flex-row">
+                    <Text className="w-24 px-2 py-3 text-sm">2023-11-15</Text>
+                    <Text className="w-24 px-2 py-3 text-sm">例行保养</Text>
+                    <Text className="w-24 px-2 py-3 text-sm">王工程师</Text>
+                    <Text className="w-32 px-2 py-3 text-sm">
+                      清洁、润滑、校准
+                    </Text>
+                    <View className="w-20 px-2 py-3">
+                      <View className="rounded-full bg-blue-100 px-2 py-1">
+                        <Text className="text-center text-xs text-blue-800">
+                          已完成
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+
+                <View className="border-t border-gray-200">
+                  <View className="flex-row">
+                    <Text className="w-24 px-2 py-3 text-sm">2023-10-20</Text>
+                    <Text className="w-24 px-2 py-3 text-sm">部件更换</Text>
+                    <Text className="w-24 px-2 py-3 text-sm">李工程师</Text>
+                    <Text className="w-32 px-2 py-3 text-sm">更换吸嘴组件</Text>
+                    <View className="w-20 px-2 py-3">
+                      <View className="rounded-full bg-blue-100 px-2 py-1">
+                        <Text className="text-center text-xs text-blue-800">
+                          已完成
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+
+                <View className="border-t border-gray-200">
+                  <View className="flex-row">
+                    <Text className="w-24 px-2 py-3 text-sm">2023-09-10</Text>
+                    <Text className="w-24 px-2 py-3 text-sm">例行保养</Text>
+                    <Text className="w-24 px-2 py-3 text-sm">王工程师</Text>
+                    <Text className="w-32 px-2 py-3 text-sm">
+                      清洁、润滑、校准
+                    </Text>
+                    <View className="w-20 px-2 py-3">
+                      <View className="rounded-full bg-blue-100 px-2 py-1">
+                        <Text className="text-center text-xs text-blue-800">
+                          已完成
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </ScrollView>
+          </View>
+        )}
+
+        {/* 性能参数 */}
+        {activeTab === 'performance-params' && (
+          <View className="mb-10 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 font-medium">性能参数</Text>
+
+            <View className="mb-3 flex-row flex-wrap">
+              <View className="mb-3 w-1/2">
+                <Text className="mb-1 text-xs text-gray-500">设备温度</Text>
+                <Text className="font-medium">42°C</Text>
+              </View>
+              <View className="mb-3 w-1/2">
+                <Text className="mb-1 text-xs text-gray-500">电机转速</Text>
+                <Text className="font-medium">1200 RPM</Text>
+              </View>
+              <View className="mb-3 w-1/2">
+                <Text className="mb-1 text-xs text-gray-500">电压</Text>
+                <Text className="font-medium">220V</Text>
+              </View>
+              <View className="mb-3 w-1/2">
+                <Text className="mb-1 text-xs text-gray-500">电流</Text>
+                <Text className="font-medium">5.2A</Text>
+              </View>
+            </View>
+
+            <View className="rounded-lg bg-blue-50 p-3">
+              <View className="flex-row items-center">
+                <FontAwesome
+                  name="bell"
+                  size={16}
+                  color="#3b82f6"
+                  className="mr-2"
+                />
+                <View>
+                  <Text className="text-sm font-medium">设备警报</Text>
+                  <Text className="text-sm">无异常警报</Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        )}
+
+        {/* 故障记录 */}
+        {activeTab === 'fault-records' && (
+          <View className="mb-10 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 font-medium">故障记录</Text>
+
+            <ScrollView horizontal className="mb-3">
+              <View className="border-b border-gray-200">
+                <View className="flex-row bg-gray-50">
+                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500">
+                    日期
+                  </Text>
+                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500">
+                    故障类型
+                  </Text>
+                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500">
+                    处理人员
+                  </Text>
+                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500">
+                    处理方法
+                  </Text>
+                  <Text className="w-20 px-2 py-3 text-xs font-medium text-gray-500">
+                    停机时长
+                  </Text>
+                </View>
+
+                <View className="border-t border-gray-200">
+                  <View className="flex-row">
+                    <Text className="w-24 px-2 py-3 text-sm">2023-11-05</Text>
+                    <Text className="w-24 px-2 py-3 text-sm">吸嘴堵塞</Text>
+                    <Text className="w-24 px-2 py-3 text-sm">王工程师</Text>
+                    <Text className="w-24 px-2 py-3 text-sm">清洗吸嘴</Text>
+                    <Text className="w-20 px-2 py-3 text-sm">2小时</Text>
+                  </View>
+                </View>
+
+                <View className="border-t border-gray-200">
+                  <View className="flex-row">
+                    <Text className="w-24 px-2 py-3 text-sm">2023-10-12</Text>
+                    <Text className="w-24 px-2 py-3 text-sm">供料器卡料</Text>
+                    <Text className="w-24 px-2 py-3 text-sm">李工程师</Text>
+                    <Text className="w-24 px-2 py-3 text-sm">调整供料器</Text>
+                    <Text className="w-20 px-2 py-3 text-sm">1.5小时</Text>
+                  </View>
+                </View>
+
+                <View className="border-t border-gray-200">
+                  <View className="flex-row">
+                    <Text className="w-24 px-2 py-3 text-sm">2023-09-25</Text>
+                    <Text className="w-24 px-2 py-3 text-sm">视觉系统异常</Text>
+                    <Text className="w-24 px-2 py-3 text-sm">张工程师</Text>
+                    <Text className="w-24 px-2 py-3 text-sm">重新校准</Text>
+                    <Text className="w-20 px-2 py-3 text-sm">3小时</Text>
+                  </View>
+                </View>
+              </View>
+            </ScrollView>
+          </View>
+        )}
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default EquipmentDetail;
diff --git a/src/app/equipment/index.tsx b/src/app/equipment/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1f626e6cf7dcb4b156bdd4c78aa351e0a192eb7a
--- /dev/null
+++ b/src/app/equipment/index.tsx
@@ -0,0 +1,344 @@
+import { useRouter } from 'expo-router';
+import React, { useState } from 'react';
+import { SafeAreaView, TextInput, TouchableOpacity } from 'react-native';
+
+import { NavHeader, ScrollView, Text, View } from '@/components/ui';
+import { FontAwesome } from '@/components/ui/icons';
+
+const Equipment = () => {
+  const [activeTab, setActiveTab] = useState('all');
+  const router = useRouter();
+
+  // 切换选项卡
+  const handleTabChange = (tabId: string) => {
+    setActiveTab(tabId);
+  };
+
+  type EquipmentProps = {
+    id: string;
+    name: string;
+    code: string;
+    projectManager: string;
+    location: string;
+    duration: number;
+    status: string;
+    capacity: number;
+  };
+  // 模拟物料数据
+  const data: EquipmentProps[] = [
+    {
+      id: '1',
+      name: 'SMT贴片机#2',
+      code: 'EQ20230501-02',
+      status: '运行中',
+      projectManager: '王工程师',
+      location: 'A区生产线',
+      duration: 1245,
+      capacity: 850,
+    },
+    {
+      id: '2',
+      name: 'AOI检测仪',
+      code: 'EQ20230315-05',
+      status: '运行中',
+      projectManager: '李工程师',
+      location: 'B区检测线',
+      duration: 985,
+      capacity: 1200,
+    },
+    {
+      id: '4',
+      name: '自动化机械臂',
+      code: 'EQ20230610-08',
+      status: '故障中',
+      projectManager: '赵工程师',
+      location: 'C区装配线',
+      duration: 520,
+      capacity: 1560,
+    },
+  ];
+
+  interface EquipmentItemProps {
+    equipment: EquipmentProps;
+  }
+
+  const EquipmentItemItem = ({ equipment }: EquipmentItemProps) => (
+    <TouchableOpacity
+      className="mb-4 rounded-lg border border-gray-100 bg-white p-4 shadow-sm"
+      onPress={() => router.push(`/equipment/1`)}
+    >
+      <View className="mb-3 flex-row items-start justify-between">
+        <View className="flex-row items-center">
+          {equipment.status === '运行中' && (
+            <View className="mr-3 rounded-lg bg-blue-100 p-2">
+              <FontAwesome name="microchip" size={20} color="#2563EB" />
+            </View>
+          )}
+          {equipment.status === '待机中' && (
+            <View className="mr-3 rounded-lg bg-orange-100 p-2">
+              <FontAwesome name="fire" size={20} color="#EA580C" />
+            </View>
+          )}
+          {equipment.status === '故障中' && (
+            <View className="mr-3 rounded-lg bg-red-100 p-2">
+              <FontAwesome name="robot" size={20} color="#DC2626" />
+            </View>
+          )}
+          <View>
+            <Text className="font-medium">{equipment.name}</Text>
+            <Text className="text-xs text-gray-500">
+              设备编号：{equipment.code}
+            </Text>
+          </View>
+        </View>
+        <View className="rounded-full bg-green-100 px-2 py-1">
+          {equipment.status === '运行中' && (
+            <Text className="text-xs font-medium text-green-800">
+              {equipment.status}
+            </Text>
+          )}
+          {equipment.status === '待机中' && (
+            <Text className="text-xs font-medium text-yellow-800">
+              {equipment.status}
+            </Text>
+          )}
+          {equipment.status === '故障中' && (
+            <Text className="text-xs font-medium text-red-800">
+              {equipment.status}
+            </Text>
+          )}
+        </View>
+      </View>
+
+      <View className="mb-3 flex-row">
+        <View className="flex-1">
+          <Text className="mb-1 text-xs text-gray-500">负责人</Text>
+          <Text className="text-sm">{equipment.projectManager}</Text>
+        </View>
+        <View className="flex-1">
+          <Text className="mb-1 text-xs text-gray-500">位置</Text>
+          <Text className="text-sm">{equipment.location}</Text>
+        </View>
+        <View className="flex-1">
+          <Text className="mb-1 text-xs text-gray-500">运行时长</Text>
+          <Text className="text-sm">{equipment.duration}小时</Text>
+        </View>
+      </View>
+
+      <View className="flex-row items-center justify-between">
+        {equipment.status === '故障中' ? (
+          <Text className="text-xs font-medium text-red-500">
+            故障：控制系统异常
+          </Text>
+        ) : (
+          <Text className="text-xs text-gray-500">
+            今日产能：{equipment.capacity}件
+          </Text>
+        )}
+
+        <FontAwesome name="chevron-right" size={14} color="#2563EB" />
+      </View>
+    </TouchableOpacity>
+  );
+  return (
+    <SafeAreaView className="flex-1 bg-gray-50">
+      <NavHeader
+        title="设备管理"
+        right={
+          <>
+            <TouchableOpacity>
+              <FontAwesome name="plus" size={12} />
+            </TouchableOpacity>
+          </>
+        }
+      />
+
+      <ScrollView className="flex-1 p-4">
+        {/* 设备状态概览 */}
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+          <Text className="mb-3 font-medium">设备状态概览</Text>
+
+          <View className="mb-4 flex-row">
+            <View className="mr-3 flex-1 items-center rounded-lg bg-blue-50 p-3">
+              <Text className="mb-1 text-xl font-medium text-blue-600">24</Text>
+              <Text className="text-xs text-gray-600">设备总数</Text>
+            </View>
+            <View className="mr-3 flex-1 items-center rounded-lg bg-green-50 p-3">
+              <Text className="mb-1 text-xl font-medium text-green-600">
+                18
+              </Text>
+              <Text className="text-xs text-gray-600">运行中</Text>
+            </View>
+            <View className="mr-3 flex-1 items-center rounded-lg bg-yellow-50 p-3">
+              <Text className="mb-1 text-xl font-medium text-yellow-600">
+                4
+              </Text>
+              <Text className="text-xs text-gray-600">待机中</Text>
+            </View>
+            <View className="flex-1 items-center rounded-lg bg-red-50 p-3">
+              <Text className="mb-1 text-xl font-medium text-red-600">2</Text>
+              <Text className="text-xs text-gray-600">故障中</Text>
+            </View>
+          </View>
+
+          <View className="mb-3">
+            <View className="mb-1 flex-row justify-between text-sm">
+              <Text>设备利用率</Text>
+              <Text className="font-medium">75%</Text>
+            </View>
+            <View className="h-1.5 overflow-hidden rounded bg-gray-200">
+              <View
+                className="h-full rounded bg-blue-500"
+                style={{ width: '75%' }}
+              />
+            </View>
+          </View>
+
+          <View className="rounded-lg bg-blue-50 p-3">
+            <View className="flex-row items-center">
+              <FontAwesome
+                name="info-circle"
+                size={16}
+                color="#2563EB"
+                className="mr-2"
+              />
+              <View>
+                <Text className="text-sm font-medium">设备状态</Text>
+                <Text className="text-sm">
+                  今日设备平均运行时长：7.5小时 | 本周维护计划：3台
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        {/* 筛选和搜索 */}
+        <View className="mb-4 flex-row items-center justify-between">
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            className="pb-2"
+          >
+            <TouchableOpacity
+              className={`mr-2 rounded-full px-4 py-2 ${activeTab === 'all' ? 'bg-blue-600' : 'bg-gray-200'}`}
+              onPress={() => handleTabChange('all')}
+            >
+              <Text
+                className={`text-sm ${activeTab === 'all' ? 'font-medium text-white' : 'text-gray-600'}`}
+              >
+                全部设备
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              className={`mr-2 rounded-full px-4 py-2 ${activeTab === 'production' ? 'bg-blue-600' : 'bg-gray-200'}`}
+              onPress={() => handleTabChange('production')}
+            >
+              <Text
+                className={`text-sm ${activeTab === 'production' ? 'font-medium text-white' : 'text-gray-600'}`}
+              >
+                生产设备
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              className={`mr-2 rounded-full px-4 py-2 ${activeTab === 'testing' ? 'bg-blue-600' : 'bg-gray-200'}`}
+              onPress={() => handleTabChange('testing')}
+            >
+              <Text
+                className={`text-sm ${activeTab === 'testing' ? 'font-medium text-white' : 'text-gray-600'}`}
+              >
+                检测设备
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              className={`mr-2 rounded-full px-4 py-2 ${activeTab === 'auxiliary' ? 'bg-blue-600' : 'bg-gray-200'}`}
+              onPress={() => handleTabChange('auxiliary')}
+            >
+              <Text
+                className={`text-sm ${activeTab === 'auxiliary' ? 'font-medium text-white' : 'text-gray-600'}`}
+              >
+                辅助设备
+              </Text>
+            </TouchableOpacity>
+          </ScrollView>
+          <View className="relative">
+            <TextInput
+              placeholder="搜索设备"
+              className="rounded-full border border-gray-300 bg-white py-2 pl-8 pr-4 text-sm"
+            />
+            <FontAwesome
+              name="search"
+              size={14}
+              color="#9CA3AF"
+              style={{ position: 'absolute', left: 12, top: 12 }}
+            />
+          </View>
+        </View>
+
+        {/* 设备列表 */}
+        <View className="mb-4">
+          {data.map((material, index) => (
+            <EquipmentItemItem key={index} equipment={material} />
+          ))}
+        </View>
+
+        {/* 维护计划 */}
+        <View className="mb-10 rounded-2xl bg-white p-4 shadow-sm">
+          <View className="mb-3 flex-row items-center justify-between">
+            <Text className="font-medium">近期维护计划</Text>
+            <TouchableOpacity>
+              <Text className="text-xs text-blue-600">查看全部</Text>
+            </TouchableOpacity>
+          </View>
+
+          <View>
+            <View className="border-b border-gray-100 py-3">
+              <View className="mb-1 flex-row items-start justify-between">
+                <Text className="text-sm font-medium">
+                  SMT贴片机#1 - 例行保养
+                </Text>
+                <View className="rounded-full bg-yellow-100 px-2 py-1">
+                  <Text className="text-xs font-medium text-yellow-800">
+                    待处理
+                  </Text>
+                </View>
+              </View>
+              <Text className="text-xs text-gray-500">
+                计划时间：2023-12-10 | 负责人：王工程师
+              </Text>
+            </View>
+            <View className="border-b border-gray-100 py-3">
+              <View className="mb-1 flex-row items-start justify-between">
+                <Text className="text-sm font-medium">回流焊炉 - 温度校准</Text>
+                <View className="rounded-full bg-yellow-100 px-2 py-1">
+                  <Text className="text-xs font-medium text-yellow-800">
+                    待处理
+                  </Text>
+                </View>
+              </View>
+              <Text className="text-xs text-gray-500">
+                计划时间：2023-12-12 | 负责人：张工程师
+              </Text>
+            </View>
+            <View className="py-3">
+              <View className="mb-1 flex-row items-start justify-between">
+                <Text className="text-sm font-medium">
+                  自动化机械臂 - 控制系统维修
+                </Text>
+                <View className="rounded-full bg-blue-100 px-2 py-1">
+                  <Text className="text-xs font-medium text-blue-800">
+                    进行中
+                  </Text>
+                </View>
+              </View>
+              <Text className="text-xs text-gray-500">
+                计划时间：2023-12-08 | 负责人：赵工程师
+              </Text>
+            </View>
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default Equipment;
diff --git a/src/app/inventory/[id].tsx b/src/app/inventory/[id].tsx
new file mode 100644
index 0000000000000000000000000000000000000000..faa1c21f101e31ec5b3369ba13450c75aee09cb3
--- /dev/null
+++ b/src/app/inventory/[id].tsx
@@ -0,0 +1,517 @@
+import React, { useState } from 'react';
+import {
+  // Dimensions,
+  TouchableOpacity,
+} from 'react-native';
+
+import { NavHeader, ScrollView, Text, View } from '@/components/ui';
+// import { LineChart } from 'react-native-chart-kit';
+import { FontAwesome } from '@/components/ui/icons';
+
+type TabType = 'info' | 'records' | 'usage';
+
+interface RecordItem {
+  type: string;
+  date: string;
+  quantity: string;
+  operator: string;
+  document: string;
+  isInbound: boolean;
+}
+
+interface UsageProduct {
+  name: string;
+  quantityPerUnit: string;
+  monthlyConsumption: string;
+}
+
+interface RelatedMaterial {
+  name: string;
+  code: string;
+  quantity: number;
+  safetyStock: number;
+  status: 'normal' | 'warning' | 'danger';
+}
+
+const InventoryDetail: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<TabType>('info');
+
+  // 模拟数据
+  const materialData = {
+    id: 'RM-10K-0805',
+    name: '电阻 10kΩ',
+    category: '原材料',
+    tag: '常用',
+    currentStock: 5000,
+    unit: '个',
+    safetyStock: 1000,
+    status: '充足',
+    spec: '0805封装 10kΩ ±1%',
+    category_detail: '电子元件 / 电阻',
+    supplier: '深圳市电子元件有限公司',
+    purchaseCycle: '3天',
+    price: 0.05,
+    stockValue: 250.0,
+    location: 'A区-03-12',
+    remark: '主板电路常用电阻',
+  };
+
+  const records: RecordItem[] = [
+    {
+      type: '入库',
+      date: '2023-06-15 14:30',
+      quantity: '+2,000个',
+      operator: '张工',
+      document: 'PO-20230610-001',
+      isInbound: true,
+    },
+    {
+      type: '出库',
+      date: '2023-06-10 09:15',
+      quantity: '-500个',
+      operator: '李工',
+      document: 'WO-20230608-002',
+      isInbound: false,
+    },
+    {
+      type: '入库',
+      date: '2023-06-01 11:20',
+      quantity: '+3,500个',
+      operator: '张工',
+      document: 'PO-20230525-003',
+      isInbound: true,
+    },
+  ];
+
+  const usageProducts: UsageProduct[] = [
+    {
+      name: '智能控制器 A1',
+      quantityPerUnit: '每件用量: 8个',
+      monthlyConsumption: '月消耗: 约2,400个',
+    },
+    {
+      name: '电源模块',
+      quantityPerUnit: '每件用量: 4个',
+      monthlyConsumption: '月消耗: 约800个',
+    },
+    {
+      name: '主板组件',
+      quantityPerUnit: '每件用量: 12个',
+      monthlyConsumption: '月消耗: 约1,200个',
+    },
+  ];
+
+  const relatedMaterials: RelatedMaterial[] = [
+    {
+      name: '电阻 1kΩ',
+      code: 'RM-1K-0805',
+      quantity: 4200,
+      safetyStock: 1000,
+      status: 'normal',
+    },
+    {
+      name: '电阻 100kΩ',
+      code: 'RM-100K-0805',
+      quantity: 3800,
+      safetyStock: 1000,
+      status: 'normal',
+    },
+    {
+      name: '电容 0.1uF',
+      code: 'CM-0.1UF-0805',
+      quantity: 1500,
+      safetyStock: 1200,
+      status: 'warning',
+    },
+  ];
+
+  // 库存趋势图数据
+  // const stockData = {
+  //   labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
+  //   datasets: [
+  //     {
+  //       data: [3000, 4500, 2800, 5000, 3500, 5000],
+  //       color: () => `rgba(59, 130, 246, 1)`,
+  //       strokeWidth: 2,
+  //     },
+  //     {
+  //       data: [1000, 1000, 1000, 1000, 1000, 1000],
+  //       color: () => `rgba(239, 68, 68, 1)`,
+  //       strokeWidth: 2,
+  //       withDots: false,
+  //     },
+  //   ],
+  // };
+
+  // const chartConfig = {
+  //   backgroundGradientFrom: '#ffffff',
+  //   backgroundGradientTo: '#ffffff',
+  //   decimalPlaces: 0,
+  //   color: () => `rgba(59, 130, 246, 0.6)`,
+  //   labelColor: () => `rgba(107, 114, 128, 1)`,
+  //   style: {
+  //     borderRadius: 16,
+  //   },
+  //   propsForDots: {
+  //     r: '4',
+  //     strokeWidth: '2',
+  //     stroke: '#3b82f6',
+  //   },
+  // };
+
+  // const screenWidth = Dimensions.get('window').width - 40; // 考虑内边距
+
+  // 详情行组件
+  const DetailRow = ({ label = '', value = '', isLast = false }) => (
+    <View
+      className={`flex-row py-3 ${!isLast ? 'border-b border-gray-100' : ''}`}
+    >
+      <Text className="w-1/3 text-sm text-gray-500">{label}</Text>
+      <Text className="w-2/3 text-sm">{value}</Text>
+    </View>
+  );
+
+  // 获取库存状态颜色
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case '充足':
+        return { bg: 'bg-green-500', text: 'text-green-600' };
+      case '警告':
+        return { bg: 'bg-yellow-500', text: 'text-yellow-600' };
+      case '不足':
+        return { bg: 'bg-red-500', text: 'text-red-600' };
+      default:
+        return { bg: 'bg-green-500', text: 'text-green-600' };
+    }
+  };
+
+  const statusColor = getStatusColor(materialData.status);
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'info':
+        return (
+          <View>
+            <DetailRow label="规格型号" value={materialData.spec} />
+            <DetailRow label="类别" value={materialData.category_detail} />
+            <DetailRow label="单位" value={materialData.unit} />
+            <DetailRow label="供应商" value={materialData.supplier} />
+            <DetailRow label="采购周期" value={materialData.purchaseCycle} />
+            <DetailRow
+              label="单价"
+              value={`¥${materialData.price.toFixed(2)}`}
+            />
+            <DetailRow
+              label="库存价值"
+              value={`¥${materialData.stockValue.toFixed(2)}`}
+            />
+            <DetailRow label="存放位置" value={materialData.location} />
+            <DetailRow label="备注" value={materialData.remark} isLast />
+          </View>
+        );
+      case 'records':
+        return (
+          <View>
+            {records.map((record, index) => (
+              <View
+                key={index}
+                className={`py-3 ${index < records.length - 1 ? 'border-b border-gray-100' : ''}`}
+              >
+                <View className="mb-1 flex-row items-center justify-between">
+                  <Text className="font-medium">{record.type}</Text>
+                  <Text className="text-sm text-gray-500">{record.date}</Text>
+                </View>
+                <Text
+                  className={`mb-1 text-sm ${record.isInbound ? 'text-green-600' : 'text-red-600'}`}
+                >
+                  数量: {record.quantity}
+                </Text>
+                <Text className="text-sm text-gray-600">
+                  操作人: {record.operator}
+                </Text>
+                <Text className="text-sm text-gray-600">
+                  关联单据: {record.document}
+                </Text>
+              </View>
+            ))}
+          </View>
+        );
+      case 'usage':
+        return (
+          <View>
+            <Text className="text-md mb-3 font-semibold">近期使用产品</Text>
+            <View className="space-y-3">
+              {usageProducts.map((product, index) => (
+                <View
+                  key={index}
+                  className="flex-row items-center justify-between"
+                >
+                  <View className="flex-row items-center">
+                    <FontAwesome
+                      name="cube"
+                      size={16}
+                      className="mr-2 text-blue-500"
+                    />
+                    <View>
+                      <Text className="font-medium">{product.name}</Text>
+                      <Text className="text-xs text-gray-500">
+                        {product.quantityPerUnit}
+                      </Text>
+                    </View>
+                  </View>
+                  <Text className="text-sm">{product.monthlyConsumption}</Text>
+                </View>
+              ))}
+            </View>
+
+            <Text className="text-md mb-3 mt-4 font-semibold">消耗预测</Text>
+            <View className="rounded-lg bg-blue-50 p-3">
+              <View className="mb-2 flex-row items-center justify-between">
+                <Text className="text-sm">预计月消耗</Text>
+                <Text className="font-medium">约4,500个</Text>
+              </View>
+              <View className="mb-2 flex-row items-center justify-between">
+                <Text className="text-sm">当前库存可用</Text>
+                <Text className="font-medium">约1.1个月</Text>
+              </View>
+              <View className="flex-row items-center justify-between">
+                <Text className="text-sm">建议补货时间</Text>
+                <Text className="font-medium text-orange-600">2周内</Text>
+              </View>
+            </View>
+          </View>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <View className="flex-1 bg-gray-50">
+      <NavHeader
+        title="库存详情"
+        right={
+          <>
+            <TouchableOpacity>
+              <FontAwesome name="plus" size={12} />
+            </TouchableOpacity>
+          </>
+        }
+      />
+
+      <ScrollView
+        className="flex-1"
+        contentContainerClassName="px-4 py-4 pb-20"
+      >
+        {/* 物料基本信息卡片 */}
+        <View className="mb-4 rounded-lg bg-white p-4 shadow-sm">
+          <View className="mb-4 flex-row items-center">
+            <View className="mr-4 flex size-20 items-center justify-center rounded-lg bg-gray-200">
+              <FontAwesome name="microchip" size={32} color="#9ca3af" />
+            </View>
+            <View>
+              <Text className="text-xl font-semibold">{materialData.name}</Text>
+              <Text className="mt-1 text-sm text-gray-500">
+                编号: {materialData.id}
+              </Text>
+              <View className="mt-2 flex-row items-center">
+                <View className="mr-2 rounded-full bg-green-100 px-2 py-1">
+                  <Text className="text-xs font-medium text-green-800">
+                    {materialData.category}
+                  </Text>
+                </View>
+                <View className="rounded-full bg-blue-100 px-2 py-1">
+                  <Text className="text-xs font-medium text-blue-800">
+                    {materialData.tag}
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+
+          {/* 库存状态 */}
+          <View className="mb-4 flex-row items-center justify-between rounded-lg bg-blue-50 p-3">
+            <View>
+              <Text className="text-sm text-gray-600">当前库存</Text>
+              <Text className="mt-1 text-xl font-bold text-blue-600">
+                {materialData.currentStock.toLocaleString()}
+                <Text className="ml-1 text-sm font-normal">
+                  {materialData.unit}
+                </Text>
+              </Text>
+            </View>
+            <View>
+              <Text className="text-sm text-gray-600">安全库存</Text>
+              <Text className="mt-1 text-lg font-medium text-gray-700">
+                {materialData.safetyStock.toLocaleString()}
+                <Text className="ml-1 text-sm font-normal">
+                  {materialData.unit}
+                </Text>
+              </Text>
+            </View>
+            <View>
+              <Text className="text-sm text-gray-600">状态</Text>
+              <View className="mt-1 flex-row items-center">
+                <View
+                  className={`mr-1 size-3 rounded-full ${statusColor.bg}`}
+                />
+                <Text className={`font-medium ${statusColor.text}`}>
+                  {materialData.status}
+                </Text>
+              </View>
+            </View>
+          </View>
+
+          {/* 快捷操作按钮 */}
+          <View className="flex-row justify-between">
+            <TouchableOpacity className="mr-2 flex-1 items-center justify-center rounded-lg bg-blue-600 py-2">
+              <FontAwesome
+                name="sign-in"
+                size={16}
+                color="#ffffff"
+                className="mb-1"
+              />
+              <Text className="text-xs text-white">入库</Text>
+            </TouchableOpacity>
+            <TouchableOpacity className="mr-2 flex-1 items-center justify-center rounded-lg bg-orange-500 py-2">
+              <FontAwesome
+                name="sign-out"
+                size={16}
+                color="#ffffff"
+                className="mb-1"
+              />
+              <Text className="text-xs text-white">出库</Text>
+            </TouchableOpacity>
+            <TouchableOpacity className="mr-2 flex-1 items-center justify-center rounded-lg bg-green-500 py-2">
+              <FontAwesome
+                name="exchange"
+                size={16}
+                color="#ffffff"
+                className="mb-1"
+              />
+              <Text className="text-xs text-white">调拨</Text>
+            </TouchableOpacity>
+            <TouchableOpacity className="flex-1 items-center justify-center rounded-lg bg-purple-500 py-2">
+              <FontAwesome
+                name="qrcode"
+                size={16}
+                color="#ffffff"
+                className="mb-1"
+              />
+              <Text className="text-xs text-white">扫码</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        {/* 库存趋势图 */}
+        <View className="mb-4 rounded-lg bg-white p-4 shadow-sm">
+          <Text className="mb-3 text-lg font-semibold">库存趋势</Text>
+          {/* <LineChart
+            data={stockData}
+            width={screenWidth}
+            height={200}
+            chartConfig={chartConfig}
+            bezier
+            className="rounded-lg"
+            withInnerLines={false}
+            withOuterLines={true}
+            withHorizontalLabels={true}
+            withVerticalLabels={true}
+            withDots={true}
+            withShadow={false}
+            segments={4}
+            legend={['库存量', '安全库存']}
+          /> */}
+        </View>
+
+        {/* 详细信息选项卡 */}
+        <View className="mb-4 overflow-hidden rounded-lg bg-white shadow-sm">
+          <View className="flex-row border-b border-gray-100">
+            <TouchableOpacity
+              className={`flex-1 items-center px-4 py-2 ${activeTab === 'info' ? 'border-b-2 border-blue-600' : ''}`}
+              onPress={() => setActiveTab('info')}
+            >
+              <Text
+                className={`text-sm font-medium ${activeTab === 'info' ? 'text-blue-600' : 'text-gray-600'}`}
+              >
+                基本信息
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              className={`flex-1 items-center px-4 py-2 ${activeTab === 'records' ? 'border-b-2 border-blue-600' : ''}`}
+              onPress={() => setActiveTab('records')}
+            >
+              <Text
+                className={`text-sm font-medium ${activeTab === 'records' ? 'text-blue-600' : 'text-gray-600'}`}
+              >
+                出入库记录
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              className={`flex-1 items-center px-4 py-2 ${activeTab === 'usage' ? 'border-b-2 border-blue-600' : ''}`}
+              onPress={() => setActiveTab('usage')}
+            >
+              <Text
+                className={`text-sm font-medium ${activeTab === 'usage' ? 'text-blue-600' : 'text-gray-600'}`}
+              >
+                使用情况
+              </Text>
+            </TouchableOpacity>
+          </View>
+
+          <View className="p-4">{renderTabContent()}</View>
+        </View>
+
+        {/* 相关物料 */}
+        <View className="mb-4 rounded-lg bg-white p-4 shadow-sm">
+          <View className="mb-3 flex-row items-center justify-between">
+            <Text className="text-lg font-semibold">相关物料</Text>
+            <TouchableOpacity>
+              <Text className="text-sm text-blue-600">查看全部</Text>
+            </TouchableOpacity>
+          </View>
+
+          <View className="space-y-3">
+            {relatedMaterials.map((material, index) => {
+              let indicatorColor = 'bg-green-500';
+              if (material.status === 'warning') {
+                indicatorColor = 'bg-yellow-500';
+              } else if (material.status === 'danger') {
+                indicatorColor = 'bg-red-500';
+              }
+
+              return (
+                <View
+                  key={index}
+                  className="flex-row items-center justify-between"
+                >
+                  <View className="flex-row items-center">
+                    <View
+                      className={`mr-2 size-2 rounded-full ${indicatorColor}`}
+                    />
+                    <View>
+                      <Text className="font-medium">{material.name}</Text>
+                      <Text className="text-xs text-gray-500">
+                        编号: {material.code}
+                      </Text>
+                    </View>
+                  </View>
+                  <View className="items-end">
+                    <Text className="font-medium">
+                      {material.quantity.toLocaleString()}
+                    </Text>
+                    <Text className="text-xs text-gray-500">
+                      安全库存: {material.safetyStock.toLocaleString()}
+                    </Text>
+                  </View>
+                </View>
+              );
+            })}
+          </View>
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+export default InventoryDetail;
diff --git a/src/app/inventory/item.tsx b/src/app/inventory/item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d2402815f187a11e3c512eb2a7d02c3751fb9c75
--- /dev/null
+++ b/src/app/inventory/item.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import { Text, View } from '@/components/ui';
+
+type InventoryItemProps = {
+  name: string;
+  code: string;
+  quantity: number;
+  safetyStock: number;
+  status: 'normal' | 'warning' | 'danger';
+  onViewDetail?: () => void;
+};
+
+const Item = ({
+  name,
+  code,
+  quantity,
+  safetyStock,
+  status,
+  onViewDetail,
+}: InventoryItemProps) => {
+  let indicatorColor = '#22c55e'; // 绿色 - 正常
+  let textColor = 'text-black';
+
+  if (status === 'warning') {
+    indicatorColor = '#eab308'; // 黄色 - 警告
+  } else if (status === 'danger') {
+    indicatorColor = '#ef4444'; // 红色 - 危险
+    textColor = 'text-red-500';
+  }
+
+  return (
+    <TouchableOpacity onPress={onViewDetail}>
+      <View className="flex-row justify-between border-b border-gray-100 py-3">
+        <View className="flex-1">
+          <View className="flex-row items-center">
+            <View
+              className="mr-2 size-2 rounded-full"
+              style={{ backgroundColor: indicatorColor }}
+            />
+            <Text className="text-base font-medium">{name}</Text>
+          </View>
+          <Text className="text-sm text-gray-500">编号：{code}</Text>
+        </View>
+        <View className="items-end">
+          <Text
+            className={`text-lg font-bold ${status === 'danger' ? textColor : ''}`}
+          >
+            {quantity}
+          </Text>
+          <Text className="text-xs text-gray-500">安全库存：{safetyStock}</Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default Item;
diff --git a/src/app/notification/[id].tsx b/src/app/notification/[id].tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7a365f982e715af4fbe349e904de6761023da4f1
--- /dev/null
+++ b/src/app/notification/[id].tsx
@@ -0,0 +1,338 @@
+import { useLocalSearchParams } from 'expo-router';
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+import { NavHeader, ScrollView, Text, View } from '@/components/ui';
+import { FontAwesome, GroupEnum } from '@/components/ui/icons';
+
+interface RelatedNotification {
+  id: string;
+  title: string;
+  message: string;
+  time: string;
+  icon: string;
+  iconBgColor: string;
+}
+
+const NotificationDetail = () => {
+  // const notificationType1 = route.params?.type || 'warning';
+  const local = useLocalSearchParams<{ type: string }>();
+  const notificationType = local.type;
+
+  // 通知详情状态
+  const [notificationInfo, setNotificationInfo] = useState({
+    title: '库存预警',
+    time: '今天 10:30',
+    date: '2023年11月29日',
+    content:
+      'PCB板库存低于安全库存，当前库存数量为25个，安全库存为50个，请及时补货。\n\n低库存可能导致生产计划延误，建议在3天内完成补货。',
+    icon: 'exclamation-triangle',
+    iconBgColor: '#ef4444', // red-500
+    badgeBg: 'bg-red-100',
+    badgeText: 'text-red-800',
+    badgeContent: '预警信息',
+    actionText: '查看物料详情',
+    relatedInfo: [
+      { label: '物料编号', value: 'PCB-2023-1105' },
+      { label: '当前库存', value: '25个', isAlert: true },
+      { label: '安全库存', value: '50个' },
+      { label: '最近一次入库', value: '2023-11-15' },
+    ],
+  });
+
+  // 相关通知
+  const relatedNotifications: RelatedNotification[] = [
+    {
+      id: '1',
+      title: '库存预警',
+      message: '电阻R0805库存不足，请及时补货。',
+      time: '11-20',
+      icon: 'exclamation-circle',
+      iconBgColor: '#eab308', // yellow-500
+    },
+    {
+      id: '2',
+      title: '物料入库',
+      message: 'PCB板已完成入库，入库数量100个。',
+      time: '11-15',
+      icon: 'truck',
+      iconBgColor: '#3b82f6', // blue-500
+    },
+  ];
+
+  // 根据通知类型设置样式和内容
+  useEffect(() => {
+    let updatedInfo = { ...notificationInfo };
+
+    switch (notificationType) {
+      case 'warning':
+        updatedInfo = {
+          ...updatedInfo,
+          title: '库存预警',
+          icon: 'exclamation-triangle',
+          iconBgColor: '#ef4444', // red-500
+          badgeBg: 'bg-red-100',
+          badgeText: 'text-red-800',
+          badgeContent: '预警信息',
+          actionText: '查看物料详情',
+        };
+        break;
+      case 'task':
+        updatedInfo = {
+          ...updatedInfo,
+          title: '任务分配',
+          content:
+            '您有一个新的生产任务 #PT20231129-02 需要处理。请在今天下午3点前完成相关准备工作。',
+          icon: 'tasks',
+          iconBgColor: '#22c55e', // green-500
+          badgeBg: 'bg-green-100',
+          badgeText: 'text-green-800',
+          badgeContent: '任务提醒',
+          actionText: '处理任务',
+        };
+        break;
+      case 'order':
+        updatedInfo = {
+          ...updatedInfo,
+          title: '订单完成',
+          content:
+            '订单 #2023112801 已完成生产，等待发货。请安排物流部门进行后续处理。',
+          icon: 'clipboard-check',
+          iconBgColor: '#3b82f6', // blue-500
+          badgeBg: 'bg-blue-100',
+          badgeText: 'text-blue-800',
+          badgeContent: '订单通知',
+          actionText: '查看订单',
+        };
+        break;
+      case 'system':
+        updatedInfo = {
+          ...updatedInfo,
+          title: '系统维护',
+          content:
+            '系统将于今晚22:00-23:00进行例行维护，请提前做好准备。维护期间系统将暂停服务。',
+          icon: 'bell',
+          iconBgColor: '#eab308', // yellow-500
+          badgeBg: 'bg-yellow-100',
+          badgeText: 'text-yellow-800',
+          badgeContent: '系统通知',
+          actionText: '了解详情',
+        };
+        break;
+      case 'report':
+        updatedInfo = {
+          ...updatedInfo,
+          title: '数据报表',
+          content:
+            '11月生产效率分析报表已生成，请查看。本月生产效率较上月提升5.2%。',
+          icon: 'chart-line',
+          iconBgColor: '#a855f7', // purple-500
+          badgeBg: 'bg-purple-100',
+          badgeText: 'text-purple-800',
+          badgeContent: '数据报表',
+          actionText: '查看报表',
+        };
+        break;
+      case 'team':
+        updatedInfo = {
+          ...updatedInfo,
+          title: '新成员加入',
+          content: '李工程师已加入您的生产团队，请及时安排工作。',
+          icon: 'user-plus',
+          iconBgColor: '#6366f1', // indigo-500
+          badgeBg: 'bg-indigo-100',
+          badgeText: 'text-indigo-800',
+          badgeContent: '团队通知',
+          actionText: '查看团队',
+        };
+        break;
+      case 'update':
+        updatedInfo = {
+          ...updatedInfo,
+          title: '系统更新',
+          content:
+            '系统已更新至v1.0.5版本，新增多项功能和优化。主要更新内容包括：生产计划优化、库存预警阈值自定义、报表导出功能等。',
+          icon: 'cogs',
+          iconBgColor: '#f97316', // orange-500
+          badgeBg: 'bg-orange-100',
+          badgeText: 'text-orange-800',
+          badgeContent: '系统更新',
+          actionText: '查看更新',
+        };
+        break;
+    }
+
+    setNotificationInfo(updatedInfo);
+  }, [notificationType]);
+
+  // 处理主要操作按钮点击
+  const handlePrimaryAction = () => {
+    switch (notificationType) {
+      case 'warning':
+        // navigation.navigate('MaterialDetail', { id: 'PCB-2023-1105' });
+        break;
+      case 'order':
+        // navigation.navigate('Orders');
+        break;
+      case 'task':
+        // navigation.navigate('Production');
+        break;
+      case 'report':
+        // navigation.navigate('Analytics');
+        break;
+      default:
+      // navigation.navigate('Notifications');
+    }
+  };
+
+  // 处理标记为已读
+  const handleMarkAsRead = () => {
+    // 实际应用中这里会更新通知状态
+    console.log('标记为已读');
+  };
+
+  return (
+    <View className="flex-1 bg-gray-50">
+      <NavHeader
+        title="通知详情"
+        right={
+          <>
+            <TouchableOpacity style={styles.headerButton}>
+              <FontAwesome name="share-alt" size={18} color="#6b7280" />
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.headerButton}>
+              <FontAwesome name="ellipsis-v" size={18} color="#6b7280" />
+            </TouchableOpacity>
+          </>
+        }
+      />
+
+      <ScrollView
+        className="flex-1"
+        contentContainerStyle={{ padding: 16, paddingBottom: 80 }}
+      >
+        {/* 通知类型标签 */}
+        <View className="mb-4">
+          <Text
+            className={`rounded-full px-3 py-1 text-xs font-medium ${notificationInfo.badgeBg} ${notificationInfo.badgeText} self-start`}
+          >
+            {notificationInfo.badgeContent}
+          </Text>
+        </View>
+
+        {/* 通知详情卡片 */}
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+          <View className="flex-row items-start">
+            <View
+              className="w-15 h-15 mr-4 items-center justify-center rounded-xl"
+              style={{ backgroundColor: notificationInfo.iconBgColor }}
+            >
+              <FontAwesome
+                name={notificationInfo.icon}
+                size={24}
+                color="white"
+                group={GroupEnum.FontAwesome5}
+              />
+            </View>
+            <View className="flex-1">
+              <View className="flex-row items-start justify-between">
+                <Text className="text-xl font-semibold">
+                  {notificationInfo.title}
+                </Text>
+                <Text className="text-sm text-gray-500">
+                  {notificationInfo.time}
+                </Text>
+              </View>
+              <Text className="mt-1 text-sm text-gray-500">
+                {notificationInfo.date}
+              </Text>
+            </View>
+          </View>
+
+          <View className="mt-6">
+            <Text className="mb-3 text-lg font-medium">详细内容</Text>
+            <Text className="leading-relaxed text-gray-700">
+              {notificationInfo.content}
+            </Text>
+          </View>
+
+          {/* 相关信息 */}
+          <View className="mt-6 border-t border-gray-100 pt-6">
+            <Text className="mb-3 text-lg font-medium">相关信息</Text>
+            {notificationInfo.relatedInfo.map((item, index) => (
+              <View key={index} className="mb-3 rounded-xl bg-gray-50 p-4">
+                <View className="flex-row justify-between">
+                  <Text className="font-medium">{item.label}</Text>
+                  <Text
+                    className={item.isAlert ? 'font-medium text-red-600' : ''}
+                  >
+                    {item.value}
+                  </Text>
+                </View>
+              </View>
+            ))}
+          </View>
+        </View>
+
+        {/* 操作按钮 */}
+        <View className="mb-6 flex-row space-x-3">
+          <TouchableOpacity
+            className="flex-1 items-center rounded-xl bg-blue-600 py-3"
+            onPress={handlePrimaryAction}
+          >
+            <Text className="font-medium text-white">
+              {notificationInfo.actionText}
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            className="flex-1 items-center rounded-xl bg-gray-100 py-3"
+            onPress={handleMarkAsRead}
+          >
+            <Text className="font-medium text-gray-700">标记为已读</Text>
+          </TouchableOpacity>
+        </View>
+
+        {/* 相关通知 */}
+        <Text className="mb-3 text-lg font-semibold">相关通知</Text>
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+          {relatedNotifications.map((item, index) => (
+            <View
+              key={item.id}
+              className={`py-3 ${index < relatedNotifications.length - 1 ? 'border-b border-gray-100' : ''}`}
+            >
+              <View className="flex-row">
+                <View
+                  className="mr-4 size-10 items-center justify-center rounded-xl"
+                  style={{ backgroundColor: item.iconBgColor }}
+                >
+                  <FontAwesome
+                    name={item.icon}
+                    size={16}
+                    color="white"
+                    group={GroupEnum.FontAwesome5}
+                  />
+                </View>
+                <View className="flex-1">
+                  <View className="flex-row justify-between">
+                    <Text className="font-medium">{item.title}</Text>
+                    <Text className="text-xs text-gray-500">{item.time}</Text>
+                  </View>
+                  <Text className="mt-1 text-sm text-gray-600">
+                    {item.message}
+                  </Text>
+                </View>
+              </View>
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerButton: {
+    marginLeft: 16,
+  },
+});
+export default NotificationDetail;
diff --git a/src/app/notification/index.tsx b/src/app/notification/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4cc6599d4789aa9c2afec37523cf3098ec0e3b10
--- /dev/null
+++ b/src/app/notification/index.tsx
@@ -0,0 +1,263 @@
+import { useRouter } from 'expo-router';
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+import { SegmentedControl, type SegmentedControlOption } from '@/components';
+import { NavHeader, ScrollView, Text, View } from '@/components/ui';
+import { FontAwesome, GroupEnum } from '@/components/ui/icons';
+
+// type TabType = 0 | 1 | 2 | 3;
+
+interface NotificationItem {
+  id: string;
+  type: number;
+  title: string;
+  message: string;
+  time: string;
+  icon: string;
+  iconBgColor: string;
+  isUnread: boolean;
+  date: 'today' | 'yesterday' | 'earlier';
+}
+
+const Notification = () => {
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+  const router = useRouter();
+
+  // 模拟通知数据
+  const notifications: NotificationItem[] = [
+    {
+      id: '1',
+      type: 0,
+      title: '库存预警',
+      message: 'PCB板库存低于安全库存，请及时补货。',
+      time: '10:30',
+      icon: 'exclamation-triangle',
+      iconBgColor: '#ef4444', // red-500
+      isUnread: true,
+      date: 'today',
+    },
+    {
+      id: '2',
+      type: 1,
+      title: '订单完成',
+      message: '订单 #2023112801 已完成生产，等待发货。',
+      time: '09:45',
+      icon: 'clipboard-check',
+      iconBgColor: '#3b82f6', // blue-500
+      isUnread: true,
+      date: 'today',
+    },
+    {
+      id: '3',
+      type: 1,
+      title: '任务分配',
+      message: '您有一个新的生产任务 #PT20231129-02 需要处理。',
+      time: '08:20',
+      icon: 'tasks',
+      iconBgColor: '#22c55e', // green-500
+      isUnread: true,
+      date: 'today',
+    },
+    {
+      id: '4',
+      type: 2,
+      title: '数据报表',
+      message: '11月生产效率分析报表已生成，请查看。',
+      time: '昨天 16:30',
+      icon: 'chart-line',
+      iconBgColor: '#a855f7', // purple-500
+      isUnread: false,
+      date: 'yesterday',
+    },
+    {
+      id: '5',
+      type: 2,
+      title: '系统维护',
+      message: '系统将于今晚22:00-23:00进行例行维护，请提前做好准备。',
+      time: '昨天 14:15',
+      icon: 'bell',
+      iconBgColor: '#eab308', // yellow-500
+      isUnread: false,
+      date: 'yesterday',
+    },
+    {
+      id: '6',
+      type: 2,
+      title: '新成员加入',
+      message: '李工程师已加入您的生产团队，请及时安排工作。',
+      time: '11-27',
+      icon: 'user-plus',
+      iconBgColor: '#6366f1', // indigo-500
+      isUnread: false,
+      date: 'earlier',
+    },
+    {
+      id: '7',
+      type: 2,
+      title: '系统更新',
+      message: '系统已更新至v1.0.5版本，新增多项功能和优化，点击查看详情。',
+      time: '11-25',
+      icon: 'cogs',
+      iconBgColor: '#f97316', // orange-500
+      isUnread: false,
+      date: 'earlier',
+    },
+  ];
+
+  // 根据选中的选项卡筛选通知
+  const filteredNotifications =
+    selectedTabIndex === 0
+      ? notifications
+      : notifications.filter((item) => item.type === selectedTabIndex);
+
+  // 按日期分组通知
+  const todayNotifications = filteredNotifications.filter(
+    (item) => item.date === 'today'
+  );
+  const yesterdayNotifications = filteredNotifications.filter(
+    (item) => item.date === 'yesterday'
+  );
+  const earlierNotifications = filteredNotifications.filter(
+    (item) => item.date === 'earlier'
+  );
+
+  // 处理查看详情
+  const handleViewDetail = (id: string) => {
+    router.push(`/notification/${id}`);
+  };
+  // 处理忽略通知
+  const handleIgnore = (id: string) => {
+    // 实际应用中这里会更新状态
+    console.log('忽略通知:', id);
+  };
+
+  // 处理清除所有通知
+  // const handleClearAll = () => {
+  //   // 实际应用中这里会清除所有通知
+  //   console.log('清除所有通知');
+  // };
+
+  // 渲染通知项
+  const renderNotificationItem = (item: NotificationItem) => (
+    <TouchableOpacity
+      key={item.id}
+      // className="mr-2 rounded-full bg-blue-50 px-2 py-1"
+      onPress={() => handleViewDetail(item.id)}
+    >
+      <View className="border-b border-gray-100 py-4">
+        <View className="flex-row">
+          <View className="relative">
+            <View
+              className="mr-4 size-10 items-center justify-center rounded-xl"
+              style={{ backgroundColor: item.iconBgColor }}
+            >
+              <FontAwesome
+                name={item.icon}
+                size={16}
+                color="white"
+                group={GroupEnum.FontAwesome5}
+              />
+            </View>
+            {item.isUnread && (
+              <View className="absolute right-0 top-0 size-2 rounded-full bg-red-500" />
+            )}
+          </View>
+          <View className="flex-1">
+            <View className="flex-row justify-between">
+              <Text className="font-medium">{item.title}</Text>
+              <Text className="text-xs text-gray-500">{item.time}</Text>
+            </View>
+            <Text className="mt-1 text-sm text-gray-600">{item.message}</Text>
+            <View className="mt-2 flex-row justify-end">
+              {/* <Text className="text-xs text-blue-600">查看详情</Text> */}
+              <TouchableOpacity
+                className="rounded-full bg-gray-100 px-2 py-1"
+                onPress={() => handleIgnore(item.id)}
+              >
+                <Text className="text-xs text-gray-600">忽略</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+  const tabOptions: SegmentedControlOption[] = [
+    { key: 'production-plan', label: '全部' },
+    { key: 'production-task', label: '系统通知' },
+    { key: 'process-management', label: '任务提醒' },
+    { key: 'process-management1', label: '预警信息' },
+  ];
+  return (
+    <View className="flex-1 bg-gray-50">
+      <NavHeader
+        title="通知"
+        right={
+          <>
+            <TouchableOpacity style={styles.headerButton}>
+              <FontAwesome name="cog" size={18} color="#6b7280" />
+            </TouchableOpacity>
+          </>
+        }
+      />
+      <View className="mx-1 my-4">
+        <SegmentedControl
+          options={tabOptions}
+          selectedIndex={selectedTabIndex}
+          onChange={setSelectedTabIndex}
+        />
+      </View>
+      <ScrollView
+        className="flex-1"
+        contentContainerStyle={{ padding: 4, paddingBottom: 20 }}
+      >
+        {/* 今日通知 */}
+        {todayNotifications.length > 0 && (
+          <>
+            <Text className="mb-3 text-lg font-semibold">今日通知</Text>
+            <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+              {todayNotifications.map(renderNotificationItem)}
+            </View>
+          </>
+        )}
+
+        {/* 昨日通知 */}
+        {yesterdayNotifications.length > 0 && (
+          <>
+            <Text className="mb-3 text-lg font-semibold">昨日通知</Text>
+            <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+              {yesterdayNotifications.map(renderNotificationItem)}
+            </View>
+          </>
+        )}
+
+        {/* 更早通知 */}
+        {earlierNotifications.length > 0 && (
+          <>
+            <Text className="mb-3 text-lg font-semibold">更早</Text>
+            <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+              {earlierNotifications.map(renderNotificationItem)}
+            </View>
+          </>
+        )}
+
+        {/* 清除按钮 */}
+        {/* <TouchableOpacity
+          className="mb-4 mt-6 w-full rounded-xl border border-gray-200 bg-white py-3 font-medium text-gray-600"
+          onPress={handleClearAll}
+        >
+          <Text className="text-center font-medium text-gray-600">
+            清除所有通知
+          </Text>
+        </TouchableOpacity> */}
+      </ScrollView>
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  headerButton: {
+    marginLeft: 16,
+  },
+});
+export default Notification;
diff --git a/src/app/onboarding.tsx b/src/app/onboarding.tsx
index 3d49fcf9f236381371353b83d7642ec05e1059b3..c768683bb63d121c2a0a75984ae9e088cdb87a1b 100644
--- a/src/app/onboarding.tsx
+++ b/src/app/onboarding.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable react/react-in-jsx-scope */
+import { Env } from '@env';
 import { FontAwesome } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useRouter } from 'expo-router';
@@ -6,9 +6,11 @@ import React, { useEffect, useRef } from 'react';
 import {
   Animated,
   Dimensions,
+  Platform,
   StyleSheet,
   TouchableOpacity,
 } from 'react-native';
+import { getVersion } from 'react-native-device-info';
 
 import {
   FocusAwareStatusBar,
@@ -19,6 +21,7 @@ import {
   View,
 } from '@/components/ui';
 import { useIsFirstTime } from '@/lib/hooks';
+import { translate } from '@/lib/i18n';
 
 const { width, height } = Dimensions.get('window');
 
@@ -79,7 +82,7 @@ const Welcome: React.FC = () => {
         }),
       ])
     ).start();
-  }, []);
+  });
 
   // 处理开始使用按钮点击
   const handleGetStarted = () => {
@@ -92,9 +95,9 @@ const Welcome: React.FC = () => {
     <>
       <FocusAwareStatusBar />
       <ScrollView>
-        <SafeAreaView style={styles.container}>
+        <SafeAreaView className="flex-1 bg-gray-100">
           {/* 背景粒子效果 */}
-          <View style={styles.particles}>
+          <View className="absolute inset-0 z-0 overflow-hidden">
             {particles.map((particle) => (
               <Animated.View
                 key={particle.id}
@@ -120,11 +123,17 @@ const Welcome: React.FC = () => {
             ))}
           </View>
 
-          <View style={styles.contentWrapper}>
+          <View className="relative z-10 flex-1">
             {/* 版本标识 */}
-            <Animated.View style={[styles.versionBadge, { opacity: fadeAnim }]}>
-              <Text style={styles.versionText}>v2.0.1</Text>
-            </Animated.View>
+            {(Platform.OS === 'ios' || Platform.OS === 'android') && (
+              <Animated.View
+                style={[styles.versionBadge, { opacity: fadeAnim }]}
+              >
+                <Text className="text-sm font-medium text-[#F7952B]">
+                  V{getVersion()}
+                </Text>
+              </Animated.View>
+            )}
 
             {/* 顶部空间 */}
             <View style={{ height: height * 0.08 }} />
@@ -140,12 +149,11 @@ const Welcome: React.FC = () => {
               ]}
             >
               <Animated.View
-                style={[
-                  styles.logoContainer,
-                  { transform: [{ translateY: floatAnim }] },
-                ]}
+                className="relative mb-5"
+                style={[{ transform: [{ translateY: floatAnim }] }]}
               >
                 <View style={styles.logoGlow} />
+
                 <LinearGradient
                   colors={['#EBF5FF', '#E1F0FF']}
                   style={styles.logoCircle}
@@ -157,8 +165,13 @@ const Welcome: React.FC = () => {
                   />
                 </LinearGradient>
               </Animated.View>
-              <Text style={styles.title}>优智云</Text>
-              <Text style={styles.subtitle}>智能制造管理系统</Text>
+
+              <Text className="mt-4 text-2xl font-bold text-[#333]">
+                {Env.NAME}
+              </Text>
+              <Text className="mt-4 text-xl font-bold text-[#6b7280]">
+                {translate('login.sub_title')}
+              </Text>
             </Animated.View>
 
             {/* 欢迎信息 */}
@@ -171,14 +184,16 @@ const Welcome: React.FC = () => {
                 },
               ]}
             >
-              <Text style={styles.welcomeTitle}>欢迎使用轻智造ERP系统</Text>
-              <Text style={styles.welcomeText}>
+              <Text className="mb-3 text-center text-2xl font-semibold text-gray-700">
+                欢迎使用轻智造ERP系统
+              </Text>
+              <Text className="max-w-[320px] text-center text-base leading-6 text-gray-500">
                 高效、智能的制造业管理解决方案，助力企业数字化转型，提升生产效率
               </Text>
             </Animated.View>
 
             {/* 功能特点 */}
-            <View style={styles.featuresGrid}>
+            <View className="mb-8 flex-row flex-wrap justify-between px-4">
               <FeatureCard
                 icon="cogs"
                 title="生产管理"
@@ -216,15 +231,24 @@ const Welcome: React.FC = () => {
               ]}
             >
               <TouchableOpacity
-                style={styles.startButton}
+                className="overflow-hidden rounded-2xl shadow-lg"
+                style={{
+                  shadowColor: '#F7952B',
+                  shadowOffset: { width: 0, height: 4 },
+                  shadowOpacity: 0.2,
+                  shadowRadius: 8,
+                  elevation: 4,
+                }}
                 onPress={handleGetStarted}
                 activeOpacity={0.8}
               >
                 <LinearGradient
                   colors={['#F7952B', '#E94934']}
-                  style={styles.buttonGradient}
+                  className="flex-row items-center justify-center py-4"
                 >
-                  <Text style={styles.buttonText}>开始使用</Text>
+                  <Text className="text-lg font-semibold text-white">
+                    开始使用
+                  </Text>
                   <FontAwesome
                     name="arrow-right"
                     size={16}
@@ -232,20 +256,15 @@ const Welcome: React.FC = () => {
                     style={{ marginLeft: 8 }}
                   />
                 </LinearGradient>
-                {/* <Button
-              label="Let's Get Started "
-              onPress={() => {
-                setIsFirstTime(false);
-                router.replace('/login');
-              }}
-            /> */}
               </TouchableOpacity>
-              <Text style={styles.buttonHint}>点击按钮进入登录页面</Text>
+              <Text className="mt-3 text-center text-sm text-gray-500">
+                点击按钮进入登录页面
+              </Text>
             </Animated.View>
 
             {/* 底部 */}
-            <View style={styles.footer}>
-              <Text style={styles.footerText}>
+            <View className="mt-auto items-center pb-6">
+              <Text className="text-base text-gray-500">
                 © 2025 苏州优智云科技有限公司
               </Text>
             </View>
@@ -301,39 +320,28 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
         },
       ]}
     >
-      <View style={styles.featureIcon}>
-        <FontAwesome
-          name={icon as any}
-          size={24}
-          color="#fff"
-          style={styles.featureIcon1}
-        />
+      <View
+        className="mb-3 size-14 items-center justify-center rounded-2xl bg-[#F7952B] shadow-sm"
+        style={{
+          shadowColor: '#F7952B',
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.1,
+          shadowRadius: 4,
+          elevation: 2,
+        }}
+      >
+        <FontAwesome name={icon as any} size={24} color="#fff" />
       </View>
-      <Text style={styles.featureTitle}>{title}</Text>
-      <Text style={styles.featureDescription}>{description}</Text>
+      <Text className="mb-1.5 text-base font-semibold text-gray-700">
+        {title}
+      </Text>
+
+      <Text className="text-sm leading-5 text-gray-500">{description}</Text>
     </Animated.View>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-  },
-  contentWrapper: {
-    flex: 1,
-    position: 'relative',
-    zIndex: 1,
-  },
-  particles: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    overflow: 'hidden',
-    zIndex: 0,
-  },
   particle: {
     position: 'absolute',
     backgroundColor: 'rgba(0,102,255,0.1)',
@@ -358,20 +366,11 @@ const styles = StyleSheet.create({
     // borderColor: 'rgba(0,102,255,0.1)',
     zIndex: 10,
   },
-  versionText: {
-    fontSize: 12,
-    color: '#F7952B',
-    fontWeight: '500',
-  },
   logoSection: {
     alignItems: 'center',
     marginBottom: 32,
     paddingHorizontal: 20,
   },
-  logoContainer: {
-    position: 'relative',
-    marginBottom: 20,
-  },
   logoGlow: {
     position: 'absolute',
     width: 120,
@@ -395,44 +394,11 @@ const styles = StyleSheet.create({
     shadowRadius: 8,
     elevation: 5,
   },
-  title: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#333',
-    // backgroundColor: 'rgba(255,255,255,0.8)',
-    marginTop: 16,
-  },
-  subtitle: {
-    fontSize: 18,
-    color: '#6b7280',
-    marginTop: 8,
-  },
   welcomeSection: {
     alignItems: 'center',
     marginBottom: 40,
     paddingHorizontal: 20,
   },
-  welcomeTitle: {
-    fontSize: 20,
-    fontWeight: '600',
-    color: '#374151',
-    marginBottom: 12,
-    textAlign: 'center',
-  },
-  welcomeText: {
-    fontSize: 14,
-    color: '#6b7280',
-    textAlign: 'center',
-    lineHeight: 24,
-    maxWidth: 320,
-  },
-  featuresGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    marginBottom: 32,
-  },
   featureCard: {
     width: '48%',
     backgroundColor: '#FFF',
@@ -459,59 +425,10 @@ const styles = StyleSheet.create({
     shadowRadius: 4,
     elevation: 2,
   },
-  featureIcon1: {
-    // backgroundColor: 'rgba(0,102,255,0.1)',
-  },
-  featureTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#374151',
-    marginBottom: 6,
-  },
-  featureDescription: {
-    fontSize: 14,
-    color: '#6b7280',
-    lineHeight: 20,
-  },
   buttonSection: {
     paddingHorizontal: 20,
     marginBottom: 24,
   },
-  startButton: {
-    borderRadius: 16,
-    overflow: 'hidden',
-    shadowColor: '#F7952B',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.2,
-    shadowRadius: 8,
-    elevation: 4,
-  },
-  buttonGradient: {
-    paddingVertical: 16,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  buttonText: {
-    color: 'white',
-    fontSize: 18,
-    fontWeight: '600',
-  },
-  buttonHint: {
-    textAlign: 'center',
-    color: '#6b7280',
-    fontSize: 14,
-    marginTop: 12,
-  },
-  footer: {
-    marginTop: 'auto',
-    paddingBottom: 24,
-    alignItems: 'center',
-  },
-  footerText: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
 });
 
 export default Welcome;
diff --git a/src/app/order/[id].tsx b/src/app/order/[id].tsx
new file mode 100644
index 0000000000000000000000000000000000000000..beb880d8a0888da1716aefb6e11e9e8ca18701fe
--- /dev/null
+++ b/src/app/order/[id].tsx
@@ -0,0 +1,424 @@
+import { FontAwesome } from '@expo/vector-icons';
+import React, { useState } from 'react';
+import {
+  Image,
+  SafeAreaView,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import { NavHeader } from '@/components/ui';
+
+const OrderDetail = () => {
+  const [activeTab, setActiveTab] = useState('product-list');
+
+  // 切换选项卡
+  const handleTabChange = (tabId: string) => {
+    setActiveTab(tabId);
+  };
+
+  return (
+    <SafeAreaView className="flex-1 bg-gray-50">
+      <NavHeader
+        title="订单详情"
+        right={
+          <>
+            <TouchableOpacity className="mr-4">
+              <FontAwesome name="share-alt" size={18} color="#4b5563" />
+            </TouchableOpacity>
+            <TouchableOpacity>
+              <FontAwesome name="ellipsis-v" size={18} color="#4b5563" />
+            </TouchableOpacity>
+          </>
+        }
+      />
+
+      <ScrollView className="flex-1 p-4">
+        {/* 订单基本信息 */}
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+          <View className="mb-3 flex-row items-start justify-between">
+            <Text className="text-lg font-semibold">订单 #2023112702</Text>
+            <View className="rounded-full bg-purple-100 px-2 py-1">
+              <Text className="text-xs font-medium text-purple-800">
+                生产中
+              </Text>
+            </View>
+          </View>
+
+          <View className="mb-4 flex-row flex-wrap">
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">客户</Text>
+              <Text className="text-sm font-medium">北京智能科技有限公司</Text>
+            </View>
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">联系人</Text>
+              <Text className="text-sm font-medium">张经理</Text>
+            </View>
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">联系电话</Text>
+              <Text className="text-sm font-medium">138****5678</Text>
+            </View>
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">订单金额</Text>
+              <Text className="text-sm font-medium text-red-600">¥95,200</Text>
+            </View>
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">订单日期</Text>
+              <Text className="text-sm font-medium">2023-11-27</Text>
+            </View>
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">交付日期</Text>
+              <Text className="text-sm font-medium">2023-12-10</Text>
+            </View>
+          </View>
+
+          <View className="rounded-lg bg-blue-50 p-3">
+            <Text className="mb-1 text-xs text-gray-500">收货地址</Text>
+            <Text className="text-sm">北京市海淀区中关村科技园区8号楼5层</Text>
+          </View>
+        </View>
+
+        {/* 选项卡 - 分段控制器样式 */}
+        <View className="mb-4 flex-row rounded-lg bg-gray-200 p-1">
+          <TouchableOpacity
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'product-list' ? 'bg-white' : ''}`}
+            onPress={() => handleTabChange('product-list')}
+          >
+            <Text
+              className={`text-center text-sm ${activeTab === 'product-list' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+            >
+              产品明细
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'production-progress' ? 'bg-white' : ''}`}
+            onPress={() => handleTabChange('production-progress')}
+          >
+            <Text
+              className={`text-center text-sm ${activeTab === 'production-progress' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+            >
+              生产进度
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'logistics-info' ? 'bg-white' : ''}`}
+            onPress={() => handleTabChange('logistics-info')}
+          >
+            <Text
+              className={`text-center text-sm ${activeTab === 'logistics-info' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+            >
+              物流信息
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'payment-info' ? 'bg-white' : ''}`}
+            onPress={() => handleTabChange('payment-info')}
+          >
+            <Text
+              className={`text-center text-sm ${activeTab === 'payment-info' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+            >
+              付款信息
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        {/* 选项卡内容区域 */}
+        {/* 产品明细 */}
+        {activeTab === 'product-list' && (
+          <View className="rounded-2xl bg-white p-4 shadow-sm">
+            {/* 产品项目1 */}
+            <View className="border-b border-gray-100 py-4">
+              <View className="mb-2 flex-row">
+                <View className="mr-3 size-16 overflow-hidden rounded-lg bg-gray-100">
+                  <Image
+                    source={{ uri: 'https://via.placeholder.com/64' }}
+                    className="size-full"
+                    resizeMode="cover"
+                  />
+                </View>
+                <View className="flex-1">
+                  <Text className="mb-1 font-medium">智能手表 Pro</Text>
+                  <Text className="mb-1 text-xs text-gray-500">
+                    型号：SW-2023-Pro
+                  </Text>
+                  <View className="flex-row justify-between">
+                    <Text className="text-sm text-gray-600">¥1,280 × 50</Text>
+                    <Text className="text-sm font-medium">¥64,000</Text>
+                  </View>
+                </View>
+              </View>
+              <View className="rounded bg-gray-50 p-2">
+                <Text className="mb-1 text-xs text-gray-600">
+                  规格：黑色 / 1.4英寸 / GPS+蜂窝网络
+                </Text>
+                <Text className="text-xs text-gray-600">
+                  备注：包装需使用防震材料，单独包装
+                </Text>
+              </View>
+            </View>
+
+            {/* 产品项目2 */}
+            <View className="border-b border-gray-100 py-4">
+              <View className="mb-2 flex-row">
+                <View className="mr-3 size-16 overflow-hidden rounded-lg bg-gray-100">
+                  <Image
+                    source={{ uri: 'https://via.placeholder.com/64' }}
+                    className="size-full"
+                    resizeMode="cover"
+                  />
+                </View>
+                <View className="flex-1">
+                  <Text className="mb-1 font-medium">智能手表充电器</Text>
+                  <Text className="mb-1 text-xs text-gray-500">
+                    型号：SWC-2023
+                  </Text>
+                  <View className="flex-row justify-between">
+                    <Text className="text-sm text-gray-600">¥120 × 60</Text>
+                    <Text className="text-sm font-medium">¥7,200</Text>
+                  </View>
+                </View>
+              </View>
+              <View className="rounded bg-gray-50 p-2">
+                <Text className="text-xs text-gray-600">
+                  规格：白色 / 磁吸式 / 5W
+                </Text>
+              </View>
+            </View>
+
+            {/* 产品项目3 */}
+            <View className="py-4">
+              <View className="mb-2 flex-row">
+                <View className="mr-3 size-16 overflow-hidden rounded-lg bg-gray-100">
+                  <Image
+                    source={{ uri: 'https://via.placeholder.com/64' }}
+                    className="size-full"
+                    resizeMode="cover"
+                  />
+                </View>
+                <View className="flex-1">
+                  <Text className="mb-1 font-medium">智能手表表带</Text>
+                  <Text className="mb-1 text-xs text-gray-500">
+                    型号：SWB-2023
+                  </Text>
+                  <View className="flex-row justify-between">
+                    <Text className="text-sm text-gray-600">¥200 × 120</Text>
+                    <Text className="text-sm font-medium">¥24,000</Text>
+                  </View>
+                </View>
+              </View>
+              <View className="rounded bg-gray-50 p-2">
+                <Text className="text-xs text-gray-600">
+                  规格：米兰尼斯表带 / 黑色 / 42mm
+                </Text>
+              </View>
+            </View>
+
+            {/* 订单总计 */}
+            <View className="mt-4 border-t border-gray-100 pt-4">
+              <View className="mb-2 flex-row justify-between">
+                <Text className="text-sm text-gray-600">商品总额</Text>
+                <Text className="text-sm">¥95,200</Text>
+              </View>
+              <View className="mb-2 flex-row justify-between">
+                <Text className="text-sm text-gray-600">运费</Text>
+                <Text className="text-sm">¥0</Text>
+              </View>
+              <View className="flex-row justify-between">
+                <Text className="font-medium">订单总计</Text>
+                <Text className="font-medium text-red-600">¥95,200</Text>
+              </View>
+            </View>
+          </View>
+        )}
+
+        {/* 生产进度 */}
+        {activeTab === 'production-progress' && (
+          <View className="rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 text-base font-medium">生产进度概览</Text>
+
+            <View className="mb-4">
+              <View className="mb-1 flex-row justify-between text-sm">
+                <Text>总体进度</Text>
+                <Text>65%</Text>
+              </View>
+              <View className="h-1.5 overflow-hidden rounded bg-gray-200">
+                <View
+                  className="h-full rounded bg-blue-600"
+                  style={{ width: '65%' }}
+                />
+              </View>
+            </View>
+
+            <View className="mb-4 flex-row">
+              <View className="flex-1 items-center">
+                <Text className="text-xl font-bold text-green-600">100%</Text>
+                <Text className="text-xs text-gray-500">原料采购</Text>
+              </View>
+              <View className="flex-1 items-center">
+                <Text className="text-xl font-bold text-blue-600">75%</Text>
+                <Text className="text-xs text-gray-500">生产制造</Text>
+              </View>
+              <View className="flex-1 items-center">
+                <Text className="text-xl font-bold text-gray-400">0%</Text>
+                <Text className="text-xs text-gray-500">质检包装</Text>
+              </View>
+            </View>
+
+            <Text className="mb-3 text-base font-medium">生产时间线</Text>
+
+            {/* 时间线项目 */}
+            <View className="relative mb-4 pl-7">
+              <View className="absolute left-2 top-1 size-2.5 rounded-full bg-blue-600" />
+              <View className="absolute bottom-0 left-3 top-3 w-0.5 bg-gray-200" />
+              <Text className="text-sm font-medium">订单确认</Text>
+              <Text className="text-xs text-gray-500">2023-11-27 14:30</Text>
+            </View>
+
+            <View className="relative mb-4 pl-7">
+              <View className="absolute left-2 top-1 size-2.5 rounded-full bg-blue-600" />
+              <View className="absolute bottom-0 left-3 top-3 w-0.5 bg-gray-200" />
+              <Text className="text-sm font-medium">原料采购完成</Text>
+              <Text className="text-xs text-gray-500">2023-11-29 16:45</Text>
+            </View>
+
+            <View className="relative mb-4 pl-7">
+              <View className="absolute left-2 top-1 size-2.5 rounded-full bg-blue-600" />
+              <View className="absolute bottom-0 left-3 top-3 w-0.5 bg-gray-200" />
+              <Text className="text-sm font-medium">生产开始</Text>
+              <Text className="text-xs text-gray-500">2023-11-30 09:15</Text>
+            </View>
+
+            <View className="relative mb-4 pl-7">
+              <View className="absolute left-2 top-1 size-2.5 rounded-full bg-blue-600" />
+              <View className="absolute bottom-0 left-3 top-3 w-0.5 bg-gray-200" />
+              <Text className="text-sm font-medium">智能手表组装中</Text>
+              <Text className="text-xs text-gray-500">2023-12-02 11:30</Text>
+              <Text className="mt-1 text-xs text-blue-600">
+                已完成35台，剩余15台
+              </Text>
+            </View>
+
+            <View className="relative mb-4 pl-7">
+              <View className="absolute left-2 top-1 size-2.5 rounded-full bg-gray-200" />
+              <View className="absolute bottom-0 left-3 top-3 w-0.5 bg-gray-200" />
+              <Text className="text-sm font-medium text-gray-400">
+                质量检测
+              </Text>
+              <Text className="text-xs text-gray-400">预计 2023-12-05</Text>
+            </View>
+
+            <View className="relative mb-4 pl-7">
+              <View className="absolute left-2 top-1 size-2.5 rounded-full bg-gray-200" />
+              <View className="absolute bottom-0 left-3 top-3 w-0.5 bg-gray-200" />
+              <Text className="text-sm font-medium text-gray-400">
+                包装完成
+              </Text>
+              <Text className="text-xs text-gray-400">预计 2023-12-07</Text>
+            </View>
+
+            <View className="relative pl-7">
+              <View className="absolute left-2 top-1 size-2.5 rounded-full bg-gray-200" />
+              <Text className="text-sm font-medium text-gray-400">发货</Text>
+              <Text className="text-xs text-gray-400">预计 2023-12-08</Text>
+            </View>
+          </View>
+        )}
+
+        {/* 物流信息 */}
+        {activeTab === 'logistics-info' && (
+          <View className="rounded-2xl bg-white p-4 shadow-sm">
+            <View className="mb-4 rounded-lg bg-gray-50 p-3">
+              <Text className="mb-2 text-sm">
+                订单尚未发货，预计发货日期：2023-12-08
+              </Text>
+              <Text className="text-xs text-gray-500">
+                发货后将更新物流信息
+              </Text>
+            </View>
+
+            <Text className="mb-3 text-base font-medium">收货信息</Text>
+
+            <View className="mb-4">
+              <Text className="mb-1 text-xs text-gray-500">收货人</Text>
+              <Text className="text-sm">张经理</Text>
+            </View>
+
+            <View className="mb-4">
+              <Text className="mb-1 text-xs text-gray-500">联系电话</Text>
+              <Text className="text-sm">138****5678</Text>
+            </View>
+
+            <View className="mb-4">
+              <Text className="mb-1 text-xs text-gray-500">收货地址</Text>
+              <Text className="text-sm">
+                北京市海淀区中关村科技园区8号楼5层
+              </Text>
+            </View>
+
+            <View>
+              <Text className="mb-1 text-xs text-gray-500">备注</Text>
+              <Text className="text-sm">请在工作日送货，并提前电话联系</Text>
+            </View>
+          </View>
+        )}
+
+        {/* 付款信息 */}
+        {activeTab === 'payment-info' && (
+          <View className="rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 text-base font-medium">付款状态</Text>
+
+            <View className="mb-4 flex-row items-center rounded-lg bg-green-50 p-3">
+              <FontAwesome
+                name="check-circle"
+                size={20}
+                color="#16a34a"
+                style={{ marginRight: 8 }}
+              />
+              <View>
+                <Text className="text-sm font-medium">已支付定金</Text>
+                <Text className="text-xs text-gray-500">
+                  剩余尾款待发货前支付
+                </Text>
+              </View>
+            </View>
+
+            <View className="mb-4">
+              <View className="mb-2 flex-row justify-between">
+                <Text className="text-sm text-gray-600">订单总额</Text>
+                <Text className="text-sm">¥95,200</Text>
+              </View>
+              <View className="mb-2 flex-row justify-between">
+                <Text className="text-sm text-gray-600">已付定金(30%)</Text>
+                <Text className="text-sm text-green-600">¥28,560</Text>
+              </View>
+              <View className="flex-row justify-between">
+                <Text className="font-medium">待付尾款</Text>
+                <Text className="font-medium text-red-600">¥66,640</Text>
+              </View>
+            </View>
+
+            <Text className="mb-3 text-base font-medium">付款记录</Text>
+
+            <View className="overflow-hidden rounded-lg border border-gray-100">
+              <View className="flex-row bg-gray-50 p-3">
+                <Text className="flex-1 text-xs font-medium">付款时间</Text>
+                <Text className="flex-1 text-xs font-medium">付款金额</Text>
+                <Text className="flex-1 text-xs font-medium">付款方式</Text>
+              </View>
+
+              <View className="flex-row border-t border-gray-100 p-3">
+                <Text className="flex-1 text-xs">2023-11-27</Text>
+                <Text className="flex-1 text-xs">¥28,560</Text>
+                <Text className="flex-1 text-xs">银行转账</Text>
+              </View>
+            </View>
+          </View>
+        )}
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default OrderDetail;
diff --git a/src/app/process/[id].tsx b/src/app/process/[id].tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e292421d60fe7d8b831f5af51567c5eed4e2a355
--- /dev/null
+++ b/src/app/process/[id].tsx
@@ -0,0 +1,270 @@
+import { StatusBar } from 'expo-status-bar';
+import React, { useState } from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import { NavHeader } from '@/components/ui';
+import { FontAwesome } from '@/components/ui/icons';
+
+export default function ProcessDetail() {
+  const [activeTab, setActiveTab] = useState('生产记录');
+
+  return (
+    <SafeAreaView className="flex-1 bg-gray-50">
+      <StatusBar style="dark" />
+
+      <NavHeader
+        title="工序详情"
+        right={
+          <>
+            <TouchableOpacity className="mr-4">
+              <FontAwesome name="share-alt" size={18} color="#4b5563" />
+            </TouchableOpacity>
+            <TouchableOpacity>
+              <FontAwesome name="ellipsis-v" size={18} color="#4b5563" />
+            </TouchableOpacity>
+          </>
+        }
+      />
+
+      <ScrollView className="flex-1 p-4">
+        {/* 工序基本信息 */}
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+          <View className="mb-3 flex-row items-start justify-between">
+            <Text className="text-lg font-semibold">元器件贴装</Text>
+            <View className="rounded-full bg-green-100 px-2 py-1">
+              <Text className="text-xs font-medium text-green-800">使用中</Text>
+            </View>
+          </View>
+
+          <Text className="mb-2 text-sm text-gray-600">
+            工序编号：PR20231201-03
+          </Text>
+
+          <View className="mb-3 grid grid-cols-2 gap-4">
+            <View>
+              <Text className="mb-1 text-xs text-gray-500">负责人</Text>
+              <Text className="font-medium">王工程师</Text>
+            </View>
+            <View>
+              <Text className="mb-1 text-xs text-gray-500">标准工时</Text>
+              <Text className="font-medium">45分钟/批次</Text>
+            </View>
+          </View>
+
+          <View className="mb-3">
+            <View className="mb-1 flex-row justify-between text-sm">
+              <Text>设备利用率</Text>
+              <Text className="font-medium">85%</Text>
+            </View>
+            <View className="h-1.5 overflow-hidden rounded bg-gray-200">
+              <View
+                className="h-full rounded bg-green-500"
+                style={{ width: '85%' }}
+              />
+            </View>
+          </View>
+
+          <View className="rounded-lg bg-blue-50 p-3">
+            <Text className="mb-1 text-sm font-medium">关联设备</Text>
+            <View className="flex-row items-center">
+              <FontAwesome
+                name="microchip"
+                size={16}
+                color="#2563eb"
+                className="mr-2"
+              />
+              <Text>SMT贴片机#2</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* 工序详情选项卡 */}
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          className="mb-4 pb-2"
+        >
+          {['生产记录', '质量控制', '工艺参数', '操作指南'].map((tab) => (
+            <TouchableOpacity
+              key={tab}
+              onPress={() => setActiveTab(tab)}
+              className={`mr-2 rounded-full px-4 py-2 ${activeTab === tab ? 'bg-blue-600' : 'bg-gray-200'}`}
+            >
+              <Text
+                className={`text-sm font-medium ${activeTab === tab ? 'text-white' : 'text-gray-800'}`}
+              >
+                {tab}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+
+        {/* 生产记录 */}
+        {activeTab === '生产记录' && (
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 font-medium">生产记录</Text>
+
+            <ScrollView horizontal className="overflow-x-auto">
+              <View>
+                <View className="flex-row bg-gray-50">
+                  <Text className="px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500">
+                    日期
+                  </Text>
+                  <Text className="px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500">
+                    批次
+                  </Text>
+                  <Text className="px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500">
+                    产量
+                  </Text>
+                  <Text className="px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500">
+                    良品率
+                  </Text>
+                  <Text className="px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500">
+                    操作员
+                  </Text>
+                </View>
+
+                <View className="border-t border-gray-200">
+                  <View className="flex-row">
+                    <Text className="px-2 py-3 text-sm">2023-12-04</Text>
+                    <Text className="px-2 py-3 text-sm">B20231204-01</Text>
+                    <Text className="px-2 py-3 text-sm">120件</Text>
+                    <Text className="px-2 py-3 text-sm">98.3%</Text>
+                    <Text className="px-2 py-3 text-sm">张三</Text>
+                  </View>
+                </View>
+
+                <View className="border-t border-gray-200">
+                  <View className="flex-row">
+                    <Text className="px-2 py-3 text-sm">2023-12-03</Text>
+                    <Text className="px-2 py-3 text-sm">B20231203-02</Text>
+                    <Text className="px-2 py-3 text-sm">150件</Text>
+                    <Text className="px-2 py-3 text-sm">97.5%</Text>
+                    <Text className="px-2 py-3 text-sm">李四</Text>
+                  </View>
+                </View>
+
+                <View className="border-t border-gray-200">
+                  <View className="flex-row">
+                    <Text className="px-2 py-3 text-sm">2023-12-02</Text>
+                    <Text className="px-2 py-3 text-sm">B20231202-01</Text>
+                    <Text className="px-2 py-3 text-sm">130件</Text>
+                    <Text className="px-2 py-3 text-sm">99.1%</Text>
+                    <Text className="px-2 py-3 text-sm">王五</Text>
+                  </View>
+                </View>
+              </View>
+            </ScrollView>
+          </View>
+        )}
+
+        {/* 工艺参数 */}
+        {activeTab === '工艺参数' && (
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 font-medium">工艺参数</Text>
+
+            <View className="mb-3 flex-row flex-wrap">
+              <View className="mb-3 w-1/2 pr-2">
+                <Text className="mb-1 text-xs text-gray-500">贴片速度</Text>
+                <Text className="font-medium">0.1秒/个</Text>
+              </View>
+              <View className="mb-3 w-1/2 pl-2">
+                <Text className="mb-1 text-xs text-gray-500">定位精度</Text>
+                <Text className="font-medium">±0.02mm</Text>
+              </View>
+              <View className="mb-3 w-1/2 pr-2">
+                <Text className="mb-1 text-xs text-gray-500">最小元件尺寸</Text>
+                <Text className="font-medium">0201(0.6mm×0.3mm)</Text>
+              </View>
+              <View className="mb-3 w-1/2 pl-2">
+                <Text className="mb-1 text-xs text-gray-500">最大PCB尺寸</Text>
+                <Text className="font-medium">330mm×250mm</Text>
+              </View>
+            </View>
+
+            <View className="rounded-lg bg-yellow-50 p-3">
+              <View className="flex-row items-start">
+                <FontAwesome
+                  name="exclamation-circle"
+                  size={16}
+                  color="#d97706"
+                  className="mr-2 mt-0.5"
+                />
+                <View>
+                  <Text className="mb-1 text-sm font-medium">注意事项</Text>
+                  <Text className="text-xs text-gray-700">
+                    1. 确保PCB板表面清洁无污染
+                  </Text>
+                  <Text className="text-xs text-gray-700">
+                    2. 定期检查吸嘴状态，避免漏吸
+                  </Text>
+                  <Text className="text-xs text-gray-700">
+                    3. 元件供料器需定期校准
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        )}
+
+        {/* 质量控制 */}
+        {activeTab === '质量控制' && (
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 font-medium">质量控制</Text>
+
+            <View className="mb-3">
+              <Text className="mb-1 text-sm font-medium">检验标准</Text>
+              <Text className="mb-2 text-sm text-gray-700">
+                IPC-A-610G 3级标准
+              </Text>
+
+              <Text className="mb-1 text-sm font-medium">检验项目</Text>
+              <View className="mb-2 flex-row flex-wrap gap-2">
+                <View className="rounded bg-gray-100 px-2 py-1">
+                  <Text className="text-xs text-gray-800">元件位置</Text>
+                </View>
+                <View className="rounded bg-gray-100 px-2 py-1">
+                  <Text className="text-xs text-gray-800">焊接质量</Text>
+                </View>
+                <View className="rounded bg-gray-100 px-2 py-1">
+                  <Text className="text-xs text-gray-800">极性方向</Text>
+                </View>
+                <View className="rounded bg-gray-100 px-2 py-1">
+                  <Text className="text-xs text-gray-800">元件完整性</Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        )}
+
+        {/* 操作指南 */}
+        {activeTab === '操作指南' && (
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 font-medium">操作指南</Text>
+
+            <View className="mb-3">
+              <Text className="mb-2 text-sm font-medium">操作步骤</Text>
+              <View className="mb-3 rounded-lg bg-gray-50 p-3">
+                <Text className="mb-1 text-sm">1. 确认PCB板已完成前道工序</Text>
+                <Text className="mb-1 text-sm">
+                  2. 检查贴片机程序是否正确加载
+                </Text>
+                <Text className="mb-1 text-sm">
+                  3. 确认元件供料器已正确安装
+                </Text>
+                <Text className="mb-1 text-sm">4. 启动设备并监控首件生产</Text>
+                <Text className="text-sm">5. 完成后进行首件检验确认</Text>
+              </View>
+            </View>
+          </View>
+        )}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
diff --git a/src/app/process/index.tsx b/src/app/process/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..292d04ba4ab69dbbf8dcb7ca0603fba321a90155
--- /dev/null
+++ b/src/app/process/index.tsx
@@ -0,0 +1,254 @@
+import { useRouter } from 'expo-router';
+import React, { useState } from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import { NavHeader } from '@/components/ui';
+import { FontAwesome } from '@/components/ui/icons';
+const ProcessList = () => {
+  const [activeFilter, setActiveFilter] = useState('全部');
+  const router = useRouter();
+
+  const goToProcessDetail = () => {
+    router.push(`/process/1`);
+  };
+
+  const filters = [
+    '全部',
+    '使用中',
+    '待优化',
+    '已归档',
+    '电子组装',
+    '机械加工',
+    '质量检测',
+  ];
+
+  // 工序数据
+  const processes = [
+    {
+      id: 'PR20231201-03',
+      name: '元器件贴装',
+      status: '使用中',
+      statusColor: 'green',
+      manager: '王工程师',
+      standardTime: '45分钟/批次',
+      utilizationRate: 85,
+      equipment: 'SMT贴片机#2',
+      icon: 'microchip',
+    },
+    {
+      id: 'PR20231202-05',
+      name: 'PCB焊接',
+      status: '使用中',
+      statusColor: 'green',
+      manager: '李工程师',
+      standardTime: '30分钟/批次',
+      utilizationRate: 92,
+      equipment: '回流焊接机#1',
+      icon: 'fire',
+    },
+    {
+      id: 'PR20231203-02',
+      name: '电路测试',
+      status: '待优化',
+      statusColor: 'orange',
+      manager: '张工程师',
+      standardTime: '60分钟/批次',
+      utilizationRate: 68,
+      equipment: '电路测试仪#3',
+      icon: 'bolt',
+    },
+    {
+      id: 'PR20231204-01',
+      name: '外壳组装',
+      status: '使用中',
+      statusColor: 'green',
+      manager: '赵工程师',
+      standardTime: '25分钟/批次',
+      utilizationRate: 78,
+      equipment: '组装工作站#2',
+      icon: 'tools',
+    },
+  ];
+
+  // 根据筛选条件过滤工序
+  const filteredProcesses =
+    activeFilter === '全部'
+      ? processes
+      : processes.filter(
+          (process) =>
+            process.status === activeFilter ||
+            process.name.includes(activeFilter)
+        );
+
+  return (
+    <SafeAreaView className="flex-1 bg-gray-50">
+      <NavHeader title="工序管理" leftShown={false} />
+
+      <ScrollView className="flex-1 p-4">
+        {/* 工序统计概览 */}
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+          <Text className="mb-3 text-lg font-semibold">工序概览</Text>
+          <View className="mb-3 flex-row">
+            <View className="flex-1 items-center">
+              <Text className="text-xl font-bold text-blue-600">32</Text>
+              <Text className="text-xs text-gray-500">总工序</Text>
+            </View>
+            <View className="flex-1 items-center">
+              <Text className="text-xl font-bold text-green-600">18</Text>
+              <Text className="text-xs text-gray-500">使用中</Text>
+            </View>
+            <View className="flex-1 items-center">
+              <Text className="text-xl font-bold text-orange-600">8</Text>
+              <Text className="text-xs text-gray-500">待优化</Text>
+            </View>
+            <View className="flex-1 items-center">
+              <Text className="text-xl font-bold text-gray-600">6</Text>
+              <Text className="text-xs text-gray-500">已归档</Text>
+            </View>
+          </View>
+
+          <View className="mb-3">
+            <View className="mb-1 flex-row justify-between">
+              <Text className="text-sm">工序效率指数</Text>
+              <Text className="text-sm font-medium">82%</Text>
+            </View>
+            <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+              <View
+                className="h-full rounded-full bg-blue-500"
+                style={{ width: '82%' }}
+              />
+            </View>
+          </View>
+
+          <View className="rounded-lg bg-blue-50 p-3">
+            <View className="flex-row">
+              <FontAwesome
+                name="info-circle"
+                size={16}
+                color="#0066ff"
+                style={{ marginTop: 2, marginRight: 8 }}
+              />
+              <View>
+                <Text className="mb-1 text-sm font-medium">工序优化建议</Text>
+                <Text className="text-xs text-gray-700">
+                  根据近期生产数据分析，"元器件贴装"工序可通过调整设备参数提升15%效率
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        {/* 工序筛选器 */}
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          className="mb-4"
+        >
+          <View className="flex-row">
+            {filters.map((filter) => (
+              <TouchableOpacity
+                key={filter}
+                className={`mr-2 rounded-full px-4 py-2 ${activeFilter === filter ? 'bg-blue-600' : 'bg-gray-100'}`}
+                onPress={() => setActiveFilter(filter)}
+              >
+                <Text
+                  className={`text-xs font-medium ${activeFilter === filter ? 'text-white' : 'text-gray-800'}`}
+                >
+                  {filter}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </ScrollView>
+
+        {/* 工序列表 */}
+        <Text className="mb-3 text-lg font-semibold">工序列表</Text>
+
+        {/* 工序卡片 - 使用数据循环 */}
+        {filteredProcesses.map((process) => (
+          <TouchableOpacity
+            key={process.id}
+            className="mb-4 rounded-2xl bg-white p-4 shadow-sm"
+            onPress={goToProcessDetail}
+          >
+            <View className="mb-3 flex-row items-start justify-between">
+              <Text className="text-base font-semibold">{process.name}</Text>
+              <View
+                className={`bg-${process.statusColor}-100 rounded-full px-2 py-1`}
+              >
+                <Text
+                  className={`text- text-xs${process.statusColor}-800 font-medium`}
+                >
+                  {process.status}
+                </Text>
+              </View>
+            </View>
+
+            <Text className="mb-2 text-sm text-gray-600">
+              工序编号：{process.id}
+            </Text>
+
+            <View className="mb-3 flex-row">
+              <View className="flex-1">
+                <Text className="mb-1 text-xs text-gray-500">负责人</Text>
+                <Text className="font-medium">{process.manager}</Text>
+              </View>
+              <View className="flex-1">
+                <Text className="mb-1 text-xs text-gray-500">标准工时</Text>
+                <Text className="font-medium">{process.standardTime}</Text>
+              </View>
+            </View>
+
+            <View className="mb-3">
+              <View className="mb-1 flex-row justify-between">
+                <Text className="text-sm">设备利用率</Text>
+                <Text className="text-sm font-medium">
+                  {process.utilizationRate}%
+                </Text>
+              </View>
+              <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+                <View
+                  className={`bg- h-full${process.utilizationRate >= 80 ? 'green' : process.utilizationRate >= 70 ? 'blue' : 'orange'}-500 rounded-full`}
+                  style={{ width: `${process.utilizationRate}%` }}
+                />
+              </View>
+            </View>
+
+            <View className="flex-row items-center justify-between">
+              <View className="flex-row items-center">
+                <FontAwesome
+                  name={process.icon}
+                  size={14}
+                  color="#666"
+                  style={{ marginRight: 4 }}
+                />
+                <Text className="text-sm text-gray-600">
+                  {process.equipment}
+                </Text>
+              </View>
+              <Text className="text-sm font-medium text-blue-600">
+                查看详情
+              </Text>
+            </View>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+
+      {/* 浮动按钮 - 新建工序 */}
+      <TouchableOpacity
+        className="absolute bottom-24 right-6 size-14 items-center justify-center rounded-full bg-blue-600 shadow-lg"
+        style={{ elevation: 5 }}
+      >
+        <FontAwesome name="plus" size={20} color="#fff" />
+      </TouchableOpacity>
+    </SafeAreaView>
+  );
+};
+
+export default ProcessList;
diff --git a/src/app/production/[id].tsx b/src/app/production/[id].tsx
new file mode 100644
index 0000000000000000000000000000000000000000..744ad3a56b429a9456bf080b113cdccab4634245
--- /dev/null
+++ b/src/app/production/[id].tsx
@@ -0,0 +1,667 @@
+import { StatusBar } from 'expo-status-bar';
+import React, { useState } from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import { NavHeader } from '@/components/ui';
+import { FontAwesome } from '@/components/ui/icons';
+
+const ProductionDetail = () => {
+  const [activeTab, setActiveTab] = useState('production-process');
+
+  return (
+    <SafeAreaView className="flex-1 bg-gray-50">
+      <StatusBar style="auto" />
+
+      <NavHeader
+        title="生产详情"
+        right={
+          <>
+            <TouchableOpacity className="mr-4">
+              <FontAwesome name="share-alt" size={18} color="#4b5563" />
+            </TouchableOpacity>
+            <TouchableOpacity>
+              <FontAwesome name="ellipsis-v" size={18} color="#4b5563" />
+            </TouchableOpacity>
+          </>
+        }
+      />
+
+      <ScrollView className="flex-1 p-4">
+        {/* 生产计划基本信息 */}
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+          <View className="mb-3 flex-row items-start justify-between">
+            <Text className="text-lg font-semibold">
+              夏季新品连衣裙生产计划
+            </Text>
+            <View className="rounded-full bg-green-100 px-2 py-1">
+              <Text className="text-xs font-medium text-green-800">
+                <FontAwesome
+                  name="play-circle"
+                  size={12}
+                  color="#15803d"
+                  style={{ marginRight: 4 }}
+                />
+                进行中
+              </Text>
+            </View>
+          </View>
+
+          <Text className="mb-3 text-sm text-gray-500">
+            计划编号: PL20230601
+          </Text>
+
+          <View className="mb-4 flex-row flex-wrap">
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">负责人</Text>
+              <Text className="text-sm font-medium">张经理</Text>
+            </View>
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">所属订单</Text>
+              <Text className="text-sm font-medium">ORD20230520</Text>
+            </View>
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">开始日期</Text>
+              <Text className="text-sm font-medium">2023-06-01</Text>
+            </View>
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">截止日期</Text>
+              <Text className="text-sm font-medium">2023-06-30</Text>
+            </View>
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">计划产量</Text>
+              <Text className="text-sm font-medium">2,500件</Text>
+            </View>
+            <View className="mb-3 w-1/2">
+              <Text className="mb-1 text-xs text-gray-500">已完成</Text>
+              <Text className="text-sm font-medium">1,875件 (75%)</Text>
+            </View>
+          </View>
+
+          <View className="mb-3">
+            <View className="mb-1 flex-row justify-between">
+              <Text className="text-xs">生产进度</Text>
+              <Text className="text-xs font-medium">75%</Text>
+            </View>
+            <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+              <View
+                className="h-full rounded-full bg-green-500"
+                style={{ width: '75%' }}
+              />
+            </View>
+          </View>
+
+          <View className="rounded-lg bg-blue-50 p-3">
+            <View className="flex-row">
+              <FontAwesome
+                name="info-circle"
+                size={16}
+                color="#0066ff"
+                style={{ marginTop: 2, marginRight: 8 }}
+              />
+              <View>
+                <Text className="mb-1 text-sm font-medium">生产说明</Text>
+                <Text className="text-sm">
+                  本批次连衣裙采用新型面料，需特别注意缝制工艺和质量控制。
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        {/* 选项卡控制器 */}
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          className="mb-4"
+        >
+          <View className="flex-row">
+            {[
+              { id: 'production-process', label: '生产流程' },
+              { id: 'task-list', label: '任务列表' },
+              { id: 'material-usage', label: '物料使用' },
+              { id: 'quality-control', label: '质量控制' },
+            ].map((tab) => (
+              <TouchableOpacity
+                key={tab.id}
+                className={`mr-2 rounded-full px-4 py-2 ${activeTab === tab.id ? 'bg-blue-600' : 'bg-gray-100'}`}
+                onPress={() => setActiveTab(tab.id)}
+              >
+                <Text
+                  className={`text-sm font-medium ${activeTab === tab.id ? 'text-white' : 'text-gray-800'}`}
+                >
+                  {tab.label}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </ScrollView>
+
+        {/* 选项卡内容区域 */}
+        <View className="mt-2">
+          {/* 生产流程内容 */}
+          {activeTab === 'production-process' && (
+            <View>
+              {/* 工序流程图 */}
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+                <Text className="mb-3 text-base font-semibold">生产流程</Text>
+                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                  <View className="flex-row items-center py-2">
+                    <View className="items-center">
+                      <View className="w-15 h-15 items-center justify-center rounded-full bg-green-100">
+                        <FontAwesome name="cut" size={20} color="#16a34a" />
+                        <View className="absolute right-0 top-0 size-5 items-center justify-center rounded-full bg-green-500">
+                          <FontAwesome name="check" size={10} color="#fff" />
+                        </View>
+                      </View>
+                      <Text className="mt-1 text-xs font-medium">裁剪</Text>
+                      <Text className="text-xs text-gray-500">已完成</Text>
+                    </View>
+
+                    <View className="mx-1 h-0.5 w-10 bg-green-500" />
+
+                    <View className="items-center">
+                      <View className="w-15 h-15 items-center justify-center rounded-full bg-blue-100">
+                        <FontAwesome name="tshirt" size={20} color="#2563eb" />
+                        <View className="absolute right-0 top-0 size-5 items-center justify-center rounded-full bg-blue-500">
+                          <FontAwesome name="sync" size={10} color="#fff" />
+                        </View>
+                      </View>
+                      <Text className="mt-1 text-xs font-medium">缝制</Text>
+                      <Text className="text-xs text-gray-500">进行中</Text>
+                    </View>
+
+                    <View className="mx-1 h-0.5 w-10 bg-gray-300" />
+
+                    <View className="items-center">
+                      <View className="w-15 h-15 items-center justify-center rounded-full bg-gray-100">
+                        <FontAwesome
+                          name="paint-brush"
+                          size={20}
+                          color="#6b7280"
+                        />
+                      </View>
+                      <Text className="mt-1 text-xs font-medium">装饰</Text>
+                      <Text className="text-xs text-gray-500">待开始</Text>
+                    </View>
+
+                    <View className="mx-1 h-0.5 w-10 bg-gray-300" />
+
+                    <View className="items-center">
+                      <View className="w-15 h-15 items-center justify-center rounded-full bg-gray-100">
+                        <FontAwesome name="search" size={20} color="#6b7280" />
+                      </View>
+                      <Text className="mt-1 text-xs font-medium">质检</Text>
+                      <Text className="text-xs text-gray-500">待开始</Text>
+                    </View>
+
+                    <View className="mx-1 h-0.5 w-10 bg-gray-300" />
+
+                    <View className="items-center">
+                      <View className="w-15 h-15 items-center justify-center rounded-full bg-gray-100">
+                        <FontAwesome name="tags" size={20} color="#6b7280" />
+                      </View>
+                      <Text className="mt-1 text-xs font-medium">包装</Text>
+                      <Text className="text-xs text-gray-500">待开始</Text>
+                    </View>
+                  </View>
+                </ScrollView>
+              </View>
+
+              {/* 生产时间线 */}
+              <View className="rounded-2xl bg-white p-4 shadow-sm">
+                <Text className="mb-3 text-base font-semibold">生产时间线</Text>
+
+                <View className="ml-2">
+                  {[
+                    {
+                      title: '生产计划创建',
+                      time: '2023-05-25 10:30',
+                      desc: '创建了夏季新品连衣裙生产计划',
+                      active: true,
+                    },
+                    {
+                      title: '物料准备完成',
+                      time: '2023-05-30 16:45',
+                      desc: '所有面料和辅料已准备就绪',
+                      active: true,
+                    },
+                    {
+                      title: '裁剪工序开始',
+                      time: '2023-06-01 08:00',
+                      desc: '开始裁剪面料，预计3天完成',
+                      active: true,
+                    },
+                    {
+                      title: '裁剪工序完成',
+                      time: '2023-06-03 17:30',
+                      desc: '所有面料裁剪完成，提前半天完成任务',
+                      active: true,
+                    },
+                    {
+                      title: '缝制工序开始',
+                      time: '2023-06-04 08:00',
+                      desc: '开始连衣裙缝制工作',
+                      active: true,
+                    },
+                    {
+                      title: '第一批次完成',
+                      time: '2023-06-10 15:20',
+                      desc: '完成500件连衣裙的缝制',
+                      active: true,
+                    },
+                    {
+                      title: '当前进度',
+                      time: '2023-06-15 12:00',
+                      desc: '已完成1,875件，缝制工序进行中',
+                      active: true,
+                    },
+                    {
+                      title: '预计装饰工序开始',
+                      time: '2023-06-18',
+                      desc: '',
+                      active: false,
+                    },
+                    {
+                      title: '预计质检工序开始',
+                      time: '2023-06-25',
+                      desc: '',
+                      active: false,
+                    },
+                  ].map((item, index) => (
+                    <View key={index} className="relative pb-4 pl-7">
+                      <View
+                        className={`absolute left-0 top-1 size-2.5 rounded-full ${item.active ? 'bg-blue-600' : 'bg-gray-300'}`}
+                      />
+                      {index < 8 && (
+                        <View
+                          className={`absolute left-1 top-3 h-full w-0.5 ${item.active ? 'bg-blue-600' : 'bg-gray-300'}`}
+                          style={{ height: '100%' }}
+                        />
+                      )}
+                      <Text
+                        className={`mb-1 font-medium ${!item.active ? 'text-gray-400' : ''}`}
+                      >
+                        {item.title}
+                      </Text>
+                      <Text
+                        className={`text-sm ${!item.active ? 'text-gray-400' : 'text-gray-500'}`}
+                      >
+                        {item.time}
+                      </Text>
+                      {item.desc && (
+                        <Text className="mt-1 text-sm">{item.desc}</Text>
+                      )}
+                    </View>
+                  ))}
+                </View>
+              </View>
+            </View>
+          )}
+
+          {/* 任务列表内容 */}
+          {activeTab === 'task-list' && (
+            <View>
+              {[
+                {
+                  title: '连衣裙裁剪任务',
+                  id: 'T20230601-01',
+                  status: '已完成',
+                  statusColor: 'green',
+                  icon: 'check-circle',
+                  manager: '张工',
+                  completeTime: '2023-06-03 17:30',
+                  planHours: '24小时',
+                  actualHours: '21.5小时',
+                  progress: 100,
+                },
+                {
+                  title: '连衣裙缝制任务',
+                  id: 'T20230604-01',
+                  status: '进行中',
+                  statusColor: 'blue',
+                  icon: 'play-circle',
+                  manager: '李工',
+                  completeTime: '2023-06-18',
+                  planHours: '120小时',
+                  actualHours: '90小时',
+                  progress: 75,
+                },
+                {
+                  title: '连衣裙装饰任务',
+                  id: 'T20230618-01',
+                  status: '待开始',
+                  statusColor: 'gray',
+                  icon: 'clock',
+                  manager: '王工',
+                  startTime: '2023-06-18',
+                  completeTime: '2023-06-24',
+                  planHours: '48小时',
+                  progress: 0,
+                },
+              ].map((task, index) => (
+                <View
+                  key={index}
+                  className="mb-4 rounded-2xl bg-white p-4 shadow-sm"
+                >
+                  <View className="mb-2 flex-row items-start justify-between">
+                    <View>
+                      <Text className="font-semibold">{task.title}</Text>
+                      <Text className="text-sm text-gray-500">
+                        任务编号: {task.id}
+                      </Text>
+                    </View>
+                    <View
+                      className={`bg-${task.statusColor}-100 rounded-full px-2 py-1`}
+                    >
+                      <Text
+                        className={`text- text-xs${task.statusColor}-800 font-medium`}
+                      >
+                        <FontAwesome
+                          name={task.icon}
+                          size={12}
+                          color={
+                            task.statusColor === 'green'
+                              ? '#15803d'
+                              : task.statusColor === 'blue'
+                                ? '#1d4ed8'
+                                : '#4b5563'
+                          }
+                          style={{ marginRight: 4 }}
+                        />
+                        {task.status}
+                      </Text>
+                    </View>
+                  </View>
+
+                  <View className="my-3 flex-row flex-wrap">
+                    <View className="mb-2 w-1/2">
+                      <Text className="text-xs text-gray-500">负责人</Text>
+                      <Text className="font-medium">{task.manager}</Text>
+                    </View>
+                    <View className="mb-2 w-1/2">
+                      <Text className="text-xs text-gray-500">
+                        {task.status === '已完成'
+                          ? '完成时间'
+                          : task.status === '进行中'
+                            ? '预计完成'
+                            : '计划开始'}
+                      </Text>
+                      <Text className="font-medium">
+                        {task.status === '已完成'
+                          ? task.completeTime
+                          : task.status === '进行中'
+                            ? task.completeTime
+                            : task.startTime}
+                      </Text>
+                    </View>
+                    <View className="mb-2 w-1/2">
+                      <Text className="text-xs text-gray-500">计划工时</Text>
+                      <Text className="font-medium">{task.planHours}</Text>
+                    </View>
+                    <View className="mb-2 w-1/2">
+                      <Text className="text-xs text-gray-500">
+                        {task.status === '已完成'
+                          ? '实际工时'
+                          : task.status === '进行中'
+                            ? '已用工时'
+                            : '计划完成'}
+                      </Text>
+                      <Text className="font-medium">
+                        {task.status === '已完成'
+                          ? task.actualHours
+                          : task.status === '进行中'
+                            ? task.actualHours
+                            : task.completeTime}
+                      </Text>
+                    </View>
+                  </View>
+
+                  {task.status === '进行中' && (
+                    <View className="mb-2">
+                      <View className="mb-1 flex-row justify-between text-xs">
+                        <Text>任务进度</Text>
+                        <Text className="font-medium">{task.progress}%</Text>
+                      </View>
+                      <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+                        <View
+                          className="h-full rounded-full bg-blue-500"
+                          style={{ width: `${task.progress}%` }}
+                        />
+                      </View>
+                    </View>
+                  )}
+                </View>
+              ))}
+            </View>
+          )}
+
+          {/* 物料使用内容 */}
+          {activeTab === 'material-usage' && (
+            <View>
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+                <Text className="mb-3 text-base font-semibold">
+                  物料使用情况
+                </Text>
+
+                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                  <View>
+                    <View className="flex-row bg-gray-50 py-2">
+                      <Text className="w-24 px-3 text-xs font-medium uppercase text-gray-500">
+                        物料名称
+                      </Text>
+                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500">
+                        规格
+                      </Text>
+                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500">
+                        计划用量
+                      </Text>
+                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500">
+                        已用量
+                      </Text>
+                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500">
+                        剩余量
+                      </Text>
+                    </View>
+
+                    {[
+                      {
+                        name: '棉麻面料',
+                        spec: '1.5米宽',
+                        plan: '3,750米',
+                        used: '2,850米',
+                        remain: '900米',
+                      },
+                      {
+                        name: '拉链',
+                        spec: '20cm',
+                        plan: '2,500个',
+                        used: '1,875个',
+                        remain: '625个',
+                      },
+                      {
+                        name: '装饰纽扣',
+                        spec: '1.2cm',
+                        plan: '10,000个',
+                        used: '0个',
+                        remain: '10,000个',
+                      },
+                      {
+                        name: '缝纫线',
+                        spec: '白色',
+                        plan: '250卷',
+                        used: '180卷',
+                        remain: '70卷',
+                      },
+                    ].map((material, index) => (
+                      <View
+                        key={index}
+                        className="flex-row border-t border-gray-200 py-2"
+                      >
+                        <Text className="w-24 px-3 text-sm">
+                          {material.name}
+                        </Text>
+                        <Text className="w-20 px-3 text-sm">
+                          {material.spec}
+                        </Text>
+                        <Text className="w-20 px-3 text-sm">
+                          {material.plan}
+                        </Text>
+                        <Text className="w-20 px-3 text-sm">
+                          {material.used}
+                        </Text>
+                        <Text className="w-20 px-3 text-sm">
+                          {material.remain}
+                        </Text>
+                      </View>
+                    ))}
+                  </View>
+                </ScrollView>
+              </View>
+
+              <View className="mb-20 rounded-2xl bg-white p-4 shadow-sm">
+                <Text className="mb-3 text-base font-semibold">
+                  物料消耗分析
+                </Text>
+
+                <View className="mb-4">
+                  <View className="mb-1 flex-row justify-between text-sm">
+                    <Text>面料利用率</Text>
+                    <Text>92.5%</Text>
+                  </View>
+                  <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+                    <View
+                      className="h-full rounded-full bg-green-500"
+                      style={{ width: '92.5%' }}
+                    />
+                  </View>
+                </View>
+
+                <View className="mb-4">
+                  <View className="mb-1 flex-row justify-between text-sm">
+                    <Text>辅料消耗率</Text>
+                    <Text>75%</Text>
+                  </View>
+                  <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+                    <View
+                      className="h-full rounded-full bg-blue-500"
+                      style={{ width: '75%' }}
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          )}
+
+          {/* 质量控制内容 */}
+          {activeTab === 'quality-control' && (
+            <View>
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+                <Text className="mb-3 text-base font-semibold">
+                  质量检验标准
+                </Text>
+
+                <View className="mb-4">
+                  <Text className="mb-1 text-sm font-medium">面料质量</Text>
+                  <Text className="text-sm text-gray-700">
+                    面料平整度≥95%，色差≤±2%，接缝强度≥4.5kg/cm
+                  </Text>
+                </View>
+
+                <View className="mb-4">
+                  <Text className="mb-1 text-sm font-medium">缝制质量</Text>
+                  <Text className="text-sm text-gray-700">
+                    针距均匀度≥98%，接缝平整，无跳针、断线现象
+                  </Text>
+                </View>
+
+                <View>
+                  <Text className="mb-1 text-sm font-medium">外观质量</Text>
+                  <Text className="text-sm text-gray-700">
+                    无明显瑕疵，装饰部件牢固，整体外观符合设计要求
+                  </Text>
+                </View>
+              </View>
+
+              <View className="mb-10 rounded-2xl bg-white p-4 shadow-sm">
+                <Text className="mb-3 text-base font-semibold">
+                  质量检验记录
+                </Text>
+
+                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                  <View>
+                    <View className="flex-row bg-gray-50 py-2">
+                      <Text className="w-24 px-3 text-xs font-medium uppercase text-gray-500">
+                        批次
+                      </Text>
+                      <Text className="w-24 px-3 text-xs font-medium uppercase text-gray-500">
+                        检验日期
+                      </Text>
+                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500">
+                        检验数量
+                      </Text>
+                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500">
+                        合格率
+                      </Text>
+                      <Text className="w-24 px-3 text-xs font-medium uppercase text-gray-500">
+                        检验员
+                      </Text>
+                    </View>
+
+                    {[
+                      {
+                        batch: 'B20230603-01',
+                        date: '2023-06-03',
+                        count: '500件',
+                        rate: '98.4%',
+                        inspector: '王质检',
+                      },
+                      {
+                        batch: 'B20230610-01',
+                        date: '2023-06-10',
+                        count: '500件',
+                        rate: '99.2%',
+                        inspector: '李质检',
+                      },
+                      {
+                        batch: 'B20230615-01',
+                        date: '2023-06-15',
+                        count: '875件',
+                        rate: '97.8%',
+                        inspector: '张质检',
+                      },
+                    ].map((record, index) => (
+                      <View
+                        key={index}
+                        className="flex-row border-t border-gray-200 py-2"
+                      >
+                        <Text className="w-24 px-3 text-sm">
+                          {record.batch}
+                        </Text>
+                        <Text className="w-24 px-3 text-sm">{record.date}</Text>
+                        <Text className="w-20 px-3 text-sm">
+                          {record.count}
+                        </Text>
+                        <Text className="w-20 px-3 text-sm">{record.rate}</Text>
+                        <Text className="w-24 px-3 text-sm">
+                          {record.inspector}
+                        </Text>
+                      </View>
+                    ))}
+                  </View>
+                </ScrollView>
+              </View>
+            </View>
+          )}
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default ProductionDetail;
diff --git a/src/app/quality/[id].tsx b/src/app/quality/[id].tsx
new file mode 100644
index 0000000000000000000000000000000000000000..93919d3c92878e54e3a8103545a23fe2b55f8c39
--- /dev/null
+++ b/src/app/quality/[id].tsx
@@ -0,0 +1,461 @@
+import React, { useState } from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import { NavHeader } from '@/components/ui';
+import { FontAwesome } from '@/components/ui/icons';
+const QualityDetail = () => {
+  const [activeTab, setActiveTab] = useState(0);
+
+  // 选项卡内容
+  const tabs = ['检验结果', '不良品分析', '操作记录', '检验标准'];
+
+  return (
+    <SafeAreaView className="flex-1 bg-gray-50">
+      <NavHeader title="质量详情" />
+
+      <ScrollView className="flex-1 p-4">
+        {/* 质检任务基本信息 */}
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+          <View className="mb-3 flex-row items-start justify-between">
+            <Text className="text-lg font-semibold">智能手表主板质检</Text>
+            <View className="rounded-full bg-blue-100 px-2 py-1">
+              <Text className="text-xs font-medium text-blue-800">进行中</Text>
+            </View>
+          </View>
+
+          <Text className="mb-3 text-sm text-gray-600">
+            任务编号：QC20231128-01
+          </Text>
+
+          <View className="mb-3 grid grid-cols-2 gap-4">
+            <View>
+              <Text className="mb-1 text-xs text-gray-500">负责人</Text>
+              <Text className="font-medium">王质检</Text>
+            </View>
+            <View>
+              <Text className="mb-1 text-xs text-gray-500">截止日期</Text>
+              <Text className="font-medium">2023-12-05</Text>
+            </View>
+            <View>
+              <Text className="mb-1 text-xs text-gray-500">关联产品</Text>
+              <Text className="font-medium">智能手表 SW-2023</Text>
+            </View>
+            <View>
+              <Text className="mb-1 text-xs text-gray-500">批次号</Text>
+              <Text className="font-medium">BT20231201-A</Text>
+            </View>
+          </View>
+
+          <View className="mb-3">
+            <View className="mb-1 flex-row items-center justify-between">
+              <Text className="text-sm">完成进度</Text>
+              <Text className="font-medium">65%</Text>
+            </View>
+            <View className="h-1.5 overflow-hidden rounded-sm bg-gray-200">
+              <View
+                className="h-full rounded-sm bg-blue-500"
+                style={{ width: '65%' }}
+              />
+            </View>
+          </View>
+
+          <View className="rounded-lg bg-blue-50 p-3">
+            <View className="flex-row items-start">
+              <FontAwesome
+                name="info-circle"
+                size={16}
+                color="#0066ff"
+                style={{ marginTop: 2, marginRight: 8 }}
+              />
+              <View>
+                <Text className="mb-1 text-sm font-medium">检验说明</Text>
+                <Text className="text-xs text-gray-700">
+                  本次质检针对智能手表主板进行全面检测，包括电路连通性、元器件焊接质量、功能测试等。
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        {/* 检验选项卡 */}
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          className="mb-4"
+        >
+          <View className="flex-row space-x-2 pb-2">
+            {tabs.map((tab, index) => (
+              <TouchableOpacity
+                key={index}
+                onPress={() => setActiveTab(index)}
+                className={`rounded-full px-4 py-2 ${activeTab === index ? 'bg-blue-600' : ''}`}
+              >
+                <Text
+                  className={`whitespace-nowrap text-sm font-medium ${activeTab === index ? 'text-white' : 'text-gray-600'}`}
+                >
+                  {tab}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </ScrollView>
+
+        {/* 检验结果 */}
+        {activeTab === 0 && (
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 font-medium">检验结果统计</Text>
+
+            <View className="mb-4 flex-row justify-between">
+              <View className="items-center">
+                <Text className="text-xl font-bold text-blue-600">650</Text>
+                <Text className="text-xs text-gray-500">已检测</Text>
+              </View>
+              <View className="items-center">
+                <Text className="text-xl font-bold text-green-600">637</Text>
+                <Text className="text-xs text-gray-500">合格</Text>
+              </View>
+              <View className="items-center">
+                <Text className="text-xl font-bold text-red-600">13</Text>
+                <Text className="text-xs text-gray-500">不合格</Text>
+              </View>
+            </View>
+
+            <View className="mb-3">
+              <View className="mb-1 flex-row items-center justify-between">
+                <Text className="text-sm">合格率</Text>
+                <Text className="font-medium text-green-600">98.0%</Text>
+              </View>
+              <View className="h-1.5 overflow-hidden rounded-sm bg-gray-200">
+                <View
+                  className="h-full rounded-sm bg-green-500"
+                  style={{ width: '98%' }}
+                />
+              </View>
+            </View>
+
+            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+              <View>
+                <View className="flex-row bg-gray-50">
+                  <Text className="w-24 px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500">
+                    检验项目
+                  </Text>
+                  <Text className="w-20 px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500">
+                    标准值
+                  </Text>
+                  <Text className="w-20 px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500">
+                    合格率
+                  </Text>
+                  <Text className="w-20 px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500">
+                    状态
+                  </Text>
+                </View>
+
+                <View className="border-b border-gray-200">
+                  <View className="flex-row">
+                    <Text className="w-24 px-2 py-3 text-sm">电路连通性</Text>
+                    <Text className="w-20 px-2 py-3 text-sm">100%</Text>
+                    <Text className="w-20 px-2 py-3 text-sm">99.5%</Text>
+                    <View className="w-20 px-2 py-3">
+                      <View className="rounded-full bg-green-100 px-2 py-0.5">
+                        <Text className="text-xs text-green-800">合格</Text>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+
+                <View className="border-b border-gray-200">
+                  <View className="flex-row">
+                    <Text className="w-24 px-2 py-3 text-sm">元器件焊接</Text>
+                    <Text className="w-20 px-2 py-3 text-sm">≥98%</Text>
+                    <Text className="w-20 px-2 py-3 text-sm">97.2%</Text>
+                    <View className="w-20 px-2 py-3">
+                      <View className="rounded-full bg-red-100 px-2 py-0.5">
+                        <Text className="text-xs text-red-800">不合格</Text>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+
+                <View className="border-b border-gray-200">
+                  <View className="flex-row">
+                    <Text className="w-24 px-2 py-3 text-sm">功能测试</Text>
+                    <Text className="w-20 px-2 py-3 text-sm">≥99%</Text>
+                    <Text className="w-20 px-2 py-3 text-sm">99.1%</Text>
+                    <View className="w-20 px-2 py-3">
+                      <View className="rounded-full bg-green-100 px-2 py-0.5">
+                        <Text className="text-xs text-green-800">合格</Text>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+
+                <View className="border-b border-gray-200">
+                  <View className="flex-row">
+                    <Text className="w-24 px-2 py-3 text-sm">外观检查</Text>
+                    <Text className="w-20 px-2 py-3 text-sm">≥95%</Text>
+                    <Text className="w-20 px-2 py-3 text-sm">98.3%</Text>
+                    <View className="w-20 px-2 py-3">
+                      <View className="rounded-full bg-green-100 px-2 py-0.5">
+                        <Text className="text-xs text-green-800">合格</Text>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </ScrollView>
+          </View>
+        )}
+
+        {/* 不良品分析 */}
+        {activeTab === 1 && (
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 font-medium">不良品分析</Text>
+
+            <View className="mb-4 flex-row items-center">
+              <View className="h-24 w-1/3 items-center justify-center rounded-lg bg-red-50">
+                <Text className="text-xl font-bold text-red-600">2.0%</Text>
+                <Text className="text-xs text-gray-500">不良品率</Text>
+              </View>
+              <View className="w-2/3 pl-4">
+                <Text className="mb-2 text-sm">主要不良原因：</Text>
+                <View className="mb-1 flex-row items-center">
+                  <View className="mr-2 size-2 rounded-full bg-red-500" />
+                  <Text className="mr-2 text-xs text-gray-600">焊接不良</Text>
+                  <Text className="text-xs font-medium">61.5%</Text>
+                </View>
+                <View className="mb-1 flex-row items-center">
+                  <View className="mr-2 size-2 rounded-full bg-orange-500" />
+                  <Text className="mr-2 text-xs text-gray-600">元器件损坏</Text>
+                  <Text className="text-xs font-medium">23.1%</Text>
+                </View>
+                <View className="flex-row items-center">
+                  <View className="mr-2 size-2 rounded-full bg-yellow-500" />
+                  <Text className="mr-2 text-xs text-gray-600">电路异常</Text>
+                  <Text className="text-xs font-medium">15.4%</Text>
+                </View>
+              </View>
+            </View>
+
+            <View className="mb-3">
+              <Text className="mb-2 text-sm font-medium">不良品标签</Text>
+              <View className="flex-row flex-wrap">
+                <View className="mb-2 mr-2 rounded bg-red-100 px-2 py-1">
+                  <Text className="text-xs text-red-800">虚焊</Text>
+                </View>
+                <View className="mb-2 mr-2 rounded bg-red-100 px-2 py-1">
+                  <Text className="text-xs text-red-800">焊接过热</Text>
+                </View>
+                <View className="mb-2 mr-2 rounded bg-orange-100 px-2 py-1">
+                  <Text className="text-xs text-orange-800">电容损坏</Text>
+                </View>
+                <View className="mb-2 mr-2 rounded bg-orange-100 px-2 py-1">
+                  <Text className="text-xs text-orange-800">电阻偏差</Text>
+                </View>
+                <View className="mb-2 mr-2 rounded bg-yellow-100 px-2 py-1">
+                  <Text className="text-xs text-yellow-800">短路</Text>
+                </View>
+                <View className="mb-2 mr-2 rounded bg-yellow-100 px-2 py-1">
+                  <Text className="text-xs text-yellow-800">开路</Text>
+                </View>
+              </View>
+            </View>
+
+            <View className="rounded-lg bg-yellow-50 p-3">
+              <View className="flex-row items-start">
+                <FontAwesome
+                  name="exclamation-triangle"
+                  size={16}
+                  color="#ca8a04"
+                  style={{ marginTop: 2, marginRight: 8 }}
+                />
+                <View>
+                  <Text className="mb-1 text-sm font-medium">改进建议</Text>
+                  <Text className="text-xs text-gray-700">
+                    1. 调整焊接温度参数，避免虚焊和过热问题
+                  </Text>
+                  <Text className="text-xs text-gray-700">
+                    2. 加强元器件进料检验，提高元器件质量
+                  </Text>
+                  <Text className="text-xs text-gray-700">
+                    3. 优化电路设计，增强抗干扰能力
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        )}
+
+        {/* 操作记录 */}
+        {activeTab === 2 && (
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 font-medium">操作记录</Text>
+
+            <View className="border-b border-gray-100 py-4">
+              <View className="mb-1 flex-row items-start justify-between">
+                <View className="flex-row items-center">
+                  <FontAwesome
+                    name="play-circle"
+                    size={16}
+                    color="#0066ff"
+                    style={{ marginRight: 8 }}
+                  />
+                  <Text className="font-medium">开始检验</Text>
+                </View>
+                <Text className="text-xs text-gray-500">2023-12-01 09:30</Text>
+              </View>
+              <Text className="ml-6 text-sm text-gray-600">
+                王质检开始对批次BT20231201-A进行质量检验
+              </Text>
+            </View>
+
+            <View className="border-b border-gray-100 py-4">
+              <View className="mb-1 flex-row items-start justify-between">
+                <View className="flex-row items-center">
+                  <FontAwesome
+                    name="exclamation-circle"
+                    size={16}
+                    color="#dc2626"
+                    style={{ marginRight: 8 }}
+                  />
+                  <Text className="font-medium">发现不良品</Text>
+                </View>
+                <Text className="text-xs text-gray-500">2023-12-01 11:45</Text>
+              </View>
+              <Text className="ml-6 text-sm text-gray-600">
+                发现5件焊接不良产品，已标记并隔离
+              </Text>
+            </View>
+
+            <View className="border-b border-gray-100 py-4">
+              <View className="mb-1 flex-row items-start justify-between">
+                <View className="flex-row items-center">
+                  <FontAwesome
+                    name="pause-circle"
+                    size={16}
+                    color="#ea580c"
+                    style={{ marginRight: 8 }}
+                  />
+                  <Text className="font-medium">暂停检验</Text>
+                </View>
+                <Text className="text-xs text-gray-500">2023-12-01 12:30</Text>
+              </View>
+              <Text className="ml-6 text-sm text-gray-600">午休暂停检验</Text>
+            </View>
+
+            <View className="border-b border-gray-100 py-4">
+              <View className="mb-1 flex-row items-start justify-between">
+                <View className="flex-row items-center">
+                  <FontAwesome
+                    name="play-circle"
+                    size={16}
+                    color="#0066ff"
+                    style={{ marginRight: 8 }}
+                  />
+                  <Text className="font-medium">继续检验</Text>
+                </View>
+                <Text className="text-xs text-gray-500">2023-12-01 13:30</Text>
+              </View>
+              <Text className="ml-6 text-sm text-gray-600">
+                继续对批次BT20231201-A进行质量检验
+              </Text>
+            </View>
+
+            <View className="py-4">
+              <View className="mb-1 flex-row items-start justify-between">
+                <View className="flex-row items-center">
+                  <FontAwesome
+                    name="file-alt"
+                    size={16}
+                    color="#16a34a"
+                    style={{ marginRight: 8 }}
+                  />
+                  <Text className="font-medium">生成中期报告</Text>
+                </View>
+                <Text className="text-xs text-gray-500">2023-12-02 17:00</Text>
+              </View>
+              <Text className="ml-6 text-sm text-gray-600">
+                生成检验中期报告，当前合格率98.0%
+              </Text>
+            </View>
+          </View>
+        )}
+
+        {/* 检验标准 */}
+        {activeTab === 3 && (
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 font-medium">检验标准</Text>
+
+            <View className="mb-3">
+              <Text className="mb-1 text-sm font-medium">参考标准</Text>
+              <Text className="text-sm text-gray-700">IPC-A-610G 3级标准</Text>
+            </View>
+
+            <View className="mb-3">
+              <Text className="mb-1 text-sm font-medium">检验项目</Text>
+              <View className="mb-2 flex-row flex-wrap gap-2">
+                <View className="rounded bg-gray-100 px-2 py-1">
+                  <Text className="text-xs text-gray-800">电路连通性</Text>
+                </View>
+                <View className="rounded bg-gray-100 px-2 py-1">
+                  <Text className="text-xs text-gray-800">元器件焊接</Text>
+                </View>
+                <View className="rounded bg-gray-100 px-2 py-1">
+                  <Text className="text-xs text-gray-800">功能测试</Text>
+                </View>
+                <View className="rounded bg-gray-100 px-2 py-1">
+                  <Text className="text-xs text-gray-800">外观检查</Text>
+                </View>
+              </View>
+            </View>
+
+            <View className="mb-3">
+              <Text className="mb-1 text-sm font-medium">抽样方案</Text>
+              <Text className="text-sm text-gray-700">
+                GB/T 2828.1-2012 正常检验 II 级
+              </Text>
+            </View>
+
+            <View className="mb-3">
+              <Text className="mb-1 text-sm font-medium">合格判定</Text>
+              <Text className="text-sm text-gray-700">
+                AQL=1.0，批量1000pcs，抽检数量80pcs，接收数2，拒收数3
+              </Text>
+            </View>
+          </View>
+        )}
+      </ScrollView>
+
+      {/* 底部操作按钮 */}
+      <View className="absolute inset-x-4 bottom-4">
+        <View className="flex-row space-x-3">
+          <TouchableOpacity className="flex-1 flex-row items-center justify-center rounded-lg border border-gray-300 bg-white py-3">
+            <FontAwesome
+              name="file-export"
+              size={16}
+              color="#4b5563"
+              style={{ marginRight: 8 }}
+            />
+            <Text className="text-sm font-medium text-gray-700">导出报告</Text>
+          </TouchableOpacity>
+          <TouchableOpacity className="flex-1 flex-row items-center justify-center rounded-lg bg-blue-600 py-3">
+            <FontAwesome
+              name="check-circle"
+              size={16}
+              color="#fff"
+              style={{ marginRight: 8 }}
+            />
+            <Text className="text-sm font-medium text-white">完成检验</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default QualityDetail;
diff --git a/src/app/quality/index.tsx b/src/app/quality/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b00e4084f7cb0ff1e4c9cc0533ded816d463345e
--- /dev/null
+++ b/src/app/quality/index.tsx
@@ -0,0 +1,504 @@
+// import { useNavigation } from '@react-navigation/native';
+import { useRouter } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import React, { useState } from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import { NavHeader } from '@/components/ui';
+import { FontAwesome } from '@/components/ui/icons';
+
+const Quality = () => {
+  const router = useRouter();
+
+  // const navigation = useNavigation();
+  const [activeMainTab, setActiveMainTab] = useState('quality-overview');
+  const [activeSubTab, setActiveSubTab] = useState('质检任务');
+  const [activeInspectionTab, setActiveInspectionTab] = useState('全部');
+
+  // 主选项卡内容
+  const mainTabs = [
+    { id: 'quality-overview', title: '质量概览' },
+    { id: 'quality-inspection', title: '质量检验' },
+    { id: 'defect-management', title: '缺陷管理' },
+    { id: 'quality-report', title: '质量报表' },
+  ];
+
+  // 子选项卡内容
+  const subTabs = [
+    '质检任务',
+    '质检报告',
+    '不良品分析',
+    '质量标准',
+    '质量报表',
+  ];
+  const inspectionTabs = ['全部', '待检验', '检验中', '已完成', '异常'];
+
+  // 渲染主选项卡
+  const renderMainTabs = () => (
+    <View className="mb-4 flex-row overflow-hidden rounded-full bg-white">
+      {mainTabs.map((tab) => (
+        <TouchableOpacity
+          key={tab.id}
+          className={`flex-1 items-center px-3 py-2 ${activeMainTab === tab.id ? 'bg-blue-600' : 'bg-white'}`}
+          onPress={() => setActiveMainTab(tab.id)}
+        >
+          <Text
+            className={`text-sm font-medium ${activeMainTab === tab.id ? 'text-white' : 'text-gray-600'}`}
+          >
+            {tab.title}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+
+  // 渲染子选项卡
+  const renderSubTabs = () => (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      className="mb-4"
+    >
+      <View className="flex-row space-x-2">
+        {subTabs.map((tab) => (
+          <TouchableOpacity
+            key={tab}
+            className={`rounded-full px-4 py-2 ${activeSubTab === tab ? 'bg-blue-600' : 'bg-white'}`}
+            onPress={() => setActiveSubTab(tab)}
+          >
+            <Text
+              className={`whitespace-nowrap text-sm font-medium ${activeSubTab === tab ? 'text-white' : 'text-gray-600'}`}
+            >
+              {tab}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </ScrollView>
+  );
+
+  // 渲染检验任务选项卡
+  const renderInspectionTabs = () => (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      className="mb-4"
+    >
+      <View className="flex-row space-x-2">
+        {inspectionTabs.map((tab) => (
+          <TouchableOpacity
+            key={tab}
+            className={`rounded-full px-4 py-2 ${activeInspectionTab === tab ? 'bg-blue-600' : 'bg-white'}`}
+            onPress={() => setActiveInspectionTab(tab)}
+          >
+            <Text
+              className={`whitespace-nowrap text-sm font-medium ${activeInspectionTab === tab ? 'text-white' : 'text-gray-600'}`}
+            >
+              {tab}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </ScrollView>
+  );
+
+  // 渲染质量概览内容
+  const renderQualityOverview = () => (
+    <View>
+      {renderSubTabs()}
+
+      {/* 质量概览卡片 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <Text className="mb-3 text-lg font-semibold">质量概览</Text>
+        <View className="mb-3 flex-row">
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold text-blue-600">24</Text>
+            <Text className="text-xs text-gray-500">今日质检</Text>
+          </View>
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold text-green-600">98.5%</Text>
+            <Text className="text-xs text-gray-500">合格率</Text>
+          </View>
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold text-orange-600">5</Text>
+            <Text className="text-xs text-gray-500">待处理</Text>
+          </View>
+        </View>
+        <View className="flex-row items-center rounded-lg bg-blue-50 p-3">
+          <FontAwesome
+            name="chart-line"
+            size={20}
+            color="#0066ff"
+            style={{ marginRight: 12 }}
+          />
+          <View>
+            <Text className="text-sm font-medium">本月质量趋势</Text>
+            <View className="flex-row items-center">
+              <Text className="mr-2 text-lg font-bold text-blue-600">良好</Text>
+              <Text className="text-xs text-green-500">↑ 1.2%</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+
+      {/* 质检任务列表 */}
+      <Text className="mb-3 text-lg font-semibold">质检任务</Text>
+
+      {/* 任务项目1 */}
+      <TouchableOpacity onPress={() => router.push(`/quality/1`)}>
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+          <View className="mb-2 flex-row items-start justify-between">
+            <Text className="font-medium">智能手表主板质检</Text>
+            <View className="rounded-full bg-blue-100 px-2 py-1">
+              <Text className="text-xs font-medium text-blue-800">进行中</Text>
+            </View>
+          </View>
+          <Text className="mb-2 text-sm text-gray-600">
+            任务编号：QC20231128-01
+          </Text>
+          <View className="mb-3 flex-row justify-between text-sm text-gray-600">
+            <Text>负责人：王质检</Text>
+            <Text>截止日期：2023-12-05</Text>
+          </View>
+          <View className="mb-2">
+            <View className="mb-1 flex-row justify-between text-sm">
+              <Text>完成进度</Text>
+              <Text className="font-medium">65%</Text>
+            </View>
+            <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+              <View
+                className="h-full rounded-full bg-blue-500"
+                style={{ width: '65%' }}
+              />
+            </View>
+          </View>
+          <View className="flex-row items-center justify-between text-sm">
+            <View className="flex-row">
+              <Text className="text-gray-600">计划检测：</Text>
+              <Text className="font-medium">1000</Text>
+              <Text className="ml-3 text-gray-600">已完成：</Text>
+              <Text className="font-medium">650</Text>
+            </View>
+            <TouchableOpacity>
+              <Text className="text-blue-600">详情</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </TouchableOpacity>
+
+      {/* 任务项目2 */}
+      <TouchableOpacity onPress={() => router.push(`/quality/1`)}>
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+          <View className="mb-2 flex-row items-start justify-between">
+            <Text className="font-medium">智能音箱外壳质检</Text>
+            <View className="rounded-full bg-green-100 px-2 py-1">
+              <Text className="text-xs font-medium text-green-800">已完成</Text>
+            </View>
+          </View>
+          <Text className="mb-2 text-sm text-gray-600">
+            任务编号：QC20231125-03
+          </Text>
+          <View className="mb-3 flex-row justify-between text-sm text-gray-600">
+            <Text>负责人：李质检</Text>
+            <Text>完成日期：2023-11-28</Text>
+          </View>
+          <View className="mb-2">
+            <View className="mb-1 flex-row justify-between text-sm">
+              <Text>合格率</Text>
+              <Text className="font-medium text-green-600">99.2%</Text>
+            </View>
+            <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+              <View
+                className="h-full rounded-full bg-green-500"
+                style={{ width: '99.2%' }}
+              />
+            </View>
+          </View>
+          <View className="flex-row items-center justify-between text-sm">
+            <View className="flex-row">
+              <Text className="text-gray-600">检测数量：</Text>
+              <Text className="font-medium">2000</Text>
+              <Text className="ml-3 text-gray-600">不合格：</Text>
+              <Text className="font-medium text-red-600">16</Text>
+            </View>
+            <TouchableOpacity>
+              <Text className="text-blue-600">查看报告</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </TouchableOpacity>
+      {/* 不良品分析 */}
+      <Text className="mb-3 text-lg font-semibold">不良品分析</Text>
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 flex-row items-center">
+          <View className="h-24 w-1/3 items-center justify-center rounded-lg bg-blue-50">
+            <Text className="text-xl font-bold text-blue-600">1.5%</Text>
+            <Text className="text-xs text-gray-500">不良品率</Text>
+          </View>
+          <View className="w-2/3 pl-4">
+            <Text className="mb-2 text-sm">主要不良原因：</Text>
+            <View className="mb-1 flex-row items-center">
+              <View className="mr-2 size-2 rounded-full bg-red-500" />
+              <Text className="mr-2 text-xs text-gray-600">焊接不良</Text>
+              <Text className="text-xs font-medium">45%</Text>
+            </View>
+            <View className="mb-1 flex-row items-center">
+              <View className="mr-2 size-2 rounded-full bg-orange-500" />
+              <Text className="mr-2 text-xs text-gray-600">外观瑕疵</Text>
+              <Text className="text-xs font-medium">30%</Text>
+            </View>
+            <View className="flex-row items-center">
+              <View className="mr-2 size-2 rounded-full bg-yellow-500" />
+              <Text className="mr-2 text-xs text-gray-600">功能异常</Text>
+              <Text className="text-xs font-medium">25%</Text>
+            </View>
+          </View>
+        </View>
+        <TouchableOpacity>
+          <Text className="text-sm text-blue-600">查看详细分析</Text>
+        </TouchableOpacity>
+      </View>
+
+      {/* 质量改进建议 */}
+      <Text className="mb-3 text-lg font-semibold">质量改进建议</Text>
+      <View className="rounded-2xl bg-white p-4 shadow-sm">
+        <View className="border-b border-gray-100 py-4">
+          <View className="mb-1 flex-row items-start justify-between">
+            <Text className="font-medium">优化焊接工艺参数</Text>
+            <Text className="text-xs text-gray-500">2023-11-28</Text>
+          </View>
+          <Text className="text-sm text-gray-600">
+            针对焊接不良问题，建议调整焊接温度和时间参数，并加强操作人员培训。
+          </Text>
+        </View>
+
+        <View className="border-b border-gray-100 py-4">
+          <View className="mb-1 flex-row items-start justify-between">
+            <Text className="font-medium">更新外观检测标准</Text>
+            <Text className="text-xs text-gray-500">2023-11-25</Text>
+          </View>
+          <Text className="text-sm text-gray-600">
+            建议更新外观检测标准，增加细节检查项，并引入自动化视觉检测系统辅助人工检测。
+          </Text>
+        </View>
+
+        <View className="py-4">
+          <View className="mb-1 flex-row items-start justify-between">
+            <Text className="font-medium">加强功能测试覆盖率</Text>
+            <Text className="text-xs text-gray-500">2023-11-22</Text>
+          </View>
+          <Text className="text-sm text-gray-600">
+            针对功能异常问题，建议增加测试用例覆盖率，并在生产线上增加中间测试环节。
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+
+  // 渲染质量检验内容
+  const renderQualityInspection = () => (
+    <View>
+      {/* 质量检验概览 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <Text className="mb-3 text-lg font-semibold">质量检验概览</Text>
+        <View className="mb-3 flex-row">
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold text-blue-600">15</Text>
+            <Text className="text-xs text-gray-500">待检验</Text>
+          </View>
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold text-orange-600">8</Text>
+            <Text className="text-xs text-gray-500">检验中</Text>
+          </View>
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold text-green-600">42</Text>
+            <Text className="text-xs text-gray-500">已完成</Text>
+          </View>
+        </View>
+        <View className="flex-row items-center rounded-lg bg-blue-50 p-3">
+          <FontAwesome
+            name="clipboard-check"
+            size={20}
+            color="#0066ff"
+            style={{ marginRight: 12 }}
+          />
+          <View>
+            <Text className="text-sm font-medium">本周检验完成率</Text>
+            <View className="flex-row items-center">
+              <Text className="mr-2 text-lg font-bold text-blue-600">
+                92.5%
+              </Text>
+              <Text className="text-xs text-green-500">↑ 3.2%</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+
+      {/* 检验任务筛选 */}
+      <View className="mb-3 flex-row items-center justify-between">
+        <Text className="text-lg font-semibold">检验任务</Text>
+        <View className="flex-row space-x-2">
+          <TouchableOpacity className="flex-row items-center rounded-md border border-gray-300 bg-white px-3 py-1">
+            <FontAwesome
+              name="filter"
+              size={12}
+              color="#6b7280"
+              style={{ marginRight: 4 }}
+            />
+            <Text className="text-sm">筛选</Text>
+          </TouchableOpacity>
+          <TouchableOpacity className="flex-row items-center rounded-md border border-gray-300 bg-white px-3 py-1">
+            <FontAwesome
+              name="sort"
+              size={12}
+              color="#6b7280"
+              style={{ marginRight: 4 }}
+            />
+            <Text className="text-sm">排序</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {/* 任务状态选项卡 */}
+      {renderInspectionTabs()}
+
+      {/* 检验任务1 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-2 flex-row items-start justify-between">
+          <Text className="font-medium">智能手表主板检验</Text>
+          <View className="rounded-full bg-yellow-100 px-2 py-1">
+            <Text className="text-xs font-medium text-yellow-800">待检验</Text>
+          </View>
+        </View>
+        <Text className="mb-2 text-sm text-gray-600">
+          任务编号：QI20231201-01
+        </Text>
+        <View className="mb-3 flex-row justify-between text-sm text-gray-600">
+          <Text>负责人：王质检</Text>
+          <Text>截止日期：2023-12-05</Text>
+        </View>
+        <View className="flex-row items-center justify-between text-sm">
+          <View className="flex-row">
+            <Text className="text-gray-600">批次号：</Text>
+            <Text className="font-medium">BT20231201-A</Text>
+            <Text className="ml-3 text-gray-600">计划数量：</Text>
+            <Text className="font-medium">500</Text>
+          </View>
+          <TouchableOpacity>
+            <Text className="text-blue-600">开始检验</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {/* 检验任务2 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-2 flex-row items-start justify-between">
+          <Text className="font-medium">智能音箱电路板检验</Text>
+          <View className="rounded-full bg-blue-100 px-2 py-1">
+            <Text className="text-xs font-medium text-blue-800">检验中</Text>
+          </View>
+        </View>
+        <Text className="mb-2 text-sm text-gray-600">
+          任务编号：QI20231130-02
+        </Text>
+        <View className="mb-3 flex-row justify-between text-sm text-gray-600">
+          <Text>负责人：李质检</Text>
+          <Text>截止日期：2023-12-03</Text>
+        </View>
+        <View className="mb-2">
+          <View className="mb-1 flex-row justify-between text-sm">
+            <Text>完成进度</Text>
+            <Text className="font-medium">70%</Text>
+          </View>
+          <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+            <View
+              className="h-full rounded-full bg-blue-500"
+              style={{ width: '70%' }}
+            />
+          </View>
+        </View>
+        <View className="flex-row items-center justify-between text-sm">
+          <View className="flex-row">
+            <Text className="text-gray-600">已检验：</Text>
+            <Text className="font-medium">350</Text>
+            <Text className="ml-3 text-gray-600">不合格：</Text>
+            <Text className="font-medium text-red-600">12</Text>
+          </View>
+          <TouchableOpacity>
+            <Text className="text-blue-600">继续检验</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+
+  // 渲染缺陷管理内容（简化版）
+  const renderDefectManagement = () => (
+    <View className="items-center justify-center py-8">
+      <FontAwesome name="exclamation-triangle" size={50} color="#f59e0b" />
+      <Text className="mb-2 mt-4 text-lg font-medium">缺陷管理</Text>
+      <Text className="px-8 text-center text-sm text-gray-500">
+        此部分内容正在开发中，敬请期待
+      </Text>
+    </View>
+  );
+
+  // 渲染质量报表内容（简化版）
+  const renderQualityReport = () => (
+    <View className="items-center justify-center py-8">
+      <FontAwesome name="chart-bar" size={50} color="#3b82f6" />
+      <Text className="mb-2 mt-4 text-lg font-medium">质量报表</Text>
+      <Text className="px-8 text-center text-sm text-gray-500">
+        此部分内容正在开发中，敬请期待
+      </Text>
+    </View>
+  );
+
+  // 根据当前选中的选项卡渲染内容
+  const renderContent = () => {
+    switch (activeMainTab) {
+      case 'quality-overview':
+        return renderQualityOverview();
+      case 'quality-inspection':
+        return renderQualityInspection();
+      case 'defect-management':
+        return renderDefectManagement();
+      case 'quality-report':
+        return renderQualityReport();
+      default:
+        return renderQualityOverview();
+    }
+  };
+
+  return (
+    <SafeAreaView className="flex-1 bg-gray-50">
+      <NavHeader title="质量管理" />
+
+      <ScrollView className="flex-1 p-4">
+        {/* 分段控制器 */}
+        {renderMainTabs()}
+
+        {/* 内容区域 */}
+        {renderContent()}
+      </ScrollView>
+
+      {/* 浮动按钮 */}
+      <TouchableOpacity
+        className="absolute bottom-20 right-6 size-14 items-center justify-center rounded-full bg-blue-600 shadow-lg"
+        style={{ elevation: 5 }}
+      >
+        <FontAwesome name="plus" size={20} color="#fff" />
+      </TouchableOpacity>
+
+      <StatusBar style="auto" />
+    </SafeAreaView>
+  );
+};
+
+export default Quality;
diff --git a/src/app/settings/about.tsx b/src/app/settings/about.tsx
index 7ce18b0a1b983bdc160b47bc2dce6d147b5178e2..1f56f7cb0f73b3cdd08abf6eaf41bab3c48d98ba 100644
--- a/src/app/settings/about.tsx
+++ b/src/app/settings/about.tsx
@@ -1,7 +1,7 @@
 import { Env } from '@env';
 import * as Updates from 'expo-updates';
 import React, { useEffect, useState } from 'react';
-import { Platform, SafeAreaView, ScrollView, StyleSheet } from 'react-native';
+import { Platform, SafeAreaView, ScrollView } from 'react-native';
 import { getVersion } from 'react-native-device-info';
 import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 
@@ -9,38 +9,59 @@ import { Image, NavHeader, Text, View } from '@/components/ui';
 import { translate } from '@/lib/i18n';
 
 export default function LoginForm() {
+  // 存储更新ID的状态
   const [updateId, setUpdateId] = useState<string | null>(null);
+
+  // 在组件挂载时获取更新ID（仅在非web平台）
   useEffect(() => {
     if (Platform.OS !== 'web') {
       const updateId1 = Updates?.updateId;
       setUpdateId(updateId1);
     }
   }, []);
+
   return (
-    <SafeAreaView style={styles.container}>
+    // 安全区域视图，确保内容不会被设备的缺口遮挡
+    <SafeAreaView className="flex-1 bg-white">
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={styles.keyboardAvoidingView}
+        className="flex-1"
         keyboardVerticalOffset={10}
       >
+        {/* 导航头部 */}
         <NavHeader tx="settings.about.about_us" />
-        <ScrollView contentContainerStyle={styles.scrollView}>
+
+        {/* 可滚动内容区域 */}
+        <ScrollView className="grow px-4">
           {/* 顶部空间 */}
-          <View style={styles.topSpace} />
+          <View className="h-[10%]" />
 
-          {/* Logo和标题 */}
-          <View style={styles.logoContainer}>
-            <View style={styles.logoCircle}>
+          {/* Logo和标题区域 */}
+          <View className="mb-8 items-center">
+            {/* Logo圆形背景 */}
+            <View className="mb-4 size-20 items-center justify-center rounded-full bg-[#EBF5FF]">
               <Image
                 source={require('../../../assets/favicon.png')}
-                style={{ width: 60, height: 60 }}
+                className="size-[60px]"
                 contentFit="contain"
               />
             </View>
-            <Text style={styles.title}>{Env.NAME + ' V' + getVersion()}</Text>
-            <Text style={styles.subtitle}>{translate('login.sub_title')}</Text>
+
+            {/* 应用名称和版本 */}
+            <Text className="text-lg font-bold text-[#333]">
+              {Env.NAME + ' V' + getVersion()}
+            </Text>
+
+            {/* 副标题 */}
+            <Text className="mt-2 text-base text-gray-500">
+              {translate('login.sub_title')}
+            </Text>
+
+            {/* 版本ID（如果存在） */}
             {updateId ? (
-              <Text style={styles.subtitle}>版本ID：{updateId}</Text>
+              <Text className="mt-2 text-base text-gray-500">
+                版本ID：{updateId}
+              </Text>
             ) : null}
           </View>
         </ScrollView>
@@ -48,48 +69,3 @@ export default function LoginForm() {
     </SafeAreaView>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'white',
-  },
-  keyboardAvoidingView: {
-    flex: 1,
-  },
-  scrollView: {
-    flexGrow: 1,
-    paddingHorizontal: 16,
-  },
-  topSpace: {
-    height: '10%',
-  },
-  logoContainer: {
-    alignItems: 'center',
-    marginBottom: 32,
-  },
-  logoCircle: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    backgroundColor: '#EBF5FF',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 16,
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#333',
-  },
-  subtitle: {
-    fontSize: 16,
-    color: '#6b7280',
-    marginTop: 8,
-  },
-  copyright: {
-    fontSize: 14,
-    color: '#6b7280',
-    marginTop: 8,
-  },
-});
diff --git a/src/app/settings/components/setting-item.tsx b/src/app/settings/components/setting-item.tsx
index f0401349a6e0b9dac9ffadbc976271555f510a08..9dc46144751ddacbe3f9e746977b51831440bab0 100644
--- a/src/app/settings/components/setting-item.tsx
+++ b/src/app/settings/components/setting-item.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { StyleSheet, Switch, Text, TouchableOpacity, View } from 'react-native';
+import { Switch, Text, TouchableOpacity, View } from 'react-native';
 
 import { FontAwesome } from '@/components/ui/icons';
 import type { TxKeyPath } from '@/lib/i18n';
@@ -17,6 +17,8 @@ import { translate } from '@/lib/i18n';
  * @property hasNavigation - 是否显示导航箭头(默认false)
  * @property onPress - 点击回调函数
  * @property isLast - 是否是列表最后一项(默认false)
+ * @property tx - 主标题国际化键值
+ * @property subtx - 副标题国际化键值
  */
 type SettingItemProps = {
   icon: string;
@@ -51,6 +53,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
   tx,
   subtx,
 }) => {
+  // 开关状态管理
   const [isEnabled, setIsEnabled] = useState(defaultToggleValue);
 
   /**
@@ -64,20 +67,32 @@ const SettingItem: React.FC<SettingItemProps> = ({
 
   return (
     <TouchableOpacity
-      style={[styles.settingItem, isLast && styles.settingItemLast]}
+      // 使用条件类名：基础样式 + 最后一项样式（无底部边框）
+      className={`flex-row items-center justify-between py-4 ${isLast ? '' : 'border-b border-[#f0f0f0]'}`}
       onPress={onPress}
       disabled={!onPress}
       activeOpacity={0.7}
     >
-      {/* 左侧内容区域 */}
-      <View style={styles.settingItemLeft}>
-        <View style={[styles.settingIcon, { backgroundColor: iconBgColor }]}>
+      {/* 左侧内容区域：图标和文本 */}
+      <View className="flex-row items-center">
+        {/* 图标容器 */}
+        <View
+          className="mr-4 size-9 items-center justify-center rounded-lg"
+          style={{ backgroundColor: iconBgColor }} // 保留动态背景色
+        >
           <FontAwesome name={icon} size={18} color="white" />
         </View>
+
+        {/* 文本内容区域 */}
         <View>
-          <Text style={styles.settingTitle}>{tx ? translate(tx) : title}</Text>
+          {/* 主标题 - 优先使用国际化文本 */}
+          <Text className="text-base font-medium text-[#333]">
+            {tx ? translate(tx) : title}
+          </Text>
+
+          {/* 副标题（如果存在） */}
           {(subtitle || subtx) && (
-            <Text style={styles.settingSubtitle}>
+            <Text className="mt-0.5 text-xs text-[#9ca3af]">
               {subtx ? translate(subtx) : subtitle}
             </Text>
           )}
@@ -85,6 +100,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
       </View>
 
       {/* 右侧功能区域 */}
+      {/* 开关控件（如果启用） */}
       {hasToggle && (
         <Switch
           trackColor={{ false: '#e5e7eb', true: '#0066ff' }}
@@ -95,6 +111,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
         />
       )}
 
+      {/* 导航箭头（如果启用） */}
       {hasNavigation && (
         <FontAwesome name="chevron-right" size={14} color="#9ca3af" />
       )}
@@ -102,41 +119,4 @@ const SettingItem: React.FC<SettingItemProps> = ({
   );
 };
 
-// 样式定义
-const styles = StyleSheet.create({
-  settingItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: '#f0f0f0',
-  },
-  settingItemLast: {
-    borderBottomWidth: 0,
-  },
-  settingItemLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  settingIcon: {
-    width: 36,
-    height: 36,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 16,
-  },
-  settingTitle: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#333',
-  },
-  settingSubtitle: {
-    fontSize: 12,
-    color: '#9ca3af',
-    marginTop: 2,
-  },
-});
-
 export default SettingItem;
diff --git a/src/app/settings/index.tsx b/src/app/settings/index.tsx
index 3f403a28ad061462488536147478d61e395e45ee..1e52da219775e99b8a6b7a1f28c6e9319e7d4a6a 100644
--- a/src/app/settings/index.tsx
+++ b/src/app/settings/index.tsx
@@ -1,12 +1,6 @@
 import { useRouter } from 'expo-router';
 import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { SafeAreaView, ScrollView, TouchableOpacity, View } from 'react-native';
 import { getVersion } from 'react-native-device-info';
 
 import { NavHeader } from '@/components/ui';
@@ -17,16 +11,19 @@ import SettingItem from './components/setting-item';
 const Settings: React.FC = () => {
   const router = useRouter();
   return (
-    <SafeAreaView style={styles.container}>
-      {/* <StatusBar barStyle="dark-content" backgroundColor="transparent" /> */}
-
-      {/* 顶部导航 */}
+    // 安全区域视图，确保内容不会被设备的缺口遮挡
+    <SafeAreaView className="flex-1 bg-[#f5f5f5]">
+      {/* 顶部导航栏 */}
       <NavHeader tx="settings.title" />
 
-      <ScrollView style={styles.content}>
-        {/* 系统设置 */}
-        <Text style={styles.sectionTitle} tx="settings.system.title" />
-        <View style={styles.card}>
+      {/* 主要内容区域 */}
+      <ScrollView className="flex-1 p-4">
+        {/* 系统设置部分 */}
+        <Text
+          className="mb-3 mt-2 text-lg font-semibold text-[#333]"
+          tx="settings.system.title"
+        />
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
           <SettingItem
             icon="language"
             iconBgColor="#3b82f6"
@@ -57,9 +54,12 @@ const Settings: React.FC = () => {
           />
         </View>
 
-        {/* 通知设置 */}
-        <Text style={styles.sectionTitle} tx="settings.notification.title" />
-        <View style={styles.card}>
+        {/* 通知设置部分 */}
+        <Text
+          className="mb-3 mt-2 text-lg font-semibold text-[#333]"
+          tx="settings.notification.title"
+        />
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
           <SettingItem
             icon="bell"
             iconBgColor="#ef4444"
@@ -91,12 +91,12 @@ const Settings: React.FC = () => {
           />
         </View>
 
-        {/* 隐私与安全 */}
+        {/* 隐私与安全部分 */}
         <Text
-          style={styles.sectionTitle}
+          className="mb-3 mt-2 text-lg font-semibold text-[#333]"
           tx="settings.privacy_security.title"
         />
-        <View style={styles.card}>
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
           <SettingItem
             icon="lock"
             iconBgColor="#6366f1"
@@ -124,9 +124,12 @@ const Settings: React.FC = () => {
           />
         </View>
 
-        {/* 数据与存储 */}
-        <Text style={styles.sectionTitle} tx="settings.data_storage.title" />
-        <View style={styles.card}>
+        {/* 数据与存储部分 */}
+        <Text
+          className="mb-3 mt-2 text-lg font-semibold text-[#333]"
+          tx="settings.data_storage.title"
+        />
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
           <SettingItem
             icon="database"
             iconBgColor="#6b7280"
@@ -156,9 +159,12 @@ const Settings: React.FC = () => {
           />
         </View>
 
-        {/* 关于 */}
-        <Text style={styles.sectionTitle} tx="settings.about.title" />
-        <View style={styles.card}>
+        {/* 关于应用部分 */}
+        <Text
+          className="mb-3 mt-2 text-lg font-semibold text-[#333]"
+          tx="settings.about.title"
+        />
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
           <SettingItem
             icon="info-circle"
             iconBgColor="#3b82f6"
@@ -196,56 +202,14 @@ const Settings: React.FC = () => {
 
         {/* 退出登录按钮 */}
         <TouchableOpacity
-          style={styles.logoutButton}
+          className="my-6 items-center rounded-xl bg-[#ef4444] py-3.5"
           // onPress={() => navigation.navigate('Login')}
         >
-          <Text style={styles.logoutButtonText}>退出登录</Text>
+          <Text className="text-base font-semibold text-white">退出登录</Text>
         </TouchableOpacity>
       </ScrollView>
     </SafeAreaView>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-  },
-
-  content: {
-    flex: 1,
-    padding: 16,
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    marginBottom: 12,
-    marginTop: 8,
-    color: '#333',
-  },
-  card: {
-    backgroundColor: 'white',
-    borderRadius: 16,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.05,
-    shadowRadius: 10,
-    elevation: 2,
-    marginBottom: 16,
-    padding: 16,
-  },
-  logoutButton: {
-    backgroundColor: '#ef4444',
-    borderRadius: 12,
-    paddingVertical: 14,
-    alignItems: 'center',
-    marginVertical: 24,
-  },
-  logoutButtonText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-});
-
 export default Settings;
diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx
index 0f9fa7b6a7aaa748b19f2149bba70858dd339642..f248949bab9c9f9c55b48b749110bfd4faf3de70 100644
--- a/src/components/login-form.tsx
+++ b/src/components/login-form.tsx
@@ -94,46 +94,47 @@ export const LoginForm = () => {
   const [submitBtnDisable, setSubmitBtnDisable] = useState(false);
   // const [rememberMe, setRememberMe] = useState(false);
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView className="flex-1 bg-white">
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={styles.keyboardAvoidingView}
+        // style={styles.keyboardAvoidingView}
+        className="flex-1"
         keyboardVerticalOffset={10}
       >
         <ScrollView contentContainerStyle={styles.scrollView}>
           {/* 顶部空间 */}
-          <View style={styles.topSpace} />
+          <View className="h-[10%]" />
 
           {/* Logo和标题 */}
-          <View style={styles.logoContainer}>
-            <View style={styles.logoCircle}>
+          <View className="mb-8 items-center">
+            <View className="mb-4 size-20 items-center justify-center rounded-full bg-[#EBF5FF]">
               <Image
+                className="size-16"
                 source={require('../../assets/favicon.png')}
-                style={{ width: 60, height: 60 }}
                 contentFit="contain"
               />
             </View>
-            <Text style={styles.title}>{Env.NAME}</Text>
-            <Text style={styles.subtitle}>{translate('login.sub_title')}</Text>
+            <Text className="text-lg font-bold text-gray-800">{Env.NAME}</Text>
+
+            <Text className="mt-2 text-base text-gray-500">
+              {translate('login.sub_title')}
+            </Text>
           </View>
 
           {/* 登录表单 */}
-          <View style={styles.formContainer}>
+          <View className="w-full">
             {/* 用户名输入框 */}
             <View
-              style={[
-                styles.inputGroup,
-                usernameFocused && styles.inputGroupFocused,
-              ]}
+              className={`mb-4 h-[50px] flex-row items-center rounded-xl border px-3 ${usernameFocused ? 'border-blue-500 bg-blue-50' : 'border-gray-200'}`}
             >
               <FontAwesome
                 name="user"
                 size={20}
                 color={usernameFocused || username ? '#e94538' : '#9ca3af'}
-                style={styles.inputIcon}
+                className="mr-3"
               />
               <TextInput
-                style={styles.input}
+                className="h-full flex-1 text-base text-gray-800"
                 placeholder={translate('login.username_placeholder')}
                 placeholderTextColor="#9ca3af"
                 value={username}
@@ -145,19 +146,16 @@ export const LoginForm = () => {
 
             {/* 密码输入框 */}
             <View
-              style={[
-                styles.inputGroup,
-                passwordFocused && styles.inputGroupFocused,
-              ]}
+              className={`mb-4 h-[50px] flex-row items-center rounded-xl border px-3 ${usernameFocused ? 'border-blue-500 bg-blue-50' : 'border-gray-200'}`}
             >
               <FontAwesome
                 name="lock"
                 size={20}
                 color={passwordFocused || password ? '#e94538' : '#9ca3af'}
-                style={styles.inputIcon}
+                className="mr-3"
               />
               <TextInput
-                style={styles.input}
+                className="h-full flex-1 text-base text-gray-800"
                 placeholder={translate('login.password_placeholder')}
                 placeholderTextColor="#9ca3af"
                 secureTextEntry
@@ -201,43 +199,48 @@ export const LoginForm = () => {
 
             {/* 登录按钮 */}
             <TouchableOpacity
-              style={styles.loginButton}
+              className="h-[50px] items-center justify-center rounded-xl bg-[#e94538] shadow-sm"
               onPress={handleLogin}
               disabled={submitBtnDisable}
               // onPress={onSubmit1(1)}
             >
-              <Text style={styles.loginButtonText} tx="login.login_button" />
+              <Text
+                className="text-base font-semibold text-white"
+                tx="login.login_button"
+              />
             </TouchableOpacity>
 
             {/* 其他登录方式 */}
-            <View style={styles.otherLoginContainer}>
-              <View style={styles.dividerContainer}>
-                <View style={styles.divider} />
-                <Text style={styles.dividerText} tx="login.other_login_way" />
-                <View style={styles.divider} />
+            <View className="mt-8">
+              <View className="flex-row items-center justify-center">
+                <View className="h-px flex-1 bg-gray-200" />
+                <Text
+                  className="px-4 text-sm text-gray-500"
+                  tx="login.other_login_way"
+                />
+                <View className="h-px flex-1 bg-gray-200" />
               </View>
 
-              <View style={styles.socialButtonsContainer}>
-                <TouchableOpacity style={styles.socialButton}>
+              <View className="mt-6 flex-row justify-center">
+                <TouchableOpacity className="mx-4 size-14 items-center justify-center rounded-full border border-gray-200">
                   <FontAwesome name="weixin" size={24} color="#07C160" />
                 </TouchableOpacity>
-                <TouchableOpacity style={styles.socialButton}>
+                <TouchableOpacity className="mx-4 size-14 items-center justify-center rounded-full border border-gray-200">
                   <FontAwesome name="qrcode" size={24} color="#0066ff" />
                 </TouchableOpacity>
-                <TouchableOpacity style={styles.socialButton}>
-                  {/* <FontAwesome name="fingerprint" size={24} color="#a855f7" /> */}
+                <TouchableOpacity className="mx-4 size-14 items-center justify-center rounded-full border border-gray-200">
                   <Entypo name="fingerprint" size={24} color="#a855f7" />
                 </TouchableOpacity>
               </View>
             </View>
           </View>
-
           {/* 底部 */}
-          <View style={styles.footer}>
-            <Text style={styles.footerText}>
-              还没有账号? <Text style={styles.footerLink}>联系管理员</Text>
+          <View className="mt-auto items-center pb-6">
+            <Text className="text-sm text-gray-500">
+              还没有账号?
+              <Text className="font-medium text-[#e94538]">联系管理员</Text>
             </Text>
-            <Text style={styles.copyright} tx="copyright" />
+            <Text className="mt-2 text-sm text-gray-500" tx="copyright" />
           </View>
         </ScrollView>
       </KeyboardAvoidingView>
@@ -246,168 +249,40 @@ export const LoginForm = () => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'white',
-  },
-  keyboardAvoidingView: {
-    flex: 1,
-  },
   scrollView: {
     flexGrow: 1,
     paddingHorizontal: 16,
   },
-  topSpace: {
-    height: '10%',
-  },
-  logoContainer: {
-    alignItems: 'center',
-    marginBottom: 32,
-  },
-  logoCircle: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    backgroundColor: '#EBF5FF',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 16,
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#333',
-  },
-  subtitle: {
-    fontSize: 16,
-    color: '#6b7280',
-    marginTop: 8,
-  },
-  formContainer: {
-    width: '100%',
-  },
-  inputGroup: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: '#e5e7eb',
-    borderRadius: 12,
-    marginBottom: 16,
-    paddingHorizontal: 12,
-    height: 50,
-  },
-  // 添加焦点样式
-  inputGroupFocused: {
-    borderColor: '#0066ff',
-    backgroundColor: '#f0f7ff',
-  },
-  inputIcon: {
-    marginRight: 12,
-  },
-  input: {
-    flex: 1,
-    height: '100%',
-    fontSize: 16,
-    color: '#333',
-  },
-  optionsContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 24,
-  },
-  rememberContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  checkbox: {
-    width: 20,
-    height: 20,
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: '#d1d5db',
-    marginRight: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  checkboxChecked: {
-    backgroundColor: '#0066ff',
-    borderColor: '#0066ff',
-  },
-  rememberText: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  forgotPassword: {
-    fontSize: 14,
-    color: '#0066ff',
-  },
-  loginButton: {
-    backgroundColor: '#e94538',
-    borderRadius: 12,
-    height: 50,
-    alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-  loginButtonText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  otherLoginContainer: {
-    marginTop: 32,
-  },
-  dividerContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  divider: {
-    flex: 1,
-    height: 1,
-    backgroundColor: '#e5e7eb',
-  },
-  dividerText: {
-    paddingHorizontal: 16,
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  socialButtonsContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: 24,
-  },
-  socialButton: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    borderWidth: 1,
-    borderColor: '#e5e7eb',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: 12,
-  },
-  footer: {
-    marginTop: 'auto',
-    paddingBottom: 24,
-    alignItems: 'center',
-  },
-  footerText: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  footerLink: {
-    color: '#e94538',
-    fontWeight: '500',
-  },
-  copyright: {
-    fontSize: 14,
-    color: '#6b7280',
-    marginTop: 8,
-  },
+  // optionsContainer: {
+  //   flexDirection: 'row',
+  //   justifyContent: 'space-between',
+  //   alignItems: 'center',
+  //   marginBottom: 24,
+  // },
+  // rememberContainer: {
+  //   flexDirection: 'row',
+  //   alignItems: 'center',
+  // },
+  // checkbox: {
+  //   width: 20,
+  //   height: 20,
+  //   borderRadius: 4,
+  //   borderWidth: 1,
+  //   borderColor: '#d1d5db',
+  //   marginRight: 8,
+  //   alignItems: 'center',
+  //   justifyContent: 'center',
+  // },
+  // checkboxChecked: {
+  //   backgroundColor: '#0066ff',
+  //   borderColor: '#0066ff',
+  // },
+  // rememberText: {
+  //   fontSize: 14,
+  //   color: '#6b7280',
+  // },
+  // forgotPassword: {
+  //   fontSize: 14,
+  //   color: '#0066ff',
+  // },
 });
diff --git a/src/components/production/equipment.tsx b/src/components/production/equipment.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cfefb685fd83f6443cd112ea2391881a652c4a32
--- /dev/null
+++ b/src/components/production/equipment.tsx
@@ -0,0 +1,226 @@
+import { FontAwesome } from '@expo/vector-icons';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+import { StatusBadge } from './status-badge';
+
+export const Equipment = () => {
+  return (
+    <View>
+      {/* 设备概览 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <Text className="mb-3 text-lg font-semibold text-gray-800">
+          设备概览
+        </Text>
+        <View className="mb-3 flex-row justify-between">
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold text-blue-600">32</Text>
+            <Text className="mt-1 text-xs text-gray-500">设备总数</Text>
+          </View>
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold text-green-500">25</Text>
+            <Text className="mt-1 text-xs text-gray-500">运行中</Text>
+          </View>
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold text-red-500">2</Text>
+            <Text className="mt-1 text-xs text-gray-500">故障</Text>
+          </View>
+        </View>
+        <View className="flex-row items-center rounded-xl bg-blue-50 p-3">
+          <FontAwesome
+            name="wrench"
+            size={20}
+            color="#0066ff"
+            className="mr-3"
+          />
+          <View className="flex-1">
+            <Text className="text-sm font-medium">设备综合效率(OEE)</Text>
+            <View className="flex-row items-center">
+              <Text className="mr-2 text-lg font-bold text-blue-600">
+                87.2%
+              </Text>
+              <Text className="text-xs text-green-500">↑ 2.1%</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+
+      {/* 设备列表 */}
+      <Text className="mb-3 text-lg font-semibold text-gray-800">设备列表</Text>
+
+      {/* 设备项目1 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-2 flex-row items-start justify-between">
+          <Text className="text-base font-medium text-gray-800">
+            SMT贴片机#2
+          </Text>
+          <StatusBadge status="运行中" color="#22c55e" bgColor="#dcfce7" />
+        </View>
+        <Text className="mb-2 text-sm text-gray-500">
+          设备编号：EQ20230501-02
+        </Text>
+
+        <View className="mb-3 flex-row flex-wrap">
+          <View className="mb-2 w-1/2">
+            <Text className="mb-1 text-xs text-gray-500">设备温度</Text>
+            <Text className="text-sm font-medium">42°C</Text>
+          </View>
+          <View className="mb-2 w-1/2">
+            <Text className="mb-1 text-xs text-gray-500">电机转速</Text>
+            <Text className="text-sm font-medium">1200 RPM</Text>
+          </View>
+          <View className="mb-2 w-1/2">
+            <Text className="mb-1 text-xs text-gray-500">电压</Text>
+            <Text className="text-sm font-medium">220V</Text>
+          </View>
+          <View className="mb-2 w-1/2">
+            <Text className="mb-1 text-xs text-gray-500">电流</Text>
+            <Text className="text-sm font-medium">5.2A</Text>
+          </View>
+        </View>
+
+        <View className="mb-3 flex-row items-start rounded-xl bg-blue-50 p-3">
+          <FontAwesome
+            name="bell"
+            size={16}
+            color="#0066ff"
+            className="mr-2 mt-0.5"
+          />
+          <View>
+            <Text className="mb-1 text-sm font-medium">设备警报</Text>
+            <Text className="text-sm">无异常警报</Text>
+          </View>
+        </View>
+
+        <View className="flex-row items-center justify-between">
+          <View className="flex-row items-center">
+            <Text className="text-sm text-gray-500">今日运行：</Text>
+            <Text className="mr-3 text-sm font-medium">8.5小时</Text>
+          </View>
+          <TouchableOpacity>
+            <Text className="text-sm text-blue-600">详情</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {/* 设备项目2 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-2 flex-row items-start justify-between">
+          <Text className="text-base font-medium text-gray-800">
+            波峰焊接机#1
+          </Text>
+          <StatusBadge status="故障" color="#ef4444" bgColor="#fee2e2" />
+        </View>
+        <Text className="mb-2 text-sm text-gray-500">
+          设备编号：EQ20230602-05
+        </Text>
+
+        <View className="mb-3 flex-row flex-wrap">
+          <View className="mb-2 w-1/2">
+            <Text className="mb-1 text-xs text-gray-500">设备温度</Text>
+            <Text className="text-sm font-medium">68°C</Text>
+          </View>
+          <View className="mb-2 w-1/2">
+            <Text className="mb-1 text-xs text-gray-500">电机转速</Text>
+            <Text className="text-sm font-medium">0 RPM</Text>
+          </View>
+          <View className="mb-2 w-1/2">
+            <Text className="mb-1 text-xs text-gray-500">电压</Text>
+            <Text className="text-sm font-medium">0V</Text>
+          </View>
+          <View className="mb-2 w-1/2">
+            <Text className="mb-1 text-xs text-gray-500">电流</Text>
+            <Text className="text-sm font-medium">0A</Text>
+          </View>
+        </View>
+
+        <View className="mb-3 flex-row items-start rounded-xl bg-red-50 p-3">
+          <FontAwesome
+            name="exclamation-triangle"
+            size={16}
+            color="#ef4444"
+            className="mr-2 mt-0.5"
+          />
+          <View>
+            <Text className="mb-1 text-sm font-medium text-red-500">
+              设备警报
+            </Text>
+            <Text className="text-sm">温控系统异常，需要维修</Text>
+          </View>
+        </View>
+
+        <View className="flex-row items-center justify-between">
+          <View className="flex-row items-center">
+            <Text className="text-sm text-gray-500">停机时间：</Text>
+            <Text className="mr-3 text-sm font-medium">2.5小时</Text>
+          </View>
+          <TouchableOpacity>
+            <Text className="text-sm text-blue-600">详情</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {/* 设备维护计划 */}
+      <Text className="mb-3 text-lg font-semibold text-gray-800">
+        设备维护计划
+      </Text>
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <View>
+            <View className="flex-row border-b border-gray-200 bg-gray-100 py-2">
+              <Text className="w-30 px-2 text-xs font-medium uppercase text-gray-500">
+                设备名称
+              </Text>
+              <Text className="w-30 px-2 text-xs font-medium uppercase text-gray-500">
+                维护类型
+              </Text>
+              <Text className="w-30 px-2 text-xs font-medium uppercase text-gray-500">
+                计划日期
+              </Text>
+              <Text className="w-30 px-2 text-xs font-medium uppercase text-gray-500">
+                负责人
+              </Text>
+              <Text className="w-30 px-2 text-xs font-medium uppercase text-gray-500">
+                状态
+              </Text>
+            </View>
+            <View className="flex-row border-b border-gray-200 py-2">
+              <Text className="w-30 px-2 text-sm">SMT贴片机#2</Text>
+              <Text className="w-30 px-2 text-sm">例行保养</Text>
+              <Text className="w-30 px-2 text-sm">2023-12-15</Text>
+              <Text className="w-30 px-2 text-sm">王工程师</Text>
+              <View className="w-30 justify-center px-2">
+                <StatusBadge
+                  status="已计划"
+                  color="#0066ff"
+                  bgColor="#ebf5ff"
+                />
+              </View>
+            </View>
+            <View className="flex-row border-b border-gray-200 py-2">
+              <Text className="w-30 px-2 text-sm">回流焊机#3</Text>
+              <Text className="w-30 px-2 text-sm">故障维修</Text>
+              <Text className="w-30 px-2 text-sm">2023-12-05</Text>
+              <Text className="w-30 px-2 text-sm">张工程师</Text>
+              <View className="w-30 justify-center px-2">
+                <StatusBadge status="紧急" color="#ef4444" bgColor="#fee2e2" />
+              </View>
+            </View>
+            <View className="flex-row border-b border-gray-200 py-2">
+              <Text className="w-30 px-2 text-sm">PCB切割机#1</Text>
+              <Text className="w-30 px-2 text-sm">例行保养</Text>
+              <Text className="w-30 px-2 text-sm">2023-12-20</Text>
+              <Text className="w-30 px-2 text-sm">李工程师</Text>
+              <View className="w-30 justify-center px-2">
+                <StatusBadge
+                  status="已计划"
+                  color="#0066ff"
+                  bgColor="#ebf5ff"
+                />
+              </View>
+            </View>
+          </View>
+        </ScrollView>
+      </View>
+    </View>
+  );
+};
diff --git a/src/components/production/index.tsx b/src/components/production/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8549055871c758991a16cd8635276e237dc941fc
--- /dev/null
+++ b/src/components/production/index.tsx
@@ -0,0 +1,28 @@
+/**
+ * 生产组件模块的入口文件
+ * 集中导出所有生产相关的组件，方便统一导入
+ */
+
+// 设备管理相关组件
+export * from './equipment';
+
+// 生产计划相关组件
+export * from './plan';
+
+// 工序管理相关组件
+export * from './process';
+
+// 工序节点组件，用于显示工序流程中的各个节点
+export * from './process-node';
+
+// 进度条组件，用于显示各类进度
+export * from './progress-bar';
+
+// 生产报表相关组件
+export * from './report';
+
+// 状态徽章组件，用于显示各种状态标识
+export * from './status-badge';
+
+// 生产任务相关组件
+export * from './task';
diff --git a/src/components/production/plan.tsx b/src/components/production/plan.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..16f8a994334a0bec938ce22daf78241d2ef51d88
--- /dev/null
+++ b/src/components/production/plan.tsx
@@ -0,0 +1,218 @@
+import { FontAwesome } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import { ProgressBar } from './progress-bar';
+import { StatusBadge } from './status-badge';
+
+/**
+ * 生产计划项组件属性
+ * @property title - 计划标题
+ * @property code - 计划编号
+ * @property manager - 负责人
+ * @property deadline - 截止日期
+ * @property progress - 进度百分比
+ * @property total - 计划总量
+ * @property completed - 已完成量
+ * @property status - 状态文本
+ * @property statusColor - 状态文本颜色
+ * @property statusBgColor - 状态背景色
+ * @property onViewDetail - 查看详情回调函数
+ */
+type PlanItemProps = {
+  title: string;
+  code: string;
+  manager: string;
+  deadline: string;
+  progress: number;
+  total: number;
+  completed: number;
+  status: string;
+  statusColor: string;
+  statusBgColor: string;
+  onViewDetail?: () => void;
+};
+
+/**
+ * 生产计划项组件
+ * 显示单个生产计划的基本信息和进度
+ */
+export const PlanItem: React.FC<PlanItemProps> = ({
+  title,
+  code,
+  manager,
+  deadline,
+  progress,
+  total,
+  completed,
+  status,
+  statusColor,
+  statusBgColor,
+  onViewDetail,
+}) => (
+  <TouchableOpacity onPress={onViewDetail} activeOpacity={0.7}>
+    {/* 计划卡片 - 使用圆角、阴影和内边距 */}
+    <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+      {/* 标题和状态区域 - 使用弹性布局和对齐方式 */}
+      <View className="mb-2 flex-row items-start justify-between">
+        <Text className="text-base font-medium text-gray-800">{title}</Text>
+        <StatusBadge
+          status={status}
+          color={statusColor}
+          bgColor={statusBgColor}
+        />
+      </View>
+
+      {/* 计划编号 - 使用灰色文本和下边距 */}
+      <Text className="mb-2 text-sm text-gray-500">计划编号：{code}</Text>
+
+      {/* 负责人和截止日期 - 使用弹性布局和间距 */}
+      <View className="mb-3 flex-row justify-between">
+        <Text className="text-sm text-gray-500">负责人：{manager}</Text>
+        <Text className="text-sm text-gray-500">截止日期：{deadline}</Text>
+      </View>
+
+      {/* 进度条区域 - 使用下边距和嵌套布局 */}
+      <View className="mb-2">
+        <View className="mb-1 flex-row justify-between">
+          <Text className="text-sm text-gray-500">完成进度</Text>
+          <Text className="text-sm text-gray-500">{progress}%</Text>
+        </View>
+        <ProgressBar progress={progress} color={statusColor} />
+      </View>
+
+      {/* 底部统计和详情链接 - 使用弹性布局和对齐 */}
+      <View className="flex-row items-center justify-between">
+        <View className="flex-row items-center">
+          <Text className="text-sm text-gray-500">计划产量：</Text>
+          <Text className="mr-3 text-sm font-medium">{total}</Text>
+          <Text className="text-sm text-gray-500">已完成：</Text>
+          <Text className="mr-3 text-sm font-medium">{completed}</Text>
+        </View>
+        <TouchableOpacity>
+          <Text className="text-sm text-blue-600">详情</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  </TouchableOpacity>
+);
+
+/**
+ * 生产计划列表组件
+ * 显示生产概览和多个生产计划项
+ */
+export const Plans = () => {
+  const router = useRouter();
+
+  // 模拟的生产计划数据
+  const planItems = [
+    {
+      title: '智能手表主板生产计划',
+      code: 'PP20231128-01',
+      manager: '王工程师',
+      deadline: '2023-12-15',
+      progress: 65,
+      total: 1000,
+      completed: 650,
+      status: '进行中',
+      statusColor: '#22c55e',
+      statusBgColor: '#dcfce7',
+      id: 1,
+    },
+    {
+      title: '智能音箱外壳注塑计划',
+      code: 'PP20231125-03',
+      manager: '李工程师',
+      deadline: '2023-12-10',
+      progress: 42,
+      total: 2000,
+      completed: 840,
+      status: '进行中',
+      statusColor: '#22c55e',
+      statusBgColor: '#dcfce7',
+      id: 2,
+    },
+    {
+      title: '智能门锁电路板生产计划',
+      code: 'PP20231202-03',
+      manager: '张工程师',
+      deadline: '2023-12-25',
+      progress: 0,
+      total: 500,
+      completed: 0,
+      status: '待开始',
+      statusColor: '#f97316',
+      statusBgColor: '#ffedd5',
+      id: 3,
+    },
+  ];
+
+  return (
+    <>
+      {/* 生产概览卡片 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <Text className="mb-3 text-lg font-semibold text-gray-800">
+          生产概览
+        </Text>
+
+        {/* 统计数据网格 */}
+        <View className="mb-3 flex-row justify-between">
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold text-blue-600">15</Text>
+            <Text className="mt-1 text-xs text-gray-500">计划总数</Text>
+          </View>
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold text-green-500">8</Text>
+            <Text className="mt-1 text-xs text-gray-500">进行中</Text>
+          </View>
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold text-orange-500">3</Text>
+            <Text className="mt-1 text-xs text-gray-500">待开始</Text>
+          </View>
+        </View>
+
+        {/* 完成率卡片 */}
+        <View className="flex-row items-center rounded-xl bg-blue-50 p-3">
+          <FontAwesome
+            name="line-chart"
+            size={20}
+            color="#0066ff"
+            className="mr-3"
+          />
+          <View className="flex-1">
+            <Text className="text-sm font-medium">本月生产完成率</Text>
+            <View className="flex-row items-center">
+              <Text className="mr-2 text-lg font-bold text-blue-600">
+                78.5%
+              </Text>
+              <Text className="text-xs text-green-500">↑ 5.2%</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+
+      {/* 生产计划列表标题 */}
+      <Text className="mb-3 text-lg font-semibold text-gray-800">
+        生产计划列表
+      </Text>
+
+      {/* 生产计划列表项 */}
+      {planItems.map((item) => (
+        <PlanItem
+          key={item.id}
+          title={item.title}
+          code={item.code}
+          manager={item.manager}
+          deadline={item.deadline}
+          progress={item.progress}
+          total={item.total}
+          completed={item.completed}
+          status={item.status}
+          statusColor={item.statusColor}
+          statusBgColor={item.statusBgColor}
+          onViewDetail={() => router.push(`/production/${item.id}`)}
+        />
+      ))}
+    </>
+  );
+};
diff --git a/src/components/production/process-node.tsx b/src/components/production/process-node.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0760b20e2695be19fb2644cfafd9b3bcc045e96d
--- /dev/null
+++ b/src/components/production/process-node.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+
+import { Text, View } from '@/components/ui';
+import { FontAwesome } from '@/components/ui/icons';
+
+/**
+ * 工序流程节点组件属性
+ * @property icon - 节点图标名称
+ * @property label - 节点标签文本
+ * @property status - 节点状态：已完成(completed)、进行中(inProgress)、待开始(pending)
+ */
+type ProcessNodeProps = {
+  icon: string;
+  label: string;
+  status: 'completed' | 'inProgress' | 'pending';
+};
+
+/**
+ * 工序流程节点组件
+ * 用于显示生产流程中的各个工序节点及其状态
+ */
+export const ProcessNode: React.FC<ProcessNodeProps> = ({
+  icon,
+  label,
+  status,
+}) => {
+  // 根据状态设置不同的图标、文本和颜色
+  let statusIcon = null;
+  let statusText = '';
+  let bgColor = '#ebf5ff';
+  let iconColor = '#0066ff';
+
+  if (status === 'completed') {
+    // 已完成状态
+    statusIcon = (
+      <View className="absolute -right-1 -top-1 size-6 items-center justify-center rounded-full bg-green-500">
+        <FontAwesome name="check" size={10} color="white" />
+      </View>
+    );
+    statusText = '已完成';
+    bgColor = '#ebf5ff';
+  } else if (status === 'inProgress') {
+    // 进行中状态
+    statusIcon = (
+      <View className="absolute -right-1 -top-1 size-6 items-center justify-center rounded-full bg-blue-600">
+        <FontAwesome name="spinner" size={10} color="white" />
+      </View>
+    );
+    statusText = '进行中';
+    bgColor = '#dcfce7';
+    iconColor = '#22c55e';
+  } else {
+    // 待开始状态
+    statusText = '待开始';
+  }
+
+  return (
+    <View className="mx-2 w-16 items-center">
+      {/* 节点圆圈 - 包含图标和状态指示器 */}
+      <View
+        className="relative mb-2 size-16 items-center justify-center rounded-full"
+        style={{ backgroundColor: bgColor }}
+      >
+        <FontAwesome name={icon as any} size={20} color={iconColor} />
+        {statusIcon}
+      </View>
+      {/* 节点标签 */}
+      <Text className="mb-0.5 text-xs font-medium">{label}</Text>
+      {/* 节点状态文本 - 根据状态显示不同颜色 */}
+      <Text
+        className={`text-xs ${status === 'inProgress' ? 'text-blue-600' : 'text-gray-500'}`}
+      >
+        {statusText}
+      </Text>
+    </View>
+  );
+};
diff --git a/src/components/production/process.tsx b/src/components/production/process.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..849921fc35f345a6f46f161d0ad5e079f71ccc18
--- /dev/null
+++ b/src/components/production/process.tsx
@@ -0,0 +1,220 @@
+import { FontAwesome } from '@expo/vector-icons';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+import { ProcessNode } from './process-node';
+import { ProgressBar } from './progress-bar';
+import { StatusBadge } from './status-badge';
+
+/**
+ * 工序管理组件
+ * 展示工序概览、工序流程图和工序列表
+ */
+export const Process = () => {
+  return (
+    <View>
+      {/* 工序概览 - 显示工序总数、使用中和待优化的统计信息 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <Text className="mb-3 text-lg font-semibold text-gray-800">
+          工序概览
+        </Text>
+        <View className="mb-3 flex-row justify-between">
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold" style={{ color: '#0066ff' }}>
+              18
+            </Text>
+            <Text className="mt-1 text-xs text-gray-500">工序总数</Text>
+          </View>
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold" style={{ color: '#22c55e' }}>
+              10
+            </Text>
+            <Text className="mt-1 text-xs text-gray-500">使用中</Text>
+          </View>
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold" style={{ color: '#f97316' }}>
+              2
+            </Text>
+            <Text className="mt-1 text-xs text-gray-500">待优化</Text>
+          </View>
+        </View>
+      </View>
+
+      {/* 工序流程图 - 显示生产工序的流程和进度 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-3 flex-row items-center justify-between">
+          <Text className="text-base font-medium">智能手表生产工序流程</Text>
+          <View className="flex-row items-center">
+            <Text className="text-sm font-medium text-blue-600">
+              当前批次：
+            </Text>
+            <Text className="text-sm">B20231204-01</Text>
+          </View>
+        </View>
+
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          className="mb-3"
+        >
+          <View className="min-w-full flex-row items-center py-2">
+            <ProcessNode icon="box" label="原料准备" status="completed" />
+            <View className="h-0.5 w-12 bg-green-500" />
+            <ProcessNode icon="cut" label="PCB切割" status="completed" />
+            <View className="h-0.5 w-12 bg-green-500" />
+            <ProcessNode
+              icon="microchip"
+              label="元器件贴装"
+              status="inProgress"
+            />
+            <View className="h-0.5 w-12 bg-gray-200" />
+            <ProcessNode icon="fire" label="回流焊接" status="pending" />
+            <View className="h-0.5 w-12 bg-gray-200" />
+            <ProcessNode
+              icon="check-circle"
+              label="功能测试"
+              status="pending"
+            />
+          </View>
+        </ScrollView>
+
+        {/* 工序进度信息 */}
+        <View className="flex-row items-center rounded-xl bg-blue-50 p-3">
+          <FontAwesome
+            name="info-circle"
+            size={16}
+            color="#0066ff"
+            style={{ marginRight: 8 }}
+          />
+          <View>
+            <Text className="text-sm">
+              当前进度：
+              <Text className="font-medium">40%</Text> | 预计完成时间：
+              <Text className="font-medium">2023-12-05 18:00</Text>
+            </Text>
+          </View>
+        </View>
+      </View>
+
+      {/* 工序列表标题 */}
+      <Text className="mb-3 text-lg font-semibold text-gray-800">工序列表</Text>
+
+      {/* 工序项目1 - 元器件贴装 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-2 flex-row items-start justify-between">
+          <Text className="text-base font-medium text-gray-800">
+            元器件贴装
+          </Text>
+          <StatusBadge status="使用中" color="#22c55e" bgColor="#dcfce7" />
+        </View>
+        <Text className="mb-2 text-sm text-gray-500">
+          工序编号：PR20231201-03
+        </Text>
+
+        {/* 工序基本信息 */}
+        <View className="mb-3 flex-row justify-between">
+          <View className="flex-1">
+            <Text className="mb-1 text-xs text-gray-500">负责人</Text>
+            <Text className="text-sm font-medium">王工程师</Text>
+          </View>
+          <View className="flex-1">
+            <Text className="mb-1 text-xs text-gray-500">标准工时</Text>
+            <Text className="text-sm font-medium">45分钟/批次</Text>
+          </View>
+        </View>
+
+        {/* 设备利用率进度条 */}
+        <View className="mb-2">
+          <View className="mb-1 flex-row justify-between">
+            <Text className="text-sm text-gray-500">设备利用率</Text>
+            <Text className="text-sm">85%</Text>
+          </View>
+          <ProgressBar progress={85} color="#22c55e" />
+        </View>
+
+        {/* 关联设备信息 */}
+        <View className="mb-3 rounded-xl bg-blue-50 p-3">
+          <Text className="mb-2 text-sm font-medium">关联设备</Text>
+          <View className="flex-row items-center">
+            <FontAwesome
+              name="microchip"
+              size={16}
+              color="#0066ff"
+              style={{ marginRight: 8 }}
+            />
+            <Text className="text-sm">SMT贴片机#2</Text>
+          </View>
+        </View>
+
+        {/* 工序项目底部 - 良品率和详情链接 */}
+        <View className="flex-row items-center justify-between">
+          <View className="flex-row items-center">
+            <Text className="text-sm text-gray-500">良品率：</Text>
+            <Text className="mr-3 text-sm font-medium">98.3%</Text>
+          </View>
+          <TouchableOpacity>
+            <Text className="text-sm text-blue-600">详情</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {/* 工序项目2 - 电路板焊接 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-2 flex-row items-start justify-between">
+          <Text className="text-base font-medium text-gray-800">
+            电路板焊接
+          </Text>
+          <StatusBadge status="使用中" color="#22c55e" bgColor="#dcfce7" />
+        </View>
+        <Text className="mb-2 text-sm text-gray-500">
+          工序编号：PR20231201-04
+        </Text>
+
+        {/* 工序基本信息 */}
+        <View className="mb-3 flex-row justify-between">
+          <View className="flex-1">
+            <Text className="mb-1 text-xs text-gray-500">负责人</Text>
+            <Text className="text-sm font-medium">李工程师</Text>
+          </View>
+          <View className="flex-1">
+            <Text className="mb-1 text-xs text-gray-500">标准工时</Text>
+            <Text className="text-sm font-medium">60分钟/批次</Text>
+          </View>
+        </View>
+
+        {/* 设备利用率进度条 */}
+        <View className="mb-2">
+          <View className="mb-1 flex-row justify-between">
+            <Text className="text-sm text-gray-500">设备利用率</Text>
+            <Text className="text-sm">75%</Text>
+          </View>
+          <ProgressBar progress={75} color="#22c55e" />
+        </View>
+
+        {/* 关联设备信息 */}
+        <View className="mb-3 rounded-xl bg-blue-50 p-3">
+          <Text className="mb-2 text-sm font-medium">关联设备</Text>
+          <View className="flex-row items-center">
+            <FontAwesome
+              name="fire"
+              size={16}
+              color="#f97316"
+              style={{ marginRight: 8 }}
+            />
+            <Text className="text-sm">波峰焊接机#1</Text>
+          </View>
+        </View>
+
+        {/* 工序项目底部 - 良品率和详情链接 */}
+        <View className="flex-row items-center justify-between">
+          <View className="flex-row items-center">
+            <Text className="text-sm text-gray-500">良品率：</Text>
+            <Text className="mr-3 text-sm font-medium">97.5%</Text>
+          </View>
+          <TouchableOpacity>
+            <Text className="text-sm text-blue-600">详情</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
diff --git a/src/components/production/progress-bar.tsx b/src/components/production/progress-bar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0e4a35fbb78a65f1810abdb777929295c6777caa
--- /dev/null
+++ b/src/components/production/progress-bar.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { View } from '@/components/ui';
+
+/**
+ * 进度条组件
+ * 用于显示完成百分比的可视化进度条
+ * @param progress - 进度百分比（0-100）
+ * @param color - 进度条颜色
+ */
+type ProgressBarProps = {
+  progress: number;
+  color: string;
+};
+
+/**
+ * 进度条组件
+ * 根据传入的进度百分比和颜色显示一个水平进度条
+ */
+export const ProgressBar: React.FC<ProgressBarProps> = ({
+  progress,
+  color,
+}) => (
+  <View className="h-1.5 overflow-hidden rounded bg-gray-200">
+    <View
+      className="h-full rounded"
+      style={{
+        width: `${progress}%`,
+        backgroundColor: color,
+      }}
+    />
+  </View>
+);
diff --git a/src/app/report-date-selector.tsx b/src/components/production/report-date-selector.tsx
similarity index 35%
rename from src/app/report-date-selector.tsx
rename to src/components/production/report-date-selector.tsx
index 49e510fe90d21056214ca5aa75b6ecb46c569719..0686e9911fea6dd2d1870e452586956f11630db5 100644
--- a/src/app/report-date-selector.tsx
+++ b/src/components/production/report-date-selector.tsx
@@ -1,64 +1,59 @@
 import React, { useState } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
 
+/**
+ * 报告类型定义
+ * daily: 日报
+ * weekly: 周报
+ * monthly: 月报
+ */
 type ReportType = 'daily' | 'weekly' | 'monthly';
 
+/**
+ * 报告日期选择器组件
+ * 用于在日报、周报和月报之间切换
+ */
 const ReportDateSelector: React.FC = () => {
+  // 当前选中的报告类型，默认为日报
   const [selectedReportType, setSelectedReportType] =
     useState<ReportType>('daily');
 
+  /**
+   * 处理报告类型变更
+   * @param type 要切换到的报告类型
+   */
   const handleReportTypeChange = (type: ReportType) => {
     setSelectedReportType(type);
   };
 
   return (
-    <View style={styles.reportDateSelector}>
+    <View className="mt-3 flex-row rounded-lg bg-gray-100 p-1">
       <TouchableOpacity
-        style={[
-          styles.reportDateButton,
-          selectedReportType === 'daily' && styles.reportDateButtonActive,
-        ]}
+        className={`flex-1 items-center rounded-md py-2 ${selectedReportType === 'daily' ? 'bg-white shadow-sm' : ''}`}
         onPress={() => handleReportTypeChange('daily')}
       >
         <Text
-          style={[
-            styles.reportDateButtonText,
-            selectedReportType === 'daily' && styles.reportDateButtonTextActive,
-          ]}
+          className={`text-sm ${selectedReportType === 'daily' ? 'font-medium text-blue-600' : 'text-gray-500'}`}
         >
           日报
         </Text>
       </TouchableOpacity>
       <TouchableOpacity
-        style={[
-          styles.reportDateButton,
-          selectedReportType === 'weekly' && styles.reportDateButtonActive,
-        ]}
+        className={`flex-1 items-center rounded-md py-2 ${selectedReportType === 'weekly' ? 'bg-white shadow-sm' : ''}`}
         onPress={() => handleReportTypeChange('weekly')}
       >
         <Text
-          style={[
-            styles.reportDateButtonText,
-            selectedReportType === 'weekly' &&
-              styles.reportDateButtonTextActive,
-          ]}
+          className={`text-sm ${selectedReportType === 'weekly' ? 'font-medium text-blue-600' : 'text-gray-500'}`}
         >
           周报
         </Text>
       </TouchableOpacity>
       <TouchableOpacity
-        style={[
-          styles.reportDateButton,
-          selectedReportType === 'monthly' && styles.reportDateButtonActive,
-        ]}
+        className={`flex-1 items-center rounded-md py-2 ${selectedReportType === 'monthly' ? 'bg-white shadow-sm' : ''}`}
         onPress={() => handleReportTypeChange('monthly')}
       >
         <Text
-          style={[
-            styles.reportDateButtonText,
-            selectedReportType === 'monthly' &&
-              styles.reportDateButtonTextActive,
-          ]}
+          className={`text-sm ${selectedReportType === 'monthly' ? 'font-medium text-blue-600' : 'text-gray-500'}`}
         >
           月报
         </Text>
@@ -67,36 +62,4 @@ const ReportDateSelector: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  reportDateSelector: {
-    flexDirection: 'row',
-    backgroundColor: '#f3f4f6',
-    borderRadius: 8,
-    padding: 4,
-    marginTop: 12,
-  },
-  reportDateButton: {
-    flex: 1,
-    paddingVertical: 8,
-    alignItems: 'center',
-    borderRadius: 6,
-  },
-  reportDateButtonActive: {
-    backgroundColor: 'white',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.1,
-    shadowRadius: 2,
-    elevation: 1,
-  },
-  reportDateButtonText: {
-    fontSize: 14,
-    color: '#6b7280',
-  },
-  reportDateButtonTextActive: {
-    color: '#0066ff',
-    fontWeight: '500',
-  },
-});
-
 export default ReportDateSelector;
diff --git a/src/components/production/report.tsx b/src/components/production/report.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..08fb16d1d39d860b783a0645ca3baaf94cdee40a
--- /dev/null
+++ b/src/components/production/report.tsx
@@ -0,0 +1,110 @@
+import { FontAwesome } from '@expo/vector-icons';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import ReportDateSelector from './report-date-selector';
+
+/**
+ * 生产报表组件
+ * 展示生产数据、设备运行报表和报表下载功能
+ */
+export const Report = () => {
+  return (
+    <View>
+      {/* 报表概览 - 标题和日期选择器 */}
+      <View className="mb-3 flex-row items-center justify-between">
+        <Text className="text-lg font-semibold text-gray-800">生产报表</Text>
+        <ReportDateSelector />
+      </View>
+
+      {/* 生产数据卡片 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-3 flex-row items-center justify-between">
+          <Text className="text-base font-semibold">生产数据</Text>
+          <Text className="text-sm text-gray-500">2023-12-05</Text>
+        </View>
+
+        {/* 生产数据统计网格 */}
+        <View className="mb-4 flex-row flex-wrap">
+          <View className="mb-3 w-1/2">
+            <Text className="mb-1 text-lg font-bold text-blue-600">1,250</Text>
+            <Text className="text-xs text-gray-500">计划产量</Text>
+          </View>
+          <View className="mb-3 w-1/2">
+            <Text className="mb-1 text-lg font-bold text-blue-600">1,180</Text>
+            <Text className="text-xs text-gray-500">实际产量</Text>
+          </View>
+          <View className="mb-3 w-1/2">
+            <Text className="mb-1 text-lg font-bold text-blue-600">94.4%</Text>
+            <Text className="text-xs text-gray-500">计划完成率</Text>
+          </View>
+          <View className="mb-3 w-1/2">
+            <Text className="mb-1 text-lg font-bold text-blue-600">98.3%</Text>
+            <Text className="text-xs text-gray-500">良品率</Text>
+          </View>
+        </View>
+
+        {/* 产品线产量对比图表 */}
+        <View className="mb-3">
+          <Text className="mb-2 text-sm font-medium">各产品线产量对比</Text>
+          <View className="h-40 items-center justify-center rounded-xl bg-gray-50">
+            <FontAwesome name="bar-chart" size={40} color="#0066ff" />
+            <Text className="mt-2 text-sm text-gray-500">产量数据图表</Text>
+          </View>
+        </View>
+      </View>
+
+      {/* 设备运行报表卡片 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-3 flex-row items-center justify-between">
+          <Text className="text-base font-semibold">设备运行报表</Text>
+          <Text className="text-sm text-gray-500">2023-12-05</Text>
+        </View>
+
+        {/* 设备运行数据统计网格 */}
+        <View className="mb-4 flex-row flex-wrap">
+          <View className="mb-3 w-1/2">
+            <Text className="mb-1 text-lg font-bold text-blue-600">32</Text>
+            <Text className="text-xs text-gray-500">设备总数</Text>
+          </View>
+          <View className="mb-3 w-1/2">
+            <Text className="mb-1 text-lg font-bold text-blue-600">28</Text>
+            <Text className="text-xs text-gray-500">运行设备</Text>
+          </View>
+          <View className="mb-3 w-1/2">
+            <Text className="mb-1 text-lg font-bold text-blue-600">87.5%</Text>
+            <Text className="text-xs text-gray-500">设备利用率</Text>
+          </View>
+          <View className="mb-3 w-1/2">
+            <Text className="mb-1 text-lg font-bold text-blue-600">4.2h</Text>
+            <Text className="text-xs text-gray-500">平均运行</Text>
+          </View>
+        </View>
+
+        {/* 设备运行状态分布图表 */}
+        <View className="mb-3">
+          <Text className="mb-2 text-sm font-medium">设备运行状态分布</Text>
+          <View className="h-40 items-center justify-center rounded-xl bg-gray-50">
+            <FontAwesome name="pie-chart" size={40} color="#0066ff" />
+            <Text className="mt-2 text-sm text-gray-500">设备状态图表</Text>
+          </View>
+        </View>
+      </View>
+
+      {/* 报表下载卡片 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <Text className="mb-3 text-lg font-semibold text-gray-800">
+          生产报表
+        </Text>
+        <TouchableOpacity className="flex-row items-center border-b border-gray-100 py-3">
+          <FontAwesome
+            name="file-pdf-o"
+            size={20}
+            color="#ef4444"
+            style={{ marginRight: 12 }}
+          />
+          <Text className="text-sm text-gray-800">下载本月生产报表</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
diff --git a/src/components/production/status-badge.tsx b/src/components/production/status-badge.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b94e0c4e281dda2e0956a8b8d1dd3c347953c687
--- /dev/null
+++ b/src/components/production/status-badge.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { Text, View } from '@/components/ui';
+
+/**
+ * StatusBadge 组件 - 用于显示状态标签
+ *
+ * 该组件创建一个圆角标签，用于展示各种状态信息（如：进行中、已完成、待处理等）
+ * 支持自定义文本颜色和背景颜色
+ */
+type StatusBadgeProps = {
+  /** 状态文本 */
+  status: string;
+  /** 文本颜色 */
+  color: string;
+  /** 背景颜色 */
+  bgColor: string;
+};
+
+export const StatusBadge: React.FC<StatusBadgeProps> = ({
+  status,
+  color,
+  bgColor,
+}) => (
+  <View className="rounded-full px-2 py-1" style={{ backgroundColor: bgColor }}>
+    <Text className="text-xs font-medium" style={{ color }}>
+      {status}
+    </Text>
+  </View>
+);
diff --git a/src/components/production/task.tsx b/src/components/production/task.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ab791750e4597c24fddeb778ca784207ff572310
--- /dev/null
+++ b/src/components/production/task.tsx
@@ -0,0 +1,166 @@
+import { FontAwesome } from '@expo/vector-icons';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import { ProgressBar } from './progress-bar';
+import { StatusBadge } from './status-badge';
+
+/**
+ * Task 组件 - 生产任务管理界面
+ *
+ * 该组件展示生产任务的概览和详细列表，包括：
+ * 1. 任务概览：显示任务总数、进行中任务数、待分配任务数和员工任务完成率
+ * 2. 生产任务列表：展示各个生产任务的详细信息和进度
+ */
+export const Task = () => {
+  return (
+    <View>
+      {/* 任务概览 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <Text className="mb-3 text-lg font-semibold text-gray-800">
+          任务概览
+        </Text>
+        <View className="mb-3 flex-row justify-between">
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold" style={{ color: '#0066ff' }}>
+              24
+            </Text>
+            <Text className="mt-1 text-xs text-gray-500">任务总数</Text>
+          </View>
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold" style={{ color: '#22c55e' }}>
+              12
+            </Text>
+            <Text className="mt-1 text-xs text-gray-500">进行中</Text>
+          </View>
+          <View className="flex-1 items-center">
+            <Text className="text-2xl font-bold" style={{ color: '#f97316' }}>
+              5
+            </Text>
+            <Text className="mt-1 text-xs text-gray-500">待分配</Text>
+          </View>
+        </View>
+        <View className="flex-row items-center rounded-xl bg-blue-50 p-3">
+          <FontAwesome
+            name="users"
+            size={20}
+            color="#0066ff"
+            style={{ marginRight: 12 }}
+          />
+          <View className="flex-1">
+            <Text className="text-sm font-medium">员工任务完成率</Text>
+            <View className="flex-row items-center">
+              <Text className="mr-2 text-lg font-bold text-blue-600">
+                82.3%
+              </Text>
+              <Text className="text-xs text-green-600">↑ 3.7%</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+
+      {/* 生产任务列表 */}
+      <Text className="mb-3 text-lg font-semibold text-gray-800">
+        生产任务列表
+      </Text>
+
+      {/* 任务项目1 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-2 flex-row items-start justify-between">
+          <Text className="text-base font-medium text-gray-800">
+            主板元器件贴装任务
+          </Text>
+          <StatusBadge status="进行中" color="#22c55e" bgColor="#dcfce7" />
+        </View>
+        <Text className="mb-2 text-sm text-gray-500">
+          任务编号：TA20231205-01
+        </Text>
+        <View className="mb-3 flex-row justify-between">
+          <Text className="text-sm text-gray-500">负责人：李技术员</Text>
+          <Text className="text-sm text-gray-500">截止日期：2023-12-10</Text>
+        </View>
+        <View className="mb-2">
+          <View className="mb-1 flex-row justify-between">
+            <Text className="text-sm text-gray-500">完成进度</Text>
+            <Text className="text-sm text-gray-500">70%</Text>
+          </View>
+          <ProgressBar progress={70} color="#22c55e" />
+        </View>
+        <View className="flex-row items-center justify-between">
+          <View className="flex-row items-center">
+            <Text className="text-sm text-gray-500">所属计划：</Text>
+            <Text className="mr-3 text-sm font-medium">PP20231128-01</Text>
+          </View>
+          <TouchableOpacity>
+            <Text className="text-sm text-blue-600">详情</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {/* 任务项目2 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-2 flex-row items-start justify-between">
+          <Text className="text-base font-medium text-gray-800">
+            电路板焊接任务
+          </Text>
+          <StatusBadge status="待分配" color="#f97316" bgColor="#ffedd5" />
+        </View>
+        <Text className="mb-2 text-sm text-gray-500">
+          任务编号：TA20231205-02
+        </Text>
+        <View className="mb-3 flex-row justify-between">
+          <Text className="text-sm text-gray-500">负责人：待分配</Text>
+          <Text className="text-sm text-gray-500">截止日期：2023-12-12</Text>
+        </View>
+        <View className="mb-2">
+          <View className="mb-1 flex-row justify-between">
+            <Text className="text-sm text-gray-500">完成进度</Text>
+            <Text className="text-sm text-gray-500">0%</Text>
+          </View>
+          <ProgressBar progress={0} color="#f97316" />
+        </View>
+        <View className="flex-row items-center justify-between">
+          <View className="flex-row items-center">
+            <Text className="text-sm text-gray-500">所属计划：</Text>
+            <Text className="mr-3 text-sm font-medium">PP20231128-01</Text>
+          </View>
+          <TouchableOpacity>
+            <Text className="text-sm text-blue-600">详情</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {/* 任务项目3 */}
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-2 flex-row items-start justify-between">
+          <Text className="text-base font-medium text-gray-800">
+            音箱外壳注塑任务
+          </Text>
+          <StatusBadge status="进行中" color="#22c55e" bgColor="#dcfce7" />
+        </View>
+        <Text className="mb-2 text-sm text-gray-500">
+          任务编号：TA20231204-03
+        </Text>
+        <View className="mb-3 flex-row justify-between">
+          <Text className="text-sm text-gray-500">负责人：王技术员</Text>
+          <Text className="text-sm text-gray-500">截止日期：2023-12-15</Text>
+        </View>
+        <View className="mb-2">
+          <View className="mb-1 flex-row justify-between">
+            <Text className="text-sm text-gray-500">完成进度</Text>
+            <Text className="text-sm text-gray-500">45%</Text>
+          </View>
+          <ProgressBar progress={45} color="#22c55e" />
+        </View>
+        <View className="flex-row items-center justify-between">
+          <View className="flex-row items-center">
+            <Text className="text-sm text-gray-500">所属计划：</Text>
+            <Text className="mr-3 text-sm font-medium">PP20231130-02</Text>
+          </View>
+          <TouchableOpacity>
+            <Text className="text-sm text-blue-600">详情</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
diff --git a/src/components/ui/nav-header.tsx b/src/components/ui/nav-header.tsx
index 8e684df4eb2e0879ee2d311adb270b241bfdc151..083112332aa3cb0e36dbba14a8def2101a6356db 100644
--- a/src/components/ui/nav-header.tsx
+++ b/src/components/ui/nav-header.tsx
@@ -22,7 +22,7 @@ export type NavHeaderProps = {
 export const NavHeader = ({
   leftShown = true,
   title = 'Demo',
-  headerBackTitle = 'Demo',
+  headerBackTitle = '',
   right = null,
   tx,
 }: NavHeaderProps) => {
@@ -38,7 +38,7 @@ export const NavHeader = ({
             title: tx ? translate(tx) : title,
             headerTintColor: '#000',
             headerBackTitle: headerBackTitle,
-            headerShadowVisible: leftShown,
+            headerBackButtonDisplayMode: 'minimal',
             headerTitleAlign: 'center',
             headerRight: () =>
               right && (