@agentunion/kite 1.5.0 → 1.6.0

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

@@ -0,0 +1,114 @@
+/**
+ * 团队统计 API 封装
+ * 将 electron-app 的 teamPresenter.xxx() 适配为 kite 的 callRpc('evol.team.xxx')
+ */
+import { useConnectionStore } from '@/stores/connection'
+import { useAuthStore } from '@/stores/auth'
+
+export function useStatsApi(teamId: () => number) {
+  const connectionStore = useConnectionStore()
+  const authStore = useAuthStore()
+
+  async function callTeamRpc(method: string, extra: Record<string, any> = {}) {
+    return connectionStore.callRpc<any>(`evol.team.${method}`, {
+      kiteToken: authStore.kiteToken,
+      teamId: teamId(),
+      ...extra
+    })
+  }
+
+  // 提取数据的通用方法：kite 返回 { success, data }
+  function extractData(result: any): any {
+    if (result?.success) return result.data
+    return null
+  }
+
+  // === 实时模式 ===
+  async function getTodayStats() {
+    const res = await callTeamRpc('get_today_stats')
+    return extractData(res)
+  }
+
+  async function getTodayMembersStats() {
+    const res = await callTeamRpc('get_today_members_stats')
+    const data = extractData(res)
+    return data?.members || data || []
+  }
+
+  async function getHourlyStats(params: Record<string, any> = {}) {
+    const res = await callTeamRpc('get_hourly_stats', params)
+    return extractData(res)
+  }
+
+  // === 历史模式 ===
+  async function getCreditsStats(params: Record<string, any>) {
+    const res = await callTeamRpc('get_credits_stats', params)
+    return extractData(res)
+  }
+
+  async function getMembersRanking(params: Record<string, any>) {
+    const res = await callTeamRpc('get_members_ranking', params)
+    const data = extractData(res)
+    return data?.ranking || data || []
+  }
+
+  async function getTrend(params: Record<string, any>) {
+    const res = await callTeamRpc('get_trend', params)
+    return extractData(res)
+  }
+
+  async function getWeeklyStats(params: Record<string, any> = {}) {
+    const res = await callTeamRpc('get_weekly_stats', params)
+    return extractData(res)
+  }
+
+  async function getMonthlyStats(params: Record<string, any> = {}) {
+    const res = await callTeamRpc('get_monthly_stats', params)
+    return extractData(res)
+  }
+
+  // === 指定日期（复用 get_credits_stats / get_members_ranking） ===
+  async function getStatsByDate(date: string) {
+    const res = await callTeamRpc('get_credits_stats', { startDate: date, endDate: date })
+    return extractData(res)
+  }
+
+  async function getMembersRankingByDate(date: string) {
+    const res = await callTeamRpc('get_members_ranking', { startDate: date, endDate: date, limit: 999 })
+    const data = extractData(res)
+    return data?.ranking || data || []
+  }
+
+  // === 分组 ===
+  async function getTodayGroupStats(params: Record<string, any> = {}) {
+    const res = await callTeamRpc('get_today_group_stats', params)
+    return extractData(res)
+  }
+
+  async function getHistoryGroupStats(params: Record<string, any>) {
+    const res = await callTeamRpc('get_history_group_stats', params)
+    return extractData(res)
+  }
+
+  // === 成员详情 ===
+  async function getUserTodayModels(userId: number) {
+    const res = await callTeamRpc('get_user_today_models', { userId })
+    return extractData(res)
+  }
+
+  return {
+    getTodayStats,
+    getTodayMembersStats,
+    getHourlyStats,
+    getCreditsStats,
+    getMembersRanking,
+    getTrend,
+    getWeeklyStats,
+    getMonthlyStats,
+    getStatsByDate,
+    getMembersRankingByDate,
+    getTodayGroupStats,
+    getHistoryGroupStats,
+    getUserTodayModels,
+  }
+}

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

