聊天

src/views/chat/answer/index.vue

@@ -3,17 +3,35 @@
     <div class="h-11 w-11">
       <img class="h-full w-full" src="@/assets/images/chat/default-logo.png" />
     </div>
-    <div class="flex flex-1 overflow-hidden">
+    <div class="flex flex-1 flex-col overflow-hidden">
       <template v-if="item.prologue">
         <div
-          class="rounded-lg rounded-tl-none bg-[#EAF1FF] p-2.75 text-[#303133]"
+          class="w-fit rounded-lg rounded-tl-none bg-[#EAF1FF] p-2.75 text-[#303133]"
           style="line-height: 1.5"
           v-html="item.prologue"
         />
         <template v-if="item.prologueQuestions?.length > 0">
-          <template v-if="item.prologueType === 'three'"></template>
+          <template v-if="item.prologueType === 'three'">
+            <div class="mt-2 ml-2.5 flex flex-col gap-2">
+              <template v-for="pq in item.prologueQuestions">
+                <div class="__hover w-fit text-sm text-[var(--czr-main-color)]">
+                  {{ pq }}
+                </div>
+              </template>
+            </div>
+          </template>
+          <template v-else>
+            <div class="mt-2 flex flex-wrap gap-x-6 gap-y-1.5">
+              <template v-for="pq in item.prologueQuestions">
+                <div
+                  class="__hover w-fit rounded-sm bg-[#F6F6F6] px-2.5 py-1 text-sm text-[var(--czr-main-color)]"
+                >
+                  {{ pq }}
+                </div>
+              </template>
+            </div>
+          </template>
         </template>
-        <template v-for="pq in item.prologueQuestions"> </template>
       </template>
       <template v-else-if="item.loading">
         <div class="answer-loading">
@@ -38,8 +56,22 @@
             </template>
           </template>
         </div>
-        <div></div>
-        <div></div>
+        <div
+          class="mt-2 flex items-center gap-2.5 px-2.5 text-[0.63rem] text-[#909399]"
+        >
+          <div v-if="item.time">{{ formatTimeDuration(item.time) }}</div>
+          <div v-if="item.tokens">{{ item.tokens }} Tokens</div>
+          <div class="mx-auto" />
+        </div>
+        <template v-if="item.advise?.length > 0">
+          <div class="mt-2 ml-2.5 flex flex-col gap-2">
+            <template v-for="ad in item.advise">
+              <div class="__hover w-fit text-sm text-[var(--czr-main-color)]">
+                {{ ad }}
+              </div>
+            </template>
+          </div>
+        </template>
       </template>
     </div>
   </div>
@@ -116,6 +148,18 @@ const onCopy = (text) => {
   copy(text)
   ElMessage.success('复制成功！')
 }
+const formatTimeDuration = (timestamp) => {
+  if (timestamp < 1000) {
+    return `${Math.round(timestamp)}timestamp`
+  } else if (timestamp < 60000) {
+    const seconds = timestamp / 1000
+    return `${seconds.toFixed(1)}s` // 一位小数
+  } else {
+    const minutes = Math.floor(timestamp / 60000)
+    const remainingSeconds = Math.floor((timestamp % 60000) / 1000)
+    return `${minutes}m ${remainingSeconds}s`
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -148,10 +192,10 @@ const onCopy = (text) => {
     0%,
     80%,
     100% {
-      transform: translateY(0);
+      transform: translateY(4px);
     }
     40% {
-      transform: translateY(-10px);
+      transform: translateY(-6px);
     }
   }
 }

src/views/chat/index.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="flex h-full w-full flex-col bg-[#ffffff] p-4">
-    <div class="flex flex-1 flex-col gap-4" ref="ref_chatMsg">
+  <div class="flex h-full w-full flex-col overflow-hidden bg-[#ffffff] p-4">
+    <div
+      class="-mr-4 flex flex-1 flex-col gap-4 overflow-y-auto pr-4"
+      ref="ref_chatMsg"
+    >
       <template v-for="(item, index) in state.chats">
         <template v-if="item.type === 'ask'">
           <askCom :item="item" />
@@ -133,6 +136,8 @@ const initChat = () => {
       type: 'answer',
       text: '现在是5025年88月99日 77:55:44，星期九。',
       advise: [],
+      time: 1000 * 2.7,
+      tokens: 22,
     },
     {
       type: 'answer',
@@ -148,6 +153,8 @@ const initChat = () => {
       type: 'answer',
       text: '还有一些问题建议',
       advise: ['这个时间牛*不', '再问我一个时间吧'],
+      time: 1000 * 457,
+      tokens: 22222222,
     },
   ]
   initHistory()

src/views/manage/app/make/index.vue

@@ -466,7 +466,7 @@
               <SvgIcon class="__hover ml-auto" name="refresh" :active="true" />
             </el-tooltip>
           </div>
-          <div class="flex-1">
+          <div class="flex-1 overflow-hidden">
             <chat />
           </div>
         </div>