feat: 优化

yudao-ui-admin-vue3/src/api/muye/aiusagestats/index.ts

@@ -0,0 +1,92 @@
+import request from '@/config/axios'
+
+export interface AiUsageOverview {
+  totalCallCount: number
+  totalConsumePoints: number
+  totalTokens: number
+  activeUserCount: number
+  bizTypeStats: BizTypeStats[]
+}
+
+export interface BizTypeStats {
+  bizType: string
+  bizTypeName: string
+  callCount: number
+  consumePoints: number
+  totalTokens: number
+}
+
+export interface AiUsageUserStats {
+  userId: number
+  mobile: string
+  callCount: number
+  consumePoints: number
+  inputTokens: number
+  outputTokens: number
+  totalTokens: number
+  avgPointsPerCall: number
+}
+
+export interface AiUsageAppStats {
+  serviceCode: string
+  serviceName: string
+  platform: string
+  callCount: number
+  consumePoints: number
+  inputTokens: number
+  outputTokens: number
+  totalTokens: number
+  avgPointsPerCall: number
+  avgTokensPerCall: number
+}
+
+export interface AiUsageTrend {
+  trendList: TrendItem[]
+}
+
+export interface TrendItem {
+  time: string
+  callCount: number
+  consumePoints: number
+  totalTokens: number
+}
+
+// 获取概览统计
+export const getAiUsageOverview = (params: {
+  startTime?: string
+  endTime?: string
+  bizType?: string
+}) => {
+  return request.get({ url: '/muye/ai-usage-stats/overview', params })
+}
+
+// 获取用户统计分页
+export const getAiUsageUserStatsPage = (params: {
+  pageNo: number
+  pageSize: number
+  startTime?: string
+  endTime?: string
+  bizType?: string
+  userId?: number
+}) => {
+  return request.get({ url: '/muye/ai-usage-stats/user-stats', params })
+}
+
+// 获取应用统计列表
+export const getAiUsageAppStats = (params: {
+  startTime?: string
+  endTime?: string
+  bizType?: string
+}) => {
+  return request.get({ url: '/muye/ai-usage-stats/app-stats', params })
+}
+
+// 获取趋势数据
+export const getAiUsageTrend = (params: {
+  startTime?: string
+  endTime?: string
+  bizType?: string
+  type?: string
+}) => {
+  return request.get({ url: '/muye/ai-usage-stats/trend', params })
+}

yudao-ui-admin-vue3/src/views/muye/aiusage/index.vue

