# 项目文件命名优化计划

## 摘要
优化项目中不一致的文件命名，统一使用 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` 或直接重命名）
- 确保所有引用路径都同步更新
- 检查是否有其他文件引用了这些需要重命名的文件