fix: 聊天UI优化 #957

用户访问统计使用缓存+定时任务

CONTRIBUTING.md

@@ -249,6 +249,6 @@ https://resend.com/emails 创建账号并登录
 
 ## 开源共建和API文档
 
-- API文档: https://openisle-docs.netlify.app/docs/openapi
+- API文档: https://docs.open-isle.com/openapi
 
 

backend/src/main/java/com/openisle/config/CachingConfig.java

@@ -44,6 +44,8 @@ public class CachingConfig {
     public static final String VERIFY_CACHE_NAME="openisle_verify";
     // 发帖频率限制
     public static final String LIMIT_CACHE_NAME="openisle_limit";
+    // 用户访问统计
+    public static final String VISIT_CACHE_NAME="openisle_visit";
 
     /**
      * 自定义Redis的序列化器

backend/src/main/java/com/openisle/config/SecurityConfig.java

@@ -6,6 +6,7 @@ import com.openisle.repository.UserRepository;
 import lombok.RequiredArgsConstructor;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
+import org.springframework.data.redis.core.RedisTemplate;
 import org.springframework.http.HttpMethod;
 import org.springframework.security.authentication.AuthenticationManager;
 import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
@@ -26,6 +27,8 @@ import org.springframework.web.cors.CorsConfiguration;
 import org.springframework.web.cors.CorsConfigurationSource;
 import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
 import org.springframework.beans.factory.annotation.Value;
+
+import java.time.LocalDate;
 import java.util.List;
 
 import jakarta.servlet.FilterChain;
@@ -44,6 +47,8 @@ public class SecurityConfig {
     @Value("${app.website-url}")
     private String websiteUrl;
 
+    private final RedisTemplate redisTemplate;
+
     @Bean
     public PasswordEncoder passwordEncoder() {
         return new BCryptPasswordEncoder();
@@ -208,7 +213,8 @@ public class SecurityConfig {
             protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
                 var auth = org.springframework.security.core.context.SecurityContextHolder.getContext().getAuthentication();
                 if (auth != null && auth.isAuthenticated() && !(auth instanceof org.springframework.security.authentication.AnonymousAuthenticationToken)) {
-                    userVisitService.recordVisit(auth.getName());
+                    String key = CachingConfig.VISIT_CACHE_NAME+":"+ LocalDate.now();
+                    redisTemplate.opsForSet().add(key, auth.getName());
                 }
                 filterChain.doFilter(request, response);
             }

backend/src/main/java/com/openisle/controller/PostController.java

@@ -155,10 +155,10 @@ public class PostController {
         if (tagId != null) {
             tids = java.util.List.of(tagId);
         }
-
+// 只需要在请求的一开始统计一次
-        if (auth != null) {
+//        if (auth != null) {
-            userVisitService.recordVisit(auth.getName());
+//            userVisitService.recordVisit(auth.getName());
-        }
+//        }
 
         boolean hasCategories = ids != null && !ids.isEmpty();
         boolean hasTags = tids != null && !tids.isEmpty();
@@ -195,10 +195,10 @@ public class PostController {
         if (tagId != null) {
             tids = java.util.List.of(tagId);
         }
-
+// 只需要在请求的一开始统计一次
-        if (auth != null) {
+//        if (auth != null) {
-            userVisitService.recordVisit(auth.getName());
+//            userVisitService.recordVisit(auth.getName());
-        }
+//        }
 
         return postService.listPostsByViews(ids, tids, page, pageSize)
                 .stream().map(postMapper::toSummaryDto).collect(Collectors.toList());
@@ -223,10 +223,10 @@ public class PostController {
         if (tagId != null) {
             tids = java.util.List.of(tagId);
         }
-
+// 只需要在请求的一开始统计一次
-        if (auth != null) {
+//        if (auth != null) {
-            userVisitService.recordVisit(auth.getName());
+//            userVisitService.recordVisit(auth.getName());
-        }
+//        }
 
         return postService.listPostsByLatestReply(ids, tids, page, pageSize)
                 .stream().map(postMapper::toSummaryDto).collect(Collectors.toList());
@@ -251,9 +251,10 @@ public class PostController {
         if (tagId != null) {
             tids = java.util.List.of(tagId);
         }
-        if (auth != null) {
+// 只需要在请求的一开始统计一次
-            userVisitService.recordVisit(auth.getName());
+//        if (auth != null) {
-        }
+//            userVisitService.recordVisit(auth.getName());
+//        }
         return postService.listFeaturedPosts(ids, tids, page, pageSize)
                 .stream().map(postMapper::toSummaryDto).collect(Collectors.toList());
     }

backend/src/main/java/com/openisle/controller/UserController.java

@@ -100,6 +100,7 @@ public class UserController {
         ));
     }
 
+    // 这个方法似乎没有使用？
     @PostMapping("/me/signin")
     @SecurityRequirement(name = "JWT")
     @Operation(summary = "Daily sign in", description = "Sign in to receive rewards")

backend/src/main/java/com/openisle/schdule/UserVisitScheduler.java

@@ -0,0 +1,48 @@
+package com.openisle.schdule;
+
+import com.openisle.config.CachingConfig;
+import com.openisle.model.User;
+import com.openisle.model.UserVisit;
+import com.openisle.repository.UserRepository;
+import com.openisle.repository.UserVisitRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.redis.core.RedisTemplate;
+import org.springframework.scheduling.annotation.Scheduled;
+import org.springframework.stereotype.Component;
+import org.springframework.util.CollectionUtils;
+
+import java.time.LocalDate;
+import java.util.Set;
+
+/**
+ * 执行计划
+ * 将每天用户访问落库
+ * @author smallclover
+ * @since 2025-09-09
+ */
+@Component
+@RequiredArgsConstructor
+public class UserVisitScheduler {
+    private final RedisTemplate redisTemplate;
+    private final UserRepository userRepository;
+    private final UserVisitRepository userVisitRepository;
+
+    @Scheduled(cron = "0 5 0 * * ?")// 每天 00:05 执行
+    public void persistDailyVisits(){
+        LocalDate yesterday = LocalDate.now().minusDays(1);
+        String key = CachingConfig.VISIT_CACHE_NAME+":"+ yesterday;
+        Set<String> usernames = redisTemplate.opsForSet().members(key);
+        if(!CollectionUtils.isEmpty(usernames)){
+            for(String username: usernames){
+                User user = userRepository.findByUsername(username).orElse(null);
+                if(user != null){
+                    UserVisit userVisit = new UserVisit();
+                    userVisit.setUser(user);
+                    userVisit.setVisitDate(yesterday);
+                    userVisitRepository.save(userVisit);
+                }
+            }
+            redisTemplate.delete(key);
+        }
+    }
+}

backend/src/main/java/com/openisle/service/UserVisitService.java

@@ -1,15 +1,22 @@
 package com.openisle.service;
 
+import com.openisle.config.CachingConfig;
 import com.openisle.model.User;
 import com.openisle.model.UserVisit;
 import com.openisle.repository.UserRepository;
 import com.openisle.repository.UserVisitRepository;
 import lombok.RequiredArgsConstructor;
+import org.springframework.cache.annotation.CacheConfig;
+import org.springframework.data.redis.core.RedisTemplate;
 import org.springframework.stereotype.Service;
+import org.springframework.util.CollectionUtils;
 
+import java.time.Duration;
 import java.time.LocalDate;
+import java.time.LocalDateTime;
 import java.util.LinkedHashMap;
 import java.util.Map;
+import java.util.Set;
 
 @Service
 @RequiredArgsConstructor
@@ -17,6 +24,8 @@ public class UserVisitService {
     private final UserVisitRepository userVisitRepository;
     private final UserRepository userRepository;
 
+    private final RedisTemplate redisTemplate;
+
     public boolean recordVisit(String username) {
         User user = userRepository.findByUsername(username)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
@@ -30,10 +39,36 @@ public class UserVisitService {
         });
     }
 
+    /**
+     * 统计访问次数，改为从缓存获取/数据库获取
+     * @param username
+     * @return
+     */
     public long countVisits(String username) {
         User user = userRepository.findByUsername(username)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
-        return userVisitRepository.countByUser(user);
+
+        // 如果缓存存在就返回
+        String key1 = CachingConfig.VISIT_CACHE_NAME + ":"+LocalDate.now()+":count:"+username;
+        Integer cached = (Integer) redisTemplate.opsForValue().get(key1);
+        if(cached != null){
+            return cached.longValue();
+        }
+
+        // Redis Set 检查今天是否访问
+        String todayKey = CachingConfig.VISIT_CACHE_NAME + ":" + LocalDate.now();
+        boolean todayVisited = redisTemplate.opsForSet().isMember(todayKey, username);
+
+        Long visitCount = userVisitRepository.countByUser(user);
+        if (todayVisited) visitCount += 1;
+
+        LocalDateTime now = LocalDateTime.now();
+        LocalDateTime endOfDay = now.toLocalDate().atTime(23, 59, 59);
+        long secondsUntilEndOfDay = Duration.between(now, endOfDay).getSeconds();
+
+        // 写入缓存，设置 TTL，当天剩余时间
+        redisTemplate.opsForValue().set(key1, visitCount, Duration.ofSeconds(secondsUntilEndOfDay));
+        return visitCount;
     }
 
     public long countDau(LocalDate date) {

frontend_nuxt/assets/global.css

@@ -239,8 +239,16 @@ body {
 }
 
 .info-content-text img {
-  max-width: 100%;
+  max-width: 400px;
+  max-height: 600px;
   height: auto;
+  cursor: pointer;
+  box-shadow: 4px 12px 48px 0 rgba(0, 0, 0, 0.11);
+  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.info-content-text img:hover {
+  box-shadow: 4px 12px 48px 0 rgba(0, 0, 0, 0.35);
 }
 
 .info-content-text table {

frontend_nuxt/components/BaseTimeline.vue

@@ -100,7 +100,7 @@ export default {
 
 .timeline-content {
   flex: 1;
-  width: calc(100% - 32px);
+  width: calc(100% - 42px);
 }
 
 @media (max-width: 768px) {

frontend_nuxt/components/MessageEditor.vue

@@ -70,23 +70,6 @@ export default {
     onMounted(() => {
       vditorInstance.value = createVditor(editorId.value, {
         placeholder: '输入消息...',
-        height: 150,
-        toolbar: [
-          'emoji',
-          'bold',
-          'italic',
-          'strike',
-          'link',
-          '|',
-          'list',
-          '|',
-          'line',
-          'quote',
-          'code',
-          'inline-code',
-          '|',
-          'upload',
-        ],
         preview: {
           actions: [],
           markdown: { toc: false },
@@ -149,11 +132,17 @@ export default {
   border-radius: 8px;
 }
 
+.vditor {
+  min-height: 50px;
+  max-height: 150px;
+}
+
 .message-bottom-container {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  padding: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
   background-color: var(--bg-color-soft);
   border-top: 1px solid var(--border-color);
   border-bottom-left-radius: 8px;

frontend_nuxt/pages/about/index.vue

@@ -1,23 +1,48 @@
 <template>
   <div class="about-page">
     <BaseTabs v-model="selectedTab" :tabs="tabs">
-      <div class="about-loading" v-if="isFetching">
+      <template v-if="selectedTab === 'api'">
-        <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
+        <div class="about-api">
-      </div>
+          <div class="about-api-title">调试Token</div>
-      <div
+          <div v-if="!authState.loggedIn" class="about-api-login">
-        v-else
+            请<NuxtLink to="/login" class="about-api-login-link">登录</NuxtLink>后查看 Token
-        class="about-content"
+          </div>
-        v-html="renderMarkdown(content)"
+          <div v-else class="about-api-token">
-        @click="handleContentClick"
+            <div class="token-row">
-      ></div>
+              <span class="token-text">{{ shortToken }}</span>
+              <span @click="copyToken"><copy class="copy-icon" /></span>
+            </div>
+            <div class="warning-row">
+              <info-icon class="warning-icon" />
+              <div class="token-warning">请不要将 Token 泄露给他人</div>
+            </div>
+          </div>
+          <div class="about-api-title">API文档和调试入口</div>
+          <div class="about-api-link">API Playground <share /></div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="about-loading" v-if="isFetching">
+          <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
+        </div>
+        <div
+          v-else
+          class="about-content"
+          v-html="renderMarkdown(content)"
+          @click="handleContentClick"
+        ></div>
+      </template>
     </BaseTabs>
   </div>
 </template>
 
 <script>
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from '#imports'
+import { authState, getToken } from '~/utils/auth'
 import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
 import BaseTabs from '~/components/BaseTabs.vue'
+import { toast } from '~/composables/useToast'
 
 export default {
   name: 'AboutPageView',
@@ -44,11 +69,25 @@ export default {
         label: '隐私政策',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/privacy.md',
       },
+      {
+        key: 'api',
+        label: 'API与调试',
+      },
     ]
+    const route = useRoute()
+    const router = useRouter()
     const selectedTab = ref(tabs[0].key)
     const content = ref('')
+    const token = computed(() => (authState.loggedIn ? getToken() : ''))
+
+    const shortToken = computed(() => {
+      if (!token.value) return ''
+      if (token.value.length <= 20) return token.value
+      return `${token.value.slice(0, 20)}...${token.value.slice(-10)}`
+    })
 
     const loadContent = async (file) => {
+      if (!file) return
       try {
         isFetching.value = true
         const res = await fetch(file)
@@ -65,19 +104,58 @@ export default {
     }
 
     onMounted(() => {
-      loadContent(tabs[0].file)
+      const initTab = route.query.tab
+      if (initTab && tabs.find((t) => t.key === initTab)) {
+        selectedTab.value = initTab
+        const tab = tabs.find((t) => t.key === initTab)
+        if (tab && tab.file) loadContent(tab.file)
+      } else {
+        loadContent(tabs[0].file)
+      }
     })
 
     watch(selectedTab, (name) => {
       const tab = tabs.find((t) => t.key === name)
-      if (tab) loadContent(tab.file)
+      if (tab && tab.file) loadContent(tab.file)
+      router.replace({ query: { ...route.query, tab: name } })
     })
 
+    watch(
+      () => route.query.tab,
+      (name) => {
+        if (name && name !== selectedTab.value && tabs.find((t) => t.key === name)) {
+          selectedTab.value = name
+        }
+      },
+    )
+
+    const copyToken = async () => {
+      if (import.meta.client && token.value) {
+        try {
+          await navigator.clipboard.writeText(token.value)
+          toast.success('已复制 Token')
+        } catch (e) {
+          toast.error('复制失败')
+        }
+      }
+    }
+
     const handleContentClick = (e) => {
       handleMarkdownClick(e)
     }
 
-    return { tabs, selectedTab, content, renderMarkdown, isFetching, handleContentClick }
+    return {
+      tabs,
+      selectedTab,
+      content,
+      renderMarkdown,
+      isFetching,
+      handleContentClick,
+      authState,
+      token,
+      copyToken,
+      shortToken,
+    }
   },
 }
 </script>
@@ -101,6 +179,66 @@ export default {
   height: 200px;
 }
 
+.about-api {
+  padding: 20px;
+}
+
+.about-api-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  margin-top: 30px;
+  margin-bottom: 15px;
+}
+
+.about-api-login-link {
+  color: var(--primary-color);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.about-api-login-link:hover {
+  text-decoration: underline;
+}
+
+.warning-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  opacity: 0.7;
+}
+
+.warning-icon {
+  font-size: 13px;
+}
+
+.token-warning {
+  font-size: 13px;
+}
+
+.token-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font: 14px;
+  margin-bottom: 10px;
+  word-break: break-all;
+}
+
+.copy-btn {
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.about-api-link {
+  color: var(--primary-color);
+  cursor: pointer;
+}
+
+.about-api-link:hover {
+  text-decoration: underline;
+}
+
 @media (max-width: 768px) {
   .about-tabs {
     width: 100vw;

frontend_nuxt/pages/message-box/[id].vue

@@ -1,5 +1,11 @@
 <template>
   <div class="chat-container" :class="{ float: isFloatMode }">
+    <vue-easy-lightbox
+      :visible="lightboxVisible"
+      :index="lightboxIndex"
+      :imgs="lightboxImgs"
+      @hide="lightboxVisible = false"
+    />
     <div v-if="!loading" class="chat-header">
       <div class="header-main">
         <div class="back-button" @click="goBack">
@@ -14,7 +20,7 @@
       </div>
     </div>
 
-    <div class="messages-list" ref="messagesListEl">
+    <div class="messages-list" ref="messagesListEl" @click="handleContentClick">
       <div v-if="loading" class="loading-container">
         <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
       </div>
@@ -101,7 +107,7 @@ import {
 import { useRoute } from 'vue-router'
 import { getToken, fetchCurrentUser } from '~/utils/auth'
 import { toast } from '~/main'
-import { renderMarkdown, stripMarkdownLength } from '~/utils/markdown'
+import { renderMarkdown, stripMarkdownLength, handleMarkdownClick } from '~/utils/markdown'
 import MessageEditor from '~/components/MessageEditor.vue'
 import ReactionsGroup from '~/components/ReactionsGroup.vue'
 import { useWebSocket } from '~/composables/useWebSocket'
@@ -110,6 +116,7 @@ import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
 import TimeManager from '~/utils/time'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
+import VueEasyLightbox from 'vue-easy-lightbox'
 
 const config = useRuntimeConfig()
 const route = useRoute()
@@ -135,6 +142,9 @@ const isFloatMode = computed(() => route.query.float !== undefined)
 const floatRoute = useState('messageFloatRoute')
 const replyTo = ref(null)
 const newMessagesCount = ref(0)
+const lightboxVisible = ref(false)
+const lightboxIndex = ref(0)
+const lightboxImgs = ref([])
 
 const isUserNearBottom = ref(true)
 function updateNearBottom() {
@@ -451,6 +461,17 @@ function minimize() {
   navigateTo('/')
 }
 
+function handleContentClick(e) {
+  handleMarkdownClick(e)
+  if (e.target.tagName === 'IMG') {
+    const container = e.target.parentNode
+    const imgs = [...container.querySelectorAll('img')].map((i) => i.src)
+    lightboxImgs.value = imgs
+    lightboxIndex.value = imgs.indexOf(e.target.src)
+    lightboxVisible.value = true
+  }
+}
+
 function openUser(id) {
   if (isFloatMode.value) {
     // 先不处理...

frontend_nuxt/plugins/iconpark.client.ts

@@ -77,6 +77,7 @@ import {
   Open,
   Dislike,
   CheckOne,
+  Share,
 } from '@icon-park/vue-next'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -157,4 +158,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('OpenIcon', Open)
   nuxtApp.vueApp.component('Dislike', Dislike)
   nuxtApp.vueApp.component('CheckOne', CheckOne)
+  nuxtApp.vueApp.component('Share', Share)
 })