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;
 }

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>

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

@@ -1,15 +1,11 @@
 <template>
   <div class="avatar-manage-page">
     <!-- 顶部导航 -->
-    <header class="page-header">
+    <header v-if="!isEmbedded" class="page-header">
       <div class="header-left">
         <button class="back-btn" @click="goBack">‹</button>
         <h1 class="page-title">数字分身管理</h1>
       </div>
-      <!-- 右上角创建入口 -->
-      <div class="header-right">
-        <button class="icon-btn" @click="goCreate" title="创建数字分身">➕</button>
-      </div>
     </header>
 
     <!-- 用户资料头（会会登录账号的头像 / 昵称） -->
@@ -39,8 +35,13 @@
     <!-- 数字分身列表（只放分身相关） -->
     <section class="avatar-list-section">
       <div class="section-head">
-        <h3 class="section-title">我的数字分身</h3>
-        <span class="count-badge">{{ avatars.length }}</span>
+        <div class="section-heading-copy">
+          <h3 class="section-title">我的数字分身</h3>
+          <span class="count-badge">{{ avatars.length }}</span>
+        </div>
+        <button class="section-create-btn" type="button" @click="goCreate">
+          <span aria-hidden="true">＋</span> 添加分身
+        </button>
       </div>
 
       <div v-if="avatars.length" class="avatar-list">
@@ -87,10 +88,12 @@ import { useRouter } from 'vue-router'
 import { useAvatarStore } from '@/store/avatar'
 import { useUserStore } from '@/store/user'
 import { createAvatarShareLink } from '@/api'
+import { isHuihuiEmbeddedMode } from '@/utils/embed-mode'
 
 const router = useRouter()
 const avatarStore = useAvatarStore()
 const userStore = useUserStore()
+const isEmbedded = isHuihuiEmbeddedMode()
 
 // 临时产品开关：余额卡片代码保留，后续改为 true 即可恢复展示。
 const SHOW_POINTS_BALANCE_CARD = false
