基于华为云码道，多轮提示开发简易在线通讯录Web应用

本案例基于华为云码道（CodeArts）代码智能体，从基础功能到界面优化再到进阶能力，逐步打磨出功能完善、交互流畅、实用性强的简易在线通讯录Web应用。

华为云开发者联盟

50人浏览 · 2026-03-10 20:30:00

华为云开发者联盟 · 2026-03-10 20:30:00 发布

最新案例动态，请查阅基于华为云码道，多轮提示开发简易在线通讯录Web应用。小伙伴们快来进行实操吧！

1 概览

1.1 案例介绍

华为云码道（CodeArts）代码智能体是基于智能生成、智能问答两大核心能力构建起一套全方位、多层次的智能开发体系。在智能生成方面，它能够依据开发者输入的需求描述，准确且高效地生成高质量代码；智能问答功能则如同开发者身边的专属技术顾问。

1.2 适用对象

在华为开发者空间，为开发者提供了以下能力支持：

个人开发者；
高校学生；
企业开发者；

1.3 案例时间

本案例总时长预计45分钟。

1.4 案例流程

说明：

用户下载安装华为云码道CodeArts代码智能体IDE；
华为云账号登录授权华为云码道CodeArts代码智能体，输入指令生成在线通讯录系统代码；
浏览器体验在线通讯录管理系统Web应用。

1.5 资源总览

资源名称	规格	单价（元）
华为云码道（CodeArts）代码智能体	通用体验版	免费

2 基础环境与资源准备

2.1 下载安装华为云码道CodeArts代码智能体IDE

根据下载和安装教程，下载安装IDE:

2.2 登录华为云码道CodeArts代码智能体

安装完成之后，点击打开文件夹或新建项目，用于存放项目文件：

登录华为云码道CodeArts代码智能体：

注意：如果已经登录华为账号，直接跳转至登录授权页面，否则，直接拉起华为账号登录界面。

自动拉起华为账号登录界面，输入账号和密码：

首次使用CodeArts代码智能体，会进入开通页面（若已经开通，会进入批准登录界面）。需要勾选“我已阅读并同意”后，单击“立即开通”，等待套餐开通完成。

开通完成后，跳转至登录授权页面，点击确认授权：

CodeArts代码智能体登录成功：

登录成功之后，返回CodeArts代码智能体，即可体验使用。

2.3 验证CodeArts代码智能体

输入问题：“你好，请介绍你能做的事情”，验证CodeArts代码智能体：

3 个人任务管理系统开发

3.1 CodeArts代码智能体基础功能实现

传递通讯录的核心功能与基础界面要求，让CodeArts代码智能体生成具备核心操作的通讯录雏形，明确项目整体框架、文件结构与基础交互逻辑，确保后续优化有明确的基础。

在提示框内输入以下提示词，点击发送：

请帮我在当前工作空间目录下创建一个简易在线通讯录Web应用项目，生成完整可运行的HTML、CSS、JavaScript代码，要求如下：
1.  项目结构：创建独立文件夹（命名为online-address-book），内含index.html、style.css、script.js三个文件，代码结构清晰、添加基础注释，便于后续修改和维护；
2.  界面设计：整体风格简洁清爽，分为三大区域——联系人输入区、联系人筛选检索区、联系人列表区，布局合理，间距适中，适配PC端主流分辨率；
3.  核心基础功能：
    - 联系人输入：支持输入联系人姓名、联系电话（11位手机号格式）、联系备注，点击「添加联系人」按钮将联系人存入列表；
    - 联系人展示：列表区显示联系人姓名、联系电话、联系备注，每个联系人对应独立的操作入口；
    - 基础操作：支持删除单个联系人，点击删除按钮可移除对应联系人；支持按姓名关键词检索，输入关键词后实时筛选联系人列表；
4.  基础交互：输入框为空（姓名/电话均未填写）时，点击「添加联系人」给出提示，禁止添加空联系人；电话输入不符合11位手机号格式时，给出格式错误提示。

CodeArts代码智能体通过规划任务，开始创自动生成项目代码，时间大约几分钟：

注意：涉及变更文件的时候，我们点击全部接受。

大约几分钟后，用浏览器打开index.html，一个完整的在线通讯录系统的Web应用就生成了。

在浏览器中打开项目文件夹中的index.html文件，完成以下基础验证，确认雏形应用可正常运行，为第二轮优化做准备：

验证输入功能：填写正确的姓名、11位手机号、备注，点击「添加联系人」，确认联系人可正常添加到列表；
验证输入验证：不填写任何内容点击添加，确认有提示；输入非11位手机号，确认有格式错误提示；
验证检索功能：输入联系人姓名关键词，确认列表可实时筛选出对应联系人；
验证删除功能：点击联系人对应的删除按钮，确认联系人可正常删除。

3.2 优化界面交互，完善细节体验

