@agentunion/kite 1.4.0 → 1.6.0

package/extensions/services/evol/web/src/components/team/stats/StatsMemberDetail.vue

@@ -0,0 +1,415 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    title=""
+    width="720px"
+    :close-on-click-modal="true"
+    :close-on-press-escape="true"
+    @close="$emit('close')"
+    class="member-detail-dialog"
+    append-to-body
+  >
+    <template #header>
+      <div class="dialog-header">
+        <h3 class="dialog-title">成员消耗详情</h3>
+        <div v-if="member" class="dialog-member-info">
+          <span class="dialog-member-name">{{ member.memberNickname || member.nickName }}</span>
+          <span class="dialog-member-phone">{{ member.phonenumber || member.userName }}</span>
+        </div>
+      </div>
+    </template>
+
+    <!-- 加载中 -->
+    <div v-if="loading" class="dialog-loading">
+      <div class="dialog-spinner"></div>
+      <span>加载中...</span>
+    </div>
+
+    <!-- 详情内容 -->
+    <div v-else-if="details" class="detail-content">
+      <!-- 汇总卡片 -->
+      <div class="detail-summary-row">
+        <div class="detail-summary-card">
+          <div class="dsc-label">总消耗积分</div>
+          <div class="dsc-value accent">{{ formatNumber(details.totalCredits) }}</div>
+        </div>
+        <div class="detail-summary-card">
+          <div class="dsc-label">使用次数</div>
+          <div class="dsc-value">{{ details.totalCount || 0 }} <small>次</small></div>
+        </div>
+        <div v-if="details.totalUsage !== undefined && details.totalUsage !== null" class="detail-summary-card">
+          <div class="dsc-label">总Token数</div>
+          <div class="dsc-value">{{ formatTokenNumber(getTotalTokens(details.totalUsage)) }}</div>
+        </div>
+      </div>
+
+      <!-- 按类型分组的模型明细 -->
+      <div v-if="groupedDetails.length > 0" class="model-groups">
+        <h4 class="model-groups-title">模型消耗明细</h4>
+        <div v-for="group in groupedDetails" :key="group.type" class="model-type-group">
+          <div class="mtg-header">
+            <span class="mtg-badge" :class="group.type">{{ group.label }}</span>
+            <span class="mtg-summary">{{ formatNumber(group.totalCredits) }} 积分 · {{ group.totalCount }} 次</span>
+          </div>
+          <div class="mtg-models">
+            <div v-for="(model, index) in group.models" :key="index" class="mtg-model-card">
+              <div class="mmc-top">
+                <span class="mmc-name">{{ model.modelName }}</span>
+                <span class="mmc-credits">{{ formatNumber(model.credits) }} 积分</span>
+              </div>
+              <div class="mmc-meta">
+                <span>使用 {{ model.count || 0 }} 次</span>
+                <span>{{ getModelCostDisplay(model) }}</span>
+              </div>
+              <!-- Token grid -->
+              <div v-if="model.usage !== undefined && model.usage !== null" class="mmc-tokens">
+                <div class="mmc-token" :class="'t-input'">
+                  <span class="mt-label">输入</span>
+                  <span class="mt-val">{{ getInputTokens(model.usage) > 0 ? formatTokenNumber(getInputTokens(model.usage)) : '-' }}</span>
+                </div>
+                <div class="mmc-token" :class="'t-output'">
+                  <span class="mt-label">输出</span>
+                  <span class="mt-val">{{ getOutputTokens(model.usage) > 0 ? formatTokenNumber(getOutputTokens(model.usage)) : '-' }}</span>
+                </div>
+                <div class="mmc-token" :class="'t-cache-w'">
+                  <span class="mt-label">缓存写</span>
+                  <span class="mt-val">{{ getCacheCreationTokens(model.usage) > 0 ? formatTokenNumber(getCacheCreationTokens(model.usage)) : '-' }}</span>
+                </div>
+                <div class="mmc-token" :class="'t-cache-r'">
+                  <span class="mt-label">缓存读</span>
+                  <span class="mt-val">{{ getCacheReadTokens(model.usage) > 0 ? formatTokenNumber(getCacheReadTokens(model.usage)) : '-' }}</span>
+                </div>
+                <div class="mmc-token" :class="'t-total'">
+                  <span class="mt-label">合计</span>
+                  <span class="mt-val">{{ formatTokenNumber(getTotalTokens(model.usage)) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="detail-empty">
+        <p>暂无模型消耗详情数据</p>
+      </div>
+    </div>
+
+    <!-- 加载失败 -->
+    <div v-else class="detail-empty">
+      <p>加载详情失败</p>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  formatNumber, formatTokenNumber, getTypeLabel, getModelCostDisplay,
+  getTotalTokens, getInputTokens, getOutputTokens, getCacheCreationTokens, getCacheReadTokens
+} from './helpers'
+
+const props = defineProps<{
+  visible: boolean
+  loading: boolean
+  member: any
+  details: any
+}>()
+
+defineEmits<{ close: [] }>()
+
+const groupedDetails = computed(() => {
+  if (!props.details?.modelDetails?.length) return []
+  const groups: Record<string, { type: string; label: string; models: any[]; totalCredits: number; totalCount: number }> = {}
+  const typeOrder = ['chatbot', 'codex', 'claudecode', 'gemini', 'openclaw']
+  for (const model of props.details.modelDetails) {
+    const type = model.type || 'unknown'
+    if (!groups[type]) {
+      groups[type] = { type, label: getTypeLabel(type), models: [], totalCredits: 0, totalCount: 0 }
+    }
+    groups[type].models.push(model)
+    groups[type].totalCredits += Math.abs(model.credits || 0)
+    groups[type].totalCount += model.count || 0
+  }
+  return Object.values(groups).sort((a, b) => {
+    const ai = typeOrder.indexOf(a.type)
+    const bi = typeOrder.indexOf(b.type)
+    return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)
+  })
+})
+</script>
+
+<style>
+/* el-dialog 自定义样式（全局，因为 el-dialog 通过 teleport 渲染到 body） */
+.member-detail-dialog .el-dialog {
+  border-radius: var(--radius-lg, 20px);
+  overflow: hidden;
+}
+
+.member-detail-dialog .el-dialog__header {
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid var(--border-color);
+  margin-right: 0;
+}
+
+.member-detail-dialog .el-dialog__body {
+  padding: 24px;
+  max-height: 65vh;
+  overflow-y: auto;
+}
+</style>
+
+<style scoped>
+/* Dialog header */
+.dialog-header {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.dialog-title {
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.dialog-member-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.dialog-member-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.dialog-member-phone {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+/* Loading */
+.dialog-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 48px 20px;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.dialog-spinner {
+  width: 28px;
+  height: 28px;
+  border: 3px solid var(--border-color);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: d-spin 0.6s linear infinite;
+}
+
+@keyframes d-spin { to { transform: rotate(360deg); } }
+
+/* Summary row */
+.detail-summary-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.detail-summary-card {
+  padding: 14px 16px;
+  border-radius: var(--radius, 12px);
+  border: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+}
+
+.dsc-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 6px;
+}
+
+.dsc-value {
+  font-size: 22px;
+  font-weight: 800;
+  color: var(--text-primary);
+  line-height: 1.1;
+  font-family: 'Spline Sans Mono', monospace;
+}
+
+.dsc-value.accent {
+  color: var(--primary);
+}
+
+.dsc-value small {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+/* Model groups */
+.model-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.model-groups-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.model-type-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mtg-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.mtg-badge {
+  display: inline-flex;
+  padding: 3px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  border: 1px solid transparent;
+}
+
+.mtg-badge.chatbot { background: rgba(14, 165, 233, 0.1); color: #0ea5e9; border-color: rgba(14, 165, 233, 0.2); }
+.mtg-badge.codex { background: rgba(245, 158, 11, 0.1); color: #d97706; border-color: rgba(245, 158, 11, 0.2); }
+.mtg-badge.claudecode { background: rgba(249, 115, 22, 0.1); color: #ea580c; border-color: rgba(249, 115, 22, 0.2); }
+.mtg-badge.gemini { background: rgba(236, 72, 153, 0.1); color: #db2777; border-color: rgba(236, 72, 153, 0.2); }
+.mtg-badge.openclaw { background: rgba(16, 185, 129, 0.1); color: #059669; border-color: rgba(16, 185, 129, 0.2); }
+
+.mtg-summary {
+  font-size: 13px;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.mtg-models {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Model card */
+.mtg-model-card {
+  padding: 14px 16px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius, 12px);
+  background: var(--bg-primary);
+  transition: box-shadow 0.15s;
+}
+
+.mtg-model-card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.mmc-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.mmc-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.mmc-credits {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--primary);
+  white-space: nowrap;
+  font-family: 'Spline Sans Mono', monospace;
+}
+
+.mmc-meta {
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+
+/* Token grid */
+.mmc-tokens {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 6px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border-light);
+}
+
+.mmc-token {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+  border-radius: 8px;
+  background: var(--bg-secondary);
+  border-left: 3px solid var(--border-color);
+}
+
+.mmc-token.t-input { border-left-color: #3b82f6; }
+.mmc-token.t-output { border-left-color: #10b981; }
+.mmc-token.t-cache-w { border-left-color: #f59e0b; }
+.mmc-token.t-cache-r { border-left-color: #06b6d4; }
+.mmc-token.t-total { border-left-color: #8b5cf6; }
+
+.mt-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.mmc-token.t-input .mt-label { color: #3b82f6; }
+.mmc-token.t-output .mt-label { color: #10b981; }
+.mmc-token.t-total .mt-label { color: #8b5cf6; }
+
+.mt-val {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-primary);
+  font-family: 'Spline Sans Mono', monospace;
+}
+
+/* Empty */
+.detail-empty {
+  text-align: center;
+  padding: 48px 20px;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.detail-empty p { margin: 0; }
+
+/* Responsive */
+@media (max-width: 640px) {
+  .mmc-tokens { grid-template-columns: repeat(2, 1fr); }
+  .detail-summary-row { grid-template-columns: 1fr; }
+}
+</style>

package/extensions/services/evol/web/src/components/team/stats/StatsSummary.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="stats-summary-row">
+    <div class="summary-card compact">
+      <div class="summary-label">团队总消耗</div>
+      <div class="summary-value primary">{{ formatNumber(summary.totalCredits) }}</div>
+      <div class="summary-subtitle">{{ summary.totalCount || 0 }} 次使用</div>
+    </div>
+    <div class="summary-card compact">
+      <div class="summary-label">团队成员</div>
+      <div class="summary-value">{{ summary.memberCount || 0 }}</div>
+      <div class="summary-subtitle">{{ statsDays }} 天统计</div>
+    </div>
+    <div class="summary-card compact pie-card">
+      <div ref="pieChartEl" class="pie-chart-container"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { formatNumber } from './helpers'
+
+const props = defineProps<{
+  summary: any
+  statsDays: number
+  pieChartRef: HTMLElement | null
+}>()
+
+// 将内部 ref 暴露给父组件（通过 v-model 或 expose）
+const pieChartEl = ref<HTMLElement | null>(null)
+
+defineExpose({ pieChartEl })
+
+// 当 pieChartEl 可用时通知父组件
+const emit = defineEmits<{
+  'pieMount': [el: HTMLElement]
+}>()
+
+onMounted(() => {
+  if (pieChartEl.value) emit('pieMount', pieChartEl.value)
+})
+</script>

package/extensions/services/evol/web/src/components/team/stats/helpers.ts

@@ -0,0 +1,195 @@
+/**
+ * 团队统计 - 通用工具函数
+ */
+
+// 格式化日期
+export const formatDate = (date: Date) => {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+}
+
+// 格式化数字
+export const formatNumber = (value: number) => {
+  const num = Math.abs(value || 0)
+  if (num >= 10000) return (num / 10000).toFixed(1) + 'w'
+  if (num >= 1000) return (num / 1000).toFixed(1) + 'k'
+  return num.toString()
+}
+
+// 格式化 Token 数字
+export const formatTokenNumber = (value: number) => {
+  if (!value && value !== 0) return '0'
+  const num = Math.abs(value)
+  if (num >= 1000000) return (num / 1000000).toFixed(2) + 'M'
+  if (num >= 1000) return (num / 1000).toFixed(1) + 'k'
+  return num.toLocaleString()
+}
+
+// 排名样式
+export const getRankClass = (index: number) => {
+  if (index === 0) return 'gold'
+  if (index === 1) return 'silver'
+  if (index === 2) return 'bronze'
+  return ''
+}
+
+// 类型标签
+export const getTypeLabel = (type: string) => {
+  const labels: Record<string, string> = {
+    'chatbot': 'Chatbot',
+    'codex': 'Codex',
+    'claudecode': 'Claude Code',
+    'gemini': 'Gemini',
+    'openclaw': 'OpenClaw'
+  }
+  return labels[type] || type
+}
+
+// 模型类型名称
+export const getModelTypeName = (type: string): string => {
+  const typeMap: Record<string, string> = {
+    'claudecode': 'Claude Code',
+    'codex': 'Codex',
+    'gemini': 'Gemini',
+    'chatbot': 'ChatBot'
+  }
+  return typeMap[type] || type
+}
+
+// 模型消耗金额显示
+export const getModelCostDisplay = (model: any) => {
+  if (model.type === 'chatbot') {
+    return `¥${(Math.abs(model.credits || 0) / 1000).toFixed(2)}`
+  }
+  return `$${model.cost ? model.cost.toFixed(2) : '0.00'}`
+}
+
+// ==================== Usage 数据兼容性处理 ====================
+
+export const getTotalTokens = (usage: any): number => {
+  if (usage === undefined || usage === null) return 0
+  if (typeof usage === 'number') return usage
+  if (typeof usage === 'object') {
+    if (usage.total_tokens) return usage.total_tokens
+    const inputTokens = usage.input_tokens || 0
+    const outputTokens = usage.output_tokens || 0
+    if (inputTokens > 0 || outputTokens > 0) return inputTokens + outputTokens
+    return (usage.input_token || 0) + (usage.output_token || 0)
+  }
+  return 0
+}
+
+export const getInputTokens = (usage: any): number => {
+  if (usage === undefined || usage === null) return 0
+  if (typeof usage === 'number') return 0
+  if (typeof usage === 'object') {
+    return usage.prompt_tokens || usage.input_tokens || usage.input_token || 0
+  }
+  return 0
+}
+
+export const getOutputTokens = (usage: any): number => {
+  if (usage === undefined || usage === null) return 0
+  if (typeof usage === 'number') return 0
+  if (typeof usage === 'object') {
+    return usage.completion_tokens || usage.output_tokens || usage.output_token || 0
+  }
+  return 0
+}
+
+export const getCacheCreationTokens = (usage: any): number => {
+  if (usage === undefined || usage === null) return 0
+  if (typeof usage === 'object') return usage.cache_creation_input_tokens || 0
+  return 0
+}
+
+export const getCacheReadTokens = (usage: any): number => {
+  if (usage === undefined || usage === null) return 0
+  if (typeof usage === 'object') return usage.cache_read_input_tokens || 0
+  return 0
+}
+
+// 格式化趋势图日期
+export const formatTrendDate = (dateStr: string) => {
+  if (!dateStr) return ''
+  const date = new Date(dateStr)
+  return `${date.getMonth() + 1}/${date.getDate()}`
+}
+
+// 日期范围计算
+export const getDateRange = (dateRangeVal: string, selectedDateVal: string) => {
+  const today = new Date()
+  let startDate: string
+  let endDate = formatDate(today)
+
+  if (dateRangeVal === 'month') {
+    startDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-01`
+  } else if (dateRangeVal === 'lastMonth') {
+    const lastMonthStart = new Date(today.getFullYear(), today.getMonth() - 1, 1)
+    const lastMonthEnd = new Date(today.getFullYear(), today.getMonth(), 0)
+    startDate = formatDate(lastMonthStart)
+    endDate = formatDate(lastMonthEnd)
+  } else if (dateRangeVal === 'week') {
+    const dayOfWeek = today.getDay() || 7
+    const monday = new Date(today)
+    monday.setDate(today.getDate() - (dayOfWeek - 1))
+    startDate = formatDate(monday)
+  } else if (dateRangeVal === 'lastWeek') {
+    const dayOfWeek = today.getDay() || 7
+    const lastMonday = new Date(today)
+    lastMonday.setDate(today.getDate() - dayOfWeek - 6)
+    const lastSunday = new Date(today)
+    lastSunday.setDate(today.getDate() - dayOfWeek)
+    startDate = formatDate(lastMonday)
+    endDate = formatDate(lastSunday)
+  } else if (dateRangeVal === 'custom') {
+    startDate = selectedDateVal
+    endDate = selectedDateVal
+  } else {
+    const days = parseInt(dateRangeVal)
+    const start = new Date()
+    start.setDate(start.getDate() - days)
+    startDate = formatDate(start)
+  }
+
+  return { startDate, endDate }
+}
+
+// 计算统计天数
+export const getStatsDays = (statsMode: string, dateRangeVal: string, selectedDateVal: string) => {
+  if (statsMode === 'realtime') return 1
+  if (dateRangeVal === 'custom' && selectedDateVal) return 1
+  if (dateRangeVal === 'lastWeek') return 7
+  return parseInt(dateRangeVal) || 0
+}
+
+// 汇总 dailyStats 数组
+export const sumDailyStats = (dailyStats: any[]) => {
+  return dailyStats.reduce((acc: any, day: any) => {
+    acc.totalCredits += day.totalCredits || 0
+    acc.totalCount += day.totalCount || 0
+    acc.chatbotCredits += day.chatbotCredits || 0
+    acc.codexCredits += day.codexCredits || 0
+    acc.claudecodeCredits += day.claudecodeCredits || 0
+    acc.geminiCredits += day.geminiCredits || 0
+    acc.openclawCredits += day.openclawCredits || 0
+    return acc
+  }, {
+    totalCredits: 0, totalCount: 0,
+    chatbotCredits: 0, codexCredits: 0, claudecodeCredits: 0,
+    geminiCredits: 0, openclawCredits: 0
+  })
+}
+
+// ECharts 颜色配置
+export const CHART_COLORS = {
+  chatbot: '#0ea5e9',
+  codex: '#fbbf24',
+  claudecode: '#f97316',
+  gemini: '#ec4899',
+  openclaw: '#d97706',
+  total: '#374151'
+}
+
+// 分组颜色
+export const groupColorClasses = ['group-color-1', 'group-color-2', 'group-color-3', 'group-color-4', 'group-color-5', 'group-color-6']
+export const getGroupColorClass = (index: number) => groupColorClasses[index % groupColorClasses.length]