diy-cloth1

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. 安装依赖

npm install

3. 启动开发服务器

npm start

应用将在 http://localhost:4200 启动

4. 构建生产版本

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 文件了解详情

联系方式

如有问题或建议，请通过以下方式联系：

• 创建 Issue
• 发送邮件至项目维护者

---

注意: 这是一个演示项目，部分功能使用模拟数据。在生产环境中使用前，请确保集成真实的后端API服务。 # y��v�f�e