210 lines
13 KiB
HTML
210 lines
13 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=1440, initial-scale=1">
|
||
<title>伴伴 · 交互控件现状规范</title>
|
||
<link rel="stylesheet" href="./design-system.css">
|
||
</head>
|
||
<body>
|
||
<main class="poster system-poster">
|
||
<header class="system-header">
|
||
<div>
|
||
<div class="poster-kicker">BANBAN MINI PROGRAM · UI INVENTORY</div>
|
||
<h1 class="poster-title">伴伴 · 交互控件现状规范</h1>
|
||
<p class="poster-subtitle">从现有页面 TSX、SCSS 与 tabBar 配置提取。以真实实现为准，不将参考图的视觉语言替换进产品。</p>
|
||
<div style="display:flex;gap:10px;margin-top:24px">
|
||
<span class="meta-chip">当前实现</span>
|
||
<span class="meta-chip">750rpx 设计稿</span>
|
||
<span class="meta-chip">微信小程序</span>
|
||
</div>
|
||
</div>
|
||
<div class="brand-lockup">
|
||
<div class="brand-mark">🤖</div>
|
||
<div class="brand-note"><strong>让关爱随时随地</strong><span>设备、家庭和陪伴体验中的温暖反馈。</span></div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="system-layout">
|
||
<section class="system-main">
|
||
<div class="spec-section">
|
||
<div class="spec-heading"><h2>1. 主要操作</h2><span>页面主任务 · 每个视图只保留一个视觉主按钮</span></div>
|
||
<div class="button-showcase">
|
||
<div class="control-sample"><div class="sample-label"><span>橙色主操作</span><code>88–96rpx</code></div><button class="ds-btn">确认并发送绑卡指令</button></div>
|
||
<div class="control-sample"><div class="sample-label"><span>紧凑主操作</span><code>88rpx</code></div><button class="ds-btn compact">保存休眠时间</button></div>
|
||
<div class="control-sample"><div class="sample-label"><span>微信登录</span><code>#07C160</code></div><button class="ds-btn green">登录后继续</button></div>
|
||
<div class="control-sample"><div class="sample-label"><span>设备控制</span><code>#1F2937</code></div><button class="ds-btn compact dark">进入休眠</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-section">
|
||
<div class="spec-heading"><h2>2. 状态展示</h2><span>以“保存”为例</span></div>
|
||
<div class="state-strip">
|
||
<div class="state-cell"><div class="sample-label"><span>默认</span></div><button class="ds-btn">保存</button></div>
|
||
<div class="state-cell"><div class="sample-label"><span>按下</span></div><button class="ds-btn pressed">保存</button></div>
|
||
<div class="state-cell"><div class="sample-label"><span>聚焦</span></div><button class="ds-btn focused">保存</button></div>
|
||
<div class="state-cell"><div class="sample-label"><span>禁用</span></div><button class="ds-btn disabled">保存</button></div>
|
||
<div class="state-cell"><div class="sample-label"><span>加载</span></div><button class="ds-btn loading"><i class="spinner"></i>处理中</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-section">
|
||
<div class="spec-heading"><h2>3. 音频与留言操作</h2><span>固定高度，避免播放状态改变布局</span></div>
|
||
<div class="audio-grid">
|
||
<div class="audio-btn"><span class="audio-icon">▶</span>播放留言</div>
|
||
<div class="audio-btn"><span class="audio-icon">↻</span>再次播放</div>
|
||
<div class="audio-btn playing"><span class="audio-icon">Ⅱ</span>播放中 <span class="audio-wave"><i></i><i></i><i></i><i></i><i></i></span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-section">
|
||
<div class="spec-heading"><h2>4. 次要、文字与危险操作</h2><span>降低层级，不与主任务争夺注意力</span></div>
|
||
<div class="secondary-grid">
|
||
<div class="secondary-btn">稍后设置</div>
|
||
<div class="secondary-btn neutral">取消</div>
|
||
<div class="secondary-btn danger">解除绑定</div>
|
||
</div>
|
||
<div class="text-actions">
|
||
<div class="text-action">查看往期来信 <b>›</b></div>
|
||
<div class="text-action">管理设备 <b>›</b></div>
|
||
<div class="text-action">暂不登录，先浏览</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-section">
|
||
<div class="spec-heading"><h2>5. 圆形图标按钮</h2><span>72–80rpx · 熟悉符号优先</span></div>
|
||
<div class="icon-grid">
|
||
<div class="icon-sample"><div class="round-icon">‹</div><span>返回</span></div>
|
||
<div class="icon-sample"><div class="round-icon">×</div><span>关闭</span></div>
|
||
<div class="icon-sample"><div class="round-icon">•••</div><span>更多</span></div>
|
||
<div class="icon-sample"><div class="round-icon">▶</div><span>播放</span></div>
|
||
<div class="icon-sample"><div class="round-icon">↻</div><span>刷新</span></div>
|
||
<div class="icon-sample"><div class="round-icon">✉</div><span>留言</span></div>
|
||
<div class="icon-sample"><div class="round-icon">⌁</div><span>绑定</span></div>
|
||
<div class="icon-sample"><div class="round-icon">⚙</div><span>设置</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-section">
|
||
<div class="spec-heading"><h2>6. 复合控件</h2><span>分段、开关与音量</span></div>
|
||
<div class="compound-grid">
|
||
<div>
|
||
<div class="sample-label"><span>分段控制</span><code>68rpx</code></div>
|
||
<div class="segment"><span class="active">当前位置</span><span>今日轨迹</span><span>最近点位</span><span>全部</span></div>
|
||
</div>
|
||
<div>
|
||
<div class="switch-row"><span>允许家庭通知</span><i class="switch"></i></div>
|
||
<div class="slider-row"><span>音量</span><i class="slider"></i><strong>60%</strong></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-section">
|
||
<div class="spec-heading"><h2>7. 底部导航</h2><span>来自现有 app.config.ts 与 tab-icons</span></div>
|
||
<div class="bottom-nav-demo">
|
||
<div class="nav-demo-item active"><img src="../../banban-mini/src/assets/tab-icons/device-selected.png" alt=""><span>首页</span></div>
|
||
<div class="nav-demo-item"><img src="../../banban-mini/src/assets/tab-icons/chat-icon.png" alt=""><span>玩伴</span></div>
|
||
<div class="nav-demo-item"><img src="../../banban-mini/src/assets/tab-icons/location-icon.png" alt=""><span>定位</span></div>
|
||
<div class="nav-demo-item"><img src="../../banban-mini/src/assets/tab-icons/manage-icon.png" alt=""><span>管理</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-section">
|
||
<div class="spec-heading"><h2>8. 状态标签与反馈</h2><span>设备状态、告警和操作结果</span></div>
|
||
<div class="feedback-grid">
|
||
<div class="status-chip-demo online">在线</div>
|
||
<div class="status-chip-demo syncing">同步中</div>
|
||
<div class="status-chip-demo sleeping">休眠中</div>
|
||
<div class="status-chip-demo low">低电量</div>
|
||
<div class="status-chip-demo alarm">紧急告警</div>
|
||
</div>
|
||
<div class="feedback-row">
|
||
<div class="feedback-banner">✓ 休眠时间已发送</div>
|
||
<div class="feedback-banner warning">! 设备暂未确认，请稍后查看</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-section">
|
||
<div class="spec-heading"><h2>9. 状态卡片与空状态</h2><span>信息概览和下一步引导</span></div>
|
||
<div class="card-demo-grid">
|
||
<div class="status-card-demo"><span class="demo-badge">● 已完成绑定</span><strong>82%</strong><span>小雨的伴伴 · 在线</span></div>
|
||
<div class="empty-card-demo"><div style="font-size:32px">🤖</div><b>先绑定一台伴伴设备</b><span>绑定后查看设备状态</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<aside class="system-aside">
|
||
<div class="aside-panel">
|
||
<h2>使用原则</h2>
|
||
<div class="rule-list">
|
||
<div class="rule"><span class="rule-mark">1</span><span>每个视图保持一个明确的主操作，橙色用于产品主任务。</span></div>
|
||
<div class="rule"><span class="rule-mark">2</span><span>微信授权沿用微信绿色，不强行改成品牌橙色。</span></div>
|
||
<div class="rule"><span class="rule-mark">3</span><span>设备休眠等硬件动作使用深色或语义色，和普通保存区分。</span></div>
|
||
<div class="rule"><span class="rule-mark">4</span><span>危险操作采用红色描边，保留确认步骤，降低误触风险。</span></div>
|
||
<div class="rule"><span class="rule-mark">5</span><span>加载与禁用状态保持固定尺寸，动态文字不引起页面跳动。</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="aside-panel">
|
||
<h2>颜色体系</h2>
|
||
<div class="token-grid">
|
||
<div class="color-token"><div class="swatch" style="background:#ff8c42"></div><code>#FF8C42</code><span>品牌橙</span></div>
|
||
<div class="color-token"><div class="swatch" style="background:#ff6b35"></div><code>#FF6B35</code><span>强调橙</span></div>
|
||
<div class="color-token"><div class="swatch" style="background:#1a1a1a"></div><code>#1A1A1A</code><span>主文字</span></div>
|
||
<div class="color-token"><div class="swatch" style="background:#f5f7fa"></div><code>#F5F7FA</code><span>页面底色</span></div>
|
||
<div class="color-token"><div class="swatch" style="background:#07c160"></div><code>#07C160</code><span>微信绿</span></div>
|
||
<div class="color-token"><div class="swatch" style="background:#16a34a"></div><code>#16A34A</code><span>成功绿</span></div>
|
||
<div class="color-token"><div class="swatch" style="background:#5b8ff9"></div><code>#5B8FF9</code><span>信息蓝</span></div>
|
||
<div class="color-token"><div class="swatch" style="background:#8b5cf6"></div><code>#8B5CF6</code><span>角色紫</span></div>
|
||
<div class="color-token"><div class="swatch" style="background:#be123c"></div><code>#BE123C</code><span>告警红</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="aside-panel">
|
||
<h2>现有规格</h2>
|
||
<table class="spec-table">
|
||
<tr><td>主要按钮高度</td><td>88–100rpx</td></tr>
|
||
<tr><td>紧凑按钮高度</td><td>60–88rpx</td></tr>
|
||
<tr><td>主要按钮圆角</td><td>16–22rpx</td></tr>
|
||
<tr><td>页面卡片圆角</td><td>20–28rpx</td></tr>
|
||
<tr><td>圆形按钮</td><td>72–80rpx</td></tr>
|
||
<tr><td>按钮水平内边距</td><td>24–32rpx</td></tr>
|
||
<tr><td>卡片阴影</td><td>0 2rpx 12rpx / 4–8%</td></tr>
|
||
<tr><td>控件垂直间距</td><td>16–24rpx</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="aside-panel">
|
||
<h2>字体层级</h2>
|
||
<div class="type-sample type-display"><strong>页面标题</strong><span>44–52rpx · 700/800</span></div>
|
||
<div class="type-sample type-title"><strong>卡片标题与关键数值</strong><span>30–36rpx · 650/750</span></div>
|
||
<div class="type-sample type-body"><strong>正文与按钮文字</strong><span>26–32rpx · 400/700</span></div>
|
||
<div class="type-sample type-caption"><strong>辅助信息、时间与状态</strong><span>22–24rpx · 400/600</span></div>
|
||
</div>
|
||
|
||
<div class="aside-panel">
|
||
<h2>间距基准</h2>
|
||
<div class="spacing-scale">
|
||
<div class="space-row"><span>XS</span><div class="space-bar" style="width:20%"></div><strong>8rpx</strong></div>
|
||
<div class="space-row"><span>SM</span><div class="space-bar" style="width:35%"></div><strong>16rpx</strong></div>
|
||
<div class="space-row"><span>MD</span><div class="space-bar" style="width:50%"></div><strong>24rpx</strong></div>
|
||
<div class="space-row"><span>LG</span><div class="space-bar" style="width:68%"></div><strong>32rpx</strong></div>
|
||
<div class="space-row"><span>XL</span><div class="space-bar" style="width:100%"></div><strong>48rpx</strong></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="aside-panel">
|
||
<h2>现状说明</h2>
|
||
<div class="inventory-note">当前按钮尚未收敛为统一组件：登录、绑定、定位、管理页面存在 88、92、96、100rpx 等多种高度。这张图记录真实实现，不代表已经完成组件统一。</div>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
|
||
<footer class="poster-footer">
|
||
<span class="footer-brand">伴伴 · 交互控件现状规范</span>
|
||
<span>Source: app.config.ts + pages/**/*.scss · 2026.08</span>
|
||
</footer>
|
||
</main>
|
||
</body>
|
||
</html>
|