update: 1.新增职业管理模块和角色职业关联 2.章节分析自动更新角色职业状态 3.优化章节生成的角色信息构建 4.批量生成强制开启同步分析 5.章节内容批量生成增加系统提示

2025-12-22 19:53:31 +08:00
parent 6886d903fe
commit b2dec41464
25 changed files with 4635 additions and 89 deletions
@@ -0,0 +1,433 @@
+import { useState, useEffect } from 'react';
+import { Button, Modal, Form, Input, Select, message, Row, Col, Empty, Tabs, Card, Tag, Space, Divider, Typography, InputNumber } from 'antd';
+import { ThunderboltOutlined, PlusOutlined, EditOutlined, DeleteOutlined, TrophyOutlined } from '@ant-design/icons';
+import { useParams } from 'react-router-dom';
+import axios from 'axios';
+import SSEProgressModal from '../components/SSEProgressModal';
+
+const { TextArea } = Input;
+const { Title, Text, Paragraph } = Typography;
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000';
+
+interface CareerStage {
+    level: number;
+    name: string;
+    description?: string;
+}
+
+interface Career {
+    id: string;
+    project_id: string;
+    name: string;
+    type: 'main' | 'sub';
+    description?: string;
+    category?: string;
+    stages: CareerStage[];
+    max_stage: number;
+    requirements?: string;
+    special_abilities?: string;
+    worldview_rules?: string;
+    source: string;
+}
+
+export default function Careers() {
+    const { projectId } = useParams<{ projectId: string }>();
+    const [mainCareers, setMainCareers] = useState<Career[]>([]);
+    const [subCareers, setSubCareers] = useState<Career[]>([]);
+    const [, setLoading] = useState(true);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isAIModalOpen, setIsAIModalOpen] = useState(false);
+    const [editingCareer, setEditingCareer] = useState<Career | null>(null);
+    const [form] = Form.useForm();
+    const [aiForm] = Form.useForm();
+
+    // AI生成状态
+    const [aiGenerating, setAiGenerating] = useState(false);
+    const [aiProgress, setAiProgress] = useState(0);
+    const [aiMessage, setAiMessage] = useState('');
+
+    useEffect(() => {
+        if (projectId) {
+            fetchCareers();
+        }
+    }, [projectId]);
+
+    const fetchCareers = async () => {
+        try {
+            setLoading(true);
+            const response = await axios.get(`${API_BASE_URL}/api/careers`, {
+                params: { project_id: projectId },
+                headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
+            });
+            setMainCareers(response.data.main_careers || []);
+            setSubCareers(response.data.sub_careers || []);
+        } catch (error: any) {
+            message.error(error.response?.data?.detail || '获取职业列表失败');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleOpenModal = (career?: Career) => {
+        if (career) {
+            setEditingCareer(career);
+            form.setFieldsValue({
+                ...career,
+                stages: career.stages.map(s => `${s.level}. ${s.name}${s.description ? ` - ${s.description}` : ''}`).join('\n')
+            });
+        } else {
+            setEditingCareer(null);
+            form.resetFields();
+        }
+        setIsModalOpen(true);
+    };
+
+    const handleSubmit = async (values: any) => {
+        try {
+            // 解析阶段数据
+            const stagesText = values.stages || '';
+            const stages: CareerStage[] = stagesText.split('\n')
+                .filter((line: string) => line.trim())
+                .map((line: string, index: number) => {
+                    const match = line.match(/^(\d+)\.\s*([^-]+)(?:\s*-\s*(.*))?$/);
+                    if (match) {
+                        return {
+                            level: parseInt(match[1]),
+                            name: match[2].trim(),
+                            description: match[3]?.trim() || ''
+                        };
+                    }
+                    return {
+                        level: index + 1,
+                        name: line.trim(),
+                        description: ''
+                    };
+                });
+
+            const data = {
+                ...values,
+                stages,
+                max_stage: stages.length
+            };
+
+            if (editingCareer) {
+                await axios.put(`${API_BASE_URL}/api/careers/${editingCareer.id}`, data, {
+                    headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
+                });
+                message.success('职业更新成功');
+            } else {
+                await axios.post(`${API_BASE_URL}/api/careers`, {
+                    ...data,
+                    project_id: projectId,
+                    source: 'manual'
+                }, {
+                    headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
+                });
+                message.success('职业创建成功');
+            }
+
+            setIsModalOpen(false);
+            form.resetFields();
+            fetchCareers();
+        } catch (error: any) {
+            message.error(error.response?.data?.detail || '操作失败');
+        }
+    };
+
+    const handleDelete = async (id: string) => {
+        Modal.confirm({
+            title: '确认删除',
+            content: '确定要删除这个职业吗？如果有角色使用了该职业，将无法删除。',
+            onOk: async () => {
+                try {
+                    await axios.delete(`${API_BASE_URL}/api/careers/${id}`, {
+                        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
+                    });
+                    message.success('职业删除成功');
+                    fetchCareers();
+                } catch (error: any) {
+                    message.error(error.response?.data?.detail || '删除失败');
+                }
+            }
+        });
+    };
+
+    const handleAIGenerate = async (values: any) => {
+        setIsAIModalOpen(false);
+        setAiGenerating(true);
+        setAiProgress(0);
+        setAiMessage('开始生成新职业...');
+
+        try {
+            const eventSource = new EventSource(
+                `${API_BASE_URL}/api/careers/generate-system?` +
+                new URLSearchParams({
+                    project_id: projectId || '',
+                    main_career_count: values.main_career_count.toString(),
+                    sub_career_count: values.sub_career_count.toString(),
+                    enable_mcp: 'false'
+                }).toString()
+            );
+
+            eventSource.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data);
+
+                    if (data.type === 'progress') {
+                        setAiProgress(data.progress || 0);
+                        setAiMessage(data.message || '');
+                    } else if (data.type === 'done') {
+                        eventSource.close();
+                        setTimeout(() => {
+                            setAiGenerating(false);
+                            message.success('AI新职业生成完成！');
+                            fetchCareers();
+                        }, 1000);
+                    } else if (data.type === 'error') {
+                        eventSource.close();
+                        setAiGenerating(false);
+                        message.error(data.message || '生成失败');
+                    }
+                } catch (e) {
+                    console.error('解析SSE数据失败:', e);
+                }
+            };
+
+            eventSource.onerror = () => {
+                eventSource.close();
+                setAiGenerating(false);
+                message.error('连接中断，生成失败');
+            };
+        } catch (err: any) {
+            setAiGenerating(false);
+            message.error(err.message || '启动生成失败');
+        }
+    };
+
+    const renderCareerCard = (career: Career) => (
+        <Card
+            key={career.id}
+            title={
+                <Space>
+                    <TrophyOutlined />
+                    {career.name}
+                    <Tag color={career.source === 'ai' ? 'blue' : 'default'}>
+                        {career.source === 'ai' ? 'AI生成' : '手动创建'}
+                    </Tag>
+                    {career.category && <Tag>{career.category}</Tag>}
+                </Space>
+            }
+            extra={
+                <Space>
+                    <Button size="small" icon={<EditOutlined />} onClick={() => handleOpenModal(career)} />
+                    <Button size="small" danger icon={<DeleteOutlined />} onClick={() => handleDelete(career.id)} />
+                </Space>
+            }
+            style={{ marginBottom: 16 }}
+        >
+            <Paragraph ellipsis={{ rows: 2 }}>{career.description || '暂无描述'}</Paragraph>
+            <Divider style={{ margin: '12px 0' }} />
+            <Text strong>阶段体系（共{career.max_stage}个）：</Text>
+            <div style={{ maxHeight: 120, overflowY: 'auto', marginTop: 8 }}>
+                {career.stages.slice(0, 5).map(stage => (
+                    <div key={stage.level} style={{ marginLeft: 16, marginBottom: 4 }}>
+                        <Text type="secondary">{stage.level}. {stage.name}</Text>
+                        {stage.description && <Text type="secondary" style={{ fontSize: 12 }}> - {stage.description}</Text>}
+                    </div>
+                ))}
+                {career.stages.length > 5 && (
+                    <Text type="secondary" style={{ marginLeft: 16 }}>...还有{career.stages.length - 5}个阶段</Text>
+                )}
+            </div>
+            {career.special_abilities && (
+                <>
+                    <Divider style={{ margin: '12px 0' }} />
+                    <Text strong>特殊能力：</Text>
+                    <Paragraph ellipsis={{ rows: 2 }} style={{ marginTop: 4 }}>{career.special_abilities}</Paragraph>
+                </>
+            )}
+        </Card>
+    );
+
+    const tabItems = [
+        {
+            key: 'main',
+            label: `主职业 (${mainCareers.length})`,
+            children: mainCareers.length > 0 ? (
+                <div>{mainCareers.map(renderCareerCard)}</div>
+            ) : (
+                <Empty description="还没有主职业" />
+            )
+        },
+        {
+            key: 'sub',
+            label: `副职业 (${subCareers.length})`,
+            children: subCareers.length > 0 ? (
+                <div>{subCareers.map(renderCareerCard)}</div>
+            ) : (
+                <Empty description="还没有副职业" />
+            )
+        }
+    ];
+
+    return (
+        <div style={{
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden'
+        }}>
+            {/* 固定头部 */}
+            <div style={{
+                padding: '16px 16px 0 16px',
+                flexShrink: 0
+            }}>
+                <div style={{
+                    marginBottom: 16,
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    flexWrap: 'wrap',
+                    gap: '12px'
+                }}>
+                    <Title level={3} style={{ margin: 0 }}>职业管理</Title>
+                    <Space wrap>
+                        <Button
+                            type="dashed"
+                            icon={<ThunderboltOutlined />}
+                            onClick={() => {
+                                aiForm.resetFields();
+                                setIsAIModalOpen(true);
+                            }}
+                        >
+                            AI生成新职业
+                        </Button>
+                        <Button
+                            type="primary"
+                            icon={<PlusOutlined />}
+                            onClick={() => handleOpenModal()}
+                        >
+                            新增职业
+                        </Button>
+                    </Space>
+                </div>
+            </div>
+
+            {/* 可滚动的内容区域 */}
+            <div style={{
+                flex: 1,
+                overflow: 'auto',
+                padding: '0 16px 16px 16px'
+            }}>
+                <Tabs items={tabItems} />
+            </div>
+
+            {/* 创建/编辑对话框 */}
+            <Modal
+                title={editingCareer ? '编辑职业' : '新增职业'}
+                open={isModalOpen}
+                onCancel={() => {
+                    setIsModalOpen(false);
+                    form.resetFields();
+                }}
+                footer={null}
+                width={700}
+            >
+                <Form form={form} layout="vertical" onFinish={handleSubmit}>
+                    <Row gutter={16}>
+                        <Col span={16}>
+                            <Form.Item label="职业名称" name="name" rules={[{ required: true }]}>
+                                <Input placeholder="如：剑修、炼丹师" />
+                            </Form.Item>
+                        </Col>
+                        <Col span={8}>
+                            <Form.Item label="类型" name="type" rules={[{ required: true }]} initialValue="main">
+                                <Select>
+                                    <Select.Option value="main">主职业</Select.Option>
+                                    <Select.Option value="sub">副职业</Select.Option>
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+
+                    <Form.Item label="职业描述" name="description">
+                        <TextArea rows={2} placeholder="描述这个职业..." />
+                    </Form.Item>
+
+                    <Form.Item label="职业分类" name="category">
+                        <Input placeholder="如：战斗系、生产系、辅助系" />
+                    </Form.Item>
+
+                    <Form.Item label="职业阶段" name="stages" tooltip="每行一个阶段，格式：1. 阶段名 - 描述">
+                        <TextArea
+                            rows={8}
+                            placeholder="示例：&#10;1. 炼气期 - 初窥门径&#10;2. 筑基期 - 根基稳固&#10;3. 金丹期 - 凝结金丹"
+                        />
+                    </Form.Item>
+
+                    <Form.Item label="职业要求" name="requirements">
+                        <TextArea rows={2} placeholder="需要什么条件才能修炼..." />
+                    </Form.Item>
+
+                    <Form.Item label="特殊能力" name="special_abilities">
+                        <TextArea rows={2} placeholder="这个职业的特殊能力..." />
+                    </Form.Item>
+
+                    <Form.Item label="世界观规则" name="worldview_rules">
+                        <TextArea rows={2} placeholder="如何融入世界观..." />
+                    </Form.Item>
+
+                    <Form.Item>
+                        <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
+                            <Button onClick={() => setIsModalOpen(false)}>取消</Button>
+                            <Button type="primary" htmlType="submit">
+                                {editingCareer ? '更新' : '创建'}
+                            </Button>
+                        </Space>
+                    </Form.Item>
+                </Form>
+            </Modal>
+
+            {/* AI生成对话框 */}
+            <Modal
+                title="AI生成新职业（增量式）"
+                open={isAIModalOpen}
+                onCancel={() => setIsAIModalOpen(false)}
+                footer={null}
+            >
+                <Form form={aiForm} layout="vertical" onFinish={handleAIGenerate}>
+                    <Paragraph type="secondary">
+                        AI将分析当前世界观和已有职业，智能生成新的补充职业。
+                        <br />
+                        💡 可以多次生成，逐步完善职业体系，不会替换已有职业。
+                    </Paragraph>
+                    <Divider style={{ margin: '12px 0' }} />
+                    <Form.Item label="本次新增主职业数量" name="main_career_count" initialValue={3}>
+                        <InputNumber min={1} max={10} style={{ width: '100%' }} />
+                    </Form.Item>
+                    <Form.Item label="本次新增副职业数量" name="sub_career_count" initialValue={5}>
+                        <InputNumber min={0} max={15} style={{ width: '100%' }} />
+                    </Form.Item>
+                    <Form.Item>
+                        <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
+                            <Button onClick={() => setIsAIModalOpen(false)}>取消</Button>
+                            <Button type="primary" icon={<ThunderboltOutlined />} htmlType="submit">
+                                开始生成
+                            </Button>
+                        </Space>
+                    </Form.Item>
+                </Form>
+            </Modal>
+
+            {/* AI生成进度 */}
+            <SSEProgressModal
+                visible={aiGenerating}
+                progress={aiProgress}
+                message={aiMessage}
+                title="AI生成新职业中..."
+                onCancel={() => setAiGenerating(false)}
+            />
+        </div>
+    );
+}