From f0a5d2e96ae8a83c7578da1fc09d2ca06020632a Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Tue, 13 May 2025 23:59:53 +0800 Subject: [PATCH 01/20] =?UTF-8?q?feat(=E9=80=9A=E7=9F=A5):=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E9=80=9A=E7=9F=A5=E9=A1=B5=E9=9D=A2=E5=8F=8A=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加通知列表页面，支持按类型筛选和查看详情 - 实现通知详情页面，展示通知内容及相关信息 - 在主页和个人资料页添加通知按钮，支持跳转到通知页面 --- src/app/(app)/index.tsx | 2 +- src/app/(app)/profile.tsx | 10 +- src/app/notification/[id].tsx | 338 +++++++++++++++++++++++++++++++++ src/app/notification/index.tsx | 263 +++++++++++++++++++++++++ 4 files changed, 605 insertions(+), 8 deletions(-) create mode 100644 src/app/notification/[id].tsx create mode 100644 src/app/notification/index.tsx diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx index bee34c7..ac9d980 100644 --- a/src/app/(app)/index.tsx +++ b/src/app/(app)/index.tsx @@ -88,7 +88,7 @@ const Home: React.FC = () => { right={ navigation.navigate('Notifications')} + onPress={() => router.push('/notification')} > diff --git a/src/app/(app)/profile.tsx b/src/app/(app)/profile.tsx index de2d2cc..9ab8bde 100644 --- a/src/app/(app)/profile.tsx +++ b/src/app/(app)/profile.tsx @@ -1,6 +1,5 @@ import { Env } from '@env'; -import { Link } from 'expo-router'; -import { useRouter } from 'expo-router'; +import { Link, useRouter } from 'expo-router'; import { Image, SafeAreaView, @@ -90,9 +89,7 @@ export default function Settings() { title="测试设备信息" subtitle="修改个人信息和联系方式" // text="profile.about" - onPress={() => { - router.push('/test/device'); - }} + onPress={() => router.push('/test/device')} /> {}} - // text="profile.about" + onPress={() => router.push('/notification')} isLast={true} /> diff --git a/src/app/notification/[id].tsx b/src/app/notification/[id].tsx new file mode 100644 index 0000000..7a365f9 --- /dev/null +++ b/src/app/notification/[id].tsx @@ -0,0 +1,338 @@ +import { useLocalSearchParams } from 'expo-router'; +import React, { useEffect, useState } from 'react'; +import { StyleSheet, TouchableOpacity } from 'react-native'; + +import { NavHeader, ScrollView, Text, View } from '@/components/ui'; +import { FontAwesome, GroupEnum } from '@/components/ui/icons'; + +interface RelatedNotification { + id: string; + title: string; + message: string; + time: string; + icon: string; + iconBgColor: string; +} + +const NotificationDetail = () => { + // const notificationType1 = route.params?.type || 'warning'; + const local = useLocalSearchParams<{ type: string }>(); + const notificationType = local.type; + + // 通知详情状态 + const [notificationInfo, setNotificationInfo] = useState({ + title: '库存预警', + time: '今天 10:30', + date: '2023年11月29日', + content: + 'PCB板库存低于安全库存，当前库存数量为25个，安全库存为50个，请及时补货。\n\n低库存可能导致生产计划延误，建议在3天内完成补货。', + icon: 'exclamation-triangle', + iconBgColor: '#ef4444', // red-500 + badgeBg: 'bg-red-100', + badgeText: 'text-red-800', + badgeContent: '预警信息', + actionText: '查看物料详情', + relatedInfo: [ + { label: '物料编号', value: 'PCB-2023-1105' }, + { label: '当前库存', value: '25个', isAlert: true }, + { label: '安全库存', value: '50个' }, + { label: '最近一次入库', value: '2023-11-15' }, + ], + }); + + // 相关通知 + const relatedNotifications: RelatedNotification[] = [ + { + id: '1', + title: '库存预警', + message: '电阻R0805库存不足，请及时补货。', + time: '11-20', + icon: 'exclamation-circle', + iconBgColor: '#eab308', // yellow-500 + }, + { + id: '2', + title: '物料入库', + message: 'PCB板已完成入库，入库数量100个。', + time: '11-15', + icon: 'truck', + iconBgColor: '#3b82f6', // blue-500 + }, + ]; + + // 根据通知类型设置样式和内容 + useEffect(() => { + let updatedInfo = { ...notificationInfo }; + + switch (notificationType) { + case 'warning': + updatedInfo = { + ...updatedInfo, + title: '库存预警', + icon: 'exclamation-triangle', + iconBgColor: '#ef4444', // red-500 + badgeBg: 'bg-red-100', + badgeText: 'text-red-800', + badgeContent: '预警信息', + actionText: '查看物料详情', + }; + break; + case 'task': + updatedInfo = { + ...updatedInfo, + title: '任务分配', + content: + '您有一个新的生产任务 #PT20231129-02 需要处理。请在今天下午3点前完成相关准备工作。', + icon: 'tasks', + iconBgColor: '#22c55e', // green-500 + badgeBg: 'bg-green-100', + badgeText: 'text-green-800', + badgeContent: '任务提醒', + actionText: '处理任务', + }; + break; + case 'order': + updatedInfo = { + ...updatedInfo, + title: '订单完成', + content: + '订单 #2023112801 已完成生产，等待发货。请安排物流部门进行后续处理。', + icon: 'clipboard-check', + iconBgColor: '#3b82f6', // blue-500 + badgeBg: 'bg-blue-100', + badgeText: 'text-blue-800', + badgeContent: '订单通知', + actionText: '查看订单', + }; + break; + case 'system': + updatedInfo = { + ...updatedInfo, + title: '系统维护', + content: + '系统将于今晚22:00-23:00进行例行维护，请提前做好准备。维护期间系统将暂停服务。', + icon: 'bell', + iconBgColor: '#eab308', // yellow-500 + badgeBg: 'bg-yellow-100', + badgeText: 'text-yellow-800', + badgeContent: '系统通知', + actionText: '了解详情', + }; + break; + case 'report': + updatedInfo = { + ...updatedInfo, + title: '数据报表', + content: + '11月生产效率分析报表已生成，请查看。本月生产效率较上月提升5.2%。', + icon: 'chart-line', + iconBgColor: '#a855f7', // purple-500 + badgeBg: 'bg-purple-100', + badgeText: 'text-purple-800', + badgeContent: '数据报表', + actionText: '查看报表', + }; + break; + case 'team': + updatedInfo = { + ...updatedInfo, + title: '新成员加入', + content: '李工程师已加入您的生产团队，请及时安排工作。', + icon: 'user-plus', + iconBgColor: '#6366f1', // indigo-500 + badgeBg: 'bg-indigo-100', + badgeText: 'text-indigo-800', + badgeContent: '团队通知', + actionText: '查看团队', + }; + break; + case 'update': + updatedInfo = { + ...updatedInfo, + title: '系统更新', + content: + '系统已更新至v1.0.5版本，新增多项功能和优化。主要更新内容包括：生产计划优化、库存预警阈值自定义、报表导出功能等。', + icon: 'cogs', + iconBgColor: '#f97316', // orange-500 + badgeBg: 'bg-orange-100', + badgeText: 'text-orange-800', + badgeContent: '系统更新', + actionText: '查看更新', + }; + break; + } + + setNotificationInfo(updatedInfo); + }, [notificationType]); + + // 处理主要操作按钮点击 + const handlePrimaryAction = () => { + switch (notificationType) { + case 'warning': + // navigation.navigate('MaterialDetail', { id: 'PCB-2023-1105' }); + break; + case 'order': + // navigation.navigate('Orders'); + break; + case 'task': + // navigation.navigate('Production'); + break; + case 'report': + // navigation.navigate('Analytics'); + break; + default: + // navigation.navigate('Notifications'); + } + }; + + // 处理标记为已读 + const handleMarkAsRead = () => { + // 实际应用中这里会更新通知状态 + console.log('标记为已读'); + }; + + return ( + + + + + + + + + + } + /> + + + {/* 通知类型标签 */} + + + {notificationInfo.badgeContent} + + + + {/* 通知详情卡片 */} + + + + + + + + + {notificationInfo.title} + + + {notificationInfo.time} + + + + {notificationInfo.date} + + + + + + 详细内容 + + {notificationInfo.content} + + + + {/* 相关信息 */} + + 相关信息 + {notificationInfo.relatedInfo.map((item, index) => ( + + + {item.label} + + {item.value} + + + + ))} + + + + {/* 操作按钮 */} + + + + {notificationInfo.actionText} + + + + 标记为已读 + + + + {/* 相关通知 */} + 相关通知 + + {relatedNotifications.map((item, index) => ( + + + + + + + + {item.title} + {item.time} + + + {item.message} + + + + + ))} + + + + ); +}; + +const styles = StyleSheet.create({ + headerButton: { + marginLeft: 16, + }, +}); +export default NotificationDetail; diff --git a/src/app/notification/index.tsx b/src/app/notification/index.tsx new file mode 100644 index 0000000..4cc6599 --- /dev/null +++ b/src/app/notification/index.tsx @@ -0,0 +1,263 @@ +import { useRouter } from 'expo-router'; +import React, { useState } from 'react'; +import { StyleSheet, TouchableOpacity } from 'react-native'; + +import { SegmentedControl, type SegmentedControlOption } from '@/components'; +import { NavHeader, ScrollView, Text, View } from '@/components/ui'; +import { FontAwesome, GroupEnum } from '@/components/ui/icons'; + +// type TabType = 0 | 1 | 2 | 3; + +interface NotificationItem { + id: string; + type: number; + title: string; + message: string; + time: string; + icon: string; + iconBgColor: string; + isUnread: boolean; + date: 'today' | 'yesterday' | 'earlier'; +} + +const Notification = () => { + const [selectedTabIndex, setSelectedTabIndex] = useState(0); + const router = useRouter(); + + // 模拟通知数据 + const notifications: NotificationItem[] = [ + { + id: '1', + type: 0, + title: '库存预警', + message: 'PCB板库存低于安全库存，请及时补货。', + time: '10:30', + icon: 'exclamation-triangle', + iconBgColor: '#ef4444', // red-500 + isUnread: true, + date: 'today', + }, + { + id: '2', + type: 1, + title: '订单完成', + message: '订单 #2023112801 已完成生产，等待发货。', + time: '09:45', + icon: 'clipboard-check', + iconBgColor: '#3b82f6', // blue-500 + isUnread: true, + date: 'today', + }, + { + id: '3', + type: 1, + title: '任务分配', + message: '您有一个新的生产任务 #PT20231129-02 需要处理。', + time: '08:20', + icon: 'tasks', + iconBgColor: '#22c55e', // green-500 + isUnread: true, + date: 'today', + }, + { + id: '4', + type: 2, + title: '数据报表', + message: '11月生产效率分析报表已生成，请查看。', + time: '昨天 16:30', + icon: 'chart-line', + iconBgColor: '#a855f7', // purple-500 + isUnread: false, + date: 'yesterday', + }, + { + id: '5', + type: 2, + title: '系统维护', + message: '系统将于今晚22:00-23:00进行例行维护，请提前做好准备。', + time: '昨天 14:15', + icon: 'bell', + iconBgColor: '#eab308', // yellow-500 + isUnread: false, + date: 'yesterday', + }, + { + id: '6', + type: 2, + title: '新成员加入', + message: '李工程师已加入您的生产团队，请及时安排工作。', + time: '11-27', + icon: 'user-plus', + iconBgColor: '#6366f1', // indigo-500 + isUnread: false, + date: 'earlier', + }, + { + id: '7', + type: 2, + title: '系统更新', + message: '系统已更新至v1.0.5版本，新增多项功能和优化，点击查看详情。', + time: '11-25', + icon: 'cogs', + iconBgColor: '#f97316', // orange-500 + isUnread: false, + date: 'earlier', + }, + ]; + + // 根据选中的选项卡筛选通知 + const filteredNotifications = + selectedTabIndex === 0 + ? notifications + : notifications.filter((item) => item.type === selectedTabIndex); + + // 按日期分组通知 + const todayNotifications = filteredNotifications.filter( + (item) => item.date === 'today' + ); + const yesterdayNotifications = filteredNotifications.filter( + (item) => item.date === 'yesterday' + ); + const earlierNotifications = filteredNotifications.filter( + (item) => item.date === 'earlier' + ); + + // 处理查看详情 + const handleViewDetail = (id: string) => { + router.push(`/notification/${id}`); + }; + // 处理忽略通知 + const handleIgnore = (id: string) => { + // 实际应用中这里会更新状态 + console.log('忽略通知:', id); + }; + + // 处理清除所有通知 + // const handleClearAll = () => { + // // 实际应用中这里会清除所有通知 + // console.log('清除所有通知'); + // }; + + // 渲染通知项 + const renderNotificationItem = (item: NotificationItem) => ( + handleViewDetail(item.id)} + > + + + + + + + {item.isUnread && ( + + )} + + + + {item.title} + {item.time} + + {item.message} + + {/* 查看详情 */} + handleIgnore(item.id)} + > + 忽略 + + + + + + + ); + const tabOptions: SegmentedControlOption[] = [ + { key: 'production-plan', label: '全部' }, + { key: 'production-task', label: '系统通知' }, + { key: 'process-management', label: '任务提醒' }, + { key: 'process-management1', label: '预警信息' }, + ]; + return ( + + + + + + + } + /> + + + + + {/* 今日通知 */} + {todayNotifications.length > 0 && ( + <> + 今日通知 + + {todayNotifications.map(renderNotificationItem)} + + + )} + + {/* 昨日通知 */} + {yesterdayNotifications.length > 0 && ( + <> + 昨日通知 + + {yesterdayNotifications.map(renderNotificationItem)} + + + )} + + {/* 更早通知 */} + {earlierNotifications.length > 0 && ( + <> + 更早 + + {earlierNotifications.map(renderNotificationItem)} + + + )} + + {/* 清除按钮 */} + {/* + + 清除所有通知 + + */} + + + ); +}; +const styles = StyleSheet.create({ + headerButton: { + marginLeft: 16, + }, +}); +export default Notification; -- Gitee From 04545c9064e6df244bd8f6e4916dad92bb3c4334 Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Wed, 14 May 2025 18:27:06 +0800 Subject: [PATCH 02/20] =?UTF-8?q?refactor(ui):=20=E5=B0=86FontAwesome?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E5=AF=BC=E5=85=A5=E7=BB=9F=E4=B8=80=E5=88=B0?= =?UTF-8?q?ui/icons=E6=A8=A1=E5=9D=97=E5=B9=B6=E4=BC=98=E5=8C=96=E9=A6=96?= =?UTF-8?q?=E9=A1=B5=E6=AC=A2=E8=BF=8E=E4=BF=A1=E6=81=AF=E6=B8=B2=E6=9F=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(app)/index.tsx | 14 ++++++++------ src/app/(app)/inventory.tsx | 2 +- src/app/(app)/order.tsx | 2 +- src/app/(app)/production.tsx | 2 +- 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx index ac9d980..d3e7f0e 100644 --- a/src/app/(app)/index.tsx +++ b/src/app/(app)/index.tsx @@ -100,12 +100,14 @@ const Home: React.FC = () => { {/* 欢迎信息 */} - - 你好，{userInfo?.UserName} - - 今天是{userInfo?.WeekName}，祝您工作顺利 - - + {userInfo?.WeekName && ( + + 你好，{userInfo?.UserName} + + 今天是{userInfo?.WeekName}，祝您工作顺利 + + + )} {/* 数据概览 */} diff --git a/src/app/(app)/inventory.tsx b/src/app/(app)/inventory.tsx index 5b4576e..b786cd0 100644 --- a/src/app/(app)/inventory.tsx +++ b/src/app/(app)/inventory.tsx @@ -1,4 +1,3 @@ -import { FontAwesome } from '@expo/vector-icons'; import React, { useState } from 'react'; import { StatusBar, @@ -11,6 +10,7 @@ import { import { SegmentedControl, type SegmentedControlOption } from '@/components'; import { NavHeader, SafeAreaView, ScrollView } from '@/components/ui'; +import { FontAwesome } from '@/components/ui/icons'; // 状态徽章组件 // type StatusBadgeProps = { diff --git a/src/app/(app)/order.tsx b/src/app/(app)/order.tsx index 9deb625..057a785 100644 --- a/src/app/(app)/order.tsx +++ b/src/app/(app)/order.tsx @@ -1,4 +1,3 @@ -import { FontAwesome } from '@expo/vector-icons'; import React, { useState } from 'react'; import { StatusBar, @@ -11,6 +10,7 @@ import { import { SegmentedControl, type SegmentedControlOption } from '@/components'; import { NavHeader, SafeAreaView, ScrollView } from '@/components/ui'; +import { FontAwesome } from '@/components/ui/icons'; // 状态徽章组件 type StatusBadgeProps = { diff --git a/src/app/(app)/production.tsx b/src/app/(app)/production.tsx index fcba93d..ed7f84e 100644 --- a/src/app/(app)/production.tsx +++ b/src/app/(app)/production.tsx @@ -1,4 +1,3 @@ -import { FontAwesome } from '@expo/vector-icons'; import React, { useState } from 'react'; import { StatusBar, @@ -10,6 +9,7 @@ import { import { SegmentedControl, type SegmentedControlOption } from '@/components'; import { NavHeader, SafeAreaView, ScrollView } from '@/components/ui'; +import { FontAwesome } from '@/components/ui/icons'; import ReportDateSelector from '../report-date-selector'; -- Gitee From 35235d7d9a7b49b9fe14e21ff17d6d61cc39e93a Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Thu, 15 May 2025 11:52:43 +0800 Subject: [PATCH 03/20] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=AE=A2?= =?UTF-8?q?=E5=8D=95=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E5=B9=B6=E5=AE=9E?= =?UTF-8?q?=E7=8E=B0=E8=AE=A2=E5=8D=95=E8=B7=B3=E8=BD=AC=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 在订单列表页面中，使用 `useRouter` 实现点击订单后跳转到订单详情页面的功能。同时，新增了订单详情页面，展示订单的基本信息、产品明细、生产进度、物流信息和付款信息等。 --- src/app/(app)/order.tsx | 7 +- src/app/order/[id].tsx | 424 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 427 insertions(+), 4 deletions(-) create mode 100644 src/app/order/[id].tsx diff --git a/src/app/(app)/order.tsx b/src/app/(app)/order.tsx index 057a785..c11fdcd 100644 --- a/src/app/(app)/order.tsx +++ b/src/app/(app)/order.tsx @@ -1,3 +1,4 @@ +import { useRouter } from 'expo-router'; import React, { useState } from 'react'; import { StatusBar, @@ -80,7 +81,7 @@ const OrderItem: React.FC = ({ ); const Orders: React.FC = () => { - // const navigation = useNavigation(); + const router = useRouter(); // 分段控制器选项 const tabOptions: SegmentedControlOption[] = [ @@ -246,9 +247,7 @@ const Orders: React.FC = () => { status={item.status} statusColor={item.statusColor} statusBgColor={item.statusBgColor} - onViewDetail={() => - console.log(`查看订单 ${item.orderNumber} 详情`) - } + onViewDetail={() => router.push(`/order/${item.id}`)} /> ))} diff --git a/src/app/order/[id].tsx b/src/app/order/[id].tsx new file mode 100644 index 0000000..beb880d --- /dev/null +++ b/src/app/order/[id].tsx @@ -0,0 +1,424 @@ +import { FontAwesome } from '@expo/vector-icons'; +import React, { useState } from 'react'; +import { + Image, + SafeAreaView, + ScrollView, + Text, + TouchableOpacity, + View, +} from 'react-native'; + +import { NavHeader } from '@/components/ui'; + +const OrderDetail = () => { + const [activeTab, setActiveTab] = useState('product-list'); + + // 切换选项卡 + const handleTabChange = (tabId: string) => { + setActiveTab(tabId); + }; + + return ( + + + + + + + + + + } + /> + + + {/* 订单基本信息 */} + + + 订单 #2023112702 + + + 生产中 + + + + + + + 客户 + 北京智能科技有限公司 + + + 联系人 + 张经理 + + + 联系电话 + 138****5678 + + + 订单金额 + ¥95,200 + + + 订单日期 + 2023-11-27 + + + 交付日期 + 2023-12-10 + + + + + 收货地址 + 北京市海淀区中关村科技园区8号楼5层 + + + + {/* 选项卡 - 分段控制器样式 */} + + handleTabChange('product-list')} + > + + 产品明细 + + + handleTabChange('production-progress')} + > + + 生产进度 + + + handleTabChange('logistics-info')} + > + + 物流信息 + + + handleTabChange('payment-info')} + > + + 付款信息 + + + + + {/* 选项卡内容区域 */} + {/* 产品明细 */} + {activeTab === 'product-list' && ( + + {/* 产品项目1 */} + + + + + + + 智能手表 Pro + + 型号：SW-2023-Pro + + + ¥1,280 × 50 + ¥64,000 + + + + + + 规格：黑色 / 1.4英寸 / GPS+蜂窝网络 + + + 备注：包装需使用防震材料，单独包装 + + + + + {/* 产品项目2 */} + + + + + + + 智能手表充电器 + + 型号：SWC-2023 + + + ¥120 × 60 + ¥7,200 + + + + + + 规格：白色 / 磁吸式 / 5W + + + + + {/* 产品项目3 */} + + + + + + + 智能手表表带 + + 型号：SWB-2023 + + + ¥200 × 120 + ¥24,000 + + + + + + 规格：米兰尼斯表带 / 黑色 / 42mm + + + + + {/* 订单总计 */} + + + 商品总额 + ¥95,200 + + + 运费 + ¥0 + + + 订单总计 + ¥95,200 + + + + )} + + {/* 生产进度 */} + {activeTab === 'production-progress' && ( + + 生产进度概览 + + + + 总体进度 + 65% + + + + + + + + + 100% + 原料采购 + + + 75% + 生产制造 + + + 0% + 质检包装 + + + + 生产时间线 + + {/* 时间线项目 */} + + + + 订单确认 + 2023-11-27 14:30 + + + + + + 原料采购完成 + 2023-11-29 16:45 + + + + + + 生产开始 + 2023-11-30 09:15 + + + + + + 智能手表组装中 + 2023-12-02 11:30 + + 已完成35台，剩余15台 + + + + + + + + 质量检测 + + 预计 2023-12-05 + + + + + + + 包装完成 + + 预计 2023-12-07 + + + + + 发货 + 预计 2023-12-08 + + + )} + + {/* 物流信息 */} + {activeTab === 'logistics-info' && ( + + + + 订单尚未发货，预计发货日期：2023-12-08 + + + 发货后将更新物流信息 + + + + 收货信息 + + + 收货人 + 张经理 + + + + 联系电话 + 138****5678 + + + + 收货地址 + + 北京市海淀区中关村科技园区8号楼5层 + + + + + 备注 + 请在工作日送货，并提前电话联系 + + + )} + + {/* 付款信息 */} + {activeTab === 'payment-info' && ( + + 付款状态 + + + + + 已支付定金 + + 剩余尾款待发货前支付 + + + + + + + 订单总额 + ¥95,200 + + + 已付定金(30%) + ¥28,560 + + + 待付尾款 + ¥66,640 + + + + 付款记录 + + + + 付款时间 + 付款金额 + 付款方式 + + + + 2023-11-27 + ¥28,560 + 银行转账 + + + + )} + + + ); +}; + +export default OrderDetail; -- Gitee From 6c136ab5111717ef0089cba2ad806ff31ed623eb Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Thu, 15 May 2025 13:21:40 +0800 Subject: [PATCH 04/20] =?UTF-8?q?feat(=E5=B7=A5=E5=BA=8F=E7=AE=A1=E7=90=86?= =?UTF-8?q?):=20=E6=96=B0=E5=A2=9E=E5=B7=A5=E5=BA=8F=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=8F=8A=E7=9B=B8=E5=85=B3=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加工序管理模块，包括工序列表页面和工序详情页面。工序列表页面支持筛选和查看工序详情，工序详情页面包含生产记录、质量控制、工艺参数和操作指南等选项卡。 --- src/app/(app)/index.tsx | 6 + src/app/process/[id].tsx | 270 ++++++++++++++++++++++++++++++++++++++ src/app/process/index.tsx | 254 +++++++++++++++++++++++++++++++++++ 3 files changed, 530 insertions(+) create mode 100644 src/app/process/[id].tsx create mode 100644 src/app/process/index.tsx diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx index d3e7f0e..89a0236 100644 --- a/src/app/(app)/index.tsx +++ b/src/app/(app)/index.tsx @@ -185,6 +185,12 @@ const Home: React.FC = () => { title="物流管理" onPress={() => {}} /> + router.push('/process')} + /> + + + + + + + + + + + } + /> + + + {/* 工序基本信息 */} + + + 元器件贴装 + + 使用中 + + + + + 工序编号：PR20231201-03 + + + + + 负责人 + 王工程师 + + + 标准工时 + 45分钟/批次 + + + + + + 设备利用率 + 85% + + + + + + + + 关联设备 + + + SMT贴片机#2 + + + + + {/* 工序详情选项卡 */} + + {['生产记录', '质量控制', '工艺参数', '操作指南'].map((tab) => ( + setActiveTab(tab)} + className={`mr-2 rounded-full px-4 py-2 ${activeTab === tab ? 'bg-blue-600' : 'bg-gray-200'}`} + > + + {tab} + + + ))} + + + {/* 生产记录 */} + {activeTab === '生产记录' && ( + + 生产记录 + + + + + + 日期 + + + 批次 + + + 产量 + + + 良品率 + + + 操作员 + + + + + + 2023-12-04 + B20231204-01 + 120件 + 98.3% + 张三 + + + + + + 2023-12-03 + B20231203-02 + 150件 + 97.5% + 李四 + + + + + + 2023-12-02 + B20231202-01 + 130件 + 99.1% + 王五 + + + + + + )} + + {/* 工艺参数 */} + {activeTab === '工艺参数' && ( + + 工艺参数 + + + + 贴片速度 + 0.1秒/个 + + + 定位精度 + ±0.02mm + + + 最小元件尺寸 + 0201(0.6mm×0.3mm) + + + 最大PCB尺寸 + 330mm×250mm + + + + + + + + 注意事项 + + 1. 确保PCB板表面清洁无污染 + + + 2. 定期检查吸嘴状态，避免漏吸 + + + 3. 元件供料器需定期校准 + + + + + + )} + + {/* 质量控制 */} + {activeTab === '质量控制' && ( + + 质量控制 + + + 检验标准 + + IPC-A-610G 3级标准 + + + 检验项目 + + + 元件位置 + + + 焊接质量 + + + 极性方向 + + + 元件完整性 + + + + + )} + + {/* 操作指南 */} + {activeTab === '操作指南' && ( + + 操作指南 + + + 操作步骤 + + 1. 确认PCB板已完成前道工序 + + 2. 检查贴片机程序是否正确加载 + + + 3. 确认元件供料器已正确安装 + + 4. 启动设备并监控首件生产 + 5. 完成后进行首件检验确认 + + + + )} + + + ); +} diff --git a/src/app/process/index.tsx b/src/app/process/index.tsx new file mode 100644 index 0000000..292d04b --- /dev/null +++ b/src/app/process/index.tsx @@ -0,0 +1,254 @@ +import { useRouter } from 'expo-router'; +import React, { useState } from 'react'; +import { + SafeAreaView, + ScrollView, + Text, + TouchableOpacity, + View, +} from 'react-native'; + +import { NavHeader } from '@/components/ui'; +import { FontAwesome } from '@/components/ui/icons'; +const ProcessList = () => { + const [activeFilter, setActiveFilter] = useState('全部'); + const router = useRouter(); + + const goToProcessDetail = () => { + router.push(`/process/1`); + }; + + const filters = [ + '全部', + '使用中', + '待优化', + '已归档', + '电子组装', + '机械加工', + '质量检测', + ]; + + // 工序数据 + const processes = [ + { + id: 'PR20231201-03', + name: '元器件贴装', + status: '使用中', + statusColor: 'green', + manager: '王工程师', + standardTime: '45分钟/批次', + utilizationRate: 85, + equipment: 'SMT贴片机#2', + icon: 'microchip', + }, + { + id: 'PR20231202-05', + name: 'PCB焊接', + status: '使用中', + statusColor: 'green', + manager: '李工程师', + standardTime: '30分钟/批次', + utilizationRate: 92, + equipment: '回流焊接机#1', + icon: 'fire', + }, + { + id: 'PR20231203-02', + name: '电路测试', + status: '待优化', + statusColor: 'orange', + manager: '张工程师', + standardTime: '60分钟/批次', + utilizationRate: 68, + equipment: '电路测试仪#3', + icon: 'bolt', + }, + { + id: 'PR20231204-01', + name: '外壳组装', + status: '使用中', + statusColor: 'green', + manager: '赵工程师', + standardTime: '25分钟/批次', + utilizationRate: 78, + equipment: '组装工作站#2', + icon: 'tools', + }, + ]; + + // 根据筛选条件过滤工序 + const filteredProcesses = + activeFilter === '全部' + ? processes + : processes.filter( + (process) => + process.status === activeFilter || + process.name.includes(activeFilter) + ); + + return ( + + + + + {/* 工序统计概览 */} + + 工序概览 + + + 32 + 总工序 + + + 18 + 使用中 + + + 8 + 待优化 + + + 6 + 已归档 + + + + + + 工序效率指数 + 82% + + + + + + + + + + + 工序优化建议 + + 根据近期生产数据分析，"元器件贴装"工序可通过调整设备参数提升15%效率 + + + + + + + {/* 工序筛选器 */} + + + {filters.map((filter) => ( + setActiveFilter(filter)} + > + + {filter} + + + ))} + + + + {/* 工序列表 */} + 工序列表 + + {/* 工序卡片 - 使用数据循环 */} + {filteredProcesses.map((process) => ( + + + {process.name} + + + {process.status} + + + + + + 工序编号：{process.id} + + + + + 负责人 + {process.manager} + + + 标准工时 + {process.standardTime} + + + + + + 设备利用率 + + {process.utilizationRate}% + + + + = 80 ? 'green' : process.utilizationRate >= 70 ? 'blue' : 'orange'}-500 rounded-full`} + style={{ width: `${process.utilizationRate}%` }} + /> + + + + + + + + {process.equipment} + + + + 查看详情 + + + + ))} + + + {/* 浮动按钮 - 新建工序 */} + + + + + ); +}; + +export default ProcessList; -- Gitee From 8bba66bbe25cf6dbaba83c13865895a5eaca8cbb Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Thu, 15 May 2025 21:55:35 +0800 Subject: [PATCH 05/20] =?UTF-8?q?refactor(inventory):=20=E6=8F=90=E5=8F=96?= =?UTF-8?q?=E5=BA=93=E5=AD=98=E9=A1=B9=E7=BB=84=E4=BB=B6=E5=88=B0=E7=8B=AC?= =?UTF-8?q?=E7=AB=8B=E6=96=87=E4=BB=B6=E5=B9=B6=E6=B7=BB=E5=8A=A0=E8=AF=A6?= =?UTF-8?q?=E6=83=85=E6=9F=A5=E7=9C=8B=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将库存项组件从 inventory.tsx 提取到独立的 item.tsx 文件，并添加 onViewDetail 回调以支持查看详情功能 --- src/app/(app)/inventory.tsx | 71 +++------------------------ src/app/inventory/item.tsx | 96 +++++++++++++++++++++++++++++++++++++ 2 files changed, 103 insertions(+), 64 deletions(-) create mode 100644 src/app/inventory/item.tsx diff --git a/src/app/(app)/inventory.tsx b/src/app/(app)/inventory.tsx index b786cd0..0f8804c 100644 --- a/src/app/(app)/inventory.tsx +++ b/src/app/(app)/inventory.tsx @@ -1,3 +1,4 @@ +import { useRouter } from 'expo-router'; import React, { useState } from 'react'; import { StatusBar, @@ -12,70 +13,7 @@ import { SegmentedControl, type SegmentedControlOption } from '@/components'; import { NavHeader, SafeAreaView, ScrollView } from '@/components/ui'; import { FontAwesome } from '@/components/ui/icons'; -// 状态徽章组件 -// type StatusBadgeProps = { -// status: string; -// color: string; -// bgColor: string; -// }; - -// const StatusBadge: React.FC = ({ status, color, bgColor }) => ( -// -// {status} -// -// ); - -// 库存项组件 -type InventoryItemProps = { - name: string; - code: string; - quantity: number; - safetyStock: number; - status: 'normal' | 'warning' | 'danger'; -}; - -const InventoryItem: React.FC = ({ - name, - code, - quantity, - safetyStock, - status, -}) => { - let indicatorColor = '#22c55e'; // 绿色 - 正常 - let textColor = 'black'; - - if (status === 'warning') { - indicatorColor = '#eab308'; // 黄色 - 警告 - } else if (status === 'danger') { - indicatorColor = '#ef4444'; // 红色 - 危险 - textColor = '#ef4444'; - } - - return ( - - - - - {name} - - 编号：{code} - - - - {quantity} - - 安全库存：{safetyStock} - - - ); -}; +import InventoryItem from '../inventory/item'; // 预警项组件 type AlertItemProps = { @@ -108,6 +46,7 @@ const AlertItem: React.FC = ({ name, message, type }) => { const Inventory: React.FC = () => { // const navigation = useNavigation(); + const router = useRouter(); // 分段控制器选项 const tabOptions: SegmentedControlOption[] = [ @@ -364,6 +303,7 @@ const Inventory: React.FC = () => { quantity={item.quantity} safetyStock={item.safetyStock} status={item.status} + onViewDetail={() => router.push(`/order/${index}`)} /> ))} @@ -404,6 +344,7 @@ const Inventory: React.FC = () => { quantity={item.quantity} safetyStock={item.safetyStock} status={item.status} + onViewDetail={() => router.push(`/order/${index}`)} /> ))} @@ -444,6 +385,7 @@ const Inventory: React.FC = () => { quantity={item.quantity} safetyStock={item.safetyStock} status={item.status} + onViewDetail={() => router.push(`/order/${index}`)} /> ))} @@ -482,6 +424,7 @@ const Inventory: React.FC = () => { quantity={item.quantity} safetyStock={item.safetyStock} status={item.status} + onViewDetail={() => router.push(`/order/${index}`)} /> ))} diff --git a/src/app/inventory/item.tsx b/src/app/inventory/item.tsx new file mode 100644 index 0000000..45fb71c --- /dev/null +++ b/src/app/inventory/item.tsx @@ -0,0 +1,96 @@ +import React from 'react'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; + +type InventoryItemProps = { + name: string; + code: string; + quantity: number; + safetyStock: number; + status: 'normal' | 'warning' | 'danger'; + onViewDetail?: () => void; +}; + +const Item = ({ + name, + code, + quantity, + safetyStock, + status, + onViewDetail, +}: InventoryItemProps) => { + let indicatorColor = '#22c55e'; // 绿色 - 正常 + let textColor = 'black'; + + if (status === 'warning') { + indicatorColor = '#eab308'; // 黄色 - 警告 + } else if (status === 'danger') { + indicatorColor = '#ef4444'; // 红色 - 危险 + textColor = '#ef4444'; + } + + return ( + + + + + + {name} + + + 编号：{code} + + + + + {quantity} + + + 安全库存：{safetyStock} + + + + + ); +}; + +const styles = StyleSheet.create({ + flex1: { + flex: 1, + }, + flexRow: { + flexDirection: 'row', + alignItems: 'center', + }, + stockIndicator: { + width: 8, + height: 8, + borderRadius: 4, + marginRight: 8, + }, + itemName: { + fontSize: 16, + fontWeight: '500', + }, + inventoryItem: { + flexDirection: 'row', + justifyContent: 'space-between', + paddingVertical: 12, + borderBottomWidth: 1, + borderBottomColor: '#f0f0f0', + }, + itemCode: { + color: '#6b7280', + }, + safetyStockText: { + color: '#6b7280', + }, +}); +export default Item; -- Gitee From 4c3e37369da78b754da61261e8fcc07c891a78f7 Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Thu, 15 May 2025 22:23:47 +0800 Subject: [PATCH 06/20] =?UTF-8?q?feat(production):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E7=94=9F=E4=BA=A7=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E5=B9=B6?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E8=B7=AF=E7=94=B1=E8=B7=B3=E8=BD=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 为生产管理模块添加了生产详情页面，并在生产计划列表中实现了点击跳转到详情页的功能。同时，移除了未使用的导航代码，优化了代码结构。 --- src/app/(app)/index.tsx | 2 +- src/app/(app)/inventory.tsx | 1 - src/app/(app)/production.tsx | 70 ++-- src/app/production/[id].tsx | 667 +++++++++++++++++++++++++++++++++++ 4 files changed, 707 insertions(+), 33 deletions(-) create mode 100644 src/app/production/[id].tsx diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx index 89a0236..16cc3aa 100644 --- a/src/app/(app)/index.tsx +++ b/src/app/(app)/index.tsx @@ -147,7 +147,7 @@ const Home: React.FC = () => { icon="cogs" bgColor="#3b82f6" title="生产管理" - // onPress={() => navigation.navigate('Production')} + onPress={() => router.push('/production')} /> = ({ name, message, type }) => { }; const Inventory: React.FC = () => { - // const navigation = useNavigation(); const router = useRouter(); // 分段控制器选项 diff --git a/src/app/(app)/production.tsx b/src/app/(app)/production.tsx index ed7f84e..cffe3e4 100644 --- a/src/app/(app)/production.tsx +++ b/src/app/(app)/production.tsx @@ -1,3 +1,4 @@ +import { useRouter } from 'expo-router'; import React, { useState } from 'react'; import { StatusBar, @@ -59,6 +60,7 @@ type PlanItemProps = { status: string; statusColor: string; statusBgColor: string; + onViewDetail?: () => void; }; const PlanItem: React.FC = ({ @@ -72,40 +74,43 @@ const PlanItem: React.FC = ({ status, statusColor, statusBgColor, + onViewDetail, }) => ( - - - {title} - - - 计划编号：{code} - - 负责人：{manager} - 截止日期：{deadline} - - - - 完成进度 - {progress}% + + + + {title} + - - - - - 计划产量： - {total} - 已完成： - {completed} + 计划编号：{code} + + 负责人：{manager} + 截止日期：{deadline} + + + + 完成进度 + {progress}% + + + + + + 计划产量： + {total} + 已完成： + {completed} + + + 详情 + - - 详情 - - + ); // 工序流程节点组件 @@ -162,7 +167,7 @@ const ProcessNode: React.FC = ({ icon, label, status }) => { }; const Production: React.FC = () => { - // const navigation = useNavigation(); + const router = useRouter(); // 分段控制器状态 const [selectedTabIndex, setSelectedTabIndex] = useState(0); @@ -268,6 +273,7 @@ const Production: React.FC = () => { status="进行中" statusColor="#22c55e" statusBgColor="#dcfce7" + onViewDetail={() => router.push(`/production/1`)} /> {/* 计划项目2 */} @@ -282,6 +288,7 @@ const Production: React.FC = () => { status="进行中" statusColor="#22c55e" statusBgColor="#dcfce7" + onViewDetail={() => router.push(`/production/1`)} /> {/* 计划项目3 */} @@ -296,6 +303,7 @@ const Production: React.FC = () => { status="待开始" statusColor="#f97316" statusBgColor="#ffedd5" + onViewDetail={() => router.push(`/production/1`)} /> )} diff --git a/src/app/production/[id].tsx b/src/app/production/[id].tsx new file mode 100644 index 0000000..744ad3a --- /dev/null +++ b/src/app/production/[id].tsx @@ -0,0 +1,667 @@ +import { StatusBar } from 'expo-status-bar'; +import React, { useState } from 'react'; +import { + SafeAreaView, + ScrollView, + Text, + TouchableOpacity, + View, +} from 'react-native'; + +import { NavHeader } from '@/components/ui'; +import { FontAwesome } from '@/components/ui/icons'; + +const ProductionDetail = () => { + const [activeTab, setActiveTab] = useState('production-process'); + + return ( + + + + + + + + + + + + } + /> + + + {/* 生产计划基本信息 */} + + + + 夏季新品连衣裙生产计划 + + + + + 进行中 + + + + + + 计划编号: PL20230601 + + + + + 负责人 + 张经理 + + + 所属订单 + ORD20230520 + + + 开始日期 + 2023-06-01 + + + 截止日期 + 2023-06-30 + + + 计划产量 + 2,500件 + + + 已完成 + 1,875件 (75%) + + + + + + 生产进度 + 75% + + + + + + + + + + + 生产说明 + + 本批次连衣裙采用新型面料，需特别注意缝制工艺和质量控制。 + + + + + + + {/* 选项卡控制器 */} + + + {[ + { id: 'production-process', label: '生产流程' }, + { id: 'task-list', label: '任务列表' }, + { id: 'material-usage', label: '物料使用' }, + { id: 'quality-control', label: '质量控制' }, + ].map((tab) => ( + setActiveTab(tab.id)} + > + + {tab.label} + + + ))} + + + + {/* 选项卡内容区域 */} + + {/* 生产流程内容 */} + {activeTab === 'production-process' && ( + + {/* 工序流程图 */} + + 生产流程 + + + + + + + + + + 裁剪 + 已完成 + + + + + + + + + + + + 缝制 + 进行中 + + + + + + + + + 装饰 + 待开始 + + + + + + + + + 质检 + 待开始 + + + + + + + + + 包装 + 待开始 + + + + + + {/* 生产时间线 */} + + 生产时间线 + + + {[ + { + title: '生产计划创建', + time: '2023-05-25 10:30', + desc: '创建了夏季新品连衣裙生产计划', + active: true, + }, + { + title: '物料准备完成', + time: '2023-05-30 16:45', + desc: '所有面料和辅料已准备就绪', + active: true, + }, + { + title: '裁剪工序开始', + time: '2023-06-01 08:00', + desc: '开始裁剪面料，预计3天完成', + active: true, + }, + { + title: '裁剪工序完成', + time: '2023-06-03 17:30', + desc: '所有面料裁剪完成，提前半天完成任务', + active: true, + }, + { + title: '缝制工序开始', + time: '2023-06-04 08:00', + desc: '开始连衣裙缝制工作', + active: true, + }, + { + title: '第一批次完成', + time: '2023-06-10 15:20', + desc: '完成500件连衣裙的缝制', + active: true, + }, + { + title: '当前进度', + time: '2023-06-15 12:00', + desc: '已完成1,875件，缝制工序进行中', + active: true, + }, + { + title: '预计装饰工序开始', + time: '2023-06-18', + desc: '', + active: false, + }, + { + title: '预计质检工序开始', + time: '2023-06-25', + desc: '', + active: false, + }, + ].map((item, index) => ( + + + {index < 8 && ( + + )} + + {item.title} + + + {item.time} + + {item.desc && ( + {item.desc} + )} + + ))} + + + + )} + + {/* 任务列表内容 */} + {activeTab === 'task-list' && ( + + {[ + { + title: '连衣裙裁剪任务', + id: 'T20230601-01', + status: '已完成', + statusColor: 'green', + icon: 'check-circle', + manager: '张工', + completeTime: '2023-06-03 17:30', + planHours: '24小时', + actualHours: '21.5小时', + progress: 100, + }, + { + title: '连衣裙缝制任务', + id: 'T20230604-01', + status: '进行中', + statusColor: 'blue', + icon: 'play-circle', + manager: '李工', + completeTime: '2023-06-18', + planHours: '120小时', + actualHours: '90小时', + progress: 75, + }, + { + title: '连衣裙装饰任务', + id: 'T20230618-01', + status: '待开始', + statusColor: 'gray', + icon: 'clock', + manager: '王工', + startTime: '2023-06-18', + completeTime: '2023-06-24', + planHours: '48小时', + progress: 0, + }, + ].map((task, index) => ( + + + + {task.title} + + 任务编号: {task.id} + + + + + + {task.status} + + + + + + + 负责人 + {task.manager} + + + + {task.status === '已完成' + ? '完成时间' + : task.status === '进行中' + ? '预计完成' + : '计划开始'} + + + {task.status === '已完成' + ? task.completeTime + : task.status === '进行中' + ? task.completeTime + : task.startTime} + + + + 计划工时 + {task.planHours} + + + + {task.status === '已完成' + ? '实际工时' + : task.status === '进行中' + ? '已用工时' + : '计划完成'} + + + {task.status === '已完成' + ? task.actualHours + : task.status === '进行中' + ? task.actualHours + : task.completeTime} + + + + + {task.status === '进行中' && ( + + + 任务进度 + {task.progress}% + + + + + + )} + + ))} + + )} + + {/* 物料使用内容 */} + {activeTab === 'material-usage' && ( + + + + 物料使用情况 + + + + + + + 物料名称 + + + 规格 + + + 计划用量 + + + 已用量 + + + 剩余量 + + + + {[ + { + name: '棉麻面料', + spec: '1.5米宽', + plan: '3,750米', + used: '2,850米', + remain: '900米', + }, + { + name: '拉链', + spec: '20cm', + plan: '2,500个', + used: '1,875个', + remain: '625个', + }, + { + name: '装饰纽扣', + spec: '1.2cm', + plan: '10,000个', + used: '0个', + remain: '10,000个', + }, + { + name: '缝纫线', + spec: '白色', + plan: '250卷', + used: '180卷', + remain: '70卷', + }, + ].map((material, index) => ( + + + {material.name} + + + {material.spec} + + + {material.plan} + + + {material.used} + + + {material.remain} + + + ))} + + + + + + + 物料消耗分析 + + + + + 面料利用率 + 92.5% + + + + + + + + + 辅料消耗率 + 75% + + + + + + + + )} + + {/* 质量控制内容 */} + {activeTab === 'quality-control' && ( + + + + 质量检验标准 + + + + 面料质量 + + 面料平整度≥95%，色差≤±2%，接缝强度≥4.5kg/cm + + + + + 缝制质量 + + 针距均匀度≥98%，接缝平整，无跳针、断线现象 + + + + + 外观质量 + + 无明显瑕疵，装饰部件牢固，整体外观符合设计要求 + + + + + + + 质量检验记录 + + + + + + + 批次 + + + 检验日期 + + + 检验数量 + + + 合格率 + + + 检验员 + + + + {[ + { + batch: 'B20230603-01', + date: '2023-06-03', + count: '500件', + rate: '98.4%', + inspector: '王质检', + }, + { + batch: 'B20230610-01', + date: '2023-06-10', + count: '500件', + rate: '99.2%', + inspector: '李质检', + }, + { + batch: 'B20230615-01', + date: '2023-06-15', + count: '875件', + rate: '97.8%', + inspector: '张质检', + }, + ].map((record, index) => ( + + + {record.batch} + + {record.date} + + {record.count} + + {record.rate} + + {record.inspector} + + + ))} + + + + + )} + + + + ); +}; + +export default ProductionDetail; -- Gitee From b86aea9cad08af593615bdf1730ddfc5e7b85587 Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Thu, 15 May 2025 22:45:34 +0800 Subject: [PATCH 07/20] =?UTF-8?q?feat(quality):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E8=B4=A8=E9=87=8F=E7=AE=A1=E7=90=86=E6=A8=A1=E5=9D=97=E5=8F=8A?= =?UTF-8?q?=E5=85=B6=E7=9B=B8=E5=85=B3=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增质量管理模块，包括质量概览、质量检验、缺陷管理和质量报表页面，并实现相关功能逻辑和UI组件。 --- src/app/(app)/index.tsx | 2 +- src/app/process/[id].tsx | 2 +- src/app/quality/[id].tsx | 461 ++++++++++++++++++++++++++++++++++ src/app/quality/index.tsx | 504 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 967 insertions(+), 2 deletions(-) create mode 100644 src/app/quality/[id].tsx create mode 100644 src/app/quality/index.tsx diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx index 16cc3aa..d38f3a1 100644 --- a/src/app/(app)/index.tsx +++ b/src/app/(app)/index.tsx @@ -165,7 +165,7 @@ const Home: React.FC = () => { icon="check-circle" bgColor="#a855f7" title="质量控制" - // onPress={() => navigation.navigate('Quality')} + onPress={() => router.push('/quality')} /> { + const [activeTab, setActiveTab] = useState(0); + + // 选项卡内容 + const tabs = ['检验结果', '不良品分析', '操作记录', '检验标准']; + + return ( + + + + + {/* 质检任务基本信息 */} + + + 智能手表主板质检 + + 进行中 + + + + + 任务编号：QC20231128-01 + + + + + 负责人 + 王质检 + + + 截止日期 + 2023-12-05 + + + 关联产品 + 智能手表 SW-2023 + + + 批次号 + BT20231201-A + + + + + + 完成进度 + 65% + + + + + + + + + + + 检验说明 + + 本次质检针对智能手表主板进行全面检测，包括电路连通性、元器件焊接质量、功能测试等。 + + + + + + + {/* 检验选项卡 */} + + + {tabs.map((tab, index) => ( + setActiveTab(index)} + className={`rounded-full px-4 py-2 ${activeTab === index ? 'bg-blue-600' : ''}`} + > + + {tab} + + + ))} + + + + {/* 检验结果 */} + {activeTab === 0 && ( + + 检验结果统计 + + + + 650 + 已检测 + + + 637 + 合格 + + + 13 + 不合格 + + + + + + 合格率 + 98.0% + + + + + + + + + + + 检验项目 + + + 标准值 + + + 合格率 + + + 状态 + + + + + + 电路连通性 + 100% + 99.5% + + + 合格 + + + + + + + + 元器件焊接 + ≥98% + 97.2% + + + 不合格 + + + + + + + + 功能测试 + ≥99% + 99.1% + + + 合格 + + + + + + + + 外观检查 + ≥95% + 98.3% + + + 合格 + + + + + + + + )} + + {/* 不良品分析 */} + {activeTab === 1 && ( + + 不良品分析 + + + + 2.0% + 不良品率 + + + 主要不良原因： + + + 焊接不良 + 61.5% + + + + 元器件损坏 + 23.1% + + + + 电路异常 + 15.4% + + + + + + 不良品标签 + + + 虚焊 + + + 焊接过热 + + + 电容损坏 + + + 电阻偏差 + + + 短路 + + + 开路 + + + + + + + + + 改进建议 + + 1. 调整焊接温度参数，避免虚焊和过热问题 + + + 2. 加强元器件进料检验，提高元器件质量 + + + 3. 优化电路设计，增强抗干扰能力 + + + + + + )} + + {/* 操作记录 */} + {activeTab === 2 && ( + + 操作记录 + + + + + + 开始检验 + + 2023-12-01 09:30 + + + 王质检开始对批次BT20231201-A进行质量检验 + + + + + + + + 发现不良品 + + 2023-12-01 11:45 + + + 发现5件焊接不良产品，已标记并隔离 + + + + + + + + 暂停检验 + + 2023-12-01 12:30 + + 午休暂停检验 + + + + + + + 继续检验 + + 2023-12-01 13:30 + + + 继续对批次BT20231201-A进行质量检验 + + + + + + + + 生成中期报告 + + 2023-12-02 17:00 + + + 生成检验中期报告，当前合格率98.0% + + + + )} + + {/* 检验标准 */} + {activeTab === 3 && ( + + 检验标准 + + + 参考标准 + IPC-A-610G 3级标准 + + + + 检验项目 + + + 电路连通性 + + + 元器件焊接 + + + 功能测试 + + + 外观检查 + + + + + + 抽样方案 + + GB/T 2828.1-2012 正常检验 II 级 + + + + + 合格判定 + + AQL=1.0，批量1000pcs，抽检数量80pcs，接收数2，拒收数3 + + + + )} + + + {/* 底部操作按钮 */} + + + + + 导出报告 + + + + 完成检验 + + + + + ); +}; + +export default QualityDetail; diff --git a/src/app/quality/index.tsx b/src/app/quality/index.tsx new file mode 100644 index 0000000..b00e408 --- /dev/null +++ b/src/app/quality/index.tsx @@ -0,0 +1,504 @@ +// import { useNavigation } from '@react-navigation/native'; +import { useRouter } from 'expo-router'; +import { StatusBar } from 'expo-status-bar'; +import React, { useState } from 'react'; +import { + SafeAreaView, + ScrollView, + Text, + TouchableOpacity, + View, +} from 'react-native'; + +import { NavHeader } from '@/components/ui'; +import { FontAwesome } from '@/components/ui/icons'; + +const Quality = () => { + const router = useRouter(); + + // const navigation = useNavigation(); + const [activeMainTab, setActiveMainTab] = useState('quality-overview'); + const [activeSubTab, setActiveSubTab] = useState('质检任务'); + const [activeInspectionTab, setActiveInspectionTab] = useState('全部'); + + // 主选项卡内容 + const mainTabs = [ + { id: 'quality-overview', title: '质量概览' }, + { id: 'quality-inspection', title: '质量检验' }, + { id: 'defect-management', title: '缺陷管理' }, + { id: 'quality-report', title: '质量报表' }, + ]; + + // 子选项卡内容 + const subTabs = [ + '质检任务', + '质检报告', + '不良品分析', + '质量标准', + '质量报表', + ]; + const inspectionTabs = ['全部', '待检验', '检验中', '已完成', '异常']; + + // 渲染主选项卡 + const renderMainTabs = () => ( + + {mainTabs.map((tab) => ( + setActiveMainTab(tab.id)} + > + + {tab.title} + + + ))} + + ); + + // 渲染子选项卡 + const renderSubTabs = () => ( + + + {subTabs.map((tab) => ( + setActiveSubTab(tab)} + > + + {tab} + + + ))} + + + ); + + // 渲染检验任务选项卡 + const renderInspectionTabs = () => ( + + + {inspectionTabs.map((tab) => ( + setActiveInspectionTab(tab)} + > + + {tab} + + + ))} + + + ); + + // 渲染质量概览内容 + const renderQualityOverview = () => ( + + {renderSubTabs()} + + {/* 质量概览卡片 */} + + 质量概览 + + + 24 + 今日质检 + + + 98.5% + 合格率 + + + 5 + 待处理 + + + + + + 本月质量趋势 + + 良好 + ↑ 1.2% + + + + + + {/* 质检任务列表 */} + 质检任务 + + {/* 任务项目1 */} + router.push(`/quality/1`)}> + + + 智能手表主板质检 + + 进行中 + + + + 任务编号：QC20231128-01 + + + 负责人：王质检 + 截止日期：2023-12-05 + + + + 完成进度 + 65% + + + + + + + + 计划检测： + 1000 + 已完成： + 650 + + + 详情 + + + + + + {/* 任务项目2 */} + router.push(`/quality/1`)}> + + + 智能音箱外壳质检 + + 已完成 + + + + 任务编号：QC20231125-03 + + + 负责人：李质检 + 完成日期：2023-11-28 + + + + 合格率 + 99.2% + + + + + + + + 检测数量： + 2000 + 不合格： + 16 + + + 查看报告 + + + + + {/* 不良品分析 */} + 不良品分析 + + + + 1.5% + 不良品率 + + + 主要不良原因： + + + 焊接不良 + 45% + + + + 外观瑕疵 + 30% + + + + 功能异常 + 25% + + + + + 查看详细分析 + + + + {/* 质量改进建议 */} + 质量改进建议 + + + + 优化焊接工艺参数 + 2023-11-28 + + + 针对焊接不良问题，建议调整焊接温度和时间参数，并加强操作人员培训。 + + + + + + 更新外观检测标准 + 2023-11-25 + + + 建议更新外观检测标准，增加细节检查项，并引入自动化视觉检测系统辅助人工检测。 + + + + + + 加强功能测试覆盖率 + 2023-11-22 + + + 针对功能异常问题，建议增加测试用例覆盖率，并在生产线上增加中间测试环节。 + + + + + ); + + // 渲染质量检验内容 + const renderQualityInspection = () => ( + + {/* 质量检验概览 */} + + 质量检验概览 + + + 15 + 待检验 + + + 8 + 检验中 + + + 42 + 已完成 + + + + + + 本周检验完成率 + + + 92.5% + + ↑ 3.2% + + + + + + {/* 检验任务筛选 */} + + 检验任务 + + + + 筛选 + + + + 排序 + + + + + {/* 任务状态选项卡 */} + {renderInspectionTabs()} + + {/* 检验任务1 */} + + + 智能手表主板检验 + + 待检验 + + + + 任务编号：QI20231201-01 + + + 负责人：王质检 + 截止日期：2023-12-05 + + + + 批次号： + BT20231201-A + 计划数量： + 500 + + + 开始检验 + + + + + {/* 检验任务2 */} + + + 智能音箱电路板检验 + + 检验中 + + + + 任务编号：QI20231130-02 + + + 负责人：李质检 + 截止日期：2023-12-03 + + + + 完成进度 + 70% + + + + + + + + 已检验： + 350 + 不合格： + 12 + + + 继续检验 + + + + + ); + + // 渲染缺陷管理内容（简化版） + const renderDefectManagement = () => ( + + + 缺陷管理 + + 此部分内容正在开发中，敬请期待 + + + ); + + // 渲染质量报表内容（简化版） + const renderQualityReport = () => ( + + + 质量报表 + + 此部分内容正在开发中，敬请期待 + + + ); + + // 根据当前选中的选项卡渲染内容 + const renderContent = () => { + switch (activeMainTab) { + case 'quality-overview': + return renderQualityOverview(); + case 'quality-inspection': + return renderQualityInspection(); + case 'defect-management': + return renderDefectManagement(); + case 'quality-report': + return renderQualityReport(); + default: + return renderQualityOverview(); + } + }; + + return ( + + + + + {/* 分段控制器 */} + {renderMainTabs()} + + {/* 内容区域 */} + {renderContent()} + + + {/* 浮动按钮 */} + + + + + + + ); +}; + +export default Quality; -- Gitee From 6cd4b6bc08b09355c7d7e204a10c5f2947678a0d Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Fri, 16 May 2025 17:45:39 +0800 Subject: [PATCH 08/20] =?UTF-8?q?feat(=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?= =?UTF-8?q?):=20=E6=96=B0=E5=A2=9E=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=8F=8A=E7=9B=B8=E5=85=B3=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增设备管理模块，包括设备列表页面和设备详情页面。设备列表页面展示设备的基本信息、状态和操作入口，设备详情页面提供设备的详细数据、维护记录、性能参数和故障记录等功能。 --- src/app/(app)/index.tsx | 12 ++ src/app/equipment/[id].tsx | 367 ++++++++++++++++++++++++++++++++++++ src/app/equipment/index.tsx | 344 +++++++++++++++++++++++++++++++++ 3 files changed, 723 insertions(+) create mode 100644 src/app/equipment/[id].tsx create mode 100644 src/app/equipment/index.tsx diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx index d38f3a1..c45a06c 100644 --- a/src/app/(app)/index.tsx +++ b/src/app/(app)/index.tsx @@ -191,6 +191,18 @@ const Home: React.FC = () => { title="工序管理" onPress={() => router.push('/process')} /> + router.push('/equipment')} + /> + router.push('/equipment')} + /> { + const [activeTab, setActiveTab] = useState('running-data'); + + // 切换选项卡 + const handleTabChange = (tabId: string) => { + setActiveTab(tabId); + }; + + return ( + + + + {/* 设备基本信息卡片 */} + + + 贴片机 #SMT-2023-01 + + 运行中 + + + + + + 负责人 + 张工程师 + + + 位置 + 生产车间A区 + + + 品牌型号 + 松下 NPM-W2 + + + 购入日期 + 2022-05-15 + + + 运行状态 + 正常 + + + 今日产能 + 850件 + + + + + + + + 设备警报 + 无异常警报 + + + + + + {/* 选项卡 - 分段控制器样式 */} + + handleTabChange('running-data')} + > + + 运行数据 + + + handleTabChange('maintenance-records')} + > + + 维护记录 + + + handleTabChange('performance-params')} + > + + 性能参数 + + + handleTabChange('fault-records')} + > + + 故障记录 + + + + + {/* 选项卡内容区域 */} + {/* 运行数据 */} + {activeTab === 'running-data' && ( + + {/* 设备监控 */} + + 设备监控 + + + 实时监控 + + + + + 设备实时监控画面 + + + + + + + + + 今日运行时长 + + 8.5小时 + + + 今日产能 + 850件 + + + + 平均贴片速度 + + 0.1秒/个 + + + 良品率 + 99.2% + + + + + + + + 设备状态良好 + + 下次计划维护时间：2023-12-15 + + + + + + + )} + + {/* 维护记录 */} + {activeTab === 'maintenance-records' && ( + + 维护记录 + + + + + + 日期 + + + 维护类型 + + + 维护人员 + + + 维护内容 + + + 状态 + + + + + + 2023-11-15 + 例行保养 + 王工程师 + + 清洁、润滑、校准 + + + + + 已完成 + + + + + + + + + 2023-10-20 + 部件更换 + 李工程师 + 更换吸嘴组件 + + + + 已完成 + + + + + + + + + 2023-09-10 + 例行保养 + 王工程师 + + 清洁、润滑、校准 + + + + + 已完成 + + + + + + + + + )} + + {/* 性能参数 */} + {activeTab === 'performance-params' && ( + + 性能参数 + + + + 设备温度 + 42°C + + + 电机转速 + 1200 RPM + + + 电压 + 220V + + + 电流 + 5.2A + + + + + + + + 设备警报 + 无异常警报 + + + + + )} + + {/* 故障记录 */} + {activeTab === 'fault-records' && ( + + 故障记录 + + + + + + 日期 + + + 故障类型 + + + 处理人员 + + + 处理方法 + + + 停机时长 + + + + + + 2023-11-05 + 吸嘴堵塞 + 王工程师 + 清洗吸嘴 + 2小时 + + + + + + 2023-10-12 + 供料器卡料 + 李工程师 + 调整供料器 + 1.5小时 + + + + + + 2023-09-25 + 视觉系统异常 + 张工程师 + 重新校准 + 3小时 + + + + + + )} + + + ); +}; + +export default EquipmentDetail; diff --git a/src/app/equipment/index.tsx b/src/app/equipment/index.tsx new file mode 100644 index 0000000..1f626e6 --- /dev/null +++ b/src/app/equipment/index.tsx @@ -0,0 +1,344 @@ +import { useRouter } from 'expo-router'; +import React, { useState } from 'react'; +import { SafeAreaView, TextInput, TouchableOpacity } from 'react-native'; + +import { NavHeader, ScrollView, Text, View } from '@/components/ui'; +import { FontAwesome } from '@/components/ui/icons'; + +const Equipment = () => { + const [activeTab, setActiveTab] = useState('all'); + const router = useRouter(); + + // 切换选项卡 + const handleTabChange = (tabId: string) => { + setActiveTab(tabId); + }; + + type EquipmentProps = { + id: string; + name: string; + code: string; + projectManager: string; + location: string; + duration: number; + status: string; + capacity: number; + }; + // 模拟物料数据 + const data: EquipmentProps[] = [ + { + id: '1', + name: 'SMT贴片机#2', + code: 'EQ20230501-02', + status: '运行中', + projectManager: '王工程师', + location: 'A区生产线', + duration: 1245, + capacity: 850, + }, + { + id: '2', + name: 'AOI检测仪', + code: 'EQ20230315-05', + status: '运行中', + projectManager: '李工程师', + location: 'B区检测线', + duration: 985, + capacity: 1200, + }, + { + id: '4', + name: '自动化机械臂', + code: 'EQ20230610-08', + status: '故障中', + projectManager: '赵工程师', + location: 'C区装配线', + duration: 520, + capacity: 1560, + }, + ]; + + interface EquipmentItemProps { + equipment: EquipmentProps; + } + + const EquipmentItemItem = ({ equipment }: EquipmentItemProps) => ( + router.push(`/equipment/1`)} + > + + + {equipment.status === '运行中' && ( + + + + )} + {equipment.status === '待机中' && ( + + + + )} + {equipment.status === '故障中' && ( + + + + )} + + {equipment.name} + + 设备编号：{equipment.code} + + + + + {equipment.status === '运行中' && ( + + {equipment.status} + + )} + {equipment.status === '待机中' && ( + + {equipment.status} + + )} + {equipment.status === '故障中' && ( + + {equipment.status} + + )} + + + + + + 负责人 + {equipment.projectManager} + + + 位置 + {equipment.location} + + + 运行时长 + {equipment.duration}小时 + + + + + {equipment.status === '故障中' ? ( + + 故障：控制系统异常 + + ) : ( + + 今日产能：{equipment.capacity}件 + + )} + + + + + ); + return ( + + + + + + + } + /> + + + {/* 设备状态概览 */} + + 设备状态概览 + + + + 24 + 设备总数 + + + + 18 + + 运行中 + + + + 4 + + 待机中 + + + 2 + 故障中 + + + + + + 设备利用率 + 75% + + + + + + + + + + + 设备状态 + + 今日设备平均运行时长：7.5小时 | 本周维护计划：3台 + + + + + + + {/* 筛选和搜索 */} + + + handleTabChange('all')} + > + + 全部设备 + + + handleTabChange('production')} + > + + 生产设备 + + + handleTabChange('testing')} + > + + 检测设备 + + + handleTabChange('auxiliary')} + > + + 辅助设备 + + + + + + + + + + {/* 设备列表 */} + + {data.map((material, index) => ( + + ))} + + + {/* 维护计划 */} + + + 近期维护计划 + + 查看全部 + + + + + + + + SMT贴片机#1 - 例行保养 + + + + 待处理 + + + + + 计划时间：2023-12-10 | 负责人：王工程师 + + + + + 回流焊炉 - 温度校准 + + + 待处理 + + + + + 计划时间：2023-12-12 | 负责人：张工程师 + + + + + + 自动化机械臂 - 控制系统维修 + + + + 进行中 + + + + + 计划时间：2023-12-08 | 负责人：赵工程师 + + + + + + + ); +}; + +export default Equipment; -- Gitee From b1eb276c18fd151f19076ba52239fd996c8f08c6 Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Fri, 16 May 2025 23:31:03 +0800 Subject: [PATCH 09/20] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=AF=BC?= =?UTF-8?q?=E8=88=AA=E9=80=BB=E8=BE=91=20-=20=E7=A7=BB=E9=99=A4=E5=AF=BC?= =?UTF-8?q?=E8=88=AA=E5=A4=B4=E9=83=A8=E7=9A=84=E9=BB=98=E8=AE=A4=E8=BF=94?= =?UTF-8?q?=E5=9B=9E=E6=A0=87=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/nav-header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/nav-header.tsx b/src/components/ui/nav-header.tsx index 8e684df..65439d5 100644 --- a/src/components/ui/nav-header.tsx +++ b/src/components/ui/nav-header.tsx @@ -22,7 +22,7 @@ export type NavHeaderProps = { export const NavHeader = ({ leftShown = true, title = 'Demo', - headerBackTitle = 'Demo', + headerBackTitle = '', right = null, tx, }: NavHeaderProps) => { -- Gitee From bb450b0ba4e9e7ffc85fe209b125efb76d335e53 Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Sat, 17 May 2025 00:20:14 -0700 Subject: [PATCH 10/20] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=AF=BC?= =?UTF-8?q?=E8=88=AA=E9=80=BB=E8=BE=91=20-=20=E7=A7=BB=E9=99=A4=E5=AF=BC?= =?UTF-8?q?=E8=88=AA=E5=A4=B4=E9=83=A8=E7=9A=84=E9=BB=98=E8=AE=A4=E8=BF=94?= =?UTF-8?q?=E5=9B=9E=E6=A0=87=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/nav-header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/nav-header.tsx b/src/components/ui/nav-header.tsx index 65439d5..0831123 100644 --- a/src/components/ui/nav-header.tsx +++ b/src/components/ui/nav-header.tsx @@ -38,7 +38,7 @@ export const NavHeader = ({ title: tx ? translate(tx) : title, headerTintColor: '#000', headerBackTitle: headerBackTitle, - headerShadowVisible: leftShown, + headerBackButtonDisplayMode: 'minimal', headerTitleAlign: 'center', headerRight: () => right && ( -- Gitee From c228537f11601012a12437533e1990b6fe97b8c6 Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Sat, 17 May 2025 09:02:25 +0800 Subject: [PATCH 11/20] =?UTF-8?q?feat(=E5=BA=93=E5=AD=98):=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E5=BA=93=E5=AD=98=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E5=B9=B6=E4=BF=AE=E5=A4=8D=E5=AF=BC=E8=88=AA=E9=93=BE=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加了库存详情页面，包含基本信息、出入库记录和使用情况等模块。同时修复了库存管理和订单管理的导航链接，确保正确跳转。 --- src/app/(app)/index.tsx | 4 +- src/app/(app)/inventory.tsx | 2 +- src/app/inventory/[id].tsx | 517 ++++++++++++++++++++++++++++++++++++ 3 files changed, 520 insertions(+), 3 deletions(-) create mode 100644 src/app/inventory/[id].tsx diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx index c45a06c..0d6f8f3 100644 --- a/src/app/(app)/index.tsx +++ b/src/app/(app)/index.tsx @@ -153,13 +153,13 @@ const Home: React.FC = () => { icon="boxes" bgColor="#22c55e" title="库存管理" - // onPress={() => navigation.navigate('Inventory')} + onPress={() => router.push('/inventory')} /> navigation.navigate('Orders')} + onPress={() => router.push('/order')} /> { quantity={item.quantity} safetyStock={item.safetyStock} status={item.status} - onViewDetail={() => router.push(`/order/${index}`)} + onViewDetail={() => router.push(`/inventory/${index}`)} /> ))} diff --git a/src/app/inventory/[id].tsx b/src/app/inventory/[id].tsx new file mode 100644 index 0000000..faa1c21 --- /dev/null +++ b/src/app/inventory/[id].tsx @@ -0,0 +1,517 @@ +import React, { useState } from 'react'; +import { + // Dimensions, + TouchableOpacity, +} from 'react-native'; + +import { NavHeader, ScrollView, Text, View } from '@/components/ui'; +// import { LineChart } from 'react-native-chart-kit'; +import { FontAwesome } from '@/components/ui/icons'; + +type TabType = 'info' | 'records' | 'usage'; + +interface RecordItem { + type: string; + date: string; + quantity: string; + operator: string; + document: string; + isInbound: boolean; +} + +interface UsageProduct { + name: string; + quantityPerUnit: string; + monthlyConsumption: string; +} + +interface RelatedMaterial { + name: string; + code: string; + quantity: number; + safetyStock: number; + status: 'normal' | 'warning' | 'danger'; +} + +const InventoryDetail: React.FC = () => { + const [activeTab, setActiveTab] = useState('info'); + + // 模拟数据 + const materialData = { + id: 'RM-10K-0805', + name: '电阻 10kΩ', + category: '原材料', + tag: '常用', + currentStock: 5000, + unit: '个', + safetyStock: 1000, + status: '充足', + spec: '0805封装 10kΩ ±1%', + category_detail: '电子元件 / 电阻', + supplier: '深圳市电子元件有限公司', + purchaseCycle: '3天', + price: 0.05, + stockValue: 250.0, + location: 'A区-03-12', + remark: '主板电路常用电阻', + }; + + const records: RecordItem[] = [ + { + type: '入库', + date: '2023-06-15 14:30', + quantity: '+2,000个', + operator: '张工', + document: 'PO-20230610-001', + isInbound: true, + }, + { + type: '出库', + date: '2023-06-10 09:15', + quantity: '-500个', + operator: '李工', + document: 'WO-20230608-002', + isInbound: false, + }, + { + type: '入库', + date: '2023-06-01 11:20', + quantity: '+3,500个', + operator: '张工', + document: 'PO-20230525-003', + isInbound: true, + }, + ]; + + const usageProducts: UsageProduct[] = [ + { + name: '智能控制器 A1', + quantityPerUnit: '每件用量: 8个', + monthlyConsumption: '月消耗: 约2,400个', + }, + { + name: '电源模块', + quantityPerUnit: '每件用量: 4个', + monthlyConsumption: '月消耗: 约800个', + }, + { + name: '主板组件', + quantityPerUnit: '每件用量: 12个', + monthlyConsumption: '月消耗: 约1,200个', + }, + ]; + + const relatedMaterials: RelatedMaterial[] = [ + { + name: '电阻 1kΩ', + code: 'RM-1K-0805', + quantity: 4200, + safetyStock: 1000, + status: 'normal', + }, + { + name: '电阻 100kΩ', + code: 'RM-100K-0805', + quantity: 3800, + safetyStock: 1000, + status: 'normal', + }, + { + name: '电容 0.1uF', + code: 'CM-0.1UF-0805', + quantity: 1500, + safetyStock: 1200, + status: 'warning', + }, + ]; + + // 库存趋势图数据 + // const stockData = { + // labels: ['1月', '2月', '3月', '4月', '5月', '6月'], + // datasets: [ + // { + // data: [3000, 4500, 2800, 5000, 3500, 5000], + // color: () => `rgba(59, 130, 246, 1)`, + // strokeWidth: 2, + // }, + // { + // data: [1000, 1000, 1000, 1000, 1000, 1000], + // color: () => `rgba(239, 68, 68, 1)`, + // strokeWidth: 2, + // withDots: false, + // }, + // ], + // }; + + // const chartConfig = { + // backgroundGradientFrom: '#ffffff', + // backgroundGradientTo: '#ffffff', + // decimalPlaces: 0, + // color: () => `rgba(59, 130, 246, 0.6)`, + // labelColor: () => `rgba(107, 114, 128, 1)`, + // style: { + // borderRadius: 16, + // }, + // propsForDots: { + // r: '4', + // strokeWidth: '2', + // stroke: '#3b82f6', + // }, + // }; + + // const screenWidth = Dimensions.get('window').width - 40; // 考虑内边距 + + // 详情行组件 + const DetailRow = ({ label = '', value = '', isLast = false }) => ( + + {label} + {value} + + ); + + // 获取库存状态颜色 + const getStatusColor = (status: string) => { + switch (status) { + case '充足': + return { bg: 'bg-green-500', text: 'text-green-600' }; + case '警告': + return { bg: 'bg-yellow-500', text: 'text-yellow-600' }; + case '不足': + return { bg: 'bg-red-500', text: 'text-red-600' }; + default: + return { bg: 'bg-green-500', text: 'text-green-600' }; + } + }; + + const statusColor = getStatusColor(materialData.status); + + const renderTabContent = () => { + switch (activeTab) { + case 'info': + return ( + + + + + + + + + + + + ); + case 'records': + return ( + + {records.map((record, index) => ( + + + {record.type} + {record.date} + + + 数量: {record.quantity} + + + 操作人: {record.operator} + + + 关联单据: {record.document} + + + ))} + + ); + case 'usage': + return ( + + 近期使用产品 + + {usageProducts.map((product, index) => ( + + + + + {product.name} + + {product.quantityPerUnit} + + + + {product.monthlyConsumption} + + ))} + + + 消耗预测 + + + 预计月消耗 + 约4,500个 + + + 当前库存可用 + 约1.1个月 + + + 建议补货时间 + 2周内 + + + + ); + default: + return null; + } + }; + + return ( + + + + + + + } + /> + + + {/* 物料基本信息卡片 */} + + + + + + + {materialData.name} + + 编号: {materialData.id} + + + + + {materialData.category} + + + + + {materialData.tag} + + + + + + + {/* 库存状态 */} + + + 当前库存 + + {materialData.currentStock.toLocaleString()} + + {materialData.unit} + + + + + 安全库存 + + {materialData.safetyStock.toLocaleString()} + + {materialData.unit} + + + + + 状态 + + + + {materialData.status} + + + + + + {/* 快捷操作按钮 */} + + + + 入库 + + + + 出库 + + + + 调拨 + + + + 扫码 + + + + + {/* 库存趋势图 */} + + 库存趋势 + {/* */} + + + {/* 详细信息选项卡 */} + + + setActiveTab('info')} + > + + 基本信息 + + + setActiveTab('records')} + > + + 出入库记录 + + + setActiveTab('usage')} + > + + 使用情况 + + + + + {renderTabContent()} + + + {/* 相关物料 */} + + + 相关物料 + + 查看全部 + + + + + {relatedMaterials.map((material, index) => { + let indicatorColor = 'bg-green-500'; + if (material.status === 'warning') { + indicatorColor = 'bg-yellow-500'; + } else if (material.status === 'danger') { + indicatorColor = 'bg-red-500'; + } + + return ( + + + + + {material.name} + + 编号: {material.code} + + + + + + {material.quantity.toLocaleString()} + + + 安全库存: {material.safetyStock.toLocaleString()} + + + + ); + })} + + + + + ); +}; + +export default InventoryDetail; -- Gitee From 0a9438eca920b014ac70939a0a31f92b4a4b2380 Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Sat, 17 May 2025 21:42:18 +0800 Subject: [PATCH 12/20] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8Tailwind=20?= =?UTF-8?q?CSS=E6=9B=BF=E6=8D=A2=E5=86=85=E8=81=94=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=EF=BC=8C=E6=8F=90=E5=8D=87=E4=BB=A3=E7=A0=81=E5=8F=AF=E7=BB=B4?= =?UTF-8?q?=E6=8A=A4=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 本次提交主要将多个组件中的内联样式替换为Tailwind CSS类名，以简化代码结构并提高可维护性。 --- src/app/(app)/index.tsx | 310 ++++----------------- src/app/(app)/inventory.tsx | 522 ++++++++---------------------------- src/app/(app)/order.tsx | 312 +++++---------------- src/app/inventory/item.tsx | 65 +---- 4 files changed, 257 insertions(+), 952 deletions(-) diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx index 0d6f8f3..fb43599 100644 --- a/src/app/(app)/index.tsx +++ b/src/app/(app)/index.tsx @@ -5,7 +5,6 @@ import { SafeAreaView, ScrollView, StatusBar, - StyleSheet, TouchableOpacity, } from 'react-native'; @@ -29,16 +28,19 @@ const ActivityItem: React.FC = ({ subtitle, time, }) => ( - - + + - - - {title} - {time} + + + {title} + {time} - {subtitle} + {subtitle} ); @@ -57,12 +59,14 @@ const ModuleItem: React.FC = ({ title, onPress, }) => ( - - + + - {/* */} - {title} + {title} ); @@ -75,68 +79,69 @@ const Home: React.FC = () => { const router = useRouter(); return ( - - {/* */} + - {/* */} {/* 顶部导航 */} - router.push('/notification')} > - - 3 + + 3 } /> - + {/* 欢迎信息 */} {userInfo?.WeekName && ( - - 你好，{userInfo?.UserName} - + + + 你好，{userInfo?.UserName} + + 今天是{userInfo?.WeekName}，祝您工作顺利 )} {/* 数据概览 */} - - - 今日订单 - 28 - ↑ 12.5% + + + 今日订单 + 28 + ↑ 12.5% - - 生产任务 - 15 - 进行中: 8 + + 生产任务 + 15 + 进行中: 8 - - 库存预警 - 3 - 点击查看详情 + + 库存预警 + 3 + 点击查看详情 - - 质检合格率 - 98.5% - ↑ 1.2% + + 质检合格率 + + 98.5% + + ↑ 1.2% {/* 功能模块 */} - - 功能模块 - + + 功能模块 + { icon="boxes" bgColor="#22c55e" title="库存管理" - onPress={() => router.push('/inventory')} + // onPress={() => navigation.navigate('Inventory')} /> router.push('/order')} + // onPress={() => navigation.navigate('Orders')} /> { title="设备管理" onPress={() => router.push('/equipment')} /> - router.push('/equipment')} - /> { {/* 最近活动 */} - - - 最近活动 + + + 最近活动 - 查看全部 + 查看全部 - + { {/* 底部空间 - 为底部导航留出空间 */} - + ); }; -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#f5f5f5', - }, - notificationButton: { - position: 'relative', - }, - notificationBadge: { - position: 'absolute', - top: -5, - right: -5, - backgroundColor: '#ef4444', - width: 16, - height: 16, - borderRadius: 8, - alignItems: 'center', - justifyContent: 'center', - }, - notificationBadgeText: { - color: 'white', - fontSize: 10, - fontWeight: 'bold', - }, - content: { - flex: 1, - padding: 16, - }, - welcomeSection: { - marginBottom: 24, - }, - welcomeTitle: { - fontSize: 24, - fontWeight: 'bold', - color: '#333', - }, - welcomeSubtitle: { - fontSize: 14, - color: '#6b7280', - marginTop: 4, - }, - statsGrid: { - flexDirection: 'row', - flexWrap: 'wrap', - justifyContent: 'space-between', - marginBottom: 24, - }, - statCard: { - width: '48%', - backgroundColor: 'white', - borderRadius: 16, - padding: 16, - marginBottom: 12, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.05, - shadowRadius: 10, - elevation: 2, - }, - statLabel: { - fontSize: 14, - color: '#6b7280', - }, - statValue: { - fontSize: 24, - fontWeight: 'bold', - marginTop: 8, - }, - statTrend: { - fontSize: 12, - color: '#22c55e', - marginTop: 4, - }, - statInfo: { - fontSize: 12, - color: '#6b7280', - marginTop: 4, - }, - card: { - backgroundColor: 'white', - borderRadius: 16, - padding: 16, - marginBottom: 16, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.05, - shadowRadius: 10, - elevation: 2, - }, - sectionTitle: { - fontSize: 18, - fontWeight: '600', - marginBottom: 16, - }, - moduleGrid: { - flexDirection: 'row', - flexWrap: 'wrap', - justifyContent: 'space-between', - }, - moduleItem: { - width: '23%', - alignItems: 'center', - marginBottom: 16, - }, - moduleIcon: { - width: 50, - height: 50, - borderRadius: 12, - alignItems: 'center', - justifyContent: 'center', - marginBottom: 8, - }, - moduleText: { - fontSize: 12, - color: '#6b7280', - textAlign: 'center', - }, - sectionHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 16, - }, - sectionLink: { - fontSize: 14, - color: '#0066ff', - }, - activitiesContainer: { - gap: 16, - }, - activityItem: { - flexDirection: 'row', - alignItems: 'flex-start', - }, - activityIcon: { - width: 36, - height: 36, - borderRadius: 8, - alignItems: 'center', - justifyContent: 'center', - marginRight: 12, - }, - activityContent: { - flex: 1, - }, - activityHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 4, - }, - activityTitle: { - fontSize: 14, - fontWeight: '500', - color: '#333', - }, - activityTime: { - fontSize: 12, - color: '#6b7280', - }, - activitySubtitle: { - fontSize: 13, - color: '#6b7280', - }, - bottomSpace: { - height: 70, - }, - navBar: { - position: 'absolute', - bottom: 0, - left: 0, - right: 0, - height: 70, - backgroundColor: 'white', - flexDirection: 'row', - justifyContent: 'space-around', - alignItems: 'center', - borderTopWidth: 1, - borderTopColor: '#e5e7eb', - paddingBottom: 10, // 为底部安全区域留出空间 - }, - navItem: { - alignItems: 'center', - justifyContent: 'center', - }, - navIcon: { - marginBottom: 4, - }, - navText: { - fontSize: 12, - color: '#6b7280', - }, - navTextActive: { - color: '#0066ff', - }, -}); - export default Home; diff --git a/src/app/(app)/inventory.tsx b/src/app/(app)/inventory.tsx index 45dbd12..1914260 100644 --- a/src/app/(app)/inventory.tsx +++ b/src/app/(app)/inventory.tsx @@ -1,16 +1,15 @@ import { useRouter } from 'expo-router'; import React, { useState } from 'react'; +import { TextInput, TouchableOpacity } from 'react-native'; + +import { SegmentedControl, type SegmentedControlOption } from '@/components'; import { - StatusBar, - StyleSheet, + NavHeader, + SafeAreaView, + ScrollView, Text, - TextInput, - TouchableOpacity, View, -} from 'react-native'; - -import { SegmentedControl, type SegmentedControlOption } from '@/components'; -import { NavHeader, SafeAreaView, ScrollView } from '@/components/ui'; +} from '@/components/ui'; import { FontAwesome } from '@/components/ui/icons'; import InventoryItem from '../inventory/item'; @@ -23,22 +22,22 @@ type AlertItemProps = { }; const AlertItem: React.FC = ({ name, message, type }) => { - const bgColor = type === 'danger' ? '#fef2f2' : '#fffbeb'; + const bgColor = type === 'danger' ? 'bg-red-50' : 'bg-amber-50'; const iconColor = type === 'danger' ? '#ef4444' : '#eab308'; const icon = type === 'danger' ? 'exclamation-circle' : 'exclamation-triangle'; return ( - - + + - - {name} - {message} + + {name} + {message} - 补货 + 补货 ); @@ -178,29 +177,24 @@ const Inventory: React.FC = () => { ]; return ( - - - + {/* 顶部导航 */} - + - + - {/* - - */} } /> - + {/* 分段控制器 */} { /> {/* 库存概览 */} {selectedTabIndex === 0 && ( {/* 库存概览卡片 */} - - 库存概览 - - - + + 库存概览 + + + 152 - 物料种类 + 物料种类 - - + + 87% - 库存健康度 + 库存健康度 - - + + 3 - 库存预警 + 库存预警 - + - 本月库存周转率 - - 4.2 - ↑ 0.3 + + 本月库存周转率 + + + + 4.2 + + + ↑ 0.3 + {/* 库存预警 */} - - - 库存预警 + + + 库存预警 - 查看全部 + + 查看全部 + - + {alertItems.map((item, index) => ( { {/* 库存列表 */} - 库存列表 + + 库存列表 + - - + + @@ -289,7 +293,7 @@ const Inventory: React.FC = () => { name="search" size={16} color="#9ca3af" - style={styles.searchIcon} + className="absolute left-3 top-3" /> @@ -312,17 +316,17 @@ const Inventory: React.FC = () => { {/* 原材料 */} {selectedTabIndex === 1 && ( - - 原材料库存 - + + 原材料库存 + 此处显示原材料库存信息 - - + + @@ -330,7 +334,7 @@ const Inventory: React.FC = () => { name="search" size={16} color="#9ca3af" - style={styles.searchIcon} + className="absolute left-3 top-3" /> @@ -343,7 +347,7 @@ const Inventory: React.FC = () => { quantity={item.quantity} safetyStock={item.safetyStock} status={item.status} - onViewDetail={() => router.push(`/order/${index}`)} + onViewDetail={() => router.push(`/inventory/${index}`)} /> ))} @@ -353,17 +357,17 @@ const Inventory: React.FC = () => { {/* 半成品 */} {selectedTabIndex === 2 && ( - - 半成品库存 - + + 半成品库存 + 此处显示半成品库存信息 - - + + @@ -371,7 +375,7 @@ const Inventory: React.FC = () => { name="search" size={16} color="#9ca3af" - style={styles.searchIcon} + className="absolute left-3 top-3" /> @@ -384,7 +388,7 @@ const Inventory: React.FC = () => { quantity={item.quantity} safetyStock={item.safetyStock} status={item.status} - onViewDetail={() => router.push(`/order/${index}`)} + onViewDetail={() => router.push(`/inventory/${index}`)} /> ))} @@ -394,15 +398,17 @@ const Inventory: React.FC = () => { {/* 成品 */} {selectedTabIndex === 3 && ( - - 成品库存 - 此处显示成品库存信息 + + 成品库存 + + 此处显示成品库存信息 + - - + + @@ -410,7 +416,7 @@ const Inventory: React.FC = () => { name="search" size={16} color="#9ca3af" - style={styles.searchIcon} + className="absolute left-3 top-3" /> @@ -423,7 +429,7 @@ const Inventory: React.FC = () => { quantity={item.quantity} safetyStock={item.safetyStock} status={item.status} - onViewDetail={() => router.push(`/order/${index}`)} + onViewDetail={() => router.push(`/inventory/${index}`)} /> ))} @@ -433,43 +439,45 @@ const Inventory: React.FC = () => { {/* 库存报表 */} {selectedTabIndex === 4 && ( - - 库存报表 - 此处显示库存报表信息 + + 库存报表 + + 此处显示库存报表信息 + - - 库存周转率 - - - 原材料 - 4.5 + + 库存周转率 + + + 原材料 + 4.5 - - 半成品 - 3.8 + + 半成品 + 3.8 - - 成品 - 5.2 + + 成品 + 5.2 - - 库存价值分布 - - - 原材料 - ¥125,000 + + 库存价值分布 + + + 原材料 + ¥125,000 - - 半成品 - ¥85,000 + + 半成品 + ¥85,000 - - 成品 - ¥210,000 + + 成品 + ¥210,000 @@ -479,315 +487,11 @@ const Inventory: React.FC = () => { {/* 浮动按钮 */} - + ); }; -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#f5f5f5', - }, - headerButton: { - marginLeft: 16, - }, - content: { - flex: 1, - paddingHorizontal: 16, - paddingTop: 16, - }, - scrollView: { - flex: 1, - marginTop: 16, - }, - flex1: { - flex: 1, - }, - flexRow: { - flexDirection: 'row', - alignItems: 'center', - }, - stockIndicator: { - width: 8, - height: 8, - borderRadius: 4, - marginRight: 8, - }, - itemName: { - fontSize: 16, - fontWeight: '500', - }, - alertItem: { - flexDirection: 'row', - alignItems: 'center', - padding: 12, - borderRadius: 8, - marginBottom: 8, - }, - alertIconContainer: { - width: 40, - height: 40, - borderRadius: 20, - backgroundColor: 'rgba(0, 0, 0, 0.05)', - justifyContent: 'center', - alignItems: 'center', - marginRight: 12, - }, - alertTitle: { - fontSize: 16, - fontWeight: '500', - marginBottom: 2, - }, - alertMessage: { - fontSize: 14, - color: '#6b7280', - marginTop: 2, - }, - alertAction: { - fontSize: 14, - color: '#0066ff', - fontWeight: '500', - }, - sectionTitle: { - fontSize: 16, - fontWeight: '600', - marginTop: 16, - marginBottom: 8, - }, - searchContainer: { - position: 'relative', - marginBottom: 16, - }, - searchInput: { - backgroundColor: '#f3f4f6', - borderRadius: 8, - paddingHorizontal: 40, - paddingVertical: 10, - fontSize: 14, - }, - searchIcon: { - position: 'absolute', - left: 12, - top: 12, - }, - inventoryItem: { - flexDirection: 'row', - justifyContent: 'space-between', - paddingVertical: 12, - borderBottomWidth: 1, - borderBottomColor: '#f0f0f0', - }, - reportItem: { - marginTop: 12, - }, - card: { - backgroundColor: 'white', - borderRadius: 16, - padding: 16, - marginBottom: 16, - shadowColor: '#000', - shadowOffset: { width: 0, height: 1 }, - shadowOpacity: 0.05, - shadowRadius: 2, - elevation: 1, - }, - cardHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 12, - }, - cardTitle: { - fontSize: 18, - fontWeight: '600', - marginBottom: 12, - }, - cardSubtitle: { - fontSize: 16, - fontWeight: '500', - }, - cardDescription: { - fontSize: 14, - color: '#6b7280', - marginTop: 4, - }, - cardLink: { - fontSize: 14, - color: '#0066ff', - fontWeight: '500', - }, - alertList: { - marginTop: 8, - }, - statsGrid: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 16, - }, - statItem: { - flex: 1, - alignItems: 'center', - }, - statValue: { - fontSize: 24, - fontWeight: 'bold', - marginBottom: 4, - }, - statLabel: { - fontSize: 14, - color: '#6b7280', - }, - infoBox: { - flexDirection: 'row', - alignItems: 'center', - backgroundColor: '#f0f9ff', - padding: 12, - borderRadius: 8, - }, - infoIcon: { - marginRight: 12, - }, - infoTitle: { - fontSize: 14, - color: '#6b7280', - marginBottom: 2, - }, - infoValue: { - fontSize: 18, - fontWeight: '600', - color: '#0066ff', - marginRight: 8, - }, - infoTrend: { - fontSize: 14, - color: '#22c55e', - fontWeight: '500', - }, - itemCode: { - fontSize: 14, - color: '#6b7280', - }, - itemQuantity: { - fontSize: 18, - fontWeight: 'bold', - }, - safetyStockText: { - fontSize: 12, - color: '#6b7280', - }, - textRight: { - alignItems: 'flex-end', - }, - floatingButton: { - position: 'absolute', - right: 16, - bottom: 16, - width: 56, - height: 56, - borderRadius: 28, - backgroundColor: '#0066ff', - justifyContent: 'center', - alignItems: 'center', - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.25, - shadowRadius: 3.84, - elevation: 5, - }, - reportContainer: { - marginTop: 12, - }, - reportCard: { - backgroundColor: 'white', - borderRadius: 8, - padding: 16, - marginBottom: 12, - }, - reportHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 12, - }, - reportTitle: { - fontSize: 16, - fontWeight: '600', - }, - reportDate: { - fontSize: 14, - color: '#6b7280', - }, - reportRow: { - flexDirection: 'row', - justifyContent: 'space-between', - paddingVertical: 8, - borderBottomWidth: 1, - borderBottomColor: '#f0f0f0', - }, - reportLabel: { - fontSize: 14, - color: '#6b7280', - }, - reportValue: { - fontSize: 14, - fontWeight: '500', - }, - statusBadge: { - paddingHorizontal: 8, - paddingVertical: 4, - borderRadius: 4, - }, - statusBadgeText: { - fontSize: 12, - fontWeight: '500', - }, - equipmentInfoGrid: { - flexDirection: 'row', - flexWrap: 'wrap', - marginVertical: 12, - }, - equipmentInfoItem: { - width: '50%', - marginBottom: 12, - }, - equipmentInfoLabel: { - fontSize: 12, - color: '#6b7280', - marginBottom: 2, - }, - equipmentInfoValue: { - fontSize: 16, - fontWeight: '500', - }, - equipmentAlert: { - flexDirection: 'row', - alignItems: 'center', - backgroundColor: '#f0f9ff', - padding: 12, - borderRadius: 8, - marginBottom: 12, - }, - equipmentAlertIcon: { - marginRight: 12, - }, - equipmentAlertTitle: { - fontSize: 14, - fontWeight: '500', - marginRight: 8, - }, - equipmentAlertText: { - fontSize: 14, - color: '#6b7280', - }, - equipmentAlertError: { - backgroundColor: '#fef2f2', - }, - equipmentAlertTitleError: { - color: '#ef4444', - }, -}); - export default Inventory; diff --git a/src/app/(app)/order.tsx b/src/app/(app)/order.tsx index c11fdcd..6866795 100644 --- a/src/app/(app)/order.tsx +++ b/src/app/(app)/order.tsx @@ -2,7 +2,6 @@ import { useRouter } from 'expo-router'; import React, { useState } from 'react'; import { StatusBar, - StyleSheet, Text, TextInput, TouchableOpacity, @@ -25,8 +24,10 @@ const StatusBadge: React.FC = ({ color, bgColor, }) => ( - - {status} + + + {status} + ); @@ -54,27 +55,27 @@ const OrderItem: React.FC = ({ statusBgColor, onViewDetail, }) => ( - - - 订单 #{orderNumber} + + + 订单 #{orderNumber} - 客户：{customer} - - 订单日期：{orderDate} - 交付日期：{deliveryDate} + 客户：{customer} + + 订单日期：{orderDate} + 交付日期：{deliveryDate} - - - 订单金额： - ¥{amount} + + + 订单金额： + ¥{amount} - 查看详情 + 查看详情 @@ -170,45 +171,57 @@ const Orders: React.FC = () => { return ( <> {/* 订单概览 */} - - 订单概览 - - - + + 订单概览 + + + {orderStats.total} - 总订单 + 总订单 - - + + {orderStats.pending} - 待处理 + 待处理 - - + + {orderStats.processing} - 生产中 + 生产中 - - + + {orderStats.completed} - 已完成 + 已完成 - - + + - 本月订单完成率 - - + 本月订单完成率 + + {orderStats.completionRate}% - + ↑ {orderStats.rateChange}% @@ -217,16 +230,16 @@ const Orders: React.FC = () => { {/* 搜索框 */} - - + + @@ -234,8 +247,8 @@ const Orders: React.FC = () => { {/* 订单列表 */} - 订单列表 - + 订单列表 + {orderItems.map((item) => ( { ); case 1: // 待处理 return ( - - 待处理订单 - 此处显示待处理订单信息 + + 待处理订单 + 此处显示待处理订单信息 ); case 2: // 生产中 return ( - - 生产中订单 - 此处显示生产中订单信息 + + 生产中订单 + 此处显示生产中订单信息 ); case 3: // 已完成 return ( - - 已完成订单 - 此处显示已完成订单信息 + + 已完成订单 + 此处显示已完成订单信息 ); case 4: // 已取消 return ( - - 已取消订单 - 此处显示已取消订单信息 + + 已取消订单 + 此处显示已取消订单信息 ); default: @@ -287,7 +300,7 @@ const Orders: React.FC = () => { }; return ( - + {/* 顶部导航 */} @@ -296,13 +309,13 @@ const Orders: React.FC = () => { leftShown={false} right={ <> - + - + - + @@ -310,7 +323,7 @@ const Orders: React.FC = () => { /> {/* 内容区域 */} - + {/* 分段控制器 */} { {renderTabContent()} {/* 底部间距 */} - + {/* 浮动按钮 */} - + ); }; -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#f5f5f5', - }, - flexRow: { - flexDirection: 'row', - alignItems: 'center', - }, - flexRowBetween: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 8, - }, - headerButton: { - marginLeft: 16, - }, - content: { - flex: 1, - padding: 16, - }, - scrollView: { - flex: 1, - marginTop: 16, - }, - card: { - marginTop: 16, - - backgroundColor: '#ffffff', - borderRadius: 16, - padding: 16, - marginBottom: 16, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.05, - shadowRadius: 10, - elevation: 2, - }, - cardTitle: { - fontSize: 18, - fontWeight: '600', - marginBottom: 12, - }, - statsGrid: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 12, - }, - statsItem: { - alignItems: 'center', - flex: 1, - }, - statsValue: { - fontSize: 20, - fontWeight: '700', - }, - statsLabel: { - fontSize: 12, - color: '#6b7280', - }, - completionRateCard: { - flexDirection: 'row', - alignItems: 'center', - backgroundColor: '#ebf5ff', - borderRadius: 8, - padding: 12, - }, - completionRateIcon: { - marginRight: 12, - }, - completionRateTitle: { - fontSize: 14, - fontWeight: '500', - }, - completionRateValue: { - fontSize: 18, - fontWeight: '700', - color: '#0066ff', - marginRight: 8, - }, - completionRateChange: { - fontSize: 12, - color: '#22c55e', - }, - searchContainer: { - marginBottom: 16, - }, - searchInputContainer: { - position: 'relative', - flexDirection: 'row', - alignItems: 'center', - }, - searchIcon: { - position: 'absolute', - left: 12, - zIndex: 1, - }, - searchInput: { - flex: 1, - backgroundColor: '#ffffff', - borderWidth: 1, - borderColor: '#e5e7eb', - borderRadius: 8, - paddingVertical: 8, - paddingLeft: 40, - paddingRight: 16, - fontSize: 14, - }, - sectionTitle: { - fontSize: 18, - fontWeight: '600', - marginBottom: 12, - }, - orderItem: { - borderBottomWidth: 1, - borderBottomColor: '#f0f0f0', - paddingVertical: 16, - }, - orderTitle: { - fontSize: 16, - fontWeight: '500', - }, - customerText: { - fontSize: 14, - color: '#6b7280', - marginBottom: 8, - }, - dateText: { - fontSize: 14, - color: '#6b7280', - }, - amountLabel: { - fontSize: 14, - color: '#6b7280', - }, - amountValue: { - fontSize: 14, - fontWeight: '500', - }, - detailLink: { - fontSize: 14, - color: '#0066ff', - }, - statusBadge: { - paddingHorizontal: 8, - paddingVertical: 4, - borderRadius: 9999, - }, - statusBadgeText: { - fontSize: 12, - fontWeight: '500', - }, - placeholderText: { - color: '#6b7280', - }, - floatingButton: { - position: 'absolute', - right: 24, - bottom: 80, - width: 56, - height: 56, - borderRadius: 28, - backgroundColor: '#0066ff', - alignItems: 'center', - justifyContent: 'center', - shadowColor: '#000', - shadowOffset: { width: 0, height: 4 }, - shadowOpacity: 0.2, - shadowRadius: 8, - elevation: 4, - }, - bottomSpacer: { - height: 80, - }, -}); - export default Orders; diff --git a/src/app/inventory/item.tsx b/src/app/inventory/item.tsx index 45fb71c..d240281 100644 --- a/src/app/inventory/item.tsx +++ b/src/app/inventory/item.tsx @@ -1,5 +1,7 @@ import React from 'react'; -import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import { TouchableOpacity } from 'react-native'; + +import { Text, View } from '@/components/ui'; type InventoryItemProps = { name: string; @@ -19,78 +21,39 @@ const Item = ({ onViewDetail, }: InventoryItemProps) => { let indicatorColor = '#22c55e'; // 绿色 - 正常 - let textColor = 'black'; + let textColor = 'text-black'; if (status === 'warning') { indicatorColor = '#eab308'; // 黄色 - 警告 } else if (status === 'danger') { indicatorColor = '#ef4444'; // 红色 - 危险 - textColor = '#ef4444'; + textColor = 'text-red-500'; } return ( - - - + + + - {name} + {name} - - 编号：{code} - + 编号：{code} {quantity} - - 安全库存：{safetyStock} - + 安全库存：{safetyStock} ); }; -const styles = StyleSheet.create({ - flex1: { - flex: 1, - }, - flexRow: { - flexDirection: 'row', - alignItems: 'center', - }, - stockIndicator: { - width: 8, - height: 8, - borderRadius: 4, - marginRight: 8, - }, - itemName: { - fontSize: 16, - fontWeight: '500', - }, - inventoryItem: { - flexDirection: 'row', - justifyContent: 'space-between', - paddingVertical: 12, - borderBottomWidth: 1, - borderBottomColor: '#f0f0f0', - }, - itemCode: { - color: '#6b7280', - }, - safetyStockText: { - color: '#6b7280', - }, -}); export default Item; -- Gitee From fddfd7b590c57fb8ba2b9903835e8783f186aa2e Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Sat, 17 May 2025 23:33:10 +0800 Subject: [PATCH 13/20] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=94=9F?= =?UTF-8?q?=E4=BA=A7=E7=BB=84=E4=BB=B6=E6=A8=A1=E5=9D=97=E5=8F=8A=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E5=8A=9F=E8=83=BD=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增生产组件模块，包括设备、计划、工序、流程节点、进度条、报表、状态徽章和任务等组件，用于统一管理和展示生产相关功能。每个组件均包含详细的功能实现和样式定义，方便后续扩展和维护。 --- src/app/(app)/production.tsx | 1464 +---------------- src/components/production/equipment.tsx | 432 +++++ src/components/production/index.tsx | 12 + src/components/production/plan.tsx | 345 ++++ src/components/production/process-node.tsx | 122 ++ src/components/production/process.tsx | 411 +++++ src/components/production/progress-bar.tsx | 539 ++++++ .../production}/report-date-selector.tsx | 0 src/components/production/report.tsx | 186 +++ src/components/production/status-badge.tsx | 33 + src/components/production/task.tsx | 272 +++ 11 files changed, 2367 insertions(+), 1449 deletions(-) create mode 100644 src/components/production/equipment.tsx create mode 100644 src/components/production/index.tsx create mode 100644 src/components/production/plan.tsx create mode 100644 src/components/production/process-node.tsx create mode 100644 src/components/production/process.tsx create mode 100644 src/components/production/progress-bar.tsx rename src/{app => components/production}/report-date-selector.tsx (100%) create mode 100644 src/components/production/report.tsx create mode 100644 src/components/production/status-badge.tsx create mode 100644 src/components/production/task.tsx diff --git a/src/app/(app)/production.tsx b/src/app/(app)/production.tsx index cffe3e4..0a5539b 100644 --- a/src/app/(app)/production.tsx +++ b/src/app/(app)/production.tsx @@ -1,173 +1,20 @@ -import { useRouter } from 'expo-router'; +// import { useRouter } from 'expo-router'; import React, { useState } from 'react'; -import { - StatusBar, - StyleSheet, - Text, - TouchableOpacity, - View, -} from 'react-native'; +import { StyleSheet, TouchableOpacity, View } from 'react-native'; import { SegmentedControl, type SegmentedControlOption } from '@/components'; +import { + Equipment, + Plans, + Process, + Report, + Task, +} from '@/components/production'; import { NavHeader, SafeAreaView, ScrollView } from '@/components/ui'; import { FontAwesome } from '@/components/ui/icons'; -import ReportDateSelector from '../report-date-selector'; - -// 进度条组件 -type ProgressBarProps = { - progress: number; - color: string; -}; - -const ProgressBar: React.FC = ({ progress, color }) => ( - - - -); - -// 状态徽章组件 -type StatusBadgeProps = { - status: string; - color: string; - bgColor: string; -}; - -const StatusBadge: React.FC = ({ - status, - color, - bgColor, -}) => ( - - {status} - -); - -// 生产计划项组件 -type PlanItemProps = { - title: string; - code: string; - manager: string; - deadline: string; - progress: number; - total: number; - completed: number; - status: string; - statusColor: string; - statusBgColor: string; - onViewDetail?: () => void; -}; - -const PlanItem: React.FC = ({ - title, - code, - manager, - deadline, - progress, - total, - completed, - status, - statusColor, - statusBgColor, - onViewDetail, -}) => ( - - - - {title} - - - 计划编号：{code} - - 负责人：{manager} - 截止日期：{deadline} - - - - 完成进度 - {progress}% - - - - - - 计划产量： - {total} - 已完成： - {completed} - - - 详情 - - - - -); - -// 工序流程节点组件 -type ProcessNodeProps = { - icon: string; - label: string; - status: 'completed' | 'inProgress' | 'pending'; -}; - -const ProcessNode: React.FC = ({ icon, label, status }) => { - let statusIcon = null; - let statusText = ''; - let bgColor = '#ebf5ff'; - let iconColor = '#0066ff'; - - if (status === 'completed') { - statusIcon = ( - - - - ); - statusText = '已完成'; - bgColor = '#ebf5ff'; - } else if (status === 'inProgress') { - statusIcon = ( - - - - ); - statusText = '进行中'; - bgColor = '#dcfce7'; - iconColor = '#22c55e'; - } else { - statusText = '待开始'; - } - - return ( - - - - {statusIcon} - - {label} - - {statusText} - - - ); -}; - const Production: React.FC = () => { - const router = useRouter(); + // const router = useRouter(); // 分段控制器状态 const [selectedTabIndex, setSelectedTabIndex] = useState(0); @@ -181,8 +28,6 @@ const Production: React.FC = () => { return ( - - {/* 顶部导航 */} { showsVerticalScrollIndicator={false} style={styles.scrollView} > - {selectedTabIndex === 0 && ( - - {/* 生产概览 */} - - 生产概览 - - - - 15 - - 计划总数 - - - - 8 - - 进行中 - - - - 3 - - 待开始 - - - - - - - 本月生产完成率 - - - 78.5% - ↑ 5.2% - - - - - - {/* 生产计划列表 */} - 生产计划列表 - - {/* 计划项目1 */} - router.push(`/production/1`)} - /> - - {/* 计划项目2 */} - router.push(`/production/1`)} - /> - - {/* 计划项目3 */} - router.push(`/production/1`)} - /> - - )} - - {selectedTabIndex === 1 && ( - - {/* 任务概览 */} - - 任务概览 - - - - 24 - - 任务总数 - - - - 12 - - 进行中 - - - - 5 - - 待分配 - - - - - - - 员工任务完成率 - - - 82.3% - ↑ 3.7% - - - - - - {/* 生产任务列表 */} - 生产任务列表 - - {/* 任务项目1 */} - - - 主板元器件贴装任务 - - - 任务编号：TA20231205-01 - - 负责人：李技术员 - - 截止日期：2023-12-10 - - - - - 完成进度 - 70% - - - - - - 所属计划： - PP20231128-01 - - - 详情 - - - - - {/* 任务项目2 */} - - - 电路板焊接任务 - - - 任务编号：TA20231205-02 - - 负责人：待分配 - - 截止日期：2023-12-12 - - - - - 完成进度 - 0% - - - - - - 所属计划： - PP20231128-01 - - - 详情 - - - - - {/* 任务项目3 */} - - - 音箱外壳注塑任务 - - - 任务编号：TA20231204-03 - - 负责人：王技术员 - - 截止日期：2023-12-15 - - - - - 完成进度 - 45% - - - - - - 所属计划： - PP20231130-02 - - - 详情 - - - - - )} - - {selectedTabIndex === 2 && ( - - {/* 工序概览 */} - - 工序概览 - - - - 18 - - 工序总数 - - - - 10 - - 使用中 - - - - 2 - - 待优化 - - - - - {/* 工序流程图 */} - - - - 智能手表生产工序流程 - - - 当前批次： - - B20231204-01 - - - - - - - - - - - - - - - - - - - - - - - 当前进度： - 40% | - 预计完成时间： - - 2023-12-05 18:00 - - - - - - - {/* 工序列表 */} - 工序列表 - - {/* 工序项目1 */} - - - 元器件贴装 - - - 工序编号：PR20231201-03 - - - - 负责人 - 王工程师 - - - 标准工时 - 45分钟/批次 - - - - - - 设备利用率 - 85% - - - - - - 关联设备 - - - SMT贴片机#2 - - - - - - 良品率： - 98.3% - - - 详情 - - - - - {/* 工序项目2 */} - - - 电路板焊接 - - - 工序编号：PR20231201-04 - - - - 负责人 - 李工程师 - - - 标准工时 - 60分钟/批次 - - + {selectedTabIndex === 0 && } - - - 设备利用率 - 75% - - - + {selectedTabIndex === 1 && } - - 关联设备 - - - - 波峰焊接机#1 - - - + {selectedTabIndex === 2 && } - - - 良品率： - 97.5% - - - 详情 - - - - - )} + {selectedTabIndex === 3 && } - {selectedTabIndex === 3 && ( - - {/* 设备概览 */} - - 设备概览 - - - - 32 - - 设备总数 - - - - 25 - - 运行中 - - - - 2 - - 故障 - - - - - - - 设备综合效率(OEE) - - - 87.2% - ↑ 2.1% - - - - - - {/* 设备列表 */} - 设备列表 - - {/* 设备项目1 */} - - - SMT贴片机#2 - - - 设备编号：EQ20230501-02 - - - - 设备温度 - 42°C - - - 电机转速 - 1200 RPM - - - 电压 - 220V - - - 电流 - 5.2A - - - - - - - 设备警报 - 无异常警报 - - - - - - 今日运行： - 8.5小时 - - - 详情 - - - - - {/* 设备项目2 */} - - - 波峰焊接机#1 - - - 设备编号：EQ20230602-05 - - - - 设备温度 - 68°C - - - 电机转速 - 0 RPM - - - 电压 - 0V - - - 电流 - 0A - - - - - - - - 设备警报 - - - 温控系统异常，需要维修 - - - - - - - 停机时间： - 2.5小时 - - - 详情 - - - - - {/* 设备维护计划 */} - 设备维护计划 - - - - - - 设备名称 - - - 维护类型 - - - 计划日期 - - - 负责人 - - - 状态 - - - - - SMT贴片机#2 - - 例行保养 - - 2023-12-15 - - 王工程师 - - - - - - - 回流焊机#3 - - 故障维修 - - 2023-12-05 - - 张工程师 - - - - - - - PCB切割机#1 - - 例行保养 - - 2023-12-20 - - 李工程师 - - - - - - - - - )} - - {selectedTabIndex === 4 && ( - - {/* 报表概览 */} - - 生产报表 - - - - {/* 生产数据 */} - - - 生产数据 - 2023-12-05 - - - - - 1,250 - 计划产量 - - - 1,180 - 实际产量 - - - 94.4% - 计划完成率 - - - 98.3% - 良品率 - - - - - 各产品线产量对比 - - - - 产量数据图表 - - - - - - {/* 设备运行报表 */} - - - 设备运行报表 - 2023-12-05 - - - - - 32 - 设备总数 - - - 28 - 运行设备 - - - 87.5% - 设备利用率 - - - 4.2h - 平均运行 - - - - - 设备运行状态分布 - - - - 设备状态图表 - - - - - - {/* 报表下载 */} - - 生产报表 - - - - 下载本月生产报表 - - - - - )} + {selectedTabIndex === 4 && } @@ -1070,484 +114,6 @@ const styles = StyleSheet.create({ paddingTop: 16, paddingBottom: 16, }, - card: { - backgroundColor: 'white', - borderRadius: 16, - padding: 16, - marginBottom: 16, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.05, - shadowRadius: 8, - elevation: 2, - }, - sectionTitle: { - fontSize: 18, - fontWeight: '600', - marginBottom: 12, - color: '#333', - }, - statsGrid: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 12, - }, - statItem: { - alignItems: 'center', - flex: 1, - }, - statValue: { - fontSize: 24, - fontWeight: 'bold', - }, - statLabel: { - fontSize: 12, - color: '#6b7280', - marginTop: 4, - }, - completionRateCard: { - backgroundColor: '#ebf5ff', - borderRadius: 12, - padding: 12, - flexDirection: 'row', - alignItems: 'center', - }, - completionRateIcon: { - marginRight: 12, - }, - completionRateContent: { - flex: 1, - }, - completionRateLabel: { - fontSize: 14, - fontWeight: '500', - }, - completionRateValue: { - flexDirection: 'row', - alignItems: 'center', - }, - completionRatePercentage: { - fontSize: 18, - fontWeight: 'bold', - color: '#0066ff', - marginRight: 8, - }, - completionRateTrend: { - fontSize: 12, - color: '#22c55e', - }, - planItemHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'flex-start', - marginBottom: 8, - }, - planItemTitle: { - fontSize: 16, - fontWeight: '500', - color: '#333', - }, - statusBadge: { - paddingHorizontal: 8, - paddingVertical: 4, - borderRadius: 999, - }, - statusBadgeText: { - fontSize: 12, - fontWeight: '500', - }, - planItemCode: { - fontSize: 14, - color: '#6b7280', - marginBottom: 8, - }, - planItemInfo: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 12, - }, - planItemInfoText: { - fontSize: 14, - color: '#6b7280', - }, - progressContainer: { - marginBottom: 8, - }, - progressHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 4, - }, - progressLabel: { - fontSize: 14, - color: '#6b7280', - }, - progressBar: { - height: 6, - backgroundColor: '#e5e7eb', - borderRadius: 3, - overflow: 'hidden', - }, - progressValue: { - height: '100%', - borderRadius: 3, - }, - planItemFooter: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - planItemStats: { - flexDirection: 'row', - alignItems: 'center', - }, - planItemStatsText: { - fontSize: 14, - color: '#6b7280', - }, - planItemStatsValue: { - fontSize: 14, - fontWeight: '500', - marginRight: 12, - }, - planItemLink: { - color: '#0066ff', - fontSize: 14, - }, - tabContent: { - padding: 16, - backgroundColor: 'white', - borderRadius: 16, - alignItems: 'center', - justifyContent: 'center', - minHeight: 200, - }, - tabContentText: { - fontSize: 16, - color: '#6b7280', - }, - // 工序流程图样式 - processFlowHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 12, - }, - processFlowTitle: { - fontSize: 16, - fontWeight: '500', - }, - processFlowBatch: { - flexDirection: 'row', - alignItems: 'center', - }, - processFlowBatchLabel: { - fontSize: 14, - color: '#0066ff', - fontWeight: '500', - }, - processFlowBatchValue: { - fontSize: 14, - }, - processFlowScroll: { - marginBottom: 12, - }, - processFlow: { - flexDirection: 'row', - alignItems: 'center', - paddingVertical: 8, - minWidth: '100%', - }, - processNode: { - alignItems: 'center', - width: 64, - marginHorizontal: 8, - }, - processNodeCircle: { - width: 64, - height: 64, - borderRadius: 32, - alignItems: 'center', - justifyContent: 'center', - marginBottom: 8, - position: 'relative', - }, - statusIconCompleted: { - position: 'absolute', - top: -4, - right: -4, - width: 24, - height: 24, - borderRadius: 12, - backgroundColor: '#22c55e', - alignItems: 'center', - justifyContent: 'center', - }, - statusIconInProgress: { - position: 'absolute', - top: -4, - right: -4, - width: 24, - height: 24, - borderRadius: 12, - backgroundColor: '#0066ff', - alignItems: 'center', - justifyContent: 'center', - }, - processNodeLabel: { - fontSize: 12, - fontWeight: '500', - marginBottom: 2, - }, - processNodeStatus: { - fontSize: 12, - color: '#6b7280', - }, - processNodeStatusInProgress: { - color: '#0066ff', - }, - processFlowLineCompleted: { - width: 48, - height: 2, - backgroundColor: '#22c55e', - }, - processFlowLinePending: { - width: 48, - height: 2, - backgroundColor: '#e5e7eb', - }, - processFlowInfo: { - backgroundColor: '#ebf5ff', - borderRadius: 12, - padding: 12, - flexDirection: 'row', - alignItems: 'center', - }, - processFlowInfoIcon: { - marginRight: 8, - }, - processFlowInfoText: { - fontSize: 14, - }, - processFlowInfoValue: { - fontWeight: '500', - }, - // 工序管理样式 - processInfoGrid: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 12, - }, - processInfoItem: { - flex: 1, - }, - processInfoLabel: { - fontSize: 12, - color: '#6b7280', - marginBottom: 4, - }, - processInfoValue: { - fontSize: 14, - fontWeight: '500', - }, - processEquipment: { - backgroundColor: '#ebf5ff', - borderRadius: 12, - padding: 12, - marginBottom: 12, - }, - processEquipmentLabel: { - fontSize: 14, - fontWeight: '500', - marginBottom: 8, - }, - processEquipmentItem: { - flexDirection: 'row', - alignItems: 'center', - }, - processEquipmentIcon: { - marginRight: 8, - }, - processEquipmentText: { - fontSize: 14, - }, - // 设备管理样式 - equipmentInfoGrid: { - flexDirection: 'row', - flexWrap: 'wrap', - marginBottom: 12, - }, - equipmentInfoItem: { - width: '50%', - marginBottom: 8, - }, - equipmentInfoLabel: { - fontSize: 12, - color: '#6b7280', - marginBottom: 4, - }, - equipmentInfoValue: { - fontSize: 14, - fontWeight: '500', - }, - equipmentAlert: { - backgroundColor: '#ebf5ff', - borderRadius: 12, - padding: 12, - marginBottom: 12, - flexDirection: 'row', - alignItems: 'flex-start', - }, - equipmentAlertError: { - backgroundColor: '#fee2e2', - }, - equipmentAlertIcon: { - marginRight: 8, - marginTop: 2, - }, - equipmentAlertTitle: { - fontSize: 14, - fontWeight: '500', - marginBottom: 4, - }, - equipmentAlertTitleError: { - color: '#ef4444', - }, - equipmentAlertText: { - fontSize: 14, - }, - // 设备维护计划表格样式 - maintenanceTable: { - width: '100%', - }, - maintenanceTableHeader: { - flexDirection: 'row', - backgroundColor: '#f3f4f6', - paddingVertical: 8, - borderBottomWidth: 1, - borderBottomColor: '#e5e7eb', - }, - maintenanceTableHeaderCell: { - width: 120, - paddingHorizontal: 8, - fontSize: 12, - fontWeight: '500', - color: '#6b7280', - textTransform: 'uppercase', - }, - maintenanceTableRow: { - flexDirection: 'row', - borderBottomWidth: 1, - borderBottomColor: '#e5e7eb', - paddingVertical: 8, - }, - maintenanceTableCell: { - width: 120, - paddingHorizontal: 8, - fontSize: 14, - }, - maintenanceTableCellStatus: { - width: 120, - paddingHorizontal: 8, - justifyContent: 'center', - }, - // 报表样式 - reportDateSelector: { - flexDirection: 'row', - backgroundColor: '#f3f4f6', - borderRadius: 8, - padding: 4, - marginTop: 12, - }, - reportDateButton: { - flex: 1, - paddingVertical: 8, - alignItems: 'center', - borderRadius: 6, - }, - reportDateButtonActive: { - backgroundColor: 'white', - shadowColor: '#000', - shadowOffset: { width: 0, height: 1 }, - shadowOpacity: 0.1, - shadowRadius: 2, - elevation: 1, - }, - reportDateButtonText: { - fontSize: 14, - color: '#6b7280', - }, - reportDateButtonTextActive: { - color: '#0066ff', - fontWeight: '500', - }, - reportHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 12, - }, - reportTitle: { - fontSize: 16, - fontWeight: '600', - }, - reportDate: { - fontSize: 14, - color: '#6b7280', - }, - reportGrid: { - flexDirection: 'row', - flexWrap: 'wrap', - marginBottom: 16, - }, - reportItem: { - width: '50%', - marginBottom: 12, - }, - reportItemValue: { - fontSize: 18, - fontWeight: 'bold', - color: '#0066ff', - marginBottom: 4, - }, - reportItemLabel: { - fontSize: 12, - color: '#6b7280', - }, - reportChart: { - marginBottom: 12, - }, - reportChartTitle: { - fontSize: 14, - fontWeight: '500', - marginBottom: 8, - }, - chartPlaceholder: { - height: 160, - backgroundColor: '#f9fafb', - borderRadius: 12, - alignItems: 'center', - justifyContent: 'center', - }, - chartPlaceholderText: { - fontSize: 14, - color: '#6b7280', - marginTop: 8, - }, - reportDownloadButton: { - flexDirection: 'row', - alignItems: 'center', - paddingVertical: 12, - borderBottomWidth: 1, - borderBottomColor: '#e5e7eb', - }, - reportDownloadIcon: { - marginRight: 12, - }, - reportDownloadText: { - fontSize: 14, - color: '#333', - }, }); export default Production; diff --git a/src/components/production/equipment.tsx b/src/components/production/equipment.tsx new file mode 100644 index 0000000..b083f4e --- /dev/null +++ b/src/components/production/equipment.tsx @@ -0,0 +1,432 @@ +import { FontAwesome } from '@expo/vector-icons'; +import { + ScrollView, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; + +import { StatusBadge } from './status-badge'; + +export const Equipment = () => { + return ( + + {/* 设备概览 */} + + 设备概览 + + + 32 + 设备总数 + + + 25 + 运行中 + + + 2 + 故障 + + + + + + 设备综合效率(OEE) + + 87.2% + ↑ 2.1% + + + + + + {/* 设备列表 */} + 设备列表 + + {/* 设备项目1 */} + + + SMT贴片机#2 + + + 设备编号：EQ20230501-02 + + + + 设备温度 + 42°C + + + 电机转速 + 1200 RPM + + + 电压 + 220V + + + 电流 + 5.2A + + + + + + + 设备警报 + 无异常警报 + + + + + + 今日运行： + 8.5小时 + + + 详情 + + + + + {/* 设备项目2 */} + + + 波峰焊接机#1 + + + 设备编号：EQ20230602-05 + + + + 设备温度 + 68°C + + + 电机转速 + 0 RPM + + + 电压 + 0V + + + 电流 + 0A + + + + + + + + 设备警报 + + + 温控系统异常，需要维修 + + + + + + + 停机时间： + 2.5小时 + + + 详情 + + + + + {/* 设备维护计划 */} + 设备维护计划 + + + + + 设备名称 + 维护类型 + 计划日期 + 负责人 + 状态 + + + SMT贴片机#2 + 例行保养 + 2023-12-15 + 王工程师 + + + + + + 回流焊机#3 + 故障维修 + 2023-12-05 + 张工程师 + + + + + + PCB切割机#1 + 例行保养 + 2023-12-20 + 李工程师 + + + + + + + + + ); +}; +const styles = StyleSheet.create({ + card: { + backgroundColor: 'white', + borderRadius: 16, + padding: 16, + marginBottom: 16, + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.05, + shadowRadius: 8, + elevation: 2, + }, + sectionTitle: { + fontSize: 18, + fontWeight: '600', + marginBottom: 12, + color: '#333', + }, + statsGrid: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 12, + }, + statItem: { + alignItems: 'center', + flex: 1, + }, + statValue: { + fontSize: 24, + fontWeight: 'bold', + }, + statLabel: { + fontSize: 12, + color: '#6b7280', + marginTop: 4, + }, + completionRateCard: { + backgroundColor: '#ebf5ff', + borderRadius: 12, + padding: 12, + flexDirection: 'row', + alignItems: 'center', + }, + completionRateIcon: { + marginRight: 12, + }, + completionRateContent: { + flex: 1, + }, + completionRateLabel: { + fontSize: 14, + fontWeight: '500', + }, + completionRateValue: { + flexDirection: 'row', + alignItems: 'center', + }, + completionRatePercentage: { + fontSize: 18, + fontWeight: 'bold', + color: '#0066ff', + marginRight: 8, + }, + completionRateTrend: { + fontSize: 12, + color: '#22c55e', + }, + planItemHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'flex-start', + marginBottom: 8, + }, + planItemTitle: { + fontSize: 16, + fontWeight: '500', + color: '#333', + }, + planItemCode: { + fontSize: 14, + color: '#6b7280', + marginBottom: 8, + }, + planItemInfo: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 12, + }, + planItemInfoText: { + fontSize: 14, + color: '#6b7280', + }, + progressContainer: { + marginBottom: 8, + }, + progressHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 4, + }, + progressLabel: { + fontSize: 14, + color: '#6b7280', + }, + progressBar: { + height: 6, + backgroundColor: '#e5e7eb', + borderRadius: 3, + overflow: 'hidden', + }, + progressValue: { + height: '100%', + borderRadius: 3, + }, + planItemFooter: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + planItemStats: { + flexDirection: 'row', + alignItems: 'center', + }, + planItemStatsText: { + fontSize: 14, + color: '#6b7280', + }, + planItemStatsValue: { + fontSize: 14, + fontWeight: '500', + marginRight: 12, + }, + planItemLink: { + color: '#0066ff', + fontSize: 14, + }, + // 设备管理样式 + equipmentInfoGrid: { + flexDirection: 'row', + flexWrap: 'wrap', + marginBottom: 12, + }, + equipmentInfoItem: { + width: '50%', + marginBottom: 8, + }, + equipmentInfoLabel: { + fontSize: 12, + color: '#6b7280', + marginBottom: 4, + }, + equipmentInfoValue: { + fontSize: 14, + fontWeight: '500', + }, + equipmentAlert: { + backgroundColor: '#ebf5ff', + borderRadius: 12, + padding: 12, + marginBottom: 12, + flexDirection: 'row', + alignItems: 'flex-start', + }, + equipmentAlertError: { + backgroundColor: '#fee2e2', + }, + equipmentAlertIcon: { + marginRight: 8, + marginTop: 2, + }, + equipmentAlertTitle: { + fontSize: 14, + fontWeight: '500', + marginBottom: 4, + }, + equipmentAlertTitleError: { + color: '#ef4444', + }, + equipmentAlertText: { + fontSize: 14, + }, + // 设备维护计划表格样式 + maintenanceTable: { + width: '100%', + }, + maintenanceTableHeader: { + flexDirection: 'row', + backgroundColor: '#f3f4f6', + paddingVertical: 8, + borderBottomWidth: 1, + borderBottomColor: '#e5e7eb', + }, + maintenanceTableHeaderCell: { + width: 120, + paddingHorizontal: 8, + fontSize: 12, + fontWeight: '500', + color: '#6b7280', + textTransform: 'uppercase', + }, + maintenanceTableRow: { + flexDirection: 'row', + borderBottomWidth: 1, + borderBottomColor: '#e5e7eb', + paddingVertical: 8, + }, + maintenanceTableCell: { + width: 120, + paddingHorizontal: 8, + fontSize: 14, + }, + maintenanceTableCellStatus: { + width: 120, + paddingHorizontal: 8, + justifyContent: 'center', + }, +}); diff --git a/src/components/production/index.tsx b/src/components/production/index.tsx new file mode 100644 index 0000000..0dd495c --- /dev/null +++ b/src/components/production/index.tsx @@ -0,0 +1,12 @@ +/** + * 生产组件模块的入口文件 + * 集中导出所有生产相关的组件，方便统一导入 + */ +export * from './equipment'; // 导出生产计划项组件 +export * from './plan'; // 导出生产计划项组件 +export * from './process'; // 导出生产计划项组件 +export * from './process-node'; // 导出进度条组件 +export * from './progress-bar'; // 导出进度条组件 +export * from './report'; // 导出生产计划项组件 +export * from './status-badge'; // 导出进度条组件 +export * from './task'; // 导出生产计划项组件 diff --git a/src/components/production/plan.tsx b/src/components/production/plan.tsx new file mode 100644 index 0000000..55e3d19 --- /dev/null +++ b/src/components/production/plan.tsx @@ -0,0 +1,345 @@ +import { FontAwesome } from '@expo/vector-icons'; +import { useRouter } from 'expo-router'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; + +import { ProgressBar } from './progress-bar'; +import { StatusBadge } from './status-badge'; + +/** + * 生产计划项组件属性 + * @property title - 计划标题 + * @property code - 计划编号 + * @property manager - 负责人 + * @property deadline - 截止日期 + * @property progress - 进度百分比 + * @property total - 计划总量 + * @property completed - 已完成量 + * @property status - 状态文本 + * @property statusColor - 状态文本颜色 + * @property statusBgColor - 状态背景色 + * @property onViewDetail - 查看详情回调函数 + */ +type PlanItemProps = { + title: string; + code: string; + manager: string; + deadline: string; + progress: number; + total: number; + completed: number; + status: string; + statusColor: string; + statusBgColor: string; + onViewDetail?: () => void; +}; + +/** + * 生产计划项组件 + * 显示单个生产计划的基本信息和进度 + */ +export const PlanItem: React.FC = ({ + title, + code, + manager, + deadline, + progress, + total, + completed, + status, + statusColor, + statusBgColor, + onViewDetail, +}) => ( + + + {/* 标题和状态区域 */} + + {title} + + + + {/* 计划编号 */} + 计划编号：{code} + + {/* 负责人和截止日期 */} + + 负责人：{manager} + 截止日期：{deadline} + + + {/* 进度条区域 */} + + + 完成进度 + {progress}% + + + + + {/* 底部统计和详情链接 */} + + + 计划产量： + {total} + 已完成： + {completed} + + + 详情 + + + + +); + +export const Plans = () => { + const router = useRouter(); + const planItems = [ + { + title: '智能手表主板生产计划', + code: 'PP20231128-01', + manager: '王工程师', + deadline: '2023-12-15', + progress: 65, + total: 1000, + completed: 650, + status: '进行中', + statusColor: '#22c55e', + statusBgColor: '#dcfce7', + id: 1, + }, + { + title: '智能音箱外壳注塑计划', + code: 'PP20231125-03', + manager: '李工程师', + deadline: '2023-12-10', + progress: 42, + total: 2000, + completed: 840, + status: '进行中', + statusColor: '#22c55e', + statusBgColor: '#dcfce7', + id: 2, + }, + { + title: '智能门锁电路板生产计划', + code: 'PP20231202-03', + manager: '张工程师', + deadline: '2023-12-25', + progress: 0, + total: 500, + completed: 0, + status: '待开始', + statusColor: '#f97316', + statusBgColor: '#ffedd5', + id: 3, + }, + ]; + + return ( + <> + {/* 生产概览 */} + + 生产概览 + + + 15 + 计划总数 + + + 8 + 进行中 + + + 3 + 待开始 + + + + + + 本月生产完成率 + + 78.5% + ↑ 5.2% + + + + + 生产计划列表 + {/* 生产计划列表 */} + + {planItems.map((item) => ( + router.push(`/production/${item.id}`)} + /> + ))} + + ); +}; +const styles = StyleSheet.create({ + card: { + backgroundColor: 'white', + borderRadius: 16, + padding: 16, + marginBottom: 16, + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.05, + shadowRadius: 8, + elevation: 2, + }, + sectionTitle: { + fontSize: 18, + fontWeight: '600', + marginBottom: 12, + color: '#333', + }, + statsGrid: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 12, + }, + statItem: { + alignItems: 'center', + flex: 1, + }, + statValue: { + fontSize: 24, + fontWeight: 'bold', + }, + statLabel: { + fontSize: 12, + color: '#6b7280', + marginTop: 4, + }, + completionRateCard: { + backgroundColor: '#ebf5ff', + borderRadius: 12, + padding: 12, + flexDirection: 'row', + alignItems: 'center', + }, + completionRateIcon: { + marginRight: 12, + }, + completionRateContent: { + flex: 1, + }, + completionRateLabel: { + fontSize: 14, + fontWeight: '500', + }, + completionRateValue: { + flexDirection: 'row', + alignItems: 'center', + }, + completionRatePercentage: { + fontSize: 18, + fontWeight: 'bold', + color: '#0066ff', + marginRight: 8, + }, + completionRateTrend: { + fontSize: 12, + color: '#22c55e', + }, + planItemHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'flex-start', + marginBottom: 8, + }, + planItemTitle: { + fontSize: 16, + fontWeight: '500', + color: '#333', + }, + statusBadge: { + paddingHorizontal: 8, + paddingVertical: 4, + borderRadius: 999, + }, + statusBadgeText: { + fontSize: 12, + fontWeight: '500', + }, + planItemCode: { + fontSize: 14, + color: '#6b7280', + marginBottom: 8, + }, + planItemInfo: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 12, + }, + planItemInfoText: { + fontSize: 14, + color: '#6b7280', + }, + progressContainer: { + marginBottom: 8, + }, + progressHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 4, + }, + progressLabel: { + fontSize: 14, + color: '#6b7280', + }, + progressBar: { + height: 6, + backgroundColor: '#e5e7eb', + borderRadius: 3, + overflow: 'hidden', + }, + progressValue: { + height: '100%', + borderRadius: 3, + }, + planItemFooter: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + planItemStats: { + flexDirection: 'row', + alignItems: 'center', + }, + planItemStatsText: { + fontSize: 14, + color: '#6b7280', + }, + planItemStatsValue: { + fontSize: 14, + fontWeight: '500', + marginRight: 12, + }, + planItemLink: { + color: '#0066ff', + fontSize: 14, + }, +}); diff --git a/src/components/production/process-node.tsx b/src/components/production/process-node.tsx new file mode 100644 index 0000000..eb1461d --- /dev/null +++ b/src/components/production/process-node.tsx @@ -0,0 +1,122 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; + +import { Text, View } from '@/components/ui'; +import { FontAwesome } from '@/components/ui/icons'; + +// 工序流程节点组件 +type ProcessNodeProps = { + icon: string; + label: string; + status: 'completed' | 'inProgress' | 'pending'; +}; + +export const ProcessNode: React.FC = ({ + icon, + label, + status, +}) => { + let statusIcon = null; + let statusText = ''; + let bgColor = '#ebf5ff'; + let iconColor = '#0066ff'; + + if (status === 'completed') { + statusIcon = ( + + + + ); + statusText = '已完成'; + bgColor = '#ebf5ff'; + } else if (status === 'inProgress') { + statusIcon = ( + + + + ); + statusText = '进行中'; + bgColor = '#dcfce7'; + iconColor = '#22c55e'; + } else { + statusText = '待开始'; + } + + return ( + + + + {statusIcon} + + {label} + + {statusText} + + + ); +}; +const styles = StyleSheet.create({ + processNode: { + alignItems: 'center', + width: 64, + marginHorizontal: 8, + }, + processNodeCircle: { + width: 64, + height: 64, + borderRadius: 32, + alignItems: 'center', + justifyContent: 'center', + marginBottom: 8, + position: 'relative', + }, + statusIconCompleted: { + position: 'absolute', + top: -4, + right: -4, + width: 24, + height: 24, + borderRadius: 12, + backgroundColor: '#22c55e', + alignItems: 'center', + justifyContent: 'center', + }, + statusIconInProgress: { + position: 'absolute', + top: -4, + right: -4, + width: 24, + height: 24, + borderRadius: 12, + backgroundColor: '#0066ff', + alignItems: 'center', + justifyContent: 'center', + }, + processNodeLabel: { + fontSize: 12, + fontWeight: '500', + marginBottom: 2, + }, + processNodeStatus: { + fontSize: 12, + color: '#6b7280', + }, + processNodeStatusInProgress: { + color: '#0066ff', + }, + processFlowLineCompleted: { + width: 48, + height: 2, + backgroundColor: '#22c55e', + }, + processFlowLinePending: { + width: 48, + height: 2, + backgroundColor: '#e5e7eb', + }, +}); diff --git a/src/components/production/process.tsx b/src/components/production/process.tsx new file mode 100644 index 0000000..28bfdac --- /dev/null +++ b/src/components/production/process.tsx @@ -0,0 +1,411 @@ +import { FontAwesome } from '@expo/vector-icons'; +import { + ScrollView, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; + +import { ProcessNode } from './process-node'; +import { ProgressBar } from './progress-bar'; +import { StatusBadge } from './status-badge'; + +export const Process = () => { + return ( + + {/* 工序概览 */} + + 工序概览 + + + 18 + 工序总数 + + + 10 + 使用中 + + + 2 + 待优化 + + + + + {/* 工序流程图 */} + + + 智能手表生产工序流程 + + 当前批次： + B20231204-01 + + + + + + + + + + + + + + + + + + + + + + 当前进度： + 40% | + 预计完成时间： + 2023-12-05 18:00 + + + + + + {/* 工序列表 */} + 工序列表 + + {/* 工序项目1 */} + + + 元器件贴装 + + + 工序编号：PR20231201-03 + + + + 负责人 + 王工程师 + + + 标准工时 + 45分钟/批次 + + + + + + 设备利用率 + 85% + + + + + + 关联设备 + + + SMT贴片机#2 + + + + + + 良品率： + 98.3% + + + 详情 + + + + + {/* 工序项目2 */} + + + 电路板焊接 + + + 工序编号：PR20231201-04 + + + + 负责人 + 李工程师 + + + 标准工时 + 60分钟/批次 + + + + + + 设备利用率 + 75% + + + + + + 关联设备 + + + 波峰焊接机#1 + + + + + + 良品率： + 97.5% + + + 详情 + + + + + ); +}; +const styles = StyleSheet.create({ + card: { + backgroundColor: 'white', + borderRadius: 16, + padding: 16, + marginBottom: 16, + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.05, + shadowRadius: 8, + elevation: 2, + }, + sectionTitle: { + fontSize: 18, + fontWeight: '600', + marginBottom: 12, + color: '#333', + }, + statsGrid: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 12, + }, + statItem: { + alignItems: 'center', + flex: 1, + }, + statValue: { + fontSize: 24, + fontWeight: 'bold', + }, + statLabel: { + fontSize: 12, + color: '#6b7280', + marginTop: 4, + }, + planItemHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'flex-start', + marginBottom: 8, + }, + planItemTitle: { + fontSize: 16, + fontWeight: '500', + color: '#333', + }, + planItemCode: { + fontSize: 14, + color: '#6b7280', + marginBottom: 8, + }, + planItemInfo: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 12, + }, + planItemInfoText: { + fontSize: 14, + color: '#6b7280', + }, + progressContainer: { + marginBottom: 8, + }, + progressHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 4, + }, + progressLabel: { + fontSize: 14, + color: '#6b7280', + }, + progressBar: { + height: 6, + backgroundColor: '#e5e7eb', + borderRadius: 3, + overflow: 'hidden', + }, + progressValue: { + height: '100%', + borderRadius: 3, + }, + planItemFooter: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + planItemStats: { + flexDirection: 'row', + alignItems: 'center', + }, + planItemStatsText: { + fontSize: 14, + color: '#6b7280', + }, + planItemStatsValue: { + fontSize: 14, + fontWeight: '500', + marginRight: 12, + }, + planItemLink: { + color: '#0066ff', + fontSize: 14, + }, + // 工序流程图样式 + processFlowHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: 12, + }, + processFlowTitle: { + fontSize: 16, + fontWeight: '500', + }, + processFlowBatch: { + flexDirection: 'row', + alignItems: 'center', + }, + processFlowBatchLabel: { + fontSize: 14, + color: '#0066ff', + fontWeight: '500', + }, + processFlowBatchValue: { + fontSize: 14, + }, + processFlowScroll: { + marginBottom: 12, + }, + processFlow: { + flexDirection: 'row', + alignItems: 'center', + paddingVertical: 8, + minWidth: '100%', + }, + processNodeLabel: { + fontSize: 12, + fontWeight: '500', + marginBottom: 2, + }, + processNodeStatus: { + fontSize: 12, + color: '#6b7280', + }, + processNodeStatusInProgress: { + color: '#0066ff', + }, + processFlowLineCompleted: { + width: 48, + height: 2, + backgroundColor: '#22c55e', + }, + processFlowLinePending: { + width: 48, + height: 2, + backgroundColor: '#e5e7eb', + }, + processFlowInfo: { + backgroundColor: '#ebf5ff', + borderRadius: 12, + padding: 12, + flexDirection: 'row', + alignItems: 'center', + }, + processFlowInfoIcon: { + marginRight: 8, + }, + processFlowInfoText: { + fontSize: 14, + }, + processFlowInfoValue: { + fontWeight: '500', + }, + // 工序管理样式 + processInfoGrid: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 12, + }, + processInfoItem: { + flex: 1, + }, + processInfoLabel: { + fontSize: 12, + color: '#6b7280', + marginBottom: 4, + }, + processInfoValue: { + fontSize: 14, + fontWeight: '500', + }, + processEquipment: { + backgroundColor: '#ebf5ff', + borderRadius: 12, + padding: 12, + marginBottom: 12, + }, + processEquipmentLabel: { + fontSize: 14, + fontWeight: '500', + marginBottom: 8, + }, + processEquipmentItem: { + flexDirection: 'row', + alignItems: 'center', + }, + processEquipmentIcon: { + marginRight: 8, + }, + processEquipmentText: { + fontSize: 14, + }, +}); diff --git a/src/components/production/progress-bar.tsx b/src/components/production/progress-bar.tsx new file mode 100644 index 0000000..427cbc4 --- /dev/null +++ b/src/components/production/progress-bar.tsx @@ -0,0 +1,539 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; + +import { View } from '@/components/ui'; + +// 进度条组件 +type ProgressBarProps = { + progress: number; + color: string; +}; + +export const ProgressBar: React.FC = ({ + progress, + color, +}) => ( + + + +); + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#f5f5f5', + }, + headerButton: { + marginLeft: 16, + }, + + scrollView: { + flex: 1, + marginTop: 16, + }, + floatingButton: { + position: 'absolute', + right: 24, + bottom: 80, + width: 56, + height: 56, + borderRadius: 28, + backgroundColor: '#0066ff', + alignItems: 'center', + justifyContent: 'center', + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.25, + shadowRadius: 3.84, + elevation: 5, + }, + content: { + flex: 1, + paddingHorizontal: 16, + paddingTop: 16, + paddingBottom: 16, + }, + card: { + backgroundColor: 'white', + borderRadius: 16, + padding: 16, + marginBottom: 16, + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.05, + shadowRadius: 8, + elevation: 2, + }, + sectionTitle: { + fontSize: 18, + fontWeight: '600', + marginBottom: 12, + color: '#333', + }, + statsGrid: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 12, + }, + statItem: { + alignItems: 'center', + flex: 1, + }, + statValue: { + fontSize: 24, + fontWeight: 'bold', + }, + statLabel: { + fontSize: 12, + color: '#6b7280', + marginTop: 4, + }, + completionRateCard: { + backgroundColor: '#ebf5ff', + borderRadius: 12, + padding: 12, + flexDirection: 'row', + alignItems: 'center', + }, + completionRateIcon: { + marginRight: 12, + }, + completionRateContent: { + flex: 1, + }, + completionRateLabel: { + fontSize: 14, + fontWeight: '500', + }, + completionRateValue: { + flexDirection: 'row', + alignItems: 'center', + }, + completionRatePercentage: { + fontSize: 18, + fontWeight: 'bold', + color: '#0066ff', + marginRight: 8, + }, + completionRateTrend: { + fontSize: 12, + color: '#22c55e', + }, + planItemHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'flex-start', + marginBottom: 8, + }, + planItemTitle: { + fontSize: 16, + fontWeight: '500', + color: '#333', + }, + statusBadge: { + paddingHorizontal: 8, + paddingVertical: 4, + borderRadius: 999, + }, + statusBadgeText: { + fontSize: 12, + fontWeight: '500', + }, + planItemCode: { + fontSize: 14, + color: '#6b7280', + marginBottom: 8, + }, + planItemInfo: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 12, + }, + planItemInfoText: { + fontSize: 14, + color: '#6b7280', + }, + progressContainer: { + marginBottom: 8, + }, + progressHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 4, + }, + progressLabel: { + fontSize: 14, + color: '#6b7280', + }, + progressBar: { + height: 6, + backgroundColor: '#e5e7eb', + borderRadius: 3, + overflow: 'hidden', + }, + progressValue: { + height: '100%', + borderRadius: 3, + }, + planItemFooter: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + planItemStats: { + flexDirection: 'row', + alignItems: 'center', + }, + planItemStatsText: { + fontSize: 14, + color: '#6b7280', + }, + planItemStatsValue: { + fontSize: 14, + fontWeight: '500', + marginRight: 12, + }, + planItemLink: { + color: '#0066ff', + fontSize: 14, + }, + tabContent: { + padding: 16, + backgroundColor: 'white', + borderRadius: 16, + alignItems: 'center', + justifyContent: 'center', + minHeight: 200, + }, + tabContentText: { + fontSize: 16, + color: '#6b7280', + }, + // 工序流程图样式 + processFlowHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: 12, + }, + processFlowTitle: { + fontSize: 16, + fontWeight: '500', + }, + processFlowBatch: { + flexDirection: 'row', + alignItems: 'center', + }, + processFlowBatchLabel: { + fontSize: 14, + color: '#0066ff', + fontWeight: '500', + }, + processFlowBatchValue: { + fontSize: 14, + }, + processFlowScroll: { + marginBottom: 12, + }, + processFlow: { + flexDirection: 'row', + alignItems: 'center', + paddingVertical: 8, + minWidth: '100%', + }, + processNode: { + alignItems: 'center', + width: 64, + marginHorizontal: 8, + }, + processNodeCircle: { + width: 64, + height: 64, + borderRadius: 32, + alignItems: 'center', + justifyContent: 'center', + marginBottom: 8, + position: 'relative', + }, + statusIconCompleted: { + position: 'absolute', + top: -4, + right: -4, + width: 24, + height: 24, + borderRadius: 12, + backgroundColor: '#22c55e', + alignItems: 'center', + justifyContent: 'center', + }, + statusIconInProgress: { + position: 'absolute', + top: -4, + right: -4, + width: 24, + height: 24, + borderRadius: 12, + backgroundColor: '#0066ff', + alignItems: 'center', + justifyContent: 'center', + }, + processNodeLabel: { + fontSize: 12, + fontWeight: '500', + marginBottom: 2, + }, + processNodeStatus: { + fontSize: 12, + color: '#6b7280', + }, + processNodeStatusInProgress: { + color: '#0066ff', + }, + processFlowLineCompleted: { + width: 48, + height: 2, + backgroundColor: '#22c55e', + }, + processFlowLinePending: { + width: 48, + height: 2, + backgroundColor: '#e5e7eb', + }, + processFlowInfo: { + backgroundColor: '#ebf5ff', + borderRadius: 12, + padding: 12, + flexDirection: 'row', + alignItems: 'center', + }, + processFlowInfoIcon: { + marginRight: 8, + }, + processFlowInfoText: { + fontSize: 14, + }, + processFlowInfoValue: { + fontWeight: '500', + }, + // 工序管理样式 + processInfoGrid: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 12, + }, + processInfoItem: { + flex: 1, + }, + processInfoLabel: { + fontSize: 12, + color: '#6b7280', + marginBottom: 4, + }, + processInfoValue: { + fontSize: 14, + fontWeight: '500', + }, + processEquipment: { + backgroundColor: '#ebf5ff', + borderRadius: 12, + padding: 12, + marginBottom: 12, + }, + processEquipmentLabel: { + fontSize: 14, + fontWeight: '500', + marginBottom: 8, + }, + processEquipmentItem: { + flexDirection: 'row', + alignItems: 'center', + }, + processEquipmentIcon: { + marginRight: 8, + }, + processEquipmentText: { + fontSize: 14, + }, + // 设备管理样式 + equipmentInfoGrid: { + flexDirection: 'row', + flexWrap: 'wrap', + marginBottom: 12, + }, + equipmentInfoItem: { + width: '50%', + marginBottom: 8, + }, + equipmentInfoLabel: { + fontSize: 12, + color: '#6b7280', + marginBottom: 4, + }, + equipmentInfoValue: { + fontSize: 14, + fontWeight: '500', + }, + equipmentAlert: { + backgroundColor: '#ebf5ff', + borderRadius: 12, + padding: 12, + marginBottom: 12, + flexDirection: 'row', + alignItems: 'flex-start', + }, + equipmentAlertError: { + backgroundColor: '#fee2e2', + }, + equipmentAlertIcon: { + marginRight: 8, + marginTop: 2, + }, + equipmentAlertTitle: { + fontSize: 14, + fontWeight: '500', + marginBottom: 4, + }, + equipmentAlertTitleError: { + color: '#ef4444', + }, + equipmentAlertText: { + fontSize: 14, + }, + // 设备维护计划表格样式 + maintenanceTable: { + width: '100%', + }, + maintenanceTableHeader: { + flexDirection: 'row', + backgroundColor: '#f3f4f6', + paddingVertical: 8, + borderBottomWidth: 1, + borderBottomColor: '#e5e7eb', + }, + maintenanceTableHeaderCell: { + width: 120, + paddingHorizontal: 8, + fontSize: 12, + fontWeight: '500', + color: '#6b7280', + textTransform: 'uppercase', + }, + maintenanceTableRow: { + flexDirection: 'row', + borderBottomWidth: 1, + borderBottomColor: '#e5e7eb', + paddingVertical: 8, + }, + maintenanceTableCell: { + width: 120, + paddingHorizontal: 8, + fontSize: 14, + }, + maintenanceTableCellStatus: { + width: 120, + paddingHorizontal: 8, + justifyContent: 'center', + }, + // 报表样式 + reportDateSelector: { + flexDirection: 'row', + backgroundColor: '#f3f4f6', + borderRadius: 8, + padding: 4, + marginTop: 12, + }, + reportDateButton: { + flex: 1, + paddingVertical: 8, + alignItems: 'center', + borderRadius: 6, + }, + reportDateButtonActive: { + backgroundColor: 'white', + shadowColor: '#000', + shadowOffset: { width: 0, height: 1 }, + shadowOpacity: 0.1, + shadowRadius: 2, + elevation: 1, + }, + reportDateButtonText: { + fontSize: 14, + color: '#6b7280', + }, + reportDateButtonTextActive: { + color: '#0066ff', + fontWeight: '500', + }, + reportHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: 12, + }, + reportTitle: { + fontSize: 16, + fontWeight: '600', + }, + reportDate: { + fontSize: 14, + color: '#6b7280', + }, + reportGrid: { + flexDirection: 'row', + flexWrap: 'wrap', + marginBottom: 16, + }, + reportItem: { + width: '50%', + marginBottom: 12, + }, + reportItemValue: { + fontSize: 18, + fontWeight: 'bold', + color: '#0066ff', + marginBottom: 4, + }, + reportItemLabel: { + fontSize: 12, + color: '#6b7280', + }, + reportChart: { + marginBottom: 12, + }, + reportChartTitle: { + fontSize: 14, + fontWeight: '500', + marginBottom: 8, + }, + chartPlaceholder: { + height: 160, + backgroundColor: '#f9fafb', + borderRadius: 12, + alignItems: 'center', + justifyContent: 'center', + }, + chartPlaceholderText: { + fontSize: 14, + color: '#6b7280', + marginTop: 8, + }, + reportDownloadButton: { + flexDirection: 'row', + alignItems: 'center', + paddingVertical: 12, + borderBottomWidth: 1, + borderBottomColor: '#e5e7eb', + }, + reportDownloadIcon: { + marginRight: 12, + }, + reportDownloadText: { + fontSize: 14, + color: '#333', + }, +}); diff --git a/src/app/report-date-selector.tsx b/src/components/production/report-date-selector.tsx similarity index 100% rename from src/app/report-date-selector.tsx rename to src/components/production/report-date-selector.tsx diff --git a/src/components/production/report.tsx b/src/components/production/report.tsx new file mode 100644 index 0000000..9931edf --- /dev/null +++ b/src/components/production/report.tsx @@ -0,0 +1,186 @@ +import { FontAwesome } from '@expo/vector-icons'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; + +import ReportDateSelector from './report-date-selector'; + +export const Report = () => { + return ( + + {/* 报表概览 */} + + 生产报表 + + + + {/* 生产数据 */} + + + 生产数据 + 2023-12-05 + + + + + 1,250 + 计划产量 + + + 1,180 + 实际产量 + + + 94.4% + 计划完成率 + + + 98.3% + 良品率 + + + + + 各产品线产量对比 + + + 产量数据图表 + + + + + {/* 设备运行报表 */} + + + 设备运行报表 + 2023-12-05 + + + + + 32 + 设备总数 + + + 28 + 运行设备 + + + 87.5% + 设备利用率 + + + 4.2h + 平均运行 + + + + + 设备运行状态分布 + + + 设备状态图表 + + + + + {/* 报表下载 */} + + 生产报表 + + + 下载本月生产报表 + + + + ); +}; +const styles = StyleSheet.create({ + card: { + backgroundColor: 'white', + borderRadius: 16, + padding: 16, + marginBottom: 16, + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.05, + shadowRadius: 8, + elevation: 2, + }, + sectionTitle: { + fontSize: 18, + fontWeight: '600', + marginBottom: 12, + color: '#333', + }, + reportHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: 12, + }, + reportTitle: { + fontSize: 16, + fontWeight: '600', + }, + reportDate: { + fontSize: 14, + color: '#6b7280', + }, + reportGrid: { + flexDirection: 'row', + flexWrap: 'wrap', + marginBottom: 16, + }, + reportItem: { + width: '50%', + marginBottom: 12, + }, + reportItemValue: { + fontSize: 18, + fontWeight: 'bold', + color: '#0066ff', + marginBottom: 4, + }, + reportItemLabel: { + fontSize: 12, + color: '#6b7280', + }, + reportChart: { + marginBottom: 12, + }, + reportChartTitle: { + fontSize: 14, + fontWeight: '500', + marginBottom: 8, + }, + chartPlaceholder: { + height: 160, + backgroundColor: '#f9fafb', + borderRadius: 12, + alignItems: 'center', + justifyContent: 'center', + }, + chartPlaceholderText: { + fontSize: 14, + color: '#6b7280', + marginTop: 8, + }, + reportDownloadButton: { + flexDirection: 'row', + alignItems: 'center', + paddingVertical: 12, + borderBottomWidth: 1, + borderBottomColor: '#e5e7eb', + }, + reportDownloadIcon: { + marginRight: 12, + }, + reportDownloadText: { + fontSize: 14, + color: '#333', + }, +}); diff --git a/src/components/production/status-badge.tsx b/src/components/production/status-badge.tsx new file mode 100644 index 0000000..ab425d5 --- /dev/null +++ b/src/components/production/status-badge.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; + +import { Text, View } from '@/components/ui'; + +// 状态徽章组件 +type StatusBadgeProps = { + status: string; + color: string; + bgColor: string; +}; + +export const StatusBadge: React.FC = ({ + status, + color, + bgColor, +}) => ( + + {status} + +); + +const styles = StyleSheet.create({ + statusBadge: { + paddingHorizontal: 8, + paddingVertical: 4, + borderRadius: 999, + }, + statusBadgeText: { + fontSize: 12, + fontWeight: '500', + }, +}); diff --git a/src/components/production/task.tsx b/src/components/production/task.tsx new file mode 100644 index 0000000..949f3d3 --- /dev/null +++ b/src/components/production/task.tsx @@ -0,0 +1,272 @@ +import { FontAwesome } from '@expo/vector-icons'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; + +import { ProgressBar } from './progress-bar'; +import { StatusBadge } from './status-badge'; + +export const Task = () => { + return ( + + {/* 任务概览 */} + + 任务概览 + + + 24 + 任务总数 + + + 12 + 进行中 + + + 5 + 待分配 + + + + + + 员工任务完成率 + + 82.3% + ↑ 3.7% + + + + + + {/* 生产任务列表 */} + 生产任务列表 + + {/* 任务项目1 */} + + + 主板元器件贴装任务 + + + 任务编号：TA20231205-01 + + 负责人：李技术员 + 截止日期：2023-12-10 + + + + 完成进度 + 70% + + + + + + 所属计划： + PP20231128-01 + + + 详情 + + + + + {/* 任务项目2 */} + + + 电路板焊接任务 + + + 任务编号：TA20231205-02 + + 负责人：待分配 + 截止日期：2023-12-12 + + + + 完成进度 + 0% + + + + + + 所属计划： + PP20231128-01 + + + 详情 + + + + + {/* 任务项目3 */} + + + 音箱外壳注塑任务 + + + 任务编号：TA20231204-03 + + 负责人：王技术员 + 截止日期：2023-12-15 + + + + 完成进度 + 45% + + + + + + 所属计划： + PP20231130-02 + + + 详情 + + + + + ); +}; +const styles = StyleSheet.create({ + card: { + backgroundColor: 'white', + borderRadius: 16, + padding: 16, + marginBottom: 16, + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.05, + shadowRadius: 8, + elevation: 2, + }, + sectionTitle: { + fontSize: 18, + fontWeight: '600', + marginBottom: 12, + color: '#333', + }, + statsGrid: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 12, + }, + statItem: { + alignItems: 'center', + flex: 1, + }, + statValue: { + fontSize: 24, + fontWeight: 'bold', + }, + statLabel: { + fontSize: 12, + color: '#6b7280', + marginTop: 4, + }, + completionRateCard: { + backgroundColor: '#ebf5ff', + borderRadius: 12, + padding: 12, + flexDirection: 'row', + alignItems: 'center', + }, + completionRateIcon: { + marginRight: 12, + }, + completionRateContent: { + flex: 1, + }, + completionRateLabel: { + fontSize: 14, + fontWeight: '500', + }, + completionRateValue: { + flexDirection: 'row', + alignItems: 'center', + }, + completionRatePercentage: { + fontSize: 18, + fontWeight: 'bold', + color: '#0066ff', + marginRight: 8, + }, + completionRateTrend: { + fontSize: 12, + color: '#22c55e', + }, + planItemHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'flex-start', + marginBottom: 8, + }, + planItemTitle: { + fontSize: 16, + fontWeight: '500', + color: '#333', + }, + planItemCode: { + fontSize: 14, + color: '#6b7280', + marginBottom: 8, + }, + planItemInfo: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 12, + }, + planItemInfoText: { + fontSize: 14, + color: '#6b7280', + }, + progressContainer: { + marginBottom: 8, + }, + progressHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 4, + }, + progressLabel: { + fontSize: 14, + color: '#6b7280', + }, + progressBar: { + height: 6, + backgroundColor: '#e5e7eb', + borderRadius: 3, + overflow: 'hidden', + }, + progressValue: { + height: '100%', + borderRadius: 3, + }, + planItemFooter: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + planItemStats: { + flexDirection: 'row', + alignItems: 'center', + }, + planItemStatsText: { + fontSize: 14, + color: '#6b7280', + }, + planItemStatsValue: { + fontSize: 14, + fontWeight: '500', + marginRight: 12, + }, + planItemLink: { + color: '#0066ff', + fontSize: 14, + }, +}); -- Gitee From efd58b56dd9ab6f19050ae1ddd7193650e0367d4 Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Sun, 18 May 2025 00:10:29 +0800 Subject: [PATCH 14/20] =?UTF-8?q?refactor:=20=E5=B0=86=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E4=BB=8EStyleSheet=E8=BF=81=E7=A7=BB=E8=87=B3Tailwind=20CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将多个组件中的样式从React Native的StyleSheet迁移至Tailwind CSS，以提高代码的可维护性和可读性。主要修改包括： - 删除冗余的StyleSheet代码 - 使用Tailwind CSS类名替换内联样式 - 优化组件结构和注释 --- src/app/(app)/production.tsx | 53 +- src/components/production/equipment.tsx | 458 ++++----------- src/components/production/index.tsx | 32 +- src/components/production/plan.tsx | 257 +++------ src/components/production/process-node.tsx | 97 +--- src/components/production/process.tsx | 425 ++++---------- src/components/production/progress-bar.tsx | 538 +----------------- .../production/report-date-selector.tsx | 83 +-- src/components/production/report.tsx | 204 +++---- src/components/production/status-badge.tsx | 29 +- src/components/production/task.tsx | 306 ++++------ 11 files changed, 582 insertions(+), 1900 deletions(-) diff --git a/src/app/(app)/production.tsx b/src/app/(app)/production.tsx index 0a5539b..98f172e 100644 --- a/src/app/(app)/production.tsx +++ b/src/app/(app)/production.tsx @@ -1,6 +1,6 @@ // import { useRouter } from 'expo-router'; import React, { useState } from 'react'; -import { StyleSheet, TouchableOpacity, View } from 'react-native'; +import { TouchableOpacity, View } from 'react-native'; import { SegmentedControl, type SegmentedControlOption } from '@/components'; import { @@ -27,26 +27,26 @@ const Production: React.FC = () => { ]; return ( - + {/* 顶部导航 */} - + - + - + } /> - + {/* 分段控制器 */} { {/* 选项卡内容 */} {selectedTabIndex === 0 && } @@ -72,48 +72,11 @@ const Production: React.FC = () => { {/* 浮动按钮 */} - + ); }; -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#f5f5f5', - }, - headerButton: { - marginLeft: 16, - }, - - scrollView: { - flex: 1, - marginTop: 16, - }, - floatingButton: { - position: 'absolute', - right: 24, - bottom: 80, - width: 56, - height: 56, - borderRadius: 28, - backgroundColor: '#0066ff', - alignItems: 'center', - justifyContent: 'center', - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.25, - shadowRadius: 3.84, - elevation: 5, - }, - content: { - flex: 1, - paddingHorizontal: 16, - paddingTop: 16, - paddingBottom: 16, - }, -}); - export default Production; diff --git a/src/components/production/equipment.tsx b/src/components/production/equipment.tsx index b083f4e..cfefb68 100644 --- a/src/components/production/equipment.tsx +++ b/src/components/production/equipment.tsx @@ -1,11 +1,5 @@ import { FontAwesome } from '@expo/vector-icons'; -import { - ScrollView, - StyleSheet, - Text, - TouchableOpacity, - View, -} from 'react-native'; +import { ScrollView, Text, TouchableOpacity, View } from 'react-native'; import { StatusBadge } from './status-badge'; @@ -13,171 +7,188 @@ export const Equipment = () => { return ( {/* 设备概览 */} - - 设备概览 - - - 32 - 设备总数 - - - 25 - 运行中 - - - 2 - 故障 + + + 设备概览 + + + + 32 + 设备总数 + + + 25 + 运行中 + + + 2 + 故障 - + - - 设备综合效率(OEE) - - 87.2% - ↑ 2.1% + + 设备综合效率(OEE) + + + 87.2% + + ↑ 2.1% {/* 设备列表 */} - 设备列表 + 设备列表 {/* 设备项目1 */} - - - SMT贴片机#2 + + + + SMT贴片机#2 + - 设备编号：EQ20230501-02 + + 设备编号：EQ20230501-02 + - - - 设备温度 - 42°C + + + 设备温度 + 42°C - - 电机转速 - 1200 RPM + + 电机转速 + 1200 RPM - - 电压 - 220V + + 电压 + 220V - - 电流 - 5.2A + + 电流 + 5.2A - + - 设备警报 - 无异常警报 + 设备警报 + 无异常警报 - - - 今日运行： - 8.5小时 + + + 今日运行： + 8.5小时 - 详情 + 详情 {/* 设备项目2 */} - - - 波峰焊接机#1 + + + + 波峰焊接机#1 + - 设备编号：EQ20230602-05 + + 设备编号：EQ20230602-05 + - - - 设备温度 - 68°C + + + 设备温度 + 68°C - - 电机转速 - 0 RPM + + 电机转速 + 0 RPM - - 电压 - 0V + + 电压 + 0V - - 电流 - 0A + + 电流 + 0A - + - + 设备警报 - - 温控系统异常，需要维修 - + 温控系统异常，需要维修 - - - 停机时间： - 2.5小时 + + + 停机时间： + 2.5小时 - 详情 + 详情 {/* 设备维护计划 */} - 设备维护计划 - + + 设备维护计划 + + - - - 设备名称 - 维护类型 - 计划日期 - 负责人 - 状态 + + + + 设备名称 + + + 维护类型 + + + 计划日期 + + + 负责人 + + + 状态 + - - SMT贴片机#2 - 例行保养 - 2023-12-15 - 王工程师 - + + SMT贴片机#2 + 例行保养 + 2023-12-15 + 王工程师 + { /> - - 回流焊机#3 - 故障维修 - 2023-12-05 - 张工程师 - + + 回流焊机#3 + 故障维修 + 2023-12-05 + 张工程师 + - - PCB切割机#1 - 例行保养 - 2023-12-20 - 李工程师 - + + PCB切割机#1 + 例行保养 + 2023-12-20 + 李工程师 + { ); }; -const styles = StyleSheet.create({ - card: { - backgroundColor: 'white', - borderRadius: 16, - padding: 16, - marginBottom: 16, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.05, - shadowRadius: 8, - elevation: 2, - }, - sectionTitle: { - fontSize: 18, - fontWeight: '600', - marginBottom: 12, - color: '#333', - }, - statsGrid: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 12, - }, - statItem: { - alignItems: 'center', - flex: 1, - }, - statValue: { - fontSize: 24, - fontWeight: 'bold', - }, - statLabel: { - fontSize: 12, - color: '#6b7280', - marginTop: 4, - }, - completionRateCard: { - backgroundColor: '#ebf5ff', - borderRadius: 12, - padding: 12, - flexDirection: 'row', - alignItems: 'center', - }, - completionRateIcon: { - marginRight: 12, - }, - completionRateContent: { - flex: 1, - }, - completionRateLabel: { - fontSize: 14, - fontWeight: '500', - }, - completionRateValue: { - flexDirection: 'row', - alignItems: 'center', - }, - completionRatePercentage: { - fontSize: 18, - fontWeight: 'bold', - color: '#0066ff', - marginRight: 8, - }, - completionRateTrend: { - fontSize: 12, - color: '#22c55e', - }, - planItemHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'flex-start', - marginBottom: 8, - }, - planItemTitle: { - fontSize: 16, - fontWeight: '500', - color: '#333', - }, - planItemCode: { - fontSize: 14, - color: '#6b7280', - marginBottom: 8, - }, - planItemInfo: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 12, - }, - planItemInfoText: { - fontSize: 14, - color: '#6b7280', - }, - progressContainer: { - marginBottom: 8, - }, - progressHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 4, - }, - progressLabel: { - fontSize: 14, - color: '#6b7280', - }, - progressBar: { - height: 6, - backgroundColor: '#e5e7eb', - borderRadius: 3, - overflow: 'hidden', - }, - progressValue: { - height: '100%', - borderRadius: 3, - }, - planItemFooter: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - planItemStats: { - flexDirection: 'row', - alignItems: 'center', - }, - planItemStatsText: { - fontSize: 14, - color: '#6b7280', - }, - planItemStatsValue: { - fontSize: 14, - fontWeight: '500', - marginRight: 12, - }, - planItemLink: { - color: '#0066ff', - fontSize: 14, - }, - // 设备管理样式 - equipmentInfoGrid: { - flexDirection: 'row', - flexWrap: 'wrap', - marginBottom: 12, - }, - equipmentInfoItem: { - width: '50%', - marginBottom: 8, - }, - equipmentInfoLabel: { - fontSize: 12, - color: '#6b7280', - marginBottom: 4, - }, - equipmentInfoValue: { - fontSize: 14, - fontWeight: '500', - }, - equipmentAlert: { - backgroundColor: '#ebf5ff', - borderRadius: 12, - padding: 12, - marginBottom: 12, - flexDirection: 'row', - alignItems: 'flex-start', - }, - equipmentAlertError: { - backgroundColor: '#fee2e2', - }, - equipmentAlertIcon: { - marginRight: 8, - marginTop: 2, - }, - equipmentAlertTitle: { - fontSize: 14, - fontWeight: '500', - marginBottom: 4, - }, - equipmentAlertTitleError: { - color: '#ef4444', - }, - equipmentAlertText: { - fontSize: 14, - }, - // 设备维护计划表格样式 - maintenanceTable: { - width: '100%', - }, - maintenanceTableHeader: { - flexDirection: 'row', - backgroundColor: '#f3f4f6', - paddingVertical: 8, - borderBottomWidth: 1, - borderBottomColor: '#e5e7eb', - }, - maintenanceTableHeaderCell: { - width: 120, - paddingHorizontal: 8, - fontSize: 12, - fontWeight: '500', - color: '#6b7280', - textTransform: 'uppercase', - }, - maintenanceTableRow: { - flexDirection: 'row', - borderBottomWidth: 1, - borderBottomColor: '#e5e7eb', - paddingVertical: 8, - }, - maintenanceTableCell: { - width: 120, - paddingHorizontal: 8, - fontSize: 14, - }, - maintenanceTableCellStatus: { - width: 120, - paddingHorizontal: 8, - justifyContent: 'center', - }, -}); diff --git a/src/components/production/index.tsx b/src/components/production/index.tsx index 0dd495c..8549055 100644 --- a/src/components/production/index.tsx +++ b/src/components/production/index.tsx @@ -2,11 +2,27 @@ * 生产组件模块的入口文件 * 集中导出所有生产相关的组件，方便统一导入 */ -export * from './equipment'; // 导出生产计划项组件 -export * from './plan'; // 导出生产计划项组件 -export * from './process'; // 导出生产计划项组件 -export * from './process-node'; // 导出进度条组件 -export * from './progress-bar'; // 导出进度条组件 -export * from './report'; // 导出生产计划项组件 -export * from './status-badge'; // 导出进度条组件 -export * from './task'; // 导出生产计划项组件 + +// 设备管理相关组件 +export * from './equipment'; + +// 生产计划相关组件 +export * from './plan'; + +// 工序管理相关组件 +export * from './process'; + +// 工序节点组件，用于显示工序流程中的各个节点 +export * from './process-node'; + +// 进度条组件，用于显示各类进度 +export * from './progress-bar'; + +// 生产报表相关组件 +export * from './report'; + +// 状态徽章组件，用于显示各种状态标识 +export * from './status-badge'; + +// 生产任务相关组件 +export * from './task'; diff --git a/src/components/production/plan.tsx b/src/components/production/plan.tsx index 55e3d19..16f8a99 100644 --- a/src/components/production/plan.tsx +++ b/src/components/production/plan.tsx @@ -1,6 +1,6 @@ import { FontAwesome } from '@expo/vector-icons'; import { useRouter } from 'expo-router'; -import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import { Text, TouchableOpacity, View } from 'react-native'; import { ProgressBar } from './progress-bar'; import { StatusBadge } from './status-badge'; @@ -51,10 +51,11 @@ export const PlanItem: React.FC = ({ onViewDetail, }) => ( - - {/* 标题和状态区域 */} - - {title} + {/* 计划卡片 - 使用圆角、阴影和内边距 */} + + {/* 标题和状态区域 - 使用弹性布局和对齐方式 */} + + {title} = ({ /> - {/* 计划编号 */} - 计划编号：{code} + {/* 计划编号 - 使用灰色文本和下边距 */} + 计划编号：{code} - {/* 负责人和截止日期 */} - - 负责人：{manager} - 截止日期：{deadline} + {/* 负责人和截止日期 - 使用弹性布局和间距 */} + + 负责人：{manager} + 截止日期：{deadline} - {/* 进度条区域 */} - - - 完成进度 - {progress}% + {/* 进度条区域 - 使用下边距和嵌套布局 */} + + + 完成进度 + {progress}% - {/* 底部统计和详情链接 */} - - - 计划产量： - {total} - 已完成： - {completed} + {/* 底部统计和详情链接 - 使用弹性布局和对齐 */} + + + 计划产量： + {total} + 已完成： + {completed} - 详情 + 详情 ); +/** + * 生产计划列表组件 + * 显示生产概览和多个生产计划项 + */ export const Plans = () => { const router = useRouter(); + + // 模拟的生产计划数据 const planItems = [ { title: '智能手表主板生产计划', @@ -142,42 +149,54 @@ export const Plans = () => { return ( <> - {/* 生产概览 */} - - 生产概览 - - - 15 - 计划总数 + {/* 生产概览卡片 */} + + + 生产概览 + + + {/* 统计数据网格 */} + + + 15 + 计划总数 - - 8 - 进行中 + + 8 + 进行中 - - 3 - 待开始 + + 3 + 待开始 - + + {/* 完成率卡片 */} + - - 本月生产完成率 - - 78.5% - ↑ 5.2% + + 本月生产完成率 + + + 78.5% + + ↑ 5.2% - 生产计划列表 - {/* 生产计划列表 */} + {/* 生产计划列表标题 */} + + 生产计划列表 + + + {/* 生产计划列表项 */} {planItems.map((item) => ( { ); }; -const styles = StyleSheet.create({ - card: { - backgroundColor: 'white', - borderRadius: 16, - padding: 16, - marginBottom: 16, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.05, - shadowRadius: 8, - elevation: 2, - }, - sectionTitle: { - fontSize: 18, - fontWeight: '600', - marginBottom: 12, - color: '#333', - }, - statsGrid: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 12, - }, - statItem: { - alignItems: 'center', - flex: 1, - }, - statValue: { - fontSize: 24, - fontWeight: 'bold', - }, - statLabel: { - fontSize: 12, - color: '#6b7280', - marginTop: 4, - }, - completionRateCard: { - backgroundColor: '#ebf5ff', - borderRadius: 12, - padding: 12, - flexDirection: 'row', - alignItems: 'center', - }, - completionRateIcon: { - marginRight: 12, - }, - completionRateContent: { - flex: 1, - }, - completionRateLabel: { - fontSize: 14, - fontWeight: '500', - }, - completionRateValue: { - flexDirection: 'row', - alignItems: 'center', - }, - completionRatePercentage: { - fontSize: 18, - fontWeight: 'bold', - color: '#0066ff', - marginRight: 8, - }, - completionRateTrend: { - fontSize: 12, - color: '#22c55e', - }, - planItemHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'flex-start', - marginBottom: 8, - }, - planItemTitle: { - fontSize: 16, - fontWeight: '500', - color: '#333', - }, - statusBadge: { - paddingHorizontal: 8, - paddingVertical: 4, - borderRadius: 999, - }, - statusBadgeText: { - fontSize: 12, - fontWeight: '500', - }, - planItemCode: { - fontSize: 14, - color: '#6b7280', - marginBottom: 8, - }, - planItemInfo: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 12, - }, - planItemInfoText: { - fontSize: 14, - color: '#6b7280', - }, - progressContainer: { - marginBottom: 8, - }, - progressHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 4, - }, - progressLabel: { - fontSize: 14, - color: '#6b7280', - }, - progressBar: { - height: 6, - backgroundColor: '#e5e7eb', - borderRadius: 3, - overflow: 'hidden', - }, - progressValue: { - height: '100%', - borderRadius: 3, - }, - planItemFooter: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - planItemStats: { - flexDirection: 'row', - alignItems: 'center', - }, - planItemStatsText: { - fontSize: 14, - color: '#6b7280', - }, - planItemStatsValue: { - fontSize: 14, - fontWeight: '500', - marginRight: 12, - }, - planItemLink: { - color: '#0066ff', - fontSize: 14, - }, -}); diff --git a/src/components/production/process-node.tsx b/src/components/production/process-node.tsx index eb1461d..0760b20 100644 --- a/src/components/production/process-node.tsx +++ b/src/components/production/process-node.tsx @@ -1,37 +1,48 @@ import React from 'react'; -import { StyleSheet } from 'react-native'; import { Text, View } from '@/components/ui'; import { FontAwesome } from '@/components/ui/icons'; -// 工序流程节点组件 +/** + * 工序流程节点组件属性 + * @property icon - 节点图标名称 + * @property label - 节点标签文本 + * @property status - 节点状态：已完成(completed)、进行中(inProgress)、待开始(pending) + */ type ProcessNodeProps = { icon: string; label: string; status: 'completed' | 'inProgress' | 'pending'; }; +/** + * 工序流程节点组件 + * 用于显示生产流程中的各个工序节点及其状态 + */ export const ProcessNode: React.FC = ({ icon, label, status, }) => { + // 根据状态设置不同的图标、文本和颜色 let statusIcon = null; let statusText = ''; let bgColor = '#ebf5ff'; let iconColor = '#0066ff'; if (status === 'completed') { + // 已完成状态 statusIcon = ( - + ); statusText = '已完成'; bgColor = '#ebf5ff'; } else if (status === 'inProgress') { + // 进行中状态 statusIcon = ( - + ); @@ -39,84 +50,28 @@ export const ProcessNode: React.FC = ({ bgColor = '#dcfce7'; iconColor = '#22c55e'; } else { + // 待开始状态 statusText = '待开始'; } return ( - - + + {/* 节点圆圈 - 包含图标和状态指示器 */} + {statusIcon} - {label} + {/* 节点标签 */} + {label} + {/* 节点状态文本 - 根据状态显示不同颜色 */} {statusText} ); }; -const styles = StyleSheet.create({ - processNode: { - alignItems: 'center', - width: 64, - marginHorizontal: 8, - }, - processNodeCircle: { - width: 64, - height: 64, - borderRadius: 32, - alignItems: 'center', - justifyContent: 'center', - marginBottom: 8, - position: 'relative', - }, - statusIconCompleted: { - position: 'absolute', - top: -4, - right: -4, - width: 24, - height: 24, - borderRadius: 12, - backgroundColor: '#22c55e', - alignItems: 'center', - justifyContent: 'center', - }, - statusIconInProgress: { - position: 'absolute', - top: -4, - right: -4, - width: 24, - height: 24, - borderRadius: 12, - backgroundColor: '#0066ff', - alignItems: 'center', - justifyContent: 'center', - }, - processNodeLabel: { - fontSize: 12, - fontWeight: '500', - marginBottom: 2, - }, - processNodeStatus: { - fontSize: 12, - color: '#6b7280', - }, - processNodeStatusInProgress: { - color: '#0066ff', - }, - processFlowLineCompleted: { - width: 48, - height: 2, - backgroundColor: '#22c55e', - }, - processFlowLinePending: { - width: 48, - height: 2, - backgroundColor: '#e5e7eb', - }, -}); diff --git a/src/components/production/process.tsx b/src/components/production/process.tsx index 28bfdac..849921f 100644 --- a/src/components/production/process.tsx +++ b/src/components/production/process.tsx @@ -1,66 +1,74 @@ import { FontAwesome } from '@expo/vector-icons'; -import { - ScrollView, - StyleSheet, - Text, - TouchableOpacity, - View, -} from 'react-native'; +import { ScrollView, Text, TouchableOpacity, View } from 'react-native'; import { ProcessNode } from './process-node'; import { ProgressBar } from './progress-bar'; import { StatusBadge } from './status-badge'; +/** + * 工序管理组件 + * 展示工序概览、工序流程图和工序列表 + */ export const Process = () => { return ( - {/* 工序概览 */} - - 工序概览 - - - 18 - 工序总数 + {/* 工序概览 - 显示工序总数、使用中和待优化的统计信息 */} + + + 工序概览 + + + + + 18 + + 工序总数 - - 10 - 使用中 + + + 10 + + 使用中 - - 2 - 待优化 + + + 2 + + 待优化 - {/* 工序流程图 */} - - - 智能手表生产工序流程 - - 当前批次： - B20231204-01 + {/* 工序流程图 - 显示生产工序的流程和进度 */} + + + 智能手表生产工序流程 + + + 当前批次： + + B20231204-01 - + - + - + - + - + { - + {/* 工序进度信息 */} + - + 当前进度： - 40% | - 预计完成时间： - 2023-12-05 18:00 + 40% | 预计完成时间： + 2023-12-05 18:00 - {/* 工序列表 */} - 工序列表 + {/* 工序列表标题 */} + 工序列表 - {/* 工序项目1 */} - - - 元器件贴装 + {/* 工序项目1 - 元器件贴装 */} + + + + 元器件贴装 + - 工序编号：PR20231201-03 + + 工序编号：PR20231201-03 + - - - 负责人 - 王工程师 + {/* 工序基本信息 */} + + + 负责人 + 王工程师 - - 标准工时 - 45分钟/批次 + + 标准工时 + 45分钟/批次 - - - 设备利用率 - 85% + {/* 设备利用率进度条 */} + + + 设备利用率 + 85% - - 关联设备 - + {/* 关联设备信息 */} + + 关联设备 + - SMT贴片机#2 + SMT贴片机#2 - - - 良品率： - 98.3% + {/* 工序项目底部 - 良品率和详情链接 */} + + + 良品率： + 98.3% - 详情 + 详情 - {/* 工序项目2 */} - - - 电路板焊接 + {/* 工序项目2 - 电路板焊接 */} + + + + 电路板焊接 + - 工序编号：PR20231201-04 + + 工序编号：PR20231201-04 + - - - 负责人 - 李工程师 + {/* 工序基本信息 */} + + + 负责人 + 李工程师 - - 标准工时 - 60分钟/批次 + + 标准工时 + 60分钟/批次 - - - 设备利用率 - 75% + {/* 设备利用率进度条 */} + + + 设备利用率 + 75% - - 关联设备 - + {/* 关联设备信息 */} + + 关联设备 + - 波峰焊接机#1 + 波峰焊接机#1 - - - 良品率： - 97.5% + {/* 工序项目底部 - 良品率和详情链接 */} + + + 良品率： + 97.5% - 详情 + 详情 ); }; -const styles = StyleSheet.create({ - card: { - backgroundColor: 'white', - borderRadius: 16, - padding: 16, - marginBottom: 16, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.05, - shadowRadius: 8, - elevation: 2, - }, - sectionTitle: { - fontSize: 18, - fontWeight: '600', - marginBottom: 12, - color: '#333', - }, - statsGrid: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 12, - }, - statItem: { - alignItems: 'center', - flex: 1, - }, - statValue: { - fontSize: 24, - fontWeight: 'bold', - }, - statLabel: { - fontSize: 12, - color: '#6b7280', - marginTop: 4, - }, - planItemHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'flex-start', - marginBottom: 8, - }, - planItemTitle: { - fontSize: 16, - fontWeight: '500', - color: '#333', - }, - planItemCode: { - fontSize: 14, - color: '#6b7280', - marginBottom: 8, - }, - planItemInfo: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 12, - }, - planItemInfoText: { - fontSize: 14, - color: '#6b7280', - }, - progressContainer: { - marginBottom: 8, - }, - progressHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 4, - }, - progressLabel: { - fontSize: 14, - color: '#6b7280', - }, - progressBar: { - height: 6, - backgroundColor: '#e5e7eb', - borderRadius: 3, - overflow: 'hidden', - }, - progressValue: { - height: '100%', - borderRadius: 3, - }, - planItemFooter: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - planItemStats: { - flexDirection: 'row', - alignItems: 'center', - }, - planItemStatsText: { - fontSize: 14, - color: '#6b7280', - }, - planItemStatsValue: { - fontSize: 14, - fontWeight: '500', - marginRight: 12, - }, - planItemLink: { - color: '#0066ff', - fontSize: 14, - }, - // 工序流程图样式 - processFlowHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 12, - }, - processFlowTitle: { - fontSize: 16, - fontWeight: '500', - }, - processFlowBatch: { - flexDirection: 'row', - alignItems: 'center', - }, - processFlowBatchLabel: { - fontSize: 14, - color: '#0066ff', - fontWeight: '500', - }, - processFlowBatchValue: { - fontSize: 14, - }, - processFlowScroll: { - marginBottom: 12, - }, - processFlow: { - flexDirection: 'row', - alignItems: 'center', - paddingVertical: 8, - minWidth: '100%', - }, - processNodeLabel: { - fontSize: 12, - fontWeight: '500', - marginBottom: 2, - }, - processNodeStatus: { - fontSize: 12, - color: '#6b7280', - }, - processNodeStatusInProgress: { - color: '#0066ff', - }, - processFlowLineCompleted: { - width: 48, - height: 2, - backgroundColor: '#22c55e', - }, - processFlowLinePending: { - width: 48, - height: 2, - backgroundColor: '#e5e7eb', - }, - processFlowInfo: { - backgroundColor: '#ebf5ff', - borderRadius: 12, - padding: 12, - flexDirection: 'row', - alignItems: 'center', - }, - processFlowInfoIcon: { - marginRight: 8, - }, - processFlowInfoText: { - fontSize: 14, - }, - processFlowInfoValue: { - fontWeight: '500', - }, - // 工序管理样式 - processInfoGrid: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 12, - }, - processInfoItem: { - flex: 1, - }, - processInfoLabel: { - fontSize: 12, - color: '#6b7280', - marginBottom: 4, - }, - processInfoValue: { - fontSize: 14, - fontWeight: '500', - }, - processEquipment: { - backgroundColor: '#ebf5ff', - borderRadius: 12, - padding: 12, - marginBottom: 12, - }, - processEquipmentLabel: { - fontSize: 14, - fontWeight: '500', - marginBottom: 8, - }, - processEquipmentItem: { - flexDirection: 'row', - alignItems: 'center', - }, - processEquipmentIcon: { - marginRight: 8, - }, - processEquipmentText: { - fontSize: 14, - }, -}); diff --git a/src/components/production/progress-bar.tsx b/src/components/production/progress-bar.tsx index 427cbc4..0e4a35f 100644 --- a/src/components/production/progress-bar.tsx +++ b/src/components/production/progress-bar.tsx @@ -1,539 +1,33 @@ import React from 'react'; -import { StyleSheet } from 'react-native'; import { View } from '@/components/ui'; -// 进度条组件 +/** + * 进度条组件 + * 用于显示完成百分比的可视化进度条 + * @param progress - 进度百分比（0-100） + * @param color - 进度条颜色 + */ type ProgressBarProps = { progress: number; color: string; }; +/** + * 进度条组件 + * 根据传入的进度百分比和颜色显示一个水平进度条 + */ export const ProgressBar: React.FC = ({ progress, color, }) => ( - + ); - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#f5f5f5', - }, - headerButton: { - marginLeft: 16, - }, - - scrollView: { - flex: 1, - marginTop: 16, - }, - floatingButton: { - position: 'absolute', - right: 24, - bottom: 80, - width: 56, - height: 56, - borderRadius: 28, - backgroundColor: '#0066ff', - alignItems: 'center', - justifyContent: 'center', - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.25, - shadowRadius: 3.84, - elevation: 5, - }, - content: { - flex: 1, - paddingHorizontal: 16, - paddingTop: 16, - paddingBottom: 16, - }, - card: { - backgroundColor: 'white', - borderRadius: 16, - padding: 16, - marginBottom: 16, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.05, - shadowRadius: 8, - elevation: 2, - }, - sectionTitle: { - fontSize: 18, - fontWeight: '600', - marginBottom: 12, - color: '#333', - }, - statsGrid: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 12, - }, - statItem: { - alignItems: 'center', - flex: 1, - }, - statValue: { - fontSize: 24, - fontWeight: 'bold', - }, - statLabel: { - fontSize: 12, - color: '#6b7280', - marginTop: 4, - }, - completionRateCard: { - backgroundColor: '#ebf5ff', - borderRadius: 12, - padding: 12, - flexDirection: 'row', - alignItems: 'center', - }, - completionRateIcon: { - marginRight: 12, - }, - completionRateContent: { - flex: 1, - }, - completionRateLabel: { - fontSize: 14, - fontWeight: '500', - }, - completionRateValue: { - flexDirection: 'row', - alignItems: 'center', - }, - completionRatePercentage: { - fontSize: 18, - fontWeight: 'bold', - color: '#0066ff', - marginRight: 8, - }, - completionRateTrend: { - fontSize: 12, - color: '#22c55e', - }, - planItemHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'flex-start', - marginBottom: 8, - }, - planItemTitle: { - fontSize: 16, - fontWeight: '500', - color: '#333', - }, - statusBadge: { - paddingHorizontal: 8, - paddingVertical: 4, - borderRadius: 999, - }, - statusBadgeText: { - fontSize: 12, - fontWeight: '500', - }, - planItemCode: { - fontSize: 14, - color: '#6b7280', - marginBottom: 8, - }, - planItemInfo: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 12, - }, - planItemInfoText: { - fontSize: 14, - color: '#6b7280', - }, - progressContainer: { - marginBottom: 8, - }, - progressHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 4, - }, - progressLabel: { - fontSize: 14, - color: '#6b7280', - }, - progressBar: { - height: 6, - backgroundColor: '#e5e7eb', - borderRadius: 3, - overflow: 'hidden', - }, - progressValue: { - height: '100%', - borderRadius: 3, - }, - planItemFooter: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - planItemStats: { - flexDirection: 'row', - alignItems: 'center', - }, - planItemStatsText: { - fontSize: 14, - color: '#6b7280', - }, - planItemStatsValue: { - fontSize: 14, - fontWeight: '500', - marginRight: 12, - }, - planItemLink: { - color: '#0066ff', - fontSize: 14, - }, - tabContent: { - padding: 16, - backgroundColor: 'white', - borderRadius: 16, - alignItems: 'center', - justifyContent: 'center', - minHeight: 200, - }, - tabContentText: { - fontSize: 16, - color: '#6b7280', - }, - // 工序流程图样式 - processFlowHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 12, - }, - processFlowTitle: { - fontSize: 16, - fontWeight: '500', - }, - processFlowBatch: { - flexDirection: 'row', - alignItems: 'center', - }, - processFlowBatchLabel: { - fontSize: 14, - color: '#0066ff', - fontWeight: '500', - }, - processFlowBatchValue: { - fontSize: 14, - }, - processFlowScroll: { - marginBottom: 12, - }, - processFlow: { - flexDirection: 'row', - alignItems: 'center', - paddingVertical: 8, - minWidth: '100%', - }, - processNode: { - alignItems: 'center', - width: 64, - marginHorizontal: 8, - }, - processNodeCircle: { - width: 64, - height: 64, - borderRadius: 32, - alignItems: 'center', - justifyContent: 'center', - marginBottom: 8, - position: 'relative', - }, - statusIconCompleted: { - position: 'absolute', - top: -4, - right: -4, - width: 24, - height: 24, - borderRadius: 12, - backgroundColor: '#22c55e', - alignItems: 'center', - justifyContent: 'center', - }, - statusIconInProgress: { - position: 'absolute', - top: -4, - right: -4, - width: 24, - height: 24, - borderRadius: 12, - backgroundColor: '#0066ff', - alignItems: 'center', - justifyContent: 'center', - }, - processNodeLabel: { - fontSize: 12, - fontWeight: '500', - marginBottom: 2, - }, - processNodeStatus: { - fontSize: 12, - color: '#6b7280', - }, - processNodeStatusInProgress: { - color: '#0066ff', - }, - processFlowLineCompleted: { - width: 48, - height: 2, - backgroundColor: '#22c55e', - }, - processFlowLinePending: { - width: 48, - height: 2, - backgroundColor: '#e5e7eb', - }, - processFlowInfo: { - backgroundColor: '#ebf5ff', - borderRadius: 12, - padding: 12, - flexDirection: 'row', - alignItems: 'center', - }, - processFlowInfoIcon: { - marginRight: 8, - }, - processFlowInfoText: { - fontSize: 14, - }, - processFlowInfoValue: { - fontWeight: '500', - }, - // 工序管理样式 - processInfoGrid: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 12, - }, - processInfoItem: { - flex: 1, - }, - processInfoLabel: { - fontSize: 12, - color: '#6b7280', - marginBottom: 4, - }, - processInfoValue: { - fontSize: 14, - fontWeight: '500', - }, - processEquipment: { - backgroundColor: '#ebf5ff', - borderRadius: 12, - padding: 12, - marginBottom: 12, - }, - processEquipmentLabel: { - fontSize: 14, - fontWeight: '500', - marginBottom: 8, - }, - processEquipmentItem: { - flexDirection: 'row', - alignItems: 'center', - }, - processEquipmentIcon: { - marginRight: 8, - }, - processEquipmentText: { - fontSize: 14, - }, - // 设备管理样式 - equipmentInfoGrid: { - flexDirection: 'row', - flexWrap: 'wrap', - marginBottom: 12, - }, - equipmentInfoItem: { - width: '50%', - marginBottom: 8, - }, - equipmentInfoLabel: { - fontSize: 12, - color: '#6b7280', - marginBottom: 4, - }, - equipmentInfoValue: { - fontSize: 14, - fontWeight: '500', - }, - equipmentAlert: { - backgroundColor: '#ebf5ff', - borderRadius: 12, - padding: 12, - marginBottom: 12, - flexDirection: 'row', - alignItems: 'flex-start', - }, - equipmentAlertError: { - backgroundColor: '#fee2e2', - }, - equipmentAlertIcon: { - marginRight: 8, - marginTop: 2, - }, - equipmentAlertTitle: { - fontSize: 14, - fontWeight: '500', - marginBottom: 4, - }, - equipmentAlertTitleError: { - color: '#ef4444', - }, - equipmentAlertText: { - fontSize: 14, - }, - // 设备维护计划表格样式 - maintenanceTable: { - width: '100%', - }, - maintenanceTableHeader: { - flexDirection: 'row', - backgroundColor: '#f3f4f6', - paddingVertical: 8, - borderBottomWidth: 1, - borderBottomColor: '#e5e7eb', - }, - maintenanceTableHeaderCell: { - width: 120, - paddingHorizontal: 8, - fontSize: 12, - fontWeight: '500', - color: '#6b7280', - textTransform: 'uppercase', - }, - maintenanceTableRow: { - flexDirection: 'row', - borderBottomWidth: 1, - borderBottomColor: '#e5e7eb', - paddingVertical: 8, - }, - maintenanceTableCell: { - width: 120, - paddingHorizontal: 8, - fontSize: 14, - }, - maintenanceTableCellStatus: { - width: 120, - paddingHorizontal: 8, - justifyContent: 'center', - }, - // 报表样式 - reportDateSelector: { - flexDirection: 'row', - backgroundColor: '#f3f4f6', - borderRadius: 8, - padding: 4, - marginTop: 12, - }, - reportDateButton: { - flex: 1, - paddingVertical: 8, - alignItems: 'center', - borderRadius: 6, - }, - reportDateButtonActive: { - backgroundColor: 'white', - shadowColor: '#000', - shadowOffset: { width: 0, height: 1 }, - shadowOpacity: 0.1, - shadowRadius: 2, - elevation: 1, - }, - reportDateButtonText: { - fontSize: 14, - color: '#6b7280', - }, - reportDateButtonTextActive: { - color: '#0066ff', - fontWeight: '500', - }, - reportHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 12, - }, - reportTitle: { - fontSize: 16, - fontWeight: '600', - }, - reportDate: { - fontSize: 14, - color: '#6b7280', - }, - reportGrid: { - flexDirection: 'row', - flexWrap: 'wrap', - marginBottom: 16, - }, - reportItem: { - width: '50%', - marginBottom: 12, - }, - reportItemValue: { - fontSize: 18, - fontWeight: 'bold', - color: '#0066ff', - marginBottom: 4, - }, - reportItemLabel: { - fontSize: 12, - color: '#6b7280', - }, - reportChart: { - marginBottom: 12, - }, - reportChartTitle: { - fontSize: 14, - fontWeight: '500', - marginBottom: 8, - }, - chartPlaceholder: { - height: 160, - backgroundColor: '#f9fafb', - borderRadius: 12, - alignItems: 'center', - justifyContent: 'center', - }, - chartPlaceholderText: { - fontSize: 14, - color: '#6b7280', - marginTop: 8, - }, - reportDownloadButton: { - flexDirection: 'row', - alignItems: 'center', - paddingVertical: 12, - borderBottomWidth: 1, - borderBottomColor: '#e5e7eb', - }, - reportDownloadIcon: { - marginRight: 12, - }, - reportDownloadText: { - fontSize: 14, - color: '#333', - }, -}); diff --git a/src/components/production/report-date-selector.tsx b/src/components/production/report-date-selector.tsx index 49e510f..0686e99 100644 --- a/src/components/production/report-date-selector.tsx +++ b/src/components/production/report-date-selector.tsx @@ -1,64 +1,59 @@ import React, { useState } from 'react'; -import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import { Text, TouchableOpacity, View } from 'react-native'; +/** + * 报告类型定义 + * daily: 日报 + * weekly: 周报 + * monthly: 月报 + */ type ReportType = 'daily' | 'weekly' | 'monthly'; +/** + * 报告日期选择器组件 + * 用于在日报、周报和月报之间切换 + */ const ReportDateSelector: React.FC = () => { + // 当前选中的报告类型，默认为日报 const [selectedReportType, setSelectedReportType] = useState('daily'); + /** + * 处理报告类型变更 + * @param type 要切换到的报告类型 + */ const handleReportTypeChange = (type: ReportType) => { setSelectedReportType(type); }; return ( - + handleReportTypeChange('daily')} > 日报 handleReportTypeChange('weekly')} > 周报 handleReportTypeChange('monthly')} > 月报 @@ -67,36 +62,4 @@ const ReportDateSelector: React.FC = () => { ); }; -const styles = StyleSheet.create({ - reportDateSelector: { - flexDirection: 'row', - backgroundColor: '#f3f4f6', - borderRadius: 8, - padding: 4, - marginTop: 12, - }, - reportDateButton: { - flex: 1, - paddingVertical: 8, - alignItems: 'center', - borderRadius: 6, - }, - reportDateButtonActive: { - backgroundColor: 'white', - shadowColor: '#000', - shadowOffset: { width: 0, height: 1 }, - shadowOpacity: 0.1, - shadowRadius: 2, - elevation: 1, - }, - reportDateButtonText: { - fontSize: 14, - color: '#6b7280', - }, - reportDateButtonTextActive: { - color: '#0066ff', - fontWeight: '500', - }, -}); - export default ReportDateSelector; diff --git a/src/components/production/report.tsx b/src/components/production/report.tsx index 9931edf..08fb16d 100644 --- a/src/components/production/report.tsx +++ b/src/components/production/report.tsx @@ -1,186 +1,110 @@ import { FontAwesome } from '@expo/vector-icons'; -import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import { Text, TouchableOpacity, View } from 'react-native'; import ReportDateSelector from './report-date-selector'; +/** + * 生产报表组件 + * 展示生产数据、设备运行报表和报表下载功能 + */ export const Report = () => { return ( - {/* 报表概览 */} - - 生产报表 + {/* 报表概览 - 标题和日期选择器 */} + + 生产报表 - {/* 生产数据 */} - - - 生产数据 - 2023-12-05 + {/* 生产数据卡片 */} + + + 生产数据 + 2023-12-05 - - - 1,250 - 计划产量 + {/* 生产数据统计网格 */} + + + 1,250 + 计划产量 - - 1,180 - 实际产量 + + 1,180 + 实际产量 - - 94.4% - 计划完成率 + + 94.4% + 计划完成率 - - 98.3% - 良品率 + + 98.3% + 良品率 - - 各产品线产量对比 - + {/* 产品线产量对比图表 */} + + 各产品线产量对比 + - 产量数据图表 + 产量数据图表 - {/* 设备运行报表 */} - - - 设备运行报表 - 2023-12-05 + {/* 设备运行报表卡片 */} + + + 设备运行报表 + 2023-12-05 - - - 32 - 设备总数 + {/* 设备运行数据统计网格 */} + + + 32 + 设备总数 - - 28 - 运行设备 + + 28 + 运行设备 - - 87.5% - 设备利用率 + + 87.5% + 设备利用率 - - 4.2h - 平均运行 + + 4.2h + 平均运行 - - 设备运行状态分布 - + {/* 设备运行状态分布图表 */} + + 设备运行状态分布 + - 设备状态图表 + 设备状态图表 - {/* 报表下载 */} - - 生产报表 - + {/* 报表下载卡片 */} + + + 生产报表 + + - 下载本月生产报表 + 下载本月生产报表 ); }; -const styles = StyleSheet.create({ - card: { - backgroundColor: 'white', - borderRadius: 16, - padding: 16, - marginBottom: 16, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.05, - shadowRadius: 8, - elevation: 2, - }, - sectionTitle: { - fontSize: 18, - fontWeight: '600', - marginBottom: 12, - color: '#333', - }, - reportHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 12, - }, - reportTitle: { - fontSize: 16, - fontWeight: '600', - }, - reportDate: { - fontSize: 14, - color: '#6b7280', - }, - reportGrid: { - flexDirection: 'row', - flexWrap: 'wrap', - marginBottom: 16, - }, - reportItem: { - width: '50%', - marginBottom: 12, - }, - reportItemValue: { - fontSize: 18, - fontWeight: 'bold', - color: '#0066ff', - marginBottom: 4, - }, - reportItemLabel: { - fontSize: 12, - color: '#6b7280', - }, - reportChart: { - marginBottom: 12, - }, - reportChartTitle: { - fontSize: 14, - fontWeight: '500', - marginBottom: 8, - }, - chartPlaceholder: { - height: 160, - backgroundColor: '#f9fafb', - borderRadius: 12, - alignItems: 'center', - justifyContent: 'center', - }, - chartPlaceholderText: { - fontSize: 14, - color: '#6b7280', - marginTop: 8, - }, - reportDownloadButton: { - flexDirection: 'row', - alignItems: 'center', - paddingVertical: 12, - borderBottomWidth: 1, - borderBottomColor: '#e5e7eb', - }, - reportDownloadIcon: { - marginRight: 12, - }, - reportDownloadText: { - fontSize: 14, - color: '#333', - }, -}); diff --git a/src/components/production/status-badge.tsx b/src/components/production/status-badge.tsx index ab425d5..b94e0c4 100644 --- a/src/components/production/status-badge.tsx +++ b/src/components/production/status-badge.tsx @@ -1,12 +1,19 @@ import React from 'react'; -import { StyleSheet } from 'react-native'; import { Text, View } from '@/components/ui'; -// 状态徽章组件 +/** + * StatusBadge 组件 - 用于显示状态标签 + * + * 该组件创建一个圆角标签，用于展示各种状态信息（如：进行中、已完成、待处理等） + * 支持自定义文本颜色和背景颜色 + */ type StatusBadgeProps = { + /** 状态文本 */ status: string; + /** 文本颜色 */ color: string; + /** 背景颜色 */ bgColor: string; }; @@ -15,19 +22,9 @@ export const StatusBadge: React.FC = ({ color, bgColor, }) => ( - - {status} + + + {status} + ); - -const styles = StyleSheet.create({ - statusBadge: { - paddingHorizontal: 8, - paddingVertical: 4, - borderRadius: 999, - }, - statusBadgeText: { - fontSize: 12, - fontWeight: '500', - }, -}); diff --git a/src/components/production/task.tsx b/src/components/production/task.tsx index 949f3d3..ab79175 100644 --- a/src/components/production/task.tsx +++ b/src/components/production/task.tsx @@ -1,272 +1,166 @@ import { FontAwesome } from '@expo/vector-icons'; -import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import { Text, TouchableOpacity, View } from 'react-native'; import { ProgressBar } from './progress-bar'; import { StatusBadge } from './status-badge'; +/** + * Task 组件 - 生产任务管理界面 + * + * 该组件展示生产任务的概览和详细列表，包括： + * 1. 任务概览：显示任务总数、进行中任务数、待分配任务数和员工任务完成率 + * 2. 生产任务列表：展示各个生产任务的详细信息和进度 + */ export const Task = () => { return ( {/* 任务概览 */} - - 任务概览 - - - 24 - 任务总数 + + + 任务概览 + + + + + 24 + + 任务总数 - - 12 - 进行中 + + + 12 + + 进行中 - - 5 - 待分配 + + + 5 + + 待分配 - + - - 员工任务完成率 - - 82.3% - ↑ 3.7% + + 员工任务完成率 + + + 82.3% + + ↑ 3.7% {/* 生产任务列表 */} - 生产任务列表 + + 生产任务列表 + {/* 任务项目1 */} - - - 主板元器件贴装任务 + + + + 主板元器件贴装任务 + - 任务编号：TA20231205-01 - - 负责人：李技术员 - 截止日期：2023-12-10 + + 任务编号：TA20231205-01 + + + 负责人：李技术员 + 截止日期：2023-12-10 - - - 完成进度 - 70% + + + 完成进度 + 70% - - - 所属计划： - PP20231128-01 + + + 所属计划： + PP20231128-01 - 详情 + 详情 {/* 任务项目2 */} - - - 电路板焊接任务 + + + + 电路板焊接任务 + - 任务编号：TA20231205-02 - - 负责人：待分配 - 截止日期：2023-12-12 + + 任务编号：TA20231205-02 + + + 负责人：待分配 + 截止日期：2023-12-12 - - - 完成进度 - 0% + + + 完成进度 + 0% - - - 所属计划： - PP20231128-01 + + + 所属计划： + PP20231128-01 - 详情 + 详情 {/* 任务项目3 */} - - - 音箱外壳注塑任务 + + + + 音箱外壳注塑任务 + - 任务编号：TA20231204-03 - - 负责人：王技术员 - 截止日期：2023-12-15 + + 任务编号：TA20231204-03 + + + 负责人：王技术员 + 截止日期：2023-12-15 - - - 完成进度 - 45% + + + 完成进度 + 45% - - - 所属计划： - PP20231130-02 + + + 所属计划： + PP20231130-02 - 详情 + 详情 ); }; -const styles = StyleSheet.create({ - card: { - backgroundColor: 'white', - borderRadius: 16, - padding: 16, - marginBottom: 16, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.05, - shadowRadius: 8, - elevation: 2, - }, - sectionTitle: { - fontSize: 18, - fontWeight: '600', - marginBottom: 12, - color: '#333', - }, - statsGrid: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 12, - }, - statItem: { - alignItems: 'center', - flex: 1, - }, - statValue: { - fontSize: 24, - fontWeight: 'bold', - }, - statLabel: { - fontSize: 12, - color: '#6b7280', - marginTop: 4, - }, - completionRateCard: { - backgroundColor: '#ebf5ff', - borderRadius: 12, - padding: 12, - flexDirection: 'row', - alignItems: 'center', - }, - completionRateIcon: { - marginRight: 12, - }, - completionRateContent: { - flex: 1, - }, - completionRateLabel: { - fontSize: 14, - fontWeight: '500', - }, - completionRateValue: { - flexDirection: 'row', - alignItems: 'center', - }, - completionRatePercentage: { - fontSize: 18, - fontWeight: 'bold', - color: '#0066ff', - marginRight: 8, - }, - completionRateTrend: { - fontSize: 12, - color: '#22c55e', - }, - planItemHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'flex-start', - marginBottom: 8, - }, - planItemTitle: { - fontSize: 16, - fontWeight: '500', - color: '#333', - }, - planItemCode: { - fontSize: 14, - color: '#6b7280', - marginBottom: 8, - }, - planItemInfo: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 12, - }, - planItemInfoText: { - fontSize: 14, - color: '#6b7280', - }, - progressContainer: { - marginBottom: 8, - }, - progressHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 4, - }, - progressLabel: { - fontSize: 14, - color: '#6b7280', - }, - progressBar: { - height: 6, - backgroundColor: '#e5e7eb', - borderRadius: 3, - overflow: 'hidden', - }, - progressValue: { - height: '100%', - borderRadius: 3, - }, - planItemFooter: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - planItemStats: { - flexDirection: 'row', - alignItems: 'center', - }, - planItemStatsText: { - fontSize: 14, - color: '#6b7280', - }, - planItemStatsValue: { - fontSize: 14, - fontWeight: '500', - marginRight: 12, - }, - planItemLink: { - color: '#0066ff', - fontSize: 14, - }, -}); -- Gitee From 6fb006800e2d85e2ebe8f55b1cc7f8c3f8cdb48e Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Sun, 18 May 2025 00:15:47 +0800 Subject: [PATCH 15/20] =?UTF-8?q?refactor(profile):=20=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=20Tailwind=20CSS=20=E6=9B=BF=E6=8D=A2=E5=86=85=E8=81=94?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BB=A5=E6=8F=90=E5=8D=87=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E5=8F=AF=E7=BB=B4=E6=8A=A4=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(app)/profile.tsx | 236 +++++++++----------------------------- 1 file changed, 53 insertions(+), 183 deletions(-) diff --git a/src/app/(app)/profile.tsx b/src/app/(app)/profile.tsx index 9ab8bde..99379d8 100644 --- a/src/app/(app)/profile.tsx +++ b/src/app/(app)/profile.tsx @@ -1,11 +1,6 @@ import { Env } from '@env'; import { Link, useRouter } from 'expo-router'; -import { - Image, - SafeAreaView, - StyleSheet, - TouchableOpacity, -} from 'react-native'; +import { Image, SafeAreaView, TouchableOpacity } from 'react-native'; import { NavHeader, ScrollView, Text, View } from '@/components/ui'; import { FontAwesome } from '@/components/ui/icons'; @@ -14,6 +9,15 @@ import { userInfo as user } from '@/lib/user'; import SettingItem from '../settings/components/setting-item'; +/** + * 个人资料页面 + * + * 展示用户信息、工作统计和功能菜单，包括： + * 1. 用户信息卡片：头像、姓名、角色、徽章和统计数据 + * 2. 功能菜单：个人资料、账号安全、消息通知等 + * 3. 工作统计：任务完成率、计划执行率、质检合格率 + * 4. 退出登录按钮 + */ export default function Settings() { const signOut = useAuth.use.signOut(); const userInfo = user.use.userInfo(); @@ -29,9 +33,8 @@ export default function Settings() { return ( <> {/* */} - + {/* 顶部导航 */} - } /> - + {/* 用户信息卡片 */} - - + + - - {userInfo?.UserName} - 生产部门 · 经理 - - - 管理员 + + {userInfo?.UserName} + 生产部门 · 经理 + + + 管理员 - - 已认证 + + 已认证 - - - 28 - 待处理任务 + + + 28 + 待处理任务 - - 15 - 今日完成 + + 15 + 今日完成 - - 98% - 任务完成率 + + 98% + 任务完成率 {/* 功能菜单 */} - + {/* 工作统计 */} - - 工作统计 - + + 工作统计 + @@ -129,11 +132,10 @@ export default function Settings() { {/* 退出登录按钮 */} signOut()} - className="m-10" > - + @@ -141,7 +143,13 @@ export default function Settings() { ); } -// 进度条组件 +/** + * 进度条组件 + * + * @param label - 进度条标签 + * @param value - 进度值（0-100） + * @param color - 进度条颜色 + */ type ProgressBarProps = { label: string; value: number; @@ -149,154 +157,16 @@ type ProgressBarProps = { }; const ProgressBar: React.FC = ({ label, value, color }) => ( - - - {label} - {value}% + + + {label} + {value}% - + ); -// 样式 -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#f5f5f5', - }, - content: { - flex: 1, - padding: 16, - paddingBottom: 86, // 为底部导航留出空间 - }, - card: { - backgroundColor: 'white', - borderRadius: 16, - padding: 16, - marginBottom: 16, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.05, - shadowRadius: 10, - elevation: 2, - }, - userInfoContainer: { - flexDirection: 'row', - alignItems: 'center', - }, - avatar: { - width: 64, - height: 64, - borderRadius: 32, - marginRight: 16, - }, - userInfo: { - flex: 1, - }, - userName: { - fontSize: 20, - fontWeight: 'bold', - }, - userRole: { - fontSize: 14, - color: '#6b7280', - }, - badgeContainer: { - flexDirection: 'row', - marginTop: 4, - }, - adminBadge: { - backgroundColor: '#dbeafe', - paddingHorizontal: 8, - paddingVertical: 2, - borderRadius: 12, - }, - adminBadgeText: { - fontSize: 12, - color: '#1e40af', - }, - verifiedBadge: { - backgroundColor: '#dcfce7', - paddingHorizontal: 8, - paddingVertical: 2, - borderRadius: 12, - marginLeft: 8, - }, - verifiedBadgeText: { - fontSize: 12, - color: '#166534', - }, - statsContainer: { - flexDirection: 'row', - marginTop: 16, - paddingTop: 16, - borderTopWidth: 1, - borderTopColor: '#f3f4f6', - }, - statItem: { - flex: 1, - alignItems: 'center', - }, - statValue: { - fontSize: 18, - fontWeight: 'bold', - }, - statLabel: { - fontSize: 12, - color: '#6b7280', - }, - sectionTitle: { - fontSize: 18, - fontWeight: '600', - marginBottom: 12, - }, - progressContainer: { - marginTop: 4, - }, - progressItem: { - marginBottom: 12, - }, - progressHeader: { - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 4, - }, - progressLabel: { - fontSize: 14, - }, - progressValue: { - fontSize: 14, - fontWeight: '500', - }, - progressTrack: { - height: 8, - backgroundColor: '#e5e7eb', - borderRadius: 4, - overflow: 'hidden', - }, - progressFill: { - height: '100%', - borderRadius: 4, - }, - logoutButton: { - backgroundColor: '#dc2626', - borderWidth: 1, - borderColor: '#e5e7eb', - borderRadius: 12, - paddingVertical: 12, - alignItems: 'center', - marginTop: 24, - marginBottom: 30, - }, - logoutButtonText: { - color: '#FFFFFF', - fontWeight: '500', - // fontSize: 16, - }, -}); -- Gitee From cc82bcfbea7a8e3984f2f9a1cf116f6288e108cb Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Sun, 18 May 2025 10:05:42 +0800 Subject: [PATCH 16/20] =?UTF-8?q?refactor(settings):=20=E4=BD=BF=E7=94=A8T?= =?UTF-8?q?ailwind=20CSS=E6=9B=BF=E6=8D=A2=E5=86=85=E8=81=94=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E4=BB=A5=E6=8F=90=E5=8D=87=E4=BB=A3=E7=A0=81=E5=8F=AF?= =?UTF-8?q?=E7=BB=B4=E6=8A=A4=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/settings/about.tsx | 90 ++++++---------- src/app/settings/components/setting-item.tsx | 68 +++++------- src/app/settings/index.tsx | 106 ++++++------------- 3 files changed, 92 insertions(+), 172 deletions(-) diff --git a/src/app/settings/about.tsx b/src/app/settings/about.tsx index 7ce18b0..1f56f7c 100644 --- a/src/app/settings/about.tsx +++ b/src/app/settings/about.tsx @@ -1,7 +1,7 @@ import { Env } from '@env'; import * as Updates from 'expo-updates'; import React, { useEffect, useState } from 'react'; -import { Platform, SafeAreaView, ScrollView, StyleSheet } from 'react-native'; +import { Platform, SafeAreaView, ScrollView } from 'react-native'; import { getVersion } from 'react-native-device-info'; import { KeyboardAvoidingView } from 'react-native-keyboard-controller'; @@ -9,38 +9,59 @@ import { Image, NavHeader, Text, View } from '@/components/ui'; import { translate } from '@/lib/i18n'; export default function LoginForm() { + // 存储更新ID的状态 const [updateId, setUpdateId] = useState(null); + + // 在组件挂载时获取更新ID（仅在非web平台） useEffect(() => { if (Platform.OS !== 'web') { const updateId1 = Updates?.updateId; setUpdateId(updateId1); } }, []); + return ( - + // 安全区域视图，确保内容不会被设备的缺口遮挡 + + {/* 导航头部 */} - + + {/* 可滚动内容区域 */} + {/* 顶部空间 */} - + - {/* Logo和标题 */} - - + {/* Logo和标题区域 */} + + {/* Logo圆形背景 */} + - {Env.NAME + ' V' + getVersion()} - {translate('login.sub_title')} + + {/* 应用名称和版本 */} + + {Env.NAME + ' V' + getVersion()} + + + {/* 副标题 */} + + {translate('login.sub_title')} + + + {/* 版本ID（如果存在） */} {updateId ? ( - 版本ID：{updateId} + + 版本ID：{updateId} + ) : null} @@ -48,48 +69,3 @@ export default function LoginForm() { ); } - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: 'white', - }, - keyboardAvoidingView: { - flex: 1, - }, - scrollView: { - flexGrow: 1, - paddingHorizontal: 16, - }, - topSpace: { - height: '10%', - }, - logoContainer: { - alignItems: 'center', - marginBottom: 32, - }, - logoCircle: { - width: 80, - height: 80, - borderRadius: 40, - backgroundColor: '#EBF5FF', - alignItems: 'center', - justifyContent: 'center', - marginBottom: 16, - }, - title: { - fontSize: 18, - fontWeight: 'bold', - color: '#333', - }, - subtitle: { - fontSize: 16, - color: '#6b7280', - marginTop: 8, - }, - copyright: { - fontSize: 14, - color: '#6b7280', - marginTop: 8, - }, -}); diff --git a/src/app/settings/components/setting-item.tsx b/src/app/settings/components/setting-item.tsx index f040134..9dc4614 100644 --- a/src/app/settings/components/setting-item.tsx +++ b/src/app/settings/components/setting-item.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { StyleSheet, Switch, Text, TouchableOpacity, View } from 'react-native'; +import { Switch, Text, TouchableOpacity, View } from 'react-native'; import { FontAwesome } from '@/components/ui/icons'; import type { TxKeyPath } from '@/lib/i18n'; @@ -17,6 +17,8 @@ import { translate } from '@/lib/i18n'; * @property hasNavigation - 是否显示导航箭头(默认false) * @property onPress - 点击回调函数 * @property isLast - 是否是列表最后一项(默认false) + * @property tx - 主标题国际化键值 + * @property subtx - 副标题国际化键值 */ type SettingItemProps = { icon: string; @@ -51,6 +53,7 @@ const SettingItem: React.FC = ({ tx, subtx, }) => { + // 开关状态管理 const [isEnabled, setIsEnabled] = useState(defaultToggleValue); /** @@ -64,20 +67,32 @@ const SettingItem: React.FC = ({ return ( - {/* 左侧内容区域 */} - - + {/* 左侧内容区域：图标和文本 */} + + {/* 图标容器 */} + + + {/* 文本内容区域 */} - {tx ? translate(tx) : title} + {/* 主标题 - 优先使用国际化文本 */} + + {tx ? translate(tx) : title} + + + {/* 副标题（如果存在） */} {(subtitle || subtx) && ( - + {subtx ? translate(subtx) : subtitle} )} @@ -85,6 +100,7 @@ const SettingItem: React.FC = ({ {/* 右侧功能区域 */} + {/* 开关控件（如果启用） */} {hasToggle && ( = ({ /> )} + {/* 导航箭头（如果启用） */} {hasNavigation && ( )} @@ -102,41 +119,4 @@ const SettingItem: React.FC = ({ ); }; -// 样式定义 -const styles = StyleSheet.create({ - settingItem: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - paddingVertical: 16, - borderBottomWidth: 1, - borderBottomColor: '#f0f0f0', - }, - settingItemLast: { - borderBottomWidth: 0, - }, - settingItemLeft: { - flexDirection: 'row', - alignItems: 'center', - }, - settingIcon: { - width: 36, - height: 36, - borderRadius: 8, - alignItems: 'center', - justifyContent: 'center', - marginRight: 16, - }, - settingTitle: { - fontSize: 16, - fontWeight: '500', - color: '#333', - }, - settingSubtitle: { - fontSize: 12, - color: '#9ca3af', - marginTop: 2, - }, -}); - export default SettingItem; diff --git a/src/app/settings/index.tsx b/src/app/settings/index.tsx index 3f403a2..1e52da2 100644 --- a/src/app/settings/index.tsx +++ b/src/app/settings/index.tsx @@ -1,12 +1,6 @@ import { useRouter } from 'expo-router'; import React from 'react'; -import { - SafeAreaView, - ScrollView, - StyleSheet, - TouchableOpacity, - View, -} from 'react-native'; +import { SafeAreaView, ScrollView, TouchableOpacity, View } from 'react-native'; import { getVersion } from 'react-native-device-info'; import { NavHeader } from '@/components/ui'; @@ -17,16 +11,19 @@ import SettingItem from './components/setting-item'; const Settings: React.FC = () => { const router = useRouter(); return ( - - {/* */} - - {/* 顶部导航 */} + // 安全区域视图，确保内容不会被设备的缺口遮挡 + + {/* 顶部导航栏 */} - - {/* 系统设置 */} - - + {/* 主要内容区域 */} + + {/* 系统设置部分 */} + + { /> - {/* 通知设置 */} - - + {/* 通知设置部分 */} + + { /> - {/* 隐私与安全 */} + {/* 隐私与安全部分 */} - + { /> - {/* 数据与存储 */} - - + {/* 数据与存储部分 */} + + { /> - {/* 关于 */} - - + {/* 关于应用部分 */} + + { {/* 退出登录按钮 */} navigation.navigate('Login')} > - 退出登录 + 退出登录 ); }; -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#f5f5f5', - }, - - content: { - flex: 1, - padding: 16, - }, - sectionTitle: { - fontSize: 18, - fontWeight: '600', - marginBottom: 12, - marginTop: 8, - color: '#333', - }, - card: { - backgroundColor: 'white', - borderRadius: 16, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.05, - shadowRadius: 10, - elevation: 2, - marginBottom: 16, - padding: 16, - }, - logoutButton: { - backgroundColor: '#ef4444', - borderRadius: 12, - paddingVertical: 14, - alignItems: 'center', - marginVertical: 24, - }, - logoutButtonText: { - color: 'white', - fontSize: 16, - fontWeight: '600', - }, -}); - export default Settings; -- Gitee From ead8392b15886f89deff1fc7f4f220f45b8ffeb3 Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Sun, 18 May 2025 19:51:56 +0800 Subject: [PATCH 17/20] =?UTF-8?q?refactor(=E5=B8=83=E5=B1=80=E5=92=8C?= =?UTF-8?q?=E7=99=BB=E5=BD=95=E8=A1=A8=E5=8D=95):=20=E4=BD=BF=E7=94=A8Tail?= =?UTF-8?q?wind=20CSS=E6=9B=BF=E6=8D=A2=E5=86=85=E8=81=94=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E5=B9=B6=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=E7=BB=93?= =?UTF-8?q?=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在`_layout.tsx`中移除未使用的`StyleSheet`并优化布局组件 - 在`login-form.tsx`中使用Tailwind CSS替换内联样式，简化代码并提高可维护性 --- src/app/_layout.tsx | 47 ++++-- src/components/login-form.tsx | 271 +++++++++------------------------- 2 files changed, 104 insertions(+), 214 deletions(-) diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx index 1f61ee5..b1ef2ab 100644 --- a/src/app/_layout.tsx +++ b/src/app/_layout.tsx @@ -1,5 +1,5 @@ /* eslint-disable max-lines-per-function */ -// Import global CSS file +// 导入全局CSS文件 import '../../global.css'; import { Provider, Toast } from '@ant-design/react-native'; @@ -9,7 +9,7 @@ import { Stack } from 'expo-router'; import * as SplashScreen from 'expo-splash-screen'; import * as Updates from 'expo-updates'; import React, { useEffect } from 'react'; -import { Platform, StyleSheet } from 'react-native'; +import { Platform } from 'react-native'; import { getUniqueId } from 'react-native-device-info'; import FlashMessage from 'react-native-flash-message'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; @@ -23,22 +23,34 @@ import { useThemeConfig } from '@/lib/use-theme-config'; export { ErrorBoundary } from 'expo-router'; +// 路由设置 export const unstable_settings = { initialRouteName: '(app)', }; -hydrateAuth(); -loadSelectedTheme(); -// Prevent the splash screen from auto-hiding before asset loading is complete. +// 初始化应用状态 +hydrateAuth(); // 恢复认证状态 +loadSelectedTheme(); // 加载用户选择的主题 + +// 防止启动屏幕在资源加载完成前自动隐藏 SplashScreen.preventAutoHideAsync(); -// Set the animation options. This is optional. +// 设置动画选项（可选） SplashScreen.setOptions({ duration: 500, fade: true, }); +// 配置Toast提示的默认持续时间 Toast.config({ duration: 2 }); +/** + * 应用根布局组件 + * 负责初始化应用环境、检查更新和设置全局提供者 + */ export default function RootLayout() { + /** + * 检查应用更新 + * 如果有可用更新，自动下载并重新加载应用 + */ const checkForUpdate = async () => { try { const update = await Updates.checkForUpdateAsync(); @@ -49,6 +61,7 @@ export default function RootLayout() { await Updates.reloadAsync(); } } catch (error) { + // 错误处理（已注释） // alert('检查更新失败:' + error); // if (error instanceof Error) { // alert('错误信息:' + error.message); @@ -56,15 +69,20 @@ export default function RootLayout() { // } } }; + + // 应用启动时执行的操作 useEffect(() => { if (Platform.OS !== 'web') { + // 检查应用更新 checkForUpdate(); + // 获取设备唯一ID并记录设备信息 getUniqueId().then((uniqueId) => { setUniqueId(uniqueId); recordDevice(uniqueId); }); } }); + return ( @@ -85,13 +103,16 @@ export default function RootLayout() { ); } +/** + * 全局提供者组件 + * 包装所有需要的上下文提供者，如主题、API、键盘等 + * @param {Object} props - 组件属性 + * @param {React.ReactNode} props.children - 子组件 + */ function Providers({ children }: { children: React.ReactNode }) { const theme = useThemeConfig(); return ( - + @@ -105,9 +126,3 @@ function Providers({ children }: { children: React.ReactNode }) { ); } - -const styles = StyleSheet.create({ - container: { - flex: 1, - }, -}); diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx index 0f9fa7b..f248949 100644 --- a/src/components/login-form.tsx +++ b/src/components/login-form.tsx @@ -94,46 +94,47 @@ export const LoginForm = () => { const [submitBtnDisable, setSubmitBtnDisable] = useState(false); // const [rememberMe, setRememberMe] = useState(false); return ( - + {/* 顶部空间 */} - + {/* Logo和标题 */} - - + + - {Env.NAME} - {translate('login.sub_title')} + {Env.NAME} + + + {translate('login.sub_title')} + {/* 登录表单 */} - + {/* 用户名输入框 */} { {/* 密码输入框 */} { {/* 登录按钮 */} - + {/* 其他登录方式 */} - - - - - + + + + + - - + + - + - - {/* */} + - {/* 底部 */} - - - 还没有账号? 联系管理员 + + + 还没有账号? + 联系管理员 - + @@ -246,168 +249,40 @@ export const LoginForm = () => { }; const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: 'white', - }, - keyboardAvoidingView: { - flex: 1, - }, scrollView: { flexGrow: 1, paddingHorizontal: 16, }, - topSpace: { - height: '10%', - }, - logoContainer: { - alignItems: 'center', - marginBottom: 32, - }, - logoCircle: { - width: 80, - height: 80, - borderRadius: 40, - backgroundColor: '#EBF5FF', - alignItems: 'center', - justifyContent: 'center', - marginBottom: 16, - }, - title: { - fontSize: 18, - fontWeight: 'bold', - color: '#333', - }, - subtitle: { - fontSize: 16, - color: '#6b7280', - marginTop: 8, - }, - formContainer: { - width: '100%', - }, - inputGroup: { - flexDirection: 'row', - alignItems: 'center', - borderWidth: 1, - borderColor: '#e5e7eb', - borderRadius: 12, - marginBottom: 16, - paddingHorizontal: 12, - height: 50, - }, - // 添加焦点样式 - inputGroupFocused: { - borderColor: '#0066ff', - backgroundColor: '#f0f7ff', - }, - inputIcon: { - marginRight: 12, - }, - input: { - flex: 1, - height: '100%', - fontSize: 16, - color: '#333', - }, - optionsContainer: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 24, - }, - rememberContainer: { - flexDirection: 'row', - alignItems: 'center', - }, - checkbox: { - width: 20, - height: 20, - borderRadius: 4, - borderWidth: 1, - borderColor: '#d1d5db', - marginRight: 8, - alignItems: 'center', - justifyContent: 'center', - }, - checkboxChecked: { - backgroundColor: '#0066ff', - borderColor: '#0066ff', - }, - rememberText: { - fontSize: 14, - color: '#6b7280', - }, - forgotPassword: { - fontSize: 14, - color: '#0066ff', - }, - loginButton: { - backgroundColor: '#e94538', - borderRadius: 12, - height: 50, - alignItems: 'center', - justifyContent: 'center', - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.1, - shadowRadius: 4, - elevation: 2, - }, - loginButtonText: { - color: 'white', - fontSize: 16, - fontWeight: '600', - }, - otherLoginContainer: { - marginTop: 32, - }, - dividerContainer: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - }, - divider: { - flex: 1, - height: 1, - backgroundColor: '#e5e7eb', - }, - dividerText: { - paddingHorizontal: 16, - fontSize: 14, - color: '#6b7280', - }, - socialButtonsContainer: { - flexDirection: 'row', - justifyContent: 'center', - marginTop: 24, - }, - socialButton: { - width: 48, - height: 48, - borderRadius: 24, - borderWidth: 1, - borderColor: '#e5e7eb', - alignItems: 'center', - justifyContent: 'center', - marginHorizontal: 12, - }, - footer: { - marginTop: 'auto', - paddingBottom: 24, - alignItems: 'center', - }, - footerText: { - fontSize: 14, - color: '#6b7280', - }, - footerLink: { - color: '#e94538', - fontWeight: '500', - }, - copyright: { - fontSize: 14, - color: '#6b7280', - marginTop: 8, - }, + // optionsContainer: { + // flexDirection: 'row', + // justifyContent: 'space-between', + // alignItems: 'center', + // marginBottom: 24, + // }, + // rememberContainer: { + // flexDirection: 'row', + // alignItems: 'center', + // }, + // checkbox: { + // width: 20, + // height: 20, + // borderRadius: 4, + // borderWidth: 1, + // borderColor: '#d1d5db', + // marginRight: 8, + // alignItems: 'center', + // justifyContent: 'center', + // }, + // checkboxChecked: { + // backgroundColor: '#0066ff', + // borderColor: '#0066ff', + // }, + // rememberText: { + // fontSize: 14, + // color: '#6b7280', + // }, + // forgotPassword: { + // fontSize: 14, + // color: '#0066ff', + // }, }); -- Gitee From bd3c3ea76090b011a4bdb1c417fc10cdbc9dba7c Mon Sep 17 00:00:00 2001 From: xiaochanghai Date: Sun, 18 May 2025 23:07:37 +0800 Subject: [PATCH 18/20] =?UTF-8?q?refactor(onboarding):=20=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=20Tailwind=20CSS=20=E6=9B=BF=E6=8D=A2=E5=86=85?= =?UTF-8?q?=E8=81=94=E6=A0=B7=E5=BC=8F=E5=B9=B6=E4=BC=98=E5=8C=96=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 此次提交将内联样式替换为 Tailwind CSS 类，并移除了未使用的样式定义。同时，引入了 `getVersion` 获取应用版本号，并优化了动画和布局逻辑，提升了代码的可维护性和可读性。 --- src/app/onboarding.tsx | 213 +++++++++++++---------------------------- 1 file changed, 65 insertions(+), 148 deletions(-) diff --git a/src/app/onboarding.tsx b/src/app/onboarding.tsx index 3d49fcf..c768683 100644 --- a/src/app/onboarding.tsx +++ b/src/app/onboarding.tsx @@ -1,4 +1,4 @@ -/* eslint-disable react/react-in-jsx-scope */ +import { Env } from '@env'; import { FontAwesome } from '@expo/vector-icons'; import { LinearGradient } from 'expo-linear-gradient'; import { useRouter } from 'expo-router'; @@ -6,9 +6,11 @@ import React, { useEffect, useRef } from 'react'; import { Animated, Dimensions, + Platform, StyleSheet, TouchableOpacity, } from 'react-native'; +import { getVersion } from 'react-native-device-info'; import { FocusAwareStatusBar, @@ -19,6 +21,7 @@ import { View, } from '@/components/ui'; import { useIsFirstTime } from '@/lib/hooks'; +import { translate } from '@/lib/i18n'; const { width, height } = Dimensions.get('window'); @@ -79,7 +82,7 @@ const Welcome: React.FC = () => { }), ]) ).start(); - }, []); + }); // 处理开始使用按钮点击 const handleGetStarted = () => { @@ -92,9 +95,9 @@ const Welcome: React.FC = () => { <> - + {/* 背景粒子效果 */} - + {particles.map((particle) => ( { ))} - + {/* 版本标识 */} - - v2.0.1 - + {(Platform.OS === 'ios' || Platform.OS === 'android') && ( + + + V{getVersion()} + + + )} {/* 顶部空间 */} @@ -140,12 +149,11 @@ const Welcome: React.FC = () => { ]} > + { /> - 优智云 - 智能制造管理系统 + + + {Env.NAME} + + + {translate('login.sub_title')} + {/* 欢迎信息 */} @@ -171,14 +184,16 @@ const Welcome: React.FC = () => { }, ]} > - 欢迎使用轻智造ERP系统 - + + 欢迎使用轻智造ERP系统 + + 高效、智能的制造业管理解决方案，助力企业数字化转型，提升生产效率 {/* 功能特点 */} - + { ]} > - 开始使用 + + 开始使用 + { style={{ marginLeft: 8 }} /> - {/*