Web优化 2

web/src/views/chat/ChatDetailView.vue

@@ -3,13 +3,7 @@
     <div class="flex h-[calc(100vh-8rem)] -m-6">
       <!-- 左侧会话列表 -->
       <div class="w-72 border-r overflow-y-auto p-2 flex flex-col gap-1">
-        <NButton
-          block
-          class="mb-2"
-          @click="showCreate = true"
-        >
-          + 新建对话
-        </NButton>
+        <NButton block class="mb-2" @click="showCreate = true"> + 新建对话 </NButton>
         <div
           v-for="c in chat.conversations"
           :key="c.id"
@@ -27,10 +21,7 @@
               {{ formatTime(c.updated_at) }}
             </div>
           </div>
-          <NPopconfirm
-            :show-icon="false"
-            @positive-click="chat.deleteConversation(c.id)"
-          >
+          <NPopconfirm :show-icon="false" @positive-click="chat.deleteConversation(c.id)">
             <template #trigger>
               <NButton
                 text
@@ -43,15 +34,10 @@
                 </template>
               </NButton>
             </template>
-            <template #default>
-              删除后无法恢复，确定删除此会话？
-            </template>
+            <template #default> 删除后无法恢复，确定删除此会话？ </template>
           </NPopconfirm>
         </div>
-        <div
-          v-if="chat.conversations.length === 0"
-          class="text-xs text-neutral-400 px-2"
-        >
+        <div v-if="chat.conversations.length === 0" class="text-xs text-neutral-400 px-2">
           暂无对话
         </div>
       </div>
@@ -70,30 +56,19 @@
             <div class="text-sm font-medium truncate flex-1">
               {{ chat.currentConversation.title || '(未命名)' }}
             </div>
-            <NPopconfirm
-              :show-icon="false"
-              @positive-click="deleteCurrentConversation"
-            >
+            <NPopconfirm :show-icon="false" @positive-click="deleteCurrentConversation">
               <template #trigger>
-                <NButton
-                  text
-                  size="small"
-                >
+                <NButton text size="small">
                   <template #icon>
                     <NIcon><TrashOutline /></NIcon>
                   </template>
                   删除
                 </NButton>
               </template>
-              <template #default>
-                删除后无法恢复，确定删除此会话？
-              </template>
+              <template #default> 删除后无法恢复，确定删除此会话？ </template>
             </NPopconfirm>
           </div>
-          <div
-            ref="scrollEl"
-            class="flex-1 overflow-y-auto p-4 space-y-3"
-          >
+          <div ref="scrollEl" class="flex-1 overflow-y-auto p-4 space-y-3">
             <MessageBubble
               v-for="m in chat.messages"
               :key="m.id"
@@ -125,13 +100,7 @@
               >
                 发送
               </NButton>
-              <NButton
-                v-else
-                type="warning"
-                @click="chat.cancelMessage"
-              >
-                中断
-              </NButton>
+              <NButton v-else type="warning" @click="chat.cancelMessage"> 中断 </NButton>
             </div>
           </div>
         </template>
@@ -154,6 +123,7 @@ import { TrashOutline } from '@vicons/ionicons5'
 
 import AppShell from '@/layouts/AppShell.vue'
 import { useChatStore } from '@/stores/chat'
+import { formatDateTime } from '@/utils/date'
 const MessageBubble = defineAsyncComponent(() => import('./components/MessageBubble.vue'))
 import AttachmentUploader from './components/AttachmentUploader.vue'
 const ConversationCreateModal = defineAsyncComponent(() => import('./ConversationCreateModal.vue'))
@@ -271,6 +241,6 @@ async function deleteCurrentConversation() {
 }
 
 function formatTime(iso: string) {
-  return new Date(iso).toLocaleString('zh-CN', { hour12: false })
+  return formatDateTime(iso)
 }
 </script>