graph TB
    A[可视化设计器] --> B[DSL 领域特定语言层]
    B --> C[渲染引擎核心]
    C --> D[组件注册中心]
    C --> E[状态管理中心]
    C --> F[插件扩展机制]
    D --> G[基础组件库]
    D --> H[业务组件库]
    E --> I[撤销/重做]
    E --> J[历史记录]
    F --> K[对齐/吸附]
    F --> L[网格/标尺]

interface LayoutTemplate {
  version: string;                    // 版本号，支持迁移
  meta: {                             // 元数据
    name: string;
    category: 'board' | 'training' | 'collaboration';
    thumbnail: string;
  };
  canvas: {                           // 画布配置
    width: number;
    height: number;
    background: string;
    gridSize: number;                 // 网格粒度
  };
  components: ComponentNode[];        // 组件树
  bindings: DataBinding[];            // 数据绑定规则
  interactions: InteractionRule[];    // 交互规则
}

interface ComponentNode {
  id: string;                         // 唯一标识
  type: string;                       // 组件类型
  props: Record<string, any>;         // 属性配置
  style: CSSProperties;               // 样式（位置、尺寸、层级）
  children?: ComponentNode[];         // 子组件
  locked?: boolean;                   // 锁定状态
  visible?: boolean;                  // 可见性
}

// componentRegistry.ts
class ComponentRegistry {
  private components = new Map<string, ComponentDefine>();
  
  register(define: ComponentDefine) {
    // 校验必填字段
    this.validateDefine(define);
    this.components.set(define.type, define);
  }
  
  async loadComponent(type: string): Promise<ComponentDefine> {
    const define = this.components.get(type);
    if (!define) {
      // 支持远程动态加载（微前端场景）
      await this.loadRemoteComponent(type);
    }
    return this.components.get(type)!;
  }
  
  // 生成组件面板分类数据
  getCategories(): Category[] { /* ... */ }
}

enum DragState {
  IDLE,
  HOVER,
  DRAGGING,
  RESIZING,
  ROTATING
}

interface DragContext {
  state: DragState;
  targetId: string | null;
  startPos: { x: number; y: number };
  currentPos: { x: number; y: number };
  snapLines: SnapLine[];      // 吸附参考线
  ghostNode: ComponentNode | null;  // 拖拽虚影
}

function calculateSnapLines(
  draggingNode: ComponentNode,
  allNodes: ComponentNode[],
  threshold: number = 8
): SnapLine[] {
  const lines: SnapLine[] = [];
  const dragRect = getNodeRect(draggingNode);
  
  // 使用空间索引（QuadTree）加速邻近查询
  const candidates = quadTree.query(dragRect.expand(threshold * 2));
  
  for (const node of candidates) {
    if (node.id === draggingNode.id) continue;
    const targetRect = getNodeRect(node);
    
    // 边缘对齐：左、中、右 / 上、中、下
    const hAligns = ['left', 'center', 'right'].map(edge => ({
      type: 'horizontal' as const,
      value: targetRect[edge],
      offset: dragRect[edge] - targetRect[edge],
      targetId: node.id
    }));
    
    const vAligns = ['top', 'middle', 'bottom'].map(edge => ({
      type: 'vertical' as const,
      value: targetRect[edge],
      offset: dragRect[edge] - targetRect[edge],
      targetId: node.id
    }));
    
    [...hAligns, ...vAligns].forEach(align => {
      if (Math.abs(align.offset) <= threshold) {
        lines.push({ ...align, offset: 0 }); // 修正为精确对齐
      }
    });
  }
  
  return lines;
}

// 使用 SVG 绘制选择框，避免 DOM 重排
<SelectionBox
  start={selectionStart}
  end={selectionEnd}
  onComplete={(box) => {
    const selected = nodes.filter(node => 
      isRectIntersect(getNodeRect(node), box)
    );
    store.setSelectedIds(selected.map(n => n.id));
  }}
/>

