feat: 重构移动端用户聊天页面

ai_knowledge_base_v2/apps/user-client/src/components/ChatComposer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { Send, Square } from "@lucide/vue";
+import { nextTick, ref } from "vue";
 
 defineProps<{
   loading: boolean;
@@ -7,21 +8,34 @@ defineProps<{
 }>();
 
 const emit = defineEmits<{
-  send: [message: string];
+  send: [message: string, complete: (success: boolean) => void];
   stop: [];
 }>();
 
 const input = ref("");
+const textarea = ref<HTMLTextAreaElement | null>(null);
+
+function resize() {
+  const element = textarea.value;
+  if (!element) return;
+  element.style.height = "auto";
+  element.style.height = `${Math.min(element.scrollHeight, 108)}px`;
+  element.style.overflowY = element.scrollHeight > 108 ? "auto" : "hidden";
+}
 
 function send() {
   const text = input.value.trim();
   if (!text) return;
-  emit("send", text);
-  input.value = "";
+  emit("send", text, async (success) => {
+    if (!success) return;
+    input.value = "";
+    await nextTick();
+    resize();
+  });
 }
 
 function onKeydown(event: KeyboardEvent) {
-  if (event.key === "Enter" && !event.shiftKey) {
+  if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
     event.preventDefault();
     send();
   }
@@ -29,15 +43,24 @@ function onKeydown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <form class="composer" @submit.prevent="send">
+  <form class="chat-composer" @submit.prevent="send">
     <textarea
+      ref="textarea"
       v-model="input"
       rows="1"
       placeholder="请输入你的问题"
+      aria-label="请输入你的问题"
       :disabled="disabled"
+      @input="resize"
       @keydown="onKeydown"
     />
-    <button v-if="loading" type="button" class="stop-btn" @click="emit('stop')">停止</button>
-    <button v-else type="submit" class="send-btn" :disabled="disabled || !input.trim()">发送</button>
+    <button v-if="loading" type="button" class="composer-stop" aria-label="停止生成" @click="emit('stop')">
+      <Square :size="17" fill="currentColor" aria-hidden="true" />
+      <span>停止</span>
+    </button>
+    <button v-else type="submit" class="composer-send" :disabled="disabled || !input.trim()">
+      <Send :size="18" aria-hidden="true" />
+      <span>发送</span>
+    </button>
   </form>
 </template>

ai_knowledge_base_v2/apps/user-client/src/components/ChatHeader.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Menu } from "@lucide/vue";
+
+import type { UserProfile } from "../types/api";
+
+defineProps<{
+  user: UserProfile;
+  statusText: string;
+}>();
+
+defineEmits<{
+  openHistory: [];
+  logout: [];
+}>();
+</script>
+
+<template>
+  <header class="chat-header">
+    <button type="button" class="header-menu-button" aria-label="打开历史会话" @click="$emit('openHistory')">
+      <Menu :size="21" aria-hidden="true" />
+    </button>
+
+    <div class="assistant-summary">
+      <h1>大本营答疑助手</h1>
+      <p>{{ statusText }}</p>
+    </div>
+
+    <div class="user-summary">
+      <span v-if="user.nickname">昵称：{{ user.nickname }}</span>
+      <span>用户名：{{ user.name }}</span>
+    </div>
+
+    <button type="button" class="header-logout-button" @click="$emit('logout')">退出</button>
+  </header>
+</template>

ai_knowledge_base_v2/apps/user-client/src/components/ChatMessage.vue

@@ -1,72 +1,55 @@
 <script setup lang="ts">
+import { Bot } from "@lucide/vue";
 import MarkdownIt from "markdown-it";
 import { computed } from "vue";
 
 const props = defineProps<{
+  messageId: string;
   role: "user" | "assistant";
   content: string;
+  createdAt: string;
   streaming?: boolean;
 }>();
 
-const markdown = new MarkdownIt({
-  breaks: true,
-  html: false,
-  linkify: true,
-});
+const markdown = new MarkdownIt({ breaks: true, html: false, linkify: true });
 
-const assistantParts = computed(() => {
-  if (props.role === "user") {
-    return { reasoning: "", answer: props.content };
-  }
-
-  const content = props.content;
-  let reasoning = "";
-  let answer = content;
-
-  // 匹配所有完整的 <think>...</think>（全局匹配，支持多个）
-  const thinkRegex = /<think>([\s\S]*?)<\/think>/gi;
-  const matches = Array.from(answer.matchAll(thinkRegex));
-
-  if (matches.length > 0) {
-    reasoning = matches.map((m) => m[1].trim()).join("\n\n");
-    answer = answer.replace(thinkRegex, "").trim();
-  }
-
-  // 处理未闭合的 <think>（流式输出时可能还没收到 </think>）
-  const openThink = answer.match(/<think>([\s\S]*)$/i);
-  if (openThink) {
-    reasoning += (reasoning ? "\n\n" : "") + openThink[1].trim();
-    answer = answer.slice(0, openThink.index).trim();
-  }
-
-  // 兜底：如果 answer 为空但 reasoning 有内容，说明模型可能把全部内容放在 think 里了
-  // 此时把 reasoning 当 answer 显示，不显示 thinking 面板
-  if (!answer && reasoning) {
-    answer = reasoning;
-    reasoning = "";
-  }
-
-  return { reasoning, answer };
-});
-
-const renderedContent = computed(() => {
+const answer = computed(() => {
   if (props.role === "user") return props.content;
-  return markdown.render(assistantParts.value.answer || "");
+  // 部分模型会产生嵌套 think 标签，使用贪婪匹配移除完整思考区，再清理流式残留标签。
+  let content = props.content.replace(/<think>[\s\S]*<\/think>/gi, "");
+  content = content.replace(/<think>[\s\S]*$/i, "");
+  content = content.replace(/<\/?think>/gi, "");
+  return content.trim();
+});
+
+const renderedContent = computed(() =>
+  props.role === "assistant" ? markdown.render(answer.value) : answer.value,
+);
+
+const displayTime = computed(() => {
+  // 消息服务返回的是 UTC 无时区字符串，补齐时区后再按用户本地时间展示。
+  const normalized = /(?:Z|[+-]\d{2}:?\d{2})$/i.test(props.createdAt) ? props.createdAt : `${props.createdAt}Z`;
+  const date = new Date(normalized);
+  if (Number.isNaN(date.getTime())) return "";
+  return new Intl.DateTimeFormat("zh-CN", { hour: "2-digit", minute: "2-digit", hour12: false }).format(date);
 });
 </script>
 
 <template>
-  <article class="message" :class="role">
-    <div class="avatar">{{ role === "assistant" ? "答" : "我" }}</div>
-    <div class="bubble">
+  <article class="chat-message" :class="role" :data-message-id="messageId">
+    <div v-if="role === 'assistant'" class="assistant-icon" aria-hidden="true">
+      <Bot :size="19" />
+    </div>
+    <div class="message-bubble">
       <template v-if="role === 'assistant'">
-        <div v-if="streaming && assistantParts.reasoning" class="thinking-indicator">
-          <span class="thinking-dots">思考中</span>
+        <div v-if="renderedContent" class="message-content markdown-content" v-html="renderedContent"></div>
+        <div v-if="streaming && !renderedContent" class="generation-state">
+          <span></span><span></span><span></span>
+          正在生成回答...
         </div>
-        <div class="content markdown-content" v-html="renderedContent"></div>
       </template>
-      <div v-else class="content">{{ renderedContent }}</div>
-      <span v-if="streaming" class="typing">正在生成</span>
+      <div v-else class="message-content">{{ renderedContent }}</div>
+      <time v-if="displayTime" :datetime="createdAt">{{ displayTime }}</time>
     </div>
   </article>
 </template>

ai_knowledge_base_v2/apps/user-client/src/components/MessageList.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { nextTick, ref } from "vue";
+
+import ChatMessage from "./ChatMessage.vue";
+
+export interface DisplayMessage {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  createdAt: string;
+  streaming?: boolean;
+}
+
+defineProps<{
+  messages: DisplayMessage[];
+  loadingSession: boolean;
+}>();
+
+const emit = defineEmits<{
+  followChange: [following: boolean];
+}>();
+
+const scroller = ref<HTMLElement | null>(null);
+
+function onScroll() {
+  const element = scroller.value;
+  if (!element) return;
+  const distance = element.scrollHeight - element.scrollTop - element.clientHeight;
+  emit("followChange", distance < 96);
+}
+
+async function scrollToBottom(behavior: ScrollBehavior = "smooth") {
+  await nextTick();
+  scroller.value?.scrollTo({ top: scroller.value.scrollHeight, behavior });
+}
+
+async function scrollToMessage(messageId: string) {
+  await nextTick();
+  const element = scroller.value?.querySelector<HTMLElement>(`[data-message-id="${messageId}"]`);
+  element?.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+defineExpose({ scrollToBottom, scrollToMessage });
+</script>
+
+<template>
+  <section ref="scroller" class="message-list" aria-live="polite" @scroll.passive="onScroll">
+    <div v-if="loadingSession" class="chat-loading-state">正在加载会话...</div>
+    <div v-else-if="messages.length === 0" class="chat-empty-state">
+      <strong>可以开始提问了</strong>
+      <p>输入问题，我会尽力为你解答。</p>
+    </div>
+    <template v-else>
+      <ChatMessage
+        v-for="message in messages"
+        :key="message.id"
+        :message-id="message.id"
+        :role="message.role"
+        :content="message.content"
+        :created-at="message.createdAt"
+        :streaming="message.streaming"
+      />
+    </template>
+  </section>
+</template>

ai_knowledge_base_v2/apps/user-client/src/components/SessionDrawer.vue

@@ -1,73 +1,136 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { Pencil, Plus, Trash2, X } from "@lucide/vue";
+import { computed, ref, watch } from "vue";
 
 import type { ChatSession } from "../types/api";
+import AppDialog from "./AppDialog.vue";
 
-defineProps<{
+const props = defineProps<{
   open: boolean;
   sessions: ChatSession[];
   activeSessionId: number | null;
+  loading: boolean;
+  operationPending: boolean;
 }>();
 
 const emit = defineEmits<{
   close: [];
   select: [sessionId: number];
   create: [];
-  rename: [sessionId: number, title: string];
-  delete: [sessionId: number];
+  rename: [sessionId: number, title: string, done: (success: boolean) => void];
+  delete: [sessionId: number, done: (success: boolean) => void];
 }>();
 
-const editingId = ref<number | null>(null);
-const editingTitle = ref("");
+const renaming = ref<ChatSession | null>(null);
+const renameTitle = ref("");
+const deleting = ref<ChatSession | null>(null);
 
-function startEdit(session: ChatSession) {
-  editingId.value = session.id;
-  editingTitle.value = session.title;
+watch(() => props.open, (open) => {
+  document.body.classList.toggle("drawer-open", open);
+}, { immediate: true });
+
+const validRename = computed(() => renameTitle.value.trim().length > 0);
+
+function openRename(session: ChatSession) {
+  renaming.value = session;
+  renameTitle.value = session.title;
 }
 
-function submitEdit(sessionId: number) {
-  const title = editingTitle.value.trim();
-  if (title) emit("rename", sessionId, title);
-  editingId.value = null;
-  editingTitle.value = "";
+function submitRename() {
+  if (!renaming.value || !validRename.value || props.operationPending) return;
+  emit("rename", renaming.value.id, renameTitle.value.trim(), (success) => {
+    if (success) renaming.value = null;
+  });
 }
 
-function confirmDelete(session: ChatSession) {
-  const ok = window.confirm(`确定删除会话「${session.title}」吗？`);
-  if (ok) emit("delete", session.id);
+function submitDelete() {
+  if (!deleting.value || props.operationPending) return;
+  emit("delete", deleting.value.id, (success) => {
+    if (success) deleting.value = null;
+  });
+}
+
+function formatTime(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const target = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const days = Math.round((today.getTime() - target.getTime()) / 86_400_000);
+  const time = new Intl.DateTimeFormat("zh-CN", { hour: "2-digit", minute: "2-digit", hour12: false }).format(date);
+  if (days === 0) return time;
+  if (days === 1) return `昨天 ${time}`;
+  return `${String(date.getMonth() + 1).padStart(2, "0")}/${String(date.getDate()).padStart(2, "0")} ${time}`;
 }
 </script>
 
 <template>
-  <div class="drawer-mask" :class="{ show: open }" @click="emit('close')"></div>
-  <aside class="session-drawer" :class="{ open }">
-    <div class="drawer-head">
-      <strong>历史会话</strong>
-      <button type="button" class="icon-btn" @click="emit('close')">×</button>
-    </div>
-    <button type="button" class="new-session-btn" @click="emit('create')">＋ 新聊天</button>
-    <div class="session-list">
-      <div
+  <div class="history-mask" :class="{ visible: open }" @click="emit('close')"></div>
+  <aside class="history-drawer" :class="{ open }" :aria-hidden="!open">
+    <header class="history-header">
+      <h2>历史会话</h2>
+      <button type="button" aria-label="关闭历史会话" @click="emit('close')">
+        <X :size="22" aria-hidden="true" />
+      </button>
+    </header>
+
+    <button type="button" class="new-chat-button" :disabled="operationPending" @click="emit('create')">
+      <Plus :size="20" aria-hidden="true" />
+      新聊天
+    </button>
+
+    <div class="history-list">
+      <div v-if="loading" class="history-state">正在加载历史会话...</div>
+      <div v-else-if="sessions.length === 0" class="history-state">暂无历史会话</div>
+      <article
         v-for="session in sessions"
+        v-else
         :key="session.id"
-        class="session-item"
+        class="history-item"
         :class="{ active: session.id === activeSessionId }"
       >
-        <form v-if="editingId === session.id" class="session-edit" @submit.prevent="submitEdit(session.id)">
-          <input v-model="editingTitle" maxlength="100" @keydown.escape="editingId = null" />
-          <button type="submit">保存</button>
-        </form>
-        <template v-else>
-          <button type="button" class="session-main" @click="emit('select', session.id)">
-            <span>{{ session.title }}</span>
-            <small>{{ session.messageCount }} 条消息</small>
+        <button type="button" class="history-main" @click="emit('select', session.id)">
+          <strong>{{ session.title }}</strong>
+          <time :datetime="session.updatedAt">{{ formatTime(session.updatedAt) }}</time>
+          <span>{{ session.messageCount }} 条消息</span>
+        </button>
+        <div class="history-actions">
+          <button type="button" @click="openRename(session)">
+            <Pencil :size="15" aria-hidden="true" />改名
           </button>
-          <div class="session-actions">
-            <button type="button" @click="startEdit(session)">改名</button>
-            <button type="button" @click="confirmDelete(session)">删除</button>
-          </div>
-        </template>
-      </div>
+          <button type="button" class="danger" @click="deleting = session">
+            <Trash2 :size="15" aria-hidden="true" />删除
+          </button>
+        </div>
+      </article>
     </div>
   </aside>
+
+  <AppDialog v-if="renaming" title="修改会话名称" labelled-by="rename-session-title" @close="renaming = null">
+    <form class="session-dialog-form" @submit.prevent="submitRename">
+      <label for="session-title-input">会话名称</label>
+      <input id="session-title-input" v-model="renameTitle" maxlength="50" autocomplete="off" autofocus />
+      <p>{{ renameTitle.trim().length }}/50</p>
+    </form>
+    <template #footer>
+      <div class="dialog-actions">
+        <button type="button" class="dialog-secondary" :disabled="operationPending" @click="renaming = null">取消</button>
+        <button type="button" class="dialog-primary" :disabled="!validRename || operationPending" @click="submitRename">
+          {{ operationPending ? "保存中..." : "保存" }}
+        </button>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-if="deleting" title="删除会话" labelled-by="delete-session-title" @close="deleting = null">
+    <p class="confirm-copy">确定删除这个会话吗？删除后无法恢复。</p>
+    <template #footer>
+      <div class="dialog-actions">
+        <button type="button" class="dialog-secondary" :disabled="operationPending" @click="deleting = null">取消</button>
+        <button type="button" class="dialog-danger" :disabled="operationPending" @click="submitDelete">
+          {{ operationPending ? "删除中..." : "删除" }}
+        </button>
+      </div>
+    </template>
+  </AppDialog>
 </template>

ai_knowledge_base_v2/apps/user-client/src/components/SessionQuota.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { Layers3 } from "@lucide/vue";
+
+defineProps<{
+  used: number;
+  limit: number;
+}>();
+</script>
+
+<template>
+  <section class="session-quota" :class="{ exhausted: limit > 0 && used >= limit }" aria-label="当前会话额度">
+    <div>
+      <Layers3 :size="18" aria-hidden="true" />
+      <span>当前会话额度</span>
+    </div>
+    <strong>{{ used }}/{{ limit }}</strong>
+  </section>
+</template>