From 63903a99d1e6690ec577fbb5fd9e353b071cafbc Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Tue, 14 May 2024 19:15:40 +0800
Subject: [PATCH] add

---
 layouts/default.vue   |   4 +-
 pages/index.vue       |   2 +-
 pages/search/[id].vue | 187 ++++++++++++++++++++++++++++++++----------
 3 files changed, 145 insertions(+), 48 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 6657aa6..548b4fe 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex h-screen">
+    <div class="flex min-h-screen">
         <div class="fixed top-0 bg-gray-100 dark:bg-gray-800 w-64 flex flex-col min-h-screen">
             <div class="flex-grow">
                 <h1>GitBot</h1>
@@ -14,7 +14,7 @@
                 />
             </div>
         </div>
-        <div class="ml-64 flex-grow bg-white dark:bg-gray-900 flex-grow p-6">
+        <div class="ml-64 bg-white dark:bg-gray-900 flex flex-grow p-6">
             <slot />
         </div>
     </div>
diff --git a/pages/index.vue b/pages/index.vue
index 983d277..af7d9fc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex items-center justify-center h-full max-w-full">
+    <div class="flex items-center justify-center h-full w-full">
         <div class="max-w-screen-sm w-full flex flex-col space-y-4">
             <UTextarea
                 v-model="query"
diff --git a/pages/search/[id].vue b/pages/search/[id].vue
index 78f5faf..4596515 100644
--- a/pages/search/[id].vue
+++ b/pages/search/[id].vue
@@ -1,73 +1,96 @@
 <template>
-    <div class="flex h-full justify-center max-w-full">
-        <div class="max-w-screen-lg w-full flex flex-col space-y-4">
-            <h1 class="whitespace-pre-line break-words [word-break:break-word] default font-display text-3xl font-regular text-textMain dark:text-textMainDark selection:bg-super/50 selection:text-textMain dark:selection:bg-superDuper/10 dark:selection:text-superDark"
-            >{{ state.query }}</h1>
+    <div class="flex justify-center w-full">
+        <div class="max-w-screen-lg flex flex-col space-y-4 mb-4">
+            <h1 class="text-3xl truncate">{{ state.query }}</h1>
             <section>{{ state.repo }}</section>
-            <UProgress :value="currentStep" :max="steps" :color="stepColor" indicator>
-                <template #step-1="{ step }">
+
+            <template v-for="(item, index) in data" :key="index">
+                <h1 class="text-3xl truncate" v-if="index !== 0">{{ item.question }}</h1>
+                <UProgress :value="item.step" :max="steps" :color="stepColor(item.step)" indicator>
+                    <template #step-1="{ step }">
                     <span class="text-blue-500 items-center justify-end flex space-x-1">
                         <UIcon name="i-heroicons-document-chart-bar-20-solid" class="text-base" />
                         <span>{{ step }}</span>
                     </span>
-                </template>
-                <template #step-2="{ step }">
+                    </template>
+                    <template #step-2="{ step }">
                     <span class="text-blue-500 items-center justify-end flex space-x-1">
                         <UIcon name="i-heroicons-code-bracket-square-20-solid" class="text-base" />
                         <span>{{ step }}</span>
                     </span>
-                </template>
-                <template #step-3="{ step }">
+                    </template>
+                    <template #step-3="{ step }">
                     <span class="text-blue-500 items-center justify-end flex space-x-1">
                         <UIcon name="i-heroicons-document-20-solid" class="text-base" />
                         <span>{{ step }}</span>
                     </span>
-                </template>
-                <template #step-4="{ step }">
+                    </template>
+                    <template #step-4="{ step }">
                     <span class="text-green-500 items-center justify-end flex space-x-1">
                         <UIcon name="i-heroicons-document-check-20-solid" class="text-base" />
                         <span>{{ step }}</span>
                     </span>