interface EditorState {
  // 当前画布数据
  template: LayoutTemplate;
  // 选中态
  selectedIds: string[];
  // 视口变换
  viewport: { x: number; y: number; scale: number };
  // 历史栈
  history: {
    past: LayoutTemplate[];   // 撤销栈
    future: LayoutTemplate[]; // 重做栈
    maxSize: 50;              // 限制内存
  };
  // 剪贴板
  clipboard: ComponentNode[] | null;
}

abstract class EditorCommand {
  abstract execute(state: EditorState): EditorState;
  abstract undo(state: EditorState): EditorState;
  abstract redo(state: EditorState): EditorState;
}

class MoveComponentCommand extends EditorCommand {
  constructor(
    private componentId: string,
    private deltaX: number,
    private deltaY: number
  ) {}
  
  execute(state: EditorState) {
    return produce(state, draft => {
      const node = findNode(draft.template, this.componentId);
      if (node) {
        node.style.left += this.deltaX;
        node.style.top += this.deltaY;
      }
      draft.history.past.push(cloneDeep(draft.template));
      draft.history.future = [];
    });
  }
  
  undo(state: EditorState) { /* 反向操作 */ }
  redo(state: EditorState) { /* 重新执行 */ }
}

function VirtualCanvas({ template, viewport }) {
  const visibleNodes = useMemo(() => 
    template.components.filter(node => 
      isInViewport(getNodeRect(node), viewport)
    ), [template, viewport]);
  
  return (
    <div className="canvas-viewport" style={{ transform: `scale(${viewport.scale})` }}>
      {visibleNodes.map(node => (
        <ComponentRenderer key={node.id} node={node} />
      ))}
    </div>
  );
}

class RenderEngine {
  private dirtyFlags = new Map<string, DirtyFlag>();
  
  markDirty(nodeId: string, flag: DirtyFlag) {
    this.dirtyFlags.set(nodeId, flag);
    requestAnimationFrame(() => this.flush());
  }
  
  private flush() {
    const updates = Array.from(this.dirtyFlags.entries())
      .filter(([, flag]) => flag !== 'none');
    
    // 批量更新 DOM
    updates.forEach(([id, flag]) => {
      const node = this.nodeMap.get(id);
      if (flag & DirtyFlag.POSITION) updatePosition(node);
      if (flag & DirtyFlag.STYLE) updateStyle(node);
      if (flag & DirtyFlag.PROPS) updateProps(node);
    });
    
    this.dirtyFlags.clear();
  }
}

// 核心算法测试用例示例
describe('Snap Algorithm', () => {
  it('should snap to center when within threshold', () => {
    const dragRect = { left: 100, center: 150, right: 200, width: 100 };
    const targetRect = { left: 95, center: 148, right: 195, width: 100 };
    const lines = calculateSnapLines(dragRect, [targetRect], 8);
    expect(lines.find(l => l.type === 'horizontal' && l.value === 148)).toBeTruthy();
  });
  
  it('should not snap when exceeding threshold', () => {
    const lines = calculateSnapLines(
      { left: 100, center: 150, right: 200 },
      [{ left: 50, center: 100, right: 150 }],
      8
    );
    expect(lines.length).toBe(0);
  });
});

// qiankun 子应用配置
export async function bootstrap() {
  // 注册共享组件库
  window.__MEETING_COMPONENTS__ = componentRegistry;
}

export async function mount(props) {
  // 接收主应用下发的模板数据、权限配置
  const { template, permissions, theme } = props;
  initEditor({ template, permissions, theme });
}

export async function unmount() {
  destroyEditor();
  window.__MEETING_COMPONENTS__ = null;
}

interface PermissionMatrix {
  // 模板级权限
  template: {
    create: Role[];
    edit: Role[];
    publish: Role[];
    delete: Role[];
  };
  // 组件级权限
  component: {
    [componentType: string]: {
      use: Role[];
      configure: Role[];
    };
  };
  // 数据级权限
  data: {
    viewDeviceInfo: Role[];
    exportLayout: Role[];
  };
}

