18 - 代码走读实录

// —— 撤销 / 恢复历史栈 ——
// 快照为「提交时点的 components + 页面变量 + 页面方法 全量」（页面级扩展数据
// 随快照进栈，变量/方法增删可撤销）。离散操作（增/删）执行后立即提交；
// 连续变更（画布拖动、属性编辑）经 deep-watch + debounce 合并为一次提交。
// undo/redo 前会先 flush 未决提交，保证栈顶与当前状态一致。
const HISTORY_LIMIT = 30;
const HISTORY_COMMIT_DELAY = 300;

interface HistorySnapshot {
  components: ComponentInstance[];
  state: Record<string, unknown>;
  methods: Record<string, string>;
  layoutMode: CanvasLayoutMode;
  background: string;
}

// 栈用 ref 包装：computed 需感知 length 变化（普通数组 length 非响应依赖）
const emptySnapshot = (): HistorySnapshot => ({
  components: JSON.parse(JSON.stringify(components.value)),
  state: {},
  methods: {},
  layoutMode: 'flow',
  background: ''
});
const undoStack = ref<HistorySnapshot[]>([emptySnapshot()]);
const redoStack = ref<HistorySnapshot[]>([]);
let commitTimer: ReturnType<typeof setTimeout> | null = null;

const canUndo = computed(() => undoStack.value.length > 1);
const canRedo = computed(() => redoStack.value.length > 0);

function snapshotAll(): HistorySnapshot {
  return {
    components: JSON.parse(JSON.stringify(components.value)),
    state: JSON.parse(JSON.stringify(pageState.value || {})),
    methods: JSON.parse(JSON.stringify(pageMethods.value || {})),
    layoutMode: layoutMode.value,
    background: canvasBackground.value
  };
}

function pushCommit() {
  const snap = snapshotAll();
  const stack = undoStack.value;
  const top = stack[stack.length - 1];
  // 与栈顶一致则不重复入栈（拖拽回弹、flush 空转等场景）
  if (top && JSON.stringify(top) === JSON.stringify(snap)) return;
  stack.push(snap);
  if (stack.length > HISTORY_LIMIT) stack.shift();
  redoStack.value.length = 0; // 产生新分支后 redo 失效
}

/** 立即提交当前状态为一条历史 */
function commitNow() {
  if (commitTimer) {
    clearTimeout(commitTimer);
    commitTimer = null;
  }
  pushCommit();
}

/** 延迟合并提交（连续变更稳定后再记） */
function scheduleCommit() {
  if (commitTimer) clearTimeout(commitTimer);
  commitTimer = setTimeout(() => {
    commitTimer = null;
    pushCommit();
  }, HISTORY_COMMIT_DELAY);
}

/**
 * 画布/属性等无明确入口的连续变更统一走 debounce 提交。
 * watcher 必须挂在独立 scope 上：本 composable 由模块级单例服务创建，
 * 若跟随宿主组件作用域，离开编辑器路由时会被 Vue 停掉，
 * 而单例不会重建 —— 之后所有编辑都不再进入历史，一次撤销直接回到初始态。
 */
effectScope(true).run(() => {
  watch(components, scheduleCommit, { deep: true });
});

/** 应用某历史快照（components + 派生 layout + 页面级数据），清空失效选中 */
function applySnapshot(snap: HistorySnapshot) {
  components.value = JSON.parse(JSON.stringify(snap.components));
  layout.value = components.value.map((item: ComponentInstance) => ({
    i: item.id,
    x: item.x,
    y: item.y,
    w: item.w,
    h: item.h
  }));
  selectedIds.value = selectedIds.value.filter((id: string) =>
    Boolean(findComponentNode(id))
  );
  pageState.value = JSON.parse(JSON.stringify(snap.state || {}));
  pageMethods.value = JSON.parse(JSON.stringify(snap.methods || {}));
  layoutMode.value = snap.layoutMode || 'flow';
  canvasBackground.value = snap.background || '';
}

function undo() {
  commitNow();
  const stack = undoStack.value;
  if (stack.length <= 1) return;
  const current = stack.pop()!;
  redoStack.value.push(current);
  applySnapshot(stack[stack.length - 1]);
}

/** 从看板 schema 收集组件绑定的数据源 id（去重保序） */
export function extractDataSourceIds(schemaJson: unknown): string[] {
  const schema = parseJsonText(schemaJson as any);
  const ids: string[] = [];
  const components = Array.isArray(schema?.components) ? schema!.components : [];
  for (const comp of components) {
    const dsId = comp?.dataBinding?.dataSourceId;
    if (dsId && !ids.includes(dsId)) {
      ids.push(dsId);
    }
  }
  return ids;
}

/** 生成脱敏白名单：仅 {id, name, type}，config（含 mysql 密码等）不进发布产物 */
export async function buildPublishedDataSources(schemaJson: unknown) {
  const ids = extractDataSourceIds(schemaJson);
  const published: Array<{ id: string; name: string; type: string }> = [];
  for (const id of ids) {
    const ds = await datasourceModel.findDataSourceByUuid({ uuid: id });
    if (ds) {
      published.push({ id: ds.uuid, name: ds.name, type: ds.type });
    }
  }
  return published;
}

