finished refactor chat page UI

web/src/components/ChatPrompt.vue

@@ -7,9 +7,9 @@
 
       <div class="chat-item">
         <div class="content" v-html="content"></div>
-        <div class="bar" v-if="createdAt !== ''">
+        <div class="bar" v-if="createdAt">
           <span class="bar-item"><el-icon><Clock/></el-icon> {{ createdAt }}</span>
-          <span class="bar-item">Tokens: {{ finalTokens }}</span>
+          <!--          <span class="bar-item">Tokens: {{ finalTokens }}</span>-->
         </div>
       </div>
     </div>

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

web/src/components/FileSelect.vue

@@ -1,13 +1,8 @@
 <template>
   <el-container class="file-list-box">
-    <el-tooltip class="box-item" effect="dark" content="打开文件管理中心">
-      <el-button class="file-upload-img" @click="fetchFiles">
-        <el-icon>
-          <PictureFilled/>
-        </el-icon>
-      </el-button>
-    </el-tooltip>
-
+    <a class="file-upload-img" @click="fetchFiles">
+      <i class="iconfont icon-attachment-st"></i>
+    </a>
     <el-dialog
         v-model="show"
         :close-on-click-modal="true"
@@ -58,7 +53,7 @@
 import {ref} from "vue";
 import {ElMessage} from "element-plus";
 import {httpGet, httpPost} from "@/utils/http";
-import {Delete, PictureFilled, Plus} from "@element-plus/icons-vue";
+import {Delete, Plus} from "@element-plus/icons-vue";
 import {isImage, removeArrayItem} from "@/utils/libs";
 
 const props = defineProps({
@@ -132,11 +127,9 @@ const insertURL = (url) => {
 
 .file-list-box {
   .file-upload-img {
-    padding: 8px 5px;
-    border-radius: 6px;
-    background: #19c37d;
-    color: #fff;
-    font-size: 20px;
+    .iconfont {
+      font-size: 24px;
+    }
   }
 
   .el-dialog {

web/src/components/LoginDialog.vue

@@ -221,7 +221,7 @@
 </template>
 
 <script setup>
-import {computed, ref} from "vue"
+import {ref, watch} from "vue"
 import {httpGet, httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {setUserToken} from "@/store/session";
@@ -234,8 +234,9 @@ import {arrayContains} from "@/utils/libs";
 const props = defineProps({
   show: Boolean,
 });
-const showDialog = computed(() => {
-  return props.show
+const showDialog = ref(false)
+watch(() => props.show, (newValue) => {
+  showDialog.value = newValue
 })
 
 const login = ref(true)