refactor(user): 优化开发者登录弹窗及点击交互逻辑
- 移除点击步数提示和震动反馈,改为静默计数,点击11次后弹出登录弹窗 - 将弹窗宽度从300px调整为320px,增加内边距提升视觉效果 - 登录按钮由block属性改为style设置宽度100%,确保按钮样式一致 - 优化弹窗标题和关闭按钮样式,提高界面层次感 - 调整手机号输入框和布局间距,提升整体排版协调性
This commit is contained in:
@@ -45,24 +45,9 @@ const AboutPage: React.FC = () => {
|
||||
lastClickTime.current = now
|
||||
|
||||
const current = clickCountRef.current
|
||||
const remaining = DEV_LOGIN_CLICK_COUNT - current
|
||||
|
||||
if (current >= DEV_LOGIN_CLICK_COUNT) {
|
||||
clickCountRef.current = 0
|
||||
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
|
||||
>
|
||||
<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()}
|
||||
>
|
||||
<View className='mb-4 flex items-center justify-between'>
|
||||
<Text className='text-base font-semibold text-gray-800'>开发者登录</Text>
|
||||
<View className='mb-3 flex items-center justify-between'>
|
||||
<Text className='text-lg font-bold text-gray-800'>开发者登录</Text>
|
||||
<Text
|
||||
className='text-sm text-gray-400 px-2'
|
||||
className='text-lg text-gray-400'
|
||||
style={{ padding: '4px 8px' }}
|
||||
onClick={handleCloseLogin}
|
||||
>
|
||||
✕
|
||||
</Text>
|
||||
</View>
|
||||
<Text className='mb-4 block text-xs text-gray-400'>
|
||||
<Text className='mb-5 block text-xs text-gray-400'>
|
||||
仅限开发测试使用,通过手机号+验证码登录指定账号
|
||||
</Text>
|
||||
|
||||
<Input
|
||||
type='number'
|
||||
placeholder='请输入手机号码'
|
||||
maxLength={11}
|
||||
value={formData.phone || ''}
|
||||
onChange={(val) => setFormData({ ...formData, phone: val })}
|
||||
style={{ backgroundColor: '#f5f5f5', borderRadius: '8px' }}
|
||||
/>
|
||||
<View className='mb-3'>
|
||||
<Input
|
||||
type='number'
|
||||
placeholder='请输入手机号码'
|
||||
maxLength={11}
|
||||
value={formData.phone || ''}
|
||||
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'>
|
||||
<Input
|
||||
type='number'
|
||||
@@ -262,13 +251,13 @@ const AboutPage: React.FC = () => {
|
||||
<Button
|
||||
type='primary'
|
||||
size='large'
|
||||
block
|
||||
className='mt-5 rounded-lg'
|
||||
shape='round'
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
onClick={handleLogin}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
{loading ? '登录中...' : '登录'}
|
||||
{loading ? '登录中...' : '登 录'}
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user