function withPublishedDataSources(
  schemaJson: string,
  published: Array<{ id: string; name: string; type: string }>
): string {
  const schema = parseJsonText(schemaJson) || {};
  return JSON.stringify({ ...schema, publishedDataSources: published });
}

    // prod：复制 pre → prod（版本在事务内行锁自增），并自动打 publish 快照
    const pre = await dashboardStageModel.findStageByUuid('pre', uuid);
    if (!pre) {
      result.message = '请先发布到预发环境';
      return result;
    }
    // 公开准入闸门（S1-②）：只拦"进入公开面"的这一档 —— prod + public 且内容含页面方法。
    // 校验对象取 **pre 的快照** 而不是草稿：prod 复制的是 pre，pre 才是真正要公开的内容；
    // 若作者在推过 test/pre 之后才删掉草稿里的方法，草稿干净而 pre 仍带方法，只查草稿会放行。
    // test/pre 不拦：dashboard_info_test/_pre 只有 work-server 编辑态（需登录）读得到。
    const publicGate = findPageMethodsGateViolation({
      schemaJson: pre.schemaJson,
      accessMode: access.dashboard?.accessMode || 'public',
      stage: 'prod'
    });
    if (publicGate) {
      result.message = publicGate;
      return result;
    }
    // 访问方式只注入模式，令牌不再进发布产物（portal 读作者态实时行判定，令牌不外泄）
    const prodSchema = parseJsonText(pre.schemaJson) || {};
    const schemaJson = JSON.stringify({
      ...prodSchema,
      accessMode: access.dashboard?.accessMode || 'public'
    });
    const currentVersion = await runTransaction(async (query) => {
      const nextVersion = await dashboardStageModel.nextProdVersion(uuid, query, true);
      await dashboardStageModel.upsertStageInfo(
        'prod',
        {
          uuid,
          name: pre.name,
          description: pre.description || '',
          currentVersion: nextVersion,
          schemaJson,
          publishUserUuid: userData.uuid
        },
        query
      );
      // pre.schemaJson 从库中读出为对象，落快照表前重新序列化（同阶段表复制的规范化）
      await snapshotModel.createDashboardSnapshot(
        {
          dashboardUuid: uuid,
          name: `发布 v${nextVersion}`,
          source: 'publish',
          schemaJson:
            typeof pre.schemaJson === 'string'
              ? pre.schemaJson || '{}'
              : JSON.stringify(pre.schemaJson ?? {}),
          userUuid: userData.uuid
        },
        query
      );
      return nextVersion;
    });

/** portal 取数通道执行入口：白名单校验后走统一数据查询引擎（queryParams 固定空，防参数注入） */
export async function queryPortalDashboardData(params: {
  uuid: string;
  dataSourceId: string;
}): Promise<MyAPIResult> {
  let prod: DashboardStageInfo | null = null;
  try {
    prod = await dashboardStageModel.findStageByUuid('prod', params.uuid);
  } catch (err: any) {
    // 该分支的响应会经 portal 转发给匿名访客，库层错误只进日志
    console.error('[dashboard-stage] 读取 prod 发布行失败：', err);
    return {
      data: null,
      success: false,
      message: '数据查询暂不可用，请稍后重试'
    };
  }
  if (!prod) {
    return { data: null, success: false, message: '看板不存在或未发布' };
  }
  const whitelist = await getProdDataSourceWhitelist(params.uuid);
  if (!whitelist.has(params.dataSourceId)) {
    return { data: null, success: false, message: '数据源不在该看板发布白名单内' };
  }
  return queryPublishedDataSource({
    dataSourceId: params.dataSourceId,
    queryParams: {}
  });
}

function str(name: string, label: string, defaultValue: string): PropSchemaItem {
  return { name, label, type: 'string', defaultValue, widget: inputWidget() };
}

function sel(
  name: string,
  label: string,
  options: Array<{ label: string; value: string }>,
  defaultValue: string
): PropSchemaItem {
  return { name, label, type: 'select', defaultValue, options, widget: selectWidget() };
}

function meta(
  type: string,
  label: string,
  category: ComponentMeta['category'],
  defaultProps: Record<string, any>,
  propSchema: PropSchemaItem[],
  defaultSize: { w: number; h: number } = { w: 6, h: 4 }
): ComponentMeta {
  return { type, label, category, defaultSize, defaultProps, propSchema };
}

// …（elementPlusMetaList 数组内）
  meta(
    'ElButton',
    '按钮',
    'basic',
    { text: '按钮', type: 'primary', size: 'default', plain: false, round: false, disabled: false },
    [
      str('text', '按钮文字', '按钮'),
      sel('type', '类型', [
        { label: '默认', value: 'default' },
        { label: '主要', value: 'primary' },
        { label: '成功', value: 'success' },
        { label: '警告', value: 'warning' },
        { label: '危险', value: 'danger' },
        { label: '信息', value: 'info' }
      ], 'primary'),
      sel('size', '尺寸', [
        { label: '大', value: 'large' },
        { label: '默认', value: 'default' },
        { label: '小', value: 'small' }
      ], 'default'),
      bool('plain', '朴素按钮', false),
      bool('round', '圆角', false),
      bool('disabled', '禁用', false)
    ],
    { w: 4, h: 3 }
  ),

const type = computed(() => props.component.type);
const mergedProps = computed(() => props.component.props || {});

// 运行时注入（预览浮层 provide）：有运行时且组件声明了 events 才挂接事件处理器；
// 编辑画布不注入，点击保持「选中」语义
const runtimeRef = inject(
  CANVAS_RUNTIME_KEY as symbol,
  null
) as Ref<CanvasRuntime | null> | null;

/** 事件名 → Vue onXxx prop（组件 events 声明 × 页面方法绑定） */
function buildEventProps(): Record<string, any> {
  const runtime = runtimeRef?.value;
  const events = props.component.events;
  if (!runtime || !events) return {};
  const result: Record<string, any> = {};
  for (const [evt, methodName] of Object.entries(events)) {
    if (!methodName || typeof runtime.methods[methodName] !== 'function') {
      continue;
    }
    const key = `on${evt.charAt(0).toUpperCase()}${evt.slice(1)}`;
    result[key] = () => invokePageMethod(runtime, methodName);
  }
  return result;
}

<template>
  <component :is="rendered" />
</template>