huangyicao/banban
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善设备端体验与微信校验支持

Browse Source
This commit is contained in:
stu2not
2026-07-07 16:58:05 +08:00
parent b4fef6d2e0
commit 937e3023fc
38 changed files with 3377 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
banban-mini/src/pages/chat/index.scss
+141 -1
View File
@@ -25,8 +25,11 @@
overflow: hidden;
}
.guest-card {
.guest-chat-shell {
margin: 0 24px;
}
.guest-card {
padding: 44px 32px;
border-radius: 20px;
background: #FFFFFF;
@@ -64,6 +67,10 @@
margin-top: 30px;
border-radius: 16px;
background: #07C160;
&.secondary {
background: #FF8C42;
}
}
.guest-card-btn-text {
@@ -72,6 +79,139 @@
color: #FFFFFF;
}
.guest-demo-card,
.guest-guide-card {
margin-top: 20px;
padding: 28px 24px;
border-radius: 20px;
background: #FFFFFF;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.guest-demo-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.guest-demo-title,
.guest-guide-title {
display: block;
font-size: 30px;
line-height: 1.35;
font-weight: 700;
color: #1A1A1A;
}
.guest-demo-tag {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 92px;
height: 52px;
padding: 0 18px;
border-radius: 999px;
background: #FFF2E7;
&:active {
opacity: 0.72;
}
}
.guest-demo-tag-text {
font-size: 24px;
font-weight: 700;
color: #FF8C42;
}
.guest-demo-item {
display: flex;
align-items: center;
padding: 20px 0;
border-top: 1px solid #F2F2F2;
&:first-of-type {
border-top: none;
}
&:active {
opacity: 0.72;
}
}
.guest-demo-avatar {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 76px;
height: 76px;
margin-right: 20px;
border-radius: 20px;
background: #FFF2E7;
text {
font-size: 30px;
font-weight: 700;
color: #FF8C42;
}
&.parent {
background: #E8F8F0;
text {
color: #16A34A;
}
}
}
.guest-demo-content {
flex: 1;
min-width: 0;
}
.guest-demo-action {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: 16px;
min-width: 86px;
height: 56px;
padding: 0 18px;
border-radius: 14px;
background: #F5F7FA;
&:active {
opacity: 0.72;
}
}
.guest-demo-action-text {
font-size: 24px;
font-weight: 700;
color: #FF8C42;
}
.guest-demo-name {
display: block;
font-size: 28px;
line-height: 1.35;
font-weight: 700;
color: #1A1A1A;
}
.guest-demo-message,
.guest-guide-desc {
display: block;
margin-top: 8px;
font-size: 25px;
line-height: 1.55;
color: #666666;
}
.conversation-item {
background: #FFFFFF;
border-radius: 20px;
banban-mini/src/pages/chat/index.tsx
+85 -6
View File
@@ -64,6 +64,15 @@ export default function Chat() {
Taro.navigateTo({ url: '/pages/login/index' })
}
const handleGuestPreviewTap = (title: string, content: string) => {
Taro.showModal({
title,
content,
showCancel: false,
confirmText: '我知道了',
})
}
return (
<View className='chat-page'>
<View className='page-header'>
@@ -71,12 +80,82 @@ export default function Chat() {
</View>
{isGuest ? (
<View className='guest-card'>
<Text className='guest-card-icon'>💬</Text>
<Text className='guest-card-title'>亲子互动会话</Text>
<Text className='guest-card-desc'>绑定设备后，可以在这里查看宝贝、家长和 AI 玩伴之间的消息记录。</Text>
<View className='guest-card-btn' onClick={handleGuestLogin}>
<Text className='guest-card-btn-text'>登录后查看</Text>
<View className='guest-chat-shell'>
<View className='guest-card'>
<Text className='guest-card-icon'>💬</Text>
<Text className='guest-card-title'>亲子互动会话</Text>
<Text className='guest-card-desc'>这里会汇总宝贝、家长和 AI 玩伴之间的消息。绑定设备后，真实会话会按宝贝和设备自动归档。</Text>
</View>
<View className='guest-demo-card'>
<View className='guest-demo-header'>
<Text className='guest-demo-title'>会话示例</Text>
<View
className='guest-demo-tag'
onClick={() => handleGuestPreviewTap(
'会话预览',
'这里展示玩伴页的会话能力。绑定设备后，会显示宝贝、家长和 AI 玩伴的真实消息记录。'
)}
>
<Text className='guest-demo-tag-text'>预览</Text>
</View>
</View>
<View
className='guest-demo-item'
onClick={() => handleGuestPreviewTap(
'AI 玩伴',
'绑定设备后，可以在这里查看宝贝与 AI 玩伴的真实会话记录，包括聊天内容、时间和对应宝贝。'
)}
>
<View className='guest-demo-avatar'>
<Text>伴</Text>
</View>
<View className='guest-demo-content'>
<Text className='guest-demo-name'>AI 玩伴</Text>
<Text className='guest-demo-message'>陪宝贝聊天、讲故事，也能留下可回看记录。</Text>
</View>
<View
className='guest-demo-action'
onClick={() => handleGuestPreviewTap(
'AI 玩伴',
'绑定设备后，可以在这里查看宝贝与 AI 玩伴的真实会话记录，包括聊天内容、时间和对应宝贝。'
)}
>
<Text className='guest-demo-action-text'>查看</Text>
</View>
</View>
<View
className='guest-demo-item'
onClick={() => handleGuestPreviewTap(
'家长留言',
'绑定设备后，家长可以查看消息记录，也可以给宝贝发送语音留言，设备端会收到对应提醒。'
)}
>
<View className='guest-demo-avatar parent'>
<Text>家</Text>
</View>
<View className='guest-demo-content'>
<Text className='guest-demo-name'>家长留言</Text>
<Text className='guest-demo-message'>家长可查看设备消息，并给宝贝发送语音留言。</Text>
</View>
<View
className='guest-demo-action'
onClick={() => handleGuestPreviewTap(
'家长留言',
'绑定设备后，家长可以查看消息记录，也可以给宝贝发送语音留言，设备端会收到对应提醒。'
)}
>
<Text className='guest-demo-action-text'>查看</Text>
</View>
</View>
</View>
<View className='guest-guide-card'>
<Text className='guest-guide-title'>开始使用</Text>
<Text className='guest-guide-desc'>浏览功能不需要登录；当你需要绑定设备、查看真实会话记录时，再进入登录和绑定流程。</Text>
<View className='guest-card-btn secondary' onClick={handleGuestLogin}>
<Text className='guest-card-btn-text'>去登录 / 绑定设备</Text>
</View>
</View>
</View>
) : loading ? (
banban-mini/src/pages/device/index.tsx
+1 -1
View File
@@ -318,7 +318,7 @@ export default function Device() {
<Text className='guest-action-title'>准备绑定或管理设备</Text>
<Text className='guest-action-desc'>登录后可绑定设备，并在绑定流程中创建或选择宝贝资料。</Text>
<View className='guest-primary-btn' onClick={() => goLoginWithRedirect('/pages/device/index')}>
<Text className='guest-primary-btn-text'>登录后继续</Text>
<Text className='guest-primary-btn-text'>去登录 / 绑定设备</Text>
</View>
</View>
{systemBanner}
banban-mini/src/pages/location/index.scss
+60
View File
@@ -165,6 +165,10 @@
margin: 0 24px;
}
.guest-location-panel {
margin: 0 24px;
}
.location-empty-card {
background: #FFFFFF;
border-radius: 20px;
@@ -211,6 +215,10 @@
display: flex;
align-items: center;
justify-content: center;
&.secondary {
background: #07C160;
}
}
.location-empty-action-text {
@@ -218,3 +226,55 @@
color: #FFFFFF;
font-weight: 600;
}
.guest-location-card {
margin-top: 20px;
padding: 28px 24px;
border-radius: 20px;
background: #FFFFFF;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.guest-location-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 20px 0;
border-top: 1px solid #F2F2F2;
&:first-child {
border-top: none;
}
}
.guest-location-label {
flex-shrink: 0;
font-size: 27px;
font-weight: 700;
color: #1A1A1A;
}
.guest-location-value {
min-width: 0;
font-size: 26px;
line-height: 1.45;
color: #666666;
text-align: right;
}
.guest-location-title {
display: block;
font-size: 30px;
font-weight: 700;
line-height: 1.35;
color: #1A1A1A;
}
.guest-location-desc {
display: block;
margin-top: 10px;
font-size: 26px;
line-height: 1.55;
color: #666666;
}
banban-mini/src/pages/location/index.tsx
+24 -4
View File
@@ -394,18 +394,38 @@ export default function Location() {
}}
/>
</View>
<View className='location-empty-shell'>
<View className='guest-location-panel'>
<View className='location-empty-card'>
<Text className='location-empty-title'>设备定位与轨迹</Text>
<Text className='location-empty-desc'>绑定设备后，可在这里查看宝贝设备的位置、更新时间和定位精度。</Text>
<Text className='location-empty-desc'>这里用于展示设备当前位置、更新时间、定位精度和轨迹点。上方地图为功能预览，真实位置会在绑定设备后显示。</Text>
</View>
<View className='guest-location-card'>
<View className='guest-location-row'>
<Text className='guest-location-label'>当前位置</Text>
<Text className='guest-location-value'>绑定设备后显示</Text>
</View>
<View className='guest-location-row'>
<Text className='guest-location-label'>今日轨迹</Text>
<Text className='guest-location-value'>按上报时间形成轨迹</Text>
</View>
<View className='guest-location-row'>
<Text className='guest-location-label'>定位信息</Text>
<Text className='guest-location-value'>坐标、精度、电量和地址</Text>
</View>
</View>
<View className='guest-location-card'>
<Text className='guest-location-title'>开始使用</Text>
<Text className='guest-location-desc'>浏览地图和功能说明不需要登录；绑定设备或查看真实定位数据时，再进入登录流程。</Text>
<View
className='location-empty-action'
className='location-empty-action secondary'
onClick={() => {
Taro.setStorageSync('postLoginRedirect', '/pages/location/index')
Taro.navigateTo({ url: '/pages/login/index' })
}}
>
<Text className='location-empty-action-text'>登录后查看</Text>
<Text className='location-empty-action-text'>去登录 / 绑定设备</Text>
</View>
</View>
</View>
banban-mini/src/pages/login/index.scss
+14
View File
@@ -127,6 +127,20 @@
opacity: 0.8;
}
}
.guest-browse-btn {
margin-top: 24px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
}
.guest-browse-text {
font-size: 28px;
color: #1677FF;
font-weight: 500;
}
}
.agreement-panel {
banban-mini/src/pages/login/index.tsx
+8
View File
@@ -81,6 +81,11 @@ export default function Login() {
}
}
const handleGuestBrowse = () => {
Taro.removeStorageSync('postLoginRedirect')
Taro.reLaunch({ url: '/pages/device/index' })
}
const handleAgreementChange = (event) => {
const values = event.detail.value || []
setAgreementAccepted(values.includes('accepted'))
@@ -161,6 +166,9 @@ export default function Login() {
<Text className='btn-icon'>🌐</Text>
<Text className='btn-text'>{submitting ? '登录中...' : '登录后继续'}</Text>
</Button>
<View className='guest-browse-btn' onClick={handleGuestBrowse}>
<Text className='guest-browse-text'>暂不登录，先浏览</Text>
</View>
</View>
<View className='agreement-panel'>
banban-mini/src/pages/sleep/index.scss
+15
View File
@@ -109,6 +109,11 @@
background: #FFFFFF;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
text-align: center;
&.action-card {
padding: 32px 28px;
text-align: left;
}
}
.guest-manage-icon {
@@ -123,6 +128,12 @@
font-size: 34px;
font-weight: 700;
color: #1A1A1A;
&.small {
margin-top: 0;
font-size: 30px;
line-height: 1.35;
}
}
.guest-manage-desc {
@@ -141,6 +152,10 @@
margin-top: 30px;
border-radius: 16px;
background: #07C160;
&.secondary {
background: #FF8C42;
}
}
.guest-manage-btn-text {
banban-mini/src/pages/sleep/index.tsx
+23 -10
View File
@@ -980,16 +980,7 @@ export default function Sleep() {
<View className='guest-manage-card'>
<Text className='guest-manage-icon'>⚙️</Text>
<Text className='guest-manage-title'>管理宝贝资料和设备</Text>
<Text className='guest-manage-desc'>登录后可创建宝贝资料、绑定伴伴设备、管理卡片、设置休眠时间和家庭成员。</Text>
<View
className='guest-manage-btn'
onClick={() => {
Taro.setStorageSync('postLoginRedirect', '/pages/sleep/index')
Taro.navigateTo({ url: '/pages/login/index' })
}}
>
<Text className='guest-manage-btn-text'>登录后管理</Text>
</View>
<Text className='guest-manage-desc'>这里可以管理宝贝资料、设备绑定、卡片、休眠时间、系统更新和家庭成员。当前页面为功能预览，真实数据会在绑定设备后展示。</Text>
</View>
<View className='guest-manage-list'>
@@ -1005,6 +996,28 @@ export default function Sleep() {
<Text className='guest-manage-item-title'>休眠设置</Text>
<Text className='guest-manage-item-desc'>设置设备休眠时间和远程控制。</Text>
</View>
<View className='guest-manage-item'>
<Text className='guest-manage-item-title'>系统更新</Text>
<Text className='guest-manage-item-desc'>查看设备版本，并在设备在线时发起更新。</Text>
</View>
<View className='guest-manage-item'>
<Text className='guest-manage-item-title'>家庭共享</Text>
<Text className='guest-manage-item-desc'>邀请家庭成员一起查看和管理同一台设备。</Text>
</View>
</View>
<View className='guest-manage-card action-card'>
<Text className='guest-manage-title small'>准备绑定设备</Text>
<Text className='guest-manage-desc'>浏览功能不需要登录；创建宝贝资料、绑定设备或查看真实设备数据时，再进入登录流程。</Text>
<View
className='guest-manage-btn secondary'
onClick={() => {
Taro.setStorageSync('postLoginRedirect', '/pages/sleep/index')
Taro.navigateTo({ url: '/pages/login/index' })
}}
>
<Text className='guest-manage-btn-text'>去登录 / 绑定设备</Text>
</View>
</View>
{systemBanner}
</View>