From d1c495aa8d7a155601561d2df5047094d4a1103a Mon Sep 17 00:00:00 2001
From: lifegpc <root@lifegpc.com>
Date: Sat, 28 Feb 2026 11:17:49 +0800
Subject: [PATCH] Add chapter name editor

---
 src/data.d.ts                          |  5 +++
 src/manage/qd/BookStatusProvider.ts    |  2 ++
 src/manage/qd/ChapterEditor.module.css | 25 ++++++++++++++
 src/manage/qd/ChapterEditor.tsx        | 47 +++++++++++++++++++++-----
 src/manage/qd/ShowMode.module.css      |  3 ++
 src/manage/qd/ShowMode.tsx             |  2 ++
 6 files changed, 75 insertions(+), 9 deletions(-)
 create mode 100644 src/manage/qd/ChapterEditor.module.css
 create mode 100644 src/manage/qd/ShowMode.module.css

diff --git a/src/data.d.ts b/src/data.d.ts
index 8b7c495..71271da 100644
--- a/src/data.d.ts
+++ b/src/data.d.ts
@@ -8,3 +8,8 @@ declare module "*.svg" {
   const content: (props: SVGProps<SVGElement>) => ReactElement;
   export default content;
 }
+
+declare module "lodash.isequal" {
+    function isEqual(value: unknown, other: unknown): boolean;
+    export = isEqual;
+}
diff --git a/src/manage/qd/BookStatusProvider.ts b/src/manage/qd/BookStatusProvider.ts
index 38a301c..11f6c29 100644
--- a/src/manage/qd/BookStatusProvider.ts
+++ b/src/manage/qd/BookStatusProvider.ts
@@ -8,11 +8,13 @@ import { ChapterShowMode } from "../../utils/qd";
 export type BookStatus = {
     chapterShowMode: ChapterShowMode;
     chapterLists?: QdChapterSimpleInfo[];
+    wordWrap: boolean;
 }
 
 export function createBookStatus(): BookStatus {
     return {
         chapterShowMode: ChapterShowMode.All,
+        wordWrap: true,
     }
 }
 
diff --git a/src/manage/qd/ChapterEditor.module.css b/src/manage/qd/ChapterEditor.module.css
new file mode 100644
index 0000000..8080a13
--- /dev/null
+++ b/src/manage/qd/ChapterEditor.module.css
@@ -0,0 +1,25 @@
+.container {
+    height: 100%;
+}
+
+.header {
+    align-items: center;
+}
+
+.name {
+    align-items: center;
+    display: flex;
+    margin-top: 8px;
+    margin-left: 16px;
+}
+
+.name .save {
+    position: relative;
+    top: 3px;
+}
+
+.editorWrapper {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+}
diff --git a/src/manage/qd/ChapterEditor.tsx b/src/manage/qd/ChapterEditor.tsx
index 6c5a061..4e75261 100644
--- a/src/manage/qd/ChapterEditor.tsx
+++ b/src/manage/qd/ChapterEditor.tsx
@@ -1,6 +1,13 @@
 import { Component, createRef } from "react";
 import { QdChapterInfo } from "../../types";
 import MonacoEditor, { MonacoEditorHandle } from 'react-monaco-editor';
+import styles from './ChapterEditor.module.css';
+import { Flex, Typography } from "antd";
+import Icon from "../../components/Icon";
+import EditOutlined from "../../../node_modules/@material-icons/svg/svg/edit/outline.svg";
+import SaveOutlined from "../../../node_modules/@material-icons/svg/svg/save/outline.svg";
+
+const { Text } = Typography;
 
 export interface ChapterEditorProps {
     chapter: QdChapterInfo;
@@ -8,6 +15,7 @@ export interface ChapterEditorProps {
 
 export interface ChapterEditorState {
     content: string;
+    chapterName: string;
 }
 
 export default class ChapterEditor extends Component<ChapterEditorProps, ChapterEditorState> {
@@ -17,12 +25,14 @@ export default class ChapterEditor extends Component<ChapterEditorProps, Chapter
         this.ref = createRef<MonacoEditorHandle>();
         this.state = {
             content: props.chapter.contents ? props.chapter.contents.join('\n') : props.chapter.chapterInfo.content,
+            chapterName: props.chapter.chapterInfo.chapterName,
         };
     }
     componentDidUpdate(prevProps: Readonly<ChapterEditorProps>, _prevState: Readonly<ChapterEditorState>, _snapshot?: unknown): void {
         if (prevProps.chapter.id !== this.props.chapter.id) {
             this.setState({
                 content: this.props.chapter.contents ? this.props.chapter.contents.join('\n') : this.props.chapter.chapterInfo.content,
+                chapterName: this.props.chapter.chapterInfo.chapterName,
             });
         }
     }
@@ -31,15 +41,34 @@ export default class ChapterEditor extends Component<ChapterEditorProps, Chapter
     }
     render() {
         return (<>
-            <MonacoEditor
-                ref={this.ref}
-                value={this.state.content}
-                language="plaintext"
-                onChange={(newValue) => this.setState({ content: newValue })}
-                options={{
-                    wordWrap: 'on',
-                }}
-            />
+            <Flex vertical className={styles.container}>
+                <Flex className={styles.header}>
+                    <Text
+                        className={styles.name}
+                        editable={{
+                            onChange: (value) => this.setState({ chapterName: value }),
+                            icon: <Icon><EditOutlined fill="currentColor" width="20" /></Icon>,
+                            enterIcon: <Icon><SaveOutlined fill="currentColor" width="20" className={styles.save} /></Icon>,
+                            tooltip: "编辑章节名称",
+                        }}
+                    >
+                        {this.state.chapterName}
+                    </Text>
+                </Flex>
+                <div className={styles.editorWrapper}>
+                    <MonacoEditor
+                        ref={this.ref}
+                        value={this.state.content}
+                        language="plaintext"
+                        width="100%"
+                        height="100%"
+                        onChange={(newValue) => this.setState({ content: newValue })}
+                        options={{
+                            wordWrap: 'on',
+                        }}
+                    />
+                </div>
+            </Flex>
         </>);
     }
 }
diff --git a/src/manage/qd/ShowMode.module.css b/src/manage/qd/ShowMode.module.css
new file mode 100644
index 0000000..217a722
--- /dev/null
+++ b/src/manage/qd/ShowMode.module.css
@@ -0,0 +1,3 @@
+.c {
+    width: 160px;
+}
diff --git a/src/manage/qd/ShowMode.tsx b/src/manage/qd/ShowMode.tsx
index 06440b7..8b0c5dc 100644
--- a/src/manage/qd/ShowMode.tsx
+++ b/src/manage/qd/ShowMode.tsx
@@ -1,5 +1,6 @@
 import { Select } from "antd";
 import { ChapterShowMode } from "../../utils/qd"
+import styles from './ShowMode.module.css';
 
 const TEXTS = {
     [ChapterShowMode.All]: "显示所有章节",
@@ -15,6 +16,7 @@ export interface ShowModeProps {
 export default function ShowMode({ mode, onChange }: ShowModeProps) {
     return (
         <Select
+            className={styles.c}
             value={mode}
             onChange={onChange}
             options={