feat(avatar): optimize embedded H5 management flow

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="authorization-page">
-    <header class="page-header">
+  <div class="authorization-page" :class="{ embedded: isEmbedded }">
+    <header v-if="!isEmbedded" class="page-header">
       <button class="back-button" type="button" aria-label="返回数字分身管理" @click="goBack">
         <svg viewBox="0 0 24 24" aria-hidden="true">
           <path d="m15 18-6-6 6-6" />
@@ -95,6 +95,9 @@
     </main>
 
     <footer v-if="activeAvatarId" class="save-area">
+      <button v-if="isEmbedded" class="footer-back-button" type="button" :disabled="saving" @click="goBack">
+        返回
+      </button>
       <button class="save-button" type="button" :disabled="loading || saving" @click="saveSettings()">
         <span v-if="saving" class="saving-spinner" aria-hidden="true"></span>
         {{ saving ? '保存中...' : '保存授权设置' }}
@@ -119,6 +122,7 @@ import {
 } from '@/api'
 import { useAvatarStore } from '@/store/avatar'
 import { pickScopedAvatarId } from '@/utils/avatar-page-data.js'
+import { isHuihuiEmbeddedMode } from '@/utils/embed-mode'
 
 type PermissionState = Record<AvatarPermission, boolean>
 
@@ -126,6 +130,7 @@ const router = useRouter()
 const route = useRoute()
 const avatarStore = useAvatarStore()
 const avatarId = computed(() => pickScopedAvatarId(route.params.avatarId, avatarStore.currentAvatarId, avatarStore.avatars))
+const isEmbedded = isHuihuiEmbeddedMode()
 
 const permissionItems: Array<{
   key: AvatarPermission
@@ -394,6 +399,10 @@ svg {
   padding: 0 20px;
 }
 
+.authorization-page.embedded .page-content {
+  padding-top: 16px;
+}
+
 .permission-intro {
   min-height: 96px;
   padding: 15px 16px 14px;
@@ -599,12 +608,15 @@ svg {
   bottom: 0;
   width: min(100%, 390px);
   padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
+  display: flex;
+  gap: 10px;
   background: linear-gradient(to bottom, rgba(250, 250, 250, 0), #fafafa 20%, #fafafa 100%);
   transform: translateX(-50%);
 }
 
 .save-button {
-  width: 100%;
+  min-width: 0;
+  flex: 1;
   height: 48px;
   display: flex;
   align-items: center;
@@ -620,6 +632,20 @@ svg {
   cursor: pointer;
 }
 
+.footer-back-button {
+  flex: 0 0 96px;
+  height: 48px;
+  border: 1px solid #eadfd6;
+  border-radius: 24px;
+  color: #6f665f;
+  background: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.footer-back-button:disabled { opacity: .58; }
+
 .save-button:disabled {
   opacity: .68;
 }