feat: 品牌升级为墨木灵思，优化 UI 并配置 Docker 部署

2026-05-12 12:19:13 +08:00
parent 728bc1de77
commit df33ce2f18
33 changed files with 375 additions and 75 deletions
@@ -0,0 +1,149 @@
+import { Typography, Card, Space, Divider, Row, Col, theme, List, Timeline } from 'antd';
+import {
+  RocketOutlined,
+  BulbOutlined,
+  TeamOutlined,
+  BookOutlined,
+  ExperimentOutlined,
+  SmileOutlined
+} from '@ant-design/icons';
+
+const { Title, Paragraph, Text } = Typography;
+
+export default function About() {
+  const { token } = theme.useToken();
+  const alphaColor = (color: string, alpha: number) => `color-mix(in srgb, ${color} ${(alpha * 100).toFixed(0)}%, transparent)`;
+
+  const features = [
+    {
+      icon: <RocketOutlined style={{ fontSize: 24, color: token.colorPrimary }} />,
+      title: '智能向导',
+      description: 'AI 自动生成小说大纲、角色背景和世界观，为您开启创作之门。',
+    },
+    {
+      icon: <BulbOutlined style={{ fontSize: 24, color: '#fadb14' }} />,
+      title: '多模型支持',
+      description: '集成 OpenAI、Gemini、Claude 等顶级模型，灵活切换以满足不同创作需求。',
+    },
+    {
+      icon: <TeamOutlined style={{ fontSize: 24, color: '#52c41a' }} />,
+      title: '角色与关系管理',
+      description: '精细化的角色档案、复杂的人物关系网，让故事角色跃然纸上。',
+    },
+    {
+      icon: <BookOutlined style={{ fontSize: 24, color: '#1890ff' }} />,
+      title: '章节精雕细琢',
+      description: '支持章节自动生成、润色、续写，AI 辅助您完成每一段精彩故事。',
+    },
+  ];
+
+  const techStack = [
+    { label: '前端框架', value: 'React 18 + Vite' },
+    { label: ' UI 组件库', value: 'Ant Design 5' },
+    { label: '状态管理', value: 'Zustand' },
+    { label: '后端框架', value: 'FastAPI (Python 3.11)' },
+    { label: '数据库', value: 'PostgreSQL + Alembic' },
+    { label: '部署技术', value: 'Docker + Docker Compose' },
+  ];
+
+  return (
+    <div style={{ height: '100%', overflowY: 'auto', padding: '24px' }}>
+      <div style={{ maxWidth: 1000, margin: '0 auto' }}>
+        <div style={{ textAlign: 'center', marginBottom: 48 }}>
+          <Title level={1}>关于 墨木灵思</Title>
+          <Paragraph style={{ fontSize: 18, color: token.colorTextSecondary }}>
+            墨木灵思 (MoMu LingSi) 是一款基于人工智能的智能小说创作助手，旨在帮助创作者更高效、更具创意地完成文学作品。
+          </Paragraph>
+        </div>
+
+        <Row gutter={[24, 24]}>
+          <Col xs={24} md={12}>
+            <Card
+              title={<Space><SmileOutlined /> 项目愿景</Space>}
+              bordered={false}
+              style={{ height: '100%', boxShadow: `0 4px 12px ${alphaColor(token.colorText, 0.05)}` }}
+            >
+              <Paragraph>
+                在这个 AI 飞速发展的时代，我们相信技术应该服务于创意。墨木灵思不仅仅是一个写作工具，它更是一个懂你的文学搭子。
+              </Paragraph>
+              <Paragraph>
+                无论是构建宏大的世界观，还是打磨细腻的人物情感，墨木灵思都能为您提供精准的建议与协助，让创作过程变得更加轻松有趣。
+              </Paragraph>
+            </Card>
+          </Col>
+          <Col xs={24} md={12}>
+            <Card
+              title={<Space><ExperimentOutlined /> 核心特性</Space>}
+              bordered={false}
+              style={{ height: '100%', boxShadow: `0 4px 12px ${alphaColor(token.colorText, 0.05)}` }}
+            >
+              <List
+                dataSource={features}
+                renderItem={(item) => (
+                  <List.Item style={{ padding: '12px 0' }}>
+                    <List.Item.Meta
+                      avatar={item.icon}
+                      title={item.title}
+                      description={item.description}
+                    />
+                  </List.Item>
+                )}
+              />
+            </Card>
+          </Col>
+        </Row>
+
+        <Divider />
+
+        <Title level={2} style={{ textAlign: 'center', marginBottom: 32 }}>技术力量</Title>
+        <Row gutter={[24, 24]}>
+          <Col span={24}>
+            <Card bordered={false} style={{ background: alphaColor(token.colorPrimary, 0.02) }}>
+              <Row gutter={[16, 16]}>
+                {techStack.map((tech, index) => (
+                  <Col xs={12} sm={8} key={index}>
+                    <div style={{ textAlign: 'center', padding: '16px' }}>
+                      <Text type="secondary" style={{ display: 'block', marginBottom: 4 }}>{tech.label}</Text>
+                      <Text strong style={{ fontSize: 16 }}>{tech.value}</Text>
+                    </div>
+                  </Col>
+                ))}
+              </Row>
+            </Card>
+          </Col>
+        </Row>
+
+        <Divider />
+
+        <Title level={2} style={{ textAlign: 'center', marginBottom: 32 }}>未来路线</Title>
+        <div style={{ padding: '0 24px' }}>
+          <Timeline
+            items={[
+              {
+                color: 'green',
+                children: '2024 - 墨木灵思基础版发布，支持核心 AI 创作流程',
+              },
+              {
+                color: 'blue',
+                children: '2025 - 引入更强大的多模型协同引擎，完善角色关系拓扑图',
+              },
+              {
+                children: '2026 - 墨木灵思品牌升级，全站 UI/UX 深度优化',
+              },
+              {
+                color: 'gray',
+                children: '未来 - 探索小说到多媒体（漫画、短剧）的 AI 转化路径',
+              },
+            ]}
+          />
+        </div>
+
+        <div style={{ textAlign: 'center', marginTop: 64, marginBottom: 32 }}>
+          <Paragraph type="secondary">
+            © 2026 墨木灵思团队 | <a href="https://www.xinmi.cloud/" target="_blank" rel="noopener noreferrer">了解更多</a>
+          </Paragraph>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -219,7 +219,7 @@ export default function BookshelfPage({

      {showApiTip && projects.length === 0 && (
        <Alert
-          message="欢迎使用 MuMuAINovel"
+          message="欢迎使用 墨木灵思"
          description={
            <div style={{
              display: 'flex',
@@ -882,12 +882,12 @@ export default function Login() {
                  >
                    <img
                      src="/logo.svg"
-                      alt="MuMuAINovel"
+                      alt="墨木灵思"
                      style={{ width: 26, height: 26, filter: 'brightness(0) invert(1)' }}
                    />
                  </div>
                  <Title level={3} style={{ margin: 0, color: token.colorText }}>
-                    MuMuAINovel
+                    墨木灵思
                  </Title>
                </Space>

@@ -979,7 +979,7 @@ export default function Login() {
                  letterSpacing: 0.4,
                }}
              >
-                © 2026 MuMuAINovel · GPLv3 License
+                © 2026 墨木灵思 · GPLv3 License
              </Paragraph>
            </section>
          </Col>
@@ -1001,7 +1001,7 @@ export default function Login() {
                    欢迎回来
                  </Title>
                  <Paragraph style={{ marginBottom: 0, color: token.colorTextSecondary }}>
-                    登录 MuMuAINovel，继续你的小说创作项目。
+                    登录 墨木灵思，继续你的小说创作项目。
                  </Paragraph>
                </Space>

@@ -119,6 +119,11 @@ export default function ProjectDetail() {
      icon: <HeartOutlined />,
      label: <Link to={`/project/${projectId}/sponsor`}>赞助支持</Link>,
    },
+    {
+      key: 'about',
+      icon: <BulbOutlined />,
+      label: <Link to={`/project/${projectId}/about`}>关于我们</Link>,
+    },
    {
      type: 'group' as const,
      label: '创作管理',
@@ -186,6 +191,17 @@ export default function ProjectDetail() {
        },
      ],
    },
+    {
+      type: 'group' as const,
+      label: '官方资源',
+      children: [
+        {
+          key: 'source-code',
+          icon: <CloudOutlined />,
+          label: <a href="https://www.xinmi.cloud/" target="_blank" rel="noopener noreferrer">源码库</a>,
+        },
+      ],
+    },
  ];

  const menuItemsCollapsed = [
@@ -194,6 +210,11 @@ export default function ProjectDetail() {
      icon: <HeartOutlined />,
      label: <Link to={`/project/${projectId}/sponsor`}>赞助支持</Link>,
    },
+    {
+      key: 'about',
+      icon: <BulbOutlined />,
+      label: <Link to={`/project/${projectId}/about`}>关于我们</Link>,
+    },
    {
      key: 'world-setting',
      icon: <GlobalOutlined />,
@@ -448,7 +469,7 @@ export default function ProjectDetail() {
                }}>
                  <BookOutlined />
                </div>
-                <span style={{ fontWeight: 600, fontSize: 16 }}>MuMuAINovel</span>
+                <span style={{ fontWeight: 600, fontSize: 16 }}>墨木灵思</span>
              </div>
            }
            placement="left"
@@ -544,7 +565,7 @@ export default function ProjectDetail() {
                        overflow: 'hidden',
                        textOverflow: 'ellipsis'
                      }}>
-                        MuMuAINovel
+                        墨木灵思
                      </span>
                    </div>
                    <Button
@@ -573,7 +573,7 @@ export default function ProjectList() {
                    overflow: 'hidden',
                    textOverflow: 'ellipsis'
                  }}>
-                    MuMuAINovel
+                    墨木灵思
                  </span>
                </div>
                <Button
@@ -789,7 +789,7 @@ export default function ProjectList() {
              }}>
                <BookOutlined />
              </div>
-              <span style={{ fontWeight: 600, fontSize: 16, fontFamily: token.fontFamily }}>MuMuAINovel</span>
+              <span style={{ fontWeight: 600, fontSize: 16, fontFamily: token.fontFamily }}>墨木灵思</span>
            </div>
          }
          placement="left"
@@ -104,13 +104,13 @@ export default function Sponsor() {
                            color: token.colorWhite
                        }}>
                            <Title level={1} style={{ color: token.colorWhite, marginBottom: '8px', fontSize: 'clamp(24px, 5vw, 32px)', fontWeight: 'bold' }}>
-                                赞助 MuMuAINovel
+                                赞助 墨木灵思
                            </Title>
                            <Text type="secondary" style={{ color: token.colorWhite, fontSize: 'clamp(11px, 2vw, 13px)', letterSpacing: '2px' }}>
-                                SUPPORT MuMuAINovel
+                                SUPPORT 墨木灵思
                            </Text>
                            <Title level={4} style={{ color: token.colorWhite, marginTop: '8px', marginBottom: '8px' }}>
-                                📚 MuMuAINovel - 基于 AI 的智能小说创作助手
+                                📚 墨木灵思 - 基于 AI 的智能小说创作助手
                            </Title>
                        </div>
                    </div>
@@ -222,7 +222,7 @@ export default function Sponsor() {
                        marginTop: 'auto'
                    }}>
                        <Title level={4} style={{ marginBottom: '12px', fontSize: 'clamp(16px, 3vw, 20px)' }}>
-                            💖 感谢您对 MuMuAINovel 项目的支持
+                            💖 感谢您对 墨木灵思 项目的支持
                        </Title>
                        <Paragraph style={{ fontSize: 'clamp(12px, 2vw, 14px)', color: token.colorTextSecondary, marginBottom: '12px' }}>
                            您的赞助将是我持续更新项目的动力，为大家提供更好的AI小说创作体验!
@@ -216,7 +216,7 @@ export default function SystemSettingsPage() {
                        </Col>
                        <Col xs={24} md={12}>
                          <Form.Item name="smtp_from_name" label="发件人名称" rules={[{ required: true, message: '请输入发件人名称' }]}>
-                            <Input placeholder="MuMuAINovel" />
+                            <Input placeholder="墨木灵思" />
                          </Form.Item>
                        </Col>
                      </Row>