From 2f287ef538bca33b6a7aa8d259d35e9c34891ead Mon Sep 17 00:00:00 2001
From: stefanfeng <stefan@autopas.cn>
Date: Tue, 15 Sep 2026 14:27:22 +0800
Subject: [PATCH] feat: refine embedded avatar authorization controls

---
 digital-avatar-app/src/App.vue                |  119 +-
 .../src/views/AuthorizationManage.vue         | 1027 +++--------------
 2 files changed, 292 insertions(+), 854 deletions(-)

diff --git a/digital-avatar-app/src/App.vue b/digital-avatar-app/src/App.vue
index c7c6915..74f541c 100644
--- a/digital-avatar-app/src/App.vue
+++ b/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>
diff --git a/digital-avatar-app/src/views/AuthorizationManage.vue b/digital-avatar-app/src/views/AuthorizationManage.vue
index f88fdd9..dec026d 100644
--- a/digital-avatar-app/src/views/AuthorizationManage.vue
+++ b/digital-avatar-app/src/views/AuthorizationManage.vue
@@ -1,896 +1,219 @@
 <template>
-  <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" />
-        </svg>
-      </button>
-      <h1>分身授权管理</h1>
-      <span class="header-balance" aria-hidden="true"></span>
+  <div class="auth-manage-page">
+    <header class="page-header">
+      <button class="back-btn" @click="goBack">‹</button>
+      <h1 class="page-title">授权管理</h1>
+      <span class="header-spacer"></span>
     </header>
 
-    <main class="page-content">
-      <template v-if="activeAvatarId">
-        <section class="permission-intro" aria-label="授权说明">
-          <span class="intro-icon" aria-hidden="true">
-            <svg viewBox="0 0 24 24">
-              <rect x="5" y="10" width="14" height="11" rx="2" />
-              <path d="M8 10V7a4 4 0 0 1 8 0v3" />
-            </svg>
+    <section class="intro-card">
+      <div class="intro-icon">🛡️</div>
+      <div>
+        <h2>由你决定分身能做什么</h2>
+        <p>授权后，数字分身会以你的会会身份参与广场互动；撤销后不再创建新的互动。</p>
+      </div>
+    </section>
+
+    <section class="auth-list">
+      <div class="auth-card square-card">
+        <div class="auth-icon application">📰</div>
+        <div class="auth-info">
+          <h3 class="auth-name">会会广场互动</h3>
+          <p class="auth-type">按照广场调度器设置自动执行</p>
+          <div class="auth-permissions">
+            <span class="permission-tag" v-for="permission in squareAuthorization.permissions" :key="permission">
+              {{ getPermissionText(permission) }}
+            </span>
+          </div>
+          <p class="scheduler-note">功能已开发，当前仍在验证中；执行时段、互动间隔及各操作触发概率由运营后台统一控制。</p>
+        </div>
+        <div class="auth-actions">
+          <span class="auth-status" :class="squareAuthorization.status">
+            {{ squareAuthorization.status === 'active' ? '已授权' : '未授权' }}
           </span>
-          <p>设置数字分身可以执行的操作权限。开启后，分身将代表你自动进行相应操作。</p>
-        </section>
-
-        <section class="permissions-card" :class="{ loading }" :aria-busy="loading">
           <button
-            v-for="item in permissionItems"
-            :key="item.key"
-            class="permission-row"
-            :class="{ takeover: item.key === 'takeover' }"
-            type="button"
-            role="switch"
-            :aria-checked="permissionState[item.key]"
-            :aria-label="`${permissionState[item.key] ? '关闭' : '开启'}${item.title}`"
-            :disabled="loading || saving"
-            @click="togglePermission(item.key)"
+            class="auth-toggle-btn"
+            :class="{ revoke: squareAuthorization.status === 'active' }"
+            :disabled="saving"
+            @click="toggleSquareAuthorization"
           >