-                </template>
-            </UProgress>
-            <div class="text-xl flex items-center space-x-1">
-                <UIcon name="i-heroicons-chat-bubble-left-right-20-solid" />
-                <span>回答中...</span>
-            </div>
-            <article>
-                {{article}}
-            </article>
-            <div class="text-xl flex items-center space-x-1">
-                <UIcon name="i-heroicons-link-20-solid" />
-                <span>来源...</span>
-            </div>
-            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
-                <ULink v-for="(item, index) in 4" to="http://github.com/view-design/ViewUIPlus" target="_blank">
-                    <UCard :ui="{ body: { padding: 'sm:p-3 p-3' } }">
-                        <div class="flex flex-col space-y-1">
-                            <div class="justify-between flex space-x-1">
-                                <span class="truncate">ViewDesign/ViewUIPlus</span>
-                                <span class="text-gray-200">{{ index + 1 }}</span>
+                    </template>
+                </UProgress>
+                <div class="text-xl flex items-center space-x-1">
+                    <UIcon name="i-heroicons-chat-bubble-left-right-20-solid" />
+                    <span>答案</span>
+                </div>
+                <article>
+                    {{ item.article }}
+                </article>
+                <div class="text-xl flex items-center space-x-1">
+                    <UIcon name="i-heroicons-link-20-solid" />
+                    <span>来源</span>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                    <ULink v-for="(source, sourceIndex) in item.source" :to="source.link" target="_blank">
+                        <UCard :ui="{ body: { padding: 'sm:p-3 p-3' } }">
+                            <div class="flex flex-col space-y-1">
+                                <div class="justify-between flex space-x-1">
+                                    <span class="truncate">{{ source.repo }}</span>
+                                    <span class="text-gray-200">{{ sourceIndex + 1 }}</span>
+                                </div>
+                                <div class="text-blue-500 truncate">{{ source.label }}</div>
                             </div>
-                            <div class="text-blue-500 truncate">view-design/ViewUIPlus/tree/master/src/select/index.vue</div>
-                        </div>
-                    </UCard>
-                </ULink>
-            </div>
+                        </UCard>
+                    </ULink>
+                </div>
+                <UDivider v-if="index !== data.length - 1" class="pt-2 pb-2" />
+            </template>
+
             <div class="text-xl flex items-center space-x-1">
                 <UIcon name="i-heroicons-rectangle-group-20-solid" />
-                <span>相关问题...</span>
+                <span>相关问题</span>
             </div>
             <UButton
-                v-for="item in 3"
+                v-for="item in recommendQuestions"
                 color="gray"
                 size="md"
+                @click="handleContinueAsk(item.title)"
             >
                 <div class="justify-between w-full flex items-center">
-                    <div class="truncate">ViewUIPlus Select 组件如何按需加载</div>
+                    <div class="truncate">{{ item.title }}</div>
                     <UIcon name="i-heroicons-plus-20-solid" class="text-base" />
                 </div>
             </UButton>
+
+            <div class="sticky bottom-4 flex">
+                <div class="justify-between flex w-full space-x-2">
+                    <UInput
+                        class="w-full"
+                        v-model="continueQuestion"
+                        placeholder="提出后续问题"
+                        size="xl"
+                    />
+                    <UButton
+                        size="xl"
+                        square
+                        trailing-icon="i-heroicons-chevron-right-20-solid"
+                        :disabled="!continueQuestion"
+                    />
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -77,13 +100,87 @@ const state = reactive({
     query: route.query.query || '',
     repo: route.query.repo || ''
 })
-const currentStep = ref(1)
+
 const steps = ['', '问题分析', '代码搜索', '整理答案', '完成！']
-const stepColor = computed(() => {
+const stepColor = (step) => {
     switch (true) {
-        case currentStep.value >= steps.length - 1: return 'green'
+        case step.value >= steps.length - 1: return 'green'
         default: return 'blue'
     }
-})
-const article = ref('ViewUIPlus 的 Table 组件是一个功能强大的组件，支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性：\n引入Table组件：首先，你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如：')
+}
+
+const data = ref([])
+
+data.value = [
+    {
+        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'
+            }
+        ]
+    },
+    {
+        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 = [
+    {
+        title: 'ViewUIPlus Select 组件如何按需加载'
+    },
+    {
+        title: 'ViewUIPlus Select 组件如何按需加载'
+    },
+    {
+        title: 'ViewUIPlus Select 组件如何按需加载'
+    }
+]
+const continueQuestion = ref(null)
+const handleContinueAsk = (question) => {
+
+}
 </script>
\ No newline at end of file
-- 
GitLab