JX-BPOS/apps/web/src/features/gov-trigger/internal/panel.tsx

/**
 * feature `gov-trigger` —— 触发器的两副面孔,各归其台:
 *
 *   `TriggerRulesHome`(设计中心 · 流程包 - 调起规则):**定义面** —— 谁按什么规则调起这条流,
 *     起单载荷怎么装配。与流程包一处维护:「谁调起它」本就是流程定义的一部分。
 *   `TriggerOpsTab`(运营中心 · 任务 - 起单开关):**处置面** —— 今天开不开。
 *
 * 同一个对象两种动作各归其位:定义是设计者的事,启停是当班主管的事。
 * 触发器与流程包**平级** —— 不入包结构、不随包版本,增删启停改定义都不动任何版本。
 *
 * 自 `~/coding/JCAI_PRD/governance/_components/Governance.tsx` 平移:
 * DOM 结构、类名(`g-*` + 色调 `t-*`)与文案原样保留,mock 常量换成服务端投影(README 平移规则 1/2/4)。
 */
import { useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import type { TriggerConfig } from '@contracts';
import {
  TRIGGER_KIND_LABEL,
  processPackageIdSchema,
  toggleTriggerRoute,
  triggerKindOf,
  upsertTriggerRoute,
} from '@contracts';
import { call } from '@web-shared/typed-fetch.ts';
import {
  Acts,
  Card,
  Chip,
  Clear,
  Field,
  ListEdit,
  NList,
  NRow,
  Note,
  PageHead,
  Prop,
  QueryGate,
  Rows,
  Seg,
  St,
} from '@web-shared/gov/primitives.tsx';
import type { Nav } from '@web-shared/gov/gov-route.ts';
import { useGovObjects, useGovPackages, useGovTriggers } from '@web-shared/gov/gov-api.ts';
import { domainShort } from '@web-shared/gov/domains.ts';

export type HomeProps = { tab: string; nav: Nav };

/** 治理写动作统一入口:成功即失效相关查询,画面由服务端重投影 */
function useGovAction<TInput>(mutate: (input: TInput) => Promise<unknown>, keys: readonly string[]) {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: mutate,
    onSuccess: () => {
      for (const key of keys) void queryClient.invalidateQueries({ queryKey: ['gov', key] });
    },
  });
}

/** 规则原文:一行说清「什么时候起」 */
function ruleText(t: TriggerConfig): string {
  switch (t.spec.kind) {
    case 'periodic-calendar':
      return `按日历 ${t.spec.calendar}`;
    case 'periodic-data':
      return `按 ${t.spec.domain}.${t.spec.object} 的 ${t.spec.dateField} ${t.spec.offset}${t.spec.filter === undefined ? '' : ` 且 ${t.spec.filter}`}`;
    case 'event':
      return `事件(${t.spec.eventType})命中:${t.spec.rule}`;
    case 'registration':
      return '人工登记即起单';
  }
}

/* ==================== 设计侧:调起规则(定义面) ==================== */

const SPEC_KINDS = [
  { k: 'registration', label: '登记' },
  { k: 'event', label: '事件' },
  { k: 'periodic-calendar', label: '周期 · 日历' },
  { k: 'periodic-data', label: '周期 · 数据日历' },
] as const;

export function TriggerRulesHome({ nav }: { nav: Nav }) {
  const q = useGovTriggers();
  const [editing, setEditing] = useState<string | undefined>(undefined);
  const triggers = q.data?.triggers ?? [];

  return (
    <QueryGate query={q}>
      <>
        <Note>
          调起规则决定<b>什么时候起一单</b>:周期 / 事件 / 登记三类。触发器与流程包平级——不入包结构、
          不随包版本,改规则不动任何版本。<b>启停不在这里</b>,那是运营中心的事。
        </Note>
        {triggers.length === 0 ? (
          <Clear>还没有调起规则 —— 配一条,这条流就能被自动或人工调起来。</Clear>
        ) : (
          <NList>
            {triggers.map((t) =>
              editing === t.id ? (
                <TriggerForm
                  key={t.id}
                  trigger={t}
                  onDone={() => setEditing(undefined)}
                  onCancel={() => setEditing(undefined)}
                />
              ) : (
                <NRow
                  key={t.id}
                  tone={t.enabled ? 'brand' : 'mute'}
                  ico="zap"
                  title={t.name}
                  sub={ruleText(t)}
                  cols={[
                    { k: '类别', v: <Chip tone="brand">{TRIGGER_KIND_LABEL[triggerKindOf(t.spec)]}</Chip> },
                    { k: '调起', v: t.processPackageId },
                    { k: '装配', v: `${t.mapping.length} 条` },
                  ]}
                  right={
                    <button
                      className="g-btn"
                      onClick={(e) => {
                        // 行本身也可点(进详情)—— 按钮要拦住冒泡,否则点「改规则」会跳走
                        e.stopPropagation();
                        setEditing(t.id);
                      }}
                    >
                      改规则
                    </button>
                  }
                  onClick={() => nav.push({ k: 'trigger', id: t.id })}
                />
              ),
            )}
          </NList>
        )}
      </>
    </QueryGate>
  );
}

