feat: complete huihui square avatar workflows

2026-07-24 14:04:21 +08:00
parent 2ef58a44b8
commit e3bda469bb
68 changed files with 8062 additions and 132 deletions
--- a/digital-avatar-app/src/views/AvatarCard.vue
+++ b/digital-avatar-app/src/views/AvatarCard.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="avatar-card-page">
+    <!-- 顶部导航 -->
+    <header class="page-header">
+      <div class="header-left">
+        <button class="back-btn" @click="goBack">‹</button>
+        <h1 class="page-title">分身名片</h1>
+      </div>
+      <button class="share-btn" @click="shareCard">分享</button>
+    </header>
+
+    <!-- 名片预览 -->
+    <section class="card-preview">
+      <div class="digital-card">
+        <div class="card-top">
+          <div class="card-avatar">{{ avatar.emoji }}</div>
+          <span class="card-status" :class="avatar.status">● {{ statusText(avatar.status) }}</span>
+        </div>
+        <h2 class="card-name">{{ avatar.displayName }}</h2>
+        <p class="card-desc">{{ avatar.description }}</p>
+        <div class="card-tags">
+          <span class="card-tag" v-for="t in avatar.tags" :key="t">{{ t }}</span>
+        </div>
+        <div class="card-qr">
+          <div class="qr-placeholder" aria-hidden="true">▦</div>
+          <span class="qr-tip">扫码添加我的分身</span>
+        </div>
+        <div class="card-id">会会号：{{ avatar.huihuiId }}</div>
+      </div>
+    </section>
+
+    <!-- 名片信息 -->
+    <section class="info-section">
+      <h3 class="section-title">名片信息</h3>
+      <div class="info-list">
+        <div class="info-row"><span class="info-label">分身名称</span><span class="info-value">{{ avatar.displayName }}</span></div>
+        <div class="info-row"><span class="info-label">会会号</span><span class="info-value">{{ avatar.huihuiId }}</span></div>
+        <div class="info-row"><span class="info-label">状态</span><span class="info-value">{{ statusText(avatar.status) }}</span></div>
+        <div class="info-row"><span class="info-label">创建时间</span><span class="info-value">{{ formatDate(avatar.createdAt) }}</span></div>
+      </div>
+    </section>
+
+    <!-- 操作 -->
+    <section class="action-section">
+      <button class="primary-btn" @click="copyLink">复制分享链接</button>
+      <p class="toast" v-if="toast">{{ toast }}</p>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAvatarStore } from '@/store/avatar'
+import { getAvatarDetail } from '@/api'
+import { pickAvatarId } from '@/utils/avatar-page-data'
+
+const router = useRouter()
+const route = useRoute()
+const avatarStore = useAvatarStore()
+const toast = ref('')
+const loading = ref(true)
+const selectedAvatarId = ref('')
+
+const avatar = ref({
+  emoji: '🤖',
+  displayName: '会会助手',
+  description: '我是您的AI数字分身，可以帮您管理日程、回复消息、处理任务。',
+  huihuiId: 'huihui_8848',
+  status: 'active',
+  createdAt: '2026-07-01T10:00:00Z',
+  tags: ['智能对话', '日程管理', '社交助手']
+})
+
+const applyAvatar = (a: any) => {
+  if (!a) return
+  avatar.value = {
+    emoji: a.emoji || '🤖',
+    displayName: a.displayName || a.name || '我的分身',
+    description: a.description || '暂无描述',
+    huihuiId: a.huihuiId || 'huihui_' + (a.id || '0000'),
+    status: a.status || 'active',
+    createdAt: a.createdAt || new Date().toISOString(),
+    tags: a.tags || ['智能对话', '日程管理']
+  }
+}
+
+onMounted(async () => {
+  try {
+    if (!avatarStore.avatars.length) await avatarStore.loadAvatars()
+    const requestedId = String(route.query.id || '')
+    const id = pickAvatarId(requestedId, avatarStore.avatars)
+    selectedAvatarId.value = id || ''
+    const localAvatar = avatarStore.avatars.find((a) => String(a.id) === id)
+    if (localAvatar) {
+      applyAvatar(localAvatar)
+    } else if (requestedId) {
+      applyAvatar(await getAvatarDetail(requestedId))
+      selectedAvatarId.value = requestedId
+    } else {
+      applyAvatar(avatarStore.avatars[0])
+    }
+  } finally {
+    loading.value = false
+  }
+})
+
+const statusText = (s: string) => ({ active: '活跃中', inactive: '未激活', training: '训练中' }[s] || '活跃中')
+const formatDate = (t: string) => new Date(t).toLocaleDateString('zh-CN')
+
+const goBack = () => router.back()
+
+const shareCard = () => {
+  toast.value = '请复制链接分享给对方'
+  setTimeout(() => (toast.value = ''), 2000)
+}
+
+const copyLink = async () => {
+  const id = selectedAvatarId.value
+  const redirect = router.resolve({ path: '/avatar/card', query: id ? { id: String(id) } : undefined }).href
+  const loginUrl = router.resolve({ path: '/login/sms', query: { redirect } }).href
+  const hash = loginUrl.includes('#') ? loginUrl.slice(loginUrl.indexOf('#')) : `#${loginUrl}`
+  const link = `${window.location.origin}${window.location.pathname}${hash}`
+  try {
+    await navigator.clipboard.writeText(link)
+    toast.value = '分享链接已复制'
+  } catch {
+    toast.value = link
+  }
+  setTimeout(() => (toast.value = ''), 2000)
+}
+</script>
+
+<style scoped>
+.avatar-card-page { min-height: 100vh; background: #F8F9FA; padding-bottom: 40px; }
+
+.page-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 20px; background: linear-gradient(135deg, #F97316 0%, #FB923C 100%); color: white;
+}
+.header-left { display: flex; align-items: center; gap: 12px; }
+.back-btn { background: none; border: none; color: white; font-size: 24px; cursor: pointer; padding: 4px; }
+.page-title { font-size: 18px; font-weight: 600; margin: 0; }
+.share-btn { background: rgba(255,255,255,0.2); border: none; color: white; padding: 6px 16px; border-radius: 20px; font-size: 14px; cursor: pointer; }
+
+.card-preview { padding: 16px 20px; }
+.digital-card {
+  background: linear-gradient(160deg, #FFF7ED 0%, #FFFFFF 60%);
+  border: 1px solid #FFE4CC; border-radius: 20px; padding: 24px;
+  box-shadow: 0 8px 24px rgba(249,115,22,0.12);
+}
+.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
+.card-avatar {
+  width: 64px; height: 64px; border-radius: 18px; background: #FFF0E6;
+  display: flex; align-items: center; justify-content: center; font-size: 34px;
+}
+.card-status { font-size: 12px; color: #22C55E; background: #ECFDF5; padding: 4px 10px; border-radius: 20px; }
+.card-name { font-size: 22px; font-weight: 700; color: #18191C; margin: 0 0 8px; }
+.card-desc { font-size: 14px; color: #6B7280; line-height: 1.6; margin: 0 0 16px; }
+.card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
+.card-tag { padding: 4px 12px; background: #FFF0E6; color: #F97316; border-radius: 20px; font-size: 12px; font-weight: 500; }
+.card-qr {
+  display: flex; flex-direction: column; align-items: center; gap: 6px;
+  padding: 16px; background: white; border-radius: 14px; border: 1px dashed #FED7AA; margin-bottom: 14px;
+}
+.qr-placeholder { font-size: 56px; line-height: 1; color: #F97316; letter-spacing: 4px; }
+.qr-tip { font-size: 12px; color: #9398AE; }
+.card-id { text-align: center; font-size: 13px; color: #9398AE; }
+
+.info-section { padding: 0 20px 16px; }
+.section-title { font-size: 16px; font-weight: 600; margin: 0 0 12px; color: #18191C; }
+.info-list { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); overflow: hidden; }
+.info-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #F3F4F6; }
+.info-row:last-child { border-bottom: none; }
+.info-label { font-size: 14px; color: #6B7280; }
+.info-value { font-size: 14px; color: #18191C; font-weight: 500; }
+
+.action-section { padding: 0 20px; }
+.primary-btn {
+  width: 100%; padding: 14px; background: #F97316; color: white;
+  border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.2s;
+}
+.primary-btn:hover { opacity: 0.9; }
+.toast { text-align: center; font-size: 13px; color: #F97316; margin: 12px 0 0; word-break: break-all; }
+</style>