Merge branch 'fix/space-analytics-frontend' into dev

Author: andylizf

src/components/analytics/AnalyticsChart.vue

@@ -4,44 +4,74 @@
       {{ title }}
     </v-card-title>
     <v-card-text>
-      <div v-if="chartType === 'pie'" class="pie-chart">
+      <div v-if="!data || data.length === 0" class="text-center py-8 text-medium-emphasis">
+        暂无数据
+      </div>
+      <div v-else-if="chartType === 'pie'" class="pie-chart">
         <svg :width="size" :height="size" viewBox="0 0 200 200">
           <g transform="translate(100, 100)">
-            <path
+            <g
               v-for="(segment, index) in pieSegments"
               :key="index"
-              :d="segment.path"
-              :fill="colors[index % colors.length]"
-              :stroke="'white'"
-              :stroke-width="2"
-            />
+              :class="['pie-segment', { 'pie-segment-hover': hoveredSegment === index }]"
+              @mouseenter="hoveredSegment = index"
+              @mouseleave="hoveredSegment = null"
+            >
+              <path
+                :d="segment.path"
+                :fill="colors[index % colors.length]"
+                :stroke="'white'"
+                :stroke-width="2"
+                :transform="hoveredSegment === index ? 'scale(1.05)' : 'scale(1)'"
+                style="cursor: pointer; transition: transform 0.2s ease"
+              />
+              <title>{{ data[index].label }}: {{ data[index].count }} ({{ data[index].percentage.toFixed(1) }}%)</title>
+            </g>
           </g>
         </svg>
       </div>
 
-      <div v-else-if="chartType === 'bar'" class="bar-chart">
-        <svg :width="size" :height="size" viewBox="0 0 400 200">
-          <g transform="translate(40, 160)">
-            <rect
-              v-for="(item, index) in data"
-              :key="index"
-              :x="index * barWidth"
-              :y="-item.percentage * 1.5"
-              :width="barWidth - 10"
-              :height="item.percentage * 1.5"
-              :fill="colors[index % colors.length]"
-            />
-            <text
-              v-for="(item, index) in data"
-              :key="`label-${index}`"
-              :x="index * barWidth + (barWidth - 10) / 2"
-              :y="20"
-              text-anchor="middle"
-              font-size="12"
-              class="chart-label"
-            >
-              {{ item.label }}
-            </text>
+      <div v-else-if="chartType === 'bar'" class="bar-chart d-flex justify-center">
+        <svg :width="400" :height="250" viewBox="0 0 400 250">
+          <g transform="translate(50, 200)">
+            <g v-for="(item, index) in data" :key="index">
+              <rect
+                :x="index * (300 / data.length) + 10"
+                :y="-Math.max(item.count * 10, 20)"
+                :width="Math.min(barWidth, 50)"
+                :height="Math.max(item.count * 10, 20)"
+                :fill="colors[index % colors.length]"
+                :opacity="hoveredBar === index ? 1 : 0.8"
+                :transform="hoveredBar === index ? `translate(0, -5)` : 'translate(0, 0)'"
+                style="cursor: pointer; transition: all 0.2s ease"
+                @mouseenter="hoveredBar = index"
+                @mouseleave="hoveredBar = null"
+              />
+              <text
+                :x="index * (300 / data.length) + 10 + Math.min(barWidth, 50) / 2"
+                :y="15"
+                text-anchor="middle"
+                font-size="12"
+                class="chart-label"
+              >
+                {{ item.label }}
+              </text>
+              <text
+                :x="index * (300 / data.length) + 10 + Math.min(barWidth, 50) / 2"
+                :y="-Math.max(item.count * 10, 20) - 5"
+                text-anchor="middle"
+                font-size="12"
+                font-weight="bold"
+                :fill="hoveredBar === index ? colors[index % colors.length] : '#666'"
+              >
+                {{ item.count }}
+              </text>
+              <title>{{ item.label }}: {{ item.count }}</title>
+            </g>
+            <!-- Y轴 -->
+            <line x1="0" y1="0" x2="0" y2="-180" stroke="#ccc" stroke-width="1" />
+            <!-- X轴 -->
+            <line x1="0" y1="0" x2="320" y2="0" stroke="#ccc" stroke-width="1" />
           </g>
         </svg>
       </div>
@@ -60,7 +90,7 @@
 <script setup lang="ts">
 import type { AnalyticsDistributionItem } from '@/network/api/spaces/types'
 
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 interface Props {
   title: string
@@ -73,6 +103,8 @@ const props = withDefaults(defineProps<Props>(), {
   size: 200,
 })
 
+const hoveredSegment = ref<number | null>(null)
+
 const colors = [
   '#1976D2',
   '#2E7D32',
@@ -93,9 +125,12 @@ const colors = [
 ]
 
 const barWidth = computed(() => {
-  return Math.min(320 / props.data.length, 60)
+  if (props.data.length === 0) return 60
+  return Math.min(60, 320 / props.data.length)
 })
 
+const hoveredBar = ref<number | null>(null)
+
 const pieSegments = computed(() => {
   if (props.chartType !== 'pie') return []
 

src/network/Interceptors/hooks/refreshToken.ts

@@ -1,7 +1,7 @@
 import type { AxiosError } from 'axios'
 import type { ResponseDataType } from '../../types'
 
-import ApiInstance from '../../api'
+import ApiInstance, { NewApiInstance } from '../../api'
 import { UserApi } from '../../api/users'
 import { messageFailed } from '../../utils/showMessage'
 import { Local } from '../../utils/storage'
@@ -56,7 +56,10 @@ export default async function refreshToken(error: AxiosError<ResponseDataType>)
       eventSourceQueue.forEach((cb) => cb(accessToken))
       eventSourceQueue.splice(0)
       console.log('re-request', config)
-      return ApiInstance.request<any>(config)
+      // 根据原始请求的baseURL判断使用哪个API实例
+      const baseURL = config.baseURL || ''
+      const apiInstance = baseURL.includes('8080') ? NewApiInstance : ApiInstance
+      return apiInstance.request<any>(config)
     } catch {
       messageFailed('请重新登录')
       Local.clear()
@@ -71,7 +74,10 @@ export default async function refreshToken(error: AxiosError<ResponseDataType>)
       queue.push((newToken: string) => {
         Reflect.set(config.headers!, 'Authorization', `Bearer ${newToken}`)
         console.log('queue', config)
-        resolve(ApiInstance.request<any>(config))
+        // 根据原始请求的baseURL判断使用哪个API实例
+        const baseURL = config.baseURL || ''
+        const apiInstance = baseURL.includes('8080') ? NewApiInstance : ApiInstance
+        resolve(apiInstance.request<any>(config))
       })
     })
   }

src/network/api/index.ts

@@ -7,7 +7,7 @@ import Api from '..'
 const option: ApiType = {
   cfg: {
     baseURL: API_BASE_URL,
-    timeout: 5000,
+    timeout: 30000,
   },
   interceptor: {
     responseInterceptor,
@@ -20,7 +20,7 @@ const option: ApiType = {
 const newOption: ApiType = {
   cfg: {
     baseURL: NEW_API_BASE_URL,
-    timeout: 5000,
+    timeout: 30000,
   },
   interceptor: {
     responseInterceptor,