06C · 组件库拼装

用 07 组件库的真类名，重拼这六屏

上一份 06B 是我手写的样式；这一份每个像素都来自 c- 类—— 布局靠 c-card / c-row / c-list，动作靠 c-btn， 状态靠 c-tag / c-alert / c-steps，图形靠 c-ib / c-ico / c-shot。

做法是把 07 的令牌段与组件段原样复制进本页样式表，一行没改。 本页零自制类——导航条、底栏、标签栏、页头、弹层全部走 01C 的页面骨架， 其余靠零件。整页只剩两个展示脚手架（手机壳、状态栏），那是画框不是产品。

怎么读这一份
  • 每屏下方列出用了哪些组件，可直接对照 07 的章节号去查。
  • 上一版发现的 7 处缺口已全部补进 07 的 01C 章（页面骨架），末尾有对照表。
  • 六屏与 06B 是同一批页面、同一批文案，只换了实现方式，所以能直接对比两份的观感差。
brand-600 #0F6E63 brand-700 #0A554C brand-100 #C8E6E0 brand-50 #E7F4F1 brand-hl #7BE3BE brand-bright #2FC08D accent-600 #D14A32 accent-700 #B4402E accent-100 #FAD8CE accent-50 #FDEFEA mark-600 #F2B33D mark-100 #FBE8C8 画布 #F7F6F3 凹陷 #F1EFEA 描边 #E6E3DC ink #1C1B18 ink3 #6F6B62 success #2E7D4F warning #9A5B09 danger #B3261E info #1F5FA8

A1 落地页 唯一目标是注册

全屏只有 1 个实心主按钮。三条卖点从三列小卡改成列表行——用图标块当视觉起点， 这是 07 里解决「列表行全一样」的做法。
9:41
好出片

不用出镜，
也能做人设 IP。

给一张照片、录 30 秒朗读，剩下的交给它。
一条能直接发的口播视频。

声音是你自己的
念 30 秒，复刻成你的音色
选题文案它给
不用想这周发什么
画面长你的样子
配色、字体、图片都能换

这屏在验证

  • 主 CTA 只有一个，首屏除它之外全是辅助信息
  • 「领 30 积分」的数值由后台配置下发，界面不写死
  • 样片入口排在主 CTA 之后——跳出去就回不来
上一版这里缺的两件，已在 01C 补上：马克笔高亮 c-hl、 底部标签栏 c-tabbar。补上之后本页零自制类。
c-cardc-listc-rowc-ib--solidc-ib--linec-btn--pri--blkc-btn--ghoc-ico

C2 文案确认 闸门 + 扣分确认

这一步扣的是文案那 2 分，不是 13——三个扣分点各自确认，不让用户在最后一步才看见总账。
9:41
确认文案
选题 2文案 3画面 4音色 5生成
本篇选题 换一个
社保断缴三个月，到底会有什么影响
文案（可以随便改，不扣积分）
428 字
改稿、换选题、重看预览都不扣积分。扣分只发生在这三步：文案、成片，各一次。
确认这段文案？
第 2 步 · 一次确认
文案生成2
改稿、重选、预览0
本次合计2
当前可用30
确认后剩余28
选题的 1 积分已在选完题时扣过；生成成片还要 10 积分，到时再确认一次。

这屏在验证

  • 扣分前显示「本次扣 N，剩余 M」，且二次确认
  • 三行明细 + 免费项列 0 + 可用/剩余双显，三条一次做齐
  • 弹层是父页面的状态，不单独占一条路由
组件库缺的：无。这屏是 07 覆盖最完整的一屏—— c-cost / c-sheet / c-kv / c-steps 直接用。
c-stepsc-card--tintc-tag--solidc-subheadc-textareac-alert--infoc-sheetc-costc-kvc-hint

C4 画面与样式 分镜与配色合并成一页

移动端多一步就多一次流失。骨架缩略直接用 c-shot 缩小，底部安全区那根虚线在缩略图上也能看见。
9:41
画面与样式 我的模板
选题 文案 3画面 4音色 5生成
勿放内容
预览在你手机上实时渲染，改一下立刻能看到，不用等服务器。
画幅1080×1920
底部安全区320px
模板与配色全免费
骨架 · 选一个
5 类
配色 · 12 组里选
可换
字体组合
可换

这屏在验证

  • 分镜 + 配色同屏，不拆成两页
  • 底部安全区虚线必须画出来——缩略图上也要看得见
  • 可换的只有三个口子：骨架、配色、字体；默认模板不可破版
  • 选中态用 aria-pressed，不另起 .is-active 类
上一版这里缺的两件，已在 01C 补上：c-pick（卡片形态的选中项， 带 --compact 窄格版）与 c-page__body（页面级滚动区）。 c-shot 与 c-sw 本身用得很顺。
c-shotc-card--liftc-alert--okc-kvc-subheadc-swc-btn--togc-ib

C5 选音色 全站唯一的音频试听位

