┌─────────────────────────────────────────────────────────────┐
│  Presentation Layer (组件层)                                 │
│  - 仅消费状态、分发 Action、订阅细粒度 Signals               │
├─────────────────────────────────────────────────────────────┤
│  Feature Store Layer (业务切片层)                            │
│  - Redux Toolkit slice / Pinia store / Signal-based store   │
│  - 封装领域逻辑、异步副作用、持久化策略                      │
├─────────────────────────────────────────────────────────────┤
│  Domain Service Layer (领域服务层)                           │
│  - WebRTC 封装、信令协议、媒体协商、设备管理                 │
│  - 纯函数/类，无框架耦合，可单测                            │
├─────────────────────────────────────────────────────────────┤
│  Infrastructure Layer (基础设施层)                           │
│  - IndexedDB/WebSocket/Worker/存储适配器                     │
└─────────────────────────────────────────────────────────────┘

// store/slices/meetingSlice.ts
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import { MeetingState, MeetingInfo, Participant, UserRole } from '@/types/meeting';
import { meetingApi } from '@/services/api';

// 异步 Thunk 封装副作用，自动生成 pending/fulfilled/rejected 三态
export const fetchMeetingDetail = createAsyncThunk(
  'meeting/fetchDetail',
  async (meetingId: string, { rejectWithValue }) => {
    try {
      const res = await meetingApi.getDetail(meetingId);
      return res.data;
    } catch (err) {
      return rejectWithValue(err.response?.data?.message ?? '获取会议详情失败');
    }
  }
);

const initialState: MeetingState = {
  currentMeeting: null,
  participants: {},
  localUser: null,
  connectionStatus: 'disconnected',
  error: null,
};

const meetingSlice = createSlice({
  name: 'meeting',
  initialState,
  reducers: {
    // 同步 reducer，Immer 内部可直接 "mutate"
    updateParticipant: (state, action: PayloadAction<Participant>) => {
      state.participants[action.payload.id] = action.payload;
    },
    removeParticipant: (state, action: PayloadAction<string>) => {
      delete state.participants[action.payload];
    },
    setLocalRole: (state, action: PayloadAction<UserRole>) => {
      if (state.localUser) state.localUser.role = action.payload;
    },
    // 批量更新：网络质量上报高频写入，避免频繁派发
    batchUpdateNetworkQuality: (state, action: PayloadAction<Record<string, number>>) => {
      Object.entries(action.payload).forEach(([uid, quality]) => {
        if (state.participants[uid]) state.participants[uid].networkQuality = quality;
      });
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchMeetingDetail.pending, (state) => {
        state.connectionStatus = 'connecting';
        state.error = null;
      })
      .addCase(fetchMeetingDetail.fulfilled, (state, action) => {
        state.currentMeeting = action.payload.meeting;
        state.participants = action.payload.participants.reduce(
          (acc, p) => ({ ...acc, [p.id]: p }),
          {}
        );
        state.connectionStatus = 'connected';
      })
      .addCase(fetchMeetingDetail.rejected, (state, action) => {
        state.connectionStatus = 'disconnected';
        state.error = action.payload as string;
      });
  },
});

// 选择器封装，组件层仅引入 selector，不直接依赖 state 结构
export const selectCurrentMeeting = (state: RootState) => state.meeting.currentMeeting;
export const selectParticipantList = (state: RootState) =>
  Object.values(state.meeting.participants);
export const selectLocalUser = (state: RootState) => state.meeting.localUser;

export const {
  updateParticipant,
  removeParticipant,
  setLocalRole,
  batchUpdateNetworkQuality,
} = meetingSlice.actions;

export default meetingSlice.reducer;

// store/middleware/wsMiddleware.ts
import { Middleware } from '@reduxjs/toolkit';
import { RootState } from '../index';
import { updateParticipant, removeParticipant } from '../slices/meetingSlice';
import { addChatMessage } from '../slices/chatSlice';

