add empty message

SchneeHertz · Nov 28, 2023 · 0403514 · 0403514
1 parent da87fc4
commit 0403514
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -16,6 +16,7 @@ declare module 'vue' {
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCheckboxGroup: typeof import('naive-ui')['NCheckboxGroup']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+    NEmpty: typeof import('naive-ui')['NEmpty']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NFormItemGi: typeof import('naive-ui')['NFormItemGi']

diff --git a/src/components/MessageList.vue b/src/components/MessageList.vue
@@ -1,8 +1,9 @@
 <script setup>
 import { onMounted, ref, nextTick } from 'vue'
+import { UserCircle } from '@vicons/fa'
+import { LogoOctocat } from '@vicons/ionicons4'
 import hljs from 'highlight.js'
 import 'highlight.js/styles/github-dark.css'
-import { UserCircle } from '@vicons/fa'
 
 import CopyButtonPlugin from 'highlightjs-copy'
 hljs.addPlugin(new CopyButtonPlugin())
@@ -26,7 +27,11 @@ const renderCodeBlocks = (text) => {
   })
 }
 const escapeHtml = (unsafe) => {
-  return unsafe.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
+  return unsafe.replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#039;')
 }
 
 const scrollToBottom = (id) => {
@@ -63,7 +68,7 @@ onMounted(() => {
       findExist.countToken = arg.countToken
     } else {
       mainStore.messageList.push(arg)
-      mainStore.messageList = _.takeRight(mainStore.messageList, 1000)
+      mainStore.messageList = _.takeRight(mainStore.messageList, 200)
     }
     nextTick(() => {
       scrollToBottom('message-list')
@@ -97,6 +102,13 @@ onMounted(() => {
         <p v-if="message.countToken" class="token-count">Used {{ message.tokenCount }} tokens</p>
       </n-thing>
     </n-card>
+    <n-empty description="喵有记录" v-if="mainStore.messageList.length === 0" size="large" style="margin: 10px 0">
+      <template #icon>
+        <n-icon>
+          <LogoOctocat />
+        </n-icon>
+      </template>
+    </n-empty>
   </n-list>
 </template>