yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 蓝牙秤连接小程序页面设计总览

Browse Source
This commit is contained in:
fengpu
2026-07-20 18:13:54 +08:00
parent 0603113596
commit 4e2cd9aff7
8 changed files with 290 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -889,6 +889,7 @@ const SITE_MAP = [
{label:'净菜包装贴标秤 · 标签预览', file:'clean-veg-packaging-labeler/label-preview.html'}
] },
{ name:'蓝牙称小程序', dir:'other-module/bluetooth-scale-miniprogram', entry:'index.html', prd:'other-module/bluetooth-scale-miniprogram/doc/PRD.md', done:true, pages:[
{ file:'doc/design-overview.html', label:'页面总览' },
{label:'登录页', file:'index.html'},
{label:'完善个人信息', file:'profile-complete.html'},
{label:'主页（四Tab）', file:'main.html'},
other-module/bluetooth-scale-miniprogram/doc/design-overview.html
+289
View File
@@ -0,0 +1,289 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蓝牙称小程序 - 页面设计总览</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #1a1a2e; color: #e0e0e0; }
/* 顶部导航 */
.nav { position: sticky; top: 0; z-index: 100; background: #16213e; border-bottom: 1px solid #0f3460; padding: 14px 24px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.nav__title { font-size: 16px; font-weight: 600; color: #4fc3f7; margin-right: 20px; white-space: nowrap; }
.nav__link { font-size: 13px; color: #aaa; text-decoration: none; padding: 5px 12px; border-radius: 20px; transition: all .2s; white-space: nowrap; border: 1px solid transparent; }
.nav__link:hover { background: #0f3460; color: #4fc3f7; border-color: #4fc3f7; }
/* 业务主线区块 */
.section { padding: 24px 24px 8px; }
.section__header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.section__title { font-size: 15px; font-weight: 600; color: #fff; }
.section__count { font-size: 12px; color: #666; background: #2a2a4a; padding: 2px 8px; border-radius: 10px; }
/* 横向滚动容器 */
.scroll-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.scroll-row::-webkit-scrollbar { height: 6px; }
.scroll-row::-webkit-scrollbar-track { background: transparent; }
.scroll-row::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
/* 卡片 */
.card { flex-shrink: 0; width: 260px; cursor: pointer; transition: transform .2s; }
.card:hover { transform: scale(1.02); }
.card__img { width: 260px; height: 564px; border-radius: 12px; overflow: hidden; border: 2px solid #2a2a4a; background: #111; transition: border-color .2s; }
.card:hover .card__img { border-color: #4fc3f7; }
.card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card__label { margin-top: 8px; font-size: 12px; color: #999; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__tags { display: flex; justify-content: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.tag { font-size: 10px; padding: 1px 5px; border-radius: 3px; }
.tag--modal { background: #4a2800; color: #ffa940; }
.tag--state { background: #002a4a; color: #4fc3f7; }
/* 子标题 */
.sub-title { font-size: 12px; color: #888; margin: 20px 0 8px 0; font-weight: 500; }
/* 分隔线 */
.divider { height: 1px; background: #2a2a4a; margin: 8px 24px; }
/* 灯箱 */
.lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox.show { display: flex; }
.lightbox img { max-width: 90vw; max-height: 92vh; border-radius: 8px; }
.lightbox__close { position: absolute; top: 16px; right: 20px; color: #fff; font-size: 24px; cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.1); }
.lightbox__name { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #ccc; font-size: 13px; background: rgba(0,0,0,0.6); padding: 6px 16px; border-radius: 20px; }
</style>
</head>
<body>
<!-- 顶部导航 -->
<nav class="nav">
<span class="nav__title">蓝牙称小程序 · 设计总览</span>
<a class="nav__link" href="#sec-login">一、登录与信息完善</a>
<a class="nav__link" href="#sec-home">二、首页</a>
<a class="nav__link" href="#sec-device">三、设备管理</a>
<a class="nav__link" href="#sec-data">四、数据查看</a>
<a class="nav__link" href="#sec-me">五、我的</a>
</nav>
<!-- 一、登录与信息完善 -->
<section class="section" id="sec-login">
<div class="section__header">
<h2 class="section__title">一、登录与信息完善</h2>
<span class="section__count">2</span>
</div>
<div class="scroll-row">
<div class="card" onclick="openLightbox('screenshots/index.jpg','登录页 · 微信一键登录')">
<div class="card__img"><img src="screenshots/index.jpg" alt=""></div>
<div class="card__label">登录页 · 微信一键登录</div>
<div class="card__tags"><span class="tag tag--state">默认状态</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/profile-complete.jpg','完善个人信息 · 新用户首次')">
<div class="card__img"><img src="screenshots/profile-complete.jpg" alt=""></div>
<div class="card__label">完善个人信息 · 新用户首次</div>
<div class="card__tags"><span class="tag tag--state">默认状态</span></div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- 二、首页 -->
<section class="section" id="sec-home">
<div class="section__header">
<h2 class="section__title">二、首页</h2>
<span class="section__count">1</span>
</div>
<div class="scroll-row">
<div class="card" onclick="openLightbox('screenshots/main.jpg','主页 · 首页Tab · 设备概览+最近测量')">
<div class="card__img"><img src="screenshots/main.jpg" alt=""></div>
<div class="card__label">主页 · 首页Tab · 设备概览+最近测量</div>
<div class="card__tags"><span class="tag tag--state">Tab 内页</span></div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- 三、设备管理 -->
<section class="section" id="sec-device">
<div class="section__header">
<h2 class="section__title">三、设备管理</h2>
<span class="section__count">11</span>
</div>
<div class="sub-title">1. 主页-设备Tab（main.html）— 3 种状态 + 4 弹窗</div>
<div class="scroll-row">
<div class="card" onclick="openLightbox('screenshots/main-device.jpg','设备Tab · 已配对设备列表')">
<div class="card__img"><img src="screenshots/main-device.jpg" alt=""></div>
<div class="card__label">设备Tab · 已配对设备列表</div>
<div class="card__tags"><span class="tag tag--state">默认状态</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/main-device-empty.jpg','设备Tab · 未绑定空状态')">
<div class="card__img"><img src="screenshots/main-device-empty.jpg" alt=""></div>
<div class="card__label">设备Tab · 未绑定空状态</div>
<div class="card__tags"><span class="tag tag--state">空状态</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/main-device-maintain.jpg','设备Tab · 运维模式（连点标题5次）')">
<div class="card__img"><img src="screenshots/main-device-maintain.jpg" alt=""></div>
<div class="card__label">设备Tab · 运维模式（连点标题5次）</div>
<div class="card__tags"><span class="tag tag--state">运维模式</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/main-connect-dialog.jpg','连接设备弹窗 · loading')">
<div class="card__img"><img src="screenshots/main-connect-dialog.jpg" alt=""></div>
<div class="card__label">连接设备弹窗 · loading</div>
<div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/main-retransmission-dialog.jpg','数据补传弹窗 · 上传中')">
<div class="card__img"><img src="screenshots/main-retransmission-dialog.jpg" alt=""></div>
<div class="card__label">数据补传弹窗 · 上传中</div>
<div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/main-retransmission-done.jpg','数据补传弹窗 · 已上传')">
<div class="card__img"><img src="screenshots/main-retransmission-done.jpg" alt=""></div>
<div class="card__label">数据补传弹窗 · 已上传</div>
<div class="card__tags"><span class="tag tag--modal">弹窗</span><span class="tag tag--state">状态变体</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/main-unpair-dialog.jpg','取消配对确认弹窗')">
<div class="card__img"><img src="screenshots/main-unpair-dialog.jpg" alt=""></div>
<div class="card__label">取消配对确认弹窗</div>
<div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
</div>
</div>
<div class="sub-title">2. 搜索设备与WiFi连接</div>
<div class="scroll-row">
<div class="card" onclick="openLightbox('screenshots/search-device.jpg','搜索设备 · 脉冲动画+设备列表')">
<div class="card__img"><img src="screenshots/search-device.jpg" alt=""></div>
<div class="card__label">搜索设备 · 脉冲动画+设备列表</div>
<div class="card__tags"><span class="tag tag--state">默认状态</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/wifi-connect.jpg','WiFi连接 · 搜索动画+WiFi列表')">
<div class="card__img"><img src="screenshots/wifi-connect.jpg" alt=""></div>
<div class="card__label">WiFi连接 · 搜索动画+WiFi列表</div>
<div class="card__tags"><span class="tag tag--state">默认状态</span></div>
</div>
</div>
<div class="sub-title">3. 成员管理（device-members.html）— 2 种状态 + 2 弹窗</div>
<div class="scroll-row">
<div class="card" onclick="openLightbox('screenshots/device-members.jpg','成员管理 · 已录入成员列表')">
<div class="card__img"><img src="screenshots/device-members.jpg" alt=""></div>
<div class="card__label">成员管理 · 已录入成员列表</div>
<div class="card__tags"><span class="tag tag--state">默认状态</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/device-members-empty.jpg','成员管理 · 空状态（0成员）')">
<div class="card__img"><img src="screenshots/device-members-empty.jpg" alt=""></div>
<div class="card__label">成员管理 · 空状态（0成员）</div>
<div class="card__tags"><span class="tag tag--state">空状态</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/device-members-sync-dialog.jpg','同步成员至设备弹窗 · 同步中')">
<div class="card__img"><img src="screenshots/device-members-sync-dialog.jpg" alt=""></div>
<div class="card__label">同步成员至设备弹窗 · 同步中</div>
<div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/device-members-sync-done.jpg','同步成员至设备弹窗 · 已完成')">
<div class="card__img"><img src="screenshots/device-members-sync-done.jpg" alt=""></div>
<div class="card__label">同步成员至设备弹窗 · 已完成</div>
<div class="card__tags"><span class="tag tag--modal">弹窗</span><span class="tag tag--state">状态变体</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/device-members-delete-dialog.jpg','删除成员确认弹窗')">
<div class="card__img"><img src="screenshots/device-members-delete-dialog.jpg" alt=""></div>
<div class="card__label">删除成员确认弹窗</div>
<div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
</div>
</div>
<div class="sub-title">4. 添加成员（add-member.html）— 1 页 + 1 弹窗</div>
<div class="scroll-row">
<div class="card" onclick="openLightbox('screenshots/add-member.jpg','添加成员 · 员工/家庭成员表单')">
<div class="card__img"><img src="screenshots/add-member.jpg" alt=""></div>
<div class="card__label">添加成员 · 员工/家庭成员表单</div>
<div class="card__tags"><span class="tag tag--state">默认状态</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/add-member-picker.jpg','已有成员选择器弹窗 · 底部弹出')">
<div class="card__img"><img src="screenshots/add-member-picker.jpg" alt=""></div>
<div class="card__label">已有成员选择器弹窗 · 底部弹出</div>
<div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- 四、数据查看 -->
<section class="section" id="sec-data">
<div class="section__header">
<h2 class="section__title">四、数据查看</h2>
<span class="section__count">2</span>
</div>
<div class="scroll-row">
<div class="card" onclick="openLightbox('screenshots/main-data.jpg','主页 · 数据Tab · 体重记录与统计')">
<div class="card__img"><img src="screenshots/main-data.jpg" alt=""></div>
<div class="card__label">主页 · 数据Tab · 体重记录与统计</div>
<div class="card__tags"><span class="tag tag--state">Tab 内页</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/main-member-modal.jpg','切换用户弹窗 · 底部成员列表')">
<div class="card__img"><img src="screenshots/main-member-modal.jpg" alt=""></div>
<div class="card__label">切换用户弹窗 · 底部成员列表</div>
<div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/data-detail.jpg','详细报告 · 身体成分完整指标')">
<div class="card__img"><img src="screenshots/data-detail.jpg" alt=""></div>
<div class="card__label">详细报告 · 身体成分完整指标</div>
<div class="card__tags"><span class="tag tag--state">默认状态</span></div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- 五、我的 -->
<section class="section" id="sec-me">
<div class="section__header">
<h2 class="section__title">五、我的</h2>
<span class="section__count">4</span>
</div>
<div class="scroll-row">
<div class="card" onclick="openLightbox('screenshots/main-me.jpg','主页 · 我的Tab · 个人中心入口')">
<div class="card__img"><img src="screenshots/main-me.jpg" alt=""></div>
<div class="card__label">主页 · 我的Tab · 个人中心入口</div>
<div class="card__tags"><span class="tag tag--state">Tab 内页</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/profile.jpg','个人信息 · 详细信息查看')">
<div class="card__img"><img src="screenshots/profile.jpg" alt=""></div>
<div class="card__label">个人信息 · 详细信息查看</div>
<div class="card__tags"><span class="tag tag--state">默认状态</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/help-center.jpg','帮助中心 · FAQ分类列表')">
<div class="card__img"><img src="screenshots/help-center.jpg" alt=""></div>
<div class="card__label">帮助中心 · FAQ分类列表</div>
<div class="card__tags"><span class="tag tag--state">默认状态</span></div>
</div>
<div class="card" onclick="openLightbox('screenshots/help-detail.jpg','帮助详情 · 单条解答')">
<div class="card__img"><img src="screenshots/help-detail.jpg" alt=""></div>
<div class="card__label">帮助详情 · 单条解答</div>
<div class="card__tags"><span class="tag tag--state">默认状态</span></div>
</div>
</div>
</section>
<div style="height:40px;"></div>
<!-- 灯箱 -->
<div class="lightbox" id="lightbox" onclick="closeLightbox()">
<span class="lightbox__close">&times;</span>
<img id="lightbox-img" src="" alt="">
<div class="lightbox__name" id="lightbox-name"></div>
</div>
<script>
function openLightbox(src, name) {
document.getElementById('lightbox-img').src = src;
document.getElementById('lightbox-name').textContent = name;
document.getElementById('lightbox').classList.add('show');
}
function closeLightbox() {
document.getElementById('lightbox').classList.remove('show');
}
</script>
</body>
</html>
other-module/bluetooth-scale-miniprogram/doc/screenshots/add-member-picker.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

other-module/bluetooth-scale-miniprogram/doc/screenshots/data-detail.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 84 KiB

other-module/bluetooth-scale-miniprogram/doc/screenshots/help-center.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 24 KiB

other-module/bluetooth-scale-miniprogram/doc/screenshots/main-device-maintain.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

other-module/bluetooth-scale-miniprogram/doc/screenshots/main-unpair-dialog.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

other-module/bluetooth-scale-miniprogram/doc/screenshots/main.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 41 KiB