feat: complete huihui square avatar workflows

digital-avatar-app/src/App.vue

@@ -0,0 +1,119 @@
+<template>
+  <div id="app">
+    <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
+        class="nav-item"
+        :class="{ active: currentRoute === '/token/charge' }"
+        @click="navigateTo('/token/charge')"
+      >
+        <span class="nav-icon">💰</span>
+        <span class="nav-label">Token</span>
+      </button>
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+const currentRoute = ref<string>(route.path)
+const showNav = ref<boolean>(true)
+
+// 监听路由变化
+watch(() => route.path, (newPath) => {
+  currentRoute.value = newPath
+  // 首页（创建引导）与编辑页隐藏底部导航
+  showNav.value = newPath !== '/' && !newPath.startsWith('/avatar/edit')
+})
+
+// 导航
+const navigateTo = (path: string) => {
+  router.push(path)
+}
+
+onMounted(() => {
+  currentRoute.value = route.path
+  showNav.value = route.path !== '/' && !route.path.startsWith('/avatar/edit')
+})
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+#app {
+  width: 100%;
+  min-height: 100vh;
+  background: #F8F9FA;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* 底部导航栏 */
+.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>