-            <span class="permission-icon" :class="item.tone" aria-hidden="true">
-              <svg v-if="item.key === 'friend'" viewBox="0 0 24 24">
-                <path d="M9.5 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" />
-                <path d="M3.5 20a6 6 0 0 1 12 0M17 8v6m-3-3h6" />
-              </svg>
-              <svg v-else-if="item.key === 'chat'" viewBox="0 0 24 24">
-                <path d="M20 14a4 4 0 0 1-4 4H8l-5 3 1.5-5A7 7 0 0 1 3 12V8a4 4 0 0 1 4-4h9a4 4 0 0 1 4 4v6Z" />
-              </svg>
-              <svg v-else-if="item.key === 'publish'" viewBox="0 0 24 24">
-                <path d="M14.7 5.3 18.7 9.3M4 20l4.1-.8L19.5 7.8a2.8 2.8 0 0 0-4-4L4.8 14.5 4 20Z" />
-              </svg>
-              <svg v-else-if="item.key === 'browse'" viewBox="0 0 24 24">
-                <rect x="4" y="4" width="6" height="6" rx="1" />
-                <rect x="14" y="4" width="6" height="6" rx="1" />
-                <rect x="4" y="14" width="6" height="6" rx="1" />
-                <rect x="14" y="14" width="6" height="6" rx="1" />
-              </svg>
-              <svg v-else-if="item.key === 'interact'" viewBox="0 0 24 24">
-                <path d="M7 10v10H4a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2h3Zm0 10h9.5a2 2 0 0 0 1.9-1.4l2.3-7A2 2 0 0 0 18.8 9H14l.8-3.2A2.3 2.3 0 0 0 12.6 3L7 10v10Z" />
-              </svg>
-              <svg v-else viewBox="0 0 24 24">
-                <path d="M20 13.5a4.5 4.5 0 0 1-4.5 4.5H9l-5 3 1.4-4.5A6.5 6.5 0 0 1 3 11.4V8.5A4.5 4.5 0 0 1 7.5 4H14" />
-                <path d="M18 3v5m-2.5-2.5h5" />
-              </svg>
-            </span>
-
-            <span class="permission-copy">
-              <strong>{{ item.title }}</strong>
-              <small>
-                {{ item.key === 'takeover' ? takeoverDescription : item.description }}
-                <span
-                  v-if="item.key === 'takeover' && takeoverConnectionLabel"
-                  class="connection-state"
-                  :class="takeoverConnectionTone"
-                > · {{ takeoverConnectionLabel }}</span>
-              </small>
-            </span>
-
-            <span class="permission-switch" :class="{ active: permissionState[item.key] }" aria-hidden="true">
-              <span></span>
-            </span>
+            {{ saving ? '处理中' : squareAuthorization.status === 'active' ? '撤销' : '授权' }}
           </button>
-        </section>
+        </div>
+      </div>
 
-        <section v-if="permissionState.takeover" class="takeover-delay-card" aria-label="自动回复等待时间">
-          <div class="delay-heading">
-            <div>
-              <strong>自动回复等待时间</strong>
-              <small>等待期间主人发言会取消本次回复，最短 3 秒</small>
-            </div>
-            <span>{{ formattedTakeoverDelay }}</span>
+      <div v-for="feature in unavailableFeatures" :key="feature.id" class="auth-card unavailable-card">
+        <div class="auth-icon application">{{ feature.icon }}</div>
+        <div class="auth-info">
+          <h3 class="auth-name">{{ feature.name }}</h3>
+          <p class="auth-type">{{ feature.description }}</p>
+        </div>
+        <div class="auth-actions">
+          <span class="auth-status inactive">未开启</span>
+          <button class="auth-toggle-btn unavailable-toggle" @click="showUnavailableNotice">开启</button>
+        </div>
+      </div>
+
+      <div class="auth-card" v-for="auth in otherAuthorizations" :key="auth.id">
+        <div class="auth-icon" :class="auth.targetType">{{ getAuthIcon(auth.targetType) }}</div>
+        <div class="auth-info">
+          <h3 class="auth-name">{{ getAuthTargetName(auth.targetName) }}</h3>
+          <p class="auth-type">{{ getAuthTypeText(auth.targetType) }}</p>
+          <div class="auth-permissions">
+            <span class="permission-tag" v-for="permission in auth.permissions" :key="permission">
+              {{ getPermissionText(permission) }}
+            </span>
           </div>
