|
|
@@ -1,7 +1,8 @@
|
|
|
<!-- 章节编辑器 -->
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, type PropType } from 'vue';
|
|
|
+import { ref, watch, type PropType } from 'vue';
|
|
|
+import { EditOutlined } from '@ant-design/icons-vue';
|
|
|
import type { Chapter } from '@/types/report.types';
|
|
|
import ContentEditor from "../components/ContentEditor.vue";
|
|
|
import ReferenceDraw from "../components/reference/ReferenceDraw.vue";
|
|
|
@@ -13,18 +14,43 @@ const props = defineProps({
|
|
|
}
|
|
|
});
|
|
|
|
|
|
-const referenceDraw = ref<InstanceType<typeof ReferenceDraw> | null>(null);
|
|
|
+const titleEditor = ref<HTMLInputElement | null>(null);
|
|
|
+
|
|
|
+const titleEditing = ref(false);
|
|
|
|
|
|
-const content = ref('');
|
|
|
+const fullTitle = ref('');
|
|
|
+
|
|
|
+const referenceDraw = ref<InstanceType<typeof ReferenceDraw> | null>(null);
|
|
|
|
|
|
const emits = defineEmits<{
|
|
|
(e: "update:data", data: Chapter): void;
|
|
|
(e: "change", data: Chapter): void;
|
|
|
}>();
|
|
|
|
|
|
-function onContentChange() {
|
|
|
- console.log('parent content', content.value);
|
|
|
- emits("change", {...props.data, content: content.value});
|
|
|
+watch(
|
|
|
+ () => titleEditor.value,
|
|
|
+ (el: HTMLInputElement | null) => {
|
|
|
+ el?.focus();
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
+function onEditTitle() {
|
|
|
+ fullTitle.value = props.data.title;
|
|
|
+ titleEditing.value = true;
|
|
|
+}
|
|
|
+
|
|
|
+function onTitleChange() {
|
|
|
+ titleEditing.value = false;
|
|
|
+ emits("change", {...props.data, title: fullTitle.value})
|
|
|
+}
|
|
|
+
|
|
|
+function onTitleChangeCancel() {
|
|
|
+ fullTitle.value = props.data.title;
|
|
|
+ titleEditing.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+function onContentChange(value: string) {
|
|
|
+ emits("change", {...props.data, content: value});
|
|
|
}
|
|
|
|
|
|
function search() {
|
|
|
@@ -34,9 +60,27 @@ function search() {
|
|
|
|
|
|
<template>
|
|
|
<div class="chapter-item">
|
|
|
- <h1>{{ data.fullTitle }}</h1>
|
|
|
+ <a-row>
|
|
|
+ <a-col>
|
|
|
+ <a-input
|
|
|
+ v-if="titleEditing"
|
|
|
+ v-model:value="fullTitle"
|
|
|
+ @blur="onTitleChange"
|
|
|
+ @pressEnter="onTitleChange"
|
|
|
+ @keyup.esc="onTitleChangeCancel"
|
|
|
+ ref="titleEditor"
|
|
|
+ class="title-editor"
|
|
|
+ />
|
|
|
+ <h1 v-else>
|
|
|
+ <span>{{ data.fullTitle }}</span>
|
|
|
+ </h1>
|
|
|
+ </a-col>
|
|
|
+ <a-col>
|
|
|
+ <a-button type="text" @click="onEditTitle"><edit-outlined /></a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
<p>
|
|
|
- <ContentEditor v-model:data="content" @change="onContentChange" />
|
|
|
+ <ContentEditor :data="data.content" @change="onContentChange" />
|
|
|
</p>
|
|
|
<div class="chapter-button-group">
|
|
|
<a-space>
|
|
|
@@ -52,6 +96,10 @@ function search() {
|
|
|
.chapter-item {
|
|
|
margin-top: 2em;
|
|
|
|
|
|
+ .title-editor {
|
|
|
+ width: 400px;
|
|
|
+ }
|
|
|
+
|
|
|
.chapter-button-group {
|
|
|
text-align: right;
|
|
|
}
|