@@ -0,0 +1,474 @@
+<template>
+  <ContentWrap>
+    <!-- 筛选条件 -->
+    <el-form :model="queryParams" :inline="true" class="-mb-15px">
+      <el-form-item label="时间范围">
+        <el-date-picker
+          v-model="queryParams.timeRange"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          :shortcuts="timeShortcuts"
+          range-separator="-"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          class="!w-240px"
+          @change="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="业务类型">
+        <el-select v-model="queryParams.bizType" placeholder="全部" clearable class="!w-180px" @change="handleQuery">
+          <el-option label="全部" value="" />
+          <el-option label="AI对话" value="dify_chat" />
+          <el-option label="文案改写" value="forecast_rewrite" />
+          <el-option label="语音合成" value="voice_tts" />
+          <el-option label="数字人" value="digital_human" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- Tab 切换 -->
+  <ContentWrap>
+    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
+      <!-- 概览 Tab -->
+      <el-tab-pane label="概览" name="overview">
+        <!-- 统计卡片 -->
+        <el-row :gutter="16" class="mb-16px">
+          <el-col :span="6">
+            <el-card shadow="hover">
+              <div class="stat-card">
+                <div class="stat-icon bg-blue">
+                  <Icon icon="ep:phone" />
+                </div>
+                <div class="stat-content">
+                  <div class="stat-label">总调用次数</div>
+                  <div class="stat-value">{{ overviewData.totalCallCount?.toLocaleString() || 0 }}</div>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="6">
+            <el-card shadow="hover">
+              <div class="stat-card">
+                <div class="stat-icon bg-orange">
+                  <Icon icon="ep:coin" />
+                </div>
+                <div class="stat-content">
+                  <div class="stat-label">总消耗积分</div>
+                  <div class="stat-value">{{ overviewData.totalConsumePoints?.toLocaleString() || 0 }}</div>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="6">
+            <el-card shadow="hover">
+              <div class="stat-card">
+                <div class="stat-icon bg-green">
+                  <Icon icon="ep:data-analysis" />
+                </div>
+                <div class="stat-content">
+                  <div class="stat-label">总 Token 数</div>
+                  <div class="stat-value">{{ overviewData.totalTokens?.toLocaleString() || 0 }}</div>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="6">
+            <el-card shadow="hover">
+              <div class="stat-card">
+                <div class="stat-icon bg-purple">
+                  <Icon icon="ep:user" />
+                </div>
+                <div class="stat-content">
+                  <div class="stat-label">活跃用户数</div>
+                  <div class="stat-value">{{ overviewData.activeUserCount?.toLocaleString() || 0 }}</div>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+
+        <!-- 图表区域 -->
+        <el-row :gutter="16">
+          <el-col :span="16">
+            <el-card shadow="hover">
+              <template #header>
+                <div class="card-header">
+                  <span>消耗趋势</span>
+                </div>
+              </template>
+              <div ref="trendChartRef" class="chart-container"></div>
+            </el-card>
+          </el-col>
+          <el-col :span="8">
+            <el-card shadow="hover">
+              <template #header>
+                <div class="card-header">
+                  <span>业务类型占比</span>
+                </div>
+              </template>
+              <div ref="pieChartRef" class="chart-container"></div>
+            </el-card>
+          </el-col>
+        </el-row>
+
+        <!-- 业务类型统计表格 -->
+        <el-card shadow="hover" class="mt-16px">
+          <template #header>
+            <div class="card-header">
+              <span>业务类型统计</span>
+            </div>
+          </template>
+          <el-table :data="overviewData.bizTypeStats || []" :stripe="true">
+            <el-table-column label="业务类型" align="center" prop="bizTypeName" />
+            <el-table-column label="调用次数" align="center" prop="callCount">
+              <template #default="{ row }">{{ row.callCount?.toLocaleString() }}</template>
+            </el-table-column>
+            <el-table-column label="消耗积分" align="center" prop="consumePoints">
+              <template #default="{ row }">{{ row.consumePoints?.toLocaleString() }}</template>
+            </el-table-column>
+            <el-table-column label="Token 数" align="center" prop="totalTokens">
+              <template #default="{ row }">{{ row.totalTokens?.toLocaleString() || '-' }}</template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-tab-pane>
+
+      <!-- 用户统计 Tab -->
+      <el-tab-pane label="用户统计" name="user">
+        <el-table v-loading="userLoading" :data="userStatsList" :stripe="true">
+          <el-table-column label="用户ID" align="center" prop="userId" />
+          <el-table-column label="手机号" align="center" prop="mobile" />
+          <el-table-column label="调用次数" align="center" prop="callCount">
+            <template #default="{ row }">{{ row.callCount?.toLocaleString() }}</template>
+          </el-table-column>
+          <el-table-column label="消耗积分" align="center" prop="consumePoints">
+            <template #default="{ row }">{{ row.consumePoints?.toLocaleString() }}</template>
+          </el-table-column>
+          <el-table-column label="输入Token" align="center" prop="inputTokens">
+            <template #default="{ row }">{{ row.inputTokens?.toLocaleString() || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="输出Token" align="center" prop="outputTokens">
+            <template #default="{ row }">{{ row.outputTokens?.toLocaleString() || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="总Token" align="center" prop="totalTokens">
+            <template #default="{ row }">{{ row.totalTokens?.toLocaleString() || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="平均积分/次" align="center" prop="avgPointsPerCall">
+            <template #default="{ row }">{{ row.avgPointsPerCall?.toFixed(2) }}</template>
+          </el-table-column>
+        </el-table>
+        <Pagination
+          v-model:page="userPageParams.pageNo"
+          v-model:limit="userPageParams.pageSize"
+          :total="userPageParams.total"
+          @pagination="getUserStatsList"
+        />
+      </el-tab-pane>
+
+      <!-- 应用统计 Tab -->
+      <el-tab-pane label="应用统计" name="app">
+        <el-table v-loading="appLoading" :data="appStatsList" :stripe="true">
+          <el-table-column label="服务标识" align="center" prop="serviceCode" />
+          <el-table-column label="服务名称" align="center" prop="serviceName" />
+          <el-table-column label="平台" align="center" prop="platform" />
+          <el-table-column label="调用次数" align="center" prop="callCount">
+            <template #default="{ row }">{{ row.callCount?.toLocaleString() }}</template>
+          </el-table-column>
+          <el-table-column label="消耗积分" align="center" prop="consumePoints">
+            <template #default="{ row }">{{ row.consumePoints?.toLocaleString() }}</template>
+          </el-table-column>
+          <el-table-column label="总Token" align="center" prop="totalTokens">
+            <template #default="{ row }">{{ row.totalTokens?.toLocaleString() || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="平均积分/次" align="center" prop="avgPointsPerCall">
+            <template #default="{ row }">{{ row.avgPointsPerCall?.toFixed(2) }}</template>
+          </el-table-column>
+          <el-table-column label="平均Token/次" align="center" prop="avgTokensPerCall">
+            <template #default="{ row }">{{ row.avgTokensPerCall?.toFixed(2) }}</template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import {
+  getAiUsageOverview,
+  getAiUsageUserStatsPage,
+  getAiUsageAppStats,
+  getAiUsageTrend,
+  type AiUsageOverview,
+  type AiUsageUserStats,
+  type AiUsageAppStats
+} from '@/api/muye/aiusagestats'
+
+defineOptions({ name: 'AiUsageStats' })
+
+// 时间快捷选项
+const timeShortcuts = [
+  { text: '今天', value: () => {
+    const today = new Date()
+    today.setHours(0, 0, 0, 0)
+    return [today, new Date()]
+  }},
+  { text: '本周', value: () => {
+    const today = new Date()
+    const day = today.getDay() || 7
+    const monday = new Date(today)
+    monday.setDate(today.getDate() - day + 1)
+    monday.setHours(0, 0, 0, 0)
+    return [monday, new Date()]
+  }},
+  { text: '本月', value: () => {
+    const today = new Date()
+    const firstDay = new Date(today.getFullYear(), today.getMonth(), 1)
+    return [firstDay, new Date()]
+  }},
+  { text: '最近7天', value: () => {
+    const end = new Date()
+    const start = new Date()
+    start.setDate(start.getDate() - 7)
+    return [start, end]
+  }},
+  { text: '最近30天', value: () => {
+    const end = new Date()
+    const start = new Date()
+    start.setDate(start.getDate() - 30)
+    return [start, end]
+  }}
+]
+
+// 查询参数
+const queryParams = reactive({
+  timeRange: [] as string[],
+  bizType: ''
+})
+
+// Tab
+const activeTab = ref('overview')
+
+// 概览数据
+const overviewData = ref<AiUsageOverview>({} as AiUsageOverview)
+
+// 用户统计
+const userLoading = ref(false)
+const userStatsList = ref<AiUsageUserStats[]>([])
+const userPageParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  total: 0
+})
+
+// 应用统计
+const appLoading = ref(false)
+const appStatsList = ref<AiUsageAppStats[]>([])
+
+// 图表
+const trendChartRef = ref<HTMLElement>()
+const pieChartRef = ref<HTMLElement>()
+let trendChart: echarts.ECharts | null = null
+let pieChart: echarts.ECharts | null = null
+
+// 获取概览数据
+const getOverviewData = async () => {
+  const [startTime, endTime] = queryParams.timeRange || []
+  const res = await getAiUsageOverview({
+    startTime,
+    endTime,
+    bizType: queryParams.bizType
+  })
+  overviewData.value = res.data || {}
+}
+
+// 获取趋势数据并绘制图表
+const getTrendData = async () => {
+  const [startTime, endTime] = queryParams.timeRange || []
+  const res = await getAiUsageTrend({
+    startTime,
+    endTime,
+    bizType: queryParams.bizType,
+    type: 'day'
+  })
+
+  await nextTick()
+  if (!trendChart && trendChartRef.value) {
+    trendChart = echarts.init(trendChartRef.value)
+  }
+
+  if (trendChart && res.data?.trendList) {
+    const data = res.data.trendList
+    trendChart.setOption({
+      tooltip: { trigger: 'axis' },
+      legend: { data: ['调用次数', '消耗积分', 'Token数'] },
+      xAxis: { type: 'category', data: data.map((d: any) => d.time) },
+      yAxis: [
+        { type: 'value', name: '次数/积分' },
+        { type: 'value', name: 'Token' }
+      ],
+      series: [
+        { name: '调用次数', type: 'line', data: data.map((d: any) => d.callCount) },
+        { name: '消耗积分', type: 'line', data: data.map((d: any) => d.consumePoints) },
+        { name: 'Token数', type: 'line', yAxisIndex: 1, data: data.map((d: any) => d.totalTokens) }
+      ]
+    })
+  }
+}
+
+// 绘制饼图
+const drawPieChart = () => {
+  if (!pieChart && pieChartRef.value) {
+    pieChart = echarts.init(pieChartRef.value)
+  }
+
+  if (pieChart && overviewData.value.bizTypeStats) {
+    const data = overviewData.value.bizTypeStats.map((item: any) => ({
+      name: item.bizTypeName,
+      value: item.consumePoints
+    }))
+
+    pieChart.setOption({
+      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+      legend: { orient: 'vertical', left: 'left' },
+      series: [{
+        type: 'pie',
+        radius: '50%',
+        data,
+        emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }}
+      }]
+    })
+  }
+}
+
+// 获取用户统计列表
+const getUserStatsList = async () => {
+  userLoading.value = true
+  try {
+    const [startTime, endTime] = queryParams.timeRange || []
+    const res = await getAiUsageUserStatsPage({
+      pageNo: userPageParams.pageNo,
+      pageSize: userPageParams.pageSize,
+      startTime,
+      endTime,
+      bizType: queryParams.bizType
+    })
+    userStatsList.value = res.data?.list || []
+    userPageParams.total = res.data?.total || 0
+  } finally {
+    userLoading.value = false
+  }
+}
+
+// 获取应用统计列表
+const getAppStatsList = async () => {
+  appLoading.value = true
+  try {
+    const [startTime, endTime] = queryParams.timeRange || []
+    const res = await getAiUsageAppStats({
+      startTime,
+      endTime,
+      bizType: queryParams.bizType
+    })
+    appStatsList.value = res.data || []
+  } finally {
+    appLoading.value = false
+  }
+}
+
+// 查询
+const handleQuery = async () => {
+  await getOverviewData()
+  await getTrendData()
+  drawPieChart()
+  if (activeTab.value === 'user') {
+    getUserStatsList()
+  } else if (activeTab.value === 'app') {
+    getAppStatsList()
+  }
+}
+
+// Tab 切换
+const handleTabChange = (tab: string) => {
+  if (tab === 'user') {
+    getUserStatsList()
+  } else if (tab === 'app') {
+    getAppStatsList()
+  }
+}
+
+// 窗口大小变化时重绘图表
+const handleResize = () => {
+  trendChart?.resize()
+  pieChart?.resize()
+}
+
+onMounted(async () => {
+  // 设置默认时间范围（最近7天）
+  const end = new Date()
+  const start = new Date()
+  start.setDate(start.getDate() - 7)
+  queryParams.timeRange = [
+    start.toISOString().slice(0, 19).replace('T', ' '),
+    end.toISOString().slice(0, 19).replace('T', ' ')
+  ]
+
+  await handleQuery()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  trendChart?.dispose()
+  pieChart?.dispose()
+})
+</script>
+
+<style scoped lang="scss">
+.stat-card {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+
+  .stat-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    color: #fff;
+    margin-right: 16px;
+
+    &.bg-blue { background: linear-gradient(135deg, #409eff, #3375b9); }
+    &.bg-orange { background: linear-gradient(135deg, #e6a23c, #cf9236); }
+    &.bg-green { background: linear-gradient(135deg, #67c23a, #529b2e); }
+    &.bg-purple { background: linear-gradient(135deg, #909399, #73767a); }
+  }
+
+  .stat-content {
+    .stat-label {
+      font-size: 14px;
+      color: #909399;
+      margin-bottom: 4px;
+    }
+    .stat-value {
+      font-size: 24px;
+      font-weight: 600;
+      color: #303133;
+    }
+  }
+}
+
+.card-header {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.chart-container {
+  height: 300px;
+}
+</style>

yudao-ui-admin-vue3/src/views/muye/pointrecord/index.vue

@@ -247,43 +247,42 @@ const openForm = (type: string, id?: number) => {
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
-    // 删除的二次确认
     await message.delConfirm()
-    // 发起删除
     await PointRecordApi.deletePointRecord(id)
     message.success(t('common.delSuccess'))
-    // 刷新列表
     await getList()
-  } catch {}
+  } catch {
+    // 用户取消操作
+  }
 }
 
 /** 批量删除积分记录 */
 const handleDeleteBatch = async () => {
   try {
-    // 删除的二次确认
     await message.delConfirm()
-    await PointRecordApi.deletePointRecordList(checkedIds.value);
-    checkedIds.value = [];
+    await PointRecordApi.deletePointRecordList(checkedIds.value)
+    checkedIds.value = []
     message.success(t('common.delSuccess'))
-    await getList();
-  } catch {}
+    await getList()
+  } catch {
+    // 用户取消操作
+  }
 }
 
 const checkedIds = ref<number[]>([])
 const handleRowCheckboxChange = (records: PointRecord[]) => {
-  checkedIds.value = records.map((item) => item.id!);
+  checkedIds.value = records.map((item) => item.id!)
 }
 
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {
-    // 导出的二次确认
     await message.exportConfirm()
-    // 发起导出
     exportLoading.value = true
     const data = await PointRecordApi.exportPointRecord(queryParams)
     download.excel(data, '积分记录.xls')
   } catch {
+    // 用户取消操作
   } finally {
     exportLoading.value = false
   }