@@ -354,10 +357,36 @@ onMounted(() => {
 .section-head {
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
+  gap: 12px;
   margin: 8px 0 12px;
 }
 
+.section-heading-copy {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.section-create-btn {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 8px 12px;
+  border: 1px solid #FED7B5;
+  border-radius: 999px;
+  color: #E9650C;
+  background: #FFF7ED;
+  font-size: 12px;
+  font-weight: 650;
+  cursor: pointer;
+}
+
+.section-create-btn span { font-size: 17px; line-height: 1; }
+.section-create-btn:active { background: #FFEDD5; }
+
 .section-title {
   font-size: 16px;
   font-weight: 600;

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

@@ -1,7 +1,7 @@
 <template>
-  <div class="knowledge-page">
+  <div class="knowledge-page" :class="{ embedded: isEmbedded }">
     <!-- 顶部导航 -->
-    <header class="page-header">
+    <header v-if="!isEmbedded" class="page-header">
       <div class="header-left">
         <button class="back-btn" @click="goBack">‹</button>
         <h1 class="page-title">知识库管理</h1>
@@ -23,7 +23,7 @@
         <div class="upload-section">
           <div class="upload-zone" :class="{ 'drag-over': dragOver }" @click="triggerFile" @dragover.prevent="dragOver = true" @dragleave.prevent="dragOver = false" @drop.prevent="onDrop">
             <div class="upload-icon">📥</div>
-            <p class="upload-title">拖拽文件到此处，或<span class="upload-link">点击上传</span></p>
+            <p class="upload-title"><span class="upload-link">点击上传</span></p>
             <p class="upload-hint">支持 MD / TXT / PDF / DOC / DOCX / XLSX，上传后自动向量化</p>
             <input ref="fileInput" type="file" accept=".md,.txt,.pdf,.doc,.docx,.xlsx" class="hidden-input" @change="onFileChange" />
           </div>
@@ -37,10 +37,10 @@
             <div class="card-content">
               <div class="card-title-row">
                 <strong>{{ doc.filename }}</strong>
-                <span class="status-pill" :class="{ pending: !doc.vectorized && doc.filePresent !== false, missing: doc.filePresent === false }">{{ doc.filePresent === false ? '文件缺失' : (doc.vectorized ? '已入库' : '处理中') }}</span>
+                <span class="status-pill" :class="documentState(doc).tone">{{ documentState(doc).label }}</span>
               </div>
               <p class="card-meta">{{ doc.fileType.toUpperCase() }} · {{ formatSize(doc.fileSize) }} · {{ formatDate(doc.createdAt) }}</p>
-              <p class="card-detail">{{ doc.filePresent === false ? '原文件不可用，请删除后重新上传' : (doc.vectorized ? `已切分 ${doc.chunkCount || 0} 段，可用于对话` : '正在解析并建立知识索引') }}</p>
+              <p class="card-detail">{{ documentState(doc).detail }}</p>
             </div>
             <button class="card-delete" @click="removeDoc(doc.id)">删除</button>
           </article>
@@ -82,6 +82,7 @@ import { ref, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAvatarStore } from '@/store/avatar'
 import { pickScopedAvatarId, unwrapListData } from '@/utils/avatar-page-data.js'
+import { isHuihuiEmbeddedMode } from '@/utils/embed-mode'
 import {
   getKnowledgeDocs,
   uploadKnowledgeDoc,
@@ -95,6 +96,7 @@ import {
 const router = useRouter()
 const route = useRoute()
 const store = useAvatarStore()
+const isEmbedded = isHuihuiEmbeddedMode()
 
 const avatarId = computed(() => pickScopedAvatarId(route.params.avatarId, store.currentAvatarId, store.avatars))
 const activeTab = ref<'docs' | 'qa'>('docs')
@@ -111,6 +113,19 @@ const searching = ref(false)
 const searched = ref(false)
 const searchResults = ref<any[]>([])
 
+const documentState = (doc: any) => {
+  if (doc.filePresent === false) {
+    return { tone: 'missing', label: '文件缺失', detail: '原文件不可用，请删除后重新上传' }
+  }
+  if (doc.vectorized) {
+    return { tone: 'ready', label: '已入库', detail: `已切分 ${doc.chunkCount || 0} 段，可用于对话` }
+  }
+  if (['uploaded', 'parsing'].includes(String(doc.status || '').toLowerCase())) {
+    return { tone: 'pending', label: '处理中', detail: '正在解析并建立知识索引' }
+  }
+  return { tone: 'failed', label: '处理失败', detail: '未能建立知识索引，请删除后重新上传' }
+}
+
 const loadDocs = async () => {
   if (!avatarId.value) return
   try {
@@ -283,6 +298,7 @@ onMounted(async () => {
 .card-title-row strong { min-width: 0; flex: 1; overflow: hidden; color: #27201C; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
 .status-pill { flex: 0 0 auto; display: inline-flex; padding: 4px 7px; border-radius: 999px; color: #15803D; background: #ECFDF3; font-size: 10px; white-space: nowrap; }.status-pill.pending { color: #B45309; background: #FFFBEB; }
 .status-pill.missing { color: #B91C1C; background: #FEF2F2; }
+.status-pill.failed { color: #B91C1C; background: #FEF2F2; }
 .card-meta, .card-detail { margin: 5px 0 0; color: #9398AE; font-size: 11px; line-height: 1.4; }.card-detail { color: #8B6B58; }
 .card-delete { flex: 0 0 auto; align-self: center; border: 0; color: #EF4444; background: #FEF2F2; border-radius: 8px; padding: 7px 9px; font-size: 12px; cursor: pointer; }
 .card-empty { padding: 42px 16px; border: 1px dashed #F1D9C3; border-radius: 16px; color: #9398AE; background: #fff; font-size: 14px; text-align: center; }

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

@@ -10,10 +10,12 @@
     <section class="form-section">
       <label class="field-label">问题</label>
       <textarea
+        ref="questionInput"
         v-model="form.question"
-        class="field-input"
-        rows="3"
+        class="field-input question-input"
+        rows="1"
         placeholder="例如：你们的退款政策是什么？"
+        @input="resizeQuestion"
       ></textarea>
 
       <label class="field-label">标准答案</label>
@@ -46,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, nextTick, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useAvatarStore } from '@/store/avatar'
 import { pickScopedAvatarId, unwrapListData } from '@/utils/avatar-page-data.js'
@@ -63,6 +65,14 @@ const isEdit = computed(() => !!qaId.value)
 const form = reactive({ question: '', answer: '', enabled: true })
 const saving = ref(false)
 const error = ref('')
+const questionInput = ref<HTMLTextAreaElement | null>(null)
+
+const resizeQuestion = (event?: Event) => {
+  const element = (event?.target as HTMLTextAreaElement | null) || questionInput.value
+  if (!element) return
+  element.style.height = 'auto'
+  element.style.height = `${element.scrollHeight}px`
+}
 
 const goBack = () => router.back()
 
@@ -124,6 +134,8 @@ onMounted(async () => {
   if (isEdit.value) {
     await loadForEdit()
   }
+  await nextTick()
+  resizeQuestion()
 })
 </script>
 
@@ -194,6 +206,13 @@ onMounted(async () => {
   border-color: #F97316;
 }
 
+.question-input {
+  min-height: 44px;
+  overflow: hidden;
+  resize: none;
+  line-height: 1.55;
+}
+
 .switch-row {
   display: flex;
   align-items: center;