feat: refine embedded avatar authorization controls

digital-avatar-app/src/App.vue

@@ -1,10 +1,75 @@
 <template>
-  <div id="app">
+  <div id="app" :class="{ 'embedded-shell': isInUniAppWebView }">
     <router-view />
-    <!-- 底部菜单暂不展示，多分身能力统一从分身卡片进入。 -->
+    <!-- 底部导航栏 -->
+    <nav class="bottom-nav" v-if="showNav">
+      <button
+        class="nav-item"
+        :class="{ active: currentRoute === '/' || currentRoute === '/avatar/manage' }"
+        @click="navigateTo('/avatar/manage')"
+      >
+        <span class="nav-icon">🤖</span>
+        <span class="nav-label">我的分身</span>
+      </button>
+      <button
+        class="nav-item"
+        :class="{ active: currentRoute === '/authorization' }"
+        @click="navigateTo('/authorization')"
+      >
+        <span class="nav-icon">🔑</span>
+        <span class="nav-label">授权管理</span>
+      </button>
+      <button
+        v-if="isInUniAppWebView"
+        class="nav-item"
+        :class="{ active: currentRoute === '/token/charge' }"
+        @click="navigateTo('/token/charge')"
+      >
+        <span class="nav-icon">💰</span>
+        <span class="nav-label">充值购买</span>
+      </button>
+    </nav>
   </div>
 </template>
 
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { isInUniWebView } from '@/utils/uniapp-bridge'
+
+const router = useRouter()
+const route = useRoute()
+const isInUniAppWebView = isInUniWebView()
+
+const currentRoute = ref<string>(route.path)
+const showNav = ref<boolean>(shouldShowNav(route.path))
+
+function shouldShowNav(path: string) {
+  return path !== '/'
+    && path !== '/avatar/create'
+    && path !== '/login/sms'
+    && !path.startsWith('/avatar/edit')
+    && !path.startsWith('/avatar/chat')
+    && !path.startsWith('/share/')
+}
+
+// 监听路由变化
+watch(() => route.path, (newPath) => {
+  currentRoute.value = newPath
+  showNav.value = shouldShowNav(newPath)
+})
+
+// 导航
+const navigateTo = (path: string) => {
+  router.push(path)
+}
+
+onMounted(() => {
+  currentRoute.value = route.path
+  showNav.value = shouldShowNav(route.path)
+})
+</script>
+
 <style>
 * {
   margin: 0;
@@ -18,4 +83,54 @@
   background: #F8F9FA;
   padding-bottom: env(safe-area-inset-bottom);
 }
+
+/* 原生 App / 微信小程序容器已经提供了自己的导航栏，H5 不再重复显示页头。 */
+.embedded-shell .page-header,
+.embedded-shell .chat-header {
+  display: none;
+}
+
+/* 底部导航栏 */
+.bottom-nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  background: white;
+  border-top: 1px solid #EDEEF1;
+  padding-bottom: env(safe-area-inset-bottom);
+  z-index: 100;
+}
+
+.nav-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.nav-icon {
+  font-size: 20px;
+}
+
+.nav-label {
+  font-size: 11px;
+  color: #9398AE;
+  font-weight: 500;
+}
+
+.nav-item.active .nav-label {
+  color: #F97316;
+}
+
+.nav-item.active .nav-icon {
+  filter: none;
+}
 </style>