feat(avatar): optimize embedded H5 management flow

digital-avatar-app/src/views/AvatarEdit.vue

@@ -1,12 +1,10 @@
 <template>
   <div class="edit-avatar-page">
     <!-- 顶部导航 -->
-    <header class="page-header">
+    <header v-if="!isEmbedded" class="page-header">
       <button class="back-btn" @click="goBack">‹</button>
       <h1 class="page-title">分身微调</h1>
-      <button class="save-btn" :disabled="loading || saving || uploadingPhoto" @click="saveChanges">
-        {{ saving ? '保存中...' : '保存' }}
-      </button>
+      <span class="header-spacer" aria-hidden="true"></span>
     </header>
 
     <div v-if="loading" class="status-banner">加载中...</div>
@@ -159,6 +157,13 @@
         {{ deleting ? '删除中...' : '删除数字分身' }}
       </button>
     </section>
+
+    <footer class="edit-action-bar">
+      <button class="action-back-btn" type="button" :disabled="saving" @click="goBack">返回</button>
+      <button class="action-save-btn" type="button" :disabled="loading || saving || uploadingPhoto" @click="saveChanges">
+        {{ saving ? '保存中...' : '保存修改' }}
+      </button>
+    </footer>
   </div>
 </template>
 
@@ -168,11 +173,13 @@ import { useRoute, useRouter } from 'vue-router'
 import { deleteAvatar as apiDeleteAvatar, getAvatarDetail, updateAvatar, uploadAvatarPhoto } from '@/api'
 import { useAvatarStore } from '@/store/avatar'
 import { buildAvatarUpdatePayload, normalizeAvatarEditForm } from '@/utils/avatar-page-data.js'
+import { isHuihuiEmbeddedMode } from '@/utils/embed-mode'
 
 const router = useRouter()
 const route = useRoute()
 const avatarStore = useAvatarStore()
 const avatarId = route.params.id as string
+const isEmbedded = isHuihuiEmbeddedMode()
 
 // 表单数据
 const formData = reactive({
@@ -288,7 +295,7 @@ onMounted(async () => {
 .edit-avatar-page {
   min-height: 100vh;
   background: #F8F9FA;
-  padding-bottom: 40px;
+  padding-bottom: calc(104px + env(safe-area-inset-bottom));
 }
 
 /* 顶部导航 */
@@ -331,16 +338,7 @@ onMounted(async () => {
   color: #B91C1C;
 }
 
-.save-btn {
-  background: #F97316;
-  color: white;
-  border: none;
-  padding: 8px 20px;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-}
+.header-spacer { width: 40px; }
 
 /* 头像上传 */
 .photo-section {
@@ -580,4 +578,47 @@ onMounted(async () => {
   background: #EF4444;
   color: white;
 }
+
+.edit-action-bar {
+  position: fixed;
+  z-index: 30;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  gap: 12px;
+  padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
+  border-top: 1px solid rgba(229, 231, 235, .9);
+  background: rgba(248, 249, 250, .96);
+  box-shadow: 0 -8px 24px rgba(56, 38, 24, .06);
+  backdrop-filter: blur(12px);
+}
+
+.action-back-btn,
+.action-save-btn {
+  height: 48px;
+  border-radius: 14px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.action-back-btn {
+  flex: 0 0 104px;
+  border: 1px solid #E4E0DC;
+  color: #655E58;
+  background: #fff;
+}
+
+.action-save-btn {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  color: #fff;
+  background: linear-gradient(105deg, #F79A38, #F97316);
+  box-shadow: 0 8px 18px rgba(249, 115, 22, .18);
+}
+
+.action-back-btn:disabled,
+.action-save-btn:disabled { opacity: .6; cursor: not-allowed; }
 </style>