diff --git a/.gitignore b/.gitignore
index 38b0a57eac2721477f0e6fe8c53fbee450077c2d..097d73aecc6d23d634d382d1b10a7e757ac629db 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,4 +18,5 @@ yarn-error.log
 # The following patterns were generated by expo-cli
 
 expo-env.d.ts
-# @end expo-cli
\ No newline at end of file
+# @end expo-cli
+.claude/
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 33f41dd1906ca6da5a24087cb281546ea39795b8..cd06b73fa2d9411d2af58b72b363b3e461be9643 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -34,5 +34,8 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
   },
-  "i18n-ally.sourceLanguage": "zh"
+  "i18n-ally.sourceLanguage": "zh",
+  "[typescript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  }
 }
diff --git a/src/api/common/http.tsx b/src/api/common/http.tsx
index 6d98128cdf43380148da828fb6e9099f1351fb65..e6b6b1190a19f37cfce265c15eaa68aa22481758 100644
--- a/src/api/common/http.tsx
+++ b/src/api/common/http.tsx
@@ -8,7 +8,7 @@ import axios, {
 } from 'axios';
 import { Platform } from 'react-native';
 
-import { type ResultData, ResultEnum } from '@/api/types';
+import { type ResultData, ResultEnum, type ResultPage } from '@/api/types';
 import { signOut } from '@/lib/auth';
 import { getToken, getUniqueId } from '@/lib/auth/utils';
 import { error, hideLoading } from '@/lib/message';
@@ -120,6 +120,9 @@ class RequestHttp {
   ): Promise<ResultData<T>> {
     return this.service.post(url, params, _object);
   }
+  getGridList(url: string, params?: object, _object = {}): Promise<ResultPage> {
+    return this.service.get(url, { params, ..._object });
+  }
   postForm<T>(url: string, params?: object): Promise<T> {
     return this.service.postForm(url, params);
   }
diff --git a/src/api/modules/common.ts b/src/api/modules/common.ts
index f9a669d969aa54aa2265071052c3a54e419a8e09..9166e588966f67a4c25ae200289fe0e615a7af75 100644
--- a/src/api/modules/common.ts
+++ b/src/api/modules/common.ts
@@ -1,24 +1,82 @@
+import {
+  getBrand,
+  getBundleId,
+  getDeviceId,
+  getSystemName,
+  getSystemVersion,
+  getVersion,
+} from 'react-native-device-info';
+
 import http from '@/api/common/http';
+import {
+  type DeviceInfo,
+  type ResultData,
+  type VersionInfo,
+} from '@/api/types';
 import { isWeb } from '@/lib';
-import { DeviceInfo, VersionInfo } from '../types';
-import { getSystemName, getSystemVersion, getBrand, getDeviceId, getBundleId, getVersion } from 'react-native-device-info';
+import { type SmLov } from '@/types';
 
+/** 查询最新版本信息 */
 export const queryLatestVersion = () => {
-  return http.get<VersionInfo>(
-    `/api/SmApplicationVersion/latest`
-  );
+  return http.get<VersionInfo>('/api/SmApplicationVersion/latest');
 };
+
+/** 记录设备信息 */
 export const recordDevice = async (uniqueId: string) => {
-  if (uniqueId !== '' && !isWeb) {
-    let param: DeviceInfo = {
-      UUID: uniqueId,
-      Platform: getSystemName(),
-      Version: getSystemVersion(),
-      Brand: getBrand(),
-      Model: getDeviceId(),
-      BundleId: getBundleId(),
-      BundleVersion: getVersion(),
-    };
-    await http.post(`api/SmApplicationDevice/Record`, param);
-  }
-};
\ No newline at end of file
+  if (!uniqueId || isWeb) return;
+
+  const param: DeviceInfo = {
+    UUID: uniqueId,
+    Platform: getSystemName(),
+    Version: getSystemVersion(),
+    Brand: getBrand(),
+    Model: getDeviceId(),
+    BundleId: getBundleId(),
+    BundleVersion: getVersion(),
+  };
+
+  return http.post('/api/SmApplicationDevice/Record', param);
+};
+
+/**
+ * 按过滤条件查询
+ * @param moduleCode 模块代码
+ * @param params 查询参数
+ * @param filter 过滤条件
+ * @returns 查询结果列表
+ */
+export const queryByFilter = (
+  moduleCode: string,
+  params: Record<string, any>,
+  filter: any
+) =>
+  http.getGridList(`/api/Common/QueryByFilter/${moduleCode}`, params, {
+    filter,
+  });
+
+/**
+ * 查询详情
+ * @param url 查询URL
+ * @param id 记录ID
+ * @returns 查询结果
+ */
+
+export const queryDetail = <T>(
+  url: string,
+  id: string
+): Promise<ResultData<T>> => {
+  return http.get<T>(`${url}/${id}`);
+};
+
+export const queryLov = (code: string) => {
+  return http.get<SmLov[]>(`/api/SmLov/QueryByCode/${code}`);
+};
+
+/**
+ * 获取下拉表格数据
+ * @param params 查询参数
+ * @returns 下拉表格数据
+ */
+export const getComboGridData = (params: Record<string, any>) => {
+  return http.post<SmLov[]>('/api/Common/GetComboGridData', params);
+};
diff --git a/src/api/modules/login.ts b/src/api/modules/login.ts
index d170e599e154ca39779c90b08e3a8526bb546ec0..abeb35efc3c68725d36bf197ae2ff4ab91b29560 100644
--- a/src/api/modules/login.ts
+++ b/src/api/modules/login.ts
@@ -1,25 +1,31 @@
 import http from '@/api/common/http';
-// import { ReqLogin, ResLogin } from "@/api/interface/index";
-interface ResLogin {
-  Token: string;
+
+/** 用户信息 */
+export interface UserInfo {
+  UserName: string;
+  WeekName: string;
   UserId: string;
-  UserInfo: UserInfo;
+  UserType: string;
+  AvatarFileId: string;
 }
+
+/** 登录请求参数 */
 export interface ReqLogin {
   UserAccount: string;
   Password: string;
 }
 
-export type UserInfo = {
-  UserName: string;
-  WeekName: string;
+/** 登录响应结果 */
+interface ResLogin {
+  Token: string;
   UserId: string;
-  UserType: string;
-  AvatarFileId: string;
-};
-export const loginApi = (params: ReqLogin) => {
-  return http.post<ResLogin>(`api/Authorize/Login`, params);
-};
-export const currentUserApi = () => {
-  return http.get<UserInfo>(`api/Authorize/CurrentUser`);
-};
+  UserInfo: UserInfo;
+}
+
+/** 用户登录 */
+export const loginApi = (params: ReqLogin) =>
+  http.post<ResLogin>('/api/Authorize/Login', params);
+
+/** 获取当前用户信息 */
+export const currentUserApi = () =>
+  http.get<UserInfo>('/api/Authorize/CurrentUser');
diff --git a/src/api/types.ts b/src/api/types.ts
index 8324a90326f7b3fe06738d9ff0c5426fbb4b8264..1b6616255f89eac000943c9cc224794f5a7d1e44 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -21,12 +21,15 @@ export interface DataRow<T = any> {
   hasNext: boolean;
   rows: T[];
 }
-export interface ResultData<T = any> {
-  code: number;
-  msg: string;
-  data: T;
+export interface ResultPage {
+  current: number;
+  data: [];
+  message: string;
+  pageSize: number;
+  total: number;
+  pageCount: number;
+  status: number;
   success: boolean;
-  time: string;
 }
 export interface Result {
   Status: number;
@@ -49,7 +52,6 @@ export type DeviceInfo = {
   BundleVersion: string;
 };
 
-
 export interface VersionInfo {
   Platform?: string;
   VersionNo?: string;
@@ -74,4 +76,4 @@ export interface VersionInfo {
   UpdateTime?: null;
   ModuleCode?: null;
   ID?: string;
-}
\ No newline at end of file
+}
diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx
index 1af8c73e00ef864a2ab77d9b995f0fc07e65650e..f377415bfcf5ad45de565667f715a8943126ba4b 100644
--- a/src/app/(app)/index.tsx
+++ b/src/app/(app)/index.tsx
@@ -74,10 +74,8 @@ const Home: React.FC = () => {
   const userInfo = user.use.userInfo();
   const fetchUserInfo = user.use.fetchUserInfo();
   useEffect(() => {
-    if (userInfo == null) {
-      fetchUserInfo();
-    }
-  }, [userInfo, fetchUserInfo]);
+    fetchUserInfo();
+  }, []);
   const router = useRouter();
 
   return (
diff --git a/src/app/(repair)/_layout.tsx b/src/app/(repair)/_layout.tsx
index f4e20bae7d9c3e0c70448702c014aa002b782cf4..6a25158b04b9b7c38fa608fe5a3219812be14981 100644
--- a/src/app/(repair)/_layout.tsx
+++ b/src/app/(repair)/_layout.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { TabLayout, type TabConfig } from '@/components/tabs';
+import { type TabConfig, TabLayout } from '@/components/tabs';
 import {
   Analysis,
   Equipment,
diff --git a/src/app/(repair)/equipment.tsx b/src/app/(repair)/equipment.tsx
index 1c859ce30d396f46b652c757063617166643fabf..6a78c24949b04d28bd34a1c44cca263f361ff4fb 100644
--- a/src/app/(repair)/equipment.tsx
+++ b/src/app/(repair)/equipment.tsx
@@ -1,39 +1,63 @@
-import { LinearGradient } from 'expo-linear-gradient';
+import { Env } from '@env';
 import { useRouter } from 'expo-router';
-import React, { useState } from 'react';
-import { ScrollView, TextInput, TouchableOpacity } from 'react-native';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Image, ScrollView, TextInput, TouchableOpacity } from 'react-native';
 
+import { queryByFilter } from '@/api';
+import { RefreshListView } from '@/components';
 import { NavHeader, Text, View } from '@/components/ui';
-import { FontAwesome } from '@/components/ui/icons';
+import { FontAwesome, GroupEnum } from '@/components/ui/icons';
 import { useAppColorScheme } from '@/lib/hooks';
+import { type Equipment, type EquipmentStatus } from '@/types';
+
+const PageSize = 10;
+const moduleCode = 'EM_EQUIPMENT_INFO_MNG';
 
-// 筛选标签类型
 type FilterType = 'all' | 'running' | 'repairing' | 'fault';
 
-// 设备状态类型
-type EquipmentStatus = 'running' | 'repairing' | 'fault';
-
-// 设备数据类型
-type Equipment = {
-  id: string;
-  name: string;
-  code: string;
-  icon: string;
-  location: string;
-  installDate: string;
-  status: EquipmentStatus;
-  health: number;
-  repairCount: number;
-  maintenanceInfo: string;
-  gradientColors: [string, string];
+const STATUS_CONFIG = {
+  running: {
+    bg: 'bg-emerald-50',
+    text: '#059669',
+    border: 'border-emerald-200',
+    icon: 'check-circle',
+    label: '运行中',
+  },
+  repairing: {
+    bg: 'bg-amber-50',
+    text: '#d97706',
+    border: 'border-amber-200',
+    icon: 'wrench',
+    label: '维修中',
+  },
+  fault: {
+    bg: 'bg-red-50',
+    text: '#dc2626',
+    border: 'border-red-200',
+    icon: 'exclamation-triangle',
+    label: '故障',
+  },
+  default: {
+    bg: 'bg-gray-100',
+    text: '#6b7280',
+    border: 'border-gray-200',
+    icon: 'question-circle',
+    label: '未知',
+  },
+};
+
+const getStatusConfig = (status: EquipmentStatus | null | undefined) => {
+  return (
+    STATUS_CONFIG[status as keyof typeof STATUS_CONFIG] || STATUS_CONFIG.default
+  );
 };
 
-// 筛选按钮组件
 type FilterButtonProps = {
   label: string;
   count: number;
   active: boolean;
   onPress: () => void;
+  activeColor?: string;
 };
 
 const FilterButton: React.FC<FilterButtonProps> = ({
@@ -41,272 +65,272 @@ const FilterButton: React.FC<FilterButtonProps> = ({
   count,
   active,
   onPress,
+  activeColor,
 }) => (
   <TouchableOpacity
-    className={`rounded-full px-3 py-1.5 ${active ? 'bg-blue-600' : 'bg-gray-100 dark:bg-neutral-700'}`}
+    className={`mr-2 flex-row items-center rounded-full px-3.5 py-2 ${active ? '' : 'bg-gray-100 dark:bg-neutral-700'}`}
+    style={active ? { backgroundColor: activeColor || '#3b82f6' } : undefined}
     onPress={onPress}
     activeOpacity={0.7}
   >
     <Text
-      className={`text-sm ${active ? 'text-white' : 'text-gray-700 dark:text-gray-200'}`}
+      className={`text-[13px] font-medium ${active ? 'text-white' : 'text-gray-700 dark:text-gray-300'}`}
     >
       {label}
+    </Text>
+    <View
+      className={`ml-1.5 min-w-[20px] items-center rounded-full px-1.5 py-0.5 ${active ? 'bg-white/25' : 'bg-gray-200 dark:bg-neutral-600'}`}
+      style={
+        !active && activeColor
+          ? { backgroundColor: `${activeColor}20` }
+          : undefined
+      }
+    >
       <Text
-        className={`ml-1 ${active ? 'text-white' : 'text-gray-700 dark:text-gray-200'}`}
+        className={`text-[11px] font-semibold ${active ? 'text-white' : 'text-gray-500'}`}
+        style={!active && activeColor ? { color: activeColor } : undefined}
       >
         {count}
       </Text>
-    </Text>
+    </View>
   </TouchableOpacity>
 );
 
-// 设备卡片组件
-type EquipmentCardProps = {
-  equipment: Equipment;
-  onPress: () => void;
-};
+export default function EquipmentView() {
+  const router = useRouter();
+  const [searchText, setSearchText] = useState('');
+  const [activeFilter, setActiveFilter] = useState<FilterType>('all');
+  const { isDark } = useAppColorScheme();
+  const [list, setList] = useState<Equipment[]>([]);
+  const [hasMore, setHasMore] = useState<boolean>(true);
+  const pageNumRef = useRef(1);
 
-const EquipmentCard: React.FC<EquipmentCardProps> = ({
-  equipment,
-  onPress,
-}) => {
-  const getStatusConfig = (status: EquipmentStatus) => {
-    switch (status) {
-      case 'running':
-        return {
-          bgColor: 'rgba(82, 196, 26, 0.1)',
-          textColor: '#52c41a',
-          icon: 'circle',
-          label: '运行中',
-        };
-      case 'repairing':
-        return {
-          bgColor: 'rgba(250, 173, 20, 0.1)',
-          textColor: '#faad14',
-          icon: 'wrench',
-          label: '维修中',
-        };
-      case 'fault':
-        return {
-          bgColor: 'rgba(245, 34, 45, 0.1)',
-          textColor: '#f5222d',
-          icon: 'exclamation-circle',
-          label: '故障',
-        };
+  const loadData = async (append = false) => {
+    const page = append ? pageNumRef.current + 1 : 1;
+    pageNumRef.current = page;
+
+    const filter = {
+      PageIndex: page,
+      PageSize: PageSize,
+      Conditions: '',
+    };
+
+    const { success, data, total } = await queryByFilter(
+      moduleCode,
+      {},
+      filter
+    );
+
+    if (success && Array.isArray(data)) {
+      const newHasMore = list.length + data.length < (total || 0);
+      setHasMore(newHasMore);
+      setList((prev) => (append ? [...prev, ...data] : data));
+    } else {
+      setHasMore(false);
     }
   };
 
-  const statusConfig = getStatusConfig(equipment.status);
+  useEffect(() => {
+    loadData(false);
+  }, []);
 
-  return (
-    <TouchableOpacity
-      className="mb-3 rounded-xl bg-white shadow-sm dark:bg-neutral-800"
-      onPress={onPress}
-      activeOpacity={0.7}
-    >
-      <View className="p-4">
-        {/* 顶部信息 */}
-        <View className="mb-3 flex-row items-start justify-between">
-          <View className="flex-1 flex-row items-start">
-            <LinearGradient
-              colors={equipment.gradientColors}
-              start={{ x: 0, y: 0 }}
-              end={{ x: 1, y: 1 }}
-              style={{
-                width: 64,
-                height: 64,
-                borderRadius: 12,
-                alignItems: 'center',
-                justifyContent: 'center',
-                marginRight: 12,
-              }}
-            >
-              <FontAwesome
-                name={equipment.icon as any}
-                size={24}
-                color="white"
-              />
-            </LinearGradient>
-            <View className="flex-1">
-              <Text className="mb-1 text-base font-semibold text-gray-800 dark:text-gray-100">
-                {equipment.name}
+  const handleEquipmentPress = (item: Equipment) => {
+    router.push(`/equipment/${item.ID}`);
+  };
+
+  const onRefresh = () => {
+    pageNumRef.current = 1;
+    loadData(false);
+  };
+
+  const onLoadMore = () => {
+    if (!hasMore) return;
+    loadData(true);
+  };
+
+  const filterCounts = useMemo(
+    () => ({
+      all: list.length,
+      running: list.filter((e) => e.Status === 'running').length,
+      repairing: list.filter((e) => e.Status === 'repairing').length,
+      fault: list.filter((e) => e.Status === 'fault').length,
+    }),
+    [list]
+  );
+
+  const filteredList = useMemo(() => {
+    if (activeFilter === 'all') return list;
+    return list.filter((e) => e.Status === activeFilter);
+  }, [list, activeFilter]);
+
+  const renderEquipmentCard = ({ item }: { item: Equipment }) => {
+    const statusConfig = getStatusConfig(item.Status);
+    const healthRate = item.Health ?? 0;
+    const repairCount = item.RepairCount ?? 0;
+
+    return (
+      <TouchableOpacity
+        className="mb-3 overflow-hidden rounded-2xl bg-white shadow-sm dark:bg-neutral-800"
+        onPress={() => handleEquipmentPress(item)}
+        activeOpacity={0.7}
+      >
+        {/* 状态指示条 */}
+        <View
+          className="h-[3px] w-full"
+          style={{ backgroundColor: statusConfig.text }}
+        />
+
+        <View className="p-4">
+          {/* 顶部区域：图片 + 信息 + 状态 */}
+          <View className="flex-row items-start">
+            {/* 设备图片 */}
+            <View className="size-[60px] overflow-hidden rounded-xl bg-gray-100 dark:bg-neutral-700">
+              {item.ImageId ? (
+                <Image
+                  source={{
+                    uri: `${Env.API_URL}/api/File/Img/${item.ImageId}`,
+                  }}
+                  className="size-full"
+                  resizeMode="cover"
+                />
+              ) : (
+                <View className="flex-1 items-center justify-center">
+                  <FontAwesome name="cogs" size={24} color="#9ca3af" />
+                </View>
+              )}
+            </View>
+
+            {/* 设备信息 */}
+            <View className="ml-3 mr-2 flex-1">
+              <Text
+                className="mb-1 text-[15px] font-semibold text-gray-800 dark:text-gray-100"
+                numberOfLines={1}
+              >
+                {item.MachineName}
               </Text>
-              <Text className="mb-2 text-sm text-gray-500 dark:text-gray-400">
-                编号：{equipment.code}
+              <Text className="mb-1.5 text-[13px] text-gray-500 dark:text-gray-400">
+                {item.MachineNo}
               </Text>
               <View className="flex-row items-center">
-                <FontAwesome name="map-marker" size={10} color="#9ca3af" />
-                <Text className="ml-1 text-xs text-gray-600 dark:text-gray-400">
-                  {equipment.location}
-                </Text>
-                <FontAwesome
-                  name="calendar"
-                  size={10}
-                  color="#9ca3af"
-                  style={{ marginLeft: 12 }}
-                />
-                <Text className="ml-1 text-xs text-gray-600 dark:text-gray-400">
-                  {equipment.installDate}
+                <FontAwesome name="map-marker" size={11} color="#9ca3af" />
+                <Text
+                  className="ml-1 flex-1 text-xs text-gray-400"
+                  numberOfLines={1}
+                >
+                  {item.Location || '未设置'}
                 </Text>
               </View>
             </View>
-          </View>
-          <View
-            className="ml-2 rounded-full px-3 py-1"
-            style={{ backgroundColor: statusConfig.bgColor }}
-          >
-            <View className="flex-row items-center">
+
+            {/* 状态标签 */}
+            <View
+              className={`flex-row items-center rounded-xl border px-2.5 py-1 ${statusConfig.bg} ${statusConfig.border}`}
+            >
               <FontAwesome
                 name={statusConfig.icon as any}
-                size={8}
-                color={statusConfig.textColor}
+                size={10}
+                color={statusConfig.text}
               />
               <Text
-                className="ml-1 text-xs font-semibold"
-                style={{ color: statusConfig.textColor }}
+                className="ml-1 text-[11px] font-semibold"
+                style={{ color: statusConfig.text }}
               >
                 {statusConfig.label}
               </Text>
             </View>
           </View>
-        </View>
 
-        {/* 底部统计 */}
-        <View className="flex-row border-t border-gray-100 pt-3 dark:border-neutral-700">
-          <View className="flex-1 items-center">
-            <Text
-              className="text-sm font-semibold"
-              style={{ color: equipment.health < 50 ? '#f5222d' : '#374151' }}
-            >
-              {equipment.health}%
-            </Text>
-            <Text className="text-xs text-gray-500 dark:text-gray-400">
-              健康度
-            </Text>
-          </View>
-          <View className="flex-1 items-center border-x border-gray-100 dark:border-neutral-700">
-            <Text className="text-sm font-semibold text-gray-800 dark:text-gray-100">
-              {equipment.repairCount}次
-            </Text>
-            <Text className="text-xs text-gray-500 dark:text-gray-400">
-              本月维修
-            </Text>
-          </View>
-          <View className="flex-1 items-center">
-            <Text
-              className="text-sm font-semibold"
-              style={{
-                color:
-                  equipment.status === 'repairing'
-                    ? '#faad14'
-                    : equipment.status === 'fault'
-                      ? '#f5222d'
-                      : '#374151',
-              }}
-            >
-              {equipment.maintenanceInfo}
-            </Text>
-            <Text className="text-xs text-gray-500 dark:text-gray-400">
-              {equipment.status === 'repairing'
-                ? '维修状态'
-                : equipment.status === 'fault'
-                  ? '优先级'
-                  : '距保养'}
-            </Text>
+          {/* 分隔线 */}
+          <View className="my-3.5 h-px bg-gray-100 dark:bg-neutral-700" />
+
+          {/* 底部统计区域 */}
+          <View className="flex-row items-center">
+            {/* 健康度 */}
+            <View className="flex-1 items-center">
+              <View className="flex-row items-baseline">
+                <Text
+                  className="text-lg font-bold"
+                  style={{ color: healthRate < 50 ? '#dc2626' : '#059669' }}
+                >
+                  {healthRate}
+                </Text>
+                <Text className="ml-0.5 text-[11px] text-gray-400">%</Text>
+              </View>
+              <Text className="mt-1 text-[11px] text-gray-400">健康度</Text>
+              {/* 健康度进度条 */}
+              <View className="mt-1.5 h-[3px] w-[70%] overflow-hidden rounded-sm bg-gray-200">
+                <View
+                  className="h-full rounded-sm"
+                  style={{
+                    width: `${Math.min(healthRate, 100)}%`,
+                    backgroundColor: healthRate < 50 ? '#dc2626' : '#059669',
+                  }}
+                />
+              </View>
+            </View>
+
+            {/* 分隔 */}
+            <View className="h-8 w-px bg-gray-100 dark:bg-neutral-700" />
+
+            {/* 维修次数 */}
+            <View className="flex-1 items-center">
+              <View className="flex-row items-baseline">
+                <Text className="text-lg font-bold text-blue-500">
+                  {repairCount}
+                </Text>
+                <Text className="ml-0.5 text-[11px] text-gray-400">次</Text>
+              </View>
+              <Text className="mt-1 text-[11px] text-gray-400">本月维修</Text>
+            </View>
+
+            {/* 分隔 */}
+            <View className="h-8 w-px bg-gray-100 dark:bg-neutral-700" />
+
+            {/* 状态相关信息 */}
+            <View className="flex-1 items-center">
+              <Text
+                className="text-[13px] font-semibold"
+                style={{
+                  color:
+                    item.Status === 'repairing'
+                      ? '#faad14'
+                      : item.Status === 'fault'
+                        ? '#f5222d'
+                        : '#374151',
+                }}
+              >
+                xxxxxx
+              </Text>
+              <Text className="mt-1 text-[11px] text-gray-400">
+                {item.Status === 'repairing'
+                  ? '维修状态'
+                  : item.Status === 'fault'
+                    ? '优先级'
+                    : '距保养'}
+              </Text>
+            </View>
           </View>
         </View>
+      </TouchableOpacity>
+    );
+  };
+
+  const EmptyState = () => (
+    <View className="flex-1 items-center justify-center py-16">
+      <View className="mb-4 size-20 items-center justify-center rounded-full bg-gray-100 dark:bg-neutral-700">
+        <FontAwesome
+          name="inbox"
+          size={40}
+          color={isDark ? '#6b7280' : '#9ca3af'}
+          group={GroupEnum.FontAwesome}
+        />
       </View>
-    </TouchableOpacity>
+      <Text className="mb-2 text-[17px] font-semibold text-gray-700 dark:text-gray-100">
+        暂无设备信息
+      </Text>
+      <Text className="text-sm text-gray-400">下拉刷新或添加新设备</Text>
+    </View>
   );
-};
-
-const EquipmentList: React.FC = () => {
-  const router = useRouter();
-  const [searchText, setSearchText] = useState('');
-  const [activeFilter, setActiveFilter] = useState<FilterType>('all');
-  const { isDark } = useAppColorScheme();
-
-  // 模拟设备数据
-  const equipmentList: Equipment[] = [
-    {
-      id: '1',
-      name: '数控机床 CNC-01',
-      code: 'EQ-2024-001',
-      icon: 'database',
-      location: 'A车间-1号线',
-      installDate: '2023-05-15',
-      status: 'running',
-      health: 98,
-      repairCount: 2,
-      maintenanceInfo: '5天',
-      gradientColors: ['#3b82f6', '#2563eb'],
-    },
-    {
-      id: '2',
-      name: '注塑机 IM-03',
-      code: 'EQ-2024-003',
-      icon: 'cog',
-      location: 'B车间-2号线',
-      installDate: '2022-08-20',
-      status: 'repairing',
-      health: 65,
-      repairCount: 7,
-      maintenanceInfo: '进行中',
-      gradientColors: ['#f97316', '#ea580c'],
-    },
-    {
-      id: '3',
-      name: '空压机 AC-05',
-      code: 'EQ-2024-005',
-      icon: 'map-marker',
-      location: '动力车间',
-      installDate: '2021-03-10',
-      status: 'fault',
-      health: 35,
-      repairCount: 15,
-      maintenanceInfo: '紧急',
-      gradientColors: ['#ef4444', '#dc2626'],
-    },
-    {
-      id: '4',
-      name: '混料机 MX-08',
-      code: 'EQ-2024-008',
-      icon: 'flask',
-      location: 'C车间-配料区',
-      installDate: '2023-11-05',
-      status: 'running',
-      health: 95,
-      repairCount: 1,
-      maintenanceInfo: '12天',
-      gradientColors: ['#22c55e', '#16a34a'],
-    },
-    {
-      id: '5',
-      name: '机械手臂 RB-02',
-      code: 'EQ-2024-012',
-      icon: 'map-marker',
-      location: 'A车间-组装线',
-      installDate: '2024-01-15',
-      status: 'running',
-      health: 99,
-      repairCount: 0,
-      maintenanceInfo: '30天',
-      gradientColors: ['#a855f7', '#9333ea'],
-    },
-  ];
-
-  // 筛选设备
-  const filteredEquipment = equipmentList.filter((item) => {
-    if (activeFilter === 'all') return true;
-    return item.status === activeFilter;
-  });
-
-  const filterCounts = {
-    all: equipmentList.length,
-    running: equipmentList.filter((e) => e.status === 'running').length,
-    repairing: equipmentList.filter((e) => e.status === 'repairing').length,
-    fault: equipmentList.filter((e) => e.status === 'fault').length,
-  };
 
   return (
     <View className="flex-1 bg-gray-50 dark:bg-neutral-900">
@@ -315,27 +339,23 @@ const EquipmentList: React.FC = () => {
         title="设备"
         leftShown={false}
         right={
-          <View className="flex-row items-center">
-            <TouchableOpacity
-              className="mr-3"
-              onPress={() => {
-                router.push(`/equipment/add`);
-              }}
-            >
-              <FontAwesome
-                name="plus"
-                size={20}
-                color={isDark ? '#9ca3af' : '#6b7280'}
-              />
-            </TouchableOpacity>
-          </View>
+          <TouchableOpacity
+            className="p-2"
+            onPress={() => router.push('/equipment/add')}
+          >
+            <FontAwesome
+              name="plus"
+              size={20}
+              color={isDark ? '#9ca3af' : '#6b7280'}
+            />
+          </TouchableOpacity>
         }
       />
 
-      {/* 搜索和筛选 - 固定在顶部 */}
-      <View className="border-b border-gray-200 bg-white px-4 pb-3 pt-4 dark:border-neutral-700 dark:bg-neutral-800">
+      {/* 搜索和筛选区域 */}
+      <View className="border-b border-gray-200 bg-white px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800">
         {/* 搜索框 */}
-        <View className="mb-3 flex-row items-center space-x-3">
+        <View className="mb-3 flex-row items-center">
           <View className="relative flex-1">
             <FontAwesome
               name="search"
@@ -344,15 +364,15 @@ const EquipmentList: React.FC = () => {
               style={{ position: 'absolute', left: 12, top: 12, zIndex: 1 }}
             />
             <TextInput
-              className="rounded-lg border border-gray-300 py-2 pl-10 pr-4 dark:border-neutral-600 dark:bg-neutral-700 dark:text-white"
+              className="rounded-xl bg-gray-100 py-2.5 pl-10 pr-4 text-sm text-gray-700 dark:bg-neutral-700 dark:text-gray-100"
               placeholder="搜索设备名称、编号..."
-              placeholderTextColor={isDark ? '#9ca3af' : '#9ca3af'}
+              placeholderTextColor="#9ca3af"
               value={searchText}
               onChangeText={setSearchText}
             />
           </View>
           <TouchableOpacity
-            className="rounded-lg bg-blue-600 px-4 py-2"
+            className="ml-2.5 rounded-xl bg-blue-500 p-3"
             activeOpacity={0.7}
           >
             <FontAwesome name="search" size={16} color="white" />
@@ -361,70 +381,61 @@ const EquipmentList: React.FC = () => {
 
         {/* 筛选标签 */}
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          <View className="flex-row space-x-2">
-            <FilterButton
-              label="全部"
-              count={filterCounts.all}
-              active={activeFilter === 'all'}
-              onPress={() => setActiveFilter('all')}
-            />
-            <FilterButton
-              label="运行中"
-              count={filterCounts.running}
-              active={activeFilter === 'running'}
-              onPress={() => setActiveFilter('running')}
-            />
-            <FilterButton
-              label="维修中"
-              count={filterCounts.repairing}
-              active={activeFilter === 'repairing'}
-              onPress={() => setActiveFilter('repairing')}
-            />
-            <FilterButton
-              label="故障"
-              count={filterCounts.fault}
-              active={activeFilter === 'fault'}
-              onPress={() => setActiveFilter('fault')}
+          <FilterButton
+            label="全部"
+            count={filterCounts.all}
+            active={activeFilter === 'all'}
+            onPress={() => setActiveFilter('all')}
+          />
+          <FilterButton
+            label="运行中"
+            count={filterCounts.running}
+            active={activeFilter === 'running'}
+            onPress={() => setActiveFilter('running')}
+            activeColor={STATUS_CONFIG.running.text}
+          />
+          <FilterButton
+            label="维修中"
+            count={filterCounts.repairing}
+            active={activeFilter === 'repairing'}
+            onPress={() => setActiveFilter('repairing')}
+            activeColor={STATUS_CONFIG.repairing.text}
+          />
+          <FilterButton
+            label="故障"
+            count={filterCounts.fault}
+            active={activeFilter === 'fault'}
+            onPress={() => setActiveFilter('fault')}
+            activeColor={STATUS_CONFIG.fault.text}
+          />
+          <TouchableOpacity
+            className="flex-row items-center rounded-full bg-gray-100 px-3.5 py-2 dark:bg-neutral-700"
+            activeOpacity={0.7}
+          >
+            <FontAwesome
+              name="sliders"
+              size={14}
+              color={isDark ? '#d4d4d4' : '#374151'}
             />
-            <TouchableOpacity
-              className="rounded-full bg-gray-100 px-3 py-1.5 dark:bg-neutral-700"
-              activeOpacity={0.7}
-            >
-              <View className="flex-row items-center">
-                <FontAwesome
-                  name="filter"
-                  size={12}
-                  color={isDark ? '#d4d4d4' : '#374151'}
-                />
-                <Text className="ml-1 text-sm text-gray-700 dark:text-gray-200">
-                  筛选
-                </Text>
-              </View>
-            </TouchableOpacity>
-          </View>
+            <Text className="ml-1.5 text-[13px] font-medium text-gray-700 dark:text-gray-300">
+              筛选
+            </Text>
+          </TouchableOpacity>
         </ScrollView>
       </View>
 
-      {/* 设备列表 - 可滚动 */}
-      <ScrollView className="flex-1 p-4" showsVerticalScrollIndicator={false}>
-        {/* 设备列表 */}
-        <View>
-          {filteredEquipment.map((equipment) => (
-            <EquipmentCard
-              key={equipment.id}
-              equipment={equipment}
-              onPress={() => {
-                router.push(`/equipment/${equipment.id}`);
-              }}
-            />
-          ))}
-        </View>
-
-        {/* 底部空间 */}
-        <View className="h-[70px]" />
-      </ScrollView>
+      {/* 设备列表 */}
+      <RefreshListView
+        data={filteredList}
+        renderItem={renderEquipmentCard}
+        keyExtractor={(item) => item.ID}
+        showsVerticalScrollIndicator={false}
+        hasMore={hasMore}
+        ListEmptyComponent={EmptyState}
+        onRefresh={onRefresh}
+        onLoadMore={onLoadMore}
+        contentContainerStyle={{ padding: 12 }}
+      />
     </View>
   );
-};
-
-export default EquipmentList;
+}
diff --git a/src/app/(repair)/index.tsx b/src/app/(repair)/index.tsx
index 3a4679140530328fd1d908e3aacb4013d4c6803c..f6f4aec8d10ddf19a1cf86d1265b1e33a5c1ebb2 100644
--- a/src/app/(repair)/index.tsx
+++ b/src/app/(repair)/index.tsx
@@ -3,10 +3,11 @@ import { useRouter } from 'expo-router';
 import React, { useEffect } from 'react';
 import { ScrollView, TouchableOpacity } from 'react-native';
 
-import { NavHeader, Text, View } from '@/components/ui';
-import { FontAwesome } from '@/components/ui/icons';
+import { NavHeader, Text, View, FontAwesome, IconGroupEnum } from '@/components/ui';
+ 
 import { useAppColorScheme } from '@/lib/hooks';
 import { userInfo as user } from '@/lib/user';
+import { isWeb } from '@/lib'; 
 
 // 数据统计卡片组件
 type StatCardProps = {
@@ -196,9 +197,8 @@ const RepairHome: React.FC = () => {
   const fetchUserInfo = user.use.fetchUserInfo();
   const { isDark } = useAppColorScheme();
   useEffect(() => {
-    if (userInfo == null)
-      fetchUserInfo();
-  }, [userInfo, fetchUserInfo]);
+    fetchUserInfo();
+  }, []);
 
   const router = useRouter();
 
@@ -209,19 +209,32 @@ const RepairHome: React.FC = () => {
         title="首页"
         leftShown={false}
         right={
-          <TouchableOpacity
-            className="relative"
-            onPress={() => router.push('/notification')}
-          >
-            <FontAwesome
-              name="bell"
-              size={20}
-              color={isDark ? '#9ca3af' : '#6b7280'}
-            />
-            <View className="absolute -right-1 -top-1 size-5 items-center justify-center rounded-full bg-red-500">
-              <Text className="text-[10px] font-bold text-white">3</Text>
-            </View>
-          </TouchableOpacity>
+
+          <>
+            <TouchableOpacity
+              className="relative"
+              onPress={() => router.push('/notification')}
+            >
+              <FontAwesome
+                name="bell"
+                size={20}
+                color={isDark ? '#9ca3af' : '#6b7280'}
+              />
+              <View className="absolute -right-1 -top-1 size-5 items-center justify-center rounded-full bg-red-500">
+                <Text className="text-[10px] font-bold text-white">3</Text>
+              </View>
+            </TouchableOpacity>
+            {!isWeb && <TouchableOpacity
+              className="ml-4"
+              onPress={() => {
+                router.push('/qr-scanner')
+
+              }}
+            >
+              <FontAwesome name="scan" size={18} color="#6b7280" group={IconGroupEnum.AntDesign} />
+            </TouchableOpacity>}
+          </>
+
         }
       />
 
diff --git a/src/app/(repair)/repair-order.tsx b/src/app/(repair)/repair-order.tsx
index 56b1efbebc0b690eff335375684c6af0c80d7f1f..3d0fe3cc6608963076597fe9e1f20dabc4b9012c 100644
--- a/src/app/(repair)/repair-order.tsx
+++ b/src/app/(repair)/repair-order.tsx
@@ -1,159 +1,20 @@
-import { LinearGradient } from 'expo-linear-gradient';
 import { useRouter } from 'expo-router';
 import React, { useState } from 'react';
 import { ScrollView, TouchableOpacity } from 'react-native';
 
-import { NavHeader, Text, View } from '@/components/ui';
+import {
+  FilterButton,
+  StatCard,
+  type StatCardData,
+  type WorkOrder,
+  WorkOrderCard,
+  type WorkOrderStatus,
+} from '@/components/repair-order';
+import { NavHeader, View } from '@/components/ui';
 import { FontAwesome } from '@/components/ui/icons';
 import { useAppColorScheme } from '@/lib/hooks';
 
-// 工单状态类型
-type WorkOrderStatus = 'urgent' | 'processing' | 'review' | 'completed' | 'all';
-
-// 统计卡片数据类型
-type StatCardData = {
-  label: string;
-  value: number;
-  gradientColors: [string, string];
-};
-
-// 工单数据类型
-type WorkOrder = {
-  id: string;
-  status: WorkOrderStatus;
-  statusLabel: string;
-  statusColor: string;
-  title: string;
-  equipmentName: string;
-  description: string;
-  assignee: string;
-  timeAgo: string;
-  deadline?: string;
-};
-
-// 统计卡片组件
-type StatCardProps = {
-  label: string;
-  value: number;
-  gradientColors: [string, string];
-};
-
-const StatCard: React.FC<StatCardProps> = ({
-  label,
-  value,
-  gradientColors,
-}) => (
-  <View className="w-[23%]">
-    <LinearGradient
-      colors={gradientColors}
-      start={{ x: 0, y: 0 }}
-      end={{ x: 1, y: 1 }}
-      style={{
-        borderRadius: 12,
-        padding: 12,
-        alignItems: 'center',
-      }}
-    >
-      <Text className="text-2xl font-bold text-white">{value}</Text>
-      <Text className="mt-0.5 text-[10px] text-white opacity-90">{label}</Text>
-    </LinearGradient>
-  </View>
-);
-
-// 筛选按钮组件
-type FilterButtonProps = {
-  label: string;
-  count: number;
-  isActive: boolean;
-  onPress: () => void;
-};
-
-const FilterButton: React.FC<FilterButtonProps> = ({
-  label,
-  count,
-  isActive,
-  onPress,
-}) => (
-  <TouchableOpacity
-    onPress={onPress}
-    activeOpacity={0.7}
-    className={`mr-2 rounded-full px-3 py-1.5 ${isActive ? 'bg-primary-500' : 'bg-gray-100 dark:bg-neutral-700'}`}
-  >
-    <Text
-      className={`whitespace-nowrap text-sm ${isActive ? 'text-white' : 'text-gray-700 dark:text-gray-200'}`}
-    >
-      {label} {count}
-    </Text>
-  </TouchableOpacity>
-);
-
-// 工单卡片组件
-type WorkOrderCardProps = {
-  order: WorkOrder;
-  onPress: () => void;
-};
-
-const WorkOrderCard: React.FC<WorkOrderCardProps> = ({ order, onPress }) => (
-  <TouchableOpacity
-    onPress={onPress}
-    activeOpacity={0.7}
-    className="mb-3 rounded-xl bg-white p-4 shadow-sm dark:bg-neutral-800"
-  >
-    {/* 标题部分 */}
-    <View className="mb-3 flex-1">
-      <View className="mb-2 flex-row items-center">
-        <View
-          className="mr-2 rounded px-2 py-1"
-          style={{ backgroundColor: order.statusColor }}
-        >
-          <Text className="text-xs font-semibold text-white">
-            {order.statusLabel}
-          </Text>
-        </View>
-        <Text
-          className="flex-1 text-base font-semibold text-gray-800 dark:text-gray-100"
-          numberOfLines={1}
-        >
-          {order.title}
-        </Text>
-      </View>
-      <Text className="mb-2 text-sm text-gray-600 dark:text-gray-400">
-        设备：{order.equipmentName}
-      </Text>
-      <Text className="text-sm text-gray-500 dark:text-gray-400">
-        故障描述：{order.description}
-      </Text>
-    </View>
-
-    {/* 底部信息 */}
-    <View className="flex-row items-center justify-between border-t border-gray-100 pt-3 dark:border-neutral-700">
-      <View className="flex-row items-center space-x-4">
-        <View className="flex-row items-center">
-          <FontAwesome name="user" size={12} color="#9ca3af" />
-          <Text className="ml-1 text-xs text-gray-500 dark:text-gray-400">
-            {order.assignee}
-          </Text>
-        </View>
-        <View className="flex-row items-center">
-          <FontAwesome name="clock-o" size={12} color="#9ca3af" />
-          <Text className="ml-1 text-xs text-gray-500 dark:text-gray-400">
-            {order.timeAgo}
-          </Text>
-        </View>
-      </View>
-      {order.deadline && (
-        <Text
-          className="text-sm font-semibold"
-          style={{ color: order.statusColor }}
-        >
-          {order.deadline}
-        </Text>
-      )}
-    </View>
-  </TouchableOpacity>
-);
-
-const RepairList: React.FC = () => {
+const RepairOrder: React.FC = () => {
   const router = useRouter();
   const [activeFilter, setActiveFilter] = useState<WorkOrderStatus>('all');
   const { isDark } = useAppColorScheme();
@@ -256,18 +117,16 @@ const RepairList: React.FC = () => {
         title="维修"
         leftShown={false}
         right={
-          <View className="flex-row items-center">
-            <TouchableOpacity
-              className="mr-3"
-              onPress={() => console.log('分享')}
-            >
-              <FontAwesome
-                name="plus"
-                size={20}
-                color={isDark ? '#9ca3af' : '#6b7280'}
-              />
-            </TouchableOpacity>
-          </View>
+          <TouchableOpacity
+            className="mr-3"
+            onPress={() => router.push('/repair-order/add')}
+          >
+            <FontAwesome
+              name="plus"
+              size={20}
+              color={isDark ? '#9ca3af' : '#6b7280'}
+            />
+          </TouchableOpacity>
         }
       />
 
@@ -342,4 +201,4 @@ const RepairList: React.FC = () => {
   );
 };
 
-export default RepairList;
+export default RepairOrder;
diff --git a/src/app/analytics/index.tsx b/src/app/analytics/index.tsx
index 840aa1fe1dd75a38034f3c65bd6dbc73a31291fa..f4684274f919b3b93bfb9967dc6eb49be3179e0a 100644
--- a/src/app/analytics/index.tsx
+++ b/src/app/analytics/index.tsx
@@ -6,9 +6,9 @@ import {
   OverView,
   Production,
   Quality,
-  Sales
+  Sales,
 } from '@/components/analytics';
-import { NavHeader, ScrollView, View, SafeAreaView } from '@/components/ui';
+import { NavHeader, ScrollView, View } from '@/components/ui';
 
 // 图表图例项组件
 // type ChartLegendItemProps = {
@@ -40,17 +40,8 @@ const Analytics: React.FC = () => {
   const [activeSegment, setActiveSegment] = useState(0);
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-100">
-      <NavHeader
-        title="数据分析"
-      // right={
-      //   <>
-      //     <TouchableOpacity>
-      //       <FontAwesome name="plus" size={12} />
-      //     </TouchableOpacity>
-      //   </>
-      // }
-      />
+    <View className="flex-1 bg-gray-100 dark:bg-gray-900">
+      <NavHeader title="数据分析" />
       <ScrollView className="flex-1 p-4" showsVerticalScrollIndicator={false}>
         {/* 分段控制器 */}
         <View className="mb-4">
@@ -68,7 +59,7 @@ const Analytics: React.FC = () => {
         {activeSegment === 3 && <Inventory />}
         {activeSegment === 4 && <Quality />}
       </ScrollView>
-    </SafeAreaView>
+    </View>
   );
 };
 
diff --git a/src/app/equipment/[id].tsx b/src/app/equipment/[id].tsx
index ef1005ded6a68abc7dac8e3c39af4109895a315b..317e1dd98b75b819450c8b74a409aca234ba9213 100644
--- a/src/app/equipment/[id].tsx
+++ b/src/app/equipment/[id].tsx
@@ -1,228 +1,43 @@
+import { Env } from '@env';
 import { LinearGradient } from 'expo-linear-gradient';
-// import { useLocalSearchParams, useRouter } from 'expo-router';
-import React from 'react';
-import { ScrollView, TouchableOpacity } from 'react-native';
+import { useLocalSearchParams } from 'expo-router';
+import React, { useEffect, useState } from 'react';
+import { Image, ScrollView, TouchableOpacity } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { NavHeader, Text, View } from '@/components/ui';
+import { queryDetail } from '@/api';
+import {
+  DocumentItem,
+  InfoRow,
+  MaintenancePlanItem,
+  RepairRecordItem,
+  StatCard,
+} from '@/components/equipment';
+import { ImageGallery, NavHeader, Text, View } from '@/components/ui';
 import { FontAwesome } from '@/components/ui/icons';
 import { useAppColorScheme } from '@/lib/hooks';
-
-// 信息行组件
-type InfoRowProps = {
-  label: string;
-  value: string;
-  isLast?: boolean;
-};
-
-const InfoRow: React.FC<InfoRowProps> = ({ label, value, isLast = false }) => (
-  <View
-    className={`flex-row items-center justify-between py-2 ${!isLast ? 'border-b border-gray-100 dark:border-neutral-700' : ''}`}
-  >
-    <Text className="text-sm text-gray-500 dark:text-gray-400">{label}</Text>
-    <Text className="text-sm font-semibold text-gray-800 dark:text-gray-100">
-      {value}
-    </Text>
-  </View>
-);
-
-// 统计卡片组件
-type StatCardProps = {
-  value: string;
-  label: string;
-  bgColor: string;
-  textColor: string;
-  isDark: boolean;
-};
-
-const StatCard: React.FC<StatCardProps> = ({
-  value,
-  label,
-  bgColor,
-  textColor,
-  isDark,
-}) => {
-  // 在暗黑模式下使用半透明的深色背景
-  const darkBgColor = isDark ? 'rgba(64, 64, 64, 0.5)' : bgColor;
-
-  return (
-    <View
-      className="rounded-xl p-4 text-center"
-      style={{ backgroundColor: darkBgColor }}
-    >
-      <Text className="mb-1 text-2xl font-bold" style={{ color: textColor }}>
-        {value}
-      </Text>
-      <Text className="text-sm text-gray-600 dark:text-gray-400">{label}</Text>
-    </View>
-  );
-};
-
-// 维修记录项组件
-type RepairRecordItemProps = {
-  title: string;
-  description: string;
-  assignee: string;
-  date: string;
-  status: string;
-  statusColor: string;
-  borderColor: string;
-  bgColor: string;
-  isDark: boolean;
-};
-
-const RepairRecordItem: React.FC<RepairRecordItemProps> = ({
-  title,
-  description,
-  assignee,
-  date,
-  status,
-  statusColor,
-  borderColor,
-  bgColor,
-  isDark,
-}) => {
-  // 在暗黑模式下使用半透明的深色背景
-  const darkBgColor = isDark ? 'rgba(64, 64, 64, 0.3)' : bgColor;
-
-  return (
-    <View
-      className="mb-3 rounded-lg p-3"
-      style={{
-        backgroundColor: darkBgColor,
-        borderLeftWidth: 4,
-        borderLeftColor: borderColor,
-      }}
-    >
-      <View className="mb-2 flex-row items-start justify-between">
-        <View className="flex-1">
-          <Text className="mb-1 text-sm font-semibold text-gray-800 dark:text-gray-100">
-            {title}
-          </Text>
-          <Text className="text-xs text-gray-600 dark:text-gray-400">
-            {description}
-          </Text>
-        </View>
-        <View
-          className="ml-2 rounded px-2 py-1"
-          style={{ backgroundColor: statusColor }}
-        >
-          <Text className="text-xs text-white">{status}</Text>
-        </View>
-      </View>
-      <View className="flex-row items-center justify-between">
-        <View className="flex-row items-center">
-          <FontAwesome name="user" size={10} color="#9ca3af" />
-          <Text className="ml-1 text-xs text-gray-500 dark:text-gray-400">
-            {assignee}
-          </Text>
-        </View>
-        <View className="flex-row items-center">
-          <FontAwesome name="clock-o" size={10} color="#9ca3af" />
-          <Text className="ml-1 text-xs text-gray-500 dark:text-gray-400">
-            {date}
-          </Text>
-        </View>
-      </View>
-    </View>
-  );
-};
-
-// 保养计划项组件
-type MaintenancePlanItemProps = {
-  title: string;
-  date: string;
-  daysLeft: string;
-  borderColor: string;
-  bgColor: string;
-  textColor: string;
-  isDark: boolean;
-};
-
-const MaintenancePlanItem: React.FC<MaintenancePlanItemProps> = ({
-  title,
-  date,
-  daysLeft,
-  borderColor,
-  bgColor,
-  textColor,
-  isDark,
-}) => {
-  // 在暗黑模式下使用半透明的深色背景
-  const darkBgColor = isDark ? 'rgba(64, 64, 64, 0.3)' : bgColor;
-
-  return (
-    <View
-      className="mb-3 flex-row items-center rounded-lg p-3"
-      style={{
-        backgroundColor: darkBgColor,
-        borderLeftWidth: 4,
-        borderLeftColor: borderColor,
-      }}
-    >
-      <View className="flex-1">
-        <Text className="mb-1 text-sm font-semibold text-gray-800 dark:text-gray-100">
-          {title}
-        </Text>
-        <Text className="text-xs text-gray-600 dark:text-gray-400">
-          下次保养时间：{date}
-        </Text>
-      </View>
-      <Text className="text-xs font-semibold" style={{ color: textColor }}>
-        {daysLeft}
-      </Text>
-    </View>
-  );
-};
-
-// 文档项组件
-type DocumentItemProps = {
-  icon: string;
-  iconColor: string;
-  iconBgColor: string;
-  title: string;
-  size: string;
-  date: string;
-  onPress: () => void;
-};
-
-const DocumentItem: React.FC<DocumentItemProps> = ({
-  icon,
-  iconColor,
-  iconBgColor,
-  title,
-  size,
-  date,
-  onPress,
-}) => (
-  <TouchableOpacity
-    className="mb-3 flex-row items-center rounded-lg border border-gray-200 p-3 dark:border-neutral-700"
-    onPress={onPress}
-    activeOpacity={0.7}
-  >
-    <View
-      className="mr-3 size-10 items-center justify-center rounded-lg"
-      style={{ backgroundColor: iconBgColor }}
-    >
-      <FontAwesome name={icon as any} size={18} color={iconColor} />
-    </View>
-    <View className="flex-1">
-      <Text className="text-sm font-semibold text-gray-800 dark:text-gray-100">
-        {title}
-      </Text>
-      <Text className="text-xs text-gray-500 dark:text-gray-400">
-        {size} · {date}
-      </Text>
-    </View>
-    <FontAwesome name="download" size={16} color="#1890ff" />
-  </TouchableOpacity>
-);
+import { formatDateShort, formatFileSize, getFileIconInfo } from '@/lib/utils';
+import { type Equipment } from '@/types';
 
 const EquipmentDetail: React.FC = () => {
   // const router = useRouter();
   // const { id } = useLocalSearchParams();
   const { isDark } = useAppColorScheme();
   const insets = useSafeAreaInsets();
+  const local = useLocalSearchParams<{ id: string }>();
+  const [data, setData] = useState<Equipment>({} as Equipment);
+
+  const loadData = async () => {
+    const { Success, Data } = await queryDetail<Equipment>(
+      '/api/EmEquipment',
+      local.id
+    );
+    if (Success) setData(Data);
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
 
   // 快捷操作按钮数据
   const quickActions = [
@@ -249,34 +64,6 @@ const EquipmentDetail: React.FC = () => {
     },
   ];
 
-  // 维修统计数据
-  const repairStats = [
-    {
-      value: '12次',
-      label: '累计维修',
-      bgColor: '#eff6ff',
-      textColor: '#1890ff',
-    },
-    {
-      value: '8次',
-      label: '累计保养',
-      bgColor: '#f0fdf4',
-      textColor: '#52c41a',
-    },
-    {
-      value: '2次',
-      label: '本月维修',
-      bgColor: '#fff7ed',
-      textColor: '#faad14',
-    },
-    {
-      value: '¥8,500',
-      label: '维修成本',
-      bgColor: '#faf5ff',
-      textColor: '#a855f7',
-    },
-  ];
-
   // 维修记录数据
   const repairRecords = [
     {
@@ -339,118 +126,107 @@ const EquipmentDetail: React.FC = () => {
     },
   ];
 
-  // 文档数据
-  const documents = [
-    {
-      icon: 'file-pdf-o',
-      iconColor: '#ef4444',
-      iconBgColor: '#fef2f2',
-      title: '设备说明书.pdf',
-      size: '2.5 MB',
-      date: '2023-05-15',
-    },
-    {
-      icon: 'file-word-o',
-      iconColor: '#3b82f6',
-      iconBgColor: '#eff6ff',
-      title: '维护手册.docx',
-      size: '1.8 MB',
-      date: '2023-05-15',
-    },
-    {
-      icon: 'file-excel-o',
-      iconColor: '#22c55e',
-      iconBgColor: '#f0fdf4',
-      title: '备件清单.xlsx',
-      size: '0.3 MB',
-      date: '2023-05-15',
-    },
-  ];
-
   return (
     <View className="flex-1 bg-gray-50 dark:bg-neutral-900">
       {/* 顶部导航 */}
       <NavHeader
         title="设备详情"
-      // onBack={() => router.back()}
-      // right={
-      //   <View className="flex-row items-center">
-      //     <TouchableOpacity
-      //       className="mr-3"
-      //       onPress={() => console.log('分享')}
-      //     >
-      //       <FontAwesome
-      //         name="share-alt"
-      //         size={20}
-      //         color={isDark ? '#9ca3af' : '#6b7280'}
-      //       />
-      //     </TouchableOpacity>
-      //     <TouchableOpacity onPress={() => console.log('更多')}>
-      //       <FontAwesome
-      //         name="ellipsis-v"
-      //         size={20}
-      //         color={isDark ? '#9ca3af' : '#6b7280'}
-      //       />
-      //     </TouchableOpacity>
-      //   </View>
-      // }
+        // onBack={() => router.back()}
+        right={
+          <View className="flex-row items-center">
+            <TouchableOpacity
+              className="mr-3"
+              onPress={() => console.log('分享')}
+            >
+              <FontAwesome
+                name="share-alt"
+                size={20}
+                color={isDark ? '#9ca3af' : '#6b7280'}
+              />
+            </TouchableOpacity>
+            <TouchableOpacity onPress={() => console.log('更多')}>
+              <FontAwesome
+                name="ellipsis-v"
+                size={20}
+                color={isDark ? '#9ca3af' : '#6b7280'}
+              />
+            </TouchableOpacity>
+          </View>
+        }
       />
 
       <ScrollView className="flex-1 p-4" showsVerticalScrollIndicator={false}>
         {/* 设备基本信息卡片 */}
-        <LinearGradient
-          colors={['#3b82f6', '#2563eb']}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 1, y: 1 }}
-          style={{
-            borderRadius: 16,
-            padding: 24,
-            marginBottom: 16,
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 2 },
-            shadowOpacity: 0.1,
-            shadowRadius: 8,
-            elevation: 3,
-          }}
-        >
-          <View className="mb-4 flex-row items-start justify-between">
-            <View className="flex-1 flex-row items-start">
-              <View className="mr-4 size-16 items-center justify-center rounded-xl bg-white/20">
-                <FontAwesome name="server" size={28} color="white" />
+        {data && (
+          <LinearGradient
+            colors={['#3b82f6', '#2563eb']}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={{
+              borderRadius: 16,
+              padding: 24,
+              marginBottom: 16,
+              shadowColor: '#000',
+              shadowOffset: { width: 0, height: 2 },
+              shadowOpacity: 0.1,
+              shadowRadius: 8,
+              elevation: 3,
+            }}
+          >
+            <View className="mb-4 flex-row items-start justify-between">
+              <View className="flex-1 flex-row items-start">
+                {/*  */}
+                {data.ImageId ? (
+                  <Image
+                    source={{
+                      uri: `${Env.API_URL}/api/File/Img/${data.ImageId}`,
+                    }}
+                    className="mr-4 size-16 items-center justify-center rounded-xl bg-white/20"
+                    resizeMode="cover"
+                  />
+                ) : (
+                  <View className="mr-4 size-16 items-center justify-center rounded-xl bg-white/20">
+                    <FontAwesome name="server" size={28} color="white" />
+                  </View>
+                )}
+                <View className="flex-1">
+                  <Text className="mb-2 text-2xl font-bold text-white">
+                    {data.MachineName}
+                  </Text>
+                  <Text className="mb-1 text-sm text-blue-100">
+                    {data.MachineNo}
+                  </Text>
+                  <Text className="text-sm text-blue-100">
+                    位置：{data.Location ?? '未设置'}
+                  </Text>
+                </View>
               </View>
-              <View className="flex-1">
-                <Text className="mb-2 text-2xl font-bold text-white">
-                  数控机床 CNC-01
-                </Text>
-                <Text className="mb-1 text-sm text-blue-100">
-                  设备编号：EQ-2024-001
+              <View className="ml-2 flex-row items-center rounded-full bg-green-500 px-3 py-1.5">
+                <FontAwesome name="circle" size={6} color="white" />
+                <Text className="ml-1 text-sm font-semibold text-white">
+                  运行中
                 </Text>
-                <Text className="text-sm text-blue-100">位置：A车间-1号线</Text>
               </View>
             </View>
-            <View className="ml-2 flex-row items-center rounded-full bg-green-500 px-3 py-1.5">
-              <FontAwesome name="circle" size={6} color="white" />
-              <Text className="ml-1 text-sm font-semibold text-white">
-                运行中
-              </Text>
-            </View>
-          </View>
 
-          <View className="mt-6 flex-row">
-            <View className="flex-1 items-center">
-              <Text className="mb-1 text-3xl font-bold text-white">98%</Text>
-              <Text className="text-sm text-blue-100">健康度</Text>
-            </View>
-            <View className="flex-1 items-center border-x border-white/20">
-              <Text className="mb-1 text-3xl font-bold text-white">2,845</Text>
-              <Text className="text-sm text-blue-100">运行时长(h)</Text>
-            </View>
-            <View className="flex-1 items-center">
-              <Text className="mb-1 text-3xl font-bold text-white">5天</Text>
-              <Text className="text-sm text-blue-100">距下次保养</Text>
+            <View className="mt-6 flex-row">
+              <View className="flex-1 items-center">
+                <Text className="mb-1 text-3xl font-bold text-white">98%</Text>
+                <Text className="text-sm text-blue-100">健康度</Text>
+              </View>
+              <View className="flex-1 items-center border-x border-white/20">
+                <Text className="mb-1 text-3xl font-bold text-white">
+                  2,845
+                </Text>
+                <Text className="text-sm text-blue-100">运行时长(h)</Text>
+              </View>
+              <View className="flex-1 items-center">
+                <Text className="mb-1 text-3xl font-bold text-white">5天</Text>
+                <Text className="text-sm text-blue-100">距下次保养</Text>
+              </View>
             </View>
-          </View>
-        </LinearGradient>
+          </LinearGradient>
+        )}
 
         {/* 快捷操作 */}
         <View className="mb-4 flex-row">
@@ -479,36 +255,55 @@ const EquipmentDetail: React.FC = () => {
           ))}
         </View>
 
-        {/* 设备信息 */}
-        <View className="mb-4 rounded-2xl bg-white p-5 shadow-sm dark:bg-neutral-800">
-          <View className="mb-4 flex-row items-center">
-            <FontAwesome name="info-circle" size={18} color="#1890ff" />
-            <Text className="ml-2 text-lg font-semibold text-gray-800 dark:text-gray-100">
-              设备信息
-            </Text>
-          </View>
-          <View>
-            <InfoRow label="设备名称" value="数控机床 CNC-01" />
-            <InfoRow label="设备编号" value="EQ-2024-001" />
-            <InfoRow label="设备类型" value="加工设备" />
-            <InfoRow label="品牌型号" value="发那科 FANUC-18i" />
-            <InfoRow label="所属部门" value="生产部" />
-            <InfoRow label="安装位置" value="A车间-1号线" />
-            <InfoRow label="启用日期" value="2023-05-15" />
-            <InfoRow label="责任人" value="张三 (13800138000)" isLast />
+        {/* 设备图片 */}
+        {data?.ImageIds && data.ImageIds.length > 0 && (
+          <View className="mb-4 rounded-2xl bg-white p-5 shadow-sm dark:bg-neutral-800">
+            <View className="mb-4 flex-row items-center justify-between">
+              <View className="flex-row items-center">
+                <FontAwesome name="image" size={18} color="#1890ff" />
+                <Text className="ml-2 text-lg font-semibold text-gray-800 dark:text-gray-100">
+                  设备图片
+                </Text>
+              </View>
+              <Text className="text-sm text-gray-500 dark:text-gray-400">
+                共 {data.ImageIds.length} 张
+              </Text>
+            </View>
+            <ImageGallery imageIds={data.ImageIds} />
           </View>
-        </View>
+        )}
 
+        {/* 设备信息 */}
+        {data && (
+          <View className="mb-4 rounded-2xl bg-white p-5 shadow-sm dark:bg-neutral-800">
+            <View className="mb-4 flex-row items-center">
+              <FontAwesome name="info-circle" size={18} color="#1890ff" />
+              <Text className="ml-2 text-lg font-semibold text-gray-800 dark:text-gray-100">
+                设备信息
+              </Text>
+            </View>
+            <View>
+              <InfoRow label="设备名称" value={data.MachineName} />
+              <InfoRow label="设备编号" value={data.MachineNo} />
+              <InfoRow label="设备类型" value={data.MachineType} />
+              <InfoRow label="品牌型号" value={data.BrandModel} />
+              <InfoRow label="所属部门" value={data.DeptName} />
+              <InfoRow label="安装位置" value={data.Location} />
+              <InfoRow label="启用日期" value={data.StartDate1} />
+              <InfoRow label="责任人" value={data.UseManagerName} isLast />
+            </View>
+          </View>
+        )}
         {/* 维修统计 */}
         <View className="mb-4 rounded-2xl bg-white p-5 shadow-sm dark:bg-neutral-800">
           <View className="mb-4 flex-row items-center">
             <FontAwesome name="bar-chart-o" size={18} color="#1890ff" />
             <Text className="ml-2 text-lg font-semibold text-gray-800 dark:text-gray-100">
-              维修统计1
+              维修统计
             </Text>
           </View>
           <View className="flex-row flex-wrap">
-            {repairStats.map((stat, index) => (
+            {data.RepairStats?.map((stat, index) => (
               <View
                 key={index}
                 className="w-[48%]"
@@ -576,23 +371,37 @@ const EquipmentDetail: React.FC = () => {
         </View>
 
         {/* 设备文档 */}
-        <View className="mb-4 rounded-2xl bg-white p-5 shadow-sm dark:bg-neutral-800">
-          <View className="mb-4 flex-row items-center">
-            <FontAwesome name="folder" size={18} color="#1890ff" />
-            <Text className="ml-2 text-lg font-semibold text-gray-800 dark:text-gray-100">
-              设备文档
-            </Text>
-          </View>
-          <View>
-            {documents.map((doc, index) => (
-              <DocumentItem
-                key={index}
-                {...doc}
-                onPress={() => console.log('下载', doc.title)}
-              />
-            ))}
+        {data?.Attachments && data.Attachments.length > 0 && (
+          <View className="mb-4 rounded-2xl bg-white p-5 shadow-sm dark:bg-neutral-800">
+            <View className="mb-4 flex-row items-center">
+              <FontAwesome name="folder" size={18} color="#1890ff" />
+              <Text className="ml-2 text-lg font-semibold text-gray-800 dark:text-gray-100">
+                设备文档
+              </Text>
+            </View>
+            <View>
+              {data.Attachments.map((attachment) => {
+                const iconInfo = getFileIconInfo(attachment.FileExt);
+                return (
+                  <DocumentItem
+                    key={attachment.ID}
+                    {...iconInfo}
+                    title={
+                      attachment.OriginalFileName ||
+                      attachment.FileName ||
+                      '未知文件'
+                    }
+                    size={formatFileSize(attachment.Length)}
+                    date={formatDateShort(attachment.CreatedTime)}
+                    onPress={() =>
+                      console.log('下载', attachment.OriginalFileName)
+                    }
+                  />
+                );
+              })}
+            </View>
           </View>
-        </View>
+        )}
 
         {/* 底部空间 */}
         <View className="h-[100px]" />
diff --git a/src/app/equipment/add.tsx b/src/app/equipment/add.tsx
index ee9f30c447c9d45c6fda73511de9806fc912f0d4..122aef1fcaf2cd14fb79899227770137f53caea9 100644
--- a/src/app/equipment/add.tsx
+++ b/src/app/equipment/add.tsx
@@ -133,7 +133,7 @@ const ImageUpload: React.FC = () => {
 
 export default function AddEquipment() {
   const router = useRouter();
-  const { isDark } = useAppColorScheme();
+  // const { isDark } = useAppColorScheme();
   const [equipmentType, setEquipmentType] = useState('');
   const [department, setDepartment] = useState('');
   const insets = useSafeAreaInsets();
diff --git a/src/app/index.tsx b/src/app/index.tsx
index 6f1333610e1575e3f803db3e67658add41fb6112..69aab80f251036ca4f49c352bf008ef76f9118fe 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -1,7 +1,6 @@
 import { Redirect } from 'expo-router';
-import {
-  get as getUserInfoData,
-} from '@/lib/user/utils';
+
+import { get as getUserInfoData } from '@/lib/user/utils';
 
 export default function Index() {
   const userInfo = getUserInfoData();
diff --git a/src/app/inventory/[id].tsx b/src/app/inventory/[id].tsx
index 9f9de25cbf508e99b9bab8d4bb8aa41ad833cc96..d85ad30da2e4312b50f15445f5047988882607d4 100644
--- a/src/app/inventory/[id].tsx
+++ b/src/app/inventory/[id].tsx
@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   Dimensions,
   // Dimensions,
   TouchableOpacity,
+  useColorScheme,
 } from 'react-native';
 import { LineChart } from 'react-native-chart-kit';
 
@@ -145,31 +146,42 @@ const InventoryDetail: React.FC = () => {
     legend: ['库存量', '安全库存'],
   };
 
-  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 colorScheme = useColorScheme();
+  const isDark = colorScheme === 'dark';
+
+  const chartConfig = useMemo(() => {
+    return {
+      backgroundGradientFrom: isDark ? '#0b1220' : '#ffffff',
+      backgroundGradientTo: isDark ? '#0b1220' : '#ffffff',
+      decimalPlaces: 0,
+      color: () =>
+        isDark ? `rgba(96, 165, 250, 0.8)` : `rgba(59, 130, 246, 0.6)`,
+      labelColor: () =>
+        isDark ? `rgba(156, 163, 175, 1)` : `rgba(107, 114, 128, 1)`,
+      style: {
+        borderRadius: 16,
+      },
+      propsForDots: {
+        r: '4',
+        strokeWidth: '2',
+        stroke: isDark ? '#60a5fa' : '#3b82f6',
+      },
+    };
+  }, [isDark]);
 
   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' : ''}`}
+      className={`flex-row py-3 ${!isLast ? 'border-b border-gray-100 dark:border-gray-800' : ''}`}
     >
-      <Text className="w-1/3 text-sm text-gray-500">{label}</Text>
-      <Text className="w-2/3 text-sm">{value}</Text>
+      <Text className="w-1/3 text-sm text-gray-500 dark:text-gray-400">
+        {label}
+      </Text>
+      <Text className="w-2/3 text-sm text-gray-900 dark:text-gray-100">
+        {value}
+      </Text>
     </View>
   );
 
@@ -217,21 +229,25 @@ const InventoryDetail: React.FC = () => {
             {records.map((record, index) => (
               <View
                 key={index}
-                className={`py-3 ${index < records.length - 1 ? 'border-b border-gray-100' : ''}`}
+                className={`py-3 ${index < records.length - 1 ? 'border-b border-gray-100 dark:border-gray-700' : ''}`}
               >
                 <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>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    {record.type}
+                  </Text>
+                  <Text className="text-sm text-gray-500 dark:text-gray-400">
+                    {record.date}
+                  </Text>
                 </View>
                 <Text
-                  className={`mb-1 text-sm ${record.isInbound ? 'text-green-600' : 'text-red-600'}`}
+                  className={`mb-1 text-sm ${record.isInbound ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}
                 >
                   数量: {record.quantity}
                 </Text>
-                <Text className="text-sm text-gray-600">
+                <Text className="text-sm text-gray-600 dark:text-gray-300">
                   操作人: {record.operator}
                 </Text>
-                <Text className="text-sm text-gray-600">
+                <Text className="text-sm text-gray-600 dark:text-gray-300">
                   关联单据: {record.document}
                 </Text>
               </View>
@@ -241,7 +257,9 @@ const InventoryDetail: React.FC = () => {
       case 'usage':
         return (
           <View>
-            <Text className="text-md mb-3 font-semibold">近期使用产品</Text>
+            <Text className="text-md mb-3 font-semibold text-gray-900 dark:text-gray-100">
+              近期使用产品
+            </Text>
             <View className="space-y-3">
               {usageProducts.map((product, index) => (
                 <View
@@ -255,30 +273,48 @@ const InventoryDetail: React.FC = () => {
                       className="mr-2 text-blue-500"
                     />
                     <View>
-                      <Text className="font-medium">{product.name}</Text>
-                      <Text className="text-xs text-gray-500">
+                      <Text className="font-medium text-gray-900 dark:text-gray-100">
+                        {product.name}
+                      </Text>
+                      <Text className="text-xs text-gray-500 dark:text-gray-400">
                         {product.quantityPerUnit}
                       </Text>
                     </View>
                   </View>
-                  <Text className="text-sm">{product.monthlyConsumption}</Text>
+                  <Text className="text-sm text-gray-900 dark:text-gray-100">
+                    {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">
+            <Text className="text-md mb-3 mt-4 font-semibold text-gray-900 dark:text-gray-100">
+              消耗预测
+            </Text>
+            <View className="rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
               <View className="mb-2 flex-row items-center justify-between">
-                <Text className="text-sm">预计月消耗</Text>
-                <Text className="font-medium">约4,500个</Text>
+                <Text className="text-sm text-gray-600 dark:text-gray-300">
+                  预计月消耗
+                </Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  约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>
+                <Text className="text-sm text-gray-600 dark:text-gray-300">
+                  当前库存可用
+                </Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  约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>
+                <Text className="text-sm text-gray-600 dark:text-gray-300">
+                  建议补货时间
+                </Text>
+                <Text className="font-medium text-orange-600 dark:text-orange-400">
+                  2周内
+                </Text>
               </View>
             </View>
           </View>
@@ -289,7 +325,7 @@ const InventoryDetail: React.FC = () => {
   };
 
   return (
-    <View className="flex-1 bg-gray-50">
+    <View className="flex-1 bg-gray-50 dark:bg-gray-900">
       <NavHeader
         title="库存详情"
         right={
@@ -306,24 +342,26 @@ const InventoryDetail: React.FC = () => {
         contentContainerClassName="px-4 py-4 pb-20"
       >
         {/* 物料基本信息卡片 */}
-        <View className="mb-4 rounded-lg bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-lg bg-white p-4 shadow-sm dark:bg-gray-800">
           <View className="mb-4 flex-row items-center">
-            <View className="mr-4 flex size-20 items-center justify-center rounded-lg bg-gray-200">
+            <View className="mr-4 flex size-20 items-center justify-center rounded-lg bg-gray-200 dark:bg-gray-700">
               <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">
+              <Text className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+                {materialData.name}
+              </Text>
+              <Text className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 编号: {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">
+                <View className="mr-2 rounded-full bg-green-100 px-2 py-1 dark:bg-green-900/30">
+                  <Text className="text-xs font-medium text-green-800 dark:text-green-300">
                     {materialData.category}
                   </Text>
                 </View>
-                <View className="rounded-full bg-blue-100 px-2 py-1">
-                  <Text className="text-xs font-medium text-blue-800">
+                <View className="rounded-full bg-blue-100 px-2 py-1 dark:bg-blue-900/30">
+                  <Text className="text-xs font-medium text-blue-800 dark:text-blue-300">
                     {materialData.tag}
                   </Text>
                 </View>
@@ -332,10 +370,12 @@ const InventoryDetail: React.FC = () => {
           </View>
 
           {/* 库存状态 */}
-          <View className="mb-4 flex-row items-center justify-between rounded-lg bg-blue-50 p-3">
+          <View className="mb-4 flex-row items-center justify-between rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
             <View>
-              <Text className="text-sm text-gray-600">当前库存</Text>
-              <Text className="mt-1 text-xl font-bold text-blue-600">
+              <Text className="text-sm text-gray-600 dark:text-gray-300">
+                当前库存
+              </Text>
+              <Text className="mt-1 text-xl font-bold text-blue-600 dark:text-blue-400">
                 {materialData.currentStock.toLocaleString()}
                 <Text className="ml-1 text-sm font-normal">
                   {materialData.unit}
@@ -343,8 +383,10 @@ const InventoryDetail: React.FC = () => {
               </Text>
             </View>
             <View>
-              <Text className="text-sm text-gray-600">安全库存</Text>
-              <Text className="mt-1 text-lg font-medium text-gray-700">
+              <Text className="text-sm text-gray-600 dark:text-gray-300">
+                安全库存
+              </Text>
+              <Text className="mt-1 text-lg font-medium text-gray-700 dark:text-gray-200">
                 {materialData.safetyStock.toLocaleString()}
                 <Text className="ml-1 text-sm font-normal">
                   {materialData.unit}
@@ -352,7 +394,9 @@ const InventoryDetail: React.FC = () => {
               </Text>
             </View>
             <View>
-              <Text className="text-sm text-gray-600">状态</Text>
+              <Text className="text-sm text-gray-600 dark:text-gray-300">
+                状态
+              </Text>
               <View className="mt-1 flex-row items-center">
                 <View
                   className={`mr-1 size-3 rounded-full ${statusColor.bg}`}
@@ -406,8 +450,10 @@ const InventoryDetail: React.FC = () => {
         </View>
 
         {/* 库存趋势图 */}
-        <View className="mb-4 rounded-lg bg-white p-4 shadow-sm">
-          <Text className="mb-3 text-lg font-semibold">库存趋势</Text>
+        <View className="mb-4 rounded-lg bg-white p-4 shadow-sm dark:bg-gray-800">
+          <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+            库存趋势
+          </Text>
           <LineChart
             data={stockData}
             width={screenWidth}
@@ -425,20 +471,18 @@ const InventoryDetail: React.FC = () => {
             withDots={true}
             withShadow={false}
             segments={4}
-
-            //
           />
         </View>
 
         {/* 详细信息选项卡 */}
-        <View className="mb-4 overflow-hidden rounded-lg bg-white shadow-sm">
-          <View className="flex-row border-b border-gray-100">
+        <View className="mb-4 overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800">
+          <View className="flex-row border-b border-gray-100 dark:border-gray-800">
             <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'}`}
+                className={`text-sm font-medium ${activeTab === 'info' ? 'text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'}`}
               >
                 基本信息
               </Text>
@@ -448,7 +492,7 @@ const InventoryDetail: React.FC = () => {
               onPress={() => setActiveTab('records')}
             >
               <Text
-                className={`text-sm font-medium ${activeTab === 'records' ? 'text-blue-600' : 'text-gray-600'}`}
+                className={`text-sm font-medium ${activeTab === 'records' ? 'text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'}`}
               >
                 出入库记录
               </Text>
@@ -458,7 +502,7 @@ const InventoryDetail: React.FC = () => {
               onPress={() => setActiveTab('usage')}
             >
               <Text
-                className={`text-sm font-medium ${activeTab === 'usage' ? 'text-blue-600' : 'text-gray-600'}`}
+                className={`text-sm font-medium ${activeTab === 'usage' ? 'text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'}`}
               >
                 使用情况
               </Text>
@@ -469,11 +513,15 @@ const InventoryDetail: React.FC = () => {
         </View>
 
         {/* 相关物料 */}
-        <View className="mb-4 rounded-lg bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-lg bg-white p-4 shadow-sm dark:bg-gray-800">
           <View className="mb-3 flex-row items-center justify-between">
-            <Text className="text-lg font-semibold">相关物料</Text>
+            <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              相关物料
+            </Text>
             <TouchableOpacity>
-              <Text className="text-sm text-blue-600">查看全部</Text>
+              <Text className="text-sm text-blue-600 dark:text-blue-400">
+                查看全部
+              </Text>
             </TouchableOpacity>
           </View>
 
@@ -489,24 +537,26 @@ const InventoryDetail: React.FC = () => {
               return (
                 <View
                   key={index}
-                  className="flex-row items-center justify-between"
+                  className={`flex-row items-center justify-between py-3 ${index < relatedMaterials.length - 1 ? 'border-b border-gray-100 dark:border-gray-700' : ''}`}
                 >
                   <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">
+                      <Text className="font-medium text-gray-900 dark:text-gray-100">
+                        {material.name}
+                      </Text>
+                      <Text className="text-xs text-gray-500 dark:text-gray-400">
                         编号: {material.code}
                       </Text>
                     </View>
                   </View>
                   <View className="items-end">
-                    <Text className="font-medium">
+                    <Text className="font-medium text-gray-900 dark:text-gray-100">
                       {material.quantity.toLocaleString()}
                     </Text>
-                    <Text className="text-xs text-gray-500">
+                    <Text className="text-xs text-gray-500 dark:text-gray-400">
                       安全库存: {material.safetyStock.toLocaleString()}
                     </Text>
                   </View>
diff --git a/src/app/login.tsx b/src/app/login.tsx
index 2830fb70c6bfe8bb62e0ad72895ce09183f4eba3..760eb4d296de1ef2b27041cbab9a26dbd80f22ce 100644
--- a/src/app/login.tsx
+++ b/src/app/login.tsx
@@ -32,8 +32,7 @@ export default function Login() {
       });
       setUserInfo(Data.UserInfo);
 
-      router.replace("/");
-
+      router.replace('/');
     } else error(Message!);
   };
   return (
diff --git a/src/app/material/[id].tsx b/src/app/material/[id].tsx
index 46d5358cdf49fa48f00b0809b701be4db22f8cc9..fddc70d05dd72ff942432995580eab89a15f4f25 100644
--- a/src/app/material/[id].tsx
+++ b/src/app/material/[id].tsx
@@ -180,14 +180,14 @@ const MaterialDetail = () => {
 
   // 样式常量
   const styles = {
-    tab: 'text-sm font-medium text-gray-600',
-    tabActive: 'text-sm font-medium text-blue-600',
+    tab: 'text-sm font-medium text-gray-600 dark:text-gray-400',
+    tabActive: 'text-sm font-medium text-blue-600 dark:text-blue-400',
     tabTouchable: 'flex-1 items-center px-4 py-2',
     tabTouchableActive:
       'flex-1 items-center border-b-2 border-blue-600 px-4 py-2',
     fastOption: 'items-center justify-center rounded-lg py-2',
     fastOptionWithMargin: 'mr-2 items-center justify-center rounded-lg py-2',
-    listItemBorder: 'border-b border-gray-100 py-3',
+    listItemBorder: 'border-b border-gray-100 py-3 dark:border-gray-700',
     listItemNoBorder: 'py-3',
   };
 
@@ -242,7 +242,7 @@ const MaterialDetail = () => {
   };
 
   return (
-    <View className="flex-1 " style={{ backgroundColor: '#f5f5f5' }}>
+    <View className="flex-1 bg-gray-100 dark:bg-gray-900">
       <NavHeader
         title="物料详情"
         right={
@@ -261,9 +261,9 @@ const MaterialDetail = () => {
         contentContainerStyle={{ padding: 16, paddingBottom: 80 }}
       >
         {/* 物料基本信息卡片 */}
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
           <View className="mb-4 flex-row items-center">
-            <View className="mr-4 size-20 items-center justify-center rounded-lg bg-gray-200">
+            <View className="mr-4 size-20 items-center justify-center rounded-lg bg-gray-200 dark:bg-gray-700">
               <FontAwesome
                 name="cube"
                 size={30}
@@ -272,18 +272,20 @@ const MaterialDetail = () => {
               />
             </View>
             <View>
-              <Text className="text-xl font-semibold">{materialData.name}</Text>
-              <Text className="mt-1 text-sm text-gray-500">
+              <Text className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+                {materialData.name}
+              </Text>
+              <Text className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 编号: {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 text-green-800">
+                <View className="mr-2 rounded-full bg-green-100 px-2 py-1 dark:bg-green-900/30">
+                  <Text className="text-xs text-green-800 dark:text-green-300">
                     {materialData.category}
                   </Text>
                 </View>
-                <View className="rounded-full bg-blue-100 px-2 py-1">
-                  <Text className="text-xs text-blue-800">
+                <View className="rounded-full bg-blue-100 px-2 py-1 dark:bg-blue-900/30">
+                  <Text className="text-xs text-blue-800 dark:text-blue-300">
                     {materialData.tag}
                   </Text>
                 </View>
@@ -292,37 +294,43 @@ const MaterialDetail = () => {
           </View>
 
           {/* 库存状态 */}
-          <View className="mb-4 flex-row items-center justify-between rounded-lg bg-blue-50 p-3">
+          <View className="mb-4 flex-row items-center justify-between rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
             <View>
-              <Text className="text-sm text-gray-600">当前库存</Text>
+              <Text className="text-sm text-gray-600 dark:text-gray-300">
+                当前库存
+              </Text>
               <View className="mt-1 flex-row items-end">
-                <Text className="text-xl font-bold text-blue-600">
+                <Text className="text-xl font-bold text-blue-600 dark:text-blue-400">
                   {materialData.currentStock}
                 </Text>
-                <Text className="ml-1 text-sm font-normal text-blue-600">
+                <Text className="ml-1 text-sm font-normal text-blue-600 dark:text-blue-400">
                   {materialData.unit}
                 </Text>
               </View>
             </View>
             <View>
-              <Text className="text-sm text-gray-600">安全库存</Text>
+              <Text className="text-sm text-gray-600 dark:text-gray-300">
+                安全库存
+              </Text>
               <View className="mt-1 flex-row items-end">
-                <Text className="text-lg font-medium text-gray-700">
+                <Text className="text-lg font-medium text-gray-700 dark:text-gray-200">
                   {materialData.safetyStock}
                 </Text>
-                <Text className="ml-1 text-sm font-normal text-gray-700">
+                <Text className="ml-1 text-sm font-normal text-gray-700 dark:text-gray-200">
                   {materialData.unit}
                 </Text>
               </View>
             </View>
             <View>
-              <Text className="text-sm text-gray-600">状态</Text>
+              <Text className="text-sm text-gray-600 dark:text-gray-300">
+                状态
+              </Text>
               <View className="mt-1 flex-row items-center">
                 <View
                   className="mr-1 size-3 rounded-full"
                   style={{ backgroundColor: '#22c55e' }}
                 />
-                <Text className="font-medium text-green-600">
+                <Text className="font-medium text-green-600 dark:text-green-400">
                   {materialData.status}
                 </Text>
               </View>
@@ -359,8 +367,8 @@ const MaterialDetail = () => {
         </View>
 
         {/* 详细信息选项卡 */}
-        <View className="mb-4 overflow-hidden rounded-lg bg-white">
-          <View className="flex-row border-b border-gray-200">
+        <View className="mb-4 overflow-hidden rounded-lg bg-white dark:bg-gray-800">
+          <View className="flex-row border-b border-gray-200 dark:border-gray-700">
             <TabButton
               label="基本信息"
               isActive={activeTab === 'info'}
@@ -385,8 +393,10 @@ const MaterialDetail = () => {
         </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-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+          <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+            相关物料
+          </Text>
 
           {relatedMaterials.map((material, index) => (
             <RelatedMaterialItem
@@ -411,11 +421,17 @@ const DetailRow = ({
 }: DetailRowProps) => (
   <View
     className={
-      !isLast ? 'flex-row border-b border-gray-100 py-3' : 'flex-row py-3'
+      !isLast
+        ? 'flex-row border-b border-gray-100 py-3 dark:border-gray-700'
+        : 'flex-row py-3'
     }
   >
-    <Text className="w-3/10 text-sm text-gray-500">{label}</Text>
-    <Text className="w-7/10 text-sm">{value}</Text>
+    <Text className="w-3/10 text-sm text-gray-500 dark:text-gray-400">
+      {label}
+    </Text>
+    <Text className="w-7/10 text-sm text-gray-900 dark:text-gray-100">
+      {value}
+    </Text>
   </View>
 );
 
@@ -428,11 +444,17 @@ interface RecordListItemProps {
 }
 
 const RecordListItem = ({ record, isLast }: RecordListItemProps) => (
-  <View className={!isLast ? 'border-b border-gray-100 py-3' : 'py-3'}>
+  <View
+    className={
+      !isLast ? 'border-b border-gray-100 py-3 dark:border-gray-700' : 'py-3'
+    }
+  >
     <View className="flex-row items-center justify-between">
       <View>
-        <Text className="font-medium">{record.type}</Text>
-        <Text className="mt-1 text-xs text-gray-500">
+        <Text className="font-medium text-gray-900 dark:text-gray-100">
+          {record.type}
+        </Text>
+        <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
           单号: {record.orderNumber}
         </Text>
       </View>
@@ -440,13 +462,15 @@ const RecordListItem = ({ record, isLast }: RecordListItemProps) => (
         <Text
           className={
             record.isInbound
-              ? 'text-sm font-medium text-green-600'
-              : 'text-sm font-medium text-red-600'
+              ? 'text-sm font-medium text-green-600 dark:text-green-400'
+              : 'text-sm font-medium text-red-600 dark:text-red-400'
           }
         >
           {record.quantity}
         </Text>
-        <Text className="mt-1 text-xs text-gray-500">{record.date}</Text>
+        <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+          {record.date}
+        </Text>
       </View>
     </View>
   </View>
@@ -482,7 +506,11 @@ const DocumentListItem = ({ document, isLast }: DocumentListItemProps) => {
   const iconColor = getDocIconColor(document.icon);
 
   return (
-    <View className={!isLast ? 'border-b border-gray-100 py-3' : 'py-3'}>
+    <View
+      className={
+        !isLast ? 'border-b border-gray-100 py-3 dark:border-gray-700' : 'py-3'
+      }
+    >
       <View className="flex-row items-center">
         <FontAwesome
           name={document.icon}
@@ -492,8 +520,10 @@ const DocumentListItem = ({ document, isLast }: DocumentListItemProps) => {
           group={GroupEnum.FontAwesome5}
         />
         <View>
-          <Text className="font-medium">{document.name}</Text>
-          <Text className="mt-1 text-xs text-gray-500">
+          <Text className="font-medium text-gray-900 dark:text-gray-100">
+            {document.name}
+          </Text>
+          <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
             {document.type} · {document.size} · {document.uploadDate}
           </Text>
         </View>
@@ -515,17 +545,23 @@ const RelatedMaterialItem = ({
   isLast,
 }: RelatedMaterialItemProps) => (
   <TouchableOpacity
-    className={!isLast ? 'border-b border-gray-100 py-3' : 'py-3'}
+    className={
+      !isLast ? 'border-b border-gray-100 py-3 dark:border-gray-700' : 'py-3'
+    }
   >
     <View className="flex-row items-center justify-between">
       <View>
-        <Text className="font-medium">{material.name}</Text>
-        <Text className="mt-1 text-xs text-gray-500">
+        <Text className="font-medium text-gray-900 dark:text-gray-100">
+          {material.name}
+        </Text>
+        <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
           编号: {material.code} | 规格: {material.spec}
         </Text>
       </View>
       <View>
-        <Text className="text-sm font-medium">库存: {material.stock}</Text>
+        <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+          库存: {material.stock}
+        </Text>
       </View>
     </View>
   </TouchableOpacity>
diff --git a/src/app/material/index.tsx b/src/app/material/index.tsx
index c47233c5a5f1cf983fa7d1815ae1423a79af75be..8d236a487e8233c0d012d64e454d50c2ee4121d4 100644
--- a/src/app/material/index.tsx
+++ b/src/app/material/index.tsx
@@ -1,13 +1,9 @@
 import { useRouter } from 'expo-router';
 import React, { useState } from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  TouchableOpacity,
-} from 'react-native';
+import { StyleSheet, TextInput, TouchableOpacity } from 'react-native';
 
 import { RefreshListView } from '@/components';
-import { NavHeader, ScrollView, Text, View, SafeAreaView } from '@/components/ui';
+import { NavHeader, ScrollView, Text, View } from '@/components/ui';
 import { FontAwesome, GroupEnum } from '@/components/ui/icons';
 
 type MaterialProps = {
@@ -160,29 +156,37 @@ const Materials = () => {
   // 渲染物料项
   const renderMaterialItem = ({ item }: { item: any }) => (
     <TouchableOpacity
-      className="mx-3 mb-3 rounded-lg bg-white p-4 shadow-sm"
+      className="mx-3 mb-3 rounded-lg bg-white p-4 shadow-sm dark:bg-gray-800"
       onPress={() => handleMaterialPress(item.id)}
     >
       <View className="flex-row items-center justify-between">
         <View className={'flex-1'}>
-          <Text className={'text-lg font-bold text-gray-800'}>{item.name}</Text>
-          <Text className={'mt-1 text-sm text-gray-500'}>
+          <Text
+            className={'text-lg font-bold text-gray-800 dark:text-gray-100'}
+          >
+            {item.name}
+          </Text>
+          <Text className={'mt-1 text-sm text-gray-500 dark:text-gray-400'}>
             编码: {item.code}
           </Text>
           <View className={'mt-2 flex-row items-center'}>
-            <Text className={'text-sm text-gray-600'}>
+            <Text className={'text-sm text-gray-600 dark:text-gray-300'}>
               库存: {item.stock} {item.unit}
             </Text>
             <View
               className={
                 'ml-3 px-2 py-1 rounded-full ' +
-                (item.status === '正常' ? 'bg-green-100' : 'bg-red-100')
+                (item.status === '正常'
+                  ? 'bg-green-100 dark:bg-green-900/30'
+                  : 'bg-red-100 dark:bg-red-900/30')
               }
             >
               <Text
                 className={
                   'text-xs ' +
-                  (item.status === '正常' ? 'text-green-600' : 'text-red-600')
+                  (item.status === '正常'
+                    ? 'text-green-600 dark:text-green-400'
+                    : 'text-red-600 dark:text-red-400')
                 }
               >
                 {item.status}
@@ -205,7 +209,7 @@ const Materials = () => {
   );
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-100">
+    <View className="flex-1 bg-gray-100 dark:bg-gray-900">
       <NavHeader
         title="物料管理"
         right={
@@ -223,9 +227,9 @@ const Materials = () => {
         }
       />
       {/* 头部 */}
-      <View className="bg-white px-4 py-3 shadow-sm">
+      <View className="bg-white px-4 py-3 shadow-sm dark:bg-gray-800">
         {/* 搜索框 */}
-        <View className="mt-3 flex-row items-center rounded-lg bg-gray-100 px-3 py-2">
+        <View className="mt-3 flex-row items-center rounded-lg bg-gray-100 px-3 py-2 dark:bg-gray-700">
           <FontAwesome
             name="search"
             size={20}
@@ -233,7 +237,7 @@ const Materials = () => {
             group={GroupEnum.EvilIcons}
           />
           <TextInput
-            className="ml-2 flex-1 text-gray-800"
+            className="ml-2 flex-1 text-gray-800 dark:text-gray-100"
             placeholder="搜索物料名称或编码"
             placeholderTextColor="#9CA3AF"
             value={searchText}
@@ -257,13 +261,13 @@ const Materials = () => {
         <ScrollView
           horizontal
           showsHorizontalScrollIndicator={false}
-          className="bg-white py-2"
+          className="bg-white py-2 dark:bg-gray-800"
           contentContainerStyle={{ paddingHorizontal: 8 }}
         >
           {categories.map((category) => (
             <TouchableOpacity
               key={category.id}
-              className={`mx-1 rounded-full px-4 py-2 ${selectedCategory === category.name ? 'bg-blue-500' : 'bg-gray-100'}`}
+              className={`mx-1 rounded-full px-4 py-2 ${selectedCategory === category.name ? 'bg-blue-500' : 'bg-gray-100 dark:bg-gray-700'}`}
               onPress={() => handleCategorySelect(category.name)}
             >
               <View>
@@ -275,10 +279,7 @@ const Materials = () => {
                 }
               /> */}
                 <Text
-                  className={`${selectedCategory === category.name
-                      ? 'text-white'
-                      : 'text-gray-600'
-                    }`}
+                  className={`${selectedCategory === category.name ? 'text-white' : 'text-gray-600 dark:text-gray-300'}`}
                 >
                   {category.name}
                 </Text>
@@ -308,7 +309,7 @@ const Materials = () => {
           </View>
         }
       />
-    </SafeAreaView>
+    </View>
   );
 };
 
diff --git a/src/app/notification/[id].tsx b/src/app/notification/[id].tsx
index 7a365f982e715af4fbe349e904de6761023da4f1..a8729a8409d92bd1faef23d20135865bf200c3b5 100644
--- a/src/app/notification/[id].tsx
+++ b/src/app/notification/[id].tsx
@@ -4,6 +4,7 @@ import { StyleSheet, TouchableOpacity } from 'react-native';
 
 import { NavHeader, ScrollView, Text, View } from '@/components/ui';
 import { FontAwesome, GroupEnum } from '@/components/ui/icons';
+import { useAppColorScheme } from '@/lib';
 
 interface RelatedNotification {
   id: string;
@@ -18,6 +19,7 @@ const NotificationDetail = () => {
   // const notificationType1 = route.params?.type || 'warning';
   const local = useLocalSearchParams<{ type: string }>();
   const notificationType = local.type;
+  const { isDark } = useAppColorScheme();
 
   // 通知详情状态
   const [notificationInfo, setNotificationInfo] = useState({
@@ -28,8 +30,8 @@ const NotificationDetail = () => {
       'PCB板库存低于安全库存，当前库存数量为25个，安全库存为50个，请及时补货。\n\n低库存可能导致生产计划延误，建议在3天内完成补货。',
     icon: 'exclamation-triangle',
     iconBgColor: '#ef4444', // red-500
-    badgeBg: 'bg-red-100',
-    badgeText: 'text-red-800',
+    badgeBg: 'bg-red-100 dark:bg-red-900/30',
+    badgeText: 'text-red-800 dark:text-red-300',
     badgeContent: '预警信息',
     actionText: '查看物料详情',
     relatedInfo: [
@@ -71,8 +73,8 @@ const NotificationDetail = () => {
           title: '库存预警',
           icon: 'exclamation-triangle',
           iconBgColor: '#ef4444', // red-500
-          badgeBg: 'bg-red-100',
-          badgeText: 'text-red-800',
+          badgeBg: 'bg-red-100 dark:bg-red-900/30',
+          badgeText: 'text-red-800 dark:text-red-300',
           badgeContent: '预警信息',
           actionText: '查看物料详情',
         };
@@ -85,8 +87,8 @@ const NotificationDetail = () => {
             '您有一个新的生产任务 #PT20231129-02 需要处理。请在今天下午3点前完成相关准备工作。',
           icon: 'tasks',
           iconBgColor: '#22c55e', // green-500
-          badgeBg: 'bg-green-100',
-          badgeText: 'text-green-800',
+          badgeBg: 'bg-green-100 dark:bg-green-900/30',
+          badgeText: 'text-green-800 dark:text-green-300',
           badgeContent: '任务提醒',
           actionText: '处理任务',
         };
@@ -99,8 +101,8 @@ const NotificationDetail = () => {
             '订单 #2023112801 已完成生产，等待发货。请安排物流部门进行后续处理。',
           icon: 'clipboard-check',
           iconBgColor: '#3b82f6', // blue-500
-          badgeBg: 'bg-blue-100',
-          badgeText: 'text-blue-800',
+          badgeBg: 'bg-blue-100 dark:bg-blue-900/30',
+          badgeText: 'text-blue-800 dark:text-blue-300',
           badgeContent: '订单通知',
           actionText: '查看订单',
         };
@@ -113,8 +115,8 @@ const NotificationDetail = () => {
             '系统将于今晚22:00-23:00进行例行维护，请提前做好准备。维护期间系统将暂停服务。',
           icon: 'bell',
           iconBgColor: '#eab308', // yellow-500
-          badgeBg: 'bg-yellow-100',
-          badgeText: 'text-yellow-800',
+          badgeBg: 'bg-yellow-100 dark:bg-yellow-900/30',
+          badgeText: 'text-yellow-800 dark:text-yellow-300',
           badgeContent: '系统通知',
           actionText: '了解详情',
         };
@@ -127,8 +129,8 @@ const NotificationDetail = () => {
             '11月生产效率分析报表已生成，请查看。本月生产效率较上月提升5.2%。',
           icon: 'chart-line',
           iconBgColor: '#a855f7', // purple-500
-          badgeBg: 'bg-purple-100',
-          badgeText: 'text-purple-800',
+          badgeBg: 'bg-purple-100 dark:bg-purple-900/30',
+          badgeText: 'text-purple-800 dark:text-purple-300',
           badgeContent: '数据报表',
           actionText: '查看报表',
         };
@@ -140,8 +142,8 @@ const NotificationDetail = () => {
           content: '李工程师已加入您的生产团队，请及时安排工作。',
           icon: 'user-plus',
           iconBgColor: '#6366f1', // indigo-500
-          badgeBg: 'bg-indigo-100',
-          badgeText: 'text-indigo-800',
+          badgeBg: 'bg-indigo-100 dark:bg-indigo-900/30',
+          badgeText: 'text-indigo-800 dark:text-indigo-300',
           badgeContent: '团队通知',
           actionText: '查看团队',
         };
@@ -154,8 +156,8 @@ const NotificationDetail = () => {
             '系统已更新至v1.0.5版本，新增多项功能和优化。主要更新内容包括：生产计划优化、库存预警阈值自定义、报表导出功能等。',
           icon: 'cogs',
           iconBgColor: '#f97316', // orange-500
-          badgeBg: 'bg-orange-100',
-          badgeText: 'text-orange-800',
+          badgeBg: 'bg-orange-100 dark:bg-orange-900/30',
+          badgeText: 'text-orange-800 dark:text-orange-300',
           badgeContent: '系统更新',
           actionText: '查看更新',
         };
@@ -192,16 +194,24 @@ const NotificationDetail = () => {
   };
 
   return (
-    <View className="flex-1 bg-gray-50">
+    <View className="flex-1 bg-gray-50 dark:bg-neutral-900">
       <NavHeader
         title="通知详情"
         right={
           <>
             <TouchableOpacity style={styles.headerButton}>
-              <FontAwesome name="share-alt" size={18} color="#6b7280" />
+              <FontAwesome
+                name="share-alt"
+                size={18}
+                color={isDark ? '#9ca3af' : '#6b7280'}
+              />
             </TouchableOpacity>
             <TouchableOpacity style={styles.headerButton}>
-              <FontAwesome name="ellipsis-v" size={18} color="#6b7280" />
+              <FontAwesome
+                name="ellipsis-v"
+                size={18}
+                color={isDark ? '#9ca3af' : '#6b7280'}
+              />
             </TouchableOpacity>
           </>
         }
@@ -221,7 +231,7 @@ const NotificationDetail = () => {
         </View>
 
         {/* 通知详情卡片 */}
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-neutral-800">
           <View className="flex-row items-start">
             <View
               className="w-15 h-15 mr-4 items-center justify-center rounded-xl"
@@ -236,35 +246,48 @@ const NotificationDetail = () => {
             </View>
             <View className="flex-1">
               <View className="flex-row items-start justify-between">
-                <Text className="text-xl font-semibold">
+                <Text className="text-xl font-semibold text-gray-900 dark:text-gray-100">
                   {notificationInfo.title}
                 </Text>
-                <Text className="text-sm text-gray-500">
+                <Text className="text-sm text-gray-500 dark:text-gray-400">
                   {notificationInfo.time}
                 </Text>
               </View>
-              <Text className="mt-1 text-sm text-gray-500">
+              <Text className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 {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">
+            <Text className="mb-3 text-lg font-medium text-gray-900 dark:text-gray-100">
+              详细内容
+            </Text>
+            <Text className="leading-relaxed text-gray-700 dark:text-gray-300">
               {notificationInfo.content}
             </Text>
           </View>
 
           {/* 相关信息 */}
-          <View className="mt-6 border-t border-gray-100 pt-6">
-            <Text className="mb-3 text-lg font-medium">相关信息</Text>
+          <View className="mt-6 border-t border-gray-100 pt-6 dark:border-neutral-700">
+            <Text className="mb-3 text-lg font-medium text-gray-900 dark:text-gray-100">
+              相关信息
+            </Text>
             {notificationInfo.relatedInfo.map((item, index) => (
-              <View key={index} className="mb-3 rounded-xl bg-gray-50 p-4">
+              <View
+                key={index}
+                className="mb-3 rounded-xl bg-gray-50 p-4 dark:bg-neutral-700"
+              >
                 <View className="flex-row justify-between">
-                  <Text className="font-medium">{item.label}</Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    {item.label}
+                  </Text>
                   <Text
-                    className={item.isAlert ? 'font-medium text-red-600' : ''}
+                    className={
+                      item.isAlert
+                        ? 'font-medium text-red-600 dark:text-red-400'
+                        : 'text-gray-900 dark:text-gray-100'
+                    }
                   >
                     {item.value}
                   </Text>
@@ -285,20 +308,24 @@ const NotificationDetail = () => {
             </Text>
           </TouchableOpacity>
           <TouchableOpacity
-            className="flex-1 items-center rounded-xl bg-gray-100 py-3"
+            className="flex-1 items-center rounded-xl bg-gray-100 py-3 dark:bg-neutral-700"
             onPress={handleMarkAsRead}
           >
-            <Text className="font-medium text-gray-700">标记为已读</Text>
+            <Text className="font-medium text-gray-700 dark:text-gray-200">
+              标记为已读
+            </Text>
           </TouchableOpacity>
         </View>
 
         {/* 相关通知 */}
-        <Text className="mb-3 text-lg font-semibold">相关通知</Text>
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+          相关通知
+        </Text>
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-neutral-800">
           {relatedNotifications.map((item, index) => (
             <View
               key={item.id}
-              className={`py-3 ${index < relatedNotifications.length - 1 ? 'border-b border-gray-100' : ''}`}
+              className={`py-3 ${index < relatedNotifications.length - 1 ? 'border-b border-gray-100 dark:border-neutral-700' : ''}`}
             >
               <View className="flex-row">
                 <View
@@ -314,10 +341,14 @@ const NotificationDetail = () => {
                 </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>
+                    <Text className="font-medium text-gray-900 dark:text-gray-100">
+                      {item.title}
+                    </Text>
+                    <Text className="text-xs text-gray-500 dark:text-gray-400">
+                      {item.time}
+                    </Text>
                   </View>
-                  <Text className="mt-1 text-sm text-gray-600">
+                  <Text className="mt-1 text-sm text-gray-600 dark:text-gray-300">
                     {item.message}
                   </Text>
                 </View>
diff --git a/src/app/notification/index.tsx b/src/app/notification/index.tsx
index 4cc6599d4789aa9c2afec37523cf3098ec0e3b10..2f9f63e2155c8c78019da3c1eb845a92c6832959 100644
--- a/src/app/notification/index.tsx
+++ b/src/app/notification/index.tsx
@@ -5,6 +5,7 @@ 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';
+import { useAppColorScheme } from '@/lib';
 
 // type TabType = 0 | 1 | 2 | 3;
 
@@ -23,6 +24,7 @@ interface NotificationItem {
 const Notification = () => {
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
   const router = useRouter();
+  const { isDark } = useAppColorScheme();
 
   // 模拟通知数据
   const notifications: NotificationItem[] = [
@@ -140,12 +142,8 @@ const Notification = () => {
 
   // 渲染通知项
   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">
+    <TouchableOpacity key={item.id} onPress={() => handleViewDetail(item.id)}>
+      <View className="border-b border-gray-100 py-4 dark:border-neutral-700">
         <View className="flex-row">
           <View className="relative">
             <View
@@ -165,17 +163,24 @@ const Notification = () => {
           </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>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                {item.title}
+              </Text>
+              <Text className="text-xs text-gray-500 dark:text-gray-400">
+                {item.time}
+              </Text>
             </View>
-            <Text className="mt-1 text-sm text-gray-600">{item.message}</Text>
+            <Text className="mt-1 text-sm text-gray-600 dark:text-gray-300">
+              {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"
+                className="rounded-full bg-gray-100 px-2 py-1 dark:bg-neutral-700"
                 onPress={() => handleIgnore(item.id)}
               >
-                <Text className="text-xs text-gray-600">忽略</Text>
+                <Text className="text-xs text-gray-600 dark:text-gray-300">
+                  忽略
+                </Text>
               </TouchableOpacity>
             </View>
           </View>
@@ -190,13 +195,17 @@ const Notification = () => {
     { key: 'process-management1', label: '预警信息' },
   ];
   return (
-    <View className="flex-1 bg-gray-50">
+    <View className="flex-1 bg-gray-50 dark:bg-neutral-900">
       <NavHeader
         title="通知"
         right={
           <>
             <TouchableOpacity style={styles.headerButton}>
-              <FontAwesome name="cog" size={18} color="#6b7280" />
+              <FontAwesome
+                name="cog"
+                size={18}
+                color={isDark ? '#9ca3af' : '#6b7280'}
+              />
             </TouchableOpacity>
           </>
         }
@@ -215,8 +224,10 @@ const Notification = () => {
         {/* 今日通知 */}
         {todayNotifications.length > 0 && (
           <>
-            <Text className="mb-3 text-lg font-semibold">今日通知</Text>
-            <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+              今日通知
+            </Text>
+            <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-neutral-800">
               {todayNotifications.map(renderNotificationItem)}
             </View>
           </>
@@ -225,8 +236,10 @@ const Notification = () => {
         {/* 昨日通知 */}
         {yesterdayNotifications.length > 0 && (
           <>
-            <Text className="mb-3 text-lg font-semibold">昨日通知</Text>
-            <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+              昨日通知
+            </Text>
+            <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-neutral-800">
               {yesterdayNotifications.map(renderNotificationItem)}
             </View>
           </>
@@ -235,8 +248,10 @@ const Notification = () => {
         {/* 更早通知 */}
         {earlierNotifications.length > 0 && (
           <>
-            <Text className="mb-3 text-lg font-semibold">更早</Text>
-            <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+            <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+              更早
+            </Text>
+            <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-neutral-800">
               {earlierNotifications.map(renderNotificationItem)}
             </View>
           </>
diff --git a/src/app/onboarding.tsx b/src/app/onboarding.tsx
index 8da7fe76614e456557001bd1289c728f72b9db66..cd3722bf4f477f24b88f4650f550a65aa1284b3e 100644
--- a/src/app/onboarding.tsx
+++ b/src/app/onboarding.tsx
@@ -7,7 +7,7 @@ import {
   StatusBar,
   TouchableOpacity,
   useWindowDimensions,
-  ViewToken,
+  type ViewToken,
 } from 'react-native';
 
 import { Text, View } from '@/components/ui';
@@ -33,12 +33,7 @@ const onboardingData: OnboardingItem[] = [
     description: '数字化生产管控，实时掌握生产全流程',
     icon: 'industry',
     gradientColors: ['#3b82f6', '#2563eb'],
-    features: [
-      '实时生产监控',
-      '生产计划排程',
-      '工单进度跟踪',
-      '产能分析优化',
-    ],
+    features: ['实时生产监控', '生产计划排程', '工单进度跟踪', '产能分析优化'],
   },
   {
     id: '2',
@@ -46,12 +41,7 @@ const onboardingData: OnboardingItem[] = [
     description: '全流程质量管控，确保产品卓越品质',
     icon: 'check-circle',
     gradientColors: ['#22c55e', '#16a34a'],
-    features: [
-      '质检流程管理',
-      '不良品追溯',
-      '质量数据分析',
-      '质量报告生成',
-    ],
+    features: ['质检流程管理', '不良品追溯', '质量数据分析', '质量报告生成'],
   },
   {
     id: '3',
@@ -59,12 +49,7 @@ const onboardingData: OnboardingItem[] = [
     description: '预防性维护，保障设备高效运转',
     icon: 'cogs',
     gradientColors: ['#a855f7', '#9333ea'],
-    features: [
-      '设备状态监控',
-      '预防性维护',
-      '故障快速响应',
-      '维修记录管理',
-    ],
+    features: ['设备状态监控', '预防性维护', '故障快速响应', '维修记录管理'],
   },
   {
     id: '4',
@@ -147,11 +132,7 @@ const Paginator: React.FC<PaginatorProps> = ({ data, currentIndex }) => (
     {data.map((_, index) => (
       <View
         key={index}
-        className={`mx-1 h-2 rounded-full ${
-          index === currentIndex
-            ? 'w-8 bg-primary-500'
-            : 'w-2 bg-gray-300 dark:bg-neutral-600'
-        }`}
+        className={`mx-1 h-2 rounded-full ${index === currentIndex ? 'w-8 bg-primary-500' : 'w-2 bg-gray-300 dark:bg-neutral-600'}`}
       />
     ))}
   </View>
@@ -214,9 +195,7 @@ export default function Onboarding() {
           className="absolute right-6 top-12 z-10"
           activeOpacity={0.7}
         >
-          <Text className="text-base font-semibold text-primary-500">
-            跳过
-          </Text>
+          <Text className="text-base font-semibold text-primary-500">跳过</Text>
         </TouchableOpacity>
       )}
 
diff --git a/src/app/order/[id].tsx b/src/app/order/[id].tsx
index 42f6c992b150686c72bf5913ae0ca83aa36c3f9c..2929bbfe31059bfea85a4ba30fdaba185b9a1612 100644
--- a/src/app/order/[id].tsx
+++ b/src/app/order/[id].tsx
@@ -1,17 +1,13 @@
 import React, { useState } from 'react';
-import {
-  Image,
-  ScrollView,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { Image, ScrollView, Text, TouchableOpacity, View } from 'react-native';
 
 import { NavHeader, SafeAreaView } from '@/components/ui';
 import { FontAwesome } from '@/components/ui/icons';
+import { useAppColorScheme } from '@/lib';
 
 const OrderDetail = () => {
   const [activeTab, setActiveTab] = useState('product-list');
+  const { isDark } = useAppColorScheme();
 
   // 切换选项卡
   const handleTabChange = (tabId: string) => {
@@ -19,16 +15,24 @@ const OrderDetail = () => {
   };
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-50">
+    <SafeAreaView className="flex-1 bg-gray-50 dark:bg-gray-900">
       <NavHeader
         title="订单详情"
         right={
           <>
             <TouchableOpacity className="mr-4">
-              <FontAwesome name="share-alt" size={18} color="#4b5563" />
+              <FontAwesome
+                name="share-alt"
+                size={18}
+                color={isDark ? '#9ca3af' : '#4b5563'}
+              />
             </TouchableOpacity>
             <TouchableOpacity>
-              <FontAwesome name="ellipsis-v" size={18} color="#4b5563" />
+              <FontAwesome
+                name="ellipsis-v"
+                size={18}
+                color={isDark ? '#9ca3af' : '#4b5563'}
+              />
             </TouchableOpacity>
           </>
         }
@@ -36,11 +40,13 @@ const OrderDetail = () => {
 
       <ScrollView className="flex-1 p-4">
         {/* 订单基本信息 */}
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
           <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 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              订单 #2023112702
+            </Text>
+            <View className="rounded-full bg-purple-100 px-2 py-1 dark:bg-purple-900/30">
+              <Text className="text-xs font-medium text-purple-800 dark:text-purple-300">
                 生产中
               </Text>
             </View>
@@ -48,75 +54,103 @@ const OrderDetail = () => {
 
           <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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                客户
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                北京智能科技有限公司
+              </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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                联系人
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                张经理
+              </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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                联系电话
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                订单金额
+              </Text>
+              <Text className="text-sm font-medium text-red-600 dark:text-red-400">
+                ¥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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                订单日期
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                交付日期
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                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 className="rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
+            <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+              收货地址
+            </Text>
+            <Text className="text-sm text-gray-900 dark:text-gray-100">
+              北京市海淀区中关村科技园区8号楼5层
+            </Text>
           </View>
         </View>
 
         {/* 选项卡 - 分段控制器样式 */}
-        <View className="mb-4 flex-row rounded-lg bg-gray-200 p-1">
+        <View className="mb-4 flex-row rounded-lg bg-gray-200 p-1 dark:bg-gray-700">
           <TouchableOpacity
-            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'product-list' ? 'bg-white' : ''}`}
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'product-list' ? 'bg-white dark:bg-gray-600' : ''}`}
             onPress={() => handleTabChange('product-list')}
           >
             <Text
-              className={`text-center text-sm ${activeTab === 'product-list' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+              className={`text-center text-sm ${activeTab === 'product-list' ? 'font-medium text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'}`}
             >
               产品明细
             </Text>
           </TouchableOpacity>
           <TouchableOpacity
-            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'production-progress' ? 'bg-white' : ''}`}
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'production-progress' ? 'bg-white dark:bg-gray-600' : ''}`}
             onPress={() => handleTabChange('production-progress')}
           >
             <Text
-              className={`text-center text-sm ${activeTab === 'production-progress' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+              className={`text-center text-sm ${activeTab === 'production-progress' ? 'font-medium text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'}`}
             >
               生产进度
             </Text>
           </TouchableOpacity>
           <TouchableOpacity
-            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'logistics-info' ? 'bg-white' : ''}`}
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'logistics-info' ? 'bg-white dark:bg-gray-600' : ''}`}
             onPress={() => handleTabChange('logistics-info')}
           >
             <Text
-              className={`text-center text-sm ${activeTab === 'logistics-info' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+              className={`text-center text-sm ${activeTab === 'logistics-info' ? 'font-medium text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'}`}
             >
               物流信息
             </Text>
           </TouchableOpacity>
           <TouchableOpacity
-            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'payment-info' ? 'bg-white' : ''}`}
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'payment-info' ? 'bg-white dark:bg-gray-600' : ''}`}
             onPress={() => handleTabChange('payment-info')}
           >
             <Text
-              className={`text-center text-sm ${activeTab === 'payment-info' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+              className={`text-center text-sm ${activeTab === 'payment-info' ? 'font-medium text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'}`}
             >
               付款信息
             </Text>
@@ -126,11 +160,11 @@ const OrderDetail = () => {
         {/* 选项卡内容区域 */}
         {/* 产品明细 */}
         {activeTab === 'product-list' && (
-          <View className="rounded-2xl bg-white p-4 shadow-sm">
+          <View className="rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
             {/* 产品项目1 */}
-            <View className="border-b border-gray-100 py-4">
+            <View className="border-b border-gray-100 py-4 dark:border-gray-700">
               <View className="mb-2 flex-row">
-                <View className="mr-3 size-16 overflow-hidden rounded-lg bg-gray-100">
+                <View className="mr-3 size-16 overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-700">
                   <Image
                     source={{ uri: 'https://via.placeholder.com/64' }}
                     className="size-full"
@@ -138,30 +172,36 @@ const OrderDetail = () => {
                   />
                 </View>
                 <View className="flex-1">
-                  <Text className="mb-1 font-medium">智能手表 Pro</Text>
-                  <Text className="mb-1 text-xs text-gray-500">
+                  <Text className="mb-1 font-medium text-gray-900 dark:text-gray-100">
+                    智能手表 Pro
+                  </Text>
+                  <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
                     型号：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>
+                    <Text className="text-sm text-gray-600 dark:text-gray-300">
+                      ¥1,280 × 50
+                    </Text>
+                    <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                      ¥64,000
+                    </Text>
                   </View>
                 </View>
               </View>
-              <View className="rounded bg-gray-50 p-2">
-                <Text className="mb-1 text-xs text-gray-600">
+              <View className="rounded bg-gray-50 p-2 dark:bg-gray-700">
+                <Text className="mb-1 text-xs text-gray-600 dark:text-gray-300">
                   规格：黑色 / 1.4英寸 / GPS+蜂窝网络
                 </Text>
-                <Text className="text-xs text-gray-600">
+                <Text className="text-xs text-gray-600 dark:text-gray-300">
                   备注：包装需使用防震材料，单独包装
                 </Text>
               </View>
             </View>
 
             {/* 产品项目2 */}
-            <View className="border-b border-gray-100 py-4">
+            <View className="border-b border-gray-100 py-4 dark:border-gray-700">
               <View className="mb-2 flex-row">
-                <View className="mr-3 size-16 overflow-hidden rounded-lg bg-gray-100">
+                <View className="mr-3 size-16 overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-700">
                   <Image
                     source={{ uri: 'https://via.placeholder.com/64' }}
                     className="size-full"
@@ -169,18 +209,24 @@ const OrderDetail = () => {
                   />
                 </View>
                 <View className="flex-1">
-                  <Text className="mb-1 font-medium">智能手表充电器</Text>
-                  <Text className="mb-1 text-xs text-gray-500">
+                  <Text className="mb-1 font-medium text-gray-900 dark:text-gray-100">
+                    智能手表充电器
+                  </Text>
+                  <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
                     型号：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>
+                    <Text className="text-sm text-gray-600 dark:text-gray-300">
+                      ¥120 × 60
+                    </Text>
+                    <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                      ¥7,200
+                    </Text>
                   </View>
                 </View>
               </View>
-              <View className="rounded bg-gray-50 p-2">
-                <Text className="text-xs text-gray-600">
+              <View className="rounded bg-gray-50 p-2 dark:bg-gray-700">
+                <Text className="text-xs text-gray-600 dark:text-gray-300">
                   规格：白色 / 磁吸式 / 5W
                 </Text>
               </View>
@@ -189,7 +235,7 @@ const OrderDetail = () => {
             {/* 产品项目3 */}
             <View className="py-4">
               <View className="mb-2 flex-row">
-                <View className="mr-3 size-16 overflow-hidden rounded-lg bg-gray-100">
+                <View className="mr-3 size-16 overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-700">
                   <Image
                     source={{ uri: 'https://via.placeholder.com/64' }}
                     className="size-full"
@@ -197,36 +243,54 @@ const OrderDetail = () => {
                   />
                 </View>
                 <View className="flex-1">
-                  <Text className="mb-1 font-medium">智能手表表带</Text>
-                  <Text className="mb-1 text-xs text-gray-500">
+                  <Text className="mb-1 font-medium text-gray-900 dark:text-gray-100">
+                    智能手表表带
+                  </Text>
+                  <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
                     型号：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>
+                    <Text className="text-sm text-gray-600 dark:text-gray-300">
+                      ¥200 × 120
+                    </Text>
+                    <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                      ¥24,000
+                    </Text>
                   </View>
                 </View>
               </View>
-              <View className="rounded bg-gray-50 p-2">
-                <Text className="text-xs text-gray-600">
+              <View className="rounded bg-gray-50 p-2 dark:bg-gray-700">
+                <Text className="text-xs text-gray-600 dark:text-gray-300">
                   规格：米兰尼斯表带 / 黑色 / 42mm
                 </Text>
               </View>
             </View>
 
             {/* 订单总计 */}
-            <View className="mt-4 border-t border-gray-100 pt-4">
+            <View className="mt-4 border-t border-gray-100 pt-4 dark:border-gray-700">
               <View className="mb-2 flex-row justify-between">
-                <Text className="text-sm text-gray-600">商品总额</Text>
-                <Text className="text-sm">¥95,200</Text>
+                <Text className="text-sm text-gray-600 dark:text-gray-300">
+                  商品总额
+                </Text>
+                <Text className="text-sm text-gray-900 dark:text-gray-100">
+                  ¥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>
+                <Text className="text-sm text-gray-600 dark:text-gray-300">
+                  运费
+                </Text>
+                <Text className="text-sm text-gray-900 dark:text-gray-100">
+                  ¥0
+                </Text>
               </View>
               <View className="flex-row justify-between">
-                <Text className="font-medium">订单总计</Text>
-                <Text className="font-medium text-red-600">¥95,200</Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  订单总计
+                </Text>
+                <Text className="font-medium text-red-600 dark:text-red-400">
+                  ¥95,200
+                </Text>
               </View>
             </View>
           </View>
@@ -234,15 +298,19 @@ const OrderDetail = () => {
 
         {/* 生产进度 */}
         {activeTab === 'production-progress' && (
-          <View className="rounded-2xl bg-white p-4 shadow-sm">
-            <Text className="mb-3 text-base font-medium">生产进度概览</Text>
+          <View className="rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 text-base font-medium text-gray-900 dark:text-gray-100">
+              生产进度概览
+            </Text>
 
             <View className="mb-4">
               <View className="mb-1 flex-row justify-between text-sm">
-                <Text>总体进度</Text>
-                <Text>65%</Text>
+                <Text className="text-gray-900 dark:text-gray-100">
+                  总体进度
+                </Text>
+                <Text className="text-gray-900 dark:text-gray-100">65%</Text>
               </View>
-              <View className="h-1.5 overflow-hidden rounded bg-gray-200">
+              <View className="h-1.5 overflow-hidden rounded bg-gray-200 dark:bg-gray-700">
                 <View
                   className="h-full rounded bg-blue-600"
                   style={{ width: '65%' }}
@@ -252,56 +320,84 @@ const OrderDetail = () => {
 
             <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>
+                <Text className="text-xl font-bold text-green-600 dark:text-green-400">
+                  100%
+                </Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  原料采购
+                </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>
+                <Text className="text-xl font-bold text-blue-600 dark:text-blue-400">
+                  75%
+                </Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  生产制造
+                </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>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  质检包装
+                </Text>
               </View>
             </View>
 
-            <Text className="mb-3 text-base font-medium">生产时间线</Text>
+            <Text className="mb-3 text-base font-medium text-gray-900 dark:text-gray-100">
+              生产时间线
+            </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 className="absolute bottom-0 left-3 top-3 w-0.5 bg-gray-200 dark:bg-gray-600" />
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                订单确认
+              </Text>
+              <Text className="text-xs text-gray-500 dark:text-gray-400">
+                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 className="absolute bottom-0 left-3 top-3 w-0.5 bg-gray-200 dark:bg-gray-600" />
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                原料采购完成
+              </Text>
+              <Text className="text-xs text-gray-500 dark:text-gray-400">
+                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 className="absolute bottom-0 left-3 top-3 w-0.5 bg-gray-200 dark:bg-gray-600" />
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                生产开始
+              </Text>
+              <Text className="text-xs text-gray-500 dark:text-gray-400">
+                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">
+              <View className="absolute bottom-0 left-3 top-3 w-0.5 bg-gray-200 dark:bg-gray-600" />
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                智能手表组装中
+              </Text>
+              <Text className="text-xs text-gray-500 dark:text-gray-400">
+                2023-12-02 11:30
+              </Text>
+              <Text className="mt-1 text-xs text-blue-600 dark:text-blue-400">
                 已完成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" />
+              <View className="absolute left-2 top-1 size-2.5 rounded-full bg-gray-200 dark:bg-gray-600" />
+              <View className="absolute bottom-0 left-3 top-3 w-0.5 bg-gray-200 dark:bg-gray-600" />
               <Text className="text-sm font-medium text-gray-400">
                 质量检测
               </Text>
@@ -309,8 +405,8 @@ const OrderDetail = () => {
             </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" />
+              <View className="absolute left-2 top-1 size-2.5 rounded-full bg-gray-200 dark:bg-gray-600" />
+              <View className="absolute bottom-0 left-3 top-3 w-0.5 bg-gray-200 dark:bg-gray-600" />
               <Text className="text-sm font-medium text-gray-400">
                 包装完成
               </Text>
@@ -318,7 +414,7 @@ const OrderDetail = () => {
             </View>
 
             <View className="relative pl-7">
-              <View className="absolute left-2 top-1 size-2.5 rounded-full bg-gray-200" />
+              <View className="absolute left-2 top-1 size-2.5 rounded-full bg-gray-200 dark:bg-gray-600" />
               <Text className="text-sm font-medium text-gray-400">发货</Text>
               <Text className="text-xs text-gray-400">预计 2023-12-08</Text>
             </View>
@@ -327,48 +423,66 @@ const OrderDetail = () => {
 
         {/* 物流信息 */}
         {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">
+          <View className="rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <View className="mb-4 rounded-lg bg-gray-50 p-3 dark:bg-gray-700">
+              <Text className="mb-2 text-sm text-gray-900 dark:text-gray-100">
                 订单尚未发货，预计发货日期：2023-12-08
               </Text>
-              <Text className="text-xs text-gray-500">
+              <Text className="text-xs text-gray-500 dark:text-gray-400">
                 发货后将更新物流信息
               </Text>
             </View>
 
-            <Text className="mb-3 text-base font-medium">收货信息</Text>
+            <Text className="mb-3 text-base font-medium text-gray-900 dark:text-gray-100">
+              收货信息
+            </Text>
 
             <View className="mb-4">
-              <Text className="mb-1 text-xs text-gray-500">收货人</Text>
-              <Text className="text-sm">张经理</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                收货人
+              </Text>
+              <Text className="text-sm text-gray-900 dark:text-gray-100">
+                张经理
+              </Text>
             </View>
 
             <View className="mb-4">
-              <Text className="mb-1 text-xs text-gray-500">联系电话</Text>
-              <Text className="text-sm">138****5678</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                联系电话
+              </Text>
+              <Text className="text-sm text-gray-900 dark:text-gray-100">
+                138****5678
+              </Text>
             </View>
 
             <View className="mb-4">
-              <Text className="mb-1 text-xs text-gray-500">收货地址</Text>
-              <Text className="text-sm">
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                收货地址
+              </Text>
+              <Text className="text-sm text-gray-900 dark:text-gray-100">
                 北京市海淀区中关村科技园区8号楼5层
               </Text>
             </View>
 
             <View>
-              <Text className="mb-1 text-xs text-gray-500">备注</Text>
-              <Text className="text-sm">请在工作日送货，并提前电话联系</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                备注
+              </Text>
+              <Text className="text-sm text-gray-900 dark:text-gray-100">
+                请在工作日送货，并提前电话联系
+              </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="rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 text-base font-medium text-gray-900 dark:text-gray-100">
+              付款状态
+            </Text>
 
-            <View className="mb-4 flex-row items-center rounded-lg bg-green-50 p-3">
+            <View className="mb-4 flex-row items-center rounded-lg bg-green-50 p-3 dark:bg-green-900/20">
               <FontAwesome
                 name="check-circle"
                 size={20}
@@ -376,8 +490,10 @@ const OrderDetail = () => {
                 style={{ marginRight: 8 }}
               />
               <View>
-                <Text className="text-sm font-medium">已支付定金</Text>
-                <Text className="text-xs text-gray-500">
+                <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                  已支付定金
+                </Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
                   剩余尾款待发货前支付
                 </Text>
               </View>
@@ -385,32 +501,58 @@ const OrderDetail = () => {
 
             <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>
+                <Text className="text-sm text-gray-600 dark:text-gray-300">
+                  订单总额
+                </Text>
+                <Text className="text-sm text-gray-900 dark:text-gray-100">
+                  ¥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>
+                <Text className="text-sm text-gray-600 dark:text-gray-300">
+                  已付定金(30%)
+                </Text>
+                <Text className="text-sm text-green-600 dark:text-green-400">
+                  ¥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>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  待付尾款
+                </Text>
+                <Text className="font-medium text-red-600 dark:text-red-400">
+                  ¥66,640
+                </Text>
               </View>
             </View>
 
-            <Text className="mb-3 text-base font-medium">付款记录</Text>
+            <Text className="mb-3 text-base font-medium text-gray-900 dark:text-gray-100">
+              付款记录
+            </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 className="overflow-hidden rounded-lg border border-gray-100 dark:border-gray-700">
+              <View className="flex-row bg-gray-50 p-3 dark:bg-gray-700">
+                <Text className="flex-1 text-xs font-medium text-gray-900 dark:text-gray-100">
+                  付款时间
+                </Text>
+                <Text className="flex-1 text-xs font-medium text-gray-900 dark:text-gray-100">
+                  付款金额
+                </Text>
+                <Text className="flex-1 text-xs font-medium text-gray-900 dark:text-gray-100">
+                  付款方式
+                </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 className="flex-row border-t border-gray-100 p-3 dark:border-gray-700">
+                <Text className="flex-1 text-xs text-gray-900 dark:text-gray-100">
+                  2023-11-27
+                </Text>
+                <Text className="flex-1 text-xs text-gray-900 dark:text-gray-100">
+                  ¥28,560
+                </Text>
+                <Text className="flex-1 text-xs text-gray-900 dark:text-gray-100">
+                  银行转账
+                </Text>
               </View>
             </View>
           </View>
diff --git a/src/app/privacy-policy.tsx b/src/app/privacy-policy.tsx
index 47e64c1d82251656153d9d1ddd7940efce1db618..c4064da611a778d00be6c3ba6afdf331e76c2366 100644
--- a/src/app/privacy-policy.tsx
+++ b/src/app/privacy-policy.tsx
@@ -2,11 +2,8 @@
 import { Stack, useRouter } from 'expo-router';
 import React from 'react';
 import { Pressable, ScrollView } from 'react-native';
-import {
-  SafeAreaView,
-  Text,
-  View,
-} from '@/components/ui';
+
+import { SafeAreaView, Text, View } from '@/components/ui';
 
 export default function PrivacyPolicyScreen() {
   const router = useRouter();
diff --git a/src/app/production/[id].tsx b/src/app/production/[id].tsx
index 7260898c58a4a377d93f8696181b1d7151be0653..355193ee2ddd087abdfae70532ef638a724c27ea 100644
--- a/src/app/production/[id].tsx
+++ b/src/app/production/[id].tsx
@@ -1,28 +1,33 @@
 import React, { useState } from 'react';
-import {
-  ScrollView,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 
 import { NavHeader, SafeAreaView } from '@/components/ui';
 import { FontAwesome, GroupEnum } from '@/components/ui/icons';
+import { useAppColorScheme } from '@/lib';
 
 const ProductionDetail = () => {
   const [activeTab, setActiveTab] = useState('production-process');
+  const { isDark } = useAppColorScheme();
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-50">
+    <SafeAreaView className="flex-1 bg-gray-50 dark:bg-gray-900">
       <NavHeader
         title="生产详情"
         right={
           <>
             <TouchableOpacity className="mr-4">
-              <FontAwesome name="share-alt" size={18} color="#4b5563" />
+              <FontAwesome
+                name="share-alt"
+                size={18}
+                color={isDark ? '#9ca3af' : '#4b5563'}
+              />
             </TouchableOpacity>
             <TouchableOpacity>
-              <FontAwesome name="ellipsis-v" size={18} color="#4b5563" />
+              <FontAwesome
+                name="ellipsis-v"
+                size={18}
+                color={isDark ? '#9ca3af' : '#4b5563'}
+              />
             </TouchableOpacity>
           </>
         }
@@ -30,17 +35,17 @@ const ProductionDetail = () => {
 
       <ScrollView className="flex-1 p-4">
         {/* 生产计划基本信息 */}
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
           <View className="mb-3 flex-row items-start justify-between">
-            <Text className="text-lg font-semibold">
+            <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
               夏季新品连衣裙生产计划
             </Text>
-            <View className="rounded-full bg-green-100 px-2 py-1">
-              <Text className="text-xs font-medium text-green-800">
+            <View className="rounded-full bg-green-100 px-2 py-1 dark:bg-green-900/30">
+              <Text className="text-xs font-medium text-green-800 dark:text-green-300">
                 <FontAwesome
                   name="play-circle"
                   size={12}
-                  color="#15803d"
+                  color={isDark ? '#86efac' : '#15803d'}
                   style={{ marginRight: 4 }}
                 />
                 进行中
@@ -48,43 +53,71 @@ const ProductionDetail = () => {
             </View>
           </View>
 
-          <Text className="mb-3 text-sm text-gray-500">
+          <Text className="mb-3 text-sm text-gray-500 dark:text-gray-400">
             计划编号: 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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                负责人
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                张经理
+              </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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                所属订单
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                开始日期
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                截止日期
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                计划产量
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                已完成
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                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>
+              <Text className="text-xs text-gray-900 dark:text-gray-100">
+                生产进度
+              </Text>
+              <Text className="text-xs font-medium text-gray-900 dark:text-gray-100">
+                75%
+              </Text>
             </View>
-            <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+            <View className="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
               <View
                 className="h-full rounded-full bg-green-500"
                 style={{ width: '75%' }}
@@ -92,17 +125,19 @@ const ProductionDetail = () => {
             </View>
           </View>
 
-          <View className="rounded-lg bg-blue-50 p-3">
+          <View className="rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
             <View className="flex-row">
               <FontAwesome
                 name="info-circle"
                 size={16}
-                color="#0066ff"
+                color={isDark ? '#60a5fa' : '#0066ff'}
                 style={{ marginTop: 2, marginRight: 8 }}
               />
               <View>
-                <Text className="mb-1 text-sm font-medium">生产说明</Text>
-                <Text className="text-sm">
+                <Text className="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+                  生产说明
+                </Text>
+                <Text className="text-sm text-gray-900 dark:text-gray-100">
                   本批次连衣裙采用新型面料，需特别注意缝制工艺和质量控制。
                 </Text>
               </View>
@@ -125,11 +160,11 @@ const ProductionDetail = () => {
             ].map((tab) => (
               <TouchableOpacity
                 key={tab.id}
-                className={`mr-2 rounded-full px-4 py-2 ${activeTab === tab.id ? 'bg-blue-600' : 'bg-gray-100'}`}
+                className={`mr-2 rounded-full px-4 py-2 ${activeTab === tab.id ? 'bg-blue-600' : 'bg-gray-100 dark:bg-gray-700'}`}
                 onPress={() => setActiveTab(tab.id)}
               >
                 <Text
-                  className={`text-sm font-medium ${activeTab === tab.id ? 'text-white' : 'text-gray-800'}`}
+                  className={`text-sm font-medium ${activeTab === tab.id ? 'text-white' : 'text-gray-800 dark:text-gray-300'}`}
                 >
                   {tab.label}
                 </Text>
@@ -144,29 +179,39 @@ const ProductionDetail = () => {
           {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>
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+                <Text className="mb-3 text-base font-semibold text-gray-900 dark:text-gray-100">
+                  生产流程
+                </Text>
                 <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                   <View className="flex-row items-center py-2">
                     <View className="items-center">
-                      <View className="size-16 items-center justify-center rounded-full bg-green-100">
-                        <FontAwesome name="cut" size={30} color="#16a34a" />
+                      <View className="size-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
+                        <FontAwesome
+                          name="cut"
+                          size={30}
+                          color={isDark ? '#4ade80' : '#16a34a'}
+                        />
                         <View className="absolute right-6 top-6 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>
+                      <Text className="mt-1 text-xs font-medium text-gray-900 dark:text-gray-100">
+                        裁剪
+                      </Text>
+                      <Text className="text-xs text-gray-500 dark:text-gray-400">
+                        已完成
+                      </Text>
                     </View>
 
                     <View className="mx-1 h-0.5 w-10 bg-green-500" />
 
                     <View className="items-center">
-                      <View className="size-16 items-center justify-center rounded-full bg-blue-100">
+                      <View className="size-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30">
                         <FontAwesome
                           name="tshirt"
                           size={30}
-                          color="#2563eb"
+                          color={isDark ? '#60a5fa' : '#2563eb'}
                           group={GroupEnum.FontAwesome5}
                         />
                         <View className="right-5.5 absolute top-6 size-5 items-center justify-center rounded-full bg-blue-500">
@@ -178,50 +223,76 @@ const ProductionDetail = () => {
                           />
                         </View>
                       </View>
-                      <Text className="mt-1 text-xs font-medium">缝制</Text>
-                      <Text className="text-xs text-gray-500">进行中</Text>
+                      <Text className="mt-1 text-xs font-medium text-gray-900 dark:text-gray-100">
+                        缝制
+                      </Text>
+                      <Text className="text-xs text-gray-500 dark:text-gray-400">
+                        进行中
+                      </Text>
                     </View>
 
-                    <View className="mx-1 h-0.5 w-10 bg-gray-300" />
+                    <View className="mx-1 h-0.5 w-10 bg-gray-300 dark:bg-gray-600" />
 
                     <View className="items-center">
-                      <View className="size-16 items-center justify-center rounded-full bg-gray-100">
+                      <View className="size-16 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700">
                         <FontAwesome
                           name="paint-brush"
                           size={30}
-                          color="#6b7280"
+                          color={isDark ? '#9ca3af' : '#6b7280'}
                         />
                       </View>
-                      <Text className="mt-1 text-xs font-medium">装饰</Text>
-                      <Text className="text-xs text-gray-500">待开始</Text>
+                      <Text className="mt-1 text-xs font-medium text-gray-900 dark:text-gray-100">
+                        装饰
+                      </Text>
+                      <Text className="text-xs text-gray-500 dark:text-gray-400">
+                        待开始
+                      </Text>
                     </View>
 
-                    <View className="mx-1 h-0.5 w-10 bg-gray-300" />
+                    <View className="mx-1 h-0.5 w-10 bg-gray-300 dark:bg-gray-600" />
 
                     <View className="items-center">
-                      <View className="size-16 items-center justify-center rounded-full bg-gray-100">
-                        <FontAwesome name="search" size={30} color="#6b7280" />
+                      <View className="size-16 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700">
+                        <FontAwesome
+                          name="search"
+                          size={30}
+                          color={isDark ? '#9ca3af' : '#6b7280'}
+                        />
                       </View>
-                      <Text className="mt-1 text-xs font-medium">质检</Text>
-                      <Text className="text-xs text-gray-500">待开始</Text>
+                      <Text className="mt-1 text-xs font-medium text-gray-900 dark:text-gray-100">
+                        质检
+                      </Text>
+                      <Text className="text-xs text-gray-500 dark:text-gray-400">
+                        待开始
+                      </Text>
                     </View>
 
-                    <View className="mx-1 h-0.5 w-10 bg-gray-300" />
+                    <View className="mx-1 h-0.5 w-10 bg-gray-300 dark:bg-gray-600" />
 
                     <View className="items-center">
-                      <View className="size-16 items-center justify-center rounded-full bg-gray-100">
-                        <FontAwesome name="tags" size={30} color="#6b7280" />
+                      <View className="size-16 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700">
+                        <FontAwesome
+                          name="tags"
+                          size={30}
+                          color={isDark ? '#9ca3af' : '#6b7280'}
+                        />
                       </View>
-                      <Text className="mt-1 text-xs font-medium">包装</Text>
-                      <Text className="text-xs text-gray-500">待开始</Text>
+                      <Text className="mt-1 text-xs font-medium text-gray-900 dark:text-gray-100">
+                        包装
+                      </Text>
+                      <Text className="text-xs text-gray-500 dark:text-gray-400">
+                        待开始
+                      </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="rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+                <Text className="mb-3 text-base font-semibold text-gray-900 dark:text-gray-100">
+                  生产时间线
+                </Text>
 
                 <View className="ml-2">
                   {[
@@ -282,26 +353,28 @@ const ProductionDetail = () => {
                   ].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'}`}
+                        className={`absolute left-0 top-1 size-2.5 rounded-full ${item.active ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'}`}
                       />
                       {index < 8 && (
                         <View
-                          className={`absolute left-1 top-3 h-full w-0.5 ${item.active ? 'bg-blue-600' : 'bg-gray-300'}`}
+                          className={`absolute left-1 top-3 h-full w-0.5 ${item.active ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'}`}
                           style={{ height: '100%' }}
                         />
                       )}
                       <Text
-                        className={`mb-1 font-medium ${!item.active ? 'text-gray-400' : ''}`}
+                        className={`mb-1 font-medium ${!item.active ? 'text-gray-400' : 'text-gray-900 dark:text-gray-100'}`}
                       >
                         {item.title}
                       </Text>
                       <Text
-                        className={`text-sm ${!item.active ? 'text-gray-400' : 'text-gray-500'}`}
+                        className={`text-sm ${!item.active ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'}`}
                       >
                         {item.time}
                       </Text>
                       {item.desc && (
-                        <Text className="mt-1 text-sm">{item.desc}</Text>
+                        <Text className="mt-1 text-sm text-gray-900 dark:text-gray-100">
+                          {item.desc}
+                        </Text>
                       )}
                     </View>
                   ))}
@@ -353,30 +426,38 @@ const ProductionDetail = () => {
               ].map((task, index) => (
                 <View
                   key={index}
-                  className="mb-4 rounded-2xl bg-white p-4 shadow-sm"
+                  className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800"
                 >
                   <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">
+                      <Text className="font-semibold text-gray-900 dark:text-gray-100">
+                        {task.title}
+                      </Text>
+                      <Text className="text-sm text-gray-500 dark:text-gray-400">
                         任务编号: {task.id}
                       </Text>
                     </View>
                     <View
-                      className={`bg-${task.statusColor}-100 rounded-full px-2 py-1`}
+                      className={`rounded-full px-2 py-1 ${task.statusColor === 'green' ? 'bg-green-100 dark:bg-green-900/30' : task.statusColor === 'blue' ? 'bg-blue-100 dark:bg-blue-900/30' : 'bg-gray-100 dark:bg-gray-700'}`}
                     >
                       <Text
-                        className={`text- text-xs${task.statusColor}-800 font-medium`}
+                        className={`text-xs font-medium ${task.statusColor === 'green' ? 'text-green-800 dark:text-green-300' : task.statusColor === 'blue' ? 'text-blue-800 dark:text-blue-300' : 'text-gray-800 dark:text-gray-300'}`}
                       >
                         <FontAwesome
                           name={task.icon}
                           size={12}
                           color={
                             task.statusColor === 'green'
-                              ? '#15803d'
+                              ? isDark
+                                ? '#86efac'
+                                : '#15803d'
                               : task.statusColor === 'blue'
-                                ? '#1d4ed8'
-                                : '#4b5563'
+                                ? isDark
+                                  ? '#93c5fd'
+                                  : '#1d4ed8'
+                                : isDark
+                                  ? '#9ca3af'
+                                  : '#4b5563'
                           }
                           style={{ marginRight: 4 }}
                         />
@@ -387,18 +468,22 @@ const ProductionDetail = () => {
 
                   <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>
+                      <Text className="text-xs text-gray-500 dark:text-gray-400">
+                        负责人
+                      </Text>
+                      <Text className="font-medium text-gray-900 dark:text-gray-100">
+                        {task.manager}
+                      </Text>
                     </View>
                     <View className="mb-2 w-1/2">
-                      <Text className="text-xs text-gray-500">
+                      <Text className="text-xs text-gray-500 dark:text-gray-400">
                         {task.status === '已完成'
                           ? '完成时间'
                           : task.status === '进行中'
                             ? '预计完成'
                             : '计划开始'}
                       </Text>
-                      <Text className="font-medium">
+                      <Text className="font-medium text-gray-900 dark:text-gray-100">
                         {task.status === '已完成'
                           ? task.completeTime
                           : task.status === '进行中'
@@ -407,18 +492,22 @@ const ProductionDetail = () => {
                       </Text>
                     </View>
                     <View className="mb-2 w-1/2">
-                      <Text className="text-xs text-gray-500">计划工时</Text>
-                      <Text className="font-medium">{task.planHours}</Text>
+                      <Text className="text-xs text-gray-500 dark:text-gray-400">
+                        计划工时
+                      </Text>
+                      <Text className="font-medium text-gray-900 dark:text-gray-100">
+                        {task.planHours}
+                      </Text>
                     </View>
                     <View className="mb-2 w-1/2">
-                      <Text className="text-xs text-gray-500">
+                      <Text className="text-xs text-gray-500 dark:text-gray-400">
                         {task.status === '已完成'
                           ? '实际工时'
                           : task.status === '进行中'
                             ? '已用工时'
                             : '计划完成'}
                       </Text>
-                      <Text className="font-medium">
+                      <Text className="font-medium text-gray-900 dark:text-gray-100">
                         {task.status === '已完成'
                           ? task.actualHours
                           : task.status === '进行中'
@@ -431,10 +520,14 @@ const ProductionDetail = () => {
                   {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>
+                        <Text className="text-gray-900 dark:text-gray-100">
+                          任务进度
+                        </Text>
+                        <Text className="font-medium text-gray-900 dark:text-gray-100">
+                          {task.progress}%
+                        </Text>
                       </View>
-                      <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+                      <View className="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
                         <View
                           className="h-full rounded-full bg-blue-500"
                           style={{ width: `${task.progress}%` }}
@@ -450,27 +543,27 @@ const ProductionDetail = () => {
           {/* 物料使用内容 */}
           {activeTab === 'material-usage' && (
             <View>
-              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
-                <Text className="mb-3 text-base font-semibold">
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+                <Text className="mb-3 text-base font-semibold text-gray-900 dark:text-gray-100">
                   物料使用情况
                 </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">
+                    <View className="flex-row bg-gray-50 py-2 dark:bg-gray-700">
+                      <Text className="w-24 px-3 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
                         物料名称
                       </Text>
-                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500">
+                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
                         规格
                       </Text>
-                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500">
+                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
                         计划用量
                       </Text>
-                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500">
+                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
                         已用量
                       </Text>
-                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500">
+                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
                         剩余量
                       </Text>
                     </View>
@@ -507,21 +600,21 @@ const ProductionDetail = () => {
                     ].map((material, index) => (
                       <View
                         key={index}
-                        className="flex-row border-t border-gray-200 py-2"
+                        className="flex-row border-t border-gray-200 py-2 dark:border-gray-700"
                       >
-                        <Text className="w-24 px-3 text-sm">
+                        <Text className="w-24 px-3 text-sm text-gray-900 dark:text-gray-100">
                           {material.name}
                         </Text>
-                        <Text className="w-20 px-3 text-sm">
+                        <Text className="w-20 px-3 text-sm text-gray-900 dark:text-gray-100">
                           {material.spec}
                         </Text>
-                        <Text className="w-20 px-3 text-sm">
+                        <Text className="w-20 px-3 text-sm text-gray-900 dark:text-gray-100">
                           {material.plan}
                         </Text>
-                        <Text className="w-20 px-3 text-sm">
+                        <Text className="w-20 px-3 text-sm text-gray-900 dark:text-gray-100">
                           {material.used}
                         </Text>
-                        <Text className="w-20 px-3 text-sm">
+                        <Text className="w-20 px-3 text-sm text-gray-900 dark:text-gray-100">
                           {material.remain}
                         </Text>
                       </View>
@@ -530,17 +623,21 @@ const ProductionDetail = () => {
                 </ScrollView>
               </View>
 
-              <View className="mb-20 rounded-2xl bg-white p-4 shadow-sm">
-                <Text className="mb-3 text-base font-semibold">
+              <View className="mb-20 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+                <Text className="mb-3 text-base font-semibold text-gray-900 dark:text-gray-100">
                   物料消耗分析
                 </Text>
 
                 <View className="mb-4">
                   <View className="mb-1 flex-row justify-between text-sm">
-                    <Text>面料利用率</Text>
-                    <Text>92.5%</Text>
+                    <Text className="text-gray-900 dark:text-gray-100">
+                      面料利用率
+                    </Text>
+                    <Text className="text-gray-900 dark:text-gray-100">
+                      92.5%
+                    </Text>
                   </View>
-                  <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+                  <View className="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
                     <View
                       className="h-full rounded-full bg-green-500"
                       style={{ width: '92.5%' }}
@@ -550,10 +647,14 @@ const ProductionDetail = () => {
 
                 <View className="mb-4">
                   <View className="mb-1 flex-row justify-between text-sm">
-                    <Text>辅料消耗率</Text>
-                    <Text>75%</Text>
+                    <Text className="text-gray-900 dark:text-gray-100">
+                      辅料消耗率
+                    </Text>
+                    <Text className="text-gray-900 dark:text-gray-100">
+                      75%
+                    </Text>
                   </View>
-                  <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+                  <View className="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
                     <View
                       className="h-full rounded-full bg-blue-500"
                       style={{ width: '75%' }}
@@ -567,54 +668,60 @@ const ProductionDetail = () => {
           {/* 质量控制内容 */}
           {activeTab === 'quality-control' && (
             <View>
-              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
-                <Text className="mb-3 text-base font-semibold">
+              <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+                <Text className="mb-3 text-base font-semibold text-gray-900 dark:text-gray-100">
                   质量检验标准
                 </Text>
 
                 <View className="mb-4">
-                  <Text className="mb-1 text-sm font-medium">面料质量</Text>
-                  <Text className="text-sm text-gray-700">
+                  <Text className="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+                    面料质量
+                  </Text>
+                  <Text className="text-sm text-gray-700 dark:text-gray-300">
                     面料平整度≥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">
+                  <Text className="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+                    缝制质量
+                  </Text>
+                  <Text className="text-sm text-gray-700 dark:text-gray-300">
                     针距均匀度≥98%，接缝平整，无跳针、断线现象
                   </Text>
                 </View>
 
                 <View>
-                  <Text className="mb-1 text-sm font-medium">外观质量</Text>
-                  <Text className="text-sm text-gray-700">
+                  <Text className="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+                    外观质量
+                  </Text>
+                  <Text className="text-sm text-gray-700 dark:text-gray-300">
                     无明显瑕疵，装饰部件牢固，整体外观符合设计要求
                   </Text>
                 </View>
               </View>
 
-              <View className="mb-10 rounded-2xl bg-white p-4 shadow-sm">
-                <Text className="mb-3 text-base font-semibold">
+              <View className="mb-10 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+                <Text className="mb-3 text-base font-semibold text-gray-900 dark:text-gray-100">
                   质量检验记录
                 </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">
+                    <View className="flex-row bg-gray-50 py-2 dark:bg-gray-700">
+                      <Text className="w-24 px-3 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
                         批次
                       </Text>
-                      <Text className="w-24 px-3 text-xs font-medium uppercase text-gray-500">
+                      <Text className="w-24 px-3 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
                         检验日期
                       </Text>
-                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500">
+                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
                         检验数量
                       </Text>
-                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500">
+                      <Text className="w-20 px-3 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
                         合格率
                       </Text>
-                      <Text className="w-24 px-3 text-xs font-medium uppercase text-gray-500">
+                      <Text className="w-24 px-3 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">
                         检验员
                       </Text>
                     </View>
@@ -644,17 +751,21 @@ const ProductionDetail = () => {
                     ].map((record, index) => (
                       <View
                         key={index}
-                        className="flex-row border-t border-gray-200 py-2"
+                        className="flex-row border-t border-gray-200 py-2 dark:border-gray-700"
                       >
-                        <Text className="w-24 px-3 text-sm">
+                        <Text className="w-24 px-3 text-sm text-gray-900 dark:text-gray-100">
                           {record.batch}
                         </Text>
-                        <Text className="w-24 px-3 text-sm">{record.date}</Text>
-                        <Text className="w-20 px-3 text-sm">
+                        <Text className="w-24 px-3 text-sm text-gray-900 dark:text-gray-100">
+                          {record.date}
+                        </Text>
+                        <Text className="w-20 px-3 text-sm text-gray-900 dark:text-gray-100">
                           {record.count}
                         </Text>
-                        <Text className="w-20 px-3 text-sm">{record.rate}</Text>
-                        <Text className="w-24 px-3 text-sm">
+                        <Text className="w-20 px-3 text-sm text-gray-900 dark:text-gray-100">
+                          {record.rate}
+                        </Text>
+                        <Text className="w-24 px-3 text-sm text-gray-900 dark:text-gray-100">
                           {record.inspector}
                         </Text>
                       </View>
diff --git a/src/app/production/equipment/[id].tsx b/src/app/production/equipment/[id].tsx
index 0b2930aad3158dd58ddd8b68d22123bbb2ea1d31..19b8cee44dd342c0e56c2ac430910e2394ca2fa2 100644
--- a/src/app/production/equipment/[id].tsx
+++ b/src/app/production/equipment/[id].tsx
@@ -1,11 +1,19 @@
 import React, { useState } from 'react';
 import { TouchableOpacity } from 'react-native';
 
-import { NavHeader, ScrollView, Text, View, SafeAreaView } from '@/components/ui';
+import {
+  NavHeader,
+  SafeAreaView,
+  ScrollView,
+  Text,
+  View,
+} from '@/components/ui';
 import { FontAwesome } from '@/components/ui/icons';
+import { useAppColorScheme } from '@/lib';
 
 const EquipmentDetail = () => {
   const [activeTab, setActiveTab] = useState('running-data');
+  const { isDark } = useAppColorScheme();
 
   // 切换选项卡
   const handleTabChange = (tabId: string) => {
@@ -13,99 +21,131 @@ const EquipmentDetail = () => {
   };
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-50">
+    <SafeAreaView className="flex-1 bg-gray-50 dark:bg-gray-900">
       <NavHeader title="设备明细" />
       <ScrollView className="flex-1 p-4">
         {/* 设备基本信息卡片 */}
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
           <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>
+            <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              贴片机 #SMT-2023-01
+            </Text>
+            <View className="rounded-full bg-green-100 px-2 py-1 dark:bg-green-900/30">
+              <Text className="text-xs font-medium text-green-800 dark:text-green-300">
+                运行中
+              </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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                负责人
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                张工程师
+              </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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                位置
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                生产车间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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                品牌型号
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                松下 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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                购入日期
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                运行状态
+              </Text>
+              <Text className="text-sm font-medium text-green-600 dark:text-green-400">
+                正常
+              </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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                今日产能
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                850件
+              </Text>
             </View>
           </View>
 
-          <View className="rounded-lg bg-blue-50 p-3">
+          <View className="rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
             <View className="flex-row items-center">
               <FontAwesome
                 name="bell"
                 size={16}
-                color="#3b82f6"
+                color={isDark ? '#60a5fa' : '#3b82f6'}
                 className="mr-2"
               />
               <View>
-                <Text className="text-sm font-medium">设备警报</Text>
-                <Text className="text-sm">无异常警报</Text>
+                <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                  设备警报
+                </Text>
+                <Text className="text-sm text-gray-700 dark:text-gray-300">
+                  无异常警报
+                </Text>
               </View>
             </View>
           </View>
         </View>
 
         {/* 选项卡 - 分段控制器样式 */}
-        <View className="mb-10 flex-row rounded-lg bg-gray-200 p-1">
+        <View className="mb-10 flex-row rounded-lg bg-gray-200 p-1 dark:bg-gray-700">
           <TouchableOpacity
-            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'running-data' ? 'bg-white' : ''}`}
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'running-data' ? 'bg-white dark:bg-gray-600' : ''}`}
             onPress={() => handleTabChange('running-data')}
           >
             <Text
-              className={`text-center text-sm ${activeTab === 'running-data' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+              className={`text-center text-sm ${activeTab === 'running-data' ? 'font-medium text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'}`}
             >
               运行数据
             </Text>
           </TouchableOpacity>
           <TouchableOpacity
-            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'maintenance-records' ? 'bg-white' : ''}`}
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'maintenance-records' ? 'bg-white dark:bg-gray-600' : ''}`}
             onPress={() => handleTabChange('maintenance-records')}
           >
             <Text
-              className={`text-center text-sm ${activeTab === 'maintenance-records' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+              className={`text-center text-sm ${activeTab === 'maintenance-records' ? 'font-medium text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'}`}
             >
               维护记录
             </Text>
           </TouchableOpacity>
           <TouchableOpacity
-            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'performance-params' ? 'bg-white' : ''}`}
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'performance-params' ? 'bg-white dark:bg-gray-600' : ''}`}
             onPress={() => handleTabChange('performance-params')}
           >
             <Text
-              className={`text-center text-sm ${activeTab === 'performance-params' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+              className={`text-center text-sm ${activeTab === 'performance-params' ? 'font-medium text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'}`}
             >
               性能参数
             </Text>
           </TouchableOpacity>
           <TouchableOpacity
-            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'fault-records' ? 'bg-white' : ''}`}
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'fault-records' ? 'bg-white dark:bg-gray-600' : ''}`}
             onPress={() => handleTabChange('fault-records')}
           >
             <Text
-              className={`text-center text-sm ${activeTab === 'fault-records' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+              className={`text-center text-sm ${activeTab === 'fault-records' ? 'font-medium text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'}`}
             >
               故障记录
             </Text>
@@ -117,19 +157,23 @@ const EquipmentDetail = () => {
         {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-10 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+              <Text className="mb-3 font-medium text-gray-900 dark:text-gray-100">
+                设备监控
+              </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">
+                <Text className="mb-2 text-sm font-medium text-gray-900 dark:text-gray-100">
+                  实时监控
+                </Text>
+                <View className="flex h-40 items-center justify-center rounded-lg bg-gray-50 dark:bg-gray-700">
                   <View className="items-center">
                     <FontAwesome
                       name="video-camera"
                       size={24}
-                      color="#3b82f6"
+                      color={isDark ? '#60a5fa' : '#3b82f6'}
                     />
-                    <Text className="mt-2 text-sm text-gray-500">
+                    <Text className="mt-2 text-sm text-gray-500 dark:text-gray-400">
                       设备实时监控画面
                     </Text>
                   </View>
@@ -138,28 +182,40 @@ const EquipmentDetail = () => {
 
               <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 className="mb-1 text-xs text-gray-500 dark:text-gray-400">
                     今日运行时长
                   </Text>
-                  <Text className="font-medium">8.5小时</Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    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>
+                  <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                    今日产能
+                  </Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    850件
+                  </Text>
                 </View>
                 <View className="mb-3 w-1/2">
-                  <Text className="mb-1 text-xs text-gray-500">
+                  <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
                     平均贴片速度
                   </Text>
-                  <Text className="font-medium">0.1秒/个</Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    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>
+                  <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                    良品率
+                  </Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    99.2%
+                  </Text>
                 </View>
               </View>
 
-              <View className="mb-4 rounded-lg bg-green-50 p-3">
+              <View className="mb-4 rounded-lg bg-green-50 p-3 dark:bg-green-900/20">
                 <View className="flex-row items-center">
                   <FontAwesome
                     name="check-circle"
@@ -168,8 +224,10 @@ const EquipmentDetail = () => {
                     className="mr-2"
                   />
                   <View>
-                    <Text className="text-sm font-medium">设备状态良好</Text>
-                    <Text className="text-sm">
+                    <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                      设备状态良好
+                    </Text>
+                    <Text className="text-sm text-gray-700 dark:text-gray-300">
                       下次计划维护时间：2023-12-15
                     </Text>
                   </View>
@@ -181,40 +239,48 @@ const EquipmentDetail = () => {
 
         {/* 维护记录 */}
         {activeTab === 'maintenance-records' && (
-          <View className="mb-10 rounded-2xl bg-white p-4 shadow-sm">
-            <Text className="mb-3 font-medium">维护记录</Text>
+          <View className="mb-10 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 font-medium text-gray-900 dark:text-gray-100">
+              维护记录
+            </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">
+              <View className="border-b border-gray-200 dark:border-gray-700">
+                <View className="flex-row bg-gray-50 dark:bg-gray-700">
+                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500 dark:text-gray-400">
                     日期
                   </Text>
-                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500">
+                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500 dark:text-gray-400">
                     维护类型
                   </Text>
-                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500">
+                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500 dark:text-gray-400">
                     维护人员
                   </Text>
-                  <Text className="w-32 px-2 py-3 text-xs font-medium text-gray-500">
+                  <Text className="w-32 px-2 py-3 text-xs font-medium text-gray-500 dark:text-gray-400">
                     维护内容
                   </Text>
-                  <Text className="w-20 px-2 py-3 text-xs font-medium text-gray-500">
+                  <Text className="w-20 px-2 py-3 text-xs font-medium text-gray-500 dark:text-gray-400">
                     状态
                   </Text>
                 </View>
 
-                <View className="border-t border-gray-200">
+                <View className="border-t border-gray-200 dark:border-gray-700">
                   <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 className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      2023-11-15
+                    </Text>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      例行保养
+                    </Text>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      王工程师
+                    </Text>
+                    <Text className="w-32 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
                       清洁、润滑、校准
                     </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">
+                      <View className="rounded-full bg-blue-100 px-2 py-1 dark:bg-blue-900/30">
+                        <Text className="text-center text-xs text-blue-800 dark:text-blue-300">
                           已完成
                         </Text>
                       </View>
@@ -222,15 +288,23 @@ const EquipmentDetail = () => {
                   </View>
                 </View>
 
-                <View className="border-t border-gray-200">
+                <View className="border-t border-gray-200 dark:border-gray-700">
                   <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>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      2023-10-20
+                    </Text>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      部件更换
+                    </Text>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      李工程师
+                    </Text>
+                    <Text className="w-32 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      更换吸嘴组件
+                    </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">
+                      <View className="rounded-full bg-blue-100 px-2 py-1 dark:bg-blue-900/30">
+                        <Text className="text-center text-xs text-blue-800 dark:text-blue-300">
                           已完成
                         </Text>
                       </View>
@@ -238,17 +312,23 @@ const EquipmentDetail = () => {
                   </View>
                 </View>
 
-                <View className="border-t border-gray-200">
+                <View className="border-t border-gray-200 dark:border-gray-700">
                   <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 className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      2023-09-10
+                    </Text>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      例行保养
+                    </Text>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      王工程师
+                    </Text>
+                    <Text className="w-32 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
                       清洁、润滑、校准
                     </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">
+                      <View className="rounded-full bg-blue-100 px-2 py-1 dark:bg-blue-900/30">
+                        <Text className="text-center text-xs text-blue-800 dark:text-blue-300">
                           已完成
                         </Text>
                       </View>
@@ -262,39 +342,61 @@ const EquipmentDetail = () => {
 
         {/* 性能参数 */}
         {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-10 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 font-medium text-gray-900 dark:text-gray-100">
+              性能参数
+            </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>
+                <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                  设备温度
+                </Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  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>
+                <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                  电机转速
+                </Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  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>
+                <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                  电压
+                </Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  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>
+                <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                  电流
+                </Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  5.2A
+                </Text>
               </View>
             </View>
 
-            <View className="rounded-lg bg-blue-50 p-3">
+            <View className="rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
               <View className="flex-row items-center">
                 <FontAwesome
                   name="bell"
                   size={16}
-                  color="#3b82f6"
+                  color={isDark ? '#60a5fa' : '#3b82f6'}
                   className="mr-2"
                 />
                 <View>
-                  <Text className="text-sm font-medium">设备警报</Text>
-                  <Text className="text-sm">无异常警报</Text>
+                  <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                    设备警报
+                  </Text>
+                  <Text className="text-sm text-gray-700 dark:text-gray-300">
+                    无异常警报
+                  </Text>
                 </View>
               </View>
             </View>
@@ -303,56 +405,88 @@ const EquipmentDetail = () => {
 
         {/* 故障记录 */}
         {activeTab === 'fault-records' && (
-          <View className="mb-10 rounded-2xl bg-white p-4 shadow-sm">
-            <Text className="mb-3 font-medium">故障记录</Text>
+          <View className="mb-10 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 font-medium text-gray-900 dark:text-gray-100">
+              故障记录
+            </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">
+              <View className="border-b border-gray-200 dark:border-gray-700">
+                <View className="flex-row bg-gray-50 dark:bg-gray-700">
+                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500 dark:text-gray-400">
                     日期
                   </Text>
-                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500">
+                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500 dark:text-gray-400">
                     故障类型
                   </Text>
-                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500">
+                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500 dark:text-gray-400">
                     处理人员
                   </Text>
-                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500">
+                  <Text className="w-24 px-2 py-3 text-xs font-medium text-gray-500 dark:text-gray-400">
                     处理方法
                   </Text>
-                  <Text className="w-20 px-2 py-3 text-xs font-medium text-gray-500">
+                  <Text className="w-20 px-2 py-3 text-xs font-medium text-gray-500 dark:text-gray-400">
                     停机时长
                   </Text>
                 </View>
 
-                <View className="border-t border-gray-200">
+                <View className="border-t border-gray-200 dark:border-gray-700">
                   <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>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      2023-11-05
+                    </Text>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      吸嘴堵塞
+                    </Text>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      王工程师
+                    </Text>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      清洗吸嘴
+                    </Text>
+                    <Text className="w-20 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      2小时
+                    </Text>
                   </View>
                 </View>
 
-                <View className="border-t border-gray-200">
+                <View className="border-t border-gray-200 dark:border-gray-700">
                   <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>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      2023-10-12
+                    </Text>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      供料器卡料
+                    </Text>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      李工程师
+                    </Text>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      调整供料器
+                    </Text>
+                    <Text className="w-20 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      1.5小时
+                    </Text>
                   </View>
                 </View>
 
-                <View className="border-t border-gray-200">
+                <View className="border-t border-gray-200 dark:border-gray-700">
                   <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>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      2023-09-25
+                    </Text>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      视觉系统异常
+                    </Text>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      张工程师
+                    </Text>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      重新校准
+                    </Text>
+                    <Text className="w-20 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      3小时
+                    </Text>
                   </View>
                 </View>
               </View>
diff --git a/src/app/production/plan/[id].tsx b/src/app/production/plan/[id].tsx
index 4601a7b86ad2b65821f694628b7df584f9c73135..0e7598ecf24f13a8df728644fe393209ce7c0832 100644
--- a/src/app/production/plan/[id].tsx
+++ b/src/app/production/plan/[id].tsx
@@ -1,16 +1,13 @@
 import React, { useState } from 'react';
-import {
-  ScrollView,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 
 import { NavHeader, SafeAreaView } from '@/components/ui';
 import { FontAwesome } from '@/components/ui/icons';
+import { useAppColorScheme } from '@/lib';
 
 const ProductionPlanDetail = () => {
   const [activeTab, setActiveTab] = useState('plan-details');
+  const { isDark } = useAppColorScheme();
 
   // 切换选项卡
   const handleTabChange = (tabId: string) => {
@@ -18,16 +15,24 @@ const ProductionPlanDetail = () => {
   };
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-50">
+    <SafeAreaView className="flex-1 bg-gray-50 dark:bg-gray-900">
       <NavHeader
         title="计划详情"
         right={
           <>
             <TouchableOpacity className="mr-4">
-              <FontAwesome name="share-alt" size={18} color="#4b5563" />
+              <FontAwesome
+                name="share-alt"
+                size={18}
+                color={isDark ? '#9ca3af' : '#4b5563'}
+              />
             </TouchableOpacity>
             <TouchableOpacity>
-              <FontAwesome name="ellipsis-v" size={18} color="#4b5563" />
+              <FontAwesome
+                name="ellipsis-v"
+                size={18}
+                color={isDark ? '#9ca3af' : '#4b5563'}
+              />
             </TouchableOpacity>
           </>
         }
@@ -35,11 +40,13 @@ const ProductionPlanDetail = () => {
 
       <ScrollView className="mb-20 flex-1 p-4">
         {/* 计划基本信息 */}
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
           <View className="mb-3 flex-row items-start justify-between">
-            <Text className="text-lg font-semibold">智能手表主板生产计划</Text>
-            <View className="rounded-full bg-purple-100 px-2 py-1">
-              <Text className="text-xs font-medium text-purple-800">
+            <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              智能手表主板生产计划
+            </Text>
+            <View className="rounded-full bg-purple-100 px-2 py-1 dark:bg-purple-900/30">
+              <Text className="text-xs font-medium text-purple-800 dark:text-purple-300">
                 进行中
               </Text>
             </View>
@@ -47,28 +54,50 @@ const ProductionPlanDetail = () => {
 
           <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">PP20231128-01</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                计划编号
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                PP20231128-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">王工程师</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                负责人
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                王工程师
+              </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-30</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                开始日期
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                2023-11-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">2023-12-15</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                截止日期
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                2023-12-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">1000件</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                计划产量
+              </Text>
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                1000件
+              </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-blue-600">
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                已完成
+              </Text>
+              <Text className="text-sm font-medium text-blue-600 dark:text-blue-400">
                 650件 (65%)
               </Text>
             </View>
@@ -76,60 +105,62 @@ const ProductionPlanDetail = () => {
 
           <View className="mb-3">
             <View className="mb-1 flex-row justify-between text-sm">
-              <Text>完成进度</Text>
-              <Text>65%</Text>
+              <Text className="text-gray-900 dark:text-gray-100">完成进度</Text>
+              <Text className="text-gray-900 dark:text-gray-100">65%</Text>
             </View>
-            <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+            <View className="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
               <View className="h-full bg-blue-600" style={{ width: '65%' }} />
             </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">
+          <View className="rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
+            <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+              计划描述
+            </Text>
+            <Text className="text-sm text-gray-900 dark:text-gray-100">
               智能手表主板生产计划，包括PCB制作、元器件采购、SMT贴片和功能测试等工序。本批次为1000件，优先级高。
             </Text>
           </View>
         </View>
 
         {/* 选项卡 - 分段控制器样式 */}
-        <View className="mb-4 flex-row rounded-lg bg-gray-200 p-1">
+        <View className="mb-4 flex-row rounded-lg bg-gray-200 p-1 dark:bg-gray-700">
           <TouchableOpacity
-            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'plan-details' ? 'bg-white' : ''}`}
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'plan-details' ? 'bg-white dark:bg-gray-600' : ''}`}
             onPress={() => handleTabChange('plan-details')}
           >
             <Text
-              className={`text-center text-sm ${activeTab === 'plan-details' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+              className={`text-center text-sm ${activeTab === 'plan-details' ? 'font-medium text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'}`}
             >
               计划详情
             </Text>
           </TouchableOpacity>
           <TouchableOpacity
-            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'production-progress' ? 'bg-white' : ''}`}
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'production-progress' ? 'bg-white dark:bg-gray-600' : ''}`}
             onPress={() => handleTabChange('production-progress')}
           >
             <Text
-              className={`text-center text-sm ${activeTab === 'production-progress' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+              className={`text-center text-sm ${activeTab === 'production-progress' ? 'font-medium text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'}`}
             >
               生产进度
             </Text>
           </TouchableOpacity>
           <TouchableOpacity
-            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'material-info' ? 'bg-white' : ''}`}
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'material-info' ? 'bg-white dark:bg-gray-600' : ''}`}
             onPress={() => handleTabChange('material-info')}
           >
             <Text
-              className={`text-center text-sm ${activeTab === 'material-info' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+              className={`text-center text-sm ${activeTab === 'material-info' ? 'font-medium text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'}`}
             >
               物料信息
             </Text>
           </TouchableOpacity>
           <TouchableOpacity
-            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'team-info' ? 'bg-white' : ''}`}
+            className={`flex-1 rounded-md px-3 py-2 ${activeTab === 'team-info' ? 'bg-white dark:bg-gray-600' : ''}`}
             onPress={() => handleTabChange('team-info')}
           >
             <Text
-              className={`text-center text-sm ${activeTab === 'team-info' ? 'font-medium text-blue-600' : 'text-gray-600'}`}
+              className={`text-center text-sm ${activeTab === 'team-info' ? 'font-medium text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'}`}
             >
               团队信息
             </Text>
@@ -139,15 +170,19 @@ const ProductionPlanDetail = () => {
         {/* 选项卡内容区域 */}
         {/* 计划详情 */}
         {activeTab === 'plan-details' && (
-          <View className="rounded-2xl bg-white p-4 shadow-sm">
-            <Text className="mb-3 text-base font-medium">工序安排</Text>
+          <View className="rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 text-base font-medium text-gray-900 dark:text-gray-100">
+              工序安排
+            </Text>
 
             {/* 工序1 */}
-            <View className="mb-3 overflow-hidden rounded-lg border border-gray-100">
-              <View className="flex-row items-center justify-between bg-gray-50 p-3">
-                <Text className="font-medium">PCB制板</Text>
-                <View className="rounded-full bg-green-100 px-2 py-1">
-                  <Text className="text-xs font-medium text-green-800">
+            <View className="mb-3 overflow-hidden rounded-lg border border-gray-100 dark:border-gray-700">
+              <View className="flex-row items-center justify-between bg-gray-50 p-3 dark:bg-gray-700">
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  PCB制板
+                </Text>
+                <View className="rounded-full bg-green-100 px-2 py-1 dark:bg-green-900/30">
+                  <Text className="text-xs font-medium text-green-800 dark:text-green-300">
                     已完成
                   </Text>
                 </View>
@@ -155,27 +190,39 @@ const ProductionPlanDetail = () => {
               <View className="p-3">
                 <View className="mb-2 flex-row justify-between">
                   <View>
-                    <Text className="text-xs text-gray-500">负责人</Text>
-                    <Text className="text-sm">李工程师</Text>
+                    <Text className="text-xs text-gray-500 dark:text-gray-400">
+                      负责人
+                    </Text>
+                    <Text className="text-sm text-gray-900 dark:text-gray-100">
+                      李工程师
+                    </Text>
                   </View>
                   <View>
-                    <Text className="text-xs text-gray-500">完成时间</Text>
-                    <Text className="text-sm">2023-12-02</Text>
+                    <Text className="text-xs text-gray-500 dark:text-gray-400">
+                      完成时间
+                    </Text>
+                    <Text className="text-sm text-gray-900 dark:text-gray-100">
+                      2023-12-02
+                    </Text>
                   </View>
                 </View>
-                <Text className="mb-1 text-xs text-gray-500">备注</Text>
-                <Text className="text-sm">
+                <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                  备注
+                </Text>
+                <Text className="text-sm text-gray-900 dark:text-gray-100">
                   PCB制板工序已完成，质检合格率98.5%
                 </Text>
               </View>
             </View>
 
             {/* 工序2 */}
-            <View className="mb-3 overflow-hidden rounded-lg border border-gray-100">
-              <View className="flex-row items-center justify-between bg-gray-50 p-3">
-                <Text className="font-medium">SMT贴片</Text>
-                <View className="rounded-full bg-purple-100 px-2 py-1">
-                  <Text className="text-xs font-medium text-purple-800">
+            <View className="mb-3 overflow-hidden rounded-lg border border-gray-100 dark:border-gray-700">
+              <View className="flex-row items-center justify-between bg-gray-50 p-3 dark:bg-gray-700">
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  SMT贴片
+                </Text>
+                <View className="rounded-full bg-purple-100 px-2 py-1 dark:bg-purple-900/30">
+                  <Text className="text-xs font-medium text-purple-800 dark:text-purple-300">
                     进行中
                   </Text>
                 </View>
@@ -183,25 +230,39 @@ const ProductionPlanDetail = () => {
               <View className="p-3">
                 <View className="mb-2 flex-row justify-between">
                   <View>
-                    <Text className="text-xs text-gray-500">负责人</Text>
-                    <Text className="text-sm">张工程师</Text>
+                    <Text className="text-xs text-gray-500 dark:text-gray-400">
+                      负责人
+                    </Text>
+                    <Text className="text-sm text-gray-900 dark:text-gray-100">
+                      张工程师
+                    </Text>
                   </View>
                   <View>
-                    <Text className="text-xs text-gray-500">预计完成</Text>
-                    <Text className="text-sm">2023-12-08</Text>
+                    <Text className="text-xs text-gray-500 dark:text-gray-400">
+                      预计完成
+                    </Text>
+                    <Text className="text-sm text-gray-900 dark:text-gray-100">
+                      2023-12-08
+                    </Text>
                   </View>
                 </View>
-                <Text className="mb-1 text-xs text-gray-500">进度</Text>
-                <Text className="text-sm">已完成650块主板贴片，正在进行中</Text>
+                <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                  进度
+                </Text>
+                <Text className="text-sm text-gray-900 dark:text-gray-100">
+                  已完成650块主板贴片，正在进行中
+                </Text>
               </View>
             </View>
 
             {/* 工序3 */}
-            <View className="overflow-hidden rounded-lg border border-gray-100">
-              <View className="flex-row items-center justify-between bg-gray-50 p-3">
-                <Text className="font-medium">功能测试</Text>
-                <View className="rounded-full bg-orange-100 px-2 py-1">
-                  <Text className="text-xs font-medium text-orange-800">
+            <View className="overflow-hidden rounded-lg border border-gray-100 dark:border-gray-700">
+              <View className="flex-row items-center justify-between bg-gray-50 p-3 dark:bg-gray-700">
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  功能测试
+                </Text>
+                <View className="rounded-full bg-orange-100 px-2 py-1 dark:bg-orange-900/30">
+                  <Text className="text-xs font-medium text-orange-800 dark:text-orange-300">
                     待开始
                   </Text>
                 </View>
@@ -209,16 +270,28 @@ const ProductionPlanDetail = () => {
               <View className="p-3">
                 <View className="mb-2 flex-row justify-between">
                   <View>
-                    <Text className="text-xs text-gray-500">负责人</Text>
-                    <Text className="text-sm">赵工程师</Text>
+                    <Text className="text-xs text-gray-500 dark:text-gray-400">
+                      负责人
+                    </Text>
+                    <Text className="text-sm text-gray-900 dark:text-gray-100">
+                      赵工程师
+                    </Text>
                   </View>
                   <View>
-                    <Text className="text-xs text-gray-500">预计开始</Text>
-                    <Text className="text-sm">2023-12-09</Text>
+                    <Text className="text-xs text-gray-500 dark:text-gray-400">
+                      预计开始
+                    </Text>
+                    <Text className="text-sm text-gray-900 dark:text-gray-100">
+                      2023-12-09
+                    </Text>
                   </View>
                 </View>
-                <Text className="mb-1 text-xs text-gray-500">备注</Text>
-                <Text className="text-sm">等待SMT贴片完成后进行功能测试</Text>
+                <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                  备注
+                </Text>
+                <Text className="text-sm text-gray-900 dark:text-gray-100">
+                  等待SMT贴片完成后进行功能测试
+                </Text>
               </View>
             </View>
           </View>
@@ -226,85 +299,125 @@ const ProductionPlanDetail = () => {
 
         {/* 生产进度 */}
         {activeTab === 'production-progress' && (
-          <View className="rounded-2xl bg-white p-4 shadow-sm">
-            <Text className="mb-3 text-base font-medium">生产进度概览</Text>
+          <View className="rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 text-base font-medium text-gray-900 dark:text-gray-100">
+              生产进度概览
+            </Text>
 
             <View className="mb-4">
               <View className="mb-1 flex-row justify-between text-sm">
-                <Text>总体进度</Text>
-                <Text>65%</Text>
+                <Text className="text-gray-900 dark:text-gray-100">
+                  总体进度
+                </Text>
+                <Text className="text-gray-900 dark:text-gray-100">65%</Text>
               </View>
-              <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+              <View className="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
                 <View className="h-full bg-blue-600" style={{ width: '65%' }} />
               </View>
             </View>
 
             <View className="mb-4 flex-row justify-between">
               <View className="items-center">
-                <Text className="text-xl font-bold text-green-600">100%</Text>
-                <Text className="text-xs text-gray-500">PCB制板</Text>
+                <Text className="text-xl font-bold text-green-600 dark:text-green-400">
+                  100%
+                </Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  PCB制板
+                </Text>
               </View>
               <View className="items-center">
-                <Text className="text-xl font-bold text-blue-600">65%</Text>
-                <Text className="text-xs text-gray-500">SMT贴片</Text>
+                <Text className="text-xl font-bold text-blue-600 dark:text-blue-400">
+                  65%
+                </Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  SMT贴片
+                </Text>
               </View>
               <View className="items-center">
                 <Text className="text-xl font-bold text-gray-400">0%</Text>
-                <Text className="text-xs text-gray-500">功能测试</Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  功能测试
+                </Text>
               </View>
             </View>
 
-            <Text className="mb-3 text-base font-medium">生产时间线</Text>
+            <Text className="mb-3 text-base font-medium text-gray-900 dark:text-gray-100">
+              生产时间线
+            </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-4 w-0.5 bg-gray-200" />
-              <Text className="text-sm font-medium">计划创建</Text>
-              <Text className="text-xs text-gray-500">2023-11-28 10:30</Text>
+              <View className="absolute bottom-0 left-3 top-4 w-0.5 bg-gray-200 dark:bg-gray-600" />
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                计划创建
+              </Text>
+              <Text className="text-xs text-gray-500 dark:text-gray-400">
+                2023-11-28 10: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-4 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 className="absolute bottom-0 left-3 top-4 w-0.5 bg-gray-200 dark:bg-gray-600" />
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                物料准备完成
+              </Text>
+              <Text className="text-xs text-gray-500 dark:text-gray-400">
+                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-4 w-0.5 bg-gray-200" />
-              <Text className="text-sm font-medium">PCB制板开始</Text>
-              <Text className="text-xs text-gray-500">2023-11-30 09:15</Text>
+              <View className="absolute bottom-0 left-3 top-4 w-0.5 bg-gray-200 dark:bg-gray-600" />
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                PCB制板开始
+              </Text>
+              <Text className="text-xs text-gray-500 dark:text-gray-400">
+                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-4 w-0.5 bg-gray-200" />
-              <Text className="text-sm font-medium">PCB制板完成</Text>
-              <Text className="text-xs text-gray-500">2023-12-02 11:30</Text>
+              <View className="absolute bottom-0 left-3 top-4 w-0.5 bg-gray-200 dark:bg-gray-600" />
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                PCB制板完成
+              </Text>
+              <Text className="text-xs text-gray-500 dark:text-gray-400">
+                2023-12-02 11: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-4 w-0.5 bg-gray-200" />
-              <Text className="text-sm font-medium">SMT贴片开始</Text>
-              <Text className="text-xs text-gray-500">2023-12-03 08:00</Text>
+              <View className="absolute bottom-0 left-3 top-4 w-0.5 bg-gray-200 dark:bg-gray-600" />
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                SMT贴片开始
+              </Text>
+              <Text className="text-xs text-gray-500 dark:text-gray-400">
+                2023-12-03 08:00
+              </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-4 w-0.5 bg-gray-200" />
-              <Text className="text-sm font-medium">SMT贴片进行中</Text>
-              <Text className="text-xs text-gray-500">2023-12-05 14:30</Text>
-              <Text className="mt-1 text-xs text-blue-600">
+              <View className="absolute bottom-0 left-3 top-4 w-0.5 bg-gray-200 dark:bg-gray-600" />
+              <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                SMT贴片进行中
+              </Text>
+              <Text className="text-xs text-gray-500 dark:text-gray-400">
+                2023-12-05 14:30
+              </Text>
+              <Text className="mt-1 text-xs text-blue-600 dark:text-blue-400">
                 已完成650件，剩余350件
               </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-4 w-0.5 bg-gray-200" />
+              <View className="absolute left-2 top-1 size-2.5 rounded-full bg-gray-200 dark:bg-gray-600" />
+              <View className="absolute bottom-0 left-3 top-4 w-0.5 bg-gray-200 dark:bg-gray-600" />
               <Text className="text-sm font-medium text-gray-400">
                 SMT贴片完成
               </Text>
@@ -312,8 +425,8 @@ const ProductionPlanDetail = () => {
             </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-4 w-0.5 bg-gray-200" />
+              <View className="absolute left-2 top-1 size-2.5 rounded-full bg-gray-200 dark:bg-gray-600" />
+              <View className="absolute bottom-0 left-3 top-4 w-0.5 bg-gray-200 dark:bg-gray-600" />
               <Text className="text-sm font-medium text-gray-400">
                 功能测试
               </Text>
@@ -323,7 +436,7 @@ const ProductionPlanDetail = () => {
             </View>
 
             <View className="relative pl-7">
-              <View className="absolute left-2 top-1 size-2.5 rounded-full bg-gray-200" />
+              <View className="absolute left-2 top-1 size-2.5 rounded-full bg-gray-200 dark:bg-gray-600" />
               <Text className="text-sm font-medium text-gray-400">
                 计划完成
               </Text>
@@ -334,79 +447,123 @@ const ProductionPlanDetail = () => {
 
         {/* 物料信息 */}
         {activeTab === 'material-info' && (
-          <View className="rounded-2xl bg-white p-4 shadow-sm">
-            <Text className="mb-3 text-base font-medium">物料清单</Text>
+          <View className="rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 text-base font-medium text-gray-900 dark:text-gray-100">
+              物料清单
+            </Text>
 
             {/* 物料项目1 */}
-            <View className="border-b border-gray-100 py-3">
+            <View className="border-b border-gray-100 py-3 dark:border-gray-700">
               <View className="mb-1 flex-row justify-between">
-                <Text className="font-medium">PCB空板</Text>
-                <Text className="text-sm text-green-600">已到货</Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  PCB空板
+                </Text>
+                <Text className="text-sm text-green-600 dark:text-green-400">
+                  已到货
+                </Text>
               </View>
-              <Text className="mb-1 text-sm text-gray-600">
+              <Text className="mb-1 text-sm text-gray-600 dark:text-gray-300">
                 规格：4层板 / FR-4 / 1.6mm
               </Text>
               <View className="flex-row justify-between text-sm">
-                <Text>需求数量：1050片</Text>
-                <Text>库存数量：1100片</Text>
+                <Text className="text-gray-900 dark:text-gray-100">
+                  需求数量：1050片
+                </Text>
+                <Text className="text-gray-900 dark:text-gray-100">
+                  库存数量：1100片
+                </Text>
               </View>
             </View>
 
             {/* 物料项目2 */}
-            <View className="border-b border-gray-100 py-3">
+            <View className="border-b border-gray-100 py-3 dark:border-gray-700">
               <View className="mb-1 flex-row justify-between">
-                <Text className="font-medium">主控芯片</Text>
-                <Text className="text-sm text-green-600">已到货</Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  主控芯片
+                </Text>
+                <Text className="text-sm text-green-600 dark:text-green-400">
+                  已到货
+                </Text>
               </View>
-              <Text className="mb-1 text-sm text-gray-600">
+              <Text className="mb-1 text-sm text-gray-600 dark:text-gray-300">
                 型号：STM32F103RCT6
               </Text>
               <View className="flex-row justify-between text-sm">
-                <Text>需求数量：1000个</Text>
-                <Text>库存数量：1200个</Text>
+                <Text className="text-gray-900 dark:text-gray-100">
+                  需求数量：1000个
+                </Text>
+                <Text className="text-gray-900 dark:text-gray-100">
+                  库存数量：1200个
+                </Text>
               </View>
             </View>
 
             {/* 物料项目3 */}
-            <View className="border-b border-gray-100 py-3">
+            <View className="border-b border-gray-100 py-3 dark:border-gray-700">
               <View className="mb-1 flex-row justify-between">
-                <Text className="font-medium">电容</Text>
-                <Text className="text-sm text-green-600">已到货</Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  电容
+                </Text>
+                <Text className="text-sm text-green-600 dark:text-green-400">
+                  已到货
+                </Text>
               </View>
-              <Text className="mb-1 text-sm text-gray-600">
+              <Text className="mb-1 text-sm text-gray-600 dark:text-gray-300">
                 规格：0402 / 0.1uF
               </Text>
               <View className="flex-row justify-between text-sm">
-                <Text>需求数量：10000个</Text>
-                <Text>库存数量：12000个</Text>
+                <Text className="text-gray-900 dark:text-gray-100">
+                  需求数量：10000个
+                </Text>
+                <Text className="text-gray-900 dark:text-gray-100">
+                  库存数量：12000个
+                </Text>
               </View>
             </View>
 
             {/* 物料项目4 */}
-            <View className="border-b border-gray-100 py-3">
+            <View className="border-b border-gray-100 py-3 dark:border-gray-700">
               <View className="mb-1 flex-row justify-between">
-                <Text className="font-medium">电阻</Text>
-                <Text className="text-sm text-green-600">已到货</Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  电阻
+                </Text>
+                <Text className="text-sm text-green-600 dark:text-green-400">
+                  已到货
+                </Text>
               </View>
-              <Text className="mb-1 text-sm text-gray-600">
+              <Text className="mb-1 text-sm text-gray-600 dark:text-gray-300">
                 规格：0402 / 10K
               </Text>
               <View className="flex-row justify-between text-sm">
-                <Text>需求数量：8000个</Text>
-                <Text>库存数量：9500个</Text>
+                <Text className="text-gray-900 dark:text-gray-100">
+                  需求数量：8000个
+                </Text>
+                <Text className="text-gray-900 dark:text-gray-100">
+                  库存数量：9500个
+                </Text>
               </View>
             </View>
 
             {/* 物料项目5 */}
             <View className="py-3">
               <View className="mb-1 flex-row justify-between">
-                <Text className="font-medium">蓝牙模块</Text>
-                <Text className="text-sm text-green-600">已到货</Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  蓝牙模块
+                </Text>
+                <Text className="text-sm text-green-600 dark:text-green-400">
+                  已到货
+                </Text>
               </View>
-              <Text className="mb-1 text-sm text-gray-600">型号：BLE4.2</Text>
+              <Text className="mb-1 text-sm text-gray-600 dark:text-gray-300">
+                型号：BLE4.2
+              </Text>
               <View className="flex-row justify-between text-sm">
-                <Text>需求数量：1000个</Text>
-                <Text>库存数量：1050个</Text>
+                <Text className="text-gray-900 dark:text-gray-100">
+                  需求数量：1000个
+                </Text>
+                <Text className="text-gray-900 dark:text-gray-100">
+                  库存数量：1050个
+                </Text>
               </View>
             </View>
           </View>
@@ -414,68 +571,86 @@ const ProductionPlanDetail = () => {
 
         {/* 团队信息 */}
         {activeTab === 'team-info' && (
-          <View className="rounded-2xl bg-white p-4 shadow-sm">
-            <Text className="mb-3 text-base font-medium">团队成员</Text>
+          <View className="rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 text-base font-medium text-gray-900 dark:text-gray-100">
+              团队成员
+            </Text>
 
             {/* 团队成员1 */}
-            <View className="flex-row border-b border-gray-100 py-3">
-              <View className="mr-3 size-10 items-center justify-center rounded-full bg-gray-200">
+            <View className="flex-row border-b border-gray-100 py-3 dark:border-gray-700">
+              <View className="mr-3 size-10 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700">
                 <FontAwesome name="user" size={16} color="#9ca3af" />
               </View>
               <View className="flex-1">
                 <View className="flex-row justify-between">
-                  <Text className="font-medium">王工程师</Text>
-                  <Text className="text-sm text-blue-600">项目负责人</Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    王工程师
+                  </Text>
+                  <Text className="text-sm text-blue-600 dark:text-blue-400">
+                    项目负责人
+                  </Text>
                 </View>
-                <Text className="text-sm text-gray-600">
+                <Text className="text-sm text-gray-600 dark:text-gray-300">
                   电子工程部 / 高级工程师
                 </Text>
               </View>
             </View>
 
             {/* 团队成员2 */}
-            <View className="flex-row border-b border-gray-100 py-3">
-              <View className="mr-3 size-10 items-center justify-center rounded-full bg-gray-200">
+            <View className="flex-row border-b border-gray-100 py-3 dark:border-gray-700">
+              <View className="mr-3 size-10 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700">
                 <FontAwesome name="user" size={16} color="#9ca3af" />
               </View>
               <View className="flex-1">
                 <View className="flex-row justify-between">
-                  <Text className="font-medium">李工程师</Text>
-                  <Text className="text-sm text-gray-600">PCB制板负责人</Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    李工程师
+                  </Text>
+                  <Text className="text-sm text-gray-600 dark:text-gray-300">
+                    PCB制板负责人
+                  </Text>
                 </View>
-                <Text className="text-sm text-gray-600">
+                <Text className="text-sm text-gray-600 dark:text-gray-300">
                   电子工程部 / 工程师
                 </Text>
               </View>
             </View>
 
             {/* 团队成员3 */}
-            <View className="flex-row border-b border-gray-100 py-3">
-              <View className="mr-3 size-10 items-center justify-center rounded-full bg-gray-200">
+            <View className="flex-row border-b border-gray-100 py-3 dark:border-gray-700">
+              <View className="mr-3 size-10 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700">
                 <FontAwesome name="user" size={16} color="#9ca3af" />
               </View>
               <View className="flex-1">
                 <View className="flex-row justify-between">
-                  <Text className="font-medium">张工程师</Text>
-                  <Text className="text-sm text-gray-600">SMT贴片负责人</Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    张工程师
+                  </Text>
+                  <Text className="text-sm text-gray-600 dark:text-gray-300">
+                    SMT贴片负责人
+                  </Text>
                 </View>
-                <Text className="text-sm text-gray-600">
+                <Text className="text-sm text-gray-600 dark:text-gray-300">
                   生产部 / 高级技术员
                 </Text>
               </View>
             </View>
 
             {/* 团队成员4 */}
-            <View className="flex-row border-b border-gray-100 py-3">
-              <View className="mr-3 size-10 items-center justify-center rounded-full bg-gray-200">
+            <View className="flex-row border-b border-gray-100 py-3 dark:border-gray-700">
+              <View className="mr-3 size-10 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700">
                 <FontAwesome name="user" size={16} color="#9ca3af" />
               </View>
               <View className="flex-1">
                 <View className="flex-row justify-between">
-                  <Text className="font-medium">赵工程师</Text>
-                  <Text className="text-sm text-gray-600">功能测试负责人</Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    赵工程师
+                  </Text>
+                  <Text className="text-sm text-gray-600 dark:text-gray-300">
+                    功能测试负责人
+                  </Text>
                 </View>
-                <Text className="text-sm text-gray-600">
+                <Text className="text-sm text-gray-600 dark:text-gray-300">
                   质量部 / 测试工程师
                 </Text>
               </View>
@@ -483,15 +658,21 @@ const ProductionPlanDetail = () => {
 
             {/* 团队成员5 */}
             <View className="flex-row py-3">
-              <View className="mr-3 size-10 items-center justify-center rounded-full bg-gray-200">
+              <View className="mr-3 size-10 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700">
                 <FontAwesome name="user" size={16} color="#9ca3af" />
               </View>
               <View className="flex-1">
                 <View className="flex-row justify-between">
-                  <Text className="font-medium">刘经理</Text>
-                  <Text className="text-sm text-gray-600">物料采购</Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    刘经理
+                  </Text>
+                  <Text className="text-sm text-gray-600 dark:text-gray-300">
+                    物料采购
+                  </Text>
                 </View>
-                <Text className="text-sm text-gray-600">采购部 / 采购经理</Text>
+                <Text className="text-sm text-gray-600 dark:text-gray-300">
+                  采购部 / 采购经理
+                </Text>
               </View>
             </View>
           </View>
@@ -500,14 +681,16 @@ const ProductionPlanDetail = () => {
 
       {/* 底部操作按钮 */}
       <View className="absolute inset-x-4 bottom-5 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">
+        <TouchableOpacity className="flex-1 flex-row items-center justify-center rounded-lg border border-gray-300 bg-white py-3 dark:border-gray-600 dark:bg-gray-800">
           <FontAwesome
             name="edit"
             size={16}
-            color="#4b5563"
+            color={isDark ? '#9ca3af' : '#4b5563'}
             style={{ marginRight: 8 }}
           />
-          <Text className="font-medium text-gray-700">编辑计划</Text>
+          <Text className="font-medium text-gray-700 dark:text-gray-300">
+            编辑计划
+          </Text>
         </TouchableOpacity>
         <TouchableOpacity className="flex-1 flex-row items-center justify-center rounded-lg bg-blue-600 py-3">
           <FontAwesome
diff --git a/src/app/production/process/[id].tsx b/src/app/production/process/[id].tsx
index c0fe9c701dbe1cd5597aab82745a1047e7451941..5718c0318794af003608df17a17a49c64bafc794 100644
--- a/src/app/production/process/[id].tsx
+++ b/src/app/production/process/[id].tsx
@@ -1,28 +1,33 @@
 import React, { useState } from 'react';
-import {
-  ScrollView,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 
 import { NavHeader, SafeAreaView } from '@/components/ui';
 import { FontAwesome } from '@/components/ui/icons';
+import { useAppColorScheme } from '@/lib';
 
 export default function ProcessDetail() {
   const [activeTab, setActiveTab] = useState('生产记录');
+  const { isDark } = useAppColorScheme();
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-50">
+    <SafeAreaView className="flex-1 bg-gray-50 dark:bg-gray-900">
       <NavHeader
         title="工序详情"
         right={
           <>
             <TouchableOpacity className="mr-4">
-              <FontAwesome name="share-alt" size={18} color="#4b5563" />
+              <FontAwesome
+                name="share-alt"
+                size={18}
+                color={isDark ? '#9ca3af' : '#4b5563'}
+              />
             </TouchableOpacity>
             <TouchableOpacity>
-              <FontAwesome name="ellipsis-v" size={18} color="#4b5563" />
+              <FontAwesome
+                name="ellipsis-v"
+                size={18}
+                color={isDark ? '#9ca3af' : '#4b5563'}
+              />
             </TouchableOpacity>
           </>
         }
@@ -30,35 +35,51 @@ export default function ProcessDetail() {
 
       <ScrollView className="flex-1 p-4">
         {/* 工序基本信息 */}
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
           <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>
+            <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              元器件贴装
+            </Text>
+            <View className="rounded-full bg-green-100 px-2 py-1 dark:bg-green-900/30">
+              <Text className="text-xs font-medium text-green-800 dark:text-green-300">
+                使用中
+              </Text>
             </View>
           </View>
 
-          <Text className="mb-2 text-sm text-gray-600">
+          <Text className="mb-2 text-sm text-gray-600 dark:text-gray-300">
             工序编号：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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                负责人
+              </Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                王工程师
+              </Text>
             </View>
             <View>
-              <Text className="mb-1 text-xs text-gray-500">标准工时</Text>
-              <Text className="font-medium">45分钟/批次</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                标准工时
+              </Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                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>
+              <Text className="text-gray-900 dark:text-gray-100">
+                设备利用率
+              </Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                85%
+              </Text>
             </View>
-            <View className="h-1.5 overflow-hidden rounded bg-gray-200">
+            <View className="h-1.5 overflow-hidden rounded bg-gray-200 dark:bg-gray-700">
               <View
                 className="h-full rounded bg-green-500"
                 style={{ width: '85%' }}
@@ -66,16 +87,20 @@ export default function ProcessDetail() {
             </View>
           </View>
 
-          <View className="rounded-lg bg-blue-50 p-3">
-            <Text className="mb-1 text-sm font-medium">关联设备</Text>
+          <View className="rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
+            <Text className="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+              关联设备
+            </Text>
             <View className="flex-row items-center">
               <FontAwesome
                 name="microchip"
                 size={16}
-                color="#2563eb"
+                color={isDark ? '#60a5fa' : '#2563eb'}
                 className="mr-2"
               />
-              <Text>SMT贴片机#2</Text>
+              <Text className="text-gray-900 dark:text-gray-100">
+                SMT贴片机#2
+              </Text>
             </View>
           </View>
         </View>
@@ -90,10 +115,10 @@ export default function ProcessDetail() {
             <TouchableOpacity
               key={tab}
               onPress={() => setActiveTab(tab)}
-              className={`mr-2 rounded-full px-4 py-2 ${activeTab === tab ? 'bg-blue-600' : 'bg-gray-200'}`}
+              className={`mr-2 rounded-full px-4 py-2 ${activeTab === tab ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'}`}
             >
               <Text
-                className={`text-sm font-medium ${activeTab === tab ? 'text-white' : 'text-gray-800'}`}
+                className={`text-sm font-medium ${activeTab === tab ? 'text-white' : 'text-gray-800 dark:text-gray-300'}`}
               >
                 {tab}
               </Text>
@@ -103,56 +128,88 @@ export default function ProcessDetail() {
 
         {/* 生产记录 */}
         {activeTab === '生产记录' && (
-          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
-            <Text className="mb-3 font-medium">生产记录</Text>
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 font-medium text-gray-900 dark:text-gray-100">
+              生产记录
+            </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">
+                <View className="flex-row bg-gray-50 dark:bg-gray-700">
+                  <Text className="px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     日期
                   </Text>
-                  <Text className="px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500">
+                  <Text className="px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     批次
                   </Text>
-                  <Text className="px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500">
+                  <Text className="px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     产量
                   </Text>
-                  <Text className="px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500">
+                  <Text className="px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     良品率
                   </Text>
-                  <Text className="px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500">
+                  <Text className="px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     操作员
                   </Text>
                 </View>
 
-                <View className="border-t border-gray-200">
+                <View className="border-t border-gray-200 dark:border-gray-700">
                   <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>
+                    <Text className="px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      2023-12-04
+                    </Text>
+                    <Text className="px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      B20231204-01
+                    </Text>
+                    <Text className="px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      120件
+                    </Text>
+                    <Text className="px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      98.3%
+                    </Text>
+                    <Text className="px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      张三
+                    </Text>
                   </View>
                 </View>
 
-                <View className="border-t border-gray-200">
+                <View className="border-t border-gray-200 dark:border-gray-700">
                   <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>
+                    <Text className="px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      2023-12-03
+                    </Text>
+                    <Text className="px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      B20231203-02
+                    </Text>
+                    <Text className="px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      150件
+                    </Text>
+                    <Text className="px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      97.5%
+                    </Text>
+                    <Text className="px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      李四
+                    </Text>
                   </View>
                 </View>
 
-                <View className="border-t border-gray-200">
+                <View className="border-t border-gray-200 dark:border-gray-700">
                   <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>
+                    <Text className="px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      2023-12-02
+                    </Text>
+                    <Text className="px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      B20231202-01
+                    </Text>
+                    <Text className="px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      130件
+                    </Text>
+                    <Text className="px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      99.1%
+                    </Text>
+                    <Text className="px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      王五
+                    </Text>
                   </View>
                 </View>
               </View>
@@ -162,45 +219,65 @@ export default function ProcessDetail() {
 
         {/* 工艺参数 */}
         {activeTab === '工艺参数' && (
-          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
-            <Text className="mb-3 font-medium">工艺参数</Text>
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 font-medium text-gray-900 dark:text-gray-100">
+              工艺参数
+            </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>
+                <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                  贴片速度
+                </Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  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>
+                <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                  定位精度
+                </Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  ±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>
+                <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                  最小元件尺寸
+                </Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  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>
+                <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                  最大PCB尺寸
+                </Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  330mm×250mm
+                </Text>
               </View>
             </View>
 
-            <View className="rounded-lg bg-yellow-50 p-3">
+            <View className="rounded-lg bg-yellow-50 p-3 dark:bg-yellow-900/20">
               <View className="flex-row items-start">
                 <FontAwesome
                   name="exclamation-circle"
                   size={16}
-                  color="#d97706"
+                  color={isDark ? '#fbbf24' : '#d97706'}
                   className="mr-2 mt-0.5"
                 />
                 <View>
-                  <Text className="mb-1 text-sm font-medium">注意事项</Text>
-                  <Text className="text-xs text-gray-700">
+                  <Text className="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+                    注意事项
+                  </Text>
+                  <Text className="text-xs text-gray-700 dark:text-gray-300">
                     1. 确保PCB板表面清洁无污染
                   </Text>
-                  <Text className="text-xs text-gray-700">
+                  <Text className="text-xs text-gray-700 dark:text-gray-300">
                     2. 定期检查吸嘴状态，避免漏吸
                   </Text>
-                  <Text className="text-xs text-gray-700">
+                  <Text className="text-xs text-gray-700 dark:text-gray-300">
                     3. 元件供料器需定期校准
                   </Text>
                 </View>
@@ -211,28 +288,42 @@ export default function ProcessDetail() {
 
         {/* 质量控制 */}
         {activeTab === '质量控制' && (
-          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
-            <Text className="mb-3 font-medium">质量控制</Text>
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 font-medium text-gray-900 dark:text-gray-100">
+              质量控制
+            </Text>
 
             <View className="mb-3">
-              <Text className="mb-1 text-sm font-medium">检验标准</Text>
-              <Text className="mb-2 text-sm text-gray-700">
+              <Text className="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+                检验标准
+              </Text>
+              <Text className="mb-2 text-sm text-gray-700 dark:text-gray-300">
                 IPC-A-610G 3级标准
               </Text>
 
-              <Text className="mb-1 text-sm font-medium">检验项目</Text>
+              <Text className="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+                检验项目
+              </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 className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-700">
+                  <Text className="text-xs text-gray-800 dark:text-gray-300">
+                    元件位置
+                  </Text>
                 </View>
-                <View className="rounded bg-gray-100 px-2 py-1">
-                  <Text className="text-xs text-gray-800">焊接质量</Text>
+                <View className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-700">
+                  <Text className="text-xs text-gray-800 dark:text-gray-300">
+                    焊接质量
+                  </Text>
                 </View>
-                <View className="rounded bg-gray-100 px-2 py-1">
-                  <Text className="text-xs text-gray-800">极性方向</Text>
+                <View className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-700">
+                  <Text className="text-xs text-gray-800 dark:text-gray-300">
+                    极性方向
+                  </Text>
                 </View>
-                <View className="rounded bg-gray-100 px-2 py-1">
-                  <Text className="text-xs text-gray-800">元件完整性</Text>
+                <View className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-700">
+                  <Text className="text-xs text-gray-800 dark:text-gray-300">
+                    元件完整性
+                  </Text>
                 </View>
               </View>
             </View>
@@ -241,21 +332,31 @@ export default function ProcessDetail() {
 
         {/* 操作指南 */}
         {activeTab === '操作指南' && (
-          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
-            <Text className="mb-3 font-medium">操作指南</Text>
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 font-medium text-gray-900 dark:text-gray-100">
+              操作指南
+            </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">
+              <Text className="mb-2 text-sm font-medium text-gray-900 dark:text-gray-100">
+                操作步骤
+              </Text>
+              <View className="mb-3 rounded-lg bg-gray-50 p-3 dark:bg-gray-700">
+                <Text className="mb-1 text-sm text-gray-900 dark:text-gray-100">
+                  1. 确认PCB板已完成前道工序
+                </Text>
+                <Text className="mb-1 text-sm text-gray-900 dark:text-gray-100">
                   2. 检查贴片机程序是否正确加载
                 </Text>
-                <Text className="mb-1 text-sm">
+                <Text className="mb-1 text-sm text-gray-900 dark:text-gray-100">
                   3. 确认元件供料器已正确安装
                 </Text>
-                <Text className="mb-1 text-sm">4. 启动设备并监控首件生产</Text>
-                <Text className="text-sm">5. 完成后进行首件检验确认</Text>
+                <Text className="mb-1 text-sm text-gray-900 dark:text-gray-100">
+                  4. 启动设备并监控首件生产
+                </Text>
+                <Text className="text-sm text-gray-900 dark:text-gray-100">
+                  5. 完成后进行首件检验确认
+                </Text>
               </View>
             </View>
           </View>
diff --git a/src/app/production/task/[id].tsx b/src/app/production/task/[id].tsx
index 52a4a3a460d4240b9b94279898b73979b16fa609..bbc769cd7826d794742c4c55796110a945e2cd9a 100644
--- a/src/app/production/task/[id].tsx
+++ b/src/app/production/task/[id].tsx
@@ -1,28 +1,33 @@
 import React, { useState } from 'react';
-import {
-  ScrollView,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 
 import { NavHeader, SafeAreaView } from '@/components/ui';
 import { FontAwesome } from '@/components/ui/icons';
+import { useAppColorScheme } from '@/lib';
 
 const ProductionTaskDetail = () => {
   const [activeTab, setActiveTab] = useState('basic-info');
+  const { isDark } = useAppColorScheme();
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-50">
+    <SafeAreaView className="flex-1 bg-gray-50 dark:bg-gray-900">
       <NavHeader
         title="任务详情"
         right={
           <>
             <TouchableOpacity className="mr-4">
-              <FontAwesome name="share-alt" size={18} color="#4b5563" />
+              <FontAwesome
+                name="share-alt"
+                size={18}
+                color={isDark ? '#9ca3af' : '#4b5563'}
+              />
             </TouchableOpacity>
             <TouchableOpacity>
-              <FontAwesome name="ellipsis-v" size={18} color="#4b5563" />
+              <FontAwesome
+                name="ellipsis-v"
+                size={18}
+                color={isDark ? '#9ca3af' : '#4b5563'}
+              />
             </TouchableOpacity>
           </>
         }
@@ -30,22 +35,24 @@ const ProductionTaskDetail = () => {
 
       <ScrollView className="flex-1 p-4">
         {/* 任务状态卡片 */}
-        <View className="mb-4 rounded-2xl bg-white p-5 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-5 shadow-sm dark:bg-gray-800">
           <View className="mb-3 flex-row items-start justify-between">
             <View>
-              <Text className="text-xl font-bold">连衣裙缝制任务</Text>
-              <Text className="mt-1 text-sm text-gray-500">
+              <Text className="text-xl font-bold text-gray-900 dark:text-gray-100">
+                连衣裙缝制任务
+              </Text>
+              <Text className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 任务编号: T20230601-02
               </Text>
             </View>
-            <View className="flex-row items-center rounded-full bg-orange-100 px-3 py-1">
+            <View className="flex-row items-center rounded-full bg-orange-100 px-3 py-1 dark:bg-orange-900/30">
               <FontAwesome
                 name="play-circle"
                 size={12}
-                color="#9a3412"
+                color={isDark ? '#fdba74' : '#9a3412'}
                 className="mr-1"
               />
-              <Text className="text-xs font-semibold text-orange-800">
+              <Text className="text-xs font-semibold text-orange-800 dark:text-orange-300">
                 进行中
               </Text>
             </View>
@@ -53,10 +60,12 @@ const ProductionTaskDetail = () => {
 
           <View className="mb-4">
             <View className="mb-1 flex-row justify-between text-sm">
-              <Text>任务进度</Text>
-              <Text className="font-medium">65%</Text>
+              <Text className="text-gray-900 dark:text-gray-100">任务进度</Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                65%
+              </Text>
             </View>
-            <View className="h-2 overflow-hidden rounded-full bg-gray-200">
+            <View className="h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
               <View
                 className="h-full rounded-full bg-blue-500"
                 style={{ width: '65%' }}
@@ -66,20 +75,36 @@ const ProductionTaskDetail = () => {
 
           <View className="mb-4 flex-row flex-wrap">
             <View className="mb-4 w-1/2">
-              <Text className="text-xs text-gray-500">开始时间</Text>
-              <Text className="font-medium">2023-06-06 08:00</Text>
+              <Text className="text-xs text-gray-500 dark:text-gray-400">
+                开始时间
+              </Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                2023-06-06 08:00
+              </Text>
             </View>
             <View className="mb-4 w-1/2">
-              <Text className="text-xs text-gray-500">预计完成</Text>
-              <Text className="font-medium">2023-06-20 17:30</Text>
+              <Text className="text-xs text-gray-500 dark:text-gray-400">
+                预计完成
+              </Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                2023-06-20 17:30
+              </Text>
             </View>
             <View className="mb-4 w-1/2">
-              <Text className="text-xs text-gray-500">所属计划</Text>
-              <Text className="font-medium">夏季新品连衣裙</Text>
+              <Text className="text-xs text-gray-500 dark:text-gray-400">
+                所属计划
+              </Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                夏季新品连衣裙
+              </Text>
             </View>
             <View className="mb-4 w-1/2">
-              <Text className="text-xs text-gray-500">负责人</Text>
-              <Text className="font-medium">李工</Text>
+              <Text className="text-xs text-gray-500 dark:text-gray-400">
+                负责人
+              </Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                李工
+              </Text>
             </View>
           </View>
 
@@ -93,14 +118,14 @@ const ProductionTaskDetail = () => {
               />
               <Text className="text-sm font-medium text-white">完成任务</Text>
             </TouchableOpacity>
-            <TouchableOpacity className="flex-1 flex-row items-center justify-center rounded-lg bg-gray-100 py-3">
+            <TouchableOpacity className="flex-1 flex-row items-center justify-center rounded-lg bg-gray-100 py-3 dark:bg-gray-700">
               <FontAwesome
                 name="pause-circle"
                 size={16}
-                color="#4b5563"
+                color={isDark ? '#9ca3af' : '#4b5563'}
                 style={{ marginRight: 8 }}
               />
-              <Text className="text-sm font-medium text-gray-700">
+              <Text className="text-sm font-medium text-gray-700 dark:text-gray-300">
                 暂停任务
               </Text>
             </TouchableOpacity>
@@ -108,13 +133,13 @@ const ProductionTaskDetail = () => {
         </View>
 
         {/* 任务详情选项卡 */}
-        <View className="mb-4 flex-row rounded-lg bg-gray-100 p-1">
+        <View className="mb-4 flex-row rounded-lg bg-gray-100 p-1 dark:bg-gray-700">
           <TouchableOpacity
             className={`flex-1 items-center rounded-full px-4 py-2 ${activeTab === 'basic-info' ? 'bg-blue-600' : ''}`}
             onPress={() => setActiveTab('basic-info')}
           >
             <Text
-              className={`text-sm font-medium ${activeTab === 'basic-info' ? 'text-white' : 'text-gray-700'}`}
+              className={`text-sm font-medium ${activeTab === 'basic-info' ? 'text-white' : 'text-gray-700 dark:text-gray-300'}`}
             >
               基本信息
             </Text>
@@ -124,7 +149,7 @@ const ProductionTaskDetail = () => {
             onPress={() => setActiveTab('process')}
           >
             <Text
-              className={`text-sm font-medium ${activeTab === 'process' ? 'text-white' : 'text-gray-700'}`}
+              className={`text-sm font-medium ${activeTab === 'process' ? 'text-white' : 'text-gray-700 dark:text-gray-300'}`}
             >
               工序进度
             </Text>
@@ -134,7 +159,7 @@ const ProductionTaskDetail = () => {
             onPress={() => setActiveTab('resources')}
           >
             <Text
-              className={`text-sm font-medium ${activeTab === 'resources' ? 'text-white' : 'text-gray-700'}`}
+              className={`text-sm font-medium ${activeTab === 'resources' ? 'text-white' : 'text-gray-700 dark:text-gray-300'}`}
             >
               相关资源
             </Text>
@@ -143,60 +168,94 @@ const ProductionTaskDetail = () => {
 
         {/* 基本信息内容 */}
         {activeTab === 'basic-info' && (
-          <View className="rounded-2xl bg-white p-5 shadow-sm">
-            <Text className="mb-3 text-lg font-semibold">任务详情</Text>
+          <View className="rounded-2xl bg-white p-5 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+              任务详情
+            </Text>
 
             <View className="mb-4">
-              <Text className="mb-1 text-sm text-gray-500">任务描述</Text>
-              <Text>
+              <Text className="mb-1 text-sm text-gray-500 dark:text-gray-400">
+                任务描述
+              </Text>
+              <Text className="text-gray-900 dark:text-gray-100">
                 完成夏季新品连衣裙的缝制工作，包括主体缝合、袖口处理和装饰缝制。需确保缝线平整，接缝牢固，符合质量标准。
               </Text>
             </View>
 
             <View className="mb-4 flex-row flex-wrap">
               <View className="mb-4 w-1/2">
-                <Text className="text-xs text-gray-500">任务类型</Text>
-                <Text className="font-medium">缝制加工</Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  任务类型
+                </Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  缝制加工
+                </Text>
               </View>
               <View className="mb-4 w-1/2">
-                <Text className="text-xs text-gray-500">优先级</Text>
-                <Text className="font-medium text-orange-600">高</Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  优先级
+                </Text>
+                <Text className="font-medium text-orange-600 dark:text-orange-400">
+                  高
+                </Text>
               </View>
               <View className="mb-4 w-1/2">
-                <Text className="text-xs text-gray-500">计划产量</Text>
-                <Text className="font-medium">2,500件</Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  计划产量
+                </Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  2,500件
+                </Text>
               </View>
               <View className="mb-4 w-1/2">
-                <Text className="text-xs text-gray-500">已完成</Text>
-                <Text className="font-medium">1,625件</Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  已完成
+                </Text>
+                <Text className="font-medium text-gray-900 dark:text-gray-100">
+                  1,625件
+                </Text>
               </View>
             </View>
 
             <View className="mb-4">
-              <Text className="mb-1 text-sm text-gray-500">质量要求</Text>
+              <Text className="mb-1 text-sm text-gray-500 dark:text-gray-400">
+                质量要求
+              </Text>
               <View className="ml-5">
                 <View className="mb-1 flex-row">
                   <View className="mr-2 mt-1.5 size-2 rounded-full bg-gray-400" />
-                  <Text>缝线平整，无跳线、断线</Text>
+                  <Text className="text-gray-900 dark:text-gray-100">
+                    缝线平整，无跳线、断线
+                  </Text>
                 </View>
                 <View className="mb-1 flex-row">
                   <View className="mr-2 mt-1.5 size-2 rounded-full bg-gray-400" />
-                  <Text>接缝牢固，无开线现象</Text>
+                  <Text className="text-gray-900 dark:text-gray-100">
+                    接缝牢固，无开线现象
+                  </Text>
                 </View>
                 <View className="mb-1 flex-row">
                   <View className="mr-2 mt-1.5 size-2 rounded-full bg-gray-400" />
-                  <Text>装饰部分对称美观</Text>
+                  <Text className="text-gray-900 dark:text-gray-100">
+                    装饰部分对称美观
+                  </Text>
                 </View>
                 <View className="flex-row">
                   <View className="mr-2 mt-1.5 size-2 rounded-full bg-gray-400" />
-                  <Text>符合尺寸规格要求</Text>
+                  <Text className="text-gray-900 dark:text-gray-100">
+                    符合尺寸规格要求
+                  </Text>
                 </View>
               </View>
             </View>
 
             <View>
-              <Text className="mb-1 text-sm text-gray-500">备注</Text>
-              <Text>本批次为紧急订单，需优先安排生产，确保按时交付。</Text>
+              <Text className="mb-1 text-sm text-gray-500 dark:text-gray-400">
+                备注
+              </Text>
+              <Text className="text-gray-900 dark:text-gray-100">
+                本批次为紧急订单，需优先安排生产，确保按时交付。
+              </Text>
             </View>
           </View>
         )}
@@ -204,8 +263,10 @@ const ProductionTaskDetail = () => {
         {/* 工序进度内容 */}
         {activeTab === 'process' && (
           <View>
-            <View className="mb-4 rounded-2xl bg-white p-5 shadow-sm">
-              <Text className="mb-3 text-lg font-semibold">工序流程</Text>
+            <View className="mb-4 rounded-2xl bg-white p-5 shadow-sm dark:bg-gray-800">
+              <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+                工序流程
+              </Text>
 
               <ScrollView
                 horizontal
@@ -214,75 +275,107 @@ const ProductionTaskDetail = () => {
               >
                 <View className="flex-row items-center">
                   <View className="items-center">
-                    <View className="w-15 h-15 items-center justify-center rounded-full bg-green-100">
-                      <FontAwesome name="cut" size={24} color="#059669" />
+                    <View className="w-15 h-15 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
+                      <FontAwesome
+                        name="cut"
+                        size={24}
+                        color={isDark ? '#4ade80' : '#059669'}
+                      />
                       <View className="absolute right-0 top-0 size-5 items-center justify-center rounded-full bg-green-500">
                         <FontAwesome name="check" size={10} color="white" />
                       </View>
                     </View>
-                    <Text className="mt-2 text-xs font-medium">裁剪</Text>
+                    <Text className="mt-2 text-xs font-medium text-gray-900 dark:text-gray-100">
+                      裁剪
+                    </Text>
                   </View>
 
                   <View className="mx-1 h-1 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={24} color="#2563eb" />
+                    <View className="w-15 h-15 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30">
+                      <FontAwesome
+                        name="tshirt"
+                        size={24}
+                        color={isDark ? '#60a5fa' : '#2563eb'}
+                      />
                       <View className="absolute right-0 top-0 size-5 items-center justify-center rounded-full bg-blue-500">
                         <FontAwesome name="sync-alt" size={10} color="white" />
                       </View>
                     </View>
-                    <Text className="mt-2 text-xs font-medium">缝制</Text>
+                    <Text className="mt-2 text-xs font-medium text-gray-900 dark:text-gray-100">
+                      缝制
+                    </Text>
                   </View>
 
-                  <View className="mx-1 h-1 w-10 bg-gray-300" />
+                  <View className="mx-1 h-1 w-10 bg-gray-300 dark:bg-gray-600" />
 
                   <View className="items-center">
-                    <View className="w-15 h-15 items-center justify-center rounded-full bg-gray-100">
+                    <View className="w-15 h-15 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700">
                       <FontAwesome
                         name="paint-brush"
                         size={24}
-                        color="#6b7280"
+                        color={isDark ? '#9ca3af' : '#6b7280'}
                       />
                     </View>
-                    <Text className="mt-2 text-xs font-medium">装饰</Text>
+                    <Text className="mt-2 text-xs font-medium text-gray-900 dark:text-gray-100">
+                      装饰
+                    </Text>
                   </View>
 
-                  <View className="mx-1 h-1 w-10 bg-gray-300" />
+                  <View className="mx-1 h-1 w-10 bg-gray-300 dark:bg-gray-600" />
 
                   <View className="items-center">
-                    <View className="w-15 h-15 items-center justify-center rounded-full bg-gray-100">
-                      <FontAwesome name="search" size={24} color="#6b7280" />
+                    <View className="w-15 h-15 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700">
+                      <FontAwesome
+                        name="search"
+                        size={24}
+                        color={isDark ? '#9ca3af' : '#6b7280'}
+                      />
                     </View>
-                    <Text className="mt-2 text-xs font-medium">质检</Text>
+                    <Text className="mt-2 text-xs font-medium text-gray-900 dark:text-gray-100">
+                      质检
+                    </Text>
                   </View>
 
-                  <View className="mx-1 h-1 w-10 bg-gray-300" />
+                  <View className="mx-1 h-1 w-10 bg-gray-300 dark:bg-gray-600" />
 
                   <View className="items-center">
-                    <View className="w-15 h-15 items-center justify-center rounded-full bg-gray-100">
-                      <FontAwesome name="tags" size={24} color="#6b7280" />
+                    <View className="w-15 h-15 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700">
+                      <FontAwesome
+                        name="tags"
+                        size={24}
+                        color={isDark ? '#9ca3af' : '#6b7280'}
+                      />
                     </View>
-                    <Text className="mt-2 text-xs font-medium">包装</Text>
+                    <Text className="mt-2 text-xs font-medium text-gray-900 dark:text-gray-100">
+                      包装
+                    </Text>
                   </View>
                 </View>
               </ScrollView>
             </View>
 
-            <View className="rounded-2xl bg-white p-5 shadow-sm">
-              <Text className="mb-3 text-lg font-semibold">任务日志</Text>
+            <View className="rounded-2xl bg-white p-5 shadow-sm dark:bg-gray-800">
+              <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+                任务日志
+              </Text>
 
               <View className="pl-7">
                 <View className="relative mb-6">
                   <View className="absolute left-0 top-0 -ml-7 mt-1 size-4 rounded-full bg-blue-600" />
-                  <View className="absolute left-0 top-4 -ml-5 h-full w-0.5 bg-gray-200" />
-                  <Text className="mb-1 text-xs text-gray-500">
+                  <View className="absolute left-0 top-4 -ml-5 h-full w-0.5 bg-gray-200 dark:bg-gray-600" />
+                  <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
                     2023-06-15 14:30
                   </Text>
-                  <View className="rounded-lg border border-gray-100 bg-white p-3 shadow-sm">
-                    <Text className="font-medium">生产进度更新</Text>
-                    <Text className="text-sm">已完成1,625件，完成率65%</Text>
-                    <Text className="mt-1 text-xs text-gray-500">
+                  <View className="rounded-lg border border-gray-100 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-700">
+                    <Text className="font-medium text-gray-900 dark:text-gray-100">
+                      生产进度更新
+                    </Text>
+                    <Text className="text-sm text-gray-900 dark:text-gray-100">
+                      已完成1,625件，完成率65%
+                    </Text>
+                    <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                       操作人: 李工
                     </Text>
                   </View>
@@ -290,14 +383,18 @@ const ProductionTaskDetail = () => {
 
                 <View className="relative mb-6">
                   <View className="absolute left-0 top-0 -ml-7 mt-1 size-4 rounded-full bg-blue-600" />
-                  <View className="absolute left-0 top-4 -ml-5 h-full w-0.5 bg-gray-200" />
-                  <Text className="mb-1 text-xs text-gray-500">
+                  <View className="absolute left-0 top-4 -ml-5 h-full w-0.5 bg-gray-200 dark:bg-gray-600" />
+                  <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
                     2023-06-10 09:15
                   </Text>
-                  <View className="rounded-lg border border-gray-100 bg-white p-3 shadow-sm">
-                    <Text className="font-medium">质量检查</Text>
-                    <Text className="text-sm">抽检100件，合格率98%</Text>
-                    <Text className="mt-1 text-xs text-gray-500">
+                  <View className="rounded-lg border border-gray-100 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-700">
+                    <Text className="font-medium text-gray-900 dark:text-gray-100">
+                      质量检查
+                    </Text>
+                    <Text className="text-sm text-gray-900 dark:text-gray-100">
+                      抽检100件，合格率98%
+                    </Text>
+                    <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                       操作人: 王质检
                     </Text>
                   </View>
@@ -305,13 +402,17 @@ const ProductionTaskDetail = () => {
 
                 <View className="relative">
                   <View className="absolute left-0 top-0 -ml-7 mt-1 size-4 rounded-full bg-blue-600" />
-                  <Text className="mb-1 text-xs text-gray-500">
+                  <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
                     2023-06-06 08:00
                   </Text>
-                  <View className="rounded-lg border border-gray-100 bg-white p-3 shadow-sm">
-                    <Text className="font-medium">任务开始</Text>
-                    <Text className="text-sm">开始连衣裙缝制任务</Text>
-                    <Text className="mt-1 text-xs text-gray-500">
+                  <View className="rounded-lg border border-gray-100 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-700">
+                    <Text className="font-medium text-gray-900 dark:text-gray-100">
+                      任务开始
+                    </Text>
+                    <Text className="text-sm text-gray-900 dark:text-gray-100">
+                      开始连衣裙缝制任务
+                    </Text>
+                    <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                       操作人: 李工
                     </Text>
                   </View>
@@ -324,100 +425,162 @@ const ProductionTaskDetail = () => {
         {/* 相关资源内容 */}
         {activeTab === 'resources' && (
           <View>
-            <View className="mb-4 rounded-2xl bg-white p-5 shadow-sm">
-              <Text className="mb-3 text-lg font-semibold">使用设备</Text>
+            <View className="mb-4 rounded-2xl bg-white p-5 shadow-sm dark:bg-gray-800">
+              <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+                使用设备
+              </Text>
 
-              <View className="mb-3 flex-row items-center rounded-lg bg-gray-50 p-3">
-                <View className="mr-3 size-10 items-center justify-center rounded-full bg-blue-100">
-                  <FontAwesome name="cogs" size={20} color="#2563eb" />
+              <View className="mb-3 flex-row items-center rounded-lg bg-gray-50 p-3 dark:bg-gray-700">
+                <View className="mr-3 size-10 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30">
+                  <FontAwesome
+                    name="cogs"
+                    size={20}
+                    color={isDark ? '#60a5fa' : '#2563eb'}
+                  />
                 </View>
                 <View className="flex-1">
-                  <Text className="font-medium">工业缝纫机</Text>
-                  <Text className="text-xs text-gray-500">
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    工业缝纫机
+                  </Text>
+                  <Text className="text-xs text-gray-500 dark:text-gray-400">
                     设备编号: EQ-2023-056
                   </Text>
                 </View>
-                <View className="rounded-full bg-green-100 px-2 py-1">
-                  <Text className="text-xs text-green-800">正常运行</Text>
+                <View className="rounded-full bg-green-100 px-2 py-1 dark:bg-green-900/30">
+                  <Text className="text-xs text-green-800 dark:text-green-300">
+                    正常运行
+                  </Text>
                 </View>
               </View>
 
-              <View className="flex-row items-center rounded-lg bg-gray-50 p-3">
-                <View className="mr-3 size-10 items-center justify-center rounded-full bg-blue-100">
-                  <FontAwesome name="cogs" size={20} color="#2563eb" />
+              <View className="flex-row items-center rounded-lg bg-gray-50 p-3 dark:bg-gray-700">
+                <View className="mr-3 size-10 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30">
+                  <FontAwesome
+                    name="cogs"
+                    size={20}
+                    color={isDark ? '#60a5fa' : '#2563eb'}
+                  />
                 </View>
                 <View className="flex-1">
-                  <Text className="font-medium">锁边机</Text>
-                  <Text className="text-xs text-gray-500">
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    锁边机
+                  </Text>
+                  <Text className="text-xs text-gray-500 dark:text-gray-400">
                     设备编号: EQ-2023-078
                   </Text>
                 </View>
-                <View className="rounded-full bg-green-100 px-2 py-1">
-                  <Text className="text-xs text-green-800">正常运行</Text>
+                <View className="rounded-full bg-green-100 px-2 py-1 dark:bg-green-900/30">
+                  <Text className="text-xs text-green-800 dark:text-green-300">
+                    正常运行
+                  </Text>
                 </View>
               </View>
             </View>
 
-            <View className="mb-4 rounded-2xl bg-white p-5 shadow-sm">
-              <Text className="mb-3 text-lg font-semibold">材料清单</Text>
+            <View className="mb-4 rounded-2xl bg-white p-5 shadow-sm dark:bg-gray-800">
+              <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+                材料清单
+              </Text>
 
-              <View className="mb-3 flex-row items-center rounded-lg bg-gray-50 p-3">
-                <View className="mr-3 size-10 items-center justify-center rounded-full bg-amber-100">
-                  <FontAwesome name="box" size={20} color="#d97706" />
+              <View className="mb-3 flex-row items-center rounded-lg bg-gray-50 p-3 dark:bg-gray-700">
+                <View className="mr-3 size-10 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/30">
+                  <FontAwesome
+                    name="box"
+                    size={20}
+                    color={isDark ? '#fbbf24' : '#d97706'}
+                  />
                 </View>
                 <View className="flex-1">
-                  <Text className="font-medium">面料</Text>
-                  <Text className="text-xs text-gray-500">
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    面料
+                  </Text>
+                  <Text className="text-xs text-gray-500 dark:text-gray-400">
                     库存编号: M-2023-102
                   </Text>
                 </View>
-                <View className="rounded-full bg-green-100 px-2 py-1">
-                  <Text className="text-xs text-green-800">充足</Text>
+                <View className="rounded-full bg-green-100 px-2 py-1 dark:bg-green-900/30">
+                  <Text className="text-xs text-green-800 dark:text-green-300">
+                    充足
+                  </Text>
                 </View>
               </View>
 
-              <View className="flex-row items-center rounded-lg bg-gray-50 p-3">
-                <View className="mr-3 size-10 items-center justify-center rounded-full bg-amber-100">
-                  <FontAwesome name="box" size={20} color="#d97706" />
+              <View className="flex-row items-center rounded-lg bg-gray-50 p-3 dark:bg-gray-700">
+                <View className="mr-3 size-10 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/30">
+                  <FontAwesome
+                    name="box"
+                    size={20}
+                    color={isDark ? '#fbbf24' : '#d97706'}
+                  />
                 </View>
                 <View className="flex-1">
-                  <Text className="font-medium">缝线</Text>
-                  <Text className="text-xs text-gray-500">
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    缝线
+                  </Text>
+                  <Text className="text-xs text-gray-500 dark:text-gray-400">
                     库存编号: M-2023-156
                   </Text>
                 </View>
-                <View className="rounded-full bg-yellow-100 px-2 py-1">
-                  <Text className="text-xs text-yellow-800">偏低</Text>
+                <View className="rounded-full bg-yellow-100 px-2 py-1 dark:bg-yellow-900/30">
+                  <Text className="text-xs text-yellow-800 dark:text-yellow-300">
+                    偏低
+                  </Text>
                 </View>
               </View>
             </View>
 
-            <View className="rounded-2xl bg-white p-5 shadow-sm">
-              <Text className="mb-3 text-lg font-semibold">相关文档</Text>
+            <View className="rounded-2xl bg-white p-5 shadow-sm dark:bg-gray-800">
+              <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+                相关文档
+              </Text>
 
-              <View className="mb-3 flex-row items-center rounded-lg bg-gray-50 p-3">
-                <View className="mr-3 size-10 items-center justify-center rounded-full bg-indigo-100">
-                  <FontAwesome name="file-alt" size={20} color="#4f46e5" />
+              <View className="mb-3 flex-row items-center rounded-lg bg-gray-50 p-3 dark:bg-gray-700">
+                <View className="mr-3 size-10 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900/30">
+                  <FontAwesome
+                    name="file-alt"
+                    size={20}
+                    color={isDark ? '#a5b4fc' : '#4f46e5'}
+                  />
                 </View>
                 <View className="flex-1">
-                  <Text className="font-medium">工艺说明书</Text>
-                  <Text className="text-xs text-gray-500">PDF文档 · 2.5MB</Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    工艺说明书
+                  </Text>
+                  <Text className="text-xs text-gray-500 dark:text-gray-400">
+                    PDF文档 · 2.5MB
+                  </Text>
                 </View>
                 <TouchableOpacity>
-                  <FontAwesome name="download" size={18} color="#2563eb" />
+                  <FontAwesome
+                    name="download"
+                    size={18}
+                    color={isDark ? '#60a5fa' : '#2563eb'}
+                  />
                 </TouchableOpacity>
               </View>
 
-              <View className="flex-row items-center rounded-lg bg-gray-50 p-3">
-                <View className="mr-3 size-10 items-center justify-center rounded-full bg-indigo-100">
-                  <FontAwesome name="file-image" size={20} color="#4f46e5" />
+              <View className="flex-row items-center rounded-lg bg-gray-50 p-3 dark:bg-gray-700">
+                <View className="mr-3 size-10 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900/30">
+                  <FontAwesome
+                    name="file-image"
+                    size={20}
+                    color={isDark ? '#a5b4fc' : '#4f46e5'}
+                  />
                 </View>
                 <View className="flex-1">
-                  <Text className="font-medium">款式图</Text>
-                  <Text className="text-xs text-gray-500">JPG图片 · 1.8MB</Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    款式图
+                  </Text>
+                  <Text className="text-xs text-gray-500 dark:text-gray-400">
+                    JPG图片 · 1.8MB
+                  </Text>
                 </View>
                 <TouchableOpacity>
-                  <FontAwesome name="download" size={18} color="#2563eb" />
+                  <FontAwesome
+                    name="download"
+                    size={18}
+                    color={isDark ? '#60a5fa' : '#2563eb'}
+                  />
                 </TouchableOpacity>
               </View>
             </View>
@@ -426,23 +589,27 @@ const ProductionTaskDetail = () => {
       </ScrollView>
       {/* 底部操作按钮 */}
       <View className="absolute inset-x-4 bottom-5 flex-row space-x-3">
-        <TouchableOpacity className="flex-1 flex-row items-center justify-center rounded-lg bg-gray-100 py-3">
+        <TouchableOpacity className="flex-1 flex-row items-center justify-center rounded-lg bg-gray-100 py-3 dark:bg-gray-700">
           <FontAwesome
             name="comment-alt"
             size={16}
-            color="#4b5563"
+            color={isDark ? '#9ca3af' : '#4b5563'}
             style={{ marginRight: 8 }}
           />
-          <Text className="text-sm font-medium text-gray-700">添加备注</Text>
+          <Text className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            添加备注
+          </Text>
         </TouchableOpacity>
-        <TouchableOpacity className="flex-1 flex-row items-center justify-center rounded-lg bg-red-50 py-3">
+        <TouchableOpacity className="flex-1 flex-row items-center justify-center rounded-lg bg-red-50 py-3 dark:bg-red-900/20">
           <FontAwesome
             name="exclamation-triangle"
             size={16}
-            color="#ef4444"
+            color={isDark ? '#f87171' : '#ef4444'}
             style={{ marginRight: 8 }}
           />
-          <Text className="text-sm font-medium text-red-600">报告问题</Text>
+          <Text className="text-sm font-medium text-red-600 dark:text-red-400">
+            报告问题
+          </Text>
         </TouchableOpacity>
       </View>
     </SafeAreaView>
diff --git a/src/app/qr-scanner.tsx b/src/app/qr-scanner.tsx
index 54df3e31cd4e85a03eff4bc8c7f8e5a6b4e69e99..81f22222564555fe0a589b24e22406a08e346e78 100644
--- a/src/app/qr-scanner.tsx
+++ b/src/app/qr-scanner.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 import { Alert } from 'react-native';
 
 import { QRCodeScanner } from '@/components/ui/qr-code-scanner';
+import { NavHeader } from '@/components/ui';
 
 export default function QRScannerScreen() {
   const router = useRouter();
@@ -29,45 +30,16 @@ export default function QRScannerScreen() {
         let parts = data.split('_');
         if (parts.length !== 2) {
           Alert.alert('扫描成功', `检测到: ${data}`, [
-            { text: '确定', onPress: () => {} },
+            { text: '确定', onPress: () => { } },
           ]);
         } else {
           console.log('parts[0]:' + parts[0]);
-          if (Number(parts[0]) === 1) {
-            Alert.alert('扫描成功', `检测到打样单，是否确认提交？`, [
-              {
-                text: '确定',
-                onPress: () => {
-                  // router.push({
-                  //   pathname: '/chat',
-                  //   params: {
-                  //     actualText: '打样提交',
-                  //     text: `prompt:scan_sample(),value:${parts[1]},CurrentTime: ${formatDate(new Date())}`,
-                  //   },
-                  // });
-                },
-              },
-              { text: '取消', onPress: () => {} },
-            ]);
-          } else if (Number(parts[0]) === 2) {
-            Alert.alert('扫描成功', `检测到排料单，是否确认提交？`, [
-              {
-                text: '确定',
-                onPress: () => {
-                  // router.push({
-                  //   pathname: '/chat',
-                  //   params: {
-                  //     actualText: '排料提交',
-                  //     text: `prompt:scan_marker(),value:${parts[1]},CurrentTime: ${formatDate(new Date())}`,
-                  //   },
-                  // });
-                },
-              },
-              { text: '取消', onPress: () => {} },
-            ]);
+          if (parts[0] === "Equip") {
+            router.push({
+              pathname: `/equipment/[id]`,
+              params: { id: parts[1] }
+            });
           }
-          //
-          // console.log(parts); // 输出: ['1', '33']
         }
       }
     },
@@ -78,7 +50,9 @@ export default function QRScannerScreen() {
     router.back();
   }, [router]);
 
-  return <QRCodeScanner onScan={handleScan} onCancel={handleCancel} />;
+  return <><NavHeader
+    title="扫一扫"
+  /><QRCodeScanner onScan={handleScan} onCancel={handleCancel} /></>;
 }
 
 function isValidUrl(string: string): boolean {
diff --git a/src/app/quality/[id].tsx b/src/app/quality/[id].tsx
index bab66d5556023ce53ba1f68a58e97b5f193ecb86..0b06c1afc454f655d79f0ad75ebd105af45cb5b4 100644
--- a/src/app/quality/[id].tsx
+++ b/src/app/quality/[id].tsx
@@ -1,63 +1,84 @@
 import React, { useState } from 'react';
-import {
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 
-  ScrollView,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-
-import { SafeAreaView, NavHeader } from '@/components/ui';
+import { NavHeader, SafeAreaView } from '@/components/ui';
 import { FontAwesome } from '@/components/ui/icons';
+import { useAppColorScheme } from '@/lib';
+
 const QualityDetail = () => {
   const [activeTab, setActiveTab] = useState(0);
+  const { isDark } = useAppColorScheme();
 
   // 选项卡内容
   const tabs = ['检验结果', '不良品分析', '操作记录', '检验标准'];
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-50">
+    <SafeAreaView className="flex-1 bg-gray-50 dark:bg-gray-900">
       <NavHeader title="质量详情" />
 
       <ScrollView className="flex-1 p-4">
         {/* 质检任务基本信息 */}
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
           <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>
+            <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              智能手表主板质检
+            </Text>
+            <View className="rounded-full bg-blue-100 px-2 py-1 dark:bg-blue-900/30">
+              <Text className="text-xs font-medium text-blue-800 dark:text-blue-300">
+                进行中
+              </Text>
             </View>
           </View>
 
-          <Text className="mb-3 text-sm text-gray-600">
+          <Text className="mb-3 text-sm text-gray-600 dark:text-gray-400">
             任务编号：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>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                负责人
+              </Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                王质检
+              </Text>
             </View>
             <View>
-              <Text className="mb-1 text-xs text-gray-500">截止日期</Text>
-              <Text className="font-medium">2023-12-05</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                截止日期
+              </Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                2023-12-05
+              </Text>
             </View>
             <View>
-              <Text className="mb-1 text-xs text-gray-500">关联产品</Text>
-              <Text className="font-medium">智能手表 SW-2023</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                关联产品
+              </Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                智能手表 SW-2023
+              </Text>
             </View>
             <View>
-              <Text className="mb-1 text-xs text-gray-500">批次号</Text>
-              <Text className="font-medium">BT20231201-A</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                批次号
+              </Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                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>
+              <Text className="text-sm text-gray-900 dark:text-gray-100">
+                完成进度
+              </Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                65%
+              </Text>
             </View>
-            <View className="h-1.5 overflow-hidden rounded-sm bg-gray-200">
+            <View className="h-1.5 overflow-hidden rounded-sm bg-gray-200 dark:bg-gray-700">
               <View
                 className="h-full rounded-sm bg-blue-500"
                 style={{ width: '65%' }}
@@ -65,17 +86,19 @@ const QualityDetail = () => {
             </View>
           </View>
 
-          <View className="rounded-lg bg-blue-50 p-3">
+          <View className="rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
             <View className="flex-row items-start">
               <FontAwesome
                 name="info-circle"
                 size={16}
-                color="#0066ff"
+                color={isDark ? '#60a5fa' : '#0066ff'}
                 style={{ marginTop: 2, marginRight: 8 }}
               />
               <View>
-                <Text className="mb-1 text-sm font-medium">检验说明</Text>
-                <Text className="text-xs text-gray-700">
+                <Text className="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+                  检验说明
+                </Text>
+                <Text className="text-xs text-gray-700 dark:text-gray-300">
                   本次质检针对智能手表主板进行全面检测，包括电路连通性、元器件焊接质量、功能测试等。
                 </Text>
               </View>
@@ -94,10 +117,10 @@ const QualityDetail = () => {
               <TouchableOpacity
                 key={index}
                 onPress={() => setActiveTab(index)}
-                className={`rounded-full px-4 py-2 ${activeTab === index ? 'bg-blue-600' : ''}`}
+                className={`rounded-full px-4 py-2 ${activeTab === index ? 'bg-blue-600' : 'bg-white dark:bg-gray-800'}`}
               >
                 <Text
-                  className={`whitespace-nowrap text-sm font-medium ${activeTab === index ? 'text-white' : 'text-gray-600'}`}
+                  className={`whitespace-nowrap text-sm font-medium ${activeTab === index ? 'text-white' : 'text-gray-600 dark:text-gray-300'}`}
                 >
                   {tab}
                 </Text>
@@ -108,30 +131,48 @@ const QualityDetail = () => {
 
         {/* 检验结果 */}
         {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 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 font-medium text-gray-900 dark:text-gray-100">
+              检验结果统计
+            </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>
+                <Text className="text-xl font-bold text-blue-600 dark:text-blue-400">
+                  650
+                </Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  已检测
+                </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>
+                <Text className="text-xl font-bold text-green-600 dark:text-green-400">
+                  637
+                </Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  合格
+                </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>
+                <Text className="text-xl font-bold text-red-600 dark:text-red-400">
+                  13
+                </Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  不合格
+                </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>
+                <Text className="text-sm text-gray-900 dark:text-gray-100">
+                  合格率
+                </Text>
+                <Text className="font-medium text-green-600 dark:text-green-400">
+                  98.0%
+                </Text>
               </View>
-              <View className="h-1.5 overflow-hidden rounded-sm bg-gray-200">
+              <View className="h-1.5 overflow-hidden rounded-sm bg-gray-200 dark:bg-gray-700">
                 <View
                   className="h-full rounded-sm bg-green-500"
                   style={{ width: '98%' }}
@@ -141,68 +182,100 @@ const QualityDetail = () => {
 
             <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">
+                <View className="flex-row bg-gray-50 dark:bg-gray-700">
+                  <Text className="w-24 px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     检验项目
                   </Text>
-                  <Text className="w-20 px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500">
+                  <Text className="w-20 px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     标准值
                   </Text>
-                  <Text className="w-20 px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500">
+                  <Text className="w-20 px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     合格率
                   </Text>
-                  <Text className="w-20 px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500">
+                  <Text className="w-20 px-2 py-3 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     状态
                   </Text>
                 </View>
 
-                <View className="border-b border-gray-200">
+                <View className="border-b border-gray-200 dark:border-gray-700">
                   <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>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      电路连通性
+                    </Text>
+                    <Text className="w-20 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      100%
+                    </Text>
+                    <Text className="w-20 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      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 className="rounded-full bg-green-100 px-2 py-0.5 dark:bg-green-900/30">
+                        <Text className="text-xs text-green-800 dark:text-green-300">
+                          合格
+                        </Text>
                       </View>
                     </View>
                   </View>
                 </View>
 
-                <View className="border-b border-gray-200">
+                <View className="border-b border-gray-200 dark:border-gray-700">
                   <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>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      元器件焊接
+                    </Text>
+                    <Text className="w-20 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      ≥98%
+                    </Text>
+                    <Text className="w-20 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      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 className="rounded-full bg-red-100 px-2 py-0.5 dark:bg-red-900/30">
+                        <Text className="text-xs text-red-800 dark:text-red-300">
+                          不合格
+                        </Text>
                       </View>
                     </View>
                   </View>
                 </View>
 
-                <View className="border-b border-gray-200">
+                <View className="border-b border-gray-200 dark:border-gray-700">
                   <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>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      功能测试
+                    </Text>
+                    <Text className="w-20 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      ≥99%
+                    </Text>
+                    <Text className="w-20 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      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 className="rounded-full bg-green-100 px-2 py-0.5 dark:bg-green-900/30">
+                        <Text className="text-xs text-green-800 dark:text-green-300">
+                          合格
+                        </Text>
                       </View>
                     </View>
                   </View>
                 </View>
 
-                <View className="border-b border-gray-200">
+                <View className="border-b border-gray-200 dark:border-gray-700">
                   <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>
+                    <Text className="w-24 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      外观检查
+                    </Text>
+                    <Text className="w-20 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      ≥95%
+                    </Text>
+                    <Text className="w-20 px-2 py-3 text-sm text-gray-900 dark:text-gray-100">
+                      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 className="rounded-full bg-green-100 px-2 py-0.5 dark:bg-green-900/30">
+                        <Text className="text-xs text-green-800 dark:text-green-300">
+                          合格
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -214,75 +287,111 @@ const QualityDetail = () => {
 
         {/* 不良品分析 */}
         {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 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 font-medium text-gray-900 dark:text-gray-100">
+              不良品分析
+            </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 className="h-24 w-1/3 items-center justify-center rounded-lg bg-red-50 dark:bg-red-900/20">
+                <Text className="text-xl font-bold text-red-600 dark:text-red-400">
+                  2.0%
+                </Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  不良品率
+                </Text>
               </View>
               <View className="w-2/3 pl-4">
-                <Text className="mb-2 text-sm">主要不良原因：</Text>
+                <Text className="mb-2 text-sm text-gray-900 dark:text-gray-100">
+                  主要不良原因：
+                </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>
+                  <Text className="mr-2 text-xs text-gray-600 dark:text-gray-400">
+                    焊接不良
+                  </Text>
+                  <Text className="text-xs font-medium text-gray-900 dark:text-gray-100">
+                    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>
+                  <Text className="mr-2 text-xs text-gray-600 dark:text-gray-400">
+                    元器件损坏
+                  </Text>
+                  <Text className="text-xs font-medium text-gray-900 dark:text-gray-100">
+                    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>
+                  <Text className="mr-2 text-xs text-gray-600 dark:text-gray-400">
+                    电路异常
+                  </Text>
+                  <Text className="text-xs font-medium text-gray-900 dark:text-gray-100">
+                    15.4%
+                  </Text>
                 </View>
               </View>
             </View>
 
             <View className="mb-3">
-              <Text className="mb-2 text-sm font-medium">不良品标签</Text>
+              <Text className="mb-2 text-sm font-medium text-gray-900 dark:text-gray-100">
+                不良品标签
+              </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 className="mb-2 mr-2 rounded bg-red-100 px-2 py-1 dark:bg-red-900/30">
+                  <Text className="text-xs text-red-800 dark:text-red-300">
+                    虚焊
+                  </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 className="mb-2 mr-2 rounded bg-red-100 px-2 py-1 dark:bg-red-900/30">
+                  <Text className="text-xs text-red-800 dark:text-red-300">
+                    焊接过热
+                  </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 className="mb-2 mr-2 rounded bg-orange-100 px-2 py-1 dark:bg-orange-900/30">
+                  <Text className="text-xs text-orange-800 dark:text-orange-300">
+                    电容损坏
+                  </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 className="mb-2 mr-2 rounded bg-orange-100 px-2 py-1 dark:bg-orange-900/30">
+                  <Text className="text-xs text-orange-800 dark:text-orange-300">
+                    电阻偏差
+                  </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 className="mb-2 mr-2 rounded bg-yellow-100 px-2 py-1 dark:bg-yellow-900/30">
+                  <Text className="text-xs text-yellow-800 dark:text-yellow-300">
+                    短路
+                  </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 className="mb-2 mr-2 rounded bg-yellow-100 px-2 py-1 dark:bg-yellow-900/30">
+                  <Text className="text-xs text-yellow-800 dark:text-yellow-300">
+                    开路
+                  </Text>
                 </View>
               </View>
             </View>
 
-            <View className="rounded-lg bg-yellow-50 p-3">
+            <View className="rounded-lg bg-yellow-50 p-3 dark:bg-yellow-900/20">
               <View className="flex-row items-start">
                 <FontAwesome
                   name="exclamation-triangle"
                   size={16}
-                  color="#ca8a04"
+                  color={isDark ? '#fbbf24' : '#ca8a04'}
                   style={{ marginTop: 2, marginRight: 8 }}
                 />
                 <View>
-                  <Text className="mb-1 text-sm font-medium">改进建议</Text>
-                  <Text className="text-xs text-gray-700">
+                  <Text className="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+                    改进建议
+                  </Text>
+                  <Text className="text-xs text-gray-700 dark:text-gray-300">
                     1. 调整焊接温度参数，避免虚焊和过热问题
                   </Text>
-                  <Text className="text-xs text-gray-700">
+                  <Text className="text-xs text-gray-700 dark:text-gray-300">
                     2. 加强元器件进料检验，提高元器件质量
                   </Text>
-                  <Text className="text-xs text-gray-700">
+                  <Text className="text-xs text-gray-700 dark:text-gray-300">
                     3. 优化电路设计，增强抗干扰能力
                   </Text>
                 </View>
@@ -293,75 +402,95 @@ const QualityDetail = () => {
 
         {/* 操作记录 */}
         {activeTab === 2 && (
-          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
-            <Text className="mb-3 font-medium">操作记录</Text>
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 font-medium text-gray-900 dark:text-gray-100">
+              操作记录
+            </Text>
 
-            <View className="border-b border-gray-100 py-4">
+            <View className="border-b border-gray-100 py-4 dark:border-gray-700">
               <View className="mb-1 flex-row items-start justify-between">
                 <View className="flex-row items-center">
                   <FontAwesome
                     name="play-circle"
                     size={16}
-                    color="#0066ff"
+                    color={isDark ? '#60a5fa' : '#0066ff'}
                     style={{ marginRight: 8 }}
                   />
-                  <Text className="font-medium">开始检验</Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    开始检验
+                  </Text>
                 </View>
-                <Text className="text-xs text-gray-500">2023-12-01 09:30</Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  2023-12-01 09:30
+                </Text>
               </View>
-              <Text className="ml-6 text-sm text-gray-600">
+              <Text className="ml-6 text-sm text-gray-600 dark:text-gray-400">
                 王质检开始对批次BT20231201-A进行质量检验
               </Text>
             </View>
 
-            <View className="border-b border-gray-100 py-4">
+            <View className="border-b border-gray-100 py-4 dark:border-gray-700">
               <View className="mb-1 flex-row items-start justify-between">
                 <View className="flex-row items-center">
                   <FontAwesome
                     name="exclamation-circle"
                     size={16}
-                    color="#dc2626"
+                    color={isDark ? '#f87171' : '#dc2626'}
                     style={{ marginRight: 8 }}
                   />
-                  <Text className="font-medium">发现不良品</Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    发现不良品
+                  </Text>
                 </View>
-                <Text className="text-xs text-gray-500">2023-12-01 11:45</Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  2023-12-01 11:45
+                </Text>
               </View>
-              <Text className="ml-6 text-sm text-gray-600">
+              <Text className="ml-6 text-sm text-gray-600 dark:text-gray-400">
                 发现5件焊接不良产品，已标记并隔离
               </Text>
             </View>
 
-            <View className="border-b border-gray-100 py-4">
+            <View className="border-b border-gray-100 py-4 dark:border-gray-700">
               <View className="mb-1 flex-row items-start justify-between">
                 <View className="flex-row items-center">
                   <FontAwesome
                     name="pause-circle"
                     size={16}
-                    color="#ea580c"
+                    color={isDark ? '#fb923c' : '#ea580c'}
                     style={{ marginRight: 8 }}
                   />
-                  <Text className="font-medium">暂停检验</Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    暂停检验
+                  </Text>
                 </View>
-                <Text className="text-xs text-gray-500">2023-12-01 12:30</Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  2023-12-01 12:30
+                </Text>
               </View>
-              <Text className="ml-6 text-sm text-gray-600">午休暂停检验</Text>
+              <Text className="ml-6 text-sm text-gray-600 dark:text-gray-400">
+                午休暂停检验
+              </Text>
             </View>
 
-            <View className="border-b border-gray-100 py-4">
+            <View className="border-b border-gray-100 py-4 dark:border-gray-700">
               <View className="mb-1 flex-row items-start justify-between">
                 <View className="flex-row items-center">
                   <FontAwesome
                     name="play-circle"
                     size={16}
-                    color="#0066ff"
+                    color={isDark ? '#60a5fa' : '#0066ff'}
                     style={{ marginRight: 8 }}
                   />
-                  <Text className="font-medium">继续检验</Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    继续检验
+                  </Text>
                 </View>
-                <Text className="text-xs text-gray-500">2023-12-01 13:30</Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  2023-12-01 13:30
+                </Text>
               </View>
-              <Text className="ml-6 text-sm text-gray-600">
+              <Text className="ml-6 text-sm text-gray-600 dark:text-gray-400">
                 继续对批次BT20231201-A进行质量检验
               </Text>
             </View>
@@ -372,14 +501,18 @@ const QualityDetail = () => {
                   <FontAwesome
                     name="file-alt"
                     size={16}
-                    color="#16a34a"
+                    color={isDark ? '#4ade80' : '#16a34a'}
                     style={{ marginRight: 8 }}
                   />
-                  <Text className="font-medium">生成中期报告</Text>
+                  <Text className="font-medium text-gray-900 dark:text-gray-100">
+                    生成中期报告
+                  </Text>
                 </View>
-                <Text className="text-xs text-gray-500">2023-12-02 17:00</Text>
+                <Text className="text-xs text-gray-500 dark:text-gray-400">
+                  2023-12-02 17:00
+                </Text>
               </View>
-              <Text className="ml-6 text-sm text-gray-600">
+              <Text className="ml-6 text-sm text-gray-600 dark:text-gray-400">
                 生成检验中期报告，当前合格率98.0%
               </Text>
             </View>
@@ -388,42 +521,62 @@ const QualityDetail = () => {
 
         {/* 检验标准 */}
         {activeTab === 3 && (
-          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
-            <Text className="mb-3 font-medium">检验标准</Text>
+          <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+            <Text className="mb-3 font-medium text-gray-900 dark:text-gray-100">
+              检验标准
+            </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>
+              <Text className="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+                参考标准
+              </Text>
+              <Text className="text-sm text-gray-700 dark:text-gray-300">
+                IPC-A-610G 3级标准
+              </Text>
             </View>
 
             <View className="mb-3">
-              <Text className="mb-1 text-sm font-medium">检验项目</Text>
+              <Text className="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+                检验项目
+              </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 className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-700">
+                  <Text className="text-xs text-gray-800 dark:text-gray-300">
+                    电路连通性
+                  </Text>
                 </View>
-                <View className="rounded bg-gray-100 px-2 py-1">
-                  <Text className="text-xs text-gray-800">元器件焊接</Text>
+                <View className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-700">
+                  <Text className="text-xs text-gray-800 dark:text-gray-300">
+                    元器件焊接
+                  </Text>
                 </View>
-                <View className="rounded bg-gray-100 px-2 py-1">
-                  <Text className="text-xs text-gray-800">功能测试</Text>
+                <View className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-700">
+                  <Text className="text-xs text-gray-800 dark:text-gray-300">
+                    功能测试
+                  </Text>
                 </View>
-                <View className="rounded bg-gray-100 px-2 py-1">
-                  <Text className="text-xs text-gray-800">外观检查</Text>
+                <View className="rounded bg-gray-100 px-2 py-1 dark:bg-gray-700">
+                  <Text className="text-xs text-gray-800 dark:text-gray-300">
+                    外观检查
+                  </Text>
                 </View>
               </View>
             </View>
 
             <View className="mb-3">
-              <Text className="mb-1 text-sm font-medium">抽样方案</Text>
-              <Text className="text-sm text-gray-700">
+              <Text className="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+                抽样方案
+              </Text>
+              <Text className="text-sm text-gray-700 dark:text-gray-300">
                 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">
+              <Text className="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+                合格判定
+              </Text>
+              <Text className="text-sm text-gray-700 dark:text-gray-300">
                 AQL=1.0，批量1000pcs，抽检数量80pcs，接收数2，拒收数3
               </Text>
             </View>
@@ -434,14 +587,16 @@ const QualityDetail = () => {
       {/* 底部操作按钮 */}
       <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">
+          <TouchableOpacity className="flex-1 flex-row items-center justify-center rounded-lg border border-gray-300 bg-white py-3 dark:border-gray-600 dark:bg-gray-800">
             <FontAwesome
               name="file-export"
               size={16}
-              color="#4b5563"
+              color={isDark ? '#9ca3af' : '#4b5563'}
               style={{ marginRight: 8 }}
             />
-            <Text className="text-sm font-medium text-gray-700">导出报告</Text>
+            <Text className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              导出报告
+            </Text>
           </TouchableOpacity>
           <TouchableOpacity className="flex-1 flex-row items-center justify-center rounded-lg bg-blue-600 py-3">
             <FontAwesome
diff --git a/src/app/quality/index.tsx b/src/app/quality/index.tsx
index 8ca79114c5175a2841af6f4b5015b1f04adbe3b3..33f2f416418e4f6709d2a274d907c8f8cd43e8d6 100644
--- a/src/app/quality/index.tsx
+++ b/src/app/quality/index.tsx
@@ -1,18 +1,16 @@
 // import { useNavigation } from '@react-navigation/native';
 import { useRouter } from 'expo-router';
 import React, { useState } from 'react';
-import {
-  ScrollView,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { NavHeader, SafeAreaView } from '@/components/ui';
+import { NavHeader } from '@/components/ui';
 import { FontAwesome } from '@/components/ui/icons';
+import { useAppColorScheme } from '@/lib';
 
 const Quality = () => {
   const router = useRouter();
+  const { isDark } = useAppColorScheme();
 
   // const navigation = useNavigation();
   const [activeMainTab, setActiveMainTab] = useState('quality-overview');
@@ -39,15 +37,15 @@ const Quality = () => {
 
   // 渲染主选项卡
   const renderMainTabs = () => (
-    <View className="mb-4 flex-row overflow-hidden rounded-full bg-white">
+    <View className="mb-4 flex-row overflow-hidden rounded-full bg-white dark:bg-gray-800">
       {mainTabs.map((tab) => (
         <TouchableOpacity
           key={tab.id}
-          className={`flex-1 items-center px-3 py-2 ${activeMainTab === tab.id ? 'bg-blue-600' : 'bg-white'}`}
+          className={`flex-1 items-center px-3 py-2 ${activeMainTab === tab.id ? 'bg-blue-600' : 'bg-white dark:bg-gray-800'}`}
           onPress={() => setActiveMainTab(tab.id)}
         >
           <Text
-            className={`text-sm font-medium ${activeMainTab === tab.id ? 'text-white' : 'text-gray-600'}`}
+            className={`text-sm font-medium ${activeMainTab === tab.id ? 'text-white' : 'text-gray-600 dark:text-gray-300'}`}
           >
             {tab.title}
           </Text>
@@ -67,11 +65,11 @@ const Quality = () => {
         {subTabs.map((tab) => (
           <TouchableOpacity
             key={tab}
-            className={`rounded-full px-4 py-2 ${activeSubTab === tab ? 'bg-blue-600' : 'bg-white'}`}
+            className={`rounded-full px-4 py-2 ${activeSubTab === tab ? 'bg-blue-600' : 'bg-white dark:bg-gray-800'}`}
             onPress={() => setActiveSubTab(tab)}
           >
             <Text
-              className={`whitespace-nowrap text-sm font-medium ${activeSubTab === tab ? 'text-white' : 'text-gray-600'}`}
+              className={`whitespace-nowrap text-sm font-medium ${activeSubTab === tab ? 'text-white' : 'text-gray-600 dark:text-gray-300'}`}
             >
               {tab}
             </Text>
@@ -92,11 +90,11 @@ const Quality = () => {
         {inspectionTabs.map((tab) => (
           <TouchableOpacity
             key={tab}
-            className={`rounded-full px-4 py-2 ${activeInspectionTab === tab ? 'bg-blue-600' : 'bg-white'}`}
+            className={`rounded-full px-4 py-2 ${activeInspectionTab === tab ? 'bg-blue-600' : 'bg-white dark:bg-gray-800'}`}
             onPress={() => setActiveInspectionTab(tab)}
           >
             <Text
-              className={`whitespace-nowrap text-sm font-medium ${activeInspectionTab === tab ? 'text-white' : 'text-gray-600'}`}
+              className={`whitespace-nowrap text-sm font-medium ${activeInspectionTab === tab ? 'text-white' : 'text-gray-600 dark:text-gray-300'}`}
             >
               {tab}
             </Text>
@@ -112,33 +110,51 @@ const Quality = () => {
       {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-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+        <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+          质量概览
+        </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>
+            <Text className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+              24
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              今日质检
+            </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>
+            <Text className="text-2xl font-bold text-green-600 dark:text-green-400">
+              98.5%
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              合格率
+            </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>
+            <Text className="text-2xl font-bold text-orange-600 dark:text-orange-400">
+              5
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              待处理
+            </Text>
           </View>
         </View>
-        <View className="flex-row items-center rounded-lg bg-blue-50 p-3">
+        <View className="flex-row items-center rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
           <FontAwesome
             name="chart-line"
             size={20}
-            color="#0066ff"
+            color={isDark ? '#60a5fa' : '#0066ff'}
             style={{ marginRight: 12 }}
           />
           <View>
-            <Text className="text-sm font-medium">本月质量趋势</Text>
+            <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+              本月质量趋势
+            </Text>
             <View className="flex-row items-center">
-              <Text className="mr-2 text-lg font-bold text-blue-600">良好</Text>
+              <Text className="mr-2 text-lg font-bold text-blue-600 dark:text-blue-400">
+                良好
+              </Text>
               <Text className="text-xs text-green-500">↑ 1.2%</Text>
             </View>
           </View>
@@ -146,30 +162,42 @@ const Quality = () => {
       </View>
 
       {/* 质检任务列表 */}
-      <Text className="mb-3 text-lg font-semibold">质检任务</Text>
+      <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+        质检任务
+      </Text>
 
       {/* 任务项目1 */}
       <TouchableOpacity onPress={() => router.push(`/quality/1`)}>
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
           <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>
+            <Text className="font-medium text-gray-900 dark:text-gray-100">
+              智能手表主板质检
+            </Text>
+            <View className="rounded-full bg-blue-100 px-2 py-1 dark:bg-blue-900/30">
+              <Text className="text-xs font-medium text-blue-800 dark:text-blue-300">
+                进行中
+              </Text>
             </View>
           </View>
-          <Text className="mb-2 text-sm text-gray-600">
+          <Text className="mb-2 text-sm text-gray-600 dark:text-gray-400">
             任务编号：QC20231128-01
           </Text>
-          <View className="mb-3 flex-row justify-between text-sm text-gray-600">
-            <Text>负责人：王质检</Text>
-            <Text>截止日期：2023-12-05</Text>
+          <View className="mb-3 flex-row justify-between text-sm text-gray-600 dark:text-gray-400">
+            <Text className="text-gray-600 dark:text-gray-400">
+              负责人：王质检
+            </Text>
+            <Text className="text-gray-600 dark:text-gray-400">
+              截止日期：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>
+              <Text className="text-gray-900 dark:text-gray-100">完成进度</Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                65%
+              </Text>
             </View>
-            <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+            <View className="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
               <View
                 className="h-full rounded-full bg-blue-500"
                 style={{ width: '65%' }}
@@ -178,13 +206,21 @@ const Quality = () => {
           </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>
+              <Text className="text-gray-600 dark:text-gray-400">
+                计划检测：
+              </Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                1000
+              </Text>
+              <Text className="ml-3 text-gray-600 dark:text-gray-400">
+                已完成：
+              </Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                650
+              </Text>
             </View>
             <TouchableOpacity>
-              <Text className="text-blue-600">详情</Text>
+              <Text className="text-blue-600 dark:text-blue-400">详情</Text>
             </TouchableOpacity>
           </View>
         </View>
@@ -192,26 +228,36 @@ const Quality = () => {
 
       {/* 任务项目2 */}
       <TouchableOpacity onPress={() => router.push(`/quality/1`)}>
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
           <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>
+            <Text className="font-medium text-gray-900 dark:text-gray-100">
+              智能音箱外壳质检
+            </Text>
+            <View className="rounded-full bg-green-100 px-2 py-1 dark:bg-green-900/30">
+              <Text className="text-xs font-medium text-green-800 dark:text-green-300">
+                已完成
+              </Text>
             </View>
           </View>
-          <Text className="mb-2 text-sm text-gray-600">
+          <Text className="mb-2 text-sm text-gray-600 dark:text-gray-400">
             任务编号：QC20231125-03
           </Text>
-          <View className="mb-3 flex-row justify-between text-sm text-gray-600">
-            <Text>负责人：李质检</Text>
-            <Text>完成日期：2023-11-28</Text>
+          <View className="mb-3 flex-row justify-between text-sm text-gray-600 dark:text-gray-400">
+            <Text className="text-gray-600 dark:text-gray-400">
+              负责人：李质检
+            </Text>
+            <Text className="text-gray-600 dark:text-gray-400">
+              完成日期：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>
+              <Text className="text-gray-900 dark:text-gray-100">合格率</Text>
+              <Text className="font-medium text-green-600 dark:text-green-400">
+                99.2%
+              </Text>
             </View>
-            <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+            <View className="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
               <View
                 className="h-full rounded-full bg-green-500"
                 style={{ width: '99.2%' }}
@@ -220,78 +266,122 @@ const Quality = () => {
           </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>
+              <Text className="text-gray-600 dark:text-gray-400">
+                检测数量：
+              </Text>
+              <Text className="font-medium text-gray-900 dark:text-gray-100">
+                2000
+              </Text>
+              <Text className="ml-3 text-gray-600 dark:text-gray-400">
+                不合格：
+              </Text>
+              <Text className="font-medium text-red-600 dark:text-red-400">
+                16
+              </Text>
             </View>
             <TouchableOpacity>
-              <Text className="text-blue-600">查看报告</Text>
+              <Text className="text-blue-600 dark:text-blue-400">查看报告</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">
+      <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+        不良品分析
+      </Text>
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
         <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 className="h-24 w-1/3 items-center justify-center rounded-lg bg-blue-50 dark:bg-blue-900/20">
+            <Text className="text-xl font-bold text-blue-600 dark:text-blue-400">
+              1.5%
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              不良品率
+            </Text>
           </View>
           <View className="w-2/3 pl-4">
-            <Text className="mb-2 text-sm">主要不良原因：</Text>
+            <Text className="mb-2 text-sm text-gray-900 dark:text-gray-100">
+              主要不良原因：
+            </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>
+              <Text className="mr-2 text-xs text-gray-600 dark:text-gray-400">
+                焊接不良
+              </Text>
+              <Text className="text-xs font-medium text-gray-900 dark:text-gray-100">
+                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>
+              <Text className="mr-2 text-xs text-gray-600 dark:text-gray-400">
+                外观瑕疵
+              </Text>
+              <Text className="text-xs font-medium text-gray-900 dark:text-gray-100">
+                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>
+              <Text className="mr-2 text-xs text-gray-600 dark:text-gray-400">
+                功能异常
+              </Text>
+              <Text className="text-xs font-medium text-gray-900 dark:text-gray-100">
+                25%
+              </Text>
             </View>
           </View>
         </View>
         <TouchableOpacity>
-          <Text className="text-sm text-blue-600">查看详细分析</Text>
+          <Text className="text-sm text-blue-600 dark:text-blue-400">
+            查看详细分析
+          </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">
+      <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+        质量改进建议
+      </Text>
+      <View className="rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+        <View className="border-b border-gray-100 py-4 dark:border-gray-700">
           <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>
+            <Text className="font-medium text-gray-900 dark:text-gray-100">
+              优化焊接工艺参数
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              2023-11-28
+            </Text>
           </View>
-          <Text className="text-sm text-gray-600">
+          <Text className="text-sm text-gray-600 dark:text-gray-400">
             针对焊接不良问题，建议调整焊接温度和时间参数，并加强操作人员培训。
           </Text>
         </View>
 
-        <View className="border-b border-gray-100 py-4">
+        <View className="border-b border-gray-100 py-4 dark:border-gray-700">
           <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>
+            <Text className="font-medium text-gray-900 dark:text-gray-100">
+              更新外观检测标准
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              2023-11-25
+            </Text>
           </View>
-          <Text className="text-sm text-gray-600">
+          <Text className="text-sm text-gray-600 dark:text-gray-400">
             建议更新外观检测标准，增加细节检查项，并引入自动化视觉检测系统辅助人工检测。
           </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>
+            <Text className="font-medium text-gray-900 dark:text-gray-100">
+              加强功能测试覆盖率
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              2023-11-22
+            </Text>
           </View>
-          <Text className="text-sm text-gray-600">
+          <Text className="text-sm text-gray-600 dark:text-gray-400">
             针对功能异常问题，建议增加测试用例覆盖率，并在生产线上增加中间测试环节。
           </Text>
         </View>
@@ -303,33 +393,49 @@ const Quality = () => {
   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-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+        <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+          质量检验概览
+        </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>
+            <Text className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+              15
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              待检验
+            </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>
+            <Text className="text-2xl font-bold text-orange-600 dark:text-orange-400">
+              8
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              检验中
+            </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>
+            <Text className="text-2xl font-bold text-green-600 dark:text-green-400">
+              42
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              已完成
+            </Text>
           </View>
         </View>
-        <View className="flex-row items-center rounded-lg bg-blue-50 p-3">
+        <View className="flex-row items-center rounded-lg bg-blue-50 p-3 dark:bg-blue-900/20">
           <FontAwesome
             name="clipboard-check"
             size={20}
-            color="#0066ff"
+            color={isDark ? '#60a5fa' : '#0066ff'}
             style={{ marginRight: 12 }}
           />
           <View>
-            <Text className="text-sm font-medium">本周检验完成率</Text>
+            <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+              本周检验完成率
+            </Text>
             <View className="flex-row items-center">
-              <Text className="mr-2 text-lg font-bold text-blue-600">
+              <Text className="mr-2 text-lg font-bold text-blue-600 dark:text-blue-400">
                 92.5%
               </Text>
               <Text className="text-xs text-green-500">↑ 3.2%</Text>
@@ -340,25 +446,31 @@ const Quality = () => {
 
       {/* 检验任务筛选 */}
       <View className="mb-3 flex-row items-center justify-between">
-        <Text className="text-lg font-semibold">检验任务</Text>
+        <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          检验任务
+        </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">
+          <TouchableOpacity className="flex-row items-center rounded-md border border-gray-300 bg-white px-3 py-1 dark:border-gray-600 dark:bg-gray-800">
             <FontAwesome
               name="filter"
               size={12}
-              color="#6b7280"
+              color={isDark ? '#9ca3af' : '#6b7280'}
               style={{ marginRight: 4 }}
             />
-            <Text className="text-sm">筛选</Text>
+            <Text className="text-sm text-gray-900 dark:text-gray-100">
+              筛选
+            </Text>
           </TouchableOpacity>
-          <TouchableOpacity className="flex-row items-center rounded-md border border-gray-300 bg-white px-3 py-1">
+          <TouchableOpacity className="flex-row items-center rounded-md border border-gray-300 bg-white px-3 py-1 dark:border-gray-600 dark:bg-gray-800">
             <FontAwesome
               name="sort"
               size={12}
-              color="#6b7280"
+              color={isDark ? '#9ca3af' : '#6b7280'}
               style={{ marginRight: 4 }}
             />
-            <Text className="text-sm">排序</Text>
+            <Text className="text-sm text-gray-900 dark:text-gray-100">
+              排序
+            </Text>
           </TouchableOpacity>
         </View>
       </View>
@@ -367,54 +479,78 @@ const Quality = () => {
       {renderInspectionTabs()}
 
       {/* 检验任务1 */}
-      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
         <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>
+          <Text className="font-medium text-gray-900 dark:text-gray-100">
+            智能手表主板检验
+          </Text>
+          <View className="rounded-full bg-yellow-100 px-2 py-1 dark:bg-yellow-900/30">
+            <Text className="text-xs font-medium text-yellow-800 dark:text-yellow-300">
+              待检验
+            </Text>
           </View>
         </View>
-        <Text className="mb-2 text-sm text-gray-600">
+        <Text className="mb-2 text-sm text-gray-600 dark:text-gray-400">
           任务编号：QI20231201-01
         </Text>
-        <View className="mb-3 flex-row justify-between text-sm text-gray-600">
-          <Text>负责人：王质检</Text>
-          <Text>截止日期：2023-12-05</Text>
+        <View className="mb-3 flex-row justify-between text-sm text-gray-600 dark:text-gray-400">
+          <Text className="text-gray-600 dark:text-gray-400">
+            负责人：王质检
+          </Text>
+          <Text className="text-gray-600 dark:text-gray-400">
+            截止日期：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>
+            <Text className="text-gray-600 dark:text-gray-400">批次号：</Text>
+            <Text className="font-medium text-gray-900 dark:text-gray-100">
+              BT20231201-A
+            </Text>
+            <Text className="ml-3 text-gray-600 dark:text-gray-400">
+              计划数量：
+            </Text>
+            <Text className="font-medium text-gray-900 dark:text-gray-100">
+              500
+            </Text>
           </View>
           <TouchableOpacity>
-            <Text className="text-blue-600">开始检验</Text>
+            <Text className="text-blue-600 dark:text-blue-400">开始检验</Text>
           </TouchableOpacity>
         </View>
       </View>
 
       {/* 检验任务2 */}
-      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
         <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>
+          <Text className="font-medium text-gray-900 dark:text-gray-100">
+            智能音箱电路板检验
+          </Text>
+          <View className="rounded-full bg-blue-100 px-2 py-1 dark:bg-blue-900/30">
+            <Text className="text-xs font-medium text-blue-800 dark:text-blue-300">
+              检验中
+            </Text>
           </View>
         </View>
-        <Text className="mb-2 text-sm text-gray-600">
+        <Text className="mb-2 text-sm text-gray-600 dark:text-gray-400">
           任务编号：QI20231130-02
         </Text>
-        <View className="mb-3 flex-row justify-between text-sm text-gray-600">
-          <Text>负责人：李质检</Text>
-          <Text>截止日期：2023-12-03</Text>
+        <View className="mb-3 flex-row justify-between text-sm text-gray-600 dark:text-gray-400">
+          <Text className="text-gray-600 dark:text-gray-400">
+            负责人：李质检
+          </Text>
+          <Text className="text-gray-600 dark:text-gray-400">
+            截止日期：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>
+            <Text className="text-gray-900 dark:text-gray-100">完成进度</Text>
+            <Text className="font-medium text-gray-900 dark:text-gray-100">
+              70%
+            </Text>
           </View>
-          <View className="h-1.5 overflow-hidden rounded-full bg-gray-200">
+          <View className="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
             <View
               className="h-full rounded-full bg-blue-500"
               style={{ width: '70%' }}
@@ -423,13 +559,19 @@ const Quality = () => {
         </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>
+            <Text className="text-gray-600 dark:text-gray-400">已检验：</Text>
+            <Text className="font-medium text-gray-900 dark:text-gray-100">
+              350
+            </Text>
+            <Text className="ml-3 text-gray-600 dark:text-gray-400">
+              不合格：
+            </Text>
+            <Text className="font-medium text-red-600 dark:text-red-400">
+              12
+            </Text>
           </View>
           <TouchableOpacity>
-            <Text className="text-blue-600">继续检验</Text>
+            <Text className="text-blue-600 dark:text-blue-400">继续检验</Text>
           </TouchableOpacity>
         </View>
       </View>
@@ -439,9 +581,15 @@ const Quality = () => {
   // 渲染缺陷管理内容（简化版）
   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">
+      <FontAwesome
+        name="exclamation-triangle"
+        size={50}
+        color={isDark ? '#fbbf24' : '#f59e0b'}
+      />
+      <Text className="mb-2 mt-4 text-lg font-medium text-gray-900 dark:text-gray-100">
+        缺陷管理
+      </Text>
+      <Text className="px-8 text-center text-sm text-gray-500 dark:text-gray-400">
         此部分内容正在开发中，敬请期待
       </Text>
     </View>
@@ -450,9 +598,15 @@ const Quality = () => {
   // 渲染质量报表内容（简化版）
   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">
+      <FontAwesome
+        name="chart-bar"
+        size={50}
+        color={isDark ? '#60a5fa' : '#3b82f6'}
+      />
+      <Text className="mb-2 mt-4 text-lg font-medium text-gray-900 dark:text-gray-100">
+        质量报表
+      </Text>
+      <Text className="px-8 text-center text-sm text-gray-500 dark:text-gray-400">
         此部分内容正在开发中，敬请期待
       </Text>
     </View>
@@ -473,9 +627,10 @@ const Quality = () => {
         return renderQualityOverview();
     }
   };
+  const insets = useSafeAreaInsets();
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-50">
+    <View className="flex-1 bg-gray-50 dark:bg-gray-900">
       <NavHeader title="质量管理" />
 
       <ScrollView className="flex-1 p-4">
@@ -484,6 +639,7 @@ const Quality = () => {
 
         {/* 内容区域 */}
         {renderContent()}
+        <View style={{ height: insets.bottom }}></View>
       </ScrollView>
 
       {/* 浮动按钮 */}
@@ -493,7 +649,7 @@ const Quality = () => {
       >
         <FontAwesome name="plus" size={20} color="#fff" />
       </TouchableOpacity>
-    </SafeAreaView>
+    </View>
   );
 };
 
diff --git a/src/app/repair-order/[id].tsx b/src/app/repair-order/[id].tsx
index ce5ac908e7655fca7d61c7dd69004bdc01e6a10e..a69c34e9480b4c92f3f5e5bba24f6d3a1f5d7fdb 100644
--- a/src/app/repair-order/[id].tsx
+++ b/src/app/repair-order/[id].tsx
@@ -4,113 +4,12 @@ import React from 'react';
 import { Image, ScrollView, TouchableOpacity } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { InfoRow } from '@/components/equipment';
+import { ProgressItem, SparePartItem } from '@/components/repair-order';
 import { NavHeader, Text, View } from '@/components/ui';
 import { FontAwesome } from '@/components/ui/icons';
 import { useAppColorScheme } from '@/lib/hooks';
 
-// 信息行组件
-type InfoRowProps = {
-  label: string;
-  value: string;
-  isLast?: boolean;
-};
-
-const InfoRow: React.FC<InfoRowProps> = ({ label, value, isLast = false }) => (
-  <View
-    className={`flex-row justify-between py-2 ${!isLast ? 'border-b border-gray-100 dark:border-neutral-700' : ''}`}
-  >
-    <Text className="text-sm text-gray-500 dark:text-gray-400">{label}</Text>
-    <Text className="text-sm font-semibold text-gray-800 dark:text-gray-100">
-      {value}
-    </Text>
-  </View>
-);
-
-// 进度项组件
-type ProgressItemProps = {
-  icon: string;
-  iconColor: string;
-  bgColor: string;
-  title: string;
-  time?: string;
-  description?: string;
-  isCompleted: boolean;
-};
-
-const ProgressItem: React.FC<ProgressItemProps> = ({
-  icon,
-  iconColor,
-  bgColor,
-  title,
-  time,
-  description,
-  isCompleted,
-}) => (
-  <View className="mb-4 flex-row items-start">
-    <View
-      className="size-8 shrink-0 items-center justify-center rounded-full"
-      style={{ backgroundColor: bgColor }}
-    >
-      <FontAwesome
-        name={icon as any}
-        size={12}
-        color={isCompleted ? 'white' : iconColor}
-      />
-    </View>
-    <View className="ml-3 flex-1">
-      <View className="mb-1 flex-row items-center justify-between">
-        <Text
-          className={`text-sm font-semibold ${isCompleted ? 'text-gray-800 dark:text-gray-100' : 'text-gray-400 dark:text-gray-500'}`}
-        >
-          {title}
-        </Text>
-        {time && (
-          <Text className="text-xs text-gray-500 dark:text-gray-400">
-            {time}
-          </Text>
-        )}
-      </View>
-      {description && (
-        <Text className="text-xs text-gray-600 dark:text-gray-400">
-          {description}
-        </Text>
-      )}
-    </View>
-  </View>
-);
-
-// 备件项组件
-type SparePartItemProps = {
-  name: string;
-  model: string;
-  quantity: number;
-  price: string;
-};
-
-const SparePartItem: React.FC<SparePartItemProps> = ({
-  name,
-  model,
-  quantity,
-  price,
-}) => (
-  <View className="mb-3 flex-row items-center justify-between rounded-lg bg-gray-50 p-3 dark:bg-neutral-700/50">
-    <View>
-      <Text className="text-sm font-semibold text-gray-800 dark:text-gray-100">
-        {name}
-      </Text>
-      <Text className="text-xs text-gray-500 dark:text-gray-400">
-        型号：{model}
-      </Text>
-    </View>
-    <View className="items-end">
-      <Text className="text-sm font-semibold text-gray-800 dark:text-gray-100">
-        ×{quantity}
-      </Text>
-      <Text className="text-xs text-gray-500 dark:text-gray-400">{price}</Text>
-    </View>
-  </View>
-);
-
 const RepairOrderDetail: React.FC = () => {
   // const router = useRouter();
   // const { id } = useLocalSearchParams();
diff --git a/src/app/repair-order/add.tsx b/src/app/repair-order/add.tsx
index 8e18998824b9fdd652b04b1ecbc140d3600f44c6..6ae4129ed1d00c9853de117b8d64d3fe40f98c99 100644
--- a/src/app/repair-order/add.tsx
+++ b/src/app/repair-order/add.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'expo-router';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Alert,
   ScrollView,
@@ -8,32 +8,21 @@ import {
   TouchableOpacity,
 } from 'react-native';
 
-import { NavHeader, Text, View } from '@/components/ui';
-import { FontAwesome } from '@/components/ui/icons';
-import { useAppColorScheme } from '@/lib/hooks';
+import { queryLov } from '@/api';
+import http from '@/api/common/http';
+import { PriorityButton, RadioButton } from '@/components/repair-order';
+import {
+  DatePickerInput,
+  FontAwesome,
+  NavHeader,
+  Text,
+  View,
+} from '@/components/ui';
+import { QRCodeScanner } from '@/components/ui/qr-code-scanner';
+import { isWeb } from '@/lib';
 import { error, info } from '@/lib/message';
-
-// 设备选项类型
-type Equipment = {
-  id: string;
-  name: string;
-  code: string;
-  location: string;
-};
-
-// 设备数据
-const equipmentList: Equipment[] = [
-  { id: '1', name: '数控机床', code: 'CNC-01', location: 'A车间-1号线' },
-  { id: '2', name: '数控机床', code: 'CNC-03', location: 'A车间-3号线' },
-  { id: '3', name: '注塑机', code: 'IM-03', location: 'B车间-2号线' },
-  { id: '4', name: '注塑机', code: 'IM-05', location: 'B车间-5号线' },
-  { id: '5', name: '空压机', code: 'AC-01', location: '动力车间' },
-  { id: '6', name: '空压机', code: 'AC-02', location: '动力车间' },
-  { id: '7', name: '空压机', code: 'AC-05', location: '动力车间' },
-  { id: '8', name: '传送带', code: 'CB-01', location: 'C车间-包装区' },
-  { id: '9', name: '传送带', code: 'CB-02', location: 'C车间-包装区' },
-  { id: '10', name: '混料机', code: 'MX-08', location: 'C车间-配料区' },
-];
+import { type Equipment, type SmLov } from '@/types';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 // 维修人员数据
 const technicianList = [
@@ -44,98 +33,19 @@ const technicianList = [
   { id: '5', name: '孙七', level: '初级技师' },
 ];
 
-// 单选按钮组件
-type RadioButtonProps = {
-  label: string;
-  selected: boolean;
-  onPress: () => void;
-  icon?: string;
-  color?: string;
-};
-
-const RadioButton: React.FC<RadioButtonProps> = ({
-  label,
-  selected,
-  onPress,
-  icon,
-  color = '#1890ff',
-}) => (
-  <TouchableOpacity
-    onPress={onPress}
-    className={`flex-row items-center rounded-lg border-2 p-3 ${selected
-        ? 'border-primary-500 bg-blue-50 dark:bg-blue-950/30'
-        : 'border-gray-200 dark:border-neutral-700'
-      }`}
-    activeOpacity={0.7}
-  >
-    {icon && (
-      <View
-        className="mr-2 size-6 items-center justify-center"
-        style={{ opacity: selected ? 1 : 0.5 }}
-      >
-        <FontAwesome name={icon as any} size={16} color={color} />
-      </View>
-    )}
-    <Text
-      className={`text-sm ${selected ? 'font-semibold text-gray-800 dark:text-gray-100' : 'text-gray-700 dark:text-gray-400'}`}
-    >
-      {label}
-    </Text>
-  </TouchableOpacity>
-);
-
-// 优先级按钮组件
-type PriorityButtonProps = {
-  label: string;
-  icon: string;
-  color: string;
-  selected: boolean;
-  onPress: () => void;
-};
-
-const PriorityButton: React.FC<PriorityButtonProps> = ({
-  label,
-  icon,
-  color,
-  selected,
-  onPress,
-}) => (
-  <TouchableOpacity
-    onPress={onPress}
-    className={`flex-1 items-center justify-center rounded-lg border-2 py-4 ${selected ? `border-[${color}]` : 'border-gray-200 dark:border-neutral-700'
-      }`}
-    style={
-      selected
-        ? { borderColor: color, backgroundColor: `${color}10` }
-        : undefined
-    }
-    activeOpacity={0.7}
-  >
-    <FontAwesome
-      name={icon as any}
-      size={24}
-      color={selected ? color : '#9ca3af'}
-    />
-    <Text
-      className="mt-1 text-sm font-semibold"
-      style={{ color: selected ? color : '#9ca3af' }}
-    >
-      {label}
-    </Text>
-  </TouchableOpacity>
-);
-
 const AddRepairOrder: React.FC = () => {
   const router = useRouter();
-  const { isDark } = useAppColorScheme();
+  const insets = useSafeAreaInsets();
 
   // 表单状态
   const [selectedEquipment, setSelectedEquipment] = useState<string>('');
   const [faultType, setFaultType] = useState<string>('');
+  const [faultTypes, setFaultTypes] = useState<SmLov[]>([]);
+  const [equipmentList, setEquipmentList] = useState<Equipment[]>([]);
   const [priority, setPriority] = useState<string>('');
   const [impact, setImpact] = useState<string>('');
   const [faultDescription, setFaultDescription] = useState<string>('');
-  const [expectedTime, setExpectedTime] = useState<string>('');
+  const [expectedTime, setExpectedTime] = useState<Date>();
   const [assignedTechnician, setAssignedTechnician] = useState<string>('');
   const [remarks, setRemarks] = useState<string>('');
   const [needShutdown, setNeedShutdown] = useState<boolean>(false);
@@ -143,13 +53,14 @@ const AddRepairOrder: React.FC = () => {
   // 显示设备选择器
   const [showEquipmentPicker, setShowEquipmentPicker] = useState(false);
   const [showTechnicianPicker, setShowTechnicianPicker] = useState(false);
+  const [showScanner, setShowScanner] = useState(false);
 
   // 获取选中的设备
   const getSelectedEquipmentText = () => {
     if (!selectedEquipment) return '请选择需要维修的设备';
-    const equipment = equipmentList.find((e) => e.id === selectedEquipment);
+    const equipment = equipmentList.find((e) => e.ID === selectedEquipment);
     return equipment
-      ? `${equipment.name} ${equipment.code} (${equipment.location})`
+      ? `${equipment.MachineName} ${equipment.MachineNo} (${equipment.Location})`
       : '请选择需要维修的设备';
   };
 
@@ -162,6 +73,49 @@ const AddRepairOrder: React.FC = () => {
       : '系统自动分配';
   };
 
+  const loadFaultType = async () => {
+    const { Success, Data } = await queryLov('EquipmentFaultType');
+    if (Success) setFaultTypes(Data);
+  };
+  const loadEquipment = async () => {
+    const { Success, Data } = await http.get<Equipment[]>(
+      '/api/EmRepairOrder/GetEquipment'
+    );
+    if (Success) setEquipmentList(Data);
+  };
+
+  useEffect(() => {
+    loadFaultType();
+    loadEquipment();
+  }, []);
+
+  // 处理扫码结果
+  const handleScanResult = (data: string) => {
+    setShowScanner(false);
+    let parts = data.split('_');
+    console.log()
+    if (parts.length !== 2) {
+      info(`无效的设备二维码！`);
+      return;
+    }
+
+    // 根据扫描结果查找设备
+    const equipment = equipmentList.find(
+      (e) => e.MachineNo === parts[1] || e.ID === parts[1]
+    );
+    if (equipment) {
+      setSelectedEquipment(equipment.ID);
+      info(`已选择设备: ${equipment.MachineName}`);
+    } else {
+      error(`无效的设备二维码！`);
+    }
+  };
+
+  // 取消扫码
+  const handleCancelScan = () => {
+    setShowScanner(false);
+  };
+
   // 验证表单
   const validateForm = () => {
     if (!selectedEquipment) {
@@ -191,37 +145,54 @@ const AddRepairOrder: React.FC = () => {
     return true;
   };
 
-  // 保存草稿
-  const handleSaveDraft = () => {
-    Alert.alert('保存草稿', '是否保存为草稿？', [
-      { text: '取消', style: 'cancel' },
-      {
-        text: '确定',
-        onPress: () => {
-          info('已保存为草稿');
-          router.back();
-        },
-      },
-    ]);
-  };
-
   // 提交表单
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     if (!validateForm()) return;
 
-    Alert.alert('提交工单', '确认提交维修工单吗？', [
-      { text: '取消', style: 'cancel' },
-      {
-        text: '确定',
-        onPress: () => {
-          const workOrderNo = `WO-${Date.now()}`;
-          info(`维修工单提交成功！工单号：${workOrderNo}`);
+    let data = {
+      EquipmentId: selectedEquipment,
+      faultType,
+      priority,
+      impact,
+      FaultDesc: faultDescription,
+      ExpectedCompleteTime: expectedTime,
+      remark: remarks,
+    };
+    if (isWeb) {
+      const confirmed = window.confirm('确认提交维修工单吗？');
+      if (confirmed) {
+        const { Success } = await http.post<any>('/api/EmRepairOrder', data);
+        if (Success) {
           router.back();
+          info(`维修工单提交成功！`);
+        }
+      }
+    } else
+      Alert.alert('提交工单', '确认提交维修工单吗？', [
+        { text: '取消', style: 'cancel' },
+        {
+          text: '确定',
+          onPress: async () => {
+            const { Success } = await http.post<any>(
+              '/api/EmRepairOrder',
+              data
+            );
+            if (Success) {
+              router.back();
+              info(`维修工单提交成功！`);
+            }
+          },
         },
-      },
-    ]);
+      ]);
   };
 
+  // 如果显示扫码界面，渲染 QRCodeScanner
+  if (showScanner) {
+    return (
+      <QRCodeScanner onScan={handleScanResult} onCancel={handleCancelScan} />
+    );
+  }
+
   return (
     <View className="flex-1 bg-gray-50 dark:bg-neutral-900">
       {/* 顶部导航 */}
@@ -265,22 +236,19 @@ const AddRepairOrder: React.FC = () => {
                   <ScrollView>
                     {equipmentList.map((equipment) => (
                       <TouchableOpacity
-                        key={equipment.id}
+                        key={equipment.ID}
                         onPress={() => {
-                          setSelectedEquipment(equipment.id);
+                          setSelectedEquipment(equipment.ID);
                           setShowEquipmentPicker(false);
                         }}
-                        className={`border-b border-gray-100 p-3 dark:border-neutral-600 ${selectedEquipment === equipment.id
-                            ? 'bg-blue-50 dark:bg-blue-950/30'
-                            : ''
-                          }`}
+                        className={`border-b border-gray-100 p-3 dark:border-neutral-600 ${selectedEquipment === equipment.ID ? 'bg-blue-50 dark:bg-blue-950/30' : ''}`}
                         activeOpacity={0.7}
                       >
                         <Text className="text-sm font-medium text-gray-800 dark:text-gray-100">
-                          {equipment.name} {equipment.code}
+                          {equipment.MachineName} {equipment.MachineNo}
                         </Text>
                         <Text className="text-xs text-gray-500 dark:text-gray-400">
-                          {equipment.location}
+                          {equipment.Location}
                         </Text>
                       </TouchableOpacity>
                     ))}
@@ -291,8 +259,8 @@ const AddRepairOrder: React.FC = () => {
 
             {/* 或扫码选择 */}
             <TouchableOpacity
-              className="flex-row items-center justify-center space-x-2 rounded-lg border-2 border-dashed border-primary-500 py-3"
-              onPress={() => info('扫码功能开发中')}
+              className="flex-row items-center justify-center space-x-2 rounded-lg border-2 border-dashed border-primary-500 py-3 mt-4"
+              onPress={() => setShowScanner(true)}
               activeOpacity={0.7}
             >
               <FontAwesome name="qrcode" size={20} color="#1890ff" />
@@ -314,45 +282,26 @@ const AddRepairOrder: React.FC = () => {
 
           <View className="space-y-4">
             {/* 故障类型 */}
-            <View>
-              <Text className="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
-                故障类型 <Text className="text-red-500">*</Text>
-              </Text>
-              <View className="gap-2">
-                <View className="flex-row gap-2">
-                  <View className="flex-1">
-                    <RadioButton
-                      label="机械故障"
-                      selected={faultType === 'mechanical'}
-                      onPress={() => setFaultType('mechanical')}
-                    />
-                  </View>
-                  <View className="flex-1">
-                    <RadioButton
-                      label="电气故障"
-                      selected={faultType === 'electrical'}
-                      onPress={() => setFaultType('electrical')}
-                    />
-                  </View>
-                </View>
-                <View className="flex-row gap-2">
-                  <View className="flex-1">
-                    <RadioButton
-                      label="液压故障"
-                      selected={faultType === 'hydraulic'}
-                      onPress={() => setFaultType('hydraulic')}
-                    />
-                  </View>
-                  <View className="flex-1">
-                    <RadioButton
-                      label="其他故障"
-                      selected={faultType === 'other'}
-                      onPress={() => setFaultType('other')}
-                    />
+            {faultTypes && faultTypes.length > 0 && (
+              <View>
+                <Text className="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
+                  故障类型 <Text className="text-red-500">*</Text>
+                </Text>
+                <View className="gap-2">
+                  <View className="flex-row gap-2">
+                    {faultTypes.map((faultType1, index) => (
+                      <View className="flex-1" key={index}>
+                        <RadioButton
+                          label={faultType1.label}
+                          selected={faultType === faultType1.value}
+                          onPress={() => setFaultType(faultType1.value)}
+                        />
+                      </View>
+                    ))}
                   </View>
                 </View>
               </View>
-            </View>
+            )}
 
             {/* 优先级 */}
             <View>
@@ -483,15 +432,19 @@ const AddRepairOrder: React.FC = () => {
                 期望完成时间 <Text className="text-red-500">*</Text>
               </Text>
               <TouchableOpacity
-                className="rounded-lg border border-gray-300 px-4 py-3 dark:border-neutral-600"
+                // className="rounded-lg border border-gray-300 px-4 py-3 dark:border-neutral-600"
                 onPress={() => info('日期选择器开发中')}
                 activeOpacity={0.7}
               >
-                <Text
+                {/* <Text
                   className={`text-sm ${expectedTime ? 'text-gray-800 dark:text-gray-100' : 'text-gray-400 dark:text-gray-500'}`}
                 >
                   {expectedTime || '请选择期望完成时间'}
-                </Text>
+                </Text> */}
+                <DatePickerInput
+                  value={expectedTime}
+                  onChange={(date) => setExpectedTime(date)}
+                />
               </TouchableOpacity>
             </View>
 
@@ -519,10 +472,7 @@ const AddRepairOrder: React.FC = () => {
                       setAssignedTechnician('');
                       setShowTechnicianPicker(false);
                     }}
-                    className={`border-b border-gray-100 p-3 dark:border-neutral-600 ${!assignedTechnician
-                        ? 'bg-blue-50 dark:bg-blue-950/30'
-                        : ''
-                      }`}
+                    className={`border-b border-gray-100 p-3 dark:border-neutral-600 ${!assignedTechnician ? 'bg-blue-50 dark:bg-blue-950/30' : ''}`}
                     activeOpacity={0.7}
                   >
                     <Text className="text-sm text-gray-800 dark:text-gray-100">
@@ -536,10 +486,7 @@ const AddRepairOrder: React.FC = () => {
                         setAssignedTechnician(technician.id);
                         setShowTechnicianPicker(false);
                       }}
-                      className={`border-b border-gray-100 p-3 dark:border-neutral-600 ${assignedTechnician === technician.id
-                          ? 'bg-blue-50 dark:bg-blue-950/30'
-                          : ''
-                        }`}
+                      className={`border-b border-gray-100 p-3 dark:border-neutral-600 ${assignedTechnician === technician.id ? 'bg-blue-50 dark:bg-blue-950/30' : ''}`}
                       activeOpacity={0.7}
                     >
                       <Text className="text-sm text-gray-800 dark:text-gray-100">
@@ -642,27 +589,17 @@ const AddRepairOrder: React.FC = () => {
               • 上传故障图片可帮助维修人员提前准备工具和备件
             </Text>
             <Text className="text-xs text-gray-600 dark:text-gray-300">
-              • 维修工单创建后可在"维修管理"中查看进度
+              • 维修工单创建后可在&quot;维修管理&quot;中查看进度
             </Text>
           </View>
         </View>
       </ScrollView>
 
       {/* 底部固定操作栏 */}
-      <View className="border-t border-gray-200 bg-white p-4 shadow-lg dark:border-neutral-700 dark:bg-neutral-800">
+      <View className="border-t border-gray-200 bg-white p-4 shadow-lg dark:border-neutral-700 dark:bg-neutral-800"
+        style={{ paddingBottom: insets.bottom }}
+      >
         <View className="flex-row gap-3">
-          <TouchableOpacity
-            className="flex-1 items-center rounded-lg border-2 border-gray-300 py-3 dark:border-neutral-600"
-            onPress={handleSaveDraft}
-            activeOpacity={0.7}
-          >
-            <View className="flex-row items-center">
-              <FontAwesome name="save" size={16} color="#6b7280" />
-              <Text className="ml-2 font-semibold text-gray-700 dark:text-gray-300">
-                存为草稿
-              </Text>
-            </View>
-          </TouchableOpacity>
           <TouchableOpacity
             className="flex-1 items-center rounded-lg bg-primary-500 py-3"
             onPress={handleSubmit}
diff --git a/src/app/test/equipment.tsx b/src/app/test/equipment.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1c859ce30d396f46b652c757063617166643fabf
--- /dev/null
+++ b/src/app/test/equipment.tsx
@@ -0,0 +1,430 @@
+import { LinearGradient } from 'expo-linear-gradient';
+import { useRouter } from 'expo-router';
+import React, { useState } from 'react';
+import { ScrollView, TextInput, TouchableOpacity } from 'react-native';
+
+import { NavHeader, Text, View } from '@/components/ui';
+import { FontAwesome } from '@/components/ui/icons';
+import { useAppColorScheme } from '@/lib/hooks';
+
+// 筛选标签类型
+type FilterType = 'all' | 'running' | 'repairing' | 'fault';
+
+// 设备状态类型
+type EquipmentStatus = 'running' | 'repairing' | 'fault';
+
+// 设备数据类型
+type Equipment = {
+  id: string;
+  name: string;
+  code: string;
+  icon: string;
+  location: string;
+  installDate: string;
+  status: EquipmentStatus;
+  health: number;
+  repairCount: number;
+  maintenanceInfo: string;
+  gradientColors: [string, string];
+};
+
+// 筛选按钮组件
+type FilterButtonProps = {
+  label: string;
+  count: number;
+  active: boolean;
+  onPress: () => void;
+};
+
+const FilterButton: React.FC<FilterButtonProps> = ({
+  label,
+  count,
+  active,
+  onPress,
+}) => (
+  <TouchableOpacity
+    className={`rounded-full px-3 py-1.5 ${active ? 'bg-blue-600' : 'bg-gray-100 dark:bg-neutral-700'}`}
+    onPress={onPress}
+    activeOpacity={0.7}
+  >
+    <Text
+      className={`text-sm ${active ? 'text-white' : 'text-gray-700 dark:text-gray-200'}`}
+    >
+      {label}
+      <Text
+        className={`ml-1 ${active ? 'text-white' : 'text-gray-700 dark:text-gray-200'}`}
+      >
+        {count}
+      </Text>
+    </Text>
+  </TouchableOpacity>
+);
+
+// 设备卡片组件
+type EquipmentCardProps = {
+  equipment: Equipment;
+  onPress: () => void;
+};
+
+const EquipmentCard: React.FC<EquipmentCardProps> = ({
+  equipment,
+  onPress,
+}) => {
+  const getStatusConfig = (status: EquipmentStatus) => {
+    switch (status) {
+      case 'running':
+        return {
+          bgColor: 'rgba(82, 196, 26, 0.1)',
+          textColor: '#52c41a',
+          icon: 'circle',
+          label: '运行中',
+        };
+      case 'repairing':
+        return {
+          bgColor: 'rgba(250, 173, 20, 0.1)',
+          textColor: '#faad14',
+          icon: 'wrench',
+          label: '维修中',
+        };
+      case 'fault':
+        return {
+          bgColor: 'rgba(245, 34, 45, 0.1)',
+          textColor: '#f5222d',
+          icon: 'exclamation-circle',
+          label: '故障',
+        };
+    }
+  };
+
+  const statusConfig = getStatusConfig(equipment.status);
+
+  return (
+    <TouchableOpacity
+      className="mb-3 rounded-xl bg-white shadow-sm dark:bg-neutral-800"
+      onPress={onPress}
+      activeOpacity={0.7}
+    >
+      <View className="p-4">
+        {/* 顶部信息 */}
+        <View className="mb-3 flex-row items-start justify-between">
+          <View className="flex-1 flex-row items-start">
+            <LinearGradient
+              colors={equipment.gradientColors}
+              start={{ x: 0, y: 0 }}
+              end={{ x: 1, y: 1 }}
+              style={{
+                width: 64,
+                height: 64,
+                borderRadius: 12,
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginRight: 12,
+              }}
+            >
+              <FontAwesome
+                name={equipment.icon as any}
+                size={24}
+                color="white"
+              />
+            </LinearGradient>
+            <View className="flex-1">
+              <Text className="mb-1 text-base font-semibold text-gray-800 dark:text-gray-100">
+                {equipment.name}
+              </Text>
+              <Text className="mb-2 text-sm text-gray-500 dark:text-gray-400">
+                编号：{equipment.code}
+              </Text>
+              <View className="flex-row items-center">
+                <FontAwesome name="map-marker" size={10} color="#9ca3af" />
+                <Text className="ml-1 text-xs text-gray-600 dark:text-gray-400">
+                  {equipment.location}
+                </Text>
+                <FontAwesome
+                  name="calendar"
+                  size={10}
+                  color="#9ca3af"
+                  style={{ marginLeft: 12 }}
+                />
+                <Text className="ml-1 text-xs text-gray-600 dark:text-gray-400">
+                  {equipment.installDate}
+                </Text>
+              </View>
+            </View>
+          </View>
+          <View
+            className="ml-2 rounded-full px-3 py-1"
+            style={{ backgroundColor: statusConfig.bgColor }}
+          >
+            <View className="flex-row items-center">
+              <FontAwesome
+                name={statusConfig.icon as any}
+                size={8}
+                color={statusConfig.textColor}
+              />
+              <Text
+                className="ml-1 text-xs font-semibold"
+                style={{ color: statusConfig.textColor }}
+              >
+                {statusConfig.label}
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        {/* 底部统计 */}
+        <View className="flex-row border-t border-gray-100 pt-3 dark:border-neutral-700">
+          <View className="flex-1 items-center">
+            <Text
+              className="text-sm font-semibold"
+              style={{ color: equipment.health < 50 ? '#f5222d' : '#374151' }}
+            >
+              {equipment.health}%
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              健康度
+            </Text>
+          </View>
+          <View className="flex-1 items-center border-x border-gray-100 dark:border-neutral-700">
+            <Text className="text-sm font-semibold text-gray-800 dark:text-gray-100">
+              {equipment.repairCount}次
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              本月维修
+            </Text>
+          </View>
+          <View className="flex-1 items-center">
+            <Text
+              className="text-sm font-semibold"
+              style={{
+                color:
+                  equipment.status === 'repairing'
+                    ? '#faad14'
+                    : equipment.status === 'fault'
+                      ? '#f5222d'
+                      : '#374151',
+              }}
+            >
+              {equipment.maintenanceInfo}
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              {equipment.status === 'repairing'
+                ? '维修状态'
+                : equipment.status === 'fault'
+                  ? '优先级'
+                  : '距保养'}
+            </Text>
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const EquipmentList: React.FC = () => {
+  const router = useRouter();
+  const [searchText, setSearchText] = useState('');
+  const [activeFilter, setActiveFilter] = useState<FilterType>('all');
+  const { isDark } = useAppColorScheme();
+
+  // 模拟设备数据
+  const equipmentList: Equipment[] = [
+    {
+      id: '1',
+      name: '数控机床 CNC-01',
+      code: 'EQ-2024-001',
+      icon: 'database',
+      location: 'A车间-1号线',
+      installDate: '2023-05-15',
+      status: 'running',
+      health: 98,
+      repairCount: 2,
+      maintenanceInfo: '5天',
+      gradientColors: ['#3b82f6', '#2563eb'],
+    },
+    {
+      id: '2',
+      name: '注塑机 IM-03',
+      code: 'EQ-2024-003',
+      icon: 'cog',
+      location: 'B车间-2号线',
+      installDate: '2022-08-20',
+      status: 'repairing',
+      health: 65,
+      repairCount: 7,
+      maintenanceInfo: '进行中',
+      gradientColors: ['#f97316', '#ea580c'],
+    },
+    {
+      id: '3',
+      name: '空压机 AC-05',
+      code: 'EQ-2024-005',
+      icon: 'map-marker',
+      location: '动力车间',
+      installDate: '2021-03-10',
+      status: 'fault',
+      health: 35,
+      repairCount: 15,
+      maintenanceInfo: '紧急',
+      gradientColors: ['#ef4444', '#dc2626'],
+    },
+    {
+      id: '4',
+      name: '混料机 MX-08',
+      code: 'EQ-2024-008',
+      icon: 'flask',
+      location: 'C车间-配料区',
+      installDate: '2023-11-05',
+      status: 'running',
+      health: 95,
+      repairCount: 1,
+      maintenanceInfo: '12天',
+      gradientColors: ['#22c55e', '#16a34a'],
+    },
+    {
+      id: '5',
+      name: '机械手臂 RB-02',
+      code: 'EQ-2024-012',
+      icon: 'map-marker',
+      location: 'A车间-组装线',
+      installDate: '2024-01-15',
+      status: 'running',
+      health: 99,
+      repairCount: 0,
+      maintenanceInfo: '30天',
+      gradientColors: ['#a855f7', '#9333ea'],
+    },
+  ];
+
+  // 筛选设备
+  const filteredEquipment = equipmentList.filter((item) => {
+    if (activeFilter === 'all') return true;
+    return item.status === activeFilter;
+  });
+
+  const filterCounts = {
+    all: equipmentList.length,
+    running: equipmentList.filter((e) => e.status === 'running').length,
+    repairing: equipmentList.filter((e) => e.status === 'repairing').length,
+    fault: equipmentList.filter((e) => e.status === 'fault').length,
+  };
+
+  return (
+    <View className="flex-1 bg-gray-50 dark:bg-neutral-900">
+      {/* 顶部导航 */}
+      <NavHeader
+        title="设备"
+        leftShown={false}
+        right={
+          <View className="flex-row items-center">
+            <TouchableOpacity
+              className="mr-3"
+              onPress={() => {
+                router.push(`/equipment/add`);
+              }}
+            >
+              <FontAwesome
+                name="plus"
+                size={20}
+                color={isDark ? '#9ca3af' : '#6b7280'}
+              />
+            </TouchableOpacity>
+          </View>
+        }
+      />
+
+      {/* 搜索和筛选 - 固定在顶部 */}
+      <View className="border-b border-gray-200 bg-white px-4 pb-3 pt-4 dark:border-neutral-700 dark:bg-neutral-800">
+        {/* 搜索框 */}
+        <View className="mb-3 flex-row items-center space-x-3">
+          <View className="relative flex-1">
+            <FontAwesome
+              name="search"
+              size={14}
+              color="#9ca3af"
+              style={{ position: 'absolute', left: 12, top: 12, zIndex: 1 }}
+            />
+            <TextInput
+              className="rounded-lg border border-gray-300 py-2 pl-10 pr-4 dark:border-neutral-600 dark:bg-neutral-700 dark:text-white"
+              placeholder="搜索设备名称、编号..."
+              placeholderTextColor={isDark ? '#9ca3af' : '#9ca3af'}
+              value={searchText}
+              onChangeText={setSearchText}
+            />
+          </View>
+          <TouchableOpacity
+            className="rounded-lg bg-blue-600 px-4 py-2"
+            activeOpacity={0.7}
+          >
+            <FontAwesome name="search" size={16} color="white" />
+          </TouchableOpacity>
+        </View>
+
+        {/* 筛选标签 */}
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <View className="flex-row space-x-2">
+            <FilterButton
+              label="全部"
+              count={filterCounts.all}
+              active={activeFilter === 'all'}
+              onPress={() => setActiveFilter('all')}
+            />
+            <FilterButton
+              label="运行中"
+              count={filterCounts.running}
+              active={activeFilter === 'running'}
+              onPress={() => setActiveFilter('running')}
+            />
+            <FilterButton
+              label="维修中"
+              count={filterCounts.repairing}
+              active={activeFilter === 'repairing'}
+              onPress={() => setActiveFilter('repairing')}
+            />
+            <FilterButton
+              label="故障"
+              count={filterCounts.fault}
+              active={activeFilter === 'fault'}
+              onPress={() => setActiveFilter('fault')}
+            />
+            <TouchableOpacity
+              className="rounded-full bg-gray-100 px-3 py-1.5 dark:bg-neutral-700"
+              activeOpacity={0.7}
+            >
+              <View className="flex-row items-center">
+                <FontAwesome
+                  name="filter"
+                  size={12}
+                  color={isDark ? '#d4d4d4' : '#374151'}
+                />
+                <Text className="ml-1 text-sm text-gray-700 dark:text-gray-200">
+                  筛选
+                </Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+        </ScrollView>
+      </View>
+
+      {/* 设备列表 - 可滚动 */}
+      <ScrollView className="flex-1 p-4" showsVerticalScrollIndicator={false}>
+        {/* 设备列表 */}
+        <View>
+          {filteredEquipment.map((equipment) => (
+            <EquipmentCard
+              key={equipment.id}
+              equipment={equipment}
+              onPress={() => {
+                router.push(`/equipment/${equipment.id}`);
+              }}
+            />
+          ))}
+        </View>
+
+        {/* 底部空间 */}
+        <View className="h-[70px]" />
+      </ScrollView>
+    </View>
+  );
+};
+
+export default EquipmentList;
diff --git a/src/app/user-agreement.tsx b/src/app/user-agreement.tsx
index 32b0defdfcbf53a31cab6f1118f0071cd6c87b2b..a79da85ee3dea1fd26fdd72a09d53cf90cce4cbe 100644
--- a/src/app/user-agreement.tsx
+++ b/src/app/user-agreement.tsx
@@ -2,11 +2,8 @@
 import { Stack, useRouter } from 'expo-router';
 import React from 'react';
 import { Pressable, ScrollView } from 'react-native';
-import {
-  SafeAreaView,
-  Text,
-  View,
-} from '@/components/ui';
+
+import { SafeAreaView, Text, View } from '@/components/ui';
 
 export default function UserAgreementScreen() {
   const router = useRouter();
diff --git a/src/components/analytics/inventory.tsx b/src/components/analytics/inventory.tsx
index 60110e60b9df9e7c43755d97786977cc77feb50b..53007138fd7d87a934a8da151385529109047b79 100644
--- a/src/components/analytics/inventory.tsx
+++ b/src/components/analytics/inventory.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   Dimensions,
-  SafeAreaView,
   ScrollView,
   Text,
   TouchableOpacity,
@@ -9,6 +8,8 @@ import {
 } from 'react-native';
 import { LineChart, PieChart } from 'react-native-chart-kit';
 
+import { useAppColorScheme } from '@/lib';
+
 // 获取屏幕宽度用于图表响应式设计
 const screenWidth = Dimensions.get('window').width;
 
@@ -28,8 +29,8 @@ const KpiCard: React.FC<KpiCardProps> = ({
   trendUp = true,
   color,
 }) => (
-  <View className="mb-3 w-[48%] rounded-2xl bg-white p-3 shadow-sm">
-    <Text className="text-sm text-gray-600">{title}</Text>
+  <View className="mb-3 w-[48%] rounded-2xl bg-white p-3 shadow-sm dark:bg-gray-800">
+    <Text className="text-sm text-gray-600 dark:text-gray-400">{title}</Text>
     <Text className="mt-1 text-xl font-bold" style={{ color }}>
       {value}
     </Text>
@@ -56,20 +57,20 @@ const InventoryAlertItem: React.FC<InventoryAlertItemProps> = ({
   safetyStock,
   level,
 }) => {
-  let bgColor = 'bg-red-50';
+  let bgColor = 'bg-red-50 dark:bg-red-900/20';
   let borderColor = 'border-red-500';
-  let textColor = 'text-red-600';
+  let textColor = 'text-red-600 dark:text-red-400';
   let levelText = '紧急';
 
   if (level === 'warning') {
-    bgColor = 'bg-yellow-50';
+    bgColor = 'bg-yellow-50 dark:bg-yellow-900/20';
     borderColor = 'border-yellow-500';
-    textColor = 'text-yellow-600';
+    textColor = 'text-yellow-600 dark:text-yellow-400';
     levelText = '注意';
   } else if (level === 'normal') {
-    bgColor = 'bg-green-50';
+    bgColor = 'bg-green-50 dark:bg-green-900/20';
     borderColor = 'border-green-500';
-    textColor = 'text-green-600';
+    textColor = 'text-green-600 dark:text-green-400';
     levelText = '正常';
   }
 
@@ -78,8 +79,10 @@ const InventoryAlertItem: React.FC<InventoryAlertItemProps> = ({
       className={`flex-row items-center justify-between p-3 ${bgColor} rounded-lg border-l-4 ${borderColor} mb-2`}
     >
       <View>
-        <Text className="font-medium">{name}</Text>
-        <Text className="text-xs text-gray-500">
+        <Text className="font-medium text-gray-900 dark:text-gray-100">
+          {name}
+        </Text>
+        <Text className="text-xs text-gray-500 dark:text-gray-400">
           当前库存: {currentStock} | 安全库存: {safetyStock}
         </Text>
       </View>
@@ -89,13 +92,16 @@ const InventoryAlertItem: React.FC<InventoryAlertItemProps> = ({
 };
 
 // 图表通用配置
-const chartConfig = {
-  backgroundColor: '#ffffff',
-  backgroundGradientFrom: '#ffffff',
-  backgroundGradientTo: '#ffffff',
+const getChartConfig = (isDark: boolean) => ({
+  backgroundColor: isDark ? '#1f2937' : '#ffffff',
+  backgroundGradientFrom: isDark ? '#1f2937' : '#ffffff',
+  backgroundGradientTo: isDark ? '#1f2937' : '#ffffff',
   decimalPlaces: 0,
   color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
-  labelColor: (opacity = 1) => `rgba(107, 114, 128, ${opacity})`,
+  labelColor: (opacity = 1) =>
+    isDark
+      ? `rgba(156, 163, 175, ${opacity})`
+      : `rgba(107, 114, 128, ${opacity})`,
   style: {
     borderRadius: 16,
   },
@@ -104,9 +110,12 @@ const chartConfig = {
     strokeWidth: '2',
     stroke: '#3b82f6',
   },
-};
+});
 
 export const Inventory: React.FC = () => {
+  const { isDark } = useAppColorScheme();
+  const chartConfig = getChartConfig(isDark);
+
   // 库存周转率趋势数据
   const inventoryTurnoverData = {
     labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
@@ -126,40 +135,48 @@ export const Inventory: React.FC = () => {
       name: '正常',
       population: 65,
       color: '#10b981',
-      legendFontColor: '#7F7F7F',
+      legendFontColor: isDark ? '#9ca3af' : '#7F7F7F',
       legendFontSize: 12,
     },
     {
       name: '偏低',
       population: 20,
       color: '#f59e0b',
-      legendFontColor: '#7F7F7F',
+      legendFontColor: isDark ? '#9ca3af' : '#7F7F7F',
       legendFontSize: 12,
     },
     {
       name: '预警',
       population: 15,
       color: '#ef4444',
-      legendFontColor: '#7F7F7F',
+      legendFontColor: isDark ? '#9ca3af' : '#7F7F7F',
       legendFontSize: 12,
     },
   ];
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-50">
+    <View className="flex-1">
       <ScrollView className="flex-1 p-4" showsVerticalScrollIndicator={false}>
         {/* 时间选择器 */}
         <View className="mb-4 flex-row items-center justify-between">
-          <Text className="text-lg font-semibold">库存数据</Text>
-          <View className="flex-row overflow-hidden rounded-lg border border-gray-200 bg-white">
-            <TouchableOpacity className="border-r border-gray-200 px-3 py-1">
-              <Text className="text-sm text-gray-500">日</Text>
+          <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            库存数据
+          </Text>
+          <View className="flex-row overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-600 dark:bg-gray-800">
+            <TouchableOpacity className="border-r border-gray-200 px-3 py-1 dark:border-gray-600">
+              <Text className="text-sm text-gray-500 dark:text-gray-400">
+                日
+              </Text>
             </TouchableOpacity>
-            <TouchableOpacity className="border-r border-gray-200 bg-blue-50 px-3 py-1">
-              <Text className="text-sm text-blue-600">月</Text>
+            <TouchableOpacity className="border-r border-gray-200 bg-blue-50 px-3 py-1 dark:border-gray-600 dark:bg-blue-900/30">
+              <Text className="text-sm text-blue-600 dark:text-blue-400">
+                月
+              </Text>
             </TouchableOpacity>
             <TouchableOpacity className="px-3 py-1">
-              <Text className="text-sm text-gray-500">年</Text>
+              <Text className="text-sm text-gray-500 dark:text-gray-400">
+                年
+              </Text>
             </TouchableOpacity>
           </View>
         </View>
@@ -197,11 +214,15 @@ export const Inventory: React.FC = () => {
         </View>
 
         {/* 库存周转率趋势 */}
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
           <View className="mb-3 flex-row items-center justify-between">
-            <Text className="text-lg font-semibold">库存周转率趋势</Text>
+            <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              库存周转率趋势
+            </Text>
             <TouchableOpacity>
-              <Text className="text-sm text-blue-600">详情</Text>
+              <Text className="text-sm text-blue-600 dark:text-blue-400">
+                详情
+              </Text>
             </TouchableOpacity>
           </View>
           <LineChart
@@ -218,11 +239,15 @@ export const Inventory: React.FC = () => {
         </View>
 
         {/* 库存状态分布 */}
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
           <View className="mb-3 flex-row items-center justify-between">
-            <Text className="text-lg font-semibold">库存状态分布</Text>
+            <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              库存状态分布
+            </Text>
             <TouchableOpacity>
-              <Text className="text-sm text-blue-600">详情</Text>
+              <Text className="text-sm text-blue-600 dark:text-blue-400">
+                详情
+              </Text>
             </TouchableOpacity>
           </View>
           <View className="flex-row items-center">
@@ -241,18 +266,30 @@ export const Inventory: React.FC = () => {
               <View className="space-y-2">
                 <View className="flex-row items-center">
                   <View className="mr-2 size-3 rounded-full bg-green-500" />
-                  <Text className="mr-2 text-sm text-gray-600">正常</Text>
-                  <Text className="text-sm font-medium">65%</Text>
+                  <Text className="mr-2 text-sm text-gray-600 dark:text-gray-400">
+                    正常
+                  </Text>
+                  <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                    65%
+                  </Text>
                 </View>
                 <View className="flex-row items-center">
                   <View className="mr-2 size-3 rounded-full bg-yellow-500" />
-                  <Text className="mr-2 text-sm text-gray-600">偏低</Text>
-                  <Text className="text-sm font-medium">20%</Text>
+                  <Text className="mr-2 text-sm text-gray-600 dark:text-gray-400">
+                    偏低
+                  </Text>
+                  <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                    20%
+                  </Text>
                 </View>
                 <View className="flex-row items-center">
                   <View className="mr-2 size-3 rounded-full bg-red-500" />
-                  <Text className="mr-2 text-sm text-gray-600">预警</Text>
-                  <Text className="text-sm font-medium">15%</Text>
+                  <Text className="mr-2 text-sm text-gray-600 dark:text-gray-400">
+                    预警
+                  </Text>
+                  <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                    15%
+                  </Text>
                 </View>
               </View>
             </View>
@@ -260,11 +297,15 @@ export const Inventory: React.FC = () => {
         </View>
 
         {/* 库存预警列表 */}
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
           <View className="mb-3 flex-row items-center justify-between">
-            <Text className="text-lg font-semibold">库存预警</Text>
+            <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              库存预警
+            </Text>
             <TouchableOpacity>
-              <Text className="text-sm text-blue-600">查看全部</Text>
+              <Text className="text-sm text-blue-600 dark:text-blue-400">
+                查看全部
+              </Text>
             </TouchableOpacity>
           </View>
           <View className="space-y-3">
@@ -289,6 +330,6 @@ export const Inventory: React.FC = () => {
           </View>
         </View>
       </ScrollView>
-    </SafeAreaView>
+    </View>
   );
 };
diff --git a/src/components/analytics/kpi-card.tsx b/src/components/analytics/kpi-card.tsx
index a3b6c8f89be646e568dbe6992bc966da3eab490f..f91de871f39f6adfc3af3e8252c85bafc3d4d6df 100644
--- a/src/components/analytics/kpi-card.tsx
+++ b/src/components/analytics/kpi-card.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Text, View } from '@/components/ui';
+
 // KPI卡片组件
 type KpiCardProps = {
   title: string;
@@ -17,8 +18,8 @@ export const KpiCard: React.FC<KpiCardProps> = ({
   trendUp = true,
   color,
 }) => (
-  <View className="mb-3 w-[48%] rounded-2xl bg-white p-3 shadow-sm">
-    <Text className="text-sm text-gray-500">{title}</Text>
+  <View className="mb-3 w-[48%] rounded-2xl bg-white p-3 shadow-sm dark:bg-gray-800">
+    <Text className="text-sm text-gray-500 dark:text-gray-400">{title}</Text>
     <Text className="mt-1 text-xl font-bold" style={{ color }}>
       {value}
     </Text>
diff --git a/src/components/analytics/overview.tsx b/src/components/analytics/overview.tsx
index d65cb401b813b5c8d1017fa4f22b162dafaf58e4..e92b8370236c04dac167095f2dd0958ecd0f01e4 100644
--- a/src/components/analytics/overview.tsx
+++ b/src/components/analytics/overview.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { Dimensions, Text, TouchableOpacity, View } from 'react-native';
 import { BarChart, LineChart, PieChart } from 'react-native-chart-kit';
 
+import { useAppColorScheme } from '@/lib';
+
 import { KpiCard } from './kpi-card';
 import { ReportItem } from './report-item';
 
@@ -39,45 +41,48 @@ const productionOrderData = {
 };
 
 // 产品类别分布数据
-const productCategoryData = [
+const getProductCategoryData = (isDark: boolean) => [
   {
     name: '智能手表',
     population: 45,
     color: '#3b82f6',
-    legendFontColor: '#7F7F7F',
+    legendFontColor: isDark ? '#9ca3af' : '#7F7F7F',
     legendFontSize: 12,
   },
   {
     name: '智能音箱',
     population: 25,
     color: '#22c55e',
-    legendFontColor: '#7F7F7F',
+    legendFontColor: isDark ? '#9ca3af' : '#7F7F7F',
     legendFontSize: 12,
   },
   {
     name: '智能门锁',
     population: 15,
     color: '#f59e0b',
-    legendFontColor: '#7F7F7F',
+    legendFontColor: isDark ? '#9ca3af' : '#7F7F7F',
     legendFontSize: 12,
   },
   {
     name: '其他产品',
     population: 15,
     color: '#ef4444',
-    legendFontColor: '#7F7F7F',
+    legendFontColor: isDark ? '#9ca3af' : '#7F7F7F',
     legendFontSize: 12,
   },
 ];
 
 // 图表通用配置
-const chartConfig = {
-  backgroundColor: '#ffffff',
-  backgroundGradientFrom: '#ffffff',
-  backgroundGradientTo: '#ffffff',
+const getChartConfig = (isDark: boolean) => ({
+  backgroundColor: isDark ? '#1f2937' : '#ffffff',
+  backgroundGradientFrom: isDark ? '#1f2937' : '#ffffff',
+  backgroundGradientTo: isDark ? '#1f2937' : '#ffffff',
   decimalPlaces: 0,
   color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
-  labelColor: (opacity = 1) => `rgba(107, 114, 128, ${opacity})`,
+  labelColor: (opacity = 1) =>
+    isDark
+      ? `rgba(156, 163, 175, ${opacity})`
+      : `rgba(107, 114, 128, ${opacity})`,
   style: {
     borderRadius: 16,
   },
@@ -86,23 +91,29 @@ const chartConfig = {
     strokeWidth: '2',
     stroke: '#3b82f6',
   },
-};
+});
 
 export const OverView = () => {
+  const { isDark } = useAppColorScheme();
+  const chartConfig = getChartConfig(isDark);
+  const productCategoryData = getProductCategoryData(isDark);
+
   return (
     <View>
       {/* 时间选择器 */}
       <View className="mb-4 flex-row items-center justify-between">
-        <Text className="text-lg font-semibold">本月数据</Text>
-        <View className="flex-row overflow-hidden rounded-lg border border-gray-200 bg-white">
-          <TouchableOpacity className="border-r border-gray-200 px-3 py-1">
-            <Text className="text-sm text-gray-500">日</Text>
+        <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          本月数据
+        </Text>
+        <View className="flex-row overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-600 dark:bg-gray-800">
+          <TouchableOpacity className="border-r border-gray-200 px-3 py-1 dark:border-gray-600">
+            <Text className="text-sm text-gray-500 dark:text-gray-400">日</Text>
           </TouchableOpacity>
-          <TouchableOpacity className="border-r border-gray-200 bg-blue-50 px-3 py-1">
-            <Text className="text-sm text-blue-600">月</Text>
+          <TouchableOpacity className="border-r border-gray-200 bg-blue-50 px-3 py-1 dark:border-gray-600 dark:bg-blue-900/30">
+            <Text className="text-sm text-blue-600 dark:text-blue-400">月</Text>
           </TouchableOpacity>
           <TouchableOpacity className="px-3 py-1">
-            <Text className="text-sm text-gray-500">年</Text>
+            <Text className="text-sm text-gray-500 dark:text-gray-400">年</Text>
           </TouchableOpacity>
         </View>
       </View>
@@ -140,11 +151,15 @@ export const OverView = () => {
       </View>
 
       {/* 销售趋势图 - 使用BarChart替换自定义图表 */}
-      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
         <View className="mb-3 flex-row items-center justify-between">
-          <Text className="text-lg font-semibold">销售趋势</Text>
+          <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            销售趋势
+          </Text>
           <TouchableOpacity>
-            <Text className="text-sm text-blue-600">详情</Text>
+            <Text className="text-sm text-blue-600 dark:text-blue-400">
+              详情
+            </Text>
           </TouchableOpacity>
         </View>
         <BarChart
@@ -164,11 +179,15 @@ export const OverView = () => {
       </View>
 
       {/* 生产与订单对比 - 使用LineChart替换自定义图表 */}
-      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
         <View className="mb-3 flex-row items-center justify-between">
-          <Text className="text-lg font-semibold">生产与订单对比</Text>
+          <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            生产与订单对比
+          </Text>
           <TouchableOpacity>
-            <Text className="text-sm text-blue-600">详情</Text>
+            <Text className="text-sm text-blue-600 dark:text-blue-400">
+              详情
+            </Text>
           </TouchableOpacity>
         </View>
         <LineChart
@@ -185,11 +204,15 @@ export const OverView = () => {
       </View>
 
       {/* 产品类别分布 - 使用PieChart替换自定义图表 */}
-      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
         <View className="mb-3 flex-row items-center justify-between">
-          <Text className="text-lg font-semibold">产品类别分布</Text>
+          <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            产品类别分布
+          </Text>
           <TouchableOpacity>
-            <Text className="text-sm text-blue-600">详情</Text>
+            <Text className="text-sm text-blue-600 dark:text-blue-400">
+              详情
+            </Text>
           </TouchableOpacity>
         </View>
         <PieChart
@@ -206,29 +229,31 @@ export const OverView = () => {
       </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-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
+        <Text className="mb-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
+          数据报表
+        </Text>
         <View className="mt-2">
           <ReportItem
             icon="file-pdf-o"
             iconColor="#ef4444"
             title="月度销售报表"
             date="2023年11月"
-            onPress={() => {}}
+            onPress={() => { }}
           />
           <ReportItem
             icon="file-excel-o"
             iconColor="#22c55e"
             title="生产效率分析"
             date="2023年11月"
-            onPress={() => {}}
+            onPress={() => { }}
           />
           <ReportItem
             icon="file-powerpoint-o"
             iconColor="#f97316"
             title="质量控制报告"
             date="2023年11月"
-            onPress={() => {}}
+            onPress={() => { }}
           />
         </View>
       </View>
diff --git a/src/components/analytics/production.tsx b/src/components/analytics/production.tsx
index efb3c455244eec006a21adf21a1feb41e10bb2db..6afc879fb57346d2454d8b02e45a076a660bbc45 100644
--- a/src/components/analytics/production.tsx
+++ b/src/components/analytics/production.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 import {
   Dimensions,
-  SafeAreaView,
   ScrollView,
-  StatusBar,
   Text,
   TouchableOpacity,
   View,
@@ -11,6 +9,7 @@ import {
 import { LineChart, ProgressChart } from 'react-native-chart-kit';
 
 import { FontAwesome } from '@/components/ui/icons';
+import { useAppColorScheme } from '@/lib';
 
 import { KpiCard } from './kpi-card';
 
@@ -36,34 +35,36 @@ const DeviceStatusItem: React.FC<DeviceStatusItemProps> = ({
     switch (status) {
       case 'normal':
         return {
-          container: 'bg-green-50 border-l-4 border-green-500',
-          iconBg: 'bg-green-100',
-          iconColor: 'text-green-600',
-          statusText: 'text-green-600',
+          container:
+            'bg-green-50 border-l-4 border-green-500 dark:bg-green-900/20',
+          iconBg: 'bg-green-100 dark:bg-green-900/30',
+          iconColor: '#16a34a',
+          statusText: 'text-green-600 dark:text-green-400',
           statusLabel: '正常',
         };
       case 'warning':
         return {
-          container: 'bg-yellow-50 border-l-4 border-yellow-500',
-          iconBg: 'bg-yellow-100',
-          iconColor: 'text-yellow-600',
-          statusText: 'text-yellow-600',
+          container:
+            'bg-yellow-50 border-l-4 border-yellow-500 dark:bg-yellow-900/20',
+          iconBg: 'bg-yellow-100 dark:bg-yellow-900/30',
+          iconColor: '#ca8a04',
+          statusText: 'text-yellow-600 dark:text-yellow-400',
           statusLabel: '注意',
         };
       case 'error':
         return {
-          container: 'bg-red-50 border-l-4 border-red-500',
-          iconBg: 'bg-red-100',
-          iconColor: 'text-red-600',
-          statusText: 'text-red-600',
+          container: 'bg-red-50 border-l-4 border-red-500 dark:bg-red-900/20',
+          iconBg: 'bg-red-100 dark:bg-red-900/30',
+          iconColor: '#dc2626',
+          statusText: 'text-red-600 dark:text-red-400',
           statusLabel: '故障',
         };
       default:
         return {
-          container: 'bg-gray-50 border-l-4 border-gray-500',
-          iconBg: 'bg-gray-100',
-          iconColor: 'text-gray-600',
-          statusText: 'text-gray-600',
+          container: 'bg-gray-50 border-l-4 border-gray-500 dark:bg-gray-700',
+          iconBg: 'bg-gray-100 dark:bg-gray-600',
+          iconColor: '#4b5563',
+          statusText: 'text-gray-600 dark:text-gray-400',
           statusLabel: '未知',
         };
     }
@@ -79,15 +80,15 @@ const DeviceStatusItem: React.FC<DeviceStatusItemProps> = ({
         <View
           className={`size-10 ${styles.iconBg} mr-3 flex items-center justify-center rounded-full`}
         >
-          <FontAwesome
-            name={icon}
-            size={20}
-            color={styles.iconColor.replace('text-', '')}
-          />
+          <FontAwesome name={icon} size={20} color={styles.iconColor} />
         </View>
         <View>
-          <Text className="font-medium">{name}</Text>
-          <Text className="text-xs text-gray-500">{info}</Text>
+          <Text className="font-medium text-gray-900 dark:text-gray-100">
+            {name}
+          </Text>
+          <Text className="text-xs text-gray-500 dark:text-gray-400">
+            {info}
+          </Text>
         </View>
       </View>
       <Text className={`text-sm font-medium ${styles.statusText}`}>
@@ -98,13 +99,16 @@ const DeviceStatusItem: React.FC<DeviceStatusItemProps> = ({
 };
 
 // 图表通用配置
-const chartConfig = {
-  backgroundColor: '#ffffff',
-  backgroundGradientFrom: '#ffffff',
-  backgroundGradientTo: '#ffffff',
+const getChartConfig = (isDark: boolean) => ({
+  backgroundColor: isDark ? '#1f2937' : '#ffffff',
+  backgroundGradientFrom: isDark ? '#1f2937' : '#ffffff',
+  backgroundGradientTo: isDark ? '#1f2937' : '#ffffff',
   decimalPlaces: 0,
   color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
-  labelColor: (opacity = 1) => `rgba(107, 114, 128, ${opacity})`,
+  labelColor: (opacity = 1) =>
+    isDark
+      ? `rgba(156, 163, 175, ${opacity})`
+      : `rgba(107, 114, 128, ${opacity})`,
   style: {
     borderRadius: 16,
   },
@@ -113,9 +117,12 @@ const chartConfig = {
     strokeWidth: '2',
     stroke: '#3b82f6',
   },
-};
+});
 
 export const Production: React.FC = () => {
+  const { isDark } = useAppColorScheme();
+  const chartConfig = getChartConfig(isDark);
+
   // 生产效率趋势数据
   const efficiencyData = {
     labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
@@ -135,22 +142,28 @@ export const Production: React.FC = () => {
   };
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-50">
-      <StatusBar barStyle="dark-content" backgroundColor="transparent" />
-
+    <View className="flex-1">
       <ScrollView className="flex-1 p-4" showsVerticalScrollIndicator={false}>
         {/* 时间选择器 */}
         <View className="mb-4 flex-row items-center justify-between">
-          <Text className="text-lg font-semibold">生产数据</Text>
-          <View className="flex-row overflow-hidden rounded-lg border border-gray-200 bg-white">
-            <TouchableOpacity className="border-r border-gray-200 px-3 py-1">
-              <Text className="text-sm text-gray-500">日</Text>
+          <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            生产数据
+          </Text>
+          <View className="flex-row overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-600 dark:bg-gray-800">
+            <TouchableOpacity className="border-r border-gray-200 px-3 py-1 dark:border-gray-600">
+              <Text className="text-sm text-gray-500 dark:text-gray-400">
+                日
+              </Text>
             </TouchableOpacity>
-            <TouchableOpacity className="border-r border-gray-200 bg-blue-50 px-3 py-1">
-              <Text className="text-sm text-blue-600">月</Text>
+            <TouchableOpacity className="border-r border-gray-200 bg-blue-50 px-3 py-1 dark:border-gray-600 dark:bg-blue-900/30">
+              <Text className="text-sm text-blue-600 dark:text-blue-400">
+                月
+              </Text>
             </TouchableOpacity>
             <TouchableOpacity className="px-3 py-1">
-              <Text className="text-sm text-gray-500">年</Text>
+              <Text className="text-sm text-gray-500 dark:text-gray-400">
+                年
+              </Text>
             </TouchableOpacity>
           </View>
         </View>
@@ -188,11 +201,15 @@ export const Production: React.FC = () => {
         </View>
 
         {/* 生产效率趋势 */}
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
           <View className="mb-3 flex-row items-center justify-between">
-            <Text className="text-lg font-semibold">生产效率趋势</Text>
+            <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              生产效率趋势
+            </Text>
             <TouchableOpacity>
-              <Text className="text-sm text-blue-600">详情</Text>
+              <Text className="text-sm text-blue-600 dark:text-blue-400">
+                详情
+              </Text>
             </TouchableOpacity>
           </View>
           <LineChart
@@ -210,11 +227,15 @@ export const Production: React.FC = () => {
         </View>
 
         {/* 设备运行状态 */}
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
           <View className="mb-3 flex-row items-center justify-between">
-            <Text className="text-lg font-semibold">设备运行状态</Text>
+            <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              设备运行状态
+            </Text>
             <TouchableOpacity>
-              <Text className="text-sm text-blue-600">详情</Text>
+              <Text className="text-sm text-blue-600 dark:text-blue-400">
+                详情
+              </Text>
             </TouchableOpacity>
           </View>
           <View className="space-y-3">
@@ -240,10 +261,14 @@ export const Production: React.FC = () => {
         </View>
 
         {/* 产能利用率 */}
-        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+        <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
           <View className="mb-3 flex-row items-center justify-between">
-            <Text className="text-lg font-semibold">产能利用率</Text>
-            <Text className="text-lg font-bold text-blue-600">78.5%</Text>
+            <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              产能利用率
+            </Text>
+            <Text className="text-lg font-bold text-blue-600 dark:text-blue-400">
+              78.5%
+            </Text>
           </View>
           <ProgressChart
             data={capacityData}
@@ -256,6 +281,6 @@ export const Production: React.FC = () => {
           />
         </View>
       </ScrollView>
-    </SafeAreaView>
+    </View>
   );
 };
diff --git a/src/components/analytics/quality.tsx b/src/components/analytics/quality.tsx
index 86bf47ba7b4bd1c59ef6376b1981a0d0e67f331a..205cce8059d56ca93a8c4288fd1aff7ea7b6345b 100644
--- a/src/components/analytics/quality.tsx
+++ b/src/components/analytics/quality.tsx
@@ -4,6 +4,7 @@ import { LineChart, PieChart } from 'react-native-chart-kit';
 
 import { KpiCard } from '@/components/analytics/kpi-card';
 import { FontAwesome, GroupEnum } from '@/components/ui/icons';
+import { useAppColorScheme } from '@/lib';
 
 // 获取屏幕宽度用于图表响应式设计
 const screenWidth = Dimensions.get('window').width;
@@ -22,10 +23,10 @@ const ProductQualityItem: React.FC<ProductQualityItemProps> = ({
 }) => (
   <View className="mb-3">
     <View className="mb-1 flex-row justify-between text-sm">
-      <Text className="text-gray-700">{name}</Text>
-      <Text className="text-gray-700">{rate}</Text>
+      <Text className="text-gray-700 dark:text-gray-300">{name}</Text>
+      <Text className="text-gray-700 dark:text-gray-300">{rate}</Text>
     </View>
-    <View className="h-2 w-full rounded-full bg-gray-200">
+    <View className="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
       <View
         className="h-2 rounded-full bg-green-500"
         style={{ width: `${percentage}%` }}
@@ -49,48 +50,82 @@ const QualityImprovementItem: React.FC<QualityImprovementItemProps> = ({
   dueDate,
   icon,
   color,
-}) => (
-  <View className={`bg- flex-row items-center p-3${color}-50 mb-3 rounded-lg`}>
+}) => {
+  const getBgClass = () => {
+    switch (color) {
+      case 'blue':
+        return 'bg-blue-50 dark:bg-blue-900/20';
+      case 'green':
+        return 'bg-green-50 dark:bg-green-900/20';
+      case 'purple':
+        return 'bg-purple-50 dark:bg-purple-900/20';
+      default:
+        return 'bg-gray-50 dark:bg-gray-700';
+    }
+  };
+
+  const getIconBgClass = () => {
+    switch (color) {
+      case 'blue':
+        return 'bg-blue-100 dark:bg-blue-900/30';
+      case 'green':
+        return 'bg-green-100 dark:bg-green-900/30';
+      case 'purple':
+        return 'bg-purple-100 dark:bg-purple-900/30';
+      default:
+        return 'bg-gray-100 dark:bg-gray-600';
+    }
+  };
+
+  const iconColor =
+    color === 'blue' ? '#0066ff' : color === 'green' ? '#22c55e' : '#8b5cf6';
+
+  return (
     <View
-      className={`bg- size-10${color}-100 mr-3 items-center justify-center rounded-full`}
+      className={`flex-row items-center p-3 ${getBgClass()} mb-3 rounded-lg`}
     >
-      <FontAwesome
-        name={icon}
-        size={18}
-        color={`#${color === 'blue' ? '0066ff' : color === 'green' ? '22c55e' : '8b5cf6'}`}
-        group={
-          icon === 'tools'
-            ? GroupEnum.Entypo
-            : icon === 'vial'
-              ? GroupEnum.FontAwesome5
-              : GroupEnum.FontAwesome
-        }
-      />
-    </View>
-    <View className="flex-1">
-      <Text className="font-medium">{title}</Text>
-      <Text className="text-xs text-gray-500">
-        进度: {progress} | 预计完成: {dueDate}
-      </Text>
-    </View>
-    <View className={`text-${color}-600`}>
-      <FontAwesome
-        name="chevron-right"
-        size={16}
-        color={`#${color === 'blue' ? '0066ff' : color === 'green' ? '22c55e' : '8b5cf6'}`}
-      />
+      <View
+        className={`size-10 ${getIconBgClass()} mr-3 items-center justify-center rounded-full`}
+      >
+        <FontAwesome
+          name={icon}
+          size={18}
+          color={iconColor}
+          group={
+            icon === 'tools'
+              ? GroupEnum.Entypo
+              : icon === 'vial'
+                ? GroupEnum.FontAwesome5
+                : GroupEnum.FontAwesome
+          }
+        />
+      </View>
+      <View className="flex-1">
+        <Text className="font-medium text-gray-900 dark:text-gray-100">
+          {title}
+        </Text>
+        <Text className="text-xs text-gray-500 dark:text-gray-400">
+          进度: {progress} | 预计完成: {dueDate}
+        </Text>
+      </View>
+      <View>
+        <FontAwesome name="chevron-right" size={16} color={iconColor} />
+      </View>
     </View>
-  </View>
-);
+  );
+};
 
 // 图表通用配置
-const chartConfig = {
-  backgroundColor: '#ffffff',
-  backgroundGradientFrom: '#ffffff',
-  backgroundGradientTo: '#ffffff',
+const getChartConfig = (isDark: boolean) => ({
+  backgroundColor: isDark ? '#1f2937' : '#ffffff',
+  backgroundGradientFrom: isDark ? '#1f2937' : '#ffffff',
+  backgroundGradientTo: isDark ? '#1f2937' : '#ffffff',
   decimalPlaces: 1,
   color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
-  labelColor: (opacity = 1) => `rgba(107, 114, 128, ${opacity})`,
+  labelColor: (opacity = 1) =>
+    isDark
+      ? `rgba(156, 163, 175, ${opacity})`
+      : `rgba(107, 114, 128, ${opacity})`,
   style: {
     borderRadius: 16,
   },
@@ -100,9 +135,12 @@ const chartConfig = {
     strokeWidth: '2',
     stroke: '#3b82f6',
   },
-};
+});
 
 export const Quality: React.FC = () => {
+  const { isDark } = useAppColorScheme();
+  const chartConfig = getChartConfig(isDark);
+
   // 质量合格率趋势数据
   const qualityTrendData = {
     labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
@@ -122,35 +160,35 @@ export const Quality: React.FC = () => {
       name: '组装不良',
       population: 35,
       color: '#ef4444',
-      legendFontColor: '#7F7F7F',
+      legendFontColor: isDark ? '#9ca3af' : '#7F7F7F',
       legendFontSize: 12,
     },
     {
       name: '材料缺陷',
       population: 20,
       color: '#f59e0b',
-      legendFontColor: '#7F7F7F',
+      legendFontColor: isDark ? '#9ca3af' : '#7F7F7F',
       legendFontSize: 12,
     },
     {
       name: '功能异常',
       population: 20,
       color: '#3b82f6',
-      legendFontColor: '#7F7F7F',
+      legendFontColor: isDark ? '#9ca3af' : '#7F7F7F',
       legendFontSize: 12,
     },
     {
       name: '外观瑕疵',
       population: 15,
       color: '#10b981',
-      legendFontColor: '#7F7F7F',
+      legendFontColor: isDark ? '#9ca3af' : '#7F7F7F',
       legendFontSize: 12,
     },
     {
       name: '其他问题',
       population: 10,
       color: '#6b7280',
-      legendFontColor: '#7F7F7F',
+      legendFontColor: isDark ? '#9ca3af' : '#7F7F7F',
       legendFontSize: 12,
     },
   ];
@@ -159,16 +197,18 @@ export const Quality: React.FC = () => {
     <>
       {/* 时间选择器 */}
       <View className="mb-4 flex-row items-center justify-between">
-        <Text className="text-lg font-semibold">质量数据</Text>
-        <View className="flex-row overflow-hidden rounded-lg border border-gray-200 bg-white">
-          <TouchableOpacity className="border-r border-gray-200 px-3 py-1">
-            <Text className="text-sm text-gray-500">日</Text>
+        <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          质量数据
+        </Text>
+        <View className="flex-row overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-600 dark:bg-gray-800">
+          <TouchableOpacity className="border-r border-gray-200 px-3 py-1 dark:border-gray-600">
+            <Text className="text-sm text-gray-500 dark:text-gray-400">日</Text>
           </TouchableOpacity>
-          <TouchableOpacity className="border-r border-gray-200 bg-blue-50 px-3 py-1">
-            <Text className="text-sm text-blue-600">月</Text>
+          <TouchableOpacity className="border-r border-gray-200 bg-blue-50 px-3 py-1 dark:border-gray-600 dark:bg-blue-900/30">
+            <Text className="text-sm text-blue-600 dark:text-blue-400">月</Text>
           </TouchableOpacity>
           <TouchableOpacity className="px-3 py-1">
-            <Text className="text-sm text-gray-500">年</Text>
+            <Text className="text-sm text-gray-500 dark:text-gray-400">年</Text>
           </TouchableOpacity>
         </View>
       </View>
@@ -206,11 +246,15 @@ export const Quality: React.FC = () => {
       </View>
 
       {/* 质量合格率趋势 */}
-      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
         <View className="mb-3 flex-row items-center justify-between">
-          <Text className="text-lg font-semibold">质量合格率趋势</Text>
+          <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            质量合格率趋势
+          </Text>
           <TouchableOpacity>
-            <Text className="text-sm text-blue-600">详情</Text>
+            <Text className="text-sm text-blue-600 dark:text-blue-400">
+              详情
+            </Text>
           </TouchableOpacity>
         </View>
         <LineChart
@@ -227,17 +271,21 @@ export const Quality: React.FC = () => {
             borderRadius: 16,
           }}
         />
-        <Text className="mt-2 text-center text-xs text-gray-500">
+        <Text className="mt-2 text-center text-xs text-gray-500 dark:text-gray-400">
           注：图表显示的是不良品率，数值越低越好
         </Text>
       </View>
 
       {/* 不良品分析 */}
-      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
         <View className="mb-3 flex-row items-center justify-between">
-          <Text className="text-lg font-semibold">不良品分析</Text>
+          <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            不良品分析
+          </Text>
           <TouchableOpacity>
-            <Text className="text-sm text-blue-600">详情</Text>
+            <Text className="text-sm text-blue-600 dark:text-blue-400">
+              详情
+            </Text>
           </TouchableOpacity>
         </View>
         <View className="flex-row items-center">
@@ -257,28 +305,48 @@ export const Quality: React.FC = () => {
             <View className="space-y-2">
               <View className="flex-row items-center">
                 <View className="mr-2 size-3 rounded-full bg-red-500" />
-                <Text className="mr-2 text-sm text-gray-600">组装不良</Text>
-                <Text className="text-sm font-medium">35%</Text>
+                <Text className="mr-2 text-sm text-gray-600 dark:text-gray-400">
+                  组装不良
+                </Text>
+                <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                  35%
+                </Text>
               </View>
               <View className="flex-row items-center">
                 <View className="mr-2 size-3 rounded-full bg-yellow-500" />
-                <Text className="mr-2 text-sm text-gray-600">材料缺陷</Text>
-                <Text className="text-sm font-medium">20%</Text>
+                <Text className="mr-2 text-sm text-gray-600 dark:text-gray-400">
+                  材料缺陷
+                </Text>
+                <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                  20%
+                </Text>
               </View>
               <View className="flex-row items-center">
                 <View className="mr-2 size-3 rounded-full bg-blue-500" />
-                <Text className="mr-2 text-sm text-gray-600">功能异常</Text>
-                <Text className="text-sm font-medium">20%</Text>
+                <Text className="mr-2 text-sm text-gray-600 dark:text-gray-400">
+                  功能异常
+                </Text>
+                <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                  20%
+                </Text>
               </View>
               <View className="flex-row items-center">
                 <View className="mr-2 size-3 rounded-full bg-green-500" />
-                <Text className="mr-2 text-sm text-gray-600">外观瑕疵</Text>
-                <Text className="text-sm font-medium">15%</Text>
+                <Text className="mr-2 text-sm text-gray-600 dark:text-gray-400">
+                  外观瑕疵
+                </Text>
+                <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                  15%
+                </Text>
               </View>
               <View className="flex-row items-center">
                 <View className="mr-2 size-3 rounded-full bg-gray-500" />
-                <Text className="mr-2 text-sm text-gray-600">其他问题</Text>
-                <Text className="text-sm font-medium">10%</Text>
+                <Text className="mr-2 text-sm text-gray-600 dark:text-gray-400">
+                  其他问题
+                </Text>
+                <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                  10%
+                </Text>
               </View>
             </View>
           </View>
@@ -286,11 +354,15 @@ export const Quality: React.FC = () => {
       </View>
 
       {/* 产品质量对比 */}
-      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
         <View className="mb-3 flex-row items-center justify-between">
-          <Text className="text-lg font-semibold">产品质量对比</Text>
+          <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            产品质量对比
+          </Text>
           <TouchableOpacity>
-            <Text className="text-sm text-blue-600">详情</Text>
+            <Text className="text-sm text-blue-600 dark:text-blue-400">
+              详情
+            </Text>
           </TouchableOpacity>
         </View>
         <View className="space-y-3">
@@ -302,11 +374,15 @@ export const Quality: React.FC = () => {
       </View>
 
       {/* 质量改进计划 */}
-      <View className="mb-10 rounded-2xl bg-white p-4 shadow-sm">
+      <View className="mb-10 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
         <View className="mb-3 flex-row items-center justify-between">
-          <Text className="text-lg font-semibold">质量改进计划</Text>
+          <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            质量改进计划
+          </Text>
           <TouchableOpacity>
-            <Text className="text-sm text-blue-600">详情</Text>
+            <Text className="text-sm text-blue-600 dark:text-blue-400">
+              详情
+            </Text>
           </TouchableOpacity>
         </View>
         <View className="space-y-3">
diff --git a/src/components/analytics/report-item.tsx b/src/components/analytics/report-item.tsx
index f205c801af6eaaf7d07ad33d9362d4e01330e53c..09c7d062000b4e19689a53acf1e3df4e3ee8921b 100644
--- a/src/components/analytics/report-item.tsx
+++ b/src/components/analytics/report-item.tsx
@@ -3,6 +3,7 @@ import { TouchableOpacity } from 'react-native';
 
 import { Text, View } from '@/components/ui';
 import { FontAwesome } from '@/components/ui/icons';
+import { useAppColorScheme } from '@/lib';
 
 // 报表项组件
 type ReportItemProps = {
@@ -19,22 +20,34 @@ export const ReportItem: React.FC<ReportItemProps> = ({
   title,
   date,
   onPress,
-}) => (
-  <View className="mb-2 flex-row items-center justify-between rounded-lg bg-gray-50 p-3">
-    <View className="flex-row items-center">
-      <FontAwesome
-        name={icon}
-        size={20}
-        color={iconColor}
-        style={{ marginRight: 12 }}
-      />
-      <View>
-        <Text className="text-sm font-medium">{title}</Text>
-        <Text className="mt-0.5 text-xs text-gray-500">{date}</Text>
+}) => {
+  const { isDark } = useAppColorScheme();
+
+  return (
+    <View className="mb-2 flex-row items-center justify-between rounded-lg bg-gray-50 p-3 dark:bg-gray-700">
+      <View className="flex-row items-center">
+        <FontAwesome
+          name={icon}
+          size={20}
+          color={iconColor}
+          style={{ marginRight: 12 }}
+        />
+        <View>
+          <Text className="text-sm font-medium text-gray-900 dark:text-gray-100">
+            {title}
+          </Text>
+          <Text className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+            {date}
+          </Text>
+        </View>
       </View>
+      <TouchableOpacity onPress={onPress}>
+        <FontAwesome
+          name="download"
+          size={16}
+          color={isDark ? '#60a5fa' : '#0066ff'}
+        />
+      </TouchableOpacity>
     </View>
-    <TouchableOpacity onPress={onPress}>
-      <FontAwesome name="download" size={16} color="#0066ff" />
-    </TouchableOpacity>
-  </View>
-);
+  );
+};
diff --git a/src/components/analytics/sales.tsx b/src/components/analytics/sales.tsx
index e3969898074df351b29fe8ec178a4ad983ae6efb..82b0aad237a4385e81e924bd87d980cfbdb915c5 100644
--- a/src/components/analytics/sales.tsx
+++ b/src/components/analytics/sales.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { Dimensions, Text, TouchableOpacity, View } from 'react-native';
 import { BarChart, PieChart } from 'react-native-chart-kit';
 
+import { useAppColorScheme } from '@/lib';
+
 // 获取屏幕宽度用于图表响应式设计
 const screenWidth = Dimensions.get('window').width;
 
@@ -21,8 +23,8 @@ const KpiCard: React.FC<KpiCardProps> = ({
   trendUp = true,
   color,
 }) => (
-  <View className="mb-3 w-[48%] rounded-2xl bg-white p-3 shadow-sm">
-    <Text className="text-sm text-gray-600">{title}</Text>
+  <View className="mb-3 w-[48%] rounded-2xl bg-white p-3 shadow-sm dark:bg-gray-800">
+    <Text className="text-sm text-gray-600 dark:text-gray-400">{title}</Text>
     <Text className="mt-1 text-xl font-bold" style={{ color }}>
       {value}
     </Text>
@@ -36,13 +38,16 @@ const KpiCard: React.FC<KpiCardProps> = ({
 );
 
 // 图表通用配置
-const chartConfig = {
-  backgroundColor: '#ffffff',
-  backgroundGradientFrom: '#ffffff',
-  backgroundGradientTo: '#ffffff',
+const getChartConfig = (isDark: boolean) => ({
+  backgroundColor: isDark ? '#1f2937' : '#ffffff',
+  backgroundGradientFrom: isDark ? '#1f2937' : '#ffffff',
+  backgroundGradientTo: isDark ? '#1f2937' : '#ffffff',
   decimalPlaces: 0,
   color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
-  labelColor: (opacity = 1) => `rgba(107, 114, 128, ${opacity})`,
+  labelColor: (opacity = 1) =>
+    isDark
+      ? `rgba(156, 163, 175, ${opacity})`
+      : `rgba(107, 114, 128, ${opacity})`,
   style: {
     borderRadius: 16,
   },
@@ -51,9 +56,12 @@ const chartConfig = {
     strokeWidth: '2',
     stroke: '#3b82f6',
   },
-};
+});
 
 export const Sales: React.FC = () => {
+  const { isDark } = useAppColorScheme();
+  const chartConfig = getChartConfig(isDark);
+
   // 销售趋势数据
   const salesData = {
     labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
@@ -73,28 +81,28 @@ export const Sales: React.FC = () => {
       name: '华东地区',
       population: 45,
       color: '#3b82f6',
-      legendFontColor: '#7F7F7F',
+      legendFontColor: isDark ? '#9ca3af' : '#7F7F7F',
       legendFontSize: 12,
     },
     {
       name: '华南地区',
       population: 25,
       color: '#22c55e',
-      legendFontColor: '#7F7F7F',
+      legendFontColor: isDark ? '#9ca3af' : '#7F7F7F',
       legendFontSize: 12,
     },
     {
       name: '华北地区',
       population: 15,
       color: '#f59e0b',
-      legendFontColor: '#7F7F7F',
+      legendFontColor: isDark ? '#9ca3af' : '#7F7F7F',
       legendFontSize: 12,
     },
     {
       name: '其他地区',
       population: 15,
       color: '#ef4444',
-      legendFontColor: '#7F7F7F',
+      legendFontColor: isDark ? '#9ca3af' : '#7F7F7F',
       legendFontSize: 12,
     },
   ];
@@ -103,16 +111,18 @@ export const Sales: React.FC = () => {
     <>
       {/* 时间选择器 */}
       <View className="mb-4 flex-row items-center justify-between">
-        <Text className="text-lg font-semibold">销售数据</Text>
-        <View className="flex-row overflow-hidden rounded-lg border border-gray-200 bg-white">
-          <TouchableOpacity className="border-r border-gray-200 px-3 py-1">
-            <Text className="text-sm text-gray-500">日</Text>
+        <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          销售数据
+        </Text>
+        <View className="flex-row overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-600 dark:bg-gray-800">
+          <TouchableOpacity className="border-r border-gray-200 px-3 py-1 dark:border-gray-600">
+            <Text className="text-sm text-gray-500 dark:text-gray-400">日</Text>
           </TouchableOpacity>
-          <TouchableOpacity className="border-r border-gray-200 bg-blue-50 px-3 py-1">
-            <Text className="text-sm text-blue-600">月</Text>
+          <TouchableOpacity className="border-r border-gray-200 bg-blue-50 px-3 py-1 dark:border-gray-600 dark:bg-blue-900/30">
+            <Text className="text-sm text-blue-600 dark:text-blue-400">月</Text>
           </TouchableOpacity>
           <TouchableOpacity className="px-3 py-1">
-            <Text className="text-sm text-gray-500">年</Text>
+            <Text className="text-sm text-gray-500 dark:text-gray-400">年</Text>
           </TouchableOpacity>
         </View>
       </View>
@@ -150,11 +160,15 @@ export const Sales: React.FC = () => {
       </View>
 
       {/* 销售趋势图 */}
-      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm">
+      <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
         <View className="mb-3 flex-row items-center justify-between">
-          <Text className="text-lg font-semibold">销售趋势</Text>
+          <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            销售趋势
+          </Text>
           <TouchableOpacity>
-            <Text className="text-sm text-blue-600">详情</Text>
+            <Text className="text-sm text-blue-600 dark:text-blue-400">
+              详情
+            </Text>
           </TouchableOpacity>
         </View>
         <BarChart
@@ -174,11 +188,15 @@ export const Sales: React.FC = () => {
       </View>
 
       {/* 客户地区分布 */}
-      <View className="mb-10 rounded-2xl bg-white p-4 shadow-sm">
+      <View className="mb-10 rounded-2xl bg-white p-4 shadow-sm dark:bg-gray-800">
         <View className="mb-3 flex-row items-center justify-between">
-          <Text className="text-lg font-semibold">客户地区分布</Text>
+          <Text className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            客户地区分布
+          </Text>
           <TouchableOpacity>
-            <Text className="text-sm text-blue-600">详情</Text>
+            <Text className="text-sm text-blue-600 dark:text-blue-400">
+              详情
+            </Text>
           </TouchableOpacity>
         </View>
         <View className="flex-row items-center">
diff --git a/src/components/equipment/document-item.tsx b/src/components/equipment/document-item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b3cf417e63150f87430af899ea287f67c3e09cd2
--- /dev/null
+++ b/src/components/equipment/document-item.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import { Text, View } from '@/components/ui';
+import { FontAwesome } from '@/components/ui/icons';
+
+export type DocumentItemProps = {
+  icon: string;
+  iconColor: string;
+  iconBgColor: string;
+  title: string;
+  size: string;
+  date: string;
+  onPress: () => void;
+};
+
+export const DocumentItem: React.FC<DocumentItemProps> = ({
+  icon,
+  iconColor,
+  iconBgColor,
+  title,
+  size,
+  date,
+  onPress,
+}) => (
+  <TouchableOpacity
+    className="mb-3 flex-row items-center rounded-lg border border-gray-200 p-3 dark:border-neutral-700"
+    onPress={onPress}
+    activeOpacity={0.7}
+  >
+    <View
+      className="mr-3 size-10 items-center justify-center rounded-lg"
+      style={{ backgroundColor: iconBgColor }}
+    >
+      <FontAwesome name={icon as any} size={18} color={iconColor} />
+    </View>
+    <View className="flex-1">
+      <Text className="text-sm font-semibold text-gray-800 dark:text-gray-100">
+        {title}
+      </Text>
+      <Text className="text-xs text-gray-500 dark:text-gray-400">
+        {size} · {date}
+      </Text>
+    </View>
+    <FontAwesome name="download" size={16} color="#1890ff" />
+  </TouchableOpacity>
+);
diff --git a/src/components/equipment/index.tsx b/src/components/equipment/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..62f55c3b773f5612946b07a830ea111cb1b55b00
--- /dev/null
+++ b/src/components/equipment/index.tsx
@@ -0,0 +1,5 @@
+export * from './document-item';
+export * from './info-row';
+export * from './maintenance-plan-item';
+export * from './repair-record-item';
+export * from './stat-card';
diff --git a/src/components/equipment/info-row.tsx b/src/components/equipment/info-row.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c634ba120599ac517c40f30ac858bf0f4f4b140f
--- /dev/null
+++ b/src/components/equipment/info-row.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Text, View } from '@/components/ui';
+
+export type InfoRowProps = {
+  label: string;
+  value?: string;
+  isLast?: boolean;
+};
+
+export const InfoRow: React.FC<InfoRowProps> = ({
+  label,
+  value,
+  isLast = false,
+}) => (
+  <View
+    className={`flex-row items-center justify-between py-2 ${!isLast ? 'border-b border-gray-100 dark:border-neutral-700' : ''}`}
+  >
+    <Text className="text-sm text-gray-500 dark:text-gray-400">{label}</Text>
+    <Text className="text-sm font-semibold text-gray-800 dark:text-gray-100">
+      {value}
+    </Text>
+  </View>
+);
diff --git a/src/components/equipment/maintenance-plan-item.tsx b/src/components/equipment/maintenance-plan-item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5dd669043bd5aef8d3c01ac0048b4be8fcbf7e35
--- /dev/null
+++ b/src/components/equipment/maintenance-plan-item.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { Text, View } from '@/components/ui';
+
+export type MaintenancePlanItemProps = {
+  title: string;
+  date: string;
+  daysLeft: string;
+  borderColor: string;
+  bgColor: string;
+  textColor: string;
+  isDark: boolean;
+};
+
+export const MaintenancePlanItem: React.FC<MaintenancePlanItemProps> = ({
+  title,
+  date,
+  daysLeft,
+  borderColor,
+  bgColor,
+  textColor,
+  isDark,
+}) => {
+  // 在暗黑模式下使用半透明的深色背景
+  const darkBgColor = isDark ? 'rgba(64, 64, 64, 0.3)' : bgColor;
+
+  return (
+    <View
+      className="mb-3 flex-row items-center rounded-lg p-3"
+      style={{
+        backgroundColor: darkBgColor,
+        borderLeftWidth: 4,
+        borderLeftColor: borderColor,
+      }}
+    >
+      <View className="flex-1">
+        <Text className="mb-1 text-sm font-semibold text-gray-800 dark:text-gray-100">
+          {title}
+        </Text>
+        <Text className="text-xs text-gray-600 dark:text-gray-400">
+          下次保养时间：{date}
+        </Text>
+      </View>
+      <Text className="text-xs font-semibold" style={{ color: textColor }}>
+        {daysLeft}
+      </Text>
+    </View>
+  );
+};
diff --git a/src/components/equipment/repair-record-item.tsx b/src/components/equipment/repair-record-item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ed31027c9257bedb6b11b06bb825db888733d0c1
--- /dev/null
+++ b/src/components/equipment/repair-record-item.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { Text, View } from '@/components/ui';
+import { FontAwesome } from '@/components/ui/icons';
+
+export type RepairRecordItemProps = {
+  title: string;
+  description: string;
+  assignee: string;
+  date: string;
+  status: string;
+  statusColor: string;
+  borderColor: string;
+  bgColor: string;
+  isDark: boolean;
+};
+
+export const RepairRecordItem: React.FC<RepairRecordItemProps> = ({
+  title,
+  description,
+  assignee,
+  date,
+  status,
+  statusColor,
+  borderColor,
+  bgColor,
+  isDark,
+}) => {
+  // 在暗黑模式下使用半透明的深色背景
+  const darkBgColor = isDark ? 'rgba(64, 64, 64, 0.3)' : bgColor;
+
+  return (
+    <View
+      className="mb-3 rounded-lg p-3"
+      style={{
+        backgroundColor: darkBgColor,
+        borderLeftWidth: 4,
+        borderLeftColor: borderColor,
+      }}
+    >
+      <View className="mb-2 flex-row items-start justify-between">
+        <View className="flex-1">
+          <Text className="mb-1 text-sm font-semibold text-gray-800 dark:text-gray-100">
+            {title}
+          </Text>
+          <Text className="text-xs text-gray-600 dark:text-gray-400">
+            {description}
+          </Text>
+        </View>
+        <View
+          className="ml-2 rounded px-2 py-1"
+          style={{ backgroundColor: statusColor }}
+        >
+          <Text className="text-xs text-white">{status}</Text>
+        </View>
+      </View>
+      <View className="flex-row items-center justify-between">
+        <View className="flex-row items-center">
+          <FontAwesome name="user" size={10} color="#9ca3af" />
+          <Text className="ml-1 text-xs text-gray-500 dark:text-gray-400">
+            {assignee}
+          </Text>
+        </View>
+        <View className="flex-row items-center">
+          <FontAwesome name="clock-o" size={10} color="#9ca3af" />
+          <Text className="ml-1 text-xs text-gray-500 dark:text-gray-400">
+            {date}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+};
diff --git a/src/components/equipment/stat-card.tsx b/src/components/equipment/stat-card.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6571d7a786c9258785b99dccccfdb5e99349a1d2
--- /dev/null
+++ b/src/components/equipment/stat-card.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { Text, View } from '@/components/ui';
+
+export type StatCardProps = {
+  value: string;
+  label: string;
+  bgColor: string;
+  textColor: string;
+  isDark: boolean;
+};
+
+export const StatCard: React.FC<StatCardProps> = ({
+  value,
+  label,
+  bgColor,
+  textColor,
+  isDark,
+}) => {
+  // 在暗黑模式下使用半透明的深色背景
+  const darkBgColor = isDark ? 'rgba(64, 64, 64, 0.5)' : bgColor;
+
+  return (
+    <View
+      className="rounded-xl p-4 text-center"
+      style={{ backgroundColor: darkBgColor }}
+    >
+      <Text className="mb-1 text-2xl font-bold" style={{ color: textColor }}>
+        {value}
+      </Text>
+      <Text className="text-sm text-gray-600 dark:text-gray-400">{label}</Text>
+    </View>
+  );
+};
diff --git a/src/components/inventory/item.tsx b/src/components/inventory/item.tsx
index 8c0c4b010702ed87aca349d2d5364b09a6f5a62c..c3749e8208fd0230795a77dcf356e0a78540e8a7 100644
--- a/src/components/inventory/item.tsx
+++ b/src/components/inventory/item.tsx
@@ -39,17 +39,19 @@ const Item = ({
               className="mr-2 size-2 rounded-full"
               style={{ backgroundColor: indicatorColor }}
             />
-            <Text className="text-base font-medium dark:text-gray-100">{name}</Text>
+            <Text className="text-base font-medium dark:text-gray-100">
+              {name}
+            </Text>
           </View>
-          <Text className="text-sm text-gray-500 dark:text-gray-400">编号：{code}</Text>
+          <Text className="text-sm text-gray-500 dark:text-gray-400">
+            编号：{code}
+          </Text>
         </View>
         <View className="items-end">
-          <Text
-            className={`text-lg font-bold ${textColor}`}
-          >
-            {quantity}
+          <Text className={`text-lg font-bold ${textColor}`}>{quantity}</Text>
+          <Text className="text-xs text-gray-500 dark:text-gray-400">
+            安全库存：{safetyStock}
           </Text>
-          <Text className="text-xs text-gray-500 dark:text-gray-400">安全库存：{safetyStock}</Text>
         </View>
       </View>
     </TouchableOpacity>
@@ -57,4 +59,3 @@ const Item = ({
 };
 
 export default Item;
-
diff --git a/src/components/production/equipment.tsx b/src/components/production/equipment.tsx
index 204faee1c304266e489540611912520c0916216f..b40ff28dce979be8a18279afe55035a2a85b6e06 100644
--- a/src/components/production/equipment.tsx
+++ b/src/components/production/equipment.tsx
@@ -140,16 +140,28 @@ export const Equipment = () => {
         </Text>
         <View className="mb-3 flex-row justify-between">
           <View className="flex-1 items-center">
-            <Text className="text-2xl font-bold text-blue-600 dark:text-blue-400">32</Text>
-            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">设备总数</Text>
+            <Text className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+              32
+            </Text>
+            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              设备总数
+            </Text>
           </View>
           <View className="flex-1 items-center">
-            <Text className="text-2xl font-bold text-green-500 dark:text-green-400">25</Text>
-            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">运行中</Text>
+            <Text className="text-2xl font-bold text-green-500 dark:text-green-400">
+              25
+            </Text>
+            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              运行中
+            </Text>
           </View>
           <View className="flex-1 items-center">
-            <Text className="text-2xl font-bold text-red-500 dark:text-red-400">2</Text>
-            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">故障</Text>
+            <Text className="text-2xl font-bold text-red-500 dark:text-red-400">
+              2
+            </Text>
+            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              故障
+            </Text>
           </View>
         </View>
         <View className="flex-row items-center rounded-xl bg-blue-50 p-3 dark:bg-blue-900/30">
@@ -160,7 +172,9 @@ export const Equipment = () => {
             className="mr-3"
           />
           <View className="flex-1">
-            <Text className="text-sm font-medium dark:text-gray-100">设备综合效率(OEE)</Text>
+            <Text className="text-sm font-medium dark:text-gray-100">
+              设备综合效率(OEE)
+            </Text>
             <View className="flex-row items-center">
               <Text className="mr-2 text-lg font-bold text-blue-600">
                 87.2%
@@ -172,7 +186,9 @@ export const Equipment = () => {
       </View>
 
       {/* 设备列表标题 */}
-      <Text className="mb-3 text-lg font-semibold text-gray-800 dark:text-gray-100">设备列表</Text>
+      <Text className="mb-3 text-lg font-semibold text-gray-800 dark:text-gray-100">
+        设备列表
+      </Text>
 
       {/* 设备列表 - 使用map函数循环渲染设备数据 */}
       {equipmentData.map((equipment) => (
@@ -201,24 +217,36 @@ export const Equipment = () => {
           {/* 设备参数信息 - 温度、转速、电压、电流 */}
           <View className="mb-3 flex-row flex-wrap">
             <View className="mb-2 w-1/2">
-              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">设备温度</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                设备温度
+              </Text>
               <Text className="text-sm font-medium dark:text-gray-100">
                 {equipment.temperature}
               </Text>
             </View>
             <View className="mb-2 w-1/2">
-              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">电机转速</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                电机转速
+              </Text>
               <Text className="text-sm font-medium dark:text-gray-100">
                 {equipment.motorSpeed}
               </Text>
             </View>
             <View className="mb-2 w-1/2">
-              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">电压</Text>
-              <Text className="text-sm font-medium dark:text-gray-100">{equipment.voltage}</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                电压
+              </Text>
+              <Text className="text-sm font-medium dark:text-gray-100">
+                {equipment.voltage}
+              </Text>
             </View>
             <View className="mb-2 w-1/2">
-              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">电流</Text>
-              <Text className="text-sm font-medium dark:text-gray-100">{equipment.current}</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                电流
+              </Text>
+              <Text className="text-sm font-medium dark:text-gray-100">
+                {equipment.current}
+              </Text>
             </View>
           </View>
 
diff --git a/src/components/production/plan.tsx b/src/components/production/plan.tsx
index 491c15a8b80e3280486d54e8cb27ae8e219312b1..904a35b324f2d579995f2346b93ceb3951d6004f 100644
--- a/src/components/production/plan.tsx
+++ b/src/components/production/plan.tsx
@@ -56,7 +56,9 @@ export const PlanItem: React.FC<PlanItemProps> = ({
     <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-neutral-800">
       {/* 标题和状态区域 - 使用弹性布局和对齐方式 */}
       <View className="mb-2 flex-row items-start justify-between">
-        <Text className="text-base font-medium text-gray-800 dark:text-gray-100">{title}</Text>
+        <Text className="text-base font-medium text-gray-800 dark:text-gray-100">
+          {title}
+        </Text>
         <StatusBadge
           status={status}
           color={statusColor}
@@ -65,19 +67,29 @@ export const PlanItem: React.FC<PlanItemProps> = ({
       </View>
 
       {/* 计划编号 - 使用灰色文本和下边距 */}
-      <Text className="mb-2 text-sm text-gray-500 dark:text-gray-400">计划编号：{code}</Text>
+      <Text className="mb-2 text-sm text-gray-500 dark:text-gray-400">
+        计划编号：{code}
+      </Text>
 
       {/* 负责人和截止日期 - 使用弹性布局和间距 */}
       <View className="mb-3 flex-row justify-between">
-        <Text className="text-sm text-gray-500 dark:text-gray-400">负责人：{manager}</Text>
-        <Text className="text-sm text-gray-500 dark:text-gray-400">截止日期：{deadline}</Text>
+        <Text className="text-sm text-gray-500 dark:text-gray-400">
+          负责人：{manager}
+        </Text>
+        <Text className="text-sm text-gray-500 dark:text-gray-400">
+          截止日期：{deadline}
+        </Text>
       </View>
 
       {/* 进度条区域 - 使用下边距和嵌套布局 */}
       <View className="mb-2">
         <View className="mb-1 flex-row justify-between">
-          <Text className="text-sm text-gray-500 dark:text-gray-400">完成进度</Text>
-          <Text className="text-sm text-gray-500 dark:text-gray-400">{progress}%</Text>
+          <Text className="text-sm text-gray-500 dark:text-gray-400">
+            完成进度
+          </Text>
+          <Text className="text-sm text-gray-500 dark:text-gray-400">
+            {progress}%
+          </Text>
         </View>
         <ProgressBar progress={progress} color={statusColor} />
       </View>
@@ -85,10 +97,18 @@ export const PlanItem: React.FC<PlanItemProps> = ({
       {/* 底部统计和详情链接 - 使用弹性布局和对齐 */}
       <View className="flex-row items-center justify-between">
         <View className="flex-row items-center">
-          <Text className="text-sm text-gray-500 dark:text-gray-400">计划产量：</Text>
-          <Text className="mr-3 text-sm font-medium dark:text-gray-100">{total}</Text>
-          <Text className="text-sm text-gray-500 dark:text-gray-400">已完成：</Text>
-          <Text className="mr-3 text-sm font-medium dark:text-gray-100">{completed}</Text>
+          <Text className="text-sm text-gray-500 dark:text-gray-400">
+            计划产量：
+          </Text>
+          <Text className="mr-3 text-sm font-medium dark:text-gray-100">
+            {total}
+          </Text>
+          <Text className="text-sm text-gray-500 dark:text-gray-400">
+            已完成：
+          </Text>
+          <Text className="mr-3 text-sm font-medium dark:text-gray-100">
+            {completed}
+          </Text>
         </View>
       </View>
     </View>
@@ -156,16 +176,28 @@ export const Plans = () => {
         {/* 统计数据网格 */}
         <View className="mb-3 flex-row justify-between">
           <View className="flex-1 items-center">
-            <Text className="text-2xl font-bold text-blue-600 dark:text-blue-400">15</Text>
-            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">计划总数</Text>
+            <Text className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+              15
+            </Text>
+            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              计划总数
+            </Text>
           </View>
           <View className="flex-1 items-center">
-            <Text className="text-2xl font-bold text-green-500 dark:text-green-400">8</Text>
-            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">进行中</Text>
+            <Text className="text-2xl font-bold text-green-500 dark:text-green-400">
+              8
+            </Text>
+            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              进行中
+            </Text>
           </View>
           <View className="flex-1 items-center">
-            <Text className="text-2xl font-bold text-orange-500 dark:text-orange-400">3</Text>
-            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">待开始</Text>
+            <Text className="text-2xl font-bold text-orange-500 dark:text-orange-400">
+              3
+            </Text>
+            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              待开始
+            </Text>
           </View>
         </View>
 
@@ -178,7 +210,9 @@ export const Plans = () => {
             className="mr-3"
           />
           <View className="flex-1">
-            <Text className="text-sm font-medium dark:text-gray-100">本月生产完成率</Text>
+            <Text className="text-sm font-medium dark:text-gray-100">
+              本月生产完成率
+            </Text>
             <View className="flex-row items-center">
               <Text className="mr-2 text-lg font-bold text-blue-600">
                 78.5%
diff --git a/src/components/production/process-node.tsx b/src/components/production/process-node.tsx
index ef629f1ef6f013300060d5669397938ef53780c0..911d7d6e1b787ae3522b6e8687638f95707d7b5f 100644
--- a/src/components/production/process-node.tsx
+++ b/src/components/production/process-node.tsx
@@ -75,7 +75,9 @@ export const ProcessNode: React.FC<ProcessNodeProps> = ({
         {statusIcon}
       </View>
       {/* 节点标签 */}
-      <Text className="mb-0.5 text-xs font-medium dark:text-gray-100">{label}</Text>
+      <Text className="mb-0.5 text-xs font-medium dark:text-gray-100">
+        {label}
+      </Text>
       {/* 节点状态文本 - 根据状态显示不同颜色 */}
       <Text
         className={`text-xs ${status === 'inProgress' ? 'text-blue-600' : 'text-gray-500 dark:text-gray-400'}`}
diff --git a/src/components/production/process.tsx b/src/components/production/process.tsx
index a87c239f75e1a3ee87603a8594d4738167c8bc4e..301ccbf0e708769ed99d3f97fdd46edc67a12cb9 100644
--- a/src/components/production/process.tsx
+++ b/src/components/production/process.tsx
@@ -106,19 +106,25 @@ export const Process = () => {
             <Text className="text-2xl font-bold" style={{ color: '#0066ff' }}>
               18
             </Text>
-            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">工序总数</Text>
+            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              工序总数
+            </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 dark:text-gray-400">使用中</Text>
+            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              使用中
+            </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 dark:text-gray-400">待优化</Text>
+            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              待优化
+            </Text>
           </View>
         </View>
       </View>
@@ -126,7 +132,9 @@ export const Process = () => {
       {/* 工序流程图 - 显示生产工序的流程和进度 */}
       <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-neutral-800">
         <View className="mb-3 flex-row items-center justify-between">
-          <Text className="text-base font-medium dark:text-gray-100">智能手表生产工序流程</Text>
+          <Text className="text-base font-medium dark:text-gray-100">
+            智能手表生产工序流程
+          </Text>
           <View className="flex-row items-center">
             <Text className="text-sm font-medium text-blue-600">
               当前批次：
@@ -178,7 +186,9 @@ export const Process = () => {
       </View>
 
       {/* 工序列表标题 */}
-      <Text className="mb-3 text-lg font-semibold text-gray-800 dark:text-gray-100">工序列表</Text>
+      <Text className="mb-3 text-lg font-semibold text-gray-800 dark:text-gray-100">
+        工序列表
+      </Text>
 
       {/* 工序列表 - 使用map函数循环渲染工序数据 */}
       {processData.map((process) => (
@@ -207,11 +217,17 @@ export const Process = () => {
           {/* 工序基本信息 - 负责人和标准工时 */}
           <View className="mb-3 flex-row justify-between">
             <View className="flex-1">
-              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">负责人</Text>
-              <Text className="text-sm font-medium dark:text-gray-100">{process.responsible}</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                负责人
+              </Text>
+              <Text className="text-sm font-medium dark:text-gray-100">
+                {process.responsible}
+              </Text>
             </View>
             <View className="flex-1">
-              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">标准工时</Text>
+              <Text className="mb-1 text-xs text-gray-500 dark:text-gray-400">
+                标准工时
+              </Text>
               <Text className="text-sm font-medium dark:text-gray-100">
                 {process.standardTime}
               </Text>
@@ -221,15 +237,21 @@ export const Process = () => {
           {/* 设备利用率进度条 */}
           <View className="mb-2">
             <View className="mb-1 flex-row justify-between">
-              <Text className="text-sm text-gray-500 dark:text-gray-400">设备利用率</Text>
-              <Text className="text-sm dark:text-gray-100">{process.utilizationRate}%</Text>
+              <Text className="text-sm text-gray-500 dark:text-gray-400">
+                设备利用率
+              </Text>
+              <Text className="text-sm dark:text-gray-100">
+                {process.utilizationRate}%
+              </Text>
             </View>
             <ProgressBar progress={process.utilizationRate} color="#22c55e" />
           </View>
 
           {/* 关联设备信息 */}
           <View className="mb-3 rounded-xl bg-blue-50 p-3 dark:bg-blue-900/30">
-            <Text className="mb-2 text-sm font-medium dark:text-gray-100">关联设备</Text>
+            <Text className="mb-2 text-sm font-medium dark:text-gray-100">
+              关联设备
+            </Text>
             <View className="flex-row items-center">
               <FontAwesome
                 name={process.equipment.icon}
@@ -237,14 +259,18 @@ export const Process = () => {
                 color={process.equipment.iconColor}
                 style={{ marginRight: 8 }}
               />
-              <Text className="text-sm dark:text-gray-100">{process.equipment.name}</Text>
+              <Text className="text-sm dark:text-gray-100">
+                {process.equipment.name}
+              </Text>
             </View>
           </View>
 
           {/* 工序项目底部 - 良品率和详情链接 */}
           <View className="flex-row items-center justify-between">
             <View className="flex-row items-center">
-              <Text className="text-sm text-gray-500 dark:text-gray-400">良品率：</Text>
+              <Text className="text-sm text-gray-500 dark:text-gray-400">
+                良品率：
+              </Text>
               <Text className="mr-3 text-sm font-medium dark:text-gray-100">
                 {process.yieldRate}
               </Text>
diff --git a/src/components/production/report.tsx b/src/components/production/report.tsx
index fb08dfd9197d9abd132ac151301f42f3a2eab407..0fa2371efbf76a05d2be0f49da73bcc37256a2cb 100644
--- a/src/components/production/report.tsx
+++ b/src/components/production/report.tsx
@@ -120,7 +120,9 @@ export const Report = () => {
     <View>
       {/* 报表概览 - 标题和日期选择器 */}
       <View className="mb-3 flex-row items-center justify-between">
-        <Text className="text-lg font-semibold text-gray-800 dark:text-gray-100">生产报表</Text>
+        <Text className="text-lg font-semibold text-gray-800 dark:text-gray-100">
+          生产报表
+        </Text>
         <ReportDateSelector />
       </View>
 
@@ -128,26 +130,44 @@ export const Report = () => {
       <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-neutral-800">
         <View className="mb-3 flex-row items-center justify-between">
           <Text className="text-base font-semibold">生产数据</Text>
-          <Text className="text-sm text-gray-500 dark:text-gray-400">2023-12-05</Text>
+          <Text className="text-sm text-gray-500 dark:text-gray-400">
+            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 dark:text-blue-400">1,250</Text>
-            <Text className="text-xs text-gray-500 dark:text-gray-400">计划产量</Text>
+            <Text className="mb-1 text-lg font-bold text-blue-600 dark:text-blue-400">
+              1,250
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              计划产量
+            </Text>
           </View>
           <View className="mb-3 w-1/2">
-            <Text className="mb-1 text-lg font-bold text-blue-600 dark:text-blue-400">1,180</Text>
-            <Text className="text-xs text-gray-500 dark:text-gray-400">实际产量</Text>
+            <Text className="mb-1 text-lg font-bold text-blue-600 dark:text-blue-400">
+              1,180
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              实际产量
+            </Text>
           </View>
           <View className="mb-3 w-1/2">
-            <Text className="mb-1 text-lg font-bold text-blue-600 dark:text-blue-400">94.4%</Text>
-            <Text className="text-xs text-gray-500 dark:text-gray-400">计划完成率</Text>
+            <Text className="mb-1 text-lg font-bold text-blue-600 dark:text-blue-400">
+              94.4%
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              计划完成率
+            </Text>
           </View>
           <View className="mb-3 w-1/2">
-            <Text className="mb-1 text-lg font-bold text-blue-600 dark:text-blue-400">98.3%</Text>
-            <Text className="text-xs text-gray-500 dark:text-gray-400">良品率</Text>
+            <Text className="mb-1 text-lg font-bold text-blue-600 dark:text-blue-400">
+              98.3%
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              良品率
+            </Text>
           </View>
         </View>
 
@@ -165,11 +185,15 @@ export const Report = () => {
               <View className="flex-row items-center">
                 <View className="mr-4 flex-row items-center">
                   <View className="mr-1 size-3 rounded-sm bg-blue-500" />
-                  <Text className="text-xs text-gray-600 dark:text-gray-400">计划</Text>
+                  <Text className="text-xs text-gray-600 dark:text-gray-400">
+                    计划
+                  </Text>
                 </View>
                 <View className="flex-row items-center">
                   <View className="mr-1 size-3 rounded-sm bg-green-500" />
-                  <Text className="text-xs text-gray-600 dark:text-gray-400">实际</Text>
+                  <Text className="text-xs text-gray-600 dark:text-gray-400">
+                    实际
+                  </Text>
                 </View>
               </View>
             </View>
@@ -254,26 +278,44 @@ export const Report = () => {
       <View className="mb-4 rounded-2xl bg-white p-4 shadow-sm dark:bg-neutral-800">
         <View className="mb-3 flex-row items-center justify-between">
           <Text className="text-base font-semibold">设备运行报表</Text>
-          <Text className="text-sm text-gray-500 dark:text-gray-400">2023-12-05</Text>
+          <Text className="text-sm text-gray-500 dark:text-gray-400">
+            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 dark:text-blue-400">32</Text>
-            <Text className="text-xs text-gray-500 dark:text-gray-400">设备总数</Text>
+            <Text className="mb-1 text-lg font-bold text-blue-600 dark:text-blue-400">
+              32
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              设备总数
+            </Text>
           </View>
           <View className="mb-3 w-1/2">
-            <Text className="mb-1 text-lg font-bold text-blue-600 dark:text-blue-400">28</Text>
-            <Text className="text-xs text-gray-500 dark:text-gray-400">运行设备</Text>
+            <Text className="mb-1 text-lg font-bold text-blue-600 dark:text-blue-400">
+              28
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              运行设备
+            </Text>
           </View>
           <View className="mb-3 w-1/2">
-            <Text className="mb-1 text-lg font-bold text-blue-600 dark:text-blue-400">87.5%</Text>
-            <Text className="text-xs text-gray-500 dark:text-gray-400">设备利用率</Text>
+            <Text className="mb-1 text-lg font-bold text-blue-600 dark:text-blue-400">
+              87.5%
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              设备利用率
+            </Text>
           </View>
           <View className="mb-3 w-1/2">
-            <Text className="mb-1 text-lg font-bold text-blue-600 dark:text-blue-400">4.2h</Text>
-            <Text className="text-xs text-gray-500 dark:text-gray-400">平均运行</Text>
+            <Text className="mb-1 text-lg font-bold text-blue-600 dark:text-blue-400">
+              4.2h
+            </Text>
+            <Text className="text-xs text-gray-500 dark:text-gray-400">
+              平均运行
+            </Text>
           </View>
         </View>
 
@@ -331,8 +373,12 @@ export const Report = () => {
 
                 {/* 中心白色圆 */}
                 <View className="size-16 items-center justify-center rounded-full bg-white">
-                  <Text className="text-xs font-bold text-gray-800 dark:text-gray-100">32台</Text>
-                  <Text className="text-xs text-gray-500 dark:text-gray-400">设备</Text>
+                  <Text className="text-xs font-bold text-gray-800 dark:text-gray-100">
+                    32台
+                  </Text>
+                  <Text className="text-xs text-gray-500 dark:text-gray-400">
+                    设备
+                  </Text>
                 </View>
               </View>
             </View>
@@ -393,7 +439,9 @@ export const Report = () => {
             color="#ef4444"
             style={{ marginRight: 12 }}
           />
-          <Text className="text-sm text-gray-800 dark:text-gray-100">下载本月生产报表</Text>
+          <Text className="text-sm text-gray-800 dark:text-gray-100">
+            下载本月生产报表
+          </Text>
         </TouchableOpacity>
       </View>
     </View>
diff --git a/src/components/production/task.tsx b/src/components/production/task.tsx
index 77e55b4ea7ca330d57de0c290146170eb8306151..71ce907585235db1cac56c85a07ec811eca8d1ef 100644
--- a/src/components/production/task.tsx
+++ b/src/components/production/task.tsx
@@ -103,19 +103,25 @@ export const Task = () => {
             <Text className="text-2xl font-bold" style={{ color: '#0066ff' }}>
               24
             </Text>
-            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">任务总数</Text>
+            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              任务总数
+            </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 dark:text-gray-400">进行中</Text>
+            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              进行中
+            </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 dark:text-gray-400">待分配</Text>
+            <Text className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              待分配
+            </Text>
           </View>
         </View>
         <View className="flex-row items-center rounded-xl bg-blue-50 p-3 dark:bg-blue-900/30">
@@ -126,7 +132,9 @@ export const Task = () => {
             style={{ marginRight: 12 }}
           />
           <View className="flex-1">
-            <Text className="text-sm font-medium dark:text-gray-100">员工任务完成率</Text>
+            <Text className="text-sm font-medium dark:text-gray-100">
+              员工任务完成率
+            </Text>
             <View className="flex-row items-center">
               <Text className="mr-2 text-lg font-bold text-blue-600">
                 82.3%
@@ -179,8 +187,12 @@ export const Task = () => {
             {/* 完成进度条 */}
             <View className="mb-2">
               <View className="mb-1 flex-row justify-between">
-                <Text className="text-sm text-gray-500 dark:text-gray-400">完成进度</Text>
-                <Text className="text-sm text-gray-500 dark:text-gray-400">{task.progress}%</Text>
+                <Text className="text-sm text-gray-500 dark:text-gray-400">
+                  完成进度
+                </Text>
+                <Text className="text-sm text-gray-500 dark:text-gray-400">
+                  {task.progress}%
+                </Text>
               </View>
               <ProgressBar
                 progress={task.progress}
@@ -191,8 +203,12 @@ export const Task = () => {
             {/* 所属计划和详情按钮 */}
             <View className="flex-row items-center justify-between">
               <View className="flex-row items-center">
-                <Text className="text-sm text-gray-500 dark:text-gray-400">所属计划：</Text>
-                <Text className="mr-3 text-sm font-medium dark:text-gray-100">{task.planNo}</Text>
+                <Text className="text-sm text-gray-500 dark:text-gray-400">
+                  所属计划：
+                </Text>
+                <Text className="mr-3 text-sm font-medium dark:text-gray-100">
+                  {task.planNo}
+                </Text>
               </View>
             </View>
           </View>
diff --git a/src/components/refresh-list-view.tsx b/src/components/refresh-list-view.tsx
index 5e3fa60ae339993dd79324a9c991b272d1fa0152..d3742c804905547ae533fdd080eca81e19ab2d1c 100644
--- a/src/components/refresh-list-view.tsx
+++ b/src/components/refresh-list-view.tsx
@@ -1,6 +1,12 @@
 import { FlashList, type FlashListProps } from '@shopify/flash-list';
 import React, { useMemo, useState } from 'react';
-import { ActivityIndicator, RefreshControl, View } from 'react-native';
+import {
+  ActivityIndicator,
+  RefreshControl,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 /**
  * RefreshListView 组件属性接口
@@ -29,6 +35,7 @@ interface RefreshListViewProps<T>
   onLoadMore?: () => void /** 是否正在刷新中 */;
   refreshing?: boolean /** 是否还有更多数据可加载 */;
   hasMore?: boolean;
+  style?: ViewStyle;
 }
 
 /**
@@ -60,6 +67,7 @@ export const RefreshListView = <T,>(props: RefreshListViewProps<T>) => {
     hasMore,
     ...restProps
   } = props; // 控制加载更多状态，防止重复触发
+  const insets = useSafeAreaInsets();
 
   const [isLoadMore, setIsLoadMore] = useState(false); /**
    * 处理滚动到底部的事件，触发加载更多
@@ -75,7 +83,7 @@ export const RefreshListView = <T,>(props: RefreshListViewProps<T>) => {
   };
 
   const footer = useMemo(() => {
-    if (!hasMore) return null;
+    if (!hasMore) return <View style={{ height: insets.bottom }}></View>;
     return (
       <View className="items-center justify-center p-2.5">
         <ActivityIndicator />
diff --git a/src/components/repair-order/filter-button.tsx b/src/components/repair-order/filter-button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c84b056e273ecc92d078446ddc6cf82d1facefa6
--- /dev/null
+++ b/src/components/repair-order/filter-button.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import { Text } from '@/components/ui';
+
+type FilterButtonProps = {
+  label: string;
+  count: number;
+  isActive: boolean;
+  onPress: () => void;
+};
+
+export const FilterButton: React.FC<FilterButtonProps> = ({
+  label,
+  count,
+  isActive,
+  onPress,
+}) => (
+  <TouchableOpacity
+    onPress={onPress}
+    activeOpacity={0.7}
+    className={`mr-2 rounded-full px-3 py-1.5 ${isActive ? 'bg-primary-500' : 'bg-gray-100 dark:bg-neutral-700'}`}
+  >
+    <Text
+      className={`whitespace-nowrap text-sm ${isActive ? 'text-white' : 'text-gray-700 dark:text-gray-200'}`}
+    >
+      {label} {count}
+    </Text>
+  </TouchableOpacity>
+);
diff --git a/src/components/repair-order/index.ts b/src/components/repair-order/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d0765b7779146f2b164a7df4d08bb4e5e6852c99
--- /dev/null
+++ b/src/components/repair-order/index.ts
@@ -0,0 +1,7 @@
+export * from './filter-button';
+export * from './priority-button';
+export * from './progress-item';
+export * from './radio-button';
+export * from './spare-part-item';
+export * from './stat-card';
+export * from './work-order-card';
diff --git a/src/components/repair-order/priority-button.tsx b/src/components/repair-order/priority-button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9b8f77514482b4258925b09b8fee7cfaf04d7e8b
--- /dev/null
+++ b/src/components/repair-order/priority-button.tsx
@@ -0,0 +1,44 @@
+import { TouchableOpacity } from 'react-native';
+
+import { Text } from '../ui';
+import { FontAwesome } from '../ui/icons';
+
+// 优先级按钮组件
+type PriorityButtonProps = {
+  label: string;
+  icon: string;
+  color: string;
+  selected: boolean;
+  onPress: () => void;
+};
+
+export const PriorityButton: React.FC<PriorityButtonProps> = ({
+  label,
+  icon,
+  color,
+  selected,
+  onPress,
+}) => (
+  <TouchableOpacity
+    onPress={onPress}
+    className={`flex-1 items-center justify-center rounded-lg border-2 py-4 ${selected ? `border-[${color}]` : 'border-gray-200 dark:border-neutral-700'}`}
+    style={
+      selected
+        ? { borderColor: color, backgroundColor: `${color}10` }
+        : undefined
+    }
+    activeOpacity={0.7}
+  >
+    <FontAwesome
+      name={icon as any}
+      size={24}
+      color={selected ? color : '#9ca3af'}
+    />
+    <Text
+      className="mt-1 text-sm font-semibold"
+      style={{ color: selected ? color : '#9ca3af' }}
+    >
+      {label}
+    </Text>
+  </TouchableOpacity>
+);
diff --git a/src/components/repair-order/progress-item.tsx b/src/components/repair-order/progress-item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bae4c8e099e32d873d42b6c362b46da7a9d28e5a
--- /dev/null
+++ b/src/components/repair-order/progress-item.tsx
@@ -0,0 +1,57 @@
+import { View } from 'react-native';
+
+import { Text } from '../ui';
+import { FontAwesome } from '../ui/icons';
+
+// 进度项组件
+type ProgressItemProps = {
+  icon: string;
+  iconColor: string;
+  bgColor: string;
+  title: string;
+  time?: string;
+  description?: string;
+  isCompleted: boolean;
+};
+
+export const ProgressItem: React.FC<ProgressItemProps> = ({
+  icon,
+  iconColor,
+  bgColor,
+  title,
+  time,
+  description,
+  isCompleted,
+}) => (
+  <View className="mb-4 flex-row items-start">
+    <View
+      className="size-8 shrink-0 items-center justify-center rounded-full"
+      style={{ backgroundColor: bgColor }}
+    >
+      <FontAwesome
+        name={icon as any}
+        size={12}
+        color={isCompleted ? 'white' : iconColor}
+      />
+    </View>
+    <View className="ml-3 flex-1">
+      <View className="mb-1 flex-row items-center justify-between">
+        <Text
+          className={`text-sm font-semibold ${isCompleted ? 'text-gray-800 dark:text-gray-100' : 'text-gray-400 dark:text-gray-500'}`}
+        >
+          {title}
+        </Text>
+        {time && (
+          <Text className="text-xs text-gray-500 dark:text-gray-400">
+            {time}
+          </Text>
+        )}
+      </View>
+      {description && (
+        <Text className="text-xs text-gray-600 dark:text-gray-400">
+          {description}
+        </Text>
+      )}
+    </View>
+  </View>
+);
diff --git a/src/components/repair-order/radio-button.tsx b/src/components/repair-order/radio-button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5268aff0c29b03b8f8ca8da059dba578d2ce0768
--- /dev/null
+++ b/src/components/repair-order/radio-button.tsx
@@ -0,0 +1,41 @@
+import { TouchableOpacity, View } from 'react-native';
+
+import { Text } from '../ui';
+import { FontAwesome } from '../ui/icons';
+
+// 单选按钮组件
+type RadioButtonProps = {
+  label: string;
+  selected: boolean;
+  onPress: () => void;
+  icon?: string;
+  color?: string;
+};
+
+export const RadioButton: React.FC<RadioButtonProps> = ({
+  label,
+  selected,
+  onPress,
+  icon,
+  color = '#1890ff',
+}) => (
+  <TouchableOpacity
+    onPress={onPress}
+    className={`flex-row items-center rounded-lg border-2 p-3 ${selected ? 'border-primary-500 bg-blue-50 dark:bg-blue-950/30' : 'border-gray-200 dark:border-neutral-700'}`}
+    activeOpacity={0.7}
+  >
+    {icon && (
+      <View
+        className="mr-2 size-6 items-center justify-center"
+        style={{ opacity: selected ? 1 : 0.5 }}
+      >
+        <FontAwesome name={icon as any} size={16} color={color} />
+      </View>
+    )}
+    <Text
+      className={`text-sm ${selected ? 'font-semibold text-gray-800 dark:text-gray-100' : 'text-gray-700 dark:text-gray-400'}`}
+    >
+      {label}
+    </Text>
+  </TouchableOpacity>
+);
diff --git a/src/components/repair-order/spare-part-item.tsx b/src/components/repair-order/spare-part-item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..59122cdc87a22f4fe37d373085a8c4c76006496c
--- /dev/null
+++ b/src/components/repair-order/spare-part-item.tsx
@@ -0,0 +1,33 @@
+import { Text, View } from '../ui';
+
+// 备件项组件
+type SparePartItemProps = {
+  name: string;
+  model: string;
+  quantity: number;
+  price: string;
+};
+
+export const SparePartItem: React.FC<SparePartItemProps> = ({
+  name,
+  model,
+  quantity,
+  price,
+}) => (
+  <View className="mb-3 flex-row items-center justify-between rounded-lg bg-gray-50 p-3 dark:bg-neutral-700/50">
+    <View>
+      <Text className="text-sm font-semibold text-gray-800 dark:text-gray-100">
+        {name}
+      </Text>
+      <Text className="text-xs text-gray-500 dark:text-gray-400">
+        型号：{model}
+      </Text>
+    </View>
+    <View className="items-end">
+      <Text className="text-sm font-semibold text-gray-800 dark:text-gray-100">
+        ×{quantity}
+      </Text>
+      <Text className="text-xs text-gray-500 dark:text-gray-400">{price}</Text>
+    </View>
+  </View>
+);
diff --git a/src/components/repair-order/stat-card.tsx b/src/components/repair-order/stat-card.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5525f3a1bbfc686f847f7f9d52d18ab690b27aa0
--- /dev/null
+++ b/src/components/repair-order/stat-card.tsx
@@ -0,0 +1,33 @@
+import { LinearGradient } from 'expo-linear-gradient';
+import React from 'react';
+
+import { Text, View } from '@/components/ui';
+
+type StatCardProps = {
+  label: string;
+  value: number;
+  gradientColors: [string, string];
+};
+// 统计卡片数据类型
+export type StatCardData = {
+  label: string;
+  value: number;
+  gradientColors: [string, string];
+};
+export const StatCard: React.FC<StatCardProps> = ({
+  label,
+  value,
+  gradientColors,
+}) => (
+  <View className="w-[23%]">
+    <LinearGradient
+      colors={gradientColors}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 1 }}
+      style={{ borderRadius: 12, padding: 12, alignItems: 'center' }}
+    >
+      <Text className="text-2xl font-bold text-white">{value}</Text>
+      <Text className="mt-0.5 text-[10px] text-white opacity-90">{label}</Text>
+    </LinearGradient>
+  </View>
+);
diff --git a/src/components/repair-order/work-order-card.tsx b/src/components/repair-order/work-order-card.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aef429bc488e05c70f7bd3a593239bca6823fe4d
--- /dev/null
+++ b/src/components/repair-order/work-order-card.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import { Text, View } from '@/components/ui';
+import { FontAwesome } from '@/components/ui/icons';
+
+export type WorkOrderStatus =
+  | 'urgent'
+  | 'processing'
+  | 'review'
+  | 'completed'
+  | 'all';
+
+export type WorkOrder = {
+  id: string;
+  status: WorkOrderStatus;
+  statusLabel: string;
+  statusColor: string;
+  title: string;
+  equipmentName: string;
+  description: string;
+  assignee: string;
+  timeAgo: string;
+  deadline?: string;
+};
+
+type WorkOrderCardProps = {
+  order: WorkOrder;
+  onPress: () => void;
+};
+
+export const WorkOrderCard: React.FC<WorkOrderCardProps> = ({
+  order,
+  onPress,
+}) => (
+  <TouchableOpacity
+    onPress={onPress}
+    activeOpacity={0.7}
+    className="mb-3 rounded-xl bg-white p-4 shadow-sm dark:bg-neutral-800"
+  >
+    <View className="mb-3 flex-1">
+      <View className="mb-2 flex-row items-center">
+        <View
+          className="mr-2 rounded px-2 py-1"
+          style={{ backgroundColor: order.statusColor }}
+        >
+          <Text className="text-xs font-semibold text-white">
+            {order.statusLabel}
+          </Text>
+        </View>
+        <Text
+          className="flex-1 text-base font-semibold text-gray-800 dark:text-gray-100"
+          numberOfLines={1}
+        >
+          {order.title}
+        </Text>
+      </View>
+      <Text className="mb-2 text-sm text-gray-600 dark:text-gray-400">
+        设备：{order.equipmentName}
+      </Text>
+      <Text className="text-sm text-gray-500 dark:text-gray-400">
+        故障描述：{order.description}
+      </Text>
+    </View>
+
+    <View className="flex-row items-center justify-between border-t border-gray-100 pt-3 dark:border-neutral-700">
+      <View className="flex-row items-center space-x-4">
+        <View className="flex-row items-center">
+          <FontAwesome name="user" size={12} color="#9ca3af" />
+          <Text className="ml-1 text-xs text-gray-500 dark:text-gray-400">
+            {order.assignee}
+          </Text>
+        </View>
+        <View className="flex-row items-center">
+          <FontAwesome name="clock-o" size={12} color="#9ca3af" />
+          <Text className="ml-1 text-xs text-gray-500 dark:text-gray-400">
+            {order.timeAgo}
+          </Text>
+        </View>
+      </View>
+      {order.deadline && (
+        <Text
+          className="text-sm font-semibold"
+          style={{ color: order.statusColor }}
+        >
+          {order.deadline}
+        </Text>
+      )}
+    </View>
+  </TouchableOpacity>
+);
diff --git a/src/components/ui/icons/font-awesome.tsx b/src/components/ui/icons/font-awesome.tsx
index bafb786861dbcda269a57bc8724057561ff9c444..4a129f52ce1e7fc09edbc3166250a825997444d9 100644
--- a/src/components/ui/icons/font-awesome.tsx
+++ b/src/components/ui/icons/font-awesome.tsx
@@ -24,6 +24,16 @@ export enum GroupEnum {
   Feather = 'Feather',
 }
 
+export enum IconGroupEnum {
+  FontAwesome = 'FontAwesome',
+  Entypo = 'Entypo',
+  FontAwesome5 = 'FontAwesome5',
+  EvilIcons = 'EvilIcons',
+  AntDesign = 'AntDesign',
+  MaterialCommunityIcons = 'MaterialCommunityIcons',
+  Feather = 'Feather',
+}
+
 /**
  * 图标组类型
  * 用于限制可用的图标库类型
@@ -35,7 +45,14 @@ export type IconGroup =
   | GroupEnum.EvilIcons
   | GroupEnum.AntDesign
   | GroupEnum.MaterialCommunityIcons
-  | GroupEnum.Feather;
+  | GroupEnum.Feather
+  | IconGroupEnum.Entypo
+  | IconGroupEnum.FontAwesome5
+  | IconGroupEnum.FontAwesome
+  | IconGroupEnum.EvilIcons
+  | IconGroupEnum.AntDesign
+  | IconGroupEnum.MaterialCommunityIcons
+  | IconGroupEnum.Feather;
 
 /**
  * 各图标库的图标名称类型
@@ -178,19 +195,25 @@ export const FontAwesome: React.FC<FontAwesomeIconProps> = ({
   // 其次根据指定的组类型选择图标库
   switch (group) {
     case GroupEnum.Entypo:
+    case IconGroupEnum.Entypo:
       return <Entypo name={name as EntypoIconNames} {...iconProps} />;
     case GroupEnum.FontAwesome5:
+    case IconGroupEnum.FontAwesome5:
       return (
         <FontAwesome5 name={name as FontAwesome5IconNames} {...iconProps} />
       );
     case GroupEnum.EvilIcons:
+    case IconGroupEnum.EvilIcons:
       return <EvilIcons name={name as EvilIconsNames} {...iconProps} />;
     case GroupEnum.AntDesign:
+    case IconGroupEnum.AntDesign:
       return <AntDesign name={name as AntDesignIconNames} {...iconProps} />;
-    case GroupEnum.Feather:
+    case GroupEnum.AntDesign:
+    case IconGroupEnum.Feather:
       return <Feather name={name as FeatherIconNames} {...iconProps} />;
 
     case GroupEnum.MaterialCommunityIcons:
+    case IconGroupEnum.MaterialCommunityIcons:
       return (
         <MaterialCommunityIcons
           name={name as MaterialCommunityIconNames}
diff --git a/src/components/ui/image-gallery.tsx b/src/components/ui/image-gallery.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b62243d397ee9edfadc5f712c88ac89ae657ce80
--- /dev/null
+++ b/src/components/ui/image-gallery.tsx
@@ -0,0 +1,113 @@
+import { Env } from '@env';
+import React, { useState } from 'react';
+import {
+  Dimensions,
+  Image,
+  Modal,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import { FontAwesome } from '@/components/ui/icons';
+
+export type ImageGalleryProps = {
+  imageIds: string[];
+};
+
+const { width: screenWidth } = Dimensions.get('window');
+// 屏幕宽度 - 外层padding(16*2) - 卡片padding(20*2) - 图片间距(12*2)
+const imageSize = (screenWidth - 32 - 40 - 24) / 3;
+
+export const ImageGallery: React.FC<ImageGalleryProps> = ({ imageIds }) => {
+  const [modalVisible, setModalVisible] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const openImage = (index: number) => {
+    setSelectedIndex(index);
+    setModalVisible(true);
+  };
+
+  if (!imageIds || imageIds.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <View className="flex-row flex-wrap">
+        {imageIds.map((imageId, index) => (
+          <TouchableOpacity
+            key={imageId}
+            onPress={() => openImage(index)}
+            activeOpacity={0.8}
+            style={{
+              marginRight: (index + 1) % 3 === 0 ? 0 : 12,
+              marginBottom: 12,
+            }}
+          >
+            <Image
+              source={{ uri: `${Env.API_URL}/api/File/Img/${imageId}` }}
+              style={{
+                width: imageSize,
+                height: imageSize,
+                borderRadius: 8,
+              }}
+              resizeMode="cover"
+            />
+          </TouchableOpacity>
+        ))}
+      </View>
+
+      {/* 图片预览 Modal */}
+      <Modal
+        visible={modalVisible}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <View className="flex-1 items-center justify-center bg-black/90">
+          <TouchableOpacity
+            className="absolute right-4 top-12 z-10 size-10 items-center justify-center rounded-full bg-white/20"
+            onPress={() => setModalVisible(false)}
+          >
+            <FontAwesome name="times" size={20} color="white" />
+          </TouchableOpacity>
+
+          <ScrollView
+            horizontal
+            pagingEnabled
+            showsHorizontalScrollIndicator={false}
+            contentOffset={{ x: selectedIndex * screenWidth, y: 0 }}
+          >
+            {imageIds.map((imageId) => (
+              <View
+                key={imageId}
+                style={{ width: screenWidth }}
+                className="items-center justify-center"
+              >
+                <Image
+                  source={{ uri: `${Env.API_URL}/api/File/Img/${imageId}` }}
+                  style={{
+                    width: screenWidth - 32,
+                    height: screenWidth - 32,
+                    borderRadius: 12,
+                  }}
+                  resizeMode="contain"
+                />
+              </View>
+            ))}
+          </ScrollView>
+
+          <View className="absolute bottom-12 flex-row">
+            {imageIds.map((_, index) => (
+              <View
+                key={index}
+                className={`mx-1 size-2 rounded-full ${index === selectedIndex ? 'bg-white' : 'bg-white/40'}`}
+              />
+            ))}
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+};
diff --git a/src/components/ui/index.tsx b/src/components/ui/index.tsx
index b8b4b9a953d7f40db9a1f2cdc1ccdddd0103074f..cf759a568fbb63571fd46cc4d9114321dc1559a6 100644
--- a/src/components/ui/index.tsx
+++ b/src/components/ui/index.tsx
@@ -6,7 +6,9 @@ export * from './checkbox';
 export { default as colors } from './colors';
 export * from './date-picker';
 export * from './focus-aware-status-bar';
+export * from './icons/font-awesome';
 export * from './image';
+export * from './image-gallery';
 export * from './input';
 export * from './input-date';
 export * from './input-with-icon';
diff --git a/src/components/ui/nav-header.tsx b/src/components/ui/nav-header.tsx
index 99e5a21070f4813829412c661ded8eac334a1724..a2275f6633fc7c4c96a03ad12e7c92c96747b891 100644
--- a/src/components/ui/nav-header.tsx
+++ b/src/components/ui/nav-header.tsx
@@ -1,10 +1,14 @@
-import { Stack, usePathname, useRouter } from 'expo-router';
+import {
+  Stack,
+  // usePathname, 
+  useRouter
+} from 'expo-router';
 import React from 'react';
 import { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native';
 
+import { isWeb } from '@/lib';
 import { useAppColorScheme } from '@/lib/hooks';
-import type { TxKeyPath } from '@/lib/i18n';
-import { translate } from '@/lib/i18n';
+import { translate, type TxKeyPath } from '@/lib/i18n';
 
 import { FontAwesome, GroupEnum } from './icons';
 
@@ -25,7 +29,7 @@ export const NavHeader = ({
   tx,
 }: NavHeaderProps) => {
   const router = useRouter();
-  const pathName = usePathname();
+  // const pathName = usePathname();
   const { isDark } = useAppColorScheme();
 
   return (
@@ -65,7 +69,7 @@ export const NavHeader = ({
               leftShown && (
                 <TouchableOpacity
                   onPress={() => router.back()}
-                  className={pathName == '/chat' ? 'ml-4' : ''}
+                  className={isWeb ? 'ml-4' : ''}
                 >
                   <FontAwesome
                     name="left"
diff --git a/src/components/ui/qr-code-scanner.tsx b/src/components/ui/qr-code-scanner.tsx
index 8e0399feb231fb8319184e088bc0c05b1988158d..4541c30675c869757fb5244d0393f1b5b255ab9d 100644
--- a/src/components/ui/qr-code-scanner.tsx
+++ b/src/components/ui/qr-code-scanner.tsx
@@ -16,19 +16,15 @@ export function QRCodeScanner({ onScan, onCancel }: Props) {
 
   const handleBarCodeScanned = React.useCallback(
     ({ data }: BarcodeScanningResult) => {
-      console.log('scanning:', scanning);
-      console.log('scanningValue:', scanningValue.current);
       if (!scanningValue.current) return;
       scanningValue.current = false;
-
       setScanning(false);
       onScan(data);
     },
-    [scanning, onScan]
+    [onScan]
   );
 
   if (!permission) {
-    // 相机权限正在加载
     return (
       <SafeAreaView className="flex-1 bg-black">
         <View className="flex-1 items-center justify-center">
@@ -39,7 +35,6 @@ export function QRCodeScanner({ onScan, onCancel }: Props) {
   }
 
   if (!permission.granted) {
-    // 没有相机权限
     return (
       <SafeAreaView className="flex-1 bg-white">
         <View className="flex-1 items-center justify-center p-4">
@@ -63,7 +58,8 @@ export function QRCodeScanner({ onScan, onCancel }: Props) {
   }
 
   return (
-    <SafeAreaView className="flex-1 bg-black">
+    <SafeAreaView className="flex-1 bg-black relative">
+      {/* 摄像头全屏 */}
       <CameraView
         style={StyleSheet.absoluteFillObject}
         facing="back"
@@ -71,39 +67,39 @@ export function QRCodeScanner({ onScan, onCancel }: Props) {
         barcodeScannerSettings={{
           barcodeTypes: ['qr'],
         }}
-      >
-        {/* 扫描框覆盖层 */}
-        <View className="flex-1">
-          {/* 顶部区域 */}
-          <View className="flex-1 bg-black/50" />
+      />
 
-          {/* 中间扫描区域 */}
-          <View className="flex-row">
-            <View className="flex-1 bg-black/50" />
-            <View className="relative size-64">
-              {/* 扫描框四个角 */}
-              <View className="absolute left-0 top-0 size-8 border-l-4 border-t-4 border-white" />
-              <View className="absolute right-0 top-0 size-8 border-r-4 border-t-4 border-white" />
-              <View className="absolute bottom-0 left-0 size-8 border-b-4 border-l-4 border-white" />
-              <View className="absolute bottom-0 right-0 size-8 border-b-4 border-r-4 border-white" />
-            </View>
-            <View className="flex-1 bg-black/50" />
-          </View>
+      {/* 覆盖层 UI —— 注意：这是 CameraView 的兄弟，不是子元素 */}
+      <View className="absolute inset-0 flex-1">
+        {/* 顶部遮罩 */}
+        <View className="flex-1 bg-black/50" />
 
-          {/* 底部区域 */}
-          <View className="flex-1 items-center justify-start bg-black/50 pt-8">
-            <Text className="mb-4 text-lg text-white">
-              将二维码放入扫描框内
-            </Text>
-            <TouchableOpacity
-              onPress={onCancel}
-              className="rounded-lg bg-white/20 px-6 py-3"
-            >
-              <Text className="text-lg text-white">取消</Text>
-            </TouchableOpacity>
+        {/* 中间扫描区域 */}
+        <View className="flex-row">
+          <View className="flex-1 bg-black/50" />
+          <View className="relative size-64">
+            {/* 扫描框四个角 */}
+            <View className="absolute left-0 top-0 size-8 border-l-4 border-t-4 border-white" />
+            <View className="absolute right-0 top-0 size-8 border-r-4 border-t-4 border-white" />
+            <View className="absolute bottom-0 left-0 size-8 border-b-4 border-l-4 border-white" />
+            <View className="absolute bottom-0 right-0 size-8 border-b-4 border-r-4 border-white" />
           </View>
+          <View className="flex-1 bg-black/50" />
+        </View>
+
+        {/* 底部区域 */}
+        <View className="flex-1 items-center justify-start bg-black/50 pt-8">
+          <Text className="mb-4 text-lg text-white">
+            将二维码放入扫描框内
+          </Text>
+          <TouchableOpacity
+            onPress={onCancel}
+            className="rounded-lg bg-white/20 px-6 py-3"
+          >
+            <Text className="text-lg text-white">取消</Text>
+          </TouchableOpacity>
         </View>
-      </CameraView>
+      </View>
     </SafeAreaView>
   );
-}
+}
\ No newline at end of file
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 1d6391a38da4159b6f16d49628018797d8922a47..cca7bfd274db40c116a77ac388d4a9f424c58b43 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -243,3 +243,51 @@ export function compareVersions(
 
   return 0; // 完全相等
 }
+
+// 根据文件扩展名获取图标信息
+export const getFileIconInfo = (fileExt?: string) => {
+  const ext = fileExt?.toLowerCase()?.replace('.', '') || '';
+  switch (ext) {
+    case 'pdf':
+      return { icon: 'file-pdf-o', iconColor: '#ef4444', iconBgColor: '#fef2f2' };
+    case 'doc':
+    case 'docx':
+      return { icon: 'file-word-o', iconColor: '#3b82f6', iconBgColor: '#eff6ff' };
+    case 'xls':
+    case 'xlsx':
+      return { icon: 'file-excel-o', iconColor: '#22c55e', iconBgColor: '#f0fdf4' };
+    case 'ppt':
+    case 'pptx':
+      return { icon: 'file-powerpoint-o', iconColor: '#f97316', iconBgColor: '#fff7ed' };
+    case 'jpg':
+    case 'jpeg':
+    case 'png':
+    case 'gif':
+      return { icon: 'file-image-o', iconColor: '#8b5cf6', iconBgColor: '#f5f3ff' };
+    case 'zip':
+    case 'rar':
+    case '7z':
+      return { icon: 'file-archive-o', iconColor: '#eab308', iconBgColor: '#fefce8' };
+    case 'txt':
+      return { icon: 'file-text-o', iconColor: '#6b7280', iconBgColor: '#f9fafb' };
+    default:
+      return { icon: 'file-o', iconColor: '#6b7280', iconBgColor: '#f9fafb' };
+  }
+};
+
+// 格式化文件大小
+export const formatFileSize = (size?: string) => {
+  if (!size) return '';
+  const bytes = parseInt(size, 10);
+  if (isNaN(bytes)) return size;
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+// 格式化日期（简短格式）
+export const formatDateShort = (date?: Date) => {
+  if (!date) return '';
+  const d = new Date(date);
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+};
diff --git a/src/types/attachment.ts b/src/types/attachment.ts
new file mode 100644
index 0000000000000000000000000000000000000000..32066e49f0c70d5b4cb33babe0e8ee94c3bfde23
--- /dev/null
+++ b/src/types/attachment.ts
@@ -0,0 +1,24 @@
+export type Attachment = {
+  MasterId?: string;
+  OriginalFileName?: string;
+  FileName?: string;
+  FileExt?: string;
+  Path?: string;
+  Length?: string;
+  ImageType?: string;
+  IsDeleted?: boolean;
+  IsActive?: boolean;
+  ImportDataId?: null;
+  ModificationNum?: number;
+  Tag?: number;
+  GroupId?: string;
+  CompanyId?: string;
+  AuditStatus?: string;
+  CurrentNode?: null;
+  CreatedBy?: string;
+  CreatedTime?: Date;
+  UpdateBy?: null;
+  UpdateTime?: null;
+  ModuleCode?: null;
+  ID: string;
+};
diff --git a/src/types/equipment.ts b/src/types/equipment.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42af91134ecce8981e39f6f6af6b8741cad3affa
--- /dev/null
+++ b/src/types/equipment.ts
@@ -0,0 +1,59 @@
+import { type Attachment } from './attachment';
+
+export type EquipmentStatus = 'running' | 'repairing' | 'fault';
+
+export type Equipment = {
+  ImageIds?: string[];
+  Attachments?: Attachment[];
+  RepairCount?: number;
+  CurrentMonthRepairCount?: number;
+  MaintenanceCount?: number;
+  MaintenanceOrder?: string;
+  RepairOrder?: string;
+  UseManagerName?: string;
+  StartDate1?: string;
+  DeptName?: string;
+  Runtime?: string;
+  Health?: number;
+  StatusText?: string;
+  MachineTypeId?: string;
+  MachineNo?: string;
+  MachineName?: string;
+  Status: EquipmentStatus;
+  UseDeptId?: string;
+  UseManeageId?: string;
+  RepairManeageId?: string;
+  BrandModel?: string;
+  Manufacturer?: string;
+  Supplier?: string;
+  Location?: string;
+  AnnualInspection?: boolean;
+  AnnualInspectionDate?: Date;
+  CommissioningDate?: Date;
+  StopDate?: Date;
+  ImageId?: string;
+  Remark?: string;
+  IsDeleted?: boolean;
+  IsActive?: boolean;
+  ImportDataId?: string;
+  ModificationNum?: number;
+  Tag?: number;
+  GroupId?: string;
+  CompanyId?: string;
+  AuditStatus?: string;
+  CurrentNode?: string;
+  CreatedBy?: string;
+  CreatedTime?: Date;
+  UpdateBy?: string;
+  UpdateTime?: Date;
+  ModuleCode?: string;
+  MachineType?: string;
+  ID: string;
+  RepairStats: EquipmentRepairStats[];
+};
+export type EquipmentRepairStats = {
+  value: string;
+  label: string;
+  bgColor: string;
+  textColor: string;
+};
diff --git a/src/types/index.ts b/src/types/index.ts
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..adf2d373022d7c40ef4553814edb81e6f7e3ca5f 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -0,0 +1,3 @@
+export * from './attachment';
+export * from './equipment';
+export * from './lov';
diff --git a/src/types/lov.ts b/src/types/lov.ts
new file mode 100644
index 0000000000000000000000000000000000000000..492ef7be1c9d72e41338eb366c771b590b281137
--- /dev/null
+++ b/src/types/lov.ts
@@ -0,0 +1,4 @@
+export type SmLov = {
+  value: string;
+  label: string;
+};