ChatGPT 辅助重构：老旧 jQuery 项目迁移到 React 的协作日志

// 典型的遗留jQuery代码示例
$(document).ready(function() {
    // 全局变量污染
    window.userData = {};
    window.currentPage = 1;
    window.totalPages = 0;
    
    // 事件处理混乱
    $('#userTable').on('click', 'tr', function() {
        var userId = $(this).data('id');
        loadUserDetails(userId);
        updateUserPanel(userId);
        refreshNotifications();
        // 大量DOM操作和业务逻辑混合
    });
    
    // 深度嵌套的回调地狱
    $.ajax({
        url: '/api/users',
        success: function(data) {
            $.each(data, function(index, user) {
                $('#userList').append(createUserRow(user));
                $.ajax({
                    url: '/api/user/' + user.id + '/permissions',
                    success: function(permissions) {
                        updateUserPermissions(user.id, permissions);
                        // 更多嵌套...
                    }
                });
            });
        }
    });
});

// ChatGPT协作配置
const aiCollaborationConfig = {
    // 角色定义
    roles: {
        architect: "系统架构师 - 负责整体架构设计",
        analyzer: "代码分析师 - 分析遗留代码结构",
        converter: "代码转换器 - jQuery到React转换",
        optimizer: "性能优化师 - 代码性能优化",
        tester: "测试工程师 - 测试策略制定"
    },
    
    // 协作阶段
    phases: [
        {
            name: "分析阶段",
            duration: "1周",
            aiTasks: ["代码结构分析", "依赖关系梳理", "风险评估"],
            humanTasks: ["业务逻辑确认", "需求优先级排序"]
        },
        {
            name: "设计阶段", 
            duration: "1周",
            aiTasks: ["架构设计建议", "组件拆分方案", "状态管理设计"],
            humanTasks: ["方案评审", "技术选型决策"]
        },
        {
            name: "实施阶段",
            duration: "3周", 
            aiTasks: ["代码转换", "样板代码生成", "重构建议"],
            humanTasks: ["代码审查", "业务逻辑实现", "集成测试"]
        },
        {
            name: "优化阶段",
            duration: "1周",
            aiTasks: ["性能分析", "代码优化建议", "最佳实践应用"],
            humanTasks: ["性能测试", "用户验收测试"]
        }
    ],
    
    // 提示工程模板
    promptTemplates: {
        codeAnalysis: `
            请分析以下jQuery代码的功能和结构：
            \`\`\`javascript
            {code}
            \`\`\`
            
            请提供：
            1. 功能描述
            2. 依赖关系
            3. 潜在问题
            4. React转换建议
        `,
        
        componentDesign: `
            基于以下业务需求设计React组件：
            需求：{requirements}
            
            请提供：
            1. 组件层次结构
            2. Props接口设计
            3. 状态管理方案
            4. 生命周期规划
        `
    }
};

// 高效提示工程示例
class PromptEngineer {
    // 上下文设置提示
    static setContext(projectInfo) {
        return `
你是一位资深的前端架构师，正在协助我将一个jQuery项目重构为React应用。

项目背景：
- 项目规模：${projectInfo.linesOfCode}行代码
- 主要功能：${projectInfo.features.join(', ')}
- 技术栈：jQuery ${projectInfo.jqueryVersion} + Bootstrap 3
- 目标：迁移到React 18 + TypeScript + Ant Design

请在后续对话中保持这个上下文，并提供专业的技术建议。
        `;
    }
    
    // 代码分析提示
    static analyzeCode(codeSnippet, context) {
        return `
请分析以下jQuery代码片段：

\`\`\`javascript
${codeSnippet}
\`\`\`

上下文信息：${context}

请提供：
1. **功能分析**：这段代码的主要功能是什么？
2. **依赖识别**：依赖了哪些外部资源或全局变量？
3. **问题诊断**：存在哪些潜在问题（性能、安全、维护性）？
4. **转换方案**：如何转换为React组件？请提供具体的实现思路。
5. **优化建议**：在React版本中如何优化？

请用结构化的方式回答，并提供代码示例。
        `;
    }
    
