修复本轮UI走查发现的6处样式/交互问题
1. 企业注册-统一社会信用代码：扫码图标误用 icon+onIconClick（渲染在输入框左侧、蓝色）， 跟设计稿（图标在右侧、深灰色）不符。原因是 Field 组件里 icon 出现在 <input> 之前； 全仓库唯一一处 onIconClick 用法，改用 PasswordField 同款的 action（渲染在右侧）， 复用已有的 .auth-inline-icon 灰色样式，不新增CSS。 2. 意见反馈：图片上传按钮跟设计稿差异较大（当前是通栏虚线框+蓝色图标文字，设计稿是 独立白色方块+灰色图标文字）；字数"0/300"计数器卡在textarea自带边框和外层白卡的接缝 处，看起来像叠在两层盒子中间。改法：拆分原本跟"举报证据上传"共用的CSS规则，给 .feedback-upload>button 单独设置白底/无边框/灰色/7.5rem方块；去掉textarea自身的 border，让计数器所在的外层卡片成为唯一可见的白色容器。"图片"标题跟数量合并回一行 （原来用space-between分居两端），maxFiles真实上限(5，早前已确认是后端真实值)不变。 3. 青少年模式（开启/关闭/验证三个页面互跳）：三处跳转全部误用push（HashNavigation. navigateTo），导致点返回会先回到流程内已经处理完的页面，跟本工程之前排查过的 同类"tab切换污染历史记录"是同一个模式。新增 navigateReplace()（跟 navigate() 同结构， 内部换成 HashNavigation.navigateReplace，抄的是 message-center-view.jsx/ content-library-view.jsx已验证过的写法），三处调用改用它。 4. 修改密码页面：复用了 profile-editor-page 的通用label/input样式，但没有像 BirthDateEditor那样带上专属wrapper class，导致三个label的<span>不加粗不换行、 紧贴在一起零间距，input还留着给别的编辑器计数器/清空按钮预留的3rem右侧空白。 新增 change-password-fields 样式（参照birth-date-editor的label/span/input规则）。 5. 消息长按弹出菜单：全历史检索确认这个功能从来不是真正的长按手势，唯一实现是点击 气泡右上角一个不透明度只有0.3的小箭头按钮——参考图"消息页面—长按弹出.png"命名的 功能需求和实现从未对齐。给 .bubble 补上真实的touchstart/touchmove/touchend长按 识别（500ms计时器，移动超过10px视为滚动取消），复用同一套菜单构建逻辑（从 handleContextClick里抽出openContextMenu(x,y)公用）。验证时发现并修复了一个重构 引入的真bug：openContextMenu里遗留了两行没改完的e.pageX/e.pageY（应为参数x/y）， 会导致点击小按钮和长按两条路径双双抛ReferenceError，已修正并重新验证两条路径都正常。 6. 群公告横幅（群聊导航栏下方常驻提示条）：当前是通栏无圆角、贴边无留白、底部硬分隔线、 文字用的是全局默认灰色(#666)文本token，设计稿是浮在灰底上的白色圆角卡片、四周留白、 无分隔线、文字接近黑色。改法：加margin+border-radius+box-shadow做出浮起的卡片感， 去掉border-bottom，颜色改用--clr-bubble-text（消息正文同款深色token，而不是改全局 的--clr-text-primary，避免影响其它用到这个默认文本色的地方）。 验证：本地dev-proxy逐项验证——企业注册图标位置颜色（截图核对）、意见反馈布局（截图核对， 0/5计数器无缝落在白卡右下角）、青少年模式三处调用grep确认无遗漏+navigateReplace底层 history.replaceState机制单独验证不增加history.length、修改密码页面（截图核对label加粗 间距生效）、长按弹出（真实dispatch TouchEvent触发菜单成功，且验证点击小按钮路径未被 重构破坏）、群公告横幅（getComputedStyle核对margin/borderRadius/boxShadow/color/ borderBottom五个属性全部生效）。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Your Name
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
6ab2867f27
commit
a8b81a51e3
@@ -247,8 +247,9 @@ function EnterpriseRegister() {
|
||||
<FormAlert text={errors.form} />
|
||||
<label className="auth-label">统一社会信用代码</label>
|
||||
<Field value={creditCode} onChange={e => setCreditCode(e.target.value.trim().toUpperCase().replace(/[^0-9A-Z]/g, ''))}
|
||||
placeholder="请输入18位统一社会信用代码" maxLength="18" icon="qr_code_scanner" error={errors.creditCode}
|
||||
onIconClick={() => setToast('扫码识别暂不可用，请手动输入')} />
|
||||
placeholder="请输入18位统一社会信用代码" maxLength="18" error={errors.creditCode}
|
||||
action={<button type="button" className="auth-inline-icon"
|
||||
onClick={() => setToast('扫码识别暂不可用，请手动输入')}><Icon>qr_code_scanner</Icon></button>} />
|
||||
<p className="auth-help">请填写营业执照上的统一社会信用代码</p>
|
||||
|
||||
<label className="auth-label">上传营业执照 <span>选填</span></label>
|
||||
|
||||
@@ -19,6 +19,17 @@ const navigate = (view, params) => {
|
||||
HashNavigation.navigateTo(hash);
|
||||
};
|
||||
|
||||
// Same as navigate() but replaces the current history entry instead of pushing a new one -- for
|
||||
// steps within a single flow (e.g. youth-mode off/on/verify) so "back" leaves the flow instead of
|
||||
// re-walking its already-completed steps.
|
||||
const navigateReplace = (view, params) => {
|
||||
let hash = HashNavigation.setUrlSidePanel(window.location.hash, view);
|
||||
Object.entries(params || {}).forEach(([key, value]) => {
|
||||
hash = value ? HashNavigation.addUrlParam(hash, key, value) : HashNavigation.removeUrlParam(hash, key);
|
||||
});
|
||||
HashNavigation.navigateReplace(hash);
|
||||
};
|
||||
|
||||
export const PERSONAL_SETTINGS_VIEWS = [
|
||||
'personal-center', 'personal-profile', 'profile-nickname', 'profile-birth-date',
|
||||
'profile-signature', 'profile-gender', 'profile-region', 'personal-qrcode', 'android-settings',
|
||||
@@ -460,7 +471,7 @@ function ChangePassword({onUpdatePassword, onToast}) {
|
||||
});
|
||||
};
|
||||
return <div className="personal-page profile-editor-page"><Header title="修改密码" back="android-settings" action="完成"
|
||||
actionLabel={busy ? '处理中…' : '完成'} actionDisabled={busy} onAction={submit} /><main>
|
||||
actionLabel={busy ? '处理中…' : '完成'} actionDisabled={busy} onAction={submit} /><main className="change-password-fields">
|
||||
<label><span>原密码</span><input type="password" value={oldPwd} onChange={e => setOldPwd(e.target.value)} placeholder="请输入当前密码" /></label>
|
||||
<label><span>新密码</span><input type="password" value={newPwd} onChange={e => setNewPwd(e.target.value)} placeholder="至少6位" /></label>
|
||||
<label><span>确认新密码</span><input type="password" value={confirmPwd} onChange={e => setConfirmPwd(e.target.value)} placeholder="再次输入新密码" /></label>
|
||||
@@ -648,7 +659,7 @@ function YouthMode({onToast}) {
|
||||
window.setTimeout(() => navigate('identity-check', {ym: 'enable'}), 400);
|
||||
return;
|
||||
}
|
||||
navigate('youth-mode-verify', {ym: 'enable'});
|
||||
navigateReplace('youth-mode-verify', {ym: 'enable'});
|
||||
};
|
||||
|
||||
if (!settings) return <div className="personal-page youth-mode-page"><Header title="青少年模式" back="android-settings" /></div>;
|
||||
@@ -663,7 +674,7 @@ function YouthMode({onToast}) {
|
||||
</main>
|
||||
<footer>
|
||||
<button type="button" className={settings.enabled ? 'outline' : ''}
|
||||
onClick={() => settings.enabled ? navigate('youth-mode-verify', {ym: 'disable'}) : startEnable()}>
|
||||
onClick={() => settings.enabled ? navigateReplace('youth-mode-verify', {ym: 'disable'}) : startEnable()}>
|
||||
{settings.enabled ? '关闭青少年模式' : '开启青少年模式'}
|
||||
</button>
|
||||
<small>可在设置中查看青少年模式状态</small>
|
||||
@@ -718,7 +729,7 @@ function YouthModeVerify({hashParams, onToast}) {
|
||||
// flip, which is a more confusing flash than the plain loading state they had before caching.
|
||||
if (settings) writeCachedData('youth-mode', {...settings, enabled: mode === 'enable'});
|
||||
onToast(mode === 'enable' ? '青少年模式已开启' : '青少年模式已关闭');
|
||||
window.setTimeout(() => navigate(mode === 'enable' ? 'youth-mode-on' : 'youth-mode-off'), 400);
|
||||
window.setTimeout(() => navigateReplace(mode === 'enable' ? 'youth-mode-on' : 'youth-mode-off'), 400);
|
||||
}).catch(err => {
|
||||
// Server locks out further attempts for retry_after_seconds after too many wrong passwords
|
||||
// (any request during that window 429s regardless of whether THIS password is correct) --
|
||||
|
||||
@@ -246,7 +246,7 @@ function UserFeedback({tinode, onToast}) {
|
||||
<small>{content.length}/{maxLength}</small>
|
||||
</label>
|
||||
<section className="feedback-upload">
|
||||
<header><span><strong>图片</strong></span><em>{images.length}/{maxFiles}</em></header>
|
||||
<header><strong>图片（{images.length}/{maxFiles}）</strong></header>
|
||||
<button type="button" disabled={uploading} onClick={() => fileInputRef.current && fileInputRef.current.click()}><Icon>add_a_photo</Icon><span>{uploading ? '上传中…' : '点击上传'}</span></button>
|
||||
<input ref={fileInputRef} type="file" accept="image/*" style={{display: 'none'}} onChange={addImage} />
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user