685 lines
22 KiB
Plaintext
685 lines
22 KiB
Plaintext
|
═══════════════════════════════════════════════════════════════════════════════
|
|||
|
|
程序鉴别材料 - 源代码后30页
|
|||
|
|
纺织行业采购计划管理系统 V1.0.0
|
|||
|
|
═══════════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
【文件1】src/utils/crypto.ts - 加密工具模块
|
|||
|
|
───────────────────────────────────────────────────────────────────────────────
|
|||
|
|
/**
|
|||
|
|
* 数据加密/解密工具
|
|||
|
|
* 使用 AES 对称加密保护敏感数据
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// 加密密钥 - 生产环境应通过环境变量注入
|
|||
|
|
const ENCRYPTION_KEY = 'Procurement2026SecureKeyForPhoneEncryption';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 简单的 XOR 加密（用于演示，生产环境建议使用 Web Crypto API）
|
|||
|
|
* @param text 明文
|
|||
|
|
* @param key 密钥
|
|||
|
|
* @returns 加密后的 Base64 字符串
|
|||
|
|
*/
|
|||
|
|
function xorEncrypt(text: string, key: string): string {
|
|||
|
|
const textBytes = new TextEncoder().encode(text);
|
|||
|
|
const keyBytes = new TextEncoder().encode(key);
|
|||
|
|
const result = new Uint8Array(textBytes.length);
|
|||
|
|
|
|||
|
|
for (let i = 0; i < textBytes.length; i++) {
|
|||
|
|
result[i] = textBytes[i] ^ keyBytes[i % keyBytes.length];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return btoa(String.fromCharCode(...result));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* XOR 解密
|
|||
|
|
* @param encryptedBase64 Base64 加密字符串
|
|||
|
|
* @param key 密钥
|
|||
|
|
* @returns 明文
|
|||
|
|
*/
|
|||
|
|
function xorDecrypt(encryptedBase64: string, key: string): string {
|
|||
|
|
try {
|
|||
|
|
const encryptedBytes = new Uint8Array(
|
|||
|
|
atob(encryptedBase64).split('').map(c => c.charCodeAt(0))
|
|||
|
|
);
|
|||
|
|
const keyBytes = new TextEncoder().encode(key);
|
|||
|
|
const result = new Uint8Array(encryptedBytes.length);
|
|||
|
|
|
|||
|
|
for (let i = 0; i < encryptedBytes.length; i++) {
|
|||
|
|
result[i] = encryptedBytes[i] ^ keyBytes[i % keyBytes.length];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return new TextDecoder().decode(result);
|
|||
|
|
} catch {
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 加密手机号
|
|||
|
|
* @param phone 明文手机号
|
|||
|
|
* @returns 加密后的字符串
|
|||
|
|
*/
|
|||
|
|
export function encryptPhone(phone: string): string {
|
|||
|
|
if (!phone) return '';
|
|||
|
|
return `ENC:${xorEncrypt(phone, ENCRYPTION_KEY)}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 解密手机号
|
|||
|
|
* @param encryptedPhone 加密后的手机号
|
|||
|
|
* @returns 明文手机号
|
|||
|
|
*/
|
|||
|
|
export function decryptPhone(encryptedPhone: string): string {
|
|||
|
|
if (!encryptedPhone) return '';
|
|||
|
|
if (!encryptedPhone.startsWith('ENC:')) return encryptedPhone;
|
|||
|
|
const encrypted = encryptedPhone.slice(4);
|
|||
|
|
return xorDecrypt(encrypted, ENCRYPTION_KEY);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 脱敏显示手机号
|
|||
|
|
* @param phone 明文或加密手机号
|
|||
|
|
* @returns 脱敏格式如 138****8888
|
|||
|
|
*/
|
|||
|
|
export function maskPhone(phone: string): string {
|
|||
|
|
if (!phone) return '';
|
|||
|
|
const plainPhone = phone.startsWith('ENC:') ? decryptPhone(phone) : phone;
|
|||
|
|
if (plainPhone.length !== 11) return plainPhone;
|
|||
|
|
return `${plainPhone.slice(0, 3)}****${plainPhone.slice(7)}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 验证是否为有效的加密格式
|
|||
|
|
* @param value 待验证的值
|
|||
|
|
* @returns 是否已加密
|
|||
|
|
*/
|
|||
|
|
export function isEncrypted(value: string): boolean {
|
|||
|
|
return value?.startsWith('ENC:') ?? false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
【文件2】src/utils/helpers.ts - 工具函数模块（部分）
|
|||
|
|
───────────────────────────────────────────────────────────────────────────────
|
|||
|
|
import type { StepType, StepStatus } from '../types';
|
|||
|
|
import { stepOrder } from './constants';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 计算生产进度百分比
|
|||
|
|
*/
|
|||
|
|
export function calculateProgress(completed: number, target: number): number {
|
|||
|
|
if (target === 0) return 0;
|
|||
|
|
return Math.round((completed / target) * 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 格式化日期显示
|
|||
|
|
*/
|
|||
|
|
export function formatDate(dateString: string | null | undefined): string {
|
|||
|
|
if (!dateString) return '-';
|
|||
|
|
return new Date(dateString).toLocaleDateString('zh-CN', {
|
|||
|
|
year: 'numeric',
|
|||
|
|
month: '2-digit',
|
|||
|
|
day: '2-digit'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 格式化日期时间显示
|
|||
|
|
*/
|
|||
|
|
export function formatDateTime(dateString: string | null | undefined): string {
|
|||
|
|
if (!dateString) return '-';
|
|||
|
|
return new Date(dateString).toLocaleString('zh-CN');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 格式化时间（仅时分）
|
|||
|
|
*/
|
|||
|
|
export function formatTime(dateString: string | null | undefined): string {
|
|||
|
|
if (!dateString) return '-';
|
|||
|
|
return new Date(dateString).toLocaleTimeString('zh-CN', {
|
|||
|
|
hour: '2-digit',
|
|||
|
|
minute: '2-digit'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 按步骤类型排序
|
|||
|
|
*/
|
|||
|
|
export function sortByStepType<T extends { stepType: StepType }>(nodes: T[]): T[] {
|
|||
|
|
return [...nodes].sort((a, b) => {
|
|||
|
|
const indexA = stepOrder.indexOf(a.stepType);
|
|||
|
|
const indexB = stepOrder.indexOf(b.stepType);
|
|||
|
|
return indexA - indexB;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 查找第一个待确认的节点索引
|
|||
|
|
*/
|
|||
|
|
export function findFirstPendingIndex(nodes: { status: StepStatus }[]): number {
|
|||
|
|
return nodes.findIndex(n => n.status !== 'completed');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 生成产品码
|
|||
|
|
*/
|
|||
|
|
export function generateProductCode(name: string, weight: string, colorCode: string): string {
|
|||
|
|
const nameLetters = name.replace(/[^a-zA-Z]/g, '').toUpperCase();
|
|||
|
|
const nameCode = nameLetters.slice(0, 2) || 'XX';
|
|||
|
|
const weightNum = weight.replace(/[^0-9]/g, '') || '0';
|
|||
|
|
const colorNum = colorCode.replace(/[^0-9]/g, '') || '00';
|
|||
|
|
return `${nameCode}${weightNum}${colorNum}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 从分享链接中提取参数
|
|||
|
|
*/
|
|||
|
|
export function extractParamsFromLink(link: string): { token: string | null; plan: string | null; type: string | null } {
|
|||
|
|
const hashMatch = link.match(/#\/import\?(.+)$/);
|
|||
|
|
if (hashMatch) {
|
|||
|
|
const queryString = hashMatch[1];
|
|||
|
|
const params = new URLSearchParams(queryString);
|
|||
|
|
return {
|
|||
|
|
token: params.get('token'),
|
|||
|
|
plan: params.get('plan'),
|
|||
|
|
type: params.get('type')
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
return { token: null, plan: null, type: null };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
【文件3】src/stores/index.ts - 状态管理模块（部分）
|
|||
|
|
───────────────────────────────────────────────────────────────────────────────
|
|||
|
|
import { create } from 'zustand';
|
|||
|
|
import { immer } from 'zustand/middleware/immer';
|
|||
|
|
import type { ProductionPlan, PlanProcessStep, Company, Profile } from '../types';
|
|||
|
|
|
|||
|
|
// ========== 计划状态管理 ==========
|
|||
|
|
|
|||
|
|
interface PlanState {
|
|||
|
|
plans: ProductionPlan[];
|
|||
|
|
selectedPlan: ProductionPlan | null;
|
|||
|
|
planSteps: Record<string, PlanProcessStep[]>;
|
|||
|
|
loading: boolean;
|
|||
|
|
error: string | null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface PlanActions {
|
|||
|
|
setPlans: (plans: ProductionPlan[]) => void;
|
|||
|
|
addPlan: (plan: ProductionPlan) => void;
|
|||
|
|
updatePlan: (id: string, updates: Partial<ProductionPlan>) => void;
|
|||
|
|
deletePlan: (id: string) => void;
|
|||
|
|
selectPlan: (plan: ProductionPlan | null) => void;
|
|||
|
|
setPlanSteps: (planId: string, steps: PlanProcessStep[]) => void;
|
|||
|
|
updatePlanStep: (planId: string, stepId: string, updates: Partial<PlanProcessStep>) => void;
|
|||
|
|
setLoading: (loading: boolean) => void;
|
|||
|
|
setError: (error: string | null) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const usePlanStore = create<PlanState & PlanActions>()(
|
|||
|
|
immer((set) => ({
|
|||
|
|
plans: [],
|
|||
|
|
selectedPlan: null,
|
|||
|
|
planSteps: {},
|
|||
|
|
loading: false,
|
|||
|
|
error: null,
|
|||
|
|
|
|||
|
|
setPlans: (plans) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.plans = plans;
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
addPlan: (plan) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.plans.unshift(plan);
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
updatePlan: (id, updates) =>
|
|||
|
|
set((state) => {
|
|||
|
|
const plan = state.plans.find((p) => p.id === id);
|
|||
|
|
if (plan) {
|
|||
|
|
Object.assign(plan, updates);
|
|||
|
|
}
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
deletePlan: (id) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.plans = state.plans.filter((p) => p.id !== id);
|
|||
|
|
if (state.selectedPlan?.id === id) {
|
|||
|
|
state.selectedPlan = null;
|
|||
|
|
}
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
selectPlan: (plan) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.selectedPlan = plan;
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
setPlanSteps: (planId, steps) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.planSteps[planId] = steps;
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
updatePlanStep: (planId, stepId, updates) =>
|
|||
|
|
set((state) => {
|
|||
|
|
const steps = state.planSteps[planId];
|
|||
|
|
if (steps) {
|
|||
|
|
const step = steps.find((s) => s.id === stepId);
|
|||
|
|
if (step) {
|
|||
|
|
Object.assign(step, updates);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
setLoading: (loading) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.loading = loading;
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
setError: (error) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.error = error;
|
|||
|
|
}),
|
|||
|
|
}))
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// ========== 库存状态管理 ==========
|
|||
|
|
|
|||
|
|
interface InventoryItem {
|
|||
|
|
id: string;
|
|||
|
|
planId: string;
|
|||
|
|
quantity: number;
|
|||
|
|
rolls: number;
|
|||
|
|
createdAt: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface InventoryState {
|
|||
|
|
items: InventoryItem[];
|
|||
|
|
loading: boolean;
|
|||
|
|
error: string | null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface InventoryActions {
|
|||
|
|
setItems: (items: InventoryItem[]) => void;
|
|||
|
|
addItem: (item: InventoryItem) => void;
|
|||
|
|
updateItem: (id: string, updates: Partial<InventoryItem>) => void;
|
|||
|
|
deleteItem: (id: string) => void;
|
|||
|
|
setLoading: (loading: boolean) => void;
|
|||
|
|
setError: (error: string | null) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const useInventoryStore = create<InventoryState & InventoryActions>()(
|
|||
|
|
immer((set) => ({
|
|||
|
|
items: [],
|
|||
|
|
loading: false,
|
|||
|
|
error: null,
|
|||
|
|
|
|||
|
|
setItems: (items) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.items = items;
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
addItem: (item) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.items.unshift(item);
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
updateItem: (id, updates) =>
|
|||
|
|
set((state) => {
|
|||
|
|
const item = state.items.find((i) => i.id === id);
|
|||
|
|
if (item) {
|
|||
|
|
Object.assign(item, updates);
|
|||
|
|
}
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
deleteItem: (id) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.items = state.items.filter((i) => i.id !== id);
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
setLoading: (loading) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.loading = loading;
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
setError: (error) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.error = error;
|
|||
|
|
}),
|
|||
|
|
}))
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// ========== UI 状态管理 ==========
|
|||
|
|
|
|||
|
|
interface UIState {
|
|||
|
|
sidebarOpen: boolean;
|
|||
|
|
modalOpen: boolean;
|
|||
|
|
modalContent: string | null;
|
|||
|
|
toast: { message: string; type: 'success' | 'error' | 'info' } | null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface UIActions {
|
|||
|
|
toggleSidebar: () => void;
|
|||
|
|
setSidebarOpen: (open: boolean) => void;
|
|||
|
|
openModal: (content: string) => void;
|
|||
|
|
closeModal: () => void;
|
|||
|
|
showToast: (message: string, type: 'success' | 'error' | 'info') => void;
|
|||
|
|
hideToast: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const useUIStore = create<UIState & UIActions>()(
|
|||
|
|
immer((set) => ({
|
|||
|
|
sidebarOpen: false,
|
|||
|
|
modalOpen: false,
|
|||
|
|
modalContent: null,
|
|||
|
|
toast: null,
|
|||
|
|
|
|||
|
|
toggleSidebar: () =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.sidebarOpen = !state.sidebarOpen;
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
setSidebarOpen: (open) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.sidebarOpen = open;
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
openModal: (content) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.modalOpen = true;
|
|||
|
|
state.modalContent = content;
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
closeModal: () =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.modalOpen = false;
|
|||
|
|
state.modalContent = null;
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
showToast: (message, type) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.toast = { message, type };
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
hideToast: () =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.toast = null;
|
|||
|
|
}),
|
|||
|
|
}))
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// ========== 网络状态管理 ==========
|
|||
|
|
|
|||
|
|
interface NetworkState {
|
|||
|
|
isOnline: boolean;
|
|||
|
|
isSlowConnection: boolean;
|
|||
|
|
pendingRequests: number;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface NetworkActions {
|
|||
|
|
setOnline: (online: boolean) => void;
|
|||
|
|
setSlowConnection: (slow: boolean) => void;
|
|||
|
|
incrementPending: () => void;
|
|||
|
|
decrementPending: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const useNetworkStore = create<NetworkState & NetworkActions>()(
|
|||
|
|
immer((set) => ({
|
|||
|
|
isOnline: true,
|
|||
|
|
isSlowConnection: false,
|
|||
|
|
pendingRequests: 0,
|
|||
|
|
|
|||
|
|
setOnline: (online) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.isOnline = online;
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
setSlowConnection: (slow) =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.isSlowConnection = slow;
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
incrementPending: () =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.pendingRequests++;
|
|||
|
|
}),
|
|||
|
|
|
|||
|
|
decrementPending: () =>
|
|||
|
|
set((state) => {
|
|||
|
|
state.pendingRequests = Math.max(0, state.pendingRequests - 1);
|
|||
|
|
}),
|
|||
|
|
}))
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
【文件4】src/components/ProcessFlow.tsx - 流程节点组件（部分）
|
|||
|
|
───────────────────────────────────────────────────────────────────────────────
|
|||
|
|
import React, { useState } from 'react';
|
|||
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|||
|
|
import { Check, Clock, AlertCircle } from 'lucide-react';
|
|||
|
|
import type { StepType, StepStatus } from '../types';
|
|||
|
|
|
|||
|
|
interface ProcessNode {
|
|||
|
|
id: string;
|
|||
|
|
stepType: StepType;
|
|||
|
|
status: StepStatus;
|
|||
|
|
timestamp?: string;
|
|||
|
|
operatorName?: string;
|
|||
|
|
notes?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface ProcessFlowProps {
|
|||
|
|
nodes: ProcessNode[];
|
|||
|
|
onConfirm?: (nodeId: string, notes?: string) => void;
|
|||
|
|
canConfirm?: boolean;
|
|||
|
|
currentUserName?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const stepConfig: Record<StepType, { label: string; icon: any; color: string }> = {
|
|||
|
|
confirm: { label: '确认计划', icon: Check, color: 'blue' },
|
|||
|
|
yarn_purchase: { label: '采纱', icon: Clock, color: 'amber' },
|
|||
|
|
dyeing: { label: '染纱', icon: Clock, color: 'purple' },
|
|||
|
|
machine_start: { label: '上机', icon: Clock, color: 'indigo' },
|
|||
|
|
fabric_warehouse: { label: '坯布入库', icon: Check, color: 'emerald' },
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export function ProcessFlow({ nodes, onConfirm, canConfirm, currentUserName }: ProcessFlowProps) {
|
|||
|
|
const [expandedNode, setExpandedNode] = useState<string | null>(null);
|
|||
|
|
const [notes, setNotes] = useState('');
|
|||
|
|
|
|||
|
|
const sortedNodes = [...nodes].sort((a, b) => {
|
|||
|
|
const orderA = ['confirm', 'yarn_purchase', 'dyeing', 'machine_start', 'fabric_warehouse'];
|
|||
|
|
return orderA.indexOf(a.stepType) - orderA.indexOf(b.stepType);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const handleConfirm = (nodeId: string) => {
|
|||
|
|
if (onConfirm) {
|
|||
|
|
onConfirm(nodeId, notes);
|
|||
|
|
setNotes('');
|
|||
|
|
setExpandedNode(null);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
{sortedNodes.map((node, index) => {
|
|||
|
|
const config = stepConfig[node.stepType];
|
|||
|
|
const Icon = config.icon;
|
|||
|
|
const isActive = node.status === 'active';
|
|||
|
|
const isCompleted = node.status === 'completed';
|
|||
|
|
const isPending = node.status === 'pending';
|
|||
|
|
const isExpanded = expandedNode === node.id;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<motion.div
|
|||
|
|
key={node.id}
|
|||
|
|
initial={{ opacity: 0, x: -20 }}
|
|||
|
|
animate={{ opacity: 1, x: 0 }}
|
|||
|
|
transition={{ delay: index * 0.1 }}
|
|||
|
|
className={`relative rounded-xl border-2 p-4 transition-all ${
|
|||
|
|
isCompleted ? 'border-emerald-200 bg-emerald-50' :
|
|||
|
|
isActive ? 'border-blue-200 bg-blue-50' :
|
|||
|
|
'border-gray-200 bg-gray-50'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
|||
|
|
isCompleted ? 'bg-emerald-500' :
|
|||
|
|
isActive ? 'bg-blue-500' :
|
|||
|
|
'bg-gray-300'
|
|||
|
|
}`}>
|
|||
|
|
<Icon className="w-5 h-5 text-white" />
|
|||
|
|
</div>
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<h4 className="font-medium text-gray-900">{config.label}</h4>
|
|||
|
|
{node.timestamp && (
|
|||
|
|
<p className="text-sm text-gray-500">
|
|||
|
|
{new Date(node.timestamp).toLocaleString('zh-CN')}
|
|||
|
|
{node.operatorName && ` · ${node.operatorName}`}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
{isActive && canConfirm && (
|
|||
|
|
<button
|
|||
|
|
onClick={() => setExpandedNode(isExpanded ? null : node.id)}
|
|||
|
|
className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 transition-colors"
|
|||
|
|
>
|
|||
|
|
确认
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
{isCompleted && <Check className="w-5 h-5 text-emerald-600" />}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<AnimatePresence>
|
|||
|
|
{isExpanded && (
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ height: 0, opacity: 0 }}
|
|||
|
|
animate={{ height: 'auto', opacity: 1 }}
|
|||
|
|
exit={{ height: 0, opacity: 0 }}
|
|||
|
|
className="mt-3 pt-3 border-t border-blue-200"
|
|||
|
|
>
|
|||
|
|
<textarea
|
|||
|
|
value={notes}
|
|||
|
|
onChange={(e) => setNotes(e.target.value)}
|
|||
|
|
placeholder="添加备注（可选）"
|
|||
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|||
|
|
rows={2}
|
|||
|
|
/>
|
|||
|
|
<div className="flex justify-end gap-2 mt-2">
|
|||
|
|
<button
|
|||
|
|
onClick={() => setExpandedNode(null)}
|
|||
|
|
className="px-3 py-1.5 text-gray-600 hover:text-gray-900 text-sm"
|
|||
|
|
>
|
|||
|
|
取消
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => handleConfirm(node.id)}
|
|||
|
|
className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700"
|
|||
|
|
>
|
|||
|
|
确认完成
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</motion.div>
|
|||
|
|
)}
|
|||
|
|
</AnimatePresence>
|
|||
|
|
</motion.div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
【文件5】src/components/PlanCard.tsx - 计划卡片组件（部分）
|
|||
|
|
───────────────────────────────────────────────────────────────────────────────
|
|||
|
|
import React from 'react';
|
|||
|
|
import { motion } from 'framer-motion';
|
|||
|
|
import { FileText, TrendingUp, Package, Clock } from 'lucide-react';
|
|||
|
|
import type { ProductionPlan } from '../types';
|
|||
|
|
|
|||
|
|
interface PlanCardProps {
|
|||
|
|
plan: ProductionPlan;
|
|||
|
|
onClick?: () => void;
|
|||
|
|
showProgress?: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const statusMap = {
|
|||
|
|
pending: { label: '待确定', color: 'text-amber-600', bgColor: 'bg-amber-50', icon: Clock },
|
|||
|
|
producing: { label: '生产中', color: 'text-blue-600', bgColor: 'bg-blue-50', icon: TrendingUp },
|
|||
|
|
completed: { label: '已完成', color: 'text-emerald-600', bgColor: 'bg-emerald-50', icon: Package },
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export function PlanCard({ plan, onClick, showProgress = true }: PlanCardProps) {
|
|||
|
|
const status = statusMap[plan.status];
|
|||
|
|
const StatusIcon = status.icon;
|
|||
|
|
const progress = plan.target_quantity > 0
|
|||
|
|
? Math.round((plan.completed_quantity / plan.target_quantity) * 100)
|
|||
|
|
: 0;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<motion.div
|
|||
|
|
whileHover={{ scale: 1.02, y: -2 }}
|
|||
|
|
whileTap={{ scale: 0.98 }}
|
|||
|
|
onClick={onClick}
|
|||
|
|
className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 cursor-pointer hover:shadow-md hover:border-blue-200 transition-all"
|
|||
|
|
>
|
|||
|
|
<div className="flex items-start justify-between mb-3">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${status.bgColor}`}>
|
|||
|
|
<StatusIcon className={`w-4 h-4 ${status.color}`} />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h3 className="font-medium text-gray-900 text-sm">{plan.product_name}</h3>
|
|||
|
|
<p className="text-xs text-gray-500">{plan.fabric_code}-{plan.color_code}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<span className={`px-2 py-0.5 text-xs rounded-full ${status.bgColor} ${status.color}`}>
|
|||
|
|
{status.label}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{showProgress && (
|
|||
|
|
<div className="mt-3">
|
|||
|
|
<div className="flex items-center justify-between text-xs text-gray-500 mb-1">
|
|||
|
|
<span>进度</span>
|
|||
|
|
<span>{progress}%</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="h-1.5 bg-gray-100 rounded-full overflow-hidden">
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ width: 0 }}
|
|||
|
|
animate={{ width: `${progress}%` }}
|
|||
|
|
transition={{ duration: 0.5 }}
|
|||
|
|
className="h-full bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-xs text-gray-400 mt-1">
|
|||
|
|
{plan.completed_quantity} / {plan.target_quantity} 米
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</motion.div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
═══════════════════════════════════════════════════════════════════════════════
|
|||
|
|
源代码特征说明
|
|||
|
|
═══════════════════════════════════════════════════════════════════════════════
|
|||
|
|
|
|||
|
|
1. 编程语言：TypeScript (.ts, .tsx)
|
|||
|
|
2. 状态管理：Zustand + Immer
|
|||
|
|
3. 加密算法：XOR对称加密
|
|||
|
|
4. 工具函数：日期格式化、进度计算、排序算法
|
|||
|
|
5. 组件设计：函数组件 + Hooks
|
|||
|
|
6. 动画效果：Framer Motion
|
|||
|
|
7. 样式方案：TailwindCSS
|
|||
|
|
|
|||
|
|
代码特点：
|
|||
|
|
- 使用Zustand进行全局状态管理
|
|||
|
|
- 使用Immer实现不可变状态更新
|
|||
|
|
- 数据加密保护敏感信息
|
|||
|
|
- 组件化设计，高复用性
|
|||
|
|
- 响应式布局支持
|
|||
|
|
- 动画交互流畅
|
|||
|
|
|
|||
|
|
═══════════════════════════════════════════════════════════════════════════════
|
|||
|
|
第 1 页 / 共 30 页（后30页）
|
|||
|
|
═══════════════════════════════════════════════════════════════════════════════
|