    // 架构设计提示
    static designArchitecture(requirements) {
        return `
基于以下需求设计React应用架构：

需求描述：
${requirements}

请设计：
1. **目录结构**：推荐的项目目录组织方式
2. **组件架构**：组件层次和职责划分
3. **状态管理**：推荐使用的状态管理方案（Redux/Zustand/Context）
4. **路由设计**：页面路由和权限控制方案
5. **工具链配置**：构建工具、代码规范、测试框架选择

请提供详细的实现方案和配置示例。
        `;
    }
}

// 使用ChatGPT分析的代码依赖关系
const dependencyAnalysis = {
    // 全局变量依赖
    globalVariables: [
        'window.userData', 'window.currentUser', 'window.config',
        'window.notifications', 'window.permissions'
    ],
    
    // jQuery插件依赖
    jqueryPlugins: [
        'jquery.dataTables.js', 'jquery.validate.js', 
        'jquery.uploadify.js', 'jquery.chart.js'
    ],
    
    // 外部API依赖
    apiEndpoints: [
        '/api/users', '/api/permissions', '/api/notifications',
        '/api/upload', '/api/dashboard'
    ],
    
    // 业务模块划分（ChatGPT建议）
    businessModules: {
        userManagement: {
            files: ['user-list.js', 'user-detail.js', 'user-form.js'],
            dependencies: ['jquery.dataTables', 'jquery.validate'],
            complexity: 'high'
        },
        dashboard: {
            files: ['dashboard.js', 'chart-utils.js'],
            dependencies: ['jquery.chart', 'moment.js'],
            complexity: 'medium'
        },
        fileManager: {
            files: ['file-upload.js', 'file-list.js'],
            dependencies: ['jquery.uploadify'],
            complexity: 'low'
        }
    }
};

// ChatGPT推荐的React架构设计
const reactArchitecture = {
    // 目录结构
    structure: `
src/
├── components/           # 通用组件
│   ├── common/          # 基础组件
│   ├── forms/           # 表单组件
│   └── charts/          # 图表组件
├── pages/               # 页面组件
│   ├── UserManagement/  # 用户管理
│   ├── Dashboard/       # 仪表板
│   └── FileManager/     # 文件管理
├── hooks/               # 自定义Hooks
├── services/            # API服务
├── store/               # 状态管理
├── utils/               # 工具函数
└── types/               # TypeScript类型定义
    `,
    
    // 状态管理方案
    stateManagement: {
        tool: 'Zustand',
        reason: '轻量级，学习成本低，适合中等规模项目',
        stores: ['userStore', 'authStore', 'notificationStore']
    },
    
    // 组件设计原则
    componentPrinciples: [
        '单一职责原则',
        '组件复用性',
        'Props接口清晰',
        '状态提升合理'
    ]
};

// 原jQuery用户列表代码转换示例
// 原jQuery实现（简化版）
/*
$('#userTable').DataTable({
    ajax: '/api/users',
    columns: [
        { data: 'name' },
        { data: 'email' },
        { data: 'role' },
        { 
            data: null,
            render: function(data, type, row) {
                return '<button onclick="editUser(' + row.id + ')">编辑</button>';
            }
        }
    ]
});
*/

// ChatGPT协助转换的React实现
import React, { useState, useEffect } from 'react';
import { Table, Button, Space, message } from 'antd';
import { useUserStore } from '@/store/userStore';
import type { User } from '@/types/user';

interface UserListProps {
    onEdit?: (user: User) => void;
    onDelete?: (userId: string) => void;
}

