═══════════════════════════════════════════════════════════════════════════════
                        程序鉴别材料 - 源代码后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页）
═══════════════════════════════════════════════════════════════════════════════