@@ -0,0 +1,242 @@
+/**
+ * ECharts 图表逻辑
+ */
+import { ref, nextTick } from 'vue'
+import * as echarts from 'echarts/core'
+import { LineChart, PieChart } from 'echarts/charts'
+import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import { formatNumber, CHART_COLORS, formatTrendDate } from './helpers'
+
+echarts.use([LineChart, PieChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, CanvasRenderer])
+
+export function useStatsCharts() {
+  // DOM refs
+  const pieChartRef = ref<HTMLElement | null>(null)
+  const realtimeHourlyChartRef = ref<HTMLElement | null>(null)
+  const historyHourlyChartRef = ref<HTMLElement | null>(null)
+  const weeklyChartRef = ref<HTMLElement | null>(null)
+  const monthlyChartRef = ref<HTMLElement | null>(null)
+  const trendLineChartRef = ref<HTMLElement | null>(null)
+
+  // ECharts instances
+  let pieChartInstance: echarts.ECharts | null = null
+  let realtimeHourlyChartInstance: echarts.ECharts | null = null
+  let historyHourlyChartInstance: echarts.ECharts | null = null
+  let weeklyChartInstance: echarts.ECharts | null = null
+  let monthlyChartInstance: echarts.ECharts | null = null
+  let trendLineChartInstance: echarts.ECharts | null = null
+
+  const disposeChart = (instance: echarts.ECharts | null) => {
+    if (instance) instance.dispose()
+    return null
+  }
+
+  // 折线图通用配置
+  const buildLineChartOption = (xData: string[], seriesData: { name: string; color: string; data: number[]; lineWidth?: number }[]) => ({
+    tooltip: {
+      trigger: 'axis' as const,
+      backgroundColor: 'rgba(255,255,255,0.96)',
+      borderColor: '#e5e7eb',
+      borderWidth: 1,
+      textStyle: { color: '#374151', fontSize: 12 },
+      formatter: (params: any) => {
+        let html = `<div style="font-weight:600;margin-bottom:4px">${params[0].axisValue}</div>`
+        for (const p of params) {
+          html += `<div style="display:flex;align-items:center;gap:6px;margin:2px 0">
+            <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${p.color}"></span>
+            <span>${p.seriesName}</span>
+            <span style="font-weight:600;margin-left:auto">${formatNumber(p.value)}</span>
+          </div>`
+        }
+        return html
+      }
+    },
+    legend: {
+      bottom: 0,
+      itemWidth: 12,
+      itemHeight: 8,
+      textStyle: { fontSize: 12, color: '#6b7280' }
+    },
+    grid: { top: 10, left: 10, right: 16, bottom: 36, containLabel: true },
+    xAxis: {
+      type: 'category' as const,
+      data: xData,
+      axisLine: { lineStyle: { color: '#e5e7eb' } },
+      axisLabel: { fontSize: 11, color: '#6b7280' },
+      axisTick: { show: false }
+    },
+    yAxis: {
+      type: 'value' as const,
+      splitLine: { lineStyle: { color: '#f3f4f6' } },
+      axisLabel: { fontSize: 11, color: '#9ca3af', formatter: (v: number) => formatNumber(v) }
+    },
+    series: seriesData.map(s => ({
+      name: s.name,
+      type: 'line' as const,
+      data: s.data,
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 4,
+      lineStyle: { width: s.lineWidth || 1.5, color: s.color },
+      itemStyle: { color: s.color },
+      emphasis: { itemStyle: { borderWidth: 2 } }
+    }))
+  })
+
+  // 多系列数据构建（通用）
+  const buildMultiSeries = (data: any[], getCredits: (d: any, key: string) => number) => [
+    { name: '总消耗', color: CHART_COLORS.total, data: data.map(d => getCredits(d, 'totalCredits')), lineWidth: 2.5 },
+    { name: 'Chatbot', color: CHART_COLORS.chatbot, data: data.map(d => getCredits(d, 'chatbotCredits')) },
+    { name: 'Codex', color: CHART_COLORS.codex, data: data.map(d => getCredits(d, 'codexCredits')) },
+    { name: 'Claude Code', color: CHART_COLORS.claudecode, data: data.map(d => getCredits(d, 'claudecodeCredits')) },
+    { name: 'Gemini', color: CHART_COLORS.gemini, data: data.map(d => getCredits(d, 'geminiCredits')) },
+    { name: 'OpenClaw', color: CHART_COLORS.openclaw, data: data.map(d => getCredits(d, 'openclawCredits')) }
+  ]
+
+  const absVal = (d: any, key: string) => Math.abs(d[key] || 0)
+
+  // 渲染饼图
+  const renderPieChart = (summaryData: any) => {
+    if (!pieChartRef.value) return
+    pieChartInstance = disposeChart(pieChartInstance)
+    pieChartInstance = echarts.init(pieChartRef.value)
+    const data = [
+      { value: Math.abs(summaryData.chatbotCredits || 0), name: 'Chatbot', itemStyle: { color: CHART_COLORS.chatbot } },
+      { value: Math.abs(summaryData.codexCredits || 0), name: 'Codex', itemStyle: { color: CHART_COLORS.codex } },
+      { value: Math.abs(summaryData.claudecodeCredits || 0), name: 'Claude Code', itemStyle: { color: CHART_COLORS.claudecode } },
+      { value: Math.abs(summaryData.geminiCredits || 0), name: 'Gemini', itemStyle: { color: CHART_COLORS.gemini } },
+      { value: Math.abs(summaryData.openclawCredits || 0), name: 'OpenClaw', itemStyle: { color: CHART_COLORS.openclaw } }
+    ].filter(d => d.value > 0)
+
+    pieChartInstance.setOption({
+      tooltip: {
+        trigger: 'item',
+        backgroundColor: 'rgba(255,255,255,0.96)',
+        borderColor: '#e5e7eb',
+        borderWidth: 1,
+        textStyle: { color: '#374151', fontSize: 12 },
+        formatter: (p: any) => `${p.name}: ${formatNumber(p.value)} (${p.percent}%)`
+      },
+      legend: {
+        orient: 'vertical',
+        right: 0,
+        top: 'center',
+        itemWidth: 10,
+        itemHeight: 10,
+        textStyle: { fontSize: 11, color: '#6b7280' },
+        formatter: (name: string) => {
+          const item = data.find(d => d.name === name)
+          const total = data.reduce((s, d) => s + d.value, 0)
+          const pct = total > 0 ? Math.round((item?.value || 0) / total * 100) : 0
+          return `${name} ${pct}%`
+        }
+      },
+      series: [{ type: 'pie', radius: ['45%', '70%'], center: ['35%', '50%'], label: { show: false }, data }]
+    })
+  }
+
+  // 渲染24小时折线图
+  const renderHourlyLineChart = (chartRef: HTMLElement, data: any[]) => {
+    const xData = data.map((item: any) => `${item.hour}:00`)
+    const series = buildMultiSeries(data, absVal)
+    const instance = echarts.init(chartRef)
+    instance.setOption(buildLineChartOption(xData, series))
+    return instance
+  }
+
+  // 渲染日趋势折线图
+  const renderTrendLineChart = (trendData: any) => {
+    if (!trendLineChartRef.value || !trendData?.trend) return
+    trendLineChartInstance = disposeChart(trendLineChartInstance)
+    const trend = trendData.trend
+    if (!trend || trend.length === 0) return
+    const xData = trend.map((d: any) => formatTrendDate(d.date))
+    const series = buildMultiSeries(trend, absVal)
+    trendLineChartInstance = echarts.init(trendLineChartRef.value)
+    trendLineChartInstance.setOption(buildLineChartOption(xData, series))
+  }
+
+  // 渲染周趋势折线图
+  const renderWeeklyLineChart = (weeklyData: any) => {
+    if (!weeklyChartRef.value || !weeklyData?.weeklyData) return
+    weeklyChartInstance = disposeChart(weeklyChartInstance)
+    const data = weeklyData.weeklyData
+    const xData = data.map((d: any) => {
+      const start = new Date(d.startDate)
+      const end = new Date(d.endDate)
+      return `${start.getMonth() + 1}.${start.getDate()}-${end.getMonth() + 1}.${end.getDate()}`
+    })
+    const series = buildMultiSeries(data, absVal)
+    weeklyChartInstance = echarts.init(weeklyChartRef.value)
+    weeklyChartInstance.setOption(buildLineChartOption(xData, series))
+  }
+
+  // 渲染月趋势折线图
+  const renderMonthlyLineChart = (monthlyData: any) => {
+    if (!monthlyChartRef.value || !monthlyData?.monthlyData) return
+    monthlyChartInstance = disposeChart(monthlyChartInstance)
+    const data = monthlyData.monthlyData
+    const xData = data.map((d: any) => `${d.yearMonth.split('-')[1]}月`)
+    const series = buildMultiSeries(data, absVal)
+    monthlyChartInstance = echarts.init(monthlyChartRef.value)
+    monthlyChartInstance.setOption(buildLineChartOption(xData, series))
+  }
+
+  // 渲染所有可见图表
+  const renderVisibleCharts = (ctx: {
+    statsMode: string
+    trendPeriod: string
+    summary: any
+    hourlyStats: any
+    weeklyStats: any
+    monthlyStats: any
+    trendData: any
+  }) => {
+    nextTick(() => {
+      if (pieChartRef.value && ctx.summary?.totalCredits) {
+        renderPieChart(ctx.summary)
+      }
+      if (ctx.statsMode === 'realtime' && realtimeHourlyChartRef.value && ctx.hourlyStats?.hourlyData) {
+        realtimeHourlyChartInstance = disposeChart(realtimeHourlyChartInstance)
+        realtimeHourlyChartInstance = renderHourlyLineChart(realtimeHourlyChartRef.value, ctx.hourlyStats.hourlyData)
+      }
+      if (ctx.statsMode === 'history') {
+        if (ctx.trendPeriod === 'hourly' && historyHourlyChartRef.value && ctx.hourlyStats?.hourlyData) {
+          historyHourlyChartInstance = disposeChart(historyHourlyChartInstance)
+          historyHourlyChartInstance = renderHourlyLineChart(historyHourlyChartRef.value, ctx.hourlyStats.hourlyData)
+        }
+        if (ctx.trendPeriod === 'weekly' && weeklyChartRef.value && ctx.weeklyStats?.weeklyData) {
+          renderWeeklyLineChart(ctx.weeklyStats)
+        }
+        if (ctx.trendPeriod === 'monthly' && monthlyChartRef.value && ctx.monthlyStats?.monthlyData) {
+          renderMonthlyLineChart(ctx.monthlyStats)
+        }
+        if (ctx.trendPeriod === 'daily' && trendLineChartRef.value && ctx.trendData?.trend) {
+          renderTrendLineChart(ctx.trendData)
+        }
+      }
+    })
+  }
+
+  // 销毁所有图表
+  const disposeAll = () => {
+    pieChartInstance = disposeChart(pieChartInstance)
+    realtimeHourlyChartInstance = disposeChart(realtimeHourlyChartInstance)
+    historyHourlyChartInstance = disposeChart(historyHourlyChartInstance)
+    weeklyChartInstance = disposeChart(weeklyChartInstance)
+    monthlyChartInstance = disposeChart(monthlyChartInstance)
+    trendLineChartInstance = disposeChart(trendLineChartInstance)
+  }
+
+  return {
+    pieChartRef,
+    realtimeHourlyChartRef,
+    historyHourlyChartRef,
+    weeklyChartRef,
+    monthlyChartRef,
+    trendLineChartRef,
+    renderVisibleCharts,
+    disposeAll,
+  }
+}

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