// 扩展后的 DSL 片段
interface LayoutTemplate {
  // ... 基础字段
  dataSources: DataSourceConfig[];      // 数据源定义
  bindings: BindingRule[];              // 绑定规则
  computed: ComputedField[];            // 派生计算字段
  lifecycle: LifecycleHooks;            // 生命周期钩子
}

interface BindingRule {
  target: string;                       // 目标组件 ID
  propPath: string;                     // 目标属性路径，如 "props.title" / "style.background"
  source: {
    type: 'api' | 'websocket' | 'localStorage' | 'computed';
    key: string;                        // 数据源 Key / API 路径
    path?: string;                      // JSONPath 提取路径
    transform?: string;                 // JS 表达式转换器
  };
  mode: 'oneWay' | 'twoWay';            // 单向/双向
  debounce?: number;                    // 防抖 ms
}

// 示例：会议室屏幕组件绑定实时投屏状态
{
  "target": "screen_001",
  "propPath": "props.contentUrl",
  "source": { "type": "websocket", "key": "meeting/123/screen/share", "path": "$.data.url" },
  "mode": "oneWay",
  "transform": "value ? `https://cdn.example.com/live/${value}.flv` : ''"
}

class DataFlowEngine {
  private subscriptions = new Map<string, Subscription>();
  private computedCache = new Map<string, any>();
  private dirtyFlags = new Set<string>();
  
  // 启动绑定
  attach(template: LayoutTemplate, context: RenderContext) {
    template.bindings.forEach(rule => this.bindRule(rule, context));
    template.computed.forEach(comp => this.registerComputed(comp));
  }
  
  private bindRule(rule: BindingRule, ctx: RenderContext) {
    const source$ = this.createSourceObservable(rule.source, ctx);
    
    const sub = source$.pipe(
      debounceTime(rule.debounce ?? 0),
      distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
      map(val => rule.transform ? this.evalTransform(rule.transform, val) : val),
      tap(val => this.applyToTarget(rule.target, rule.propPath, val, ctx))
    ).subscribe();
    
    this.subscriptions.set(`${rule.target}.${rule.propPath}`, sub);
  }
  
  // 安全的表达式求值（禁用 eval，使用 Function 构造器 + 沙箱）
  private evalTransform(expr: string, data: any): any {
    const sandbox = { data, _: lodash, dayjs, Math, JSON };
    try {
      return new Function('data', '_', 'dayjs', 'Math', 'JSON', `return (${expr})`)(...Object.values(sandbox));
    } catch (e) {
      console.warn('[DataFlow] Transform error:', expr, e);
      return data;
    }
  }
}

