WorkBuddy CN 接入 DevEco CLI鸿蒙应用开发AICoding- 惊觉

WorkBuddy CN 接入 DevEco CLI鸿蒙应用开发AICoding

一、前言

让 AI 写一张登录页，很容易得到一段看起来完整的代码。真正需要解决的是：它使用了哪个版本的 ArkUI 组件，密码切换会不会清空输入，构建是否经过鸿蒙工具链，以及出错后能否找到原始诊断。本文从接入 DevEco CLI 开始，用 WorkBuddy 国内版 IDE 完成一张“云栖生活”登录页，把查文档、改代码、检查和打包放进同一条工作流。

这里选择 WorkBuddy 的项目级 Skill，目的很具体：把当前工程使用的鸿蒙开发方法放在工程旁边，让 Agent 每次处理这个项目时有明确的工具入口。DevEco CLI 承担鸿蒙工具链操作，WorkBuddy 承担需求理解、文件修改和任务组织。这个分工依据华为对 DevEco CLI 的官方介绍：CLI 提供工程、检查、构建、运行以及知识与 Skills 等能力。

二、接入 CLI 与固定国内版开发环境

先打开 WorkBuddy CN IDE，记录“关于”页面中的产品名和版本。本机准备记录中显示 WorkBuddy CN (User) 1.106.1；后续执行以实际打开的客户端为准。本文使用 IDE 的项目窗口，截图也应保留该窗口与项目名，便于读者确认环境。

本机已有 DevEco CLI 1.3.0-stable、DevEco Studio 26.0.0.821，共同模板使用 API 26。官方快速入门要求 DevEco Studio 6.0.0 及以上，推荐 Node.js 22 及以上，并提供稳定版安装命令。读者尚未安装时可执行：

node --version
npm --version
npm install -g @deveco/deveco-cli@stable
devecocli --version

已经安装时先记录版本；本文的命令边界按 1.3.0-stable 随包说明处理。接着在 PowerShell 中指定本机 Studio 路径：

$env:DEVECO_CLI_STUDIO_PATH = 'D:\HarmonyOS\IDE\devecostudio-windows-26.0.0.821\DevEco Studio'

DEVECO_CLI_STUDIO_PATH 用于固定工具链安装根，适合自定义路径或多版本并存，参见 DevEco CLI 源仓环境变量说明。这行仅影响当前 PowerShell 会话；Agent 新开终端时，要确认该会话同样设置了路径，或通过 Windows 用户环境变量配置后重启客户端。

为方便复现，示例工程使用 ASCII 路径 D:\HarmonyLab\WorkBuddyLogin。本机前期创建工程时遇到过中文路径校验失败，因此创建阶段采用这个约定。以下是供读者执行的示例，目录需为空或尚不存在：

devecocli create --app-name LoginShowcase --bundle-name com.example.loginshowcase --project-path 'D:\HarmonyLab\WorkBuddyLogin' --api-level 26
Set-Location -LiteralPath 'D:\HarmonyLab\WorkBuddyLogin'

本系列的四个平台从同一份 Hello World 模板分别开始。本机已完成过该原始模板的构建，取得未签名 HAP；这是工具链准备结果，登录页修改后的构建需要另外记录。

三、把鸿蒙开发 Skill 放进项目

在工程根目录执行项目级安装：

devecocli init --skill --agent workbuddy --project 'D:\HarmonyLab\WorkBuddyLogin'

随后检查工程中的文件：

.workbuddy/
└── skills/
    └── deveco-cli/
        └── SKILL.md

这个目录与 WorkBuddy 官方 Skills 文档约定一致：项目 Skill 位于 .workbuddy/skills/，核心文件包含 name、description 元数据和执行说明，Settings 可查看 Project Skills。随 CLI 安装的 deveco-cli Skill 给出了文档检索、检查、构建等命令的使用方法。

本机已经通过上述 init 命令写入文件，IDE 是否识别它仍需确认。打开这个工程，在 WorkBuddy Settings 的 Skills 管理页查找项目级 deveco-cli，核对它来自当前工程。然后新建任务，观察 Agent 是否读取该 Skill，并留下使用工具的轨迹。Skill 列表证明被发现，任务中的读取与命令输出证明本次工作实际使用了它。

