11comm前端组技术文档

Appearance

2025-11-14
492
2.2m

优化文档代码的导入方式 ​

1. 任务要求 ​

请深度思考。

请帮我优化 markdown 文档的代码导入方式，使用 vitepress 的导入代码段的方式实现导入。

请你阅读 https://github.com/ruan-cat/10wms/tree/dev/origin/src/components 所示的文档与代码组织方式。

2. 被更改的文件 ​

  1. apps\admin\src\docs\feat\configurable-verify-code\how-to-use.md
  2. apps\admin\src\docs\feat\configurable-verify-code\index.md
  3. apps\admin\src\composables\use-configurable-verify-code\index.md
  4. apps\admin\src\composables\use-configurable-verify-code\implementation-plan.md

3. 文件目录结构 ​

请你模仿以下所示的文件目录层级，重新组织 markdown 文档与导入代码片段的关系。

3.1 例子 1 ​

txt
D:.
│  index.md
│  index.vue
│  list.md
│  types.ts
│  _extends.ts
└─tests
        input-example.vue
        search-example.vue

3.2 例子 2 ​

txt
D:.
│  index.md
│  index.vue
│  list.md
│  not-use-el-dialog-props.ts
│  types.ts
└─tests
        dialog-props-example.vue
        footer-slot-example.vue
        mini-example.vue
        secondary-encapsulation-example.vue
        simple-form-example.vue

3.3 例子 3 ​

txt
D:.
│  index.md
│  index.vue
│  list.md
│  types.ts
└─tests
        mini-example.vue

3.4 操作步骤 ​

  1. 请你在对应的 index.md 旁边，新建 tests 目录。
  2. 新建对应后缀名的文件。文件命名风格为 *-example.* 。

4. 导入拆分的代码块 ​

比如以下的几个例子：

4.1 例子 1 ​

md
::: details 最小案例

<<< ./tests/mini-example.vue

:::

4.2 例子 2 ​

md
::: details 底部插槽例子

<<< ./tests/footer-slot-example.vue

:::

4.3 要求 ​

  1. 导入的代码片段必须以相对路径的方式导入。
  2. 必须以 vitepress 导入代码片段的方式导入。
  3. 必须用 details 容器包裹导入的代码片段。
  4. details 容器和导入的代码片段，必须要有空行间隔，否则 vitepress 文档会渲染失败。
  5. 必须提供 details 容器标题。

5. 具体任务 ​

5.1 任务 001 ​

请你运行 apps\admin\package.json 的 docs:dev 的命令，阅读文档项目启动时出现的报错，并处理文件导入的故障。

贡献者

The avatar of contributor named as ruan-cat ruan-cat

页面历史

最近更新