const UserList: React.FC<UserListProps> = ({ onEdit, onDelete }) => {
    const { users, loading, fetchUsers, deleteUser } = useUserStore();
    const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);

    useEffect(() => {
        fetchUsers();
    }, [fetchUsers]);

    // ChatGPT建议的列配置
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            sorter: true,
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            key: 'email',
        },
        {
            title: '角色',
            dataIndex: 'role',
            key: 'role',
            filters: [
                { text: '管理员', value: 'admin' },
                { text: '用户', value: 'user' },
            ],
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record: User) => (
                <Space size="middle">
                    <Button 
                        type="link" 
                        onClick={() => onEdit?.(record)}
                    >
                        编辑
                    </Button>
                    <Button 
                        type="link" 
                        danger
                        onClick={() => handleDelete(record.id)}
                    >
                        删除
                    </Button>
                </Space>
            ),
        },
    ];

    const handleDelete = async (userId: string) => {
        try {
            await deleteUser(userId);
            message.success('删除成功');
        } catch (error) {
            message.error('删除失败');
        }
    };

    // ChatGPT建议的行选择配置
    const rowSelection = {
        selectedRowKeys,
        onChange: setSelectedRowKeys,
    };

    return (
        <Table
            columns={columns}
            dataSource={users}
            loading={loading}
            rowKey="id"
            rowSelection={rowSelection}
            pagination={{
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total) => `共 ${total} 条记录`,
            }}
        />
    );
};

export default UserList;

// Zustand状态管理设计（ChatGPT协助）
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
import { userService } from '@/services/userService';
import type { User, UserFilters } from '@/types/user';

interface UserState {
    // 状态数据
    users: User[];
    currentUser: User | null;
    loading: boolean;
    error: string | null;
    filters: UserFilters;
    pagination: {
        current: number;
        pageSize: number;
        total: number;
    };
    
    // 操作方法
    fetchUsers: (params?: UserFilters) => Promise<void>;
    createUser: (userData: Omit<User, 'id'>) => Promise<void>;
    updateUser: (id: string, userData: Partial<User>) => Promise<void>;
    deleteUser: (id: string) => Promise<void>;
    setCurrentUser: (user: User | null) => void;
    setFilters: (filters: Partial<UserFilters>) => void;
    setPagination: (pagination: Partial<UserState['pagination']>) => void;
    clearError: () => void;
}

export const useUserStore = create<UserState>()(
    devtools(
        (set, get) => ({
            // 初始状态
            users: [],
            currentUser: null,
            loading: false,
            error: null,
            filters: {},
            pagination: {
                current: 1,
                pageSize: 10,
                total: 0,
            },

            // 获取用户列表
            fetchUsers: async (params) => {
                set({ loading: true, error: null });
                try {
                    const { filters, pagination } = get();
                    const queryParams = { ...filters, ...params };
                    
                    const response = await userService.getUsers({
                        ...queryParams,
                        page: pagination.current,
                        pageSize: pagination.pageSize,
                    });
                    
                    set({
                        users: response.data,
                        pagination: {
                            ...pagination,
                            total: response.total,
                        },
                        loading: false,
                    });
                } catch (error) {
                    set({ 
                        error: error instanceof Error ? error.message : '获取用户列表失败',
                        loading: false 
                    });
                }
            },

            // 创建用户
            createUser: async (userData) => {
                set({ loading: true, error: null });
                try {
                    const newUser = await userService.createUser(userData);
                    set(state => ({
                        users: [...state.users, newUser],
                        loading: false,
                    }));
                } catch (error) {
                    set({ 
                        error: error instanceof Error ? error.message : '创建用户失败',
                        loading: false 
                    });
                    throw error;
                }
            },

            // 更新用户
            updateUser: async (id, userData) => {
                set({ loading: true, error: null });
                try {
                    const updatedUser = await userService.updateUser(id, userData);
                    set(state => ({
                        users: state.users.map(user => 
                            user.id === id ? updatedUser : user
                        ),
                        currentUser: state.currentUser?.id === id ? updatedUser : state.currentUser,
                        loading: false,
                    }));
                } catch (error) {
                    set({ 
                        error: error instanceof Error ? error.message : '更新用户失败',
                        loading: false 
                    });
                    throw error;
                }
            },

            // 删除用户
            deleteUser: async (id) => {
                set({ loading: true, error: null });
                try {
                    await userService.deleteUser(id);
                    set(state => ({
                        users: state.users.filter(user => user.id !== id),
                        currentUser: state.currentUser?.id === id ? null : state.currentUser,
                        loading: false,
                    }));
                } catch (error) {
                    set({ 
                        error: error instanceof Error ? error.message : '删除用户失败',
                        loading: false 
                    });
                    throw error;
                }
            },

            // 设置当前用户
            setCurrentUser: (user) => set({ currentUser: user }),

            // 设置过滤条件
            setFilters: (newFilters) => set(state => ({
                filters: { ...state.filters, ...newFilters }
            })),

            // 设置分页信息
            setPagination: (newPagination) => set(state => ({
                pagination: { ...state.pagination, ...newPagination }
            })),

            // 清除错误
            clearError: () => set({ error: null }),
        }),
        {
            name: 'user-store', // DevTools中的store名称
        }
    )
);

