Skip to content

fix: 优化移动端小屏适配体验#277

Open
blankPen wants to merge 4 commits intoabhi1693:masterfrom
blankPen:feat/pixel-style
Open

fix: 优化移动端小屏适配体验#277
blankPen wants to merge 4 commits intoabhi1693:masterfrom
blankPen:feat/pixel-style

Conversation

@blankPen
Copy link

变更说明

优化移动端小屏适配体验,提升在手机和平板设备上的使用感受。

修改内容

  1. DashboardShell.tsx

    • 优化移动端导航菜单按钮触摸区域(增大图标从 20px 到 24px)
    • 优化 OrgSwitcher 移动端宽度(从 140px 减少到 120px)
    • 改善溢出处理
  2. DataTable.tsx

    • 优化移动端表格水平滚动
    • 调整外边距确保在小屏幕上能正确滚动
  3. Button.tsx

    • 添加触摸优化类 touch-manipulation 减少触摸延迟
    • 添加 active:scale 提供按压反馈
  4. OrgSwitcher.tsx

    • 优化移动端宽度和文本截断处理
    • 确保组织名称在移动端能正确显示

测试说明

  • 移动端导航菜单可正常使用
  • 组织切换器在移动端正常显示
  • 表格在小屏设备上可水平滚动
  • 按钮在移动端有良好的触摸反馈

关联任务

  • 任务 ID: recvdK2WWbFzub

pengzhen02 added 4 commits March 13, 2026 21:08
## 变更内容
1. 新增像素边框效果 (pixel-border, pixel-border-light)
2. 新增霓虹发光效果 (neon-glow, neon-glow-text)
3. 新增像素装饰角 (pixel-corner)
4. 新增复古按钮效果 (retro-btn, pixel-btn)
5. 新增扫描线效果 (scanline-overlay, crt-effect)
6. 新增像素加载动画 (pixel-loader, pixel-loader-bounce)
7. 新增像素星星装饰 (pixel-star)
8. 新增卡片像素描边 (pixel-card)
9. 新增渐变发光边框 (gradient-glow)
10. 扩展 Tailwind 配置添加动画和阴影

## 使用方式
- 在组件中添加对应的 class 即可使用
- 保持现有色调不变,仅添加像素风格视觉效果
- DashboardShell: 优化移动端导航菜单按钮触摸区域和图标大小
- DashboardShell: 优化 OrgSwitcher 移动端宽度和溢出处理
- DataTable: 优化移动端表格水平滚动和外边距
- Button: 添加触摸优化 (touch-manipulation 和 active 缩放效果)
- OrgSwitcher: 优化移动端组织切换器宽度和文本截断
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant