数据结构优化

2026-01-20 11:00:42 +08:00
parent 29a642c285
commit b088ba48be
17 changed files with 1073 additions and 49 deletions
--- a/client/src/pages/admin/AccessLogs.vue
+++ b/client/src/pages/admin/AccessLogs.vue
@@ -0,0 +1,356 @@
+<template>
+  <div class="admin-logs">
+    <h1 class="page-title">访问日志管理</h1>
+    
+    <div class="toolbar">
+      <div class="filter-section">
+        <div class="filter-group">
+          <label for="pageSize">每页显示:</label>
+          <CustomSelect
+            v-model.number="pageSize"
+            :options="pageSizeOptions"
+            @update:modelValue="fetchLogs"
+            style="width: 80px;"
+          />
+        </div>
+      </div>
+    </div>
+    
+    <div class="table-container">
+      <table class="admin-table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>IP地址</th>
+            <th>归属地</th>
+            <th>路径</th>
+            <th>方法</th>
+            <th>状态</th>
+            <th>响应时间(ms)</th>
+            <th>访问时间</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="log in logs.list" :key="log.id">
+            <td>{{ log.id }}</td>
+            <td class="font-mono text-xs">{{ log.ip }}</td>
+            <td>{{ log.region || 'Unknown' }}</td>
+            <td class="log-path">{{ log.path }}</td>
+            <td>
+              <span :class="['method-badge', `method-${log.method.toLowerCase()}`]">
+                {{ log.method }}
+              </span>
+            </td>
+            <td>
+              <span :class="['status-badge', getStatusClass(log.statusCode)]">
+                {{ log.statusCode }}
+              </span>
+            </td>
+            <td>{{ log.responseTime }}</td>
+            <td>{{ formatDate(log.createdAt) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    
+    <div v-if="logs.list.length === 0" class="empty-state">
+      <p>暂无访问日志</p>
+    </div>
+    
+    <!-- Pagination -->
+    <div v-if="logs.list.length > 0" class="pagination">
+      <button 
+        class="btn btn-sm btn-secondary" 
+        :disabled="currentPage === 1" 
+        @click="changePage(currentPage - 1)"
+      >
+        上一页
+      </button>
+      <span class="page-info">
+        第 {{ currentPage }} 页，共 {{ totalPages }} 页，总计 {{ logs.total }} 条记录
+      </span>
+      <button 
+        class="btn btn-sm btn-secondary" 
+        :disabled="currentPage === totalPages" 
+        @click="changePage(currentPage + 1)"
+      >
+        下一页
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { getAccessLogs, PaginationResponse, AccessLog } from '../../services/api'
+import { useToast } from '../../composables/useToast'
+import CustomSelect from '../../components/CustomSelect.vue'
+
+const toast = useToast()
+const logs = ref<PaginationResponse<AccessLog>>({
+  list: [],
+  total: 0,
+  page: 1,
+  size: 10
+})
+const currentPage = ref(1)
+const pageSize = ref(10)
+
+// Select options
+const pageSizeOptions = [
+  { value: 10, label: '10' },
+  { value: 20, label: '20' },
+  { value: 50, label: '50' },
+  { value: 100, label: '100' }
+]
+
+const totalPages = computed(() => {
+  return Math.ceil(logs.value.total / pageSize.value)
+})
+
+const fetchLogs = async () => {
+  try {
+    logs.value = await getAccessLogs(currentPage.value, pageSize.value)
+  } catch (error) {
+    console.error('Error fetching access logs:', error)
+    toast.error('获取访问日志失败')
+  }
+}
+
+const changePage = (page: number) => {
+  currentPage.value = page
+  fetchLogs()
+}
+
+const getStatusClass = (status: number) => {
+  if (status >= 200 && status < 300) {
+    return 'success'
+  } else if (status >= 400 && status < 500) {
+    return 'warning'
+  } else if (status >= 500) {
+    return 'error'
+  }
+  return ''
+}
+
+const formatDate = (dateString: string) => {
+  const date = new Date(dateString)
+  return date.toLocaleString('zh-CN')
+}
+
+onMounted(() => {
+  fetchLogs()
+})
+</script>
+
+<style scoped>
+.admin-logs {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1.5rem;
+  color: #d4b383;
+  font-family: 'Inter', sans-serif;
+}
+
+.toolbar {
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.filter-section {
+  display: flex;
+  gap: 1rem;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.filter-group label {
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.875rem;
+  font-family: 'Inter', sans-serif;
+}
+
+.table-container {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow-x: auto;
+  margin-bottom: 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.admin-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 800px;
+  color: white;
+}
+
+.admin-table th,
+.admin-table td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: 0.875rem;
+  font-family: 'Inter', sans-serif;
+}
+
+.admin-table th {
+  background: rgba(255, 255, 255, 0.08);
+  font-weight: 600;
+  color: #d4b383;
+  white-space: nowrap;
+}
+
+.admin-table tr:hover {
+  background: rgba(212, 179, 131, 0.05);
+}
+
+.log-path {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.method-badge {
+  display: inline-block;
+  padding: 0.125rem 0.375rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: white;
+  min-width: 40px;
+  text-align: center;
+  font-family: 'Inter', sans-serif;
+}
+
+.method-get {
+  background-color: #3b82f6;
+}
+
+.method-post {
+  background-color: #10b981;
+}
+
+.method-put {
+  background-color: #f59e0b;
+}
+
+.method-delete {
+  background-color: #ef4444;
+}
+
+.method-patch {
+  background-color: #8b5cf6;
+}
+
+.method-options {
+  background-color: #6b7280;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 0.125rem 0.375rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  min-width: 40px;
+  text-align: center;
+  font-family: 'Inter', sans-serif;
+}
+
+.status-badge.success {
+  background-color: rgba(16, 185, 129, 0.2);
+  color: #10b981;
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.status-badge.warning {
+  background-color: rgba(251, 191, 36, 0.2);
+  color: #f59e0b;
+  border: 1px solid rgba(251, 191, 36, 0.3);
+}
+
+.status-badge.error {
+  background-color: rgba(239, 68, 68, 0.2);
+  color: #ef4444;
+  border: 1px solid rgba(239, 68, 68, 0.3);
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border: 1px solid transparent;
+  font-family: 'Inter', sans-serif;
+}
+
+.btn-sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+}
+
+.btn-secondary {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.8);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background-color: rgba(212, 179, 131, 0.1);
+  border-color: #d4b383;
+  color: #d4b383;
+}
+
+.btn-secondary:disabled {
+  background-color: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.4);
+  border-color: rgba(255, 255, 255, 0.1);
+  cursor: not-allowed;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  font-family: 'Inter', sans-serif;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.page-info {
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.6);
+  font-family: 'Inter', sans-serif;
+}
+</style>
--- a/client/src/pages/admin/Logs.vue
+++ b/client/src/pages/admin/Logs.vue
@@ -23,6 +23,7 @@
            <th>ID</th>
            <th>操作人</th>
            <th>IP地址</th>
+            <th>归属地</th>
            <th>路径</th>
            <th>方法</th>
            <th>状态</th>
@@ -34,7 +35,8 @@
          <tr v-for="log in logs.list" :key="log.id">
            <td>{{ log.id }}</td>
            <td>{{ log.username }}</td>
-            <td>{{ log.ip }}</td>
+            <td class="font-mono text-xs">{{ log.ip }}</td>
+            <td>{{ log.region || 'Unknown' }}</td>
            <td class="log-path">{{ log.path }}</td>
            <td>
              <span :class="['method-badge', `method-${log.method.toLowerCase()}`]">
--- a/client/src/pages/admin/Posts.vue
+++ b/client/src/pages/admin/Posts.vue
@@ -20,6 +20,7 @@
              <th>标签</th>
              <th>发布日期</th>
              <th>状态</th>
+              <th>访问记录</th>
              <th class="text-right">操作</th>
            </tr>
          </thead>
@@ -57,6 +58,15 @@
                  {{ post.isPublished === 1 ? '已发布' : '草稿' }}
                </button>
              </td>
+              <td>
+                <button 
+                  @click="openAccessLogModal(post)"
+                  class="admin-btn-secondary py-1 px-3 text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+                  title="查看访问记录"
+                >
+                  查看
+                </button>
+              </td>
              <td class="text-right">
                <div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                  <button @click="openRelationModal(post)" class="admin-btn-secondary py-1 px-3 text-xs">
@@ -91,6 +101,13 @@
      :post="editingPost"
      @saved="fetchPosts"
    />
+
+    <!-- Access Log Modal -->
+    <AccessLogModal
+      v-model:isOpen="isAccessLogModalOpen"
+      :postId="selectedPostId"
+      :postTitle="selectedPostTitle"
+    />
  </div>
 </template>

@@ -99,17 +116,27 @@ import { ref, onMounted } from 'vue'
 import { getAdminPosts, deletePost as deletePostApi, Post, togglePostStatus } from '../../services/api'
 import { useToast } from '../../composables/useToast'
 import PostRelationModal from '../../components/admin/PostRelationModal.vue'
+import AccessLogModal from '../../components/admin/AccessLogModal.vue'

 const toast = useToast()
 const posts = ref<Post[]>([])
 const isRelationModalOpen = ref(false)
 const editingPost = ref<Post | null>(null)
+const isAccessLogModalOpen = ref(false)
+const selectedPostId = ref<number | null>(null)
+const selectedPostTitle = ref<string>('')

 const openRelationModal = (post: Post) => {
  editingPost.value = post
  isRelationModalOpen.value = true
 }

+const openAccessLogModal = (post: Post) => {
+  selectedPostId.value = post.id
+  selectedPostTitle.value = post.title
+  isAccessLogModalOpen.value = true
+}
+
 const fetchPosts = async () => {
  try {
    const response = await getAdminPosts()
--- a/client/src/pages/admin/dashboard/Analytics.vue
+++ b/client/src/pages/admin/dashboard/Analytics.vue
@@ -100,13 +100,16 @@
 import { ref, onMounted, computed } from 'vue'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
-import { BarChart, LineChart, PieChart } from 'echarts/charts'
+import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts'
 import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
-  TitleComponent
+  TitleComponent,
+  GeoComponent,
+  VisualMapComponent
 } from 'echarts/components'
+import * as echarts from 'echarts/core'
 import VChart from 'vue-echarts'
 import { getDashboardStats } from '../../../services/api'
 import { useToast } from '../../../composables/useToast'
@@ -116,10 +119,13 @@ use([
  BarChart,
  LineChart,
  PieChart,
+  MapChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
-  TitleComponent
+  TitleComponent,
+  GeoComponent,
+  VisualMapComponent
 ])

 const toast = useToast()
@@ -272,39 +278,156 @@ const uvTrendOption = computed(() => ({
  }]
 }))

-const regionOption = computed(() => ({
-  tooltip: { 
-    trigger: 'item',
-    backgroundColor: 'rgba(0,0,0,0.8)',
-    borderColor: '#333',
-    textStyle: { color: '#fff' },
-    formatter: '{b}: {c} ({d}%)'
-  },
-  legend: {
-    orient: 'vertical',
-    left: 'left',
-    textStyle: { color: '#ccc' }
-  },
-  series: [
-    {
-      name: '访问来源',
-      type: 'pie',
-      radius: ['40%', '70%'],
-      avoidLabelOverlap: false,
+// 省份名称映射（确保与地图数据一致）
+const provinceNameMap: Record<string, string> = {
+  '北京': '北京',
+  '天津': '天津',
+  '河北': '河北',
+  '山西': '山西',
+  '内蒙古': '内蒙古',
+  '辽宁': '辽宁',
+  '吉林': '吉林',
+  '黑龙江': '黑龙江',
+  '上海': '上海',
+  '江苏': '江苏',
+  '浙江': '浙江',
+  '安徽': '安徽',
+  '福建': '福建',
+  '江西': '江西',
+  '山东': '山东',
+  '河南': '河南',
+  '湖北': '湖北',
+  '湖南': '湖南',
+  '广东': '广东',
+  '广西': '广西',
+  '海南': '海南',
+  '重庆': '重庆',
+  '四川': '四川',
+  '贵州': '贵州',
+  '云南': '云南',
+  '西藏': '西藏',
+  '陕西': '陕西',
+  '甘肃': '甘肃',
+  '青海': '青海',
+  '宁夏': '宁夏',
+  '新疆': '新疆',
+  '台湾': '台湾',
+  '香港': '香港',
+  '澳门': '澳门'
+}
+
+// 所有省份列表（用于设置默认值）
+const allProvinces = [
+  '北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江',
+  '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南',
+  '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州',
+  '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '台湾', '香港', '澳门'
+]
+
+// 将数据转换为地图需要的格式，没有值的省份默认为0
+const getMapData = () => {
+  // 创建省份数据映射
+  const dataMap = new Map<string, number>()
+  
+  // 如果有数据，先填充实际数据
+  if (stats.value.userRegions && stats.value.userRegions.length > 0) {
+    stats.value.userRegions.forEach((item: any) => {
+      let provinceName = item.Region
+      // 标准化省份名称（移除"省"、"市"、"自治区"等后缀）
+      provinceName = provinceName.replace(/省|市|自治区|特别行政区|壮族自治区|维吾尔自治区|回族自治区/g, '')
+      
+      // 特殊处理
+      if (provinceName === '内蒙古') provinceName = '内蒙古'
+      if (provinceName === '广西') provinceName = '广西'
+      if (provinceName === '西藏') provinceName = '西藏'
+      if (provinceName === '宁夏') provinceName = '宁夏'
+      if (provinceName === '新疆') provinceName = '新疆'
+      
+      dataMap.set(provinceName, item.Count || 0)
+    })
+  }
+  
+  // 为所有省份生成数据，没有值的默认为0
+  return allProvinces.map(province => {
+    return [province, dataMap.get(province) || 0]
+  })
+}
+
+const regionOption = computed(() => {
+  const mapData = getMapData()
+  const maxValue = mapData.length > 0 ? Math.max(...mapData.map((d: any) => d[1] || 0)) : 1
+  
+  return {
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(0,0,0,0.8)',
+      borderColor: '#333',
+      textStyle: { color: '#fff' },
+      formatter: (params: any) => {
+        const value = params.value ? (Array.isArray(params.value) ? params.value[1] : params.value) : 0
+        return `${params.name}<br/>访问量: ${value}`
+      }
+    },
+    visualMap: {
+      min: 0,
+      max: maxValue || 100,
+      left: 'left',
+      top: 'bottom',
+      text: ['高', '低'],
+      inRange: {
+        color: ['#1a1a1a', '#d4b383']
+      },
+      textStyle: {
+        color: '#fff'
+      },
+      calculable: true
+    },
+    geo: {
+      map: 'china',
+      roam: false,
      itemStyle: {
-        borderRadius: 10,
-        borderColor: '#050505',
-        borderWidth: 2
+        areaColor: 'rgba(255, 255, 255, 0.05)',
+        borderColor: 'rgba(255, 255, 255, 0.2)',
+        borderWidth: 1
      },
-      label: { show: false, position: 'center' },
      emphasis: {
-        label: { show: true, fontSize: 20, fontWeight: 'bold', color: '#fff' }
+        itemStyle: {
+          areaColor: 'rgba(212, 179, 131, 0.3)'
+        }
      },
-      labelLine: { show: false },
-      data: stats.value.userRegions?.map((i: any) => ({ value: i.Count, name: i.Region })) || []
-    }
-  ]
-}))
+      label: {
+        show: true,
+        color: 'rgba(255, 255, 255, 0.8)',
+        fontSize: 10
+      }
+    },
+    series: [
+      {
+        name: '访问量',
+        type: 'map',
+        map: 'china',
+        geoIndex: 0,
+        data: mapData,
+        itemStyle: {
+          areaColor: 'rgba(255, 255, 255, 0.05)',
+          borderColor: 'rgba(255, 255, 255, 0.2)',
+          borderWidth: 1
+        },
+        emphasis: {
+          itemStyle: {
+            areaColor: 'rgba(212, 179, 131, 0.5)',
+            borderColor: '#d4b383',
+            borderWidth: 2
+          },
+          label: {
+            color: '#fff',
+            fontSize: 12
+          }
+        }
+      }
+    ]
+  }
+})

 const topPostsOption = computed(() => ({
  tooltip: { 
@@ -352,7 +475,26 @@ const loadData = async () => {
  }
 }

-onMounted(() => {
+// 加载中国地图数据
+const loadChinaMap = async () => {
+  try {
+    // 使用 echarts 官方的中国地图数据（从 CDN 加载）
+    const response = await fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
+    if (response.ok) {
+      const geoJson = await response.json()
+      // 注册地图数据
+      echarts.registerMap('china', geoJson)
+    } else {
+      console.warn('Failed to load China map data, using fallback')
+    }
+  } catch (error) {
+    console.error('Error loading China map:', error)
+  }
+}
+
+onMounted(async () => {
+  // 加载地图数据
+  await loadChinaMap()
  // Default to 7 days
  selectRange('7d')
 })