// 原jQuery权限控制逻辑（复杂且难以维护）
/*
function checkPermission(action, resource) {
    var userPermissions = window.userData.permissions || [];
    var hasPermission = false;
    
    $.each(userPermissions, function(index, permission) {
        if (permission.action === action && permission.resource === resource) {
            hasPermission = true;
            return false;
        }
    });
    
    if (!hasPermission) {
        $('#errorModal').modal('show');
        return false;
    }
    return true;
}
*/

// ChatGPT协助设计的React权限系统
import React, { createContext, useContext, ReactNode } from 'react';
import { useAuthStore } from '@/store/authStore';

// 权限类型定义
interface Permission {
    id: string;
    action: string;
    resource: string;
    conditions?: Record<string, any>;
}

interface PermissionContextType {
    hasPermission: (action: string, resource: string, conditions?: Record<string, any>) => boolean;
    checkPermissions: (permissions: string[]) => boolean;
    canAccess: (route: string) => boolean;
}

// 权限上下文
const PermissionContext = createContext<PermissionContextType | null>(null);

// 权限Provider组件
export const PermissionProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
    const { user, permissions } = useAuthStore();

    // ChatGPT建议的权限检查逻辑
    const hasPermission = (action: string, resource: string, conditions?: Record<string, any>) => {
        if (!user || !permissions) return false;

        // 超级管理员拥有所有权限
        if (user.role === 'super_admin') return true;

        // 查找匹配的权限
        const matchedPermission = permissions.find(permission => 
            permission.action === action && permission.resource === resource
        );

        if (!matchedPermission) return false;

        // 检查条件约束
        if (conditions && matchedPermission.conditions) {
            return Object.entries(conditions).every(([key, value]) => 
                matchedPermission.conditions?.[key] === value
            );
        }

        return true;
    };

    // 批量权限检查
    const checkPermissions = (requiredPermissions: string[]) => {
        return requiredPermissions.every(permission => {
            const [action, resource] = permission.split(':');
            return hasPermission(action, resource);
        });
    };

    // 路由访问权限检查
    const canAccess = (route: string) => {
        const routePermissions: Record<string, string[]> = {
            '/users': ['read:users'],
            '/users/create': ['create:users'],
            '/users/edit': ['update:users'],
            '/dashboard': ['read:dashboard'],
            '/settings': ['admin:settings'],
        };

        const required = routePermissions[route];
        return required ? checkPermissions(required) : true;
    };

    const value = {
        hasPermission,
        checkPermissions,
        canAccess,
    };

    return (
        <PermissionContext.Provider value={value}>
            {children}
        </PermissionContext.Provider>
    );
};

// 权限Hook
export const usePermission = () => {
    const context = useContext(PermissionContext);
    if (!context) {
        throw new Error('usePermission must be used within PermissionProvider');
    }
    return context;
};

// 权限组件（ChatGPT建议的声明式权限控制）
interface PermissionGuardProps {
    action: string;
    resource: string;
    conditions?: Record<string, any>;
    fallback?: ReactNode;
    children: ReactNode;
}

export const PermissionGuard: React.FC<PermissionGuardProps> = ({
    action,
    resource,
    conditions,
    fallback = null,
    children,
}) => {
    const { hasPermission } = usePermission();

    if (!hasPermission(action, resource, conditions)) {
        return <>{fallback}</>;
    }

    return <>{children}</>;
};

// 使用示例
const UserManagementPage: React.FC = () => {
    return (
        <div>
            <h1>用户管理</h1>
            
            <PermissionGuard 
                action="create" 
                resource="users"
                fallback={<div>您没有创建用户的权限</div>}
            >
                <Button type="primary">创建用户</Button>
            </PermissionGuard>
            
            <PermissionGuard action="read" resource="users">
                <UserList />
            </PermissionGuard>
        </div>
    );
};

