Day2 · 🪪 模块 11

可视化客户卡片

把客户表转成可浏览的卡片页面,并加入头像和筛选入口。

下载本模块材料
主线

吃下 60 行全表并美化

完成“Step 2 吃下 60 行全表 + 美化”,并观察它对“可视化客户卡片”能力的作用。

约 25 分钟
本节材料
复制给 AI

完成标志

可视化 Excel:60 张卡片 · 本地浏览器打开立即可见(此时无头像,下一步发现)· 数据全部躺在 HTML 的 `const customers = [...]` 里,且保留完整 8 列原始信息;商务风美化:视觉更像"真 CRM",本地浏览器打开即可检查效果,但每张卡片还缺一张脸

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录吃下 60 行全表并美化Day2 · 主线 · 预估 25 分钟
主线

给客户卡片添加头像

完成“Step 3 发现:卡片没有脸”,并观察它对“可视化客户卡片”能力的作用。

约 10 分钟
本节材料
复制给 AI

完成标志

添加头像:AI 识别出上传的 zip 已被解包,确认 cust-01.webp … cust-60.webp 共 60 张,并一次性完成 60 张带头像的卡片

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录给客户卡片添加头像Day2 · 主线 · 预估 10 分钟
主线

添加顶部筛选栏

完成“Step 4 加顶部筛选栏(埋伏笔)”,并观察它对“可视化客户卡片”能力的作用。

约 10 分钟
复制给 AI

完成标志

加筛选栏:三个控件 · 筛选即时生效 · 国家下拉里看到"USA / 美国 / U.S. / 美利坚"全都在

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录添加顶部筛选栏Day2 · 主线 · 预估 10 分钟