可以复制下面的接入核对提示词：

请先核对当前 HarmonyOS 工程的 DevEco CLI 接入，暂不修改源码。
确认项目级 deveco-cli Skill，报告你读取的 SKILL.md 路径和适用场景。
在执行命令的 PowerShell 会话中设置已提供的 DevEco Studio 路径，
记录 devecocli --version。通过 devecocli docs search 查询 TextInput、
InputType.Password 与状态更新；从实际结果中选择相关条目，使用
docs read 读取。报告查询词、文档标题/ID及与登录页有关的约束。
任何一步失败，请保存原始错误并说明失败阶段，不推断接入成功。

四、查询文档并定义登录页

文档查询应聚焦本次改动。可以分别搜索组件、密码输入类型和状态管理，避免一次长查询返回大量无关条目：

devecocli docs search TextInput --limit 5
devecocli docs search 'InputType.Password' --limit 5
devecocli docs search '@State' --limit 5
# 将下一行占位内容替换为上一步实际返回的文档 ID
devecocli docs read '<实际文档ID>'

search 用于找到本地 HarmonyOS 文档，read 按返回 ID 读取全文；命令说明见 DevEco CLI 源仓。任务记录应保留标题与 ID，并摘出支持当前实现的要点，例如密码输入属性、输入变化回调、状态更新方式。读者由此可以追到 API 依据，而不是只看到 Agent 写“我参考了官方文档”。

页面需求也要落到可观察的行为：应用名“云栖生活”，副标题“欢迎回来，登录后继续探索”；背景 #F6F8FC，主文字 #1F2937，辅助文字 #6B7280，主按钮 #2563EB；左右约 24vp 留白。手机号、密码输入区和“登录”按钮按竖向排列，底部显示“演示界面，不连接真实账号服务”。图标使用原生图形或圆形文字标识，页面无需远程资源。

第一轮即可复制以下开发提示词：

依据刚才读取的鸿蒙官方文档，将 Index.ets 的 Hello World 改为
API 26 ArkTS/ArkUI 登录页。应用名"云栖生活"，副标题"欢迎回来，
登录后继续探索"。背景#F6F8FC，主文字#1F2937，辅助文字#6B7280，
按钮#2563EB，左右约24vp留白，使用圆角输入区和原生文字标识。
手机号占位"请输入手机号"，密码占位"请输入密码"，默认隐藏。
按钮为"登录"，底部写"演示界面，不连接真实账号服务"。
空手机号提示"请输入手机号"，空密码提示"请输入密码"，两项
非空提示"演示模式，未连接账号服务"。先建立本地状态与交互，
不发网络请求、不存储密码。给出改动文件、文档依据和代码差异，
随后运行 lint 与完整 build，分别保存原始结果。

五、用一个小迭代检查状态是否正确

第一轮完成输入与本地提交后，再增加密码“显示/隐藏”控制。这个改动适合观察 Agent 的增量编辑能力：只更新输入类型和控制文案，保持已经输入的密码与页面其余交互。

下面是用于解释状态关系的教学片段，未在本轮编译，不作为可直接替换的完整 Index.ets。组件属性仍应通过上述文档查询与项目 SDK 核对：

@Entry
@Component
struct LoginStateExample {
  @State phone: string = '';
  @State password: string = '';
  @State passwordVisible: boolean = false;
  @State message: string = '';

  private submitDemo(): void {
    if (this.phone.trim().length === 0) {
      this.message = '请输入手机号';
    } else if (this.password.length === 0) {
      this.message = '请输入密码';
    } else {
      this.message = '演示模式，未连接账号服务';
    }
  }

  build() {
    Column() {
      TextInput({ placeholder: '请输入手机号', text: this.phone })
        .onChange((value: string) => { this.phone = value; })
      TextInput({ placeholder: '请输入密码', text: this.password })
        .type(this.passwordVisible ? InputType.Normal : InputType.Password)
        .onChange((value: string) => { this.password = value; })
      Button(this.passwordVisible ? '隐藏' : '显示')
        .onClick(() => { this.passwordVisible = !this.passwordVisible; })
      Button('登录').onClick(() => { this.submitDemo(); })
      Text(this.message)
    }
  }
}