// 性能优化工具集（ChatGPT协助设计）
import { useMemo, useCallback, memo } from 'react';
import { debounce } from 'lodash-es';

// 1. 组件记忆化优化
const UserListItem = memo<{ user: User; onEdit: (user: User) => void }>(
    ({ user, onEdit }) => {
        const handleEdit = useCallback(() => {
            onEdit(user);
        }, [user, onEdit]);

        return (
            <div className="user-item">
                <span>{user.name}</span>
                <Button onClick={handleEdit}>编辑</Button>
            </div>
        );
    },
    // 自定义比较函数
    (prevProps, nextProps) => {
        return prevProps.user.id === nextProps.user.id &&
               prevProps.user.name === nextProps.user.name &&
               prevProps.user.email === nextProps.user.email;
    }
);

// 2. 虚拟滚动优化（大数据列表）
import { FixedSizeList as List } from 'react-window';

const VirtualizedUserList: React.FC<{ users: User[] }> = ({ users }) => {
    const Row = ({ index, style }: { index: number; style: React.CSSProperties }) => (
        <div style={style}>
            <UserListItem user={users[index]} onEdit={handleEdit} />
        </div>
    );

    return (
        <List
            height={600}
            itemCount={users.length}
            itemSize={60}
            width="100%"
        >
            {Row}
        </List>
    );
};

// 3. 搜索防抖优化
const useDebounceSearch = (searchTerm: string, delay: number = 300) => {
    const [debouncedTerm, setDebouncedTerm] = useState(searchTerm);

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedTerm(searchTerm);
        }, delay);

        return () => {
            clearTimeout(handler);
        };
    }, [searchTerm, delay]);

    return debouncedTerm;
};

// 4. 数据缓存策略
import { useQuery, useQueryClient } from '@tanstack/react-query';

const useUsersWithCache = (filters: UserFilters) => {
    return useQuery({
        queryKey: ['users', filters],
        queryFn: () => userService.getUsers(filters),
        staleTime: 5 * 60 * 1000, // 5分钟内数据视为新鲜
        cacheTime: 10 * 60 * 1000, // 10分钟后清除缓存
        refetchOnWindowFocus: false,
    });
};

// 5. 代码分割和懒加载
const LazyUserDetail = lazy(() => import('./UserDetail'));
const LazyDashboard = lazy(() => import('./Dashboard'));

const AppRouter: React.FC = () => {
    return (
        <Router>
            <Suspense fallback={<div>Loading...</div>}>
                <Routes>
                    <Route path="/users/:id" element={<LazyUserDetail />} />
                    <Route path="/dashboard" element={<LazyDashboard />} />
                </Routes>
            </Suspense>
        </Router>
    );
};

// 测试工具配置（ChatGPT建议）
// jest.config.js
module.exports = {
    testEnvironment: 'jsdom',
    setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
    moduleNameMapping: {
        '^@/(.*)$': '<rootDir>/src/$1',
    },
    collectCoverageFrom: [
        'src/**/*.{ts,tsx}',
        '!src/**/*.d.ts',
        '!src/index.tsx',
    ],
    coverageThreshold: {
        global: {
            branches: 80,
            functions: 80,
            lines: 80,
            statements: 80,
        },
    },
};

// 单元测试示例（ChatGPT协助编写）
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { UserList } from '@/components/UserList';
import { userService } from '@/services/userService';

// Mock API服务
jest.mock('@/services/userService');
const mockUserService = userService as jest.Mocked<typeof userService>;

