用 AI 开发 DHdesign 项目 ​

AI 只有先确认项目使用的 Vue 版本、组件包和现有代码习惯，才能写出可以直接放进项目的代码。不要只告诉它“这个项目用了 DHdesign”，还要把相关文档、目标文件和验收要求一起提供。

先确认项目类型 ​

  • Vue3 移动端，使用 @szhn/dh-design-mobile，底层是 Vant 4，模板标签以 van- 开头。
  • Vue3 PC 端，使用 @szhn/dh-design-pc，底层是 Element Plus，模板标签以 el- 开头。
  • Vue2 移动端老项目，使用 @szhn/dh-design-mobile-vue2，底层是 Vant 2，模板标签以 van- 开头。
  • Vue2 PC 端老项目，使用 @szhn/dh-design-pc-vue2，底层是 Element UI，模板标签以 el- 开头。

新项目使用 Vue3 组件包，Vue2 兼容包只用于老项目。PC 端的 Pro 组件和部分布局组件是 DHdesign 自有组件，模板标签使用 dh- 前缀，不能按 Element Plus 的接口推测。

把这些资料交给 AI ​

按下面的顺序提供资料，AI 判断接口时以前面的内容为准：

  1. 当前项目的 package.json，以及准备修改的页面或组件。
  2. DHdesign 对应组件的文档和示例。
  3. 已安装组件包的 README 和类型声明。需要确认准确的导出名称或参数时，可以查看 node_modules/@szhn/dh-design-*/dist/types。
  4. llms.txt，它汇总了包名、组件规则和常用文档入口，适合提供给支持读取网页的 AI。
  5. Vant、Element Plus 或 Element UI 的官方文档，只用于补充 DHdesign 没有改动的标准接口。

标准组件的 Props、Events 和 Slots 默认沿用对应的底层组件，DHdesign 文档有特别说明时，以 DHdesign 文档为准。Pro 组件和其他自有组件必须查看 DHdesign 文档或类型声明，不能根据名称猜参数。

可直接使用的提示词 ​

复制下面的内容，把最后一段替换成自己的任务。如果代码助手可以读取项目文件，不需要把整份文档粘贴进对话，只要让它先查看这些文件。

txt
你正在修改一个使用 DHdesign 的项目。开始写代码前，请先：

1. 查看 package.json，确认 Vue 版本和当前项目已经安装的 DHdesign 组件包。
2. 阅读待修改文件及其附近的同类页面，沿用现有的目录、写法和样式组织方式。
3. 阅读本次使用组件的 DHdesign 文档、示例和类型声明，只使用能够确认存在的导出和参数。

请遵守以下规则：

- 业务代码必须从项目已经使用的 DHdesign 包导入组件，不要改成从 Vant、Element Plus 或 Element UI 直接导入。
- Vue3 移动端组件从 @szhn/dh-design-mobile 导入，模板使用 van- 标签。
- Vue3 PC 端标准组件从 @szhn/dh-design-pc 导入，模板使用 el- 标签；Message、Notification、Loading 等服务使用 DHdesign 提供的导出。
- Vue2 项目使用对应的 -vue2 兼容包，不要把 Vue3 写法混进老项目。
- DHdesign PC Pro 组件和其他 dh- 标签是自有组件，必须按 DHdesign 文档和类型声明使用。
- 除非 DHdesign 文档有特别说明，标准组件的 Props、Events 和 Slots 沿用对应底层组件。
- 按项目现有方式引入组件样式。不要遗漏样式，也不要擅自改成整包引入。
- 全局主题通过 DHdesign 的主题方法设置，不要用大量 --van-* 或 --el-* 变量代替主题配置。
- 不要安装新依赖，不要修改无关文件，不要编造组件、参数、事件或插槽。

完成修改后，请检查导入路径、组件标签、样式入口和参数是否与当前项目一致，并运行项目已有的检查。修复本次修改引起的问题后，再说明改了什么和检查结果。

本次任务：
[写清楚要修改的页面、功能、交互状态和验收要求]

如果任务涉及主题，请让 AI 先阅读主题管理。如果是 Vue2 项目，请同时提供Vue2 老项目接入。

描述任务时写清楚四件事 ​

  • 改哪里：给出页面、组件或文件路径。
  • 做什么：说明用户操作、数据来源和预期结果。
  • 有哪些状态：至少说明加载、空数据、失败、禁用等与任务有关的状态。
  • 怎样算完成：写清楚视觉、交互、校验和兼容要求。

比如，不要只说“加一个查询表单”，可以写成：

txt
在用户列表页顶部增加姓名和状态筛选。点击查询后刷新列表，点击重置后清空条件并重新加载第一页。请求期间禁用查询按钮，接口失败时沿用项目现有的错误提示。使用当前页面已经引入的 DHdesign PC 组件，不新增依赖。

检查 AI 生成的代码 ​

提交代码前，至少确认下面这些内容：

  • 组件、服务和类型都从正确的 DHdesign 包导入。
  • 移动端使用 van- 标签，PC 标准组件使用 el- 标签，自有组件使用文档规定的 dh- 标签。
  • 组件参数、事件和插槽能在 DHdesign 文档、类型声明或对应底层组件文档中找到。
  • 按需引入时带上了对应样式，全量引入时没有重复加载样式。
  • 主题修改走 DHdesign 的主题方法，页面局部样式没有变成全局覆盖。
  • 加载、空数据、失败、禁用和重复提交等状态符合任务要求。
  • 项目原有的检查可以通过，页面实际操作结果与需求一致。