|
|
@@ -1,34 +1,5 @@
|
|
|
<template>
|
|
|
<div class="editor-page">
|
|
|
- <!-- 工具栏:仅在选中文档时显示 -->
|
|
|
- <div class="editor-toolbar" v-if="hasActiveDocument">
|
|
|
- <div class="title-section">
|
|
|
- <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>
|
|
|
- </div>
|
|
|
- <div class="toolbar-right">
|
|
|
- <el-button
|
|
|
- :icon="Refresh"
|
|
|
- :loading="regenerating"
|
|
|
- @click="handleRegenerateBlocks"
|
|
|
- title="重新生成文档结构"
|
|
|
- >
|
|
|
- 重新生成
|
|
|
- </el-button>
|
|
|
- <el-button :icon="Clock">版本</el-button>
|
|
|
- <el-button :icon="Share">分享</el-button>
|
|
|
- <el-divider direction="vertical" />
|
|
|
- <el-button type="primary" :icon="Check" @click="handleSave">保存</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
<!-- 主体 -->
|
|
|
<div class="editor-body">
|
|
|
<!-- 左侧面板 -->
|
|
|
@@ -237,13 +208,43 @@
|
|
|
<!-- 编辑器:有选中文档时显示 -->
|
|
|
<template v-else>
|
|
|
<div class="editor-title-bar">
|
|
|
+ <!-- 左侧:标题和保存状态 -->
|
|
|
+ <div class="title-section">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 中间:视图切换 -->
|
|
|
<div class="view-toggle">
|
|
|
<el-radio-group v-model="viewMode" size="small">
|
|
|
<el-radio-button value="edit">📝 编辑</el-radio-button>
|
|
|
<el-radio-button value="preview">👁 预览</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
</div>
|
|
|
- <el-button :icon="Share" circle @click="showGraphModal = true" title="知识图谱" />
|
|
|
+
|
|
|
+ <!-- 右侧:操作按钮 -->
|
|
|
+ <div class="toolbar-actions">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ :icon="Refresh"
|
|
|
+ :loading="regenerating"
|
|
|
+ @click="handleRegenerateBlocks"
|
|
|
+ title="重新生成文档结构"
|
|
|
+ >
|
|
|
+ 重新生成
|
|
|
+ </el-button>
|
|
|
+ <el-button size="small" :icon="Clock" title="版本历史">版本</el-button>
|
|
|
+ <el-button size="small" :icon="Share" circle @click="showGraphModal = true" title="知识图谱" />
|
|
|
+ <el-divider direction="vertical" />
|
|
|
+ <el-button size="small" type="primary" :icon="Check" @click="handleSave">保存</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div class="editor-scroll" ref="editorRef">
|
|
|
@@ -2576,115 +2577,6 @@ onUnmounted(() => {
|
|
|
background: var(--bg);
|
|
|
}
|
|
|
|
|
|
-// ==========================================
|
|
|
-// 工具栏 - V2 风格
|
|
|
-// ==========================================
|
|
|
-.editor-toolbar {
|
|
|
- height: 56px;
|
|
|
- background: var(--white);
|
|
|
- border-bottom: 1px solid var(--border);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 0 16px;
|
|
|
- gap: 16px;
|
|
|
- flex-shrink: 0;
|
|
|
-
|
|
|
- .title-section {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10px;
|
|
|
- flex: 1;
|
|
|
- min-width: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .title-input-wrapper {
|
|
|
- position: relative;
|
|
|
- display: inline-block;
|
|
|
- min-width: 200px;
|
|
|
- max-width: 400px;
|
|
|
-
|
|
|
- .title-input {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- :deep(.el-input__wrapper) {
|
|
|
- box-shadow: none;
|
|
|
- background: transparent;
|
|
|
- border-radius: var(--radius-sm);
|
|
|
- padding: 0 12px;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: var(--bg);
|
|
|
- }
|
|
|
-
|
|
|
- &.is-focus {
|
|
|
- background: var(--white);
|
|
|
- box-shadow: 0 0 0 2px var(--primary-light);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- :deep(.el-input__inner) {
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 600;
|
|
|
- color: var(--text-1);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .title-measure {
|
|
|
- position: absolute;
|
|
|
- visibility: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 600;
|
|
|
- padding: 0 12px;
|
|
|
- pointer-events: none;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .save-status {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 4px;
|
|
|
- color: var(--success);
|
|
|
- font-size: 13px;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
-
|
|
|
- .toolbar-right {
|
|
|
- display: flex;
|
|
|
- gap: 10px;
|
|
|
- align-items: center;
|
|
|
- flex-shrink: 0;
|
|
|
-
|
|
|
- :deep(.el-button) {
|
|
|
- border-radius: var(--radius-sm);
|
|
|
- font-size: 13px;
|
|
|
-
|
|
|
- &:not(.el-button--primary) {
|
|
|
- border-color: var(--border);
|
|
|
-
|
|
|
- &:hover {
|
|
|
- border-color: var(--primary);
|
|
|
- color: var(--primary);
|
|
|
- background: var(--primary-light);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.el-button--primary {
|
|
|
- background: var(--primary-gradient);
|
|
|
- border: none;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- :deep(.el-divider--vertical) {
|
|
|
- height: 24px;
|
|
|
- margin: 0 4px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
.editor-body {
|
|
|
flex: 1;
|
|
|
@@ -3350,74 +3242,125 @@ onUnmounted(() => {
|
|
|
}
|
|
|
|
|
|
// ==========================================
|
|
|
- // 编辑器标题栏 - V2 风格
|
|
|
+ // 编辑器标题栏 - V2 风格(集成工具栏)
|
|
|
// ==========================================
|
|
|
.editor-title-bar {
|
|
|
- padding: 16px 24px;
|
|
|
+ padding: 12px 20px;
|
|
|
border-bottom: 1px solid var(--border);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- gap: 12px;
|
|
|
+ gap: 16px;
|
|
|
background: var(--white);
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
|
- .editor-main-title {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 600;
|
|
|
+ // 左侧:标题和保存状态
|
|
|
+ .title-section {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
flex: 1;
|
|
|
- cursor: pointer;
|
|
|
- transition: color 0.2s;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-input-wrapper {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ min-width: 150px;
|
|
|
+ max-width: 300px;
|
|
|
|
|
|
- &:hover {
|
|
|
- color: var(--primary);
|
|
|
+ .title-input {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ :deep(.el-input__wrapper) {
|
|
|
+ box-shadow: none;
|
|
|
+ background: transparent;
|
|
|
+ border-radius: var(--radius-sm);
|
|
|
+ padding: 0 8px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: var(--bg);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.is-focus {
|
|
|
+ background: var(--white);
|
|
|
+ box-shadow: 0 0 0 2px var(--primary-light);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-input__inner) {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--text-1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-measure {
|
|
|
+ position: absolute;
|
|
|
+ visibility: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+ padding: 0 8px;
|
|
|
+ pointer-events: none;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .report-status {
|
|
|
- display: inline-block;
|
|
|
- padding: 0 8px;
|
|
|
- height: 24px;
|
|
|
- line-height: 24px;
|
|
|
- background: var(--primary-light);
|
|
|
- color: var(--primary);
|
|
|
- border-radius: 4px;
|
|
|
+
|
|
|
+ .save-status {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ color: var(--success);
|
|
|
font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
+ // 中间:视图切换
|
|
|
.view-toggle {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- border: 1px solid var(--border);
|
|
|
- border-radius: var(--radius-sm);
|
|
|
- overflow: hidden;
|
|
|
|
|
|
- .view-btn {
|
|
|
- padding: 8px 16px;
|
|
|
- border: none;
|
|
|
- background: var(--white);
|
|
|
- font-size: 13px;
|
|
|
- cursor: pointer;
|
|
|
- color: var(--text-2);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 6px;
|
|
|
- transition: all 0.2s;
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- border-right: 1px solid var(--border);
|
|
|
+ :deep(.el-radio-group) {
|
|
|
+ .el-radio-button__inner {
|
|
|
+ padding: 6px 12px;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 右侧:操作按钮
|
|
|
+ .toolbar-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+ align-items: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ :deep(.el-button) {
|
|
|
+ border-radius: var(--radius-sm);
|
|
|
|
|
|
- &:hover {
|
|
|
- background: var(--bg);
|
|
|
+ &:not(.el-button--primary) {
|
|
|
+ border-color: var(--border);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: var(--primary);
|
|
|
+ color: var(--primary);
|
|
|
+ background: var(--primary-light);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- &.active {
|
|
|
- background: var(--primary-light);
|
|
|
- color: var(--primary);
|
|
|
- font-weight: 500;
|
|
|
+ &.el-button--primary {
|
|
|
+ background: var(--primary-gradient);
|
|
|
+ border: none;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ :deep(.el-divider--vertical) {
|
|
|
+ height: 20px;
|
|
|
+ margin: 0 4px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|