// 约束定义类型
type Constraint = 
  | { type: 'align'; axis: 'x' | 'y'; targets: string[]; mode: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom' }
  | { type: 'distribute'; axis: 'x' | 'y'; targets: string[]; gap: number }
  | { type: 'relative'; target: string; anchor: string; offset: { x: number; y: number } }
  | { type: 'boundary'; target: string; container: string; padding: number }
  | { type: 'nonOverlap'; targets: string[]; priority: 'required' | 'strong' | 'medium' | 'weak' };

// 求解器接口
interface LayoutSolver {
  addConstraint(c: Constraint): void;
  removeConstraint(id: string): void;
  solve(nodes: Map<string, ComponentNode>): Map<string, { x: number; y: number; width: number; height: number }>;
  suggestInsertion(newNode: ComponentNode, existing: Map<string, ComponentNode>): { x: number; y: number }; // 智能找位置
}

function resolveOverlaps(
  nodes: ComponentNode[],
  bounds: { width: number; height: number },
  options: { iterations: 50; temperature: 1.0; coolingRate: 0.95 } = defaultOptions
): ComponentNode[] {
  // 1. 构建 QuadTree 加速碰撞检测
  const quadTree = new QuadTree(bounds);
  nodes.forEach(n => quadTree.insert(n.id, getNodeRect(n)));
  
  // 2. 计算重叠力向量
  const computeForces = (node: ComponentNode) => {
    const rect = getNodeRect(node);
    const neighbors = quadTree.query(rect.inflate(50)); // 扩大搜索范围
    let forceX = 0, forceY = 0;
    
    neighbors.forEach(nid => {
      if (nid === node.id) return;
      const other = nodeMap.get(nid)!;
      const otherRect = getNodeRect(other);
      const overlap = getOverlapArea(rect, otherRect);
      if (overlap > 0) {
        const dx = rect.centerX - otherRect.centerX;
        const dy = rect.centerY - otherRect.centerY;
        const dist = Math.hypot(dx, dy) || 0.1;
        const push = (overlap / dist) * options.temperature;
        forceX += (dx / dist) * push;
        forceY += (dy / dist) * push;
      }
    });
    return { x: forceX, y: forceY };
  };
  
  // 3. 迭代求解
  for (let i = 0; i < options.iterations; i++) {
    let maxMove = 0;
    nodes.forEach(node => {
      if (node.locked) return;
      const force = computeForces(node);
      node.style.left = clamp(node.style.left + force.x, 0, bounds.width - node.style.width);
      node.style.top = clamp(node.style.top + force.y, 0, bounds.height - node.style.height);
      maxMove = Math.max(maxMove, Math.hypot(force.x, force.y));
      quadTree.update(node.id, getNodeRect(node));
    });
    options.temperature *= options.coolingRate;
    if (maxMove < 0.5) break; // 收敛提前终止
  }
  
  return nodes;
}

interface EditorPlugin {
  name: string;
  version: string;
  // 生命周期
  onInstall?(editor: EditorCore): Promise<void> | void;
  onUninstall?(editor: EditorCore): Promise<void> | void;
  onTemplateLoad?(template: LayoutTemplate): LayoutTemplate | void; // 可修正模板
  onTemplateSave?(template: LayoutTemplate): LayoutTemplate | void;
  // 扩展点
  components?: ComponentDefine[];           // 注册新组件
  panels?: PanelDefine[];                   // 扩展侧边栏面板
  shortcuts?: ShortcutDefine[];             // 注册快捷键
  contextMenus?: ContextMenuDefine[];       // 扩展右键菜单
  renderers?: { [nodeType: string]: Renderer }; // 自定义渲染器
  apis?: { [key: string]: Function };       // 暴露给其他插件的 API
}

// 核心插件管理器
class PluginManager {
  private plugins = new Map<string, EditorPlugin>();
  private hooks = new HookSystem(); // 基于 Tapable 实现
  
  async register(plugin: EditorPlugin) {
    if (this.plugins.has(plugin.name)) throw new Error(`Plugin ${plugin.name} exists`);
    
    // 依赖检查
    await this.checkDependencies(plugin);
    
    this.plugins.set(plugin.name, plugin);
    this.hooks.registerPluginHooks(plugin);
    
    if (plugin.onInstall) await plugin.onInstall(this.editorCore);
    this.editorCore.emit('plugin:installed', plugin.name);
  }
  
  // 典型应用：导出插件
  getExportApis() {
    return {
      toImage: (opts: ImageExportOptions) => this.hooks.call('export:image', opts),
      toPDF: (opts: PDFExportOptions) => this.hooks.call('export:pdf', opts),
      toCode: (target: 'vue' | 'react' | 'html') => this.hooks.call('export:code', target),
    };
  }
}

graph LR
    A[Node.js 服务端] --> B[模板 DSL JSON]
    B --> C[服务端渲染器]
    C --> D[生成静态 HTML + CSS]
    D --> E[浏览器接收]
    E --> F[客户端 Hydration]
    F --> G[接管交互]

// 编译期提取组件样式为 CSS Modules / Tailwind JIT
// 组件定义新增 styleKey
interface ComponentDefine {
  styleKey: string; // 对应 CSS 文件名
  // 运行时仅需 className 拼接
}

// 服务端渲染器
function SSRRenderer({ template, viewport }) {
  const cssLinks = extractCriticalCSS(template); // 仅提取首屏用到的 CSS
  return `
    <!DOCTYPE html>
    <html>
      <head>
        ${cssLinks.map(href => `<link rel="stylesheet" href="${href}">`).join('')}
        <script>window.__INITIAL_TEMPLATE__ = ${JSON.stringify(template)}</script>
      </head>
      <body>
        <div id="root">${renderToString(template, viewport)}</div>
        <script src="/client-hydration.js" defer></script>
      </body>
    </html>
  `;
}

// 会议室座位图语义化映射
function SeatNodeSSR({ node }) {
  const { seatNumber, attendeeName, department, isVIP } = node.props;
  return (
    <article 
      className="meeting-seat" 
      data-seat-id={node.id}
      style={{ gridArea: `${node.style.top} / ${node.style.left}` }}
      aria-label={`座位 ${seatNumber}${attendeeName ? `，${attendeeName}` : '，空席'}`}
    >
      <span className="seat-number">{seatNumber}</span>
      {attendeeName && (
        <div className="attendee-info">
          <span className="name">{attendeeName}</span>
          <span className="dept">{department}</span>
        </div>
      )}
      {isVIP && <span className="vip-badge" aria-hidden="true">★</span>}
    </article>
  );
}

// 仅对可交互组件进行 Hydration，静态装饰组件跳过
const InteractiveComponents = new Set(['MeetingSeat', 'MeetingScreen', 'Whiteboard', 'Camera']);

function hydrateRoot(rootEl, template) {
  walkTemplate(template, (node) => {
    if (InteractiveComponents.has(node.type)) {
      const el = rootEl.querySelector(`[data-node-id="${node.id}"]`);
      if (el) hydrateComponent(node.type, el, node.props);
    }
  });
}

// yjs-binding.ts
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';
import { IndexeddbPersistence } from 'y-indexeddb';

export function setupCollaboration(editorStore: EditorStore, config: CollabConfig) {
  const ydoc = new Y.Doc();
  
  // 1. 定义共享类型映射
  const yTemplate = ydoc.getMap('template');
  const yComponents = ydoc.getArray('components'); // 扁平化数组，通过 id 关联
  const ySelection = ydoc.getMap('selection');     // 光标位置
  const yViewport = ydoc.getMap('viewport');
  
  // 2. 本地持久化（离线优先）
  const persistence = new IndexeddbPersistence(`meeting-layout-${config.roomId}`, ydoc);
  persistence.on('synced', () => console.log('[Yjs] Local DB synced'));
  
  // 3. 网络同步
  const provider = new WebsocketProvider(config.wsUrl, `room-${config.roomId}`, ydoc, {
    connect: config.isOnline, // 离线时不连接
    maxBackoffTime: 30000
  });
  
  // 4. 双向绑定：Store <-> Yjs
  // Store -> Yjs (防抖)
  let syncTimer: NodeJS.Timeout;
  editorStore.subscribe(state => {
    clearTimeout(syncTimer);
    syncTimer = setTimeout(() => {
      ydoc.transact(() => {
        // 仅同步脏字段，避免全量覆盖触发循环
        syncTemplateToYjs(state.template, yTemplate);
        syncSelectionToYjs(state.selectedIds, ySelection);
      });
    }, 50);
  });
  
  // Yjs -> Store (远程变更)
  yTemplate.observeDeep(() => {
    if (!ydoc.transact.isLocal) { // 仅处理远程变更
      editorStore.setTemplate(yTemplateToTemplate(yTemplate), { remote: true });
    }
  });
  
  // 5. 意识协议：光标/选中态同步
  const awareness = provider.awareness;
  awareness.setLocalStateField('user', {
    id: config.userId,
    name: config.userName,
    color: config.userColor,
    cursor: null // { x, y, nodeId }
  });
  
  awareness.on('change', () => {
    const states = Array.from(awareness.getStates().values());
    editorStore.setRemoteCursors(states.filter(s => s.user.id !== config.userId).map(s => s.user));
  });
  
  // 清理函数
  return () => {
    provider.destroy();
    persistence.destroy();
    ydoc.destroy();
  };
}

// CanvasContainer.tsx - 无障碍增强版
function CanvasContainer({ template, selectedIds, onAction }) {
  const canvasRef = useRef<HTMLDivElement>(null);
  const [announcement, setAnnouncement] = useState('');
  
  // 实时广播函数
  const announce = useCallback((msg: string) => {
    setAnnouncement('');
    requestAnimationFrame(() => setAnnouncement(msg));
  }, []);
  
  // 键盘事件总线
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.target !== canvasRef.current && !canvasRef.current?.contains(e.target as Node)) return;
      
      const focusedId = getFocusedNodeId(); // 从 store 获取
      if (!focusedId) return;
      
      switch (true) {
        case isArrowKey(e) && !e.ctrlKey && !e.metaKey && !e.altKey:
          e.preventDefault();
          navigateNode(focusedId, e.key, e.shiftKey); // 导航/多选
          break;
        case isArrowKey(e) && (e.ctrlKey || e.metaKey) && !e.altKey:
          e.preventDefault();
          nudgeNode(focusedId, e.key, e.shiftKey ? 10 : 1); // 移动
          announce(`已移动至 ${getNodePos(focusedId)}`);
          break;
        case isArrowKey(e) && e.altKey:
          e.preventDefault();
          resizeNode(focusedId, e.key); // 调整尺寸
          announce(`尺寸调整为 ${getNodeSize(focusedId)}`);
          break;
        case e.key === 'Enter' || e.key === 'F2':
          e.preventDefault();
          openPropertyPanel(focusedId);
          break;
        case e.key === 'Delete' || e.key === 'Backspace':
          e.preventDefault();
          confirmDelete(focusedId);
          break;
      }
    };
    
    canvasRef.current?.addEventListener('keydown', handleKeyDown);
    return () => canvasRef.current?.removeEventListener('keydown', handleKeyDown);
  }, [announce]);
  
  return (
    <div 
      ref={canvasRef}
      role="application"
      aria-label="会议布局编辑器，使用方向键导航，Ctrl+方向键移动，Alt+方向键缩放，Enter编辑属性"
      tabIndex={0}
      className="canvas-container"
    >
      {/* 离屏公告区 */}
      <div 
        role="status" 
        aria-live="polite" 
        aria-atomic="true" 
        className="sr-only" 
      >{announcement}</div>
      
      {/* 组件树渲染 */}
      <div role="tree" aria-multiselectable="true" className="canvas-layer">
        {template.components.map(node => (
          <ComponentNodeA11y 
            key={node.id} 
            node={node} 
            isSelected={selectedIds.includes(node.id)}
            isFocused={focusedId === node.id}
            onFocusChange={setFocusedId}
          />
        ))}
      </div>
    </div>
  );
}