基于第一轮生成的基础版通讯录，重点优化界面样式、提升交互体验、补充细节功能，解决基础版“界面简陋、交互生硬、细节缺失”的问题，让应用更美观、更贴合日常操作习惯，无需重复描述基础功能。

在输入框内输入提示词：

基于当前已生成的简易在线通讯录Web应用，在原有代码基础上进行优化，无需重新创建项目，具体优化需求如下：
1.  界面样式优化：
    - 联系人列表改为卡片式设计，每个联系人独立成卡，添加轻微阴影效果，hover时卡片轻微放大、阴影加深，提升视觉层次感；
    - 统一界面配色：主色调采用浅青（#e6f7ff），按钮主色采用深青（#1890ff），输入框、卡片边框采用浅灰（#ddd），整体风格统一清爽；
    - 优化排版：调整三个区域的间距，标题居中显示，输入区、检索区、列表区边界清晰，按钮、输入框大小统一，提升整体美观度；
2.  交互体验升级：
    - 删除联系人时，弹出确认删除的提示框（提示“确定要删除该联系人吗？删除后不可恢复”），防止误操作；
    - 添加联系人成功后，自动清空所有输入框，给出2秒绿色“添加成功”弹窗提示，提示消失后恢复正常界面；
    - 检索功能优化：检索框添加“请输入联系人姓名关键词”占位提示，检索无结果时，列表区显示“未找到匹配联系人”提示，而非空白；
    - 按钮、输入框添加hover交互效果：按钮hover时轻微变色、输入框hover时边框变色，提升交互质感；
3.  细节功能补充：
    - 联系人列表添加“联系人编号”，按添加顺序自动编号，便于快速区分；
    - 联系电话添加可复制功能，点击电话文本可自动复制到剪贴板，复制成功后给出“复制成功”提示；
    - 输入框添加 maxlength 限制：姓名最多20字，备注最多50字，电话固定11位，超出限制无法输入。

可以看到，CodeArts代码智能体在帮我们修改原来的文件，如提示是否采纳，选择全部采纳：

生成完成后我们可以看到优化后的版本：

优化界面样式:卡片式设计、统一配色、优化排版；
升级交互体验:删除确认、添加成功提示、检索优化、hover效果；
补充细节功能:联系人编号、电话复制、输入框限制。

刷新浏览器中的index.html文件，逐一测试以下优化内容，确认所有需求均落地，验证迭代后的应用体验：

样式验证：确认联系人卡片样式、配色、排版符合要求，hover效果正常；
交互验证：删除联系人弹出确认框、添加成功有提示、检索无结果有提示，按钮/输入框hover效果正常；
细节验证：联系人有自动编号、电话可复制且有提示，输入框有字数限制，超出无法输入。

3.3 增加进阶功能，实现实用化升级

在优化版通讯录的基础上，添加数据持久化、分组管理、高级检索等进阶实用功能，解决基础版“刷新页面数据丢失”的核心痛点，增加应用的实用性和场景适配性，让通讯录成为可日常使用的工具。

基于当前优化后的简易在线通讯录Web应用，在原有代码基础上添加进阶实用功能，解决核心使用痛点，具体需求如下：
1.  核心痛点解决：添加localStorage本地存储功能，所有联系人数据（添加、删除、编辑、检索、分组）均同步保存到本地，刷新浏览器、关闭页面后再次打开，数据不丢失，无需重新添加；
2.  进阶功能添加——联系人分组管理：
    - 输入区新增“联系人分组”下拉选择框，选项为“家人、朋友、同事、其他”，添加联系人时可选择对应分组；
    - 筛选检索区新增“按分组筛选”功能，添加四个分组按钮（家人/朋友/同事/其他），点击可筛选对应分组的联系人，支持“分组筛选+关键词检索”叠加使用；
    - 联系人卡片显示对应分组标签，不同分组标签采用不同颜色（家人-红色、朋友-蓝色、同事-绿色、其他-灰色），便于快速区分；
3.  进阶功能添加——联系人编辑：
    - 每个联系人卡片添加「编辑」按钮，点击后弹出编辑弹窗，弹窗内自动填充该联系人的原有信息（姓名、电话、备注、分组）；
    - 编辑时可修改所有信息，修改完成后点击「确认编辑」，更新联系人信息并同步保存到本地，给出“编辑成功”提示；
    - 编辑时保持输入验证（电话11位、字数限制），不符合要求无法提交编辑；
4.  细节优化：
    - 联系人列表按“分组→添加时间”排序，同一分组的联系人按添加时间升序排列，排序逻辑实时生效；
    - 新增“一键清空所有联系人”按钮，点击后弹出确认提示（提示“确定要清空所有联系人吗？所有数据将永久删除”），确认后清空所有联系人并同步更新本地存储；
    - 优化检索功能，支持模糊检索（输入部分姓名关键词即可匹配），检索时忽略大小写。