feat: 新增IM即时通讯(浮窗)、工作流、打印模块及工作台增强

- IM: 新增浮窗聊天(ImFloatWindow)、管理页(monitor/config/service/message)、SSE推送 - 工作流: 新增待办/我的流程页面及后端服务 - 打印: 新增打印模板、出库单打印(PrintPage)、模板种子脚本 - 工作台: 增强快捷入口与工作台数据 - 修复: TagsView页签关闭、CrudPage通用表格增强 - 移除导航菜单中的即时通讯入口，改为右下角浮窗
2026-08-16 00:19:24 +08:00
parent 7235265749
commit 1bec470647
49 changed files with 5791 additions and 51 deletions
@@ -0,0 +1,192 @@
+<template>
+  <div class="im-monitor">
+    <!-- 统计卡片 -->
+    <el-row :gutter="14" class="stat-row">
+      <el-col v-for="card in statCards" :key="card.key" :xs="12" :sm="12" :md="4">
+        <el-card shadow="hover" class="stat-card">
+          <div class="stat-item">
+            <div class="stat-icon" :style="{ background: card.bg, color: card.color }">
+              <el-icon :size="22"><component :is="card.icon" /></el-icon>
+            </div>
+            <div class="stat-info">
+              <div class="stat-value">{{ card.value }}</div>
+              <div class="stat-title">{{ card.title }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 图表区 -->
+    <el-row :gutter="14" class="chart-row">
+      <el-col :xs="24" :md="16">
+        <el-card shadow="never">
+          <template #header>
+            <div class="card-title">
+              <span>近 7 天消息量趋势</span>
+              <span class="update-at">更新于 {{ updatedAt }}</span>
+            </div>
+          </template>
+          <div ref="trendRef" class="chart trend-chart"></div>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :md="8">
+        <el-card shadow="never">
+          <template #header>
+            <div class="card-title">消息类型分布</div>
+          </template>
+          <div ref="pieRef" class="chart pie-chart"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { Message, ChatDotRound, Bell, User, ChatLineRound, Document } from '@element-plus/icons-vue'
+import { imAdminPerformance } from '@/api/im'
+
+const data = ref({ total: 0, today: 0, unread: 0, online: 0, sessions: 0, avgLen: 0, trend: [], typeDist: [], updatedAt: '' })
+const updatedAt = computed(() => data.value.updatedAt || '')
+const trendRef = ref(null)
+const pieRef = ref(null)
+let trendChart = null
+let pieChart = null
+let timer = null
+
+const statCards = computed(() => [
+  { key: 'total', title: '消息总量', value: data.value.total, icon: Message, bg: '#ecf5ff', color: '#409eff' },
+  { key: 'today', title: '今日消息', value: data.value.today, icon: ChatDotRound, bg: '#f0f9eb', color: '#67c23a' },
+  { key: 'unread', title: '未读消息', value: data.value.unread, icon: Bell, bg: '#fdf6ec', color: '#e6a23c' },
+  { key: 'online', title: '在线用户', value: data.value.online, icon: User, bg: '#f4f4f5', color: '#909399' },
+  { key: 'sessions', title: '会话数', value: data.value.sessions, icon: ChatLineRound, bg: '#f3eefc', color: '#9c27b0' },
+  { key: 'avgLen', title: '平均消息长度(B)', value: data.value.avgLen, icon: Document, bg: '#fef0f0', color: '#f56c6c' }
+])
+
+function renderCharts() {
+  if (!trendRef.value || !pieRef.value) return
+  const dates = (data.value.trend || []).map((t) => t.date)
+  const counts = (data.value.trend || []).map((t) => t.count)
+  trendChart = echarts.init(trendRef.value)
+  trendChart.setOption({
+    tooltip: { trigger: 'axis' },
+    grid: { left: 40, right: 20, top: 30, bottom: 30 },
+    xAxis: { type: 'category', data: dates, boundaryGap: false },
+    yAxis: { type: 'value', minInterval: 1 },
+    series: [
+      {
+        name: '消息量',
+        type: 'line',
+        smooth: true,
+        areaStyle: { opacity: 0.15 },
+        itemStyle: { color: '#409eff' },
+        data: counts
+      }
+    ]
+  })
+
+  pieChart = echarts.init(pieRef.value)
+  pieChart.setOption({
+    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+    legend: { bottom: 0, icon: 'circle', itemWidth: 10, itemHeight: 10 },
+    series: [
+      {
+        name: '消息类型',
+        type: 'pie',
+        radius: ['40%', '65%'],
+        center: ['50%', '45%'],
+        itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
+        label: { formatter: '{b}\n{d}%' },
+        data: (data.value.typeDist || []).map((t) => ({ name: t.name, value: t.count }))
+      }
+    ]
+  })
+}
+
+function resizeCharts() {
+  trendChart?.resize()
+  pieChart?.resize()
+}
+
+async function load() {
+  const res = await imAdminPerformance()
+  data.value = res?.data || data.value
+  await nextTick()
+  renderCharts()
+}
+
+function startTimer() {
+  timer = setInterval(load, 10000)
+}
+
+onMounted(() => {
+  load()
+  startTimer()
+  window.addEventListener('resize', resizeCharts)
+})
+
+onBeforeUnmount(() => {
+  clearInterval(timer)
+  window.removeEventListener('resize', resizeCharts)
+  trendChart?.dispose()
+  pieChart?.dispose()
+})
+</script>
+
+<style scoped>
+.im-monitor .stat-row {
+  margin-bottom: 14px;
+}
+.im-monitor .stat-card {
+  margin-bottom: 0;
+}
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.stat-icon {
+  width: 46px;
+  height: 46px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.stat-value {
+  font-size: 22px;
+  font-weight: 700;
+  color: #303133;
+  line-height: 1.2;
+}
+.stat-title {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 2px;
+}
+.chart-row {
+  margin-bottom: 0;
+}
+.card-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.update-at {
+  font-size: 12px;
+  color: #909399;
+  font-weight: 400;
+}
+.chart {
+  width: 100%;
+}
+.trend-chart {
+  height: 320px;
+}
+.pie-chart {
+  height: 320px;
+}
+</style>