Update [id].vue

pages/search/[id].vue

@@ -28,32 +28,30 @@
 
             <template v-for="(item, index) in data" :key="index">
                 <h1 class="text-3xl truncate" v-if="index !== 0" :id="index + 1">{{ 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 }">
-                    <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 }">
-                    <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>
+                <UCard :ui="{ body: { padding: 'p-4 sm:p-4' } }">
+                    <UAccordion :items="[{}]">
+                        <template #default="{ open }">
+                            <div class="flex justify-between items-center">
+                                <div class="flex items-center gap-2 text-lg">
+                                    <UIcon name="i-heroicons-sparkles-20-solid" />
+                                    搜索过程
+                                </div>
+                                <UButton
+                                    size="md"
+                                    color="gray"
+                                    variant="ghost"
+                                    :icon="open ? 'i-heroicons-chevron-up-20-solid' : 'i-heroicons-chevron-down-20-solid'"
+                                    :ui="{ rounded: 'rounded-full' }"
+                                />
+                            </div>
                         </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 #item="{ item }">
+                            <div class="text-base">改写问题</div>
+                            <article class="prose prose-sm">内容内容内容</article>
                         </template>
-                </UProgress>
+                    </UAccordion>
+                </UCard>
+
                 <div class="text-xl flex items-center space-x-1">
                     <UIcon name="i-heroicons-chat-bubble-left-right-20-solid" />
                     <span>答案</span>
@@ -163,12 +161,6 @@ const handleReGenerate = (index) => {
 }
 
 const steps = ['', '问题分析', '代码搜索', '整理答案', '完成！']
-const stepColor = (step) => {
-    switch (true) {
-        case step >= steps.length - 1: return 'green'
-        default: return 'blue'
-    }
-}
 
 const data = ref([])