export const wsMiddleware: Middleware<{}, RootState> = (store) => (next) => (action) => {
  // 仅处理 WebSocket 相关 action
  if (action.type === 'ws/messageReceived') {
    const { event, payload } = action.payload;
    switch (event) {
      case 'user-joined':
        store.dispatch(updateParticipant(payload));
        break;
      case 'user-left':
        store.dispatch(removeParticipant(payload.userId));
        break;
      case 'chat-message':
        store.dispatch(addChatMessage(payload));
        break;
      // ... 其它事件
    }
  }
  return next(action);
};

// stores/layoutStore.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
import type { PanelKey, LayoutMode } from '@/types/ui';

export const useLayoutStore = defineStore('layout', () => {
  // State
  const visiblePanels = ref<Set<PanelKey>>(new Set(['participants', 'chat']));
  const layoutMode = ref<LayoutMode>('grid');
  const sidebarWidth = ref(280);
  const isFullscreen = ref(false);

  // Getters (computed)
  const isPanelVisible = computed(() => (key: PanelKey) => visiblePanels.value.has(key));
  const activePanelCount = computed(() => visiblePanels.value.size);

  // Actions
  function togglePanel(key: PanelKey) {
    const next = new Set(visiblePanels.value);
    next.has(key) ? next.delete(key) : next.add(key);
    visiblePanels.value = next;
  }

  function setLayoutMode(mode: LayoutMode) {
    layoutMode.value = mode;
  }

  function persistLayout() {
    localStorage.setItem('meeting:layout', JSON.stringify({
      visiblePanels: [...visiblePanels.value],
      layoutMode: layoutMode.value,
      sidebarWidth: sidebarWidth.value,
    }));
  }

  function hydrateLayout() {
    const raw = localStorage.getItem('meeting:layout');
    if (raw) {
      try {
        const data = JSON.parse(raw);
        visiblePanels.value = new Set(data.visiblePanels);
        layoutMode.value = data.layoutMode;
        sidebarWidth.value = data.sidebarWidth ?? 280;
      } catch {
        // ignore corrupt data
      }
    }
  }

  return {
    visiblePanels,
    layoutMode,
    sidebarWidth,
    isFullscreen,
    isPanelVisible,
    activePanelCount,
    togglePanel,
    setLayoutMode,
    persistLayout,
    hydrateLayout,
  };
});

// stores/plugins/persist.ts
import type { PiniaPluginContext } from 'pinia';

export function persistPlugin({ store, options }: PiniaPluginContext) {
  if (!options.persist) return;
  const key = `pinia:${store.$id}`;
  // 读取
  const saved = localStorage.getItem(key);
  if (saved) store.$patch(JSON.parse(saved));
  // 订阅变更
  store.$subscribe((_, state) => {
    localStorage.setItem(key, JSON.stringify(state));
  });
}

// main.ts 注册
pinia.use(persistPlugin);

// signals/audioLevel.ts
import { signal, computed, effect } from '@preact/signals-core'; // 或 @vueuse/core 的 useSignal
import type { ParticipantId } from '@/types/meeting';

// 单例：全局音量注册表
const audioLevels = signal<Map<ParticipantId, number>>(new Map());

// 暴露只读视图，防止外部直接修改
export const getAudioLevel = (id: ParticipantId) => audioLevels.value.get(id) ?? 0;

// 批量更新入口：由 WebRTC AudioProcessor 以 requestAnimationFrame 频率调用
export function updateAudioLevels(levels: Map<ParticipantId, number>) {
  // 结构共享：仅替换变化项，保持引用稳定
  const next = new Map(audioLevels.value);
  let changed = false;
  levels.forEach((v, k) => {
    if (next.get(k) !== v) {
      next.set(k, v);
      changed = true;
    }
  });
  if (changed) audioLevels.value = next;
}

// 组件侧消费示例（Vue 3 + @vueuse/core）
// <script setup>
// import { useSignal } from '@vueuse/core';
// import { audioLevels, getAudioLevel } from '@/signals/audioLevel';
// const levels = useSignal(audioLevels); // 自动解包为响应式
// const myLevel = computed(() => getAudioLevel(props.userId));
// </script>

用户操作 / 网络事件
       │
       ▼
