style: improve LoggingView table layout and styling, add refreshing indicator using LoadingBanner component

src/components/cards/MessageCard.vue

@@ -22,8 +22,7 @@ async function imageLoaded() {
 
 // 链接打开新窗口
 function openLink() {
-  if (props.message?.link)
-    window.open(props.message.link, '_blank')
+  if (props.message?.link) window.open(props.message.link, '_blank')
 }
 
 // 将note转换为json
@@ -31,8 +30,7 @@ function noteToJson() {
   if (props.message?.note) {
     try {
       return JSON.parse(props.message.note)
-    }
-    catch (error) {
+    } catch (error) {
       console.error(error)
     }
   }
@@ -41,23 +39,14 @@ function noteToJson() {
 
 // 将\n转换为html属性的换行符
 function replaceNewLine(value: string) {
-  if (!value)
-    return ''
+  if (!value) return ''
   return value.replace(/\n/g, '<br/>')
 }
 </script>
 
 <template>
-  <VCard
-    :width="props.width"
-    :height="props.height"
-    variant="tonal"
-    @click="openLink"
-  >
-    <div
-      v-if="props.message?.image"
-      class="relative text-center card-cover-blurred"
-    >
+  <div :width="props.width" :height="props.height" @click="openLink">
+    <div v-if="props.message?.image" class="relative text-center card-cover-blurred">
       <VImg
         :src="props.message?.image"
         aspect-ratio="4/3"
@@ -70,25 +59,16 @@ function replaceNewLine(value: string) {
     <VCardTitle v-if="props.message?.title" class="whitespace-break-spaces">
       {{ props.message?.title }}
     </VCardTitle>
-    <VAlert
+    <div
       v-if="props.message?.text && props.message?.action === 0"
-      variant="tonal"
-      type="success"
+      class="rounded-md text-body-1 py-2 px-4 elevation-2 bg-primary text-white chat-right mb-1"
     >
-      <template #prepend />
-      {{ props.message?.text }}
-    </VAlert>
-    <VCardText
-      v-if="props.message?.text && props.message?.action === 1"
-      v-html="replaceNewLine(props.message?.text)"
-    />
+      <p class="mb-0">{{ props.message?.text }}</p>
+    </div>
+    <VCardText v-if="props.message?.text && props.message?.action === 1" v-html="replaceNewLine(props.message?.text)" />
     <VCardText v-if="props.message?.note">
       <VList>
-        <VListItem
-          v-for="(value, key) in noteToJson()"
-          :key="key"
-          two-line
-        >
+        <VListItem v-for="(value, key) in noteToJson()" :key="key" two-line>
           <VListItemTitle v-if="value.title_year" class="font-bold">
             {{ key + 1 }}. {{ value.title_year }}
           </VListItemTitle>
@@ -104,9 +84,11 @@ function replaceNewLine(value: string) {
         </VListItem>
       </VList>
     </VCardText>
-    <div class="text-end">
-      <span v-if="props.message?.action === 0" class="text-sm italic me-2">{{ props.message?.userid }}</span>
-      <span class="text-sm italic me-2">{{ formatDateDifference(props.message?.reg_time || props.message?.date || '') }}</span>
-    </div>
-  </VCard>
+  </div>
+  <div class="text-end">
+    <span v-if="props.message?.action === 0" class="text-sm italic me-2">{{ props.message?.userid }}</span>
+    <span class="text-sm italic me-2">{{
+      formatDateDifference(props.message?.reg_time || props.message?.date || '')
+    }}</span>
+  </div>
 </template>

src/layouts/components/ShortcutBar.vue

@@ -206,6 +206,7 @@ onMounted(() => {
   <VDialog v-if="netTestDialog" v-model="netTestDialog" max-width="35rem" max-height="85vh" scrollable>
     <VCard title="网络测试">
       <DialogCloseBtn @click="netTestDialog = false" />
+      <VDivider />
       <VCardText>
         <NetTestView />
       </VCardText>
@@ -234,6 +235,7 @@ onMounted(() => {
           </a>
         </VCardTitle>
       </VCardItem>
+      <VDivider />
       <VCardText>
         <LoggingView />
       </VCardText>
@@ -252,6 +254,7 @@ onMounted(() => {
   <VDialog v-if="systemTestDialog" v-model="systemTestDialog" max-width="35rem" max-height="85vh" scrollable>
     <VCard title="系统健康检查">
       <DialogCloseBtn @click="systemTestDialog = false" />
+      <VDivider />
       <VCardText>
         <ModuleTestView />
       </VCardText>
@@ -267,23 +270,20 @@ onMounted(() => {
   >
     <VCard title="消息中心">
       <DialogCloseBtn @click="messageDialog = false" />
+      <VDivider />
       <VCardText ref="chatContainer">
         <MessageView @scroll="scrollMessageToEnd" />
       </VCardText>
-
       <VCardItem>
         <VTextField
           v-model="user_message"
+          variant="solo"
           placeholder="输入消息或命令"
-          outlined
-          hide-details
-          single-line
           clearable
-          density="compact"
           :disabled="sendButtonDisabled"
           @keydown.enter="sendMessage"
         >
-          <template #append>
+          <template #append-inner>
             <VBtn color="primary" :disabled="sendButtonDisabled" @click="sendMessage"> 发送 </VBtn>
           </template>
         </VTextField>

src/views/system/LoggingView.vue

@@ -82,7 +82,14 @@ onBeforeUnmount(() => {
   <div v-else>
     <VTable class="table-rounded" hide-default-footer disable-sort>
       <tbody>
-        <VDataTableVirtual :headers="headers" :items="extractLogDetails" height="100%" density="compact" hover>
+        <VDataTableVirtual
+          :headers="headers"
+          :items="extractLogDetails"
+          height="100%"
+          density="compact"
+          hover
+          hide-default-header
+        >
           <template #item.level="{ item }">
             <VChip size="small" :color="getLogColor(item.level)" variant="elevated" v-text="item.level" />
           </template>

src/views/system/MessageView.vue

@@ -31,16 +31,13 @@ let eventSource: EventSource | null = null
 function startSSEMessager() {
   const token = store.state.auth.token
   if (token) {
-    eventSource = new EventSource(
-      `${import.meta.env.VITE_API_BASE_URL}system/message?token=${token}&role=user`,
-    )
+    eventSource = new EventSource(`${import.meta.env.VITE_API_BASE_URL}system/message?token=${token}&role=user`)
 
-    eventSource.addEventListener('message', (event) => {
+    eventSource.addEventListener('message', event => {
       const message = event.data
       if (message) {
         const object = JSON.parse(message)
-        if (compareTime(object.date, lastTime.value) <= 0)
-          return
+        if (compareTime(object.date, lastTime.value) <= 0) return
         messages.value.push(object)
         emit('scroll')
       }
@@ -79,8 +76,7 @@ async function loadMessages({ done }: { done: any }) {
       page.value++
       // 完成
       done('ok')
-    }
-    else {
+    } else {
       // 没有新数据
       done('empty')
     }
@@ -88,24 +84,20 @@ async function loadMessages({ done }: { done: any }) {
     loading.value = false
     // 监听SSE消息
     startSSEMessager()
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error)
   }
 }
 
 // 比较yyyy-MM-dd HH:mm:ss时间大小
 function compareTime(time1: string, time2: string) {
-  if (!time1)
-    return -1
-  if (!time2)
-    return 1
+  if (!time1) return -1
+  if (!time2) return 1
   return new Date(time1.replaceAll(/-/g, '/')).getTime() - new Date(time2.replaceAll(/-/g, '/')).getTime()
 }
 
 onBeforeUnmount(() => {
-  if (eventSource)
-    eventSource.close()
+  if (eventSource) eventSource.close()
 })
 </script>
 
@@ -121,35 +113,18 @@ onBeforeUnmount(() => {
     <template #loading>
       <LoadingBanner />
     </template>
-    <template #empty>
-      没有更多数据
-    </template>
+    <template #empty> 没有更多数据 </template>
     <div>
-      <VRow
+      <div
         v-for="(msg, index) in messages"
         :key="index"
-        :class="{
-          'justify-end': msg.action === 0,
-          'justify-start': msg.action === 1,
-        }"
+        class="chat-group d-flex mb-8"
+        :class="msg.action == 1 ? 'flex-row align-start' : 'flex-row-reverse align-end'"
       >
-        <VCol
-          cols="10"
-          lg="6"
-          xl="4"
-          style="position: relative;"
-        >
-          <MessageCard
-            :message="msg"
-          />
-        </VCol>
-      </VRow>
-    </div>
-    <div
-      v-if="messages.length === 0 && isLoaded && !loading"
-      class="w-full text-center flex flex-col items-center"
-    >
-      <span class="mb-3">当前没有消息</span>
+        <div class="d-inline-flex flex-column" :class="msg.action == 1 ? 'align-start' : 'align-end'">
+          <MessageCard :message="msg" />
+        </div>
+      </div>
     </div>
   </VInfiniteScroll>
 </template>