关键关系是密码文本与可见性分别存储；切换动作只修改布尔状态，提交动作只产生本地提示。手机号做去除首尾空白后的空值判断，密码保持原始输入。可在第二轮任务中要求：

为现有密码输入区增加"显示/隐藏"切换。沿用现有状态管理方案，
切换只改变可见性，不能清空密码或更改手机号。请先报告相关
文档依据，再实施最小改动，提供差异。检查默认隐藏、连续切换
后密码保留、空输入提示及非空演示提示四种状态；静态检查和
构建分别给出原始输出，界面状态留待设备或预览验证。

六、分别看 lint、语法检查与完整构建

在工程根目录执行代码规范检查，并保存退出码：

devecocli check lint entry/src/main/ets/pages/Index.ets
$lintExitCode = $LASTEXITCODE
Write-Output "lint exit code: $lintExitCode"

devecocli build
$buildExitCode = $LASTEXITCODE
Write-Output "build exit code: $buildExitCode"

check lint 调用 Code Linter，帮助发现规范问题和实践建议；它不能代替完整编译。build 才负责工程编译打包，应保留日志、退出码和实际 HAP 路径。若显示未配置签名而跳过签名，文章应记为“生成未签名 HAP”；安装运行是后续单独的步骤。

如果希望 Agent 直接调用语法检查工具，可以另行配置 DevEco MCP。WorkBuddy 的官方 MCP 文档提供 Settings 中的配置入口和运行验证方法。先核对 CLI 当前 init --help 支持的 Agent 目标与项目配置，再采用 MCP 模式；--skill 与 --mcp 互斥，需分别设置。

本篇仅采用 MCP 的 check 语法检查，调用输入示例为：

{ "files": ["entry/src/main/ets/pages/Index.ets"] }

具体工具名及输入以客户端实际发现的工具定义为准。其他暴露工具依 Studio 版本和客户端工具列表确认；CLI 的所有命令不会因为配置 MCP 自动变成工具。需要保存一次真实的 check 调用及返回，服务显示可用只能证明连接阶段。主教程的文档检索与构建仍走 CLI，MCP 是可选补充。

本机模板构建准备曾遇到子进程权限限制和 Hvigor daemon 连接超时，后续相同构建命令成功。遇到此类错误时应先判断是否到达 ArkTS 编译阶段，避免让 Agent 修改业务代码来处理尚未进入编译的环境问题。

七、按证据填写结果，再补页面截图

当前准备记录与后续验收项如下。每一项都有自己的证据，方便后续把教程补成完整实践记录：

环节	当前状态	执行后应保存的证据
CLI 与 Studio	已记录 1.3.0-stable、26.0.0.821	终端版本及 Studio“关于”页
原始模板构建	Hello World 构建成功，未签名 HAP	原始日志与模板产物
WorkBuddy 项目 Skill 文件	CLI 已写入	SKILL.md 路径及内容
IDE 实际使用 Skill	待验证	Project Skills 列表、任务读取轨迹
本任务 docs search/read	待执行	查询词、标题/ID、原始返回
登录页及密码切换	待开发	各轮 Index.ets 差异
登录页 lint、可选 MCP check	待执行	分别记录诊断与返回
登录页完整构建	待执行	退出码、日志、实际 HAP 路径
页面与交互	待验证、待配图	初始、空输入提示、密码可见三个状态

WorkBuddy 在这个题材里的使用价值，是把项目技能约定的步骤落实到一次可追踪的任务：先取得 API 依据，再修改状态和界面，随后读取诊断并完成工程构建。登录页足够直观，密码切换也足够小，读者能同时观察界面变化与工具使用。后续补图时，把对应的原始记录一并补齐，这篇文章就能展示从需求到鸿蒙工程产物的完整过程。

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/u010949451/article/details/167226384

WorkBuddy CN 接入 DevEco CLI鸿蒙应用开发AICoding