┌──────────────────┐
│  Domain Service  │  (纯逻辑、可测、无框架)
│  - MediaEngine   │
│  - Signaling     │
└────────┬─────────┘
         │ 发出领域事件 (TypeScript 类/接口)
         ▼
┌──────────────────┐
│  Feature Store   │  (RTK / Pinia / Signal)
│  - 状态归一化    │
│  - 副作用编排    │
│  - 持久化/同步   │
└────────┬─────────┘
         │ 派发标准化 Action / 更新 Signal
         ▼
┌──────────────────┐
│  Presentation    │  (组件仅消费、分发)
│  - Selector/Hook │
│  - 受控/非受控   │
└──────────────────┘

// types/contracts.ts —— 单一事实来源
export interface MeetingEventMap {
  'meeting:joined': { meetingId: string; user: UserProfile };
  'meeting:left': { reason: LeaveReason };
  'media:track-added': { track: MediaStreamTrack; kind: 'audio' | 'video' };
  'media:track-removed': { trackId: string };
  'network:quality-changed': { userId: string; quality: NetworkQuality };
}

// 事件总线类型安全封装
type EventHandler<T> = (payload: T) => void;
class TypedEventBus<EventMap extends Record<string, any>> {
  private handlers = new Map<keyof EventMap, Set<EventHandler<any>>>();
  on<K extends keyof EventMap>(event: K, handler: EventHandler<EventMap[K]>) { ... }
  emit<K extends keyof EventMap>(event: K, payload: EventMap[K]) { ... }
}
export const domainEvents = new TypedEventBus<MeetingEventMap>();

// 测试示例：RTK slice reducer
import meetingReducer, { updateParticipant } from '@/store/slices/meetingSlice';

describe('meetingSlice', () => {
  it('should add participant on updateParticipant', () => {
    const initial = { participants: {}, currentMeeting: null, localUser: null, connectionStatus: 'disconnected', error: null };
    const p = { id: 'u1', name: 'Alice', role: 'attendee', networkQuality: 4 };
    const next = meetingReducer(initial, updateParticipant(p));
    expect(next.participants['u1']).toEqual(p);
  });
});

// store/middleware/monitoringMiddleware.ts
import { Middleware } from '@reduxjs/toolkit';
import { captureException, addBreadcrumb } from '@sentry/browser';

export const monitoringMiddleware: Middleware = (store) => (next) => (action) => {
  // 面包屑：记录关键 Action 用于复现
  if (action.type.startsWith('meeting/') || action.type.startsWith('media/')) {
    addBreadcrumb({
      category: 'redux-action',
      message: action.type,
      data: action.payload,
      level: 'info',
    });
  }
  try {
    return next(action);
  } catch (err) {
    captureException(err, { extra: { action, state: store.getState() } });
    throw err;
  }
};

// .eslintrc.js 片段
{
  "rules": {
    "redux-toolkit/no-mutating-state": "error",
    "pinia/no-direct-state-mutation": "error",
    "@typescript-eslint/no-floating-promises": ["error", { "ignoreVoid": true }],
    "no-restricted-imports": [
      "error",
      {
        "patterns": [
          { "group": ["@/store/**"], "message": "组件层禁止直接引入 store 内部实现，请通过 selector/hook 消费" }
        ]
      }
    ]
  }
}

// store/selectors/meetingSelectors.ts
import { createSelector } from '@reduxjs/toolkit';
import { RootState } from '../index';

// ❌ 反模式：每次返回新数组，触发下游组件重渲染
// export const selectParticipantList = (state: RootState) => 
//   Object.values(state.meeting.participants);

// ✅ 最佳实践：createSelector + 浅比较稳定引用
// 仅当 participants 字典引用变化时重新计算
export const selectParticipantList = createSelector(
  [(state: RootState) => state.meeting.participants],
  (participantsDict) => Object.values(participantsDict)
);

// 进阶：分页/虚拟列表专用选择器，避免全量遍历
export const selectVisibleParticipants = createSelector(
  [
    (state: RootState) => state.meeting.participants,
    (state: RootState) => state.ui.visibleUserIds, // 仅当前视口可见 ID
  ],
  (dict, visibleIds) => visibleIds.map((id) => dict[id]).filter(Boolean)
);

