zhaoshang_client_ui/harness/tools/verify-question-cards.mjs

/**
 * 验证「问卷作答后变只读」这条链路 + 选项选中样式那条修（用户 2026-09-24 反馈的两个问题）。
 *
 * 用户原话：
 *   ①「如果下方已经新对话了，上方的问卷应该是只读状态」
 *   ②「在问卷中选择具体项时，边框有点问题……一次应该只有一个选项是选中样式」
 *
 * ①的根因：`QuestionCard.vue` 有只读渲染分支，但判定是「内容里带 answers」——
 *   而此前**没有任何代码把答案写回内容**，所以永远是可交互态。
 *   修法：提交时用 `applyQuestionCardsAnswers()` 把答案写回那一行（新增纯函数模块）。
 * ②的根因：`isFreeformSelected()` 对**常驻输入框恒返回 true** → 那一行永远带选中边框。
 *   修法：改成"填了内容、且单选时没选别的选项"才算选中。
 *
 * 怎么跑（先打包）：
 *   npx esbuild harness/tools/_entry-question-cards.ts --bundle --format=esm \
 *     --outfile=harness/tools/_question-cards.mjs --alias:@=./src --define:import.meta.env='{}'
 *   node harness/tools/verify-question-cards.mjs
 */

import { readFileSync } from 'node:fs';

const {
  buildAnsweredQuestionCardsContent,
  applyQuestionCardsAnswers,
  hasAnsweredQuestionCards,
  StreamXMLFilter,
  RecordRowTypes,
  parseQuestionsFromContent,
  parseAnswersFromContent,
} = await import('./_question-cards.mjs');

let pass = 0;
let fail = 0;
const check = (name, ok, extra = '') => {
  if (ok) {
    pass++;
    console.log('  ok   ' + name);
  } else {
    fail++;
    console.log('  FAIL ' + name + '  ' + extra);
  }
};

const QUESTIONS_JSON = JSON.stringify({
  questions: [
    {
      header: '本次是否需要结合具体公司情况？如需要，请补充公司名称或信用代码。',
      freeformInputOnTop: true,
      freeformPlaceholder: '请输入工商注册全名或统一社会信用代码',
      options: [{ label: '不需要公司信息' }],
    },
  ],
});
const CONTENT = `<scope title="思考中">\n</scope>\n<question-cards>${QUESTIONS_JSON}</question-cards>`;

console.log('\n【1】把答案写回问卷行（写回后才会走只读渲染分支）');
{
  const answers = [{ header: '本次是否需要结合公司情况？', selected: ['不需要公司信息'], freeText: '', skipped: false }];
  const written = applyQuestionCardsAnswers(CONTENT, answers);

  // ⚠️ 这里必须用**组件真正用的那个解析函数**（`parseAnswersFromContent`，它会解包标记）。
  // 上一版测试是手工把 `<question-cards>` 去掉再 JSON.parse —— 于是"渲染层交给组件的 content
  // 是带标记的"这个事实被测试掩盖了，放过了真实的「卡片渲染成空」bug（见【5】）。
  const parsedAnswers = parseAnswersFromContent(written);

  check('写回后能被组件的只读分支解析出 answers', Array.isArray(parsedAnswers) && parsedAnswers.length === 1,
    JSON.stringify(written)?.slice(0, 140));
  check('答案形状与只读渲染一致（header / selected / freeText）',
    parsedAnswers?.[0]?.header === '本次是否需要结合公司情况？' &&
      JSON.stringify(parsedAnswers?.[0]?.selected) === JSON.stringify(['不需要公司信息']) &&
      parsedAnswers?.[0]?.freeText === '',
    JSON.stringify(parsedAnswers?.[0]));
  // ⚠️ 写回**保留 questions**（只读态复用同一个问卷模板 → 「样式不能变」），
  // 只读的开关是"有 answers"，不是"没有 questions"
  check('**写回后 questions 仍在**（只读态复用同一模板，样式不变）',
    parseQuestionsFromContent(written).length === 1,
    JSON.stringify(written).slice(0, 140));
  check('问卷外的前后内容没被动（scope 行仍在前、标签成对）',
    written.startsWith('<scope title="思考中">\n</scope>\n<question-cards>') && written.endsWith('</question-cards>'));
  check('hasAnsweredQuestionCards 能识别', hasAnsweredQuestionCards(written) === true);
  check('作答前不算已作答（只读分支不会误触发）', hasAnsweredQuestionCards(CONTENT) === false);
  check('作答前能解析出题目（交互分支照常渲染）', parseQuestionsFromContent(CONTENT).length === 1);
}

