From ce25e1931cc6de21578c46c5619a9054bdd45eb5 Mon Sep 17 00:00:00 2001
From: DebugIsFalse <511418503@qq.com>
Date: Thu, 16 May 2024 14:45:49 +0800
Subject: [PATCH] feature: add featrue

---
 composables/useFetchRequest.js |  14 +--
 pages/index.vue                |  19 +++-
 pages/search/[id].vue          | 176 ++++++++++++++++++++++-----------
 server/api/mock/[...slug].js   |   2 +-
 4 files changed, 139 insertions(+), 72 deletions(-)

diff --git a/composables/useFetchRequest.js b/composables/useFetchRequest.js
index 5d87309..0531269 100644
--- a/composables/useFetchRequest.js
+++ b/composables/useFetchRequest.js
@@ -1,27 +1,17 @@
-const BASE_URL = 'http://localhost:3000';
+const BASE_URL = 'https://gpu-pod656e861afe3d944d6b3ce77e-7862.node.inscode.run';
 const useFetchRequest = (baseUrl) => {
     baseUrl = baseUrl || BASE_URL;
     const config = {
         headers: {}
     };
-    const loading = ref(false);
     const fetchRequest = (url, fetchConfig) => {
         url = `${BASE_URL}${url}`;
         fetchConfig = fetchConfig || {};
         fetchConfig.method = (fetchConfig.method || 'get').toLocaleUpperCase();
-        if (!fetchConfig['Content-Type']) {
-            fetchConfig['Content-Type'] = 'application/json';
-        }
         fetchConfig = Object.assign(config, fetchConfig);
-        return $fetch(url, fetchConfig).then(async (response) => {
-            console.log(`response:`, response)
-            return response;
-        }).finally(() => {
-            loading.value = false
-        })
+        return $fetch(url, fetchConfig);
     }
     return {
-        loading,
         fetchRequest
     }
 }
diff --git a/pages/index.vue b/pages/index.vue
index 2ae0f07..fb4290d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -24,10 +24,25 @@
     </div>
 </template>
 <script setup>
+const { fetchRequest } = useFetchRequest()
 const query = ref('')
 const selectedRepo = ref('https://github.com/keycloak/keycloak.git')
 const repos = ['keycloak', 'ViewUIPlus']