// 记忆化单个实体选择器，配合 React.memo 实现精准更新
export const selectParticipantById = (userId: string) => createSelector(
  [(state: RootState) => state.meeting.participants],
  (dict) => dict[userId]
);

// workers/mediaStatsWorker.ts
import { Comlink } from 'comlink'; // 类型安全 RPC

interface RawStats { userId: string; rtt: number; jitter: number; packetLoss: number; }
interface QualityScore { userId: string; score: 0 | 1 | 2 | 3 | 4; } // 0-4 五档

class MediaStatsProcessor {
  private history = new Map<string, RawStats[]>();
  private readonly WINDOW_SIZE = 30; // 1秒窗口 @ 30fps

  process(raw: RawStats): QualityScore {
    const arr = this.history.get(raw.userId) ?? [];
    arr.push(raw);
    if (arr.length > this.WINDOW_SIZE) arr.shift();
    this.history.set(raw.userId, arr);

    // 简化版 MOS 评分算法
    const avgRtt = arr.reduce((s, v) => s + v.rtt, 0) / arr.length;
    const avgLoss = arr.reduce((s, v) => s + v.packetLoss, 0) / arr.length;
    let score: QualityScore['score'] = 4;
    if (avgRtt > 400 || avgLoss > 0.3) score = 0;
    else if (avgRtt > 200 || avgLoss > 0.1) score = 1;
    else if (avgRtt > 100 || avgLoss > 0.05) score = 2;
    else if (avgRtt > 50) score = 3;
    return { userId: raw.userId, score };
  }

  // 批量处理，减少 postMessage 开销
  processBatch(rawList: RawStats[]): QualityScore[] {
    return rawList.map((r) => this.process(r));
  }
}

Comlink.expose(new MediaStatsProcessor());

// store/slices/mediaSlice.ts —— 主线程侧消费
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { Comlink } from 'comlink';

const worker = new Worker(new URL('../workers/mediaStatsWorker.ts', import.meta.url), { type: 'module' });
const remoteProcessor = Comlink.wrap<MediaStatsProcessor>(worker);

// 定时器在 Worker 外部驱动，或由 Worker 内部 setInterval 推送
setInterval(async () => {
  const rawBatch = collectRawStatsFromWebRTC(); // 同步采集
  const scores = await remoteProcessor.processBatch(rawBatch);
  // 批量派发单个 action，RTK 内部 immer 仅产出一次新状态引用
  store.dispatch(batchUpdateNetworkQuality(scores.reduce((acc, s) => ({ ...acc, [s.userId]: s.score }), {})));
}, 1000);

// components/ParticipantList/VirtualizedList.tsx
import { useVirtualizer } from '@tanstack/react-virtual';
import { useSelector } from 'react-redux';
import { selectParticipantById } from '@/store/selectors/meetingSelectors';
import { ParticipantRow } from './ParticipantRow';

export function VirtualizedParticipantList({ visibleIds }: { visibleIds: string[] }) {
  const parentRef = useRef<HTMLDivElement>(null);

  // 关键：每个行组件独立订阅各自 ID 的选择器，互不干扰
  const virtualizer = useVirtualizer({
    count: visibleIds.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 56,
    overscan: 5,
  });

  return (
    <div ref={parentRef} className="h-full overflow-auto" style={{ contain: 'strict' }}>
      <div style={{ height: virtualizer.getTotalSize(), position: 'relative' }}>
        {virtualizer.getVirtualItems().map((virtualRow) => (
          <ParticipantRowWrapper
            key={visibleIds[virtualRow.index]}
            userId={visibleIds[virtualRow.index]}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: `${virtualRow.size}px`,
              transform: `translateY(${virtualRow.start}px)`,
            }}
          />
        ))}
      </div>
    </div>
  );
}

