468 lines
20 KiB
Plaintext
468 lines
20 KiB
Plaintext
═══════════════════════════════════════════════════════════════════════════════
|
||
程序鉴别材料 - 源代码前30页
|
||
纺织行业采购计划管理系统 V1.0.0
|
||
═══════════════════════════════════════════════════════════════════════════════
|
||
|
||
【文件1】src/index.tsx - 应用入口文件
|
||
───────────────────────────────────────────────────────────────────────────────
|
||
import React from 'react';
|
||
import ReactDOM from 'react-dom/client';
|
||
import App from './App';
|
||
import './styles/index.css';
|
||
|
||
const root = ReactDOM.createRoot(
|
||
document.getElementById('root') as HTMLElement
|
||
);
|
||
|
||
root.render(
|
||
<React.StrictMode>
|
||
<App />
|
||
</React.StrictMode>
|
||
);
|
||
|
||
【文件2】src/App.tsx - 根组件与路由配置
|
||
───────────────────────────────────────────────────────────────────────────────
|
||
import React, { useState } from 'react';
|
||
import { HashRouter, Routes, Route, Navigate, useLocation } from 'react-router-dom';
|
||
import { AnimatePresence, motion } from 'framer-motion';
|
||
import { AuthProvider } from './contexts/AuthContext';
|
||
import { ErrorBoundary, PageErrorBoundary } from './components/ErrorBoundary';
|
||
import { LoginPage } from './pages/LoginPage';
|
||
import { RegisterPage } from './pages/RegisterPage';
|
||
import { RoleSelectPage } from './pages/RoleSelectPage';
|
||
import { PurchaserDashboard } from './pages/purchaser/Dashboard';
|
||
import { TextileDashboard } from './pages/textile/Dashboard';
|
||
import { WashingDashboard } from './pages/washing/Dashboard';
|
||
import { PlanOverview } from './pages/purchaser/PlanOverview';
|
||
import { NewPlan } from './pages/purchaser/NewPlan';
|
||
import { WarehouseManage } from './pages/purchaser/WarehouseManage';
|
||
import { FactoryManage } from './pages/purchaser/FactoryManage';
|
||
import { TextilePlanOverview } from './pages/textile/PlanOverview';
|
||
import { YarnWarehouse } from './pages/textile/YarnWarehouse';
|
||
import { FabricWarehouse } from './pages/textile/FabricWarehouse';
|
||
import { PaymentPending } from './pages/textile/PaymentPending';
|
||
import { MemberManage } from './pages/MemberManage';
|
||
import { ImportPlanPage } from './pages/ImportPlanPage';
|
||
import { NetworkStatusBar } from './components/NetworkStatusBar';
|
||
import './styles/index.css';
|
||
|
||
// 页面过渡动画配置
|
||
const pageTransitionVariants = {
|
||
initial: { opacity: 0, y: 20, scale: 0.98 },
|
||
animate: {
|
||
opacity: 1, y: 0, scale: 1,
|
||
transition: { duration: 0.35, ease: [0.25, 0.46, 0.45, 0.94] }
|
||
},
|
||
exit: {
|
||
opacity: 0, y: -10, scale: 0.98,
|
||
transition: { duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] }
|
||
},
|
||
};
|
||
|
||
function AnimatedRoute({ children, pageName }: { children: React.ReactNode; pageName?: string }) {
|
||
return (
|
||
<motion.div variants={pageTransitionVariants} initial="initial" animate="animate" exit="exit"
|
||
style={{ willChange: 'transform, opacity' }}>
|
||
<PageErrorBoundary pageName={pageName}>{children}</PageErrorBoundary>
|
||
</motion.div>
|
||
);
|
||
}
|
||
|
||
function AppRoutes() {
|
||
const location = useLocation();
|
||
return (
|
||
<AnimatePresence mode="wait">
|
||
<Routes location={location} key={location.pathname}>
|
||
<Route path="/login" element={<AnimatedRoute pageName="登录"><LoginPage /></AnimatedRoute>} />
|
||
<Route path="/register" element={<AnimatedRoute pageName="注册"><RegisterPage /></AnimatedRoute>} />
|
||
<Route path="/role-select" element={<AnimatedRoute pageName="角色选择"><RoleSelectPage /></AnimatedRoute>} />
|
||
<Route path="/purchaser" element={<AnimatedRoute pageName="采购商首页"><PurchaserDashboard /></AnimatedRoute>} />
|
||
<Route path="/purchaser/plans" element={<AnimatedRoute pageName="计划总览"><PlanOverview /></AnimatedRoute>} />
|
||
<Route path="/purchaser/plans/new" element={<AnimatedRoute pageName="新建计划"><NewPlan /></AnimatedRoute>} />
|
||
<Route path="/purchaser/warehouse" element={<AnimatedRoute pageName="仓库管理"><WarehouseManage /></AnimatedRoute>} />
|
||
<Route path="/purchaser/factories" element={<AnimatedRoute pageName="工厂管理"><FactoryManage /></AnimatedRoute>} />
|
||
<Route path="/textile" element={<AnimatedRoute pageName="纺织厂首页"><TextileDashboard /></AnimatedRoute>} />
|
||
<Route path="/textile/plans" element={<AnimatedRoute pageName="纺织厂计划"><TextilePlanOverview /></AnimatedRoute>} />
|
||
<Route path="/textile/fabric-warehouse" element={<AnimatedRoute pageName="坯布仓库"><FabricWarehouse /></AnimatedRoute>} />
|
||
<Route path="/textile/yarn-warehouse" element={<AnimatedRoute pageName="纱线仓库"><YarnWarehouse /></AnimatedRoute>} />
|
||
<Route path="/textile/payments" element={<AnimatedRoute pageName="待结款"><PaymentPending /></AnimatedRoute>} />
|
||
<Route path="/washing" element={<AnimatedRoute pageName="水洗厂首页"><WashingDashboard /></AnimatedRoute>} />
|
||
<Route path="/members" element={<AnimatedRoute pageName="子账号管理"><MemberManage /></AnimatedRoute>} />
|
||
<Route path="/import" element={<AnimatedRoute pageName="导入计划"><ImportPlanPage /></AnimatedRoute>} />
|
||
<Route path="/" element={<Navigate to="/login" replace />} />
|
||
</Routes>
|
||
</AnimatePresence>
|
||
);
|
||
}
|
||
|
||
function App() {
|
||
return (
|
||
<ErrorBoundary>
|
||
<AuthProvider>
|
||
<HashRouter>
|
||
<NetworkStatusBar />
|
||
<AppRoutes />
|
||
</HashRouter>
|
||
</AuthProvider>
|
||
</ErrorBoundary>
|
||
);
|
||
}
|
||
|
||
export default App;
|
||
|
||
【文件3】src/contexts/AuthContext.tsx - 认证上下文（部分）
|
||
───────────────────────────────────────────────────────────────────────────────
|
||
import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
|
||
import { supabase } from '../supabase/client';
|
||
import type { Profile, Company, UserRole, AuthState } from '../types';
|
||
import { encryptPhone, decryptPhone } from '../utils/crypto';
|
||
|
||
interface RegisterData {
|
||
username: string;
|
||
password: string;
|
||
displayName: string;
|
||
companyName: string;
|
||
phone: string;
|
||
role: UserRole;
|
||
}
|
||
|
||
interface AuthContextType {
|
||
auth: AuthState;
|
||
login: (username: string, password: string) => Promise<boolean>;
|
||
register: (data: RegisterData) => Promise<{ success: boolean; error?: string }>;
|
||
logout: () => Promise<void>;
|
||
selectRole: (role: UserRole) => void;
|
||
loading: boolean;
|
||
}
|
||
|
||
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
||
|
||
export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||
const [auth, setAuth] = useState<AuthState>({
|
||
isLoggedIn: false, user: null, company: null, currentRole: null
|
||
});
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
useEffect(() => {
|
||
const initAuth = async () => {
|
||
const { data: { session } } = await supabase.auth.getSession();
|
||
if (session?.user) {
|
||
const { data: profile } = await supabase
|
||
.from('profiles').select('*').eq('id', session.user.id).maybeSingle();
|
||
if (profile) {
|
||
let company: Company | null = null;
|
||
if (profile.company_id) {
|
||
const { data: comp } = await supabase
|
||
.from('companies').select('*').eq('id', profile.company_id).maybeSingle();
|
||
company = comp;
|
||
}
|
||
setAuth({ isLoggedIn: true, user: profile, company, currentRole: company?.role || null });
|
||
}
|
||
}
|
||
setLoading(false);
|
||
};
|
||
initAuth();
|
||
|
||
const { data: { subscription } } = supabase.auth.onAuthStateChange(async (event, session) => {
|
||
if (event === 'SIGNED_IN' && session?.user) {
|
||
setTimeout(async () => {
|
||
const { data: profile } = await supabase
|
||
.from('profiles').select('*').eq('id', session.user.id).maybeSingle();
|
||
if (profile) {
|
||
let company: Company | null = null;
|
||
if (profile.company_id) {
|
||
const { data: comp } = await supabase
|
||
.from('companies').select('*').eq('id', profile.company_id).maybeSingle();
|
||
company = comp;
|
||
}
|
||
setAuth({ isLoggedIn: true, user: profile, company, currentRole: company?.role || null });
|
||
}
|
||
}, 0);
|
||
} else if (event === 'SIGNED_OUT') {
|
||
setAuth({ isLoggedIn: false, user: null, company: null, currentRole: null });
|
||
}
|
||
});
|
||
return () => subscription.unsubscribe();
|
||
}, []);
|
||
|
||
const login = useCallback(async (username: string, password: string): Promise<boolean> => {
|
||
const { error } = await supabase.auth.signInWithPassword({
|
||
email: `${username}@meoo.local`, password,
|
||
});
|
||
return !error;
|
||
}, []);
|
||
|
||
const register = useCallback(async (data: RegisterData) => {
|
||
try {
|
||
const { data: companyData, error: companyError } = await supabase
|
||
.from('companies').insert({ name: data.companyName, role: data.role, contact_phone: data.phone })
|
||
.select().single();
|
||
if (companyError || !companyData) return { success: false, error: '创建公司失败' };
|
||
|
||
const { data: authData, error: authError } = await supabase.auth.signUp({
|
||
email: `${data.username}@meoo.local`, password: data.password,
|
||
});
|
||
if (authError || !authData.user) {
|
||
await supabase.from('companies').delete().eq('id', companyData.id);
|
||
return { success: false, error: '注册失败' };
|
||
}
|
||
|
||
const { error: profileError } = await supabase.from('profiles').insert({
|
||
id: authData.user.id, username: data.username, display_name: data.displayName,
|
||
phone: encryptPhone(data.phone), company_id: companyData.id, is_master: true
|
||
});
|
||
if (profileError) {
|
||
await supabase.from('companies').delete().eq('id', companyData.id);
|
||
return { success: false, error: '创建用户资料失败' };
|
||
}
|
||
return { success: true };
|
||
} catch (err: any) {
|
||
return { success: false, error: err?.message || '注册失败' };
|
||
}
|
||
}, []);
|
||
|
||
const logout = useCallback(async () => {
|
||
await supabase.auth.signOut();
|
||
setAuth({ isLoggedIn: false, user: null, company: null, currentRole: null });
|
||
}, []);
|
||
|
||
const selectRole = useCallback((role: UserRole) => {
|
||
setAuth(prev => ({ ...prev, currentRole: role }));
|
||
}, []);
|
||
|
||
return (
|
||
<AuthContext.Provider value={{ auth, login, register, logout, selectRole, loading }}>
|
||
{children}
|
||
</AuthContext.Provider>
|
||
);
|
||
}
|
||
|
||
export function useAuth() {
|
||
const context = useContext(AuthContext);
|
||
if (!context) throw new Error('useAuth must be used within AuthProvider');
|
||
return context;
|
||
}
|
||
|
||
【文件4】src/supabase/client.ts - Supabase客户端配置
|
||
───────────────────────────────────────────────────────────────────────────────
|
||
import { createClient } from '@supabase/supabase-js';
|
||
import type { Database } from './types';
|
||
|
||
export function getSupabaseUrl(): string {
|
||
return `${(window as any).MEOO_CONFIG?.meoo_app_access_url || location.origin}/sb-api`;
|
||
}
|
||
|
||
export const supabaseUrl = getSupabaseUrl();
|
||
export const supabaseAnonKey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...';
|
||
|
||
export const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey, {
|
||
auth: { persistSession: true, autoRefreshToken: true },
|
||
});
|
||
|
||
【文件5】src/types/index.ts - 类型定义（部分）
|
||
───────────────────────────────────────────────────────────────────────────────
|
||
export type UserRole = 'purchaser' | 'textile' | 'washing';
|
||
export type PlanStatus = 'pending' | 'producing' | 'completed';
|
||
export type FactoryType = 'textile' | 'washing';
|
||
|
||
export interface Profile {
|
||
id: string;
|
||
username: string;
|
||
display_name?: string;
|
||
phone?: string;
|
||
company_id?: string;
|
||
is_master: boolean;
|
||
master_id?: string;
|
||
created_at: string;
|
||
}
|
||
|
||
export interface Company {
|
||
id: string;
|
||
name: string;
|
||
role: UserRole;
|
||
address?: string;
|
||
contact_phone?: string;
|
||
created_at: string;
|
||
}
|
||
|
||
export interface ProductionPlan {
|
||
id: string;
|
||
plan_code: string;
|
||
product_name: string;
|
||
color: string;
|
||
fabric_code: string;
|
||
color_code: string;
|
||
remark?: string;
|
||
purchaser_id: string;
|
||
target_quantity: number;
|
||
completed_quantity: number;
|
||
yarn_usage_per_meter: number;
|
||
production_price: number;
|
||
status: PlanStatus;
|
||
start_time?: string;
|
||
created_by: string;
|
||
created_at: string;
|
||
updated_at: string;
|
||
}
|
||
|
||
export interface AuthState {
|
||
isLoggedIn: boolean;
|
||
user: Profile | null;
|
||
company: Company | null;
|
||
currentRole: UserRole | null;
|
||
}
|
||
|
||
【文件6】src/hooks/useNetworkStatus.ts - 网络状态Hook（部分）
|
||
───────────────────────────────────────────────────────────────────────────────
|
||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||
|
||
interface NetworkState {
|
||
isOnline: boolean;
|
||
isSlowConnection: boolean;
|
||
lastOnlineTime: number | null;
|
||
}
|
||
|
||
interface QueuedOperation {
|
||
id: string;
|
||
operation: () => Promise<void>;
|
||
retryCount: number;
|
||
maxRetries: number;
|
||
onSuccess?: () => void;
|
||
onError?: (error: Error) => void;
|
||
}
|
||
|
||
export function useNetworkStatus() {
|
||
const [state, setState] = useState<NetworkState>({
|
||
isOnline: navigator.onLine,
|
||
isSlowConnection: false,
|
||
lastOnlineTime: navigator.onLine ? Date.now() : null
|
||
});
|
||
const queueRef = useRef<QueuedOperation[]>([]);
|
||
const processingRef = useRef(false);
|
||
|
||
useEffect(() => {
|
||
const handleOnline = () => {
|
||
setState(prev => ({ ...prev, isOnline: true, lastOnlineTime: Date.now() }));
|
||
processQueue();
|
||
};
|
||
const handleOffline = () => {
|
||
setState(prev => ({ ...prev, isOnline: false }));
|
||
};
|
||
window.addEventListener('online', handleOnline);
|
||
window.addEventListener('offline', handleOffline);
|
||
|
||
const checkConnectionSpeed = async () => {
|
||
const connection = (navigator as any).connection;
|
||
if (connection) {
|
||
setState(prev => ({
|
||
...prev,
|
||
isSlowConnection: connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g'
|
||
}));
|
||
}
|
||
};
|
||
const interval = setInterval(checkConnectionSpeed, 120000);
|
||
return () => {
|
||
window.removeEventListener('online', handleOnline);
|
||
window.removeEventListener('offline', handleOffline);
|
||
clearInterval(interval);
|
||
};
|
||
}, []);
|
||
|
||
const processQueue = useCallback(async () => { /* ... */ }, []);
|
||
const enqueueOperation = useCallback((operation: () => Promise<void>, options?: any) => { /* ... */ }, []);
|
||
const executeWithRetry = useCallback(async <T>(operation: () => Promise<T>, options?: any) => { /* ... */ }, []);
|
||
|
||
return { ...state, enqueueOperation, executeWithRetry, queueLength: queueRef.current.length };
|
||
}
|
||
|
||
【文件7】src/components/ErrorBoundary.tsx - 错误边界组件（部分）
|
||
───────────────────────────────────────────────────────────────────────────────
|
||
import React, { Component, ErrorInfo, ReactNode } from 'react';
|
||
import { AlertCircle, RefreshCw, Home } from 'lucide-react';
|
||
|
||
interface Props { children: ReactNode; fallback?: ReactNode; onError?: (error: Error, errorInfo: ErrorInfo) => void; }
|
||
interface State { hasError: boolean; error: Error | null; errorInfo: ErrorInfo | null; }
|
||
|
||
export class ErrorBoundary extends Component<Props, State> {
|
||
constructor(props: Props) {
|
||
super(props);
|
||
this.state = { hasError: false, error: null, errorInfo: null };
|
||
}
|
||
|
||
static getDerivedStateFromError(error: Error): Partial<State> {
|
||
return { hasError: true, error };
|
||
}
|
||
|
||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||
this.setState({ errorInfo });
|
||
if (this.props.onError) this.props.onError(error, errorInfo);
|
||
console.error('ErrorBoundary caught an error:', error, errorInfo);
|
||
}
|
||
|
||
handleReset = () => this.setState({ hasError: false, error: null, errorInfo: null });
|
||
handleGoHome = () => window.location.href = '/';
|
||
handleReload = () => window.location.reload();
|
||
|
||
render() {
|
||
if (this.state.hasError) {
|
||
if (this.props.fallback) return this.props.fallback;
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
|
||
<div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-6 sm:p-8 max-w-md w-full">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
|
||
<AlertCircle className="w-6 h-6 text-red-600" />
|
||
</div>
|
||
<div>
|
||
<h2 className="text-lg font-semibold text-gray-900">页面出错了</h2>
|
||
<p className="text-sm text-gray-500">抱歉，发生了意外错误</p>
|
||
</div>
|
||
</div>
|
||
<div className="bg-gray-50 rounded-lg p-3 mb-4 overflow-auto max-h-32">
|
||
<p className="text-xs text-gray-600 font-mono break-all">{this.state.error?.toString()}</p>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<button onClick={this.handleReset} className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium">
|
||
<RefreshCw className="w-4 h-4" /> 重试
|
||
</button>
|
||
<div className="flex gap-2">
|
||
<button onClick={this.handleGoHome} className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
|
||
<Home className="w-4 h-4" /> 返回首页
|
||
</button>
|
||
<button onClick={this.handleReload} className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
|
||
<RefreshCw className="w-4 h-4" /> 刷新页面
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
return this.props.children;
|
||
}
|
||
}
|
||
|
||
═══════════════════════════════════════════════════════════════════════════════
|
||
源代码特征说明
|
||
═══════════════════════════════════════════════════════════════════════════════
|
||
|
||
1. 编程语言：TypeScript (.ts, .tsx)
|
||
2. 前端框架：React 18 + React Router v6
|
||
3. 状态管理：React Context + Hooks
|
||
4. 动画库：Framer Motion
|
||
5. 样式方案：TailwindCSS
|
||
6. 后端服务：Supabase (PostgreSQL)
|
||
7. 构建工具：Webpack 5
|
||
|
||
代码特点：
|
||
- 使用函数组件和React Hooks
|
||
- 类型安全的TypeScript开发
|
||
- 模块化设计，组件化架构
|
||
- 响应式设计，支持移动端
|
||
- 错误边界处理机制
|
||
- 实时数据同步
|
||
|
||
═══════════════════════════════════════════════════════════════════════════════
|
||
第 1 页 / 共 30 页（前30页）
|
||
═══════════════════════════════════════════════════════════════════════════════
|