feature: 优化渲染逻辑

pages/search/[id].vue

@@ -43,7 +43,7 @@
                             <div class="flex justify-between items-center">
                                 <div class="flex items-center gap-2 text-lg">
                                     <UIcon name="i-heroicons-sparkles-20-solid" />
-                                    搜索过程
+                                    搜索过程{{ item.desLoading ? '中...' : '' }}
                                 </div>
                                 <UButton
                                     size="md"
@@ -63,7 +63,7 @@
 
                 <div class="text-xl flex items-center space-x-1">
                     <UIcon name="i-heroicons-chat-bubble-left-right-20-solid" />
-                    <span>答案</span>
+                    <span>{{ item.ansLoading ? '回答中' : '答案' }}</span>
                 </div>
                 <MdRenderer :content="item.article" />
                 <div class="space-x-2">
@@ -145,6 +145,7 @@ const route = useRoute()
 const { fetchRequest } = useFetchRequest()
 const repos = getMockRepo();
 const initLoading = ref(true);
+const editIndex = ref(0);
 // todo mock
 const repoItem = repos.find(item => route.query.repo === item.label);
 const state = reactive({
@@ -171,10 +172,24 @@ const handleShare = (hash) => {
     })
 }
 const handleCopyMD = (index) => {
-
+    const article = data.value[index].article
+    useCopyToClipboard().copy(article)
+    toast.add({
+        icon: 'i-heroicons-information-circle-20-solid',
+        timeout: 1000,
+        title: '复制成功'
+    })
 }
 const handleReGenerate = (index) => {
-
+    editIndex.value = index;
+    const question = data.value[editIndex.value].question;
+    data.value[editIndex.value] = {
+        question,
+        desLoading: true
+    };
+    nextTick(() => {
+        generateFetchData(question);
+    })
 }
 
 const steps = ['', '问题分析', '代码搜索', '整理答案', '完成！']
@@ -195,8 +210,10 @@ const recommendQuestions = [
 const continueQuestion = ref(null)
 let asking = ref(false)
 const handleContinueAsk = (question) => {
-    if (asking.value) return;
-    asking.value = true;
+    if (asking.value) return
+    asking.value = true
+    editIndex.value = data.value.length;
+    createGenerateInitItem(question);
     generateFetchData(question);
 }
 
@@ -204,6 +221,12 @@ const handleContinueAsk = (question) => {
 let aiChatController = null; // 用户取消操作方法
 const markedEnd = '[DONE]';
 let storeSource = [];
+const createGenerateInitItem = (question) => {
+    data.value.push({ question, desLoading: true })
+}
+const resetAnsLoading = () => {
+    Object.assign(data.value[editIndex.value], { ansLoading: false })
+}
 const handleFormFetchData = (fetchData) => {
     let message = {};
     try {
@@ -212,41 +235,40 @@ const handleFormFetchData = (fetchData) => {
         console.log(error)
     }
     if (Object.keys(message).length === 0) return;
-    const index = data.value.length === 0 ? 0 : data.value.length - 1;
-    data.value[index] = data.value[index] || {};
     const { meta, choices } = message;
+    const index = editIndex.value;
     if (meta.type === 'answer') {
         Object.assign(data.value[index], {
-            question: state.query,
+            ansLoading: true,
+            desLoading: false,
             article: message.choices[0].message.content
         })
-        return;
+        return
     }
-    if (meta.type === 'log') {
-        if (meta.action === 'rephrase_question') {
-            Object.assign(data.value[index], { description: choices[0].message.content })
-        } else if (meta.action === 'search_file') {
-            let source = choices[0].message.content;
-            storeSource = source.split('\n').map(item => {
-                return {
-                    label: item,
-                    link: '',
-                    repo: ''
-                }
-            });
-        }
+    if (meta.type !== 'log') return
+
+    if (meta.action === 'rephrase_question') {
+        Object.assign(data.value[index], { description: choices[0].message.content, desLoading: true })
+        return
+    }
+    if (meta.action === 'search_file') {
+        Object.assign(data.value[index], { desLoading: true })
+        let source = choices[0].message.content;
+        storeSource = source.split('\n');
     }
 }
 const handleUpdateSource = () => {
-    const index = data.value.length === 0 ? 0 : data.value.length - 1;
+    const index = editIndex.value;
     data.value[index] = data.value[index] || {};
     // https://github.com/allwefantasy/byzer-llm/blob/master/tests/functions_suite.py
     const endWidthGit = state.gitPath.endsWith('.git');
     const baseUrl = endWidthGit ? state.gitPath.slice(0, state.gitPath.length - 4) : state.gitPath;
     storeSource = storeSource.map((item) => {
-        item.repo = state.repo;
-        item.link = `${baseUrl}/blob/${state.branch}/${item.label}`
-        return item;
+        return {
+            repo: state.repo,
+            link: `${baseUrl}/blob/${state.branch}/${item.label}`,
+            label: item
+        }
     })
     Object.assign(data.value[index], { source: storeSource });
 }
@@ -254,9 +276,13 @@ const handleHideInitLoading = () => {
     initLoading.value = false;
 }
 const handleMessage = (event) => {
-    if (initLoading.value) handleHideInitLoading();
+    if (initLoading.value) {
+        handleHideInitLoading()
+        createGenerateInitItem(state.query)
+    };
     if (event.data === markedEnd) {
         asking.value = false;
+        resetAnsLoading();
         handleUpdateSource();
         return;
     }