声音像他是地基。音色必须在花积分之前能被听到——所以这一屏是全站唯一允许出现音频的地方。
9:41
选择声音
选题 文案 画面 4音色 5生成
我的声音
已复刻
如真 · 本人音色
0:09
系统默认声音库
不选也能直接出片
沉稳男声
适合法律、财税、医疗
0:12
清晰女声
适合知识科普、职场
0:10
建议用你本人的音色，观众认的是你的语气。不拦着——先用默认声音出一条也行。

这屏在验证

  • audio 只允许出现在这里，其余页面零音频元素
  • 音色一律不提供下载——能在线听到就够了
  • 未复刻声音不阻断出片：默认选中一个，只提示不拦截
圆形图标按钮已在 01C 补上：c-btn--round。 它和 c-btn--ico（圆角方形）是两个类，别混用——圆形只给播放键这种单一动作。
c-card--tintc-tag--sc-wavec-listc-row--tapc-ib--linec-alert--warn

C6 生成中 取消文案随状态变

排队最痛的不是等，是人不敢走开。位次要看得见，取消要说得清代价——同一屏里两个取消按钮，文案不一样。
9:41
生成中
可用积分
30
预扣中
13
预扣中的积分在成片交付后才结算；取消或失败会原路释放。
1
社保断缴三个月，到底会有什么影响
62% · 1 分 20 秒
2
为什么我不建议刚毕业就创业
第 1 位 · 预计 8 分钟
年终奖到底该不该并入综合所得
已完成
云端队列按平台并发依次出片，不能插队。你可以关掉页面，好了会通知你。

这屏在验证

  • 余额拆「可用」与「预扣中」——只给一个总数，用户会认定被吞了
  • 同屏两个取消按钮：生成中不退回、排队中退回，禁止统一写「取消」
  • 进度与位次可视化，不用无意义转圈
组件库缺的：无。c-queue 与 c-balance 一放就位。 一处按窄屏收了：按钮文案从「取消并退回积分」缩为「取消并退回」—— 390px 宽放不下全称，但「退回」两个字不能省，省了就退回成裸「取消」。
c-balancec-listc-queuec-queue__pos--runc-barc-tag--sc-alert--infoc-hint

C7 结果与下载 站内不播放

下载是用户唯一能看到并听到成片的途径，所以它是这屏唯一的主按钮，且点之前零弹窗。
9:41
出片完成
勿放内容
已交付 青绿 · 大字要点
时长00:42
音色如真 · 本人
字幕已内嵌
积分已结算 13
完整字幕
可复制
00:00很多人以为社保断缴只是少交几个月，其实真正麻烦的是它背后连着三件事。
00:08第一件是医保。断缴的次月起，住院报销就停了，这时候生病要全额自己出。
00:19第二件是买房资格。很多城市要求连续缴纳，断一次就要重新算。
00:31第三件，是很多人体检和报销时才发现的——慢病门诊待遇也跟着断。
文件保留 7 天，到期前会提醒你一次。下载后就不受影响了。

这屏在验证

  • 零 video 标签、禁用 GIF：预览只有封面 + 静态关键帧 + 字幕全文
  • 下载是这屏唯一的主按钮，且点击前零弹窗
  • 「复制标题与文案」是留的最后一手——站内不能播，用户没法边看边写
  • 留存 7 天与「已成片永久可下载」不冲突：一个讲存储时长，一个讲权限
字幕块已在 01C 补上：c-subs（带时间戳，当前句用 c-subs__l--now）。这屏没做下载浮层，真下载时要用 c-download 的三条替代路径。
c-shotc-tag--sc-tag--nc-kvc-subheadc-alertc-btn--pri--blk

这一遍拼下来，结论是什么

主干能拼，而且拼得挺顺。六屏里有三屏（C2 文案确认、C5 选音色、C6 生成中） 几乎是把 07 的实物搬过去就成型了——尤其 c-cost、c-queue、 c-balance、c-steps 这四个业务组件，一次没改。

上一版缺的是「页面级」的东西，不是「组件级」的。07 做的是零件，但拼页面还需要外壳： 顶部导航条、底部固定操作区、标签栏、滚动区、页头。这些不属于零件， 但不约定的话，三个人接手会写出三种导航条。

所以这一版没有去补更多零件，而是给 07 加了一章 01C「页面骨架」——把外壳定死，零件保持不变。 补完之后，这一页零自制类。

上一版发现的 7 处缺口 → 现在的类名

缺的东西现在的类在哪
马克笔高亮c-hl01C.6
顶部导航条c-nav / c-nav__t / c-nav__s01C.1
底部固定操作区c-footbar / --stack / c-footbar__note01C.2
底部标签栏c-tabbar / c-tabbar__i01C.3
可选中卡片（卡片形态）c-pick / --compact01C.4
带时间戳的字幕块c-subs / c-subs__t01C.5
圆形图标按钮c-btn--round01C.7 之前

另外三条是收紧、不是缺漏，也一并做进 01C 了： c-steps--compact（五步在 390px 会溢出，标签降一档字号）、 c-pick--compact（3–5 列网格里的选中卡）、 c-hero（页头，27px 展示级字号只给它用）。

这份和 06B 的关系