adjust chat records layout styles

web/src/components/ChatPrompt.vue

@@ -70,7 +70,7 @@
         </div>
         <div class="bar" v-if="data.created_at > 0">
           <span class="bar-item"><el-icon><Clock/></el-icon> {{ dateFormat(data.created_at) }}</span>
-          <span class="bar-item">tokens: {{ finalTokens }}</span>
+<!--          <span class="bar-item">tokens: {{ finalTokens }}</span>-->
         </div>
       </div>
     </div>
@@ -132,12 +132,12 @@ const content =ref(processPrompt(props.data.content))
 const files = ref([])
 
 onMounted(() => {
-  if (!finalTokens.value) {
-    httpPost("/api/chat/tokens", {text: props.data.content, model: props.data.model}).then(res => {
-      finalTokens.value = res.data;
-    }).catch(() => {
-    })
-  }
+  // if (!finalTokens.value) {
+  //   httpPost("/api/chat/tokens", {text: props.data.content, model: props.data.model}).then(res => {
+  //     finalTokens.value = res.data;
+  //   }).catch(() => {
+  //   })
+  // }
 
   const linkRegex = /(https?:\/\/\S+)/g;
   const links = props.data.content.match(linkRegex);
@@ -308,9 +308,10 @@ const isExternalImg = (link, files) => {
       display flex;
       width 100%;
       padding 0 25px;
+      flex-flow row-reverse
 
       .chat-icon {
-        margin-right 20px;
+        margin-left 20px;
 
         img {
           width: 36px;
@@ -377,6 +378,7 @@ const isExternalImg = (link, files) => {
 
         .content-wrapper {
           display flex
+          flex-flow row-reverse
           .content {
               word-break break-word;
               padding: 1rem
@@ -384,7 +386,7 @@ const isExternalImg = (link, files) => {
               font-size: var(--content-font-size);
               overflow: auto;
               background-color #98e165
-              border-radius: 0 10px 10px 10px;
+              border-radius: 10px 0 10px 10px;
 
               img {
                 max-width: 600px;

web/src/components/ChatReply.vue

@@ -67,14 +67,13 @@
       <div class="chat-icon">
         <img :src="data.icon" alt="ChatGPT">
       </div>
-
       <div class="chat-item">
         <div class="content-wrapper">
           <div class="content" v-html="data.content"></div>
         </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: {{ data.tokens }}</span>
+<!--          <span class="bar-item">tokens: {{ data.tokens }}</span>-->
           <span class="bar-item bg">
               <el-tooltip
                   class="box-item"
@@ -178,7 +177,7 @@ const reGenerate = (prompt) => {
       padding-left 10px;
 
       .chat-icon {
-        margin-right 20px;
+        margin-left 20px;
 
         img {
           width: 36px;
@@ -348,10 +347,10 @@ const reGenerate = (prompt) => {
       display flex;
       padding 0 25px;
       width 100%
-      flex-flow row-reverse
+      flex-flow row
 
       .chat-icon {
-        margin-left 20px;
+        margin-right 20px;
 
         img {
           width: 36px;
@@ -378,7 +377,7 @@ const reGenerate = (prompt) => {
             font-size: var(--content-font-size);
             overflow auto;
             background-color #F5F5F5
-            border-radius: 10px 0 10px 10px;
+            border-radius: 0 10px 10px 10px;
 
             img {
               max-width: 600px;

web/src/components/MusicPlayer.vue

@@ -9,7 +9,7 @@
        <div class="style">
          <span class="tags">{{ tags }}</span>
          <span class="text-lightGray"> | </span>
-         <span class="time">{{ formatTime(currentTime) }} /{{ formatTime(duration) }}</span>
+         <span class="time">{{ formatTime(currentTime) }}<span class="split">/</span>{{ formatTime(duration) }}</span>
        </div>
      </div>
 
@@ -42,6 +42,7 @@
 import {ref, onMounted, watch} from 'vue';
 import {showMessageError} from "@/utils/dialog";
 import {Close} from "@element-plus/icons-vue";
+import {formatTime} from "@/utils/libs";
 
 const audio = ref(null);
 const isPlaying = ref(false);
@@ -121,12 +122,6 @@ const updateProgress = () => {
   }
 };
 
-const formatTime = (time) => {
-  const minutes = Math.floor(time / 60);
-  const seconds = Math.floor(time % 60);
-  return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
-};
-
 const setProgress = (event) => {
   const totalWidth = progressBarRef.value.offsetWidth;
   const clickX = event.offsetX;
@@ -172,7 +167,7 @@ onMounted(() => {
 
     .info {
       padding 0 10px
-      width 300px
+      min-width  300px
       display flex
       justify-content center
       align-items flex-start
@@ -186,8 +181,14 @@ onMounted(() => {
 
       .style {
         font-size 14px
+        display flex
+        color #e1e1e1
         .tags {
           font-weight 600
+          white-space: nowrap; /* 防止文本换行 */
+          overflow: hidden;    /* 隐藏溢出的文本 */
+          text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
+          max-width 200px
         }
         .text-lightGray {
           color: rgb(114 110 108);
@@ -196,6 +197,12 @@ onMounted(() => {
         .time {
           font-family 'Input Sans'
           font-weight 700
+          .split {
+            font-size 12px
+            position relative
+            top -2px
+            margin 0 1px 0 3px
+          }
         }
       }
     }

web/src/components/ui/Generating.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="container">
+    <div class="wave">
+      <div class="bar"></div>
+      <div class="bar"></div>
+      <div class="bar"></div>
+      <div class="bar"></div>
+      <div class="bar"></div>
+      <div class="bar"></div>
+      <div class="bar"></div>
+      <div class="bar"></div>
+      <div class="bar"></div>
+      <div class="bar"></div>
+    </div>
+    <div class="text">正在生成歌曲</div>
+  </div>
+</template>
+
+<style scoped lang="stylus">
+.container {
+  display: flex;
+  flex-flow column
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  font-family: 'Arial', sans-serif;
+  color: #e1e1e1;
+
+  .wave {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    height: 30px;
+    margin-bottom: 5px
+
+    .bar {
+      width: 8px;
+      margin: 0 2px;
+      background-color: #919191;
+      animation: wave 1.5s infinite;
+    }
+
+    .bar:nth-child(1) {
+      animation-delay: 0s;
+    }
+
+    .bar:nth-child(2) {
+      animation-delay: 0.1s;
+    }
+
+    .bar:nth-child(3) {
+      animation-delay: 0.2s;
+    }
+
+    .bar:nth-child(4) {
+      animation-delay: 0.3s;
+    }
+
+    .bar:nth-child(5) {
+      animation-delay: 0.4s;
+    }
+
+    .bar:nth-child(6) {
+      animation-delay: 0.5s;
+    }
+
+    .bar:nth-child(7) {
+      animation-delay: 0.6s;
+    }
+
+    .bar:nth-child(8) {
+      animation-delay: 0.7s;
+    }
+
+    .bar:nth-child(9) {
+      animation-delay: 0.8s;
+    }
+
+    .bar:nth-child(10) {
+      animation-delay: 0.9s;
+    }
+  }
+}
+
+@keyframes wave {
+  0%, 100% {
+    height:   10px;
+  }
+  50% {
+    height: 30px;
+  }
+}
+
+.text {
+  font-size: 14px;
+}
+</style>