diff --git a/_codex_tabs_verify.png b/_codex_tabs_verify.png
deleted file mode 100644
index 1f28e94..0000000
Binary files a/_codex_tabs_verify.png and /dev/null differ
diff --git a/_codex_toolbox_verify.png b/_codex_toolbox_verify.png
deleted file mode 100644
index 4da6469..0000000
Binary files a/_codex_toolbox_verify.png and /dev/null differ
diff --git a/api/config.js b/api/config.js
index fe6fd90..478537b 100644
--- a/api/config.js
+++ b/api/config.js
@@ -45,6 +45,11 @@ export default {
   INTERFACE_POINT_GET_LOG_LIST: '/point/loglist', // 点数账单流水
   INTERFACE_POINT_POST_CREATE_ORDER: '/point/createorder', // 创建充值订单
   INTERFACE_POINT_GET_ORDER_STATUS: '/point/orderstatus', // 订单状态轮询
+  INTERFACE_POINT_GET_EARN_CONFIG: '/point/earnconfig', // 积分获取页配置（签到 + 邀请 + 看广告）
+  INTERFACE_POINT_POST_CHECKIN: '/point/checkin', // 每日签到领取积分
+  INTERFACE_POINT_POST_AD_TICKET: '/point/adticket', // 看广告前领取一次性凭证
+  INTERFACE_POINT_POST_AD_REWARD: '/point/adreward', // 看完广告发放积分
+  INTERFACE_POINT_POST_AD_CANCEL: '/point/adcancel', // 广告未看完，作废凭证
   INTERFACE_BILLING_GET_CONFIG: '/billing/config', // 产品计费配置
   INTERFACE_BILLING_POST_QUOTE: '/billing/quote', // 产品计价
 
@@ -63,6 +68,25 @@ export default {
   INTERFACE_ANIME_GET_DETAIL: '/anime/getdetail', // 动漫头像详情
   INTERFACE_ANIME_POST_DEL: '/anime/del', // 动漫头像删除
   INTERFACE_ANIME_GET_STYLE_LIST: '/anime/getstylelist', // 动漫头像风格
+  INTERFACE_IDPHOTO_GET_CONFIG: '/idphoto/config',
+  INTERFACE_IDPHOTO_POST_CREATE: '/idphoto/create',
+  INTERFACE_IDPHOTO_POST_RERENDER: '/idphoto/rerender',
+  INTERFACE_IDPHOTO_GET_DETAIL: '/idphoto/getdetail',
+  INTERFACE_IDPHOTO_POST_DEL: '/idphoto/del',
+
+  // 形象照/职业照/写真（混元生图 3.0，一次可出多张）
+  INTERFACE_PORTRAIT_GET_CONFIG: '/portrait/config',
+  INTERFACE_PORTRAIT_POST_CREATE: '/portrait/create',
+  INTERFACE_PORTRAIT_GET_DETAIL: '/portrait/getdetail',
+  INTERFACE_PORTRAIT_GET_LIST: '/portrait/getlist',
+  INTERFACE_PORTRAIT_POST_DEL: '/portrait/del',
+
+  // 老照片修复/上色（混元生图 3.0，异步任务 + 轮询）
+  INTERFACE_OLDPHOTO_GET_CONFIG: '/oldphoto/config',
+  INTERFACE_OLDPHOTO_POST_CREATE: '/oldphoto/create',
+  INTERFACE_OLDPHOTO_GET_DETAIL: '/oldphoto/getdetail',
+  INTERFACE_OLDPHOTO_GET_LIST: '/oldphoto/getlist',
+  INTERFACE_OLDPHOTO_POST_DEL: '/oldphoto/del',
 
   // 机器人/文本生成（旧项目 AI 写作/取名接口）
   INTERFACE_BOT_POST_EDIT: '/robot/edit', // 创建/编辑机器人
diff --git a/api/index.js b/api/index.js
index b98a21f..304632b 100644
--- a/api/index.js
+++ b/api/index.js
@@ -66,7 +66,15 @@ export const pointApi = {
   // 创建充值订单（小程序返回虚拟支付参数）
   createOrder: (params) => request({ url: API.INTERFACE_POINT_POST_CREATE_ORDER, method: 'POST', params }),
   // 订单状态轮询
-  getOrderStatus: (params) => request({ url: API.INTERFACE_POINT_GET_ORDER_STATUS, method: 'POST', params })
+  getOrderStatus: (params) => request({ url: API.INTERFACE_POINT_GET_ORDER_STATUS, method: 'POST', params }),
+  // 积分获取页配置（签到、邀请、看广告配置与今日进度，免登录可调）
+  getEarnConfig: (params) => request({ url: API.INTERFACE_POINT_GET_EARN_CONFIG, method: 'POST', params }),
+  // 每日签到，服务端按用户与日期幂等发放
+  checkin: (params) => request({ url: API.INTERFACE_POINT_POST_CHECKIN, method: 'POST', params }),
+  // 看广告：先取一次性凭证，看完再兑换积分，未看完则作废
+  getAdTicket: (params) => request({ url: API.INTERFACE_POINT_POST_AD_TICKET, method: 'POST', params }),
+  getAdReward: (params) => request({ url: API.INTERFACE_POINT_POST_AD_REWARD, method: 'POST', params }),
+  cancelAdTicket: (params) => request({ url: API.INTERFACE_POINT_POST_AD_CANCEL, method: 'POST', params })
 }
 
 export const billingApi = {
@@ -74,6 +82,34 @@ export const billingApi = {
   quote: (params) => request({ url: API.INTERFACE_BILLING_POST_QUOTE, method: 'POST', params })
 }
 
+export const idPhotoApi = {
+  getConfig: (params) => request({ url: API.INTERFACE_IDPHOTO_GET_CONFIG, method: 'POST', params }),
+  getList: (params = {}) => request({
+    url: API.INTERFACE_WORK_GET_LIST,
+    method: 'POST',
+    params: { ...params, type: 'photo' }
+  }),
+  rerender: (params) => request({ url: API.INTERFACE_IDPHOTO_POST_RERENDER, method: 'POST', params }),
+  getDetail: (params) => request({ url: API.INTERFACE_IDPHOTO_GET_DETAIL, method: 'POST', params }),
+  delete: (params) => request({ url: API.INTERFACE_IDPHOTO_POST_DEL, method: 'POST', params })
+}
+
+export const portraitApi = {
+  getConfig: (params) => request({ url: API.INTERFACE_PORTRAIT_GET_CONFIG, method: 'POST', params }),
+  getDetail: (params) => request({ url: API.INTERFACE_PORTRAIT_GET_DETAIL, method: 'POST', params }),
+  getList: (params) => request({ url: API.INTERFACE_PORTRAIT_GET_LIST, method: 'POST', params }),
+  delete: (params) => request({ url: API.INTERFACE_PORTRAIT_POST_DEL, method: 'POST', params })
+  // create 走 multipart 直传，见 utils/upload.js 的 createPortrait
+}
+
+export const oldPhotoApi = {
+  getConfig: (params) => request({ url: API.INTERFACE_OLDPHOTO_GET_CONFIG, method: 'POST', params }),
+  getDetail: (params) => request({ url: API.INTERFACE_OLDPHOTO_GET_DETAIL, method: 'POST', params }),
+  getList: (params) => request({ url: API.INTERFACE_OLDPHOTO_GET_LIST, method: 'POST', params }),
+  delete: (params) => request({ url: API.INTERFACE_OLDPHOTO_POST_DEL, method: 'POST', params })
+  // create 走 multipart 直传，见 utils/upload.js 的 createOldPhoto
+}
+
 export const toolApi = {
   getMyWorkList: (params) => request({ url: API.INTERFACE_WORK_GET_LIST, method: 'POST', params }),
   getAppList: (params) => request({ url: API.INTERFACE_APP_GET_LIST, method: 'POST', params }),
@@ -114,5 +150,8 @@ export default {
   vip: vipApi,
   point: pointApi,
   billing: billingApi,
+  idPhoto: idPhotoApi,
+  oldPhoto: oldPhotoApi,
+  portrait: portraitApi,
   tool: toolApi
 }
diff --git a/pages.json b/pages.json
index c0a96fc..a24c733 100644
--- a/pages.json
+++ b/pages.json
@@ -71,18 +71,54 @@
         "navigationBarTitleText": "证件照"
       }
     },
+    {
+      "path": "pages/tool/id-photo-history",
+      "style": {
+        "navigationBarTitleText": "证件照记录"
+      }
+    },
+    {
+      "path": "pages/tool/id-photo-detail",
+      "style": {
+        "navigationBarTitleText": "证件照详情"
+      }
+    },
     {
       "path": "pages/tool/portrait-photo",
       "style": {
         "navigationBarTitleText": "形象照/职业照/写真"
       }
     },
+    {
+      "path": "pages/tool/portrait-history",
+      "style": {
+        "navigationBarTitleText": "生成记录"
+      }
+    },
+    {
+      "path": "pages/tool/portrait-detail",
+      "style": {
+        "navigationBarTitleText": "形象照详情"
+      }
+    },
     {
       "path": "pages/tool/old-photo",
       "style": {
         "navigationBarTitleText": "老照片修复/上色"
       }
     },
+    {
+      "path": "pages/tool/old-photo-history",
+      "style": {
+        "navigationBarTitleText": "历史记录"
+      }
+    },
+    {
+      "path": "pages/tool/old-photo-detail",
+      "style": {
+        "navigationBarTitleText": "老照片详情"
+      }
+    },
     {
       "path": "pages/tool/work-detail",
       "style": {
@@ -122,6 +158,36 @@
         "backgroundColor": "#f3f7fb"
       }
     },
+    {
+      "path": "pages/point/earn",
+      "style": {
+        "navigationBarTitleText": "获得点数"
+      }
+    },
+    {
+      "path": "pages/my/wechat",
+      "style": {
+        "navigationBarTitleText": "关注公众号"
+      }
+    },
+    {
+      "path": "pages/my/feedback",
+      "style": {
+        "navigationBarTitleText": "意见反馈"
+      }
+    },
+    {
+      "path": "pages/my/contact",
+      "style": {
+        "navigationBarTitleText": "联系我们"
+      }
+    },
+    {
+      "path": "pages/my/setting",
+      "style": {
+        "navigationBarTitleText": "设置"
+      }
+    },
     {
       "path": "pages/invite/invite",
       "style": {
diff --git a/pages/agreement/agreement.vue b/pages/agreement/agreement.vue
index d0501b0..d9fa24b 100644
--- a/pages/agreement/agreement.vue
+++ b/pages/agreement/agreement.vue
@@ -1,45 +1,130 @@
 <template>
   <view class="agreement-page">
-    <!-- #ifdef H5 -->
-    <view class="txt" v-html="detail.content"></view>
-    <!-- #endif -->
-    <!-- #ifndef H5 -->
-    <rich-text class="txt" :nodes="detail.content || ''"></rich-text>
-    <!-- #endif -->
+    <!-- 加载中：协议正文有 3 万多字，等待期间给骨架反馈 -->
+    <view v-if="loading" class="skeleton">
+      <view v-for="i in 8" :key="i" class="skeleton-line" :class="{ short: i % 4 === 0 }"></view>
+    </view>
+
+    <!-- 富文本正文：统一用 uview-plus 的 up-parse 渲染，各端表现一致 -->
+    <up-parse v-else-if="content" :content="content" :tag-style="tagStyle" selectable />
+
+    <!-- 空态 / 失败态：内容缺失时不能是白屏 -->
+    <view v-else class="empty">
+      <text class="empty-title">{{ errorMsg ? '内容加载失败' : '内容暂未发布' }}</text>
+      <text class="empty-desc">{{ errorMsg || '该内容正在整理中，可稍后再来查看。' }}</text>
+      <view class="empty-btn" @click="loadHtml">重新加载</view>
+    </view>
   </view>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { commonApi } from '@/api/index.js'
+import { cleanRichText } from '@/utils/richtext.js'
+
+/**
+ * 富文本标签样式重置。
+ * 后台正文是 Word 导出的，标签用得很随意（p 套 span、ul 无 li 缩进、字号写死 14px），
+ * 这里统一接管排版：正文 28rpx / 行高 1.8，段间距用 margin 而不是空段落。
+ */
+const tagStyle = {
+  p: 'margin: 0 0 20rpx; padding: 0; line-height: 1.8; font-size: 28rpx; color: #172033; word-break: break-word;',
+  div: 'line-height: 1.8; font-size: 28rpx; color: #172033; word-break: break-word;',
+  span: 'font-size: 28rpx; line-height: 1.8; color: #172033;',
+  h1: 'margin: 34rpx 0 16rpx; padding: 0; font-size: 34rpx; font-weight: 700; line-height: 1.45; color: #172033;',
+  h2: 'margin: 30rpx 0 14rpx; padding: 0; font-size: 32rpx; font-weight: 700; line-height: 1.45; color: #172033;',
+  h3: 'margin: 28rpx 0 12rpx; padding: 0; font-size: 30rpx; font-weight: 700; line-height: 1.45; color: #172033;',
+  h4: 'margin: 26rpx 0 12rpx; padding: 0; font-size: 29rpx; font-weight: 700; line-height: 1.45; color: #172033;',
+  ul: 'margin: 16rpx 0; padding-left: 44rpx; list-style: disc;',
+  ol: 'margin: 16rpx 0; padding-left: 44rpx; list-style: decimal;',
+  li: 'margin: 0 0 10rpx; line-height: 1.8; font-size: 28rpx; color: #172033;',
+  strong: 'font-weight: 700; color: #172033;',
+  b: 'font-weight: 700; color: #172033;',
+  a: 'color: #1f8cff; word-break: break-all;',
+  br: 'line-height: 1.8;',
+  hr: 'margin: 28rpx 0; border: none; border-top: 1rpx solid #eef2f7;',
+  img: 'max-width: 100%; height: auto; border-radius: 12rpx;',
+  table: 'width: 100%; margin: 20rpx 0; border-collapse: collapse; font-size: 26rpx;',
+  td: 'padding: 12rpx; border: 1rpx solid #e6ebf2; line-height: 1.6;',
+  th: 'padding: 12rpx; border: 1rpx solid #e6ebf2; background: #f7f9fd; font-weight: 700; line-height: 1.6;'
+}
 
 const detail = ref({})
+const loading = ref(true)
+const errorMsg = ref('')
+let configKey = ''
+
+// 清洗后的正文：去空段落、剥内联字体与颜色，排版交给上面的 tagStyle
+const content = computed(() => cleanRichText(detail.value.content))
 
 onLoad((options) => {
-  getHtmlInfo(options.key)
+  configKey = (options && options.key) || ''
+  loadHtml()
 })
 
-async function getHtmlInfo(key) {
+async function loadHtml() {
+  if (!configKey) {
+    loading.value = false
+    errorMsg.value = '缺少内容标识'
+    return
+  }
+  loading.value = true
+  errorMsg.value = ''
   try {
-    const res = await commonApi.getHtml({ key })
+    const res = await commonApi.getHtml({ key: configKey })
     detail.value = res.data || {}
-    if (res.data && res.data.title) {
-      uni.setNavigationBarTitle({ title: res.data.title })
+    if (detail.value.title) {
+      uni.setNavigationBarTitle({ title: detail.value.title })
     }
   } catch (e) {
-    // 忽略
+    errorMsg.value = (e && e.msg) || '网络异常，请稍后重试'
+  } finally {
+    loading.value = false
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .agreement-page {
-  padding: 30rpx;
-  .txt {
-    line-height: 1.6;
-    font-size: 28rpx;
-    color: $ai-text;
-  }
+  min-height: 100vh;
+  padding: 30rpx 30rpx 60rpx;
+  background: #ffffff;
+  box-sizing: border-box;
+}
+
+.skeleton-line {
+  height: 30rpx;
+  margin-bottom: 22rpx;
+  border-radius: 8rpx;
+  background: #f1f5fa;
+
+  &.short { width: 60%; }
+}
+
+.empty {
+  padding: 160rpx 40rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.empty-title { color: $ai-text; font-size: 32rpx; font-weight: 700; }
+.empty-desc {
+  margin-top: 14rpx;
+  color: $ai-muted;
+  font-size: 26rpx;
+  line-height: 1.6;
+}
+.empty-btn {
+  margin-top: 30rpx;
+  width: 240rpx;
+  height: 76rpx;
+  border-radius: 999rpx;
+  color: #1f8cff;
+  background: #eef7ff;
+  font-size: 27rpx;
+  font-weight: 700;
+  line-height: 76rpx;
 }
 </style>
diff --git a/pages/bill/bill.vue b/pages/bill/bill.vue
index 6597d1c..29b677a 100644
--- a/pages/bill/bill.vue
+++ b/pages/bill/bill.vue
@@ -54,6 +54,11 @@
               <text class="ledger-type" :class="item.type">{{ item.type_text }}</text>
               <text>{{ item.time }}</text>
             </view>
+            <!-- 充值流水带上订单号，方便对账 / 找客服核单，点一下可复制 -->
+            <view v-if="orderNo(item)" class="ledger-order" @click="copyOrderNo(orderNo(item))">
+              <text class="ledger-order-text">订单号 {{ orderNo(item) }}</text>
+              <text class="ledger-order-copy">复制</text>
+            </view>
           </view>
           <text class="ledger-amount" :class="item.amount > 0 ? 'plus' : 'minus'">
             {{ formatAmount(item.amount) }}
@@ -255,6 +260,24 @@ function formatAmount(value) {
   return num > 0 ? `+${num}` : String(num)
 }
 
+/**
+ * 充值流水的订单号。
+ * 后端 point_log.biz_no 在充值时存的就是 point_order.order_no（消费存的是计费流水号，不展示）。
+ */
+function orderNo(item) {
+  if (!item || item.type !== 'recharge') return ''
+  return String(item.biz_no || '').trim()
+}
+
+function copyOrderNo(value) {
+  if (!value) return
+  uni.setClipboardData({
+    data: value,
+    success: () => toast('订单号已复制'),
+    fail: () => toast('复制失败，请长按选择')
+  })
+}
+
 function getTypeMark(type) {
   return typeMark[type] || '记'
 }
@@ -574,6 +597,30 @@ function goRecharge() {
   font-size: 22rpx;
 }
 
+.ledger-order {
+  margin-top: 10rpx;
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+}
+
+.ledger-order-text {
+  min-width: 0;
+  flex: 1;
+  color: #9aa4b2;
+  font-size: 21rpx;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.ledger-order-copy {
+  flex-shrink: 0;
+  color: #0b8cff;
+  font-size: 21rpx;
+  font-weight: 800;
+}
+
 .ledger-type {
   height: 34rpx;
   padding: 0 14rpx;
diff --git a/pages/login/login.vue b/pages/login/login.vue
index a63ea13..d202b09 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -3,10 +3,9 @@
     <view class="logo-section">
       <image
         class="logo-img"
-        src="https://cdn.aionline.cc/logo/logo_aionline.svg"
+        src="https://cdn.aionline.cc/logo/logo_aionline_black.svg"
         mode="widthFix"
       ></image>
-      <text class="login-tip">登录后同步作品、点数和创作记录</text>
     </view>
 
     <view class="login-actions">
@@ -23,14 +22,14 @@
         @getphonenumber="getPhoneNumber"
         @click="onPhoneLoginClick"
       >
-        <up-icon class="btn-icon" name="phone-fill" size="24" color="#46bb36"></up-icon>
+        <up-icon class="btn-icon" name="phone-fill" size="24" color="#0b8cff"></up-icon>
         <text>手机号登录</text>
       </button>
       <!-- #endif -->
 
       <!-- #ifndef MP-WEIXIN -->
       <button class="login-btn phone" hover-class="login-btn-hover" @click="onPhoneLoginClick">
-        <up-icon class="btn-icon" name="phone-fill" size="24" color="#46bb36"></up-icon>
+        <up-icon class="btn-icon" name="phone-fill" size="24" color="#0b8cff"></up-icon>
         <text>手机号登录</text>
       </button>
       <!-- #endif -->
@@ -69,6 +68,7 @@ import { userApi } from '@/api/index.js'
 import { useUserStore } from '@/store/user.js'
 import { useApp } from '@/utils/useApp.js'
 import { isInWechat } from '@/utils/util.js'
+import { rememberLoginSource, returnAfterLogin } from '@/utils/login.js'
 import CONFIG from '@/utils/config.js'
 
 const userStore = useUserStore()
@@ -89,9 +89,9 @@ onLoad((options = {}) => {
   type.value = options.type || '1'
   source.value = options.source || ''
   const redirect = options.redirect || options.url || ''
+  rememberLoginSource(redirect)
 
   // #ifdef H5
-  if (redirect) uni.setStorageSync('login_redirect', decodeURIComponent(redirect))
   if (options.code) postLogin(options.code) // 公众号授权回跳
   // #endif
 
@@ -260,10 +260,10 @@ function afterLogin(res) {
 
   if (inviteCode) uni.removeStorageSync('invite_code')
 
-  // 统一跳回首页
+  // 返回发起登录的页面，navigateBack/reLaunch 都会触发目标页重新读取登录态
   setTimeout(() => {
-    uni.switchTab({ url: '/pages/toolbox/toolbox' })
-  }, 1200)
+    returnAfterLogin()
+  }, 800)
 }
 </script>
 
@@ -289,13 +289,6 @@ function afterLogin(res) {
   display: block;
 }
 
-.login-tip {
-  margin-top: 24rpx;
-  color: #7f8896;
-  font-size: 26rpx;
-  line-height: 1.4;
-}
-
 .login-actions {
   margin-top: 92rpx;
   display: flex;
@@ -329,14 +322,14 @@ function afterLogin(res) {
 
   &.wechat {
     color: #fff;
-    background: #46bb36;
-    box-shadow: 0 14rpx 28rpx rgba(70, 187, 54, 0.18);
+    background: #0b8cff;
+    box-shadow: 0 14rpx 28rpx rgba(11, 140, 255, 0.2);
   }
 
   &.phone {
-    color: #46bb36;
+    color: #0b8cff;
     background: #ffffff;
-    border: 2rpx solid rgba(70, 187, 54, 0.55);
+    border: 2rpx solid rgba(11, 140, 255, 0.48);
   }
 }
 
@@ -396,8 +389,8 @@ function afterLogin(res) {
     flex-shrink: 0;
 
     &.checked {
-      background: #46bb36;
-      border-color: #46bb36;
+      background: #0b8cff;
+      border-color: #0b8cff;
     }
   }
 
diff --git a/pages/login/phone.vue b/pages/login/phone.vue
index a980a44..5bf1c2b 100644
--- a/pages/login/phone.vue
+++ b/pages/login/phone.vue
@@ -23,9 +23,11 @@
 
 <script setup>
 import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
 import { userApi } from '@/api/index.js'
 import { useUserStore } from '@/store/user.js'
 import { useApp } from '@/utils/useApp.js'
+import { rememberLoginSource, returnAfterLogin } from '@/utils/login.js'
 
 const userStore = useUserStore()
 const { toast } = useApp()
@@ -37,6 +39,10 @@ const postLoading = ref(false)
 const counting = ref(false)
 const count = ref(60)
 
+onLoad((options = {}) => {
+  rememberLoginSource(options.redirect || options.url || '')
+})
+
 function sendCode() {
   if (counting.value) return
   if (!/^1\d{10}$/.test(phone.value)) return toast('请输入正确的手机号')
@@ -66,17 +72,7 @@ async function onLogin() {
     const res = await userApi.loginPhone({ phone: phone.value, code: code.value })
     userStore.setLogin({ token: res.data.token, userInfo: res.data })
     toast('登录成功！')
-
-    // #ifdef H5
-    const redirect = uni.getStorageSync('login_redirect') || ''
-    if (redirect) {
-      uni.removeStorageSync('login_redirect')
-      setTimeout(() => uni.reLaunch({ url: redirect }), 800)
-      return
-    }
-    // #endif
-
-    setTimeout(() => uni.switchTab({ url: '/pages/toolbox/toolbox' }), 800)
+    setTimeout(() => returnAfterLogin(), 800)
   } catch (e) {
     toast(e.msg || '登录失败，请重试！')
   } finally {
diff --git a/pages/my/contact.vue b/pages/my/contact.vue
new file mode 100644
index 0000000..3ea966a
--- /dev/null
+++ b/pages/my/contact.vue
@@ -0,0 +1,166 @@
+<template>
+  <view class="wrap">
+    <view class="hero-card">
+      <text class="eyebrow">CONTACT US</text>
+      <text class="hero-title">联系我们</text>
+      <text class="hero-desc">使用问题、商业合作都可以通过下面的方式找到我们。</text>
+    </view>
+
+    <view class="ct-card">
+      <view v-for="item in contacts" :key="item.key" class="row" @click="copy(item.value)">
+        <view class="row-copy">
+          <text class="row-label">{{ item.label }}</text>
+          <text class="row-value">{{ item.value }}</text>
+        </view>
+        <view class="row-btn">复制</view>
+      </view>
+    </view>
+
+    <!-- 微信客服会话只有小程序端有 -->
+    <!-- #ifdef MP-WEIXIN -->
+    <view class="ct-card">
+      <view class="row-copy">
+        <text class="row-label">在线客服</text>
+        <text class="row-value light">工作日 09:00 - 18:00 在线，其他时段留言也会回复</text>
+      </view>
+      <button class="service-btn" open-type="contact" session-from="mp_contact">
+        进入客服中心
+      </button>
+    </view>
+    <!-- #endif -->
+
+    <view class="tip-card">
+      <text class="tip-title">反馈更快被处理的小技巧</text>
+      <text class="tip-line">· 描述问题时带上出现的页面与操作步骤</text>
+      <text class="tip-line">· 附上问题截图，我们能更快复现</text>
+      <text class="tip-line">· 也可以直接在「意见反馈」里提交，会同步给我们</text>
+      <view class="tip-link" @click="goFeedback">去意见反馈</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { useApp } from '@/utils/useApp.js'
+
+const { toast } = useApp()
+
+// 邮箱与旧版保持一致
+const contacts = [
+  { key: 'contact', label: '联系邮箱', value: 'contact@aionline.cc' },
+  { key: 'market', label: '商业合作', value: 'market@aionline.cc' }
+]
+
+function copy(content) {
+  uni.setClipboardData({
+    data: content,
+    success: () => toast('已复制'),
+    fail: () => toast('复制失败')
+  })
+}
+
+function goFeedback() {
+  uni.navigateTo({ url: '/pages/my/feedback' })
+}
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  min-height: 100vh;
+  padding: 24rpx 28rpx 60rpx;
+  background: #f3f7fb;
+  box-sizing: border-box;
+}
+
+.hero-card {
+  padding: 32rpx;
+  border-radius: 26rpx;
+  background: linear-gradient(135deg, #1f8cff, #41b9ff);
+}
+.eyebrow { display: block; color: rgba(255, 255, 255, 0.75); font-size: 21rpx; font-weight: 800; }
+.hero-title { display: block; margin-top: 12rpx; color: #fff; font-size: 40rpx; font-weight: 900; }
+.hero-desc {
+  display: block;
+  margin-top: 12rpx;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 23rpx;
+  line-height: 1.5;
+}
+
+/* 类名带 ct- 前缀，避开全局 .card 的 margin/box-shadow */
+.ct-card {
+  margin-top: 22rpx;
+  padding: 28rpx;
+  border-radius: 24rpx;
+  background: #fff;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  padding: 16rpx 0;
+}
+.row + .row { border-top: 2rpx solid #f1f5fa; }
+.row-copy { flex: 1; min-width: 0; }
+.row-label { display: block; color: #8a95a6; font-size: 23rpx; }
+.row-value {
+  display: block;
+  margin-top: 8rpx;
+  color: #172033;
+  font-size: 29rpx;
+  font-weight: 800;
+  word-break: break-all;
+}
+.row-value.light { color: #7f8896; font-size: 24rpx; font-weight: 400; line-height: 1.5; }
+.row-btn {
+  flex-shrink: 0;
+  height: 60rpx;
+  padding: 0 24rpx;
+  border-radius: 999rpx;
+  color: #1f8cff;
+  background: #eef7ff;
+  font-size: 24rpx;
+  font-weight: 800;
+  line-height: 60rpx;
+}
+
+.service-btn {
+  margin-top: 22rpx;
+  height: 84rpx;
+  border-radius: 999rpx;
+  color: #fff;
+  background: linear-gradient(135deg, #1f8cff, #41b9ff);
+  font-size: 28rpx;
+  font-weight: 800;
+  line-height: 84rpx;
+  border: none;
+
+  &::after { border: none; }
+}
+
+.tip-card {
+  margin-top: 22rpx;
+  padding: 28rpx;
+  border-radius: 24rpx;
+  background: #fff;
+}
+.tip-title { display: block; margin-bottom: 12rpx; color: #172033; font-size: 28rpx; font-weight: 800; }
+.tip-line {
+  display: block;
+  margin-top: 8rpx;
+  color: #7f8896;
+  font-size: 23rpx;
+  line-height: 1.6;
+}
+.tip-link {
+  margin-top: 20rpx;
+  height: 72rpx;
+  border-radius: 999rpx;
+  color: #1f8cff;
+  background: #eef7ff;
+  font-size: 26rpx;
+  font-weight: 800;
+  line-height: 72rpx;
+  text-align: center;
+}
+</style>
diff --git a/pages/my/feedback.vue b/pages/my/feedback.vue
new file mode 100644
index 0000000..36f4def
--- /dev/null
+++ b/pages/my/feedback.vue
@@ -0,0 +1,321 @@
+<template>
+  <view class="wrap">
+    <view v-if="tipText" class="tip-card">{{ tipText }}</view>
+
+    <!-- 反馈类型 -->
+    <view class="fb-card">
+      <text class="fb-card-title"><text class="required">*</text>问题类型</text>
+      <view class="type-grid">
+        <view
+          v-for="item in TYPES"
+          :key="item.value"
+          class="type-item"
+          :class="{ active: form.type === item.value }"
+          @click="form.type = item.value"
+        >
+          {{ item.label }}
+        </view>
+      </view>
+    </view>
+
+    <!-- 反馈内容 -->
+    <view class="fb-card">
+      <view class="fb-card-head">
+        <text class="fb-card-title"><text class="required">*</text>反馈内容</text>
+        <text class="fb-card-count">{{ form.content.length }}/500</text>
+      </view>
+      <textarea
+        v-model="form.content"
+        class="textarea"
+        maxlength="500"
+        placeholder="请描述你遇到的问题或建议，越具体我们越容易定位"
+      />
+    </view>
+
+    <!-- 联系电话 -->
+    <view class="fb-card">
+      <text class="fb-card-title"><text class="required">*</text>联系电话</text>
+      <input
+        v-model="form.phone"
+        class="input"
+        type="number"
+        maxlength="11"
+        placeholder="方便我们回复你的处理结果"
+      />
+    </view>
+
+    <!-- 截图 -->
+    <view class="fb-card">
+      <view class="fb-card-head">
+        <text class="fb-card-title"><text class="required">*</text>问题截图</text>
+        <text class="fb-card-count">{{ form.imgs.length }}/9</text>
+      </view>
+      <view class="img-grid">
+        <view v-for="(url, index) in form.imgs" :key="url" class="img-item">
+          <image class="img" :src="url" mode="aspectFill" @click="previewImg(index)" />
+          <view class="img-del" @click.stop="removeImg(index)">×</view>
+        </view>
+        <view v-if="form.imgs.length < 9" class="img-add" @click="chooseImage">
+          <text class="add-plus">+</text>
+          <text class="add-text">上传截图</text>
+        </view>
+      </view>
+      <text class="fb-card-desc">支持 PNG / JPG，单张不超过 10M</text>
+    </view>
+
+    <view class="bottom-bar">
+      <view class="submit-btn" :class="{ disabled: submitting }" @click="submit">
+        {{ submitting ? '提交中...' : '提交反馈' }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { commonApi } from '@/api/index.js'
+import { uploadImage } from '@/utils/upload.js'
+import { useUserStore } from '@/store/user.js'
+import { useApp } from '@/utils/useApp.js'
+
+const userStore = useUserStore()
+const { toast } = useApp()
+
+// 与后端 feedback.type 约定一致：1反馈使用问题 2提出产品意见 3其他咨询
+const TYPES = [
+  { value: 1, label: '反馈使用问题' },
+  { value: 2, label: '提出产品意见' },
+  { value: 3, label: '其他咨询' }
+]
+const CONFIG_KEY = 'feedback_tip_content'
+
+const form = reactive({ type: 1, content: '', phone: '', imgs: [] })
+const tipText = ref('')
+const submitting = ref(false)
+
+onLoad(() => {
+  loadTip()
+  // 注意：/user/getinfo 返回的手机号是脱敏的（138****1234），不能用来预填，让用户自己输
+})
+
+async function loadTip() {
+  try {
+    const res = await commonApi.getConfig({ keys: CONFIG_KEY })
+    const rows = Array.isArray(res.list) ? res.list : []
+    const item = rows.find((it) => it.key === CONFIG_KEY)
+    if (item && item.value) tipText.value = item.value
+  } catch (e) {
+    // 配置缺失就不展示提示条
+  }
+}
+
+function chooseImage() {
+  if (!ensureLogin()) return
+  const count = 9 - form.imgs.length
+  if (count <= 0) return
+  uni.chooseImage({
+    count,
+    sizeType: ['compressed'],
+    sourceType: ['album', 'camera'],
+    success: async (res) => {
+      const files = res.tempFiles || []
+      const paths = res.tempFilePaths || []
+      uni.showLoading({ title: '上传中...', mask: true })
+      try {
+        for (let i = 0; i < paths.length; i++) {
+          if (Number((files[i] || {}).size || 0) > 10 * 1024 * 1024) {
+            toast('单张图片不能超过 10M')
+            continue
+          }
+          const ret = await uploadImage(paths[i], files[i] || {})
+          const url = (ret.data && ret.data.url) || ''
+          if (url) form.imgs.push(url)
+        }
+      } catch (e) {
+        toast((e && e.msg) || '图片上传失败')
+      } finally {
+        uni.hideLoading()
+      }
+    }
+  })
+}
+
+function removeImg(index) {
+  form.imgs.splice(index, 1)
+}
+
+function previewImg(index) {
+  uni.previewImage({ urls: form.imgs, current: form.imgs[index] })
+}
+
+async function submit() {
+  if (!ensureLogin()) return
+  if (submitting.value) return
+  if (!form.type) return toast('请选择问题类型')
+  if (!form.content.trim()) return toast('请输入反馈内容')
+  if (!/^1\d{10}$/.test(form.phone)) return toast('请输入正确的手机号')
+  if (!form.imgs.length) return toast('请上传问题截图')
+
+  submitting.value = true
+  try {
+    await commonApi.feedback({
+      type: form.type,
+      content: form.content.trim(),
+      phone: form.phone,
+      imgs: form.imgs.join(',')
+    })
+    toast('反馈成功，感谢你的建议')
+    setTimeout(() => uni.navigateBack(), 1200)
+  } catch (e) {
+    toast((e && e.msg) || '反馈失败，请重试')
+  } finally {
+    submitting.value = false
+  }
+}
+
+function ensureLogin() {
+  if (userStore.isLogin) return true
+  uni.navigateTo({ url: '/pages/login/login' })
+  return false
+}
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  min-height: 100vh;
+  padding: 24rpx 28rpx calc(200rpx + env(safe-area-inset-bottom));
+  background: #f3f7fb;
+  box-sizing: border-box;
+}
+
+.tip-card {
+  padding: 22rpx 24rpx;
+  border-radius: 20rpx;
+  color: #b7791f;
+  background: #fff8e6;
+  font-size: 24rpx;
+  line-height: 1.6;
+}
+
+.fb-card {
+  margin-top: 22rpx;
+  padding: 28rpx;
+  border-radius: 24rpx;
+  background: #fff;
+}
+.fb-card-head { display: flex; align-items: baseline; }
+.fb-card-title { display: block; color: #172033; font-size: 30rpx; font-weight: 800; }
+.fb-card-count { margin-left: auto; color: #8a95a6; font-size: 23rpx; }
+.fb-card-desc { display: block; margin-top: 14rpx; color: #8a95a6; font-size: 22rpx; }
+.required { margin-right: 4rpx; color: #ef4444; }
+
+.type-grid {
+  margin-top: 20rpx;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14rpx;
+}
+.type-item {
+  height: 76rpx;
+  border-radius: 18rpx;
+  color: #596579;
+  background: #f7f9fd;
+  border: 2rpx solid transparent;
+  font-size: 24rpx;
+  font-weight: 700;
+  line-height: 76rpx;
+  text-align: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.type-item.active { color: #1f8cff; background: #eff8ff; border-color: #1f8cff; }
+
+.textarea {
+  margin-top: 20rpx;
+  width: 100%;
+  min-height: 220rpx;
+  padding: 22rpx;
+  border-radius: 20rpx;
+  color: #172033;
+  background: #f7f9fd;
+  font-size: 25rpx;
+  line-height: 1.55;
+  box-sizing: border-box;
+}
+
+.input {
+  margin-top: 20rpx;
+  width: 100%;
+  height: 88rpx;
+  padding: 0 22rpx;
+  border-radius: 20rpx;
+  color: #172033;
+  background: #f7f9fd;
+  font-size: 27rpx;
+  box-sizing: border-box;
+}
+
+.img-grid {
+  margin-top: 20rpx;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14rpx;
+}
+.img-item, .img-add {
+  position: relative;
+  width: 100%;
+  height: 150rpx;
+  border-radius: 18rpx;
+  overflow: hidden;
+}
+.img { width: 100%; height: 100%; }
+.img-del {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 0 0 0 16rpx;
+  color: #fff;
+  background: rgba(15, 23, 42, 0.55);
+  font-size: 26rpx;
+  line-height: 38rpx;
+  text-align: center;
+}
+.img-add {
+  border: 2rpx dashed rgba(31, 140, 255, 0.35);
+  background: #f8fbff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.add-plus { color: #1f8cff; font-size: 44rpx; line-height: 1; }
+.add-text { margin-top: 8rpx; color: #8a95a6; font-size: 21rpx; }
+
+.bottom-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 18rpx 28rpx calc(18rpx + env(safe-area-inset-bottom));
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 -10rpx 30rpx rgba(32, 56, 92, 0.1);
+}
+.submit-btn {
+  height: 88rpx;
+  border-radius: 999rpx;
+  color: #fff;
+  background: linear-gradient(135deg, #1f8cff, #41b9ff);
+  font-size: 30rpx;
+  font-weight: 800;
+  line-height: 88rpx;
+  text-align: center;
+  box-shadow: 0 12rpx 24rpx rgba(31, 140, 255, 0.28);
+}
+.submit-btn.disabled { opacity: 0.6; }
+</style>
diff --git a/pages/my/setting.vue b/pages/my/setting.vue
new file mode 100644
index 0000000..3edfdcc
--- /dev/null
+++ b/pages/my/setting.vue
@@ -0,0 +1,127 @@
+<template>
+  <view class="wrap">
+    <!-- 关于 -->
+    <text class="group-title">关于</text>
+    <view class="st-card">
+      <view v-for="item in aboutRows" :key="item.key" class="row" @click="onRow(item)">
+        <text class="row-name">{{ item.name }}</text>
+        <text v-if="item.value" class="row-value">{{ item.value }}</text>
+        <up-icon v-else name="arrow-right" color="#c3cddb" size="14" />
+      </view>
+    </view>
+
+    <!-- 账号 -->
+    <template v-if="userStore.isLogin">
+      <text class="group-title">账号</text>
+      <view class="st-card">
+        <view class="row" @click="logout">
+          <text class="row-name danger">退出登录</text>
+        </view>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useUserStore } from '@/store/user.js'
+import { useApp } from '@/utils/useApp.js'
+import appConfig from '@/utils/config.js'
+
+const userStore = useUserStore()
+const { toast } = useApp()
+
+// 微信端非正式版的环境名，展示给用户看更直观
+const ENV_TEXT = {
+  develop: '开发版',
+  trial: '体验版'
+}
+
+// 协议正文由后台「内容管理」维护，key 与旧项目一致：service / privacy
+const aboutRows = computed(() => [
+  { key: 'service', name: '服务条款' },
+  { key: 'privacy', name: '隐私政策' },
+  { key: 'version', name: '当前版本', value: version.value }
+])
+
+/**
+ * 版本号展示规则：
+ *  - 正式版：只显示一个版本号，优先用微信侧的线上版本号（即上传代码包时填的版本），
+ *    取不到再回落到 APP_VERSION。不并排显示两个版本号，避免出现「2.0.0（2.0.0）」。
+ *  - 开发版 / 体验版：微信的 version 字段为空字符串，显示 APP_VERSION 并在括号里标注环境，
+ *    方便一眼看出当前不是线上包。
+ * APP_VERSION 在 utils/config.js 维护，与 manifest.json 的 versionName 保持一致。
+ */
+const version = computed(() => {
+  const appVersion = appConfig.APP_VERSION || '1.0.0'
+  // #ifdef MP-WEIXIN
+  try {
+    const mp = (uni.getAccountInfoSync() || {}).miniProgram || {}
+    const envVersion = mp.envVersion
+    if (envVersion && envVersion !== 'release') {
+      return `${appVersion}（${ENV_TEXT[envVersion] || envVersion}）`
+    }
+    return mp.version || appVersion
+  } catch (e) {
+    // 取不到就只显示应用版本
+  }
+  // #endif
+  return appVersion
+})
+
+function onRow(item) {
+  if (item.key === 'version') return
+  uni.navigateTo({ url: `/pages/agreement/agreement?key=${item.key}` })
+}
+
+function logout() {
+  uni.showModal({
+    title: '提示',
+    content: '确定退出登录？',
+    confirmText: '退出登录',
+    confirmColor: '#ef4444',
+    success: (res) => {
+      if (!res.confirm) return
+      userStore.clear()
+      toast('已退出登录')
+      setTimeout(() => uni.navigateBack(), 800)
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  min-height: 100vh;
+  padding: 12rpx 28rpx 60rpx;
+  background: #f3f7fb;
+  box-sizing: border-box;
+}
+
+.group-title {
+  display: block;
+  margin: 24rpx 8rpx 14rpx;
+  color: #8a95a6;
+  font-size: 23rpx;
+  font-weight: 800;
+}
+
+/* 类名带 st- 前缀，避开全局 .card 的 margin / box-shadow */
+.st-card {
+  border-radius: 24rpx;
+  background: #fff;
+  overflow: hidden;
+}
+
+.row {
+  min-height: 100rpx;
+  padding: 26rpx 28rpx;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+.row + .row { border-top: 2rpx solid #f4f7fb; }
+.row-name { flex: 1; min-width: 0; color: #172033; font-size: 29rpx; }
+.row-name.danger { color: #ef4444; text-align: center; }
+.row-value { color: #8a95a6; font-size: 26rpx; }
+</style>
diff --git a/pages/my/wechat.vue b/pages/my/wechat.vue
new file mode 100644
index 0000000..7793ee4
--- /dev/null
+++ b/pages/my/wechat.vue
@@ -0,0 +1,140 @@
+<template>
+  <view class="wrap">
+    <view class="hero-card">
+      <text class="eyebrow">AIONLINE 助手</text>
+      <text class="hero-title">关注公众号</text>
+      <text class="hero-desc">分享 AI 资讯与使用技巧，并定期发放福利。</text>
+    </view>
+
+    <view class="qr-card">
+      <image
+        class="qr-img"
+        :src="qrUrl"
+        mode="aspectFit"
+        show-menu-by-longpress
+        @click="previewQr"
+      />
+      <text class="qr-name">AIonline助手</text>
+      <view class="steps">
+        <!-- 小程序 / H5 里可以长按识别，App 只能保存到相册再去微信扫 -->
+        <!-- #ifdef APP-PLUS -->
+        <view class="step"><text class="step-index">1</text><text class="step-text">点击二维码查看大图</text></view>
+        <view class="step"><text class="step-index">2</text><text class="step-text">长按保存到相册</text></view>
+        <view class="step"><text class="step-index">3</text><text class="step-text">打开微信扫一扫识别</text></view>
+        <!-- #endif -->
+        <!-- #ifndef APP-PLUS -->
+        <view class="step"><text class="step-index">1</text><text class="step-text">长按上方二维码</text></view>
+        <view class="step"><text class="step-index">2</text><text class="step-text">识别并前往图中的公众号</text></view>
+        <view class="step"><text class="step-index">3</text><text class="step-text">点击关注即可</text></view>
+        <!-- #endif -->
+      </view>
+    </view>
+
+    <view class="tip-card">
+      <text class="tip-title">关注后可以做什么</text>
+      <text class="tip-line">· 第一时间收到新功能与活动通知</text>
+      <text class="tip-line">· 获取 AI 绘画、写作的实用提示词</text>
+      <text class="tip-line">· 参与不定期的点数与会员福利活动</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { commonApi } from '@/api/index.js'
+
+// 二维码优先读配置项，便于运营换图；取不到用默认图兜底（与 PC 站页脚同一张）
+const DEFAULT_QR = 'https://cdn.aionline.cc/ai/aionline_qr.jpg'
+const CONFIG_KEY = 'wechat_qr'
+const qrUrl = ref(DEFAULT_QR)
+
+onLoad(() => loadQr())
+
+async function loadQr() {
+  try {
+    const res = await commonApi.getConfig({ keys: CONFIG_KEY })
+    const rows = Array.isArray(res.list) ? res.list : []
+    const item = rows.find((it) => it.key === CONFIG_KEY)
+    if (item && item.value) qrUrl.value = item.value
+  } catch (e) {
+    // 配置缺失就用默认图
+  }
+}
+
+function previewQr() {
+  uni.previewImage({ urls: [qrUrl.value] })
+}
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  min-height: 100vh;
+  padding: 24rpx 28rpx 60rpx;
+  background: #f3f7fb;
+  box-sizing: border-box;
+}
+
+.hero-card {
+  padding: 32rpx;
+  border-radius: 26rpx;
+  background: linear-gradient(135deg, #1f8cff, #41b9ff);
+}
+.eyebrow { display: block; color: rgba(255, 255, 255, 0.75); font-size: 21rpx; font-weight: 800; }
+.hero-title { display: block; margin-top: 12rpx; color: #fff; font-size: 40rpx; font-weight: 900; }
+.hero-desc {
+  display: block;
+  margin-top: 12rpx;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 23rpx;
+  line-height: 1.5;
+}
+
+.qr-card {
+  margin-top: 22rpx;
+  padding: 36rpx 28rpx 28rpx;
+  border-radius: 24rpx;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.qr-img {
+  width: 420rpx;
+  height: 420rpx;
+  border-radius: 20rpx;
+  background: #f7f9fd;
+}
+.qr-name { margin-top: 20rpx; color: #172033; font-size: 30rpx; font-weight: 800; }
+
+.steps { margin-top: 24rpx; width: 100%; }
+.step { display: flex; align-items: center; gap: 14rpx; margin-top: 14rpx; }
+.step-index {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  color: #1f8cff;
+  background: #eef7ff;
+  font-size: 22rpx;
+  font-weight: 800;
+  line-height: 40rpx;
+  text-align: center;
+  flex-shrink: 0;
+}
+.step-text { color: #5f6f83; font-size: 25rpx; }
+
+.tip-card {
+  margin-top: 22rpx;
+  padding: 28rpx;
+  border-radius: 24rpx;
+  background: #fff;
+}
+.tip-title { display: block; margin-bottom: 12rpx; color: #172033; font-size: 28rpx; font-weight: 800; }
+.tip-line {
+  display: block;
+  margin-top: 8rpx;
+  color: #7f8896;
+  font-size: 23rpx;
+  line-height: 1.6;
+}
+</style>
diff --git a/pages/point/earn.vue b/pages/point/earn.vue
new file mode 100644
index 0000000..5cca24e
--- /dev/null
+++ b/pages/point/earn.vue
@@ -0,0 +1,523 @@
+<template>
+  <view class="wrap">
+    <!-- 余额头卡 -->
+    <view class="head">
+      <view class="head-left">
+        <text class="kicker">获得点数</text>
+        <text class="title">当前 {{ balance }} 点</text>
+        <text class="desc">完成下面的任务即可获得点数，点数可用于全部 AI 工具</text>
+      </view>
+      <view class="head-actions">
+        <view class="head-btn" @click="goBill">明细</view>
+        <view class="head-btn primary" @click="goRecharge">充值</view>
+      </view>
+    </view>
+
+    <!-- 加载骨架：等待超过 300ms 也有反馈 -->
+    <view v-if="loading" class="skeleton-list">
+      <view v-for="i in 3" :key="i" class="skeleton-row"></view>
+    </view>
+
+    <template v-else>
+      <!-- 任务列表：只渲染已开启的任务 -->
+      <view v-if="checkinTask.enabled" class="task-card checkin-card">
+        <view class="task-main">
+          <view class="task-icon checkin">
+            <up-icon name="calendar" color="#1f8cff" size="22" />
+          </view>
+          <view class="task-copy">
+            <text class="task-title">{{ pointCopy(checkinTask.title, '每日签到') }}</text>
+            <text class="task-desc">{{ pointCopy(checkinTask.desc, '每天签到一次，点数立即到账') }}</text>
+            <text class="task-progress" :class="{ success: checkinTask.checked_in }">
+              {{ checkinTask.checked_in ? '今日已完成，明天再来' : '今日尚未签到' }}
+            </text>
+          </view>
+          <view class="task-action">
+            <view class="reward-chip">+{{ checkinTask.points_per_checkin }}</view>
+            <view
+              class="task-btn"
+              :class="{ disabled: checkinBtnDisabled }"
+              @click="claimCheckin"
+            >
+              {{ checkinBtnText }}
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view v-if="adTask.enabled" class="task-card">
+        <view class="task-main">
+          <view class="task-icon ad">
+            <text class="icon-text">▶</text>
+          </view>
+          <view class="task-copy">
+            <text class="task-title">{{ pointCopy(adTask.title, '看视频获得点数') }}</text>
+            <text class="task-desc">{{ pointCopy(adTask.desc, '完整观看一段视频即可获得点数') }}</text>
+            <text class="task-progress">{{ adProgressText }}</text>
+          </view>
+          <view class="task-action">
+            <view class="reward-chip">+{{ adTask.points_per_ad }}</view>
+            <view
+              class="task-btn"
+              :class="{ disabled: adBtnDisabled }"
+              @click="watchAd"
+            >
+              {{ adBtnText }}
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view v-if="inviteTask.enabled" class="task-card">
+        <view class="task-main">
+          <view class="task-icon invite">
+            <text class="icon-text">＋</text>
+          </view>
+          <view class="task-copy">
+            <text class="task-title">邀请好友注册</text>
+            <text class="task-desc">
+              好友注册成功，你获得 {{ inviteTask.inviter_points }} 点，好友也获得 {{ inviteTask.invitee_points }} 点
+            </text>
+            <text class="task-progress">
+              已邀请 {{ inviteTask.stats.success || 0 }} 人 · 累计获得 {{ inviteTask.stats.inviter_points || 0 }} 点
+            </text>
+          </view>
+          <view class="task-action">
+            <view class="reward-chip">+{{ inviteTask.inviter_points }}</view>
+            <view class="task-btn" @click="goInvite">去邀请</view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 所有任务都未开启：不给空白页，直接引导充值 -->
+      <view v-if="!checkinTask.enabled && !adTask.enabled && !inviteTask.enabled" class="empty-state">
+        <text class="empty-title">暂无可做的任务</text>
+        <text class="empty-desc">活动暂未开启，可以先通过充值获得点数。</text>
+        <view class="empty-action" @click="goRecharge">去充值</view>
+      </view>
+
+      <!-- 规则 -->
+      <view v-if="ruleLines.length" class="rule-card">
+        <text class="rule-title">规则说明</text>
+        <text v-for="line in ruleLines" :key="line" class="rule-line">· {{ line }}</text>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
+import { pointApi } from '@/api/index.js'
+import { useUserStore } from '@/store/user.js'
+import { useApp } from '@/utils/useApp.js'
+
+const userStore = useUserStore()
+const { toast } = useApp()
+
+const loading = ref(true)
+const balance = ref(0)
+const rewarding = ref(false)
+const checkingIn = ref(false)
+const waitSeconds = ref(0)
+const checkinTask = ref({
+  enabled: false,
+  points_per_checkin: 0,
+  checked_in: false,
+  can_checkin: false,
+  title: '',
+  desc: '',
+  rule_text: ''
+})
+const inviteTask = ref({ enabled: false, inviter_points: 0, invitee_points: 0, rule_text: '', stats: {} })
+const adTask = ref({
+  enabled: false,
+  points_per_ad: 0,
+  daily_limit: 0,
+  today_used: 0,
+  remain: 0,
+  ad_unit_id: '',
+  title: '',
+  desc: '',
+  rule_text: ''
+})
+
+// 激励视频实例：官方约定是页面内单例、不可跨页复用，所以只在本页创建
+let videoAd = null
+let currentTicket = ''
+let waitTimer = 0
+
+const adRemainText = computed(() => {
+  if (adTask.value.daily_limit <= 0) return '不限次数'
+  return `今日 ${adTask.value.today_used}/${adTask.value.daily_limit} 次`
+})
+const adProgressText = computed(() => {
+  if (!adTask.value.enabled) return ''
+  if (adTask.value.remain === 0) return '今日次数已用完，明天再来'
+  return adRemainText.value
+})
+const adBtnDisabled = computed(
+  () => rewarding.value || adTask.value.remain === 0 || waitSeconds.value > 0
+)
+const adBtnText = computed(() => {
+  if (rewarding.value) return '发放中'
+  if (adTask.value.remain === 0) return '已领完'
+  if (waitSeconds.value > 0) return `${waitSeconds.value}s`
+  return `看视频 +${adTask.value.points_per_ad}`
+})
+const checkinBtnDisabled = computed(() => checkingIn.value || checkinTask.value.checked_in)
+const checkinBtnText = computed(() => {
+  if (checkingIn.value) return '签到中'
+  if (checkinTask.value.checked_in) return '已签到'
+  return '立即签到'
+})
+const ruleLines = computed(() => {
+  const lines = []
+  if (checkinTask.value.enabled && checkinTask.value.rule_text) lines.push(...splitRule(checkinTask.value.rule_text))
+  if (adTask.value.enabled && adTask.value.rule_text) lines.push(...splitRule(adTask.value.rule_text))
+  if (inviteTask.value.enabled && inviteTask.value.rule_text) lines.push(...splitRule(inviteTask.value.rule_text))
+  return lines
+})
+
+function splitRule(text) {
+  return pointCopy(text)
+    .split(/[\n；;]/)
+    .map((item) => item.trim())
+    .filter(Boolean)
+}
+
+onLoad(() => {
+  loadConfig()
+})
+
+onShow(() => {
+  // 从充值/邀请页返回时刷新余额与进度
+  if (!loading.value) loadConfig(true)
+})
+
+onUnload(() => {
+  clearInterval(waitTimer)
+  destroyAd()
+})
+
+async function loadConfig(silent = false) {
+  try {
+    const res = await pointApi.getEarnConfig()
+    const data = res.data || {}
+    balance.value = (data.balance && data.balance.points) || 0
+    checkinTask.value = Object.assign({}, checkinTask.value, data.checkin || {})
+    inviteTask.value = Object.assign({ stats: {} }, data.invite || {})
+    adTask.value = Object.assign({}, adTask.value, data.ad || {})
+    startWait(adTask.value.wait_seconds || 0)
+    if (adTask.value.enabled) initAd()
+  } catch (e) {
+    if (!silent) toast((e && e.msg) || '加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 冷却倒计时：后端下发剩余秒数，前端只做展示 */
+function startWait(seconds) {
+  clearInterval(waitTimer)
+  waitSeconds.value = Number(seconds || 0)
+  if (waitSeconds.value <= 0) return
+  waitTimer = setInterval(() => {
+    waitSeconds.value -= 1
+    if (waitSeconds.value <= 0) clearInterval(waitTimer)
+  }, 1000)
+}
+
+function initAd() {
+  // #ifdef MP-WEIXIN
+  if (videoAd || !adTask.value.ad_unit_id) return
+  if (!wx.createRewardedVideoAd) return
+  videoAd = wx.createRewardedVideoAd({ adUnitId: adTask.value.ad_unit_id })
+  videoAd.onError((err) => {
+    console.log('激励视频加载失败', err)
+    cancelTicket('广告拉取失败')
+    rewarding.value = false
+    toast('广告暂时拉取失败，请稍后再试')
+  })
+  videoAd.onClose((res) => {
+    // 只有完整看完才发奖，中途退出作废凭证且不占次数
+    if (res && res.isEnded) {
+      claimReward()
+    } else {
+      cancelTicket('未看完')
+      rewarding.value = false
+      toast('未看完视频，本次不发放点数')
+    }
+  })
+  // #endif
+}
+
+function destroyAd() {
+  // #ifdef MP-WEIXIN
+  videoAd = null
+  // #endif
+}
+
+async function watchAd() {
+  if (!ensureLogin()) return
+  if (adBtnDisabled.value) return
+
+  // #ifndef MP-WEIXIN
+  toast('请在微信小程序中观看视频获得点数')
+  return
+  // #endif
+
+  rewarding.value = true
+  try {
+    const res = await pointApi.getAdTicket()
+    const data = res.data || {}
+    currentTicket = data.ticket || ''
+    if (data.ad) adTask.value = Object.assign({}, adTask.value, data.ad)
+    if (!currentTicket) throw new Error('凭证获取失败')
+
+    initAd()
+    if (!videoAd) {
+      rewarding.value = false
+      cancelTicket('广告组件不可用')
+      toast('当前环境不支持激励视频')
+      return
+    }
+    await showAd()
+  } catch (e) {
+    rewarding.value = false
+    cancelTicket('提交失败')
+    toast((e && e.msg) || e.message || '暂不可领取')
+  }
+}
+
+function showAd() {
+  return new Promise((resolve, reject) => {
+    videoAd
+      .show()
+      .then(resolve)
+      .catch(() => {
+        // 首次 show 失败按官方建议先 load 再重试一次
+        videoAd
+          .load()
+          .then(() => videoAd.show())
+          .then(resolve)
+          .catch(reject)
+      })
+  })
+}
+
+async function claimReward() {
+  if (!currentTicket) return
+  const ticket = currentTicket
+  currentTicket = ''
+  try {
+    const res = await pointApi.getAdReward({ ticket })
+    const data = res.data || {}
+    balance.value = (data.balance && data.balance.points) || balance.value
+    if (data.ad) {
+      adTask.value = Object.assign({}, adTask.value, data.ad)
+      startWait(data.ad.wait_seconds || 0)
+    }
+    // 同步 store，个人中心与工具页展示的余额跟着变
+    userStore.fetchBalance().catch(() => {})
+    toast(`点数 +${data.points || adTask.value.points_per_ad}`)
+  } catch (e) {
+    toast((e && e.msg) || '点数发放失败')
+  } finally {
+    rewarding.value = false
+  }
+}
+
+function cancelTicket(reason) {
+  if (!currentTicket) return
+  const ticket = currentTicket
+  currentTicket = ''
+  pointApi.cancelAdTicket({ ticket, reason }).catch(() => {})
+}
+
+function ensureLogin() {
+  if (userStore.isLogin) return true
+  uni.navigateTo({ url: '/pages/login/login' })
+  return false
+}
+
+// 兼容后台历史配置中仍使用“积分”的文案，前台统一展示为“点数”。
+function pointCopy(text, fallback = '') {
+  return String(text || fallback).replace(/积分/g, '点数')
+}
+
+async function claimCheckin() {
+  if (!ensureLogin()) return
+  if (checkinBtnDisabled.value) return
+  checkingIn.value = true
+  try {
+    const res = await pointApi.checkin()
+    const data = res.data || {}
+    balance.value = (data.balance && data.balance.points) || balance.value
+    if (data.checkin) checkinTask.value = Object.assign({}, checkinTask.value, data.checkin)
+    userStore.fetchBalance().catch(() => {})
+    toast(data.duplicated ? '今天已经签到过了' : `签到成功，点数 +${data.points || checkinTask.value.points_per_checkin}`)
+  } catch (e) {
+    toast((e && e.msg) || '签到失败，请稍后再试')
+  } finally {
+    checkingIn.value = false
+  }
+}
+
+function goInvite() {
+  if (!ensureLogin()) return
+  uni.navigateTo({ url: '/pages/invite/invite' })
+}
+
+function goRecharge() {
+  uni.navigateTo({ url: '/pages/recharge/recharge' })
+}
+
+function goBill() {
+  if (!ensureLogin()) return
+  uni.navigateTo({ url: '/pages/bill/bill' })
+}
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  min-height: 100vh;
+  padding: 24rpx 28rpx 60rpx;
+  background: #f3f7fb;
+  box-sizing: border-box;
+}
+
+.head {
+  padding: 30rpx;
+  border-radius: 26rpx;
+  background: linear-gradient(135deg, #1f8cff, #41b9ff);
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+}
+.head-left { flex: 1; min-width: 0; }
+.kicker { display: block; color: rgba(255, 255, 255, 0.75); font-size: 21rpx; font-weight: 800; }
+.title { display: block; margin-top: 12rpx; color: #fff; font-size: 42rpx; font-weight: 900; }
+.desc {
+  display: block;
+  margin-top: 12rpx;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 22rpx;
+  line-height: 1.5;
+}
+.head-actions { display: flex; flex-direction: column; gap: 12rpx; flex-shrink: 0; }
+.head-btn {
+  width: 130rpx;
+  height: 60rpx;
+  border-radius: 999rpx;
+  color: #fff;
+  font-size: 24rpx;
+  font-weight: 800;
+  line-height: 60rpx;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.2);
+}
+.head-btn.primary { color: #1f8cff; background: #fff; }
+
+.skeleton-list { margin-top: 22rpx; }
+.skeleton-row {
+  height: 180rpx;
+  margin-bottom: 18rpx;
+  border-radius: 24rpx;
+  background: #e9eef6;
+}
+
+.task-card {
+  margin-top: 22rpx;
+  padding: 28rpx;
+  border-radius: 24rpx;
+  background: #fff;
+}
+.task-main { display: flex; align-items: center; gap: 20rpx; }
+.task-icon {
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.task-icon.ad { background: #eef7ff; }
+.task-icon.checkin { background: #eaf5ff; }
+.task-icon.invite { background: #eefaf3; }
+.icon-text { color: #1f8cff; font-size: 36rpx; font-weight: 900; }
+.task-icon.invite .icon-text { color: #17a65a; }
+.task-copy { flex: 1; min-width: 0; }
+.task-title { display: block; color: #172033; font-size: 30rpx; font-weight: 800; }
+.task-desc {
+  display: block;
+  margin-top: 8rpx;
+  color: #7f8896;
+  font-size: 23rpx;
+  line-height: 1.45;
+}
+.task-progress { display: block; margin-top: 10rpx; color: #1f8cff; font-size: 22rpx; font-weight: 700; }
+.task-progress.success { color: #17a65a; }
+.task-action { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 10rpx; }
+.reward-chip {
+  padding: 4rpx 16rpx;
+  border-radius: 999rpx;
+  color: #ff8a00;
+  background: #fff5e8;
+  font-size: 22rpx;
+  font-weight: 800;
+}
+.task-btn {
+  min-width: 156rpx;
+  height: 68rpx;
+  padding: 0 20rpx;
+  border-radius: 999rpx;
+  color: #fff;
+  background: #1f8cff;
+  font-size: 25rpx;
+  font-weight: 800;
+  line-height: 68rpx;
+  text-align: center;
+}
+.task-btn.disabled { opacity: 0.5; }
+
+.empty-state {
+  margin-top: 60rpx;
+  padding: 60rpx 34rpx;
+  border-radius: 26rpx;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.empty-title { color: #172033; font-size: 32rpx; font-weight: 900; }
+.empty-desc { margin-top: 12rpx; color: #7f8896; font-size: 25rpx; line-height: 1.5; }
+.empty-action {
+  margin-top: 28rpx;
+  width: 220rpx;
+  height: 72rpx;
+  border-radius: 999rpx;
+  color: #fff;
+  background: #1f8cff;
+  font-size: 28rpx;
+  font-weight: 800;
+  line-height: 72rpx;
+}
+
+.rule-card {
+  margin-top: 22rpx;
+  padding: 28rpx;
+  border-radius: 24rpx;
+  background: #fff;
+}
+.rule-title { display: block; margin-bottom: 12rpx; color: #172033; font-size: 28rpx; font-weight: 800; }
+.rule-line {
+  display: block;
+  margin-top: 8rpx;
+  color: #7f8896;
+  font-size: 23rpx;
+  line-height: 1.6;
+}
+</style>
diff --git a/pages/profile/profile.vue b/pages/profile/profile.vue
index c58abe5..af03af5 100644
--- a/pages/profile/profile.vue
+++ b/pages/profile/profile.vue
@@ -1,73 +1,123 @@
 <template>
   <view class="profile">
-    <ai-nav-title title="AI在线-解放你的生产力" />
+    <ai-nav-title title="个人中心" />
 
     <scroll-view class="page-scroll" scroll-y>
       <view class="profile-content">
-        <view class="balance-card">
+        <view class="balance-card" :class="{ 'guest-card': !userStore.isLogin }">
           <image class="balance-texture" src="/static/profile/balance_texture.png" mode="aspectFit" />
-          <view class="balance-copy">
-            <text class="hello">{{ userStore.isLogin ? `Hi，${userStore.nickname}！` : 'Hi，手机微信昵称！' }}</text>
+          <view v-if="userStore.isLogin" class="balance-copy">
+            <text class="hello">{{ `Hi，${userStore.nickname || 'AI在线用户'}！` }}</text>
             <text class="balance-label">点数余额</text>
             <view class="balance-bottom">
-              <text class="balance-value">{{ userStore.isLogin ? userStore.pointsText : '123456' }}</text>
+              <text class="balance-value">{{ userStore.pointsText }}</text>
               <view class="balance-actions">
                 <view class="outline-btn" @click="go('bill')">账单</view>
                 <view class="solid-btn" @click="go('recharge')">充值</view>
               </view>
             </view>
           </view>
+          <view v-else class="guest-copy">
+            <view class="guest-main">
+              <view class="guest-avatar">
+                <up-icon name="account-fill" color="#2384f8" size="28" />
+              </view>
+              <view class="guest-text">
+                <text class="guest-title">登录 AI在线</text>
+                <text class="guest-description">同步点数、作品与创作记录</text>
+              </view>
+            </view>
+            <view class="guest-bottom">
+              <text class="guest-tip">登录后可跨设备查看创作数据</text>
+              <view class="login-btn" hover-class="login-btn--pressed" @click="requireLogin">
+                <text>立即登录</text>
+                <up-icon name="arrow-right" color="#2384f8" size="14" />
+              </view>
+            </view>
+          </view>
         </view>
 
-        <view class="menu-panel">
-          <view v-for="item in menus" :key="item.key" class="menu-row" @click="onMenu(item)">
-            <image class="menu-icon" :src="item.icon" mode="aspectFit" />
-            <text class="menu-name">{{ item.name }}</text>
-            <text v-if="item.hint" class="menu-hint">{{ item.hint }}</text>
-            <image class="arrow" src="/static/profile/icon_arrow.png" mode="aspectFit" />
+        <!-- 按用途分组，组间留白，避免一长条列表 -->
+        <view v-for="group in menuGroups" :key="group.key" class="menu-group">
+          <text class="group-title">{{ group.title }}</text>
+          <view class="menu-panel">
+            <view v-for="item in group.items" :key="item.key" class="menu-row" @click="onMenu(item)">
+              <view class="menu-icon" :style="{ background: item.iconBg }">
+                <up-icon :name="item.icon" :color="item.iconColor" size="20" />
+              </view>
+              <text class="menu-name">{{ item.name }}</text>
+              <text v-if="item.hint" class="menu-hint">{{ item.hint }}</text>
+              <up-icon name="arrow-right" color="#c3cddb" size="14" />
+            </view>
           </view>
         </view>
-
-        <view class="logout" @click="logout">退出登录</view>
       </view>
     </scroll-view>
   </view>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
-import { inviteApi } from '@/api/index.js'
+import { inviteApi, pointApi } from '@/api/index.js'
 import { useUserStore } from '@/store/user.js'
 import { useApp } from '@/utils/useApp.js'
 
 const userStore = useUserStore()
 const { toast } = useApp()
 
+// 图标统一用 uview-plus 的图标字体，不再各自维护 png
+const earnMenuConfig = {
+  key: 'earn',
+  name: '获得点数',
+  hint: '完成任务获得点数',
+  icon: 'gift',
+  iconColor: '#ff8a00',
+  iconBg: '#fff5e8',
+  auth: false
+}
+
 const inviteMenuConfig = {
   key: 'invite',
   name: '邀请好友',
   hint: '得100点分享奖励',
-  icon: '/static/profile/icon_invite.png',
+  icon: 'man-add',
+  iconColor: '#17a65a',
+  iconBg: '#eefaf3',
   auth: true
 }
 
-const menus = ref([
-  { key: 'account', name: '我的账号', hint: '提示文字#999', icon: '/static/profile/icon_account.png', auth: true },
-  { ...inviteMenuConfig },
-  { key: 'news', name: '前沿资讯', hint: '提示文字#999', icon: '/static/profile/icon_news.png', soon: true },
-  { key: 'tutorial', name: '使用教程', icon: '/static/profile/icon_tutorial.png', soon: true },
-  { key: 'official', name: '关注公众号', icon: '/static/profile/icon_official.png', soon: true },
-  { key: 'contact', name: '联系我们', icon: '/static/profile/icon_contact.png' },
-  { key: 'feedback', name: '意见反馈', hint: '得10点奖励', icon: '/static/profile/icon_feedback.png', soon: true },
-  { key: 'terms', name: '服务条款', icon: '/static/profile/icon_terms.png' },
-  { key: 'version', name: '当前版本', icon: '/static/profile/icon_version.png', soon: true }
-])
+// 福利组：签到、邀请与看广告都受后台开关控制，关掉就整项移除
+const benefitMenus = ref([{ ...inviteMenuConfig }])
+
+const serviceMenus = [
+  { key: 'official', name: '关注公众号', icon: 'weixin-fill', iconColor: '#07c160', iconBg: '#eafaf0' },
+  { key: 'contact', name: '联系我们', icon: 'kefu-ermai', iconColor: '#1f8cff', iconBg: '#eef7ff' },
+  { key: 'feedback', name: '意见反馈', icon: 'edit-pen', iconColor: '#7a5af8', iconBg: '#f3f0ff', auth: true }
+]
+
+// 服务条款、隐私政策、当前版本、退出登录都收进设置二级页
+const otherMenus = [
+  { key: 'setting', name: '设置', icon: 'setting', iconColor: '#64748b', iconBg: '#f1f5fa' }
+]
+
+const menuGroups = computed(() => {
+  const groups = []
+  if (benefitMenus.value.length) {
+    groups.push({ key: 'benefit', title: '福利', items: benefitMenus.value })
+  }
+  groups.push({ key: 'service', title: '服务与帮助', items: serviceMenus })
+  groups.push({ key: 'other', title: '其他', items: otherMenus })
+  return groups
+})
 
 const MENU_ROUTE = {
+  earn: '/pages/point/earn',
   invite: '/pages/invite/invite',
-  contact: '/pages/agreement/agreement?key=contact',
-  terms: '/pages/agreement/agreement?key=terms'
+  official: '/pages/my/wechat',
+  feedback: '/pages/my/feedback',
+  contact: '/pages/my/contact',
+  setting: '/pages/my/setting'
 }
 
 function requireLogin() {
@@ -92,9 +142,9 @@ function go(page) {
 }
 
 function syncInviteMenu(config = {}) {
-  const currentIndex = menus.value.findIndex((item) => item.key === 'invite')
+  const currentIndex = benefitMenus.value.findIndex((item) => item.key === 'invite')
   if (Number(config.status) !== 1) {
-    if (currentIndex > -1) menus.value.splice(currentIndex, 1)
+    if (currentIndex > -1) benefitMenus.value.splice(currentIndex, 1)
     return
   }
 
@@ -104,12 +154,13 @@ function syncInviteMenu(config = {}) {
     hint: points > 0 ? `得${points}点分享奖励` : '分享给好友'
   }
   if (currentIndex > -1) {
-    menus.value.splice(currentIndex, 1, item)
+    benefitMenus.value.splice(currentIndex, 1, item)
     return
   }
 
-  const accountIndex = menus.value.findIndex((menu) => menu.key === 'account')
-  menus.value.splice(accountIndex > -1 ? accountIndex + 1 : 0, 0, item)
+  // 排在「获得点数」之后，没有该入口时排在最前
+  const earnIndex = benefitMenus.value.findIndex((menu) => menu.key === 'earn')
+  benefitMenus.value.splice(earnIndex > -1 ? earnIndex + 1 : 0, 0, item)
 }
 
 async function loadProfile() {
@@ -129,22 +180,38 @@ async function loadInviteConfig() {
   } catch (e) {}
 }
 
-function logout() {
-  if (!userStore.isLogin) return requireLogin()
-  uni.showModal({
-    title: '提示',
-    content: '确定退出登录？',
-    success: (r) => {
-      if (r.confirm) {
-        userStore.clear()
-        toast('已退出登录')
-      }
-    }
-  })
+/** 所有免费任务都关闭时不显示入口，而不是显示后再提示不可用 */
+function syncEarnMenu(enabled, hint) {
+  const currentIndex = benefitMenus.value.findIndex((item) => item.key === 'earn')
+  if (!enabled) {
+    if (currentIndex > -1) benefitMenus.value.splice(currentIndex, 1)
+    return
+  }
+  const item = { ...earnMenuConfig, hint: hint || earnMenuConfig.hint }
+  if (currentIndex > -1) {
+    benefitMenus.value.splice(currentIndex, 1, item)
+    return
+  }
+  // 获得点数放在福利组最前面
+  benefitMenus.value.splice(0, 0, item)
+}
+
+async function loadEarnConfig() {
+  try {
+    const res = await pointApi.getEarnConfig()
+    const data = res.data || {}
+    const checkinPoints = Number((data.checkin && data.checkin.points_per_checkin) || 0)
+    const adPoints = Number((data.ad && data.ad.points_per_ad) || 0)
+    let hint = '完成任务获得点数'
+    if (data.checkin && data.checkin.enabled && checkinPoints > 0) hint = `每日签到获得${checkinPoints}点`
+    else if (data.ad && data.ad.enabled && adPoints > 0) hint = `看视频获得${adPoints}点`
+    syncEarnMenu(Boolean(data.entry_enabled), hint)
+  } catch (e) {}
 }
 
 onShow(() => {
   loadInviteConfig()
+  loadEarnConfig()
   loadProfile()
 })
 </script>
@@ -177,7 +244,10 @@ onShow(() => {
   overflow: hidden;
   background: linear-gradient(135deg, #3f94ff 0%, #2384f8 100%);
   box-sizing: border-box;
+}
 
+.guest-card {
+  background: linear-gradient(135deg, #4298ff 0%, #1677ef 100%);
 }
 
 .balance-texture {
@@ -198,6 +268,92 @@ onShow(() => {
   box-sizing: border-box;
 }
 
+.guest-copy {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  padding: 36rpx 42rpx 34rpx;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.guest-main {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.guest-avatar {
+  width: 84rpx;
+  height: 84rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 10rpx 24rpx rgba(16, 87, 174, 0.2);
+}
+
+.guest-text {
+  margin-left: 24rpx;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.guest-title {
+  color: #ffffff;
+  font-size: 34rpx;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.guest-description {
+  margin-top: 8rpx;
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 24rpx;
+  line-height: 1.4;
+}
+
+.guest-bottom {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20rpx;
+}
+
+.guest-tip {
+  color: rgba(255, 255, 255, 0.68);
+  font-size: 22rpx;
+  line-height: 1.35;
+}
+
+.login-btn {
+  min-width: 180rpx;
+  height: 64rpx;
+  padding: 0 24rpx 0 28rpx;
+  border-radius: 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6rpx;
+  flex-shrink: 0;
+  color: #2384f8;
+  font-size: 27rpx;
+  font-weight: 700;
+  background: #ffffff;
+  box-shadow: 0 10rpx 24rpx rgba(16, 87, 174, 0.18);
+  box-sizing: border-box;
+}
+
+.login-btn--pressed {
+  opacity: 0.84;
+  transform: scale(0.98);
+}
+
 .hello {
   max-width: 430rpx;
   color: #ffffff;
@@ -260,10 +416,19 @@ onShow(() => {
   background: rgba(255, 255, 255, 0.08);
 }
 
+.menu-group {
+  margin-top: 26rpx;
+}
+
+.group-title {
+  display: block;
+  margin: 0 8rpx 12rpx;
+  color: #8a95a6;
+  font-size: 23rpx;
+  font-weight: 800;
+}
+
 .menu-panel {
-  margin-top: 28rpx;
-  padding-top: 18rpx;
-  padding-bottom: 14rpx;
   border-radius: 21rpx;
   background: #ffffff;
   overflow: hidden;
@@ -272,20 +437,21 @@ onShow(() => {
 
 .menu-row {
   position: relative;
-  height: 100rpx;
-  padding: 0 27rpx 0 27rpx;
+  min-height: 108rpx;
+  padding: 20rpx 27rpx;
   display: flex;
   align-items: center;
   box-sizing: border-box;
 
+  /* 分隔线只在图标右侧起始，视觉上更整齐 */
   &::after {
     content: '';
     position: absolute;
-    left: 25rpx;
+    left: 105rpx;
     right: 24rpx;
     bottom: 0;
     height: 1rpx;
-    background: #eeeeee;
+    background: #f1f5fa;
   }
 
   &:last-child::after {
@@ -294,44 +460,33 @@ onShow(() => {
 }
 
 .menu-icon {
-  width: 34rpx;
-  height: 34rpx;
+  width: 68rpx;
+  height: 68rpx;
+  border-radius: 18rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
 }
 
 .menu-name {
-  margin-left: 25rpx;
-  color: #333333;
-  font-size: 28rpx;
-  line-height: 1;
+  margin-left: 22rpx;
+  color: #172033;
+  font-size: 29rpx;
+  line-height: 1.3;
   flex: 1;
   min-width: 0;
 }
 
 .menu-hint {
   margin-left: 20rpx;
-  max-width: 300rpx;
-  color: #999999;
-  font-size: 26rpx;
-  line-height: 1;
+  max-width: 280rpx;
+  color: #8a95a6;
+  font-size: 24rpx;
+  line-height: 1.3;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.arrow {
-  width: 14rpx;
-  height: 22rpx;
-  margin-left: 20rpx;
-  flex-shrink: 0;
-}
-
-.logout {
-  height: 104rpx;
-  color: #333333;
-  font-size: 27rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 </style>
diff --git a/pages/recharge/recharge.vue b/pages/recharge/recharge.vue
index 674bc0d..8a86dbb 100644
--- a/pages/recharge/recharge.vue
+++ b/pages/recharge/recharge.vue
@@ -26,6 +26,10 @@
         <text v-if="item.badge" class="badge">{{ item.badge }}</text>
         <text class="points">{{ item.points }}点</text>
         <text class="price">￥{{ item.price_yuan }}</text>
+        <view v-if="item.old_price_yuan" class="offer-row">
+          <text class="old-price">￥{{ item.old_price_yuan }}</text>
+          <text v-if="item.bonus_percent" class="bonus">多送{{ item.bonus_percent }}%</text>
+        </view>
       </view>
     </view>
 
@@ -339,6 +343,27 @@ $muted: #8b95a3;
     font-weight: 800;
     color: $accent;
   }
+  .offer-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8rpx;
+    min-height: 30rpx;
+    white-space: nowrap;
+  }
+  .old-price {
+    color: #9aa6b2;
+    font-size: 21rpx;
+    text-decoration: line-through;
+  }
+  .bonus {
+    padding: 3rpx 8rpx;
+    border-radius: 999rpx;
+    color: #159a54;
+    background: #edfdf4;
+    font-size: 19rpx;
+    font-weight: 900;
+  }
 }
 
 /* 确认充值 */
diff --git a/pages/tool/id-photo-detail.vue b/pages/tool/id-photo-detail.vue
new file mode 100644
index 0000000..e3cecc4
--- /dev/null
+++ b/pages/tool/id-photo-detail.vue
@@ -0,0 +1,451 @@
+<template>
+  <view class="page">
+    <scroll-view class="scroll" scroll-y>
+      <view class="wrap">
+        <view v-if="!loaded || !isSuccess" class="state-card">
+          <view v-if="!loaded || isPending" class="spinner"></view>
+          <text class="state-title">{{ stateTitle }}</text>
+          <text v-if="isPending && countDown > 0" class="count">{{ countDown }} S 后刷新</text>
+          <text v-if="loaded && !isPending" class="error">{{ detail.error_msg || '暂时无法读取证件照成品，请稍后重试' }}</text>
+          <view v-if="loaded && !isPending" class="retry-btn" hover-class="button-pressed" @click="createAgain">重新制作</view>
+        </view>
+
+        <template v-else>
+          <view class="result-card">
+            <view class="result-head">
+              <view>
+                <text class="eyebrow">FINISHED PHOTO</text>
+                <text class="result-title">{{ detail.spec_name || '证件照' }}</text>
+              </view>
+              <view class="dpi-chip">{{ detail.dpi || 300 }} DPI</view>
+            </view>
+            <view class="result-stage" @click="preview">
+              <image class="result-img" :src="detail.result_url" mode="widthFix" />
+            </view>
+            <text class="preview-tip">点击照片可查看大图</text>
+          </view>
+
+          <view class="info-card">
+            <text class="info-title">成品信息</text>
+            <view class="cell">
+              <text class="cell-label">证件照规格</text>
+              <text class="cell-content">{{ detail.spec_name || '-' }}</text>
+            </view>
+            <view class="cell">
+              <text class="cell-label">像素尺寸</text>
+              <text class="cell-content">{{ sizeText }}</text>
+            </view>
+            <view class="cell">
+              <text class="cell-label">背景颜色</text>
+              <view class="color-value">
+                <view class="color-dot" :style="{ backgroundColor: detail.background || '#438edb' }"></view>
+                <text>{{ String(detail.background || '#438EDB').toUpperCase() }}</text>
+              </view>
+            </view>
+            <view class="cell">
+              <text class="cell-label">画面优化</text>
+              <text class="cell-content">{{ beautyText }}</text>
+            </view>
+            <view class="cell">
+              <text class="cell-label">创建时间</text>
+              <text class="cell-content">{{ formatTime(detail.add_time) }}</text>
+            </view>
+          </view>
+        </template>
+      </view>
+    </scroll-view>
+
+    <view v-if="isSuccess" class="bottom-bar">
+      <view class="save-btn" hover-class="button-pressed" @click="download">
+        <up-icon name="download" color="#1f8cff" size="18" />
+        <text>保存照片</text>
+      </view>
+      <view class="main-btn" hover-class="button-pressed" @click="createAgain">再做一张</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
+import dayjs from 'dayjs'
+import { idPhotoApi } from '@/api/index.js'
+import { useApp } from '@/utils/useApp.js'
+
+const { toast } = useApp()
+const id = ref('')
+const detail = ref({ status: 0 })
+const loaded = ref(false)
+const countDown = ref(0)
+let timer = 0
+let countTimer = 0
+
+const isPending = computed(() => loaded.value && Number(detail.value.status) === 0)
+const isSuccess = computed(() => loaded.value && Number(detail.value.status) === 1 && Boolean(detail.value.result_url))
+const stateTitle = computed(() => {
+  if (!loaded.value) return '正在读取证件照'
+  if (isPending.value) return '证件照正在制作中'
+  if (Number(detail.value.status) < 0) return '本次制作失败'
+  return '证件照成品暂不可用'
+})
+const sizeText = computed(() => {
+  const width = Number(detail.value.width || 0)
+  const height = Number(detail.value.height || 0)
+  return width && height ? `${width} × ${height}px` : '-'
+})
+const beautyText = computed(() => detail.value.beauty === 'natural' ? '自然优化' : '关闭美化')
+
+onLoad((options = {}) => {
+  id.value = String(options.id || options.work || '')
+})
+
+onShow(() => loadDetail())
+onUnload(() => clearPolling())
+
+async function loadDetail() {
+  if (!id.value) {
+    detail.value = { status: -1, error_msg: '缺少证件照记录编号' }
+    loaded.value = true
+    return
+  }
+  clearPolling()
+  try {
+    const res = await idPhotoApi.getDetail({ photo_open_id: id.value })
+    detail.value = res.data || {}
+    loaded.value = true
+    if (Number(detail.value.status) === 0) waitNext()
+  } catch (e) {
+    detail.value = {
+      status: -1,
+      error_msg: (e && e.msg) || '记录加载失败'
+    }
+    loaded.value = true
+    toast((e && e.msg) || '记录加载失败')
+  }
+}
+
+function waitNext() {
+  clearPolling()
+  countDown.value = 3
+  countTimer = setInterval(() => {
+    countDown.value -= 1
+    if (countDown.value <= 0) clearInterval(countTimer)
+  }, 1000)
+  timer = setTimeout(loadDetail, 3000)
+}
+
+function clearPolling() {
+  clearTimeout(timer)
+  clearInterval(countTimer)
+  timer = 0
+  countTimer = 0
+}
+
+function formatTime(value) {
+  if (!value) return '-'
+  return dayjs(Number(value) * 1000).format('YYYY-MM-DD HH:mm')
+}
+
+function preview() {
+  if (!detail.value.result_url) return
+  uni.previewImage({ urls: [detail.value.result_url], current: detail.value.result_url })
+}
+
+function download() {
+  if (!detail.value.result_url) return
+  uni.showLoading({ title: '保存中...', mask: true })
+  uni.downloadFile({
+    url: detail.value.result_url,
+    success: (res) => {
+      if (res.statusCode !== 200) {
+        toast('图片下载失败')
+        return
+      }
+      uni.saveImageToPhotosAlbum({
+        filePath: res.tempFilePath,
+        success: () => toast('已保存到相册'),
+        fail: () => toast('保存失败，请检查相册权限')
+      })
+    },
+    fail: () => toast('图片下载失败'),
+    complete: () => uni.hideLoading()
+  })
+}
+
+function createAgain() {
+  const delta = getPageStackDelta('pages/tool/id-photo')
+  if (delta > 0) {
+    uni.navigateBack({ delta })
+    return
+  }
+  uni.navigateTo({ url: '/pages/tool/id-photo' })
+}
+
+function getPageStackDelta(routeName) {
+  const pages = getCurrentPages()
+  const index = pages.findIndex((item) => item.route === routeName)
+  return index >= 0 ? pages.length - 1 - index : -1
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #f4f7fb;
+}
+
+.scroll {
+  flex: 1;
+  height: 0;
+}
+
+.wrap {
+  padding: 28rpx 28rpx calc(150rpx + env(safe-area-inset-bottom));
+}
+
+.state-card,
+.result-card,
+.info-card {
+  border-radius: 24rpx;
+  background: #ffffff;
+  box-shadow: 0 10rpx 28rpx rgba(31, 52, 86, 0.05);
+  overflow: hidden;
+}
+
+.state-card {
+  min-height: 660rpx;
+  padding: 50rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.spinner {
+  width: 68rpx;
+  height: 68rpx;
+  margin-bottom: 28rpx;
+  border: 8rpx solid #e9edf5;
+  border-top-color: #1f8cff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.state-title {
+  color: #172033;
+  font-size: 32rpx;
+  font-weight: 800;
+}
+
+.count,
+.error {
+  margin-top: 18rpx;
+  color: #7f8896;
+  font-size: 25rpx;
+  line-height: 1.5;
+}
+
+.error {
+  color: #e74b43;
+}
+
+.retry-btn {
+  min-width: 210rpx;
+  height: 72rpx;
+  margin-top: 30rpx;
+  padding: 0 28rpx;
+  border-radius: 999rpx;
+  color: #ffffff;
+  background: #1f8cff;
+  font-size: 27rpx;
+  font-weight: 800;
+  line-height: 72rpx;
+  box-sizing: border-box;
+}
+
+.result-head {
+  padding: 26rpx 28rpx 22rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20rpx;
+}
+
+.eyebrow {
+  display: block;
+  color: #1f8cff;
+  font-size: 19rpx;
+  font-weight: 800;
+}
+
+.result-title {
+  display: block;
+  margin-top: 8rpx;
+  color: #172033;
+  font-size: 34rpx;
+  font-weight: 900;
+}
+
+.dpi-chip {
+  height: 48rpx;
+  padding: 0 18rpx;
+  border-radius: 999rpx;
+  color: #1f8cff;
+  background: #edf7ff;
+  font-size: 21rpx;
+  font-weight: 800;
+  line-height: 48rpx;
+  flex-shrink: 0;
+}
+
+.result-stage {
+  min-height: 520rpx;
+  padding: 30rpx;
+  background: repeating-linear-gradient(135deg, #edf3f9 0, #edf3f9 20rpx, #f8fbfd 20rpx, #f8fbfd 40rpx);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.result-img {
+  width: 520rpx;
+  max-width: 100%;
+  border-radius: 4rpx;
+  display: block;
+  box-shadow: 0 16rpx 34rpx rgba(23, 32, 51, 0.16);
+}
+
+.preview-tip {
+  display: block;
+  padding: 18rpx 28rpx 22rpx;
+  color: #8a95a6;
+  font-size: 22rpx;
+  text-align: center;
+}
+
+.info-card {
+  margin-top: 24rpx;
+  padding: 28rpx;
+}
+
+.info-title {
+  display: block;
+  margin-bottom: 14rpx;
+  color: #172033;
+  font-size: 31rpx;
+  font-weight: 800;
+}
+
+.cell {
+  min-height: 70rpx;
+  padding: 8rpx 0;
+  border-bottom: 1rpx solid #edf1f6;
+  display: flex;
+  align-items: center;
+  gap: 24rpx;
+  box-sizing: border-box;
+  font-size: 26rpx;
+}
+
+.cell:last-child {
+  border-bottom: 0;
+}
+
+.cell-label {
+  width: 160rpx;
+  color: #7f8896;
+  flex-shrink: 0;
+}
+
+.cell-content,
+.color-value {
+  flex: 1;
+  min-width: 0;
+  color: #172033;
+  text-align: right;
+}
+
+.color-value {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12rpx;
+}
+
+.color-dot {
+  width: 30rpx;
+  height: 30rpx;
+  border-radius: 50%;
+  border: 2rpx solid rgba(23, 32, 51, 0.12);
+  box-sizing: border-box;
+}
+
+.bottom-bar {
+  position: fixed;
+  z-index: 80;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 18rpx 28rpx calc(18rpx + env(safe-area-inset-bottom));
+  display: flex;
+  gap: 18rpx;
+  background: rgba(255, 255, 255, 0.97);
+  box-shadow: 0 -8rpx 24rpx rgba(35, 55, 90, 0.08);
+  box-sizing: border-box;
+}
+
+.save-btn,
+.main-btn {
+  height: 82rpx;
+  border-radius: 42rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 29rpx;
+  font-weight: 800;
+}
+
+.save-btn {
+  width: 240rpx;
+  gap: 10rpx;
+  color: #1f8cff;
+  background: #eef6ff;
+}
+
+.main-btn {
+  flex: 1;
+  color: #ffffff;
+  background: #1f8cff;
+  box-shadow: 0 12rpx 26rpx rgba(31, 140, 255, 0.2);
+}
+
+.button-pressed {
+  opacity: 0.82;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (min-width: 768px) {
+  .wrap {
+    width: 720px;
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
+
+  .bottom-bar {
+    left: 50%;
+    width: 720px;
+    transform: translateX(-50%);
+    border-left: 1px solid #e6edf5;
+    border-right: 1px solid #e6edf5;
+  }
+}
+</style>
diff --git a/pages/tool/id-photo-history.vue b/pages/tool/id-photo-history.vue
new file mode 100644
index 0000000..91201a1
--- /dev/null
+++ b/pages/tool/id-photo-history.vue
@@ -0,0 +1,554 @@
+<template>
+  <view class="page">
+    <scroll-view
+      class="scroll"
+      scroll-y
+      refresher-enabled
+      :refresher-triggered="refreshing"
+      @refresherrefresh="refresh"
+      @scrolltolower="loadMore"
+    >
+      <view class="wrap">
+        <view class="studio-head">
+          <view class="head-copy">
+            <text class="eyebrow">ID PHOTO RECORDS</text>
+            <text class="page-title">我的证件照</text>
+            <text class="page-desc">制作记录会自动保存，可随时查看成品、下载照片或继续制作。</text>
+          </view>
+          <view class="create-btn" hover-class="button-pressed" @click="goCreate">制作</view>
+        </view>
+
+        <view class="stats-row">
+          <view class="stat-card">
+            <text class="stat-num">{{ total || list.length }}</text>
+            <text class="stat-label">全部记录</text>
+          </view>
+          <view class="stat-card">
+            <text class="stat-num">{{ pendingCount }}</text>
+            <text class="stat-label">制作中</text>
+          </view>
+          <view class="stat-card">
+            <text class="stat-num">{{ successCount }}</text>
+            <text class="stat-label">已完成</text>
+          </view>
+        </view>
+
+        <view v-if="list.length" class="gallery">
+          <view v-for="item in list" :key="item.photo_open_id || item.id" class="work-card">
+            <view class="poster" hover-class="card-pressed" @click="openItem(item)">
+              <image v-if="item.cover" class="poster-img" :src="item.cover" mode="aspectFit" />
+              <view v-else class="poster-empty">
+                <up-icon name="photo" color="#8abff2" size="30" />
+              </view>
+
+              <view class="status-chip" :class="statusClass(item)">{{ item.status_text || statusText(item) }}</view>
+              <view v-if="isPending(item)" class="progress-mask">
+                <view class="spinner"></view>
+                <text>正在制作</text>
+              </view>
+              <view v-else-if="Number(item.status) < 0" class="failed-mask">
+                <text>{{ item.summary || '制作失败' }}</text>
+              </view>
+            </view>
+
+            <view class="card-info">
+              <text class="spec-name">{{ item.title || '证件照' }}</text>
+              <text class="spec-size">{{ item.subtitle || '标准证件照' }}</text>
+              <view class="time-line">
+                <text>{{ formatTime(item.add_time) }}</text>
+                <view class="delete-btn" hover-class="button-pressed" @click.stop="deleteItem(item)">删除</view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <view v-if="!list.length && !loading" class="empty-state">
+          <view class="empty-preview">
+            <view class="empty-photo">
+              <view class="empty-head"></view>
+              <view class="empty-body"></view>
+            </view>
+          </view>
+          <text class="empty-title">还没有证件照</text>
+          <text class="empty-desc">上传一张清晰正面照，制作符合规格的证件照。</text>
+          <view class="empty-action" hover-class="button-pressed" @click="goCreate">去制作</view>
+        </view>
+
+        <view v-if="loading" class="loading">{{ list.length ? '加载更多...' : '加载中...' }}</view>
+        <view v-if="list.length && list.length >= total && !loading" class="end-text">已经到底了</view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { onHide, onShow, onUnload } from '@dcloudio/uni-app'
+import dayjs from 'dayjs'
+import { idPhotoApi } from '@/api/index.js'
+import { useApp } from '@/utils/useApp.js'
+
+const { toast } = useApp()
+const list = ref([])
+const page = ref(1)
+const total = ref(0)
+const loading = ref(false)
+const refreshing = ref(false)
+let timer = 0
+
+const pendingCount = computed(() => list.value.filter((item) => isPending(item)).length)
+const successCount = computed(() => list.value.filter((item) => Number(item.status) === 1).length)
+
+onShow(() => refreshSilent())
+onHide(() => clearTimer())
+onUnload(() => clearTimer())
+
+function isPending(item) {
+  return Number(item.status) === 0
+}
+
+function formatTime(value) {
+  if (!value) return ''
+  return dayjs(Number(value) * 1000).format('YYYY-MM-DD HH:mm')
+}
+
+async function fetchList(reset = false) {
+  if (loading.value) {
+    finishRefresh()
+    return
+  }
+  loading.value = true
+  if (reset) page.value = 1
+  try {
+    const res = await idPhotoApi.getList({ page_no: page.value, page_size: 10 })
+    const rows = res.list || []
+    total.value = Number((res.data && res.data.total) || rows.length)
+    list.value = reset ? rows : list.value.concat(rows)
+    scheduleRefresh()
+  } catch (e) {
+    toast((e && e.msg) || '记录加载失败')
+  } finally {
+    loading.value = false
+    finishRefresh()
+  }
+}
+
+function scheduleRefresh() {
+  clearTimer()
+  if (list.value.some((item) => isPending(item))) {
+    timer = setTimeout(() => refreshSilent(), 3000)
+  }
+}
+
+function clearTimer() {
+  clearTimeout(timer)
+  timer = 0
+}
+
+function finishRefresh() {
+  refreshing.value = false
+  uni.stopPullDownRefresh()
+}
+
+function refresh() {
+  refreshing.value = true
+  refreshSilent()
+}
+
+function refreshSilent() {
+  page.value = 1
+  fetchList(true)
+}
+
+function loadMore() {
+  if (loading.value || list.value.length >= total.value) return
+  page.value += 1
+  fetchList()
+}
+
+function openItem(item) {
+  const id = item.photo_open_id || item.id
+  if (!id) return
+  uni.navigateTo({ url: `/pages/tool/id-photo-detail?id=${id}` })
+}
+
+function statusClass(item) {
+  if (isPending(item)) return 'pending'
+  if (Number(item.status) < 0) return 'failed'
+  return 'done'
+}
+
+function statusText(item) {
+  if (isPending(item)) return '制作中'
+  if (Number(item.status) < 0) return '失败'
+  return '完成'
+}
+
+function goCreate() {
+  const delta = getPageStackDelta('pages/tool/id-photo')
+  if (delta > 0) {
+    uni.navigateBack({ delta })
+    return
+  }
+  uni.navigateTo({ url: '/pages/tool/id-photo' })
+}
+
+function getPageStackDelta(routeName) {
+  const pages = getCurrentPages()
+  const index = pages.findIndex((item) => item.route === routeName)
+  return index >= 0 ? pages.length - 1 - index : -1
+}
+
+function deleteItem(item) {
+  const id = item.photo_open_id || item.id
+  if (!id) return
+  uni.showModal({
+    title: '温馨提示',
+    content: '是否确认删除该证件照记录？',
+    confirmText: '确认删除',
+    success: async (res) => {
+      if (!res.confirm) return
+      try {
+        await idPhotoApi.delete({ photo_open_id: id })
+        toast('删除成功')
+        refreshSilent()
+      } catch (e) {
+        toast((e && e.msg) || '删除失败')
+      }
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.page,
+.scroll {
+  height: 100vh;
+  background: #f6f8fc;
+}
+
+.wrap {
+  padding: 24rpx 28rpx calc(70rpx + env(safe-area-inset-bottom));
+}
+
+.studio-head {
+  padding: 30rpx;
+  border-radius: 26rpx;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  gap: 24rpx;
+  box-shadow: 0 10rpx 28rpx rgba(31, 52, 86, 0.05);
+}
+
+.head-copy {
+  flex: 1;
+  min-width: 0;
+}
+
+.eyebrow {
+  display: block;
+  color: #1f8cff;
+  font-size: 20rpx;
+  font-weight: 800;
+}
+
+.page-title {
+  display: block;
+  margin-top: 10rpx;
+  color: #172033;
+  font-size: 40rpx;
+  line-height: 1.2;
+  font-weight: 900;
+}
+
+.page-desc {
+  display: block;
+  margin-top: 12rpx;
+  color: #64748b;
+  font-size: 24rpx;
+  line-height: 1.5;
+}
+
+.create-btn {
+  width: 112rpx;
+  height: 68rpx;
+  border-radius: 999rpx;
+  color: #ffffff;
+  background: #1f8cff;
+  font-size: 26rpx;
+  line-height: 68rpx;
+  text-align: center;
+  font-weight: 800;
+  box-shadow: 0 12rpx 24rpx rgba(31, 140, 255, 0.22);
+  flex-shrink: 0;
+}
+
+.stats-row {
+  margin-top: 18rpx;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14rpx;
+}
+
+.stat-card {
+  padding: 20rpx 8rpx;
+  border-radius: 20rpx;
+  background: #ffffff;
+  text-align: center;
+  box-shadow: 0 8rpx 20rpx rgba(31, 52, 86, 0.04);
+}
+
+.stat-num,
+.stat-label,
+.spec-name,
+.spec-size,
+.empty-title,
+.empty-desc {
+  display: block;
+}
+
+.stat-num {
+  color: #172033;
+  font-size: 34rpx;
+  line-height: 1;
+  font-weight: 900;
+}
+
+.stat-label {
+  margin-top: 10rpx;
+  color: #7c8a9b;
+  font-size: 22rpx;
+}
+
+.gallery {
+  margin-top: 24rpx;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 22rpx;
+}
+
+.work-card {
+  min-width: 0;
+  border-radius: 24rpx;
+  background: #ffffff;
+  overflow: hidden;
+  box-shadow: 0 10rpx 28rpx rgba(31, 52, 86, 0.06);
+}
+
+.poster {
+  position: relative;
+  width: 100%;
+  height: 440rpx;
+  background: repeating-linear-gradient(135deg, #edf3f9 0, #edf3f9 18rpx, #f8fbfd 18rpx, #f8fbfd 36rpx);
+  overflow: hidden;
+}
+
+.poster-img,
+.poster-empty {
+  width: 100%;
+  height: 100%;
+}
+
+.poster-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-chip {
+  position: absolute;
+  left: 14rpx;
+  top: 14rpx;
+  height: 42rpx;
+  padding: 0 16rpx;
+  border-radius: 999rpx;
+  color: #ffffff;
+  font-size: 22rpx;
+  line-height: 42rpx;
+  font-weight: 800;
+  background: rgba(15, 23, 42, 0.48);
+}
+
+.status-chip.done { background: rgba(31, 140, 255, 0.92); }
+.status-chip.pending { background: rgba(249, 115, 22, 0.92); }
+.status-chip.failed { background: rgba(239, 68, 68, 0.92); }
+
+.progress-mask,
+.failed-mask {
+  position: absolute;
+  inset: 0;
+  padding: 24rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 26rpx;
+  text-align: center;
+  background: rgba(15, 23, 42, 0.52);
+}
+
+.failed-mask {
+  background: rgba(127, 29, 29, 0.72);
+  font-size: 24rpx;
+}
+
+.spinner {
+  width: 48rpx;
+  height: 48rpx;
+  margin-bottom: 18rpx;
+  border: 6rpx solid rgba(255, 255, 255, 0.45);
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.card-info {
+  padding: 18rpx;
+}
+
+.spec-name {
+  color: #172033;
+  font-size: 26rpx;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.spec-size {
+  margin-top: 6rpx;
+  color: #8994a5;
+  font-size: 21rpx;
+  line-height: 1.3;
+}
+
+.time-line {
+  margin-top: 12rpx;
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  color: #64748b;
+  font-size: 21rpx;
+}
+
+.time-line text {
+  flex: 1;
+  min-width: 0;
+}
+
+.delete-btn {
+  width: 74rpx;
+  height: 44rpx;
+  border-radius: 999rpx;
+  color: #ef4444;
+  background: #fff1f2;
+  font-size: 22rpx;
+  line-height: 44rpx;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.empty-state {
+  margin-top: 86rpx;
+  padding: 56rpx 34rpx;
+  border-radius: 28rpx;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  box-shadow: 0 10rpx 28rpx rgba(31, 52, 86, 0.05);
+}
+
+.empty-preview {
+  width: 150rpx;
+  height: 200rpx;
+  border-radius: 30rpx;
+  background: repeating-linear-gradient(135deg, #edf5fd 0, #edf5fd 14rpx, #f8fbff 14rpx, #f8fbff 28rpx);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-photo {
+  position: relative;
+  width: 88rpx;
+  height: 122rpx;
+  border-radius: 8rpx;
+  background: #438edb;
+  overflow: hidden;
+}
+
+.empty-head {
+  position: absolute;
+  left: 50%;
+  top: 24rpx;
+  width: 34rpx;
+  height: 34rpx;
+  margin-left: -17rpx;
+  border-radius: 50%;
+  background: #ffffff;
+}
+
+.empty-body {
+  position: absolute;
+  left: 50%;
+  bottom: -18rpx;
+  width: 78rpx;
+  height: 72rpx;
+  margin-left: -39rpx;
+  border-radius: 50% 50% 0 0;
+  background: #ffffff;
+}
+
+.empty-title {
+  margin-top: 28rpx;
+  color: #172033;
+  font-size: 32rpx;
+  font-weight: 900;
+}
+
+.empty-desc {
+  margin-top: 12rpx;
+  color: #64748b;
+  font-size: 25rpx;
+  line-height: 1.5;
+}
+
+.empty-action {
+  margin-top: 28rpx;
+  width: 220rpx;
+  height: 72rpx;
+  border-radius: 999rpx;
+  color: #ffffff;
+  background: #1f8cff;
+  font-size: 28rpx;
+  line-height: 72rpx;
+  font-weight: 800;
+}
+
+.loading,
+.end-text {
+  padding: 46rpx 0 20rpx;
+  color: #7c8a9b;
+  font-size: 24rpx;
+  text-align: center;
+}
+
+.button-pressed,
+.card-pressed {
+  opacity: 0.82;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (min-width: 768px) {
+  .wrap {
+    width: 720px;
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/pages/tool/id-photo.vue b/pages/tool/id-photo.vue
index 8d32d20..7464054 100644
--- a/pages/tool/id-photo.vue
+++ b/pages/tool/id-photo.vue
@@ -1,164 +1,281 @@
 <template>
   <view class="page">
-    <scroll-view class="scroll" scroll-y>
-      <view class="wrap">
-        <view class="hero-card id-hero">
-          <view class="hero-copy">
-            <text class="eyebrow">ID PHOTO STUDIO</text>
-            <text class="hero-title">快速制作标准证件照</text>
-            <text class="hero-desc">选择尺寸、背景和服装，生成适合报名、签证、证件使用的照片。</text>
-          </view>
-          <view class="hero-preview">
-            <view class="id-photo-sample bg-blue">
-              <view class="person-head"></view>
-              <view class="person-body"></view>
-            </view>
-            <view class="id-photo-sample bg-white">
-              <view class="person-head"></view>
-              <view class="person-body"></view>
-            </view>
+    <view class="content">
+      <view class="hero-card">
+        <view class="hero-copy">
+          <text class="eyebrow">SMART ID PHOTO</text>
+          <text class="hero-title">一张自拍，制作标准证件照</text>
+          <text class="hero-desc">上传一张清晰正面照，自动换好底色、裁成所需尺寸，几秒获得可直接下载使用的高清证件照。</text>
+          <view class="hero-tags">
+            <text>300 DPI</text>
+            <text>快速换底色</text>
           </view>
         </view>
+        <image
+          class="hero-image"
+          src="https://cdn.aionline.cc/ai/anime/id-photo-demo.jpg"
+          mode="aspectFill"
+        />
+      </view>
 
-        <view class="upload-card">
-          <view class="card-head">
-            <view>
-              <text class="card-title"><text class="required">*</text>上传图片</text>
-              <text class="card-desc">上传正面半身照，自动裁切为证件照</text>
-            </view>
-            <text class="card-tip">0/1</text>
-          </view>
-          <view class="upload-strip" @click="showTodo('请选择证件照图片')">
-            <view class="upload-thumb">
-              <text class="upload-plus">+</text>
-            </view>
-            <view class="upload-copy">
-              <text class="upload-title">选择一张清晰照片</text>
-              <text class="upload-sub">建议五官无遮挡、背景简单、光线均匀</text>
-            </view>
-            <view class="upload-action">上传</view>
+      <view id="id-photo-preview" class="id-panel preview-card">
+        <view class="card-head">
+          <view>
+            <text class="card-title">照片预览</text>
+            <text class="card-desc">{{ previewDescription }}</text>
           </view>
+          <view class="history-link" @click="goHistory">历史记录</view>
         </view>
 
-        <view class="section">
-          <view class="section-head">
-            <text class="tool-section-title">选尺寸</text>
-            <text class="section-tip">常用规格</text>
+        <view v-if="!localPreview" class="upload-zone" @click="choosePhoto">
+          <view class="upload-icon">
+            <view class="upload-arrow"></view>
           </view>
-          <view class="search-row">
-            <input class="search-input" placeholder="输入证件照名称" />
-            <view class="search-btn" @click="showTodo('尺寸搜索')">搜索</view>
+          <text class="upload-title">点击上传一张照片</text>
+          <text class="upload-desc">支持 JPG、PNG、WebP，不超过 10MB</text>
+          <view class="upload-button">选择照片</view>
+          <view class="photo-tips">
+            <view class="tip-item"><view class="tip-dot"></view><text>正面平视</text></view>
+            <view class="tip-item"><view class="tip-dot"></view><text>光线均匀</text></view>
+            <view class="tip-item"><view class="tip-dot"></view><text>单人半身</text></view>
           </view>
-          <scroll-view class="tab-scroll" scroll-x>
-            <view class="tab-list">
-              <view
-                v-for="tab in sizeTabs"
-                :key="tab.key"
-                class="tab-item"
-                :class="{ active: activeSizeTab === tab.key }"
-                @click="selectSizeTab(tab.key)"
-              >
-                {{ tab.name }}
-              </view>
-            </view>
-          </scroll-view>
-          <scroll-view class="size-scroll" scroll-x>
-            <view class="size-list">
-              <view
-                v-for="item in currentSizes"
-                :key="item.name"
-                class="size-card"
-                :class="{ active: activeSize === item.name }"
-                @click="activeSize = item.name"
-              >
-                <text class="size-name">{{ item.name }}</text>
-                <text class="size-meta">{{ item.pixel }}</text>
-                <text class="size-desc">{{ item.print }}</text>
+        </view>
+
+        <view v-else class="preview-area">
+          <view class="preview-stage">
+            <image
+              v-if="resultImage"
+              class="result-image"
+              :style="photoFrameStyle"
+              :src="resultImage"
+              mode="aspectFill"
+            />
+            <image v-else class="source-image" :src="localPreview" mode="aspectFit" />
+
+            <view v-if="creating" class="progress-mask">
+              <view class="progress-panel">
+                <view class="progress-top">
+                  <text class="progress-title">正在处理照片</text>
+                  <text class="progress-value">{{ progress }}%</text>
+                </view>
+                <view class="progress-track">
+                  <view class="progress-bar" :style="{ width: `${progress}%` }"></view>
+                </view>
+                <text class="progress-desc">
+                  {{ progressStage }} · 预计还需 {{ estimatedSeconds }} 秒
+                </text>
               </view>
             </view>
-          </scroll-view>
+          </view>
+
+          <view class="preview-meta">
+            <text>{{ selectedSpec ? `${selectedSpec.width} × ${selectedSpec.height}px` : photoMetaText }}</text>
+            <text v-if="result">已生成 {{ result.dpi || selectedSpec?.dpi || 300 }} DPI</text>
+            <text v-else>制作前不会上传原图</text>
+          </view>
+
+          <view v-if="errorMessage" class="error-box">
+            <text>{{ errorMessage }}</text>
+          </view>
+
+          <view class="preview-actions">
+            <view v-if="result" class="primary-action" @click="saveResult">保存照片</view>
+            <view class="soft-action" @click="choosePhoto">{{ result ? '制作新照片' : '更换照片' }}</view>
+          </view>
         </view>
+      </view>
 
-        <view class="section">
-          <view class="section-head">
-            <text class="tool-section-title">选背景</text>
-            <text class="section-tip">生成后可替换</text>
+      <view class="id-panel">
+        <view class="card-head">
+          <view>
+            <text class="card-title">选择规格</text>
+            <text class="card-desc">规格由后台统一配置，成品严格输出所选像素</text>
           </view>
-          <view class="bg-row">
+          <view class="dpi-badge">{{ selectedSpec?.dpi || 300 }} DPI</view>
+        </view>
+
+        <view class="search-box">
+          <view class="search-icon"></view>
+          <input
+            v-model="specKeyword"
+            class="search-input"
+            placeholder="搜索尺寸或用途"
+            placeholder-class="input-placeholder"
+          />
+          <text v-if="specKeyword" class="search-clear" @click="specKeyword = ''">×</text>
+        </view>
+
+        <scroll-view class="category-scroll" scroll-x :show-scrollbar="false">
+          <view class="category-list">
             <view
-              v-for="item in bgOptions"
-              :key="item.name"
-              class="bg-item"
-              :class="{ active: activeBg === item.name }"
-              @click="activeBg = item.name"
+              v-for="item in categories"
+              :key="item.key"
+              class="category-item"
+              :class="{ active: activeCategory === item.key }"
+              @click="activeCategory = item.key"
             >
-              <view class="bg-dot" :class="item.className"></view>
-              <text>{{ item.name }}</text>
+              {{ item.name }}
             </view>
           </view>
+        </scroll-view>
+
+        <view v-if="filteredSpecs.length" class="spec-grid">
+          <view
+            v-for="item in filteredSpecs"
+            :key="item.key"
+            class="spec-item"
+            :class="{ active: selectedSpecKey === item.key }"
+            @click="selectSpec(item)"
+          >
+            <view class="spec-name-row">
+              <text class="spec-name">{{ item.name }}</text>
+              <text v-if="item.hot" class="hot-badge">常用</text>
+            </view>
+            <text class="spec-pixel">{{ item.width }}×{{ item.height }}px</text>
+            <text class="spec-print">{{ item.print || item.print_size }}</text>
+          </view>
         </view>
+        <view v-else class="empty-spec">没有匹配的证件照规格</view>
+      </view>
 
-        <view class="section compact">
-          <view class="section-head">
-            <text class="tool-section-title">性别</text>
-            <text class="section-tip">用于服装推荐</text>
+      <view class="id-panel">
+        <view class="card-head">
+          <view>
+            <text class="card-title">背景与自然优化</text>
+            <text class="card-desc">换色与微调不重复扣点，已生成照片可快速应用</text>
           </view>
-          <view class="chip-row">
-            <view
-              v-for="item in genderOptions"
-              :key="item"
-              class="chip"
-              :class="{ active: activeGender === item }"
-              @click="activeGender = item"
-            >
-              {{ item }}
+          <text v-if="result && settingsDirty" class="dirty-badge">待应用</text>
+        </view>
+
+        <text class="field-label">背景颜色</text>
+        <view class="background-grid">
+          <view
+            v-for="item in backgrounds"
+            :key="item.key"
+            class="background-item"
+            :class="{ active: settings.background === item.color.toLowerCase() }"
+            @click="selectBackground(item.color)"
+          >
+            <view class="color-dot" :class="{ light: item.light }" :style="{ background: item.color }">
+              <view v-if="settings.background === item.color.toLowerCase()" class="check-mark"></view>
             </view>
+            <text>{{ item.name }}</text>
           </view>
         </view>
 
-        <view class="section compact">
-          <view class="section-head">
-            <text class="tool-section-title">选服装</text>
-            <text class="section-tip">可选</text>
-          </view>
-          <view class="chip-row">
-            <view
-              v-for="item in outfitOptions"
-              :key="item"
-              class="chip"
-              :class="{ active: activeOutfit === item }"
-              @click="activeOutfit = item"
-            >
-              {{ item }}
+        <text class="field-label beauty-label">画面优化</text>
+        <view class="beauty-grid">
+          <view
+            v-for="item in beautyOptions"
+            :key="item.key"
+            class="beauty-item"
+            :class="{ active: settings.beauty === item.key }"
+            @click="selectBeauty(item.key)"
+          >
+            <view class="beauty-radio"><view></view></view>
+            <view>
+              <text class="beauty-name">{{ item.name }}</text>
+              <text class="beauty-desc">{{ item.desc }}</text>
             </view>
           </view>
         </view>
 
-        <view class="section">
-          <view class="section-head">
-            <text class="tool-section-title">描述词</text>
-            <text class="section-tip">可补充要求</text>
+        <view v-if="result" class="adjust-section">
+          <view class="adjust-head">
+            <view>
+              <text class="field-label">构图微调</text>
+              <text class="adjust-help">拖动后点击应用，不会重新抠图或扣点</text>
+            </view>
+            <text class="reset-link" @click="resetAdjustments">恢复默认</text>
           </view>
-          <textarea class="textarea" placeholder="如自然美颜、肤色更均匀、保留本人特征等"></textarea>
-          <view class="chip-row keyword-row">
-            <view v-for="item in keywordOptions" :key="item" class="keyword-chip" @click="showTodo(`添加 ${item}`)">
-              {{ item }}
+
+          <view class="slider-row">
+            <view class="slider-meta">
+              <text>人物大小</text>
+              <text>{{ Math.round(settings.scale * 100) }}%</text>
+            </view>
+            <slider
+              :value="settings.scale"
+              :min="0.75"
+              :max="1.4"
+              :step="0.01"
+              active-color="#168cff"
+              background-color="#e6edf5"
+              block-color="#168cff"
+              :block-size="18"
+              @changing="updateSlider('scale', $event)"
+              @change="updateSlider('scale', $event)"
+            />
+          </view>
+
+          <view class="slider-row">
+            <view class="slider-meta">
+              <text>水平位置</text>
+              <text>{{ adjustmentText(settings.offset_x, '左', '右') }}</text>
             </view>
+            <slider
+              :value="settings.offset_x"
+              :min="-1"
+              :max="1"
+              :step="0.01"
+              active-color="#168cff"
+              background-color="#e6edf5"
+              block-color="#168cff"
+              :block-size="18"
+              @changing="updateSlider('offset_x', $event)"
+              @change="updateSlider('offset_x', $event)"
+            />
+          </view>
+
+          <view class="slider-row">
+            <view class="slider-meta">
+              <text>垂直位置</text>
+              <text>{{ adjustmentText(settings.offset_y, '上', '下') }}</text>
+            </view>
+            <slider
+              :value="settings.offset_y"
+              :min="-1"
+              :max="1"
+              :step="0.01"
+              active-color="#168cff"
+              background-color="#e6edf5"
+              block-color="#168cff"
+              :block-size="18"
+              @changing="updateSlider('offset_y', $event)"
+              @change="updateSlider('offset_y', $event)"
+            />
+          </view>
+
+          <view
+            class="apply-adjust"
+            :class="{ disabled: !settingsDirty || rerendering }"
+            @click="applyAdjustments"
+          >
+            {{ rerendering ? '正在快速应用...' : '应用调整' }}
           </view>
         </view>
       </view>
-    </scroll-view>
+    </view>
 
     <view class="bottom-bar">
-      <view class="balance">
-        <text class="balance-copy">{{ balanceText }}</text>
-        <view v-if="isBalanceInsufficient" class="recharge-link" @click="goRecharge">去充值</view>
+      <view class="billing-copy">
+        <text class="billing-label">{{ billingLabel }}</text>
+        <text v-if="billingSubtext" class="billing-sub">{{ billingSubtext }}</text>
       </view>
-      <view class="buttons">
-        <view class="history-btn" @click="showTodo('历史记录')">历史记录</view>
-        <view class="submit-btn" @click="showTodo('证件照制作')">
-          <image class="submit-icon" src="/static/icons/bolt.svg" mode="aspectFit" />
-          <text>{{ submitText }}</text>
+      <view class="bottom-actions">
+        <view class="history-button" @click="goHistory">历史记录</view>
+        <view
+          class="submit-button"
+          :class="{ disabled: primaryDisabled }"
+          @click="handlePrimaryAction"
+        >
+          <image
+            v-if="!creating && !rerendering && !result"
+            class="submit-icon"
+            src="/static/icons/bolt.svg"
+            mode="aspectFit"
+          />
+          <text>{{ primaryText }}</text>
         </view>
       </view>
     </view>
@@ -166,632 +283,1451 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
-import { onLoad, onShow } from '@dcloudio/uni-app'
-import { billingApi, userApi } from '@/api/index.js'
+import { computed, nextTick, reactive, ref } from 'vue'
+import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
+import { idPhotoApi } from '@/api/index.js'
+import { createIdPhoto } from '@/utils/upload.js'
+import { guid } from '@/utils/util.js'
 import { useUserStore } from '@/store/user.js'
 import { useApp } from '@/utils/useApp.js'
 
-const userStore = useUserStore()
-const { toast } = useApp()
-
-const activeSizeTab = ref('common')
-const activeSize = ref('小二寸')
-const activeBg = ref('蓝色')
-const activeGender = ref('先生')
-const activeOutfit = ref('不换装')
-const balance = ref({ points: 0 })
-const quote = ref({ points: 0 })
-const appKey = 'id-photo'
-
-const sizeTabs = [
-  { key: 'common', name: '常用尺寸' },
-  { key: 'exam', name: '考试证照' },
-  { key: 'passport', name: '护照签证' },
-  { key: 'personal', name: '个人证件' }
+const STANDARD_BACKGROUNDS = [
+  { key: 'blue', name: '常用蓝', color: '#438edb' },
+  { key: 'white', name: '纯白', color: '#ffffff' },
+  { key: 'certificate-red', name: '证件红', color: '#e60012' },
+  { key: 'government-blue', name: '政务蓝', color: '#0066cc' },
+  { key: 'office-blue', name: '柔和蓝', color: '#5b9bd5' },
+  { key: 'visa-blue', name: '签证蓝', color: '#99ccff' },
+  { key: 'soft-white', name: '浅灰白', color: '#f5f5f5' },
+  { key: 'light-gray', name: '浅灰', color: '#c8c8c8' },
+  { key: 'bright-red', name: '正红', color: '#ff0000' },
+  { key: 'dark-red', name: '暗红', color: '#dc143c' }
+]
+const FALLBACK_BEAUTY = [
+  { key: 'none', name: '关闭美化', desc: '保留原始肤色与细节' },
+  { key: 'natural', name: '自然优化', desc: '轻微提亮、降噪和锐化' }
 ]
+const ERROR_MESSAGES = {
+  NO_FACE: '没有检测到清晰人脸，请上传正面、无遮挡的照片',
+  MULTIPLE_FACES: '照片中检测到多张人脸，请上传单人照片',
+  FACE_TOO_SMALL: '人脸在画面中太小，请上传更清晰的半身照',
+  FACE_TILTED: '头部倾斜角度较大，请上传正面平视照片',
+  QUEUE_FULL: '当前制作人数较多，请稍后再试',
+  ID_PHOTO_PROCESSING: '这张照片正在制作中，请勿重复提交',
+  INVALID_FACE_DATA: '人脸定位失败，请更换一张清晰照片'
+}
 
-const sizeGroups = {
-  common: [
-    { name: '自定义尺寸', pixel: '满足各类需求', print: '按需设置' },
-    { name: '小二寸', pixel: '413x531px', print: '35x45mm' },
-    { name: '一寸', pixel: '295x413px', print: '25x35mm' },
-    { name: '小一寸', pixel: '260x378px', print: '22x32mm' },
-    { name: '大二寸', pixel: '413x626px', print: '35x53mm' },
-    { name: '二寸', pixel: '413x579px', print: '35x49mm' }
-  ],
-  exam: [
-    { name: '教师资格证', pixel: '295x413px', print: '25x35mm' },
-    { name: '英语四六级', pixel: '144x192px', print: '33x48mm' },
-    { name: '计算机考试', pixel: '144x192px', print: '33x48mm' },
-    { name: '普通话测试', pixel: '390x567px', print: '33x48mm' }
-  ],
-  passport: [
-    { name: '护照', pixel: '390x567px', print: '33x48mm' },
-    { name: '美国签证', pixel: '600x600px', print: '51x51mm' },
-    { name: '日本签证', pixel: '413x531px', print: '35x45mm' },
-    { name: '韩国签证', pixel: '413x531px', print: '35x45mm' }
-  ],
-  personal: [
-    { name: '标准证件照', pixel: '462x612px', print: '35x48mm' },
-    { name: '入学照片', pixel: '295x413px', print: '25x35mm' },
-    { name: '离婚证照片', pixel: '413x531px', print: '35x45mm' },
-    { name: '微信头像', pixel: '1000x1000px', print: '85x85mm' }
-  ]
-}
-
-const currentSizes = computed(() => sizeGroups[activeSizeTab.value] || [])
-const currentPoints = computed(() => Number(balance.value.points || balance.value.point_balance || 0))
-const currentCost = computed(() => Number(quote.value.points || 0))
-const balanceText = computed(() => {
-  const cost = currentCost.value
-  if (!userStore.isLogin) return cost ? `证件照 · ${cost}点/次` : '证件照'
-  return cost ? `余额${currentPoints.value}点 · 预计消耗${cost}点` : `余额${currentPoints.value}点`
+const userStore = useUserStore()
+const { toast } = useApp()
+const categories = ref([])
+const specs = ref([])
+const backgrounds = ref(mergeBackgrounds())
+const beautyOptions = ref(FALLBACK_BEAUTY)
+const billing = ref({})
+const configLoading = ref(true)
+const activeCategory = ref('common')
+const selectedSpecKey = ref('')
+const specKeyword = ref('')
+const localPreview = ref('')
+const localFileInfo = ref({})
+const result = ref(null)
+const resultImage = ref('')
+const errorMessage = ref('')
+const creating = ref(false)
+const rerendering = ref(false)
+const progress = ref(0)
+const estimatedSeconds = ref(12)
+const settingsDirty = ref(false)
+const settings = reactive({
+  background: '#438edb',
+  beauty: 'natural',
+  scale: 1,
+  offset_x: 0,
+  offset_y: 0
 })
-const isBalanceInsufficient = computed(() => userStore.isLogin && currentCost.value > 0 && currentPoints.value < currentCost.value)
-const submitText = computed(() => currentCost.value ? `立即制作 · ${currentCost.value}点` : '立即制作')
-
-const bgOptions = [
-  { name: '蓝色', className: 'blue' },
-  { name: '白色', className: 'white' },
-  { name: '红色', className: 'red' },
-  { name: '深蓝', className: 'navy' },
-  { name: '浅蓝渐变', className: 'gradient-blue' },
-  { name: '深色渐变', className: 'gradient-dark' }
-]
-const genderOptions = ['先生', '女士', '小男孩', '小女孩']
-const outfitOptions = ['不换装', '白衬衣', '浅蓝色衬衣', '西装', '休闲装']
-const keywordOptions = ['磨皮', '去皱', '瘦脸']
 
-onLoad(() => {
-  loadBillingConfig()
+let progressTimer = 0
+let progressStartedAt = 0
+let initialWorkId = ''
+let initialized = false
+
+const selectedSpec = computed(() => {
+  const configured = specs.value.find((item) => item.key === selectedSpecKey.value)
+  if (configured) return configured
+  if (!result.value) return null
+  return normalizeSpec({
+    key: result.value.spec_key,
+    name: result.value.spec_name,
+    width: result.value.width,
+    height: result.value.height,
+    dpi: result.value.dpi
+  })
+})
+const filteredSpecs = computed(() => {
+  const keyword = specKeyword.value.trim().toLowerCase()
+  return specs.value.filter((item) => {
+    const categoryMatched = keyword || item.category === activeCategory.value
+    const keywordMatched = !keyword || `${item.name} ${item.width} ${item.height} ${item.print || item.print_size}`.toLowerCase().includes(keyword)
+    return categoryMatched && keywordMatched
+  })
+})
+const quotePoints = computed(() => Number(billing.value.quote?.points || 0))
+const balancePoints = computed(() => {
+  const value = billing.value.balance?.points ?? billing.value.balance?.point_balance
+  return value === undefined || value === null ? Number(userStore.balance || 0) : Number(value)
+})
+const isFreeUsage = computed(() => !configLoading.value && Boolean(billing.value.quote) && quotePoints.value === 0)
+const insufficient = computed(() => (
+  userStore.isLogin &&
+  quotePoints.value > 0 &&
+  balancePoints.value >= 0 &&
+  balancePoints.value < quotePoints.value
+))
+const primaryDisabled = computed(() => (
+  creating.value ||
+  rerendering.value ||
+  (userStore.isLogin && configLoading.value)
+))
+const primaryText = computed(() => {
+  if (creating.value) return `制作中 ${progress.value}%`
+  if (rerendering.value) return '正在应用'
+  if (result.value) return '保存证件照'
+  if (!userStore.isLogin) {
+    if (isFreeUsage.value) return '登录后制作 · 免费'
+    return quotePoints.value > 0 ? `登录后制作 · ${quotePoints.value}点` : '登录后制作'
+  }
+  if (configLoading.value) return '正在读取配置'
+  if (isFreeUsage.value) return '免费制作'
+  return '立即生成'
+})
+const billingLabel = computed(() => {
+  if (isFreeUsage.value) return '免费使用'
+  if (configLoading.value) return '正在读取价格'
+  if (!userStore.isLogin) return quotePoints.value ? `${quotePoints.value}点 / 次` : '登录后制作'
+  return `本次 ${quotePoints.value}点`
+})
+const billingSubtext = computed(() => {
+  if (isFreeUsage.value) return '制作成功后可直接保存'
+  if (!userStore.isLogin || quotePoints.value <= 0) return ''
+  return insufficient.value ? `余额 ${balancePoints.value}点，点数不足` : `当前余额 ${balancePoints.value}点`
+})
+const previewDescription = computed(() => {
+  if (result.value) return '已完成，可继续换底色或微调构图'
+  if (localPreview.value) return '确认规格与背景后开始制作'
+  return '上传清晰正面照片可获得更稳定的效果'
+})
+const photoMetaText = computed(() => {
+  const width = Number(localFileInfo.value.width || 0)
+  const height = Number(localFileInfo.value.height || 0)
+  return width && height ? `原图 ${width} × ${height}px` : '原图已就绪'
+})
+const progressStage = computed(() => {
+  if (progress.value < 25) return '正在上传原图'
+  if (progress.value < 72) return '正在识别人像并抠图'
+  if (progress.value < 94) return '正在换色与标准裁剪'
+  return '正在保存高清成品'
+})
+const photoRatio = computed(() => {
+  const width = Number(result.value?.width || selectedSpec.value?.width || 295)
+  const height = Number(result.value?.height || selectedSpec.value?.height || 413)
+  return width > 0 && height > 0 ? width / height : 295 / 413
+})
+const photoFrameStyle = computed(() => {
+  const maxWidth = 590
+  const maxHeight = 620
+  let width = maxWidth
+  let height = width / photoRatio.value
+  if (height > maxHeight) {
+    height = maxHeight
+    width = height * photoRatio.value
+  }
+  return {
+    width: `${Math.round(width)}rpx`,
+    height: `${Math.round(height)}rpx`
+  }
+})
+onLoad((options = {}) => {
+  initialWorkId = String(options.work || '')
+  initialize()
 })
 
 onShow(() => {
-  if (userStore.isLogin) loadBalance()
-  loadBillingConfig()
+  if (!initialized) return
+  if (userStore.isLogin) {
+    refreshBalance()
+    if (initialWorkId && !result.value) loadDetail(initialWorkId)
+  }
+  loadConfig(false)
 })
 
-async function loadBalance() {
-  try {
-    const res = await userApi.getBalance()
-    balance.value = res.data || {}
-  } catch (e) {}
+onUnload(() => {
+  clearProgress()
+})
+
+async function initialize() {
+  await loadConfig(true)
+  if (initialWorkId) await loadDetail(initialWorkId)
+  initialized = true
 }
 
-async function loadBillingConfig() {
+async function loadConfig(showError = false) {
+  configLoading.value = true
   try {
-    const res = await billingApi.getConfig({ app_key: appKey, image_count: 1 })
+    const res = await idPhotoApi.getConfig({ image_count: 1 })
     const data = res.data || {}
-    quote.value = data.quote || {}
-    if (data.balance) balance.value = data.balance
-  } catch (e) {}
-}
-
-function goRecharge() {
-  uni.navigateTo({ url: '/pages/recharge/recharge' })
-}
-
-function showTodo(name) {
-  toast(`${name}逻辑待接入`)
-}
-
-function selectSizeTab(key) {
-  activeSizeTab.value = key
-  const list = sizeGroups[key] || []
-  if (list.length) activeSize.value = list[0].name
+    categories.value = Array.isArray(data.categories) ? data.categories : []
+    specs.value = Array.isArray(data.specs) ? data.specs.map(normalizeSpec) : []
+    backgrounds.value = mergeBackgrounds(data.backgrounds)
+    beautyOptions.value = Array.isArray(data.beauty_options) && data.beauty_options.length
+      ? data.beauty_options
+      : FALLBACK_BEAUTY
+    billing.value = data.billing || {}
+
+    if (!activeCategory.value || !categories.value.some((item) => item.key === activeCategory.value)) {
+      activeCategory.value = categories.value[0]?.key || 'common'
+    }
+    if (
+      !selectedSpecKey.value ||
+      (!result.value && !specs.value.some((item) => item.key === selectedSpecKey.value))
+    ) {
+      selectedSpecKey.value = specs.value.find((item) => item.key === 'one-inch')?.key || specs.value[0]?.key || ''
+    }
+  } catch (e) {
+    if (showError) toast(e.msg || '证件照配置加载失败')
+  } finally {
+    configLoading.value = false
+  }
+}
+
+function normalizeSpec(item = {}) {
+  return {
+    ...item,
+    key: item.key || item.spec_key,
+    width: Number(item.width || 0),
+    height: Number(item.height || 0),
+    dpi: Number(item.dpi || 300),
+    hot: Number(item.hot ?? item.is_hot ?? 0)
+  }
+}
+
+function mergeBackgrounds(configured = []) {
+  const list = STANDARD_BACKGROUNDS.concat(Array.isArray(configured) ? configured : [])
+  const used = new Set()
+  return list
+    .map((item, index) => ({
+      ...item,
+      key: item.key || `background-${index}`,
+      color: String(item.color || '').toLowerCase(),
+      light: isLightBackground(item.color)
+    }))
+    .filter((item) => {
+      if (!/^#[0-9a-f]{6}$/.test(item.color) || used.has(item.color)) return false
+      used.add(item.color)
+      return true
+    })
+}
+
+function isLightBackground(color) {
+  const value = String(color || '').replace('#', '')
+  if (!/^[0-9a-fA-F]{6}$/.test(value)) return false
+  const red = parseInt(value.slice(0, 2), 16)
+  const green = parseInt(value.slice(2, 4), 16)
+  const blue = parseInt(value.slice(4, 6), 16)
+  return red * 0.299 + green * 0.587 + blue * 0.114 > 185
+}
+
+async function loadDetail(photoOpenId) {
+  if (!requireLogin()) return
+  try {
+    uni.showLoading({ mask: true, title: '加载照片...' })
+    const res = await idPhotoApi.getDetail({ photo_open_id: photoOpenId })
+    await applyResultData(res.data || {})
+  } catch (e) {
+    toast(e.msg || '照片记录加载失败')
+  } finally {
+    uni.hideLoading()
+  }
+}
+
+function choosePhoto() {
+  if (creating.value || rerendering.value) return
+  uni.chooseImage({
+    count: 1,
+    sizeType: ['original'],
+    sourceType: ['album', 'camera'],
+    success: async (res) => {
+      const file = res.tempFiles?.[0] || {}
+      if (Number(file.size || 0) > 10 * 1024 * 1024) {
+        toast('图片大小不能超过 10MB')
+        return
+      }
+      const path = res.tempFilePaths?.[0]
+      if (!path) return
+      let imageInfo = {}
+      try {
+        imageInfo = await getImageInfo(path)
+      } catch (e) {}
+      localPreview.value = path
+      localFileInfo.value = {
+        name: file.name || '',
+        size: Number(file.size || 0),
+        width: Number(imageInfo.width || 0),
+        height: Number(imageInfo.height || 0)
+      }
+      result.value = null
+      resultImage.value = ''
+      errorMessage.value = ''
+      settingsDirty.value = false
+      settings.scale = 1
+      settings.offset_x = 0
+      settings.offset_y = 0
+    }
+  })
+}
+
+function getImageInfo(src) {
+  return new Promise((resolve, reject) => {
+    uni.getImageInfo({ src, success: resolve, fail: reject })
+  })
+}
+
+function selectSpec(item) {
+  if (result.value && result.value.spec_key !== item.key) {
+    toast('已生成照片的规格不可直接修改，请选择“制作新照片”')
+    return
+  }
+  selectedSpecKey.value = item.key
+}
+
+function selectBackground(color) {
+  settings.background = String(color || '#438edb').toLowerCase()
+  markDirty()
+}
+
+function selectBeauty(key) {
+  settings.beauty = key
+  markDirty()
+}
+
+function updateSlider(key, event) {
+  settings[key] = Number(event.detail.value)
+  markDirty()
+}
+
+function resetAdjustments() {
+  settings.scale = 1
+  settings.offset_x = 0
+  settings.offset_y = 0
+  markDirty()
+}
+
+function markDirty() {
+  if (result.value) settingsDirty.value = true
+}
+
+function adjustmentText(value, negativeLabel, positiveLabel) {
+  const number = Number(value || 0)
+  if (Math.abs(number) < 0.01) return '居中'
+  return `${number < 0 ? negativeLabel : positiveLabel} ${Math.round(Math.abs(number) * 100)}%`
+}
+
+function handlePrimaryAction() {
+  if (primaryDisabled.value) return
+  if (result.value) {
+    saveResult()
+    return
+  }
+  if (!requireLogin()) return
+  if (!localPreview.value) {
+    choosePhoto()
+    return
+  }
+  createPhoto()
+}
+
+async function createPhoto() {
+  if (!requireLogin()) return
+  if (!selectedSpec.value) {
+    toast('请选择证件照规格')
+    return
+  }
+  if (insufficient.value) {
+    showInsufficientModal()
+    return
+  }
+
+  creating.value = true
+  errorMessage.value = ''
+  startProgress()
+  try {
+    const res = await createIdPhoto(localPreview.value, {
+      request_id: guid(),
+      spec_key: selectedSpec.value.key,
+      background: settings.background,
+      beauty: settings.beauty,
+      scale: settings.scale,
+      offset_x: settings.offset_x,
+      offset_y: settings.offset_y
+    })
+    progress.value = 100
+    estimatedSeconds.value = 0
+    await applyResultData(res.data || {})
+    refreshBalance()
+    toast('证件照制作完成')
+  } catch (e) {
+    handleApiError(e, '证件照制作失败，请稍后重试')
+  } finally {
+    creating.value = false
+    setTimeout(clearProgress, 260)
+  }
+}
+
+async function applyAdjustments() {
+  if (!result.value || !settingsDirty.value || rerendering.value) return
+  if (!requireLogin()) return
+  rerendering.value = true
+  errorMessage.value = ''
+  try {
+    const res = await idPhotoApi.rerender({
+      photo_open_id: result.value.photo_open_id,
+      background: settings.background,
+      beauty: settings.beauty,
+      scale: settings.scale,
+      offset_x: settings.offset_x,
+      offset_y: settings.offset_y
+    })
+    await applyResultData(res.data || {}, true)
+    settingsDirty.value = false
+    await scrollToPreview()
+    toast('调整已应用')
+    syncPersistedResult(result.value.photo_open_id)
+  } catch (e) {
+    handleApiError(e, '应用调整失败，请稍后重试')
+  } finally {
+    rerendering.value = false
+  }
+}
+
+async function applyResultData(data = {}, keepSelectedSpec = false) {
+  result.value = { ...(result.value || {}), ...data }
+  resultImage.value = data.result_url || data.answer || data.cover || resultImage.value
+  localPreview.value = data.source_url || data.original || localPreview.value
+  if (!keepSelectedSpec && data.spec_key) selectedSpecKey.value = data.spec_key
+  if (data.background) settings.background = String(data.background).toLowerCase()
+  if (data.beauty) settings.beauty = data.beauty
+  settings.scale = Number(data.scale ?? settings.scale ?? 1)
+  settings.offset_x = Number(data.offset_x ?? settings.offset_x ?? 0)
+  settings.offset_y = Number(data.offset_y ?? settings.offset_y ?? 0)
+  settingsDirty.value = false
+}
+
+function handleApiError(error, fallback) {
+  if (Number(error?.code) === 1009) {
+    userStore.clear()
+    requireLogin()
+    return
+  }
+  const errorCode = error?.data?.error || error?.error
+  errorMessage.value = ERROR_MESSAGES[errorCode] || error?.msg || fallback
+  toast(errorMessage.value)
+}
+
+function startProgress() {
+  clearProgress()
+  progress.value = 6
+  estimatedSeconds.value = 12
+  progressStartedAt = Date.now()
+  progressTimer = setInterval(() => {
+    const elapsed = Date.now() - progressStartedAt
+    const next = Math.round(8 + (1 - Math.exp(-elapsed / 6500)) * 88)
+    progress.value = Math.min(96, Math.max(progress.value, next))
+    estimatedSeconds.value = Math.max(1, Math.ceil((13000 - elapsed) / 1000))
+  }, 360)
+}
+
+function clearProgress() {
+  clearInterval(progressTimer)
+  progressTimer = 0
+  if (!creating.value) {
+    progress.value = 0
+    estimatedSeconds.value = 12
+  }
+}
+
+function requireLogin() {
+  if (userStore.isLogin) return true
+  let url = '/pages/login/login'
+  // #ifdef H5
+  url += `?redirect=${encodeURIComponent(location.pathname + location.search)}`
+  // #endif
+  uni.navigateTo({ url })
+  return false
+}
+
+function showInsufficientModal() {
+  uni.showModal({
+    title: '点数不足',
+    content: `当前余额 ${balancePoints.value} 点，本次制作需要 ${quotePoints.value} 点。`,
+    confirmText: '去充值',
+    success: (res) => {
+      if (res.confirm) uni.navigateTo({ url: '/pages/recharge/recharge' })
+    }
+  })
+}
+
+function goHistory() {
+  if (!requireLogin()) return
+  uni.navigateTo({ url: '/pages/tool/id-photo-history' })
+}
+
+async function scrollToPreview() {
+  await nextTick()
+  uni.pageScrollTo({
+    selector: '#id-photo-preview',
+    duration: 320
+  })
+}
+
+async function syncPersistedResult(photoOpenId, attempts = 8) {
+  if (!photoOpenId) return ''
+  for (let index = 0; index < attempts; index += 1) {
+    if (index) await delay(700)
+    try {
+      const res = await idPhotoApi.getDetail({ photo_open_id: photoOpenId })
+      const data = res.data || {}
+      const url = data.result_url || ''
+      if (url && !url.startsWith('data:')) {
+        result.value = { ...(result.value || {}), ...data }
+        resultImage.value = url
+        return url
+      }
+    } catch (e) {}
+  }
+  return ''
+}
+
+async function saveResult() {
+  if (!resultImage.value) return
+  let url = resultImage.value
+  if (url.startsWith('data:')) {
+    const persisted = await syncPersistedResult(result.value?.photo_open_id)
+    if (persisted) url = persisted
+  }
+
+  // #ifdef H5
+  try {
+    let downloadUrl = url
+    let objectUrl = ''
+    if (!url.startsWith('data:')) {
+      const response = await fetch(url)
+      if (!response.ok) throw new Error('download failed')
+      objectUrl = URL.createObjectURL(await response.blob())
+      downloadUrl = objectUrl
+    }
+    const link = document.createElement('a')
+    link.href = downloadUrl
+    link.download = `${result.value?.spec_name || '证件照'}.jpg`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    if (objectUrl) setTimeout(() => URL.revokeObjectURL(objectUrl), 1000)
+    toast('已开始下载')
+  } catch (e) {
+    window.open(url, '_blank')
+    toast('已打开高清照片，可长按保存')
+  }
+  // #endif
+
+  // #ifndef H5
+  try {
+    uni.showLoading({ mask: true, title: '正在保存...' })
+    const filePath = url.startsWith('data:') ? await writeBase64Image(url) : await downloadImage(url)
+    await saveToAlbum(filePath)
+    toast('已保存到系统相册')
+  } catch (e) {
+    toast('保存失败，请检查相册权限后重试')
+  } finally {
+    uni.hideLoading()
+  }
+  // #endif
+}
+
+function downloadImage(url) {
+  return new Promise((resolve, reject) => {
+    uni.downloadFile({
+      url,
+      success: (res) => res.statusCode === 200 ? resolve(res.tempFilePath) : reject(res),
+      fail: reject
+    })
+  })
+}
+
+function saveToAlbum(filePath) {
+  return new Promise((resolve, reject) => {
+    uni.saveImageToPhotosAlbum({ filePath, success: resolve, fail: reject })
+  })
+}
+
+function writeBase64Image(dataUrl) {
+  return new Promise((resolve, reject) => {
+    // #ifdef MP-WEIXIN
+    const match = dataUrl.match(/^data:image\/(\w+);base64,(.+)$/)
+    if (!match) {
+      reject(new Error('图片数据无效'))
+      return
+    }
+    const filePath = `${wx.env.USER_DATA_PATH}/id-photo-${Date.now()}.${match[1] === 'jpeg' ? 'jpg' : match[1]}`
+    uni.getFileSystemManager().writeFile({
+      filePath,
+      data: match[2],
+      encoding: 'base64',
+      success: () => resolve(filePath),
+      fail: reject
+    })
+    // #endif
+    // #ifndef MP-WEIXIN
+    reject(new Error('请稍后等待高清图片保存完成'))
+    // #endif
+  })
+}
+
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+function refreshBalance() {
+  userStore.fetchBalance()
+    .then((points) => {
+      billing.value = {
+        ...billing.value,
+        balance: {
+          ...(billing.value.balance || {}),
+          points
+        }
+      }
+    })
+    .catch(() => {})
 }
 </script>
 
 <style lang="scss" scoped>
 .page {
-  height: 100vh;
-  background: #f3f7fb;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.scroll {
-  flex: 1;
-  height: 0;
+  min-height: 100vh;
+  color: #172033;
+  background:
+    radial-gradient(circle at 100% 6%, rgba(67, 190, 255, 0.13), transparent 25%),
+    #f3f7fb;
 }
 
-.wrap {
-  padding: 24rpx 28rpx 300rpx;
+.content {
+  padding: 24rpx 24rpx calc(220rpx + env(safe-area-inset-bottom));
 }
 
 .hero-card {
   position: relative;
-  min-height: 260rpx;
-  padding: 30rpx;
+  min-height: 300rpx;
+  padding: 34rpx 238rpx 32rpx 30rpx;
   border-radius: 28rpx;
-  color: #fff;
-  background: linear-gradient(135deg, #0b8cff 0%, #36b6ff 58%, #79e0df 100%);
+  background: linear-gradient(145deg, #e9f4ff 0%, #f5faff 56%, #e9fbf7 100%);
+  box-shadow: 0 14rpx 36rpx rgba(43, 80, 123, 0.08);
   overflow: hidden;
   box-sizing: border-box;
 }
 
-.hero-card::before {
-  content: '';
-  position: absolute;
-  right: -92rpx;
-  top: -110rpx;
-  width: 300rpx;
-  height: 300rpx;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.18);
-}
-
-.hero-copy,
-.hero-preview {
+.hero-copy {
   position: relative;
-  z-index: 1;
+  z-index: 2;
 }
 
 .eyebrow {
   display: block;
-  color: rgba(255, 255, 255, 0.72);
-  font-size: 21rpx;
-  font-weight: 800;
+  color: #0b8cff;
+  font-size: 20rpx;
+  font-weight: 900;
+  letter-spacing: 3rpx;
 }
 
 .hero-title {
   display: block;
-  margin-top: 16rpx;
-  width: 430rpx;
-  color: #fff;
-  font-size: 40rpx;
+  margin-top: 14rpx;
+  color: #071a37;
+  font-size: 38rpx;
   font-weight: 900;
-  line-height: 1.24;
+  line-height: 1.28;
 }
 
 .hero-desc {
   display: block;
-  margin-top: 14rpx;
-  width: 420rpx;
-  color: rgba(255, 255, 255, 0.86);
-  font-size: 24rpx;
-  line-height: 1.5;
+  margin-top: 12rpx;
+  color: #5d7290;
+  font-size: 23rpx;
+  line-height: 1.55;
 }
 
-.hero-preview {
+.hero-tags {
+  margin-top: 18rpx;
+  display: flex;
+  gap: 10rpx;
+}
+
+.hero-tags text {
+  padding: 6rpx 12rpx;
+  border-radius: 999rpx;
+  color: #2770a9;
+  background: rgba(255, 255, 255, 0.72);
+  font-size: 19rpx;
+  font-weight: 800;
+}
+
+.hero-image {
   position: absolute;
+  z-index: 1;
+  top: 22rpx;
   right: 30rpx;
-  bottom: 28rpx;
-  width: 176rpx;
-  height: 126rpx;
+  width: 180rpx;
+  height: 252rpx;
+  border: 8rpx solid rgba(255, 255, 255, 0.86);
+  border-radius: 18rpx;
+  box-shadow: 0 18rpx 34rpx rgba(26, 76, 118, 0.18);
 }
 
-.id-photo-sample {
-  position: absolute;
-  width: 90rpx;
-  height: 118rpx;
-  border-radius: 14rpx;
-  background: #fff;
-  box-shadow: 0 16rpx 28rpx rgba(0, 62, 130, 0.2);
-  overflow: hidden;
+.id-panel {
+  width: 100%;
+  margin-top: 22rpx;
+  padding: 28rpx;
+  border-radius: 26rpx;
+  background: #ffffff;
+  box-shadow: 0 10rpx 34rpx rgba(39, 70, 112, 0.06);
+  box-sizing: border-box;
 }
 
-.id-photo-sample.bg-blue {
-  left: 0;
-  top: 0;
-  background: #5ba7f8;
+.card-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 20rpx;
 }
 
-.id-photo-sample.bg-white {
-  right: 0;
-  bottom: 0;
-  background: #f7fbff;
+.card-head > view:first-child {
+  min-width: 0;
+  flex: 1;
 }
 
-.person-head {
-  width: 36rpx;
-  height: 36rpx;
-  margin: 24rpx auto 0;
-  border-radius: 50%;
-  background: #ffffff;
+.card-title {
+  display: block;
+  color: #12213a;
+  font-size: 31rpx;
+  font-weight: 900;
+  line-height: 1.25;
 }
 
-.bg-white .person-head {
-  background: #7db7f7;
+.card-desc {
+  display: block;
+  margin-top: 7rpx;
+  color: #8794a7;
+  font-size: 22rpx;
+  line-height: 1.45;
 }
 
-.person-body {
-  width: 64rpx;
-  height: 36rpx;
-  margin: 8rpx auto 0;
-  border-radius: 28rpx 28rpx 12rpx 12rpx;
+.history-link {
+  color: #168cff;
+  font-size: 23rpx;
+  font-weight: 800;
+  line-height: 42rpx;
+  flex-shrink: 0;
+}
+
+.upload-zone {
+  margin-top: 24rpx;
+  padding: 42rpx 22rpx 24rpx;
+  border: 2rpx dashed #7bbcff;
+  border-radius: 24rpx;
+  background: #f3f9ff;
+  text-align: center;
+}
+
+.upload-icon {
+  width: 92rpx;
+  height: 92rpx;
+  margin: 0 auto;
+  border-radius: 26rpx;
   background: #ffffff;
+  box-shadow: 0 10rpx 26rpx rgba(22, 140, 255, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.bg-white .person-body {
-  background: #7db7f7;
+.upload-arrow {
+  position: relative;
+  width: 32rpx;
+  height: 28rpx;
+  border: 5rpx solid #168cff;
+  border-top: 0;
+  border-radius: 4rpx;
 }
 
-.upload-card,
-.section {
+.upload-arrow::before {
+  content: '';
+  position: absolute;
+  left: 11rpx;
+  top: -20rpx;
+  width: 6rpx;
+  height: 24rpx;
+  border-radius: 4rpx;
+  background: #168cff;
+}
+
+.upload-arrow::after {
+  content: '';
+  position: absolute;
+  left: 5rpx;
+  top: -20rpx;
+  width: 14rpx;
+  height: 14rpx;
+  border-top: 5rpx solid #168cff;
+  border-left: 5rpx solid #168cff;
+  transform: rotate(45deg);
+}
+
+.upload-title {
+  display: block;
   margin-top: 22rpx;
-  padding: 28rpx;
-  border-radius: 24rpx;
-  background: #fff;
-  box-shadow: 0 8rpx 28rpx rgba(34, 68, 112, 0.05);
+  color: #10223d;
+  font-size: 30rpx;
+  font-weight: 900;
 }
 
-.upload-card:first-child {
-  margin-top: 0;
+.upload-desc {
+  display: block;
+  margin-top: 10rpx;
+  color: #718198;
+  font-size: 22rpx;
 }
 
-.section.compact {
-  padding-bottom: 24rpx;
+.upload-button {
+  width: 210rpx;
+  height: 72rpx;
+  margin: 26rpx auto 0;
+  border-radius: 999rpx;
+  color: #ffffff;
+  background: linear-gradient(135deg, #0b8cff, #35b1ff);
+  box-shadow: 0 12rpx 26rpx rgba(11, 140, 255, 0.24);
+  font-size: 26rpx;
+  font-weight: 900;
+  line-height: 72rpx;
 }
 
-.card-head,
-.section-head {
+.photo-tips {
+  margin-top: 34rpx;
   display: flex;
-  align-items: baseline;
+  justify-content: center;
+  gap: 40rpx;
 }
 
-.card-title,
-.tool-section-title {
-  display: block;
-  color: #172033;
-  font-size: 31rpx;
-  font-weight: 800;
+.tip-item {
+  color: #65758c;
+  font-size: 21rpx;
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
 }
 
-.required {
-  margin-right: 4rpx;
-  color: #ef4444;
+.tip-dot {
+  width: 12rpx;
+  height: 12rpx;
+  border: 3rpx solid #18ad73;
+  border-radius: 50%;
 }
 
-.card-desc {
-  display: block;
-  margin-top: 8rpx;
-  color: #8a95a6;
-  font-size: 23rpx;
-  line-height: 1.35;
+.preview-area {
+  margin-top: 24rpx;
 }
 
-.card-tip,
-.section-tip {
-  margin-left: auto;
-  color: #8a95a6;
-  font-size: 23rpx;
+.preview-stage {
+  position: relative;
+  min-height: 620rpx;
+  border-radius: 22rpx;
+  background-color: #eef4f9;
+  background-image: repeating-linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.8) 0,
+    rgba(255, 255, 255, 0.8) 18rpx,
+    rgba(224, 234, 243, 0.8) 18rpx,
+    rgba(224, 234, 243, 0.8) 36rpx
+  );
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
 }
 
-.upload-strip {
-  margin-top: 22rpx;
-  min-height: 142rpx;
-  padding: 18rpx;
-  border: 2rpx dashed rgba(11, 140, 255, 0.28);
-  border-radius: 20rpx;
-  background: #f8fbff;
+.source-image {
+  width: 100%;
+  height: 620rpx;
+}
+
+.result-image {
+  display: block;
+  border-radius: 4rpx;
+}
+
+.progress-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  padding: 30rpx;
+  background: rgba(5, 20, 40, 0.5);
+  backdrop-filter: blur(5px);
   display: flex;
   align-items: center;
+  justify-content: center;
   box-sizing: border-box;
 }
 
-.upload-thumb {
-  width: 104rpx;
-  height: 104rpx;
-  border-radius: 18rpx;
-  background: #eef6ff;
+.progress-panel {
+  width: 100%;
+  padding: 28rpx;
+  border-radius: 22rpx;
+  background: rgba(255, 255, 255, 0.96);
+  box-sizing: border-box;
+}
+
+.progress-top {
   display: flex;
   align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+  justify-content: space-between;
 }
 
-.upload-plus {
-  color: #0b8cff;
-  font-size: 48rpx;
-  line-height: 1;
+.progress-title {
+  color: #11233e;
+  font-size: 27rpx;
+  font-weight: 900;
 }
 
-.upload-copy {
-  min-width: 0;
-  flex: 1;
-  margin-left: 20rpx;
+.progress-value {
+  color: #168cff;
+  font-size: 29rpx;
+  font-weight: 900;
 }
 
-.upload-title {
-  display: block;
-  color: #172033;
-  font-size: 29rpx;
-  font-weight: 800;
+.progress-track {
+  height: 14rpx;
+  margin-top: 20rpx;
+  border-radius: 999rpx;
+  background: #e6eff8;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #168cff, #42c0ff);
+  transition: width 0.3s ease;
 }
 
-.upload-sub {
+.progress-desc {
   display: block;
-  margin-top: 8rpx;
-  color: #7f8896;
-  font-size: 23rpx;
-  line-height: 1.4;
+  margin-top: 16rpx;
+  color: #758399;
+  font-size: 22rpx;
 }
 
-.upload-action {
-  margin-left: 18rpx;
-  color: #0b8cff;
-  font-size: 25rpx;
-  font-weight: 800;
+.preview-meta {
+  margin-top: 15rpx;
+  color: #7b899b;
+  font-size: 21rpx;
+  display: flex;
+  justify-content: space-between;
+  gap: 20rpx;
+}
+
+.error-box {
+  margin-top: 16rpx;
+  padding: 18rpx 20rpx;
+  border-radius: 16rpx;
+  color: #c43e3e;
+  background: #fff1f1;
+  font-size: 22rpx;
+  line-height: 1.45;
 }
 
-.search-row {
+.preview-actions {
   margin-top: 22rpx;
+  display: flex;
+  gap: 14rpx;
+}
+
+.primary-action,
+.soft-action {
   height: 72rpx;
-  border: 2rpx solid rgba(11, 140, 255, 0.22);
   border-radius: 999rpx;
+  font-size: 23rpx;
+  font-weight: 900;
+  line-height: 72rpx;
+  text-align: center;
+}
+
+.primary-action {
+  flex: 1;
+  color: #ffffff;
+  background: #168cff;
+}
+
+.soft-action {
+  flex: 1;
+  color: #48617e;
+  background: #eef4fa;
+}
+
+.dpi-badge,
+.dirty-badge {
+  padding: 8rpx 13rpx;
+  border-radius: 999rpx;
+  color: #168cff;
+  background: #edf7ff;
+  font-size: 19rpx;
+  font-weight: 900;
+  flex-shrink: 0;
+}
+
+.dirty-badge {
+  color: #a76108;
+  background: #fff5dc;
+}
+
+.search-box {
+  height: 72rpx;
+  margin-top: 22rpx;
+  padding: 0 20rpx;
+  border-radius: 16rpx;
+  background: #f4f7fb;
   display: flex;
-  overflow: hidden;
-  background: #fff;
+  align-items: center;
+}
+
+.search-icon {
+  position: relative;
+  width: 22rpx;
+  height: 22rpx;
+  margin-right: 15rpx;
+  border: 3rpx solid #91a0b4;
+  border-radius: 50%;
+}
+
+.search-icon::after {
+  content: '';
+  position: absolute;
+  right: -9rpx;
+  bottom: -6rpx;
+  width: 11rpx;
+  height: 3rpx;
+  background: #91a0b4;
+  transform: rotate(45deg);
 }
 
 .search-input {
-  flex: 1;
+  min-width: 0;
   height: 72rpx;
-  padding: 0 24rpx;
+  flex: 1;
   color: #172033;
-  font-size: 25rpx;
+  font-size: 24rpx;
 }
 
-.search-btn {
-  width: 132rpx;
-  color: #fff;
-  background: #0b8cff;
-  font-size: 26rpx;
-  font-weight: 800;
-  line-height: 72rpx;
-  text-align: center;
+.input-placeholder {
+  color: #9aa6b7;
 }
 
-.tab-scroll,
-.size-scroll {
-  margin-left: -28rpx;
-  margin-right: -28rpx;
-  width: auto;
+.search-clear {
+  width: 48rpx;
+  color: #9aa6b7;
+  font-size: 38rpx;
+  line-height: 48rpx;
+  text-align: right;
+}
+
+.category-scroll {
+  width: 100%;
+  margin-top: 18rpx;
   white-space: nowrap;
 }
 
-.tab-list {
-  padding: 20rpx 28rpx 14rpx;
+.category-list {
   display: flex;
-  gap: 34rpx;
+  gap: 12rpx;
 }
 
-.tab-item {
-  position: relative;
+.category-item {
+  height: 58rpx;
+  padding: 0 22rpx;
+  border-radius: 999rpx;
+  color: #627187;
+  background: #f4f7fb;
+  font-size: 23rpx;
+  font-weight: 800;
+  line-height: 58rpx;
   flex-shrink: 0;
-  height: 48rpx;
-  color: #7f8896;
-  font-size: 25rpx;
-  line-height: 48rpx;
 }
 
-.tab-item.active {
+.category-item.active {
+  color: #ffffff;
+  background: #13213a;
+}
+
+.spec-grid {
+  margin-top: 18rpx;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14rpx;
+}
+
+.spec-item {
+  min-height: 132rpx;
+  padding: 18rpx;
+  border: 2rpx solid #e5ebf2;
+  border-radius: 18rpx;
+  background: #ffffff;
+  box-sizing: border-box;
+}
+
+.spec-item.active {
+  border-color: #168cff;
+  background: #edf7ff;
+  box-shadow: 0 8rpx 18rpx rgba(22, 140, 255, 0.08);
+}
+
+.spec-name-row {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.spec-name {
   color: #172033;
-  font-weight: 800;
+  font-size: 25rpx;
+  font-weight: 900;
 }
 
-.tab-item.active::after {
-  content: '';
-  position: absolute;
-  left: 12rpx;
-  right: 12rpx;
-  bottom: 0;
-  height: 5rpx;
+.hot-badge {
+  padding: 3rpx 7rpx;
   border-radius: 999rpx;
-  background: #0b8cff;
+  color: #ff6d24;
+  background: #fff1e7;
+  font-size: 17rpx;
+  font-weight: 800;
 }
 
-.size-list {
-  padding: 4rpx 28rpx 4rpx;
-  display: flex;
-  gap: 18rpx;
+.spec-pixel,
+.spec-print {
+  display: block;
+  margin-top: 9rpx;
+  color: #718198;
+  font-size: 20rpx;
 }
 
-.size-card {
-  width: 196rpx;
-  min-height: 156rpx;
-  padding: 20rpx 14rpx;
-  border-radius: 20rpx;
-  border: 2rpx solid transparent;
-  background: #f7f9fd;
-  box-sizing: border-box;
-  text-align: center;
-  flex-shrink: 0;
+.spec-print {
+  margin-top: 4rpx;
+  color: #9aa5b5;
 }
 
-.size-card.active {
-  color: #fff;
-  background: #4358ff;
-  box-shadow: 0 12rpx 26rpx rgba(67, 88, 255, 0.2);
+.empty-spec {
+  padding: 48rpx 0 24rpx;
+  color: #95a1b2;
+  font-size: 23rpx;
+  text-align: center;
 }
 
-.size-name,
-.size-meta,
-.size-desc {
+.field-label {
   display: block;
+  margin-top: 26rpx;
+  color: #41516a;
+  font-size: 23rpx;
+  font-weight: 900;
 }
 
-.size-name {
-  color: #172033;
-  font-size: 28rpx;
+.background-grid {
+  margin-top: 16rpx;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14rpx;
+}
+
+.background-item {
+  min-height: 112rpx;
+  padding: 14rpx 8rpx 12rpx;
+  border: 2rpx solid #e5ebf2;
+  border-radius: 18rpx;
+  color: #58677e;
+  background: #ffffff;
+  font-size: 20rpx;
   font-weight: 800;
-  line-height: 1.2;
+  text-align: center;
+  box-sizing: border-box;
 }
 
-.size-meta {
-  margin-top: 16rpx;
-  color: #8a95a6;
-  font-size: 23rpx;
-  font-weight: 700;
+.background-item.active {
+  color: #168cff;
+  border-color: #168cff;
+  background: #f1f8ff;
 }
 
-.size-desc {
-  margin-top: 8rpx;
-  color: #9aa4b2;
-  font-size: 21rpx;
+.color-dot {
+  position: relative;
+  width: 50rpx;
+  height: 50rpx;
+  margin: 0 auto 9rpx;
+  border: 2rpx solid rgba(15, 23, 42, 0.1);
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.size-card.active .size-name,
-.size-card.active .size-meta,
-.size-card.active .size-desc {
-  color: rgba(255, 255, 255, 0.9);
+.check-mark {
+  position: relative;
+  width: 16rpx;
+  height: 9rpx;
+  border-left: 4rpx solid #ffffff;
+  border-bottom: 4rpx solid #ffffff;
+  transform: translateY(-2rpx) rotate(-45deg);
+  filter: drop-shadow(0 1rpx 1rpx rgba(0, 0, 0, 0.4));
 }
 
-.bg-row {
-  margin-top: 22rpx;
+.color-dot.light .check-mark {
+  border-color: #168cff;
+  filter: none;
+}
+
+.beauty-label {
+  margin-top: 28rpx;
+}
+
+.beauty-grid {
+  margin-top: 16rpx;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14rpx;
+}
+
+.beauty-item {
+  min-height: 102rpx;
+  padding: 16rpx;
+  border: 2rpx solid #e5ebf2;
+  border-radius: 18rpx;
   display: flex;
-  gap: 20rpx;
-  overflow-x: auto;
+  align-items: flex-start;
+  gap: 12rpx;
+  box-sizing: border-box;
 }
 
-.bg-item {
-  width: 100rpx;
-  color: #596579;
-  font-size: 21rpx;
-  font-weight: 700;
-  text-align: center;
+.beauty-item.active {
+  border-color: #168cff;
+  background: #edf7ff;
+}
+
+.beauty-radio {
+  width: 25rpx;
+  height: 25rpx;
+  margin-top: 3rpx;
+  border: 3rpx solid #b6c1cf;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
 }
 
-.bg-item.active {
-  color: #0b8cff;
+.beauty-item.active .beauty-radio {
+  border-color: #168cff;
 }
 
-.bg-dot {
-  width: 76rpx;
-  height: 76rpx;
-  margin: 0 auto 10rpx;
+.beauty-item.active .beauty-radio view {
+  width: 13rpx;
+  height: 13rpx;
   border-radius: 50%;
-  border: 4rpx solid transparent;
-  box-shadow: 0 8rpx 18rpx rgba(15, 23, 42, 0.1);
+  background: #168cff;
 }
 
-.bg-item.active .bg-dot {
-  border-color: #0b8cff;
-  box-shadow: 0 0 0 6rpx rgba(11, 140, 255, 0.1), 0 10rpx 22rpx rgba(15, 23, 42, 0.12);
+.beauty-name,
+.beauty-desc {
+  display: block;
 }
 
-.blue { background: #4194f4; }
-.white { background: #fff; border-color: #e5e7eb; }
-.red { background: #ef3028; }
-.navy { background: #326da4; }
-.gradient-blue { background: linear-gradient(180deg, #64a9f7 0%, #d8ecff 100%); }
-.gradient-dark { background: linear-gradient(180deg, #263345 0%, #4f6f84 100%); }
+.beauty-name {
+  color: #26364d;
+  font-size: 23rpx;
+  font-weight: 900;
+}
 
-.chip-row {
-  margin-top: 18rpx;
+.beauty-desc {
+  margin-top: 7rpx;
+  color: #8995a7;
+  font-size: 19rpx;
+  line-height: 1.35;
+}
+
+.adjust-section {
+  margin-top: 28rpx;
+  padding-top: 4rpx;
+  border-top: 2rpx solid #edf1f5;
+}
+
+.adjust-head {
   display: flex;
-  flex-wrap: wrap;
-  gap: 14rpx;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20rpx;
 }
 
-.chip,
-.keyword-chip {
-  height: 58rpx;
-  padding: 0 24rpx;
-  border-radius: 30rpx;
-  color: #596579;
-  font-size: 25rpx;
-  font-weight: 700;
-  line-height: 58rpx;
-  background: #f6f9fe;
-  border: 2rpx solid transparent;
-  box-sizing: border-box;
+.adjust-help {
+  display: block;
+  margin-top: 6rpx;
+  color: #919daf;
+  font-size: 20rpx;
 }
 
-.chip.active {
-  color: #0b8cff;
-  background: #eff8ff;
-  border-color: #0b8cff;
+.reset-link {
+  margin-top: 26rpx;
+  color: #168cff;
+  font-size: 21rpx;
+  font-weight: 800;
+  flex-shrink: 0;
+}
+
+.slider-row {
+  margin-top: 22rpx;
 }
 
-.textarea {
+.slider-meta {
+  padding: 0 2rpx;
+  color: #5f6e83;
+  font-size: 21rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.slider-row slider {
+  margin: 8rpx 0 0;
+}
+
+.apply-adjust {
+  height: 74rpx;
   margin-top: 20rpx;
-  width: 100%;
-  min-height: 144rpx;
-  padding: 22rpx;
-  border-radius: 20rpx;
-  color: #172033;
+  border-radius: 999rpx;
+  color: #ffffff;
+  background: #168cff;
   font-size: 25rpx;
-  line-height: 1.5;
-  background: #f7f9fd;
-  box-sizing: border-box;
+  font-weight: 900;
+  line-height: 74rpx;
+  text-align: center;
 }
 
-.keyword-chip {
-  color: #0b8cff;
-  background: #eef7ff;
+.apply-adjust.disabled {
+  color: #a0adbd;
+  background: #edf1f5;
 }
 
 .bottom-bar {
   position: fixed;
+  z-index: 80;
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 80;
-  padding: 18rpx 28rpx calc(18rpx + env(safe-area-inset-bottom));
-  background: rgba(255, 255, 255, 0.96);
-  box-shadow: 0 -10rpx 30rpx rgba(32, 56, 92, 0.1);
+  padding: 16rpx 28rpx calc(18rpx + env(safe-area-inset-bottom));
+  border-top: 2rpx solid rgba(224, 232, 241, 0.9);
+  background: rgba(255, 255, 255, 0.97);
+  box-shadow: 0 -12rpx 32rpx rgba(35, 61, 96, 0.09);
+  box-sizing: border-box;
 }
 
-.balance {
+.billing-copy {
+  min-height: 34rpx;
   margin-bottom: 14rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20rpx;
-  color: #7b8797;
-  font-size: 24rpx;
-  line-height: 1.35;
 }
 
-.balance-copy {
+.billing-label,
+.billing-sub {
+  display: block;
+}
+
+.billing-label {
   min-width: 0;
   flex: 1;
+  color: #162640;
+  font-size: 23rpx;
+  font-weight: 900;
 }
 
-.recharge-link {
-  color: #0b8cff;
-  font-size: 24rpx;
-  font-weight: 800;
+.billing-sub {
   flex-shrink: 0;
+  color: #8491a4;
+  font-size: 21rpx;
+  line-height: 1.3;
 }
 
-.buttons {
+.bottom-actions {
   display: flex;
   gap: 22rpx;
 }
 
-.history-btn,
-.submit-btn {
+.history-button,
+.submit-button {
   height: 86rpx;
   border-radius: 999rpx;
   font-size: 30rpx;
-  font-weight: 800;
+  font-weight: 900;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.history-btn {
+.history-button {
   width: 210rpx;
-  color: #1f8cff;
+  flex-shrink: 0;
+  color: #168cff;
   background: #eef7ff;
 }
 
-.submit-btn {
+.submit-button {
   flex: 1;
-  color: #fff;
-  background: linear-gradient(135deg, #1f8cff, #41b9ff);
-  box-shadow: 0 12rpx 24rpx rgba(31, 140, 255, 0.28);
+  color: #ffffff;
+  background: linear-gradient(135deg, #0b8cff, #39b7ff);
+  box-shadow: 0 12rpx 26rpx rgba(11, 140, 255, 0.24);
+}
+
+.submit-button.disabled {
+  color: #95a6b8;
+  background: #dfe9f3;
+  box-shadow: none;
 }
 
 .submit-icon {
-  width: 24rpx;
-  height: 24rpx;
+  width: 25rpx;
+  height: 25rpx;
   margin-right: 8rpx;
+  flex-shrink: 0;
+}
+
+@media (min-width: 768px) {
+  .content {
+    width: 720px;
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
+
+  .bottom-bar {
+    left: 50%;
+    width: 720px;
+    transform: translateX(-50%);
+    border-left: 1px solid #e6edf5;
+    border-right: 1px solid #e6edf5;
+  }
 }
 </style>
diff --git a/pages/tool/old-photo-detail.vue b/pages/tool/old-photo-detail.vue
new file mode 100644
index 0000000..b47d2d6
--- /dev/null
+++ b/pages/tool/old-photo-detail.vue
@@ -0,0 +1,434 @@
+<template>
+  <view class="page">
+    <scroll-view class="scroll" scroll-y>
+      <view class="wrap">
+        <!-- 处理中 / 失败 -->
+        <view v-if="isLoadingState" class="state-card">
+          <view v-if="isPending" class="spinner"></view>
+          <text class="state-title">{{ isPending ? (Number(detail.status) === 10 ? '排队中，请耐心等待' : 'AI 正在修复上色') : '修复失败' }}</text>
+          <text v-if="isPending && countDown > 0" class="count">{{ countDown }} S</text>
+          <text v-if="!isPending" class="error">{{ detail.error_msg || '本次未扣点，可以换一张更清晰的照片重试' }}</text>
+        </view>
+
+        <!-- 成品：默认直接看修复后的图 -->
+        <view v-else class="image-card" @click="preview">
+          <image class="work-img" :src="detail.result_url" mode="widthFix" />
+          <view class="compare-entry" @click.stop="openCompare">查看对比</view>
+        </view>
+
+        <view class="info-card">
+          <view class="title">修复信息</view>
+          <view class="cell">
+            <text class="cell-label">修复档位：</text>
+            <text class="cell-content">{{ detail.mode_name || '-' }}</text>
+          </view>
+          <view class="cell">
+            <text class="cell-label">当前状态：</text>
+            <text class="cell-content">{{ detail.status_text || '-' }}</text>
+          </view>
+          <view v-if="detail.source_width && detail.source_height" class="cell">
+            <text class="cell-label">原图尺寸：</text>
+            <text class="cell-content">{{ detail.source_width }} × {{ detail.source_height }}px</text>
+          </view>
+          <view v-if="Number(detail.refine) === 1" class="cell">
+            <text class="cell-label">清晰度：</text>
+            <text class="cell-content">已做高清增强</text>
+          </view>
+          <view class="cell">
+            <text class="cell-label">创建时间：</text>
+            <text class="cell-content">{{ formatTime(detail.add_time) }}</text>
+          </view>
+          <view class="cell">
+            <text class="cell-label">功能来源：</text>
+            <text class="link" @click="createAgain">老照片修复 / 上色</text>
+          </view>
+          <text class="note">AI 会重绘上色，五官可能出现轻微变化，建议对照原图确认。</text>
+        </view>
+      </view>
+    </scroll-view>
+
+    <view v-if="!isLoadingState" class="bottom-bar">
+      <view class="bar-btn" @click="download">保存</view>
+      <view class="bar-btn" @click="openCompare">对比</view>
+      <view class="main-btn" @click="createAgain">再修一张</view>
+    </view>
+
+    <!-- 前后对比：样式与动漫头像一致 -->
+    <view v-if="compareVisible" class="compare-modal">
+      <view class="compare-backdrop" @click="closeCompare"></view>
+      <view class="compare-panel">
+        <view class="compare-panel-head">
+          <text>效果对比</text>
+          <view class="close-btn" @click="closeCompare">×</view>
+        </view>
+        <view
+          class="large-compare"
+          @touchstart.stop="onCompareTouch"
+          @touchmove.stop.prevent="onCompareTouch"
+          @click.stop="onCompareTouch"
+        >
+          <image class="compare-img" :src="detail.result_url" mode="aspectFit" />
+          <view class="compare-before" :style="{ width: comparePercent + '%' }">
+            <image class="compare-img" :src="detail.source_url" mode="aspectFit" />
+          </view>
+          <view class="compare-line large" :style="{ left: comparePercent + '%' }">
+            <view class="compare-handle large">
+              <text>‹</text>
+              <text>›</text>
+            </view>
+          </view>
+          <view class="compare-tag left">原图</view>
+          <view class="compare-tag right">修复后</view>
+        </view>
+        <text class="compare-guide">左右滑动中间按钮查看变化</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { onLoad, onUnload } from '@dcloudio/uni-app'
+import dayjs from 'dayjs'
+import { oldPhotoApi } from '@/api/index.js'
+import { useApp } from '@/utils/useApp.js'
+
+const { toast } = useApp()
+const id = ref('')
+const detail = ref({ status: 10 })
+const countDown = ref(0)
+const compareVisible = ref(false)
+const comparePercent = ref(50)
+let timer = 0
+let countTimer = 0
+
+const isPending = computed(() => [10, 20].includes(Number(detail.value.status)))
+const isLoadingState = computed(() => Number(detail.value.status) !== 30)
+
+onLoad((options) => {
+  id.value = (options && options.id) || ''
+  loadDetail()
+})
+
+onUnload(() => {
+  clearTimeout(timer)
+  clearInterval(countTimer)
+})
+
+async function loadDetail() {
+  if (!id.value) return
+  try {
+    const res = await oldPhotoApi.getDetail({ photo_open_id: id.value })
+    detail.value = res.data || {}
+    if (isPending.value) waitNext()
+  } catch (e) {
+    toast((e && e.msg) || '记录加载失败')
+  }
+}
+
+// 处理中就 3 秒拉一次，后端会在这一步推进任务并转存结果
+function waitNext() {
+  clearTimeout(timer)
+  clearInterval(countTimer)
+  countDown.value = 3
+  countTimer = setInterval(() => {
+    countDown.value -= 1
+    if (countDown.value <= 0) clearInterval(countTimer)
+  }, 1000)
+  timer = setTimeout(loadDetail, 3000)
+}
+
+function formatTime(value) {
+  if (!value) return '-'
+  return dayjs(Number(value) * 1000).format('YYYY-MM-DD HH:mm')
+}
+
+function preview() {
+  if (!detail.value.result_url) return
+  uni.previewImage({ urls: [detail.value.result_url], current: detail.value.result_url })
+}
+
+function download() {
+  if (!detail.value.result_url) return
+  uni.showLoading({ title: '保存中...', mask: true })
+  uni.downloadFile({
+    url: detail.value.result_url,
+    success: (res) => {
+      uni.saveImageToPhotosAlbum({
+        filePath: res.tempFilePath,
+        success: () => toast('已保存到相册'),
+        fail: () => toast('保存失败，请检查相册权限')
+      })
+    },
+    fail: () => toast('图片下载失败'),
+    complete: () => uni.hideLoading()
+  })
+}
+
+function openCompare() {
+  if (!detail.value.result_url || !detail.value.source_url) return
+  comparePercent.value = 50
+  compareVisible.value = true
+}
+
+function closeCompare() {
+  compareVisible.value = false
+}
+
+function onCompareTouch(e) {
+  const touch = (e.touches && e.touches[0]) || (e.changedTouches && e.changedTouches[0]) || e
+  const x = touch.clientX || 0
+  uni.createSelectorQuery()
+    .select('.large-compare')
+    .boundingClientRect((rect) => {
+      if (!rect || !rect.width) return
+      const percent = ((x - rect.left) / rect.width) * 100
+      comparePercent.value = Math.max(6, Math.min(94, Number(percent.toFixed(1))))
+    })
+    .exec()
+}
+
+function createAgain() {
+  const delta = getPageStackDelta('pages/tool/old-photo')
+  if (delta > 0) {
+    uni.navigateBack({ delta })
+    return
+  }
+  uni.navigateTo({ url: '/pages/tool/old-photo' })
+}
+
+function getPageStackDelta(routeName) {
+  const pages = getCurrentPages()
+  const index = pages.findIndex((item) => item.route === routeName)
+  return index >= 0 ? pages.length - 1 - index : -1
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  height: 100vh;
+  background: #f4f7fb;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.scroll { flex: 1; height: 0; }
+/* 底栏是 fixed 的，留够 300rpx */
+.wrap { padding: 28rpx 28rpx 300rpx; }
+
+.state-card,
+.image-card,
+.info-card {
+  background: #fff;
+  border-radius: 18rpx;
+  overflow: hidden;
+}
+
+.state-card {
+  min-height: 540rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #172033;
+  font-size: 30rpx;
+}
+.spinner {
+  width: 72rpx;
+  height: 72rpx;
+  margin-bottom: 28rpx;
+  border: 8rpx solid #e9edf5;
+  border-top-color: #0b8cff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+.count,
+.error { margin-top: 18rpx; color: #7f8896; font-size: 26rpx; }
+.error { color: #f04438; padding: 0 40rpx; text-align: center; }
+
+.image-card { position: relative; }
+.work-img { width: 100%; display: block; }
+.compare-entry {
+  position: absolute;
+  right: 18rpx;
+  bottom: 18rpx;
+  height: 56rpx;
+  padding: 0 22rpx;
+  border-radius: 999rpx;
+  color: #fff;
+  font-size: 24rpx;
+  font-weight: 800;
+  line-height: 56rpx;
+  background: rgba(15, 23, 42, 0.55);
+}
+
+.info-card { margin-top: 24rpx; padding: 28rpx; }
+.title { margin-bottom: 16rpx; color: #172033; font-size: 32rpx; font-weight: 700; }
+.cell {
+  padding: 10rpx 0;
+  display: flex;
+  color: #7f8896;
+  font-size: 27rpx;
+  line-height: 1.6;
+}
+.cell-label { flex-shrink: 0; }
+.cell-content { flex: 1; min-width: 0; color: #172033; }
+.link { color: #0b8cff; }
+.note {
+  display: block;
+  margin-top: 16rpx;
+  padding-top: 16rpx;
+  border-top: 2rpx solid #f1f5fa;
+  color: #8a95a6;
+  font-size: 23rpx;
+  line-height: 1.5;
+}
+
+.bottom-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 18rpx 28rpx calc(18rpx + env(safe-area-inset-bottom));
+  background: #fff;
+  display: flex;
+  gap: 18rpx;
+  box-shadow: 0 -8rpx 24rpx rgba(35, 55, 90, 0.08);
+}
+.bar-btn,
+.main-btn {
+  height: 82rpx;
+  border-radius: 42rpx;
+  font-size: 29rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bar-btn { width: 150rpx; color: #0b8cff; background: #eef6ff; }
+.main-btn { flex: 1; color: #fff; background: #0b8cff; }
+
+/* 对比弹层：与动漫头像保持一致 */
+.compare-modal {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 120;
+}
+.compare-backdrop {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(15, 23, 42, 0.58);
+}
+.compare-panel {
+  position: absolute;
+  left: 36rpx;
+  right: 36rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 24rpx;
+  border-radius: 28rpx;
+  background: #ffffff;
+}
+.compare-panel-head {
+  margin-bottom: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #172033;
+  font-size: 32rpx;
+  font-weight: 800;
+}
+.close-btn {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  color: #64748b;
+  background: #f1f5f9;
+  font-size: 42rpx;
+  line-height: 50rpx;
+  text-align: center;
+  font-weight: 300;
+}
+.large-compare {
+  position: relative;
+  width: 100%;
+  height: 900rpx;
+  max-height: 70vh;
+  border-radius: 22rpx;
+  background: #dfe8f4;
+  overflow: hidden;
+}
+.compare-img { width: 100%; height: 100%; }
+.compare-before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+.large-compare .compare-before .compare-img { width: calc(100vw - 120rpx); }
+.compare-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 4rpx;
+  margin-left: -2rpx;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 0 12rpx rgba(20, 37, 66, 0.22);
+}
+.compare-line.large { width: 6rpx; margin-left: -3rpx; }
+.compare-handle {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 38rpx;
+  height: 58rpx;
+  margin-left: -19rpx;
+  margin-top: -29rpx;
+  border-radius: 999rpx;
+  background: #ffffff;
+  box-shadow: 0 8rpx 18rpx rgba(20, 37, 66, 0.22);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rpx;
+  color: #1f8cff;
+  font-size: 24rpx;
+  font-weight: 900;
+}
+.compare-handle.large {
+  width: 54rpx;
+  height: 78rpx;
+  margin-left: -27rpx;
+  margin-top: -39rpx;
+  font-size: 32rpx;
+}
+.compare-tag {
+  position: absolute;
+  top: 12rpx;
+  padding: 6rpx 12rpx;
+  border-radius: 999rpx;
+  color: #ffffff;
+  background: rgba(15, 23, 42, 0.46);
+  font-size: 20rpx;
+  font-weight: 700;
+}
+.compare-tag.left { left: 12rpx; }
+.compare-tag.right { right: 12rpx; }
+.compare-guide {
+  display: block;
+  margin-top: 18rpx;
+  color: #64748b;
+  font-size: 24rpx;
+  text-align: center;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>
diff --git a/pages/tool/old-photo-history.vue b/pages/tool/old-photo-history.vue
new file mode 100644
index 0000000..3e19227
--- /dev/null
+++ b/pages/tool/old-photo-history.vue
@@ -0,0 +1,393 @@
+<template>
+  <view class="page">
+    <scroll-view
+      class="scroll"
+      scroll-y
+      refresher-enabled
+      :refresher-triggered="refreshing"
+      @refresherrefresh="refresh"
+      @scrolltolower="loadMore"
+    >
+      <view class="wrap">
+        <view class="studio-head">
+          <view>
+            <text class="eyebrow">OLD PHOTO GALLERY</text>
+            <text class="page-title">我的老照片</text>
+            <text class="page-desc">每次修复结果都会保存，完成后可查看对比、保存原图或继续修复。</text>
+          </view>
+          <view class="create-btn" @click="goCreate">修复</view>
+        </view>
+
+        <view class="stats-row">
+          <view class="stat-card">
+            <text class="stat-num">{{ total || list.length }}</text>
+            <text class="stat-label">全部记录</text>
+          </view>
+          <view class="stat-card">
+            <text class="stat-num">{{ pendingCount }}</text>
+            <text class="stat-label">生成中</text>
+          </view>
+          <view class="stat-card">
+            <text class="stat-num">{{ successCount }}</text>
+            <text class="stat-label">已完成</text>
+          </view>
+        </view>
+
+        <view v-if="list.length" class="gallery">
+          <view v-for="item in list" :key="item.photo_open_id" class="work-card">
+            <view class="poster" @click="openItem(item)">
+              <image v-if="item.cover" class="poster-img" :src="item.cover" mode="aspectFill" />
+              <view v-else class="poster-empty"></view>
+
+              <view class="status-chip" :class="statusClass(item)">{{ item.status_text }}</view>
+
+              <view v-if="isPending(item)" class="progress-mask">
+                <view class="spinner"></view>
+                <text>{{ Number(item.status) === 10 ? '排队中' : '正在修复' }}</text>
+              </view>
+              <view v-else-if="Number(item.status) < 0" class="failed-mask">
+                <text>{{ item.error_msg || '修复失败' }}</text>
+              </view>
+            </view>
+
+            <view class="card-info">
+              <text class="mode-name">{{ item.mode_name || '老照片修复' }}</text>
+              <view class="time-line">
+                <text>{{ formatTime(item.add_time) }}</text>
+                <view class="delete-btn" @click.stop="deleteItem(item)">删除</view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <view v-if="!list.length && !loading" class="empty-state">
+          <view class="empty-preview">
+            <view class="empty-photo"></view>
+          </view>
+          <text class="empty-title">还没有修复记录</text>
+          <text class="empty-desc">上传一张老照片，试试修复和上色的效果。</text>
+          <view class="empty-action" @click="goCreate">去修复</view>
+        </view>
+
+        <view v-if="loading" class="loading">{{ list.length ? '加载更多...' : '加载中...' }}</view>
+        <view v-if="list.length && list.length >= total && !loading" class="end-text">已经到底了</view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { onLoad, onUnload } from '@dcloudio/uni-app'
+import dayjs from 'dayjs'
+import { oldPhotoApi } from '@/api/index.js'
+import { useApp } from '@/utils/useApp.js'
+
+const { toast } = useApp()
+const list = ref([])
+const page = ref(1)
+const total = ref(0)
+const loading = ref(false)
+const refreshing = ref(false)
+let timer = 0
+
+const pendingCount = computed(() => list.value.filter((item) => isPending(item)).length)
+const successCount = computed(() => list.value.filter((item) => Number(item.status) === 30).length)
+
+onLoad(() => refresh())
+onUnload(() => clearTimeout(timer))
+
+function isPending(item) {
+  return [10, 20].includes(Number(item.status))
+}
+
+function formatTime(value) {
+  if (!value) return ''
+  return dayjs(Number(value) * 1000).format('YYYY-MM-DD HH:mm')
+}
+
+async function fetchList(reset = false) {
+  if (loading.value) return
+  loading.value = true
+  try {
+    const res = await oldPhotoApi.getList({ page_no: page.value, page_size: 10 })
+    const rows = res.list || []
+    total.value = Number((res.data && res.data.total) || rows.length)
+    list.value = reset ? rows : list.value.concat(rows)
+    scheduleRefresh()
+  } catch (e) {
+    toast((e && e.msg) || '历史记录加载失败')
+  } finally {
+    loading.value = false
+    refreshing.value = false
+  }
+}
+
+// 有进行中的任务就轮询：后端 getlist 会顺带推进任务状态
+function scheduleRefresh() {
+  clearTimeout(timer)
+  if (list.value.some((item) => isPending(item))) {
+    timer = setTimeout(() => refreshSilent(), 3000)
+  }
+}
+
+function refresh() {
+  refreshing.value = true
+  refreshSilent()
+}
+
+function refreshSilent() {
+  page.value = 1
+  fetchList(true)
+}
+
+function loadMore() {
+  if (loading.value) return
+  if (list.value.length >= total.value) return
+  page.value += 1
+  fetchList()
+}
+
+// 进行中的也能进详情页看进度
+function openItem(item) {
+  if (Number(item.status) < 0) return toast(item.error_msg || '该记录修复失败')
+  uni.navigateTo({ url: `/pages/tool/old-photo-detail?id=${item.photo_open_id}` })
+}
+
+function statusClass(item) {
+  if (isPending(item)) return 'pending'
+  if (Number(item.status) < 0) return 'failed'
+  return 'done'
+}
+
+function goCreate() {
+  const delta = getPageStackDelta('pages/tool/old-photo')
+  if (delta > 0) {
+    uni.navigateBack({ delta })
+    return
+  }
+  uni.navigateTo({ url: '/pages/tool/old-photo' })
+}
+
+function getPageStackDelta(routeName) {
+  const pages = getCurrentPages()
+  const index = pages.findIndex((item) => item.route === routeName)
+  return index >= 0 ? pages.length - 1 - index : -1
+}
+
+function deleteItem(item) {
+  uni.showModal({
+    title: '温馨提示',
+    content: '是否确认删除该记录？',
+    confirmText: '确认删除',
+    success: async (res) => {
+      if (!res.confirm) return
+      try {
+        await oldPhotoApi.delete({ photo_open_id: item.photo_open_id })
+        toast('删除成功')
+        refresh()
+      } catch (e) {
+        toast((e && e.msg) || '删除失败')
+      }
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.page,
+.scroll {
+  height: 100vh;
+  background: #f6f8fc;
+}
+
+.wrap { padding: 24rpx 28rpx 70rpx; }
+
+.studio-head {
+  padding: 30rpx;
+  border-radius: 26rpx;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  gap: 24rpx;
+  box-shadow: 0 10rpx 28rpx rgba(31, 52, 86, 0.05);
+}
+.studio-head > view:first-child { flex: 1; min-width: 0; }
+.eyebrow { display: block; color: #1f8cff; font-size: 20rpx; font-weight: 800; }
+.page-title {
+  display: block;
+  margin-top: 10rpx;
+  color: #172033;
+  font-size: 40rpx;
+  line-height: 1.2;
+  font-weight: 900;
+}
+.page-desc { display: block; margin-top: 12rpx; color: #64748b; font-size: 24rpx; line-height: 1.5; }
+.create-btn {
+  width: 112rpx;
+  height: 68rpx;
+  border-radius: 999rpx;
+  color: #ffffff;
+  background: #1f8cff;
+  font-size: 26rpx;
+  line-height: 68rpx;
+  text-align: center;
+  font-weight: 800;
+  box-shadow: 0 12rpx 24rpx rgba(31, 140, 255, 0.22);
+  flex-shrink: 0;
+}
+
+.stats-row {
+  margin-top: 18rpx;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14rpx;
+}
+.stat-card {
+  padding: 20rpx 10rpx;
+  border-radius: 20rpx;
+  background: #ffffff;
+  text-align: center;
+  box-shadow: 0 8rpx 20rpx rgba(31, 52, 86, 0.04);
+}
+.stat-num { display: block; color: #172033; font-size: 34rpx; line-height: 1; font-weight: 900; }
+.stat-label { display: block; margin-top: 10rpx; color: #7c8a9b; font-size: 22rpx; }
+
+.gallery {
+  margin-top: 24rpx;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 22rpx;
+}
+.work-card {
+  border-radius: 24rpx;
+  background: #ffffff;
+  overflow: hidden;
+  box-shadow: 0 10rpx 28rpx rgba(31, 52, 86, 0.06);
+}
+.poster {
+  position: relative;
+  width: 100%;
+  height: 440rpx;
+  background: #dfe7f2;
+  overflow: hidden;
+}
+.poster-img,
+.poster-empty { width: 100%; height: 100%; }
+.poster-empty { background: linear-gradient(135deg, #eef4fb, #dbe6f4); }
+
+.status-chip {
+  position: absolute;
+  left: 14rpx;
+  top: 14rpx;
+  height: 42rpx;
+  padding: 0 16rpx;
+  border-radius: 999rpx;
+  color: #ffffff;
+  font-size: 22rpx;
+  line-height: 42rpx;
+  font-weight: 800;
+  background: rgba(15, 23, 42, 0.48);
+}
+.status-chip.done { background: rgba(31, 140, 255, 0.9); }
+.status-chip.pending { background: rgba(249, 115, 22, 0.92); }
+.status-chip.failed { background: rgba(239, 68, 68, 0.9); }
+
+.progress-mask,
+.failed-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  padding: 24rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 26rpx;
+  text-align: center;
+  background: rgba(15, 23, 42, 0.52);
+}
+.failed-mask { background: rgba(127, 29, 29, 0.72); font-size: 24rpx; }
+.spinner {
+  width: 48rpx;
+  height: 48rpx;
+  margin-bottom: 18rpx;
+  border: 6rpx solid rgba(255, 255, 255, 0.45);
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.card-info { padding: 18rpx; }
+.mode-name {
+  display: block;
+  margin-bottom: 10rpx;
+  color: #172033;
+  font-size: 25rpx;
+  font-weight: 800;
+}
+.time-line { display: flex; align-items: center; gap: 12rpx; color: #64748b; font-size: 22rpx; }
+.time-line text { flex: 1; min-width: 0; }
+.delete-btn {
+  width: 74rpx;
+  height: 44rpx;
+  border-radius: 999rpx;
+  color: #ef4444;
+  background: #fff1f2;
+  font-size: 22rpx;
+  line-height: 44rpx;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.empty-state {
+  margin-top: 86rpx;
+  padding: 56rpx 34rpx;
+  border-radius: 28rpx;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  box-shadow: 0 10rpx 28rpx rgba(31, 52, 86, 0.05);
+}
+.empty-preview {
+  width: 150rpx;
+  height: 200rpx;
+  border-radius: 32rpx;
+  background: linear-gradient(135deg, #edf6ff, #fff4f0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.empty-photo {
+  width: 88rpx;
+  height: 108rpx;
+  border-radius: 14rpx;
+  border: 6rpx solid #1f8cff;
+  background: linear-gradient(135deg, #d7d0c6 50%, #5db2d9 50%);
+}
+.empty-title { margin-top: 28rpx; color: #172033; font-size: 32rpx; font-weight: 900; }
+.empty-desc { margin-top: 12rpx; color: #64748b; font-size: 25rpx; line-height: 1.5; }
+.empty-action {
+  margin-top: 28rpx;
+  width: 220rpx;
+  height: 72rpx;
+  border-radius: 999rpx;
+  color: #ffffff;
+  background: #1f8cff;
+  font-size: 28rpx;
+  line-height: 72rpx;
+  font-weight: 800;
+}
+
+.loading,
+.end-text { padding: 46rpx 0 20rpx; color: #7c8a9b; font-size: 24rpx; text-align: center; }
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>
diff --git a/pages/tool/old-photo.vue b/pages/tool/old-photo.vue
index cca93bb..9f089c5 100644
--- a/pages/tool/old-photo.vue
+++ b/pages/tool/old-photo.vue
@@ -1,145 +1,270 @@
 <template>
-  <view class="page">
-    <scroll-view class="scroll" scroll-y>
-      <view class="wrap">
-        <view class="hero-card">
-          <view class="hero-copy">
-            <text class="eyebrow">OLD PHOTO RESTORE</text>
-            <text class="hero-title">老照片修复 / 上色</text>
-            <text class="hero-desc">适合黑白、泛黄、模糊、划痕或破损照片，先搭建 UI，生成逻辑后续接入。</text>
-          </view>
-          <view class="hero-preview">
-            <view class="photo before"></view>
-            <view class="photo after"></view>
+  <view class="wrap">
+    <view class="hero-card">
+      <view class="hero-copy">
+        <text class="eyebrow">OLD PHOTO RESTORE</text>
+        <text class="hero-title">老照片修复 / 上色</text>
+        <text class="hero-desc">黑白、泛黄、模糊、有划痕的照片都能修。AI 会重绘上色，五官可能有轻微变化。</text>
+        <view class="hero-actions">
+          <view v-if="hasDemo" class="hero-pill" @click="openDemoCompare">查看对比</view>
+          <view class="hero-link" @click="chooseImage">上传照片</view>
+        </view>
+      </view>
+      <!-- demo 前后对比缩略图（配置项 old_photo_demo），点击进大图对比 -->
+      <view v-if="hasDemo" class="hero-thumb" @click="openDemoCompare">
+        <view class="mini-compare">
+          <image class="compare-img" :src="demoPair.result" mode="aspectFill" />
+          <view class="compare-before mini-before">
+            <image class="compare-img" :src="demoPair.original" mode="aspectFill" />
           </view>
+          <view class="compare-line mini-line"></view>
+          <!-- 缩略图只有 168rpx 宽，标签用两个字，否则会挤到中线上 -->
+          <view class="compare-tag left">原图</view>
+          <view class="compare-tag right">修复</view>
         </view>
+      </view>
+    </view>
 
-        <view class="upload-card">
-          <view class="card-head">
-            <view>
-              <text class="card-title"><text class="required">*</text>上传照片</text>
-              <text class="card-desc">支持黑白、泛黄、模糊、划痕或破损照片</text>
-            </view>
-            <text class="card-tip">0/1</text>
-          </view>
-          <view class="upload-strip" @click="showTodo('选择老照片')">
-            <view class="upload-thumb"><text class="upload-plus">+</text></view>
-            <view class="upload-copy">
-              <text class="upload-title">上传需要修复的老照片</text>
-              <text class="upload-sub">建议选择主体清晰、人物不被严重遮挡的照片</text>
-            </view>
-            <view class="upload-action">上传</view>
-          </view>
+    <!-- ==================== 结果 ==================== -->
+    <view v-if="job.photo_open_id" class="section">
+      <view class="section-head">
+        <text class="tool-section-title">{{ job.title || '修复结果' }}</text>
+        <text class="section-tip">{{ job.status_text }}</text>
+      </view>
+
+      <!-- 处理中 -->
+      <view v-if="isPending" class="progress-box">
+        <view class="progress-ring"></view>
+        <text class="progress-title">{{ progressTitle }}</text>
+        <text class="progress-sub">已等待 {{ waitedSeconds }} 秒，可以留在本页等待，也可以稍后从历史记录查看</text>
+      </view>
+
+      <!-- 失败 -->
+      <view v-else-if="job.status < 0" class="fail-box">
+        <text class="fail-title">{{ job.error_msg || '生成失败' }}</text>
+        <text class="fail-sub">本次未扣点，可以换一张更清晰的照片重试</text>
+      </view>
+
+      <!-- 成功：默认直接展示修复后的成品，对比放到弹层里 -->
+      <view v-else class="result-box">
+        <view class="result-stage" @click="previewResult">
+          <image class="result-img" :src="job.result_url" mode="widthFix" />
+        </view>
+        <view class="result-actions">
+          <view class="ghost-btn" @click="openResultCompare">查看对比</view>
+          <view class="ghost-btn" @click="saveResult">保存到相册</view>
+          <view class="ghost-btn" @click="resetJob">再修一张</view>
         </view>
+      </view>
+    </view>
 
-        <view class="section">
-          <view class="section-head">
-            <text class="tool-section-title">照片风格</text>
-            <text class="section-tip">输出方式</text>
-          </view>
-          <view class="style-grid">
-            <view
-              v-for="item in styleOptions"
-              :key="item"
-              class="style-item"
-              :class="{ active: activeStyle === item }"
-              @click="activeStyle = item"
-            >
-              {{ item }}
-            </view>
-          </view>
+    <!-- ==================== 上传 ==================== -->
+    <view v-if="!job.photo_open_id || job.status < 0" class="upload-card">
+      <view class="card-head">
+        <view>
+          <text class="card-title"><text class="required">*</text>上传照片</text>
+          <text class="card-desc">支持黑白、泛黄、模糊、划痕或破损照片，单张不超过 10M</text>
+        </view>
+        <text class="card-tip">{{ localImage ? '1/1' : '0/1' }}</text>
+      </view>
+      <view class="upload-strip" @click="chooseImage">
+        <view class="upload-thumb">
+          <image v-if="localImage" class="upload-img" :src="localImage" mode="aspectFill" />
+          <text v-else class="upload-plus">+</text>
+        </view>
+        <view class="upload-copy">
+          <text class="upload-title">{{ localImage ? '已选择照片，可点击更换' : '上传需要修复的老照片' }}</text>
+          <text class="upload-sub">建议主体清晰、人物未被严重遮挡</text>
         </view>
+        <view class="upload-action">{{ localImage ? '更换' : '上传' }}</view>
+      </view>
+    </view>
 
-        <view class="section">
-          <view class="section-head">
-            <text class="tool-section-title">描述关键词</text>
-            <text class="section-tip">点击添加</text>
-          </view>
-          <textarea class="textarea" placeholder="补充照片修复要求，例如保留原始五官、增强清晰度、自然上色"></textarea>
-          <view class="keyword-row">
-            <view
-              v-for="item in keywords"
-              :key="item"
-              class="keyword-chip"
-              :class="{ active: selectedKeywords.includes(item) }"
-              @click="toggleKeyword(item)"
-            >
-              {{ item }}
-            </view>
+    <!-- ==================== 档位 ==================== -->
+    <view v-if="!job.photo_open_id || job.status < 0" class="section">
+      <view class="section-head">
+        <text class="tool-section-title">修复档位</text>
+        <text class="section-tip">按张计费</text>
+      </view>
+      <view class="mode-list">
+        <view
+          v-for="item in modes"
+          :key="item.key"
+          class="mode-item"
+          :class="{ active: activeMode === item.key }"
+          @click="selectMode(item.key)"
+        >
+          <view class="mode-main">
+            <text class="mode-name">{{ item.name }}</text>
+            <text class="mode-desc">{{ item.desc }}</text>
           </view>
+          <text class="mode-points">{{ item.points }}点</text>
         </view>
       </view>
-    </scroll-view>
+    </view>
 
+    <!-- ==================== 补充描述 ==================== -->
+    <view v-if="!job.photo_open_id || job.status < 0" class="section">
+      <view class="section-head">
+        <text class="tool-section-title">补充说明</text>
+        <text class="section-tip">选填</text>
+      </view>
+      <textarea
+        v-model="extraPrompt"
+        class="textarea"
+        maxlength="100"
+        placeholder="可以补充照片里的事实信息，例如：军装是绿色的、背景是老家的院子"
+      />
+      <view class="tips">
+        <text v-for="tip in tips" :key="tip" class="tip-item">· {{ tip }}</text>
+      </view>
+    </view>
+
+    <!-- ==================== 底部操作 ==================== -->
     <view class="bottom-bar">
       <view class="balance">
         <text class="balance-copy">{{ balanceText }}</text>
         <view v-if="isBalanceInsufficient" class="recharge-link" @click="goRecharge">去充值</view>
       </view>
       <view class="buttons">
-        <view class="history-btn" @click="showTodo('历史记录')">历史记录</view>
-        <view class="submit-btn" @click="showTodo('老照片修复')">
+        <view class="history-btn" @click="goHistory">历史记录</view>
+        <view class="submit-btn" :class="{ disabled: submitDisabled }" @click="submit">
           <image class="submit-icon" src="/static/icons/bolt.svg" mode="aspectFit" />
           <text>{{ submitText }}</text>
         </view>
       </view>
     </view>
+
+    <!-- ==================== 前后对比（demo 与成品共用，样式同动漫头像） ==================== -->
+    <view v-if="compareVisible" class="compare-modal">
+      <view class="compare-backdrop" @click="closeCompare"></view>
+      <view class="compare-panel">
+        <view class="compare-panel-head">
+          <text>{{ comparePair.title }}</text>
+          <view class="close-btn" @click="closeCompare">×</view>
+        </view>
+        <view
+          class="large-compare"
+          @touchstart.stop="onCompareTouch"
+          @touchmove.stop.prevent="onCompareTouch"
+          @click.stop="onCompareTouch"
+        >
+          <image class="compare-img" :src="comparePair.after" mode="aspectFit" />
+          <view class="compare-before" :style="{ width: comparePercent + '%' }">
+            <image class="compare-img" :src="comparePair.before" mode="aspectFit" />
+          </view>
+          <view class="compare-line large" :style="{ left: comparePercent + '%' }">
+            <view class="compare-handle large">
+              <text>‹</text>
+              <text>›</text>
+            </view>
+          </view>
+          <view class="compare-tag left">原图</view>
+          <view class="compare-tag right">修复后</view>
+        </view>
+        <text class="compare-guide">左右滑动中间按钮查看变化</text>
+      </view>
+    </view>
+
   </view>
 </template>
 
 <script setup>
 import { computed, ref } from 'vue'
-import { onLoad, onShow } from '@dcloudio/uni-app'
-import { billingApi, userApi } from '@/api/index.js'
+import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
+import { commonApi, oldPhotoApi, userApi } from '@/api/index.js'
+import { createOldPhoto } from '@/utils/upload.js'
+import { guid } from '@/utils/util.js'
 import { useUserStore } from '@/store/user.js'
 import { useApp } from '@/utils/useApp.js'
 
 const userStore = useUserStore()
 const { toast } = useApp()
-const activeStyle = ref('彩色')
-const selectedKeywords = ref(['4K', '自然上色'])
+
+// 轮询：混元未买并发，排队 + 生成通常几十秒，最长按后端 20 分钟超时来兜
+const POLL_INTERVAL = 3000
+const POLL_LIMIT = 5 * 60 * 1000
+
+// 首屏示例对比图由配置项 old_photo_demo 下发（同动漫头像的 anime_demo_v2），不在端上硬编码
+const DEMO_CONFIG_KEY = 'old_photo_demo'
+
+const modes = ref([])
+const tips = ref([])
+const activeMode = ref('colorize')
+const extraPrompt = ref('')
+const localImage = ref('')
 const balance = ref({ points: 0 })
 const quote = ref({ points: 0 })
-const appKey = 'old-photo'
-
-const styleOptions = ['彩色', '黑白']
-const keywords = [
-  '4K',
-  '自然上色',
-  '去掉划痕',
-  '去褶皱',
-  '去噪点',
-  '去除斑驳破损',
-  '衣服修复',
-  '面部还原真实人像',
-  '还原人脸五官细节',
-  '眼神神态自然',
-  '修补缺失破损区域',
-  '画质超清增强',
-  '锐化细节',
-  '保留年代质感',
-  '人物容貌不变',
-  '不扭曲五官'
-]
+const job = ref({})
+const submitting = ref(false)
+const comparePercent = ref(50)
+const compareVisible = ref(false)
+// 示例对比图（配置下发）与对比弹层的数据源（示例 或 本次成品）
+const demoPair = ref({ original: '', result: '' })
+const comparePair = ref({ before: '', after: '', title: '效果对比' })
+const waitedSeconds = ref(0)
+
+let pollTimer = null
+let pollStart = 0
+
+const hasDemo = computed(() => Boolean(demoPair.value.original && demoPair.value.result))
 const currentPoints = computed(() => Number(balance.value.points || balance.value.point_balance || 0))
-const currentCost = computed(() => Number(quote.value.points || 0))
+const currentMode = computed(() => modes.value.find((item) => item.key === activeMode.value) || {})
+const currentCost = computed(() => Number(currentMode.value.points || quote.value.points || 0))
+const isPending = computed(() => [10, 20].includes(Number(job.value.status)))
 const balanceText = computed(() => {
   const cost = currentCost.value
-  if (!userStore.isLogin) return cost ? `老照片修复 · ${cost}点/次` : '老照片修复'
+  if (!userStore.isLogin) return cost ? `老照片修复 · ${cost}点/张` : '老照片修复'
   return cost ? `余额${currentPoints.value}点 · 预计消耗${cost}点` : `余额${currentPoints.value}点`
 })
-const isBalanceInsufficient = computed(() => userStore.isLogin && currentCost.value > 0 && currentPoints.value < currentCost.value)
-const submitText = computed(() => currentCost.value ? `立即修复 · ${currentCost.value}点` : '立即修复')
+const isBalanceInsufficient = computed(
+  () => userStore.isLogin && currentCost.value > 0 && currentPoints.value < currentCost.value
+)
+const submitDisabled = computed(() => submitting.value || isPending.value)
+const submitText = computed(() => {
+  if (submitting.value) return '提交中...'
+  if (isPending.value) return '正在生成...'
+  const cost = currentCost.value
+  if (!userStore.isLogin) return cost ? `登录后修复 · ${cost}点` : '登录后修复'
+  return cost ? `立即修复 · ${cost}点` : '立即修复'
+})
+const progressTitle = computed(() => (Number(job.value.status) === 10 ? '排队中，前面还有任务' : 'AI 正在修复上色'))
 
-onLoad(() => {
-  loadBillingConfig()
+onLoad((options) => {
+  loadConfig()
+  loadDemo()
+  if (options && options.work) loadJob(options.work, true)
 })
 
 onShow(() => {
   if (userStore.isLogin) loadBalance()
-  loadBillingConfig()
+  // 从历史记录页返回时带回来的记录 id
+  const workId = uni.getStorageSync('old_photo_work_id')
+  if (workId) {
+    uni.removeStorageSync('old_photo_work_id')
+    loadJob(workId)
+  }
 })
 
+onUnload(() => stopPoll())
+
+async function loadConfig() {
+  try {
+    const res = await oldPhotoApi.getConfig({ mode: activeMode.value })
+    const data = res.data || {}
+    modes.value = data.modes || []
+    tips.value = data.tips || []
+    if (data.default_mode && !modes.value.find((item) => item.key === activeMode.value)) {
+      activeMode.value = data.default_mode
+    }
+    const billing = data.billing || {}
+    quote.value = billing.quote || {}
+    if (billing.balance) balance.value = billing.balance
+  } catch (e) {
+    toast(e.msg || '配置加载失败')
+  }
+}
+
 async function loadBalance() {
   try {
     const res = await userApi.getBalance()
@@ -147,52 +272,260 @@ async function loadBalance() {
   } catch (e) {}
 }
 
-async function loadBillingConfig() {
+/**
+ * 示例对比图：配置项 old_photo_demo，格式 [{ original, result }]
+ * 兼容 after/anime 字段名与「原图,结果图」这种逗号分隔的老写法；配置缺失就不展示示例入口。
+ */
+async function loadDemo() {
   try {
-    const res = await billingApi.getConfig({ app_key: appKey, image_count: 1 })
-    const data = res.data || {}
-    quote.value = data.quote || {}
-    if (data.balance) balance.value = data.balance
+    const res = await commonApi.getConfig({ keys: DEMO_CONFIG_KEY })
+    const rows = Array.isArray(res.list) ? res.list : []
+    const item = rows.find((it) => it.key === DEMO_CONFIG_KEY)
+    demoPair.value = normalizeDemo(item && item.value)
   } catch (e) {}
 }
 
-function goRecharge() {
-  uni.navigateTo({ url: '/pages/recharge/recharge' })
+function normalizeDemo(value) {
+  const empty = { original: '', result: '' }
+  if (!value) return empty
+  try {
+    const data = typeof value === 'string' ? JSON.parse(value) : value
+    const first = Array.isArray(data) ? data[0] : data
+    if (!first) return empty
+    return {
+      original: first.original || first.before || first.source || '',
+      result: first.result || first.after || first.anime || ''
+    }
+  } catch (e) {
+    const pics = String(value).split(',').map((item) => item.trim()).filter(Boolean)
+    if (pics.length >= 2) return { original: pics[0], result: pics[1] }
+    return empty
+  }
 }
 
-function toggleKeyword(item) {
-  const index = selectedKeywords.value.indexOf(item)
-  if (index >= 0) {
-    selectedKeywords.value.splice(index, 1)
-  } else {
-    selectedKeywords.value.push(item)
+function selectMode(key) {
+  if (activeMode.value === key) return
+  activeMode.value = key
+}
+
+function chooseImage() {
+  if (!requireLogin()) return
+  uni.chooseImage({
+    count: 1,
+    sizeType: ['original'], // 老照片细节要留住，不做端上压缩
+    sourceType: ['album', 'camera'],
+    success: (res) => {
+      const file = (res.tempFiles && res.tempFiles[0]) || {}
+      if (Number(file.size || 0) > 10 * 1024 * 1024) {
+        toast('图片不能超过 10M')
+        return
+      }
+      localImage.value = res.tempFilePaths[0]
+      job.value = {}
+    }
+  })
+}
+
+async function submit() {
+  if (!requireLogin()) return
+  if (submitDisabled.value) return
+  if (!localImage.value) return toast('请先上传老照片')
+  if (isBalanceInsufficient.value) return showBalanceModal()
+
+  submitting.value = true
+  uni.showLoading({ title: '提交中...', mask: true })
+  try {
+    const res = await createOldPhoto(localImage.value, {
+      mode: activeMode.value,
+      extra_prompt: extraPrompt.value,
+      request_id: guid()
+    })
+    job.value = res.data || {}
+    comparePercent.value = 50
+    if (Number(job.value.status) === 30) {
+      onJobDone()
+    } else {
+      startPoll()
+    }
+  } catch (e) {
+    // 1011 = 点数不足，后端统一错误码
+    if (e && e.code === 1011) showBalanceModal()
+    else toast((e && e.msg) || '提交失败，请重试')
+  } finally {
+    submitting.value = false
+    uni.hideLoading()
+  }
+}
+
+async function loadJob(photoOpenId, silent = false) {
+  try {
+    const res = await oldPhotoApi.getDetail({ photo_open_id: photoOpenId })
+    job.value = res.data || {}
+    if (job.value.source_url) localImage.value = ''
+    if (isPending.value) startPoll()
+    else if (Number(job.value.status) === 30) onJobDone()
+  } catch (e) {
+    if (!silent) toast((e && e.msg) || '记录加载失败')
   }
 }
 
-function showTodo(name) {
-  toast(`${name}逻辑待接入`)
+function startPoll() {
+  stopPoll()
+  pollStart = Date.now()
+  waitedSeconds.value = 0
+  pollTimer = setInterval(async () => {
+    waitedSeconds.value = Math.round((Date.now() - pollStart) / 1000)
+    if (Date.now() - pollStart > POLL_LIMIT) {
+      stopPoll()
+      toast('生成时间较长，可稍后从历史记录查看')
+      return
+    }
+    try {
+      const res = await oldPhotoApi.getDetail({ photo_open_id: job.value.photo_open_id })
+      const data = res.data || {}
+      job.value = data
+      if (Number(data.status) === 30) {
+        stopPoll()
+        onJobDone()
+      } else if (Number(data.status) < 0) {
+        stopPoll()
+        toast(data.error_msg || '生成失败，本次未扣点')
+      }
+    } catch (e) {
+      // 单次失败不中断轮询
+    }
+  }, POLL_INTERVAL)
+}
+
+function stopPoll() {
+  if (pollTimer) clearInterval(pollTimer)
+  pollTimer = null
+}
+
+function onJobDone() {
+  comparePercent.value = 50
+  compareVisible.value = false
+  loadBalance()
+}
+
+function resetJob() {
+  stopPoll()
+  job.value = {}
+  localImage.value = ''
+  extraPrompt.value = ''
+  compareVisible.value = false
+}
+
+function previewResult() {
+  if (!job.value.result_url) return
+  uni.previewImage({
+    urls: [job.value.result_url],
+    current: job.value.result_url
+  })
+}
+
+function openDemoCompare() {
+  if (!hasDemo.value) return
+  comparePair.value = {
+    before: demoPair.value.original,
+    after: demoPair.value.result,
+    title: '效果对比'
+  }
+  comparePercent.value = 50
+  compareVisible.value = true
+}
+
+function openResultCompare() {
+  if (!job.value.result_url || !job.value.source_url) return
+  comparePair.value = {
+    before: job.value.source_url,
+    after: job.value.result_url,
+    title: job.value.title || '修复结果'
+  }
+  comparePercent.value = 50
+  compareVisible.value = true
+}
+
+function closeCompare() {
+  compareVisible.value = false
+}
+
+function saveResult() {
+  if (!job.value.result_url) return
+  uni.showLoading({ title: '保存中...', mask: true })
+  uni.downloadFile({
+    url: job.value.result_url,
+    success: (res) => {
+      uni.saveImageToPhotosAlbum({
+        filePath: res.tempFilePath,
+        success: () => toast('已保存到相册'),
+        fail: () => toast('保存失败，请检查相册权限')
+      })
+    },
+    fail: () => toast('图片下载失败'),
+    complete: () => uni.hideLoading()
+  })
+}
+
+function goHistory() {
+  if (!requireLogin()) return
+  uni.navigateTo({ url: '/pages/tool/old-photo-history' })
+}
+
+function onCompareTouch(e) {
+  const touch = (e.touches && e.touches[0]) || (e.changedTouches && e.changedTouches[0]) || e
+  const x = touch.clientX || 0
+  uni.createSelectorQuery()
+    .select('.large-compare')
+    .boundingClientRect((rect) => {
+      if (!rect || !rect.width) return
+      const percent = ((x - rect.left) / rect.width) * 100
+      comparePercent.value = Math.max(6, Math.min(94, Number(percent.toFixed(1))))
+    })
+    .exec()
+}
+
+function requireLogin() {
+  if (userStore.isLogin) return true
+  uni.navigateTo({ url: '/pages/login/login' })
+  return false
+}
+
+function showBalanceModal() {
+  const cost = currentCost.value
+  uni.showModal({
+    title: '温馨提示',
+    content: cost ? `本次修复需要 ${cost} 点，当前点数不足，请充值后继续。` : '点数不足，请充值后继续。',
+    confirmText: '去充值',
+    cancelText: '知道了',
+    success: (res) => {
+      if (res.confirm) uni.navigateTo({ url: '/pages/recharge/recharge' })
+    }
+  })
+}
+
+function goRecharge() {
+  uni.navigateTo({ url: '/pages/recharge/recharge' })
 }
 </script>
 
 <style lang="scss" scoped>
-.page {
-  height: 100vh;
+.wrap {
+  min-height: 100vh;
+  padding: 24rpx 28rpx calc(300rpx + env(safe-area-inset-bottom));
   background: #f3f7fb;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+  box-sizing: border-box;
 }
-.scroll { flex: 1; height: 0; }
-.wrap { padding: 24rpx 28rpx 300rpx; }
 
 .hero-card {
   position: relative;
-  min-height: 260rpx;
   padding: 30rpx;
   border-radius: 28rpx;
   color: #fff;
   background: linear-gradient(135deg, #172033 0%, #2d5d7d 56%, #5cb7c4 100%);
   overflow: hidden;
+  display: flex;
+  align-items: center;
   box-sizing: border-box;
 }
 .hero-card::before {
@@ -205,56 +538,125 @@ function showTodo(name) {
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.12);
 }
-.hero-copy,
-.hero-preview {
+.hero-copy {
   position: relative;
   z-index: 1;
+  flex: 1;
+  min-width: 0;
 }
-.eyebrow {
-  display: block;
-  color: rgba(255, 255, 255, 0.68);
-  font-size: 21rpx;
-  font-weight: 800;
-}
-.hero-title {
-  display: block;
-  margin-top: 16rpx;
-  color: #fff;
-  font-size: 40rpx;
-  font-weight: 900;
-}
+.eyebrow { display: block; color: rgba(255, 255, 255, 0.68); font-size: 21rpx; font-weight: 800; }
+.hero-title { display: block; margin-top: 14rpx; color: #fff; font-size: 38rpx; font-weight: 900; }
 .hero-desc {
   display: block;
   margin-top: 14rpx;
-  width: 430rpx;
   color: rgba(255, 255, 255, 0.82);
-  font-size: 24rpx;
+  font-size: 23rpx;
   line-height: 1.5;
 }
-.hero-preview {
-  position: absolute;
-  right: 30rpx;
-  bottom: 28rpx;
-  width: 170rpx;
-  height: 116rpx;
+.hero-actions { margin-top: 22rpx; display: flex; gap: 16rpx; }
+.hero-pill,
+.hero-link {
+  height: 60rpx;
+  padding: 0 24rpx;
+  border-radius: 999rpx;
+  font-size: 25rpx;
+  font-weight: 800;
+  line-height: 60rpx;
+  text-align: center;
 }
-.photo {
-  position: absolute;
-  width: 96rpx;
-  height: 116rpx;
-  border-radius: 16rpx;
-  box-shadow: 0 16rpx 28rpx rgba(0, 0, 0, 0.18);
+.hero-pill { color: #17466b; background: #fff; }
+.hero-link {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.18);
+  border: 2rpx solid rgba(255, 255, 255, 0.42);
+  line-height: 56rpx;
 }
-.photo.before {
+
+.hero-thumb {
+  position: relative;
+  z-index: 1;
+  margin-left: 22rpx;
+  flex-shrink: 0;
+}
+/* 对比组件：与动漫头像保持一致 */
+.mini-compare,
+.large-compare {
+  position: relative;
+  overflow: hidden;
+  background: #dfe8f4;
+}
+.mini-compare {
+  width: 168rpx;
+  height: 252rpx;
+  border-radius: 28rpx;
+  border: 2rpx solid rgba(255, 255, 255, 0.45);
+  box-shadow: 0 18rpx 38rpx rgba(20, 37, 66, 0.28);
+}
+.compare-img {
+  width: 100%;
+  height: 100%;
+}
+.compare-before {
+  position: absolute;
   left: 0;
   top: 0;
-  background: linear-gradient(135deg, #d7d0c6, #6c6259);
+  bottom: 0;
+  overflow: hidden;
 }
-.photo.after {
-  right: 0;
+.mini-before { width: 50%; }
+.compare-before .compare-img { width: 164rpx; }
+.compare-line {
+  position: absolute;
+  top: 0;
   bottom: 0;
-  background: linear-gradient(135deg, #f4d4a0, #5db2d9 50%, #254f6d);
+  width: 4rpx;
+  margin-left: -2rpx;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 0 12rpx rgba(20, 37, 66, 0.22);
+}
+.compare-line.mini-line { left: 50%; }
+.compare-line.large {
+  width: 6rpx;
+  margin-left: -3rpx;
+}
+.compare-handle {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 38rpx;
+  height: 58rpx;
+  margin-left: -19rpx;
+  margin-top: -29rpx;
+  border-radius: 999rpx;
+  background: #ffffff;
+  box-shadow: 0 8rpx 18rpx rgba(20, 37, 66, 0.22);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rpx;
+  color: #1f8cff;
+  font-size: 24rpx;
+  font-weight: 900;
+}
+.compare-handle.large {
+  width: 54rpx;
+  height: 78rpx;
+  margin-left: -27rpx;
+  margin-top: -39rpx;
+  font-size: 32rpx;
+}
+.compare-tag {
+  position: absolute;
+  top: 12rpx;
+  padding: 6rpx 12rpx;
+  border-radius: 999rpx;
+  color: #ffffff;
+  background: rgba(15, 23, 42, 0.46);
+  font-size: 20rpx;
+  font-weight: 700;
 }
+.compare-tag.left { left: 12rpx; }
+.compare-tag.right { right: 12rpx; }
 
 .upload-card,
 .section {
@@ -265,31 +667,14 @@ function showTodo(name) {
   box-shadow: 0 8rpx 28rpx rgba(34, 68, 112, 0.05);
 }
 .card-head,
-.section-head {
-  display: flex;
-  align-items: baseline;
-}
+.section-head { display: flex; align-items: baseline; }
 .card-title,
-.tool-section-title {
-  display: block;
-  color: #172033;
-  font-size: 31rpx;
-  font-weight: 800;
-}
+.tool-section-title { display: block; color: #172033; font-size: 31rpx; font-weight: 800; }
 .required { margin-right: 4rpx; color: #ef4444; }
-.card-desc {
-  display: block;
-  margin-top: 8rpx;
-  color: #8a95a6;
-  font-size: 23rpx;
-  line-height: 1.35;
-}
+.card-desc { display: block; margin-top: 8rpx; color: #8a95a6; font-size: 23rpx; line-height: 1.35; }
 .card-tip,
-.section-tip {
-  margin-left: auto;
-  color: #8a95a6;
-  font-size: 23rpx;
-}
+.section-tip { margin-left: auto; color: #8a95a6; font-size: 23rpx; }
+
 .upload-strip {
   margin-top: 22rpx;
   min-height: 142rpx;
@@ -310,39 +695,37 @@ function showTodo(name) {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  overflow: hidden;
 }
+.upload-img { width: 100%; height: 100%; }
 .upload-plus { color: #0b8cff; font-size: 48rpx; line-height: 1; }
 .upload-copy { min-width: 0; flex: 1; margin-left: 20rpx; }
 .upload-title { display: block; color: #172033; font-size: 29rpx; font-weight: 800; }
 .upload-sub { display: block; margin-top: 8rpx; color: #7f8896; font-size: 23rpx; line-height: 1.4; }
 .upload-action { margin-left: 18rpx; color: #0b8cff; font-size: 25rpx; font-weight: 800; }
 
-.style-grid {
-  margin-top: 20rpx;
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14rpx;
-}
-.style-item {
-  height: 76rpx;
-  border-radius: 18rpx;
-  color: #596579;
-  font-size: 26rpx;
-  font-weight: 800;
-  line-height: 76rpx;
-  text-align: center;
+.mode-list { margin-top: 20rpx; }
+.mode-item {
+  margin-bottom: 14rpx;
+  padding: 22rpx;
+  border-radius: 20rpx;
   background: #f7f9fd;
   border: 2rpx solid transparent;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
 }
-.style-item.active {
-  color: #0b8cff;
-  background: #eff8ff;
-  border-color: #0b8cff;
-}
+.mode-item:last-child { margin-bottom: 0; }
+.mode-item.active { background: #eff8ff; border-color: #0b8cff; }
+.mode-main { min-width: 0; flex: 1; }
+.mode-name { display: block; color: #172033; font-size: 28rpx; font-weight: 800; }
+.mode-desc { display: block; margin-top: 6rpx; color: #8a95a6; font-size: 23rpx; line-height: 1.4; }
+.mode-points { margin-left: 18rpx; color: #0b8cff; font-size: 27rpx; font-weight: 800; flex-shrink: 0; }
+
 .textarea {
   margin-top: 20rpx;
   width: 100%;
-  min-height: 180rpx;
+  min-height: 150rpx;
   padding: 22rpx;
   border-radius: 20rpx;
   color: #172033;
@@ -351,28 +734,54 @@ function showTodo(name) {
   background: #f7f9fd;
   box-sizing: border-box;
 }
-.keyword-row {
-  margin-top: 18rpx;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 14rpx;
-}
-.keyword-chip {
-  min-height: 58rpx;
-  padding: 0 22rpx;
-  border-radius: 30rpx;
-  color: #0b8cff;
-  font-size: 24rpx;
-  font-weight: 700;
-  line-height: 58rpx;
-  background: #eef7ff;
-  border: 2rpx solid transparent;
-  box-sizing: border-box;
+.tips { margin-top: 18rpx; }
+.tip-item { display: block; margin-top: 6rpx; color: #8a95a6; font-size: 22rpx; line-height: 1.5; }
+
+.progress-box { padding: 50rpx 0; display: flex; flex-direction: column; align-items: center; }
+.progress-ring {
+  width: 64rpx;
+  height: 64rpx;
+  border: 6rpx solid #e0f0ff;
+  border-top-color: #0b8cff;
+  border-radius: 50%;
+  animation: spin 0.9s linear infinite;
 }
-.keyword-chip.active {
-  color: #fff;
-  background: #0b8cff;
+@keyframes spin { to { transform: rotate(360deg); } }
+.progress-title { margin-top: 22rpx; color: #172033; font-size: 28rpx; font-weight: 800; }
+.progress-sub {
+  margin-top: 10rpx;
+  padding: 0 40rpx;
+  color: #8a95a6;
+  font-size: 23rpx;
+  line-height: 1.5;
+  text-align: center;
 }
+
+.fail-box { padding: 44rpx 0; display: flex; flex-direction: column; align-items: center; }
+.fail-title { color: #f04438; font-size: 28rpx; font-weight: 800; }
+.fail-sub { margin-top: 10rpx; color: #8a95a6; font-size: 23rpx; }
+
+.result-box { margin-top: 20rpx; }
+.result-stage {
+  border-radius: 20rpx;
+  background: #f1f5fa;
+  overflow: hidden;
+}
+.result-img { display: block; width: 100%; }
+
+.result-actions { margin-top: 20rpx; display: flex; gap: 16rpx; }
+.ghost-btn {
+  flex: 1;
+  height: 76rpx;
+  border-radius: 999rpx;
+  color: #1f8cff;
+  font-size: 25rpx;
+  font-weight: 800;
+  line-height: 76rpx;
+  text-align: center;
+  background: #eef7ff;
+}
+
 .bottom-bar {
   position: fixed;
   left: 0;
@@ -413,10 +822,70 @@ function showTodo(name) {
   background: linear-gradient(135deg, #1f8cff, #41b9ff);
   box-shadow: 0 12rpx 24rpx rgba(31, 140, 255, 0.28);
 }
+.submit-btn.disabled { opacity: 0.6; }
+.submit-icon { width: 24rpx; height: 24rpx; margin-right: 8rpx; }
 
-.submit-icon {
-  width: 24rpx;
-  height: 24rpx;
-  margin-right: 8rpx;
+/* 对比弹层：与动漫头像保持一致 */
+.compare-modal {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 120;
+}
+.compare-backdrop {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(15, 23, 42, 0.58);
+}
+.compare-panel {
+  position: absolute;
+  left: 36rpx;
+  right: 36rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 24rpx;
+  border-radius: 28rpx;
+  background: #ffffff;
+}
+.compare-panel-head {
+  margin-bottom: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #172033;
+  font-size: 32rpx;
+  font-weight: 800;
+}
+.close-btn {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  color: #64748b;
+  background: #f1f5f9;
+  font-size: 42rpx;
+  line-height: 50rpx;
+  text-align: center;
+  font-weight: 300;
+}
+.large-compare {
+  width: 100%;
+  height: 900rpx;
+  max-height: 70vh;
+  border-radius: 22rpx;
+}
+.large-compare .compare-before .compare-img {
+  width: calc(100vw - 120rpx);
+}
+.compare-guide {
+  display: block;
+  margin-top: 18rpx;
+  color: #64748b;
+  font-size: 24rpx;
+  text-align: center;
 }
 </style>
diff --git a/pages/tool/portrait-detail.vue b/pages/tool/portrait-detail.vue
new file mode 100644
index 0000000..427ae91
--- /dev/null
+++ b/pages/tool/portrait-detail.vue
@@ -0,0 +1,503 @@
+<template>
+  <view class="page">
+    <scroll-view class="scroll" scroll-y>
+      <view class="wrap">
+        <!-- 处理中 / 失败 -->
+        <view v-if="!isSuccess" class="state-card">
+          <view v-if="isPending" class="spinner"></view>
+          <text class="state-title">{{ stateTitle }}</text>
+          <text v-if="isPending" class="count">{{ detail.success_count || 0 }} / {{ detail.count || 0 }} 张 · {{ countDown }}S</text>
+          <text v-if="!isPending" class="error">{{ detail.error_msg || '失败的照片不扣点，可以重新生成' }}</text>
+        </view>
+
+        <template v-else>
+          <!-- 主图 + 缩略图切换 -->
+          <view class="image-card" @click="preview">
+            <image class="work-img" :src="activeUrl" mode="widthFix" />
+            <view class="index-chip">{{ activeIndex + 1 }} / {{ resultUrls.length }}</view>
+          </view>
+          <view v-if="resultUrls.length > 1" class="thumb-row">
+            <image
+              v-for="(url, index) in resultUrls"
+              :key="url"
+              class="thumb"
+              :class="{ active: index === activeIndex }"
+              :src="url"
+              mode="aspectFill"
+              @click="activeIndex = index"
+            />
+          </view>
+        </template>
+
+        <view class="info-card">
+          <view class="title">生成信息</view>
+          <view class="cell">
+            <text class="cell-label">照片风格：</text>
+            <text class="cell-content">{{ detail.style_name || '-' }}</text>
+          </view>
+          <view v-for="item in optionTexts" :key="item.label" class="cell">
+            <text class="cell-label">{{ item.label }}：</text>
+            <text class="cell-content">{{ item.value }}</text>
+          </view>
+          <view class="cell">
+            <text class="cell-label">生成模型：</text>
+            <text class="cell-content">{{ detail.model_name || '-' }}</text>
+          </view>
+          <view class="cell">
+            <text class="cell-label">图片比例：</text>
+            <text class="cell-content">{{ detail.ratio || '-' }}</text>
+          </view>
+          <view class="cell">
+            <text class="cell-label">生成张数：</text>
+            <text class="cell-content">
+              成功 {{ detail.success_count || 0 }} 张<text v-if="detail.fail_count">，失败 {{ detail.fail_count }} 张</text>
+            </text>
+          </view>
+          <view v-if="detail.extra_prompt" class="cell">
+            <text class="cell-label">补充描述：</text>
+            <text class="cell-content">{{ detail.extra_prompt }}</text>
+          </view>
+          <view class="cell">
+            <text class="cell-label">创建时间：</text>
+            <text class="cell-content">{{ formatTime(detail.add_time) }}</text>
+          </view>
+          <view class="cell">
+            <text class="cell-label">功能来源：</text>
+            <text class="link" @click="createAgain">形象照 / 职业照 / 写真</text>
+          </view>
+          <text class="note">AI 会重绘服装与背景，五官可能出现轻微变化，建议对照原图确认。</text>
+        </view>
+      </view>
+    </scroll-view>
+
+    <view v-if="isSuccess" class="bottom-bar">
+      <view class="bar-btn" @click="save">保存</view>
+      <view class="bar-btn" @click="openCompare">对比</view>
+      <view class="main-btn" @click="createAgain">再拍一组</view>
+    </view>
+
+    <!-- 前后对比：样式与动漫头像一致 -->
+    <view v-if="compareVisible" class="compare-modal">
+      <view class="compare-backdrop" @click="closeCompare"></view>
+      <view class="compare-panel">
+        <view class="compare-panel-head">
+          <text>效果对比</text>
+          <view class="close-btn" @click="closeCompare">×</view>
+        </view>
+        <view
+          class="large-compare"
+          @touchstart.stop="onCompareTouch"
+          @touchmove.stop.prevent="onCompareTouch"
+          @click.stop="onCompareTouch"
+        >
+          <image class="compare-img" :src="activeUrl" mode="aspectFit" />
+          <view class="compare-before" :style="{ width: comparePercent + '%' }">
+            <image class="compare-img" :src="detail.source_url" mode="aspectFit" />
+          </view>
+          <view class="compare-line large" :style="{ left: comparePercent + '%' }">
+            <view class="compare-handle large">
+              <text>‹</text>
+              <text>›</text>
+            </view>
+          </view>
+          <view class="compare-tag left">原图</view>
+          <view class="compare-tag right">生成图</view>
+        </view>
+        <text class="compare-guide">左右滑动中间按钮查看变化</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { onLoad, onUnload } from '@dcloudio/uni-app'
+import dayjs from 'dayjs'
+import { portraitApi } from '@/api/index.js'
+import { useApp } from '@/utils/useApp.js'
+
+const { toast } = useApp()
+const id = ref('')
+const detail = ref({ status: 10 })
+const activeIndex = ref(0)
+const countDown = ref(0)
+const compareVisible = ref(false)
+const comparePercent = ref(50)
+let timer = 0
+let countTimer = 0
+
+// 后端 options 是 key，这里映射成中文；名称与 utils/portrait.js 的预设保持一致
+const OPTION_LABELS = {
+  background: '背景',
+  outfit: '服装',
+  framing: '取景',
+  art_style: '写真风格'
+}
+const OPTION_NAMES = {
+  white: '白色', gray: '浅灰', blue: '商务蓝', 'deep-blue': '深蓝', beige: '米色',
+  office: '办公室', bookshelf: '书架', cafe: '咖啡角', window: '落地窗',
+  formal: '正装', shirt: '衬衫', knit: '针织衫', 'tshirt-jeans': 'T恤配牛仔裤',
+  'blazer-tshirt': '西装外套配T恤', bust: '胸像', half: '半身',
+  guofeng: '古风', zangzu: '藏族', miaozu: '苗族', urban: '都市青年', trendy: '潮人',
+  dunhuang: '敦煌飞仙', hongkong: '港风复古', newchinese: '新中式', french: '法式油画'
+}
+
+const resultUrls = computed(() => detail.value.result_urls || [])
+const activeUrl = computed(() => resultUrls.value[activeIndex.value] || resultUrls.value[0] || '')
+const isPending = computed(() => [10, 20].includes(Number(detail.value.status)))
+const isSuccess = computed(() => Number(detail.value.status) === 30 && resultUrls.value.length > 0)
+const stateTitle = computed(() => {
+  if (Number(detail.value.status) === 10) return '排队中，请耐心等待'
+  if (Number(detail.value.status) === 20) return 'AI 正在生成形象照'
+  return '生成失败'
+})
+const optionTexts = computed(() => {
+  const options = detail.value.options || {}
+  return Object.keys(options).map((key) => ({
+    label: OPTION_LABELS[key] || key,
+    value: OPTION_NAMES[options[key]] || options[key]
+  }))
+})
+
+onLoad((options) => {
+  id.value = (options && options.id) || ''
+  loadDetail()
+})
+
+onUnload(() => {
+  clearTimeout(timer)
+  clearInterval(countTimer)
+})
+
+async function loadDetail() {
+  if (!id.value) return
+  try {
+    const res = await portraitApi.getDetail({ photo_open_id: id.value })
+    detail.value = res.data || {}
+    if (activeIndex.value >= resultUrls.value.length) activeIndex.value = 0
+    if (isPending.value) waitNext()
+  } catch (e) {
+    toast((e && e.msg) || '记录加载失败')
+  }
+}
+
+// 处理中就 3 秒拉一次，后端会在这一步推进任务并转存结果
+function waitNext() {
+  clearTimeout(timer)
+  clearInterval(countTimer)
+  countDown.value = 3
+  countTimer = setInterval(() => {
+    countDown.value -= 1
+    if (countDown.value <= 0) clearInterval(countTimer)
+  }, 1000)
+  timer = setTimeout(loadDetail, 3000)
+}
+
+function formatTime(value) {
+  if (!value) return '-'
+  return dayjs(Number(value) * 1000).format('YYYY-MM-DD HH:mm')
+}
+
+function preview() {
+  if (!resultUrls.value.length) return
+  uni.previewImage({ urls: resultUrls.value, current: activeUrl.value })
+}
+
+function save() {
+  if (!activeUrl.value) return
+  uni.showLoading({ title: '保存中...', mask: true })
+  uni.downloadFile({
+    url: activeUrl.value,
+    success: (res) => {
+      uni.saveImageToPhotosAlbum({
+        filePath: res.tempFilePath,
+        success: () => toast('已保存到相册'),
+        fail: () => toast('保存失败，请检查相册权限')
+      })
+    },
+    fail: () => toast('图片下载失败'),
+    complete: () => uni.hideLoading()
+  })
+}
+
+function openCompare() {
+  if (!activeUrl.value || !detail.value.source_url) return
+  comparePercent.value = 50
+  compareVisible.value = true
+}
+
+function closeCompare() {
+  compareVisible.value = false
+}
+
+function onCompareTouch(e) {
+  const touch = (e.touches && e.touches[0]) || (e.changedTouches && e.changedTouches[0]) || e
+  const x = touch.clientX || 0
+  uni.createSelectorQuery()
+    .select('.large-compare')
+    .boundingClientRect((rect) => {
+      if (!rect || !rect.width) return
+      const percent = ((x - rect.left) / rect.width) * 100
+      comparePercent.value = Math.max(6, Math.min(94, Number(percent.toFixed(1))))
+    })
+    .exec()
+}
+
+function createAgain() {
+  const delta = getPageStackDelta('pages/tool/portrait-photo')
+  if (delta > 0) {
+    uni.navigateBack({ delta })
+    return
+  }
+  uni.navigateTo({ url: '/pages/tool/portrait-photo' })
+}
+
+function getPageStackDelta(routeName) {
+  const pages = getCurrentPages()
+  const index = pages.findIndex((item) => item.route === routeName)
+  return index >= 0 ? pages.length - 1 - index : -1
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  height: 100vh;
+  background: #f4f7fb;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.scroll { flex: 1; height: 0; }
+/* 底栏是 fixed 的，留够 300rpx */
+.wrap { padding: 28rpx 28rpx 300rpx; }
+
+.state-card,
+.image-card,
+.info-card {
+  background: #fff;
+  border-radius: 18rpx;
+  overflow: hidden;
+}
+
+.state-card {
+  min-height: 540rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #172033;
+  font-size: 30rpx;
+}
+.spinner {
+  width: 72rpx;
+  height: 72rpx;
+  margin-bottom: 28rpx;
+  border: 8rpx solid #e9edf5;
+  border-top-color: #0b8cff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+.count,
+.error { margin-top: 18rpx; color: #7f8896; font-size: 26rpx; }
+.error { color: #f04438; padding: 0 40rpx; text-align: center; }
+
+.image-card { position: relative; }
+.work-img { width: 100%; display: block; }
+.index-chip {
+  position: absolute;
+  right: 18rpx;
+  bottom: 18rpx;
+  height: 48rpx;
+  padding: 0 20rpx;
+  border-radius: 999rpx;
+  color: #fff;
+  font-size: 23rpx;
+  font-weight: 800;
+  line-height: 48rpx;
+  background: rgba(15, 23, 42, 0.55);
+}
+
+.thumb-row {
+  margin-top: 18rpx;
+  display: flex;
+  gap: 14rpx;
+}
+.thumb {
+  width: 150rpx;
+  height: 150rpx;
+  border-radius: 16rpx;
+  background: #eef2f7;
+  border: 4rpx solid transparent;
+}
+.thumb.active { border-color: #0b8cff; }
+
+.info-card { margin-top: 24rpx; padding: 28rpx; }
+.title { margin-bottom: 16rpx; color: #172033; font-size: 32rpx; font-weight: 700; }
+.cell {
+  padding: 10rpx 0;
+  display: flex;
+  color: #7f8896;
+  font-size: 27rpx;
+  line-height: 1.6;
+}
+.cell-label { flex-shrink: 0; }
+.cell-content { flex: 1; min-width: 0; color: #172033; }
+.link { color: #0b8cff; }
+.note {
+  display: block;
+  margin-top: 16rpx;
+  padding-top: 16rpx;
+  border-top: 2rpx solid #f1f5fa;
+  color: #8a95a6;
+  font-size: 23rpx;
+  line-height: 1.5;
+}
+
+.bottom-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 18rpx 28rpx calc(18rpx + env(safe-area-inset-bottom));
+  background: #fff;
+  display: flex;
+  gap: 18rpx;
+  box-shadow: 0 -8rpx 24rpx rgba(35, 55, 90, 0.08);
+}
+.bar-btn,
+.main-btn {
+  height: 82rpx;
+  border-radius: 42rpx;
+  font-size: 29rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bar-btn { width: 150rpx; color: #0b8cff; background: #eef6ff; }
+.main-btn { flex: 1; color: #fff; background: #0b8cff; }
+
+/* 对比弹层：与动漫头像保持一致 */
+.compare-modal {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 120;
+}
+.compare-backdrop {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(15, 23, 42, 0.58);
+}
+.compare-panel {
+  position: absolute;
+  left: 36rpx;
+  right: 36rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 24rpx;
+  border-radius: 28rpx;
+  background: #ffffff;
+}
+.compare-panel-head {
+  margin-bottom: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #172033;
+  font-size: 32rpx;
+  font-weight: 800;
+}
+.close-btn {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  color: #64748b;
+  background: #f1f5f9;
+  font-size: 42rpx;
+  line-height: 50rpx;
+  text-align: center;
+  font-weight: 300;
+}
+.large-compare {
+  position: relative;
+  width: 100%;
+  height: 900rpx;
+  max-height: 70vh;
+  border-radius: 22rpx;
+  background: #dfe8f4;
+  overflow: hidden;
+}
+.compare-img { width: 100%; height: 100%; }
+.compare-before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+.large-compare .compare-before .compare-img { width: calc(100vw - 120rpx); }
+.compare-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 4rpx;
+  margin-left: -2rpx;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 0 12rpx rgba(20, 37, 66, 0.22);
+}
+.compare-line.large { width: 6rpx; margin-left: -3rpx; }
+.compare-handle {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 38rpx;
+  height: 58rpx;
+  margin-left: -19rpx;
+  margin-top: -29rpx;
+  border-radius: 999rpx;
+  background: #ffffff;
+  box-shadow: 0 8rpx 18rpx rgba(20, 37, 66, 0.22);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rpx;
+  color: #1f8cff;
+  font-size: 24rpx;
+  font-weight: 900;
+}
+.compare-handle.large {
+  width: 54rpx;
+  height: 78rpx;
+  margin-left: -27rpx;
+  margin-top: -39rpx;
+  font-size: 32rpx;
+}
+.compare-tag {
+  position: absolute;
+  top: 12rpx;
+  padding: 6rpx 12rpx;
+  border-radius: 999rpx;
+  color: #ffffff;
+  background: rgba(15, 23, 42, 0.46);
+  font-size: 20rpx;
+  font-weight: 700;
+}
+.compare-tag.left { left: 12rpx; }
+.compare-tag.right { right: 12rpx; }
+.compare-guide {
+  display: block;
+  margin-top: 18rpx;
+  color: #64748b;
+  font-size: 24rpx;
+  text-align: center;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>
diff --git a/pages/tool/portrait-history.vue b/pages/tool/portrait-history.vue
new file mode 100644
index 0000000..f27a370
--- /dev/null
+++ b/pages/tool/portrait-history.vue
@@ -0,0 +1,408 @@
+<template>
+  <view class="page">
+    <scroll-view
+      class="scroll"
+      scroll-y
+      refresher-enabled
+      :refresher-triggered="refreshing"
+      @refresherrefresh="refresh"
+      @scrolltolower="loadMore"
+    >
+      <view class="wrap">
+        <view class="studio-head">
+          <view>
+            <text class="eyebrow">PORTRAIT GALLERY</text>
+            <text class="page-title">我的形象照</text>
+            <text class="page-desc">每次生成的照片都会保存，完成后可查看大图、保存原图或继续创作。</text>
+          </view>
+          <view class="create-btn" @click="goCreate">生成</view>
+        </view>
+
+        <view class="stats-row">
+          <view class="stat-card">
+            <text class="stat-num">{{ total || list.length }}</text>
+            <text class="stat-label">全部记录</text>
+          </view>
+          <view class="stat-card">
+            <text class="stat-num">{{ pendingCount }}</text>
+            <text class="stat-label">生成中</text>
+          </view>
+          <view class="stat-card">
+            <text class="stat-num">{{ photoCount }}</text>
+            <text class="stat-label">已出图</text>
+          </view>
+        </view>
+
+        <view v-if="list.length" class="gallery">
+          <view v-for="item in list" :key="item.photo_open_id" class="work-card">
+            <view class="poster" @click="openItem(item)">
+              <image v-if="item.cover" class="poster-img" :src="item.cover" mode="aspectFill" />
+              <view v-else class="poster-empty"></view>
+
+              <view class="status-chip" :class="statusClass(item)">{{ item.status_text }}</view>
+              <view v-if="item.success_count > 1" class="count-chip">{{ item.success_count }}张</view>
+
+              <view v-if="isPending(item)" class="progress-mask">
+                <view class="spinner"></view>
+                <text>{{ item.success_count || 0 }}/{{ item.count || 0 }} 张</text>
+              </view>
+              <view v-else-if="Number(item.status) < 0" class="failed-mask">
+                <text>{{ item.error_msg || '生成失败' }}</text>
+              </view>
+            </view>
+
+            <view class="card-info">
+              <text class="style-name">{{ item.style_name || '形象照' }}</text>
+              <view class="time-line">
+                <text>{{ formatTime(item.add_time) }}</text>
+                <view class="delete-btn" @click.stop="deleteItem(item)">删除</view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <view v-if="!list.length && !loading" class="empty-state">
+          <view class="empty-preview">
+            <view class="empty-photo"></view>
+          </view>
+          <text class="empty-title">还没有形象照</text>
+          <text class="empty-desc">上传一张人像照片，试试商务形象照或艺术写真。</text>
+          <view class="empty-action" @click="goCreate">去生成</view>
+        </view>
+
+        <view v-if="loading" class="loading">{{ list.length ? '加载更多...' : '加载中...' }}</view>
+        <view v-if="list.length && list.length >= total && !loading" class="end-text">已经到底了</view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { onLoad, onUnload } from '@dcloudio/uni-app'
+import dayjs from 'dayjs'
+import { portraitApi } from '@/api/index.js'
+import { useApp } from '@/utils/useApp.js'
+
+const { toast } = useApp()
+const list = ref([])
+const page = ref(1)
+const total = ref(0)
+const loading = ref(false)
+const refreshing = ref(false)
+let timer = 0
+
+const pendingCount = computed(() => list.value.filter((item) => isPending(item)).length)
+const photoCount = computed(() =>
+  list.value.reduce((sum, item) => sum + Number(item.success_count || 0), 0)
+)
+
+onLoad(() => refresh())
+onUnload(() => clearTimeout(timer))
+
+function isPending(item) {
+  return [10, 20].includes(Number(item.status))
+}
+
+function formatTime(value) {
+  if (!value) return ''
+  return dayjs(Number(value) * 1000).format('YYYY-MM-DD HH:mm')
+}
+
+async function fetchList(reset = false) {
+  if (loading.value) return
+  loading.value = true
+  try {
+    const res = await portraitApi.getList({ page_no: page.value, page_size: 10 })
+    const rows = res.list || []
+    total.value = Number((res.data && res.data.total) || rows.length)
+    list.value = reset ? rows : list.value.concat(rows)
+    scheduleRefresh()
+  } catch (e) {
+    toast((e && e.msg) || '记录加载失败')
+  } finally {
+    loading.value = false
+    refreshing.value = false
+  }
+}
+
+// 有进行中的任务就轮询：后端 getlist 会顺带推进任务状态
+function scheduleRefresh() {
+  clearTimeout(timer)
+  if (list.value.some((item) => isPending(item))) {
+    timer = setTimeout(() => refreshSilent(), 3000)
+  }
+}
+
+function refresh() {
+  refreshing.value = true
+  refreshSilent()
+}
+
+function refreshSilent() {
+  page.value = 1
+  fetchList(true)
+}
+
+function loadMore() {
+  if (loading.value) return
+  if (list.value.length >= total.value) return
+  page.value += 1
+  fetchList()
+}
+
+function openItem(item) {
+  if (Number(item.status) < 0) return toast(item.error_msg || '该记录生成失败')
+  uni.navigateTo({ url: `/pages/tool/portrait-detail?id=${item.photo_open_id}` })
+}
+
+function statusClass(item) {
+  if (isPending(item)) return 'pending'
+  if (Number(item.status) < 0) return 'failed'
+  return 'done'
+}
+
+function goCreate() {
+  const delta = getPageStackDelta('pages/tool/portrait-photo')
+  if (delta > 0) {
+    uni.navigateBack({ delta })
+    return
+  }
+  uni.navigateTo({ url: '/pages/tool/portrait-photo' })
+}
+
+function getPageStackDelta(routeName) {
+  const pages = getCurrentPages()
+  const index = pages.findIndex((item) => item.route === routeName)
+  return index >= 0 ? pages.length - 1 - index : -1
+}
+
+function deleteItem(item) {
+  uni.showModal({
+    title: '温馨提示',
+    content: '是否确认删除该记录？',
+    confirmText: '确认删除',
+    success: async (res) => {
+      if (!res.confirm) return
+      try {
+        await portraitApi.delete({ photo_open_id: item.photo_open_id })
+        toast('删除成功')
+        refresh()
+      } catch (e) {
+        toast((e && e.msg) || '删除失败')
+      }
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.page,
+.scroll {
+  height: 100vh;
+  background: #f6f8fc;
+}
+
+.wrap { padding: 24rpx 28rpx 70rpx; }
+
+.studio-head {
+  padding: 30rpx;
+  border-radius: 26rpx;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  gap: 24rpx;
+  box-shadow: 0 10rpx 28rpx rgba(31, 52, 86, 0.05);
+}
+.studio-head > view:first-child { flex: 1; min-width: 0; }
+.eyebrow { display: block; color: #1f8cff; font-size: 20rpx; font-weight: 800; }
+.page-title {
+  display: block;
+  margin-top: 10rpx;
+  color: #172033;
+  font-size: 40rpx;
+  line-height: 1.2;
+  font-weight: 900;
+}
+.page-desc { display: block; margin-top: 12rpx; color: #64748b; font-size: 24rpx; line-height: 1.5; }
+.create-btn {
+  width: 112rpx;
+  height: 68rpx;
+  border-radius: 999rpx;
+  color: #ffffff;
+  background: #1f8cff;
+  font-size: 26rpx;
+  line-height: 68rpx;
+  text-align: center;
+  font-weight: 800;
+  box-shadow: 0 12rpx 24rpx rgba(31, 140, 255, 0.22);
+  flex-shrink: 0;
+}
+
+.stats-row {
+  margin-top: 18rpx;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14rpx;
+}
+.stat-card {
+  padding: 20rpx 10rpx;
+  border-radius: 20rpx;
+  background: #ffffff;
+  text-align: center;
+  box-shadow: 0 8rpx 20rpx rgba(31, 52, 86, 0.04);
+}
+.stat-num { display: block; color: #172033; font-size: 34rpx; line-height: 1; font-weight: 900; }
+.stat-label { display: block; margin-top: 10rpx; color: #7c8a9b; font-size: 22rpx; }
+
+.gallery {
+  margin-top: 24rpx;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 22rpx;
+}
+.work-card {
+  border-radius: 24rpx;
+  background: #ffffff;
+  overflow: hidden;
+  box-shadow: 0 10rpx 28rpx rgba(31, 52, 86, 0.06);
+}
+.poster {
+  position: relative;
+  width: 100%;
+  height: 440rpx;
+  background: #dfe7f2;
+  overflow: hidden;
+}
+.poster-img,
+.poster-empty { width: 100%; height: 100%; }
+.poster-empty { background: linear-gradient(135deg, #eef4fb, #dbe6f4); }
+
+.status-chip {
+  position: absolute;
+  left: 14rpx;
+  top: 14rpx;
+  height: 42rpx;
+  padding: 0 16rpx;
+  border-radius: 999rpx;
+  color: #ffffff;
+  font-size: 22rpx;
+  line-height: 42rpx;
+  font-weight: 800;
+  background: rgba(15, 23, 42, 0.48);
+}
+.status-chip.done { background: rgba(31, 140, 255, 0.9); }
+.status-chip.pending { background: rgba(249, 115, 22, 0.92); }
+.status-chip.failed { background: rgba(239, 68, 68, 0.9); }
+.count-chip {
+  position: absolute;
+  right: 14rpx;
+  top: 14rpx;
+  height: 42rpx;
+  padding: 0 14rpx;
+  border-radius: 999rpx;
+  color: #ffffff;
+  font-size: 21rpx;
+  line-height: 42rpx;
+  font-weight: 800;
+  background: rgba(15, 23, 42, 0.48);
+}
+
+.progress-mask,
+.failed-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  padding: 24rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 26rpx;
+  text-align: center;
+  background: rgba(15, 23, 42, 0.52);
+}
+.failed-mask { background: rgba(127, 29, 29, 0.72); font-size: 24rpx; }
+.spinner {
+  width: 48rpx;
+  height: 48rpx;
+  margin-bottom: 18rpx;
+  border: 6rpx solid rgba(255, 255, 255, 0.45);
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.card-info { padding: 18rpx; }
+.style-name {
+  display: block;
+  margin-bottom: 10rpx;
+  color: #172033;
+  font-size: 25rpx;
+  font-weight: 800;
+}
+.time-line { display: flex; align-items: center; gap: 12rpx; color: #64748b; font-size: 22rpx; }
+.time-line text { flex: 1; min-width: 0; }
+.delete-btn {
+  width: 74rpx;
+  height: 44rpx;
+  border-radius: 999rpx;
+  color: #ef4444;
+  background: #fff1f2;
+  font-size: 22rpx;
+  line-height: 44rpx;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.empty-state {
+  margin-top: 86rpx;
+  padding: 56rpx 34rpx;
+  border-radius: 28rpx;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  box-shadow: 0 10rpx 28rpx rgba(31, 52, 86, 0.05);
+}
+.empty-preview {
+  width: 150rpx;
+  height: 200rpx;
+  border-radius: 32rpx;
+  background: linear-gradient(135deg, #edf6ff, #eef2ff);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.empty-photo {
+  width: 88rpx;
+  height: 108rpx;
+  border-radius: 14rpx;
+  border: 6rpx solid #1f8cff;
+  background: linear-gradient(180deg, #c9d8ef 40%, #2f4468 40%);
+}
+.empty-title { margin-top: 28rpx; color: #172033; font-size: 32rpx; font-weight: 900; }
+.empty-desc { margin-top: 12rpx; color: #64748b; font-size: 25rpx; line-height: 1.5; }
+.empty-action {
+  margin-top: 28rpx;
+  width: 220rpx;
+  height: 72rpx;
+  border-radius: 999rpx;
+  color: #ffffff;
+  background: #1f8cff;
+  font-size: 28rpx;
+  line-height: 72rpx;
+  font-weight: 800;
+}
+
+.loading,
+.end-text { padding: 46rpx 0 20rpx; color: #7c8a9b; font-size: 24rpx; text-align: center; }
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>
diff --git a/pages/tool/portrait-photo.vue b/pages/tool/portrait-photo.vue
index 7fbc845..9129d52 100644
--- a/pages/tool/portrait-photo.vue
+++ b/pages/tool/portrait-photo.vue
@@ -1,220 +1,414 @@
 <template>
-  <view class="page">
-    <scroll-view class="scroll" scroll-y>
-      <view class="wrap">
-        <view class="hero-card portrait-hero">
-          <view class="hero-copy">
-            <text class="eyebrow">PORTRAIT PHOTO STUDIO</text>
-            <text class="hero-title">生成你的职业形象照</text>
-            <text class="hero-desc">从商务形象、普通职业到艺术写真，快速得到适合头像和简历的照片。</text>
-          </view>
-          <view class="hero-preview">
-            <view class="portrait-card-mini main">
-              <view class="portrait-face"></view>
-              <view class="portrait-suit"></view>
-            </view>
-            <view class="portrait-card-mini sub">
-              <view class="portrait-face"></view>
-              <view class="portrait-suit"></view>
-            </view>
+  <view class="wrap">
+    <view class="hero-card portrait-hero">
+      <view class="hero-copy">
+        <text class="eyebrow">PORTRAIT PHOTO STUDIO</text>
+        <text class="hero-title">生成你的职业形象照</text>
+        <text class="hero-desc">从商务形象、普通职业到艺术写真。AI 会重绘服装与背景，五官可能有轻微变化。</text>
+        <view class="hero-actions">
+          <view v-if="hasDemo" class="hero-pill" @click="openDemoCompare">查看对比</view>
+          <view class="hero-link" @click="chooseImage">上传照片</view>
+        </view>
+      </view>
+      <!-- demo 前后对比缩略图（配置项 portrait_photo_demo），点击进大图对比 -->
+      <view v-if="hasDemo" class="hero-thumb" @click="openDemoCompare">
+        <view class="mini-compare">
+          <image class="compare-img" :src="demoPair.result" mode="aspectFill" />
+          <view class="compare-before mini-before">
+            <image class="compare-img" :src="demoPair.original" mode="aspectFill" />
           </view>
+          <view class="compare-line mini-line"></view>
+          <!-- 缩略图只有 168rpx 宽，标签用两个字，否则会挤到中线上 -->
+          <view class="compare-tag left">原图</view>
+          <view class="compare-tag right">艺术</view>
+        </view>
+      </view>
+      <view v-else class="hero-preview">
+        <view class="portrait-card-mini main">
+          <image v-if="localImage" class="mini-img" :src="localImage" mode="aspectFill" />
+          <template v-else>
+            <view class="portrait-face"></view>
+            <view class="portrait-suit"></view>
+          </template>
+        </view>
+        <view class="portrait-card-mini sub">
+          <view class="portrait-face"></view>
+          <view class="portrait-suit"></view>
         </view>
+      </view>
+    </view>
 
-        <view class="upload-card">
-          <view class="card-head">
-            <view>
-              <text class="card-title"><text class="required">*</text>上传照片</text>
-              <text class="card-desc">建议选择五官无遮挡、光线均匀的半身照</text>
-            </view>
-            <text class="card-tip">0/1</text>
-          </view>
-          <view class="upload-strip" @click="showTodo('选择人像照片')">
-            <view class="upload-thumb"><text class="upload-plus">+</text></view>
-            <view class="upload-copy">
-              <text class="upload-title">上传正面清晰人像照片</text>
-              <text class="upload-sub">支持自拍、半身照，生成商务照、职业照或写真</text>
-            </view>
-            <view class="upload-action">上传</view>
-          </view>
+    <!-- ==================== 进度 / 结果 ==================== -->
+    <view v-if="job.photo_open_id" class="section">
+      <view class="section-head">
+        <text class="tool-section-title">{{ job.style_name || '生成结果' }}</text>
+        <text class="section-tip">{{ progressText }}</text>
+      </view>
+
+      <view v-if="isPending" class="progress-box">
+        <view class="progress-ring"></view>
+        <text class="progress-title">{{ pendingTitle }}</text>
+        <text class="progress-sub">已等待 {{ waitedSeconds }} 秒，可以留在本页等待，也可以稍后从记录里查看</text>
+      </view>
+
+      <view v-else-if="job.status < 0" class="fail-box">
+        <text class="fail-title">{{ job.error_msg || '生成失败' }}</text>
+        <text class="fail-sub">失败的照片不扣点，可以换一张更清晰的照片重试</text>
+      </view>
+
+      <view v-else class="result-box">
+        <view class="result-grid" :class="{ single: resultUrls.length === 1 }">
+          <image
+            v-for="(url, index) in resultUrls"
+            :key="url"
+            class="result-img"
+            :src="url"
+            mode="aspectFill"
+            @click="previewResult(index)"
+          />
+        </view>
+        <view class="result-actions">
+          <view class="ghost-btn" @click="goDetail">查看详情</view>
+          <view class="ghost-btn" @click="saveAll">保存全部</view>
+          <view class="ghost-btn" @click="resetJob">再拍一组</view>
         </view>
+      </view>
+    </view>
 
-        <view class="section">
-          <view class="section-head">
-            <text class="tool-section-title">照片风格</text>
-            <text class="section-tip">选择生成方向</text>
-          </view>
-          <view class="segmented">
-            <view
-              v-for="item in styleTabs"
-              :key="item.key"
-              class="segment"
-              :class="{ active: activeStyle === item.key }"
-              @click="activeStyle = item.key"
-            >
-              {{ item.name }}
-            </view>
-          </view>
+    <!-- ==================== 上传 ==================== -->
+    <view v-if="canEdit" class="upload-card">
+      <view class="card-head">
+        <view>
+          <text class="card-title"><text class="required">*</text>上传照片</text>
+          <text class="card-desc">建议选择五官无遮挡、光线均匀的半身照，单张不超过 10M</text>
+        </view>
+        <text class="card-tip">{{ localImage ? '1/1' : '0/1' }}</text>
+      </view>
+      <view class="upload-strip" @click="chooseImage">
+        <view class="upload-thumb">
+          <image v-if="localImage" class="upload-img" :src="localImage" mode="aspectFill" />
+          <text v-else class="upload-plus">+</text>
+        </view>
+        <view class="upload-copy">
+          <text class="upload-title">{{ localImage ? '已选择照片，可点击更换' : '上传正面清晰人像照片' }}</text>
+          <text class="upload-sub">支持自拍、半身照，生成商务照、职业照或写真</text>
+        </view>
+        <view class="upload-action">{{ localImage ? '更换' : '上传' }}</view>
+      </view>
+    </view>
 
-          <view v-if="activeStyle === 'business'" class="config-panel">
-            <view class="sub-block">
-              <text class="sub-title">纯色背景</text>
-              <view class="option-grid">
-                <view v-for="item in businessBg" :key="item.name" class="option" :class="{ 'active-first': item.name === '白色' }">
-                  <view class="color-dot" :class="item.className"></view>{{ item.name }}
-                </view>
-              </view>
-            </view>
-            <view class="sub-block">
-              <text class="sub-title">服装</text>
-              <view class="option-grid two">
-                <view class="option active-first">正装</view>
-                <view class="option">衬衫</view>
-              </view>
-            </view>
-            <view class="sub-block">
-              <text class="sub-title">取景范围</text>
-              <view class="option-grid three">
-                <view class="option active-first">半身</view>
-                <view class="option">全身</view>
-                <view class="option">胸像</view>
-              </view>
-            </view>
-          </view>
+    <!-- ==================== 模型（只有一个时不展示） ==================== -->
+    <view v-if="canEdit && models.length > 1" class="section">
+      <view class="section-head">
+        <text class="tool-section-title">生成模型</text>
+        <text class="section-tip">不同模型价格可能不同</text>
+      </view>
+      <view class="option-grid two">
+        <view
+          v-for="item in models"
+          :key="item.key"
+          class="option"
+          :class="{ active: activeModel === item.key }"
+          @click="selectModel(item.key)"
+        >
+          {{ item.name }}
+        </view>
+      </view>
+    </view>
 
-          <view v-if="activeStyle === 'career'" class="config-panel">
-            <view class="sub-block">
-              <text class="sub-title">背景</text>
-              <view class="option-grid three">
-                <view v-for="item in careerBg" :key="item" class="option" :class="{ 'active-first': item === '浅灰' }">{{ item }}</view>
-              </view>
-            </view>
-            <view class="sub-block">
-              <text class="sub-title">服装</text>
-              <view class="option-grid">
-                <view v-for="item in careerOutfit" :key="item" class="option" :class="{ 'active-first': item === '针织衫' }">{{ item }}</view>
-              </view>
-            </view>
-          </view>
+    <!-- ==================== 档位与选项 ==================== -->
+    <view v-if="canEdit" class="section">
+      <view class="section-head">
+        <text class="tool-section-title">照片风格</text>
+        <text class="section-tip">选择生成方向</text>
+      </view>
 
-          <view v-if="activeStyle === 'art'" class="config-panel">
-            <view class="option-grid three">
-              <view v-for="item in artStyles" :key="item" class="option" :class="{ 'active-first': item === '古风' }">{{ item }}</view>
-            </view>
+      <view v-if="configLoading" class="skeleton-list">
+        <view v-for="i in 3" :key="i" class="skeleton-row"></view>
+      </view>
+
+      <template v-else>
+        <view class="segmented">
+          <view
+            v-for="item in styles"
+            :key="item.key"
+            class="segment"
+            :class="{ active: activeStyle === item.key }"
+            @click="selectStyle(item.key)"
+          >
+            {{ item.name }}
           </view>
         </view>
 
-        <view class="section">
-          <view class="section-head">
-            <text class="tool-section-title">图片比例</text>
-            <text class="section-tip">构图尺寸</text>
-          </view>
-          <view class="ratio-grid">
-            <view
-              v-for="item in ratios"
-              :key="item"
-              class="ratio"
-              :class="{ active: activeRatio === item }"
-              @click="activeRatio = item"
-            >
-              {{ item }}
+        <view class="config-panel">
+          <view v-for="group in currentGroups" :key="group.key" class="sub-block">
+            <text class="sub-title">{{ group.name }}</text>
+            <view class="option-grid" :class="group.items.length <= 2 ? 'two' : 'three'">
+              <view
+                v-for="item in group.items"
+                :key="item.key"
+                class="option"
+                :class="{ active: options[group.key] === item.key }"
+                @click="options[group.key] = item.key"
+              >
+                {{ item.name }}
+              </view>
             </view>
           </view>
         </view>
+      </template>
+    </view>
 
-        <view class="section">
-          <view class="section-head">
-            <text class="tool-section-title">生成数量</text>
-            <text class="price">20点/张，共{{ quantity * 20 }}点</text>
-          </view>
-          <view class="quantity">
-            <view class="quantity-btn" @click="decreaseQuantity">-</view>
-            <text class="quantity-value">{{ quantity }}</text>
-            <view class="quantity-btn" @click="increaseQuantity">+</view>
-          </view>
-          <text class="note">按单张收费，每次最多生成10张</text>
+    <!-- ==================== 比例 ==================== -->
+    <view v-if="canEdit" class="section">
+      <view class="section-head">
+        <text class="tool-section-title">图片比例</text>
+        <text class="section-tip">构图尺寸</text>
+      </view>
+      <view class="ratio-grid">
+        <view
+          v-for="item in ratios"
+          :key="item.key"
+          class="ratio"
+          :class="{ active: activeRatio === item.key }"
+          @click="activeRatio = item.key"
+        >
+          {{ item.name }}
         </view>
+      </view>
+    </view>
 
-        <view class="section">
-          <view class="section-head">
-            <text class="tool-section-title">补充描述</text>
-            <text class="section-tip">可选</text>
-          </view>
-          <textarea class="textarea" placeholder="可补充职业、服装、背景、妆发或照片气质要求"></textarea>
-        </view>
+    <!-- ==================== 数量 ==================== -->
+    <view v-if="canEdit" class="section">
+      <view class="section-head">
+        <text class="tool-section-title">生成数量</text>
+        <text class="price">{{ unitPoints }}点/张，共{{ totalPoints }}点</text>
+      </view>
+      <view class="quantity">
+        <view class="quantity-btn" @click="decreaseQuantity">-</view>
+        <text class="quantity-value">{{ quantity }}</text>
+        <view class="quantity-btn" @click="increaseQuantity">+</view>
       </view>
-    </scroll-view>
+      <text class="note">按单张收费，一次最多生成{{ maxCount }}张，失败的不扣点</text>
+    </view>
 
+    <!-- ==================== 补充描述 ==================== -->
+    <view v-if="canEdit" class="section">
+      <view class="section-head">
+        <text class="tool-section-title">补充描述</text>
+        <text class="section-tip">选填</text>
+      </view>
+      <textarea
+        v-model="extraPrompt"
+        class="textarea"
+        maxlength="100"
+        placeholder="可补充职业、服装、背景等客观信息，例如：程序员、深灰西装"
+      />
+      <view class="tips">
+        <text v-for="tip in tips" :key="tip" class="tip-item">· {{ tip }}</text>
+      </view>
+    </view>
+
+    <!-- ==================== 底部操作 ==================== -->
     <view class="bottom-bar">
       <view class="balance">
         <text class="balance-copy">{{ balanceText }}</text>
         <view v-if="isBalanceInsufficient" class="recharge-link" @click="goRecharge">去充值</view>
       </view>
       <view class="buttons">
-        <view class="history-btn" @click="showTodo('历史记录')">历史记录</view>
-        <view class="submit-btn" @click="showTodo('形象照生成')">
+        <view class="history-btn" @click="goHistory">生成记录</view>
+        <view class="submit-btn" :class="{ disabled: submitDisabled }" @click="submit">
           <image class="submit-icon" src="/static/icons/bolt.svg" mode="aspectFit" />
           <text>{{ submitText }}</text>
         </view>
       </view>
     </view>
+
+    <!-- ==================== 前后对比（样式同老照片 / 动漫头像） ==================== -->
+    <view v-if="compareVisible" class="compare-modal">
+      <view class="compare-backdrop" @click="closeCompare"></view>
+      <view class="compare-panel">
+        <view class="compare-panel-head">
+          <text>{{ comparePair.title }}</text>
+          <view class="close-btn" @click="closeCompare">×</view>
+        </view>
+        <view
+          class="large-compare"
+          @touchstart.stop="onCompareTouch"
+          @touchmove.stop.prevent="onCompareTouch"
+          @click.stop="onCompareTouch"
+        >
+          <image class="compare-img" :src="comparePair.after" mode="aspectFit" />
+          <view class="compare-before" :style="{ width: comparePercent + '%' }">
+            <image class="compare-img" :src="comparePair.before" mode="aspectFit" />
+          </view>
+          <view class="compare-line large" :style="{ left: comparePercent + '%' }">
+            <view class="compare-handle large">
+              <text>‹</text>
+              <text>›</text>
+            </view>
+          </view>
+          <view class="compare-tag left">原图</view>
+          <view class="compare-tag right">艺术照</view>
+        </view>
+        <text class="compare-guide">左右滑动中间按钮查看变化</text>
+      </view>
+    </view>
   </view>
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
-import { onLoad, onShow } from '@dcloudio/uni-app'
-import { billingApi, userApi } from '@/api/index.js'
+import { computed, reactive, ref, watch } from 'vue'
+import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
+import { commonApi, portraitApi, userApi } from '@/api/index.js'
+import { createPortrait } from '@/utils/upload.js'
+import { guid } from '@/utils/util.js'
 import { useUserStore } from '@/store/user.js'
 import { useApp } from '@/utils/useApp.js'
 
 const userStore = useUserStore()
 const { toast } = useApp()
-const activeStyle = ref('business')
-const activeRatio = ref('1:1')
+
+const POLL_INTERVAL = 3000
+const POLL_LIMIT = 8 * 60 * 1000
+
+// 首屏示例对比图由配置项 portrait_photo_demo 下发（同 old_photo_demo），不在端上硬编码
+const DEMO_CONFIG_KEY = 'portrait_photo_demo'
+
+const models = ref([])
+const styles = ref([])
+const ratios = ref([])
+const tips = ref([])
+const activeModel = ref('')
+const activeStyle = ref('')
+const activeRatio = ref('')
+const options = reactive({})
 const quantity = ref(1)
+const maxCount = ref(4)
+const unitPoints = ref(0)
+const extraPrompt = ref('')
+const localImage = ref('')
 const balance = ref({ points: 0 })
-const quote = ref({ points: 0 })
-const appKey = 'portrait-photo'
-
-const styleTabs = [
-  { key: 'business', name: '商务形象照' },
-  { key: 'career', name: '普通职业照' },
-  { key: 'art', name: '艺术写真' }
-]
-const businessBg = [
-  { name: '白色', className: 'white' },
-  { name: '浅灰', className: 'gray' },
-  { name: '商务蓝', className: 'blue' },
-  { name: '深蓝', className: 'deep-blue' }
-]
-const careerBg = ['浅灰', '米色', '办公室', '书架', '咖啡角', '落地窗']
-const careerOutfit = ['针织衫', 'T恤配牛仔裤', '西装外套配T恤']
-const artStyles = ['古风', '藏族', '苗族', '都市青年', '潮人', '敦煌飞仙', '港风复古', '新中式', '法式油画']
-const ratios = ['1:1', '3:4', '4:3', '9:16', '16:9']
-const portraitModel = computed(() => activeStyle.value === 'art' ? 'premium' : 'standard')
+const job = ref({})
+const configLoading = ref(true)
+const submitting = ref(false)
+const waitedSeconds = ref(0)
+// 示例对比图（配置下发）与对比弹层的数据源
+const demoPair = ref({ original: '', result: '' })
+const comparePair = ref({ before: '', after: '', title: '效果对比' })
+const compareVisible = ref(false)
+const comparePercent = ref(50)
+
+let pollTimer = null
+let pollStart = 0
+
+const hasDemo = computed(() => Boolean(demoPair.value.original && demoPair.value.result))
+const currentStyle = computed(() => styles.value.find((item) => item.key === activeStyle.value) || {})
+const currentGroups = computed(() => currentStyle.value.groups || [])
 const currentPoints = computed(() => Number(balance.value.points || balance.value.point_balance || 0))
-const currentCost = computed(() => Number(quote.value.points || 0))
+const totalPoints = computed(() => unitPoints.value * quantity.value)
+const isPending = computed(() => [10, 20].includes(Number(job.value.status)))
+const canEdit = computed(() => !job.value.photo_open_id || Number(job.value.status) < 0)
+const resultUrls = computed(() => job.value.result_urls || [])
 const balanceText = computed(() => {
-  const cost = currentCost.value
-  if (!userStore.isLogin) return cost ? `形象照 · ${cost}点/次` : '形象照'
-  return cost ? `余额${currentPoints.value}点 · 预计消耗${cost}点` : `余额${currentPoints.value}点`
+  if (!userStore.isLogin) return unitPoints.value ? `形象照 · ${unitPoints.value}点/张` : '形象照'
+  return totalPoints.value
+    ? `余额${currentPoints.value}点 · 预计消耗${totalPoints.value}点`
+    : `余额${currentPoints.value}点`
+})
+const isBalanceInsufficient = computed(
+  () => userStore.isLogin && totalPoints.value > 0 && currentPoints.value < totalPoints.value
+)
+const submitDisabled = computed(() => submitting.value || isPending.value)
+const submitText = computed(() => {
+  if (submitting.value) return '提交中...'
+  if (isPending.value) return '正在生成...'
+  if (!userStore.isLogin) return totalPoints.value ? `登录后生成 · ${totalPoints.value}点` : '登录后生成'
+  return totalPoints.value ? `立即生成 · ${totalPoints.value}点` : '立即生成'
+})
+const pendingTitle = computed(() =>
+  Number(job.value.status) === 10 ? '排队中，等待 AI 处理' : 'AI 正在生成形象照'
+)
+const progressText = computed(() => {
+  if (!job.value.photo_open_id) return ''
+  if (isPending.value) {
+    return `${job.value.success_count || 0}/${job.value.count || 0} 张已完成`
+  }
+  return job.value.status_text || ''
 })
-const isBalanceInsufficient = computed(() => userStore.isLogin && currentCost.value > 0 && currentPoints.value < currentCost.value)
-const submitText = computed(() => currentCost.value ? `立即生成 · ${currentCost.value}点` : '立即生成')
 
-onLoad(() => {
-  loadBillingConfig()
+onLoad((options) => {
+  loadConfig()
+  loadDemo()
+  if (options && options.work) loadJob(options.work, true)
 })
 
 onShow(() => {
   if (userStore.isLogin) loadBalance()
-  loadBillingConfig()
+  const workId = uni.getStorageSync('portrait_work_id')
+  if (workId) {
+    uni.removeStorageSync('portrait_work_id')
+    loadJob(workId)
+  }
 })
 
-watch([activeStyle, quantity], () => {
-  loadBillingConfig()
+onUnload(() => stopPoll())
+
+// 换模型/换张数会影响报价，重新取一次配置
+watch([activeModel, quantity], () => {
+  if (!configLoading.value) loadConfig(true)
 })
 
+async function loadConfig(silent = false) {
+  try {
+    const res = await portraitApi.getConfig({
+      style: activeStyle.value || undefined,
+      model: activeModel.value || undefined,
+      count: quantity.value
+    })
+    const data = res.data || {}
+    models.value = data.models || []
+    styles.value = data.styles || []
+    ratios.value = data.ratios || []
+    tips.value = data.tips || []
+    maxCount.value = Number(data.max_count || 4)
+    unitPoints.value = Number(data.unit_points || 0)
+    if (!activeModel.value) activeModel.value = data.default_model || (models.value[0] || {}).key || ''
+    if (!activeRatio.value) {
+      activeRatio.value = (ratios.value.find((item) => item.is_default) || ratios.value[0] || {}).key || ''
+    }
+    if (!activeStyle.value) {
+      activeStyle.value = data.default_style || (styles.value[0] || {}).key || ''
+      applyStyleDefaults()
+    }
+    if (data.billing && data.billing.balance) balance.value = data.billing.balance
+  } catch (e) {
+    if (!silent) toast(e.msg || '配置加载失败')
+  } finally {
+    configLoading.value = false
+  }
+}
+
+/** 切换档位时把该档位的选项重置为默认值 */
+function applyStyleDefaults() {
+  Object.keys(options).forEach((key) => delete options[key])
+  for (const group of currentGroups.value) {
+    const picked = group.items.find((item) => item.is_default) || group.items[0]
+    if (picked) options[group.key] = picked.key
+  }
+}
+
+function selectStyle(key) {
+  if (activeStyle.value === key) return
+  activeStyle.value = key
+  applyStyleDefaults()
+}
+
+function selectModel(key) {
+  if (activeModel.value === key) return
+  activeModel.value = key
+}
+
 async function loadBalance() {
   try {
     const res = await userApi.getBalance()
@@ -222,25 +416,227 @@ async function loadBalance() {
   } catch (e) {}
 }
 
-async function loadBillingConfig() {
+/**
+ * 示例对比图：配置项 portrait_photo_demo，格式 [{ original, result }]
+ * 兼容 before/after 等字段名与「原图,结果图」的逗号分隔写法；配置缺失就回落到占位插画。
+ */
+async function loadDemo() {
   try {
-    const res = await billingApi.getConfig({
-      app_key: appKey,
-      model: portraitModel.value,
-      count: quantity.value
-    })
-    const data = res.data || {}
-    quote.value = data.quote || {}
-    if (data.balance) balance.value = data.balance
+    const res = await commonApi.getConfig({ keys: DEMO_CONFIG_KEY })
+    const rows = Array.isArray(res.list) ? res.list : []
+    const item = rows.find((it) => it.key === DEMO_CONFIG_KEY)
+    demoPair.value = normalizeDemo(item && item.value)
   } catch (e) {}
 }
 
-function goRecharge() {
-  uni.navigateTo({ url: '/pages/recharge/recharge' })
+function normalizeDemo(value) {
+  const empty = { original: '', result: '' }
+  if (!value) return empty
+  try {
+    const data = typeof value === 'string' ? JSON.parse(value) : value
+    const first = Array.isArray(data) ? data[0] : data
+    if (!first) return empty
+    return {
+      original: first.original || first.before || first.source || '',
+      result: first.result || first.after || ''
+    }
+  } catch (e) {
+    const pics = String(value).split(',').map((item) => item.trim()).filter(Boolean)
+    if (pics.length >= 2) return { original: pics[0], result: pics[1] }
+    return empty
+  }
+}
+
+function openDemoCompare() {
+  if (!hasDemo.value) return
+  comparePair.value = {
+    before: demoPair.value.original,
+    after: demoPair.value.result,
+    title: '效果对比'
+  }
+  comparePercent.value = 50
+  compareVisible.value = true
+}
+
+function closeCompare() {
+  compareVisible.value = false
+}
+
+function onCompareTouch(e) {
+  const touch = (e.touches && e.touches[0]) || (e.changedTouches && e.changedTouches[0]) || e
+  const x = touch.clientX || 0
+  uni.createSelectorQuery()
+    .select('.large-compare')
+    .boundingClientRect((rect) => {
+      if (!rect || !rect.width) return
+      const percent = ((x - rect.left) / rect.width) * 100
+      comparePercent.value = Math.max(6, Math.min(94, Number(percent.toFixed(1))))
+    })
+    .exec()
+}
+
+function chooseImage() {
+  if (!requireLogin()) return
+  uni.chooseImage({
+    count: 1,
+    sizeType: ['original'],
+    sourceType: ['album', 'camera'],
+    success: (res) => {
+      const file = (res.tempFiles && res.tempFiles[0]) || {}
+      if (Number(file.size || 0) > 10 * 1024 * 1024) {
+        toast('图片不能超过 10M')
+        return
+      }
+      localImage.value = res.tempFilePaths[0]
+      job.value = {}
+    }
+  })
+}
+
+async function submit() {
+  if (!requireLogin()) return
+  if (submitDisabled.value) return
+  if (!localImage.value) return toast('请先上传人像照片')
+  if (isBalanceInsufficient.value) return showBalanceModal()
+
+  submitting.value = true
+  uni.showLoading({ title: '提交中...', mask: true })
+  try {
+    const res = await createPortrait(localImage.value, {
+      style: activeStyle.value,
+      model: activeModel.value,
+      ratio: activeRatio.value,
+      count: quantity.value,
+      extra_prompt: extraPrompt.value,
+      request_id: guid(),
+      ...options
+    })
+    job.value = res.data || {}
+    if (Number(job.value.status) === 30) onJobDone()
+    else startPoll()
+  } catch (e) {
+    if (e && e.code === 1011) showBalanceModal()
+    else toast((e && e.msg) || '提交失败，请重试')
+  } finally {
+    submitting.value = false
+    uni.hideLoading()
+  }
+}
+
+async function loadJob(photoOpenId, silent = false) {
+  try {
+    const res = await portraitApi.getDetail({ photo_open_id: photoOpenId })
+    job.value = res.data || {}
+    if (isPending.value) startPoll()
+    else if (Number(job.value.status) === 30) onJobDone()
+  } catch (e) {
+    if (!silent) toast((e && e.msg) || '记录加载失败')
+  }
+}
+
+function startPoll() {
+  stopPoll()
+  pollStart = Date.now()
+  waitedSeconds.value = 0
+  pollTimer = setInterval(async () => {
+    waitedSeconds.value = Math.round((Date.now() - pollStart) / 1000)
+    if (Date.now() - pollStart > POLL_LIMIT) {
+      stopPoll()
+      toast('生成时间较长，可稍后从生成记录查看')
+      return
+    }
+    try {
+      const res = await portraitApi.getDetail({ photo_open_id: job.value.photo_open_id })
+      const data = res.data || {}
+      job.value = data
+      if (Number(data.status) === 30) {
+        stopPoll()
+        onJobDone()
+      } else if (Number(data.status) < 0) {
+        stopPoll()
+        toast(data.error_msg || '生成失败，本次未扣点')
+      }
+    } catch (e) {
+      // 单次失败不中断轮询
+    }
+  }, POLL_INTERVAL)
+}
+
+function stopPoll() {
+  if (pollTimer) clearInterval(pollTimer)
+  pollTimer = null
+}
+
+function onJobDone() {
+  loadBalance()
+}
+
+function resetJob() {
+  stopPoll()
+  job.value = {}
+  localImage.value = ''
+  extraPrompt.value = ''
+}
+
+function previewResult(index) {
+  if (!resultUrls.value.length) return
+  uni.previewImage({ urls: resultUrls.value, current: resultUrls.value[index] })
+}
+
+function goDetail() {
+  if (!job.value.photo_open_id) return
+  uni.navigateTo({ url: `/pages/tool/portrait-detail?id=${job.value.photo_open_id}` })
+}
+
+/** 多张依次保存，避免并发触发相册权限弹窗 */
+async function saveAll() {
+  if (!resultUrls.value.length) return
+  uni.showLoading({ title: '保存中...', mask: true })
+  let ok = 0
+  for (const url of resultUrls.value) {
+    try {
+      const file = await new Promise((resolve, reject) => {
+        uni.downloadFile({ url, success: (res) => resolve(res.tempFilePath), fail: reject })
+      })
+      await new Promise((resolve, reject) => {
+        uni.saveImageToPhotosAlbum({ filePath: file, success: resolve, fail: reject })
+      })
+      ok++
+    } catch (e) {
+      break
+    }
+  }
+  uni.hideLoading()
+  toast(ok ? `已保存 ${ok} 张到相册` : '保存失败，请检查相册权限')
+}
+
+function goHistory() {
+  if (!requireLogin()) return
+  uni.navigateTo({ url: '/pages/tool/portrait-history' })
+}
+
+function requireLogin() {
+  if (userStore.isLogin) return true
+  uni.navigateTo({ url: '/pages/login/login' })
+  return false
+}
+
+function showBalanceModal() {
+  uni.showModal({
+    title: '温馨提示',
+    content: totalPoints.value
+      ? `本次生成需要 ${totalPoints.value} 点，当前点数不足，请充值后继续。`
+      : '点数不足，请充值后继续。',
+    confirmText: '去充值',
+    cancelText: '知道了',
+    success: (res) => {
+      if (res.confirm) uni.navigateTo({ url: '/pages/recharge/recharge' })
+    }
+  })
 }
 
-function showTodo(name) {
-  toast(`${name}逻辑待接入`)
+function goRecharge() {
+  uni.navigateTo({ url: '/pages/recharge/recharge' })
 }
 
 function decreaseQuantity() {
@@ -248,107 +644,188 @@ function decreaseQuantity() {
 }
 
 function increaseQuantity() {
-  quantity.value = Math.min(10, quantity.value + 1)
+  quantity.value = Math.min(maxCount.value, quantity.value + 1)
 }
 </script>
 
 <style lang="scss" scoped>
-.page {
-  height: 100vh;
+.wrap {
+  min-height: 100vh;
+  padding: 24rpx 28rpx calc(300rpx + env(safe-area-inset-bottom));
   background: #f3f7fb;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+  box-sizing: border-box;
 }
-.scroll { flex: 1; height: 0; }
-.wrap { padding: 24rpx 28rpx 300rpx; }
 
 .hero-card {
   position: relative;
-  min-height: 260rpx;
   padding: 30rpx;
   border-radius: 28rpx;
   color: #fff;
-  background: linear-gradient(135deg, #2447d8 0%, #0b8cff 56%, #55d6c6 100%);
   overflow: hidden;
+  display: flex;
+  align-items: center;
   box-sizing: border-box;
 }
+.portrait-hero { background: linear-gradient(135deg, #1b2a4a 0%, #3f5f9c 55%, #7aa7f0 100%); }
 .hero-card::before {
   content: '';
   position: absolute;
   right: -90rpx;
-  top: -110rpx;
-  width: 300rpx;
-  height: 300rpx;
+  top: -90rpx;
+  width: 280rpx;
+  height: 280rpx;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.16);
-}
-.hero-copy,
-.hero-preview {
-  position: relative;
-  z-index: 1;
-}
-.eyebrow {
-  display: block;
-  color: rgba(255, 255, 255, 0.72);
-  font-size: 21rpx;
-  font-weight: 800;
-}
-.hero-title {
-  display: block;
-  margin-top: 16rpx;
-  width: 430rpx;
-  color: #fff;
-  font-size: 40rpx;
-  font-weight: 900;
-  line-height: 1.24;
+  background: rgba(255, 255, 255, 0.12);
 }
+.hero-copy { position: relative; z-index: 1; flex: 1; min-width: 0; }
+.eyebrow { display: block; color: rgba(255, 255, 255, 0.68); font-size: 21rpx; font-weight: 800; }
+.hero-title { display: block; margin-top: 14rpx; color: #fff; font-size: 38rpx; font-weight: 900; }
 .hero-desc {
   display: block;
   margin-top: 14rpx;
-  width: 420rpx;
-  color: rgba(255, 255, 255, 0.86);
-  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 23rpx;
   line-height: 1.5;
 }
-.hero-preview {
-  position: absolute;
-  right: 30rpx;
-  bottom: 28rpx;
-  width: 178rpx;
-  height: 126rpx;
+.hero-actions { margin-top: 22rpx; display: flex; gap: 16rpx; }
+.hero-pill,
+.hero-link {
+  height: 60rpx;
+  padding: 0 24rpx;
+  border-radius: 999rpx;
+  font-size: 25rpx;
+  font-weight: 800;
+  line-height: 60rpx;
+  text-align: center;
 }
-.portrait-card-mini {
-  position: absolute;
-  width: 92rpx;
-  height: 120rpx;
-  border-radius: 18rpx;
+.hero-pill { color: #1b2a4a; background: #fff; }
+.hero-link {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.18);
+  border: 2rpx solid rgba(255, 255, 255, 0.42);
+  line-height: 56rpx;
+}
+
+.hero-thumb {
+  position: relative;
+  z-index: 1;
+  margin-left: 22rpx;
+  flex-shrink: 0;
+}
+/* 对比组件：与老照片 / 动漫头像保持一致 */
+.mini-compare,
+.large-compare {
+  position: relative;
   overflow: hidden;
-  box-shadow: 0 16rpx 30rpx rgba(0, 54, 125, 0.22);
+  background: #dfe8f4;
+}
+.mini-compare {
+  width: 168rpx;
+  height: 252rpx;
+  border-radius: 28rpx;
+  border: 2rpx solid rgba(255, 255, 255, 0.45);
+  box-shadow: 0 18rpx 38rpx rgba(20, 37, 66, 0.28);
 }
-.portrait-card-mini.main {
+.compare-img { width: 100%; height: 100%; }
+.compare-before {
+  position: absolute;
   left: 0;
   top: 0;
-  background: linear-gradient(180deg, #e8f4ff 0%, #9bd0ff 100%);
+  bottom: 0;
+  overflow: hidden;
 }
-.portrait-card-mini.sub {
-  right: 0;
+.mini-before { width: 50%; }
+.compare-before .compare-img { width: 164rpx; }
+.compare-line {
+  position: absolute;
+  top: 0;
   bottom: 0;
-  background: linear-gradient(180deg, #fff4e7 0%, #ebb875 100%);
+  width: 4rpx;
+  margin-left: -2rpx;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 0 12rpx rgba(20, 37, 66, 0.22);
 }
-.portrait-face {
+.compare-line.mini-line { left: 50%; }
+.compare-line.large { width: 6rpx; margin-left: -3rpx; }
+.compare-handle {
+  position: absolute;
+  left: 50%;
+  top: 50%;
   width: 38rpx;
-  height: 42rpx;
-  margin: 22rpx auto 0;
-  border-radius: 50% 50% 45% 45%;
-  background: #ffe0c4;
+  height: 58rpx;
+  margin-left: -19rpx;
+  margin-top: -29rpx;
+  border-radius: 999rpx;
+  background: #ffffff;
+  box-shadow: 0 8rpx 18rpx rgba(20, 37, 66, 0.22);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rpx;
+  color: #1f8cff;
+  font-size: 24rpx;
+  font-weight: 900;
+}
+.compare-handle.large {
+  width: 54rpx;
+  height: 78rpx;
+  margin-left: -27rpx;
+  margin-top: -39rpx;
+  font-size: 32rpx;
+}
+.compare-tag {
+  position: absolute;
+  top: 12rpx;
+  padding: 6rpx 12rpx;
+  border-radius: 999rpx;
+  color: #ffffff;
+  background: rgba(15, 23, 42, 0.46);
+  font-size: 20rpx;
+  font-weight: 700;
+}
+.compare-tag.left { left: 12rpx; }
+.compare-tag.right { right: 12rpx; }
+
+.hero-preview {
+  position: relative;
+  z-index: 1;
+  margin-left: 22rpx;
+  width: 190rpx;
+  height: 240rpx;
+  flex-shrink: 0;
+}
+.portrait-card-mini {
+  position: absolute;
+  width: 140rpx;
+  height: 190rpx;
+  border-radius: 20rpx;
+  background: #dfe8f4;
+  border: 2rpx solid rgba(255, 255, 255, 0.5);
+  overflow: hidden;
+  box-shadow: 0 16rpx 30rpx rgba(0, 0, 0, 0.24);
+}
+.portrait-card-mini.main { right: 0; top: 0; z-index: 2; }
+.portrait-card-mini.sub { left: 0; bottom: 0; opacity: 0.85; }
+.mini-img { width: 100%; height: 100%; }
+.portrait-face {
+  position: absolute;
+  left: 50%;
+  top: 34rpx;
+  width: 56rpx;
+  height: 56rpx;
+  margin-left: -28rpx;
+  border-radius: 50%;
+  background: #b9c8dd;
 }
 .portrait-suit {
-  width: 70rpx;
-  height: 48rpx;
-  margin: 4rpx auto 0;
-  border-radius: 30rpx 30rpx 12rpx 12rpx;
-  background: #1f3a5f;
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 120rpx;
+  height: 90rpx;
+  margin-left: -60rpx;
+  border-radius: 60rpx 60rpx 0 0;
+  background: #2f4468;
 }
 
 .upload-card,
@@ -359,34 +836,16 @@ function increaseQuantity() {
   background: #fff;
   box-shadow: 0 8rpx 28rpx rgba(34, 68, 112, 0.05);
 }
-.upload-card:first-child { margin-top: 0; }
-
 .card-head,
-.section-head {
-  display: flex;
-  align-items: baseline;
-}
+.section-head { display: flex; align-items: baseline; }
 .card-title,
-.tool-section-title {
-  display: block;
-  color: #172033;
-  font-size: 31rpx;
-  font-weight: 800;
-}
+.tool-section-title { display: block; color: #172033; font-size: 31rpx; font-weight: 800; }
 .required { margin-right: 4rpx; color: #ef4444; }
-.card-desc {
-  display: block;
-  margin-top: 8rpx;
-  color: #8a95a6;
-  font-size: 23rpx;
-  line-height: 1.35;
-}
+.card-desc { display: block; margin-top: 8rpx; color: #8a95a6; font-size: 23rpx; line-height: 1.35; }
 .card-tip,
-.section-tip {
-  margin-left: auto;
-  color: #8a95a6;
-  font-size: 23rpx;
-}
+.section-tip { margin-left: auto; color: #8a95a6; font-size: 23rpx; }
+.price { margin-left: auto; color: #0b8cff; font-size: 24rpx; font-weight: 800; }
+
 .upload-strip {
   margin-top: 22rpx;
   min-height: 142rpx;
@@ -407,154 +866,109 @@ function increaseQuantity() {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  overflow: hidden;
 }
+.upload-img { width: 100%; height: 100%; }
 .upload-plus { color: #0b8cff; font-size: 48rpx; line-height: 1; }
 .upload-copy { min-width: 0; flex: 1; margin-left: 20rpx; }
 .upload-title { display: block; color: #172033; font-size: 29rpx; font-weight: 800; }
 .upload-sub { display: block; margin-top: 8rpx; color: #7f8896; font-size: 23rpx; line-height: 1.4; }
 .upload-action { margin-left: 18rpx; color: #0b8cff; font-size: 25rpx; font-weight: 800; }
 
+.skeleton-list { margin-top: 20rpx; }
+.skeleton-row {
+  height: 76rpx;
+  margin-bottom: 14rpx;
+  border-radius: 18rpx;
+  background: #f1f5fa;
+}
+
 .segmented {
-  margin-top: 22rpx;
+  margin-top: 20rpx;
   padding: 6rpx;
-  border-radius: 18rpx;
-  background: #f7f9fd;
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 6rpx;
+  border-radius: 999rpx;
+  background: #f1f5fa;
+  display: flex;
 }
 .segment {
-  height: 66rpx;
-  border-radius: 16rpx;
-  color: #596579;
-  font-size: 24rpx;
+  flex: 1;
+  height: 68rpx;
+  border-radius: 999rpx;
+  color: #66758a;
+  font-size: 25rpx;
   font-weight: 800;
-  line-height: 66rpx;
+  line-height: 68rpx;
   text-align: center;
 }
-.segment.active {
-  color: #0b8cff;
-  background: #fff;
-  box-shadow: 0 8rpx 18rpx rgba(11, 140, 255, 0.12);
-}
-.config-panel {
-  margin-top: 24rpx;
-  padding-top: 22rpx;
-  border-top: 1rpx solid #edf2f7;
-}
-.sub-block + .sub-block { margin-top: 24rpx; }
-.sub-title {
-  display: block;
-  margin-bottom: 14rpx;
-  color: #7f8896;
-  font-size: 24rpx;
-  font-weight: 800;
-}
+.segment.active { color: #fff; background: #0b8cff; }
+
+.config-panel { margin-top: 8rpx; }
+.sub-block { margin-top: 24rpx; }
+.sub-title { display: block; color: #172033; font-size: 27rpx; font-weight: 800; }
 .option-grid {
+  margin-top: 16rpx;
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 14rpx;
 }
-.option-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .option-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.option-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .option {
-  min-height: 66rpx;
+  min-height: 76rpx;
   padding: 0 12rpx;
-  border-radius: 16rpx;
+  border-radius: 18rpx;
   color: #596579;
-  font-size: 24rpx;
-  font-weight: 800;
+  font-size: 25rpx;
+  font-weight: 700;
+  line-height: 76rpx;
+  text-align: center;
   background: #f7f9fd;
   border: 2rpx solid transparent;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10rpx;
-  text-align: center;
   box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
-.option.active-first {
-  color: #0b8cff;
-  background: #eff8ff;
-  border-color: #0b8cff;
-}
-.color-dot {
-  width: 28rpx;
-  height: 28rpx;
-  border-radius: 50%;
-  border: 1rpx solid rgba(15, 23, 42, 0.16);
-  flex-shrink: 0;
-}
-.white { background: #fff; }
-.gray { background: #d9dde3; }
-.blue { background: #6aa7e8; }
-.deep-blue { background: #245a9c; }
+.option.active { color: #0b8cff; background: #eff8ff; border-color: #0b8cff; }
 
 .ratio-grid {
   margin-top: 20rpx;
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 10rpx;
+  gap: 12rpx;
 }
 .ratio {
-  height: 64rpx;
-  border-radius: 16rpx;
+  height: 72rpx;
+  border-radius: 18rpx;
   color: #596579;
   font-size: 24rpx;
   font-weight: 800;
-  line-height: 64rpx;
+  line-height: 72rpx;
   text-align: center;
   background: #f7f9fd;
   border: 2rpx solid transparent;
 }
-.ratio.active {
-  color: #0b8cff;
-  background: #eff8ff;
-  border-color: #0b8cff;
-}
-.price {
-  margin-left: auto;
-  color: #ff681f;
-  font-size: 24rpx;
-  font-weight: 800;
-}
-.quantity {
-  margin-top: 22rpx;
-  display: grid;
-  grid-template-columns: 80rpx minmax(0, 1fr) 80rpx;
-  gap: 18rpx;
-  align-items: center;
-}
+.ratio.active { color: #0b8cff; background: #eff8ff; border-color: #0b8cff; }
+
+.quantity { margin-top: 22rpx; display: flex; align-items: center; gap: 28rpx; }
 .quantity-btn {
-  height: 72rpx;
-  border-radius: 16rpx;
-  color: #fff;
-  background: #0b8cff;
-  font-size: 40rpx;
-  font-weight: 800;
-  line-height: 72rpx;
-  text-align: center;
-}
-.quantity-value {
-  height: 72rpx;
-  border-radius: 16rpx;
-  color: #172033;
-  background: #f7f9fd;
-  font-size: 32rpx;
+  width: 76rpx;
+  height: 76rpx;
+  border-radius: 20rpx;
+  color: #0b8cff;
+  font-size: 36rpx;
   font-weight: 800;
-  line-height: 72rpx;
+  line-height: 76rpx;
   text-align: center;
+  background: #eef7ff;
 }
-.note {
-  display: block;
-  margin-top: 14rpx;
-  color: #8a95a6;
-  font-size: 23rpx;
-}
+.quantity-value { min-width: 60rpx; color: #172033; font-size: 32rpx; font-weight: 900; text-align: center; }
+.note { display: block; margin-top: 16rpx; color: #8a95a6; font-size: 22rpx; }
+
 .textarea {
   margin-top: 20rpx;
   width: 100%;
-  min-height: 144rpx;
+  min-height: 150rpx;
   padding: 22rpx;
   border-radius: 20rpx;
   color: #172033;
@@ -563,6 +977,60 @@ function increaseQuantity() {
   background: #f7f9fd;
   box-sizing: border-box;
 }
+.tips { margin-top: 18rpx; }
+.tip-item { display: block; margin-top: 6rpx; color: #8a95a6; font-size: 22rpx; line-height: 1.5; }
+
+.progress-box { padding: 50rpx 0; display: flex; flex-direction: column; align-items: center; }
+.progress-ring {
+  width: 64rpx;
+  height: 64rpx;
+  border: 6rpx solid #e0f0ff;
+  border-top-color: #0b8cff;
+  border-radius: 50%;
+  animation: spin 0.9s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.progress-title { margin-top: 22rpx; color: #172033; font-size: 28rpx; font-weight: 800; }
+.progress-sub {
+  margin-top: 10rpx;
+  padding: 0 40rpx;
+  color: #8a95a6;
+  font-size: 23rpx;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.fail-box { padding: 44rpx 0; display: flex; flex-direction: column; align-items: center; }
+.fail-title { color: #f04438; font-size: 28rpx; font-weight: 800; }
+.fail-sub { margin-top: 10rpx; color: #8a95a6; font-size: 23rpx; }
+
+.result-box { margin-top: 20rpx; }
+.result-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14rpx;
+}
+.result-grid.single { grid-template-columns: 1fr; }
+.result-img {
+  width: 100%;
+  height: 420rpx;
+  border-radius: 18rpx;
+  background: #f1f5fa;
+}
+.result-grid.single .result-img { height: 720rpx; }
+.result-actions { margin-top: 20rpx; display: flex; gap: 16rpx; }
+.ghost-btn {
+  flex: 1;
+  height: 76rpx;
+  border-radius: 999rpx;
+  color: #1f8cff;
+  font-size: 25rpx;
+  font-weight: 800;
+  line-height: 76rpx;
+  text-align: center;
+  background: #eef7ff;
+}
+
 .bottom-bar {
   position: fixed;
   left: 0;
@@ -603,10 +1071,68 @@ function increaseQuantity() {
   background: linear-gradient(135deg, #1f8cff, #41b9ff);
   box-shadow: 0 12rpx 24rpx rgba(31, 140, 255, 0.28);
 }
+.submit-btn.disabled { opacity: 0.6; }
+.submit-icon { width: 24rpx; height: 24rpx; margin-right: 8rpx; }
 
-.submit-icon {
-  width: 24rpx;
-  height: 24rpx;
-  margin-right: 8rpx;
+/* 对比弹层：与老照片 / 动漫头像保持一致 */
+.compare-modal {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 120;
+}
+.compare-backdrop {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(15, 23, 42, 0.58);
+}
+.compare-panel {
+  position: absolute;
+  left: 36rpx;
+  right: 36rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 24rpx;
+  border-radius: 28rpx;
+  background: #ffffff;
+}
+.compare-panel-head {
+  margin-bottom: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #172033;
+  font-size: 32rpx;
+  font-weight: 800;
+}
+.close-btn {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  color: #64748b;
+  background: #f1f5f9;
+  font-size: 42rpx;
+  line-height: 50rpx;
+  text-align: center;
+  font-weight: 300;
+}
+.large-compare {
+  width: 100%;
+  height: 900rpx;
+  max-height: 70vh;
+  border-radius: 22rpx;
+}
+.large-compare .compare-before .compare-img { width: calc(100vw - 120rpx); }
+.compare-guide {
+  display: block;
+  margin-top: 18rpx;
+  color: #64748b;
+  font-size: 24rpx;
+  text-align: center;
 }
 </style>
diff --git a/pages/tool/work-detail.vue b/pages/tool/work-detail.vue
index a927c44..7236a66 100644
--- a/pages/tool/work-detail.vue
+++ b/pages/tool/work-detail.vue
@@ -160,8 +160,9 @@ function getPageStackDelta(routeName) {
   height: 0;
 }
 
+/* 底栏是 fixed 的，留够 300rpx 才不会盖住内容 */
 .wrap {
-  padding: 28rpx 28rpx 150rpx;
+  padding: 28rpx 28rpx 300rpx;
 }
 
 .state-card,
diff --git a/pages/toolbox/toolbox.vue b/pages/toolbox/toolbox.vue
index 46721eb..3de2090 100644
--- a/pages/toolbox/toolbox.vue
+++ b/pages/toolbox/toolbox.vue
@@ -32,7 +32,9 @@
 
         <view class="tool-list">
           <view v-for="item in apps" :key="item.id || item.type || item.title" class="tool-row" @click="onTool(item)">
-            <image class="tool-icon" :src="item.icon" mode="aspectFit" />
+            <view class="tool-icon-wrap">
+              <image class="tool-icon" :src="item.icon" mode="aspectFill" />
+            </view>
             <view class="tool-main">
               <text class="tool-name">{{ item.name }}</text>
               <text class="tool-desc">{{ item.desc }}</text>
@@ -301,10 +303,19 @@ function onRefresh() {
   }
 }
 
-.tool-icon {
+.tool-icon-wrap {
   width: 91rpx;
   height: 91rpx;
   flex-shrink: 0;
+  border-radius: 12rpx;
+  overflow: hidden;
+  background: #edf7ff;
+}
+
+.tool-icon {
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
 .tool-main {
diff --git a/pages/works/works.vue b/pages/works/works.vue
index 3f44bd2..101d80d 100644
--- a/pages/works/works.vue
+++ b/pages/works/works.vue
@@ -5,24 +5,36 @@
     <scroll-view
       class="page-scroll"
       scroll-y
-      refresher-enabled
+      :refresher-enabled="userStore.isLogin"
       :refresher-triggered="refreshing"
       @refresherrefresh="onRefresh"
       @scrolltolower="loadMore"
     >
       <view class="works-content">
-        <view class="tabs">
-          <view
-            v-for="item in tabs"
-            :key="item.key"
-            class="tab"
-            :class="{ active: activeTab === item.key }"
-            @click="changeTab(item.key)"
-          >
-            <text class="tab-name">{{ item.name }}</text>
-            <text class="tab-count">{{ counts[item.key] || 0 }}</text>
+        <!-- 类型标签会随功能增加变多，横向滚动，选中项自动滚到居中 -->
+        <scroll-view
+          id="tabs-scroll"
+          class="tabs-scroll"
+          scroll-x
+          scroll-with-animation
+          :scroll-left="tabsScrollLeft"
+          :show-scrollbar="false"
+          :enhanced="true"
+        >
+          <view class="tabs">
+            <view
+              v-for="item in tabs"
+              :key="item.key"
+              :id="`tab-${item.key}`"
+              class="tab"
+              :class="{ active: activeTab === item.key }"
+              @click="changeTab(item.key)"
+            >
+              <text class="tab-name">{{ item.name }}</text>
+              <text v-if="userStore.isLogin" class="tab-count">{{ counts[item.key] || 0 }}</text>
+            </view>
           </view>
-        </view>
+        </scroll-view>
 
         <view v-if="list.length" class="works-grid">
           <view
@@ -91,7 +103,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import { onHide, onShow, onUnload } from '@dcloudio/uni-app'
 import dayjs from 'dayjs'
 import { toolApi } from '@/api/index.js'
@@ -107,18 +119,29 @@ const page = ref(1)
 const pageSize = 10
 const loading = ref(false)
 const refreshing = ref(false)
-const counts = ref({ all: 0, ainame: 0, anime: 0, image: 0, photo: 0 })
+const counts = ref({ all: 0, ainame: 0, anime: 0, image: 0, photo: 0, oldphoto: 0, portrait: 0 })
+// 类型标签栏的横向滚动位置
+const tabsScrollLeft = ref(0)
 let timer = 0
 
 const tabs = computed(() => [
   { key: 'all', name: '全部' },
   { key: 'ainame', name: 'AI取名' },
   { key: 'anime', name: '动漫头像' },
-  { key: 'photo', name: '证件照' }
+  { key: 'photo', name: '证件照' },
+  { key: 'oldphoto', name: '老照片' },
+  { key: 'portrait', name: '形象照' }
 ])
 
 onShow(() => {
+  const preferredTab = uni.getStorageSync('works_active_tab')
+  if (tabs.value.some((item) => item.key === preferredTab)) {
+    activeTab.value = preferredTab
+    uni.removeStorageSync('works_active_tab')
+  }
   refreshSilent()
+  // 从其它页面带着类型进来时，把该类型滚到可视区中间（等渲染完成再量位置）
+  nextTick(() => centerTab(activeTab.value))
 })
 
 onHide(() => clearTimer())
@@ -170,7 +193,9 @@ function normalizeCounts(data = {}) {
     ainame: Number(data.ainame || 0),
     anime: Number(data.anime || 0),
     image: Number(data.image || 0),
-    photo: Number(data.photo || 0)
+    photo: Number(data.photo || 0),
+    oldphoto: Number(data.oldphoto || 0),
+    portrait: Number(data.portrait || 0)
   }
 }
 
@@ -180,6 +205,14 @@ function refreshSilent(silent = false) {
 
 function onRefresh() {
   refreshing.value = true
+  if (!userStore.isLogin) {
+    // 先让原生 scroll-view 接收到 triggered=true，再在下一次渲染后关闭，避免刷新指示器滞留
+    nextTick(() => {
+      refreshing.value = false
+      uni.stopPullDownRefresh()
+    })
+    return
+  }
   refreshSilent()
 }
 
@@ -190,11 +223,35 @@ function loadMore() {
 }
 
 function changeTab(key) {
+  centerTab(key)
   if (activeTab.value === key) return
   activeTab.value = key
   refreshSilent()
 }
 
+/**
+ * 把指定标签滚到可视区中间。
+ * scroll-into-view 只能把元素对齐到左边缘，所以这里量一次位置自己算 scroll-left：
+ * 目标 = 标签中心 - 容器中心（含容器当前已滚动的距离），左右到头时由 scroll-view 自行收敛。
+ */
+function centerTab(key) {
+  uni.createSelectorQuery()
+    .select('#tabs-scroll')
+    .boundingClientRect()
+    .select('#tabs-scroll')
+    .scrollOffset()
+    .select(`#tab-${key}`)
+    .boundingClientRect()
+    .exec((res) => {
+      const wrap = res && res[0]
+      const offset = res && res[1]
+      const tab = res && res[2]
+      if (!wrap || !offset || !tab || !wrap.width) return
+      const target = tab.left - wrap.left + offset.scrollLeft - (wrap.width - tab.width) / 2
+      tabsScrollLeft.value = Math.max(0, Math.round(target))
+    })
+}
+
 function scheduleRefresh() {
   clearTimer()
   if (list.value.some((item) => Number(item.status) === 0)) {
@@ -208,6 +265,21 @@ function clearTimer() {
 }
 
 function openWork(item) {
+  if (item.work_type === 'photo') {
+    const workId = item.photo_open_id || item.id
+    if (workId) uni.navigateTo({ url: `/pages/tool/id-photo-detail?id=${workId}` })
+    return
+  }
+  if (item.work_type === 'oldphoto') {
+    const workId = item.photo_open_id || item.id
+    if (workId) uni.navigateTo({ url: `/pages/tool/old-photo-detail?id=${workId}` })
+    return
+  }
+  if (item.work_type === 'portrait') {
+    const workId = item.photo_open_id || item.id
+    if (workId) uni.navigateTo({ url: `/pages/tool/portrait-detail?id=${workId}` })
+    return
+  }
   if (!item.detail_url) return
   uni.navigateTo({ url: item.detail_url })
 }
@@ -224,7 +296,9 @@ function typeText(type) {
     ainame: 'AI取名',
     anime: '动漫头像',
     image: 'AI作品',
-    photo: '证件照'
+    photo: '证件照',
+    oldphoto: '老照片',
+    portrait: '形象照'
   }
   return map[type] || 'AI作品'
 }
@@ -257,6 +331,8 @@ function handleEmptyAction() {
 
 .page-scroll {
   flex: 1;
+  width: 100%;
+  min-width: 0;
   height: 0;
 }
 
@@ -267,16 +343,31 @@ function handleEmptyAction() {
   box-sizing: border-box;
 }
 
-.tabs {
+/* 吸顶放在滚动容器上，内部只负责横向排列 */
+.tabs-scroll {
   position: sticky;
   top: 0;
   z-index: 3;
+  width: calc(100% + 48rpx);
   height: 88rpx;
   margin: 0 -24rpx;
-  padding: 0 24rpx;
   border-top: 1rpx solid #eef1f6;
   background: rgba(255, 255, 255, 0.96);
-  display: flex;
+  white-space: nowrap;
+  box-sizing: border-box;
+
+  /* 隐藏横向滚动条，H5 下默认会占高度 */
+  ::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+}
+
+.tabs {
+  height: 88rpx;
+  padding: 0 24rpx;
+  display: inline-flex;
   align-items: center;
   gap: 14rpx;
   box-sizing: border-box;
diff --git a/static/toolbox/portrait-art-demo-original.jpg b/static/toolbox/portrait-art-demo-original.jpg
new file mode 100644
index 0000000..d04f0c7
Binary files /dev/null and b/static/toolbox/portrait-art-demo-original.jpg differ
diff --git a/static/toolbox/portrait-art-demo-result.jpg b/static/toolbox/portrait-art-demo-result.jpg
new file mode 100644
index 0000000..e10bc99
Binary files /dev/null and b/static/toolbox/portrait-art-demo-result.jpg differ
diff --git a/utils/config.js b/utils/config.js
index b2d138d..29c048f 100644
--- a/utils/config.js
+++ b/utils/config.js
@@ -5,7 +5,7 @@
  */
 
 // App / 小程序默认环境：'dev' | 'test' | 'pro'
-const DEFAULT_ENV = 'dev'
+const DEFAULT_ENV = 'pro'
 
 const ENV_MAP = {
   dev: {
@@ -42,7 +42,11 @@ base = ENV_MAP.pro
 // H5 公众号网页授权 appId（沿用旧项目）
 const WX_MP_APPID = 'wxd2aa05b2249b16ce'
 
+// 应用版本号，用于「设置 - 当前版本」展示；发版时与 manifest.json 的 versionName 一起改
+const APP_VERSION = '3.0.0'
+
 export default {
   ...base,
-  WX_MP_APPID
+  WX_MP_APPID,
+  APP_VERSION
 }
diff --git a/utils/login.js b/utils/login.js
new file mode 100644
index 0000000..dbcd2d3
--- /dev/null
+++ b/utils/login.js
@@ -0,0 +1,86 @@
+const LOGIN_RETURN_KEY = 'login_redirect'
+const DEFAULT_RETURN_URL = '/pages/toolbox/toolbox'
+const LOGIN_ROUTES = ['pages/login/login', 'pages/login/phone']
+
+function routePath(url = '') {
+  return String(url).replace(/^\/+/, '').split(/[?#]/)[0]
+}
+
+function isLoginRoute(url = '') {
+  return LOGIN_ROUTES.includes(routePath(url))
+}
+
+function normalizeReturnUrl(value = '') {
+  if (!value) return ''
+  let url = String(value)
+  try {
+    if (/%[0-9a-f]{2}/i.test(url)) url = decodeURIComponent(url)
+  } catch (e) {}
+  if (!url.startsWith('/')) url = `/${url}`
+  if (!url.startsWith('/pages/') || isLoginRoute(url)) return ''
+  return url
+}
+
+function getPageUrl(page) {
+  if (!page) return ''
+  const fullPath = page.$page && page.$page.fullPath
+  const normalizedFullPath = normalizeReturnUrl(fullPath)
+  if (normalizedFullPath) return normalizedFullPath
+
+  const route = routePath(page.route || '')
+  if (!route || isLoginRoute(route)) return ''
+  const options = page.options || (page.$page && page.$page.options) || {}
+  const query = Object.keys(options)
+    .filter((key) => options[key] !== undefined && options[key] !== null && options[key] !== '')
+    .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(String(options[key]))}`)
+    .join('&')
+  return normalizeReturnUrl(`/${route}${query ? `?${query}` : ''}`)
+}
+
+/**
+ * 记录发起登录的页面。普通端返回时优先使用原页面栈；该记录主要用于 H5 微信授权后页面栈丢失的场景。
+ */
+export function rememberLoginSource(explicitUrl = '') {
+  const directUrl = normalizeReturnUrl(explicitUrl)
+  if (directUrl) {
+    uni.setStorageSync(LOGIN_RETURN_KEY, directUrl)
+    return directUrl
+  }
+
+  const pages = getCurrentPages()
+  for (let index = pages.length - 1; index >= 0; index -= 1) {
+    const url = getPageUrl(pages[index])
+    if (!url) continue
+    uni.setStorageSync(LOGIN_RETURN_KEY, url)
+    return url
+  }
+
+  return normalizeReturnUrl(uni.getStorageSync(LOGIN_RETURN_KEY))
+}
+
+/**
+ * 登录成功后回到发起页：
+ * - 页面栈仍存在时 navigateBack，保留表单/滚动位置，并触发来源页 onShow；
+ * - H5 微信授权导致页面栈丢失时 reLaunch 到已记录路径；
+ * - 没有来源页时才回到工具箱首页。
+ */
+export function returnAfterLogin() {
+  const pages = getCurrentPages()
+  const firstLoginIndex = pages.findIndex((page) => isLoginRoute(page.route || ''))
+
+  if (firstLoginIndex > 0) {
+    uni.removeStorageSync(LOGIN_RETURN_KEY)
+    uni.navigateBack({ delta: pages.length - firstLoginIndex })
+    return
+  }
+
+  const returnUrl = normalizeReturnUrl(uni.getStorageSync(LOGIN_RETURN_KEY))
+  uni.removeStorageSync(LOGIN_RETURN_KEY)
+  if (returnUrl) {
+    uni.reLaunch({ url: returnUrl })
+    return
+  }
+
+  uni.switchTab({ url: DEFAULT_RETURN_URL })
+}
+
diff --git a/utils/richtext.js b/utils/richtext.js
new file mode 100644
index 0000000..ec51a44
--- /dev/null
+++ b/utils/richtext.js
@@ -0,0 +1,95 @@
+/**
+ * 后台富文本清洗（协议、公告等静态内容）
+ *
+ * 背景：html 表里的正文是 Word / 旧编辑器导出的，存在两类问题会破坏移动端排版：
+ *  1. 大量 `<p><span>&nbsp;</span></p>` 空段落，叠加段间距后出现大片空白；
+ *  2. 几乎每个 span 都带内联 `font-family:宋体;font-size:14px;color:#000`，
+ *     内联样式优先级最高，会盖掉端上给的 tagStyle，导致字号偏小、暗色模式不可读。
+ *
+ * 处理方式：删掉空段落，剥掉会影响排版与主题的内联属性，保留加粗、下划线等语义样式。
+ */
+
+// 会破坏排版 / 主题的内联属性，统一剥掉，交给端上的 tagStyle 决定
+const DROP_STYLE_PROPS = [
+    'font-family',
+    'font-size',
+    'color',
+    'background',
+    'background-color',
+    'line-height',
+    'margin',
+    'margin-top',
+    'margin-bottom',
+    'margin-left',
+    'margin-right',
+    'padding',
+    'padding-top',
+    'padding-bottom',
+    'width',
+    'height'
+]
+
+/** 判断一段 html 是否只有空白内容（空格、&nbsp;、<br>、空标签） */
+function isBlankFragment(html) {
+    const text = String(html || '')
+        .replace(/<br\s*\/?>/gi, '')
+        .replace(/<[^>]+>/g, '')
+        .replace(/&nbsp;|&#160;|\u00a0/gi, '')
+        .replace(/\s/g, '')
+    return text.length === 0
+}
+
+/** 过滤单个 style 属性里的危险声明 */
+function cleanStyleValue(style) {
+    return String(style || '')
+        .split(';')
+        .map((item) => item.trim())
+        .filter(Boolean)
+        .filter((item) => {
+            const prop = item.split(':')[0].trim().toLowerCase()
+            return prop && !DROP_STYLE_PROPS.includes(prop)
+        })
+        .join('; ')
+}
+
+/**
+ * @param {string} html 后台返回的富文本
+ * @return {string} 清洗后的富文本
+ */
+export function cleanRichText(html) {
+    if (!html) return ''
+    let text = String(html)
+
+    // 1. Word 导出常见的无用标签
+    text = text
+        .replace(/<\/?o:p[^>]*>/gi, '')
+        .replace(/<!--[\s\S]*?-->/g, '')
+        .replace(/<meta[^>]*>/gi, '')
+        .replace(/<style[\s\S]*?<\/style>/gi, '')
+
+    // 2. 剥掉内联的字体/颜色/间距声明，style 清空后连属性一起去掉
+    text = text.replace(/\sstyle\s*=\s*"([^"]*)"/gi, (match, style) => {
+        const kept = cleanStyleValue(style)
+        return kept ? ` style="${kept}"` : ''
+    })
+    text = text.replace(/\sstyle\s*=\s*'([^']*)'/gi, (match, style) => {
+        const kept = cleanStyleValue(style)
+        return kept ? ` style="${kept}"` : ''
+    })
+
+    // 3. Word 会把字体信息塞进 font 标签和 class，一并清掉
+    text = text.replace(/<\/?font[^>]*>/gi, '')
+    text = text.replace(/\sclass\s*=\s*"(?:Mso|xl)[^"]*"/gi, '')
+
+    // 4. 删掉只剩空白的段落 / 标题（连续空段落是大片空白的主因）
+    text = text.replace(/<(p|div|h[1-6])\b[^>]*>([\s\S]*?)<\/\1>/gi, (match, tag, inner) => {
+        return isBlankFragment(inner) ? '' : match
+    })
+
+    // 5. 连续 <br> 压缩为一个，避免用 br 堆出的空行
+    text = text.replace(/(?:<br\s*\/?>\s*){2,}/gi, '<br>')
+
+    return text.trim()
+}
+
+export default cleanRichText
diff --git a/utils/upload.js b/utils/upload.js
index a043db3..ab77fcd 100644
--- a/utils/upload.js
+++ b/utils/upload.js
@@ -56,3 +56,94 @@ export function uploadImage(filePath, fileInfo = {}) {
     })
   })
 }
+
+/**
+ * 把原图作为 multipart 文件直接提交给某个业务接口（不先传 CDN 再由后端回源下载一次）。
+ * 公共参数与鉴权头和 utils/request.js 保持一致。
+ * @param {string} url 接口路径，取自 api/config.js
+ * @param {string} filePath 本地临时文件路径
+ * @param {object} params 业务参数
+ * @param {string} failMsg 解析失败时的兜底文案
+ */
+function uploadWithForm(url, filePath, params = {}, failMsg = '上传结果解析失败') {
+  const token = uni.getStorageSync('token')
+  const uid = uni.getStorageSync('open_id')
+  let mac = uni.getStorageSync('mac')
+  if (!mac) {
+    mac = uni.getSystemInfoSync().deviceId || guid()
+    uni.setStorageSync('mac', mac)
+  }
+
+  const { timeStr, nonce } = getNonce()
+  const { version, version_code } = getVersion()
+  const formData = {
+    token,
+    uid,
+    mac,
+    base_timestamp: parseInt(Date.now() / 1000),
+    client: getClient(),
+    source: uni.getStorageSync('source') || '',
+    client_ios: uni.getSystemInfoSync().platform === 'ios' ? 1 : 0,
+    version,
+    version_code,
+    ...params
+  }
+
+  Object.keys(formData).forEach((key) => {
+    if (formData[key] === '' || formData[key] === undefined || formData[key] === null) {
+      delete formData[key]
+    } else if (typeof formData[key] !== 'string') {
+      formData[key] = String(formData[key])
+    }
+  })
+
+  return new Promise((resolve, reject) => {
+    uni.uploadFile({
+      url: `${BASE_URL}${url}`,
+      filePath,
+      name: 'file',
+      header: {
+        token,
+        timestr: timeStr,
+        nonce
+      },
+      formData,
+      success: (res) => {
+        let data = {}
+        try {
+          data = typeof res.data === 'string' ? JSON.parse(res.data) : res.data
+        } catch (e) {
+          reject({ code: 1, msg: failMsg })
+          return
+        }
+        if (data.code === 0) {
+          resolve(data)
+          return
+        }
+        reject(data)
+      },
+      fail: (e) => reject({ code: 1, msg: e.errMsg || '照片上传失败，请重试' })
+    })
+  })
+}
+
+/**
+ * 证件照制作
+ */
+export function createIdPhoto(filePath, params = {}) {
+  return uploadWithForm(API.INTERFACE_IDPHOTO_POST_CREATE, filePath, params, '制作结果解析失败')
+}
+
+/**
+ * 老照片修复/上色：提交后立即返回任务，结果由 /oldphoto/getdetail 轮询
+ */
+export function createOldPhoto(filePath, params = {}) {
+  return uploadWithForm(API.INTERFACE_OLDPHOTO_POST_CREATE, filePath, params, '提交结果解析失败')
+}
+
+/**
+ * 形象照/职业照/写真：提交后立即返回任务（含 1~4 个子任务），结果由 /portrait/getdetail 轮询
+ */
+export function createPortrait(filePath, params = {}) {
+  return uploadWithForm(API.INTERFACE_PORTRAIT_POST_CREATE, filePath, params, '提交结果解析失败')
+}