feat: PLANNING体系首版（00路线图/02任务总表/03执行协议/I-03/I-04/registry42口径）+M1止血交付

2026-09-12 14:25:25 +08:00
commit 39af400fc8
472 changed files with 36277 additions and 0 deletions
@@ -0,0 +1,189 @@
+# 百度翻译页面移动端适配方案
+
+## 问题描述
+
+百度翻译工具详情页（`/baidu-translate`）无法在移动端正常使用：
+- 没有独立的移动端组件
+- 现有页面仅依赖 CSS 媒体查询进行基础响应式调整
+- 触摸操作体验不佳
+
+## 用户选择
+
+- **实现方式**：独立移动端组件
+- **移动端功能**：全部功能（文本、语种识别、图片、语音翻译）
+
+## 当前状态分析
+
+### 现有文件结构
+```
+src/pages/BaiduTranslate/
+├── BaiduTranslate.tsx      # 桌面端组件（1062行）
+├── BaiduTranslate.css      # 样式文件（含响应式）
+└── BaiduTranslateDetail.tsx # 详情页组件
+```
+
+### 桌面端路由（App.tsx）
+```tsx
+<Route path="/baidu-translate" element={<BaiduTranslate />} />
+```
+
+### 移动端适配模式参考
+项目中其他页面使用独立移动端组件模式：
+```tsx
+<Route path="/api-detail/:id" element={isMobile ? <ApiDetailMobile /> : <ApiDetail />} />
+```
+
+## 实现方案
+
+### 1. 创建移动端组件文件
+
+**新建文件**：`src/pages/BaiduTranslate/BaiduTranslateMobile.tsx`
+
+**核心设计**：
+- 复用桌面端的核心逻辑（语言选项构建、翻译API调用、轮询机制）
+- 针对移动端优化布局和交互
+- 保留全部功能：文本翻译、语种识别、图片翻译、语音翻译
+- 使用更紧凑的卡片式布局
+- 语言选择器改为更适合触摸的下拉样式
+
+**移动端优化点**：
+- 翻译面板改为垂直堆叠布局
+- 语言选择器增大触摸区域
+- Tab 栏改为全宽按钮样式
+- 历史记录改为可滑动的卡片列表
+- 上传区域增大拖拽区域
+
+### 2. 更新路由配置
+
+**文件**：`src/App.tsx`
+
+```tsx
+// 添加导入
+const BaiduTranslateMobile = lazy(() => import("@/pages/BaiduTranslate/BaiduTranslateMobile"));
+
+// 更新路由
+<Route path="/baidu-translate" element={isMobile ? <BaiduTranslateMobile /> : <BaiduTranslate />} />
+```
+
+### 3. 移动端组件结构
+
+```tsx
+// 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` 中添加移动端专用样式：
+
+```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，因为百度翻译功能在移动端可用，只需优化布局
+- **决策**：复用桌面端的核心逻辑代码，避免重复维护两套逻辑