console.log('\n【2】边界：不能破坏别人的内容');
{
  check('没有问卷标记 → 原样返回', applyQuestionCardsAnswers('<scope>正文</scope>', []) === '<scope>正文</scope>');
  check('标记不成对 → 原样返回',
    applyQuestionCardsAnswers('<question-cards>{"questions":[]}', []) === '<question-cards>{"questions":[]}');

  const two = `<question-cards>{"questions":[{"header":"第一轮"}]}</question-cards>\n正文\n<question-cards>{"questions":[{"header":"第二轮"}]}</question-cards>`;
  const applied = applyQuestionCardsAnswers(two, [{ header: '第二轮', selected: ['A'] }]);
  const firstBlock = applied.slice(0, applied.indexOf('正文'));
  const secondBlock = applied.slice(applied.indexOf('正文'));
  check('**只改最后一个**问卷块（多轮时不会改错行）',
    firstBlock.includes('{"questions":[{"header":"第一轮"}]}') && !firstBlock.includes('"answers"') &&
      secondBlock.includes('"answers"'),
    applied.slice(0, 200));
  check('只替换一次（幂等）', applyQuestionCardsAnswers(applied, [{ header: '第二轮', selected: ['A'] }]) === applied);
}

console.log('\n【3】答案字段归一化（不让无关状态进内容）');
{
  const built = buildAnsweredQuestionCardsContent([
    { header: ' 问题 ', selected: [' A ', '', 'B'], freeText: ' 手输内容 ', skipped: undefined },
  ]);
  const parsed = JSON.parse(built);
  check('selected 去空白并过滤空项', JSON.stringify(parsed.answers[0].selected) === JSON.stringify(['A', 'B']),
    JSON.stringify(parsed.answers[0].selected));
  check('freeText 原样保留（不清空内部空白）', parsed.answers[0].freeText === ' 手输内容 ');
  check('skipped 归一化成布尔', parsed.answers[0].skipped === false);
}