// 单独包装组件，利用 React.memo + 稳定选择器实现极致复用
const ParticipantRowWrapper = React.memo(({ userId, style }: { userId: string; style: CSSProperties }) => {
  // 仅订阅单个用户状态，其他用户变化绝不触发此组件重渲染
  const participant = useSelector(selectParticipantById(userId));
  if (!participant) return null;
  return <ParticipantRow data={participant} style={style} />;
});

// types/utility.ts
// 运行时由 Immer 保证不可变，编译期由类型系统拦截误写
export type Immutable<T> = T extends Function
  ? T
  : T extends object
  ? { readonly [K in keyof T]: Immutable<T[K]> }
  : T;

// Redux Toolkit createSlice 内部 reducer 参数类型为 Draft<State> (可变)
// 但 selector 返回类型应标记为 Immutable，防止组件层意外修改
export type SelectorOutput<T> = Immutable<T>;

// store/slices/meetingSlice.ts —— 类型收窄实战
import { createSlice, PayloadAction, Draft } from '@reduxjs/toolkit';
import { Immutable, SelectorOutput } from '@/types/utility';

interface MeetingState {
  currentMeeting: MeetingInfo | null;
  participants: Record<string, Participant>;
}

// 内部 reducer 使用 Draft 享受可变便利
const meetingSlice = createSlice({
  name: 'meeting',
  initialState: { currentMeeting: null, participants: {} } as MeetingState,
  reducers: {
    updateParticipant(state: Draft<MeetingState>, action: PayloadAction<Participant>) {
      // Immer 代理允许直接赋值，类型安全
      state.participants[action.payload.id] = action.payload;
    },
  },
});

// 导出时显式标记为 Immutable，组件层读取即得只读类型
export const selectCurrentMeeting = (state: RootState): SelectorOutput<MeetingInfo | null> =>
  state.meeting.currentMeeting;

// store/actions/meetingActions.ts
import { createAction, prepareAutoBatched } from '@reduxjs/toolkit';

// 复杂 Payload 自动推导
export const joinMeeting = createAction(
  'meeting/join',
  prepareAutoBatched((meetingId: string, token: string, deviceId?: string) => ({
    payload: { meetingId, token, deviceId, timestamp: Date.now() },
    meta: { requestId: crypto.randomUUID() }, // 追踪链路
  }))
);

// 类型自动推导为：
// { type: 'meeting/join'; payload: { meetingId: string; token: string; deviceId?: string; timestamp: number }; meta: { requestId: string } }

// 组件分发时全类型提示，零手写接口
dispatch(joinMeeting('m_123', 'tok_abc', 'dev_cam_1'));
// ❌ dispatch(joinMeeting(123, 'tok')); // TS 报错：Argument of type 'number' not assignable to 'string'

// types/stateMachine.ts
type MeetingStatus = 'idle' | 'joining' | 'in-meeting' | 'leaving' | 'ended' | 'error';

type MeetingEvent =
  | { type: 'JOIN_REQUEST'; payload: { meetingId: string } }
  | { type: 'JOIN_SUCCESS'; payload: MeetingInfo }
  | { type: 'JOIN_FAILED'; payload: Error }
  | { type: 'LEAVE_REQUEST' }
  | { type: 'LEAVE_SUCCESS' }
  | { type: 'KICKED'; payload: { reason: string } }
  | { type: 'NETWORK_DISCONNECTED' }
  | { type: 'RECONNECT_SUCCESS' };

// 编译期约束：非法流转直接报错
type TransitionMap = {
  idle: 'joining';
  joining: 'in-meeting' | 'error';
  'in-meeting': 'leaving' | 'ended' | 'error';
  leaving: 'idle' | 'ended';
  ended: 'idle';
  error: 'idle' | 'joining';
};

// 类型级状态机校验（简化版，生产建议用 xstate/type-fest）
type NextStatus<Current extends MeetingStatus, Event extends MeetingEvent> =
  Current extends keyof TransitionMap
    ? TransitionMap[Current] extends infer Next
      ? Next extends MeetingStatus
        ? Next
        : never
      : never
    : never;

