@agentunion/kite 1.5.0 → 1.6.0

package/extensions/services/evol/web/src/components/team/TeamStatsPanel.vue

@@ -0,0 +1,907 @@
+<template>
+  <div class="team-stats-panel">
+    <!-- Header -->
+    <StatsHeader
+      :statsMode="statsMode"
+      :dateRange="dateRange"
+      :selectedDate="selectedDate"
+      :loading="loading"
+      :isStatsExpanded="isStatsExpanded"
+      @switchMode="switchMode"
+      @toggleStats="isStatsExpanded = !isStatsExpanded"
+      @update:dateRange="dateRange = $event"
+      @update:selectedDate="selectedDate = $event"
+      @dateRangeChange="onDateRangeChange"
+      @customDateChange="onCustomDateChange"
+      @prevDay="goToPreviousDay"
+      @nextDay="goToNextDay"
+      @refresh="loadStats"
+    />
+
+    <!-- Loading -->
+    <div v-if="loading" class="loading-state">
+      <div class="spinner-small"></div>
+      <span>加载中...</span>
+    </div>
+
+    <!-- Content -->
+    <template v-else-if="hasData">
+      <!-- 汇总卡片 + 饼图 -->
+      <StatsSummary
+        v-show="isStatsExpanded"
+        ref="summaryRef"
+        :summary="summary"
+        :statsDays="currentStatsDays"
+        :pieChartRef="null"
+        @pieMount="onPieMount"
+        class="collapsible-content"
+      />
+
+      <!-- 实时模式：24小时趋势图 -->
+      <div v-if="statsMode === 'realtime'" v-show="isStatsExpanded" class="hourly-chart-section collapsible-content">
+        <div class="hourly-chart-header">
+          <div class="title-with-toggle">
+            <h4 class="section-subtitle">24小时消耗趋势</h4>
+            <button class="toggle-btn" @click="isHourlyChartExpanded = !isHourlyChartExpanded" :title="isHourlyChartExpanded ? '收起' : '展开'">
+              <span class="toggle-icon" :class="{ rotated: !isHourlyChartExpanded }">▼</span>
+            </button>
+          </div>
+          <div class="hourly-controls">
+            <select v-model="selectedHourlyMemberId" @change="onHourlyMemberChange" class="member-select" :disabled="memberRanking.length === 0">
+              <option :value="null">团队汇总</option>
+              <option v-for="member in memberRanking" :key="member.userId" :value="member.userId">
+                {{ member.memberNickname || member.nickName }}
+              </option>
+            </select>
+            <div v-if="hourlyStats" class="hourly-summary">
+              <span class="hourly-total">总消耗: <strong>{{ formatNumber(hourlyStats.totalCredits) }}</strong></span>
+              <span class="hourly-count">{{ hourlyStats.totalCount || 0 }} 次调用</span>
+            </div>
+          </div>
+        </div>
+        <div v-if="hourlyStatsLoading" class="hourly-loading">
+          <div class="spinner-small"></div><span>加载中...</span>
+        </div>
+        <div v-else-if="hourlyStats && hourlyStats.hourlyData" v-show="isHourlyChartExpanded" class="hourly-chart collapsible-content">
+          <div ref="realtimeHourlyChartEl" class="echarts-line-container"></div>
+        </div>
+        <div v-else v-show="isHourlyChartExpanded" class="hourly-no-data collapsible-content">
+          <p>暂无24小时统计数据</p>
+        </div>
+      </div>
+
+      <!-- 历史模式：趋势图表 -->
+      <div v-if="statsMode === 'history'" v-show="isStatsExpanded" class="trend-stats-section collapsible-content">
+        <div class="trend-stats-header">
+          <div class="title-with-toggle">
+            <h4 class="section-subtitle">积分消耗趋势</h4>
+            <button class="toggle-btn" @click="isHourlyChartExpanded = !isHourlyChartExpanded" :title="isHourlyChartExpanded ? '收起' : '展开'">
+              <span class="toggle-icon" :class="{ rotated: !isHourlyChartExpanded }">▼</span>
+            </button>
+          </div>
+          <div class="trend-stats-controls">
+            <div class="period-selector">
+              <button class="period-btn" :class="{ active: trendPeriod === 'hourly' }" @click="trendPeriod = 'hourly'; onTrendPeriodChange()" :disabled="!canShowHourlyTrend" :title="!canShowHourlyTrend ? '仅在选择1天数据时可用' : '24小时趋势'">24小时</button>
+              <button class="period-btn" :class="{ active: trendPeriod === 'daily' }" @click="trendPeriod = 'daily'; onTrendPeriodChange()">日趋势</button>
+              <button class="period-btn" :class="{ active: trendPeriod === 'weekly' }" @click="trendPeriod = 'weekly'; onTrendPeriodChange()">周趋势</button>
+              <button class="period-btn" :class="{ active: trendPeriod === 'monthly' }" @click="trendPeriod = 'monthly'; onTrendPeriodChange()">月趋势</button>
+            </div>
+            <select v-model="selectedTrendMemberId" @change="onTrendMemberChange" class="member-select" :disabled="memberRanking.length === 0">
+              <option :value="null">团队汇总</option>
+              <option v-for="member in memberRanking" :key="member.userId" :value="member.userId">
+                {{ member.memberNickname || member.nickName }}
+              </option>
+            </select>
+            <div class="hourly-summary">
+              <span class="hourly-total">总消耗: <strong>{{ formatNumber(getCurrentTrendTotal()) }}</strong></span>
+              <span class="hourly-count">{{ getCurrentTrendCount() }} 次调用</span>
+            </div>
+          </div>
+        </div>
+        <div v-if="trendStatsLoading || hourlyStatsLoading" class="hourly-loading">
+          <div class="spinner-small"></div><span>加载中...</span>
+        </div>
+        <!-- 24小时趋势 -->
+        <div v-else-if="trendPeriod === 'hourly'" v-show="isHourlyChartExpanded" class="hourly-chart collapsible-content">
+          <div v-if="hourlyStats && hourlyStats.hourlyData">
+            <div ref="historyHourlyChartEl" class="echarts-line-container"></div>
+          </div>
+          <div v-else class="hourly-no-data"><p>暂无24小时统计数据</p></div>
+        </div>
+        <!-- 周趋势 -->
+        <div v-else-if="trendPeriod === 'weekly'" v-show="isHourlyChartExpanded" class="weekly-chart collapsible-content">
+          <div v-if="weeklyStats && weeklyStats.weeklyData && weeklyStats.weeklyData.length > 0">
+            <div ref="weeklyChartEl" class="echarts-line-container"></div>
+          </div>
+          <div v-else class="hourly-no-data"><p>暂无周趋势数据</p></div>
+        </div>
+        <!-- 月趋势 -->
+        <div v-else-if="trendPeriod === 'monthly'" v-show="isHourlyChartExpanded" class="monthly-chart collapsible-content">
+          <div v-if="monthlyStats && monthlyStats.monthlyData && monthlyStats.monthlyData.length > 0">
+            <div ref="monthlyChartEl" class="echarts-line-container"></div>
+          </div>
+          <div v-else class="hourly-no-data"><p>暂无月趋势数据</p></div>
+        </div>
+        <!-- 日趋势 -->
+        <div v-else-if="trendPeriod === 'daily'" v-show="isHourlyChartExpanded" class="daily-chart collapsible-content">
+          <div v-if="trendData && trendData.trend && trendData.trend.length > 0">
+            <div ref="trendLineChartEl" class="echarts-line-container"></div>
+          </div>
+          <div v-else class="hourly-no-data"><p>暂无日趋势数据</p></div>
+        </div>
+      </div>
+
+      <!-- 分组模式 -->
+      <div v-if="statsMode === 'group'" v-show="isStatsExpanded" class="group-stats-section collapsible-content">
+        <!-- 分组排行柱状图 -->
+        <div class="group-ranking-chart">
+          <div class="group-chart-header">
+            <h4 class="section-subtitle">分组消耗排行</h4>
+            <div class="group-chart-summary" v-if="groupStatsAllGroups.length > 0">
+              <span class="summary-text">共 {{ groupStatsAllGroups.length }} 个分组</span>
+            </div>
+          </div>
+          <div v-if="groupStatsLoading" class="hourly-loading">
+            <div class="spinner-small"></div><span>加载中...</span>
+          </div>
+          <div v-else-if="groupStatsAllGroups.length > 0" class="group-bars-container">
+            <div v-for="(group, index) in groupStatsAllGroups" :key="group.groupId || 'ungrouped'" class="group-bar-row">
+              <div class="group-bar-rank" :class="getRankClass(index)">{{ index + 1 }}</div>
+              <div class="group-bar-name" :title="group.groupPath || group.groupName">
+                {{ group.groupName }}
+              </div>
+              <div class="group-bar-track">
+                <div class="group-bar-stack">
+                  <div class="group-bar-fill chatbot" :style="{ width: getGroupBarWidth(group.chatbotCredits) }" :title="`Chatbot: ${formatNumber(group.chatbotCredits)}`"></div>
+                  <div class="group-bar-fill codex" :style="{ width: getGroupBarWidth(group.codexCredits) }" :title="`Codex: ${formatNumber(group.codexCredits)}`"></div>
+                  <div class="group-bar-fill claudecode" :style="{ width: getGroupBarWidth(group.claudecodeCredits) }" :title="`Claude Code: ${formatNumber(group.claudecodeCredits)}`"></div>
+                  <div v-if="group.geminiCredits" class="group-bar-fill gemini" :style="{ width: getGroupBarWidth(group.geminiCredits) }" :title="`Gemini: ${formatNumber(group.geminiCredits)}`"></div>
+                  <div v-if="group.openclawCredits" class="group-bar-fill openclaw" :style="{ width: getGroupBarWidth(group.openclawCredits) }" :title="`OpenClaw: ${formatNumber(group.openclawCredits)}`"></div>
+                </div>
+              </div>
+              <div class="group-bar-value">{{ formatNumber(group.totalCredits) }}</div>
+            </div>
+            <div class="hourly-legend" style="margin-top: 12px;">
+              <div class="hourly-legend-item chatbot"><span class="legend-dot"></span><span>Chatbot</span></div>
+              <div class="hourly-legend-item codex"><span class="legend-dot"></span><span>Codex</span></div>
+              <div class="hourly-legend-item claudecode"><span class="legend-dot"></span><span>Claude Code</span></div>
+              <div class="hourly-legend-item gemini"><span class="legend-dot"></span><span>Gemini</span></div>
+            </div>
+          </div>
+          <div v-else class="hourly-no-data"><p>暂无分组统计数据</p></div>
+        </div>
+
+        <!-- 分组详细对比表格 -->
+        <div v-if="!groupStatsLoading && groupStatsAllGroups.length > 0" class="group-detail-table">
+          <h4 class="section-subtitle" style="margin-bottom: 12px;">分组详细对比</h4>
+          <div class="ranking-table-container">
+            <table class="ranking-table">
+              <thead>
+                <tr>
+                  <th width="60">排名</th>
+                  <th>分组</th>
+                  <th width="80">成员数</th>
+                  <th width="100">总消耗</th>
+                  <th width="80">次数</th>
+                  <th width="100">人均消耗</th>
+                  <th width="100">Chatbot</th>
+                  <th width="100">Codex</th>
+                  <th width="100">Claude</th>
+                  <th width="100">Gemini</th>
+                  <th width="100">OpenClaw</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(group, index) in groupStatsAllGroups" :key="group.groupId || 'ungrouped'">
+                  <td><div class="rank-badge" :class="getRankClass(index)">{{ index + 1 }}</div></td>
+                  <td>
+                    <div class="member-cell">
+                      <div class="member-name">{{ group.groupName }}</div>
+                      <div v-if="group.groupPath && group.groupPath !== group.groupName" class="member-phone">{{ group.groupPath }}</div>
+                    </div>
+                  </td>
+                  <td><div class="count-value">{{ group.memberCount || 0 }}</div></td>
+                  <td><div class="credits-amount primary">{{ formatNumber(group.totalCredits) }}</div></td>
+                  <td><div class="count-value">{{ group.totalCount || 0 }}</div></td>
+                  <td><div class="credits-amount">{{ group.memberCount ? formatNumber(Math.round(group.totalCredits / group.memberCount)) : '-' }}</div></td>
+                  <td><div class="type-credits">{{ formatNumber(group.chatbotCredits) }}</div></td>
+                  <td><div class="type-credits">{{ formatNumber(group.codexCredits) }}</div></td>
+                  <td><div class="type-credits">{{ formatNumber(group.claudecodeCredits) }}</div></td>
+                  <td><div class="type-credits">{{ formatNumber(group.geminiCredits) }}</div></td>
+                  <td><div class="type-credits">{{ formatNumber(group.openclawCredits) }}</div></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- 分组趋势图 -->
+        <div v-if="!groupStatsLoading && groupHistoryData && dateRange !== 'custom' && groupStatsAllGroups.length > 0" class="group-trend-section">
+          <h4 class="section-subtitle" style="margin-bottom: 12px;">分组消耗趋势</h4>
+          <div class="group-trend-chart">
+            <div class="group-trend-bars">
+              <div v-for="(dateItem, dIdx) in groupTrendDates" :key="dIdx" class="group-trend-col">
+                <div class="group-trend-bar-stack">
+                  <div v-for="(group, gIdx) in groupTrendGroups" :key="group.groupId || 'ungrouped'" class="group-trend-bar" :class="getGroupColorClass(gIdx)" :style="{ height: getGroupTrendBarHeight(group, dateItem) }" :title="`${group.groupName}: ${formatNumber(getGroupDailyCredits(group, dateItem))}`"></div>
+                </div>
+                <div class="trend-bar-label">{{ formatTrendDate(dateItem) }}</div>
+              </div>
+            </div>
+            <div class="hourly-legend" style="margin-top: 12px;">
+              <div v-for="(group, gIdx) in groupTrendGroups" :key="group.groupId || 'ungrouped'" class="hourly-legend-item" :class="getGroupColorClass(gIdx)">
+                <span class="legend-dot"></span>
+                <span>{{ group.groupName }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 成员消耗排行 -->
+      <div v-if="statsMode !== 'group'" class="member-ranking">
+        <div class="ranking-header">
+          <div class="title-with-toggle">
+            <h4 class="section-subtitle">成员消耗排行</h4>
+            <button class="toggle-btn" @click="isRankingExpanded = !isRankingExpanded" :title="isRankingExpanded ? '收起' : '展开'">
+              <span class="toggle-icon" :class="{ rotated: !isRankingExpanded }">▼</span>
+            </button>
+          </div>
+          <button v-if="memberRanking.length > 0" class="export-btn" @click="exportToExcel" title="导出为Excel">导出Excel</button>
+        </div>
+        <div v-if="memberRanking.length > 0" v-show="isRankingExpanded" class="ranking-table-container collapsible-content">
+          <table class="ranking-table">
+            <thead>
+              <tr>
+                <th width="60">排名</th>
+                <th>成员</th>
+                <th width="100">总消耗</th>
+                <th width="80">次数</th>
+                <th width="120">Chatbot</th>
+                <th width="120">Codex</th>
+                <th width="120">Claude</th>
+                <th width="120">Gemini</th>
+                <th width="120">OpenClaw</th>
+                <th width="100">操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(member, index) in memberRanking" :key="member.userId">
+                <td><div class="rank-badge" :class="getRankClass(index)">{{ index + 1 }}</div></td>
+                <td>
+                  <div class="member-cell">
+                    <div class="member-name">
+                      {{ member.memberNickname || member.nickName }}
+                      <span v-if="member.memberNickname" class="member-tag">({{ member.nickName }})</span>
+                    </div>
+                    <div class="member-phone">{{ member.phonenumber || member.userName }}</div>
+                  </div>
+                </td>
+                <td><div class="credits-amount primary">{{ formatNumber(member.totalCredits) }}</div></td>
+                <td><div class="count-value">{{ member.totalCount || 0 }}</div></td>
+                <td><div class="type-credits">{{ formatNumber(member.chatbotCredits) }}</div></td>
+                <td><div class="type-credits">{{ formatNumber(member.codexCredits) }}</div></td>
+                <td><div class="type-credits">{{ formatNumber(member.claudecodeCredits) }}</div></td>
+                <td><div class="type-credits">{{ formatNumber(member.geminiCredits) }}</div></td>
+                <td><div class="type-credits">{{ formatNumber(member.openclawCredits) }}</div></td>
+                <td>
+                  <button class="detail-btn" @click="showMemberDetail(member)" title="查看消耗详情">详情</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div v-else v-show="isRankingExpanded" class="no-ranking collapsible-content">暂无成员消耗数据</div>
+      </div>
+    </template>
+
+    <!-- Empty -->
+    <div v-else class="empty-stats">
+      <p>该时间段内暂无统计数据</p>
+    </div>
+
+    <!-- 成员详情弹窗 -->
+    <StatsMemberDetail
+      :visible="showDetailDialog"
+      :loading="detailLoading"
+      :member="currentMember"
+      :details="memberModelDetails"
+      @close="closeDetailDialog"
+    />
+
+    <!-- 导出进度弹窗 -->
+    <StatsExportProgress :progress="exportProgress" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onUnmounted, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+import StatsHeader from './stats/StatsHeader.vue'
+import StatsSummary from './stats/StatsSummary.vue'
+import StatsMemberDetail from './stats/StatsMemberDetail.vue'
+import StatsExportProgress from './stats/StatsExportProgress.vue'
+import { useStatsApi } from './stats/useStatsApi'
+import { useStatsCharts } from './stats/useStatsCharts'
+import { useStatsExport } from './stats/useStatsExport'
+import {
+  formatNumber, formatDate, formatTrendDate, getRankClass,
+  getDateRange as calcDateRange, getStatsDays, sumDailyStats,
+  getGroupColorClass
+} from './stats/helpers'
+
+const props = defineProps<{ teamId: number }>()
+
+// API
+const api = useStatsApi(() => props.teamId)
+
+// Charts
+const charts = useStatsCharts()
+
+// 状态
+const loading = ref(false)
+const statsMode = ref('realtime')
+const dateRange = ref('30')
+const isStatsExpanded = ref(true)
+const isRankingExpanded = ref(true)
+const isHourlyChartExpanded = ref(true)
+
+const summary = ref<any>({})
+const memberRanking = ref<any[]>([])
+const trendData = ref<any>(null)
+
+// 24小时统计
+const hourlyStats = ref<any>(null)
+const hourlyStatsLoading = ref(false)
+const selectedHourlyMemberId = ref<number | null>(null)
+
+// 趋势
+const trendPeriod = ref<'hourly' | 'weekly' | 'monthly' | 'daily'>('weekly')
+const weeklyStats = ref<any>(null)
+const monthlyStats = ref<any>(null)
+const trendStatsLoading = ref(false)
+const selectedTrendMemberId = ref<number | null>(null)
+
+// 日期
+const yesterday = new Date()
+yesterday.setDate(yesterday.getDate() - 1)
+const selectedDate = ref(formatDate(yesterday))
+
+// 详情弹窗
+const showDetailDialog = ref(false)
+const detailLoading = ref(false)
+const currentMember = ref<any>(null)
+const memberModelDetails = ref<any>(null)
+
+// 分组
+const groupStatsData = ref<any>(null)
+const groupHistoryData = ref<any>(null)
+const groupStatsLoading = ref(false)
+
+// Refs for chart DOM（通过 nextTick 绑定）
+const realtimeHourlyChartEl = ref<HTMLElement | null>(null)
+const historyHourlyChartEl = ref<HTMLElement | null>(null)
+const weeklyChartEl = ref<HTMLElement | null>(null)
+const monthlyChartEl = ref<HTMLElement | null>(null)
+const trendLineChartEl = ref<HTMLElement | null>(null)
+
+// 同步 chart refs
+const syncChartRefs = () => {
+  charts.realtimeHourlyChartRef.value = realtimeHourlyChartEl.value
+  charts.historyHourlyChartRef.value = historyHourlyChartEl.value
+  charts.weeklyChartRef.value = weeklyChartEl.value
+  charts.monthlyChartRef.value = monthlyChartEl.value
+  charts.trendLineChartRef.value = trendLineChartEl.value
+}
+
+const onPieMount = (el: HTMLElement) => {
+  charts.pieChartRef.value = el
+  renderCharts()
+}
+
+// 导出
+const { exportProgress, exportToExcel } = useStatsExport(
+  api,
+  () => memberRanking.value,
+  () => statsMode.value,
+  () => dateRange.value,
+  () => selectedDate.value
+)
+
+// Computed
+const hasData = computed(() => {
+  if (statsMode.value === 'group') {
+    return groupStatsAllGroups.value.length > 0 || groupStatsLoading.value
+  }
+  return (summary.value && Object.keys(summary.value).length > 0) || memberRanking.value.length > 0
+})
+
+const currentStatsDays = computed(() => getStatsDays(statsMode.value, dateRange.value, selectedDate.value))
+
+const canShowHourlyTrend = computed(() => {
+  if (statsMode.value !== 'history') return false
+  return dateRange.value === 'custom' || dateRange.value === '1'
+})
+
+// 分组计算
+const groupStatsAllGroups = computed(() => {
+  if (groupStatsData.value) {
+    const groups = (groupStatsData.value.groups || []).map((g: any) => ({ ...g }))
+    const ungrouped = groupStatsData.value.ungrouped
+    if (ungrouped && (ungrouped.totalCredits > 0 || ungrouped.memberCount > 0)) {
+      groups.push({ ...ungrouped, groupId: null, groupName: '未分组', groupPath: '未分组' })
+    }
+    return groups.sort((a: any, b: any) => (b.totalCredits || 0) - (a.totalCredits || 0))
+  }
+  if (groupHistoryData.value) {
+    const groups = (groupHistoryData.value.groups || []).map((g: any) => {
+      const totals = sumDailyStats(g.dailyStats || [])
+      return { ...g, ...totals }
+    })
+    const ungrouped = groupHistoryData.value.ungrouped
+    if (ungrouped) {
+      const totals = sumDailyStats(ungrouped.dailyStats || [])
+      if (totals.totalCredits > 0 || ungrouped.memberCount > 0) {
+        groups.push({ ...ungrouped, ...totals, groupId: null, groupName: '未分组', groupPath: '未分组' })
+      }
+    }
+    return groups.sort((a: any, b: any) => (b.totalCredits || 0) - (a.totalCredits || 0))
+  }
+  return []
+})
+
+const groupTrendDates = computed(() => {
+  if (!groupHistoryData.value) return []
+  const allDates = new Set<string>()
+  const allGroups = [...(groupHistoryData.value.groups || [])]
+  if (groupHistoryData.value.ungrouped) allGroups.push(groupHistoryData.value.ungrouped)
+  allGroups.forEach((g: any) => (g.dailyStats || []).forEach((d: any) => allDates.add(d.date)))
+  return Array.from(allDates).sort()
+})
+
+const groupTrendGroups = computed(() => {
+  if (!groupHistoryData.value) return []
+  const groups = (groupHistoryData.value.groups || []).map((g: any) => ({
+    groupId: g.groupId, groupName: g.groupName, dailyStats: g.dailyStats || []
+  }))
+  const ungrouped = groupHistoryData.value.ungrouped
+  if (ungrouped && (ungrouped.dailyStats || []).length > 0) {
+    groups.push({ groupId: null, groupName: '未分组', dailyStats: ungrouped.dailyStats || [] })
+  }
+  return groups
+})
+
+const getGroupDailyCredits = (group: any, date: string) => {
+  const day = (group.dailyStats || []).find((d: any) => d.date === date)
+  return day ? day.totalCredits || 0 : 0
+}
+
+const getGroupTrendBarHeight = (group: any, date: string) => {
+  let maxVal = 0
+  groupTrendGroups.value.forEach((g: any) => {
+    groupTrendDates.value.forEach((d: string) => {
+      const val = getGroupDailyCredits(g, d)
+      if (val > maxVal) maxVal = val
+    })
+  })
+  if (maxVal === 0) return '0%'
+  return `${(Math.abs(getGroupDailyCredits(group, date)) / maxVal) * 100}%`
+}
+
+const getGroupBarWidth = (value: number) => {
+  const maxCredits = groupStatsAllGroups.value.length > 0
+    ? Math.max(...groupStatsAllGroups.value.map((g: any) => Math.abs(g.totalCredits || 0)))
+    : 0
+  if (maxCredits === 0) return '0%'
+  return `${(Math.abs(value || 0) / maxCredits) * 100}%`
+}
+
+// 渲染图表
+const renderCharts = () => {
+  nextTick(() => {
+    syncChartRefs()
+    charts.renderVisibleCharts({
+      statsMode: statsMode.value,
+      trendPeriod: trendPeriod.value,
+      summary: summary.value,
+      hourlyStats: hourlyStats.value,
+      weeklyStats: weeklyStats.value,
+      monthlyStats: monthlyStats.value,
+      trendData: trendData.value,
+    })
+  })
+}
+
+// 趋势总消耗/次数
+const getCurrentTrendTotal = () => {
+  if (trendPeriod.value === 'weekly' && weeklyStats.value) {
+    return weeklyStats.value.weeklyData?.reduce((sum: number, item: any) => sum + (item.totalCredits || 0), 0) || 0
+  } else if (trendPeriod.value === 'monthly' && monthlyStats.value) {
+    return monthlyStats.value.monthlyData?.reduce((sum: number, item: any) => sum + (item.totalCredits || 0), 0) || 0
+  } else if (trendPeriod.value === 'hourly' && hourlyStats.value) {
+    return hourlyStats.value.totalCredits || 0
+  } else if (trendPeriod.value === 'daily' && trendData.value) {
+    return trendData.value.trend?.reduce((sum: number, item: any) => sum + (item.totalCredits || 0), 0) || 0
+  }
+  return 0
+}
+
+const getCurrentTrendCount = () => {
+  if (trendPeriod.value === 'weekly' && weeklyStats.value) {
+    return weeklyStats.value.weeklyData?.reduce((sum: number, item: any) => sum + (item.totalCount || 0), 0) || 0
+  } else if (trendPeriod.value === 'monthly' && monthlyStats.value) {
+    return monthlyStats.value.monthlyData?.reduce((sum: number, item: any) => sum + (item.totalCount || 0), 0) || 0
+  } else if (trendPeriod.value === 'hourly' && hourlyStats.value) {
+    return hourlyStats.value.totalCount || 0
+  } else if (trendPeriod.value === 'daily' && trendData.value) {
+    return trendData.value.trend?.reduce((sum: number, item: any) => sum + (item.totalCount || 0), 0) || 0
+  }
+  return 0
+}
+
+// ==================== 数据加载 ====================
+
+const loadRealtimeStats = async () => {
+  loading.value = true
+  selectedHourlyMemberId.value = null
+  try {
+    const [statsData, membersData, hourlyData] = await Promise.all([
+      api.getTodayStats(),
+      api.getTodayMembersStats(),
+      api.getHourlyStats({})
+    ])
+    if (statsData) summary.value = statsData
+    if (membersData) memberRanking.value = Array.isArray(membersData) ? membersData : []
+    hourlyStats.value = hourlyData || null
+    trendData.value = null
+  } catch (error) {
+    console.error('加载实时统计失败:', error)
+    ElMessage.error('加载实时统计失败')
+  } finally {
+    loading.value = false
+    renderCharts()
+  }
+}
+
+const loadHistoryStats = async () => {
+  loading.value = true
+  selectedTrendMemberId.value = null
+  try {
+    const { startDate, endDate } = calcDateRange(dateRange.value, selectedDate.value)
+    let days = 7
+    if (dateRange.value === 'month' || dateRange.value === 'lastMonth') {
+      const start = new Date(startDate)
+      const end = new Date(endDate)
+      days = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24)) + 1
+    } else if (dateRange.value === 'week' || dateRange.value === 'lastWeek') {
+      days = 7
+    } else {
+      days = parseInt(dateRange.value) || 7
+    }
+
+    const trendParams: any = { days }
+    if (selectedTrendMemberId.value) trendParams.userId = selectedTrendMemberId.value
+
+    const [statsData, rankingData, trendRes, weeklyData] = await Promise.all([
+      api.getCreditsStats({ startDate, endDate }),
+      api.getMembersRanking({ startDate, endDate, limit: 999 }),
+      api.getTrend(trendParams),
+      api.getWeeklyStats({})
+    ])
+
+    if (statsData) summary.value = statsData
+    if (rankingData) memberRanking.value = Array.isArray(rankingData) ? rankingData : []
+    trendData.value = trendRes || null
+    weeklyStats.value = weeklyData || null
+  } catch (error) {
+    console.error('加载历史统计失败:', error)
+    ElMessage.error('加载历史统计失败')
+  } finally {
+    loading.value = false
+    renderCharts()
+  }
+}
+
+const loadCustomDateStats = async () => {
+  loading.value = true
+  trendPeriod.value = 'hourly'
+  selectedHourlyMemberId.value = null
+  selectedTrendMemberId.value = null
+  try {
+    if (!selectedDate.value) return
+    const startHour = `${selectedDate.value} 00:00:00`
+    const [statsData, rankingData, hourlyData] = await Promise.all([
+      api.getStatsByDate(selectedDate.value),
+      api.getMembersRankingByDate(selectedDate.value),
+      api.getHourlyStats({ startHour })
+    ])
+    if (statsData) summary.value = statsData
+    if (rankingData) memberRanking.value = Array.isArray(rankingData) ? rankingData : []
+    hourlyStats.value = hourlyData || null
+    trendData.value = null
+  } catch (error) {
+    console.error('加载指定日期统计失败:', error)
+    ElMessage.error('加载指定日期统计失败')
+  } finally {
+    loading.value = false
+    renderCharts()
+  }
+}
+
+// 分组数据加载
+const loadGroupRealtimeStats = async () => {
+  loading.value = true
+  groupStatsLoading.value = true
+  groupStatsData.value = null
+  groupHistoryData.value = null
+  try {
+    const data = await api.getTodayGroupStats({ limit: 20 })
+    if (data) {
+      groupStatsData.value = data
+      const allGroups = groupStatsAllGroups.value
+      summary.value = {
+        totalCredits: allGroups.reduce((s: number, g: any) => s + (g.totalCredits || 0), 0),
+        totalCount: allGroups.reduce((s: number, g: any) => s + (g.totalCount || 0), 0),
+        memberCount: allGroups.reduce((s: number, g: any) => s + (g.memberCount || 0), 0),
+        chatbotCredits: allGroups.reduce((s: number, g: any) => s + (g.chatbotCredits || 0), 0),
+        codexCredits: allGroups.reduce((s: number, g: any) => s + (g.codexCredits || 0), 0),
+        claudecodeCredits: allGroups.reduce((s: number, g: any) => s + (g.claudecodeCredits || 0), 0),
+        geminiCredits: allGroups.reduce((s: number, g: any) => s + (g.geminiCredits || 0), 0),
+        openclawCredits: allGroups.reduce((s: number, g: any) => s + (g.openclawCredits || 0), 0),
+      }
+    }
+  } catch (error) {
+    console.error('加载分组实时统计失败:', error)
+    ElMessage.error('加载分组统计失败')
+  } finally {
+    loading.value = false
+    groupStatsLoading.value = false
+  }
+}
+
+const loadGroupHistoryStats = async () => {
+  loading.value = true
+  groupStatsLoading.value = true
+  groupStatsData.value = null
+  groupHistoryData.value = null
+  try {
+    const { startDate, endDate } = calcDateRange(dateRange.value, selectedDate.value)
+    const data = await api.getHistoryGroupStats({ startDate, endDate, limit: 20 })
+    if (data) {
+      groupHistoryData.value = data
+      const allGroups = groupStatsAllGroups.value
+      summary.value = {
+        totalCredits: allGroups.reduce((s: number, g: any) => s + (g.totalCredits || 0), 0),
+        totalCount: allGroups.reduce((s: number, g: any) => s + (g.totalCount || 0), 0),
+        memberCount: allGroups.reduce((s: number, g: any) => s + (g.memberCount || 0), 0),
+        chatbotCredits: allGroups.reduce((s: number, g: any) => s + (g.chatbotCredits || 0), 0),
+        codexCredits: allGroups.reduce((s: number, g: any) => s + (g.codexCredits || 0), 0),
+        claudecodeCredits: allGroups.reduce((s: number, g: any) => s + (g.claudecodeCredits || 0), 0),
+        geminiCredits: allGroups.reduce((s: number, g: any) => s + (g.geminiCredits || 0), 0),
+        openclawCredits: allGroups.reduce((s: number, g: any) => s + (g.openclawCredits || 0), 0),
+      }
+    }
+  } catch (error) {
+    console.error('加载分组历史统计失败:', error)
+    ElMessage.error('加载分组历史统计失败')
+  } finally {
+    loading.value = false
+    groupStatsLoading.value = false
+  }
+}
+
+const loadGroupCustomDateStats = async () => {
+  loading.value = true
+  groupStatsLoading.value = true
+  groupStatsData.value = null
+  groupHistoryData.value = null
+  if (!selectedDate.value) return
+  try {
+    const data = await api.getHistoryGroupStats({ startDate: selectedDate.value, endDate: selectedDate.value, limit: 20 })
+    if (data) {
+      groupHistoryData.value = data
+      const allGroups = groupStatsAllGroups.value
+      summary.value = {
+        totalCredits: allGroups.reduce((s: number, g: any) => s + (g.totalCredits || 0), 0),
+        totalCount: allGroups.reduce((s: number, g: any) => s + (g.totalCount || 0), 0),
+        memberCount: allGroups.reduce((s: number, g: any) => s + (g.memberCount || 0), 0),
+        chatbotCredits: allGroups.reduce((s: number, g: any) => s + (g.chatbotCredits || 0), 0),
+        codexCredits: allGroups.reduce((s: number, g: any) => s + (g.codexCredits || 0), 0),
+        claudecodeCredits: allGroups.reduce((s: number, g: any) => s + (g.claudecodeCredits || 0), 0),
+        geminiCredits: allGroups.reduce((s: number, g: any) => s + (g.geminiCredits || 0), 0),
+        openclawCredits: allGroups.reduce((s: number, g: any) => s + (g.openclawCredits || 0), 0),
+      }
+    }
+  } catch (error) {
+    console.error('加载分组指定日期统计失败:', error)
+    ElMessage.error('加载分组统计失败')
+  } finally {
+    loading.value = false
+    groupStatsLoading.value = false
+  }
+}
+
+const loadGroupStats = () => {
+  if (statsMode.value === 'realtime') loadGroupRealtimeStats()
+  else if (dateRange.value === 'custom') loadGroupCustomDateStats()
+  else loadGroupHistoryStats()
+}
+
+const loadStats = () => {
+  if (statsMode.value === 'realtime') loadRealtimeStats()
+  else if (statsMode.value === 'group') loadGroupStats()
+  else if (dateRange.value === 'custom') loadCustomDateStats()
+  else loadHistoryStats()
+}
+
+// ==================== 交互 ====================
+
+const switchMode = (mode: string) => {
+  statsMode.value = mode
+  if (mode === 'history') {
+    dateRange.value = '30'
+    trendPeriod.value = 'weekly'
+  }
+  loadStats()
+}
+
+const onDateRangeChange = () => {
+  if (statsMode.value === 'history') {
+    trendPeriod.value = (dateRange.value === 'custom' || dateRange.value === '1') ? 'hourly' : 'weekly'
+  }
+  loadStats()
+}
+
+const onCustomDateChange = () => {
+  if (statsMode.value === 'group') { loadGroupCustomDateStats(); return }
+  loadCustomDateStats()
+}
+
+const goToPreviousDay = () => {
+  if (!selectedDate.value) return
+  const d = new Date(selectedDate.value)
+  d.setDate(d.getDate() - 1)
+  selectedDate.value = formatDate(d)
+  statsMode.value === 'group' ? loadGroupCustomDateStats() : loadCustomDateStats()
+}
+
+const goToNextDay = () => {
+  if (!selectedDate.value) return
+  const d = new Date(selectedDate.value)
+  const y = new Date(); y.setDate(y.getDate() - 1)
+  d.setDate(d.getDate() + 1)
+  if (d <= y) {
+    selectedDate.value = formatDate(d)
+    statsMode.value === 'group' ? loadGroupCustomDateStats() : loadCustomDateStats()
+  }
+}
+
+// 24小时成员筛选
+const onHourlyMemberChange = async () => {
+  hourlyStatsLoading.value = true
+  try {
+    const params: any = {}
+    if (selectedHourlyMemberId.value) params.userId = selectedHourlyMemberId.value
+    if (statsMode.value !== 'realtime' && dateRange.value === 'custom' && selectedDate.value) {
+      params.startHour = `${selectedDate.value} 00:00:00`
+    }
+    hourlyStats.value = await api.getHourlyStats(params) || null
+  } catch (error) {
+    console.error('加载小时统计失败:', error)
+    hourlyStats.value = null
+  } finally {
+    hourlyStatsLoading.value = false
+    renderCharts()
+  }
+}
+
+// 趋势周期切换
+const onTrendPeriodChange = () => {
+  loadTrendStats()
+  if (trendPeriod.value === 'daily') renderCharts()
+}
+
+const onTrendMemberChange = () => {
+  if (trendPeriod.value === 'hourly') {
+    selectedHourlyMemberId.value = selectedTrendMemberId.value
+    onHourlyMemberChange()
+  } else if (trendPeriod.value === 'daily') {
+    loadDailyTrendData()
+  } else {
+    loadTrendStats()
+  }
+}
+
+const loadTrendStats = async () => {
+  if (trendPeriod.value === 'weekly') {
+    trendStatsLoading.value = true
+    try {
+      const params: any = {}
+      if (selectedTrendMemberId.value) params.userId = selectedTrendMemberId.value
+      weeklyStats.value = await api.getWeeklyStats(params) || null
+    } catch (error) { console.error('加载周趋势失败:', error); weeklyStats.value = null }
+    finally { trendStatsLoading.value = false; renderCharts() }
+  } else if (trendPeriod.value === 'monthly') {
+    trendStatsLoading.value = true
+    try {
+      const params: any = {}
+      if (selectedTrendMemberId.value) params.userId = selectedTrendMemberId.value
+      monthlyStats.value = await api.getMonthlyStats(params) || null
+    } catch (error) { console.error('加载月趋势失败:', error); monthlyStats.value = null }
+    finally { trendStatsLoading.value = false; renderCharts() }
+  } else if (trendPeriod.value === 'hourly') {
+    hourlyStatsLoading.value = true
+    try {
+      const params: any = {}
+      if (selectedHourlyMemberId.value) params.userId = selectedHourlyMemberId.value
+      if (dateRange.value === 'custom' && selectedDate.value) {
+        params.startHour = `${selectedDate.value} 00:00:00`
+      } else if (dateRange.value === '1') {
+        const y = new Date(); y.setDate(y.getDate() - 1)
+        params.startHour = `${formatDate(y)} 00:00:00`
+      }
+      hourlyStats.value = await api.getHourlyStats(params) || null
+    } catch (error) { console.error('加载小时统计失败:', error); hourlyStats.value = null }
+    finally { hourlyStatsLoading.value = false; renderCharts() }
+  }
+}
+
+const loadDailyTrendData = async () => {
+  try {
+    const { startDate, endDate } = calcDateRange(dateRange.value, selectedDate.value)
+    let days = 7
+    if (dateRange.value === 'month' || dateRange.value === 'lastMonth') {
+      days = Math.ceil((new Date(endDate).getTime() - new Date(startDate).getTime()) / (1000 * 60 * 60 * 24)) + 1
+    } else if (dateRange.value === 'week' || dateRange.value === 'lastWeek') {
+      days = 7
+    } else { days = parseInt(dateRange.value) || 7 }
+    const trendParams: any = { days }
+    if (selectedTrendMemberId.value) trendParams.userId = selectedTrendMemberId.value
+    trendData.value = await api.getTrend(trendParams) || null
+    renderCharts()
+  } catch (error) { console.error('加载日趋势数据失败:', error) }
+}
+
+// 成员详情
+const showMemberDetail = async (member: any) => {
+  currentMember.value = member
+  showDetailDialog.value = true
+  detailLoading.value = true
+  memberModelDetails.value = null
+  try {
+    if (statsMode.value === 'realtime') {
+      memberModelDetails.value = await api.getUserTodayModels(member.userId)
+      if (!memberModelDetails.value) ElMessage.error('获取消耗详情失败')
+    } else {
+      if (member.modelDetails && member.modelDetails.length > 0) {
+        memberModelDetails.value = {
+          totalCredits: member.totalCredits, totalCount: member.totalCount, totalCost: member.totalCost,
+          modelDetails: member.modelDetails,
+          ...(member.totalUsage && { totalUsage: member.totalUsage })
+        }
+      } else {
+        memberModelDetails.value = { totalCredits: member.totalCredits, totalCount: member.totalCount, modelDetails: [] }
+      }
+    }
+  } catch (error) {
+    console.error('获取成员消耗详情失败:', error)
+    ElMessage.error('获取消耗详情失败')
+  } finally { detailLoading.value = false }
+}
+
+const closeDetailDialog = () => {
+  showDetailDialog.value = false
+  currentMember.value = null
+  memberModelDetails.value = null
+}
+
+// Watch
+watch(() => props.teamId, () => {
+  if (props.teamId) loadStats()
+}, { immediate: true })
+
+onUnmounted(() => {
+  charts.disposeAll()
+})
+</script>
+
+<style src="./stats/stats.css"></style>