feat(portal): add light/dark theme sync and OA drive navigation

Unify chat and OA drive appearance with shared memind-theme storage, default light mode, and cross-frame sync so users can switch themes from chat or the drive shell.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/App.tsx

@@ -91,6 +91,7 @@ function AuthenticatedApp({
             }
           : undefined
       }
+      onOpenOaDrive={user ? () => navigate('/space/oa/drive') : undefined}
       onOpenPage={user ? (pageId) => navigate(`/space/page/${pageId}`) : undefined}
       onOpenAdmin={
         user?.role === 'admin'
@@ -121,6 +122,7 @@ function AuthenticatedApp({
           element={<FeedbackRoutes user={user} onLogout={handleLogout} />}
         />
         <Route path="/health" element={<Navigate to="/" replace />} />
+        <Route path="/oa-drive" element={<Navigate to="/space/oa/drive" replace />} />
         <Route path="/" element={chatElement} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>

src/components/ChatView.tsx

@@ -18,6 +18,7 @@ import { WechatBindPrompt } from './WechatBindPrompt';
 import { WechatAccountButton } from './WechatAccountButton';
 import { ChatHeaderMoreMenu } from './ChatHeaderMoreMenu';
 import { NotificationCenter } from './NotificationCenter';
+import { ThemeToggle } from './ThemeToggle';
 import { GoalRunAwaitingBanner } from './GoalRunAwaitingBanner';
 import { HealthChannelBanner } from './HealthChannelBanner';
 import { HealthAlertsPanel } from './HealthAlertsPanel';
@@ -173,6 +174,7 @@ export function ChatView({
   onGrantedSkillsUpdate,
   onLogout,
   onOpenSpace,
+  onOpenOaDrive,
   onOpenPage,
   onOpenAdmin,
   onOpenFeedback,
@@ -184,6 +186,7 @@ export function ChatView({
   onGrantedSkillsUpdate?: (skills: string[]) => void;
   onLogout?: () => void;
   onOpenSpace?: (target?: { categoryCode?: MindSpaceSaveCategory; pageId?: string }) => void;
+  onOpenOaDrive?: () => void;
   onOpenPage?: (pageId: string) => void;
   onOpenAdmin?: () => void;
   onOpenFeedback?: () => void;
@@ -327,6 +330,9 @@ export function ChatView({
       : pendingSessionTitle;
 
   const moreMenuItems = [
+    ...(onOpenOaDrive
+      ? [{ id: 'oa-drive', label: 'OA 网盘', onClick: () => onOpenOaDrive() }]
+      : []),
     ...(onOpenAdmin
       ? [{ id: 'admin', label: '管理', onClick: () => onOpenAdmin() }]
       : []),
@@ -427,6 +433,16 @@ export function ChatView({
                 管理
               </button>
             )}
+            {onOpenOaDrive && (
+              <button
+                type="button"
+                className="ghost-btn"
+                data-analytics-action="open_oa_drive"
+                onClick={() => onOpenOaDrive()}
+              >
+                OA 网盘
+              </button>
+            )}
             {onOpenSpace && (
               <button
                 ref={spaceButtonRef}
@@ -438,6 +454,7 @@ export function ChatView({
                 我的空间
               </button>
             )}
+            <ThemeToggle />
             {user && <WechatAccountButton returnTo={window.location.pathname} />}
             {onLogout && (
               <button type="button" className="ghost-btn logout-btn" data-analytics-action="logout" onClick={onLogout}>
@@ -501,6 +518,7 @@ export function ChatView({
                 </svg>
               </button>
             )}
+            <ThemeToggle className="ghost-btn theme-toggle-btn theme-toggle-btn-mobile" />
             <ChatHeaderMoreMenu
               items={moreMenuItems}
               returnTo={window.location.pathname}

src/components/ThemeToggle.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { getStoredTheme, toggleTheme, type MemindTheme } from '../utils/theme';
+
+export function ThemeToggle({
+  className = 'ghost-btn theme-toggle-btn',
+}: {
+  className?: string;
+}) {
+  const [theme, setTheme] = useState<MemindTheme>(() => getStoredTheme());
+
+  useEffect(() => {
+    const onChange = (event: Event) => {
+      const detail = (event as CustomEvent<{ theme: MemindTheme }>).detail;
+      if (detail?.theme) setTheme(detail.theme);
+    };
+    window.addEventListener('memind-theme-change', onChange);
+    return () => window.removeEventListener('memind-theme-change', onChange);
+  }, []);
+
+  return (
+    <button
+      type="button"
+      className={className}
+      data-analytics-action="toggle_theme"
+      aria-label={theme === 'light' ? '切换深色模式' : '切换浅色模式'}
+      title={theme === 'light' ? '切换深色模式' : '切换浅色模式'}
+      onClick={() => setTheme(toggleTheme())}
+    >
+      {theme === 'light' ? '深色' : '浅色'}
+    </button>
+  );
+}

src/index.css

@@ -1,7 +1,54 @@
-:root {
-  color-scheme: dark;
+:root,
+[data-theme='light'] {
+  color-scheme: light;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 
+  --color-bg-base: #f4f1ea;
+  --color-bg-surface: #fffaf0;
+  --color-bg-elevated: #ffffff;
+  --color-bg-active: #e8f0ea;
+  --color-bg-code: #f0ebe0;
+  --color-bg-warning: #fff6e5;
+  --color-bg-error: #fff0f0;
+  --color-bg-info: #eef6ff;
+
+  --color-text-primary: #18211d;
+  --color-text-secondary: #3d4a44;
+  --color-text-muted: #52605a;
+  --color-text-faint: #6b7872;
+  --color-text-meta: #7a8780;
+  --color-text-link: #2f6f57;
+  --color-text-error: #b42318;
+  --color-text-info: #2458a6;
+
+  --color-border: rgba(24, 33, 29, 0.12);
+  --color-border-input: rgba(24, 33, 29, 0.18);
+  --color-border-warning: rgba(238, 176, 78, 0.45);
+  --color-border-input-focus: #2f6f57;
+
+  --color-accent: #2f6f57;
+  --color-accent-user: #2458a6;
+  --color-danger: #c4453d;
+
+  --radius-sm: 8px;
+  --radius-xs: 4px;
+  --radius-md: 10px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-pill: 999px;
+
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 12px;
+  --space-lg: 16px;
+
+  background: var(--color-bg-base);
+  color: var(--color-text-primary);
+}
+
+[data-theme='dark'] {
+  color-scheme: dark;
+
   --color-bg-base: #0f1419;
   --color-bg-surface: #121820;
   --color-bg-elevated: #1c2735;
@@ -28,21 +75,6 @@
   --color-accent: #3d8bfd;
   --color-accent-user: #2458a6;
   --color-danger: #c4453d;
-
-  --radius-sm: 8px;
-  --radius-xs: 4px;
-  --radius-md: 10px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-  --radius-pill: 999px;
-
-  --space-xs: 4px;
-  --space-sm: 8px;
-  --space-md: 12px;
-  --space-lg: 16px;
-
-  background: var(--color-bg-base);
-  color: var(--color-text-primary);
 }
 
 * {
@@ -76,11 +108,9 @@ body,
   position: relative;
   overflow: hidden;
   background:
-    radial-gradient(circle at 50% 22%, rgba(86, 128, 255, 0.12), transparent 18%),
-    radial-gradient(circle at 50% 56%, rgba(107, 138, 209, 0.08), transparent 34%),
-    radial-gradient(circle at 12% 92%, rgba(67, 107, 180, 0.08), transparent 28%),
-    radial-gradient(circle at 88% 8%, rgba(160, 97, 255, 0.05), transparent 22%),
-    linear-gradient(180deg, #08101d 0%, #0a1220 44%, #0c1320 100%);
+    radial-gradient(circle at 50% 22%, rgba(47, 111, 87, 0.08), transparent 18%),
+    radial-gradient(circle at 50% 56%, rgba(238, 176, 78, 0.06), transparent 34%),
+    linear-gradient(180deg, #fffaf0 0%, #f4f1ea 44%, #ece6d9 100%);
 }
 
 .app-home::before {
@@ -88,6 +118,21 @@ body,
   position: absolute;
   inset: 0;
   pointer-events: none;
+  background:
+    linear-gradient(90deg, rgba(24, 33, 29, 0.02), transparent 18%, transparent 82%, rgba(24, 33, 29, 0.02)),
+    radial-gradient(circle at center, transparent 0%, rgba(244, 241, 234, 0.18) 72%, rgba(244, 241, 234, 0.42) 100%);
+}
+
+[data-theme='dark'] .app-home {
+  background:
+    radial-gradient(circle at 50% 22%, rgba(86, 128, 255, 0.12), transparent 18%),
+    radial-gradient(circle at 50% 56%, rgba(107, 138, 209, 0.08), transparent 34%),
+    radial-gradient(circle at 12% 92%, rgba(67, 107, 180, 0.08), transparent 28%),
+    radial-gradient(circle at 88% 8%, rgba(160, 97, 255, 0.05), transparent 22%),
+    linear-gradient(180deg, #08101d 0%, #0a1220 44%, #0c1320 100%);
+}
+
+[data-theme='dark'] .app-home::before {
   background:
     linear-gradient(90deg, rgba(255, 255, 255, 0.015), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.015)),
     radial-gradient(circle at center, transparent 0%, rgba(2, 8, 18, 0.18) 72%, rgba(2, 8, 18, 0.42) 100%);
@@ -897,16 +942,32 @@ body,
 .header-home .ghost-btn,
 .header-home .header-icon-btn,
 .header-home .header-menu-btn {
+  background: rgba(24, 33, 29, 0.04);
+  color: rgba(24, 33, 29, 0.82);
+  border: 1px solid rgba(24, 33, 29, 0.12);
+}
+
+.header-home .header-title {
+  color: rgba(24, 33, 29, 0.96);
+}
+
+.header-home .header-sub {
+  color: rgba(24, 33, 29, 0.62);
+}
+
+[data-theme='dark'] .header-home .ghost-btn,
+[data-theme='dark'] .header-home .header-icon-btn,
+[data-theme='dark'] .header-home .header-menu-btn {
   background: rgba(255, 255, 255, 0.04);
   color: rgba(220, 231, 248, 0.82);
   border: 1px solid rgba(103, 123, 156, 0.22);
 }
 
-.header-home .header-title {
+[data-theme='dark'] .header-home .header-title {
   color: rgba(238, 243, 255, 0.96);
 }
 
-.header-home .header-sub {
+[data-theme='dark'] .header-home .header-sub {
   color: rgba(180, 193, 219, 0.74);
 }
 
@@ -3188,8 +3249,18 @@ body,
 }
 
 .chat-input-shell-home {
-  border: 1px solid rgba(96, 118, 153, 0.38);
+  border: 1px solid rgba(24, 33, 29, 0.14);
   border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 240, 0.96)),
+    rgba(255, 255, 255, 0.94);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
+    0 16px 36px rgba(24, 33, 29, 0.08);
+}
+
+[data-theme='dark'] .chat-input-shell-home {
+  border: 1px solid rgba(96, 118, 153, 0.38);
   background:
     linear-gradient(180deg, rgba(18, 27, 42, 0.94), rgba(13, 20, 32, 0.96)),
     rgba(10, 18, 30, 0.94);
@@ -3216,12 +3287,20 @@ body,
   padding-top: 14px;
   padding-bottom: 14px;
   font-size: 14px;
-  color: #edf4ff;
+  color: var(--color-text-primary);
   background: transparent;
   border-color: transparent;
 }
 
 .chat-input-row-home textarea.input.chat-input-field::placeholder {
+  color: var(--color-text-muted);
+}
+
+[data-theme='dark'] .chat-input-row-home textarea.input.chat-input-field {
+  color: #edf4ff;
+}
+
+[data-theme='dark'] .chat-input-row-home textarea.input.chat-input-field::placeholder {
   color: rgba(175, 191, 216, 0.72);
 }
 
@@ -3367,10 +3446,18 @@ body,
 }
 
 .chat-input-row-home .chat-input-task-status-text {
-  color: rgba(175, 191, 216, 0.72);
+  color: var(--color-text-muted);
 }
 
 .chat-input-row-home .chat-input-task-status-dots span {
+  background: var(--color-text-muted);
+}
+
+[data-theme='dark'] .chat-input-row-home .chat-input-task-status-text {
+  color: rgba(175, 191, 216, 0.72);
+}
+
+[data-theme='dark'] .chat-input-row-home .chat-input-task-status-dots span {
   background: rgba(175, 191, 216, 0.72);
 }
 
@@ -3766,6 +3853,13 @@ body,
 
 .chat-input-row-home .chat-image-upload-trigger,
 .chat-input-row-home .voice-btn {
+  border-color: var(--color-border-input);
+  background: var(--color-bg-elevated);
+  color: var(--color-text-secondary);
+}
+
+[data-theme='dark'] .chat-input-row-home .chat-image-upload-trigger,
+[data-theme='dark'] .chat-input-row-home .voice-btn {
   border-color: rgba(110, 132, 168, 0.3);
   background: rgba(170, 192, 228, 0.08);
   color: #d7e4fb;
@@ -12910,19 +13004,61 @@ body,
   display: flex;
   flex-direction: column;
   height: 100dvh;
-  background: #f4f1ea;
+  background: var(--color-bg-base);
+  color: var(--color-text-primary);
 }
 
 .oa-drive-toolbar {
   flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
   padding: 10px 16px;
-  border-bottom: 1px solid rgba(24, 33, 29, 0.08);
-  background: #fffaf0;
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-bg-surface);
+}
+
+.oa-drive-toolbar-start {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.oa-drive-toolbar-secondary {
+  opacity: 0.88;
+}
+
+.oa-drive-toolbar-end {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.oa-drive-toolbar-label {
+  color: var(--color-text-muted);
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .oa-drive-frame {
   flex: 1 1 auto;
   width: 100%;
   border: 0;
-  background: #fff;
+  background: var(--color-bg-base);
+}
+
+.theme-toggle-btn {
+  min-width: 44px;
+  padding-inline: 12px;
+}
+
+.theme-toggle-btn-mobile {
+  min-width: 0;
+  padding: 8px 10px;
+  font-size: 12px;
 }

src/main.tsx

@@ -2,8 +2,11 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { App } from './App';
+import { initTheme } from './utils/theme';
 import './index.css';
 
+initTheme();
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <BrowserRouter>

src/routes/OaDriveRoute.tsx

@@ -1,6 +1,11 @@
 import { Navigate, useNavigate } from 'react-router-dom';
+import { ThemeToggle } from '../components/ThemeToggle';
 import type { PortalUser } from '../types';
 
+function resolveUserLabel(user: PortalUser) {
+  return user.displayName?.trim() || user.username?.trim() || user.slug?.trim() || '用户';
+}
+
 export function OaDriveRoute({
   user,
 }: {
@@ -15,9 +20,22 @@ export function OaDriveRoute({
   return (
     <div className="oa-drive-shell">
       <div className="oa-drive-toolbar">
-        <button type="button" className="mindspace-inline-back" onClick={() => navigate('/space?category=oa')}>
-          返回 OA 工作区
-        </button>
+        <div className="oa-drive-toolbar-start">
+          <button type="button" className="mindspace-inline-back" onClick={() => navigate('/')}>
+            返回聊天
+          </button>
+          <button
+            type="button"
+            className="mindspace-inline-back oa-drive-toolbar-secondary"
+            onClick={() => navigate('/space?category=oa')}
+          >
+            OA 工作区
+          </button>
+        </div>
+        <div className="oa-drive-toolbar-end">
+          <span className="oa-drive-toolbar-label">{resolveUserLabel(user)} 的 OA 网盘</span>
+          <ThemeToggle />
+        </div>
       </div>
       <iframe
         className="oa-drive-frame"

src/utils/theme.ts

@@ -0,0 +1,26 @@
+export type MemindTheme = 'light' | 'dark';
+
+export const THEME_STORAGE_KEY = 'memind-theme';
+
+export function getStoredTheme(): MemindTheme {
+  const stored = localStorage.getItem(THEME_STORAGE_KEY);
+  return stored === 'dark' ? 'dark' : 'light';
+}
+
+export function applyTheme(theme: MemindTheme) {
+  const normalized: MemindTheme = theme === 'dark' ? 'dark' : 'light';
+  document.documentElement.dataset.theme = normalized;
+  document.documentElement.style.colorScheme = normalized;
+  localStorage.setItem(THEME_STORAGE_KEY, normalized);
+  window.dispatchEvent(new CustomEvent('memind-theme-change', { detail: { theme: normalized } }));
+}
+
+export function initTheme() {
+  applyTheme(getStoredTheme());
+}
+
+export function toggleTheme(): MemindTheme {
+  const next: MemindTheme = getStoredTheme() === 'light' ? 'dark' : 'light';
+  applyTheme(next);
+  return next;
+}