// Reducer 内部使用，非法 case 将导致 TS 报错
function reduceStatus(current: MeetingStatus, event: MeetingEvent): MeetingStatus {
  switch (event.type) {
    case 'JOIN_REQUEST':
      return assertTransition(current, 'joining');
    case 'JOIN_SUCCESS':
      return assertTransition(current, 'in-meeting');
    // ...
  }
}

function assertTransition<C extends MeetingStatus, N extends MeetingStatus>(
  current: C,
  next: N
): NextStatus<C, { type: any }> {
  // 运行时断言 + 编译期约束双重保险
  return next as any;
}

// shell/src/store/federatedStore.ts
import { configureStore, combineReducers } from '@reduxjs/toolkit';
import { meetingReducer } from 'meeting-core/store'; // 远程模块导出 reducer
import { chatReducer } from 'chat-panel/store';
import { whiteboardReducer } from 'whiteboard/store';

// 关键：Shell 持有唯一 Store 实例，子应用仅注入 Reducer
export const federatedStore = configureStore({
  reducer: combineReducers({
    meeting: meetingReducer,
    chat: chatReducer,
    whiteboard: whiteboardReducer,
    // Shell 级状态：用户信息、权限、主题
    shell: shellReducer,
  }),
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // 忽略 WebRTC 对象、MediaStream 等非序列化字段
        ignoredPaths: ['meeting.mediaEngine', 'whiteboard.canvasContext'],
      },
    }).concat(wsMiddleware, monitoringMiddleware),
});

// 子应用入口：仅导出 reducer 与类型，不创建 store
// meeting-core/src/store/index.ts
export { meetingReducer } from './meetingSlice';
export type { MeetingState } from './types';
export { selectCurrentMeeting, selectParticipantList } from './selectors';

// shared/kernel/eventBus.ts —— 共享内核包，所有子应用依赖
import { TypedEventBus } from '@/types/contracts'; // 复用上篇定义的类型

// 定义跨应用契约
export interface CrossAppEventMap {
  'ui:sidebar-toggle': { panel: 'chat' | 'participants' | 'whiteboard'; open: boolean };
  'meeting:role-changed': { userId: string; newRole: UserRole };
  'media:device-changed': { kind: 'audioinput' | 'videoinput'; deviceId: string };
}

// 单例导出
export const crossAppEvents = new TypedEventBus<CrossAppEventMap>();

// 白板应用：发布工具切换
// whiteboard/src/tools/ToolBar.tsx
crossAppEvents.emit('ui:sidebar-toggle', { panel: 'whiteboard', open: true });

// Shell/聊天应用：订阅角色变更刷新 UI
// chat-panel/src/hooks/useRoleSync.ts
crossAppEvents.on('meeting:role-changed', ({ userId, newRole }) => {
  if (newRole === 'host') chatStore.dispatch(enableHostControls());
});

// shell/src/app/meeting/[meetingId]/page.tsx (Next.js 13+ App Router / RSC 风格)
import { federatedStore } from '@/store/federatedStore';
import { fetchMeetingDetail } from 'meeting-core/store/thunks';
import { dehydrate } from '@reduxjs/toolkit/query/react'; // 或自定义序列化
import { MeetingClientView } from './MeetingClientView';

export default async function MeetingPage({ params }: { params: { meetingId: string } }) {
  // 1. 服务端预取核心会议数据（并行预取聊天、白板快照）
  await Promise.all([
    federatedStore.dispatch(fetchMeetingDetail(params.meetingId)),
    federatedStore.dispatch(chatApi.util.prefetch('getHistory', params.meetingId)),
  ]);

  // 2. 序列化状态树（仅序列化可序列化 slice，排除 mediaEngine 等）
  const serializableState = {
    meeting: federatedStore.getState().meeting,
    chat: federatedStore.getState().chat,
    shell: federatedStore.getState().shell,
  };

  return (
    <html lang="zh-CN">
      <head>
        {/* 3. 注入脱水状态，客户端激活前同步 */}
        <script
          id="__PRELOADED_STATE__"
          type="application/json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(serializableState) }}
        />
      </head>
      <body>
        <Suspense fallback={<MeetingSkeleton />}>
          <MeetingClientView meetingId={params.meetingId} />
        </Suspense>
      </body>
    </html>
  );
}

