@agentunion/kite 1.5.0 → 1.6.0

package/extensions/services/evol/web/src/views/AccountView.vue

@@ -0,0 +1,1532 @@
+<template>
+  <div class="account-view">
+    <h2 class="page-title">{{ t('account.title') }}</h2>
+
+    <div v-if="userInfo" class="account-container">
+      <!-- 固定头部：个人信息 + 当前团队 -->
+      <div class="account-header">
+        <div class="user-section">
+          <div class="user-avatar">
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+              <circle cx="12" cy="7" r="4"/>
+            </svg>
+          </div>
+          <div class="user-info">
+            <div class="user-name-row">
+              <span class="user-name">{{ userInfo.userInfo?.nickName || t('na') }}</span>
+              <span class="vip-badge" :class="vipBadgeClass">{{ vipLabel }}</span>
+            </div>
+            <div class="user-phone">{{ userInfo.userInfo?.phone || t('na') }}</div>
+          </div>
+        </div>
+
+        <!-- 团队版：显示团队信息 + 切换按钮 -->
+        <div v-if="isInTeam" class="team-section">
+          <div class="team-info">
+            <div class="team-header">
+              <span class="team-label">{{ t('account.currentTeam') }}</span>
+              <button v-if="showSwitchButton" class="team-switch-btn" @click="toggleTeamMenu">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+                  <circle cx="9" cy="7" r="4"/>
+                  <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+                  <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+                </svg>
+                <span>{{ switchButtonText }}</span>
+                <svg v-if="(currentTeam?.teams?.length || 0) > 1" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="6 9 12 15 18 9"/>
+                </svg>
+              </button>
+            </div>
+            <div class="team-details">
+              <span class="team-name">{{ currentTeamDisplay }}</span>
+              <span class="team-meta-divider">·</span>
+              <span class="team-role">{{ teamRoleDisplay }}</span>
+              <span class="team-meta-divider">·</span>
+              <span class="team-members">{{ currentTeam.teams?.find(t => t.teamId === currentTeamId)?.memberCount || 0 }} 人</span>
+            </div>
+          </div>
+
+          <!-- 团队切换下拉菜单（多个团队时显示） -->
+          <div v-if="showTeamMenu && (currentTeam?.teams?.length || 0) > 1" class="team-menu" @click.stop>
+            <div
+              v-for="team in allTeams"
+              :key="team.teamId || 0"
+              class="team-menu-item"
+              :class="{ active: team.teamId === currentTeamId }"
+              @click="handleSwitchTeam(team.teamId)"
+            >
+              <div class="team-menu-info">
+                <div class="team-menu-name">
+                  <svg v-if="team.teamId === currentTeamId" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                    <polyline points="20 6 9 17 4 12"/>
+                  </svg>
+                  {{ team.teamName }}
+                </div>
+                <div v-if="team.teamId" class="team-menu-meta">
+                  {{ getRoleText(team.memberRole) }} · {{ team.memberCount }} 人
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 个人版：有团队时显示切换按钮 -->
+        <div v-else-if="showSwitchButton" class="personal-section">
+          <button class="team-switch-btn" @click="toggleTeamMenu">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+              <circle cx="9" cy="7" r="4"/>
+              <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+              <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+            </svg>
+            <span>{{ switchButtonText }}</span>
+            <svg v-if="(currentTeam?.teams?.length || 0) > 1" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="6 9 12 15 18 9"/>
+            </svg>
+          </button>
+
+          <!-- 团队切换下拉菜单（多个团队时显示） -->
+          <div v-if="showTeamMenu && (currentTeam?.teams?.length || 0) > 1" class="team-menu" @click.stop>
+            <div
+              v-for="team in allTeams"
+              :key="team.teamId || 0"
+              class="team-menu-item"
+              :class="{ active: team.teamId === currentTeamId }"
+              @click="handleSwitchTeam(team.teamId)"
+            >
+              <div class="team-menu-info">
+                <div class="team-menu-name">
+                  <svg v-if="team.teamId === currentTeamId" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                    <polyline points="20 6 9 17 4 12"/>
+                  </svg>
+                  {{ team.teamName }}
+                </div>
+                <div v-if="team.teamId" class="team-menu-meta">
+                  {{ getRoleText(team.memberRole) }} · {{ team.memberCount }} 人
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Tab 切换 -->
+      <div class="account-tabs">
+        <div class="tab-item" :class="{ active: activeTab === 'overview' }" @click="activeTab = 'overview'">
+          {{ t('credits.overview') }}
+        </div>
+        <div class="tab-item" :class="{ active: activeTab === 'account' }" @click="activeTab = 'account'">
+          {{ t('account.accountInfo') }}
+        </div>
+        <div class="tab-item" :class="{ active: activeTab === 'packages' }" @click="activeTab = 'packages'">
+          {{ t('credits.packages') }}
+        </div>
+        <div class="tab-item" :class="{ active: activeTab === 'orders' }" @click="activeTab = 'orders'">
+          {{ t('credits.orders') }}
+        </div>
+      </div>
+
+      <!-- Tab 内容 -->
+      <div class="tab-content">
+        <!-- 账户信息 -->
+        <div v-if="activeTab === 'account'" class="tab-panel">
+          <div class="info-list">
+            <div class="info-row">
+              <span class="info-label">{{ t('account.userId') }}</span>
+              <span class="info-value">{{ userInfo.userInfo?.userId || t('na') }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">{{ t('account.aid') }}</span>
+              <span class="info-value mono">{{ userInfo.userInfo?.aid || t('na') }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">{{ t('account.vipType') }}</span>
+              <span class="info-value">{{ userInfo.accountInfo?.vipTypeName || t('account.nonVip') }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">{{ t('account.remainingDays') }}</span>
+              <span class="info-value remaining-days">{{ remainingDaysDisplay }}</span>
+            </div>
+            <div v-if="userInfo.accountInfo?.vipExpireTime" class="info-row">
+              <span class="info-label">{{ t('account.expireTime') }}</span>
+              <span class="info-value">{{ formatExpireTime(userInfo.accountInfo.vipExpireTime) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 积分概览 -->
+        <div v-if="activeTab === 'overview'" class="tab-panel overview-panel">
+          <!-- 时间范围切换 -->
+          <div class="overview-toolbar">
+            <div class="period-tabs">
+              <button :class="{ active: overviewPeriod === 'today' }" @click="switchOverviewPeriod('today')">{{ t('credits.today') }}</button>
+              <button :class="{ active: overviewPeriod === '7d' }" @click="switchOverviewPeriod('7d')">{{ t('credits.last7Days') }}</button>
+              <button :class="{ active: overviewPeriod === '30d' }" @click="switchOverviewPeriod('30d')">{{ t('credits.last30Days') }}</button>
+            </div>
+          </div>
+
+          <!-- 加载中 -->
+          <div v-if="overviewLoading" class="loading">{{ t('common.loading') }}</div>
+
+          <template v-else>
+            <!-- 汇总卡片 -->
+            <div class="summary-cards">
+              <div class="summary-card">
+                <div class="summary-card-label">{{ t('credits.totalCredits') }}</div>
+                <div class="summary-card-value primary">{{ summaryData.totalCredits || 0 }}</div>
+              </div>
+              <div class="summary-card">
+                <div class="summary-card-label">{{ t('credits.totalRequests') }}</div>
+                <div class="summary-card-value">{{ summaryData.totalCount || 0 }}</div>
+              </div>
+              <div class="summary-card">
+                <div class="summary-card-label">{{ t('credits.totalCost') }}</div>
+                <div class="summary-card-value cost">${{ (summaryData.totalCost || 0).toFixed(2) }}</div>
+              </div>
+            </div>
+
+            <!-- 按功能类型分布 -->
+            <div v-if="hasTypeBreakdown" class="type-breakdown">
+              <div v-for="item in typeBreakdownItems" :key="item.key" class="type-bar-row">
+                <span class="type-label">{{ t('credits.' + item.key) }}</span>
+                <div class="type-bar-track">
+                  <div class="type-bar-fill" :style="{ width: item.percent + '%', background: item.color }"></div>
+                </div>
+                <span class="type-value">{{ item.value }}</span>
+              </div>
+            </div>
+
+            <!-- 日趋势图（7天/30天时显示） -->
+            <div v-if="overviewPeriod !== 'today' && dailyTrendData.length > 0" class="trend-section">
+              <div class="section-title">{{ t('credits.dailyTrend') }}</div>
+              <div class="bar-chart">
+                <div v-for="bar in dailyChartBars" :key="bar.label" class="bar-col">
+                  <div class="bar-tooltip">{{ bar.value }}</div>
+                  <div class="bar-track">
+                    <div class="bar-fill" :style="{ height: bar.percent + '%' }"></div>
+                  </div>
+                  <div class="bar-label">{{ bar.label }}</div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 24小时趋势图 -->
+            <div v-if="hourlyTrendData.length > 0" class="trend-section">
+              <div class="section-title">{{ t('credits.hourlyTrend') }}</div>
+              <div class="bar-chart bar-chart-hourly">
+                <div v-for="bar in hourlyChartBars" :key="bar.label" class="bar-col">
+                  <div class="bar-tooltip">{{ bar.value }}</div>
+                  <div class="bar-track">
+                    <div class="bar-fill bar-fill-hourly" :style="{ height: bar.percent + '%' }"></div>
+                  </div>
+                  <div class="bar-label">{{ bar.label }}</div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 无数据提示 -->
+            <div v-if="!overviewLoading && !summaryData.totalCredits && recentRecords.length === 0" class="empty">
+              {{ t('credits.noTrendData') }}
+            </div>
+
+            <!-- 有明细但无统计数据的提示 -->
+            <div v-if="!overviewLoading && !summaryData.totalCredits && recentRecords.length > 0" class="info-tip">
+              统计数据正在生成中，请稍后刷新查看
+            </div>
+
+            <!-- 最近消耗记录 -->
+            <div v-if="recentRecords.length > 0" class="trend-section">
+              <div class="section-title">{{ t('credits.recentRecords') }}</div>
+              <div class="recent-records">
+                <div v-for="rec in recentRecords" :key="rec.id" class="record-row">
+                  <div class="record-main">
+                    <span class="record-model">{{ rec.model || '-' }}</span>
+                    <span class="record-type">{{ rec.functionType || '-' }}</span>
+                  </div>
+                  <div class="record-meta">
+                    <span class="record-credits">{{ rec.credits }}</span>
+                    <span class="record-time">{{ formatRecordTime(rec.createTime) }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <div v-if="creditsErrorMsg" class="credits-error">{{ creditsErrorMsg }}</div>
+        </div>
+
+        <!-- 积分包 -->
+        <div v-if="activeTab === 'packages'" class="tab-panel">
+          <div v-if="loadingPackages" class="loading">{{ t('common.loading') }}</div>
+          <div v-else-if="packages.length === 0" class="empty">{{ t('credits.noPackages') }}</div>
+          <div v-else class="packages-list">
+            <div v-for="pkg in packages" :key="pkg.id" class="package-item">
+              <div class="package-name">{{ pkg.name }}</div>
+              <div class="package-credits">{{ pkg.credits }} {{ t('credits.credits') }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 订单 -->
+        <div v-if="activeTab === 'orders'" class="tab-panel">
+          <div v-if="loadingOrders" class="loading">{{ t('common.loading') }}</div>
+          <div v-else-if="orders.length === 0" class="empty">{{ t('credits.noOrders') }}</div>
+          <div v-else class="orders-list">
+            <div v-for="order in orders" :key="order.id" class="order-item">
+              <div class="order-info">
+                <div class="order-name">{{ order.name || order.packageName || t('credits.unknown') }}</div>
+                <div class="order-time">{{ formatTime(order.createTime) }}</div>
+              </div>
+              <div class="order-status">{{ getOrderStatus(order.status) }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="loading-panel">
+      {{ t('common.loading') }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch, onUnmounted } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import { useConnectionStore } from '@/stores/connection'
+import { useI18n } from '@/i18n'
+import { storeToRefs } from 'pinia'
+import { ElMessage } from 'element-plus'
+
+const authStore = useAuthStore()
+const connectionStore = useConnectionStore()
+const { userInfo } = storeToRefs(authStore)
+const { t } = useI18n()
+
+const activeTab = ref('overview')
+const showTeamMenu = ref(false)
+
+// === 积分统计相关状态 ===
+const todayTotal = ref(0)
+const creditsErrorMsg = ref('')
+const packages = ref<any[]>([])
+const loadingPackages = ref(false)
+const orders = ref<any[]>([])
+const loadingOrders = ref(false)
+
+// === 概览页状态 ===
+const overviewPeriod = ref<'today' | '7d' | '30d'>('today')
+const overviewLoading = ref(false)
+const summaryData = ref<any>({})
+const dailyTrendData = ref<any[]>([])
+const hourlyTrendData = ref<any[]>([])
+const recentRecords = ref<any[]>([])
+
+const currentTeam = computed(() => userInfo.value?.teamInfo)
+const currentTeamId = computed(() => currentTeam.value?.currentTeamId)
+
+const currentTeamDisplay = computed(() => {
+  if (!currentTeam.value?.currentTeamId) return t('account.personalVersion')
+  return currentTeam.value.currentTeamName || t('na')
+})
+
+const allTeams = computed(() => {
+  const teams = currentTeam.value?.teams || []
+  return [
+    { teamId: null, teamName: t('account.personalVersion'), memberRole: null, memberCount: 0 },
+    ...teams
+  ]
+})
+
+// 是否有可用的团队
+const hasTeams = computed(() => {
+  const teams = currentTeam.value?.teams || []
+  return teams.length > 0
+})
+
+// 当前是否在团队版
+const isInTeam = computed(() => {
+  return currentTeamId.value != null && currentTeamId.value !== 0
+})
+
+// 切换按钮文本
+const switchButtonText = computed(() => {
+  if (!hasTeams.value) {
+    // 没有团队，不显示按钮
+    return ''
+  }
+
+  if (!isInTeam.value) {
+    // 个人版，有团队
+    return t('account.switchToTeam')
+  }
+
+  // 团队版
+  const teams = currentTeam.value?.teams || []
+  if (teams.length === 1) {
+    // 只有一个团队
+    return t('account.switchToPersonal')
+  } else {
+    // 多个团队
+    return t('account.switchTeam')
+  }
+})
+
+// 是否显示切换按钮
+const showSwitchButton = computed(() => {
+  return hasTeams.value
+})
+
+const teamRoleDisplay = computed(() => {
+  const role = currentTeam.value?.currentTeamRole
+  return getRoleText(role)
+})
+
+const isVip = computed(() => {
+  const name = userInfo.value?.accountInfo?.vipTypeName
+  return name && name !== 'Free' && name !== '非VIP'
+})
+
+const vipLabel = computed(() => {
+  return userInfo.value?.accountInfo?.vipTypeName || 'Free'
+})
+
+const vipBadgeClass = computed(() => {
+  return isVip.value ? 'vip-badge--active' : 'vip-badge--free'
+})
+
+const remainingDaysDisplay = computed(() => {
+  const info = userInfo.value?.accountInfo
+  if (!isVip.value) return '∞'
+  if (info?.vipRemainingDays != null) {
+    return t('account.remainingDaysUnit', { n: info.vipRemainingDays })
+  }
+  return t('na')
+})
+
+function getRoleText(role: string | null | undefined): string {
+  if (role === '0') return t('account.roleAdmin')
+  if (role === '1') return t('account.roleMember')
+  if (role === '2') return t('account.roleMember')
+  return t('na')
+}
+
+function formatExpireTime(timeStr: string): string {
+  try {
+    const date = new Date(timeStr)
+    return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
+  } catch {
+    return timeStr
+  }
+}
+
+function toggleTeamMenu() {
+  // 如果只有一个团队，直接切换
+  const teams = currentTeam.value?.teams || []
+  console.log('[AccountView] toggleTeamMenu:', {
+    teamsCount: teams.length,
+    isInTeam: isInTeam.value,
+    currentTeamId: currentTeamId.value,
+    teamIds: teams.map((t: any) => t.teamId)
+  })
+
+  if (teams.length === 1 && isInTeam.value) {
+    // 团队版 → 个人版
+    handleSwitchTeam(null)
+    return
+  }
+
+  if (teams.length === 1 && !isInTeam.value) {
+    // 个人版 → 团队版（唯一团队）
+    handleSwitchTeam(teams[0].teamId)
+    return
+  }
+
+  // 多个团队，显示菜单
+  showTeamMenu.value = !showTeamMenu.value
+}
+
+async function handleSwitchTeam(teamId: number | null | undefined) {
+  showTeamMenu.value = false
+
+  console.log('[AccountView] handleSwitchTeam:', { teamId, currentTeamId: currentTeamId.value })
+
+  // teamId 为 undefined 说明团队数据异常
+  if (teamId === undefined) {
+    console.error('[AccountView] teamId is undefined, team data may be corrupted')
+    ElMessage.error(t('account.switchTeamFailed'))
+    return
+  }
+
+  if (teamId === currentTeamId.value) {
+    console.log('[AccountView] Already in target team, skipping')
+    return
+  }
+
+  try {
+    const client = connectionStore.getClient()
+    if (!client) {
+      ElMessage.error(t('account.switchTeamFailed'))
+      return
+    }
+
+    const result = await client.call('evol.switch_team', { team_id: teamId, kiteToken: authStore.kiteToken })
+    console.log('[AccountView] switch_team result:', result)
+
+    if (result.status === 'success') {
+      ElMessage.success(result.data?.data?.message || t('account.switchTeamSuccess'))
+      await authStore.loadUserInfo(client)
+    } else {
+      ElMessage.error(result.error || t('account.switchTeamFailed'))
+    }
+  } catch (e: any) {
+    console.error('Switch team failed:', e)
+    ElMessage.error(t('account.switchTeamFailed'))
+  }
+}
+
+async function tryLoadUserInfo() {
+  try {
+    const client = connectionStore.getClient()
+    if (client && client.authenticated) {
+      await authStore.loadUserInfo(client)
+    }
+  } catch (e: any) {
+    console.error('Failed to load user info:', e)
+  }
+}
+
+// === 功能类型颜色映射 ===
+const typeColors: Record<string, string> = {
+  chatbot: '#6366f1',
+  codex: '#f59e0b',
+  claudecode: '#10b981',
+  gemini: '#3b82f6',
+  openclaw: '#ef4444',
+}
+
+const typeKeys = ['chatbot', 'codex', 'claudecode', 'gemini', 'openclaw'] as const
+
+// === 概览相关计算属性 ===
+const hasTypeBreakdown = computed(() => {
+  const d = summaryData.value
+  return typeKeys.some(k => (d[k + 'Credits'] || 0) > 0)
+})
+
+const typeBreakdownItems = computed(() => {
+  const d = summaryData.value
+  const total = d.totalCredits || 1
+  return typeKeys
+    .map(k => ({
+      key: k,
+      value: d[k + 'Credits'] || 0,
+      percent: Math.round(((d[k + 'Credits'] || 0) / total) * 100),
+      color: typeColors[k],
+    }))
+    .filter(item => item.value > 0)
+})
+
+const dailyChartBars = computed(() => {
+  const data = dailyTrendData.value
+  if (!data.length) return []
+  const max = Math.max(...data.map((d: any) => d.totalCredits || 0), 1)
+  return data.map((d: any) => {
+    const dateStr = (d.statDate || '').toString()
+    const label = dateStr.length >= 10 ? dateStr.slice(5, 10) : dateStr
+    return {
+      label,
+      value: d.totalCredits || 0,
+      percent: Math.round(((d.totalCredits || 0) / max) * 100),
+    }
+  })
+})
+
+const hourlyChartBars = computed(() => {
+  // 补全24小时
+  const map = new Map<number, any>()
+  for (const d of hourlyTrendData.value) {
+    const hourStr = (d.statHour || '').toString()
+    const hour = parseInt(hourStr.slice(11, 13), 10)
+    if (!isNaN(hour)) map.set(hour, d)
+  }
+  const bars = []
+  const max = Math.max(...hourlyTrendData.value.map((d: any) => d.totalCredits || 0), 1)
+  for (let h = 0; h < 24; h++) {
+    const d = map.get(h)
+    const val = d?.totalCredits || 0
+    bars.push({
+      label: String(h),
+      value: val,
+      percent: Math.round((val / max) * 100),
+    })
+  }
+  return bars
+})
+
+function getDateStr(daysAgo: number): string {
+  const d = new Date()
+  d.setDate(d.getDate() - daysAgo)
+  return d.toISOString().slice(0, 10)
+}
+
+function formatRecordTime(time: string): string {
+  if (!time) return ''
+  return time.slice(5, 16).replace('T', ' ')
+}
+
+async function switchOverviewPeriod(period: 'today' | '7d' | '30d') {
+  overviewPeriod.value = period
+  await loadOverviewData()
+}
+
+async function loadOverviewData() {
+  if (!authStore.kiteToken) return
+  if (connectionStore.status !== 'connected') return
+
+  overviewLoading.value = true
+  creditsErrorMsg.value = ''
+
+  const today = getDateStr(0)
+  const period = overviewPeriod.value
+
+  try {
+    const startDate = period === 'today' ? today : period === '7d' ? getDateStr(6) : getDateStr(29)
+    const endDate = today
+
+    // 并行加载汇总 + 趋势 + 最近记录（最近记录固定取今天）
+    const [summaryResult, hourlyResult, dailyResult, listResult] = await Promise.all([
+      connectionStore.callRpc<any>('evol.get_user_summary', {
+        kiteToken: authStore.kiteToken, startDate, endDate,
+      }),
+      connectionStore.callRpc<any>('evol.get_user_hourly_trend', {
+        kiteToken: authStore.kiteToken, date: today,
+      }),
+      period !== 'today'
+        ? connectionStore.callRpc<any>('evol.get_user_daily_trend', {
+            kiteToken: authStore.kiteToken, startDate, endDate,
+          })
+        : Promise.resolve({ success: true, data: [] }),
+      connectionStore.callRpc<any>('evol.get_credits_list', {
+        kiteToken: authStore.kiteToken, pageNum: 1, pageSize: 10,
+        startTime: startDate + ' 00:00:00',
+        endTime: endDate + ' 23:59:59',
+      }),
+    ])
+
+    if (summaryResult.success) {
+      summaryData.value = summaryResult.data || {}
+    }
+    if (hourlyResult.success) {
+      hourlyTrendData.value = hourlyResult.data || []
+    }
+    if (dailyResult.success) {
+      dailyTrendData.value = dailyResult.data || []
+    }
+    if (listResult.success) {
+      recentRecords.value = (listResult.data?.list || []).filter((r: any) => r.changeType === 3)
+    }
+  } catch (e: any) {
+    creditsErrorMsg.value = e.message || t('common.error')
+  } finally {
+    overviewLoading.value = false
+  }
+}
+
+// === 积分统计相关方法 ===
+async function loadCreditsStats() {
+  if (!authStore.kiteToken) return
+  if (connectionStore.status !== 'connected') return
+  try {
+    const result = await connectionStore.callRpc<any>('evol.get_credits_stats', {
+      kiteToken: authStore.kiteToken,
+      period: 'day'
+    })
+    if (result.success) {
+      todayTotal.value = result.data?.total || 0
+    } else {
+      creditsErrorMsg.value = result.msg || t('common.error')
+    }
+  } catch (e: any) {
+    creditsErrorMsg.value = e.message || t('common.error')
+  }
+}
+
+async function loadPackages() {
+  if (!authStore.kiteToken) return
+  loadingPackages.value = true
+  try {
+    const result = await connectionStore.callRpc<any>('evol.get_credits_package_list', {
+      kiteToken: authStore.kiteToken
+    })
+    if (result.success) {
+      packages.value = result.data || []
+    }
+  } catch (e) {
+    console.error('Load packages failed:', e)
+  } finally {
+    loadingPackages.value = false
+  }
+}
+
+async function loadOrders() {
+  if (!authStore.kiteToken) return
+  loadingOrders.value = true
+  try {
+    const result = await connectionStore.callRpc<any>('evol.get_order_list', {
+      kiteToken: authStore.kiteToken,
+      page: 1,
+      pageSize: 50
+    })
+    if (result.success) {
+      orders.value = result.data?.list || []
+    }
+  } catch (e) {
+    console.error('Load orders failed:', e)
+  } finally {
+    loadingOrders.value = false
+  }
+}
+
+function formatTime(time: string) {
+  if (!time) return ''
+  return new Date(time).toLocaleString()
+}
+
+function getOrderStatus(status: number) {
+  const statusMap: Record<number, string> = {
+    0: t('credits.orderPending'),
+    1: t('credits.orderPaying'),
+    2: t('credits.orderPaid'),
+    3: t('credits.orderFailed'),
+    4: t('credits.orderClosed'),
+    5: t('credits.orderRefunded')
+  }
+  return statusMap[status] || t('common.unknown')
+}
+
+function handleClickOutside(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target.closest('.team-section') && !target.closest('.personal-section')) {
+    showTeamMenu.value = false
+  }
+}
+
+onMounted(() => {
+  tryLoadUserInfo()
+  loadCreditsStats()
+  loadOverviewData()
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+
+watch(() => connectionStore.status, (newStatus) => {
+  if (newStatus === 'connected') {
+    if (!userInfo.value) setTimeout(tryLoadUserInfo, 500)
+    setTimeout(loadCreditsStats, 500)
+    setTimeout(loadOverviewData, 500)
+  }
+})
+
+watch(activeTab, (tab) => {
+  if (tab === 'packages' && packages.value.length === 0) loadPackages()
+  else if (tab === 'orders' && orders.value.length === 0) loadOrders()
+})
+</script>
+
+<style scoped>
+.account-view {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.account-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+/* 固定头部 - glass card */
+.account-header {
+  background: var(--panel-bg);
+  backdrop-filter: var(--panel-blur);
+  -webkit-backdrop-filter: var(--panel-blur);
+  border-radius: var(--radius-lg);
+  padding: 32px;
+  box-shadow: var(--panel-shadow);
+  border: 1px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 40px;
+  position: relative;
+}
+
+.user-section {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex: 1;
+}
+
+.user-avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: var(--primary-light);
+  color: var(--primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.user-name-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.user-name {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+
+.user-phone {
+  font-size: 14px;
+  color: var(--text-muted);
+  font-family: 'Spline Sans Mono', monospace;
+}
+
+.team-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  position: relative;
+  flex: 1;
+  max-width: 600px;
+}
+
+.personal-section {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.team-info {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.team-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.team-label {
+  font-size: 13px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  flex-shrink: 0;
+}
+
+.team-details {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.team-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  flex-shrink: 0;
+}
+
+.team-meta-divider {
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.team-role {
+  color: var(--text-secondary);
+  font-size: 15px;
+  flex-shrink: 0;
+}
+
+.team-members {
+  color: var(--text-secondary);
+  font-size: 15px;
+  flex-shrink: 0;
+}
+
+.vip-badge {
+  padding: 4px 12px;
+  border-radius: var(--radius-pill);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  flex-shrink: 0;
+  text-transform: uppercase;
+}
+
+.vip-badge--free {
+  background: var(--btn-ghost-bg);
+  color: var(--text-muted);
+}
+
+.vip-badge--active {
+  background: linear-gradient(135deg, #fbbf24, #f59e0b);
+  color: #422006;
+}
+
+.team-switch-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  border-radius: var(--radius-pill);
+  background: var(--btn-ghost-bg);
+  border: 1px solid var(--border-color);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--btn-ghost-text);
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.team-switch-btn:hover {
+  background: var(--border-color);
+  transform: translateY(-1px);
+}
+
+.team-switch-btn svg {
+  transition: transform 0.2s;
+}
+
+/* 团队切换菜单 */
+.team-menu {
+  position: absolute;
+  top: calc(100% + 12px);
+  right: 0;
+  min-width: 300px;
+  background: var(--panel-bg);
+  backdrop-filter: var(--panel-blur);
+  -webkit-backdrop-filter: var(--panel-blur);
+  border-radius: 16px;
+  box-shadow: 0 30px 60px rgba(2, 6, 23, 0.4);
+  border: 1px solid var(--border-color);
+  z-index: 100;
+  overflow: hidden;
+}
+
+.personal-section .team-menu {
+  right: 0;
+}
+
+.team-section .team-menu {
+  right: 0;
+}
+
+.team-menu-item {
+  padding: 16px 20px;
+  cursor: pointer;
+  transition: background 0.2s;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.team-menu-item:last-child {
+  border-bottom: none;
+}
+
+.team-menu-item:hover {
+  background: var(--bg-secondary);
+}
+
+.team-menu-item.active {
+  background: var(--primary-light);
+}
+
+.team-menu-info {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.team-menu-name {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.team-menu-name svg {
+  color: var(--primary);
+  flex-shrink: 0;
+}
+
+.team-menu-meta {
+  font-size: 13px;
+  color: var(--text-secondary);
+  padding-left: 26px;
+}
+
+/* Tab 切换 */
+.account-tabs {
+  display: flex;
+  gap: 8px;
+  border-bottom: 1px solid var(--border-color);
+  padding: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.account-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.tab-item {
+  padding: 12px 20px;
+  text-align: center;
+  font-size: 15px;
+  font-weight: 600;
+  white-space: nowrap;
+  flex-shrink: 0;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.2s;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  bottom: -1px;
+  background: transparent;
+}
+
+.tab-item:hover {
+  color: var(--text-primary);
+}
+
+.tab-item.active {
+  color: var(--primary);
+  border-bottom-color: var(--primary);
+}
+
+/* Tab 内容 - glass panel */
+.tab-content {
+  background: var(--panel-bg);
+  backdrop-filter: var(--panel-blur);
+  -webkit-backdrop-filter: var(--panel-blur);
+  border-radius: var(--radius-lg);
+  padding: 32px;
+  box-shadow: var(--panel-shadow);
+  border: 1px solid var(--border-color);
+  min-height: 400px;
+}
+
+.tab-panel {
+  animation: fadeIn 0.3s;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 信息列表 */
+.info-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.info-row:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  color: var(--text-muted);
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.info-value {
+  color: var(--text-primary);
+  font-size: 15px;
+  font-weight: 500;
+  text-align: right;
+}
+
+.mono {
+  font-family: 'Spline Sans Mono', 'SF Mono', 'Consolas', monospace;
+  font-size: 14px;
+  word-break: break-all;
+}
+
+.small {
+  font-size: 13px;
+}
+
+.remaining-days {
+  color: var(--warning);
+  font-size: 17px;
+  font-weight: 700;
+  font-family: 'Spline Sans Mono', monospace;
+}
+
+.loading-panel {
+  text-align: center;
+  padding: 60px 40px;
+  color: var(--text-muted);
+  background: var(--panel-bg);
+  backdrop-filter: var(--panel-blur);
+  -webkit-backdrop-filter: var(--panel-blur);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--panel-shadow);
+  border: 1px solid var(--border-color);
+  font-size: 15px;
+}
+
+@media (max-width: 768px) {
+  .account-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 32px;
+    padding: 32px;
+  }
+
+  .user-section {
+    width: 100%;
+  }
+
+  .team-section,
+  .personal-section {
+    width: 100%;
+  }
+
+  .team-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .team-switch-btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .tab-content {
+    padding: 32px 24px;
+  }
+
+  .info-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .info-value {
+    text-align: left;
+  }
+}
+
+/* === 概览页样式 === */
+.overview-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+}
+
+.overview-toolbar {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.period-tabs {
+  display: flex;
+  gap: 4px;
+  background: var(--btn-ghost-bg);
+  border-radius: var(--radius-pill);
+  padding: 3px;
+}
+
+.period-tabs button {
+  padding: 6px 16px;
+  border: none;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.period-tabs button:hover {
+  color: var(--text-primary);
+}
+
+.period-tabs button.active {
+  background: var(--primary);
+  color: #fff;
+}
+
+/* 汇总卡片 */
+.summary-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.summary-card {
+  background: var(--btn-ghost-bg);
+  border-radius: var(--radius);
+  padding: 20px;
+  border: 1px solid var(--border-color);
+  text-align: center;
+}
+
+.summary-card-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 8px;
+}
+
+.summary-card-value {
+  font-size: 28px;
+  font-weight: 700;
+  font-family: 'Spline Sans Mono', monospace;
+  color: var(--text-primary);
+}
+
+.summary-card-value.primary {
+  color: var(--primary);
+}
+
+.summary-card-value.cost {
+  color: var(--warning);
+}
+
+/* 功能类型分布 */
+.type-breakdown {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.type-bar-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.type-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  width: 100px;
+  flex-shrink: 0;
+  text-align: right;
+}
+
+.type-bar-track {
+  flex: 1;
+  height: 8px;
+  background: var(--btn-ghost-bg);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.type-bar-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.5s ease;
+}
+
+.type-value {
+  font-size: 13px;
+  font-weight: 600;
+  font-family: 'Spline Sans Mono', monospace;
+  color: var(--text-primary);
+  width: 60px;
+  flex-shrink: 0;
+}
+
+/* 趋势区域 */
+.trend-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* CSS 柱状图 */
+.bar-chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  height: 160px;
+  padding: 0 4px;
+}
+
+.bar-chart-hourly {
+  height: 120px;
+}
+
+.bar-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  height: 100%;
+  position: relative;
+}
+
+.bar-tooltip {
+  font-size: 10px;
+  font-family: 'Spline Sans Mono', monospace;
+  color: var(--text-muted);
+  opacity: 0;
+  transition: opacity 0.2s;
+  position: absolute;
+  top: -2px;
+  white-space: nowrap;
+}
+
+.bar-col:hover .bar-tooltip {
+  opacity: 1;
+}
+
+.bar-track {
+  flex: 1;
+  width: 100%;
+  max-width: 32px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  border-radius: 3px 3px 0 0;
+  overflow: hidden;
+}
+
+.bar-fill {
+  background: var(--primary);
+  border-radius: 3px 3px 0 0;
+  transition: height 0.5s ease;
+  min-height: 2px;
+}
+
+.bar-fill-hourly {
+  background: var(--primary);
+  opacity: 0.7;
+}
+
+.bar-col:hover .bar-fill {
+  opacity: 1;
+  filter: brightness(1.2);
+}
+
+.bar-label {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-family: 'Spline Sans Mono', monospace;
+  white-space: nowrap;
+}
+
+/* 最近记录 */
+.recent-records {
+  display: flex;
+  flex-direction: column;
+}
+
+.record-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.record-row:last-child {
+  border-bottom: none;
+}
+
+.record-main {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.record-model {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.record-type {
+  font-size: 12px;
+  color: var(--text-muted);
+  padding: 2px 8px;
+  background: var(--btn-ghost-bg);
+  border-radius: var(--radius-pill);
+}
+
+.record-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.record-credits {
+  font-size: 14px;
+  font-weight: 700;
+  font-family: 'Spline Sans Mono', monospace;
+  color: var(--error);
+}
+
+.record-time {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-family: 'Spline Sans Mono', monospace;
+}
+
+.credits-error {
+  color: var(--error);
+  text-align: center;
+  margin-top: 12px;
+  font-size: 14px;
+}
+
+.info-tip {
+  text-align: center;
+  padding: 20px;
+  color: var(--text-secondary);
+  background: var(--btn-ghost-bg);
+  border-radius: var(--radius);
+  font-size: 14px;
+}
+
+@media (max-width: 768px) {
+  .summary-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .type-label {
+    width: 80px;
+    font-size: 12px;
+  }
+
+  .bar-chart {
+    height: 120px;
+  }
+
+  .bar-chart-hourly {
+    height: 80px;
+  }
+
+  .bar-label {
+    font-size: 8px;
+  }
+}
+
+.loading, .empty {
+  text-align: center;
+  padding: 40px;
+  color: var(--text-muted);
+}
+
+.packages-list, .orders-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.package-item, .order-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 18px;
+  background: var(--btn-ghost-bg);
+  border-radius: var(--radius);
+  border: 1px solid var(--border-color);
+  transition: background 0.2s;
+}
+
+.package-item:hover, .order-item:hover {
+  background: var(--border-color);
+}
+
+.order-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.order-name, .package-name {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 15px;
+}
+
+.order-time {
+  font-size: 13px;
+  color: var(--text-muted);
+  font-family: 'Spline Sans Mono', monospace;
+}
+
+.package-credits {
+  font-family: 'Spline Sans Mono', monospace;
+  font-weight: 600;
+  color: var(--primary);
+}
+
+.order-status {
+  font-size: 13px;
+  font-weight: 600;
+}
+</style>