用华为云码道 CLI/TUI 从零开发「幸运跑马灯抽奖」网页应用
本文基于真实操作记录：在 Windows 上安装并授权码道 CLI，通过 TUI/
codearts run输入自然语言需求，自动生成跑马灯抽奖网页，并完成浏览器预览与功能测试。
参考文档：什么是码道CLI、安装、授权、快速入门、下载页
一、案例目标
用码道（CodeArts Agent）终端交互界面（TUI）/命令行模式，完成一个可直接在浏览器打开的「幸运跑马灯抽奖」网页应用，覆盖：
- 安装码道 CLI
- 使用 AK/SK 完成授权登录
- 启动 TUI / 使用
codearts run输入需求 - 自动生成 HTML/CSS/JS 工程文件
- 浏览器运行与抽奖功能测试
最终产物目录：marquee-lottery/（index.html、style.css、script.js、README.md）
二、环境准备
| 项目 | 本案例实测 |
|---|---|
| 操作系统 | Windows 10/11 (x64) |
| 终端 | PowerShell |
| 码道版本 | 26.6.2 |
| 使用模型 | huaweicloud-maas/deepseek-v3.2（DeepSeek-V3.2） |
| 预览方式 | 浏览器打开 /python -m http.server |
官方支持系统还包括 macOS 11+、常见 Linux 发行版，详见前提条件。使用前需在华为云开通码道代码智能体套餐。
三、步骤 1：安装码道 CLI
3.1 Windows 安装命令
在PowerShell中执行（安装脚本地址以产品下载页为准）：
irmhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.ps1|iexmacOS / Linux：
sh-c"$(curl-Lhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"&&exportPATH=~/.codeartsdoer/installers:$PATH3.2 验证安装
codearts-v本案例回显：
26.6.2提示：若提示无法识别
codearts命令，通常是环境变量未刷新。可新开一个「在终端中打开」窗口，或重启终端/电脑后再试。
四、步骤 2：AK/SK 授权登录
码道 CLI 支持浏览器授权，也支持通过环境变量配置 AK/SK（适合自动化与无图形场景）。本案例使用 AK/SK。
4.1 获取访问密钥
- 登录华为云控制台，进入「我的凭证」
- 新建访问密钥，下载并妥善保存
credentials.csv（关闭弹窗后无法再次查看 SK） - 也可参考码道门户说明：https://codearts.huaweicloud.com/portal/settings/cli-auth
4.2 配置进程级环境变量（临时授权）
PowerShell：
$env:CODEARTS_CLI_AK ="你的AccessKeyId"$env:CODEARTS_CLI_SK ="你的SecretAccessKey"CMD：
set CODEARTS_CLI_AK=你的AccessKeyId set CODEARTS_CLI_SK=你的SecretAccessKey如需永久生效，可在系统「环境变量」中新增同名用户变量，或写入~/.zshrc（macOS/Linux）。
4.3 验证授权是否成功
codearts models授权成功后可看到可用模型列表，例如：
model_id model_name ------------------------------------------------------------- huaweicloud-maas/deepseek-v3.2 DeepSeek-V3.2 huaweicloud-maas/GLM-5.1 GLM-5.1 huaweicloud-maas/Glm-5-internal GLM-5若出现「认证失败，没有设置环境变量 CODEARTS_CLI_AK/CODEARTS_CLI_SK」，说明当前终端会话尚未配置密钥。
安全提醒：AK/SK 等同账号凭证，请勿提交到公开仓库或粘贴到公开文章正文。本文截图中已脱敏。
五、步骤 3：创建项目目录并启动码道
5.1 创建工作目录
mkdir D:\demo\demo\marquee-lottery cd D:\demo\demo\marquee-lottery5.2 两种使用方式
| 方式 | 命令 | 适用场景 |
|---|---|---|
| TUI 交互界面 | codearts | 对话框持续对话、可视化确认权限 |
| CLI 一键执行 | codearts run "需求..." | 脚本化、批量、无人值守 |
本案例两种方式都验证过：TUI 适合边看边改；codearts run适合把完整需求一次交给智能体。
启动 TUI：
codearts首次写入文件时，界面会询问目录访问权限，建议选择Allow always并 Confirm，避免每一步都打断。
六、步骤 4：输入需求（跑马灯中奖应用）
在 TUI 对话框，或使用 CLI：
codearts run-m"huaweicloud-maas/deepseek-v3.2"--title"marquee-lottery"@" 请在当前目录创建一个完整的「跑马灯中奖」网页应用： 1. 纯 HTML + CSS + JavaScript，可直接用浏览器打开 2. 页面标题：幸运跑马灯抽奖 3. 至少 8 个奖品格子；点击开始后跑马灯高亮循环，逐渐减速停下 4. 弹出/展示中奖结果，支持重置，显示抽奖历史 5. 节日喜庆红金风格，适配桌面与手机 6. 生成 index.html（可拆 css/js）和 README.md "@6.1 码道实际执行过程（本案例日志摘要）
智能体大致按以下工具链工作：
bash/dir：查看当前目录todowrite：拆解任务（HTML / CSS / JS / 测试）write index.html：页面骨架（开始/停止/重置、奖品区、历史区）write style.css：布局、跑马灯样式、响应式write script.js：奖品数据、滚动动画、抽奖与历史统计
会话结束时回显类似：
已创建完整的「跑马灯中奖」网页应用 文件结构： - index.html - style.css - script.js本案例生成耗时约6 分钟（含模型推理与多次写文件）。
七、步骤 5：查看生成结果
目录内容：
marquee-lottery/ ├── index.html ├── style.css ├── script.js └── README.md核心能力包括：
- 8 个奖品跑马灯滚动与高亮
- 开始 / 停止 / 重置
- 抽奖次数、中奖记录
- 中奖彩屑动画
- 空格键开始/停止，Esc 重置
八、步骤 6：运行与测试结果
8.1 启动本地预览
cd D:\demo\demo\marquee-lottery python-m http.server 8765浏览器访问：http://127.0.0.1:8765/index.html
（也可直接双击打开index.html。）
8.2 初始页面
页面标题为「幸运跑马灯抽奖」，可见奖品条、开始抽奖按钮、奖品列表与概率。
8.3 抽奖进行中
点击「开始抽奖」后，跑马灯高亮快速循环。
8.4 停止并查看结果
点击「停止」后，当前奖品区展示中奖名称，历史记录写入一条。
本案例一次实测结果：
| 检查项 | 结果 |
|---|---|
| 页面标题 | 幸运跑马灯抽奖 |
| 奖品列表 | 一等奖 iPhone、二等奖 耳机、三等奖 优惠券、谢谢参与、再来一次、神秘礼盒、周边T恤、现金红包 |
| 抽奖结果 | 三等奖 优惠券 |
| 抽奖次数 | 1 |
| 历史记录 | 已显示「三等奖 优惠券」及时间戳 |
| 重置按钮 | 可用 |
九、常见问题与实践经验
未配置 AK/SK
codearts docs/codearts models会提示认证失败。先设置CODEARTS_CLI_AK/CODEARTS_CLI_SK。权限弹窗卡住自动化
TUI/run若对bash、外部目录写入设为 ask，非交互场景会长时间等待。可在权限配置中改为 allow，或在 TUI 中选择 Allow always。Windows 下
ls -la失败
智能体有时发出 Linux 命令；PowerShell 中ls -la会报错。码道通常会改用dir继续，不影响最终写文件。安装后找不到命令
新开终端或重启，确保~\.codeartsdoer\installers已在 PATH。模型选择
用-m huaweicloud-maas/deepseek-v3.2可指定模型；也可用codearts models查看当前账号可用列表。
十、总结
本案例完整走通了码道 CLI/TUI 的主路径：
安装 → AK/SK 授权 → 输入自然语言需求 → 自动生成前端工程 → 浏览器验证抽奖效果
对「活动页、小游戏、演示 Demo」这类中小前端任务，码道可以把需求直接落成可运行代码，显著缩短从想法到可演示页面的时间。后续若要改奖品、概率或皮肤，继续在同一会话里对话即可迭代。
附录：本案例关键命令速查
# 安装irmhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.ps1|iex# 授权（当前窗口）$env:CODEARTS_CLI_AK ="你的AK"$env:CODEARTS_CLI_SK ="你的SK"# 验证codearts-v codearts models# 进入项目并开发cd D:\demo\demo\marquee-lottery codearts# 或codearts run-m"huaweicloud-maas/deepseek-v3.2""请创建幸运跑马灯抽奖网页..."# 预览python-m http.server 8765参考链接
- 什么是码道CLI
- 安装
- 授权
- 码道CLI 快速入门
- 下载与安装脚本