// shell/src/providers/StoreProvider.tsx
'use client';
import { useSyncExternalStore } from 'react';
import { federatedStore } from '@/store/federatedStore';
import { hydrate } from '@reduxjs/toolkit/query/react';

export function StoreProvider({ children }: { children: React.ReactNode }) {
  // 仅在客户端执行一次注水
  useEffect(() => {
    const preloaded = document.getElementById('__PRELOADED_STATE__');
    if (preloaded) {
      try {
        const state = JSON.parse(preloaded.textContent!);
        // RTK Query 自动合并缓存；普通 slice 需手动 replaceReducer 或 dispatch REHYDRATE
        federatedStore.dispatch({ type: 'REHYDRATE', payload: state });
        preloaded.remove(); // 防止二次注水
      } catch (e) {
        console.error('Hydration failed', e);
      }
    }
  }, []);

  // 使用 useSyncExternalStore 避免并发模式下的 tearing
  const useStore = () => useSyncExternalStore(
    federatedStore.subscribe,
    () => federatedStore.getState(),
    () => federatedStore.getState() // 服务端快照同构
  );

  return <ReduxContext.Provider value={useStore}>{children}</ReduxContext.Provider>;
}

// store/slices/a11ySlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface A11yState {
  liveAnnouncements: string[]; // 语音播报队列
  focusTraps: string[]; // 焦点陷阱栈
  highContrast: boolean;
  reducedMotion: boolean;
}

const a11ySlice = createSlice({
  name: 'a11y',
  initialState: {
    liveAnnouncements: [],
    focusTraps: [],
    highContrast: false,
    reducedMotion: false,
  } as A11yState,
  reducers: {
    announce(state, action: PayloadAction<{ message: string; priority: 'polite' | 'assertive' }>) {
      state.liveAnnouncements.push(action.payload.message);
      // 组件侧 LiveRegion 监听数组变化播报，播报后 shift()
    },
    pushFocusTrap(state, action: PayloadAction<string>) {
      state.focusTraps.push(action.payload);
    },
    popFocusTrap(state) {
      state.focusTraps.pop();
    },
    setHighContrast(state, action: PayloadAction<boolean>) {
      state.highContrast = action.payload;
      document.documentElement.classList.toggle('high-contrast', action.payload);
    },
  },
});

// 组件侧消费：无障碍公告组件
// components/A11y/LiveRegion.tsx
export function LiveRegion() {
  const announcements = useSelector(selectLiveAnnouncements);
  return (
    <div aria-live="polite" aria-atomic="true" className="sr-only">
      {announcements.map((msg, i) => <div key={i}>{msg}</div>)}
    </div>
  );
}

// store/slices/i18nSlice.ts
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { i18n } from '@/i18n/config'; // i18next 实例

export const loadLocale = createAsyncThunk(
  'i18n/loadLocale',
  async (locale: string, { rejectWithValue }) => {
    try {
      // 动态导入语言包（代码分割）
      const resources = await import(`@/locales/${locale}.json`);
      i18n.addResourceBundle(locale, 'translation', resources.default, true, true);
      await i18n.changeLanguage(locale);
      return locale;
    } catch (err) {
      return rejectWithValue('语言包加载失败');
    }
  }
);

const i18nSlice = createSlice({
  name: 'i18n',
  initialState: { currentLocale: 'zh-CN', loadingLocales: [] as string[] },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(loadLocale.pending, (state, action) => {
        state.loadingLocales.push(action.meta.arg);
      })
      .addCase(loadLocale.fulfilled, (state, action) => {
        state.currentLocale = action.payload;
        state.loadingLocales = state.loadingLocales.filter((l) => l !== action.payload);
      });
  },
});

// legacy/bridgeMiddleware.ts
import { Middleware } from 'redux'; // 旧 Redux
import { legacyStore } from './legacyStore'; // Vuex 3 封装的类 Redux 接口
import { federatedStore } from '@/store/federatedStore';