/**
 * 行内编辑表单 —— 改名 / 改目标包 / 改规则 / 改起单装配。
 *
 * 起单装配这里只编辑 `initiation` 一种来源(起单载荷 → 调用接口字段):
 * 触发器只知道调用接口、不知流程内部,别的来源(上游输出口、工作流变量)是流程包边映射的事。
 * 写成 `目标字段 = 载荷路径` 一行一条 —— 与边映射页的读法一致。
 */
function TriggerForm({
  trigger,
  onDone,
  onCancel,
}: {
  trigger: TriggerConfig;
  onDone: () => void;
  onCancel: () => void;
}) {
  const packages = useGovPackages();
  const objects = useGovObjects();
  const [draft, setDraft] = useState<TriggerConfig>(trigger);

  const save = useGovAction(
    (next: TriggerConfig) => call(upsertTriggerRoute, { body: { trigger: next } }),
    ['triggers'],
  );

  const packageIds = [...new Set((packages.data?.packages ?? []).map((p) => p.id))];
  const domains = [...new Set((objects.data?.objects ?? []).map((o) => o.domain))];
  const objectsOfDomain = (domain: string) =>
    (objects.data?.objects ?? []).filter((o) => o.domain === domain).map((o) => o.object);

  /**
   * 起单装配的行式写法:`目标字段 = 载荷路径`。
   *
   * 编辑期这些行是**本地状态**,不从 `draft.mapping` 派生 ——
   * 派生的话,刚点「添加」的空行会被解析器当场滤掉,人永远打不出第一个字(实测)。
   * 解析只在存盘那一刻做。非 initiation 来源不在此面编辑,原样带着走。
   */
  const [lines, setLines] = useState<string[]>(() =>
    trigger.mapping.flatMap((m) => (m.source.from === 'initiation' ? [`${m.target} = ${m.source.path}`] : [])),
  );
  const foreignMappings = trigger.mapping.filter((m) => m.source.from !== 'initiation');

  /** 行 → 映射:写不成 `目标 = 路径` 的行直接丢掉,不塞半条进契约 */
  const parseLines = (): TriggerConfig['mapping'] => [
    ...lines.flatMap((line) => {
      const at = line.indexOf('=');
      if (at <= 0) return [];
      const target = line.slice(0, at).trim();
      const path = line.slice(at + 1).trim();
      if (target === '' || path === '') return [];
      return [{ target, source: { from: 'initiation' as const, path } }];
    }),
    ...foreignMappings,
  ];

  const setSpecKind = (k: string) => {
    if (k === draft.spec.kind) return;
    const spec: TriggerConfig['spec'] =
      k === 'event'
        ? { kind: 'event', rule: 'true', eventType: 'data' }
        : k === 'periodic-calendar'
          ? { kind: 'periodic-calendar', calendar: '0 9 * * 1' }
          : k === 'periodic-data'
            ? {
                kind: 'periodic-data',
                domain: domains[0] ?? 'shared',
                object: objectsOfDomain(domains[0] ?? 'shared')[0] ?? 'record',
                dateField: 'dueDate',
                offset: '-P3D',
              }
            : { kind: 'registration' };
    setDraft({ ...draft, spec });
  };

  return (
    <Card ico="zap" title={`改规则:${trigger.name}`}>
      <Prop ico="tag" title="身份与调起目标">
        <Field k="名称" hint="人读的一句话,说明它什么时候起">
          <input className="g-input" value={draft.name} onChange={(e) => setDraft({ ...draft, name: e.target.value })} />
        </Field>
        <Field k="调起哪条流" hint="只认调用接口,不知流程内部">
          <select
            className="g-input"
            value={draft.processPackageId}
            onChange={(e) => setDraft({ ...draft, processPackageId: processPackageIdSchema.parse(e.target.value) })}
          >
            {packageIds.map((id) => (
              <option key={id} value={id}>
                {id}
              </option>
            ))}
          </select>
        </Field>
      </Prop>

      <Prop ico="settings" title="起单时机">
        <Field k="类别" hint="周期 / 事件 / 登记三类">
          <Seg value={draft.spec.kind} options={SPEC_KINDS.map((s) => ({ k: s.k, label: s.label }))} onPick={setSpecKind} />
        </Field>
        {draft.spec.kind === 'registration' && (
          <Note>登记型无参:人在工作台按调用接口的 schema 填表提交,即起一单。</Note>
        )}
        {draft.spec.kind === 'event' && (
          <>
            <Field k="事件类型">
              <Seg
                value={draft.spec.eventType}
                options={[
                  { k: 'data', label: '数据' },
                  { k: 'time', label: '时间' },
                  { k: 'human', label: '人' },
                  { k: 'control', label: '控制' },
                ]}
                onPick={(k) => {
                  if (draft.spec.kind !== 'event') return;
                  if (k !== 'data' && k !== 'time' && k !== 'human' && k !== 'control') return;
                  setDraft({ ...draft, spec: { ...draft.spec, eventType: k } });
                }}
              />
            </Field>
            <Field k="命中规则" hint="S-FEEL,对事件信封与载荷字段求值">
              <input
                className="g-input"
                value={draft.spec.rule}
                onChange={(e) =>
                  draft.spec.kind === 'event' && setDraft({ ...draft, spec: { ...draft.spec, rule: e.target.value } })
                }
              />
            </Field>
          </>
        )}
        {draft.spec.kind === 'periodic-calendar' && (
          <Field k="日历表达式" hint="cron 风格,如 0 9 * * 1 = 每周一 09:00">
            <input
              className="g-input"
              value={draft.spec.calendar}
              onChange={(e) =>
                draft.spec.kind === 'periodic-calendar' &&
                setDraft({ ...draft, spec: { ...draft.spec, calendar: e.target.value } })
              }
            />
          </Field>
        )}
        {draft.spec.kind === 'periodic-data' && (
          <>
            <Field k="数据域 · 对象" hint="按这张表的日期字段逐行起单">
              <select
                className="g-input"
                value={`${draft.spec.domain}.${draft.spec.object}`}
                onChange={(e) => {
                  if (draft.spec.kind !== 'periodic-data') return;
                  const [domain = '', object = ''] = e.target.value.split('.');
                  setDraft({ ...draft, spec: { ...draft.spec, domain, object } });
                }}
              >
                {(objects.data?.objects ?? []).map((o) => (
                  <option key={`${o.domain}.${o.object}`} value={`${o.domain}.${o.object}`}>
                    {/* 选表的人认中文名,键跟在后面供对映射 */}
                    {domainShort(o.domain)}·{o.label ?? o.object}({o.domain}.{o.object})
                  </option>
                ))}
              </select>
            </Field>
            <Field k="日期字段">
              <input
                className="g-input"
                value={draft.spec.dateField}
                onChange={(e) =>
                  draft.spec.kind === 'periodic-data' &&
                  setDraft({ ...draft, spec: { ...draft.spec, dateField: e.target.value } })
                }
              />
            </Field>
            <Field k="偏移" hint="ISO 时段,如 -P3D = 日期字段前 3 天">
              <input
                className="g-input"
                value={draft.spec.offset}
                onChange={(e) =>
                  draft.spec.kind === 'periodic-data' &&
                  setDraft({ ...draft, spec: { ...draft.spec, offset: e.target.value } })
                }
              />
            </Field>
            <Field k="过滤条件" hint="S-FEEL,留空即全表">
              <input
                className="g-input"
                value={draft.spec.filter ?? ''}
                onChange={(e) => {
                  if (draft.spec.kind !== 'periodic-data') return;
                  const filter = e.target.value.trim();
                  const { filter: _drop, ...rest } = draft.spec;
                  setDraft({ ...draft, spec: filter === '' ? rest : { ...rest, filter } });
                }}
              />
            </Field>
          </>
        )}
      </Prop>

      <Prop ico="arrow-left-right" title="起单装配" extra={`${lines.length + foreignMappings.length} 条`}>
        <Field k="起单载荷 → 调用接口字段" hint="一行一条,写作「目标字段 = 载荷路径」;缺必填即起单失败入死信">
          <ListEdit items={lines} placeholder="customerCode = data.customerCode" onChange={setLines} />
        </Field>
        {foreignMappings.length > 0 && (
          <Note>
            另有 {foreignMappings.length} 条非起单来源的映射(上游输出口 / 工作流变量),
            那是流程包边映射的事 —— 在流程包详情的边映射页维护,这里原样保留不动。
          </Note>
        )}
      </Prop>

      <Acts
        align="end"
        items={[
          { label: '取消', ico: 'x', onClick: onCancel },
          {
            label: save.isPending ? '保存中…' : '保存规则',
            ico: 'circle-check',
            primary: true,
            disabled: save.isPending || draft.name.trim() === '',
            ask: {
              title: `保存调起规则:${draft.name}`,
              note: <Note>触发器与流程包平级 —— 改规则不动任何流程包版本,已起的单照常跑完。</Note>,
              impact: {
                who: '此后命中新规则才起单;在途工作流不受影响',
                undo: '可再改;要临时不起单,去运营中心停用',
                when: '确认后即时生效',
              },
              okLabel: '确认保存',
              onOk: () => save.mutate({ ...draft, mapping: parseLines() }, { onSuccess: onDone }),
            },
          },
        ]}
      />
    </Card>
  );
}

