vscode-workbench/.trae/documents/baidu-translate-mobile-support.md

百度翻译页面移动端适配方案

问题描述

百度翻译工具详情页（/baidu-translate）无法在移动端正常使用：

• 没有独立的移动端组件
• 现有页面仅依赖 CSS 媒体查询进行基础响应式调整
• 触摸操作体验不佳

用户选择

• 实现方式：独立移动端组件
• 移动端功能：全部功能（文本、语种识别、图片、语音翻译）

当前状态分析

现有文件结构

src/pages/BaiduTranslate/
├── BaiduTranslate.tsx      # 桌面端组件（1062行）
├── BaiduTranslate.css      # 样式文件（含响应式）
└── BaiduTranslateDetail.tsx # 详情页组件

桌面端路由（App.tsx）

<Route path="/baidu-translate" element={<BaiduTranslate />} />

移动端适配模式参考

项目中其他页面使用独立移动端组件模式：

<Route path="/api-detail/:id" element={isMobile ? <ApiDetailMobile /> : <ApiDetail />} />

实现方案

1. 创建移动端组件文件

新建文件：src/pages/BaiduTranslate/BaiduTranslateMobile.tsx

核心设计：

• 复用桌面端的核心逻辑（语言选项构建、翻译API调用、轮询机制）
• 针对移动端优化布局和交互
• 保留全部功能：文本翻译、语种识别、图片翻译、语音翻译
• 使用更紧凑的卡片式布局
• 语言选择器改为更适合触摸的下拉样式

移动端优化点：

• 翻译面板改为垂直堆叠布局
• 语言选择器增大触摸区域
• Tab 栏改为全宽按钮样式
• 历史记录改为可滑动的卡片列表
• 上传区域增大拖拽区域

2. 更新路由配置

文件：src/App.tsx

// 添加导入
const BaiduTranslateMobile = lazy(() => import("@/pages/BaiduTranslate/BaiduTranslateMobile"));

// 更新路由
<Route path="/baidu-translate" element={isMobile ? <BaiduTranslateMobile /> : <BaiduTranslate />} />

3. 移动端组件结构

// BaiduTranslateMobile.tsx 核心结构
const BaiduTranslateMobile: React.FC = () => {
  // 复用桌面端的核心状态和逻辑
  // - 语言选项构建
  // - 翻译API调用
  // - 轮询机制
  // - 历史记录管理

  return (
    <div className="tool-detail-page bt-mobile">
      {/* 简化的 Hero 区域 */}
      <div className="tool-detail-hero">
        <h1>百度翻译</h1>
        <p>文本翻译 · 语种识别 · 图片翻译 · 语音翻译</p>
      </div>

      {/* 平台选择器 - 移动端优化 */}
      <div className="translator-platform-selector">
        {/* 平台选择卡片 */}
      </div>

      {/* 使用统计 */}
      <div className="bt-usage-stats">
        {/* 今日/总使用次数 */}
      </div>

      {/* Tab 内容区域 */}
      <Tabs activeKey={activeTab} onChange={setActiveTab}>
        <TabPane tab="文本翻译">
          {/* 垂直堆叠的翻译面板 */}
        </TabPane>
        <TabPane tab="语种识别">
          {/* 语种识别 */}
        </TabPane>
        <TabPane tab="图片翻译">
          {/* 图片翻译 */}
        </TabPane>
        <TabPane tab="语音翻译">
          {/* 语音翻译 */}
        </TabPane>
      </Tabs>
    </div>
  );
};

4. 移动端样式优化

在现有 BaiduTranslate.css 中添加移动端专用样式：

/* 移动端专用样式 */
@media (max-width: 768px) {
  .bt-mobile .tool-detail-hero {
    min-height: 140px;
    padding: 24px 16px;
  }

  .bt-mobile .bt-panels {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bt-mobile .bt-toolbar {
    flex-direction: column;
    gap: 8px;
  }

  .bt-mobile .bt-lang-select {
    width: 100%;
  }

  .bt-mobile .bt-actions {
    flex-direction: column;
    gap: 8px;
  }

  .bt-mobile .bt-actions button {
    width: 100%;
  }

  .bt-mobile .platform-options {
    flex-direction: column;
  }

  .bt-mobile .bt-history-list {
    max-height: 200px;
    overflow-y: auto;
  }
}

涉及文件

文件	操作	说明
src/pages/BaiduTranslate/BaiduTranslateMobile.tsx	新建	移动端组件
src/App.tsx	修改	添加条件路由
src/pages/BaiduTranslate/BaiduTranslate.css	修改	添加移动端样式

验证步骤

1. 在浏览器中访问 /baidu-translate
2. 使用开发者工具模拟移动设备（< 768px）
3. 验证以下功能正常：
   • 文本翻译（输入、语言选择、翻译、复制、清除）
   • 语种识别
   • 图片翻译（上传、预览、翻译）
   • 语音翻译（上传、格式选择、翻译）
   • 翻译历史记录
   • 平台选择器
4. 验证桌面端功能不受影响
5. 验证响应式切换（调整窗口大小）

假设与决策

• 假设：移动端用户主要使用文本翻译功能，但保留全部功能以满足不同需求
• 决策：使用独立组件而非 MobileGuard，因为百度翻译功能在移动端可用，只需优化布局
• 决策：复用桌面端的核心逻辑代码，避免重复维护两套逻辑