feat(frontend): M9 模态 UI（mode 系统+共享 store+WS 客户端 + chat(思维链/工具回显/情绪徽标)/code/Agent 监控/后台思考页 + Miuix 设计 token + PWA）；tsc+vite build 通过

2026-09-06 07:44:40 +08:00
1 parent b3ffd51736
commit 4c48e94659
@@ -0,0 +1,137 @@
+@import "../design/tokens.css";
+@import "tailwindcss";
+
+/* 让 Tailwind 通过对 token 的映射生成工具类（bg-surface-1 / rounded-smooth / ease-spring 等）。
+   tokens.css 里的 surface 是动态值（Light 会覆盖），这里用静态 hex 生成工具类。 */
+@theme {
+  --color-surface-1: #161616;
+  --color-surface-2: #0c0c0c;
+  --color-surface-3: #1c1c1c;
+  --color-surface-4: #242424;
+  --color-surface-5: #2c2c2c;
+
+  --color-text-hi: #f5f5f7;
+  --color-text-mid: #b4b4b8;
+  --color-text-lo: #7a7a80;
+
+  --color-accent: #3d6bff;
+  --color-accent-hi: #6a8dff;
+  --color-ok: #35c26b;
+  --color-warn: #ff9f43;
+  --color-err: #ff5c5c;
+
+  --radius-smooth: 0.625rem;
+  --radius-pill: 62.5rem;
+
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--mu-surface-2);
+  color: var(--mu-text-hi);
+  font-family:
+    "MiSans",
+    system-ui,
+    -apple-system,
+    "PingFang SC",
+    "Microsoft YaHei",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  overscroll-behavior: none;
+}
+
+/* 毛玻璃表面 —— TopBar / Sidebar / BottomNav 用 */
+.glass {
+  background: color-mix(in srgb, var(--mu-surface-1) calc(var(--mu-glass-alpha) * 100%), transparent);
+  backdrop-filter: blur(var(--mu-glass-blur)) saturate(1.4);
+  -webkit-backdrop-filter: blur(var(--mu-glass-blur)) saturate(1.4);
+  border: 1px solid var(--mu-glass-border);
+}
+
+/* Liquid Glass 寓意：内高光 + 折射描边 + 深层玻璃阴影 */
+.liquid-glass {
+  position: relative;
+  background:
+    linear-gradient(135deg, var(--mu-liquid-highlight), transparent 42%),
+    color-mix(in srgb, var(--mu-surface-4) 88%, transparent);
+  box-shadow:
+    var(--mu-shadow-2),
+    inset 0 1px 0 var(--mu-liquid-rim),
+    inset 0 0 0 1px var(--mu-liquid-rim);
+  backdrop-filter: blur(var(--mu-glass-blur)) saturate(1.3);
+  -webkit-backdrop-filter: blur(var(--mu-glass-blur)) saturate(1.3);
+  transition: transform 0.4s var(--mu-spring), box-shadow 0.4s var(--mu-ease);
+}
+.liquid-glass:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--mu-shadow-3), inset 0 1px 0 var(--mu-liquid-rim);
+}
+
+/* Smooth Corner 优先：全局圆角走 token（k=0.55 近似值），落地在组件里用 rounded-smooth */
+* {
+  border-radius: var(--mu-radius);
+  scrollbar-width: thin;
+  scrollbar-color: var(--mu-surface-5) transparent;
+}
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+*::-webkit-scrollbar-thumb {
+  background: var(--mu-surface-5);
+  border-radius: var(--mu-radius-pill);
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+button {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+input,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+/* 欢迎出现动画（仅交互/入场） */
+@keyframes mu-rise-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.mu-rise-in {
+  animation: mu-rise-in 0.36s var(--mu-spring) both;
+}
+
+/* 思维链呼吸点 */
+@keyframes mu-blink {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+.mu-blink {
+  animation: mu-blink 1.2s ease-in-out infinite;
+}