finished refactor chat page UI

web/src/components/ChatReply.vue

@@ -2,38 +2,61 @@
   <div class="chat-line chat-line-reply">
     <div class="chat-line-inner">
       <div class="chat-icon">
-        <img :src="icon" alt="ChatGPT">
+        <img :src="data.icon" alt="ChatGPT">
       </div>
 
       <div class="chat-item">
-        <div class="content" v-html="content"></div>
-        <div class="bar" v-if="createdAt !== ''">
-          <span class="bar-item"><el-icon><Clock/></el-icon> {{ createdAt }}</span>
-          <span class="bar-item">Tokens: {{ tokens }}</span>
+        <div class="content" v-html="data.content"></div>
+        <div class="bar" v-if="data.created_at">
+          <span class="bar-item"><el-icon><Clock/></el-icon> {{ dateFormat(data.created_at) }}</span>
+          <!--          <span class="bar-item">Tokens: {{ tokens }}</span>-->
           <span class="bar-item">
+              <el-tooltip
+                  class="box-item"
+                  effect="dark"
+                  content="复制回答"
+                  placement="bottom"
+              >
+                <el-icon class="copy-reply" :data-clipboard-text="data.orgContent">
+                  <DocumentCopy/>
+                </el-icon>
+              </el-tooltip>
+            </span>
+          <span v-if="!readOnly">
+            <span class="bar-item" @click="reGenerate(data.prompt)">
             <el-tooltip
                 class="box-item"
                 effect="dark"
-                content="复制回答"
+                content="重新生成"
                 placement="bottom"
             >
-              <el-icon class="copy-reply" :data-clipboard-text="orgContent">
-                <DocumentCopy/>
-              </el-icon>
-          </el-tooltip>
+              <el-icon><Refresh/></el-icon>
+            </el-tooltip>
           </span>
-          <span class="bar-item">
-            <el-dropdown trigger="click">
-              <span class="el-dropdown-link">
-                <el-icon><More/></el-icon>
-              </span>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item :icon="Headset" @click="synthesis(orgContent)">生成语音</el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
+
+          <span class="bar-item" @click="synthesis(data.orgContent)">
+            <el-tooltip
+                class="box-item"
+                effect="dark"
+                content="生成语音朗读"
+                placement="bottom"
+            >
+              <i class="iconfont icon-speaker"></i>
+            </el-tooltip>
           </span>
+          </span>
+          <!--          <span class="bar-item">-->
+          <!--            <el-dropdown trigger="click">-->
+          <!--              <span class="el-dropdown-link">-->
+          <!--                <el-icon><More/></el-icon>-->
+          <!--              </span>-->
+          <!--              <template #dropdown>-->
+          <!--                <el-dropdown-menu>-->
+          <!--                  <el-dropdown-item :icon="Headset" @click="synthesis(orgContent)">生成语音</el-dropdown-item>-->
+          <!--                </el-dropdown-menu>-->
+          <!--              </template>-->
+          <!--            </el-dropdown>-->
+          <!--          </span>-->
         </div>
       </div>
     </div>
@@ -41,36 +64,36 @@
 </template>
 
 <script setup>
-import {Clock, DocumentCopy, Headset, More} from "@element-plus/icons-vue";
+import {Clock, DocumentCopy, Refresh} from "@element-plus/icons-vue";
 import {ElMessage} from "element-plus";
+import {dateFormat} from "@/utils/libs";
 // eslint-disable-next-line no-undef,no-unused-vars
 const props = defineProps({
-  content: {
-    type: String,
-    default: '',
+  data: {
+    type: Object,
+    default: {},
   },
-  orgContent: {
-    type: String,
-    default: '',
-  },
-  createdAt: {
-    type: String,
-    default: '',
-  },
-  tokens: {
-    type: Number,
-    default: 0,
-  },
-  icon: {
-    type: String,
-    default: 'images/gpt-icon.png',
+  readOnly: {
+    type: Boolean,
+    default: false
   }
 })
 
+const emits = defineEmits(['regen']);
+
+if (!props.data.icon) {
+  props.data.icon = "images/gpt-icon.png"
+}
+
 const synthesis = (text) => {
   console.log(text)
   ElMessage.info("语音合成功能暂不可用")
 }
+
+// 重新生成
+const reGenerate = (prompt) => {
+  emits('regen', prompt)
+}
 </script>
 
 <style lang="stylus">
@@ -226,6 +249,7 @@ const synthesis = (text) => {
             padding 3px 5px;
             margin-right 10px;
             border-radius 5px;
+            cursor pointer
 
             .el-icon {
               position relative