makecindy / makecindy/cindy

feat(mobile): 输入框加号外置,图片/附件一层直达

Open
#898 4 comments 0 reactions 0 assignees View on GitHub
enhancement good first issue
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.