# FashionCraft - 时尚设计应用 一个基于Angular的时尚设计应用，包含3D设计、虚拟试衣、社区分享等功能。 ## 功能特性 ### 🎨 主要功能 - **用户认证系统** - 登录/注册，用户管理 - **首页展示** - 轮播图、热门作品、AI推荐 - **3D设计中心** - 颜色选择、部位设计、3D预览 - **虚拟试衣间** - 照片上传、AI试衣、多角度预览 - **创作社区** - 作品发布、点赞评论、搜索筛选 - **个人中心** - 作品管理、设置配置、统计信息 ### 🛠 技术栈 - **Frontend**: Angular 17 (Standalone Components) - **Language**: TypeScript - **Styling**: SCSS with custom design system - **State Management**: RxJS Observables - **HTTP Client**: Angular HttpClient - **Storage**: LocalStorage for user sessions ## 项目结构 ``` diy-cloth/ ├── src/ │ ├── app/ │ │ ├── components/ # 组件 │ │ │ ├── auth/ # 认证组件 │ │ │ ├── home/ # 首页组件 │ │ │ ├── design-center/ # 设计中心组件 │ │ │ ├── fitting-room/ # 试衣间组件 │ │ │ ├── community/ # 社区组件 │ │ │ ├── profile/ # 个人中心组件 │ │ │ └── shared/ # 共享组件 │ │ ├── services/ # 服务 │ │ ├── models/ # 数据模型 │ │ ├── guards/ # 路由守卫 │ │ └── app.routes.ts # 路由配置 │ ├── styles.scss # 全局样式 │ └── index.html # 主HTML文件 ├── angular.json # Angular配置 ├── package.json # 项目依赖 └── tsconfig.json # TypeScript配置 ``` ## 安装和运行 ### 1. 环境要求 - Node.js (推荐版本 >= 16) - npm 或 yarn ### 2. 安装依赖 ```bash npm install ``` ### 3. 启动开发服务器 ```bash npm start ``` 应用将在 `http://localhost:4200` 启动 ### 4. 构建生产版本 ```bash npm run build ``` 构建文件将输出到 `dist/` 目录 ## 开发指南 ### 组件架构 - 所有组件都使用 Angular Standalone Components - 组件采用响应式设计，适配移动端和桌面端 - 使用 SCSS 进行样式管理，包含完整的设计系统 ### 状态管理 - 使用 RxJS Observables 管理应用状态 - AuthService 管理用户认证状态 - NotificationService 处理全局通知 - CommunityService 管理社区相关数据 ### 路由配置 - 使用 Angular Router 进行页面导航 - 实现路由守卫保护需要认证的页面 - 支持懒加载以优化性能 ### 样式系统 - 统一的颜色方案和设计规范 - 响应式网格布局 - 丰富的动画效果和过渡 - 美观的渐变和阴影效果 ## API 集成 项目预留了完整的API集成接口： ### 认证API - `POST /api/auth/login` - 用户登录 - `POST /api/auth/register` - 用户注册 - `POST /api/auth/logout` - 用户退出 ### 社区API - `GET /api/community/popular` - 获取热门作品 - `POST /api/community/works` - 发布作品 - `PUT /api/community/works/:id/like` - 点赞作品 ### 用户API - `GET /api/user/profile` - 获取用户资料 - `PUT /api/user/profile` - 更新用户资料 - `GET /api/user/works` - 获取用户作品 ## 部署说明 ### 开发环境 1. 确保后端API服务运行在正确的端口 2. 更新 `src/app/services/` 中的API_BASE_URL 3. 运行 `npm start` 启动开发服务器 ### 生产环境 1. 配置生产环境的API URL 2. 运行 `npm run build` 构建项目 3. 将 `dist/` 目录部署到Web服务器 ## 贡献指南 1. Fork 本项目 2. 创建特性分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 创建 Pull Request ## 已知问题 - 部分linter错误是因为缺少Angular依赖包，运行`npm install`后会自动解决 - 3D预览功能需要集成真实的3D渲染库 - AI试衣功能需要对接实际的AI服务 - 图片上传需要配置文件存储服务 ## 许可证 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 ## 联系方式 如有问题或建议，请通过以下方式联系： - 创建 Issue - 发送邮件至项目维护者 --- **注意**: 这是一个演示项目，部分功能使用模拟数据。在生产环境中使用前，请确保集成真实的后端API服务。 # yvfe