first commit

2026-09-11 01:45:04 +08:00
commit 0a8d60d87f
145 changed files with 40978 additions and 0 deletions
@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "navigation-bar": "/components/navigation-bar/navigation-bar",
+    "empty-state": "/components/empty-state/empty-state"
+  }
+}
@@ -0,0 +1,126 @@
+import { request } from '../../utils/request'
+import { AiRecommendResult, ClothesItem } from '../../types/models'
+
+Page({
+  data: {
+    state: 'scene' as 'scene' | 'generating' | 'result' | 'empty',
+    showSceneSheet: true,
+    sceneType: 1,
+    scene: '',
+    result: null as AiRecommendResult | null,
+    clothes: [] as ClothesItem[],
+    generating: false,
+  },
+
+  noop() {},
+
+  selectDaily() {
+    this.setData({ sceneType: 1 })
+  },
+
+  selectCustom() {
+    this.setData({ sceneType: 2 })
+  },
+
+  onSceneInput(e: WechatMiniprogram.Input) {
+    this.setData({ scene: e.detail.value })
+  },
+
+  onSkipScene() {
+    this.setData({ showSceneSheet: false })
+    this.startGenerate(1, '')
+  },
+
+  onStartGenerate() {
+    this.setData({ showSceneSheet: false })
+    this.startGenerate(this.data.sceneType, this.data.scene)
+  },
+
+  startGenerate(sceneType: number, scene: string) {
+    if (this.data.generating) return
+    wx.showModal({
+      title: 'AI 穿搭推荐',
+      content: '本次将消耗 1 次 AI 推荐额度，生成后可保存到我的穿搭',
+      confirmText: '开始生成',
+      cancelText: '取消',
+      success: (res) => {
+        if (res.confirm) this.doGenerate(sceneType, scene)
+      },
+    })
+  },
+
+  doGenerate(sceneType: number, scene: string) {
+    if (this.data.generating) return
+    this.setData({ state: 'generating', generating: true })
+
+    const body: Record<string, any> = { scene_type: sceneType }
+    if (sceneType === 2 && scene) body.scene = scene
+
+    request<AiRecommendResult>({ url: '/ai-recommend', method: 'POST', data: body, showError: false })
+      .then(async (res) => {
+        const clothes = await Promise.all(
+          res.outfit_item.map(async (it) => {
+            try {
+              return await request<ClothesItem>({ url: `/clothes/${it.clothes_uuid}`, showError: false })
+            } catch (e) {
+              return { clothes_uuid: it.clothes_uuid } as ClothesItem
+            }
+          })
+        )
+        this.setData({ result: res, clothes, state: 'result', generating: false })
+      })
+      .catch((e: any) => {
+        this.setData({ generating: false })
+        const code = e && e.code
+        if (code === 90400) {
+          this.setData({ state: 'empty' })
+        } else if (code === 90401) {
+          this.setData({ state: 'scene', showSceneSheet: true })
+          this.showLimitModal()
+        } else if (code === 10003) {
+          wx.showToast({ title: '正在生成中，请稍候', icon: 'none' })
+          this.setData({ state: 'scene', showSceneSheet: true })
+        } else {
+          this.setData({ state: 'scene', showSceneSheet: true })
+        }
+      })
+  },
+
+  showLimitModal() {
+    wx.showModal({
+      title: 'AI 推荐额度不足',
+      content: '购买额度包后可继续生成 AI 穿搭推荐',
+      confirmText: '去购买',
+      cancelText: '取消',
+      success: (res) => {
+        if (res.confirm) wx.navigateTo({ url: '/pages/mall/mall' })
+      },
+    })
+  },
+
+  onSave() {
+    if (!this.data.result) return
+    request({
+      url: '/ai-recommend/save',
+      method: 'POST',
+      data: { outfit_uuid: this.data.result.outfit_uuid },
+    })
+      .then(() => {
+        wx.showToast({ title: '已保存到我的穿搭', icon: 'success' })
+        setTimeout(() => {
+          wx.redirectTo({
+            url: `/pages/outfit-detail/outfit-detail?uuid=${this.data.result!.outfit_uuid}&owner=1`,
+          })
+        }, 500)
+      })
+      .catch(() => {})
+  },
+
+  onReroll() {
+    this.startGenerate(this.data.sceneType, this.data.scene)
+  },
+
+  onGoUpload() {
+    wx.navigateTo({ url: '/pages/upload/upload' })
+  },
+})
@@ -0,0 +1,90 @@
+<view class="page rec-page">
+  <navigation-bar title="AI 穿搭推荐" />
+
+  <!-- 生成中 -->
+  <view wx:if="{{state === 'generating'}}" class="generating">
+    <view class="gen-ani">
+      <view class="icon icon-shirt gen-icon"></view>
+      <view class="gen-ring"></view>
+    </view>
+    <view class="gen-title">AI 正在为你搭配…</view>
+    <view class="gen-desc">结合今日运势与你的衣橱</view>
+  </view>
+
+  <!-- 衣橱为空 -->
+  <empty-state
+    wx:elif="{{state === 'empty'}}"
+    icon="icon-hanger"
+    title="还没有可用衣物"
+    desc="先上传几件处理成功的衣物吧"
+    buttonText="去上传"
+    bind:action="onGoUpload"
+  />
+
+  <!-- 结果页 -->
+  <scroll-view wx:elif="{{state === 'result'}}" scroll-y class="scroll-body">
+    <view class="card result-cover">
+      <view class="rc-item rc-{{index}}" wx:for="{{clothes}}" wx:key="clothes_uuid" wx:if="{{index < 5}}">
+        <image wx:if="{{item.processed_image}}" class="rc-img" src="{{item.processed_image}}" mode="aspectFit" />
+        <view wx:else class="icon icon-hanger rc-placeholder"></view>
+      </view>
+    </view>
+
+    <view class="card result-info">
+      <view class="ri-title">{{result.outfit_name}}</view>
+      <view class="ri-desc">{{result.outfit_desc}}</view>
+      <view class="tag-row">
+        <text wx:if="{{result.scene}}" class="tag tag-gray">{{result.scene}}</text>
+        <text class="tag tag-indigo">AI 推荐</text>
+      </view>
+
+      <view class="items-title">推荐单品</view>
+      <scroll-view scroll-x class="items-scroll" show-scrollbar="{{false}}">
+        <view class="items-row">
+          <view class="item-chip" wx:for="{{clothes}}" wx:key="clothes_uuid">
+            <image wx:if="{{item.processed_image}}" class="item-img" src="{{item.processed_image}}" mode="aspectFill" />
+            <view wx:else class="item-img item-img-empty"><view class="icon icon-hanger"></view></view>
+            <text class="item-name">{{item.name || '未命名'}}</text>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+
+    <view class="footer">
+      <view class="btn btn-primary" bindtap="onSave">保存到我的穿搭</view>
+      <view class="btn btn-outline reroll" bindtap="onReroll">换一套</view>
+      <view class="reroll-tip">换一套将再消耗 1 次推荐额度</view>
+    </view>
+  </scroll-view>
+
+  <!-- 场景选择弹窗 -->
+  <view wx:if="{{showSceneSheet}}" class="mask" bindtap="onSkipScene">
+    <view class="sheet" catchtap="noop">
+      <view class="sheet-grabber"></view>
+      <view class="sheet-title">选择推荐场景</view>
+
+      <view class="scene-card {{sceneType === 1 ? 'active' : ''}}" bindtap="selectDaily">
+        <view class="scene-name">每日推荐</view>
+        <view class="scene-desc">按今日运势与衣橱自动搭配</view>
+        <view wx:if="{{sceneType === 1}}" class="icon icon-check scene-check"></view>
+      </view>
+
+      <view class="scene-card {{sceneType === 2 ? 'active' : ''}}" bindtap="selectCustom">
+        <view class="scene-name">自定义场景</view>
+        <view class="scene-desc">描述你想去的场合</view>
+        <view wx:if="{{sceneType === 2}}" class="icon icon-check scene-check"></view>
+      </view>
+
+      <input
+        wx:if="{{sceneType === 2}}"
+        class="input scene-input"
+        value="{{scene}}"
+        bindinput="onSceneInput"
+        placeholder="例如：海边度假、周一例会、初次约会"
+      />
+
+      <view class="btn btn-primary sheet-btn" bindtap="onStartGenerate">开始生成（消耗 1 次推荐额度）</view>
+      <view class="sheet-skip" bindtap="onSkipScene">跳过，使用每日推荐</view>
+    </view>
+  </view>
+</view>
@@ -0,0 +1,281 @@
+.rec-page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.scroll-body {
+  flex: 1;
+  height: 0;
+}
+
+/* 生成中 */
+.generating {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 64rpx;
+}
+
+.gen-ani {
+  position: relative;
+  width: 160rpx;
+  height: 160rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gen-icon {
+  width: 72rpx;
+  height: 72rpx;
+  color: #007AFF;
+}
+
+.gen-ring {
+  position: absolute;
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 50%;
+  border: 4rpx solid #E5E5EA;
+  border-top-color: #007AFF;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.gen-title {
+  margin-top: 48rpx;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #000;
+}
+
+.gen-desc {
+  font-size: 24rpx;
+  color: #8E8E93;
+  margin-top: 12rpx;
+}
+
+/* 结果封面 */
+.result-cover {
+  margin: 24rpx;
+  height: 420rpx;
+  position: relative;
+  overflow: hidden;
+}
+
+.rc-item {
+  position: absolute;
+  width: 180rpx;
+  height: 240rpx;
+  background: #F8F8FA;
+  border-radius: 20rpx;
+  border: 1rpx solid #E5E5EA;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.rc-0 { left: 30rpx; top: 70rpx; transform: rotate(-5deg); }
+.rc-1 { left: 130rpx; top: 130rpx; transform: rotate(3deg); }
+.rc-2 { left: 240rpx; top: 60rpx; transform: rotate(6deg); }
+.rc-3 { left: 350rpx; top: 140rpx; transform: rotate(-3deg); }
+.rc-4 { left: 460rpx; top: 80rpx; transform: rotate(8deg); }
+
+.rc-img {
+  width: 100%;
+  height: 100%;
+}
+
+.rc-placeholder {
+  width: 64rpx;
+  height: 64rpx;
+  color: #C7C7CC;
+}
+
+/* 结果信息 */
+.result-info {
+  margin: 0 24rpx 24rpx;
+}
+
+.ri-title {
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #000;
+}
+
+.ri-desc {
+  font-size: 28rpx;
+  color: #3C3C43;
+  margin-top: 16rpx;
+  line-height: 1.6;
+}
+
+.tag-row {
+  display: flex;
+  gap: 12rpx;
+  margin-top: 20rpx;
+}
+
+.items-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #000;
+  margin-top: 32rpx;
+}
+
+.items-scroll {
+  margin-top: 20rpx;
+  white-space: nowrap;
+}
+
+.items-row {
+  display: inline-flex;
+}
+
+.item-chip {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 140rpx;
+  margin-right: 20rpx;
+}
+
+.item-img {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 20rpx;
+  background: #F2F2F7;
+}
+
+.item-img-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #C7C7CC;
+}
+
+.item-img-empty .icon {
+  width: 56rpx;
+  height: 56rpx;
+}
+
+.item-name {
+  font-size: 20rpx;
+  color: #8E8E93;
+  margin-top: 8rpx;
+  max-width: 140rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.footer {
+  padding: 16rpx 24rpx;
+  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
+}
+
+.reroll {
+  margin-top: 20rpx;
+}
+
+.reroll-tip {
+  text-align: center;
+  font-size: 22rpx;
+  color: #8E8E93;
+  margin-top: 16rpx;
+}
+
+/* 场景弹窗 */
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 200;
+}
+
+.sheet {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #fff;
+  border-radius: 32rpx 32rpx 0 0;
+  padding: 20rpx 32rpx;
+  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
+}
+
+.sheet-grabber {
+  width: 72rpx;
+  height: 10rpx;
+  border-radius: 5rpx;
+  background: #E5E5EA;
+  margin: 0 auto 24rpx;
+}
+
+.sheet-title {
+  font-size: 34rpx;
+  font-weight: 600;
+  color: #000;
+  text-align: center;
+  margin-bottom: 24rpx;
+}
+
+.scene-card {
+  position: relative;
+  border: 2rpx solid #E5E5EA;
+  border-radius: 24rpx;
+  padding: 28rpx;
+  margin-bottom: 20rpx;
+}
+
+.scene-card.active {
+  border-color: #007AFF;
+  background: rgba(0, 122, 255, 0.04);
+}
+
+.scene-name {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #000;
+}
+
+.scene-desc {
+  font-size: 24rpx;
+  color: #8E8E93;
+  margin-top: 8rpx;
+}
+
+.scene-check {
+  position: absolute;
+  top: 28rpx;
+  right: 28rpx;
+  width: 36rpx;
+  height: 36rpx;
+  color: #007AFF;
+}
+
+.scene-input {
+  margin-bottom: 20rpx;
+}
+
+.sheet-btn {
+  width: 100%;
+}
+
+.sheet-skip {
+  text-align: center;
+  font-size: 26rpx;
+  color: #8E8E93;
+  margin-top: 20rpx;
+  padding: 12rpx;
+}