126 lines
4.8 KiB
Markdown
126 lines
4.8 KiB
Markdown
# 项目文件命名优化计划
|
|
|
|
## 摘要
|
|
优化项目中不一致的文件命名，统一使用 PascalCase 规范，并确保所有页面跳转路由正常工作。
|
|
|
|
## 当前状态分析
|
|
|
|
### 存在的问题
|
|
|
|
| 问题 | 文件位置 | 当前命名 | 目标命名 |
|
|
|------|----------|----------|----------|
|
|
| 主文件使用小写 | `Profile/index.tsx` | `index.tsx` | `Profile.tsx` |
|
|
| 子文件使用小写 | `Profile/email.tsx` | `email.tsx` | `ProfileEmail.tsx` |
|
|
| 子文件使用小写 | `Profile/phone.tsx` | `phone.tsx` | `ProfilePhone.tsx` |
|
|
| 子文件使用 kebab-case | `Profile/change-password.tsx` | `change-password.tsx` | `ProfileChangePassword.tsx` |
|
|
| CSS 文件使用小写 | `Settings/settings.css` | `settings.css` | `Settings.css` |
|
|
| 组件变量不一致 | `App.tsx` | `PointsPage`, `CoinsPage` 等 | `Points`, `Coins` 等 |
|
|
|
|
## 实施步骤
|
|
|
|
### 步骤 1：重命名 Profile 目录文件
|
|
|
|
| 原文件路径 | 新文件路径 |
|
|
|------------|------------|
|
|
| `src/pages/Profile/index.tsx` | `src/pages/Profile/Profile.tsx` |
|
|
| `src/pages/Profile/email.tsx` | `src/pages/Profile/ProfileEmail.tsx` |
|
|
| `src/pages/Profile/phone.tsx` | `src/pages/Profile/ProfilePhone.tsx` |
|
|
| `src/pages/Profile/change-password.tsx` | `src/pages/Profile/ProfileChangePassword.tsx` |
|
|
|
|
### 步骤 2：重命名 Settings 目录 CSS 文件
|
|
|
|
| 原文件路径 | 新文件路径 |
|
|
|------------|------------|
|
|
| `src/pages/Settings/settings.css` | `src/pages/Settings/Settings.css` |
|
|
|
|
### 步骤 3：更新 App.tsx 中的导入和变量名
|
|
|
|
需要修改的内容：
|
|
|
|
```tsx
|
|
// 原代码
|
|
const Profile = lazy(() => import("@/pages/Profile/index"));
|
|
const ProfileEmail = lazy(() => import("@/pages/Profile/email"));
|
|
const ProfilePhone = lazy(() => import("@/pages/Profile/phone"));
|
|
const ProfileChangePassword = lazy(() => import("@/pages/Profile/change-password"));
|
|
|
|
// 修改后
|
|
const Profile = lazy(() => import("@/pages/Profile/Profile"));
|
|
const ProfileEmail = lazy(() => import("@/pages/Profile/ProfileEmail"));
|
|
const ProfilePhone = lazy(() => import("@/pages/Profile/ProfilePhone"));
|
|
const ProfileChangePassword = lazy(() => import("@/pages/Profile/ProfileChangePassword"));
|
|
```
|
|
|
|
```tsx
|
|
// 原代码
|
|
const PointsPage = lazy(() => import("@/pages/Wallet/Points"));
|
|
const CoinsPage = lazy(() => import("@/pages/Wallet/Coins"));
|
|
const InvitePage = lazy(() => import("@/pages/Wallet/Invite"));
|
|
const RechargePage = lazy(() => import("@/pages/Wallet/Recharge"));
|
|
|
|
// 修改后
|
|
const Points = lazy(() => import("@/pages/Wallet/Points"));
|
|
const Coins = lazy(() => import("@/pages/Wallet/Coins"));
|
|
const Invite = lazy(() => import("@/pages/Wallet/Invite"));
|
|
const Recharge = lazy(() => import("@/pages/Wallet/Recharge"));
|
|
```
|
|
|
|
### 步骤 4：更新路由中的组件引用
|
|
|
|
```tsx
|
|
// 原代码
|
|
<Route path="/wallet/points" element={<MobileGuard><PointsPage /></MobileGuard>} />
|
|
<Route path="/wallet/coins" element={<MobileGuard><CoinsPage /></MobileGuard>} />
|
|
<Route path="/wallet/coins/recharge" element={<MobileGuard><RechargePage /></MobileGuard>} />
|
|
<Route path="/wallet/invite" element={<MobileGuard><InvitePage /></MobileGuard>} />
|
|
|
|
// 修改后
|
|
<Route path="/wallet/points" element={<MobileGuard><Points /></MobileGuard>} />
|
|
<Route path="/wallet/coins" element={<MobileGuard><Coins /></MobileGuard>} />
|
|
<Route path="/wallet/coins/recharge" element={<MobileGuard><Recharge /></MobileGuard>} />
|
|
<Route path="/wallet/invite" element={<MobileGuard><Invite /></MobileGuard>} />
|
|
```
|
|
|
|
### 步骤 5：更新 Settings.tsx 中的 CSS 导入
|
|
|
|
```tsx
|
|
// 原代码
|
|
import "./settings.css";
|
|
|
|
// 修改后
|
|
import "./Settings.css";
|
|
```
|
|
|
|
## 涉及的文件清单
|
|
|
|
| 文件 | 操作 |
|
|
|------|------|
|
|
| `src/pages/Profile/index.tsx` | 重命名为 `Profile.tsx` |
|
|
| `src/pages/Profile/email.tsx` | 重命名为 `ProfileEmail.tsx` |
|
|
| `src/pages/Profile/phone.tsx` | 重命名为 `ProfilePhone.tsx` |
|
|
| `src/pages/Profile/change-password.tsx` | 重命名为 `ProfileChangePassword.tsx` |
|
|
| `src/pages/Settings/settings.css` | 重命名为 `Settings.css` |
|
|
| `src/pages/Settings/Settings.tsx` | 修改 CSS 导入路径 |
|
|
| `src/App.tsx` | 修改变量名和导入路径 |
|
|
|
|
## 验证步骤
|
|
|
|
1. 运行 TypeScript 编译检查：`npx tsc --noEmit`
|
|
2. 启动开发服务器：`npm run dev`
|
|
3. 测试以下页面跳转是否正常：
|
|
- `/profile` → 个人资料主页
|
|
- `/profile/email` → 邮箱设置
|
|
- `/profile/phone` → 手机设置
|
|
- `/profile/change-password` → 修改密码
|
|
- `/settings` → 系统设置
|
|
- `/wallet/points` → 积分页面
|
|
- `/wallet/coins` → 金币页面
|
|
- `/wallet/invite` → 邀请页面
|
|
- `/wallet/coins/recharge` → 充值页面
|
|
|
|
## 注意事项
|
|
|
|
- 重命名文件时使用 Git 保留历史记录（`git mv` 或直接重命名）
|
|
- 确保所有引用路径都同步更新
|
|
- 检查是否有其他文件引用了这些需要重命名的文件
|