Add chapter name editor

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;
+}

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,
     }
 }
 

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;
+}

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>
         </>);
     }
 }

src/manage/qd/ShowMode.module.css

@@ -0,0 +1,3 @@
+.c {
+    width: 160px;
+}

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={