@@ -0,0 +1,232 @@
+/**
+ * Excel 导出逻辑
+ */
+import { ref } from 'vue'
+import * as XLSX from 'xlsx'
+import { ElMessage } from 'element-plus'
+import { formatDate, getModelTypeName, getInputTokens, getOutputTokens, getCacheCreationTokens, getCacheReadTokens, getTotalTokens } from './helpers'
+import type { useStatsApi } from './useStatsApi'
+
+export function useStatsExport(
+  api: ReturnType<typeof useStatsApi>,
+  getMemberRanking: () => any[],
+  getStatsMode: () => string,
+  getDateRange: () => string,
+  getSelectedDate: () => string
+) {
+  const exportProgress = ref({
+    visible: false,
+    current: 0,
+    total: 0,
+    percentage: 0,
+    currentMember: ''
+  })
+
+  const exportToExcel = async () => {
+    const memberRanking = getMemberRanking()
+    if (!memberRanking || memberRanking.length === 0) {
+      ElMessage.error('暂无数据可导出')
+      return
+    }
+
+    const membersToExport = memberRanking.filter((m: any) => Math.abs(m.totalCredits || 0) > 0)
+    if (membersToExport.length === 0) {
+      ElMessage.error('暂无消耗数据可导出')
+      return
+    }
+
+    exportProgress.value = {
+      visible: true,
+      current: 0,
+      total: membersToExport.length,
+      percentage: 0,
+      currentMember: '准备导出...'
+    }
+
+    try {
+      const wb = XLSX.utils.book_new()
+      const summaryData: any[] = []
+      let totalCredits = 0, totalInputTokens = 0, totalOutputTokens = 0
+      let totalCacheCreationTokens = 0, totalCacheReadTokens = 0, totalTokens = 0, totalCount = 0
+      const membersDetailData: any[] = []
+
+      for (let i = 0; i < membersToExport.length; i++) {
+        const member = membersToExport[i]
+        exportProgress.value.current = i + 1
+        exportProgress.value.percentage = Math.round(((i + 1) / membersToExport.length) * 100)
+        exportProgress.value.currentMember = member.memberNickname || member.nickName || ''
+
+        let memberDetails = null
+        try {
+          if (getStatsMode() === 'realtime') {
+            memberDetails = await api.getUserTodayModels(member.userId)
+          } else {
+            if (member.modelDetails && member.modelDetails.length > 0) {
+              memberDetails = { modelDetails: member.modelDetails }
+            }
+          }
+        } catch (err) {
+          console.error(`获取成员 ${member.nickName} 详情失败:`, err)
+        }
+
+        membersDetailData.push({ member, memberDetails })
+
+        let memberInputTokens = 0, memberOutputTokens = 0
+        let memberCacheCreationTokens = 0, memberCacheReadTokens = 0, memberTotalTokens = 0
+
+        if (memberDetails?.modelDetails && Array.isArray(memberDetails.modelDetails)) {
+          memberDetails.modelDetails.forEach((model: any) => {
+            if (model.usage && typeof model.usage === 'object') {
+              memberInputTokens += getInputTokens(model.usage) || 0
+              memberOutputTokens += getOutputTokens(model.usage) || 0
+              memberCacheCreationTokens += getCacheCreationTokens(model.usage) || 0
+              memberCacheReadTokens += getCacheReadTokens(model.usage) || 0
+              memberTotalTokens += getTotalTokens(model.usage) || 0
+            }
+          })
+        }
+
+        summaryData.push({
+          '成员名称': member.memberNickname || member.nickName || '',
+          '昵称': member.memberNickname ? member.nickName : '',
+          '手机号': member.phonenumber || member.userName || '',
+          '总积分消耗': Math.abs(member.totalCredits || 0),
+          '使用次数': member.totalCount || 0,
+          '输入Token': memberInputTokens,
+          '输出Token': memberOutputTokens,
+          '缓存创建Token': memberCacheCreationTokens,
+          '缓存读取Token': memberCacheReadTokens,
+          '总Token': memberTotalTokens,
+          'Claude Code消耗': Math.abs(member.claudecodeCredits || 0),
+          'Codex消耗': Math.abs(member.codexCredits || 0),
+          'Gemini消耗': Math.abs(member.geminiCredits || 0),
+          'ChatBot消耗': Math.abs(member.chatbotCredits || 0),
+          'OpenClaw消耗': Math.abs(member.openclawCredits || 0)
+        })
+
+        totalCredits += Math.abs(member.totalCredits || 0)
+        totalInputTokens += memberInputTokens
+        totalOutputTokens += memberOutputTokens
+        totalCacheCreationTokens += memberCacheCreationTokens
+        totalCacheReadTokens += memberCacheReadTokens
+        totalTokens += memberTotalTokens
+        totalCount += member.totalCount || 0
+
+        await new Promise(resolve => setTimeout(resolve, 50))
+      }
+
+      summaryData.push({
+        '成员名称': '====总计====', '昵称': '', '手机号': '',
+        '总积分消耗': totalCredits, '使用次数': totalCount,
+        '输入Token': totalInputTokens, '输出Token': totalOutputTokens,
+        '缓存创建Token': totalCacheCreationTokens, '缓存读取Token': totalCacheReadTokens,
+        '总Token': totalTokens,
+        'Claude Code消耗': '', 'Codex消耗': '', 'Gemini消耗': '', 'ChatBot消耗': ''
+      })
+
+      const summaryWs = XLSX.utils.json_to_sheet(summaryData)
+      summaryWs['!cols'] = [
+        { wch: 20 }, { wch: 20 }, { wch: 15 }, { wch: 15 }, { wch: 12 },
+        { wch: 14 }, { wch: 14 }, { wch: 16 }, { wch: 16 }, { wch: 14 },
+        { wch: 16 }, { wch: 14 }, { wch: 14 }, { wch: 14 }
+      ]
+      XLSX.utils.book_append_sheet(wb, summaryWs, '总表')
+
+      // 为每个成员创建单独工作表
+      for (let i = 0; i < membersDetailData.length; i++) {
+        const { member, memberDetails } = membersDetailData[i]
+        exportProgress.value.currentMember = `创建${member.memberNickname || member.nickName}的工作表...`
+
+        const memberSheetData: any[] = []
+        const modelOrder = ['claudecode', 'codex', 'gemini', 'chatbot']
+        const modelDetailsMap: any = {}
+
+        if (memberDetails?.modelDetails && Array.isArray(memberDetails.modelDetails)) {
+          memberDetails.modelDetails.forEach((model: any) => {
+            const type = model.type?.toLowerCase()
+            if (!modelDetailsMap[type]) modelDetailsMap[type] = []
+            modelDetailsMap[type].push(model)
+          })
+        }
+
+        modelOrder.forEach(modelType => {
+          const models = modelDetailsMap[modelType] || []
+          if (models.length > 0) {
+            models.forEach((model: any) => {
+              const row: any = {
+                '模型类型': getModelTypeName(modelType),
+                '模型名称': model.modelName || model.model || '-',
+                '调用次数': model.count || 0,
+                '积分消耗': Math.abs(model.credits || 0),
+                '费用': model.cost ? `$${model.cost.toFixed(4)}` : '-'
+              }
+              if (model.usage && typeof model.usage === 'object') {
+                row['输入Token'] = getInputTokens(model.usage) || 0
+                row['输出Token'] = getOutputTokens(model.usage) || 0
+                row['缓存创建Token'] = getCacheCreationTokens(model.usage) || 0
+                row['缓存读取Token'] = getCacheReadTokens(model.usage) || 0
+                row['总Token'] = getTotalTokens(model.usage) || 0
+              } else {
+                row['输入Token'] = 0; row['输出Token'] = 0
+                row['缓存创建Token'] = 0; row['缓存读取Token'] = 0; row['总Token'] = 0
+              }
+              memberSheetData.push(row)
+            })
+          } else {
+            const typeCredits = member[`${modelType}Credits`]
+            if (typeCredits && Math.abs(typeCredits) > 0) {
+              memberSheetData.push({
+                '模型类型': getModelTypeName(modelType), '模型名称': '汇总',
+                '调用次数': '-', '积分消耗': Math.abs(typeCredits), '费用': '-',
+                '输入Token': 0, '输出Token': 0, '缓存创建Token': 0, '缓存读取Token': 0, '总Token': 0
+              })
+            }
+          }
+        })
+
+        if (memberSheetData.length > 0) {
+          const memberWs = XLSX.utils.json_to_sheet(memberSheetData)
+          memberWs['!cols'] = [
+            { wch: 15 }, { wch: 30 }, { wch: 12 }, { wch: 12 }, { wch: 12 },
+            { wch: 14 }, { wch: 14 }, { wch: 16 }, { wch: 16 }, { wch: 14 }
+          ]
+          let sheetName = (member.memberNickname || member.nickName || `成员${i + 1}`).substring(0, 31)
+          sheetName = sheetName.replace(/[:\\/?*[\]]/g, '_')
+          XLSX.utils.book_append_sheet(wb, memberWs, sheetName)
+        }
+        await new Promise(resolve => setTimeout(resolve, 30))
+      }
+
+      // 生成文件名
+      const statsMode = getStatsMode()
+      const dateRangeVal = getDateRange()
+      let fileName = '团队成员消耗详情'
+      if (statsMode === 'realtime') {
+        fileName += `_实时数据_${formatDate(new Date())}`
+      } else if (dateRangeVal === 'custom') {
+        fileName += `_${getSelectedDate()}`
+      } else if (dateRangeVal === 'week') {
+        fileName += '_本周'
+      } else if (dateRangeVal === 'lastWeek') {
+        fileName += '_上周'
+      } else if (dateRangeVal === 'month') {
+        fileName += '_本月'
+      } else if (dateRangeVal === 'lastMonth') {
+        fileName += '_上月'
+      } else {
+        fileName += `_最近${dateRangeVal}天`
+      }
+      fileName += '.xlsx'
+
+      XLSX.writeFile(wb, fileName)
+      ElMessage.success(`导出成功！共${membersToExport.length}个成员，${wb.SheetNames.length}张工作表`)
+    } catch (error) {
+      console.error('导出Excel失败:', error)
+      ElMessage.error('导出失败，请重试')
+    } finally {
+      setTimeout(() => { exportProgress.value.visible = false }, 500)
+    }
+  }
+
+  return { exportProgress, exportToExcel }
+}

