{currentSessionId ? (
-
-
{currentSessionId.slice(0, 12)}...
+
+
{currentSessionId.slice(0, 12)}...
) : (
-
暂无对话
+
暂无对话
)}
diff --git a/frontend/web/src/index.css b/frontend/web/src/index.css
index 662db5b..8c6dada 100644
--- a/frontend/web/src/index.css
+++ b/frontend/web/src/index.css
@@ -1,33 +1,46 @@
@import "tailwindcss";
-@theme {
- /* Miuix Dark Color Scheme — Xiaomi HyperOS */
- --color-mx-primary: #277AF7;
- --color-mx-primary-hover: #3482FF;
- --color-mx-primary-container: #338FE4;
- --color-mx-on-primary: #FFFFFF;
+/* =============================================
+ Miuix HyperOS Design Tokens
+ 日间 (Light) + 夜间 (Dark)
+ ============================================= */
- --color-mx-bg: #242424;
- --color-mx-bg-elevated: #000000;
- --color-mx-bg-high: #2D2D2D;
+/* 夜间模式 (默认) */
+:root {
+ --mx-primary: #3482FF;
+ --mx-primary-hover: #277AF7;
+ --mx-primary-container: #338FE4;
+ --mx-on-primary: #FFFFFF;
- --color-mx-surface: #000000;
- --color-mx-surface-variant: #242424;
- --color-mx-surface-high: #2D2D2D;
+ --mx-bg: #242424;
+ --mx-bg-elevated: #000000;
+ --mx-bg-high: #2D2D2D;
- --color-mx-text: #F2F2F2;
- --color-mx-text-secondary: rgba(255,255,255,0.8);
- --color-mx-text-dim: rgba(255,255,255,0.5);
- --color-mx-text-disabled: #666666;
+ --mx-surface: #000000;
+ --mx-surface-variant: #242424;
+ --mx-surface-high: #2D2D2D;
- --color-mx-outline: #404040;
- --color-mx-divider: #393939;
+ --mx-text: #F2F2F2;
+ --mx-text-secondary: rgba(255,255,255,0.8);
+ --mx-text-dim: rgba(255,255,255,0.5);
+ --mx-text-disabled: #666666;
- --color-mx-error: #F12522;
- --color-mx-error-container: #2E0603;
+ --mx-outline: #404040;
+ --mx-divider: #393939;
- --color-mx-tertiary: #2B3B54;
- --color-mx-tertiary-text: #4788FF;
+ --mx-error: #F12522;
+ --mx-error-container: #2E0603;
+ --mx-error-text: #ffdad6;
+
+ --mx-tertiary: #2B3B54;
+ --mx-tertiary-text: #4788FF;
+
+ --mx-badge-blue: #2B3B54;
+
+ --mx-switch-off: #404040;
+ --mx-switch-on: #3482FF;
+
+ --mx-stat-value: #F2F2F2;
--radius-mx-card: 18px;
--radius-mx-button: 9999px;
@@ -37,64 +50,100 @@
--font-mx: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
}
+/* 日间模式 */
+[data-theme="light"] {
+ --mx-primary: #3482FF;
+ --mx-primary-hover: #277AF7;
+ --mx-primary-container: #5D9BFF;
+ --mx-on-primary: #FFFFFF;
+
+ --mx-bg: #FFFFFF;
+ --mx-bg-elevated: #F7F7F7;
+ --mx-bg-high: #E8E8E8;
+
+ --mx-surface: #FFFFFF;
+ --mx-surface-variant: #F7F7F7;
+ --mx-surface-high: #E8E8E8;
+
+ --mx-text: #000000;
+ --mx-text-secondary: rgba(0,0,0,0.7);
+ --mx-text-dim: rgba(0,0,0,0.4);
+ --mx-text-disabled: #B2B2B2;
+
+ --mx-outline: #D9D9D9;
+ --mx-divider: #E0E0E0;
+
+ --mx-error: #E94634;
+ --mx-error-container: #FDF6F4;
+ --mx-error-text: #410002;
+
+ --mx-tertiary: #EAF2FF;
+ --mx-tertiary-text: #3482FF;
+
+ --mx-badge-blue: #EAF2FF;
+
+ --mx-switch-off: #D9D9D9;
+ --mx-switch-on: #3482FF;
+
+ --mx-stat-value: #000000;
+}
+
+/* =============================================
+ Base styles
+ ============================================= */
+
body {
margin: 0;
- background: var(--color-mx-bg);
- color: var(--color-mx-text);
+ background: var(--mx-bg);
+ color: var(--mx-text);
font-family: var(--font-mx);
-webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--color-mx-outline); border-radius: 2px; }
+::-webkit-scrollbar-thumb { background: var(--mx-outline); border-radius: 2px; }
-/* Smooth focus ring */
*:focus-visible {
- outline: 2px solid var(--color-mx-primary);
+ outline: 2px solid var(--mx-primary);
outline-offset: 2px;
border-radius: var(--radius-mx-button);
}
-/* Glass effect for header */
+/* =============================================
+ Utility classes (using CSS variables)
+ ============================================= */
+
.mx-glass {
- background: rgba(36, 36, 36, 0.85);
+ background: rgba(36,36,36,0.85);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
}
-
-/* Smooth transitions */
-.mx-transition {
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+[data-theme="light"] .mx-glass {
+ background: rgba(255,255,255,0.85);
}
-/* Card surface */
.mx-card {
- background: var(--color-mx-surface);
+ background: var(--mx-surface);
border-radius: var(--radius-mx-card);
- border: 0.5px solid var(--color-mx-outline);
+ border: 0.5px solid var(--mx-outline);
}
-/* Button base */
-.mx-btn {
- background: var(--color-mx-primary);
- color: var(--color-mx-on-primary);
+.mx-btn-primary {
+ background: var(--mx-primary);
+ color: var(--mx-on-primary);
border-radius: var(--radius-mx-button);
font-weight: 500;
- transition: all 0.2s ease;
}
-.mx-btn:hover { background: var(--color-mx-primary-hover); }
-.mx-btn:active { transform: scale(0.97); }
-.mx-btn:disabled { background: #253E64; color: #677993; }
+.mx-btn-primary:hover { background: var(--mx-primary-hover); }
+.mx-btn-primary:active { transform: scale(0.97); }
-/* Input base */
.mx-input {
- background: var(--color-mx-surface);
- border: 0.5px solid var(--color-mx-outline);
+ background: var(--mx-surface);
+ border: 0.5px solid var(--mx-outline);
border-radius: var(--radius-mx-input);
- color: var(--color-mx-text);
+ color: var(--mx-text);
outline: none;
- transition: border-color 0.2s;
}
-.mx-input:focus { border-color: var(--color-mx-primary); }
-.mx-input::placeholder { color: var(--color-mx-text-dim); }
+.mx-input:focus { border-color: var(--mx-primary); }
+.mx-input::placeholder { color: var(--mx-text-dim); }
diff --git a/frontend/web/src/main.tsx b/frontend/web/src/main.tsx
index 2caafe8..a09e726 100644
--- a/frontend/web/src/main.tsx
+++ b/frontend/web/src/main.tsx
@@ -3,6 +3,7 @@ import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'
import './index.css'
+import './store/themeStore' // Initialize theme (light mode default, follows system)
createRoot(document.getElementById('root')!).render(
diff --git a/frontend/web/src/pages/LoginPage.tsx b/frontend/web/src/pages/LoginPage.tsx
index f8a4519..385d1c3 100644
--- a/frontend/web/src/pages/LoginPage.tsx
+++ b/frontend/web/src/pages/LoginPage.tsx
@@ -25,20 +25,20 @@ export default function LoginPage() {
}
return (
-