feat: 重构移动端用户聊天页面
This commit is contained in:
@@ -1,29 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, ref } from "vue";
|
||||
import ChatComposer from "./components/ChatComposer.vue";
|
||||
import ChatMessage from "./components/ChatMessage.vue";
|
||||
import LoginPanel from "./components/LoginPanel.vue";
|
||||
import SessionDrawer from "./components/SessionDrawer.vue";
|
||||
import { api, clearToken, getToken, streamChat } from "./services/api";
|
||||
import type { ChatMessage as ApiMessage, ChatSession, UserProfile } from "./types/api";
|
||||
import { onBeforeUnmount, onMounted, ref } from "vue";
|
||||
|
||||
interface UiMessage {
|
||||
id: string;
|
||||
role: "user" | "assistant";
|
||||
content: string;
|
||||
streaming?: boolean;
|
||||
}
|
||||
import AppDialog from "./components/AppDialog.vue";
|
||||
import ChatComposer from "./components/ChatComposer.vue";
|
||||
import ChatHeader from "./components/ChatHeader.vue";
|
||||
import LoginPanel from "./components/LoginPanel.vue";
|
||||
import MessageList, { type DisplayMessage } from "./components/MessageList.vue";
|
||||
import SessionDrawer from "./components/SessionDrawer.vue";
|
||||
import SessionQuota from "./components/SessionQuota.vue";
|
||||
import { ApiError, api, clearToken, getToken, streamChat } from "./services/api";
|
||||
import type { ChatMessage as ApiMessage, ChatSession, UserProfile } from "./types/api";
|
||||
|
||||
const user = ref<UserProfile | null>(null);
|
||||
const sessions = ref<ChatSession[]>([]);
|
||||
const activeSessionId = ref<number | null>(null);
|
||||
const messages = ref<UiMessage[]>([]);
|
||||
const messages = ref<DisplayMessage[]>([]);
|
||||
const drawerOpen = ref(false);
|
||||
const loading = ref(false);
|
||||
const sending = ref(false);
|
||||
const booting = ref(true);
|
||||
const loadingSession = ref(false);
|
||||
const loadingSessions = ref(false);
|
||||
const sessionOperationPending = ref(false);
|
||||
const logoutDialogOpen = ref(false);
|
||||
const statusText = ref("连接后端中");
|
||||
const bottomRef = ref<HTMLElement | null>(null);
|
||||
const toastText = ref("");
|
||||
const followingOutput = ref(true);
|
||||
const messageList = ref<InstanceType<typeof MessageList> | null>(null);
|
||||
const activeAbortController = ref<AbortController | null>(null);
|
||||
let toastTimer: number | null = null;
|
||||
|
||||
onMounted(async () => {
|
||||
if (!getToken()) {
|
||||
@@ -35,187 +39,277 @@ onMounted(async () => {
|
||||
user.value = await api.profile();
|
||||
await loadSessions();
|
||||
statusText.value = "已连接大本营答疑服务";
|
||||
} catch {
|
||||
clearToken();
|
||||
statusText.value = "登录已失效";
|
||||
} catch (error) {
|
||||
handleError(error, "页面初始化失败");
|
||||
} finally {
|
||||
booting.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
activeAbortController.value?.abort();
|
||||
if (toastTimer) window.clearTimeout(toastTimer);
|
||||
document.body.classList.remove("drawer-open");
|
||||
});
|
||||
|
||||
async function onLoggedIn(profile: UserProfile) {
|
||||
user.value = profile;
|
||||
statusText.value = "已连接大本营答疑服务";
|
||||
try {
|
||||
await loadSessions();
|
||||
} catch (error) {
|
||||
handleError(error, "会话加载失败");
|
||||
}
|
||||
}
|
||||
|
||||
async function loadSessions() {
|
||||
loadingSessions.value = true;
|
||||
try {
|
||||
sessions.value = await api.listSessions();
|
||||
if (sessions.value.length === 0) {
|
||||
await createSession();
|
||||
return;
|
||||
}
|
||||
await selectSession(sessions.value[0].id);
|
||||
await selectSession(sessions.value[0].id, true);
|
||||
} finally {
|
||||
loadingSessions.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function createSession() {
|
||||
if (sessionOperationPending.value) return;
|
||||
const existingBlank = sessions.value.find((session) => session.messageCount === 0);
|
||||
if (existingBlank) {
|
||||
await selectSession(existingBlank.id);
|
||||
return;
|
||||
}
|
||||
sessionOperationPending.value = true;
|
||||
try {
|
||||
const result = await api.createSession();
|
||||
await refreshSessions(result.sessionId);
|
||||
drawerOpen.value = false;
|
||||
}
|
||||
|
||||
async function refreshSessions(selectId = activeSessionId.value) {
|
||||
sessions.value = await api.listSessions();
|
||||
if (selectId) await selectSession(selectId);
|
||||
await selectSession(result.sessionId, true);
|
||||
} catch (error) {
|
||||
handleError(error, "新建会话失败");
|
||||
} finally {
|
||||
sessionOperationPending.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function selectSession(sessionId: number) {
|
||||
activeSessionId.value = sessionId;
|
||||
const history = await api.history(sessionId);
|
||||
messages.value = history.map(toUiMessage);
|
||||
async function selectSession(sessionId: number, force = false) {
|
||||
if (!force && activeSessionId.value === sessionId && !loadingSession.value) {
|
||||
drawerOpen.value = false;
|
||||
await scrollToBottom();
|
||||
return;
|
||||
}
|
||||
loadingSession.value = true;
|
||||
try {
|
||||
const history = await api.history(sessionId);
|
||||
activeSessionId.value = sessionId;
|
||||
messages.value = history.map(toUiMessage);
|
||||
followingOutput.value = true;
|
||||
drawerOpen.value = false;
|
||||
await messageList.value?.scrollToBottom("auto");
|
||||
await refreshProfile();
|
||||
} catch (error) {
|
||||
handleError(error, "会话加载失败");
|
||||
} finally {
|
||||
loadingSession.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function send(message: string) {
|
||||
if (!activeSessionId.value || loading.value) return;
|
||||
const userMessage: UiMessage = { id: `user-${Date.now()}`, role: "user", content: message };
|
||||
const assistantMessage: UiMessage = { id: `assistant-${Date.now()}`, role: "assistant", content: "", streaming: true };
|
||||
async function send(message: string, complete: (success: boolean) => void) {
|
||||
if (!activeSessionId.value || sending.value) {
|
||||
complete(false);
|
||||
return;
|
||||
}
|
||||
const now = new Date().toISOString();
|
||||
const userMessage: DisplayMessage = { id: `user-${Date.now()}`, role: "user", content: message, createdAt: now };
|
||||
const assistantMessage: DisplayMessage = {
|
||||
id: `assistant-${Date.now()}`,
|
||||
role: "assistant",
|
||||
content: "",
|
||||
createdAt: now,
|
||||
streaming: true,
|
||||
};
|
||||
messages.value.push(userMessage, assistantMessage);
|
||||
loading.value = true;
|
||||
const assistantIndex = messages.value.length - 1;
|
||||
const currentAssistant = () => messages.value[assistantIndex];
|
||||
sending.value = true;
|
||||
followingOutput.value = true;
|
||||
activeAbortController.value = new AbortController();
|
||||
let hasContent = false;
|
||||
await scrollToBottom();
|
||||
await messageList.value?.scrollToMessage(userMessage.id);
|
||||
try {
|
||||
await streamChat(
|
||||
activeSessionId.value,
|
||||
message,
|
||||
async (chunk) => {
|
||||
if (!hasContent) {
|
||||
assistantMessage.content = "";
|
||||
currentAssistant().content = "";
|
||||
hasContent = true;
|
||||
}
|
||||
assistantMessage.content += chunk;
|
||||
await scrollToBottom();
|
||||
currentAssistant().content += chunk;
|
||||
if (followingOutput.value) await messageList.value?.scrollToBottom();
|
||||
},
|
||||
async (statusMessage, statusType) => {
|
||||
if (statusType === "queued") {
|
||||
assistantMessage.content = statusMessage || "当前请求较多，正在排队中。";
|
||||
} else if (statusType === "generating" && !hasContent) {
|
||||
assistantMessage.content = "";
|
||||
}
|
||||
await scrollToBottom();
|
||||
if (statusType === "queued") currentAssistant().content = statusMessage || "当前请求较多，正在排队中。";
|
||||
if (statusType === "generating" && !hasContent) currentAssistant().content = "";
|
||||
if (followingOutput.value) await messageList.value?.scrollToBottom();
|
||||
},
|
||||
activeAbortController.value.signal,
|
||||
);
|
||||
assistantMessage.streaming = false;
|
||||
await refreshSessions(activeSessionId.value);
|
||||
user.value = await api.profile();
|
||||
currentAssistant().streaming = false;
|
||||
currentAssistant().createdAt = new Date().toISOString();
|
||||
complete(true);
|
||||
await refreshSessionList();
|
||||
await refreshProfile();
|
||||
} catch (error) {
|
||||
assistantMessage.streaming = false;
|
||||
currentAssistant().streaming = false;
|
||||
if (error instanceof DOMException && error.name === "AbortError") {
|
||||
assistantMessage.content = assistantMessage.content || "已停止生成";
|
||||
currentAssistant().content = currentAssistant().content || "已停止生成";
|
||||
complete(true);
|
||||
} else {
|
||||
assistantMessage.content = error instanceof Error ? error.message : "AI 回复失败";
|
||||
currentAssistant().content = currentAssistant().content || "回答生成失败，请稍后重试。";
|
||||
complete(false);
|
||||
handleError(error, "AI 回复失败");
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
sending.value = false;
|
||||
activeAbortController.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function stop() {
|
||||
if (!activeSessionId.value) return;
|
||||
if (!activeSessionId.value || !sending.value) return;
|
||||
activeAbortController.value?.abort();
|
||||
try {
|
||||
await api.stop(activeSessionId.value);
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
handleError(error, "停止生成失败");
|
||||
}
|
||||
}
|
||||
|
||||
async function renameSession(sessionId: number, title: string) {
|
||||
async function renameSession(sessionId: number, title: string, done: (success: boolean) => void) {
|
||||
if (sessionOperationPending.value) return;
|
||||
sessionOperationPending.value = true;
|
||||
try {
|
||||
await api.renameSession(sessionId, title);
|
||||
await refreshSessions(sessionId);
|
||||
await refreshSessionList();
|
||||
showToast("会话名称已更新");
|
||||
done(true);
|
||||
} catch (error) {
|
||||
done(false);
|
||||
handleError(error, "会话改名失败");
|
||||
} finally {
|
||||
sessionOperationPending.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteSession(sessionId: number) {
|
||||
async function deleteSession(sessionId: number, done: (success: boolean) => void) {
|
||||
if (sessionOperationPending.value) return;
|
||||
sessionOperationPending.value = true;
|
||||
try {
|
||||
await api.deleteSession(sessionId);
|
||||
sessions.value = await api.listSessions();
|
||||
done(true);
|
||||
showToast("会话已删除");
|
||||
if (activeSessionId.value === sessionId) {
|
||||
messages.value = [];
|
||||
activeSessionId.value = null;
|
||||
if (sessions.value.length > 0) {
|
||||
await selectSession(sessions.value[0].id);
|
||||
messages.value = [];
|
||||
const nextSession = sessions.value[0];
|
||||
if (nextSession) await selectSession(nextSession.id, true);
|
||||
else {
|
||||
sessionOperationPending.value = false;
|
||||
await createSession();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
done(false);
|
||||
handleError(error, "会话删除失败");
|
||||
} finally {
|
||||
sessionOperationPending.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
async function confirmLogout() {
|
||||
sessionOperationPending.value = true;
|
||||
try {
|
||||
await api.logout();
|
||||
} catch {
|
||||
// 本地登录态必须可退出，服务端失败不阻塞用户操作。
|
||||
} finally {
|
||||
sessionOperationPending.value = false;
|
||||
logoutDialogOpen.value = false;
|
||||
clearUserState();
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshSessionList() {
|
||||
sessions.value = await api.listSessions();
|
||||
}
|
||||
|
||||
async function refreshProfile() {
|
||||
user.value = await api.profile();
|
||||
}
|
||||
|
||||
function toUiMessage(message: ApiMessage): DisplayMessage {
|
||||
return {
|
||||
id: String(message.id),
|
||||
role: message.role,
|
||||
content: message.content,
|
||||
createdAt: message.created_at,
|
||||
streaming: message.message_status === "GENERATING",
|
||||
};
|
||||
}
|
||||
|
||||
function handleError(error: unknown, fallback: string) {
|
||||
if (error instanceof ApiError && error.status === 401) {
|
||||
clearUserState();
|
||||
showToast("登录状态已失效，请重新登录");
|
||||
return;
|
||||
}
|
||||
showToast(error instanceof Error ? error.message : fallback);
|
||||
}
|
||||
|
||||
function clearUserState() {
|
||||
clearToken();
|
||||
user.value = null;
|
||||
sessions.value = [];
|
||||
messages.value = [];
|
||||
activeSessionId.value = null;
|
||||
statusText.value = "请先登录";
|
||||
}
|
||||
}
|
||||
|
||||
function toUiMessage(message: ApiMessage): UiMessage {
|
||||
return {
|
||||
id: String(message.id),
|
||||
role: message.role,
|
||||
content: message.content,
|
||||
streaming: message.message_status === "GENERATING",
|
||||
};
|
||||
}
|
||||
|
||||
async function scrollToBottom() {
|
||||
await nextTick();
|
||||
bottomRef.value?.scrollIntoView({ behavior: "smooth", block: "end" });
|
||||
function showToast(message: string) {
|
||||
toastText.value = message;
|
||||
if (toastTimer) window.clearTimeout(toastTimer);
|
||||
toastTimer = window.setTimeout(() => {
|
||||
toastText.value = "";
|
||||
toastTimer = null;
|
||||
}, 3200);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="app-shell">
|
||||
<section class="phone-frame" :class="{ 'login-mode': !user && !booting }">
|
||||
<section class="phone-frame" :class="{ 'login-mode': !user && !booting, 'chat-mode': Boolean(user) }">
|
||||
<div v-if="booting" class="booting">正在启动...</div>
|
||||
<LoginPanel v-else-if="!user" @logged-in="onLoggedIn" />
|
||||
<template v-else>
|
||||
<header class="topbar">
|
||||
<button type="button" class="icon-btn" @click="drawerOpen = true">☰</button>
|
||||
<div>
|
||||
<h1>大本营答疑助手</h1>
|
||||
<p>{{ statusText }}</p>
|
||||
</div>
|
||||
<button type="button" class="plain-btn" @click="logout">退出</button>
|
||||
</header>
|
||||
|
||||
<section class="quota-strip">
|
||||
<span>{{ user.name }}</span>
|
||||
<strong>{{ user.todayUsed }}/{{ user.dailyLimit }}</strong>
|
||||
</section>
|
||||
|
||||
<section class="chat-area">
|
||||
<div v-if="messages.length === 0" class="empty-state">
|
||||
<strong>可以开始提问了</strong>
|
||||
<p>输入问题，我会尽力为你解答。</p>
|
||||
</div>
|
||||
<ChatMessage
|
||||
v-for="message in messages"
|
||||
:key="message.id"
|
||||
:role="message.role"
|
||||
:content="message.content"
|
||||
:streaming="message.streaming"
|
||||
<ChatHeader :user="user" :status-text="statusText" @open-history="drawerOpen = true" @logout="logoutDialogOpen = true" />
|
||||
<SessionQuota :used="user.todayUsed" :limit="user.dailyLimit" />
|
||||
<MessageList
|
||||
ref="messageList"
|
||||
:messages="messages"
|
||||
:loading-session="loadingSession"
|
||||
@follow-change="followingOutput = $event"
|
||||
/>
|
||||
<div ref="bottomRef"></div>
|
||||
</section>
|
||||
|
||||
<ChatComposer :loading="loading" :disabled="!activeSessionId" @send="send" @stop="stop" />
|
||||
<ChatComposer :loading="sending" :disabled="!activeSessionId || loadingSession" @send="send" @stop="stop" />
|
||||
<SessionDrawer
|
||||
:open="drawerOpen"
|
||||
:sessions="sessions"
|
||||
:active-session-id="activeSessionId"
|
||||
:loading="loadingSessions"
|
||||
:operation-pending="sessionOperationPending"
|
||||
@close="drawerOpen = false"
|
||||
@select="selectSession"
|
||||
@create="createSession"
|
||||
@@ -224,5 +318,19 @@ async function scrollToBottom() {
|
||||
/>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<div v-if="toastText" class="chat-toast" role="status">{{ toastText }}</div>
|
||||
|
||||
<AppDialog v-if="logoutDialogOpen" title="退出登录" labelled-by="logout-dialog-title" @close="logoutDialogOpen = false">
|
||||
<p class="confirm-copy">确定退出当前账号吗？</p>
|
||||
<template #footer>
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="dialog-secondary" :disabled="sessionOperationPending" @click="logoutDialogOpen = false">取消</button>
|
||||
<button type="button" class="dialog-primary" :disabled="sessionOperationPending" @click="confirmLogout">
|
||||
{{ sessionOperationPending ? "退出中..." : "退出" }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</AppDialog>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -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);
|
||||
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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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">
|
||||
<template v-if="role === 'assistant'">
|
||||
<div v-if="streaming && assistantParts.reasoning" class="thinking-indicator">
|
||||
<span class="thinking-dots">思考中</span>
|
||||
<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="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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
<button type="button" class="danger" @click="deleting = session">
|
||||
<Trash2 :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>
|
||||
</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>
|
||||
|
||||
@@ -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>
|
||||
@@ -1098,3 +1098,644 @@ textarea:focus-visible {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 登录后的手机端问答界面 */
|
||||
:root {
|
||||
--chat-bg: #f6faf8;
|
||||
--chat-surface: #ffffff;
|
||||
--chat-text: #17231f;
|
||||
--chat-muted: #6f7f79;
|
||||
--chat-weak: #98a49f;
|
||||
--chat-brand: #149477;
|
||||
--chat-brand-dark: #0f705d;
|
||||
--chat-brand-soft: #eff7f4;
|
||||
--chat-border: #dfe9e5;
|
||||
--chat-control-border: #d9e6e1;
|
||||
--chat-danger: #c65353;
|
||||
--chat-radius-control: 13px;
|
||||
--chat-radius-card: 15px;
|
||||
--chat-shadow: 0 8px 24px rgba(28, 60, 50, 0.055);
|
||||
}
|
||||
|
||||
.phone-frame.chat-mode {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
||||
background: var(--chat-bg);
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
min-height: 82px;
|
||||
display: grid;
|
||||
grid-template-columns: 44px minmax(0, 1fr) auto 52px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: max(10px, env(safe-area-inset-top)) 14px 10px;
|
||||
border-bottom: 1px solid var(--chat-border);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
}
|
||||
|
||||
.header-menu-button,
|
||||
.header-logout-button,
|
||||
.history-header button {
|
||||
min-width: 44px;
|
||||
height: 44px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background: var(--chat-brand-soft);
|
||||
color: var(--chat-brand-dark);
|
||||
}
|
||||
|
||||
.assistant-summary {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.assistant-summary h1 {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
color: var(--chat-text);
|
||||
font-size: 17px;
|
||||
line-height: 1.35;
|
||||
font-weight: 720;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.assistant-summary p {
|
||||
overflow: hidden;
|
||||
margin: 3px 0 0;
|
||||
color: var(--chat-muted);
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.user-summary {
|
||||
max-width: 92px;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
color: var(--chat-muted);
|
||||
font-size: 10px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.user-summary span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-logout-button {
|
||||
min-width: 52px;
|
||||
padding: 0 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.session-quota {
|
||||
min-height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin: 12px 16px 0;
|
||||
padding: 0 14px;
|
||||
border: 1px solid rgba(217, 230, 225, 0.75);
|
||||
border-radius: 13px;
|
||||
background: var(--chat-brand-soft);
|
||||
color: #365c51;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.session-quota > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.session-quota svg,
|
||||
.session-quota strong {
|
||||
color: var(--chat-brand-dark);
|
||||
}
|
||||
|
||||
.session-quota strong {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.session-quota.exhausted {
|
||||
border-color: rgba(198, 83, 83, 0.25);
|
||||
background: #fff5f4;
|
||||
}
|
||||
|
||||
.session-quota.exhausted strong {
|
||||
color: var(--chat-danger);
|
||||
}
|
||||
|
||||
.message-list {
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 18px 16px 28px;
|
||||
scroll-behavior: smooth;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #cfddd8 transparent;
|
||||
}
|
||||
|
||||
.chat-empty-state,
|
||||
.chat-loading-state {
|
||||
min-height: 48%;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chat-empty-state strong {
|
||||
color: var(--chat-text);
|
||||
font-size: 18px;
|
||||
font-weight: 680;
|
||||
}
|
||||
|
||||
.chat-empty-state p,
|
||||
.chat-loading-state {
|
||||
margin: 8px 0 0;
|
||||
color: var(--chat-muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
display: grid;
|
||||
grid-template-columns: 36px minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: 10px;
|
||||
margin-bottom: 18px;
|
||||
scroll-margin-top: 12px;
|
||||
}
|
||||
|
||||
.chat-message.user {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.assistant-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 11px;
|
||||
background: #e4f1ed;
|
||||
color: var(--chat-brand-dark);
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
min-width: 0;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
padding: 13px 15px 10px;
|
||||
border: 1px solid var(--chat-border);
|
||||
border-radius: var(--chat-radius-card);
|
||||
background: var(--chat-surface);
|
||||
box-shadow: var(--chat-shadow);
|
||||
}
|
||||
|
||||
.chat-message.user .message-bubble {
|
||||
max-width: 82%;
|
||||
border-color: var(--chat-brand);
|
||||
border-bottom-right-radius: 5px;
|
||||
background: var(--chat-brand);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 8px 20px rgba(20, 148, 119, 0.15);
|
||||
}
|
||||
|
||||
.message-content {
|
||||
overflow-wrap: anywhere;
|
||||
white-space: pre-wrap;
|
||||
color: inherit;
|
||||
font-size: 15px;
|
||||
line-height: 1.78;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.chat-message time {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
color: var(--chat-weak);
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.chat-message.user time {
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.generation-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-height: 28px;
|
||||
color: var(--chat-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.generation-state span {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: var(--chat-brand);
|
||||
animation: generation-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.generation-state span:nth-child(2) { animation-delay: 0.14s; }
|
||||
.generation-state span:nth-child(3) { animation-delay: 0.28s; margin-right: 4px; }
|
||||
|
||||
@keyframes generation-pulse {
|
||||
0%, 70%, 100% { opacity: 0.25; transform: translateY(0); }
|
||||
35% { opacity: 1; transform: translateY(-2px); }
|
||||
}
|
||||
|
||||
.markdown-content {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.markdown-content > :first-child { margin-top: 0; }
|
||||
.markdown-content > :last-child { margin-bottom: 0; }
|
||||
.markdown-content p { margin: 0 0 12px; }
|
||||
|
||||
.markdown-content h1,
|
||||
.markdown-content h2,
|
||||
.markdown-content h3,
|
||||
.markdown-content h4 {
|
||||
margin: 20px 0 9px;
|
||||
color: var(--chat-text);
|
||||
line-height: 1.45;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.markdown-content h1 { font-size: 20px; }
|
||||
.markdown-content h2 { font-size: 18px; }
|
||||
.markdown-content h3,
|
||||
.markdown-content h4 { font-size: 16px; }
|
||||
|
||||
.markdown-content ul,
|
||||
.markdown-content ol {
|
||||
margin: 8px 0 13px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.markdown-content li + li { margin-top: 6px; }
|
||||
.markdown-content strong { color: var(--chat-text); font-weight: 700; }
|
||||
|
||||
.markdown-content blockquote {
|
||||
margin: 12px 0;
|
||||
padding: 8px 12px;
|
||||
border-left: 3px solid #8cc7b6;
|
||||
background: var(--chat-brand-soft);
|
||||
color: #526b63;
|
||||
}
|
||||
|
||||
.markdown-content blockquote p { margin: 0; }
|
||||
|
||||
.chat-composer {
|
||||
position: relative;
|
||||
z-index: 6;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: end;
|
||||
gap: 10px;
|
||||
padding: 12px 14px max(12px, env(safe-area-inset-bottom));
|
||||
border-top: 1px solid var(--chat-border);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
}
|
||||
|
||||
.chat-composer textarea {
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
max-height: 108px;
|
||||
resize: none;
|
||||
overflow-y: hidden;
|
||||
padding: 13px 15px;
|
||||
border: 1px solid var(--chat-control-border);
|
||||
border-radius: var(--chat-radius-control);
|
||||
outline: 0;
|
||||
background: #ffffff;
|
||||
color: var(--chat-text);
|
||||
font-size: 16px;
|
||||
line-height: 1.45;
|
||||
transition: border-color 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.chat-composer textarea:focus {
|
||||
border-color: var(--chat-brand);
|
||||
box-shadow: 0 0 0 3px rgba(20, 148, 119, 0.1);
|
||||
}
|
||||
|
||||
.chat-composer textarea::placeholder { color: var(--chat-weak); }
|
||||
|
||||
.composer-send,
|
||||
.composer-stop {
|
||||
min-width: 78px;
|
||||
min-height: 50px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
padding: 0 14px;
|
||||
border: 0;
|
||||
border-radius: var(--chat-radius-control);
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.composer-send { background: var(--chat-brand); }
|
||||
.composer-stop { background: var(--chat-danger); }
|
||||
|
||||
.composer-send:disabled {
|
||||
cursor: not-allowed;
|
||||
background: #dbe8e3;
|
||||
color: #93a39d;
|
||||
}
|
||||
|
||||
.history-mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
pointer-events: none;
|
||||
background: rgba(20, 36, 31, 0);
|
||||
transition: background 0.22s ease;
|
||||
}
|
||||
|
||||
.history-mask.visible {
|
||||
pointer-events: auto;
|
||||
background: rgba(20, 36, 31, 0.32);
|
||||
}
|
||||
|
||||
.history-drawer {
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
z-index: 45;
|
||||
width: 84%;
|
||||
max-width: 360px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: max(14px, env(safe-area-inset-top)) 15px max(16px, env(safe-area-inset-bottom));
|
||||
background: #fbfdfc;
|
||||
transform: translateX(-102%);
|
||||
transition: transform 0.22s ease;
|
||||
box-shadow: 18px 0 50px rgba(20, 36, 31, 0.15);
|
||||
}
|
||||
|
||||
.history-drawer.open { transform: translateX(0); }
|
||||
|
||||
.history-header {
|
||||
min-height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.history-header h2 {
|
||||
margin: 0;
|
||||
color: var(--chat-text);
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.new-chat-button {
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
border: 0;
|
||||
border-radius: 13px;
|
||||
background: var(--chat-brand);
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: 680;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
padding: 1px 2px 8px;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.history-state {
|
||||
padding: 48px 10px;
|
||||
color: var(--chat-muted);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
padding: 13px 14px 10px;
|
||||
border: 1px solid var(--chat-border);
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.history-item.active {
|
||||
border-color: var(--chat-brand);
|
||||
background: #f3faf7;
|
||||
}
|
||||
|
||||
.history-main {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 7px 10px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.history-main strong {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
color: var(--chat-text);
|
||||
font-size: 15px;
|
||||
line-height: 1.45;
|
||||
font-weight: 680;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.history-main time,
|
||||
.history-main span {
|
||||
color: var(--chat-muted);
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.history-main time { white-space: nowrap; }
|
||||
.history-main span { grid-column: 1 / -1; }
|
||||
|
||||
.history-actions {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.history-actions button {
|
||||
min-height: 36px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 0 2px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--chat-brand-dark);
|
||||
font-size: 13px;
|
||||
font-weight: 620;
|
||||
}
|
||||
|
||||
.history-actions button.danger { color: var(--chat-danger); }
|
||||
|
||||
.session-dialog-form {
|
||||
display: grid;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.session-dialog-form label {
|
||||
color: var(--chat-text);
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.session-dialog-form input {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
padding: 0 13px;
|
||||
border: 1px solid var(--chat-control-border);
|
||||
border-radius: 12px;
|
||||
outline: 0;
|
||||
color: var(--chat-text);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.session-dialog-form input:focus {
|
||||
border-color: var(--chat-brand);
|
||||
box-shadow: 0 0 0 3px rgba(20, 148, 119, 0.1);
|
||||
}
|
||||
|
||||
.session-dialog-form p {
|
||||
margin: 0;
|
||||
color: var(--chat-weak);
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.confirm-copy {
|
||||
margin: 0;
|
||||
color: var(--chat-muted);
|
||||
font-size: 15px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dialog-actions button {
|
||||
min-height: 46px;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.dialog-secondary { background: #edf3f1; color: var(--chat-muted); }
|
||||
.dialog-primary { background: var(--chat-brand); color: #ffffff; }
|
||||
.dialog-danger { background: var(--chat-danger); color: #ffffff; }
|
||||
|
||||
.dialog-actions button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.chat-toast {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
left: 50%;
|
||||
bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px));
|
||||
max-width: calc(100vw - 40px);
|
||||
padding: 11px 16px;
|
||||
border-radius: 10px;
|
||||
background: rgba(23, 35, 31, 0.92);
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
transform: translateX(-50%);
|
||||
box-shadow: 0 10px 30px rgba(20, 34, 29, 0.18);
|
||||
}
|
||||
|
||||
body.drawer-open { overflow: hidden; }
|
||||
|
||||
@media (max-width: 390px) {
|
||||
.chat-header {
|
||||
grid-template-columns: 44px minmax(0, 1fr) auto 48px;
|
||||
gap: 7px;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.assistant-summary h1 { font-size: 15px; }
|
||||
.assistant-summary p { font-size: 10px; }
|
||||
.user-summary { max-width: 72px; font-size: 9px; }
|
||||
.header-logout-button { min-width: 48px; padding: 0 5px; }
|
||||
.session-quota { margin-right: 12px; margin-left: 12px; }
|
||||
.message-list { padding-right: 12px; padding-left: 12px; }
|
||||
.chat-composer { padding-right: 10px; padding-left: 10px; }
|
||||
.composer-send,
|
||||
.composer-stop { min-width: 72px; padding: 0 11px; }
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.user-summary { display: none; }
|
||||
.chat-header { grid-template-columns: 44px minmax(0, 1fr) 48px; }
|
||||
}
|
||||
|
||||
@media (max-height: 680px) {
|
||||
.chat-header { min-height: 70px; }
|
||||
.session-quota { min-height: 42px; margin-top: 8px; }
|
||||
.message-list { padding-top: 12px; padding-bottom: 16px; }
|
||||
.chat-composer { padding-top: 9px; }
|
||||
}
|
||||
|
||||
@media (min-width: 521px) {
|
||||
.phone-frame.chat-mode {
|
||||
height: min(860px, calc(100dvh - 48px));
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: absolute;
|
||||
border-radius: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.phone-frame.chat-mode {
|
||||
height: 100dvh;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user