add writer sequ

Author: jihe520

frontend/src/apis/commonApi.ts

@@ -3,3 +3,8 @@ import request from "@/utils/request";
 export function getHelloWorld() {
 	return request.get<{ message: string }>("/");
 }
+
+// 获取论文顺序
+export function getWriterSeque() {
+	return request.get<{ writer_seque: string[] }>("/writer_seque");
+}

frontend/src/components/WriterEditor.vue

@@ -1,31 +1,58 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { onMounted, ref, watch, computed } from 'vue';
 import { renderMarkdown } from '@/utils/markdown';
 import type { WriterMessage } from '@/utils/response'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { getWriterSeque } from '@/apis/commonApi';
 
 interface ContentSection {
   id: number;
   content: string;
   renderedContent: string;
+  sub_title?: string;
 }
 
 const props = defineProps<{
   messages: WriterMessage[]
 }>()
 
+const writerSequence = ref<string[]>([]);
+
+onMounted(async () => {
+  const res = await getWriterSeque();
+  writerSequence.value = Array.isArray(res.data) ? res.data : [];
+});
+
 const sections = ref<ContentSection[]>([]);
 let nextId = 0;
 
 // 添加新的内容段落
-const appendContent = async (content: string) => {
+const appendContent = async (content: string, sub_title?: string) => {
   const renderedContent = await renderMarkdown(content);
   sections.value.push({
     id: nextId++,
     content,
-    renderedContent
+    renderedContent,
+    sub_title
   });
 };
 
+// 根据 writerSequence 排序内容
+const sortedSections = computed(() => {
+  if (!writerSequence.value.length) return sections.value;
+
+  return [...sections.value].sort((a, b) => {
+    const aIndex = a.sub_title ? writerSequence.value.indexOf(a.sub_title) : Infinity;
+    const bIndex = b.sub_title ? writerSequence.value.indexOf(b.sub_title) : Infinity;
+
+    if (aIndex === Infinity && bIndex === Infinity) return 0;
+    if (aIndex === Infinity) return 1;
+    if (bIndex === Infinity) return -1;
+
+    return aIndex - bIndex;
+  });
+});
+
 // 监听消息变化
 watch(() => props.messages, async (messages) => {
   // 清空现有内容
@@ -35,27 +62,25 @@ watch(() => props.messages, async (messages) => {
   // 按顺序添加每个消息的内容
   for (const msg of messages) {
     if (msg.content) {
-      await appendContent(msg.content);
+      await appendContent(msg.content, msg.sub_title);
     }
   }
 }, { immediate: true });
 </script>
 
 <template>
-  <div class="h-full overflow-hidden">
-    <div class="h-full overflow-y-auto p-6">
-      <div class="max-w-4xl mx-auto space-y-6">
-        <TransitionGroup name="section" tag="div" class="space-y-6">
-          <div v-for="section in sections" :key="section.id"
-            class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-500">
-            <div class="p-6">
-              <div class="prose prose-slate max-w-none" v-html="section.renderedContent"></div>
-            </div>
+  <ScrollArea class="h-full overflow-y-auto p-6">
+    <div class="max-w-4xl mx-auto space-y-6">
+      <TransitionGroup name="section" tag="div" class="space-y-6">
+        <div v-for="section in sortedSections" :key="section.id"
+          class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-500">
+          <div class="p-6">
+            <div class="prose prose-slate max-w-none" v-html="section.renderedContent"></div>
           </div>
-        </TransitionGroup>
-      </div>
+        </div>
+      </TransitionGroup>
     </div>
-  </div>
+  </ScrollArea>
 </template>
 
 <style>

frontend/src/stores/task.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import { TaskWebSocket } from '@/utils/websocket'
 import type { Message, CoderMessage, WriterMessage } from '@/utils/response'
-import messageData from '@/test/20250429-192632-60df0e49.json'
+import messageData from '@/test/20250430-163507-03282e09.json'
 
 export const useTaskStore = defineStore('task', () => {
   // 初始化时直接加载测试数据，确保页面首次渲染时有数据

frontend/src/test/20250430-163507-03282e09.json

@@ -1,6 +1,6 @@
 import { marked } from 'marked'
 import katex from 'katex'
-import type { RendererObject, Renderer } from 'marked'
+import type { RendererObject, Renderer, Token } from 'marked'
 
 // 默认的markdown渲染配置
 const defaultOptions = {
@@ -30,6 +30,15 @@ const renderer: Partial<RendererObject> = {
   paragraph(this: Renderer, token: { text: string }) {
     let text = token.text
 
+    // 先处理图片链接，避免被误识别为数学公式
+    const imagePattern = /!\[(.*?)\]\((.*?)\)/g
+    const images: Array<[string, string, string]> = []
+    let imageIndex = 0
+    text = text.replace(imagePattern, (match, alt, src) => {
+      images.push([match, alt, src])
+      return `__IMAGE_PLACEHOLDER_${imageIndex++}__`
+    })
+
     // 处理块级公式
     if (text.startsWith('\\[') && text.endsWith('\\]')) {
       const tex = text.slice(2, -2).trim()
@@ -50,13 +59,35 @@ const renderer: Partial<RendererObject> = {
       })
     }
 
+    // 还原图片占位符
+    text = text.replace(/__IMAGE_PLACEHOLDER_(\d+)__/g, (_, index) => {
+      const [, alt, src] = images[parseInt(index)]
+      return `<img src="${src}" alt="${alt}" class="max-w-full h-auto" />`
+    })
+
     return `<p>${text}</p>`
   }
 }
 
 // 配置marked
 marked.use({ renderer })
 
+// 配置图片处理
+marked.use({
+  hooks: {
+    preprocess(markdown) {
+      // 处理图片链接
+      const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000'
+      const taskId = window.localStorage.getItem('currentTaskId') || ''
+      
+      return markdown.replace(
+        /!\[(.*?)\]\(((?!http[s]?:\/\/).*?\.(?:png|jpg|jpeg|gif|bmp|webp))\)/g,
+        (_, alt, src) => `![${alt}](${baseUrl}/static/${taskId}/${src})`
+      )
+    }
+  }
+})
+
 /**
  * 渲染Markdown文本为HTML
  * @param content Markdown文本