展示量& 前端

Author: biliww

yunyu-server/src/main/java/com/ideaflow/yunyu/module/site/controller/SiteContentController.java

@@ -20,6 +20,7 @@
 import java.util.List;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
@@ -104,6 +105,19 @@ public ApiResponse<SitePostDetailResponse> getPostDetail(@PathVariable String sl
         return ApiResponse.success(siteContentService.getPostDetail(slug));
     }
 
+    /**
+     * 上报文章浏览量。
+     *
+     * @param id 文章 id
+     * @return 是否上报成功
+     */
+    @Operation(summary = "上报文章浏览量")
+    @PostMapping("/posts/{id}/view")
+    public ApiResponse<Boolean> increasePostViewCount(@PathVariable Long id) {
+        siteContentService.increasePostViewCount(id);
+        return ApiResponse.success(Boolean.TRUE);
+    }
+
     /**
      * 查询前台分类列表。
      *

yunyu-server/src/main/java/com/ideaflow/yunyu/module/site/service/SiteContentService.java

@@ -1,5 +1,6 @@
 package com.ideaflow.yunyu.module.site.service;
 
+import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.fasterxml.jackson.databind.JsonNode;
@@ -184,6 +185,29 @@ public SitePostDetailResponse getPostDetail(String slug) {
         return response;
     }
 
+    /**
+     * 增加文章浏览量。
+     * 作用：在前台文章详情页完成客户端加载后，按文章 id 执行一次原子自增，
+     * 避免详情读取接口与浏览量统计逻辑耦合。
+     *
+     * @param id 文章 id
+     */
+    public void increasePostViewCount(Long id) {
+        if (id == null) {
+            throw new BizException(ResultCode.BAD_REQUEST, "文章不存在");
+        }
+
+        int affectedRows = postMapper.update(null, new LambdaUpdateWrapper<PostEntity>()
+                .setSql("view_count = COALESCE(view_count, 0) + 1")
+                .eq(PostEntity::getId, id)
+                .eq(PostEntity::getStatus, "PUBLISHED")
+                .eq(PostEntity::getDeleted, 0));
+
+        if (affectedRows <= 0) {
+            throw new BizException(ResultCode.NOT_FOUND, "文章不存在");
+        }
+    }
+
     /**
      * 查询前台分类列表。
      *

yunyu-web/app/assets/svg/csdn.svg

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import YunyuParticleTreeDark from '~/components/motion/YunyuParticleTreeDark.vue'
-import YunyuParticleTreeLight from '~/components/motion/YunyuParticleTreeLight.vue'
 
 /**
  * 云屿首页氛围组件包装层。
  * 作用：根据当前明暗主题切换不同的首页装饰实现，
- * 让暗黑模式保留树影，明亮模式改为轻量云朵，并在切换主题时强制重新渲染。
+ * 让暗黑模式保留树影，明亮模式不再额外渲染装饰层，并在切换主题时强制重新渲染。
  */
 interface YunyuParticleTreeProps {
   treeAreaRatio?: number
@@ -15,6 +14,7 @@ interface YunyuParticleTreeProps {
 }
 
 const colorMode = useColorMode()
+const renderVersion = ref(0)
 const props = withDefaults(defineProps<YunyuParticleTreeProps>(), {
   treeAreaRatio: 0.42,
   maxTreeWidth: 760,
@@ -24,12 +24,12 @@ const props = withDefaults(defineProps<YunyuParticleTreeProps>(), {
 
 /**
  * 计算当前应该渲染的氛围组件。
- * 作用：将明亮模式和暗黑模式的视觉语言完全拆开，避免一个组件内兼顾两套样式。
+ * 作用：仅在暗黑模式下渲染树影装饰，明亮模式直接返回空，避免浅色云层在亮底上失去存在感。
  *
  * @returns 当前主题对应的装饰组件
  */
 const currentAtmosphereComponent = computed(() => {
-  return colorMode.value === 'dark' ? YunyuParticleTreeDark : YunyuParticleTreeLight
+  return colorMode.value === 'dark' ? YunyuParticleTreeDark : null
 })
 
 /**
@@ -39,12 +39,25 @@ const currentAtmosphereComponent = computed(() => {
  * @returns 当前主题对应的组件 key
  */
 const currentAtmosphereKey = computed(() => {
-  return colorMode.value === 'dark' ? 'yunyu-particle-tree-dark' : 'yunyu-particle-tree-light'
+  return `${colorMode.value === 'dark' ? 'yunyu-particle-tree-dark' : 'yunyu-particle-tree-empty'}-${renderVersion.value}`
 })
+
+/**
+ * 监听主题实际值与用户偏好变化。
+ * 作用：在明亮、暗黑、系统三种模式切换时强制增加版本号，
+ * 确保首页氛围组件一定会被重新挂载，而不是只复用旧实例。
+ */
+watch(
+  () => [colorMode.value, colorMode.preference],
+  () => {
+    renderVersion.value += 1
+  }
+)
 </script>
 
 <template>
   <component
+    v-if="currentAtmosphereComponent"
     :is="currentAtmosphereComponent"
     :key="currentAtmosphereKey"
     v-bind="props"

yunyu-web/app/assets/svg/juejin.svg

@@ -111,7 +111,7 @@ const TREE_DYNAMIC_PROFILE: TreeRenderProfile = {
   leafDepthAlpha: 0.06,
   leafSoftBaseAlpha: 0.024,
   leafSoftDepthAlpha: 0.036,
-  particleAlphaScale: 0.42
+  particleAlphaScale: 0.52
 }
 const TREE_STATIC_PROFILE: TreeRenderProfile = {
   branchGlowBaseAlpha: 0.004,
@@ -125,7 +125,7 @@ const TREE_STATIC_PROFILE: TreeRenderProfile = {
   leafDepthAlpha: 0.026,
   leafSoftBaseAlpha: 0.011,
   leafSoftDepthAlpha: 0.02,
-  particleAlphaScale: 0.22
+  particleAlphaScale: 0.42
 }
 
 let animationFrameId: number | null = null
@@ -332,18 +332,29 @@ function createTreeScene(width: number, height: number, paddingLeft: number, pad
     0.02
   )
 
-  const particleCount = width < 520 ? 4 : 7
+  const particleCount = width < 520 ? 5 : 8
+  const leafAnchors = leaves.length > 0 ? leaves : [{
+    x: areaLeft + areaWidth * 0.72,
+    y: height * 0.34,
+    radius: 1,
+    revealAt: 0,
+    driftPhase: 0,
+    driftAmplitude: 0
+  }]
 
   for (let index = 0; index < particleCount; index += 1) {
+    const anchorLeaf = leafAnchors[Math.floor(random() * leafAnchors.length)]
+    const endBias = 0.58 + random() * 0.34
+
     particles.push({
-      x: areaLeft + areaWidth * (0.22 + random() * 0.62),
-      y: height * (0.22 + random() * 0.42),
-      radius: 0.45 + random() * 0.92,
-      alpha: 0.06 + random() * 0.09,
-      driftX: 1.4 + random() * 4.2,
-      driftY: 1.1 + random() * 3.4,
+      x: anchorLeaf.x + (random() - 0.22) * 18 + areaWidth * 0.08 * endBias,
+      y: anchorLeaf.y + (random() - 0.5) * 16 - height * 0.015 * endBias,
+      radius: 0.5 + random() * 0.96,
+      alpha: 0.09 + random() * 0.14,
+      driftX: 1 + random() * 3,
+      driftY: 0.8 + random() * 2.2,
       phase: random() * Math.PI * 2,
-      speed: 0.14 + random() * 0.22
+      speed: 0.1 + random() * 0.16
     })
   }
 
@@ -838,7 +849,7 @@ onBeforeUnmount(() => {
   --yy-tree-branch-glow-rgb: 68, 120, 172;
   --yy-tree-leaf-rgb: 85, 98, 114;
   --yy-tree-leaf-soft-rgb: 68, 81, 98;
-  --yy-tree-dust-rgb: 114, 128, 144;
+  --yy-tree-dust-rgb: 132, 145, 160;
   mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.95) 56%, rgba(0, 0, 0, 0.36) 72%, transparent 100%);
 }
 
@@ -847,7 +858,7 @@ onBeforeUnmount(() => {
   --yy-tree-branch-glow-rgb: 72, 128, 182;
   --yy-tree-leaf-rgb: 93, 107, 123;
   --yy-tree-leaf-soft-rgb: 71, 86, 104;
-  --yy-tree-dust-rgb: 118, 132, 148;
+  --yy-tree-dust-rgb: 138, 152, 168;
 }
 
 .yunyu-particle-tree__canvas {

yunyu-web/app/assets/svg/wechat.svg

@@ -65,6 +65,18 @@ export function useSiteContent() {
     return await apiClient.request<SitePostDetail>(`/api/site/posts/${slug}`)
   }
 
+  /**
+   * 上报文章浏览量。
+   *
+   * @param id 文章 id
+   * @returns 是否上报成功
+   */
+  async function increasePostViewCount(id: number) {
+    return await apiClient.request<boolean>(`/api/site/posts/${id}/view`, {
+      method: 'POST'
+    })
+  }
+
   /**
    * 查询文章评论列表。
    *
@@ -164,6 +176,7 @@ export function useSiteContent() {
     getHome,
     listPosts,
     getPostDetail,
+    increasePostViewCount,
     listPostComments,
     createPostComment,
     listCategories,