feat(dashboard): 主页三视图认知重构与双方案视觉系统

- 今日/成长/世界三视图架构：欢迎区固定首屏，视图懒挂载+常驻保留状态
- 双方案表面语言：深海毛玻璃发光 / 穹顶平面阴影，跟随主题可独立覆盖（设置页三选一+穹顶星云开关）
- 3D 模块空间语义分环重排：行动/产出/扩展分组+左右对称心智地图（含位置快照测试）
- 世界视图留存生态布局优化：成就墙 9 列网格、行高协调
- DashboardPage 922 行拆分为数据 hooks + 视图组件（单文件 ≤300 行规范）

Author: Aparencia

client/src/features/dashboard/components/DashboardCard.test.tsx

@@ -0,0 +1,68 @@
+/**
+ * DashboardCard 组件测试 — 双方案表面语言分支
+ *
+ * 验证 deep-sea（毛玻璃发光系）与 aurora-dome（平面阴影系）渲染出不同的 class 组合，
+ * 保证「两套方案非换色」的结构性差异在卡片容器层成立。
+ *
+ * @ai-context: 覆盖 DashboardCard 双 scheme 表面样式分支。
+ */
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import { DashboardCard } from './DashboardCard';
+
+// mock useHomeScheme：组件依赖 appSettingsStore（Dexie）与 useThemeStore，单测注入固定 scheme
+const mockUseHomeScheme = vi.fn();
+vi.mock('../hooks/useHomeScheme', () => ({
+  useHomeScheme: () => mockUseHomeScheme(),
+}));
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe('DashboardCard（双方案表面语言）', () => {
+  beforeEach(() => {
+    mockUseHomeScheme.mockReturnValue({ scheme: 'deep-sea' });
+  });
+
+  it('deep-sea 渲染毛玻璃系（backdrop-blur + 半透明底 + 细边框）', () => {
+    // Arrange & Act
+    render(<DashboardCard className="extra">内容</DashboardCard>);
+    const card = screen.getByText('内容');
+
+    // Assert
+    expect(card.className).toContain('backdrop-blur-sm');
+    expect(card.className).toContain('bg-bg-elevated/30');
+    expect(card.className).toContain('border-border/15');
+    expect(card.className).not.toContain('shadow-kb-sm');
+    expect(card.className).toContain('extra');
+  });
+
+  it('aurora-dome 渲染平面系（不透明底 + 浅阴影 + 无 blur）', () => {
+    // Arrange
+    mockUseHomeScheme.mockReturnValue({ scheme: 'aurora-dome' });
+
+    // Act
+    render(<DashboardCard>内容</DashboardCard>);
+    const card = screen.getByText('内容');
+
+    // Assert
+    expect(card.className).toContain('shadow-kb-sm');
+    expect(card.className).toContain('bg-bg-elevated');
+    expect(card.className).toContain('border-border/30');
+    expect(card.className).not.toContain('backdrop-blur-sm');
+    expect(card.className).not.toContain('bg-bg-elevated/30');
+  });
+
+  it('可点击卡片 deep-sea 下带 hover 光晕与指针样式', () => {
+    // Arrange & Act
+    render(<DashboardCard onClick={() => {}}>按钮卡</DashboardCard>);
+    const card = screen.getByText('按钮卡');
+
+    // Assert
+    expect(card.className).toContain('cursor-pointer');
+    expect(card.className).toContain('hover:bg-bg-elevated/50');
+    expect(card.className).toMatch(/hover:shadow-\[0_0_24px/);
+  });
+});

client/src/features/dashboard/components/DashboardCard.tsx

@@ -0,0 +1,73 @@
+/**
+ * DashboardCard — 三视图统一卡片容器（双方案表面语言）
+ *
+ * 尺寸固定化规范：圆角/内边距/图标尺寸由本组件统一，视图内不出现裸的 backdrop-blur/shadow 硬编码。
+ * 双方案分支（结构性差异非换色）：
+ * - deep-sea（深海）：毛玻璃 + 细边框 + hover 模块色边缘光晕
+ * - aurora-dome（穹顶）：不透明平面 + 浅阴影（hover 加深）+ 边框
+ *
+ * @ai-context: 首页统一卡片容器——双主题表面语言分支。
+ */
+import { cn } from '@/lib/utils';
+import { useHomeScheme } from '../hooks/useHomeScheme';
+import type { ReactNode, KeyboardEvent } from 'react';
+
+interface DashboardCardProps {
+  children: ReactNode;
+  className?: string;
+  /** hover 光晕/阴影使用的模块色（deep-sea 下生效），如 'pomodoro' */
+  accent?: 'pomodoro' | 'note' | 'flashcard' | 'feynman' | 'brand' | 'default';
+  onClick?: () => void;
+  onKeyDown?: (e: KeyboardEvent) => void;
+  role?: string;
+  tabIndex?: number;
+  'aria-label'?: string;
+}
+
+const ACCENT_GLOW: Record<NonNullable<DashboardCardProps['accent']>, string> = {
+  pomodoro: 'hover:shadow-[0_0_24px_-6px_rgba(249,115,22,0.45)]',
+  note: 'hover:shadow-[0_0_24px_-6px_rgba(59,130,246,0.45)]',
+  flashcard: 'hover:shadow-[0_0_24px_-6px_rgba(16,185,129,0.45)]',
+  feynman: 'hover:shadow-[0_0_24px_-6px_rgba(139,92,246,0.45)]',
+  brand: 'hover:shadow-[0_0_24px_-6px_rgba(99,102,241,0.45)]',
+  default: 'hover:shadow-[0_0_24px_-6px_rgba(255,255,255,0.25)]',
+};
+
+export function DashboardCard({
+  children,
+  className,
+  accent = 'default',
+  onClick,
+  onKeyDown,
+  role,
+  tabIndex,
+  'aria-label': ariaLabel,
+}: DashboardCardProps) {
+  const { scheme } = useHomeScheme();
+
+  return (
+    <div
+      role={role}
+      tabIndex={tabIndex}
+      aria-label={ariaLabel}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      className={cn(
+        'rounded-kb-xl transition-all duration-beat-x3',
+        scheme === 'deep-sea'
+          ? cn(
+              'border border-border/15 bg-bg-elevated/30 backdrop-blur-sm',
+              onClick && 'cursor-pointer hover:bg-bg-elevated/50',
+              ACCENT_GLOW[accent],
+            )
+          : cn(
+              'border border-border/30 bg-bg-elevated shadow-kb-sm',
+              onClick && 'cursor-pointer hover:shadow-kb-md',
+            ),
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

client/src/features/dashboard/components/DashboardWelcome.tsx

@@ -0,0 +1,66 @@
+/**
+ * DashboardWelcome — 欢迎区（全局门面，固定首屏）
+ *
+ * 认知任务：回归奖赏（宪法第二条：久别返回的第一反馈永远是"欢迎回来"性质）+ 归属感。
+ * 三视图共享：视图切换时欢迎区不动，减少视觉跳动（注意力残留最小化）。
+ * StreakBubble 内嵌右上角（即时反馈，习惯循环的奖励端）。
+ *
+ * @ai-context: 首页全局欢迎区。
+ */
+import { Suspense, lazy } from 'react';
+import { motion } from 'framer-motion';
+import { Sparkles } from 'lucide-react';
+import { SPRING, fadeInUp } from '@/lib/animation/springConfig';
+import ModuleRitualHeader from '@/components/ui/ModuleRitualHeader';
+import { getTodayLabel } from '../utils/dashboardUtils';
+import type { StreakState } from '@/features/retention/types';
+
+// 留存组件懒加载（首屏 bundle 控制）
+const StreakBubble = lazy(() => import('@/features/retention/components/StreakBubble').then(m => ({ default: m.StreakBubble })));
+
+interface DashboardWelcomeProps {
+  greetingText: string;
+  streakDays: number;
+  streakState: StreakState | null;
+}
+
+export function DashboardWelcome({ greetingText, streakDays, streakState }: DashboardWelcomeProps) {
+  return (
+    <section className="relative w-full overflow-hidden">
+      <motion.div
+        className="relative max-w-[1100px] mx-auto px-6 pt-rhythm-xl pb-rhythm-md"
+        initial="hidden"
+        animate="visible"
+      >
+        {/* 连续打卡气泡：布局内嵌欢迎区右上（即时反馈） */}
+        <div className="absolute top-6 right-6 z-10 hidden md:block">
+          <Suspense fallback={null}>
+            <StreakBubble streakState={streakState} />
+          </Suspense>
+        </div>
+
+        <motion.div className="mb-rhythm-md" {...fadeInUp}>
+          <div className="flex items-start gap-3">
+            <ModuleRitualHeader sealChar="星" sealColor="#6366F1" compact />
+            <div>
+              <h1 className="text-d2 font-semibold text-text-primary tracking-tight mb-2">
+                {greetingText}
+              </h1>
+              <p className="text-b2 text-text-tertiary">{getTodayLabel()}</p>
+            </div>
+          </div>
+          {streakDays > 0 && (
+            <motion.span
+              className="inline-flex items-center gap-1 mt-3 px-3 py-1 rounded-kb-full bg-brand-500/10 text-brand-500 text-c1 font-medium"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ ...SPRING.bouncy, delay: 0.3 }}
+            >
+              <Sparkles className="w-3 h-3" /> 连续学习 {streakDays} 天
+            </motion.span>
+          )}
+        </motion.div>
+      </motion.div>
+    </section>
+  );
+}

client/src/features/dashboard/components/deep-sea/creatures/AnglerfishAchievements.tsx

@@ -63,8 +63,8 @@ export default function AnglerfishAchievements() {
         </div>
       </div>
 
-      {/* 成就网格 */}
-      <div className="grid grid-cols-4 gap-2">
+      {/* 成就网格：桌面 9 列（18 项排 2 行，横向徽章横幅）；窄屏回退 4 列 */}
+      <div className="grid grid-cols-4 md:grid-cols-9 gap-2">
         {ACHIEVEMENT_DEFS.map((def, i) => {
           const Icon = ICON_MAP[def.icon] ?? Timer;
           const unlocked = unlockedMap[def.key];

client/src/features/dashboard/components/views/DashboardViewSwitcher.tsx

@@ -0,0 +1,65 @@
+/**
+ * DashboardViewSwitcher — 三视图分段控制器（今日/成长/世界）
+ *
+ * 认知架构入口：一个视图 = 一个心理模式。切换即切换认知任务。
+ * 双方案表面语言分支：deep-sea 毛玻璃胶囊 / aurora-dome 平面胶囊。
+ * sticky 顶部常驻，保证切换入口随时可达。
+ *
+ * @ai-context: 首页三视图切换器。
+ */
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+import type { HomeScheme } from '../../hooks/useHomeScheme';
+
+export type DashboardView = 'today' | 'growth' | 'world';
+
+const VIEW_TABS: Array<{ id: DashboardView; label: string }> = [
+  { id: 'today', label: '今日' },
+  { id: 'growth', label: '成长' },
+  { id: 'world', label: '世界' },
+];
+
+interface DashboardViewSwitcherProps {
+  view: DashboardView;
+  onChange: (v: DashboardView) => void;
+  scheme: HomeScheme;
+}
+
+export function DashboardViewSwitcher({ view, onChange, scheme }: DashboardViewSwitcherProps) {
+  return (
+    <div className="sticky top-0 z-20 max-w-[1100px] mx-auto px-6 pt-3 pb-1">
+      <motion.div
+        initial={{ opacity: 0, y: -8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+        role="tablist"
+        aria-label="首页视图切换"
+        className={cn(
+          'flex items-center gap-1 p-1 w-fit mx-auto rounded-kb-lg border',
+          scheme === 'deep-sea'
+            ? 'bg-bg-secondary/80 backdrop-blur-sm border-border/40'
+            : 'bg-bg-elevated shadow-kb-sm border-border/30',
+        )}
+      >
+        {VIEW_TABS.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            role="tab"
+            aria-selected={view === tab.id}
+            onClick={() => onChange(tab.id)}
+            className={cn(
+              'px-6 py-2 rounded-kb-md text-b2 font-medium',
+              'transition-all duration-beat-x2 hover:scale-[1.02] active:scale-[0.98]',
+              view === tab.id
+                ? 'bg-bg-elevated text-text-primary shadow-kb-sm border border-border/30'
+                : 'text-text-tertiary hover:text-text-secondary border border-transparent',
+            )}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </motion.div>
+    </div>
+  );
+}