feat: 优化 InputBar 底部栏布局与移动端交互体验#51
Open
avelli wants to merge 8 commits into
Open
Conversation
将 InputBar 中 5 组重复的 hint 状态（compression、moderation、size、 quality、nLimit）及其对应的 timer ref、show/hide/clear/startTouch 函数 替换为统一的 useHintTooltip hook 调用，减少约 90 行样板代码。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 移除桌面端和移动端分离的两套按钮行，统一为单行布局 - 参数设置改为弹窗模态框（齿轮按钮触发） - 尺寸选择器独立为固定宽度按钮，放置在提交键左侧 - 所有按钮统一 h-10 高度并居中对齐 - ButtonTooltip 添加 wrapper span 修复 overflow-hidden 裁剪问题 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 新增 useKeyboardVisible hook，兼容 visualViewport / focusin / window.resize 三种检测方式 - 键盘弹出时隐藏拖动条和参数栏，收起后带 fade-in-up 过渡动画 - 参数设置改为横向滚动 chip 样式，点击弹出底部 action sheet 选择 - 新增相机按钮（cameraInputRef），支持直接拍照上传 - 点击输入栏外部自动收起键盘 - 桌面端和移动端输入区域分离为独立渲染路径 - 新增 scrollbar-hide、animate-slide-up、pb-safe 等 CSS 工具类 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 在相机按钮前新增 + 号按钮，点击打开相册（fileInputRef） - 用 keyboardVisible 条件包裹两个按钮，键盘弹出时自动隐藏 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- useKeyboardVisible 改用 screen.height 作为稳定基准，避免 PWA 全屏切换时判断失准 - prompt 同步 effect 加入 isMobile 依赖，确保跨 640px 断点切换时内容正确恢复 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 为移动端/桌面端输入区域添加 Fragment key，强制 React 卸载重建而非就地协调 - isMobile 变化时重置 prevHeightRef，新元素跳过动画直接设置正确高度 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Owner
|
不好意思这个合并可能没有那么快，正在开发Agent模式，这几天Gemini炸麻了，前端被卡脖子了） |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概述
优化输入栏底部布局，改善桌面端按钮行结构，并针对移动端做了交互优化——键盘适配、参数选择、图片附件入口等。
改动内容
代码优化
useHintTooltiphook，统一 5 组重复的 tooltip 状态管理，减少约 90 行样板代码桌面端底部 UI 优化
移动端体验优化
useKeyboardVisiblehook，兼容 visualViewport / focusin / window.resize 三种键盘检测方式其他
测试
移动端浏览器兼容性验证： Edge、夸克浏览器、微信内置浏览器均表现正常。
涉及文件
src/components/InputBar.tsx— 主要改动src/hooks/useHintTooltip.ts— 新增src/index.css— 新增动画和工具类