+ {/* 角色特有字段 */}
+ {!isOrganization && (
+ <>
+ {character.age && (
+
+ }
+ />
+
+ 年龄：
+ {character.age}
+
+ )}
+ {character.gender && (
+
+ 性别：
+ {character.gender}
+
+ )}
+ {character.personality && (
+
+ 性格：
+
+ {character.personality}
+
+
+ )}
+
+ )}
+
+ {/* 组织特有字段 */}
+ {isOrganization && (
+ <>
+ {character.organization_type && (
+
+ 类型：
+ {character.organization_type}
+
+ )}
+ {character.organization_purpose && (
+
+ 目的：
+
+ {character.organization_purpose}
+
+
+ )}
+ {character.organization_members && (
+
+ 成员：
+
+ {typeof character.organization_members === 'string'
+ ? character.organization_members
+ : JSON.stringify(character.organization_members)}
+
+
+ )}
+
+ )}
+
+ {/* 通用字段 - 背景信息截断显示 */}
+ {character.background && (
+
+
+ {character.background}
+
+
+ )}
+
+
+ );
+ }
+
+ if (!isAuthenticated) {
+ return
+ = ({
+ loading,
+ progress,
+ message
+}) => {
+ if (!loading) return null;
+
+ return (
+ (null);
+ const [showUserManagement, setShowUserManagement] = useState(false);
+ const [users, setUsers] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [pageSize, setPageSize] = useState(10);
+
+ useEffect(() => {
+ loadCurrentUser();
+ }, []);
+
+ const loadCurrentUser = async () => {
+ try {
+ const user = await authApi.getCurrentUser();
+ setCurrentUser(user);
+ } catch (error) {
+ console.error('获取用户信息失败:', error);
+ }
+ };
+
+ const handleLogout = async () => {
+ try {
+ await authApi.logout();
+ message.success('已退出登录');
+ window.location.href = '/login';
+ } catch (error) {
+ console.error('退出登录失败:', error);
+ message.error('退出登录失败');
+ }
+ };
+
+ const handleShowUserManagement = async () => {
+ if (!currentUser?.is_admin) {
+ message.warning('只有管理员可以访问用户管理');
+ return;
+ }
+
+ setShowUserManagement(true);
+ loadUsers();
+ };
+
+ const loadUsers = async () => {
+ try {
+ setLoading(true);
+ const userList = await userApi.listUsers();
+ setUsers(userList);
+ } catch (error) {
+ console.error('获取用户列表失败:', error);
+ message.error('获取用户列表失败');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleSetAdmin = async (userId: string, isAdmin: boolean) => {
+ try {
+ await userApi.setAdmin(userId, isAdmin);
+ message.success(isAdmin ? '已设置为管理员' : '已取消管理员权限');
+ loadUsers();
+ } catch (error) {
+ console.error('设置管理员失败:', error);
+ message.error('设置管理员失败');
+ }
+ };
+
+ const handleDeleteUser = async (userId: string) => {
+ try {
+ await userApi.deleteUser(userId);
+ message.success('用户已删除');
+ loadUsers();
+ } catch (error) {
+ console.error('删除用户失败:', error);
+ message.error('删除用户失败');
+ }
+ };
+
+ const menuItems: MenuProps['items'] = [
+ {
+ key: 'user-info',
+ label: (
+
+
+ ),
+ },
+ {
+ title: 'Trust Level',
+ dataIndex: 'trust_level',
+ key: 'trust_level',
+ width: 120,
+ render: (level: number) => {level} ,
+ },
+ {
+ title: '角色',
+ dataIndex: 'is_admin',
+ key: 'is_admin',
+ width: 100,
+ render: (isAdmin: boolean) => (
+ isAdmin ? 普通用户
+ ),
+ },
+ {
+ title: '最后登录',
+ dataIndex: 'last_login',
+ key: 'last_login',
+ width: 180,
+ render: (date: string) => new Date(date).toLocaleString('zh-CN'),
+ },
+ {
+ title: '操作',
+ key: 'actions',
+ width: 200,
+ render: (_: unknown, record: User) => {
+ const isSelf = record.user_id === currentUser?.user_id;
+ return (
+
+ {record.is_admin ? (
+ handleSetAdmin(record.user_id, false)}
+ disabled={isSelf}
+ >
+
+
+ ) : (
+
+ )}
+ handleDeleteUser(record.user_id)}
+ disabled={isSelf}
+ >
+
+
+
+ );
+ },
+ },
+ ];
+
+ if (!currentUser) {
+ return null;
+ }
+
+ return (
+ <>
+
+
+
+ setShowUserManagement(false)}
+ footer={null}
+ width={900}
+ centered
+ styles={{
+ body: {
+ padding: 0,
+ display: 'flex',
+ flexDirection: 'column',
+ height: 'calc(100vh - 200px)',
+ }
+ }}
+ >
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..397fdd0
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,129 @@
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(0, 0, 0, 0.87);
+ background-color: #f0f2f5;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ /* 移动端视口适配 */
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+
+body {
+ margin: 0;
+ min-height: 100vh;
+ /* 禁止移动端双击缩放 */
+ touch-action: manipulation;
+}
+
+#root {
+ min-height: 100vh;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+/* 自定义滚动条样式 */
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: #f1f1f1;
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #c1c1c1;
+ border-radius: 4px;
+ transition: background 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #a8a8a8;
+}
+
+/* Firefox 滚动条样式 */
+* {
+ scrollbar-width: thin;
+ scrollbar-color: #c1c1c1 #f1f1f1;
+}
+
+/* 移动端响应式样式 */
+@media (max-width: 768px) {
+ :root {
+ font-size: 14px;
+ }
+
+ /* 移动端隐藏滚动条 */
+ ::-webkit-scrollbar {
+ width: 4px;
+ height: 4px;
+ }
+
+ /* 移动端优化触摸区域 */
+ button, a, [role="button"] {
+ min-height: 44px;
+ min-width: 44px;
+ }
+}
+
+@media (max-width: 576px) {
+ :root {
+ font-size: 13px;
+ }
+}
+
+/* 移动端安全区域适配 (iPhone X+) */
+@supports (padding: max(0px)) {
+ body {
+ padding-left: env(safe-area-inset-left);
+ padding-right: env(safe-area-inset-right);
+ padding-bottom: env(safe-area-inset-bottom);
+ }
+}
+
+/* 移动端禁止长按选择 */
+@media (max-width: 768px) {
+ img, button {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -webkit-touch-callout: none;
+ }
+
+ /* 修复移动端表格分页器对齐问题 */
+ .ant-pagination-simple {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .ant-pagination-simple .ant-pagination-simple-pager {
+ display: inline-flex;
+ align-items: center;
+ margin: 0 8px;
+ }
+
+ .ant-pagination-simple .ant-pagination-simple-pager input {
+ margin: 0 4px;
+ }
+
+ .ant-pagination-simple .ant-pagination-prev,
+ .ant-pagination-simple .ant-pagination-next {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..4f17553
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,15 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ConfigProvider } from 'antd'
+import zhCN from 'antd/locale/zh_CN'
+import 'antd/dist/reset.css'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+ ,
+)
diff --git a/frontend/src/pages/AuthCallback.tsx b/frontend/src/pages/AuthCallback.tsx
new file mode 100644
index 0000000..112eee7
--- /dev/null
+++ b/frontend/src/pages/AuthCallback.tsx
@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Spin, Result, Button } from 'antd';
+import { authApi } from '../services/api';
+
+export default function AuthCallback() {
+ const navigate = useNavigate();
+ const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
+ const [errorMessage, setErrorMessage] = useState('');
+
+ useEffect(() => {
+ const handleCallback = async () => {
+ try {
+ // 后端会通过 Cookie 自动设置认证信息
+ // 这里只需要验证登录状态
+ await authApi.getCurrentUser();
+
+ setStatus('success');
+
+ // 从 sessionStorage 获取重定向地址
+ const redirect = sessionStorage.getItem('login_redirect') || '/';
+ sessionStorage.removeItem('login_redirect');
+
+ // 延迟一下再跳转，让用户看到成功提示
+ setTimeout(() => {
+ navigate(redirect);
+ }, 1000);
+ } catch (error) {
+ console.error('登录失败:', error);
+ setStatus('error');
+ setErrorMessage('登录失败，请重试');
+ }
+ };
+
+ handleCallback();
+ }, [navigate]);
+
+ if (status === 'loading') {
+ return (
+ (null);
+ const [form] = Form.useForm();
+ const [editorForm] = Form.useForm();
+ const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+ const contentTextAreaRef = useRef(null);
+
+ useEffect(() => {
+ const handleResize = () => {
+ setIsMobile(window.innerWidth <= 768);
+ };
+
+ window.addEventListener('resize', handleResize);
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
+ const {
+ refreshChapters,
+ updateChapter,
+ generateChapterContentStream
+ } = useChapterSync();
+
+ useEffect(() => {
+ if (currentProject?.id) {
+ refreshChapters();
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [currentProject?.id]);
+
+ if (!currentProject) return null;
+
+ const canGenerateChapter = (chapter: Chapter): boolean => {
+ if (chapter.chapter_number === 1) {
+ return true;
+ }
+
+ const previousChapters = chapters.filter(
+ c => c.chapter_number < chapter.chapter_number
+ );
+
+ return previousChapters.every(c => c.content && c.content.trim() !== '');
+ };
+
+ const getGenerateDisabledReason = (chapter: Chapter): string => {
+ if (chapter.chapter_number === 1) {
+ return '';
+ }
+
+ const previousChapters = chapters.filter(
+ c => c.chapter_number < chapter.chapter_number
+ );
+
+ const incompleteChapters = previousChapters.filter(
+ c => !c.content || c.content.trim() === ''
+ );
+
+ if (incompleteChapters.length > 0) {
+ const numbers = incompleteChapters.map(c => c.chapter_number).join('、');
+ return `需要先完成前置章节：第 ${numbers} 章`;
+ }
+
+ return '';
+ };
+
+ const handleOpenModal = (id: string) => {
+ const chapter = chapters.find(c => c.id === id);
+ if (chapter) {
+ form.setFieldsValue(chapter);
+ setEditingId(id);
+ setIsModalOpen(true);
+ }
+ };
+
+ const handleSubmit = async (values: ChapterUpdate) => {
+ if (!editingId) return;
+
+ try {
+ await updateChapter(editingId, values);
+ message.success('章节更新成功');
+ setIsModalOpen(false);
+ form.resetFields();
+ } catch {
+ message.error('操作失败');
+ }
+ };
+
+ const handleOpenEditor = (id: string) => {
+ const chapter = chapters.find(c => c.id === id);
+ if (chapter) {
+ setCurrentChapter(chapter);
+ editorForm.setFieldsValue({
+ title: chapter.title,
+ content: chapter.content,
+ });
+ setEditingId(id);
+ setIsEditorOpen(true);
+ }
+ };
+
+ const handleEditorSubmit = async (values: ChapterUpdate) => {
+ if (!editingId || !currentProject) return;
+
+ try {
+ await updateChapter(editingId, values);
+
+ // 刷新项目信息以更新总字数统计
+ const updatedProject = await projectApi.getProject(currentProject.id);
+ setCurrentProject(updatedProject);
+
+ message.success('章节保存成功');
+ setIsEditorOpen(false);
+ } catch {
+ message.error('保存失败');
+ }
+ };
+
+ const handleGenerate = async () => {
+ if (!editingId) return;
+
+ try {
+ setIsContinuing(true);
+ setIsGenerating(true);
+
+ await generateChapterContentStream(editingId, (content) => {
+ editorForm.setFieldsValue({ content });
+
+ if (contentTextAreaRef.current) {
+ const textArea = contentTextAreaRef.current.resizableTextArea?.textArea;
+ if (textArea) {
+ textArea.scrollTop = textArea.scrollHeight;
+ }
+ }
+ });
+
+ message.success('AI创作成功');
+ } catch (error) {
+ const apiError = error as ApiError;
+ message.error('AI创作失败：' + (apiError.response?.data?.detail || apiError.message || '未知错误'));
+ } finally {
+ setIsContinuing(false);
+ setIsGenerating(false);
+ }
+ };
+
+ const showGenerateModal = (chapter: Chapter) => {
+ const previousChapters = chapters.filter(
+ c => c.chapter_number < chapter.chapter_number
+ ).sort((a, b) => a.chapter_number - b.chapter_number);
+
+ const modal = Modal.confirm({
+ title: 'AI创作章节内容',
+ width: 700,
+ centered: true,
+ content: (
+ = {
+ 'draft': 'default',
+ 'writing': 'processing',
+ 'completed': 'success',
+ };
+ return colors[status] || 'default';
+ };
+
+ const getStatusText = (status: string) => {
+ const texts: Record = {
+ 'draft': '草稿',
+ 'writing': '创作中',
+ 'completed': '已完成',
+ };
+ return texts[status] || status;
+ };
+
+ const sortedChapters = [...chapters].sort((a, b) => a.chapter_number - b.chapter_number);
+
+ const handleExport = () => {
+ if (chapters.length === 0) {
+ message.warning('当前项目没有章节，无法导出');
+ return;
+ }
+
+ Modal.confirm({
+ title: '导出项目章节',
+ content: `确定要将《${currentProject.title}》的所有章节导出为TXT文件吗？`,
+ centered: true,
+ okText: '确定导出',
+ cancelText: '取消',
+ onOk: () => {
+ try {
+ projectApi.exportProject(currentProject.id);
+ message.success('开始下载导出文件');
+ } catch {
+ message.error('导出失败，请重试');
+ }
+ },
+ });
+ };
+
+ return (
+ (null);
+
+ const {
+ refreshCharacters,
+ deleteCharacter,
+ generateCharacter
+ } = useCharacterSync();
+
+ useEffect(() => {
+ if (currentProject?.id) {
+ refreshCharacters();
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [currentProject?.id]);
+
+ if (!currentProject) return null;
+
+ const handleDeleteCharacter = async (id: string) => {
+ try {
+ await deleteCharacter(id);
+ message.success('删除成功');
+ } catch {
+ message.error('删除失败');
+ }
+ };
+
+ const handleGenerate = async (values: { name?: string; role_type: string; background?: string }) => {
+ try {
+ setIsGenerating(true);
+ await generateCharacter({
+ project_id: currentProject.id,
+ name: values.name,
+ role_type: values.role_type,
+ background: values.background,
+ });
+ message.success('AI生成角色成功');
+ Modal.destroyAll();
+ } catch {
+ message.error('AI生成失败');
+ } finally {
+ setIsGenerating(false);
+ }
+ };
+
+ const handleEditCharacter = (character: Character) => {
+ setEditingCharacter(character);
+ editForm.setFieldsValue(character);
+ setIsEditModalOpen(true);
+ };
+
+ const handleUpdateCharacter = async (values: CharacterUpdate) => {
+ if (!editingCharacter) return;
+
+ try {
+ await characterApi.updateCharacter(editingCharacter.id, values);
+ message.success('更新成功');
+ setIsEditModalOpen(false);
+ editForm.resetFields();
+ setEditingCharacter(null);
+ await refreshCharacters();
+ } catch {
+ message.error('更新失败');
+ }
+ };
+
+ const handleDeleteCharacterWrapper = (id: string) => {
+ handleDeleteCharacter(id);
+ };
+
+ const showGenerateModal = () => {
+ Modal.confirm({
+ title: 'AI生成角色',
+ width: 600,
+ centered: true,
+ content: (
+
+ ),
+ okText: '生成',
+ cancelText: '取消',
+ onOk: async () => {
+ const values = await generateForm.validateFields();
+ await handleGenerate(values);
+ },
+ });
+ };
+
+ const characterList = characters.filter(c => !c.is_organization);
+ const organizationList = characters.filter(c => c.is_organization);
+
+ const getDisplayList = () => {
+ if (activeTab === 'character') return characterList;
+ if (activeTab === 'organization') return organizationList;
+ return characters;
+ };
+
+ const displayList = getDisplayList();
+
+ const isMobile = window.innerWidth <= 768;
+
+ return (
+ ([]);
+ const [selectedOrg, setSelectedOrg] = useState(null);
+ const [members, setMembers] = useState([]);
+ const [characters, setCharacters] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [isAddMemberModalOpen, setIsAddMemberModalOpen] = useState(false);
+ const [form] = Form.useForm();
+ const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+
+ useEffect(() => {
+ const handleResize = () => {
+ setIsMobile(window.innerWidth <= 768);
+ };
+
+ window.addEventListener('resize', handleResize);
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
+ const loadOrganizations = useCallback(async () => {
+ setLoading(true);
+ try {
+ const res = await axios.get(`/api/organizations/project/${projectId}`);
+ setOrganizations(res.data);
+ if (res.data.length > 0 && !selectedOrg) {
+ setSelectedOrg(res.data[0]);
+ loadMembers(res.data[0].id);
+ }
+ } catch (error) {
+ message.error('加载组织列表失败');
+ console.error(error);
+ } finally {
+ setLoading(false);
+ }
+ }, [projectId, selectedOrg]);
+
+ const loadCharacters = useCallback(async () => {
+ try {
+ const res = await axios.get(`/api/characters?project_id=${projectId}`);
+ setCharacters(res.data.items || []);
+ } catch (error) {
+ console.error('加载角色列表失败', error);
+ }
+ }, [projectId]);
+
+ useEffect(() => {
+ if (projectId) {
+ loadOrganizations();
+ loadCharacters();
+ }
+ }, [projectId, loadOrganizations, loadCharacters]);
+
+ const loadMembers = async (orgId: string) => {
+ try {
+ const res = await axios.get(`/api/organizations/${orgId}/members`);
+ setMembers(res.data);
+ } catch (error) {
+ message.error('加载成员列表失败');
+ console.error(error);
+ }
+ };
+
+ const handleSelectOrganization = (org: Organization) => {
+ setSelectedOrg(org);
+ loadMembers(org.id);
+ };
+
+ const handleAddMember = async (values: Record) => {
+ if (!selectedOrg) return;
+
+ try {
+ await axios.post(`/api/organizations/${selectedOrg.id}/members`, values);
+ message.success('成员添加成功');
+ setIsAddMemberModalOpen(false);
+ form.resetFields();
+ loadMembers(selectedOrg.id);
+ loadOrganizations(); // 刷新成员计数
+ } catch (error) {
+ message.error('添加成员失败');
+ console.error(error);
+ }
+ };
+
+ const handleRemoveMember = async (memberId: string) => {
+ Modal.confirm({
+ title: '确认移除',
+ content: '确定要移除该成员吗？',
+ centered: true,
+ okText: '移除',
+ okType: 'danger',
+ cancelText: '取消',
+ onOk: async () => {
+ try {
+ await axios.delete(`/api/organizations/members/${memberId}`);
+ message.success('成员移除成功');
+ if (selectedOrg) {
+ loadMembers(selectedOrg.id);
+ loadOrganizations(); // 刷新成员计数
+ }
+ } catch (error) {
+ message.error('移除失败');
+ console.error(error);
+ }
+ }
+ });
+ };
+
+ const getStatusColor = (status: string) => {
+ const colors: Record = {
+ active: 'green',
+ retired: 'default',
+ expelled: 'red',
+ deceased: 'black'
+ };
+ return colors[status] || 'default';
+ };
+
+ const getStatusText = (status: string) => {
+ const texts: Record = {
+ active: '在职',
+ retired: '退休',
+ expelled: '除名',
+ deceased: '已故'
+ };
+ return texts[status] || status;
+ };
+
+ const memberColumns = [
+ {
+ title: '姓名',
+ dataIndex: 'character_name',
+ key: 'name',
+ render: (name: string) => (
+
+
+ ),
+ width: isMobile ? 80 : undefined,
+ },
+ {
+ title: '职位',
+ dataIndex: 'position',
+ key: 'position',
+ render: (position: string, record: OrganizationMember) => (
+ {position} {!isMobile && `(级别 ${record.rank})`}
+ ),
+ width: isMobile ? 80 : undefined,
+ },
+ ...(!isMobile ? [
+ {
+ title: '忠诚度',
+ dataIndex: 'loyalty',
+ key: 'loyalty',
+ render: (loyalty: number) => (
+ = 70 ? 'green' : loyalty >= 40 ? 'orange' : 'red' }}>
+ {loyalty}%
+
+ ),
+ },
+ {
+ title: '贡献度',
+ dataIndex: 'contribution',
+ key: 'contribution',
+ render: (contribution: number) => `${contribution}%`,
+ },
+ {
+ title: '状态',
+ dataIndex: 'status',
+ key: 'status',
+ render: (status: string) => (
+ {getStatusText(status)}
+ ),
+ },
+ {
+ title: '加入时间',
+ dataIndex: 'joined_at',
+ key: 'joined_at',
+ render: (time: string) => time || '-',
+ }
+ ] : []),
+ {
+ title: '操作',
+ key: 'action',
+ render: (_: unknown, record: OrganizationMember) => (
+
+ {!isMobile && (
+ }
+ >
+ 编辑
+
+ )}
+ }
+ onClick={() => handleRemoveMember(record.id)}
+ >
+ {isMobile ? '删除' : '移除'}
+
+
+ ),
+ width: isMobile ? 60 : undefined,
+ fixed: isMobile ? 'right' as const : undefined,
+ },
+ ];
+
+ // 过滤掉已是成员的角色
+ const availableCharacters = characters.filter(
+ c => !c.is_organization && !members.some(m => m.character_id === c.id)
+ );
+
+ return (
+
+ AI生成/续写大纲
+ 当前已有 {outlines.length} 章
+
+ ) : 'AI生成大纲',
+ width: 700,
+ centered: true,
+ content: (
+
+ ),
+ okText: hasOutlines ? '开始续写' : '开始生成',
+ cancelText: '取消',
+ onOk: async () => {
+ const values = await generateForm.validateFields();
+ await handleGenerate(values);
+ },
+ });
+ };
+
+ return (
+
+ {/* 标题和图标 */}
+
+ );
+};
\ No newline at end of file
diff --git a/frontend/src/components/SSEProgressBar.tsx b/frontend/src/components/SSEProgressBar.tsx
new file mode 100644
index 0000000..4465f37
--- /dev/null
+++ b/frontend/src/components/SSEProgressBar.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+interface SSEProgressBarProps {
+ loading: boolean;
+ progress: number;
+ message: string;
+}
+
+export const SSEProgressBar: React.FC
+
+
+ {/* 进度条 */}
+
+ AI生成中...
+
+
+
+
+
+
+ {/* 状态消息 */}
+ 0 ? '0 0 10px rgba(24, 144, 255, 0.3)' : 'none'
+ }} />
+
+
+ {/* 进度百分比 */}
+
+ {progress}%
+
+
+ {message || '准备生成...'}
+
+
+ {/* 提示文字 */}
+
+ 请勿关闭页面,生成过程需要一定时间
+
+
+ {/* 进度条 */}
+
+ );
+};
\ No newline at end of file
diff --git a/frontend/src/components/UserMenu.tsx b/frontend/src/components/UserMenu.tsx
new file mode 100644
index 0000000..63f1b6e
--- /dev/null
+++ b/frontend/src/components/UserMenu.tsx
@@ -0,0 +1,346 @@
+import { useState, useEffect } from 'react';
+import { Dropdown, Avatar, Space, Typography, message, Modal, Table, Button, Tag, Popconfirm, Pagination } from 'antd';
+import { UserOutlined, LogoutOutlined, TeamOutlined, CrownOutlined } from '@ant-design/icons';
+import { authApi, userApi } from '../services/api';
+import type { User } from '../types';
+import type { MenuProps } from 'antd';
+
+const { Text } = Typography;
+
+export default function UserMenu() {
+ const [currentUser, setCurrentUser] = useState
+
+
+
+ {/* 进度信息 */}
+
+
+ {message || '准备生成...'}
+
+
+ {progress}%
+
+
+
+ {currentUser?.display_name || currentUser?.username}
+
+
+ Trust Level: {currentUser?.trust_level}
+ {currentUser?.is_admin && ' · 管理员'}
+
+
+ ),
+ disabled: true,
+ },
+ {
+ type: 'divider',
+ },
+ ...(currentUser?.is_admin ? [{
+ key: 'user-management',
+ icon: +
+ {text}
+
+ {record.display_name || text}
+ {
+ e.currentTarget.style.background = 'rgba(255, 255, 255, 1)';
+ e.currentTarget.style.transform = 'translateY(-2px)';
+ e.currentTarget.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.background = 'rgba(255, 255, 255, 0.95)';
+ e.currentTarget.style.transform = 'translateY(0)';
+ e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)';
+ }}
+ >
+
+
+ {currentUser.display_name || currentUser.username}
+
+
+ {currentUser.is_admin ? '👑 管理员' : `🎖️ Trust Level ${currentUser.trust_level}`}
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ `共 ${total} 个用户`}
+ pageSizeOptions={['10', '20', '50', '100']}
+ onChange={(page, newPageSize) => {
+ setCurrentPage(page);
+ setPageSize(newPageSize);
+ }}
+ />
+
+
+
+ );
+ }
+
+ if (status === 'error') {
+ return (
+
+
+
+ 正在处理登录...
+
+
+ navigate('/login')}>
+ 返回登录
+
+ }
+ style={{ background: 'white', padding: 40, borderRadius: 8 }}
+ />
+
+ );
+ }
+
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Chapters.tsx b/frontend/src/pages/Chapters.tsx
new file mode 100644
index 0000000..cf31e8e
--- /dev/null
+++ b/frontend/src/pages/Chapters.tsx
@@ -0,0 +1,570 @@
+import { useState, useEffect, useRef } from 'react';
+import { List, Button, Modal, Form, Input, Select, message, Empty, Space, Badge, Tag, Card, Tooltip } from 'antd';
+import { EditOutlined, FileTextOutlined, ThunderboltOutlined, LockOutlined, DownloadOutlined, SettingOutlined } from '@ant-design/icons';
+import { useStore } from '../store';
+import { useChapterSync } from '../store/hooks';
+import { projectApi } from '../services/api';
+import type { Chapter, ChapterUpdate, ApiError } from '../types';
+import { cardStyles } from '../components/CardStyles';
+
+const { TextArea } = Input;
+
+export default function Chapters() {
+ const { currentProject, chapters, setCurrentChapter, setCurrentProject } = useStore();
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [isEditorOpen, setIsEditorOpen] = useState(false);
+ const [isContinuing, setIsContinuing] = useState(false);
+ const [isGenerating, setIsGenerating] = useState(false);
+ const [editingId, setEditingId] = useState
+
+ ),
+ okText: '开始创作',
+ okButtonProps: { danger: true },
+ cancelText: '取消',
+ onOk: async () => {
+ modal.update({
+ okButtonProps: { danger: true, loading: true },
+ cancelButtonProps: { disabled: true },
+ closable: false,
+ maskClosable: false,
+ keyboard: false,
+ });
+
+ try {
+ await handleGenerate();
+ modal.destroy();
+ } catch (error) {
+ modal.update({
+ okButtonProps: { danger: true, loading: false },
+ cancelButtonProps: { disabled: false },
+ closable: true,
+ maskClosable: true,
+ keyboard: true,
+ });
+ }
+ },
+ onCancel: () => {
+ if (isGenerating) {
+ message.warning('AI正在创作中，请等待完成');
+ return false;
+ }
+ },
+ });
+ };
+
+ const getStatusColor = (status: string) => {
+ const colors: RecordAI将根据以下信息创作本章内容：
+-
+
- 章节大纲和要求 +
- 项目的世界观设定 +
- 相关角色信息 +
- 前面已完成章节的内容（确保剧情连贯） +
+
+ )}
+
+
+ 📚 将引用的前置章节（共{previousChapters.length}章）：
+
+
+ {previousChapters.map(ch => (
+
+
+ ✓ 第{ch.chapter_number}章：{ch.title} ({ch.word_count || 0}字)
+
+ ))}
+
+ 💡 AI会参考这些章节内容，确保情节连贯、角色状态一致
+
+ + ⚠️ 注意：此操作将覆盖当前章节内容 +
+
+ setIsModalOpen(false)}
+ footer={null}
+ centered={!isMobile}
+ width={isMobile ? 'calc(100% - 32px)' : 520}
+ style={isMobile ? {
+ top: 20,
+ paddingBottom: 0,
+ maxWidth: 'calc(100vw - 32px)',
+ margin: '0 16px'
+ } : undefined}
+ styles={{
+ body: {
+ maxHeight: isMobile ? 'calc(100vh - 150px)' : 'calc(80vh - 110px)',
+ overflowY: 'auto'
+ }
+ }}
+ >
+
+
+
+ {
+ if (isGenerating) {
+ message.warning('AI正在创作中，请等待完成后再关闭');
+ return;
+ }
+ setIsEditorOpen(false);
+ }}
+ closable={!isGenerating}
+ maskClosable={!isGenerating}
+ keyboard={!isGenerating}
+ width={isMobile ? 'calc(100% - 32px)' : '85%'}
+ centered={!isMobile}
+ style={isMobile ? {
+ top: 20,
+ paddingBottom: 0,
+ maxWidth: 'calc(100vw - 32px)',
+ margin: '0 16px'
+ } : undefined}
+ styles={{
+ body: {
+ maxHeight: isMobile ? 'calc(100vh - 150px)' : 'calc(85vh - 110px)',
+ overflowY: 'auto',
+ padding: isMobile ? '16px 12px' : '8px'
+ }
+ }}
+ footer={null}
+ >
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Characters.tsx b/frontend/src/pages/Characters.tsx
new file mode 100644
index 0000000..7ae129e
--- /dev/null
+++ b/frontend/src/pages/Characters.tsx
@@ -0,0 +1,453 @@
+import { useState, useEffect } from 'react';
+import { Button, Modal, Form, Input, Select, message, Row, Col, Empty, Tabs, Divider, Typography, Space } from 'antd';
+import { ThunderboltOutlined, UserOutlined, TeamOutlined } from '@ant-design/icons';
+import { useStore } from '../store';
+import { useCharacterSync } from '../store/hooks';
+import { characterGridConfig } from '../components/CardStyles';
+import { CharacterCard } from '../components/CharacterCard';
+import type { Character, CharacterUpdate } from '../types';
+import { characterApi } from '../services/api';
+
+const { Title } = Typography;
+
+const { TextArea } = Input;
+
+export default function Characters() {
+ const { currentProject, characters } = useStore();
+ const [isGenerating, setIsGenerating] = useState(false);
+ const [activeTab, setActiveTab] = useState<'all' | 'character' | 'organization'>('all');
+ const [generateForm] = Form.useForm();
+ const [editForm] = Form.useForm();
+ const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+ const [editingCharacter, setEditingCharacter] = useState
+
+ }
+ onClick={handleExport}
+ disabled={chapters.length === 0}
+ block={isMobile}
+ size={isMobile ? 'middle' : 'middle'}
+ >
+ 导出为TXT
+
+ {!isMobile && 章节由大纲管理，请在大纲页面添加/删除 }
+
+
+
+ 章节管理
+
+ {chapters.length === 0 ? (
+
+
+ )}
+
+
+ - (
+
+
+ }
+ onClick={() => handleOpenEditor(item.id)}
+ size="small"
+ title="编辑内容"
+ />
+ }
+ onClick={() => handleOpenModal(item.id)}
+ size="small"
+ title="修改信息"
+ />
+
+ )}
+
+
+ )}
+ />
+
+ 第{item.chapter_number}章：{item.title}
+ {getStatusText(item.status)}
+
+
+ )}
+
+ }
+ description={
+ item.content ? (
+
+ {item.content.substring(0, isMobile ? 80 : 150)}
+ {item.content.length > (isMobile ? 80 : 150) && '...'}
+
+ ) : (
+ 暂无内容
+ )
+ }
+ />
+
+ {isMobile && (
+
+ {
+ setIsEditModalOpen(false);
+ editForm.resetFields();
+ setEditingCharacter(null);
+ }}
+ footer={null}
+ centered={!isMobile}
+ width={isMobile ? '100%' : 600}
+ style={isMobile ? { top: 0, paddingBottom: 0, maxWidth: '100vw' } : undefined}
+ styles={isMobile ? { body: { maxHeight: 'calc(100vh - 110px)', overflowY: 'auto' } } : undefined}
+ >
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
new file mode 100644
index 0000000..1cd7055
--- /dev/null
+++ b/frontend/src/pages/Login.tsx
@@ -0,0 +1,329 @@
+import { useEffect, useState } from 'react';
+import { Button, Card, Space, Typography, message, Spin, Form, Input, Tabs } from 'antd';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+import { authApi } from '../services/api';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+const { Title, Paragraph } = Typography;
+
+export default function Login() {
+ const navigate = useNavigate();
+ const [searchParams] = useSearchParams();
+ const [loading, setLoading] = useState(false);
+ const [checking, setChecking] = useState(true);
+ const [localAuthEnabled, setLocalAuthEnabled] = useState(false);
+ const [linuxdoEnabled, setLinuxdoEnabled] = useState(false);
+ const [form] = Form.useForm();
+
+ // 检查是否已登录和获取认证配置
+ useEffect(() => {
+ const checkAuth = async () => {
+ try {
+ await authApi.getCurrentUser();
+ // 已登录，重定向到首页
+ const redirect = searchParams.get('redirect') || '/';
+ navigate(redirect);
+ } catch {
+ // 未登录，获取认证配置
+ try {
+ const config = await authApi.getAuthConfig();
+ setLocalAuthEnabled(config.local_auth_enabled);
+ setLinuxdoEnabled(config.linuxdo_enabled);
+ } catch (error) {
+ console.error('获取认证配置失败:', error);
+ // 默认显示LinuxDO登录
+ setLinuxdoEnabled(true);
+ }
+ setChecking(false);
+ }
+ };
+ checkAuth();
+ }, [navigate, searchParams]);
+
+ const handleLocalLogin = async (values: { username: string; password: string }) => {
+ try {
+ setLoading(true);
+ const response = await authApi.localLogin(values.username, values.password);
+
+ if (response.success) {
+ message.success('登录成功！');
+ const redirect = searchParams.get('redirect') || '/';
+ navigate(redirect);
+ }
+ } catch (error) {
+ console.error('本地登录失败:', error);
+ setLoading(false);
+ }
+ };
+
+ const handleLinuxDOLogin = async () => {
+ try {
+ setLoading(true);
+ const response = await authApi.getLinuxDOAuthUrl();
+
+ // 保存重定向地址到 sessionStorage
+ const redirect = searchParams.get('redirect');
+ if (redirect) {
+ sessionStorage.setItem('login_redirect', redirect);
+ }
+
+ // 跳转到 LinuxDO 授权页面
+ window.location.href = response.auth_url;
+ } catch (error) {
+ console.error('获取授权地址失败:', error);
+ message.error('获取授权地址失败，请稍后重试');
+ setLoading(false);
+ }
+ };
+
+ if (checking) {
+ return (
+
+
+
+ {characters.length > 0 && (
+ 角色与组织管理
+ } + onClick={showGenerateModal} + loading={isGenerating} + block={isMobile} + > + AI生成角色 + +
+ setActiveTab(key as 'all' | 'character' | 'organization')}
+ items={[
+ {
+ key: 'all',
+ label: `全部 (${characters.length})`,
+ },
+ {
+ key: 'character',
+ label: (
+
+
+ )}
+
+
+ {characters.length === 0 ? (
+
+ {activeTab === 'all' && (
+ <>
+ {characterList.length > 0 && (
+ <>
+
+
+ <UserOutlined style={{ marginRight: 8 }} />
+ 角色 ({characterList.length})
+
+
+
+ {characterList.map((character) => (
+
+
+ <TeamOutlined style={{ marginRight: 8 }} />
+ 组织 ({organizationList.length})
+
+
+
+ {organizationList.map((org) => (
+
+
+ {displayList.length === 0 && (
+
+
+
+
+ );
+ }
+
+ // 渲染本地登录表单
+ const renderLocalLogin = () => (
+
+ );
+
+ // 渲染LinuxDO登录
+ const renderLinuxDOLogin = () => (
+
+
+ }
+ loading={loading}
+ onClick={handleLinuxDOLogin}
+ block
+ style={{
+ height: 52,
+ fontSize: 16,
+ fontWeight: 600,
+ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+ border: 'none',
+ borderRadius: '12px',
+ boxShadow: '0 4px 16px rgba(102, 126, 234, 0.4)',
+ transition: 'all 0.3s ease',
+ }}
+ onMouseEnter={(e) => {
+ e.currentTarget.style.transform = 'translateY(-2px)';
+ e.currentTarget.style.boxShadow = '0 6px 24px rgba(102, 126, 234, 0.5)';
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.transform = 'translateY(0)';
+ e.currentTarget.style.boxShadow = '0 4px 16px rgba(102, 126, 234, 0.4)';
+ }}
+ >
+ 使用 LinuxDO 登录
+
+
+ );
+
+ return (
+
+ {/* 装饰性背景元素 */}
+
+
+
+
+
+ {/* Logo区域 */}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Organizations.tsx b/frontend/src/pages/Organizations.tsx
new file mode 100644
index 0000000..d8efb25
--- /dev/null
+++ b/frontend/src/pages/Organizations.tsx
@@ -0,0 +1,450 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { Card, Table, Tag, Button, Space, message, Modal, Form, Select, InputNumber, Input, Descriptions } from 'antd';
+import { PlusOutlined, TeamOutlined, UserOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import { useStore } from '../store';
+import axios from 'axios';
+
+interface Organization {
+ id: string;
+ character_id: string;
+ name: string;
+ type: string;
+ purpose: string;
+ member_count: number;
+ power_level: number;
+ location?: string;
+ motto?: string;
+}
+
+interface OrganizationMember {
+ id: string;
+ character_id: string;
+ character_name: string;
+ position: string;
+ rank: number;
+ loyalty: number;
+ contribution: number;
+ status: string;
+ joined_at?: string;
+}
+
+interface Character {
+ id: string;
+ name: string;
+ is_organization: boolean;
+}
+
+export default function Organizations() {
+ const { projectId } = useParams<{ projectId: string }>();
+ const { currentProject } = useStore();
+ const [organizations, setOrganizations] = useState
+
+ AI小说创作助手
+
+
+ {localAuthEnabled && linuxdoEnabled ? '选择登录方式' :
+ localAuthEnabled ? '使用账户密码登录' :
+ '使用 LinuxDO 账号登录'}
+
+
+
+ {/* 登录方式 */}
+ {localAuthEnabled && linuxdoEnabled ? (
+
+ 
+
+
+
+
+ 🎉 首次登录将自动创建账号
+
+ 🔒 每个用户拥有独立的数据空间 +
+
+ + 🔒 每个用户拥有独立的数据空间 +
+
+ {currentProject?.title} }
+
+ }
+ >
+
+
+ {/* 添加成员模态框 */}
+ {
+ setIsAddMemberModalOpen(false);
+ form.resetFields();
+ }}
+ footer={null}
+ centered={!isMobile}
+ width={isMobile ? '100%' : 500}
+ style={isMobile ? { top: 0, paddingBottom: 0, maxWidth: '100vw' } : undefined}
+ styles={isMobile ? { body: { maxHeight: 'calc(100vh - 110px)', overflowY: 'auto' } } : undefined}
+ >
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Outline.tsx b/frontend/src/pages/Outline.tsx
new file mode 100644
index 0000000..e08589d
--- /dev/null
+++ b/frontend/src/pages/Outline.tsx
@@ -0,0 +1,480 @@
+import { useState, useEffect } from 'react';
+import { Button, List, Modal, Form, Input, message, Empty, Space, Popconfirm, Card, Select, Radio, Tag } from 'antd';
+import { EditOutlined, DeleteOutlined, ThunderboltOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
+import { useStore } from '../store';
+import { useOutlineSync } from '../store/hooks';
+import { cardStyles } from '../components/CardStyles';
+
+const { TextArea } = Input;
+
+export default function Outline() {
+ const { currentProject, outlines } = useStore();
+ const [isGenerating, setIsGenerating] = useState(false);
+ const [editForm] = Form.useForm();
+ const [generateForm] = Form.useForm();
+ const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+
+ useEffect(() => {
+ const handleResize = () => {
+ setIsMobile(window.innerWidth <= 768);
+ };
+
+ window.addEventListener('resize', handleResize);
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
+ // 使用同步 hooks（移除createOutline）
+ const {
+ refreshOutlines,
+ updateOutline,
+ deleteOutline,
+ reorderOutlines,
+ generateOutlines
+ } = useOutlineSync();
+
+ // 初始加载大纲列表
+ useEffect(() => {
+ if (currentProject?.id) {
+ refreshOutlines();
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [currentProject?.id]); // 只依赖 ID，不依赖函数
+
+ // 移除事件监听，避免无限循环
+ // Hook 内部已经更新了 store，不需要再次刷新
+
+ if (!currentProject) return null;
+
+ // 确保大纲按 order_index 排序
+ const sortedOutlines = [...outlines].sort((a, b) => a.order_index - b.order_index);
+
+ const handleOpenEditModal = (id: string) => {
+ const outline = outlines.find(o => o.id === id);
+ if (outline) {
+ editForm.setFieldsValue(outline);
+ Modal.confirm({
+ title: '编辑大纲',
+ width: 600,
+ centered: true,
+ content: (
+
+ ),
+ okText: '更新',
+ cancelText: '取消',
+ onOk: async () => {
+ const values = await editForm.validateFields();
+ try {
+ await updateOutline(id, values);
+ message.success('大纲更新成功');
+ } catch {
+ message.error('更新失败');
+ }
+ },
+ });
+ }
+ };
+
+ const handleDeleteOutline = async (id: string) => {
+ try {
+ await deleteOutline(id);
+ message.success('删除成功');
+ } catch {
+ message.error('删除失败');
+ }
+ };
+
+ const handleMoveUp = async (index: number) => {
+ if (index === 0) return;
+
+ const items = Array.from(sortedOutlines);
+ [items[index - 1], items[index]] = [items[index], items[index - 1]];
+
+ const newOrders = items.map((item, idx) => ({
+ id: item.id,
+ order_index: idx + 1
+ }));
+
+ try {
+ await reorderOutlines(newOrders);
+ message.success('上移成功');
+ } catch (error) {
+ message.error('调整失败');
+ console.error('重排序失败:', error);
+ }
+ };
+
+ const handleMoveDown = async (index: number) => {
+ if (index === sortedOutlines.length - 1) return;
+
+ const items = Array.from(sortedOutlines);
+ [items[index], items[index + 1]] = [items[index + 1], items[index]];
+
+ const newOrders = items.map((item, idx) => ({
+ id: item.id,
+ order_index: idx + 1
+ }));
+
+ try {
+ await reorderOutlines(newOrders);
+ message.success('下移成功');
+ } catch (error) {
+ message.error('调整失败');
+ console.error('重排序失败:', error);
+ }
+ };
+
+ interface GenerateFormValues {
+ theme?: string;
+ chapter_count?: number;
+ narrative_perspective?: string;
+ requirements?: string;
+ provider?: string;
+ model?: string;
+ mode?: 'auto' | 'new' | 'continue';
+ story_direction?: string;
+ plot_stage?: 'development' | 'climax' | 'ending';
+ keep_existing?: boolean;
+ }
+
+ const handleGenerate = async (values: GenerateFormValues) => {
+ try {
+ setIsGenerating(true);
+ // 如果是全新生成模式，keep_existing应该为false
+ const isNewMode = values.mode === 'new';
+ const result = await generateOutlines({
+ project_id: currentProject.id,
+ genre: currentProject.genre || '通用',
+ theme: values.theme || currentProject.theme || '',
+ chapter_count: values.chapter_count || 5,
+ narrative_perspective: values.narrative_perspective || currentProject.narrative_perspective || '第三人称',
+ target_words: currentProject.target_words || 100000,
+ requirements: values.requirements,
+ // 续写参数
+ mode: values.mode || 'auto',
+ story_direction: values.story_direction,
+ plot_stage: values.plot_stage || 'development',
+ keep_existing: !isNewMode, // 全新生成模式下不保留旧大纲
+ });
+ message.success(`成功生成 ${result.length} 条大纲`);
+ Modal.destroyAll();
+ // 刷新大纲列表，确保显示最新数据
+ await refreshOutlines();
+ } catch (error) {
+ console.error('AI生成失败:', error);
+ message.error('AI生成失败');
+ } finally {
+ setIsGenerating(false);
+ }
+ };
+
+ const showGenerateModal = () => {
+ const hasOutlines = outlines.length > 0;
+ const initialMode = hasOutlines ? 'continue' : 'new';
+
+ Modal.confirm({
+ title: hasOutlines ? (
+
+ {/* 左侧：组织列表 */}
+
+
+
+
+ {organizations.map(org => (
+ handleSelectOrganization(org)}
+ >
+
+ {org.name}
+ {org.type}
+
+
+ ))}
+
+
+
+
+ {/* 右侧：组织详情和成员 */}
+
+ 成员: {org.member_count} | 势力: {org.power_level}
+
+
+ {selectedOrg ? (
+
+
+
+ {selectedOrg.name}
+ {selectedOrg.type}
+ {selectedOrg.member_count}
+ {selectedOrg.power_level}
+ {selectedOrg.location && (
+ {selectedOrg.location}
+ )}
+ {selectedOrg.motto && (
+ {selectedOrg.motto}
+ )}
+
+ {selectedOrg.purpose}
+
+
+
+
+
+
+
+ ) : (
+
+
+ )}
+
+
+ 请从左侧选择一个组织查看详情
+
+
+ {/* 固定头部 */}
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Polish.tsx b/frontend/src/pages/Polish.tsx
new file mode 100644
index 0000000..b47c5c8
--- /dev/null
+++ b/frontend/src/pages/Polish.tsx
@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { Card, Input, Button, message, Space } from 'antd';
+import { ThunderboltOutlined } from '@ant-design/icons';
+import { polishApi } from '../services/api';
+
+const { TextArea } = Input;
+
+export default function Polish() {
+ const [originalText, setOriginalText] = useState('');
+ const [polishedText, setPolishedText] = useState('');
+ const [loading, setLoading] = useState(false);
+
+ const handlePolish = async () => {
+ if (!originalText.trim()) {
+ message.warning('请输入要去味的文本');
+ return;
+ }
+
+ try {
+ setLoading(true);
+ const result = await polishApi.polishText({ text: originalText });
+ setPolishedText(result.polished_text);
+ message.success('AI去味完成');
+ } catch {
+ message.error('AI去味失败');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleCopy = () => {
+ navigator.clipboard.writeText(polishedText);
+ message.success('已复制到剪贴板');
+ };
+
+ return (
+
+
+
+ {/* 可滚动内容区域 */}
+ 故事大纲
+ } + onClick={showGenerateModal} + loading={isGenerating} + block={isMobile} + > + {isMobile ? 'AI生成/续写' : 'AI生成/续写大纲'} + +
+ {outlines.length === 0 ? (
+
+
+ )}
+
+ - (
+
+
+
+ 第{item.order_index || '?'}章
+
+ {item.title}
+
+ }
+ description={
+
+ }
+ onClick={() => handleMoveUp(index)}
+ disabled={index === 0}
+ size="small"
+ />
+ }
+ onClick={() => handleMoveDown(index)}
+ disabled={index === sortedOutlines.length - 1}
+ size="small"
+ />
+ }
+ onClick={() => handleOpenEditModal(item.id)}
+ size="small"
+ />
+ handleDeleteOutline(item.id)}
+ okText="确定"
+ cancelText="取消"
+ >
+ } size="small" />
+
+
+ )}
+
+
+ )}
+ />
+
+ {item.content}
+
+ }
+ />
+
+ {/* 移动端：按钮显示在内容下方 */}
+ {isMobile && (
+
+
+
AI去味工具
++ 将AI生成的文本变得更自然、更像人类作家的手笔 +
+ +