修复本轮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:
co-authored by
Claude Sonnet 5
parent
6ab2867f27
commit
a8b81a51e3
+23
-13
@@ -6005,9 +6005,15 @@ function EnterpriseRegister() {
|
||||
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('扫码识别暂不可用,请手动输入')
|
||||
action: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV)("button", {
|
||||
type: "button",
|
||||
className: "auth-inline-icon",
|
||||
onClick: () => setToast('扫码识别暂不可用,请手动输入'),
|
||||
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV)(Icon, {
|
||||
children: "qr_code_scanner"
|
||||
}, void 0, false)
|
||||
}, void 0, false)
|
||||
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV)("p", {
|
||||
className: "auth-help",
|
||||
children: "请填写营业执照上的统一社会信用代码"
|
||||
@@ -15166,6 +15172,13 @@ const navigate = (view, params) => {
|
||||
});
|
||||
_lib_navigation_js__WEBPACK_IMPORTED_MODULE_2__["default"].navigateTo(hash);
|
||||
};
|
||||
const navigateReplace = (view, params) => {
|
||||
let hash = _lib_navigation_js__WEBPACK_IMPORTED_MODULE_2__["default"].setUrlSidePanel(window.location.hash, view);
|
||||
Object.entries(params || {}).forEach(([key, value]) => {
|
||||
hash = value ? _lib_navigation_js__WEBPACK_IMPORTED_MODULE_2__["default"].addUrlParam(hash, key, value) : _lib_navigation_js__WEBPACK_IMPORTED_MODULE_2__["default"].removeUrlParam(hash, key);
|
||||
});
|
||||
_lib_navigation_js__WEBPACK_IMPORTED_MODULE_2__["default"].navigateReplace(hash);
|
||||
};
|
||||
const PERSONAL_SETTINGS_VIEWS = ['personal-center', 'personal-profile', 'profile-nickname', 'profile-birth-date', 'profile-signature', 'profile-gender', 'profile-region', 'personal-qrcode', 'android-settings', 'change-password', 'app-version', 'privacy-settings', 'friend-discovery-settings', 'youth-mode-off', 'youth-mode-on', 'youth-mode-verify', 'notification-permission', 'permission-settings-reminder', 'camera-permission-info', 'microphone-permission-info'];
|
||||
function Icon({
|
||||
children
|
||||
@@ -16002,6 +16015,7 @@ function ChangePassword({
|
||||
actionDisabled: busy,
|
||||
onAction: submit
|
||||
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("main", {
|
||||
className: "change-password-fields",
|
||||
children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("label", {
|
||||
children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("span", {
|
||||
children: "原密码"
|
||||
@@ -16345,7 +16359,7 @@ function YouthMode({
|
||||
}), 400);
|
||||
return;
|
||||
}
|
||||
navigate('youth-mode-verify', {
|
||||
navigateReplace('youth-mode-verify', {
|
||||
ym: 'enable'
|
||||
});
|
||||
};
|
||||
@@ -16378,7 +16392,7 @@ function YouthMode({
|
||||
children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("button", {
|
||||
type: "button",
|
||||
className: settings.enabled ? 'outline' : '',
|
||||
onClick: () => settings.enabled ? navigate('youth-mode-verify', {
|
||||
onClick: () => settings.enabled ? navigateReplace('youth-mode-verify', {
|
||||
ym: 'disable'
|
||||
}) : startEnable(),
|
||||
children: settings.enabled ? '关闭青少年模式' : '开启青少年模式'
|
||||
@@ -16430,7 +16444,7 @@ function YouthModeVerify({
|
||||
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 => {
|
||||
if (err.reason === 'TOO_MANY_ATTEMPTS' && err.details && err.details.retry_after_seconds) {
|
||||
setLockedUntil(Date.now() + err.details.retry_after_seconds * 1000);
|
||||
@@ -17173,14 +17187,10 @@ function UserFeedback({
|
||||
}, void 0, true), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV)("section", {
|
||||
className: "feedback-upload",
|
||||
children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV)("header", {
|
||||
children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV)("span", {
|
||||
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV)("strong", {
|
||||
children: "图片"
|
||||
}, void 0, false)
|
||||
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV)("em", {
|
||||
children: [images.length, "/", maxFiles]
|
||||
}, void 0, true)]
|
||||
}, void 0, true), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV)("button", {
|
||||
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV)("strong", {
|
||||
children: ["图片(", images.length, "/", maxFiles, ")"]
|
||||
}, void 0, true)
|
||||
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV)("button", {
|
||||
type: "button",
|
||||
disabled: uploading,
|
||||
onClick: () => fileInputRef.current && fileInputRef.current.click(),
|
||||
|
||||
Reference in New Issue
Block a user