// 单组件无障碍包装
function ComponentNodeA11y({ node, isSelected, isFocused, onFocusChange }) {
  const role = getAriaRole(node.type); // 'treeitem' | 'group' | 'img' | 'textbox'
  
  return (
    <div
      role={role}
      id={node.id}
      data-node-id={node.id}
      tabIndex={-1} // 由容器管理焦点
      aria-selected={isSelected}
      aria-label={generateAriaLabel(node)}
      aria-describedby={node.props.description ? `${node.id}-desc` : undefined}
      className={cn('node-wrapper', isFocused && 'focused', isSelected && 'selected')}
      onFocus={() => onFocusChange(node.id)}
      onDoubleClick={() => openPropertyPanel(node.id)}
    >
      {node.props.description && (
        <span id={`${node.id}-desc`} className="sr-only">{node.props.description}</span>
      )}
      <ComponentRenderer node={node} />
      {isFocused && <ResizeHandles node={node} />} {/* 缩放手柄需键盘可达 */}
    </div>
  );
}

# .github/workflows/a11y.yml
name: Accessibility Audit
on: [pull_request]
jobs:
  a11y:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npm run build:storybook
      - name: Run Axe-core on Storybook
        uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
          buildScriptName: build:storybook
          testScript: test:a11y
      - name: Lighthouse CI
        run: npx lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_TOKEN }}

