提交修改

2026-06-29 16:49:54 +08:00
parent 545329ac40
commit b01a5f91c3
43 changed files with 740 additions and 338 deletions
@@ -4,31 +4,44 @@
   padding: 0;
 }
 
- :root {
-   --color-primary: #FF6B35;
-   --color-primary-light: #FF8C5A;
-   --color-primary-gradient: linear-gradient(135deg, #FF6B35, #FF4D6D);
-   --color-accent: #7209B7;
-   --color-bg: #F5F5F7;
-   --color-card: #FFFFFF;
-   --color-text: #1D1D1F;
-   --color-text-secondary: #86868B;
-   --color-border: #E5E5EA;
-   --color-success: #34C759;
-   --color-warning: #FF9500;
-   --color-error: #FF3B30;
-   --radius-card: 12px;
-   --radius-button: 10px;
-   --font-base: -apple-system, BlinkMacSystemFont, 'SF Pro', 'PingFang SC', sans-serif;
- }
- 
- body {
-   font-family: var(--font-base);
-   background: var(--color-bg);
-   color: var(--color-text);
-   line-height: 1.5;
-   -webkit-font-smoothing: antialiased;
- }
+:root {
+    --color-primary: #FF6B35;
+    --color-primary-light: #FF8C5A;
+    --color-primary-gradient: linear-gradient(135deg, #FF6B35, #FF4D6D);
+    --color-accent: #7209B7;
+    --color-bg: #F5F5F7;
+    --color-card: #FFFFFF;
+    --color-text: #1D1D1F;
+    --color-text-secondary: #86868B;
+    --color-border: #E5E5EA;
+    --color-nav-bg: rgba(245,245,247,0.92);
+    --color-success: #34C759;
+    --color-warning: #FF9500;
+    --color-error: #FF3B30;
+    --radius-card: 12px;
+    --radius-button: 10px;
+    --font-base: -apple-system, BlinkMacSystemFont, 'SF Pro', 'PingFang SC', sans-serif;
+  }
+
+  [data-theme="dark"] {
+    --color-bg: #1C1C1E;
+    --color-card: #2C2C2E;
+    --color-text: #F5F5F7;
+    --color-text-secondary: #98989D;
+    --color-border: #38383A;
+    --color-nav-bg: rgba(28,28,30,0.92);
+    --color-accent: #BB86FC;
+    --color-error: #FF453A;
+  }
+
+  body {
+    font-family: var(--font-base);
+    background: var(--color-bg);
+    color: var(--color-text);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    transition: background 0.3s, color 0.3s;
+  }
 
 /* iOS 风格列表 */
 .ios-list {
@@ -1,15 +1,18 @@
- import type { Metadata } from 'next'
- import './globals.css'
- 
- export const metadata: Metadata = {
-   title: '寸进 — 日日皆有成长',
-   description: '寸进（InchStep）综合成长打卡平台',
- }
- 
- export default function RootLayout({ children }: { children: React.ReactNode }) {
-   return (
-     <html lang="zh-CN">
-       <body>{children}</body>
-     </html>
-   )
- }
+import type { Metadata } from 'next'
+import './globals.css'
+import ThemeProvider from '@/components/ThemeProvider'
+
+export const metadata: Metadata = {
+  title: '寸进 — 日日皆有成长',
+  description: '寸进（InchStep）综合成长打卡平台',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="zh-CN" suppressHydrationWarning>
+      <body>
+        <ThemeProvider>{children}</ThemeProvider>
+      </body>
+    </html>
+  )
+}
@@ -49,7 +49,7 @@ function Dashboard() {

  return (
    <>
-      <NavBar title="寸进" showLogout />
+      <NavBar title="寸进" />

      <div className="card" style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
@@ -1,59 +1,71 @@
 'use client'
- 
- import { useAuth } from './AuthProvider'
- import { useRouter } from 'next/navigation'
- 
- interface NavBarProps {
-   title: string
-   showBack?: boolean
-   showLogout?: boolean
- }
- 
- export default function NavBar({ title, showBack = false, showLogout = false }: NavBarProps) {
-   const { logout, user } = useAuth()
-   const router = useRouter()
- 
-   return (
-     <nav style={{
-       position: 'sticky', top: 0, zIndex: 100,
-       background: 'rgba(245,245,247,0.92)',
-       backdropFilter: 'blur(20px)',
-       WebkitBackdropFilter: 'blur(20px)',
-       borderBottom: '0.5px solid #E5E5EA',
-       padding: '12px 16px',
-       display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-     }}>
-       <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 60 }}>
-         {showBack && (
-           <button
-             onClick={() => router.back()}
-             style={{ background: 'none', border: 'none', fontSize: 20, cursor: 'pointer', padding: 4 }}
-           >
-             ←
-           </button>
-         )}
-         {showLogout && user && (
-           <button
-             onClick={() => router.push('/profile')}
-             style={{ background: 'none', border: 'none', fontSize: 15, cursor: 'pointer', color: '#FF6B35', padding: 4 }}
-           >
-             我的
-           </button>
-         )}
-       </div>
- 
-       <span style={{ fontSize: 17, fontWeight: 600, flex: 1, textAlign: 'center' }}>{title}</span>
- 
-       <div style={{ minWidth: 60, textAlign: 'right' }}>
-         {showLogout && (
-           <button
-             onClick={logout}
-             style={{ background: 'none', border: 'none', fontSize: 15, cursor: 'pointer', color: '#86868B', padding: 4 }}
-           >
-             退出
-           </button>
-         )}
-       </div>
-     </nav>
-   )
- }
+
+import { useRouter } from 'next/navigation'
+import { useTheme } from './ThemeProvider'
+import { useAuth } from './AuthProvider'
+
+interface NavBarProps {
+  title: string
+  showBack?: boolean
+  showLogout?: boolean
+}
+
+export default function NavBar({ title, showBack = false, showLogout = false }: NavBarProps) {
+  const { logout, user } = useAuth()
+  const router = useRouter()
+  const { mode, toggle } = useTheme()
+
+  return (
+    <nav style={{
+      position: 'sticky', top: 0, zIndex: 100,
+      background: 'var(--color-nav-bg)',
+      backdropFilter: 'blur(20px)',
+      WebkitBackdropFilter: 'blur(20px)',
+      borderBottom: '0.5px solid var(--color-border)',
+      padding: '12px 16px',
+      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 60 }}>
+        {showBack && (
+          <button
+            onClick={() => router.back()}
+            style={{ background: 'none', border: 'none', fontSize: 20, cursor: 'pointer', padding: 4, color: 'var(--color-text)' }}
+          >
+            ←
+          </button>
+        )}
+        {showLogout && user && (
+          <button
+            onClick={() => router.push('/profile')}
+            style={{ background: 'none', border: 'none', fontSize: 15, cursor: 'pointer', color: 'var(--color-primary)', padding: 4 }}
+          >
+            我的
+          </button>
+        )}
+      </div>
+
+      <span style={{ fontSize: 17, fontWeight: 600, flex: 1, textAlign: 'center', color: 'var(--color-text)' }}>{title}</span>
+
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8, minWidth: 60 }}>
+        <button
+          onClick={toggle}
+          title={mode === 'light' ? '切换暗黑模式' : '切换明亮模式'}
+          style={{
+            background: 'none', border: 'none', fontSize: 18, cursor: 'pointer', padding: 4,
+            color: 'var(--color-text-secondary)', lineHeight: 1,
+          }}
+        >
+          {mode === 'light' ? '🌙' : '☀️'}
+        </button>
+        {showLogout && (
+          <button
+            onClick={logout}
+            style={{ background: 'none', border: 'none', fontSize: 15, cursor: 'pointer', color: 'var(--color-text-secondary)', padding: 4 }}
+          >
+            退出
+          </button>
+        )}
+      </div>
+    </nav>
+  )
+}
@@ -22,11 +22,11 @@ export default function TabBar() {

  return (
    <nav style={{
-      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 100,
-      background: 'rgba(245,245,247,0.95)',
-      backdropFilter: 'blur(20px)',
-      WebkitBackdropFilter: 'blur(20px)',
-      borderTop: '0.5px solid #E5E5EA',
+        position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 100,
+        background: 'var(--color-nav-bg)',
+        backdropFilter: 'blur(20px)',
+        WebkitBackdropFilter: 'blur(20px)',
+        borderTop: '0.5px solid var(--color-border)',
      display: 'flex', justifyContent: 'space-around',
      padding: '6px 0 20px',
    }}>
@@ -37,7 +37,7 @@ export default function TabBar() {
            style={{
              background: 'none', border: 'none', cursor: 'pointer',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
-              fontSize: 10, color: active ? '#FF6B35' : '#86868B', fontWeight: active ? 600 : 400,
+              fontSize: 10, color: active ? 'var(--color-primary)' : 'var(--color-text-secondary)', fontWeight: active ? 600 : 400,
              transition: 'color 0.2s',
            }}>
            <span style={{ fontSize: 22 }}>{tab.icon}</span>
@@ -0,0 +1,59 @@
+'use client'
+
+import { createContext, useContext, useEffect, useState, useCallback } from 'react'
+import type { ThemeMode } from '@/constants/theme'
+
+interface IThemeContext {
+  mode: ThemeMode
+  toggle: () => void
+  setMode: (mode: ThemeMode) => void
+}
+
+const ThemeContext = createContext<IThemeContext>({
+  mode: 'light',
+  toggle: () => {},
+  setMode: () => {},
+})
+
+export function useTheme() {
+  return useContext(ThemeContext)
+}
+
+export default function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [mode, setModeState] = useState<ThemeMode>('light')
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    const stored = localStorage.getItem('inchstep-theme') as ThemeMode | null
+    if (stored === 'light' || stored === 'dark') {
+      setModeState(stored)
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      setModeState('dark')
+    }
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (!mounted) return
+    document.documentElement.setAttribute('data-theme', mode)
+    localStorage.setItem('inchstep-theme', mode)
+  }, [mode, mounted])
+
+  const toggle = useCallback(() => {
+    setModeState(prev => (prev === 'light' ? 'dark' : 'light'))
+  }, [])
+
+  const setMode = useCallback((m: ThemeMode) => {
+    setModeState(m)
+  }, [])
+
+  if (!mounted) {
+    return <div style={{ visibility: 'hidden' }}>{children}</div>
+  }
+
+  return (
+    <ThemeContext.Provider value={{ mode, toggle, setMode }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
@@ -0,0 +1,50 @@
+export type ThemeMode = 'light' | 'dark'
+
+export interface IThemeColors {
+  primary: string
+  primaryLight: string
+  primaryGradient: string
+  accent: string
+  bg: string
+  card: string
+  text: string
+  textSecondary: string
+  border: string
+  navBg: string
+  success: string
+  warning: string
+  error: string
+}
+
+export const THEME: Record<ThemeMode, IThemeColors> = {
+  light: {
+    primary: '#FF6B35',
+    primaryLight: '#FF8C5A',
+    primaryGradient: 'linear-gradient(135deg, #FF6B35, #FF4D6D)',
+    accent: '#7209B7',
+    bg: '#F5F5F7',
+    card: '#FFFFFF',
+    text: '#1D1D1F',
+    textSecondary: '#86868B',
+    border: '#E5E5EA',
+    navBg: 'rgba(245,245,247,0.92)',
+    success: '#34C759',
+    warning: '#FF9500',
+    error: '#FF3B30',
+  },
+  dark: {
+    primary: '#FF6B35',
+    primaryLight: '#FF8C5A',
+    primaryGradient: 'linear-gradient(135deg, #FF6B35, #FF4D6D)',
+    accent: '#BB86FC',
+    bg: '#1C1C1E',
+    card: '#2C2C2E',
+    text: '#F5F5F7',
+    textSecondary: '#98989D',
+    border: '#38383A',
+    navBg: 'rgba(28,28,30,0.92)',
+    success: '#34C759',
+    warning: '#FF9500',
+    error: '#FF453A',
+  },
+}
@@ -10,5 +10,5 @@ export {
  truncate,
  shortId,
  CYCLE_LABEL,
-} from '../../shared/utils'
-export type { CheckinCategory } from '../../shared/utils'
+} from '@shared/utils'
+export type { CheckinCategory } from '@shared/utils'