优化

Author: Layau-code

pom.xml

@@ -146,6 +146,12 @@
             <groupId>io.zipkin.reporter2</groupId>
             <artifactId>zipkin-reporter-brave</artifactId>
         </dependency>
+        <!-- IP地理位置解析 -->
+        <dependency>
+            <groupId>org.lionsoul</groupId>
+            <artifactId>ip2region</artifactId>
+            <version>2.7.0</version>
+        </dependency>
     </dependencies>
 
     <build>

src/main/java/com/layor/tinyflow/service/ClickRecorderService.java

@@ -1,6 +1,7 @@
 package com.layor.tinyflow.service;
 
 import com.layor.tinyflow.config.RabbitMQConfig;
+import com.layor.tinyflow.entity.ClickEvent;
 import com.layor.tinyflow.entity.ClickMessage;
 import com.layor.tinyflow.entity.DailyClick;
 import com.layor.tinyflow.repository.DailyClickRepository;
@@ -17,6 +18,13 @@
 import org.springframework.beans.factory.annotation.Value;
 
 import java.time.LocalDate;
+import java.time.LocalDateTime;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.concurrent.ConcurrentHashMap;
+import java.util.concurrent.ConcurrentLinkedQueue;
+import java.util.concurrent.ThreadLocalRandom;
+import java.util.concurrent.atomic.AtomicLong;
 
 @Service
 @Slf4j