// lighthouserc.js - 无障碍预算阈值
module.exports = {
  ci: {
    collect: { numberOfRuns: 3 },
    assert: {
      assertions: {
        'categories:accessibility': ['error', { minScore: 0.95 }], // 强制 95 分以上
        'color-contrast': 'on',
        'keyboard': 'on',
        'aria-roles': 'on',
        'focus-visible': 'on'
      }
    }
  }
};

// performance-monitor.ts - 生产环境可注入
class PerfMonitor {
  private marks = new Map<string, number>();
  private measures: PerformanceEntry[] = [];
  
  mark(name: string) { this.marks.set(name, performance.now()); }
  
  measure(name: string, startMark: string, endMark?: string) {
    const start = this.marks.get(startMark);
    const end = endMark ? this.marks.get(endMark) : performance.now();
    if (start && end) {
      const duration = end - start;
      performance.measure(name, { start, duration });
      this.measures.push({ name, duration, timestamp: end });
      // 上报阈值超标
      if (duration > THRESHOLDS[name]) reportPerfIssue(name, duration);
    }
  }
  
  // 关键阈值配置
  static THRESHOLDS = {
    'editor-init': 800,      // 编辑器初始化 < 800ms
    'template-load': 300,    // 模板加载渲染 < 300ms
    'drag-frame': 16.6,      // 单帧拖拽 < 16.6ms (60FPS)
    'save-api': 1000,        // 保存接口 < 1s
    'export-pdf': 5000       // PDF 导出 < 5s
  };
}

