交易表单布局优化效果
❌ 旧布局(需要上下滚动)
交易类型
收入 | 支出
分类
分类选择...
金额
金额输入框
货币
货币选择
日期
日期选择器
状态
状态选择
项目
项目输入
付款人
付款人选择
收款人
收款人选择
数量
数量输入
标签
标签选择
描述
描述文本框
✅ 新布局(充分利用横向空间)
交易类型
💸 支出 | 💰 收入
金额
¥ 1,000.00
货币
¥ CNY | $ USD | ฿ THB | K MMK
分类(平铺按钮)
💰 工资
🎁 奖金
💼 投资
+ 添加分类
日期
2024-01-07
状态
✅ 已完成 | ⏳ 待处理 | ❌ 已取消
项目
项目名称(可选)
付款人
选择或输入
收款人
选择或输入
数量
1
单价
自动计算
标签
选择标签...
描述
描述信息(可选)
📊 优化效果总结
Modal宽度:
从 600px 增加到 1200px,充分利用屏幕空间
布局方式:
从单列垂直布局改为多列横向布局
行数优化:
从 12+ 行减少到 5 行,大幅减少滚动
字段分组:
第1行:交易类型、金额、货币(核心字段)
第2行:分类选择(平铺展示)
第3行:日期、状态、项目
第4行:付款人、收款人、数量、单价
第5行:标签、描述
用户体验:
所有字段一屏可见,无需滚动,操作更高效