feat(auth): 优化隐藏登录弹窗点击逻辑和样式
- 将点击步数提示从第4次调整到第6次触发,增强用户体验 - 弹窗宽度由320px调整为340px,更加合理显示内容 - 弹窗布局对齐sms-login.tsx,验证码输入和按钮布局调整,修复小程序Button显示问题 - 登录按钮样式改用className设置宽度和圆角,取消block和shape属性 - 点击版权信息累计11次弹出登录弹窗,未达次数显示剩余步数提示 - 登录成功后同步React登录态,保持状态一致
This commit is contained in:
@@ -4,8 +4,8 @@
|
|||||||
- 在 `src/pages/user/about/index.tsx` 底部版权信息上添加了点击 11 次弹出隐藏登录弹窗的功能
|
- 在 `src/pages/user/about/index.tsx` 底部版权信息上添加了点击 11 次弹出隐藏登录弹窗的功能
|
||||||
- 登录方式:手机号 + 短信验证码,复用 `loginBySms` / `sendSmsCaptcha` API(from `@/api/passport/login`)
|
- 登录方式:手机号 + 短信验证码,复用 `loginBySms` / `sendSmsCaptcha` API(from `@/api/passport/login`)
|
||||||
- 点击计数使用 `useRef` 保证快速点击时的同步性,超过 3 秒未点击自动重置
|
- 点击计数使用 `useRef` 保证快速点击时的同步性,超过 3 秒未点击自动重置
|
||||||
- 第 4 次点击起显示步数提示(类似 Android 开发者模式),前 3 次仅轻震动反馈
|
- 步数提示从**第 6 次**点击开始显示(Android 开发者模式风格)
|
||||||
- **(已更新)** 移除了步数提示和震动,改为静默计数,点够 11 次直接弹窗
|
- **(已更新)** 弹窗布局完全对齐 `sms-login.tsx` 写法:验证码行取消 `gap-2`/`flex-1` 包裹,改用 `flex items-center` 直接放 Input + Button;登录按钮取消 `block`/`shape`/`style`,改用 `className='w-full rounded-lg p-2'` + 外层 `flex justify-center`,解决小程序中 Button 不显示的问题
|
||||||
- **(已更新)** 弹窗宽度从 300px 加大到 320px,登录按钮改用 `style={{ width: '100%' }}` 替代 `block` prop 确保显示
|
- 弹窗宽度从 300px 加宽到 **340px**
|
||||||
- 登录成功后调用 `useUserContext().syncFromStorage()` 同步 React 登录态(`loginBySms` 内部已写入 storage 但不返回数据)
|
- 登录成功后调用 `useUserContext().syncFromStorage()` 同步 React 登录态(`loginBySms` 内部已写入 storage 但不返回数据)
|
||||||
- 弹窗 UI 使用 NutUI `Input` + `Button`,带 60 秒倒计时
|
- 弹窗 UI 使用 NutUI `Input` + `Button`,带 60 秒倒计时
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ const AboutPage: React.FC = () => {
|
|||||||
return () => clearTimeout(timer)
|
return () => clearTimeout(timer)
|
||||||
}, [countdown])
|
}, [countdown])
|
||||||
|
|
||||||
/** 点击版权信息 —— 累计 11 次弹出隐藏登录 */
|
/** 点击版权信息 —— 累计 11 次弹出隐藏登录 */
|
||||||
const handleCopyrightClick = () => {
|
const handleCopyrightClick = () => {
|
||||||
const now = Date.now()
|
const now = Date.now()
|
||||||
// 超过 3 秒未点击则重新计数
|
// 超过 3 秒未点击则重新计数
|
||||||
@@ -45,9 +45,21 @@ 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
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从第 6 次开始给步数提示
|
||||||
|
if (current >= 6) {
|
||||||
|
Taro.showToast({
|
||||||
|
title: `再点击 ${remaining} 次开启开发者登录`,
|
||||||
|
icon: 'none',
|
||||||
|
duration: 1200,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -197,8 +209,8 @@ const AboutPage: React.FC = () => {
|
|||||||
catchMove
|
catchMove
|
||||||
>
|
>
|
||||||
<View
|
<View
|
||||||
className='mx-6 rounded-2xl bg-white'
|
className='rounded-2xl bg-white'
|
||||||
style={{ width: '320px', padding: '24px 20px' }}
|
style={{ width: '340px', padding: '24px 20px' }}
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
>
|
>
|
||||||
<View className='mb-3 flex items-center justify-between'>
|
<View className='mb-3 flex items-center justify-between'>
|
||||||
@@ -226,17 +238,15 @@ const AboutPage: React.FC = () => {
|
|||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<View className='flex items-center gap-2 mb-6'>
|
<View className='mb-6 flex items-center bg-white rounded-lg pr-2'>
|
||||||
<View className='flex-1'>
|
<Input
|
||||||
<Input
|
type='number'
|
||||||
type='number'
|
placeholder='请输入6位验证码'
|
||||||
placeholder='请输入6位验证码'
|
maxLength={6}
|
||||||
maxLength={6}
|
value={formData.code || ''}
|
||||||
value={formData.code || ''}
|
onChange={(val) => setFormData({ ...formData, code: val })}
|
||||||
onChange={(val) => setFormData({ ...formData, code: val })}
|
style={{ backgroundColor: '#f5f5f5', borderRadius: '8px' }}
|
||||||
style={{ backgroundColor: '#f5f5f5', borderRadius: '8px' }}
|
/>
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
<Button
|
<Button
|
||||||
size='small'
|
size='small'
|
||||||
type={countdown > 0 ? 'default' : 'primary'}
|
type={countdown > 0 ? 'default' : 'primary'}
|
||||||
@@ -248,17 +258,18 @@ const AboutPage: React.FC = () => {
|
|||||||
</Button>
|
</Button>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<Button
|
<View className='flex justify-center'>
|
||||||
type='primary'
|
<Button
|
||||||
size='large'
|
type='primary'
|
||||||
shape='round'
|
size='large'
|
||||||
loading={loading}
|
className='w-full rounded-lg p-2'
|
||||||
disabled={loading}
|
loading={loading}
|
||||||
onClick={handleLogin}
|
disabled={loading}
|
||||||
style={{ width: '100%' }}
|
onClick={handleLogin}
|
||||||
>
|
>
|
||||||
{loading ? '登录中...' : '登 录'}
|
{loading ? '登录中...' : '登录'}
|
||||||
</Button>
|
</Button>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user