fmode-app-mirror

fmode-app-mirror · 时尚魔镜虚拟试衣

时尚魔镜（Fashion Magic Mirror）：随时随地虚拟试穿，让每一套穿搭都完美无瑕。 从 Nova 体系课程项目 2205106/FashionMagicMirror 提取的独立仓库。

项目定位

移动端虚拟试衣应用：用户可在「换装 / 上传 / 结果」流程中浏览服装图集、上传自己的照片并选择服装完成虚拟试穿，另含好友列表与个人中心。

技术栈

层	选型
框架	Angular 18 + Ionic 8（tabs 结构：tab1 主页 / tab2 好友 / tab3 个人 / mine·user-info）
轮播	Swiper 11（本地打包 src/assets/swiper，无外网依赖）
动效	Angular Animations（@angular/platform-browser/animations/async）
移动端壳	Capacitor 6（本仓仅 Web 发布，不构建原生平台）
后端	Parse（https://server.fmode.cn/parse，appId ncloudmaster；登录/注册/个人中心）
发布	静态产物上华为云 OBS + CDN（https://app.fmode.cn/dev/zC4W4aVTCo/，独立 Product ID）

本地运行

# Node 20.x 推荐
npm ci          # 优先按 package-lock 安装；如 peer deps 冲突改用 npm install --legacy-peer-deps
npm start       # ng serve → http://localhost:4200

路由：/tabs/tab1（主页·虚拟试衣）、/tabs/tab2（好友列表）、/tabs/tab3（个人）、/user（登录注册）、/mine（用户信息）。

构建发布

npx ng build --configuration production --base-href /dev/zC4W4aVTCo/   # 产物在 www/
cp www/index.html www/404.html            # SPA 路由 fallback，防刷新 404（上传前核对 base href）

上传 OBS（逐文件指定目标键并带 content-type，勿目录递归 cp）：

obsutil cp www/index.html obs://nova-cloud/dev/zC4W4aVTCo/index.html \
  -meta=contentType:text/html -acl=public-read -e=obs.cn-south-1.myhuaweicloud.com
# 其余 js/css/资产同理（js: application/javascript, css: text/css, png/jpg/svg: 对应 image 类型）

随后刷新 CDN（app.fmode.cn 域名组，目录刷新）：

node /opt/data/git-repos/fmode-app/scripts/refresh-cdn.js   # 刷 https://app.fmode.cn/dev/zC4W4aVTCo/

线上地址：https://app.fmode.cn/dev/zC4W4aVTCo/index.html

工程纪律（飞马 Harness）

• 凭据零暴露：AK/SK、sessionToken、Gogs token 一律不入库、不入日志、不入报告。
• 提交遵循 Conventional Commits（feat: / fix: / docs: / chore:）。
• 发布与 Git 归档是两个独立状态，分别验证、分别报告（git ls-remote + curl 逐 URL 验收）。
• 页面验收以无头浏览器截图 + console 输出为准，禁止伪造运行成功。

源仓致谢

本项目提取自 FmodeLabs Nova 体系学员项目 FashionMagicMirror（2205106），保留其原始业务代码与素材（根目录 01-07.png / guimo.png 为产品策划书插图），在此致谢原作者。README 与工程化配置按独立仓标准重写。