Selaa lähdekoodia

feat(frontend): 简化模板创建流程,支持空白模板

- 移除创建模板时的基础文档上传要求
- 只需填写名称和可选描述即可创建模板
- 创建后直接进入空白编辑页面
- 编辑器显示空白模板引导提示
何文松 1 kuukausi sitten
vanhempi
commit
deec08d52e
2 muutettua tiedostoa jossa 70 lisäystä ja 75 poistoa
  1. 60 22
      frontend/vue-demo/src/views/Editor.vue
  2. 10 53
      frontend/vue-demo/src/views/Templates.vue

+ 60 - 22
frontend/vue-demo/src/views/Editor.vue

@@ -349,6 +349,10 @@ async function fetchTemplateData() {
     
     // 设置变量
     variables.value = templateStore.variables || []
+    
+    // 设置文档内容(如果有的话)
+    const tplContent = templateStore.currentTemplate?.content
+    documentContent.value = tplContent || emptyPlaceholder
   } catch (error) {
     console.error('加载模板失败:', error)
     ElMessage.error('加载模板失败')
@@ -378,28 +382,22 @@ const selectionRange = ref(null)
 // 知识图谱
 const showGraphModal = ref(false)
 
-// 文档内容(Mock)
-const documentContent = ref(`
-  <h1>智慧园区建设项目可行性研究报告</h1>
-  
-  <h2>一、项目概述</h2>
-  <p>本报告对<span class="entity-highlight entity" data-var="project_name">智慧园区建设项目</span>进行可行性研究分析。项目位于<span class="entity-highlight location" data-var="project_location">华南科技园</span>,总投资额为<span class="entity-highlight data" data-var="total_investment">5000万元</span>。</p>
-  
-  <h2>二、技术方案</h2>
-  <p>项目采用<span class="entity-highlight concept" data-var="tech_solution">智能化管理平台</span>作为核心技术方案,实现园区的智慧化管理和运营。</p>
-  
-  <h2>三、投资估算</h2>
-  <p>项目总投资预算包括以下几个部分:</p>
-  <ul>
-    <li>基础设施建设:2000万元</li>
-    <li>智能系统集成:1500万元</li>
-    <li>软件平台开发:1000万元</li>
-    <li>其他费用:500万元</li>
-  </ul>
-  
-  <h2>四、效益分析</h2>
-  <p>项目建成后,预计每年可实现运营收入3000万元,投资回收期约为3年。</p>
-`)
+// 文档内容(从 API 获取或空白)
+const documentContent = ref('')
+
+// 空白模板时的占位提示
+const emptyPlaceholder = `
+  <div class="empty-editor-placeholder">
+    <h2>📝 开始编辑您的模板</h2>
+    <p>这是一个空白模板。您可以:</p>
+    <ul>
+      <li>在左侧添加来源文件定义</li>
+      <li>在右侧面板添加变量</li>
+      <li>直接在此处编辑模板内容</li>
+      <li>选中文本后右键将其标记为变量</li>
+    </ul>
+  </div>
+`
 
 // 计算属性
 const groupedVariables = computed(() => {
@@ -1011,4 +1009,44 @@ onUnmounted(() => {
     }
   }
 }
+
+// 空白编辑器占位提示样式
+:deep(.empty-editor-placeholder) {
+  padding: 60px 40px;
+  text-align: center;
+  color: var(--text-2);
+
+  h2 {
+    font-size: 24px;
+    margin-bottom: 20px;
+    color: var(--text-1);
+  }
+
+  p {
+    font-size: 15px;
+    margin-bottom: 16px;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    text-align: left;
+    max-width: 300px;
+    margin: 0 auto;
+
+    li {
+      padding: 8px 0;
+      padding-left: 24px;
+      position: relative;
+      font-size: 14px;
+
+      &::before {
+        content: '✓';
+        position: absolute;
+        left: 0;
+        color: var(--primary);
+      }
+    }
+  }
+}
 </style>

+ 10 - 53
frontend/vue-demo/src/views/Templates.vue

@@ -84,34 +84,9 @@
             v-model="newTemplate.description"
             type="textarea"
             :rows="3"
-            placeholder="请输入模板描述"
+            placeholder="请输入模板描述(可选)"
           />
         </el-form-item>
-        <el-form-item label="基础文档" required>
-          <el-upload
-            class="upload-demo"
-            drag
-            action="/api/v1/parse/upload"
-            :on-success="handleUploadSuccess"
-            :show-file-list="false"
-          >
-            <div v-if="newTemplate.baseDocumentId" class="upload-success">
-              <el-icon size="40" color="#52c41a"><CircleCheckFilled /></el-icon>
-              <div>文档已上传</div>
-            </div>
-            <template v-else>
-              <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
-              <div class="el-upload__text">
-                拖拽文件到此处,或<em>点击上传</em>
-              </div>
-            </template>
-            <template #tip>
-              <div class="el-upload__tip">
-                支持 Word、PDF 格式,上传后可标记变量
-              </div>
-            </template>
-          </el-upload>
-        </el-form-item>
       </el-form>
       <template #footer>
         <el-button @click="showCreateDialog = false">取消</el-button>
@@ -126,7 +101,7 @@
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { Plus, More, UploadFilled, CircleCheckFilled } from '@element-plus/icons-vue'
+import { Plus, More } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useTemplateStore } from '@/stores/template'
 
@@ -141,8 +116,7 @@ const showCreateDialog = ref(false)
 
 const newTemplate = reactive({
   name: '',
-  description: '',
-  baseDocumentId: ''
+  description: ''
 })
 
 // 模板列表数据(从 API 获取)
@@ -271,30 +245,23 @@ async function handleCommand(command, tpl) {
   }
 }
 
-function handleUploadSuccess(response) {
-  if (response.code === 200) {
-    newTemplate.baseDocumentId = response.data.id
-    ElMessage.success('文档上传成功')
-  } else {
-    ElMessage.error('上传失败: ' + response.msg)
-  }
-}
-
 async function handleCreateTemplate() {
   if (!newTemplate.name) {
     ElMessage.warning('请输入模板名称')
     return
   }
-  if (!newTemplate.baseDocumentId) {
-    ElMessage.warning('请上传基础文档')
-    return
-  }
 
   creating.value = true
   try {
-    const template = await templateStore.createTemplate(newTemplate)
+    const template = await templateStore.createTemplate({
+      name: newTemplate.name,
+      description: newTemplate.description || ''
+    })
     showCreateDialog.value = false
+    // 重置表单
+    Object.assign(newTemplate, { name: '', description: '' })
     ElMessage.success('模板创建成功')
+    // 跳转到空白编辑页
     router.push(`/editor/${template.id}`)
   } catch (error) {
     ElMessage.error('创建失败: ' + error.message)
@@ -330,14 +297,4 @@ async function handleCreateTemplate() {
   }
 }
 
-.upload-success {
-  text-align: center;
-  color: #52c41a;
-  padding: 20px;
-
-  div {
-    margin-top: 8px;
-    font-size: 14px;
-  }
-}
 </style>