vscode-workbench/.trae/documents/优化项目文件命名.md

项目文件命名优化计划

摘要

优化项目中不一致的文件命名，统一使用 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 中的导入和变量名

需要修改的内容：

// 原代码
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"));

// 原代码
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：更新路由中的组件引用

// 原代码
<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 导入

// 原代码
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 或直接重命名）
• 确保所有引用路径都同步更新
• 检查是否有其他文件引用了这些需要重命名的文件