import React from 'react';
import { Card, Typography, Divider, Space, Tag, List, Steps, Alert, Tabs } from 'antd';
import { BookOutlined, SettingOutlined, RobotOutlined, EditOutlined, AppstoreOutlined, CheckCircleOutlined } from '@ant-design/icons';

const { Title, Paragraph, Text } = Typography;

const UserManual: React.FC = () => {
  const tabItems = [
    {
      key: 'overview',
      label: (
        <span>
          <RobotOutlined /> 系统概述
        </span>
      ),
      children: (
        <div>
          <Card>
            <Title level={3}>AI 小说创作系统概述</Title>
            <Paragraph>
              AI 小说创作系统是一个基于人工智能的辅助创作平台，通过本地部署的 Ollama 模型帮助用户完成小说创作的各个环节。
              系统提供从小说创建、设定生成、章节创作到完整作品管理的全流程支持。
            </Paragraph>
            
            <Title level={4}>主要功能</Title>
            <List
              dataSource={[
                '智能小说设定生成（角色、世界观、故事线）',
                '分章节内容创作与续写',
                '本地化部署，数据安全可控',
                '多项目管理，便于同时处理多个作品',
                '灵活的参数配置，适应不同创作风格'
              ]}
              renderItem={(item: string) => (
                <List.Item>
                  <Text>{item}</Text>
                </List.Item>
              )}
            />
          </Card>
        </div>
      )
    },
    {
      key: 'model',
      label: (
        <span>
          <SettingOutlined /> 模型配置指南
        </span>
      ),
      children: (
        <div>
          <Alert
            message="重要提示"
            description="配置模型是使用本系统的第一步，必须先完成模型配置才能使用 AI 创作功能。"
            type="warning"
            showIcon
            style={{ marginBottom: '16px' }}
          />
          
          <Card style={{ marginBottom: '16px' }}>
            <Title level={4}>1. Ollama 服务安装</Title>
            <Paragraph>
              首先需要在本地安装 Ollama 服务，这是系统运行的基础。
            </Paragraph>
            
            <Title level={5}>安装步骤：</Title>
            <Steps
              direction="vertical"
              current={-1}
              items={[
                {
                  title: '下载 Ollama',
                  description: '访问 Ollama 官网（https://ollama.ai）下载适合您操作系统的版本'
                },
                {
                  title: '安装 Ollama',
                  description: '运行安装程序，按提示完成安装'
                },
                {
                  title: '启动服务',
                  description: '在终端中运行 ollama serve 命令启动服务'
                },
                {
                  title: '验证安装',
                  description: '确认服务运行在默认端口 11434'
                }
              ]}
            />

            <Divider />

            <Title level={4}>2. 模型安装与选择</Title>
            <Paragraph>
              安装完 Ollama 后，需要安装适合的 AI 模型用于小说创作。
            </Paragraph>

            <Title level={5}>推荐模型配置：</Title>
            <Space direction="vertical" style={{ width: '100%', marginBottom: '16px' }}>
              <div style={{ padding: '12px', background: '#f6ffed', borderRadius: '6px', border: '1px solid #b7eb8f' }}>
                <div>
                  <Tag color="green">推荐配置</Tag>
                  <Text strong>qwen3:8b</Text>
                  <Text type="secondary"> - 8B 参数，质量和速度平衡，适合大多数创作需求</Text>
                </div>
                <div style={{ marginTop: '8px' }}>
                  <Text code>ollama pull qwen3:8b</Text>
                </div>
              </div>
              
              <div style={{ padding: '12px', background: '#e6f7ff', borderRadius: '6px', border: '1px solid #91d5ff' }}>
                <div>
                  <Tag color="blue">进阶配置</Tag>
                  <Text strong>qwen3:14b</Text>
                  <Text type="secondary"> - 14B 参数，生成质量更高，需要更多内存</Text>
                </div>
                <div style={{ marginTop: '8px' }}>
                  <Text code>ollama pull qwen3:14b</Text>
                </div>
              </div>
              
              <div style={{ padding: '12px', background: '#fff9e6', borderRadius: '6px', border: '1px solid #ffe58f' }}>
                <div>
                  <Tag color="purple">高级配置</Tag>
                  <Text strong>qwen3:32b</Text>
                  <Text type="secondary"> - 32B 参数，最佳创作效果，需要较好的硬件配置</Text>
                </div>
                <div style={{ marginTop: '8px' }}>
                  <Text code>ollama pull qwen3:32b</Text>
                </div>
              </div>
            </Space>

            <Title level={5}>其他可选模型：</Title>
            <List
              dataSource={[
                <div>
                  <Text strong>llama3:8b</Text> - Meta 开源的 Llama 3 模型，英文表现优秀
                </div>,
                <div>
                  <Text strong>mistral:7b</Text> - Mistral AI 开发的模型，推理能力强
                </div>,
                <div>
                  <Text strong>gemma:7b</Text> - Google 开发的 Gemma 模型
                </div>
              ]}
              renderItem={(item: React.ReactNode) => (
                <List.Item>
                  {item}
                </List.Item>
              )}
            />

            <Divider />

            <Title level={4}>3. 系统配置参数详解</Title>
            <Paragraph>
              在"设置 → 模型"页面中，您可以配置以下关键参数来优化 AI 创作效果：
            </Paragraph>

            <Title level={5}>服务配置参数：</Title>
            <List
              dataSource={[
                <div>
                  <Text strong>Ollama 服务地址：</Text>
                  <div style={{ marginTop: '4px' }}>
                    <Text type="secondary">默认地址：http://localhost:11434</Text>
                  </div>
                  <div style={{ marginTop: '4px', padding: '8px', background: '#f5f5f5', borderRadius: '4px' }}>
                    <Text code>http://localhost:11434</Text>
                  </div>
                  <div style={{ marginTop: '4px' }}>
                    <Text type="secondary">如果 Ollama 安装在其他机器或端口，请相应修改地址</Text>
                  </div>
                </div>,
                <div>
                  <Text strong>AI 模型选择：</Text>
                  <div style={{ marginTop: '4px' }}>
                    <Text type="secondary">只能选择本地已安装的模型，需要先点击"检测模型"按钮</Text>
                  </div>
                  <div style={{ marginTop: '4px', padding: '8px', background: '#fffbe6', borderRadius: '4px', border: '1px solid #ffe58f' }}>
                    <Text strong>注意：</Text>如果模型列表为空，请先用命令行安装模型
                  </div>
                </div>
              ]}
              renderItem={(item: React.ReactNode) => (
                <List.Item>
                  {item}
                </List.Item>
              )}
            />

            <Title level={5}>生成参数配置：</Title>
            <List
              dataSource={[
                <div>
                  <Text strong>温度参数：</Text>
                  <div style={{ marginTop: '4px' }}>
                    <Text type="secondary">范围：0-2，推荐值：0.7</Text>
                  </div>
                  <div style={{ marginTop: '4px' }}>
                    <Text type="secondary">• 低值（0.3-0.5）：生成内容更加确定、保守</Text>
                  </div>
                  <div style={{ marginTop: '4px' }}>
                    <Text type="secondary">• 中值（0.6-0.8）：平衡创造性和连贯性（推荐）</Text>
                  </div>
                  <div style={{ marginTop: '4px' }}>
                    <Text type="secondary">• 高值（0.9-1.2）：内容更加随机、创新</Text>
                  </div>
                </div>,
                <div>
                  <Text strong>Top P 参数：</Text>
                  <div style={{ marginTop: '4px' }}>
                    <Text type="secondary">范围：0-1，推荐值：0.9</Text>
                  </div>
                  <div style={{ marginTop: '4px' }}>
                    <Text type="secondary">控制生成文本的多样性，值越高内容越多样</Text>
                  </div>
                </div>,
                <div>
                  <Text strong>最大 Tokens：</Text>
                  <div style={{ marginTop: '4px' }}>
                    <Text type="secondary">范围：100-8000，推荐值：2000</Text>
                  </div>
                  <div style={{ marginTop: '4px' }}>
                    <Text type="secondary">控制单次生成的最大长度，1 Token ≈ 0.75 个中文字符</Text>
                  </div>
                </div>
              ]}
              renderItem={(item: React.ReactNode) => (
                <List.Item>
                  {item}
                </List.Item>
              )}
            />

            <Divider />

            <Title level={4}>4. 配置验证完整流程</Title>
            <Alert
              message="配置验证步骤"
              description="请按顺序完成以下步骤，确保每个步骤都成功后再进行下一步"
              type="info"
              showIcon
              style={{ marginBottom: '16px' }}
            />
            
            <Steps
              direction="vertical"
              current={-1}
              items={[
                {
                  title: '步骤 1：测试 Ollama 服务连接',
                  description: (
                    <div>
                      <div>点击"测试连接"按钮验证 Ollama 服务状态</div>
                      <div style={{ marginTop: '8px', padding: '8px', background: '#f6ffed', borderRadius: '4px' }}>
                        <CheckCircleOutlined style={{ color: '#52c41a', marginRight: '4px' }} />
                        <Text>成功提示：Ollama 服务连接成功！</Text>
                      </div>
                      <div style={{ marginTop: '8px', padding: '8px', background: '#fff1f0', borderRadius: '4px' }}>
                        <Text>失败提示：请检查 ollama serve 是否正在运行</Text>
                      </div>
                    </div>
                  )
                },
                {
                  title: '步骤 2：检测已安装模型',
                  description: (
                    <div>
                      <div>点击"检测模型"按钮获取本地已安装的模型列表</div>
                      <div style={{ marginTop: '8px', padding: '8px', background: '#f6ffed', borderRadius: '4px' }}>
                        <CheckCircleOutlined style={{ color: '#52c41a', marginRight: '4px' }} />
                        <Text>成功提示：成功检测到 N 个已安装模型</Text>
                      </div>
                      <div style={{ marginTop: '8px', padding: '8px', background: '#fffbe6', borderRadius: '4px' }}>
                        <Text>警告提示：未检测到已安装的模型，请先使用 ollama pull 命令安装模型</Text>
                      </div>
                    </div>
                  )
                },
                {
                  title: '步骤 3：选择 AI 模型',
                  description: (
                    <div>
                      <div>从下拉列表中选择要使用的模型</div>
                      <div style={{ marginTop: '8px' }}>
                        <Text type="secondary">• 模型列表显示：模型名称（模型大小）</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text type="secondary">• 选择已安装的模型，系统会显示当前使用模型信息</Text>
                      </div>
                    </div>
                  )
                },
                {
                  title: '步骤 4：调整生成参数',
                  description: (
                    <div>
                      <div>根据您的创作需求调整参数</div>
                      <div style={{ marginTop: '8px' }}>
                        <Text type="secondary">• 初次使用建议保持默认参数</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text type="secondary">• 有经验后可以根据题材特点微调参数</Text>
                      </div>
                    </div>
                  )
                },
                {
                  title: '步骤 5：保存配置',
                  description: (
                    <div>
                      <div>点击"保存配置"按钮完成设置</div>
                      <div style={{ marginTop: '8px', padding: '8px', background: '#f6ffed', borderRadius: '4px' }}>
                        <CheckCircleOutlined style={{ color: '#52c41a', marginRight: '4px' }} />
                        <Text>成功提示：配置保存成功！</Text>
                      </div>
                      <div style={{ marginTop: '8px' }}>
                        <Text type="secondary">保存后系统会自动刷新状态，页面底部会显示当前配置信息</Text>
                      </div>
                    </div>
                  )
                }
              ]}
            />
          </Card>
        </div>
      )
    },
    {
      key: 'novel',
      label: (
        <span>
          <EditOutlined /> 小说管理功能
        </span>
      ),
      children: (
        <div>
          <Alert
            message="核心功能"
            description="小说管理是本系统的核心功能，支持从创意到成稿的完整创作流程。"
            type="info"
            showIcon
            style={{ marginBottom: '16px' }}
          />
          
          <Card style={{ marginBottom: '16px' }}>
            <Title level={4}>1. 创建新小说（第一步）</Title>
            <Paragraph>
              开始创作前，首先需要创建一个新的小说项目。这是整个创作流程的起点。
            </Paragraph>

            <Title level={5}>详细步骤：</Title>
            <Steps
              direction="vertical"
              current={-1}
              items={[
                {
                  title: '步骤 1：进入小说管理页面',
                  description: (
                    <div>
                      <div>点击左侧菜单的"小说管理"进入小说列表页面</div>
                      <div style={{ marginTop: '8px', padding: '8px', background: '#f0f9ff', borderRadius: '4px' }}>
                        <Text type="secondary">📍 位置：左侧菜单 → 第一项"小说管理"</Text>
                      </div>
                    </div>
                  )
                },
                {
                  title: '步骤 2：点击"新建小说"按钮',
                  description: (
                    <div>
                      <div>在页面右上角找到蓝色的"新建小说"按钮</div>
                      <div style={{ marginTop: '8px', padding: '8px', background: '#f0f9ff', borderRadius: '4px' }}>
                        <Text type="secondary">📍 位置：页面右上角，带有 ➕ 图标的蓝色按钮</Text>
                      </div>
                    </div>
                  )
                },
                {
                  title: '步骤 3：填写小说基本信息',
                  description: (
                    <div>
                      <div>在弹出的对话框中填写以下信息：</div>
                      <div style={{ marginTop: '8px' }}>
                        <Text strong>书名：</Text>
                        <Text type="secondary">为您的小说起一个吸引人的名字（必填）</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text strong>题材类型：</Text>
                        <Text type="secondary">从下拉列表中选择题材（必填）</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text strong>初步想法：</Text>
                        <Text type="secondary">简单描述您的创作概念，可留空让 AI 帮助完善（选填）</Text>
                      </div>
                    </div>
                  )
                },
                {
                  title: '步骤 4：确认创建',
                  description: (
                    <div>
                      <div>点击"确定"按钮完成小说创建</div>
                      <div style={{ marginTop: '8px', padding: '8px', background: '#f6ffed', borderRadius: '4px' }}>
                        <CheckCircleOutlined style={{ color: '#52c41a', marginRight: '4px' }} />
                        <Text>成功提示：小说创建成功，请前往AI生成页面完善设定</Text>
                      </div>
                    </div>
                  )
                }
              ]}
            />

            <Title level={5}>题材选项说明：</Title>
            <List
              grid={{ gutter: 16, column: 3 }}
              dataSource={[
                '穿越', '都市', '修仙', '武侠', '玄幻', 
                '科幻', '言情', '历史', '游戏', '灵异', '军事', '悬疑', '其他'
              ]}
              renderItem={(item: string) => (
                <List.Item>
                  <Tag color="blue">{item}</Tag>
                </List.Item>
              )}
            />
          </Card>

          <Card style={{ marginBottom: '16px' }}>
            <Title level={4}>2. 完善小说设定（第二步）</Title>
            <Paragraph>
              创建小说后，下一步是完善小说的详细设定。这是创作高质量小说的基础。
            </Paragraph>

            <Title level={5}>详细步骤：</Title>
            <Steps
              direction="vertical"
              current={-1}
              items={[
                {
                  title: '步骤 1：进入 AI 生成页面',
                  description: (
                    <div>
                      <div>在小说列表中找到刚创建的小说，点击卡片进入详情页</div>
                      <div style={{ marginTop: '8px' }}>
                        <Text type="secondary">或者：点击卡片上的"编辑"按钮，然后选择"完善设定"</Text>
                      </div>
                      <div style={{ marginTop: '8px', padding: '8px', background: '#fffbe6', borderRadius: '4px', border: '1px solid #ffe58f' }}>
                        <Text strong>⚠️ 重要：</Text>如果未完善设定，会显示黄色警告提示
                      </div>
                    </div>
                  )
                },
                {
                  title: '步骤 2：配置小说参数',
                  description: (
                    <div>
                      <div>在 AI 生成页面配置以下参数：</div>
                      <div style={{ marginTop: '8px' }}>
                        <Text strong>小说名称：</Text>
                        <Text type="secondary">自动显示创建时的书名（不可修改）</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text strong>题材类型：</Text>
                        <Text type="secondary">自动显示创建时的题材（不可修改）</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text strong>目标字数：</Text>
                        <Text type="secondary">选择小说总字数：5万字、10万字、20万字、30万字、50万字、100万字</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text strong>特殊要求：</Text>
                        <Text type="secondary">描述您对这部小说的特殊要求或想法（选填）</Text>
                      </div>
                    </div>
                  )
                },
                {
                  title: '步骤 3：AI 生成基础设定',
                  description: (
                    <div>
                      <div>点击"AI生成设定"按钮，AI 将为您生成：</div>
                      <div style={{ marginTop: '8px' }}>
                        <Text strong>📖 故事大纲：</Text>
                        <Text type="secondary">整个故事的核心情节和主题（150字以内）</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text strong>🏗️ 情节结构：</Text>
                        <Text type="secondary">按模块划分整个故事的结构</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text strong>👥 人物设定：</Text>
                        <Text type="secondary">主要人物的详细设定，包括主角、配角、反派</Text>
                      </div>
                      <div style={{ marginTop: '8px', padding: '8px', background: '#f6ffed', borderRadius: '4px' }}>
                        <CheckCircleOutlined style={{ color: '#52c41a', marginRight: '4px' }} />
                        <Text>成功提示：基础设定生成成功！现在可以开始手动生成章节标题和细纲。</Text>
                      </div>
                    </div>
                  )
                },
                {
                  title: '步骤 4：生成章节规划',
                  description: (
                    <div>
                      <div>基础设定生成后，可以开始生成章节标题和细纲：</div>
                      <div style={{ marginTop: '8px' }}>
                        <Text strong>单个生成：</Text>
                        <Text type="secondary">点击"生成下一章标题+细纲"逐章生成</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text strong>批量生成：</Text>
                        <Text type="secondary">点击"批量生成5章标题+细纲"一次生成多个章节</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text strong>单独生成：</Text>
                        <Text type="secondary">直接点击章节卡片单独生成某章的标题和细纲</Text>
                      </div>
                      <div style={{ marginTop: '8px', padding: '8px', background: '#f0f9ff', borderRadius: '4px' }}>
                        <Text type="secondary">💡 提示：章节规划包含章节标题、细纲、预计字数等信息</Text>
                      </div>
                    </div>
                  )
                },
                {
                  title: '步骤 5：编辑和确认设定',
                  description: (
                    <div>
                      <div>生成的内容可以手动编辑：</div>
                      <div style={{ marginTop: '8px' }}>
                        <Text strong>编辑设定：</Text>
                        <Text type="secondary">点击"编辑设定"按钮修改故事大纲、情节结构、人物设定</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text strong>编辑章节：</Text>
                        <Text type="secondary">点击章节卡片的"编辑"按钮修改章节标题和细纲</Text>
                      </div>
                      <div style={{ marginTop: '8px' }}>
                        <Text strong>确认保存：</Text>
                        <Text type="secondary">确认无误后点击"确认并保存"按钮</Text>
                      </div>
                    </div>
                  )
                }
              ]}
            />
          </Card>

          <Card style={{ marginBottom: '16px' }}>
            <Title level={4}>3. 章节内容创作（第三步）</Title>
            <Paragraph>
              完成设定后，就可以开始具体的章节内容创作了。
            </Paragraph>

            <Title level={5}>详细步骤：</Title>
            <Steps
              direction="vertical"
              current={-1}
              items={[
                {
                  title: '步骤 1：进入小说详情页',
                  description: (
                    <div>
                      <div>点击"前往创作"按钮或返回小说列表，点击小说卡片</div>
                      <div style={{ marginTop: '8px', padding: '8px', background: '#f0f9ff', borderRadius: '4px' }}>
                        <Text type="secondary">📍 位置：小说列表 → 点击小说卡片</Text>
                      </div>
                    </div>
                  )
                },
                {
                  title: '步骤 2：查看章节规划',
                  description: (
                    <div>
                      <div>在"章节列表"中可以看到所有已规划的章节：</div>
                      <div style={{ marginTop: '8px' }}>
                        <Tag color="green">绿色边框</Tag>
                        <Text type="secondary">：已生成标题和细纲的章节</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Tag color="orange">黄色边框</Tag>
                        <Text type="secondary">：待生成标题和细纲的章节</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Tag color="blue">蓝色边框</Tag>
                        <Text type="secondary">：已创作内容的章节</Text>
                      </div>
                    </div>
                  )
                },
                {
                  title: '步骤 3：生成章节内容',
                  description: (
                    <div>
                      <div>选择一个已规划标题和细纲的章节，点击"AI生成"按钮：</div>
                      <div style={{ marginTop: '8px' }}>
                        <Text strong>生成过程：</Text>
                        <Text type="secondary">AI 会基于小说设定和章节规划生成具体内容</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text strong>生成时间：</Text>
                        <Text type="secondary">大约需要10-30秒，请耐心等待</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text strong>内容质量：</Text>
                        <Text type="secondary">生成的内容约900-1200字，符合章节规划要求</Text>
                      </div>
                      <div style={{ marginTop: '8px', padding: '8px', background: '#f6ffed', borderRadius: '4px' }}>
                        <CheckCircleOutlined style={{ color: '#52c41a', marginRight: '4px' }} />
                        <Text>成功提示：第X章生成成功</Text>
                      </div>
                    </div>
                  )
                },
                {
                  title: '步骤 4：查看和编辑内容',
                  description: (
                    <div>
                      <div>生成完成后，可以查看和编辑内容：</div>
                      <div style={{ marginTop: '8px' }}>
                        <Text strong>查看内容：</Text>
                        <Text type="secondary">点击"查看内容"按钮查看生成的章节内容</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text strong>手动编辑：</Text>
                        <Text type="secondary">可以对AI生成的内容进行手动修改和润色</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text strong>重新生成：</Text>
                        <Text type="secondary">如果不满意，可以删除后重新生成</Text>
                      </div>
                    </div>
                  )
                },
                {
                  title: '步骤 5：继续创作其他章节',
                  description: (
                    <div>
                      <div>重复步骤3-4，完成所有章节的创作：</div>
                      <div style={{ marginTop: '8px' }}>
                        <Text strong>建议顺序：</Text>
                        <Text type="secondary">按章节顺序从第1章开始创作</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text strong>批量创作：</Text>
                        <Text type="secondary">可以连续创作多个章节，保持创作连贯性</Text>
                      </div>
                      <div style={{ marginTop: '4px' }}>
                        <Text strong>定期保存：</Text>
                        <Text type="secondary">系统会自动保存，但建议定期手动确认</Text>
                      </div>
                    </div>
                  )
                }
              ]}
            />

            <Title level={5}>章节管理功能：</Title>
            <List
              dataSource={[
                <div>
                  <Text strong>查看章节：</Text>
                  <Text type="secondary">点击章节卡片的"查看内容"按钮查看完整章节内容</Text>
                </div>,
                <div>
                  <Text strong>编辑章节：</Text>
                  <Text type="secondary">手动修改AI生成的内容，添加自己的创意和风格</Text>
                </div>,
                <div>
                  <Text strong>删除章节：</Text>
                  <Text type="secondary">删除不满意的章节，重新生成</Text>
                </div>,
                <div>
                  <Text strong>下载章节：</Text>
                  <Text type="secondary">将单个章节导出为 Markdown 文件</Text>
                </div>,
                <div>
                  <Text strong>下载整书：</Text>
                  <Text type="secondary">将所有章节合并导出为完整的 Markdown 文件</Text>
                </div>,
                <div>
                  <Text strong>查看规划：</Text>
                  <Text type="secondary">查看章节的标题、细纲、预计字数等规划信息</Text>
                </div>
              ]}
              renderItem={(item: React.ReactNode) => (
                <List.Item>
                  {item}
                </List.Item>
              )}
            />
          </Card>
        </div>
      )
    },
    {
      key: 'tips',
      label: (
        <span>
          <AppstoreOutlined /> 使用技巧
        </span>
      ),
      children: (
        <div>
          <Card>
            <Title level={3}>提高创作质量的技巧</Title>
            <List
              dataSource={[
                '充分完善设定：详细的角色和世界观设定有助于生成更连贯的内容',
                '逐步生成章节：不要一次性生成太多内容，分章节逐步完善质量更高',
                '适当手动编辑：AI生成后进行手动修改，提升整体质量和风格统一性',
                '参数调优：根据不同题材调整温度和Top P参数，找到最佳配置',
                '保持风格一致：在续写时参考前文风格，保持整本小说的风格统一',
                '定期备份：虽然系统有自动保存，但重要节点建议手动导出备份'
              ]}
              renderItem={(item: string) => (
                <List.Item>
                  <Text>{item}</Text>
                </List.Item>
              )}
            />

            <Divider />

            <Title level={3}>常见问题解决</Title>
            <List
              dataSource={[
                <div>
                  <Text strong>问题：生成内容不符合预期</Text>
                  <div style={{ marginTop: '4px' }}>
                    <Text type="secondary">解决：重新编辑章节细纲，提供更详细的指导，然后重新生成</Text>
                  </div>
                </div>,
                <div>
                  <Text strong>问题：章节之间连贯性差</Text>
                  <div style={{ marginTop: '4px' }}>
                    <Text type="secondary">解决：手动编辑前一章的结尾，为下一章做铺垫，然后重新生成</Text>
                  </div>
                </div>,
                <div>
                  <Text strong>问题：人物性格不一致</Text>
                  <div style={{ marginTop: '4px' }}>
                    <Text type="secondary">解决：完善人物设定，详细描述性格特点，并在章节细纲中强调</Text>
                  </div>
                </div>,
                <div>
                  <Text strong>问题：创作进度缓慢</Text>
                  <div style={{ marginTop: '4px' }}>
                    <Text type="secondary">解决：使用批量生成功能，但要注意定期检查质量</Text>
                  </div>
                </div>
              ]}
              renderItem={(item: React.ReactNode) => (
                <List.Item>
                  {item}
                </List.Item>
              )}
            />
          </Card>
        </div>
      )
    }
  ];

  return (
    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '24px' }}>
      <div style={{ marginBottom: '32px', textAlign: 'center' }}>
        <Title level={2} style={{ color: '#1890ff', marginBottom: '8px' }}>
          <BookOutlined /> AI 小说创作系统使用手册
        </Title>
        <Text type="secondary">完整的系统功能使用指南</Text>
      </div>

      <Tabs 
        defaultActiveKey="overview" 
        items={tabItems}
        size="large"
        style={{ marginBottom: '24px' }}
      />

      <Card>
        <Title level={3}>技术支持</Title>
        <Paragraph>
          如遇到问题或需要更多帮助，请参考：
        </Paragraph>
        <List
          dataSource={[
            'Ollama 官方文档：https://github.com/ollama/ollama',
            'Qwen 模型文档：https://huggingface.co/Qwen',
            '系统反馈：通过底部联系信息反馈问题'
          ]}
          renderItem={(item: string) => (
            <List.Item>
              <Text>{item}</Text>
            </List.Item>
          )}
        />
        
        <Divider />
        <Paragraph style={{ textAlign: 'center', color: '#8c8c8c' }}>
          AI 小说创作系统 v0.0.1 | 代码老中医出品
        </Paragraph>
      </Card>
    </div>
  );
};

export default UserManual;