<template>
  <section>
    <p>种子文件已经提供了业务组件通用的架构，可以通过以下几种方式快速获取架构代码。</p>
    <ul>
      <li>
        <p>
          从
          <a-tag class="mr-none" color="orange">@/src/pages/system/_seed</a-tag>中找到，并复制内容。
        </p>
      </li>
      <li>
        <p>
          <b>用户片段</b>达到快速生成的目的。
        </p>
        <p>
          在VSCode中，选择
          <a-breadcrumb separator=">">
            <a-breadcrumb-item>文件</a-breadcrumb-item>
            <a-breadcrumb-item>首选项</a-breadcrumb-item>
            <a-breadcrumb-item>用户片段</a-breadcrumb-item>
          </a-breadcrumb>输入
          <a-tag class="mr-none" color="orange">vue.json</a-tag>并回车，将会打开针对vue文件的用户片段配置JSON。
        </p>
        <p>
          注意：在模版字符串中如果使用到了
          <a-tag class="mr-none" color="orange">$</a-tag>，就请使用
          <a-tag class="mr-none" color="orange">$$</a-tag>对其进行转义。
        </p>
      </li>
    </ul>
    <Highlight :code="codes['/seed/vue.json']" language="json" />
    <ul>
      <li>在下方直接复制代码。</li>
    </ul>
  </section>
</template>
<script>
import Highlight from '../highlight';

export default {
  components: {
    Highlight,
  },
  props: {
    codes: {
      type: Object,
    },
  },
};
</script>