doodle-mini/miniprogram/mathPages/REFACTOR_PLAN.md

mathPages 目录重构方案

当前目录结构

mathPages/
├── addition/           # 页面
├── compare/            # 页面
├── countingSelect/     # 页面
├── countMatch/         # 页面
├── missingNumber/      # 页面
├── numberDecompose/    # 页面
├── numberFind/         # 页面
├── assets/             # 静态资源
├── common/             # 公共文件（mixin等）
├── components/         # 组件
└── service/            # 服务（Draw相关）

问题

• 页面和服务放在同一级，不易区分
• 目录较多，查找页面不够直观
• 公共服务散落在不同目录

推荐方案：使用 shared/ 目录

重构后的目录结构

mathPages/
├── addition/           # 页面
├── compare/            # 页面
├── countingSelect/     # 页面
├── countMatch/         # 页面
├── missingNumber/      # 页面
├── numberDecompose/    # 页面
├── numberFind/         # 页面
├── assets/             # 静态资源
└── shared/             # 公共服务目录（新建）
    ├── service/        # 服务（从 service/ 移动）
    ├── common/         # 公共文件（从 common/ 移动）
    └── components/     # 组件（从 components/ 移动）

优点

1. ✅ 语义清晰：shared/ 明确表示共享代码
2. ✅ 结构清晰：页面和公共服务分离，一目了然
3. ✅ 易于维护：所有公共服务集中在一个目录下
4. ✅ 符合常见实践：shared/ 在很多项目中都有使用
5. ✅ 扩展性好：未来可以添加 shared/utils/、shared/types/ 等

需要修改的导入路径

页面文件中的导入

之前：

import AdditionDraw from '../service/additionDraw';
import { createMathPage } from '../common/mathPageMixin';
import MathBottomButtons from '../components/math-bottom-buttons/math-bottom-buttons';

之后：

import AdditionDraw from '../shared/service/additionDraw';
import { createMathPage } from '../shared/common/mathPageMixin';
import MathBottomButtons from '../../components/math-bottom-buttons/math-bottom-buttons';

service 文件之间的导入

之前：

import { BaseDrawService } from './baseMathDraw';

之后：

import { BaseDrawService } from './baseMathDraw';
// 或者如果跨目录
import { BaseDrawService } from '../baseMathDraw';

备选方案：使用 lib/ 目录

如果不想用 shared/，也可以考虑 lib/：

mathPages/
├── addition/
├── compare/
├── ...
├── assets/
└── lib/              # 公共服务目录
    ├── service/
    ├── common/
    └── components/

优点：

• 简洁
• 表示库文件

缺点：

• lib/ 通常用于第三方库或编译产物
• 语义上不如 shared/ 清晰

备选方案：使用 core/ 目录

mathPages/
├── addition/
├── compare/
├── ...
├── assets/
└── core/             # 核心功能目录
    ├── service/
    ├── common/
    └── components/

优点：

• 表示核心功能

缺点：

• core/ 通常用于框架核心，不太适合业务代码

迁移步骤

1. 创建 shared/ 目录
2. 移动目录
   • service/ → shared/service/
   • common/ → shared/common/
   • components/ → shared/components/
3. 批量更新导入路径
   • 所有页面文件中的 ../service/ → ../shared/service/
   • 所有页面文件中的 ../common/ → ../shared/common/
   • 所有页面文件中的 ../components/ → ../shared/components/
   • 检查 shared/ 内部文件的相互导入
4. 更新配置文件
   • 检查是否有路径配置需要更新（如 app.json 中的组件路径）
5. 测试验证
   • 确保所有页面功能正常
   • 确保导入路径正确

推荐使用 shared/ 目录

综合考虑，推荐使用 shared/ 目录，因为：

• 语义最清晰
• 符合常见实践
• 易于理解和维护