feat(mobile): 输入框加号外置,图片/附件一层直达
- Dominant language
- TypeScript
- Stars
- 2.7k
- Forks
- 395
- Avg merge
- 21h 48m
- Merged PRs (30d)
- 776
Description
## 问题描述 / What happened
移动端输入框没有把「加号」这类快捷入口放在外面。发一张图片 / 一个附件,用户要先进入上层菜单、再选到对应动作,操作路径明显长于日常聊天软件的习惯(微信、元宝等都是输入框旁边一个加号直接展开)。
深度用户的原话是「层级比我聊天的时候多很多」——这不是找不到功能,而是**高频动作被放到了低频位置**。
期望:输入框行内(或紧邻输入框)放一个加号按钮,点开即是图片 / 拍照 / 文件的选择面板,一层直达,不再经过会话级菜单。
## 环境 / Environment
- Cindy 版本或 commit / version or commit:`main`(当前 HEAD)
- 平台与版本 / platform & OS version:iOS(Android 同样适用)
- 安装方式 / install method:dev / 内部版
## 复现步骤 / Steps to reproduce
1. 移动端打开任意会话。
2. 尝试发一张相册图片。
3. 观察需要点几次、经过哪些层级才能到相册选择器。
## 相关代码线索
- 输入行组件:`apps/mobile/src/session/MobileComposerInputRow.tsx`(已有 `toolbar` 插槽与 `ComposerToolbarSpacer` / `ComposerToolbarVoiceSlot`,加号可以挂在这条工具排上)
- 附件选择逻辑已经现成,不需要重写:`apps/mobile/src/session/useMobileLocalAttachments.ts` 暴露了 `addImages('library' | 'camera')`、`addDocument()`、`addPastedImages()`
- 待选附件的托盘:`apps/mobile/src/session/ComposerAttachmentTray.tsx`
- 会话主屏(当前入口挂载处):`apps/mobile/src/session/MessageRenderer.tsx`
- 图标用 `lucide-react-native` 的 `Plus`(`InteractionPanel.tsx` 里已有引用可参考用法)
所以这条基本是**接线 + 布局**:把已有的 `addImages` / `addDocument` 提到输入行的加号面板里,不需要改附件上传逻辑。
## 交付要求
**必读**:`docs/design-rules/DESIGN.md`(按钮尺寸、图标规格、触摸区)、`docs/dev-rules/mobile-development.md`。
- ⚠️ **不要碰会改变 runtime fingerprint 的文件**(`app.json`、`app.config.js`、`eas.json`、`apps/mobile/package.json`、`plugins/`、`modules/`)。本需求用现有 `expo-image-picker` / `expo-document-picker` 能力即可完成,不应引入新原生依赖。如果发现必须改,先在 issue 下说明,等把关人针对冷更明确确认后再动。
- Light + Dark 两种模式都要实现。
- 加号的触摸区、与语音按钮/发送键的间距按设计规范;语音按钮是 absolute 锚点渲染(见 `MobileComposerInputRow.tsx` 注释),注意别和它的定位打架。
- 提交前跑仓库根 `pnpm test:unit` + `pnpm --filter mobile run --if-present typecheck`。
- commit 带 `Signed-off-by`(`git commit -s`)。
## 验收标准
- [ ] 输入框行内可见加号按钮,一次点击展开图片 / 拍照 / 文件选项
- [ ] 选中的附件正常进入待发送托盘并可发出(复用现有链路,无回归)
- [ ] 与语音按钮、发送键的布局不冲突,录音态胶囊展开时不错位
- [ ] Light / Dark 双模式均已实现
- [ ] runtime fingerprint 相关文件零改动
- [ ] PR 附操作路径前后对比(截图或录屏)
Contributor guide
Research direction
Read docs/design-rules/DESIGN.md and docs/dev-rules/mobile-development.md, then trace the toolbar path from apps/mobile/src/session/MobileComposerInputRow.tsx through MessageRenderer.tsx and the existing attachment hooks and tray. Verify the plus menu reaches image, camera, and document selection, attachments enter the existing tray, both themes and voice/send layouts work, and run pnpm test:unit plus the mobile typecheck without changing fingerprint files.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100