-          <div class="delay-control">
-            <input
-              v-model.number="takeoverDelayValue"
-              type="number"
-              inputmode="numeric"
-              step="1"
-              :min="takeoverDelayUnit === 'minutes' ? 1 : 3"
-              :max="takeoverDelayUnit === 'minutes' ? 1440 : 86400"
-              aria-label="等待时间"
-              :disabled="loading || saving"
-              @blur="normalizeTakeoverDelay"
-            />
-            <select v-model="takeoverDelayUnit" aria-label="等待时间单位" :disabled="loading || saving">
-              <option value="seconds">秒</option>
-              <option value="minutes">分钟</option>
-            </select>
-          </div>
-        </section>
-
-        <p v-if="errorMessage" class="error-message" role="alert">{{ errorMessage }}</p>
-      </template>
-
-      <section v-else-if="!loading" class="empty-state">
-        <span class="empty-icon" aria-hidden="true">
-          <svg viewBox="0 0 24 24">
-            <path d="M8 11a4 4 0 1 1 8 0v1M5 20a7 7 0 0 1 14 0M19 8v4m-2-2h4" />
-          </svg>
-        </span>
-        <h2>还没有数字分身</h2>
-        <p>创建分身后即可设置操作权限。</p>
-        <button type="button" @click="goCreate">创建数字分身</button>
-      </section>
-    </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 ? '保存中...' : '保存授权设置' }}
-      </button>
-    </footer>
-
-    <Transition name="toast">
-      <p v-if="toastMessage" class="page-toast" role="status">{{ toastMessage }}</p>
-    </Transition>
+        </div>
+        <div class="auth-actions">
+          <span class="auth-status" :class="auth.status">{{ auth.status === 'active' ? '已授权' : '已撤销' }}</span>
+          <button class="auth-toggle-btn" :disabled="saving" @click="toggleExistingAuthorization(auth)">
+            {{ auth.status === 'active' ? '撤销' : '授权' }}
+          </button>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import {
-  getAvatarPermissionSettings,
-  getTakeoverStatus,
-  updateAvatarPermissionSettings,
-  type AvatarPermission,
-  type TakeoverStatus,
-} from '@/api'
+import { computed, ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { useAvatarStore } from '@/store/avatar'
-import { pickScopedAvatarId } from '@/utils/avatar-page-data.js'
-import { isHuihuiEmbeddedMode } from '@/utils/embed-mode'
-
-type PermissionState = Record<AvatarPermission, boolean>
+import {
+  getAuthorizationList,
+  updateAuthorization,
+  SQUARE_INTERACTION_TARGET_ID,
+  SQUARE_INTERACTION_PERMISSIONS,
+  type Authorization
+} from '@/api'
+import { pickAvatarId, unwrapListData } from '@/utils/avatar-page-data.js'
 
 const router = useRouter()
-const route = useRoute()
 const avatarStore = useAvatarStore()
-const avatarId = computed(() => pickScopedAvatarId(route.params.avatarId, avatarStore.currentAvatarId, avatarStore.avatars))
-const isEmbedded = isHuihuiEmbeddedMode()
+const authList = ref<Authorization[]>([])
+const saving = ref(false)
+const UNAVAILABLE_MESSAGE = '该功能尚未向公众用户开放，如需使用请联系会会运营团队'
 
-const permissionItems: Array<{
-  key: AvatarPermission
-  title: string
-  description: string
-  tone: string
-}> = [
-  {
-    key: 'friend',
-    title: '交友与添加好友',
-    description: '允许分身主动添加好友或接受好友请求',
-    tone: 'orange',
-  },
-  {
-    key: 'chat',
-    title: '主动发起聊天',
-    description: '允许分身主动与陌生人或好友发起聊天',
-    tone: 'blue',
-  },
-  {
-    key: 'publish',
-    title: '发布微博内容',
-    description: '允许分身自动发布动态内容',
-    tone: 'green',
-  },
-  {
-    key: 'browse',
-    title: '浏览会会广场',
-    description: '允许分身浏览广场内容',
-    tone: 'violet',
-  },
-  {
-    key: 'interact',
-    title: '广场互动操作',
-    description: '允许分身代表你点赞、收藏、评论和回复；时段、间隔与触发概率由广场调度设置统一控制',
-    tone: 'pink',
-  },
-  {
-    key: 'takeover',
-    title: '分身主动接管聊天回复',
-    description: '收到私聊消息后按设定时间回复，主人发言时暂停',
-    tone: 'cyan',
-  },
+const unavailableFeatures = [
+  { id: 'make-friends', name: '交友与添加好友', description: '暂未开放', icon: '👥' },
+  { id: 'start-chat', name: '主动发起聊天', description: '暂未开放', icon: '💬' },
+  { id: 'publish-microblog', name: '发布微播内容', description: '暂未开放', icon: '📝' },
+  { id: 'browse-square', name: '浏览会会广场', description: '暂未开放', icon: '🔎' }
 ]
 
-const permissionState = reactive<PermissionState>({
-  friend: true,
-  chat: true,
-  publish: false,
-  browse: false,
-  interact: false,
-  takeover: false,
-})
-const activeAvatarId = ref('')
-const loading = ref(true)
-const saving = ref(false)
-const errorMessage = ref('')
-const toastMessage = ref('')
-const takeoverStatus = ref<TakeoverStatus | null>(null)
-const takeoverDelayValue = ref(3)
-const takeoverDelayUnit = ref<'seconds' | 'minutes'>('minutes')
-let toastTimer: number | undefined
-let takeoverStatusTimer: number | undefined
-
-const takeoverConnectionLabel = computed(() => {
-  if (takeoverStatus.value?.status === 'error' || takeoverStatus.value?.status === 'needs_login') {
-    return '连接失败'
+const squareAuthorization = computed<Authorization>(() => {
+  return authList.value.find((item) => item.targetId === SQUARE_INTERACTION_TARGET_ID) || {
+    id: '',
+    avatarId: avatarStore.currentAvatarId || '',
+    targetType: 'application',
+    targetId: SQUARE_INTERACTION_TARGET_ID,
+    targetName: '会会广场互动',
+    permissions: [...SQUARE_INTERACTION_PERMISSIONS],
+    status: 'inactive',
+    createdAt: ''
   }
-  if (takeoverStatus.value?.status === 'ready') return '已连接'
-  if (permissionState.takeover) return '正在连接'
-  return ''
 })
 
-const takeoverConnectionTone = computed(() => {
-  if (takeoverStatus.value?.status === 'ready') return 'ready'
-  if (takeoverStatus.value?.status === 'error' || takeoverStatus.value?.status === 'needs_login') {
-    return 'failed'
-  }
-  return 'connecting'
-})
-
-const takeoverDelaySeconds = computed(() => {
-  const value = Math.trunc(Number(takeoverDelayValue.value) || 0)
-  return takeoverDelayUnit.value === 'minutes' ? value * 60 : value
-})
-
-const formattedTakeoverDelay = computed(() => {
-  const seconds = takeoverDelaySeconds.value
-  if (seconds > 0 && seconds % 60 === 0) return `${seconds / 60} 分钟`
-  return `${seconds} 秒`
-})
-
-const takeoverDescription = computed(() =>
-  `收到私聊消息 ${formattedTakeoverDelay.value}后回复，主人发言时暂停`
+const otherAuthorizations = computed(() =>
+  authList.value.filter((item) => item.targetId !== SQUARE_INTERACTION_TARGET_ID && !isUnavailableFeature(item.targetName))
 )
 
-const applyTakeoverDelay = (seconds: number) => {
-  const normalized = Number.isFinite(seconds) && seconds >= 3 ? Math.trunc(seconds) : 180
-  if (normalized % 60 === 0) {
-    takeoverDelayUnit.value = 'minutes'
-    takeoverDelayValue.value = normalized / 60
-  } else {
-    takeoverDelayUnit.value = 'seconds'
-    takeoverDelayValue.value = normalized
-  }
+const isUnavailableFeature = (name: string) => unavailableFeatures.some((feature) =>
+  name.replaceAll('发布微博内容', '发布微播内容') === feature.name
+)
+
+const currentAvatarId = async () => {
+  if (!avatarStore.avatars.length) await avatarStore.loadAvatars()
+  return pickAvatarId(avatarStore.currentAvatarId, avatarStore.avatars)
 }
 
-const normalizeTakeoverDelay = () => {
-  const min = takeoverDelayUnit.value === 'minutes' ? 1 : 3
-  const max = takeoverDelayUnit.value === 'minutes' ? 1440 : 86400
-  takeoverDelayValue.value = Math.min(max, Math.max(min, Math.trunc(Number(takeoverDelayValue.value) || min)))
-}
-
-const setPermissions = (permissions: AvatarPermission[]) => {
-  const enabled = new Set(permissions)
-  for (const item of permissionItems) permissionState[item.key] = enabled.has(item.key)
-}
-
-const selectedPermissions = () => permissionItems
-  .filter((item) => permissionState[item.key])
-  .map((item) => item.key)
-
-const readableError = (error: any, fallback: string) =>
-  error?.response?.data?.detail || error?.response?.data?.message || error?.message || fallback
-
-const showToast = (message: string) => {
-  toastMessage.value = message
-  if (toastTimer) window.clearTimeout(toastTimer)
-  toastTimer = window.setTimeout(() => { toastMessage.value = '' }, 2400)
-}
-
-const togglePermission = async (permission: AvatarPermission) => {
-  errorMessage.value = ''
-  const previousValue = permissionState[permission]
-  permissionState[permission] = !permissionState[permission]
-  if (permission === 'takeover') {
-    takeoverStatus.value = null
-    if (takeoverStatusTimer) {
-      window.clearTimeout(takeoverStatusTimer)
-      takeoverStatusTimer = undefined
-    }
-    const saved = await saveSettings(true)
-    if (!saved) permissionState.takeover = previousValue
-  }
-}
-
-const scheduleTakeoverStatusRefresh = () => {
-  if (takeoverStatusTimer) window.clearTimeout(takeoverStatusTimer)
-  if (!permissionState.takeover || !activeAvatarId.value) {
-    takeoverStatusTimer = undefined
-    return
-  }
-  takeoverStatusTimer = window.setTimeout(async () => {
-    await loadTakeoverStatus()
-    scheduleTakeoverStatusRefresh()
-  }, 3000)
-}
-
-const loadSettings = async () => {
-  if (!activeAvatarId.value) {
-    loading.value = false
-    return
-  }
-  loading.value = true
-  errorMessage.value = ''
+const loadAuth = async () => {
   try {
-    const settings = await getAvatarPermissionSettings(activeAvatarId.value)
-    setPermissions(settings.permissions || [])
-    applyTakeoverDelay(settings.takeoverReplyDelaySeconds || 180)
-    await loadTakeoverStatus()
-    scheduleTakeoverStatusRefresh()
-  } catch (error: any) {
-    errorMessage.value = readableError(error, '授权设置加载失败，请稍后重试')
-  } finally {
-    loading.value = false
+    const avatarId = await currentAvatarId()
+    authList.value = avatarId ? unwrapListData(await getAuthorizationList(avatarId)) : []
+  } catch (error) {
+    console.error('加载授权失败', error)
   }
 }
 
-const loadTakeoverStatus = async () => {
-  if (!activeAvatarId.value) return
-  try {
-    takeoverStatus.value = await getTakeoverStatus(activeAvatarId.value)
-    if (!takeoverStatus.value.enabled && permissionState.takeover) {
-      permissionState.takeover = false
-    }
-  } catch {
-    takeoverStatus.value = null
-  }
-}
-
-const saveSettings = async (takeoverToggle = false): Promise<boolean> => {
-  if (!activeAvatarId.value || loading.value || saving.value) return false
+const toggleSquareAuthorization = async () => {
+  const avatarId = await currentAvatarId()
+  if (!avatarId || saving.value) return
   saving.value = true
-  errorMessage.value = ''
   try {
-    normalizeTakeoverDelay()
-    if (takeoverDelaySeconds.value < 3 || takeoverDelaySeconds.value > 86400) {
-      errorMessage.value = '自动回复等待时间需在 3 秒到 24 小时之间'
-      return false
-    }
-    const settings = await updateAvatarPermissionSettings(
-      activeAvatarId.value,
-      selectedPermissions(),
-      takeoverDelaySeconds.value,
-    )
-    setPermissions(settings.permissions || [])
-    applyTakeoverDelay(settings.takeoverReplyDelaySeconds || 180)
-    await loadTakeoverStatus()
-    scheduleTakeoverStatusRefresh()
-    if (takeoverToggle) {
-      showToast(permissionState.takeover ? '接管已开启，正在连接' : '接管已关闭')
-    } else {
-      showToast('授权设置已保存')
-    }
-    return true
-  } catch (error: any) {
-    errorMessage.value = readableError(error, '授权设置保存失败，请重试')
-    return false
+    authList.value = unwrapListData(await updateAuthorization(avatarId, {
+      id: squareAuthorization.value.id || undefined,
+      targetId: SQUARE_INTERACTION_TARGET_ID,
+      targetName: '会会广场互动',
+      targetType: 'application',
+      permissions: [...SQUARE_INTERACTION_PERMISSIONS],
+      status: squareAuthorization.value.status === 'active' ? 'inactive' : 'active'
+    }))
+  } catch (error) {
+    alert('操作失败，请重试')
   } finally {
     saving.value = false
   }
 }
 
-const goBack = () => router.push('/avatar/manage')
-const goCreate = () => router.push('/avatar/create')
+const toggleExistingAuthorization = async (auth: Authorization) => {
+  const avatarId = await currentAvatarId()
+  if (!avatarId || saving.value) return
+  saving.value = true
+  try {
+    authList.value = unwrapListData(await updateAuthorization(avatarId, {
+      id: auth.id,
+      status: auth.status === 'active' ? 'inactive' : 'active'
+    }))
+  } catch (error) {
+    alert('操作失败，请重试')
+  } finally {
+    saving.value = false
+  }
+}
 
-onMounted(async () => {
-  if (!avatarStore.avatars.length) await avatarStore.loadAvatars()
-  activeAvatarId.value = avatarId.value || ''
-  if (activeAvatarId.value) avatarStore.currentAvatarId = activeAvatarId.value
-  await loadSettings()
-})
+const showUnavailableNotice = () => alert(UNAVAILABLE_MESSAGE)
 
-onBeforeUnmount(() => {
-  if (toastTimer) window.clearTimeout(toastTimer)
-  if (takeoverStatusTimer) window.clearTimeout(takeoverStatusTimer)
-})
+const getAuthIcon = (type: string) => ({ user: '👤', organization: '🏢', application: '📱' }[type] || '🔑')
+const getAuthTypeText = (type: string) => ({ user: '用户', organization: '组织', application: '应用' }[type] || type)
+const getAuthTargetName = (name: string) => name.replaceAll('发布微博内容', '发布微播内容')
+const getPermissionText = (permission: string) => ({
+  read: '读取', write: '写入', reply: '回复', edit: '编辑',
+  like: '点赞', collect: '收藏', comment: '评论'
+}[permission] || permission)
+const goBack = () => router.back()
+
+onMounted(loadAuth)
 </script>
 
 <style scoped>
-.authorization-page {
-  --orange: #f58632;
-  --orange-deep: #f2792f;
-  --ink: #18191c;
-  --muted: #a0a5b4;
-  position: relative;
-  width: min(100%, 390px);
-  min-height: 100dvh;
-  margin: 0 auto;
-  padding-bottom: calc(92px + env(safe-area-inset-bottom));
-  overflow-x: hidden;
-  color: var(--ink);
-  background: #fafafa;
-  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
-}
-
-button {
-  font: inherit;
-  -webkit-tap-highlight-color: transparent;
-}
-
-button:disabled {
-  cursor: not-allowed;
-}
-
-svg {
-  width: 1em;
-  height: 1em;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.7;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.page-header {
-  height: calc(72px + env(safe-area-inset-top));
-  padding: env(safe-area-inset-top) 20px 0;
-  display: grid;
-  grid-template-columns: 34px 1fr 34px;
-  align-items: center;
-}
-
-.page-header h1 {
-  margin: 0;
-  text-align: center;
-  font-size: 17px;
-  font-weight: 700;
-  line-height: 1.4;
-  letter-spacing: .01em;
-}
-
-.back-button {
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  display: grid;
-  place-items: center;
-  border: 0;
-  border-radius: 50%;
-  color: #7f8490;
-  background: #f3f4f6;
-  cursor: pointer;
-}
-
-.back-button svg {
-  font-size: 19px;
-}
-
-.page-content {
-  padding: 0 20px;
-}
-
-.authorization-page.embedded .page-content {
-  padding-top: 16px;
-}
-
-.permission-intro {
-  min-height: 96px;
-  padding: 15px 16px 14px;
-  border: 1px solid rgba(255, 227, 195, .45);
-  border-radius: 13px;
-  background: linear-gradient(115deg, #fff8eb 0%, #fff4ec 100%);
-}
-
-.intro-icon {
-  width: 26px;
-  height: 26px;
-  display: grid;
-  place-items: center;
-  color: #f18837;
-}
-
-.intro-icon svg {
-  font-size: 24px;
-  stroke-width: 1.9;
-}
-
-.permission-intro p {
-  margin: 7px 0 0;
-  color: #a66d45;
-  font-size: 12px;
-  line-height: 1.75;
-}
-
-.permissions-card {
-  margin-top: 16px;
-  padding: 5px 0;
-  overflow: hidden;
-  border-radius: 15px;
-  background: #fff;
-  box-shadow: 0 8px 26px rgba(69, 55, 43, .025);
-  transition: opacity .2s ease;
-}
-
-.permissions-card.loading {
-  opacity: .62;
-}
-
-.permission-row {
-  width: 100%;
-  min-height: 65px;
-  padding: 8px 15px;
-  display: grid;
-  grid-template-columns: 34px minmax(0, 1fr) 43px;
-  align-items: center;
-  gap: 11px;
-  border: 0;
-  color: inherit;
-  text-align: left;
-  background: transparent;
-  cursor: pointer;
-}
-
-.permission-row:active:not(:disabled) {
-  background: #fcfcfd;
-}
-
-.permission-row.takeover {
-  min-height: 76px;
-}
-
-.takeover-delay-card {
-  margin-top: 12px;
-  padding: 16px;
-  border: 1px solid #dff1ef;
-  border-radius: 15px;
-  background: linear-gradient(135deg, #f5fcfb 0%, #fff 100%);
-  box-shadow: 0 8px 24px rgba(53, 166, 162, .06);
-}
-
-.delay-heading {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.delay-heading strong,
-.delay-heading small {
-  display: block;
-}
-
-.delay-heading strong {
-  font-size: 14px;
-  line-height: 1.4;
-}
-
-.delay-heading small {
-  margin-top: 5px;
-  color: #8c929f;
-  font-size: 11px;
-  line-height: 1.55;
-}
-
-.delay-heading > span {
-  flex: none;
-  padding: 4px 8px;
-  border-radius: 999px;
-  color: #258e8a;
-  background: #e8f8f6;
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.delay-control {
-  margin-top: 14px;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 88px;
-  gap: 10px;
-}
-
-.delay-control input,
-.delay-control select {
-  min-width: 0;
-  height: 42px;
-  padding: 0 12px;
-  border: 1px solid #dfe5e8;
-  border-radius: 11px;
-  outline: none;
-  color: #222528;
-  background: #fff;
-  font: inherit;
-}
-
-.delay-control input:focus,
-.delay-control select:focus {
-  border-color: #35a6a2;
-  box-shadow: 0 0 0 3px rgba(53, 166, 162, .1);
-}
-
-.permission-icon {
-  width: 34px;
-  height: 34px;
-  display: grid;
-  place-items: center;
-  border-radius: 10px;
-}
-
-.permission-icon svg {
-  font-size: 18px;
-}
-
-.permission-icon.orange {
-  color: #ec9a45;
-  background: #fff9ee;
-}
-
-.permission-icon.blue {
-  color: #619ae7;
-  background: #f3f8ff;
-}
-
-.permission-icon.green {
-  color: #64c792;
-  background: #f0fbf5;
-}
-
-.permission-icon.violet {
-  color: #8b7de4;
-  background: #f6f4ff;
-}
-
-.permission-icon.pink {
-  color: #ec78a3;
-  background: #fff3f7;
-}
-
-.permission-icon.cyan {
-  color: #35a6a2;
-  background: #effaf9;
-}
-
-.permission-copy {
-  min-width: 0;
-}
-
-.permission-copy strong,
-.permission-copy small {
-  display: block;
-}
-
-.connection-state {
-  font-weight: 600;
-}
-
-.connection-state.connecting {
-  color: #d78532;
-}
-
-.connection-state.ready {
-  color: #31966b;
-}
-
-.connection-state.failed {
-  color: #d95849;
-}
-
-.permission-copy strong {
-  color: #26272b;
-  font-size: 14px;
-  font-weight: 650;
-  line-height: 1.45;
-}
-
-.permission-copy small {
-  margin-top: 3px;
-  overflow: hidden;
-  color: var(--muted);
-  font-size: 10.5px;
-  font-weight: 400;
-  line-height: 1.45;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.permission-row.takeover .permission-copy small {
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: normal;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-.permission-switch {
-  position: relative;
-  width: 43px;
-  height: 25px;
-  justify-self: end;
-  border-radius: 999px;
-  background: #d8dde5;
-  box-shadow: inset 0 0 0 1px rgba(140, 148, 160, .08);
-  transition: background .2s ease;
-}
-
-.permission-switch span {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 21px;
-  height: 21px;
-  border-radius: 50%;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(74, 72, 69, .2);
-  transition: transform .2s cubic-bezier(.22, .85, .35, 1);
-}
-
-.permission-switch.active {
-  background: linear-gradient(120deg, #f59d3c, #f47d31);
-}
-
-.permission-switch.active span {
-  transform: translateX(18px);
-}
-
-.error-message {
-  margin: 13px 4px 0;
-  color: #d95849;
-  font-size: 12px;
-  line-height: 1.6;
-  text-align: center;
-}
-
-.save-area {
-  position: fixed;
-  z-index: 20;
-  left: 50%;
-  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 {
-  min-width: 0;
-  flex: 1;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  border: 0;
-  border-radius: 24px;
-  color: #fff;
-  background: linear-gradient(105deg, #f7a33d 0%, #f47b2f 100%);
-  box-shadow: 0 8px 20px rgba(240, 119, 43, .16);
-  font-size: 14px;
-  font-weight: 500;
-  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;
-}
-
-.saving-spinner {
-  width: 15px;
-  height: 15px;
-  border: 2px solid rgba(255, 255, 255, .48);
-  border-top-color: #fff;
-  border-radius: 50%;
-  animation: spin .8s linear infinite;
-}
-
-.empty-state {
-  min-height: 470px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-
-.empty-icon {
-  width: 58px;
-  height: 58px;
-  display: grid;
-  place-items: center;
-  border-radius: 18px;
-  color: #ed8739;
-  background: #fff4e9;
-}
-
-.empty-icon svg {
-  font-size: 28px;
-}
-
-.empty-state h2 {
-  margin: 18px 0 0;
-  font-size: 17px;
-}
-
-.empty-state p {
-  margin: 7px 0 20px;
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.empty-state button {
-  padding: 11px 24px;
-  border: 0;
-  border-radius: 22px;
-  color: #fff;
-  background: linear-gradient(105deg, #f7a33d, #f47b2f);
-}
-
-.page-toast {
-  position: fixed;
-  z-index: 50;
-  left: 50%;
-  bottom: calc(88px + env(safe-area-inset-bottom));
-  max-width: min(310px, calc(100vw - 40px));
-  margin: 0;
-  padding: 10px 18px;
-  border-radius: 22px;
-  color: #fff;
-  background: rgba(36, 36, 39, .9);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
-  font-size: 12px;
-  text-align: center;
-  transform: translateX(-50%);
-}
-
-.toast-enter-active,
-.toast-leave-active {
-  transition: opacity .2s ease, transform .2s ease;
-}
-
-.toast-enter-from,
-.toast-leave-to {
-  opacity: 0;
-  transform: translate(-50%, 8px);
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-@media (min-width: 600px) {
-  .authorization-page {
-    border-radius: 0 0 34px 34px;
-    box-shadow: 0 18px 55px rgba(32, 30, 28, .1);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .permission-switch,
-  .permission-switch span,
-  .toast-enter-active,
-  .toast-leave-active {
-    transition: none;
-  }
-
-  .saving-spinner {
-    animation: none;
-  }
-}
+.auth-manage-page { min-height: 100vh; background: #f8f9fa; padding-bottom: 80px; }
+.page-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: white; border-bottom: 1px solid #edeef1; }
+.back-btn { background: none; border: none; font-size: 24px; cursor: pointer; padding: 4px 8px; color: #18191c; }
+.page-title { font-size: 17px; font-weight: 600; margin: 0; color: #18191c; }
+.header-spacer { width: 40px; }
+.intro-card { display: flex; gap: 12px; margin: 20px 16px 0; padding: 16px; color: #7c2d12; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 14px; }
+.intro-icon { font-size: 24px; }
+.intro-card h2 { margin: 0 0 6px; font-size: 15px; }
+.intro-card p { margin: 0; font-size: 12px; line-height: 1.6; color: #9a3412; }
+.auth-list { padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 12px; }
+.auth-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); }
+.square-card { border: 1px solid #ffedd5; }
+.unavailable-card { opacity: .78; }
+.auth-icon { font-size: 24px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #fff0e6; flex-shrink: 0; }
+.auth-info { flex: 1; min-width: 0; }
+.auth-name { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: #18191c; }
+.auth-type { font-size: 12px; color: #9398ae; margin: 0 0 8px; }
+.auth-permissions { display: flex; gap: 6px; flex-wrap: wrap; }
+.permission-tag { padding: 4px 8px; background: #f3f4f6; border-radius: 6px; font-size: 11px; color: #6b7280; }
+.scheduler-note { margin: 10px 0 0; color: #9398ae; font-size: 11px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
+.auth-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
+.auth-status { font-size: 12px; font-weight: 500; }
+.auth-status.active { color: #22c55e; }
+.auth-status.inactive { color: #9398ae; }
+.auth-toggle-btn { padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; border: none; background: #f97316; color: white; }
+.auth-toggle-btn.revoke { color: #6b7280; background: #f3f4f6; }
+.unavailable-toggle { background: #d1d5db; color: #4b5563; }
+.auth-toggle-btn:disabled { cursor: not-allowed; opacity: .6; }
 </style>