// 旧 -> 新：关键业务状态单向同步
export const legacyToNewBridge: Middleware = (store) => (next) => (action) => {
  const result = next(action);
  // 仅同步核心会议状态，避免全量同步性能损耗
  if (action.type.startsWith('meeting/') || action.type.startsWith('user/')) {
    // 映射旧 Action 到新 Slice Action
    const newAction = mapLegacyActionToNew(action);
    if (newAction) federatedStore.dispatch(newAction);
  }
  return result;
};

// 新 -> 旧：新架构派发的全局 Action 反向同步给旧模块（如旧版通知中心）
export function setupNewToLegacySync() {
  federatedStore.subscribe(() => {
    const newState = federatedStore.getState();
    // 仅同步旧模块依赖的字段
    legacyStore.commit('SYNC_FROM_NEW', {
      currentUser: newState.shell.currentUser,
      meetingId: newState.meeting.currentMeeting?.id,
    });
  });
}

<!-- 旧版 Vue 2 组件：LegacyParticipantList.vue -->
<script>
import { mapState, mapActions } from 'vuex';
export default {
  computed: { ...mapState(['participants']) },
  methods: { ...mapActions(['updateParticipant']) },
};
</script>

<!-- 新版 Vue 3 组件：ParticipantList.vue (在同一页面共存) -->
<script setup>
import { useSelector, useDispatch } from 'vue-redux'; // 适配器
import { selectParticipantList, updateParticipant } from 'meeting-core/store';

// 关键：通过 provide 注入新 Store 上下文，不污染全局
import { ReduxContext } from 'shell/providers';
const store = inject(ReduxContext.key); // 获取 Shell 级 Store
const dispatch = useDispatch(store);
const participants = useSelector(selectParticipantList, store);
</script>

// utils/stateSnapshot.ts
import { federatedStore } from '@/store/federatedStore';
import { SENSITIVE_KEYS } from '@/constants/privacy';

export function exportSanitizedSnapshot(): string {
  const state = federatedStore.getState();
  const sanitized = deepCloneAndSanitize(state, SENSITIVE_KEYS);
  // 压缩：移除默认值、空数组、null 字段
  const compressed = compressState(sanitized);
  return btoa(JSON.stringify(compressed)); // Base64 便于 URL 分享
}

function deepCloneAndSanitize(obj: any, sensitiveKeys: string[]): any {
  if (obj === null || typeof obj !== 'object') return obj;
  if (Array.isArray(obj)) return obj.map((v) => deepCloneAndSanitize(v, sensitiveKeys));
  
  const result: Record<string, any> = {};
  for (const [key, value] of Object.entries(obj)) {
    if (sensitiveKeys.some((k) => key.includes(k))) {
      result[key] = '[REDACTED]';
    } else {
      result[key] = deepCloneAndSanitize(value, sensitiveKeys);
    }
  }
  return result;
}

// 开发端导入复现
export function importSnapshot(base64: string) {
  const state = JSON.parse(atob(base64));
  // 通过特殊 Action 批量注水，触发所有 Selector 重算
  federatedStore.dispatch({ type: 'DEBUG/IMPORT_SNAPSHOT', payload: state });
}

// .env.production 关键配置
VITE_ENABLE_REDUX_DEVTOOLS=false
VITE_ENABLE_STATE_SNAPSHOT_PANEL=false
VITE_WORKER_THREADS=2
VITE_VIRTUAL_LIST_OVERSCAN=8
VITE_SELECTOR_MEMOIZATION=true
VITE_SSR_STREAMING=true
VITE_CSP_NONCE_ENABLED=true

// vite.config.ts 关键构建优化
export default defineConfig({
  build: {
    target: 'es2022',
    minify: 'esbuild',
    cssCodeSplit: true,
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor-redux': ['@reduxjs/toolkit', 'react-redux', 'reselect'],
          'vendor-pinia': ['pinia', '@vueuse/core'],
          'vendor-signals': ['@preact/signals', '@preact/signals-react'],
          'vendor-media': ['webrtc-adapter', 'mediasoup-client'],
        },
      },
    },
  },
  optimizeDeps: {
    include: ['@reduxjs/toolkit', 'pinia', '@preact/signals-core'],
  },
});