fe5dd78632
- Implemented RecommendationListCard component for displaying a list of recommendations with titles, descriptions, and badges. - Created RoutePlanCard component to show route details, including nodes and tips, with a detailed view toggle. - Added ScenicImageCard component for showcasing images with optional captions. - Developed SharedVisual components: CardShell, BadgePill, MediaFrame, ActionRow, and DetailShell for reusable UI elements. - Introduced SCSS styles for all new components and updated existing styles for consistency. - Created test page to preview and interact with all components using mock data. - Added new utility classes for background colors, borders, colors, display, flex, font sizes, font weights, heights, positions, rounded corners, and widths.
54 lines
2.5 KiB
HTML
54 lines
2.5 KiB
HTML
<h2>ChatModule 组件还原范围确认</h2>
|
||
<p class="subtitle">我已扫描 14 个 HTML 视觉稿。下面按实现视角分组：相同视觉结构会抽共享基础卡片/媒体/详情页容器，组件只还原 <!-- 组件部分开始 --> 到 <!-- 组件部分结束 --> 之间的内容。</p>
|
||
|
||
<div class="section">
|
||
<div class="label">Detected component families</div>
|
||
<div class="cards">
|
||
<div class="card" data-choice="core-cards" onclick="toggleSelect(this)">
|
||
<div class="card-body">
|
||
<h3>内容/详情卡</h3>
|
||
<p>C0 长文本卡、C0+ 组合卡、C13 公告卡：列表态 + 详情态，复用详情页头部、返回、富文本正文、行动区。</p>
|
||
</div>
|
||
</div>
|
||
<div class="card" data-choice="poi-list-route" onclick="toggleSelect(this)">
|
||
<div class="card-body">
|
||
<h3>POI / 列表 / 路线</h3>
|
||
<p>C1 POI 详情、C2 列表、C2 多 POI、C3 对比、C4 路线、C5 设施位置：复用卡片壳、标签、图片缩略图、信息行。</p>
|
||
</div>
|
||
</div>
|
||
<div class="card" data-choice="media-actions" onclick="toggleSelect(this)">
|
||
<div class="card-body">
|
||
<h3>媒体 / 操作卡</h3>
|
||
<p>C7 大图、C8 地图导航、C10 AIGC 合照、C12 FAQ：复用媒体卡壳、底部说明、主按钮/入口行。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="label">Recommended implementation direction</div>
|
||
<div class="options">
|
||
<div class="option" data-choice="props-first" onclick="toggleSelect(this)">
|
||
<div class="letter">A</div>
|
||
<div class="content">
|
||
<h3>Props-first 组件库（推荐）</h3>
|
||
<p>每个新 ChatModule 组件只接收 props，不在组件内拉接口；示例数据放到独立 mock 文件或父级传入，避免硬编码。</p>
|
||
</div>
|
||
</div>
|
||
<div class="option" data-choice="api-wrapper" onclick="toggleSelect(this)">
|
||
<div class="letter">B</div>
|
||
<div class="content">
|
||
<h3>容器组件 + 展示组件</h3>
|
||
<p>每个视觉组件拆成容器和纯展示两层；适合马上接真实接口，但文件数量和接线工作更多。</p>
|
||
</div>
|
||
</div>
|
||
<div class="option" data-choice="static-demo" onclick="toggleSelect(this)">
|
||
<div class="letter">C</div>
|
||
<div class="content">
|
||
<h3>静态视觉还原优先</h3>
|
||
<p>先按 HTML 固定数据还原，再二次抽数据；最快看见 UI，但违反“mock 数据不要硬编码”的风险最高。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|