package/extensions/services/evol/web/src/composables/useFormatters.ts

@@ -0,0 +1,42 @@
+// Formatters composable
+
+export function useFormatters() {
+  function formatUptime(seconds: number): string {
+    if (!seconds || seconds < 0) return '--'
+    const d = Math.floor(seconds / 86400)
+    const h = Math.floor((seconds % 86400) / 3600)
+    const m = Math.floor((seconds % 3600) / 60)
+    const s = Math.floor(seconds % 60)
+
+    if (d > 0) return `${d}天${h}时`
+    if (h > 0) return `${h}时${m}分`
+    if (m > 0) return `${m}分${s}秒`
+    return `${s}秒`
+  }
+
+  function formatBytes(bytes: number): string {
+    if (bytes === 0) return '0 B'
+    const k = 1024
+    const sizes = ['B', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
+  }
+
+  function formatTimestamp(ts: number): string {
+    const date = new Date(ts)
+    const pad = (n: number) => String(n).padStart(2, '0')
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+  }
+
+  function truncateToken(token: string, length = 8): string {
+    if (!token || token.length <= length) return token
+    return token.substring(0, length) + '...'
+  }
+
+  return {
+    formatUptime,
+    formatBytes,
+    formatTimestamp,
+    truncateToken
+  }
+}

package/extensions/services/evol/web/src/composables/useTheme.ts

@@ -0,0 +1,52 @@
+import { ref, watch, computed } from 'vue'
+
+type ThemeMode = 'light' | 'dark' | 'system'
+
+const themeMode = ref<ThemeMode>((localStorage.getItem('theme') as ThemeMode) || 'system')
+
+function getSystemDark(): boolean {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
+function applyTheme(mode: ThemeMode) {
+  const isDark = mode === 'dark' || (mode === 'system' && getSystemDark())
+  document.documentElement.classList.toggle('dark', isDark)
+}
+
+// 初始化时应用主题
+applyTheme(themeMode.value)
+
+// 监听系统主题变化
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+  if (themeMode.value === 'system') {
+    applyTheme('system')
+  }
+})
+
+watch(themeMode, (mode) => {
+  localStorage.setItem('theme', mode)
+  applyTheme(mode)
+})
+
+export function useTheme() {
+  function setTheme(mode: ThemeMode) {
+    themeMode.value = mode
+  }
+
+  function toggleTheme() {
+    const modes: ThemeMode[] = ['light', 'dark', 'system']
+    const idx = modes.indexOf(themeMode.value)
+    themeMode.value = modes[(idx + 1) % modes.length]
+  }
+
+  const isDark = computed(() => {
+    return themeMode.value === 'dark' || (themeMode.value === 'system' && getSystemDark())
+  })
+
+  return {
+    theme: computed(() => themeMode.value),
+    isDark,
+    setTheme,
+    toggleTheme,
+  }
+}

package/extensions/services/evol/web/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}