refactor(user): 优化开发者登录弹窗及点击交互逻辑

- 移除点击步数提示和震动反馈,改为静默计数,点击11次后弹出登录弹窗
- 将弹窗宽度从300px调整为320px,增加内边距提升视觉效果
- 登录按钮由block属性改为style设置宽度100%,确保按钮样式一致
- 优化弹窗标题和关闭按钮样式,提高界面层次感
- 调整手机号输入框和布局间距,提升整体排版协调性
This commit is contained in:
2026-07-15 01:40:36 +08:00
parent 19ca568d60
commit 38a7b4320d
2 changed files with 23 additions and 32 deletions

View File

@@ -5,5 +5,7 @@
- 登录方式:手机号 + 短信验证码,复用 `loginBySms` / `sendSmsCaptcha` APIfrom `@/api/passport/login` - 登录方式:手机号 + 短信验证码,复用 `loginBySms` / `sendSmsCaptcha` APIfrom `@/api/passport/login`
- 点击计数使用 `useRef` 保证快速点击时的同步性,超过 3 秒未点击自动重置 - 点击计数使用 `useRef` 保证快速点击时的同步性,超过 3 秒未点击自动重置
- 第 4 次点击起显示步数提示(类似 Android 开发者模式),前 3 次仅轻震动反馈 - 第 4 次点击起显示步数提示(类似 Android 开发者模式),前 3 次仅轻震动反馈
- **(已更新)** 移除了步数提示和震动,改为静默计数,点够 11 次直接弹窗
- **(已更新)** 弹窗宽度从 300px 加大到 320px登录按钮改用 `style={{ width: '100%' }}` 替代 `block` prop 确保显示
- 登录成功后调用 `useUserContext().syncFromStorage()` 同步 React 登录态(`loginBySms` 内部已写入 storage 但不返回数据) - 登录成功后调用 `useUserContext().syncFromStorage()` 同步 React 登录态(`loginBySms` 内部已写入 storage 但不返回数据)
- 弹窗 UI 使用 NutUI `Input` + `Button`,带 60 秒倒计时 - 弹窗 UI 使用 NutUI `Input` + `Button`,带 60 秒倒计时

View File

@@ -45,24 +45,9 @@ const AboutPage: React.FC = () => {
lastClickTime.current = now lastClickTime.current = now
const current = clickCountRef.current const current = clickCountRef.current
const remaining = DEV_LOGIN_CLICK_COUNT - current
if (current >= DEV_LOGIN_CLICK_COUNT) { if (current >= DEV_LOGIN_CLICK_COUNT) {
clickCountRef.current = 0 clickCountRef.current = 0
setShowLogin(true) setShowLogin(true)
return
}
// 从第 4 次开始给步数提示
if (current >= 4) {
Taro.showToast({
title: `再点击 ${remaining} 次开启开发者登录`,
icon: 'none',
duration: 1200,
})
} else {
// 前 3 次给极轻的震动反馈,避免用户误触无感
Taro.vibrateShort({ type: 'light' })
} }
} }
@@ -212,32 +197,36 @@ const AboutPage: React.FC = () => {
catchMove catchMove
> >
<View <View
className='mx-8 w-[300px] rounded-2xl bg-white p-5' className='mx-6 rounded-2xl bg-white'
style={{ width: '320px', padding: '24px 20px' }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<View className='mb-4 flex items-center justify-between'> <View className='mb-3 flex items-center justify-between'>
<Text className='text-base font-semibold text-gray-800'></Text> <Text className='text-lg font-bold text-gray-800'></Text>
<Text <Text
className='text-sm text-gray-400 px-2' className='text-lg text-gray-400'
style={{ padding: '4px 8px' }}
onClick={handleCloseLogin} onClick={handleCloseLogin}
> >
</Text> </Text>
</View> </View>
<Text className='mb-4 block text-xs text-gray-400'> <Text className='mb-5 block text-xs text-gray-400'>
使+ 使+
</Text> </Text>
<Input <View className='mb-3'>
type='number' <Input
placeholder='请输入手机号码' type='number'
maxLength={11} placeholder='请输入手机号码'
value={formData.phone || ''} maxLength={11}
onChange={(val) => setFormData({ ...formData, phone: val })} value={formData.phone || ''}
style={{ backgroundColor: '#f5f5f5', borderRadius: '8px' }} onChange={(val) => setFormData({ ...formData, phone: val })}
/> style={{ backgroundColor: '#f5f5f5', borderRadius: '8px' }}
/>
</View>
<View className='mt-3 flex items-center gap-2'> <View className='flex items-center gap-2 mb-6'>
<View className='flex-1'> <View className='flex-1'>
<Input <Input
type='number' type='number'
@@ -262,13 +251,13 @@ const AboutPage: React.FC = () => {
<Button <Button
type='primary' type='primary'
size='large' size='large'
block shape='round'
className='mt-5 rounded-lg'
loading={loading} loading={loading}
disabled={loading} disabled={loading}
onClick={handleLogin} onClick={handleLogin}
style={{ width: '100%' }}
> >
{loading ? '登录中...' : '登录'} {loading ? '登录中...' : '登 录'}
</Button> </Button>
</View> </View>
</View> </View>