/* ==================== 运营侧:起单开关(处置面) ==================== */

export function TriggerOpsTab({ nav }: { nav: Nav }) {
  const q = useGovTriggers();
  const triggers = q.data?.triggers ?? [];
  const toggle = useGovAction(
    (input: { id: string; enabled: boolean }) =>
      call(toggleTriggerRoute, { params: { id: input.id }, body: { enabled: input.enabled } }),
    ['triggers'],
  );

  return (
    <QueryGate query={q}>
      <>
        <Note>
          开关管的是<b>今天起不起单</b>,不是规则本身。停用后此后不再起新单,<b>已起的照常跑完</b>;
          规则怎么写在设计中心 · 流程包 - 调起规则里改。
        </Note>
        {triggers.length === 0 ? (
          <Clear>还没有调起规则 —— 设计中心配好之后,开关会出现在这里。</Clear>
        ) : (
          <NList>
            {triggers.map((t) => (
              <NRow
                key={t.id}
                tone={t.enabled ? 'brand' : 'mute'}
                ico="zap"
                title={t.name}
                sub={ruleText(t)}
                cols={[
                  { k: '类别', v: <Chip tone="brand">{TRIGGER_KIND_LABEL[triggerKindOf(t.spec)]}</Chip> },
                  { k: '调起', v: t.processPackageId },
                ]}
                right={
                  <St tone={t.enabled ? 'ok' : 'mute'} ico={t.enabled ? 'circle-check' : 'power'}>
                    {t.enabled ? '已启用' : '已停用'}
                  </St>
                }
                onClick={() => nav.push({ k: 'trigger', id: t.id })}
              />
            ))}
          </NList>
        )}
        <Note>逐条启停在触发器详情页做 —— 开关是治理动作,要走影响确认带,不做列表上的顺手一点。</Note>
        {toggle.isError && <Note tone="warn">切换失败,请重试。</Note>}
      </>
    </QueryGate>
  );
}