// feature-flags.ts - 集成 LaunchDarkly / Unleash / 自研
interface FeatureFlags {
  'canvas-webgl-renderer': boolean;      // WebGL 渲染模式
  'ai-layout-suggest': boolean;          // AI 智能布局建议
  'realtime-collab': boolean;            // 实时协同编辑
  'export-3d-preview': boolean;          // 3D 预览导出
  'a11y-strict-mode': boolean;           // 无障碍严格模式
}

// 运行时决策组件
function CanvasRenderer({ template }) {
  const { flags } = useFeatureFlags();
  
  // 根据旗标动态加载渲染器实现
  const RendererImpl = useMemo(() => {
    if (flags['canvas-webgl-renderer'] && supportsWebGL2()) {
      return lazy(() => import('./WebGLRenderer'));
    }
    return lazy(() => import('./DOMRenderer'));
  }, [flags['canvas-webgl-renderer']]);
  
  return (
    <Suspense fallback={<CanvasSkeleton />}>
      <RendererImpl template={template} />
    </Suspense>
  );
}

graph TD
    A[Merge to Main] --> B[CI: Build + Unit + A11y + E2E]
    B --> C{All Green?}
    C -- No --> D[Block & Notify]
    C -- Yes --> E[Build Docker Image + Tag SHA]
    E --> F[Deploy to Canary (5% Traffic)]
    F --> G[Automated Canary Analysis<br/>- Error Rate < 0.1%<br/>- P95 Latency < Baseline*1.2<br/>- Business Metrics Stable]
    G --> H{Pass 30min?}
    H -- No --> I[Auto Rollback + Alert]
    H -- Yes --> J[Progressive Rollout<br/>25% -> 50% -> 100%]
    J --> K[Post-Deploy Smoke Test]
    K --> L[Mark Release Stable]

-- 回滚时的数据库迁移策略：仅加字段，不删字段，不改类型
-- v1.3.0 新增字段示例
ALTER TABLE meeting_templates 
ADD COLUMN canvas_config JSONB DEFAULT '{}',
ADD COLUMN version_int INT GENERATED ALWAYS AS (
  (meta->>'version')::int
) STORED;

-- 创建版本视图，兼容旧版前端读取
CREATE VIEW v_templates_compat AS
SELECT 
  id,
  name,
  meta,
  canvas,
  components,
  bindings,
  COALESCE(canvas_config, '{}') as canvas_config,
  1 as legacy_version_flag
FROM meeting_templates;