-const handleSearch = () => {
-    navigateTo(`/search/1?query=${query.value}&repo=${selectedRepo.value}`);
+const loading = ref(false);
+const handleSearch = async () => {
+    if (loading.value) return;
+    loading.value = true;
+    const result = await fetchRequest('/v1/chat/completion/create', {
+        method: 'post',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
+    });
+    if (result && result.data) {
+        navigateTo(`/search/${result.data.c_id}?query=${query.value}&repo=${selectedRepo.value}`);
+        nextTick(() => {
+            loading.value = false;
+        })
+    }    
 }
 </script>
diff --git a/pages/search/[id].vue b/pages/search/[id].vue
index 61dcd96..4affa35 100644
--- a/pages/search/[id].vue
+++ b/pages/search/[id].vue
@@ -133,9 +133,11 @@
 <script setup>
 const toast = useToast()
 const route = useRoute()
+const { fetchRequest } = useFetchRequest()
 const state = reactive({
     query: route.query.query || '',
-    repo: route.query.repo || ''
+    repo: route.query.repo || '',
+    id: route.params.id
 })
 const isEditTitle = ref(false)
 const titleRef = ref(null)
@@ -170,62 +172,62 @@ const stepColor = (step) => {
 
 const data = ref([])
 
-data.value = [
-    {
-        step: 4,
-        question: 'Select组件怎样远程搜索',
-        article: 'ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：',
-        source: [
-            {
-                repo: 'ViewDesign/ViewUIPlus',
-                label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
-                link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
-            },
-            {
-                repo: 'ViewDesign/ViewUIPlus',
-                label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
-                link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
-            },
-            {
-                repo: 'ViewDesign/ViewUIPlus',
-                label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
-                link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
-            },
-            {
-                repo: 'ViewDesign/ViewUIPlus',
-                label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
-                link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
-            }
-        ]
-    },
-    {
-        step: 1,
-        question: 'Select组件怎样远程搜索',
-        article: 'ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：',
-        source: [
-            {
-                repo: 'ViewDesign/ViewUIPlus',
-                label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
-                link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
-            },
-            {
-                repo: 'ViewDesign/ViewUIPlus',
-                label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
-                link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
-            },
-            {
-                repo: 'ViewDesign/ViewUIPlus',
-                label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
-                link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
-            },
-            {
-                repo: 'ViewDesign/ViewUIPlus',
-                label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
-                link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
-            }
-        ]
-    }
-]
+// data.value = [
+//     {
+//         step: 4,
+//         question: 'Select组件怎样远程搜索',
+//         article: 'ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：',
+//         source: [
+//             {
+//                 repo: 'ViewDesign/ViewUIPlus',
+//                 label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
+//                 link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
+//             },
+//             {
+//                 repo: 'ViewDesign/ViewUIPlus',
+//                 label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
+//                 link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
+//             },
+//             {
+//                 repo: 'ViewDesign/ViewUIPlus',
+//                 label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
+//                 link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
+//             },
+//             {
+//                 repo: 'ViewDesign/ViewUIPlus',
+//                 label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
+//                 link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
+//             }
+//         ]
+//     },
+//     {
+//         step: 1,
+//         question: 'Select组件怎样远程搜索',
+//         article: 'ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：',
+//         source: [
+//             {
+//                 repo: 'ViewDesign/ViewUIPlus',
+//                 label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
+//                 link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
+//             },
+//             {
+//                 repo: 'ViewDesign/ViewUIPlus',
+//                 label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
+//                 link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
+//             },
+//             {
+//                 repo: 'ViewDesign/ViewUIPlus',
+//                 label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
+//                 link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
+//             },
+//             {
+//                 repo: 'ViewDesign/ViewUIPlus',
+//                 label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
+//                 link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
+//             }
+//         ]
+//     }
+// ]
 
 const recommendQuestions = [
     {
@@ -244,4 +246,64 @@ const handleContinueAsk = (question) => {
     if (asking.value) return;
     asking.value = true;
 }
+// 处理generate
+let generateFetchObj = null; // 用户取消操作方法
+const marked = 'data:';
+const handleFormFetchData = (fetchData) => {
+    if (fetchData === 'data:[DONE]') return;
+    fetchData = fetchData.slice(marked.length , fetchData.length);
+    let message = {};
+    try {
+        message = JSON.parse(fetchData);
+    } catch(error) {
+        console.log(error)
+    }
+    if (Object.keys(message).length === 0) return;
+    console.log(`message:`, message)
+    if (message.data.meta.type === 'answer') {
+        // step: 4,
+        // question: 'Select组件怎样远程搜索',
+        // article: 
+        const index = data.value.length === 0 ? 0 : data.value.length - 1;
+        data.value[index] = {
+            step: 4,
+            question: state.query,
+            article: message.data.choices[0].message.content
+        }
+    }
+}
+const getHistoryMessage = () => {
+    const messages = []
+    data.value.forEach(item => {
+        messages.push(...[
+            { role: 'user', content: item.question },
+            { role: 'assistant', content: item.article }
+        ])
+    })
+    return messages;
+}
+const generateFetchData = () => {
+    const { repo, id } = state;
+    const messages = getHistoryMessage();
+    messages.push({ role: 'user', content: state.query });
+    generateFetchObj = fetchRequest('/v1/chat/completions', {
+        method: 'post',
+        headers: {
+            'Accept': '*/*'
+        },
+        body: {
+            repo_path: repo,
+            c_id: id,
+            stream: true,
+            messages
+        }
+    }).then((response) => {
+        handleFormFetchData(response);
+    }).finally(() => {
+        asking.value = false;
+    })
+}
+onMounted(() => {
+    generateFetchData();
+})
 </script>
\ No newline at end of file
diff --git a/server/api/mock/[...slug].js b/server/api/mock/[...slug].js
index 51e2c61..ca5447b 100644
--- a/server/api/mock/[...slug].js
+++ b/server/api/mock/[...slug].js
@@ -3,7 +3,7 @@ import { createRouter, defineEventHandler, useBase } from 'h3'
 const router = createRouter()
 
 router.get('/test', defineEventHandler(() => {
-    return { data: 'Hello World' }
+    return 'data:{"message":"success","data":{"id":"c_20240516095719_bfaJkBJyg4KTwL8g","object":"chat.completion","created":1715824958,"model":"chat_qwen110b","choices":[{"index":0,"message":{"role":"assistant","content":"Hello! I\'m here to help you with any questions or tasks related to the Byzer-LLM project or its usage. Whether you need assistance with deployment, querying models, understanding the integration process, or exploring its features, feel free to ask. For instance, if you\'re looking to set up a model like `sparkdesk_chat`, run a simple inference, validate the model, or even understand how to use Python scripts for interacting with Byzer-LLM, just let me know your specific inquiry!"},"finish_reason":"stop"}],"usage":{"prompt_tokens":6653,"completion_tokens":104,"total_tokens":6757},"meta":{"type":"answer"}}}';
 }))
 
 export default useBase('/api/mock', router.handler)
-- 
GitLab