用华为云码道 CLI/TUI 从零开发「幸运跑马灯抽奖」网页应用

本文基于真实操作记录：在 Windows 上安装并授权码道 CLI，通过 TUI/codearts run 输入自然语言需求，自动生成跑马灯抽奖网页，并完成浏览器预览与功能测试。 参考文档：什么是码道CLI、安装、授权、快速入门、下载页

一、案例目标

用码道（CodeArts Agent）终端交互界面（TUI）/命令行模式，完成一个可直接在浏览器打开的「幸运跑马灯抽奖」网页应用，覆盖：

1. 安装码道 CLI
2. 使用 AK/SK 完成授权登录
3. 启动 TUI / 使用 codearts run 输入需求
4. 自动生成 HTML/CSS/JS 工程文件
5. 浏览器运行与抽奖功能测试

最终产物目录：marquee-lottery/（index.html、style.css、script.js、README.md）

二、环境准备

官方支持系统还包括 macOS 11+、常见 Linux 发行版，详见前提条件。使用前需在华为云开通码道代码智能体套餐。

三、步骤 1：安装码道 CLI

3.1 Windows 安装命令

在 PowerShell 中执行（安装脚本地址以产品下载页为准）：

irm https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.ps1 | iex

macOS / Linux：

sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)" && export PATH=~/.codeartsdoer/installers:$PATH

3.2 验证安装

codearts -v

本案例回显：

26.6.2

[图片: 安装成功并回显版本号 - 请查看附件]

提示：若提示无法识别 codearts 命令，通常是环境变量未刷新。可新开一个「在终端中打开」窗口，或重启终端/电脑后再试。

四、步骤 2：AK/SK 授权登录

码道 CLI 支持浏览器授权，也支持通过环境变量配置 AK/SK（适合自动化与无图形场景）。本案例使用 AK/SK。

4.1 获取访问密钥

1. 登录华为云控制台，进入「我的凭证」
2. 新建访问密钥，下载并妥善保存 credentials.csv（关闭弹窗后无法再次查看 SK）
3. 也可参考码道门户说明：https://codearts.huaweicloud.cn/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

[图片: AK/SK 授权后成功列出模型 - 请查看附件]

若出现「认证失败，没有设置环境变量 CODEARTS_CLI_AK/CODEARTS_CLI_SK」，说明当前终端会话尚未配置密钥。

安全提醒：AK/SK 等同账号凭证，请勿提交到公开仓库或粘贴到公开文章正文。本文截图中已脱敏。

五、步骤 3：创建项目目录并启动码道

5.1 创建工作目录

mkdir D:\demo\demo\marquee-lottery
cd D:\demo\demo\marquee-lottery

5.2 两种使用方式

本案例两种方式都验证过：TUI 适合边看边改；codearts run 适合把完整需求一次交给智能体。

启动 TUI：

codearts

首次写入文件时，界面会询问目录访问权限，建议选择 Allow always 并 Confirm，避免每一步都打断。

[图片: 启动码道 TUI 并开始生成 - 请查看附件]

六、步骤 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 码道实际执行过程（本案例日志摘要）

智能体大致按以下工具链工作：

1. bash / dir：查看当前目录
2. todowrite：拆解任务（HTML / CSS / JS / 测试）
3. write index.html：页面骨架（开始/停止/重置、奖品区、历史区）
4. write style.css：布局、跑马灯样式、响应式
5. 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 停止并查看结果

点击「停止」后，当前奖品区展示中奖名称，历史记录写入一条。

本案例一次实测结果：

[图片: 抽奖结果与历史记录 - 请查看附件]

九、常见问题与实践经验

1. 未配置 AK/SK

codearts docs / codearts models 会提示认证失败。先设置 CODEARTS_CLI_AK / CODEARTS_CLI_SK。

1. 权限弹窗卡住自动化

TUI/run 若对 bash、外部目录写入设为 ask，非交互场景会长时间等待。可在权限配置中改为 allow，或在 TUI 中选择 Allow always。

1. Windows 下 ls -la 失败

智能体有时发出 Linux 命令；PowerShell 中 ls -la 会报错。码道通常会改用 dir 继续，不影响最终写文件。

1. 安装后找不到命令

新开终端或重启，确保 ~\.codeartsdoer\installers 已在 PATH。

1. 模型选择

用 -m huaweicloud-maas/deepseek-v3.2 可指定模型；也可用 codearts models 查看当前账号可用列表。

十、总结

本案例完整走通了码道 CLI/TUI 的主路径：

安装 → AK/SK 授权 → 输入自然语言需求 → 自动生成前端工程 → 浏览器验证抽奖效果

对「活动页、小游戏、演示 Demo」这类中小前端任务，码道可以把需求直接落成可运行代码，显著缩短从想法到可演示页面的时间。后续若要改奖品、概率或皮肤，继续在同一会话里对话即可迭代。

附录：本案例关键命令速查

# 安装
irm https://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 快速入门
• 下载与安装脚本