/* ==================== 触发器详情(两面共用) ==================== */

export function TriggerPage({ id }: { id: string }) {
  const q = useGovTriggers();
  const t = (q.data?.triggers ?? []).find((x) => x.id === id);
  const toggle = useGovAction(
    (enabled: boolean) => call(toggleTriggerRoute, { params: { id }, body: { enabled } }),
    ['triggers'],
  );
  if (t === undefined) return <Note>触发器不存在。</Note>;
  return (
    <>
      <PageHead
        ico="zap"
        tone={t.enabled ? 'brand' : 'mute'}
        kicker={`触发器 · ${t.id}`}
        title={t.name}
        chips={
          <>
            <Chip tone="brand">{TRIGGER_KIND_LABEL[triggerKindOf(t.spec)]}</Chip>
            <Chip ico="boxes">调起 {t.processPackageId}</Chip>
          </>
        }
        desc="触发器与流程包平级——不入包结构、不随包版本,增删启停不改任何版本。规则在设计中心改,开关在运营中心拨。"
        acts={[
          {
            label: t.enabled ? '停用' : '启用',
            ico: 'power',
            danger: t.enabled,
            ask: {
              title: `${t.enabled ? '停用' : '启用'}触发器:${t.name}`,
              note: <Note>启停不改任何版本;已起的单不受影响。</Note>,
              impact: {
                who: t.enabled ? '此后不再自动起单,已在途工作流不受影响' : '此后按规则自动起单',
                undo: '可随时反向切换',
                when: '确认后即时',
              },
              okLabel: t.enabled ? '确认停用' : '确认启用',
              onOk: () => toggle.mutate(!t.enabled),
            },
          },
        ]}
      />
      <Card ico="settings" title="起单规则">
        <Rows
          items={[
            { k: '类别', v: TRIGGER_KIND_LABEL[triggerKindOf(t.spec)] },
            { k: '何时起', v: ruleText(t) },
            { k: '规格', v: JSON.stringify(t.spec), mono: true },
            { k: '流程包', v: t.processPackageId, mono: true },
          ]}
        />
      </Card>
      <Card ico="arrow-left-right" title="起单映射" extra={<span className="g-mono">{t.mapping.length}</span>}>
        <div className="g-rows">
          {t.mapping.map((m, i) => (
            <div key={i}>
              <em>{m.target}</em>
              <b className="mono">{JSON.stringify(m.source)}</b>
            </div>
          ))}
        </div>
      </Card>
    </>
  );
}