describe('UserList Component', () => {
    let queryClient: QueryClient;

    beforeEach(() => {
        queryClient = new QueryClient({
            defaultOptions: {
                queries: { retry: false },
                mutations: { retry: false },
            },
        });
    });

    const renderWithProviders = (component: React.ReactElement) => {
        return render(
            <QueryClientProvider client={queryClient}>
                {component}
            </QueryClientProvider>
        );
    };

    it('should render user list correctly', async () => {
        // 准备测试数据
        const mockUsers = [
            { id: '1', name: 'John Doe', email: 'john@example.com', role: 'admin' },
            { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'user' },
        ];

        mockUserService.getUsers.mockResolvedValue({
            data: mockUsers,
            total: 2,
        });

        // 渲染组件
        renderWithProviders(<UserList />);

        // 验证加载状态
        expect(screen.getByText('Loading...')).toBeInTheDocument();

        // 等待数据加载完成
        await waitFor(() => {
            expect(screen.getByText('John Doe')).toBeInTheDocument();
            expect(screen.getByText('Jane Smith')).toBeInTheDocument();
        });

        // 验证表格结构
        expect(screen.getByRole('table')).toBeInTheDocument();
        expect(screen.getAllByRole('row')).toHaveLength(3); // 包含表头
    });

    it('should handle user deletion', async () => {
        const mockUsers = [
            { id: '1', name: 'John Doe', email: 'john@example.com', role: 'admin' },
        ];

        mockUserService.getUsers.mockResolvedValue({
            data: mockUsers,
            total: 1,
        });
        mockUserService.deleteUser.mockResolvedValue(undefined);

        renderWithProviders(<UserList />);

        await waitFor(() => {
            expect(screen.getByText('John Doe')).toBeInTheDocument();
        });

        // 点击删除按钮
        const deleteButton = screen.getByText('删除');
        fireEvent.click(deleteButton);

        // 验证确认对话框
        expect(screen.getByText('确认删除用户？')).toBeInTheDocument();

        // 确认删除
        const confirmButton = screen.getByText('确认');
        fireEvent.click(confirmButton);

        // 验证API调用
        await waitFor(() => {
            expect(mockUserService.deleteUser).toHaveBeenCalledWith('1');
        });
    });
});

// 集成测试示例
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { App } from '@/App';

describe('User Management Integration', () => {
    it('should complete user creation workflow', async () => {
        const user = userEvent.setup();
        
        render(<App />);

        // 导航到用户管理页面
        await user.click(screen.getByText('用户管理'));
        
        // 点击创建用户按钮
        await user.click(screen.getByText('创建用户'));
        
        // 填写用户表单
        await user.type(screen.getByLabelText('姓名'), 'Test User');
        await user.type(screen.getByLabelText('邮箱'), 'test@example.com');
        await user.selectOptions(screen.getByLabelText('角色'), 'user');
        
        // 提交表单
        await user.click(screen.getByText('保存'));
        
        // 验证成功消息
        await waitFor(() => {
            expect(screen.getByText('用户创建成功')).toBeInTheDocument();
        });
        
        // 验证用户出现在列表中
        expect(screen.getByText('Test User')).toBeInTheDocument();
    });
});

// Playwright E2E测试（ChatGPT协助设计）
import { test, expect } from '@playwright/test';

test.describe('User Management E2E', () => {
    test.beforeEach(async ({ page }) => {
        // 登录系统
        await page.goto('/login');
        await page.fill('[data-testid=username]', 'admin@example.com');
        await page.fill('[data-testid=password]', 'password123');
        await page.click('[data-testid=login-button]');
        
        // 等待登录完成
        await expect(page).toHaveURL('/dashboard');
    });

    test('should manage users end-to-end', async ({ page }) => {
        // 导航到用户管理页面
        await page.click('text=用户管理');
        await expect(page).toHaveURL('/users');

        // 创建新用户
        await page.click('text=创建用户');
        await page.fill('[data-testid=user-name]', 'E2E Test User');
        await page.fill('[data-testid=user-email]', 'e2e@example.com');
        await page.selectOption('[data-testid=user-role]', 'user');
        await page.click('[data-testid=save-button]');

        // 验证用户创建成功
        await expect(page.locator('text=用户创建成功')).toBeVisible();
        await expect(page.locator('text=E2E Test User')).toBeVisible();

        // 编辑用户
        await page.click('[data-testid=edit-user-button]');
        await page.fill('[data-testid=user-name]', 'Updated E2E User');
        await page.click('[data-testid=save-button]');

        // 验证用户更新成功
        await expect(page.locator('text=Updated E2E User')).toBeVisible();

        // 删除用户
        await page.click('[data-testid=delete-user-button]');
        await page.click('text=确认');

        // 验证用户删除成功
        await expect(page.locator('text=Updated E2E User')).not.toBeVisible();
    });

    test('should handle permission restrictions', async ({ page }) => {
        // 使用普通用户登录
        await page.goto('/login');
        await page.fill('[data-testid=username]', 'user@example.com');
        await page.fill('[data-testid=password]', 'password123');
        await page.click('[data-testid=login-button]');

        // 尝试访问管理员功能
        await page.goto('/users/create');
        
        // 验证权限限制
        await expect(page.locator('text=权限不足')).toBeVisible();
    });
});

