- POST /chat/:characterId:正式對外對話端點,DialogueService 補上情緒標記與親密度 累積(每輪對話走完整管線:標記情緒→檢索記憶→組裝→生成→過濾) - POST /session/:sessionId/end:觸發睡眠固化 - NestJS 啟用 CORS(WEB_ORIGIN,預設 http://localhost:3100),本清單第一次有瀏覽器直接呼叫 api - apps/web/app/chat:對話頁面(ChatView 用戶端元件),電腦雙欄/行動單欄同一份 RWD 程式, 立繪半身像置頂佔 40% 為行動版背景層 - 情緒晶片+親密度數字顯示,跟著每輪回應即時更新 - 動作描寫標記(*…*)以暮空紫小字獨立呈現,與台詞區分 - HeartbeatWave 元件:載入時由左至右畫出、親密度決定振幅、通知紅點心跳脈動, 皆尊重 prefers-reduced-motion;首頁與對話頁共用同一元件 - 色票換成 wiki 主視覺提案頁的完整 token 組(含官方深色模式數值) - scripts/smoke/H.mjs:端到端驗證對話 API 狀態變化、session 結束固化、頁面結構標記; 另以 Playwright + headless Chromium 實際開瀏覽器驗證桌面/行動版面、送出訊息、 動作標記渲染,過程無 console 錯誤 npm run restart && npm run smoke -- H 皆通過(H-V),A~G 群組冒煙測試無回歸。
109 lines
2.4 KiB
CSS
109 lines
2.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--bg: #fff8fa;
|
|
--bg-soft: #fdeef3;
|
|
--ink: #3a3242;
|
|
--ink-soft: #7a6e85;
|
|
--accent: #e85d80;
|
|
--accent-bright: #ff7e9d;
|
|
--violet: #8c7ae6;
|
|
--line: #f0dce4;
|
|
--card: #ffffff;
|
|
--chip-bg: #fde7ee;
|
|
--wave: #ff7e9d;
|
|
--frame: #e8d8df;
|
|
--shadow: 0 12px 40px rgba(232, 93, 128, 0.1);
|
|
|
|
/* 向下相容 A-5 首頁使用的別名 */
|
|
--color-heartbeat-pink: var(--accent-bright);
|
|
--color-dusk-purple: var(--violet);
|
|
--background: var(--bg);
|
|
--foreground: var(--ink);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-heartbeat-pink: var(--color-heartbeat-pink);
|
|
--color-dusk-purple: var(--color-dusk-purple);
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-bg: var(--bg);
|
|
--color-bg-soft: var(--bg-soft);
|
|
--color-ink: var(--ink);
|
|
--color-ink-soft: var(--ink-soft);
|
|
--color-accent: var(--accent);
|
|
--color-accent-bright: var(--accent-bright);
|
|
--color-violet: var(--violet);
|
|
--color-line: var(--line);
|
|
--color-card: var(--card);
|
|
--color-chip-bg: var(--chip-bg);
|
|
--color-frame: var(--frame);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #1a1430;
|
|
--bg-soft: #241b40;
|
|
--ink: #f2e9f2;
|
|
--ink-soft: #a99bbf;
|
|
--accent: #ff7e9d;
|
|
--accent-bright: #ff9db5;
|
|
--violet: #a796f5;
|
|
--line: #372b55;
|
|
--card: #221a3d;
|
|
--chip-bg: #33244a;
|
|
--wave: #ff7e9d;
|
|
--frame: #3b2f5c;
|
|
--shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: var(--font-sans), ui-rounded, "PingFang TC", "Microsoft JhengHei", sans-serif;
|
|
}
|
|
|
|
/* H-4 心跳波形母題:載入動畫由左至右畫出 */
|
|
.heartbeat-wave-line {
|
|
color: var(--wave);
|
|
}
|
|
.heartbeat-wave-animate {
|
|
stroke-dasharray: 600;
|
|
stroke-dashoffset: 600;
|
|
animation: heartbeat-draw 1.6s ease-out forwards;
|
|
}
|
|
@keyframes heartbeat-draw {
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
/* H-4 通知紅點:一次小小的心跳脈動 */
|
|
.heartbeat-dot {
|
|
animation: heartbeat-pulse 1.2s ease-in-out infinite;
|
|
}
|
|
@keyframes heartbeat-pulse {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.3);
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.heartbeat-wave-animate {
|
|
stroke-dashoffset: 0;
|
|
animation: none;
|
|
}
|
|
.heartbeat-dot {
|
|
animation: none;
|
|
}
|
|
}
|