使用vue3+tsx语法实现这个需求

好的，那我来给你提供一个使用 Vue 3 + TSX 语法的实现方案。

首先，我们需要安装 `@vue/runtime-dom` 和 `@vue/compiler-dom` 这两个包以支持 Vue 3 的编译和运行时：

npm install @vue/runtime-dom @vue/compiler-dom

然后，我们可以创建一个单独的组件来展示 DA 结果。在这个组件中，我们可以使用 TSX 语法来定义模板和组件逻辑：

import { defineComponent, ref } from 'vue';
import { DaResult } from './types'; // 假设 DaResult 是 DA 结果的类型定义

export default defineComponent({
  props: {
    daResult: {
      type: Object as () => DaResult,
      required: true,
    },
  },
  setup(props) {
    const isExpanded = ref(false);

    function toggleExpansion() {
      isExpanded.value = !isExpanded.value;
    }

    return {
      isExpanded,
      toggleExpansion,
    };
  },
  render() {
    const { daResult, isExpanded } = this;
    const { source, query, analyse } = daResult;

    return (
      <div>
        <div onClick={this.toggleExpansion}>
          {source} - {query}
        </div>
        {isExpanded && (
          <div>
            <div>
              term_weight: {analyse.basic.ltrfeat.term_weight}, cut_idf:{' '}
              {atob(analyse.basic.ltrfeat.cut_idf)}, ngram_idf:{' '}
              {atob(analyse.basic.ltrfeat.ngram_idf)}
            </div>
            <div>
              成分分析: {formatMaxProb(analyse.search.parse)}
            </div>
            <div>
              意图识别: {formatMaxProb(analyse.search.type)}
            </div>
            {analyse.search.ww && (
              <div>
                ww:
                {analyse.search.ww.map((wwItem) => (
                  <div>
                    {wwItem.type === 1 ? 'where' : 'what'}: {wwItem.words.join(', ')}
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </div>
    );

    function formatMaxProb(prob: { [key: string]: number }): string {
      const maxProb = Math.max(...Object.values(prob));
      const maxProbLabel = Object.keys(prob).find(
        (key) => prob[key] === maxProb
      );
      return `${maxProbLabel}: ${maxProb.toFixed(2)}`;
    }
  },
});

这个组件接受一个 `daResult` 属性作为输入，并且使用 `isExpanded` 和 `toggleExpansion` 两个响应式变量来控制是否展开。在模板中，我们使用 `onClick` 来绑定展开和收起的事件，并且使用 `isExpanded` 和 JSX 的条件渲染来控制展开和收起时的内容。

需要注意的是，在 TSX 中使用插值时，我们需要使用 `{}` 包裹 JavaScript 表达式，并且使用 `this` 来访问组件实例上的属性和方法。

最后，我们可以在父组件中使用这个新组件来展示 DA 结果：

import { defineComponent } from 'vue';
import DaResultComponent from './DaResult';

export default defineComponent({
  data() {
    return {
      daResults: [], // 假设这里是 DA 结果的数组
    };
  },
  render() {
    return (
      <div>
        {this.daResults.map((daResult) => (
          <DaResultComponent daResult={daResult} />
        ))}
      </div>
    );
  },
});

这样，我们就可以使用 Vue 3 + TSX 语法来实现这个需求了。需要注意的是，TSX 的语法和 JSX 有一些不同，需要了解一下它的语法规则。