@@ -32,15 +40,21 @@ public class ClickRecorderService {
     private org.springframework.data.redis.core.StringRedisTemplate redisTemplate;
     @Autowired
     private RabbitTemplate rabbitTemplate;
+    @Autowired(required = false)
+    private IpLocationService ipLocationService;
 
     @Value("${clicks.mode:mq}")
     private String counterMode;
 
     @Value("${events.sampleRate:0.0}")
     private double sampleRate;
 
-    private final java.util.concurrent.ConcurrentHashMap<String, java.util.concurrent.atomic.AtomicLong> localTotal = new java.util.concurrent.ConcurrentHashMap<>();
-    private final java.util.concurrent.ConcurrentHashMap<String, java.util.concurrent.atomic.AtomicLong> localDay = new java.util.concurrent.ConcurrentHashMap<>();
+    private final ConcurrentHashMap<String, AtomicLong> localTotal = new ConcurrentHashMap<>();
+    private final ConcurrentHashMap<String, AtomicLong> localDay = new ConcurrentHashMap<>();
+    
+    // 详细事件批量缓冲队列
+    private final ConcurrentLinkedQueue<ClickEvent> eventBuffer = new ConcurrentLinkedQueue<>();
+    private static final int EVENT_BATCH_SIZE = 100;
 
     /**
      * 记录点击事件
@@ -53,36 +67,94 @@ public class ClickRecorderService {
     @Async
     public void recordClick(String shortCode) {
         // 所有模式都先写本地内存（最快）
-        localTotal.computeIfAbsent(shortCode, k -> new java.util.concurrent.atomic.AtomicLong())
+        localTotal.computeIfAbsent(shortCode, k -> new AtomicLong())
                   .incrementAndGet();
-        localDay.computeIfAbsent(shortCode, k -> new java.util.concurrent.atomic.AtomicLong())
+        localDay.computeIfAbsent(shortCode, k -> new AtomicLong())
                 .incrementAndGet();
 
         log.debug("[LOCAL] Click recorded: {}", shortCode);
     }
 
+    /**
+     * 记录详细点击事件（包含 IP 地理位置解析）
+     * 使用批量缓冲队列，定时批量写入数据库
+     */
     @Async
     public void recordClickEvent(String shortCode, String referer, String ua, String ip, String host, String device) {
         if (sampleRate <= 0.0) return;
         if (sampleRate < 1.0) {
-            if (java.util.concurrent.ThreadLocalRandom.current().nextDouble() >= sampleRate) return;
+            if (ThreadLocalRandom.current().nextDouble() >= sampleRate) return;
+        }
+        
+        // IP 地理位置解析
+        String city = "";
+        String country = "";
+        if (ipLocationService != null && ip != null && !ip.isEmpty()) {
+            try {
+                city = ipLocationService.getCity(ip);
+                country = ipLocationService.getCountry(ip);
+            } catch (Exception e) {
+                log.debug("[EVENT] IP location parse failed for {}: {}", ip, e.getMessage());
+            }
         }
-//        封装
-        com.layor.tinyflow.entity.ClickEvent ev = com.layor.tinyflow.entity.ClickEvent.builder()
+        
+        // 构建事件对象
+        ClickEvent ev = ClickEvent.builder()
                 .shortCode(shortCode)
-                .ts(java.time.LocalDateTime.now())
+                .ts(LocalDateTime.now())
                 .referer(referer)
                 .ua(ua)
                 .ip(ip)
                 .sourceHost(host)
                 .deviceType(device)
-                .city("")
-                .country("")
+                .city(city)
+                .country(country)
                 .build();
-//        保存
-        clickEventRepository.save(ev);
+        
+        // 加入批量缓冲队列
+        eventBuffer.offer(ev);
+        
+        // 缓冲区达到阈值时触发批量写入
+        if (eventBuffer.size() >= EVENT_BATCH_SIZE) {
+            flushEventBuffer();
+        }
+        
+        log.debug("[EVENT] Buffered click event: code={}, city={}, country={}", shortCode, city, country);
     }
 
+    /**
+     * 定时刷新事件缓冲区（5秒一次）
+     */
+    @Scheduled(fixedDelay = 5000)
+    @Transactional
+    public void flushEventBuffer() {
+        if (eventBuffer.isEmpty()) return;
+        
+        long startTime = System.currentTimeMillis();
+        List<ClickEvent> batch = new ArrayList<>();
+        
+        // 每次最多处理 500 条
+        int count = 0;
+        while (!eventBuffer.isEmpty() && count < 500) {
+            ClickEvent ev = eventBuffer.poll();
+            if (ev != null) {
+                batch.add(ev);
+                count++;
+            }
+        }
+        
+        if (!batch.isEmpty()) {
+            try {
+                clickEventRepository.saveAll(batch);
+                long duration = System.currentTimeMillis() - startTime;
+                log.info("[EVENT FLUSH] Saved {} click events to DB, duration={}ms", batch.size(), duration);
+            } catch (Exception e) {
+                log.error("[EVENT FLUSH ERROR] Failed to save click events: {}", e.getMessage(), e);
+                // 失败时重新放回队列
+                eventBuffer.addAll(batch);
+            }
+        }
+    }
 
     /**
      * 第一阶段：定期快照到 Redis（10 秒一次）
@@ -178,4 +250,4 @@ private long toLong(Object value) {
         if (value instanceof Number) return ((Number) value).longValue();
         try { return Long.parseLong(String.valueOf(value)); } catch (Exception ex) { return 0L; }
     }
-}
+}

src/main/java/com/layor/tinyflow/service/IpLocationService.java

@@ -0,0 +1,89 @@
+package com.layor.tinyflow.service;
+
+import jakarta.annotation.PostConstruct;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Service;
+
+/**
+ * IP 地理位置解析服务
+ * 简化版本：暂时返回空值，后续可集成 ip2region 或第三方 API
+ */
+@Service
+@Slf4j
+public class IpLocationService {
+
+    @PostConstruct
+    public void init() {
+        log.info("[IpLocation] IP location service initialized (simplified mode)");
+    }
+
+    /**
+     * 解析 IP 地址获取地理位置
+     * @param ip IP 地址
+     * @return 格式: "国家|区域|省份|城市|ISP"
+     */
+    public String search(String ip) {
+        if (ip == null || ip.isEmpty()) {
+            return null;
+        }
+        // 过滤私有/本地 IP
+        if (isPrivateIp(ip)) {
+            return "内网|内网|内网|内网|内网";
+        }
+        // 简化实现：返回空，后续可集成 ip2region
+        return null;
+    }
+
+    /**
+     * 解析城市名
+     */
+    public String getCity(String ip) {
+        String region = search(ip);
+        if (region == null) return "";
+        // 格式: 国家|区域|省份|城市|ISP
+        String[] parts = region.split("\\|");
+        if (parts.length >= 4) {
+            String city = parts[3];
+            // 如果城市为 "0" 或空，返回省份
+            if ("0".equals(city) || city.isEmpty()) {
+                return parts.length >= 3 ? parts[2] : "";
+            }
+            return city;
+        }
+        return "";
+    }
+
+    /**
+     * 解析国家名
+     */
+    public String getCountry(String ip) {
+        String region = search(ip);
+        if (region == null) return "";
+        String[] parts = region.split("\\|");
+        if (parts.length >= 1) {
+            String country = parts[0];
+            return "0".equals(country) ? "" : country;
+        }
+        return "";
+    }
+
+    /**
+     * 判断是否为私有 IP
+     */
+    private boolean isPrivateIp(String ip) {
+        if (ip == null) return true;
+        return ip.startsWith("10.") ||
+               ip.startsWith("172.16.") || ip.startsWith("172.17.") ||
+               ip.startsWith("172.18.") || ip.startsWith("172.19.") ||
+               ip.startsWith("172.20.") || ip.startsWith("172.21.") ||
+               ip.startsWith("172.22.") || ip.startsWith("172.23.") ||
+               ip.startsWith("172.24.") || ip.startsWith("172.25.") ||
+               ip.startsWith("172.26.") || ip.startsWith("172.27.") ||
+               ip.startsWith("172.28.") || ip.startsWith("172.29.") ||
+               ip.startsWith("172.30.") || ip.startsWith("172.31.") ||
+               ip.startsWith("192.168.") ||
+               ip.equals("127.0.0.1") ||
+               ip.equals("localhost") ||
+               ip.equals("::1");
+    }
+}

src/main/resources/application.yml

@@ -131,7 +131,7 @@ management:
       endpoint: http://localhost:9411/api/v2/spans
 
 events:
-  sampleRate: 0.0
+  sampleRate: 1.0  # 100%记录详细点击事件，支持分布图统计
 
 # 点击计数模式：使用本地内存 + Redis 快照方案
 # 方案 C：第一阶段(10s)本地→Redis快照，第二阶段(60s)Redis→数据库

web/src/components/SkeletonLoader.vue

@@ -1,12 +1,51 @@
 <template>
   <div :class="wrapperClass">
-    <div v-for="n in count" :key="n" class="bg-gray-200 animate-pulse rounded" :style="{height: height+'px'}"></div>
+    <div v-for="n in count" :key="n" :class="skeletonClass" :style="skeletonStyle"></div>
   </div>
 </template>
 
 <script setup>
-const props = defineProps({ count: { type: Number, default: 1 }, height: { type: Number, default: 160 }, vertical: { type: Boolean, default: true } })
-const wrapperClass = props.vertical ? 'space-y-2' : 'flex gap-2'
+import { computed } from 'vue'
+
+const props = defineProps({ 
+  count: { type: Number, default: 1 }, 
+  height: { type: Number, default: 160 }, 
+  width: { type: String, default: '100%' },
+  vertical: { type: Boolean, default: true },
+  variant: { type: String, default: 'default' } // 'default', 'card', 'text', 'circle'
+})
+
+const wrapperClass = computed(() => props.vertical ? 'space-y-2' : 'flex gap-2')
+
+const skeletonClass = computed(() => {
+  const baseClass = 'animate-pulse'
+  const variantClass = {
+    'default': 'bg-gray-200 rounded',
+    'card': 'bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 rounded-lg shadow-sm',
+    'text': 'bg-gray-200 rounded',
+    'circle': 'bg-gray-200 rounded-full'
+  }
+  return `${baseClass} ${variantClass[props.variant] || variantClass.default}`
+})
+
+const skeletonStyle = computed(() => ({
+  height: props.variant === 'circle' ? props.height + 'px' : props.height + 'px',
+  width: props.variant === 'circle' ? props.height + 'px' : props.width
+}))
 </script>
 
-<style scoped></style>
+<style scoped>
+@keyframes shimmer {
+  0% { background-position: -468px 0; }
+  100% { background-position: 468px 0; }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>