From f4f5983168829f6e607e5162235f850bc17797c2 Mon Sep 17 00:00:00 2001
From: lifegpc <root@lifegpc.com>
Date: Sat, 28 Feb 2026 15:51:39 +0800
Subject: [PATCH] Use custom close and save button

---
 src/components/Icon.tsx                |  8 +++--
 src/manage/qd/ChapterEditor.module.css | 48 +++++++++++++++++++++++---
 src/manage/qd/ChapterEditor.tsx        | 48 +++++++++++++++++++-------
 3 files changed, 85 insertions(+), 19 deletions(-)

diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index bfc35b4..dfd47a0 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -1,8 +1,12 @@
 import { HTMLProps } from "react";
 import styles from "./Icon.module.css";
 
-export default function Icon(props: HTMLProps<HTMLSpanElement>) {
+export interface IconProps extends HTMLProps<HTMLSpanElement> {
+    cls?: string;
+}
+
+export default function Icon(props: IconProps) {
     return (
-        <span {...props} className={`${styles.icon}${props.className ? ` ${props.className}` : ''}`}>{props.children}</span>
+        <span {...props} className={`${styles.icon}${props.cls ? ` ${props.cls}` : ''}`}>{props.children}</span>
     )
 }
diff --git a/src/manage/qd/ChapterEditor.module.css b/src/manage/qd/ChapterEditor.module.css
index 8080a13..9a4b67f 100644
--- a/src/manage/qd/ChapterEditor.module.css
+++ b/src/manage/qd/ChapterEditor.module.css
@@ -9,16 +9,54 @@
 .name {
     align-items: center;
     display: flex;
-    margin-top: 8px;
-    margin-left: 16px;
+    margin: 8px!important;
 }
 
-.name .save {
+.nameContainer.editing .name {
+    width: 100%;
+    left: 0;
+    top: 0;
+}
+
+.nameContainer.editing .name textarea:global(.ant-input) {
+    padding-right: 40px;
+    width: 100%;
+}
+
+.nameSave {
+    position: absolute;
+    right: 14px;
+    cursor: pointer;
+    color: gray;
+}
+
+.nameSave:hover {
+    color: #4096ff;
+}
+
+.nameClose {
+    position: absolute;
+    right: 34px;
+    cursor: pointer;
+    color: gray;
+}
+
+.nameClose:hover {
+    color: #4096ff;
+}
+
+.nameContainer {
     position: relative;
-    top: 3px;
+    align-items: center;
 }
 
-.editorWrapper {
+.nameContainer.editing {
+    min-width: 200px;
+    width: calc(100% - 200px);
+    max-width: 500px;
+}
+
+.editor {
     flex: 1;
     overflow: hidden;
     position: relative;
diff --git a/src/manage/qd/ChapterEditor.tsx b/src/manage/qd/ChapterEditor.tsx
index 4e75261..fbd109f 100644
--- a/src/manage/qd/ChapterEditor.tsx
+++ b/src/manage/qd/ChapterEditor.tsx
@@ -6,6 +6,7 @@ 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";
+import CloseOutlined from "../../../node_modules/@material-icons/svg/svg/close/outline.svg";
 
 const { Text } = Typography;
 
@@ -16,6 +17,8 @@ export interface ChapterEditorProps {
 export interface ChapterEditorState {
     content: string;
     chapterName: string;
+    editingChapterName: boolean;
+    eChapterName?: string;
 }
 
 export default class ChapterEditor extends Component<ChapterEditorProps, ChapterEditorState> {
@@ -26,6 +29,7 @@ export default class ChapterEditor extends Component<ChapterEditorProps, Chapter
         this.state = {
             content: props.chapter.contents ? props.chapter.contents.join('\n') : props.chapter.chapterInfo.content,
             chapterName: props.chapter.chapterInfo.chapterName,
+            editingChapterName: false,
         };
     }
     componentDidUpdate(prevProps: Readonly<ChapterEditorProps>, _prevState: Readonly<ChapterEditorState>, _snapshot?: unknown): void {
@@ -33,6 +37,8 @@ export default class ChapterEditor extends Component<ChapterEditorProps, Chapter
             this.setState({
                 content: this.props.chapter.contents ? this.props.chapter.contents.join('\n') : this.props.chapter.chapterInfo.content,
                 chapterName: this.props.chapter.chapterInfo.chapterName,
+                editingChapterName: false,
+                eChapterName: undefined,
             });
         }
     }
@@ -40,22 +46,40 @@ export default class ChapterEditor extends Component<ChapterEditorProps, Chapter
         this.ref.current?.editor.layout();
     }
     render() {
+        let nameClass = styles.nameContainer;
+        if (this.state.editingChapterName) {
+            nameClass += ` ${styles.editing}`;
+        }
+        console.log(this.state);
         return (<>
             <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 className={nameClass}>
+                        <Text
+                            className={styles.name}
+                            editable={{
+                                autoSize: true,
+                                editing: this.state.editingChapterName,
+                                onChange: (value) => this.setState({ eChapterName: value }),
+                                icon: <Icon><EditOutlined fill="currentColor" width="20" height="20" /></Icon>,
+                                tooltip: "编辑章节名称",
+                                onStart: () => this.setState({ editingChapterName: true }),
+                                enterIcon: null,
+                                onEnd: () => this.setState({ editingChapterName: false, chapterName: this.state.eChapterName ?? this.state.chapterName, eChapterName: undefined }),
+                                onCancel: () => this.setState({ editingChapterName: false, eChapterName: undefined }),
+                            }}
+                        >
+                            {this.state.editingChapterName ? (this.state.eChapterName ?? this.state.chapterName) : this.state.chapterName}
+                        </Text>
+                        {this.state.editingChapterName && <Icon cls={styles.nameClose}><CloseOutlined fill="currentColor" width="20" height="20" onClick={() => {
+                            this.setState({ editingChapterName: false, eChapterName: undefined });
+                        }} /></Icon>}
+                        {this.state.editingChapterName && <Icon cls={styles.nameSave}><SaveOutlined fill="currentColor" width="20" height="20" onClick={() => {
+                            this.setState({ editingChapterName: false, chapterName: this.state.eChapterName ?? this.state.chapterName, eChapterName: undefined });
+                        }} /></Icon>}
+                    </Flex>
                 </Flex>
-                <div className={styles.editorWrapper}>
+                <div className={styles.editor}>
                     <MonacoEditor
                         ref={this.ref}
                         value={this.state.content}