console.log('\n【4】接线（源码级：这两处都在 Vue 组件 / hook 里，node 跑不起来）');
{
  const hook = readFileSync('src/components/business-assistant/useBusinessAssistantChat.ts', 'utf8');
  check('submitQuestionAnswers 里调用了写回',
    /applyQuestionCardsAnswers\(questionCardsMessage\.content, answers\)/.test(hook));
  check('写回的是「最后一条带 <question-cards> 的 AI 消息」',
    /reverse\(\)[\s\S]{0,220}item\.content\.includes\('<question-cards>'\)/.test(hook));

  const card = readFileSync('src/components/Chat/QuestionCard.vue', 'utf8');
  check('只读分支的判定仍是「内容里有 answers」',
    /const isReadonly = computed\(\(\) => !!contentAnswers\.value\)/.test(card));
  check('**常驻输入框不再恒判为选中**（第二个 bug 的修）',
    !/const isFreeformSelected = \(cardIdx: number\): boolean => \{\s*return isCardFreeformAlwaysOn\(cardIdx\) \|\|/.test(card) &&
      /if \(!isCardFreeformAlwaysOn\(cardIdx\)\) \{/.test(card));
  check('单选时"选了别的选项就不算它选中"', /if \(card\?\.multiSelect\) return true;/.test(card));

  // ⚠️ 第二轮修正（用户 2026-09-24 追加反馈）：「点了输入框应该把高亮移过来、并取消右边的选中」。
  // 只按"填了内容才算选中"是不够的 —— 点了输入框却不亮、右边还亮着，同样是不对的。
  check('常驻输入框的 focus 与 click 都接同一处理函数（点一下就等于选了它）',
    (card.match(/@focus="handleAlwaysOnFreeformInteract\(cardIdx\)"/g) || []).length === 1 &&
      (card.match(/@click="handleAlwaysOnFreeformInteract\(cardIdx\)"/g) || []).length === 1);
  check('该处理函数：记下"输入框已激活"（高亮它）',
    /const handleAlwaysOnFreeformInteract[\s\S]{0,400}isFreeformActive\.value\[cardIdx\] = true/.test(card) ||
      /const handleAlwaysOnFreeformInteract[\s\S]{0,400}isFreeformActive\.value = \{ \.\.\.isFreeformActive\.value, \[cardIdx\]: true \}/.test(card));
  check('该处理函数：**单选时清掉已选选项**（高亮只跟一个走）',
    /const handleAlwaysOnFreeformInteract[\s\S]{0,600}!card\.multiSelect &&[\s\S]{0,200}new Set\(\)/.test(card));
  check('选中判定里包含"被交互过"这一项（chosenByInteraction）',
    /const chosenByInteraction = !!isFreeformActive\.value\[cardIdx\]/.test(card));

  // ③ 第三轮（2026-09-24）：「问卷长什么样，选完后还是长什么样，样式不能变」
  //    ⇒ 只读态**不许**再另起一套模板，必须复用同一个问卷模板 + 只读开关
  check('**没有单独的只读模板分支**（旧的 v-if="isReadonly && contentAnswers.length > 0" 必须消失）',
    !/v-if="isReadonly && contentAnswers\.length > 0"/.test(card));
  check('模板只有一处 question-card-shell（一套样式）',
    (card.match(/class="question-card-shell"/g) || []).length === 1);
  check('只读开关挂在同一模板上（submitted / readonly）',
    /:class="\{ submitted: submitted \|\| isReadonly, readonly: isReadonly \}"/.test(card));
  check('只读态把答案还原成界面选中态（hydrateFromAnswers）',
    /const hydrateFromAnswers = \(\) => \{/.test(card) && /if \(isReadonly\.value\) hydrateFromAnswers\(\)/.test(card));
  check('只读态禁交互（守卫含 isReadonly）', /if \(submitted\.value \|\| isReadonly\.value\) return;/.test(card));
  check('只读态提交按钮禁用（canSubmit 含 isReadonly）',
    /if \(submitted\.value \|\| isReadonly\.value\) return false;/.test(card));
  check('只读态输入框可读不可改（:readonly="isReadonly"）',
    (card.match(/:readonly="isReadonly"/g) || []).length >= 2);
}

console.log('\n【5】完整往返：真实切行器 → 组件拿到的 content → 解析（这条会抓「卡片渲染成空」）');
{
  const answers = [{ header: '（单选）本次是否需要结合公司情况？', selected: ['不需要公司信息'], freeText: '', skipped: false }];

  /** 跑真实切行器，取问卷行的 content —— 渲染层就是这么把内容交给 QuestionCard 的 */
  const questionCardsRowContent = (content) => {
    const rows = new StreamXMLFilter({}).processChunk(content);
    const rowsOfType = rows.filter((row) => row.type === RecordRowTypes.QuestionCards);
    return rowsOfType.length ? rowsOfType[rowsOfType.length - 1].content : '';
  };

  const rowBefore = questionCardsRowContent(CONTENT);
  check('切行器产出的问卷行 content **带 `<question-cards>` 标记**（所以解析必须先解包）',
    rowBefore.startsWith('<question-cards>') && rowBefore.endsWith('</question-cards>'), rowBefore.slice(0, 60));
  check('未作答：交互分支解析得到题目', parseQuestionsFromContent(rowBefore).length === 1);

  const rowAfter = questionCardsRowContent(applyQuestionCardsAnswers(CONTENT, answers));
  const parsedAnswers = parseAnswersFromContent(rowAfter);
  const parsedQuestions = parseQuestionsFromContent(rowAfter);
  check('作答后：只读分支解析得到答案', Array.isArray(parsedAnswers) && parsedAnswers.length === 1,
    JSON.stringify(rowAfter)?.slice(0, 140));
  // ⚠️ 写回保留 questions（只读态复用同一模板），所以断言的是**两者都在**：
  // questions 负责「长得和原来一样」，answers 负责「只读」
  check('作答后：questions 仍在（同一模板渲染 → 样式不变）', parsedQuestions.length === 1);
  // ★ 这条是"卡片渲染成空"的直接守卫：两个分支至少有一个能渲染出东西
  //   （组件模板：`v-if="isReadonly && contentAnswers.length > 0"` / `v-else-if="questions.length > 0"`）
  check('**只读态能渲染出问卷本体**（questions 在 → 与作答前同一套样式；answers 在 → 只读）',
    (parsedAnswers?.length || 0) > 0 && parsedQuestions.length > 0,
    `answers=${parsedAnswers?.length ?? 'null'} questions=${parsedQuestions.length}`);
  check('直接传「标记内 JSON」也要能解析（兼容不带标记的调用方）',
    parseAnswersFromContent(JSON.stringify({ answers }))?.length === 1);
}

console.log(`\n===== 通过 ${pass} 项，失败 ${fail} 项 =====`);
process.exit(fail ? 1 : 0);