Vue.js 中使用 TDesign 组件库实现左侧目录导航

<template>
  <t-card :bordered="false">
    <t-space direction="vertical">
      <t-anchor :bounds="150">
        <t-anchor-item href="#基础锚点" title="基础锚点"></t-anchor-item>
        <t-anchor-item href="#多级锚点" title="多级锚点"></t-anchor-item>
        <t-anchor-item href="#指定容器锚点" title="指定容器锚点"></t-anchor-item>
        <t-anchor-item href="#特定交互锚点" title="特定交互锚点"></t-anchor-item>
        <t-anchor-item href="#尺寸" title="尺寸"></t-anchor-item>
      </t-anchor>
      <t-form
        ref="form"
        :data="formData"
        :rules="FORM_RULES"
        label-align="top"
        :label-width="100"
        @reset="onReset"
        @submit="onSubmit"
      >
        <div class="form-basic-container">
          <div class="form-basic-item">
            <div class="form-basic-container-title">模板信息【UUID:{{template.template_uuid}}】</div>
            <t-form-item label="模板名称" name="templateTitle">
              <t-input v-model="formData.templateTitle" :style="{ width: '322px' }"  />
            </t-form-item>
            <t-form-item label="模板描述" name="templateDescription">
              <t-textarea v-model="formData.templateDescription" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="模板描述" />
            </t-form-item>
<pre><code>        &lt;div class=&quot;form-basic-container-title&quot;&gt;AI操作配置信息&lt;/div&gt;
        &lt;!-- 表单内容 --&gt;

        &lt;t-form-item label=&quot;APP标识符&quot; name=&quot;appIdentifier&quot;&gt;
          &lt;t-input v-model=&quot;formData.appIdentifier&quot; help=&quot;填写app标识符。安卓应用填写package_name，iOS和mac应用填写bundle_id&quot; :style=&quot;{ width: '322px' }&quot; placeholder=&quot;请输入内容&quot; /&gt;
        &lt;/t-form-item&gt;
        &lt;t-row class=&quot;row-gap&quot; :gutter=&quot;[16, 24]&quot;&gt;

          &lt;t-col :span=&quot;6&quot;&gt;
            &lt;t-form-item label=&quot;描述操作内容描述&quot; name=&quot;initCommandDescription&quot;&gt;
              &lt;t-textarea v-model=&quot;formData.initCommandDescription&quot; :autosize=&quot;{ minRows: 8, maxRows: 10 }&quot; placeholder=&quot;可使用自然语言等方式描述需要执行的自动化操作&quot; /&gt;
            &lt;/t-form-item&gt;
          &lt;/t-col&gt;
          &lt;t-col :span=&quot;6&quot;&gt;
            &lt;t-form-item label=&quot;转化标准化操作描述&quot; name=&quot;formulatedCommandDescription&quot;&gt;
              &lt;t-textarea v-model=&quot;formData.formulatedCommandDescription&quot; :autosize=&quot;{ minRows: 8, maxRows: 10 }&quot; placeholder=&quot;使用AI转化后的标准化的自动化操作流程&quot; /&gt;
            &lt;/t-form-item&gt;
          &lt;/t-col&gt;
        &lt;/t-row&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;form-submit-container&quot;&gt;
      &lt;div class=&quot;form-submit-sub&quot;&gt;
        &lt;div class=&quot;form-submit-left&quot;&gt;
          &lt;t-button theme=&quot;primary&quot; class=&quot;form-submit-confirm&quot; type=&quot;submit&quot;&gt; 提交 &lt;/t-button&gt;
          &lt;t-button type=&quot;reset&quot; class=&quot;form-submit-cancel&quot; theme=&quot;default&quot; variant=&quot;base&quot;&gt; 取消 &lt;/t-button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/t-form&gt;
&lt;/t-space&gt;
</code></pre>
  </t-card>
</template>
<script>
</script>