Files
Kokorone/apps/web/app/globals.css
T
Jeffery 9e5036f0a0 feat: 完成 H 群組 — 網頁對話介面(第一個可實際使用的垂直切片)
- 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 群組冒煙測試無回歸。
2026-08-13 12:12:49 +08:00

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;
}
}