190 lines
4.9 KiB
Markdown
190 lines
4.9 KiB
Markdown
# 百度翻译页面移动端适配方案
|
||
|
||
## 问题描述
|
||
|
||
百度翻译工具详情页（`/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，因为百度翻译功能在移动端可用，只需优化布局
|
||
- **决策**：复用桌面端的核心逻辑代码，避免重复维护两套逻辑
|