桌面端 UI 增强与导航动画优化

StoreX UI 桌面 上传 修复
January 2, 2026
3 min read
By devshan

Table of Contents

This is a list of all the sections in this post. Click on any of them to jump to that section.

日期

2026-01-03

概述

本次更新完成了多项桌面端 UI 优化：上传菜单适配、托盘菜单完善、设置页面优化、拖拽上传文件夹支持、导航栏动画策略调整。

1. 上传菜单桌面端适配

问题

移动端的底部弹窗式上传菜单在桌面端体验不佳。

方案

桌面端改用下拉菜单，移动端保留底部弹窗。

实现

  • files_page.dart:
    • _showUploadMenu() 根据平台分发
    • _showDesktopUploadMenu() 使用 showMenu() 弹出下拉菜单
    • _showMobileUploadSheet() 保留原有底部弹窗
    • 新增 _UploadMenuItem 组件用于菜单项渲染
void _showUploadMenu() {
  if (_isDesktop) {
    _showDesktopUploadMenu();
    return;
  }
  _showMobileUploadSheet();
}

2. 系统托盘菜单完善

需求

  • 添加”上传文件”菜单项
  • 修复图标缺失问题

实现

  • tray_service.dart:

    • 新增 onUploadFile 回调
    • 菜单项：显示窗口 → 上传文件 → 退出
    • 修复图标路径：使用绝对路径指向 flutter_assets/assets/icon.png

  • home_page.dart:

    • 在 initState 中注册托盘上传回调
    • 回调触发时切换到文件页面并打开文件选择器
// tray_service.dart
final iconPath = '$exeDir/data/flutter_assets/assets/icon.png';
await trayManager.setIcon(iconPath);
 
// home_page.dart
TrayService().onUploadFile = _handleTrayUpload;

3. 设置页面桌面端优化

问题

设置页面在宽屏幕上内容过于分散，不美观。

方案

桌面端限制最大宽度 600px 并居中显示。

实现

  • settings_page.dart:
    • _buildDesktopBody(): 居中 + ConstrainedBox(maxWidth: 600)
    • _buildMobileBody(): 保持原有布局

4. 拖拽上传文件夹支持

原状态

拖拽文件夹时被跳过，仅支持文件。

方案

递归遍历文件夹，保持目录结构上传。

实现

  • files_page.dart:
    • _handleDropFiles(): 检测文件夹则调用递归方法
    • _enqueueDirectoryUpload(): 递归遍历，保持相对路径
int _enqueueDirectoryUpload(AppState appState, String dirPath, String dirName) {
  final dir = io.Directory(dirPath);
  final entities = dir.listSync(recursive: true, followLinks: false);
  for (final entity in entities) {
    if (entity is io.File) {
      final relativePath = entity.path.substring(dirPath.length);
      final fileName = '$dirName$relativePath'.replaceAll('\\', '/');
      appState.enqueueUpload(filePath: entity.path, fileName: fileName);
      count++;
    }
  }
  return count;
}

5. 导航栏动画策略调整

需求

  • 背景颜色还给图标（图标获得颜色，背景改为灰色）
  • 保留圆球移动时的形变效果
  • 桌面端点击按钮直接切换，不要滑动动画
  • 移动端保留左右滑动切换效果

实现

页面切换

void _goToPage(int index) {
  if (_isDesktop) {
    _pageController.jumpToPage(index);  // 直接切换
  } else {
    _pageController.animateToPage(...);  // 保留动画
  }
}

导航栏样式

元素修改前修改后
圆球背景对应颜色 (amber/blue/green/red)灰色 (grey[400]/grey[700])
选中图标白色对应颜色
未选中图标灰色灰色（不变）
形变动画有保留
// 背景灰色
final bgColor = isDark ? Colors.grey[700]! : Colors.grey[400]!;
 
// 图标获得对应的颜色
final iconColor = isActive ? _NavConfig.colors[i] : Colors.grey;

修改文件清单

文件修改内容
lib/ui/files_page.dart上传菜单适配、拖拽文件夹支持
lib/ui/home_page.dart托盘回调、导航动画策略
lib/ui/settings_page.dart桌面端居中布局
lib/core/services/tray_service.dart上传菜单项、图标路径修复

验证

  • flutter analyze: 通过（仅 3 个 info 级别提示，非本次引入）