// 重构成果数据统计
const refactoringResults = {
    // 代码质量提升
    codeQuality: {
        linesOfCode: {
            before: 32000,
            after: 18500,
            reduction: '42.2%'
        },
        cyclomaticComplexity: {
            before: 8.5,
            after: 3.2,
            improvement: '62.4%'
        },
        codeSmells: {
            before: 156,
            after: 23,
            reduction: '85.3%'
        },
        technicalDebt: {
            before: '45 days',
            after: '8 days',
            reduction: '82.2%'
        }
    },
    
    // 性能提升
    performance: {
        firstContentfulPaint: {
            before: '3.2s',
            after: '1.1s',
            improvement: '65.6%'
        },
        largestContentfulPaint: {
            before: '4.8s',
            after: '1.8s',
            improvement: '62.5%'
        },
        timeToInteractive: {
            before: '5.2s',
            after: '2.1s',
            improvement: '59.6%'
        },
        bundleSize: {
            before: '2.1MB',
            after: '890KB',
            reduction: '57.6%'
        }
    },
    
    // 开发效率
    developmentEfficiency: {
        buildTime: {
            before: '45s',
            after: '12s',
            improvement: '73.3%'
        },
        hotReload: {
            before: '3.5s',
            after: '0.8s',
            improvement: '77.1%'
        },
        testCoverage: {
            before: '15%',
            after: '85%',
            improvement: '466.7%'
        }
    },
    
    // 维护性提升
    maintainability: {
        componentReusability: '85%',
        typeScriptCoverage: '95%',
        eslintErrors: 0,
        documentationCoverage: '90%'
    }
};

// ChatGPT协作效率统计
const aiCollaborationStats = {
    // 时间节省
    timeSavings: {
        codeAnalysis: {
            traditionalTime: '2 weeks',
            aiAssistedTime: '3 days',
            timeSaved: '78.6%'
        },
        architectureDesign: {
            traditionalTime: '1 week',
            aiAssistedTime: '2 days',
            timeSaved: '71.4%'
        },
        codeGeneration: {
            traditionalTime: '3 weeks',
            aiAssistedTime: '1 week',
            timeSaved: '66.7%'
        },
        testWriting: {
            traditionalTime: '1 week',
            aiAssistedTime: '2 days',
            timeSaved: '71.4%'
        }
    },
    
    // 质量提升
    qualityImprovements: {
        bugReduction: '68%',
        codeConsistency: '92%',
        bestPracticesAdherence: '88%',
        documentationQuality: '85%'
    },
    
    // AI协作模式效果
    collaborationEffectiveness: {
        promptIterations: {
            average: 2.3,
            successful: '89%'
        },
        codeAcceptanceRate: '76%',
        manualAdjustmentRequired: '24%',
        overallSatisfaction: '4.6/5'
    }
};

// AI协作最佳实践指南
const aiCollaborationBestPractices = {
    // 1. 上下文管理
    contextManagement: {
        principles: [
            '始终保持清晰的项目上下文',
            '定期更新AI对项目状态的理解',
            '使用结构化的信息传递方式'
        ],
        techniques: [
            '项目背景文档化',
            '阶段性成果总结',
            '问题和解决方案记录'
        ]
    },
    
    // 2. 提示工程优化
    promptEngineering: {
        structure: {
            context: '提供充分的背景信息',
            task: '明确具体的任务要求',
            format: '指定期望的输出格式',
            constraints: '说明限制条件和约束'
        },
        examples: [
            '使用具体的代码示例',
            '提供期望的输出样本',
            '说明不期望的结果'
        ]
    },
    
    // 3. 迭代协作流程
    iterativeProcess: {
        phases: [
            'Initial Analysis',
            'Solution Design', 
            'Implementation',
            'Review & Refinement',
            'Optimization'
        ],
        feedback: {
            frequency: 'After each major milestone',
            format: 'Structured feedback with specific examples',
            focus: 'Both successes and areas for improvement'
        }
    },
    
    // 4. 质量控制
    qualityControl: {
        validation: [
            '人工代码审查',
            '自动化测试验证',
            '性能基准测试',
            '安全性检查'
        ],
        criteria: {
            functionality: '功能完整性',
            performance: '性能要求',
            maintainability: '可维护性',
            security: '安全性'
        }
    }
};

// AI协作工具链
class AICollaborationToolchain {
    private conversationHistory: ConversationEntry[] = [];
    private projectContext: ProjectContext;
    
    constructor(projectContext: ProjectContext) {
        this.projectContext = projectContext;
    }
    
    // 结构化提示生成
    generatePrompt(task: TaskType, context: any): string {
        const baseContext = this.getBaseContext();
        const taskSpecificContext = this.getTaskContext(task, context);
        
        return `
${baseContext}

Task: ${task}
Context: ${JSON.stringify(taskSpecificContext, null, 2)}

Please provide:
1. Analysis of the current situation
2. Recommended approach
3. Implementation details with code examples
4. Potential risks and mitigation strategies
5. Testing recommendations

Format your response in structured sections with clear headings.
        `;
    }
    
    // 对话历史管理
    addConversation(entry: ConversationEntry): void {
        this.conversationHistory.push(entry);
        
        // 保持历史记录在合理范围内
        if (this.conversationHistory.length > 50) {
            this.conversationHistory = this.conversationHistory.slice(-30);
        }
    }
    
    // 上下文更新
    updateContext(updates: Partial<ProjectContext>): void {
        this.projectContext = { ...this.projectContext, ...updates };
    }
    
    private getBaseContext(): string {
        return `
Project: ${this.projectContext.name}
Type: ${this.projectContext.type}
Current Phase: ${this.projectContext.currentPhase}
Tech Stack: ${this.projectContext.techStack.join(', ')}
        `;
    }
}

// 常见陷阱和解决方案
const commonPitfalls = {
    // 陷阱1：过度依赖AI生成的代码
    overRelianceOnAI: {
        problem: 'AI生成的代码可能存在逻辑错误或不符合项目规范',
        solution: [
            '始终进行人工代码审查',
            '建立完善的测试体系',
            '制定代码规范和检查清单'
        ],
        example: `
        // ❌ 直接使用AI生成的代码
        const aiGeneratedCode = await chatgpt.generateComponent(requirements);
        
        // ✅ 正确的做法
        const aiGeneratedCode = await chatgpt.generateComponent(requirements);
        const reviewedCode = await humanReview(aiGeneratedCode);
        const testedCode = await runTests(reviewedCode);
        `
    },
    
    // 陷阱2：上下文丢失
    contextLoss: {
        problem: 'AI可能忘记之前的对话内容，导致建议不一致',
        solution: [
            '定期总结项目状态',
            '使用结构化的上下文管理',
            '重要决策文档化'
        ]
    },
    
    // 陷阱3：忽视业务逻辑复杂性
    businessLogicComplexity: {
        problem: 'AI可能无法完全理解复杂的业务逻辑',
        solution: [
            '详细描述业务规则',
            '提供具体的业务场景',
            '人工验证业务逻辑正确性'
        ]
    }
};

// AI协作发展趋势
const futureOutlook = {
    // 技术发展方向
    technicalTrends: [
        '更强的代码理解能力',
        '更好的上下文保持',
        '多模态协作（代码+图表+文档）',
        '实时协作能力'
    ],
    
    // 协作模式演进
    collaborationEvolution: [
        '从问答式到对话式协作',
        '从代码生成到架构设计',
        '从单点协助到全流程参与',
        '从工具使用到智能伙伴'
    ],
    
    // 应用场景扩展
    applicationScenarios: [
        '遗留系统现代化',
        '跨技术栈迁移',
        '性能优化自动化',
        '安全漏洞修复',
        '代码质量提升'
    ]
};