|
@@ -3,11 +3,14 @@
|
|
|
<!-- 工具栏 -->
|
|
<!-- 工具栏 -->
|
|
|
<div class="editor-toolbar">
|
|
<div class="editor-toolbar">
|
|
|
<el-button :icon="ArrowLeft" @click="goBack">返回</el-button>
|
|
<el-button :icon="ArrowLeft" @click="goBack">返回</el-button>
|
|
|
- <el-input
|
|
|
|
|
- v-model="reportTitle"
|
|
|
|
|
- class="title-input"
|
|
|
|
|
- placeholder="请输入报告标题"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <div class="title-input-wrapper" :style="{ width: titleInputWidth + 'px' }">
|
|
|
|
|
+ <el-input
|
|
|
|
|
+ v-model="reportTitle"
|
|
|
|
|
+ class="title-input"
|
|
|
|
|
+ placeholder="请输入报告标题"
|
|
|
|
|
+ />
|
|
|
|
|
+ <span class="title-measure" ref="titleMeasure">{{ reportTitle || '请输入报告标题' }}</span>
|
|
|
|
|
+ </div>
|
|
|
<span class="save-status" v-if="saved">✓ 已保存</span>
|
|
<span class="save-status" v-if="saved">✓ 已保存</span>
|
|
|
<div class="toolbar-right">
|
|
<div class="toolbar-right">
|
|
|
<el-button
|
|
<el-button
|
|
@@ -311,7 +314,7 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
|
|
|
|
|
|
|
+import { ref, reactive, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
|
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
|
import {
|
|
import {
|
|
|
ArrowLeft, Clock, Share, Check, Plus, Delete, Connection, Refresh
|
|
ArrowLeft, Clock, Share, Check, Plus, Delete, Connection, Refresh
|
|
@@ -326,12 +329,24 @@ const templateStore = useTemplateStore()
|
|
|
|
|
|
|
|
const templateId = route.params.templateId
|
|
const templateId = route.params.templateId
|
|
|
const reportTitle = ref('')
|
|
const reportTitle = ref('')
|
|
|
|
|
+const titleMeasure = ref(null)
|
|
|
|
|
+const titleInputWidth = ref(120)
|
|
|
const viewMode = ref('edit')
|
|
const viewMode = ref('edit')
|
|
|
const saved = ref(true)
|
|
const saved = ref(true)
|
|
|
const editorRef = ref(null)
|
|
const editorRef = ref(null)
|
|
|
const loading = ref(false)
|
|
const loading = ref(false)
|
|
|
const regenerating = ref(false)
|
|
const regenerating = ref(false)
|
|
|
|
|
|
|
|
|
|
+// 动态计算标题输入框宽度
|
|
|
|
|
+watch(reportTitle, () => {
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ if (titleMeasure.value) {
|
|
|
|
|
+ const measuredWidth = titleMeasure.value.offsetWidth + 30 // 额外边距
|
|
|
|
|
+ titleInputWidth.value = Math.max(120, Math.min(400, measuredWidth))
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
// 来源文件(从 API 获取)
|
|
// 来源文件(从 API 获取)
|
|
|
const sourceFiles = ref([])
|
|
const sourceFiles = ref([])
|
|
|
const selectedFile = ref(null)
|
|
const selectedFile = ref(null)
|
|
@@ -1364,17 +1379,39 @@ onUnmounted(() => {
|
|
|
gap: 16px;
|
|
gap: 16px;
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
|
|
|
|
|
- .title-input {
|
|
|
|
|
- width: 300px;
|
|
|
|
|
|
|
+ .title-input-wrapper {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ min-width: 120px;
|
|
|
|
|
+ max-width: 400px;
|
|
|
|
|
+
|
|
|
|
|
+ .title-input {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
|
|
|
- :deep(.el-input__wrapper) {
|
|
|
|
|
- box-shadow: none;
|
|
|
|
|
- background: transparent;
|
|
|
|
|
|
|
+ :deep(.el-input__wrapper) {
|
|
|
|
|
+ box-shadow: none;
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
|
|
|
- &:hover {
|
|
|
|
|
- background: var(--bg);
|
|
|
|
|
|
|
+ &:hover, &.is-focus {
|
|
|
|
|
+ background: var(--bg);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ :deep(.el-input__inner) {
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .title-measure {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ visibility: hidden;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ padding: 0 11px; // 与 el-input 内边距一致
|
|
|
|
|
+ pointer-events: none;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.save-status {
|
|
.save-status {
|