【需求 17679】 perf: 优化图标、回复、视频播放等

src/api/article/index.ts

@@ -11,6 +11,7 @@ import type {
   InterviewItemDto,
   ColumnItemDto,
   VideoOptionDto,
+  CommentChildrenSearchParams,
 } from './types'
 import type { BackendServicePageResult, PageSearchParams } from '@/utils/request/types'
 
@@ -217,3 +218,24 @@ export const addOrCancelArticleReward = (data: { articleId: number; ayabi: numbe
     data,
   })
 }
+
+/**
+ * 给视频播放量加1
+ */
+export const addVideoPlayCount = (articleId: number) => {
+  return service.request({
+    url: `/api/cultureArticle/addVideoPlayCount?articleId=${articleId}`,
+    method: 'POST',
+  })
+}
+
+/**
+ * 展开评论 获取子评论 分页
+ */
+export const getCommentChildren = (data: CommentChildrenSearchParams) => {
+  return service.request<BackendServicePageResult<CommentItemDto>>({
+    url: `/api/cultureComment/comment/children`,
+    method: 'POST',
+    data,
+  })
+}

src/api/article/types.ts

@@ -146,6 +146,7 @@ export interface ArticleItemDto {
   videoDuration: string
   showComment?: boolean
   relateColumn?: string
+  rewardNum: number
 }
 
 /**
@@ -251,6 +252,13 @@ export interface CommentSearchParams extends PageSearchParams {
   articleId: number | string
   sortType: number
 }
+/**
+ * 获取子评论列表
+ */
+export interface CommentChildrenSearchParams extends PageSearchParams {
+  pId: number | string
+  articleId: number | string
+}
 
 /**
  * 新增评论
@@ -283,4 +291,6 @@ export interface CommentItemDto {
   replyUser: string
   replyName: string
   userId: number
+  isHaveChildren: BooleanFlag
+  childrenNum: number
 }

src/assets/svg/collection.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1764644261808" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6597" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M248.482281 938.000324c-4.306072 0-8.592702-1.336438-12.211113-3.967358-6.395664-4.646833-9.600659-12.521175-8.264221-20.314675l48.430012-282.363949L71.288626 431.382914c-5.66093-5.519714-7.698333-13.772678-5.255701-21.291932 2.444679-7.519254 8.943696-13.000082 16.768919-14.137998l283.508006-41.195238L493.099535 97.853655c3.498684-7.089465 10.720156-11.577686 18.627243-11.577686 7.907087 0 15.127536 4.489244 18.627243 11.577686l126.788661 256.904091 283.510052 41.195238c7.823176 1.137916 14.322194 6.618744 16.766872 14.137998 2.442632 7.519254 0.405229 15.773242-5.255701 21.291932L747.012502 631.354342l48.430012 282.363949c1.336438 7.7935-1.868557 15.667841-8.264221 20.314675-6.399757 4.646833-14.878872 5.257747-21.874193 1.582031L511.726777 802.298666 258.146385 935.614997C255.107165 937.211355 251.789607 938.000324 248.482281 938.000324zM130.422422 431.011454 313.25654 609.228415c4.894474 4.7727 7.128351 11.647271 5.974062 18.385742l-43.163055 251.64532 225.994104-118.811989c6.048763-3.180436 13.282514-3.180436 19.331277 0l225.992057 118.811989-43.163055-251.64532c-1.154289-6.738471 1.079588-13.613042 5.974062-18.385742l182.833095-178.216961-252.665557-36.71418c-6.767124-0.983397-12.614296-5.233188-15.641235-11.362792L511.726777 153.97893 398.729214 382.934482c-3.025916 6.129604-8.874111 10.379395-15.639189 11.362792L130.422422 431.011454z" fill="currentColor" p-id="6598"></path></svg>
\ No newline at end of file

src/assets/svg/collection_fill.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1764642248873" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12201" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z" fill="#3b82f6" p-id="12202"></path></svg>
\ No newline at end of file

src/assets/svg/comment.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1764643976711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18770" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M853.333333 768c35.413333 0 64-20.650667 64-55.978667V170.581333A63.978667 63.978667 0 0 0 853.333333 106.666667H170.666667C135.253333 106.666667 106.666667 135.253333 106.666667 170.581333v541.44C106.666667 747.285333 135.338667 768 170.666667 768h201.173333l110.016 117.44a42.752 42.752 0 0 0 60.586667 0.042667L651.904 768H853.333333z m-219.029333-42.666667h-6.250667l-115.797333 129.962667c-0.106667 0.106667-116.010667-129.962667-116.010667-129.962667H170.666667c-11.776 0-21.333333-1.621333-21.333334-13.312V170.581333A21.205333 21.205333 0 0 1 170.666667 149.333333h682.666666c11.776 0 21.333333 9.536 21.333334 21.248v541.44c0 11.754667-9.472 13.312-21.333334 13.312H634.304zM341.333333 490.666667a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z" fill="currentColor" p-id="18771"></path></svg>
\ No newline at end of file

src/assets/svg/praise.svg

-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1763611281052" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7362" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M190.193225 471.411583c14.446014 0 26.139334-11.718903 26.139334-26.13831 0-14.44499-11.69332-26.164916-26.139334-26.164916-0.271176 0-0.490164 0.149403-0.73678 0.149403l-62.496379 0.146333c-1.425466-0.195451-2.90005-0.295735-4.373611-0.295735-19.677155 0-35.621289 16.141632-35.621289 36.114522L86.622358 888.550075c0 19.949354 15.96767 35.597753 35.670407 35.597753 1.916653 0 3.808746 0.292666 5.649674 0l61.022819 0.022513c0.099261 0 0.148379 0.048095 0.24764 0.048095 0.097214 0 0.146333-0.048095 0.24457-0.048095l0.73678 0 0-0.148379c13.413498-0.540306 24.174586-11.422144 24.174586-24.960485 0-13.55983-10.760065-24.441669-24.174586-24.981974l0-0.393973-50.949392 0 1.450025-402.275993L190.193225 471.409536z" fill="#606266" p-id="7363"></path><path d="M926.52241 433.948343c-19.283182-31.445176-47.339168-44.172035-81.289398-45.546336-1.77032-0.246617-3.536546-0.39295-5.380544-0.39295l-205.447139-0.688685c13.462616-39.059598 22.698978-85.58933 22.698978-129.317251 0-28.349675-3.193739-55.962569-9.041934-82.542948l-0.490164 0.049119c-10.638291-46.578852-51.736315-81.31498-100.966553-81.31498-57.264215 0-95.466282 48.15065-95.466282 106.126063 0 3.241834-0.294712 6.387477 0 9.532097-2.996241 108.386546-91.240027 195.548698-196.23636 207.513194l0 54.881958-0.785899 222.227314 0 229.744521 10.709923 0 500.025271 0.222057 8.746198-0.243547c19.35686 0.049119 30.239721-4.817726 47.803749-16.116049 16.682961-10.761088 29.236881-25.50079 37.490869-42.156122 2.260483-3.341095 4.028757-7.075139 5.106298-11.20111l77.018118-344.324116c1.056052-4.053316 1.348718-8.181333 1.056052-12.160971C943.643346 476.446249 938.781618 453.944769 926.52241 433.948343zM893.82573 486.837924l-82.983993 367.783411-0.099261-0.049119c-2.555196 6.141884-6.879688 11.596106-12.872169 15.427364-4.177136 2.727111-8.773827 4.351098-13.414521 4.964058-1.49812-0.195451-3.046383 0-4.620227 0l-477.028511-0.540306-0.171915-407.408897c89.323375-40.266076 154.841577-79.670527 188.596356-173.661202 0.072655 0.024559 0.124843 0.049119 0.195451 0.072655 2.99931-9.137101 6.313799-20.73423 8.697079-33.164331 5.551436-29.185716 5.258771-58.123792 5.258771-58.123792-4.937452-37.98001 25.940812-52.965306 44.364417-52.965306 25.304316 0.860601 50.263777 33.656541 50.263777 52.326762 0 0 5.600555 27.563776 5.649674 57.190537 0.048095 37.366026-4.6673 56.847729-4.6673 56.847729l-0.466628 0c-5.872754 30.879288-16.214287 60.138682-30.464849 86.964654l0.36839 0.342808c-2.358721 4.815679-3.709485 10.220782-3.709485 15.943111 0 19.922748 19.088754 21.742187 38.765909 21.742187l238.761895 0.270153c0 0 14.666024 0.465604 14.690584 0.465604l0 0.100284c12.132318-0.638543 24.221658 5.207605 31.100322 16.409738 5.504364 9.016351 6.437619 19.6045 3.486404 28.988218L893.82573 486.837924z" fill="#606266" p-id="7364"></path><path d="M264.827039 924.31872c0.319272 0.024559 0.441045 0.024559 0.295735-0.024559 0.243547-0.048095 0.367367-0.074701-0.295735-0.074701s-0.539282 0.026606-0.271176 0.074701C264.43409 924.343279 264.532327 924.343279 264.827039 924.31872z" fill="#606266" p-id="7365"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1764643817261" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15130" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M190.193225 471.411583c14.446014 0 26.139334-11.718903 26.139334-26.13831 0-14.44499-11.69332-26.164916-26.139334-26.164916-0.271176 0-0.490164 0.149403-0.73678 0.149403l-62.496379 0.146333c-1.425466-0.195451-2.90005-0.295735-4.373611-0.295735-19.677155 0-35.621289 16.141632-35.621289 36.114522L86.622358 888.550075c0 19.949354 15.96767 35.597753 35.670407 35.597753 1.916653 0 3.808746 0.292666 5.649674 0l61.022819 0.022513c0.099261 0 0.148379 0.048095 0.24764 0.048095 0.097214 0 0.146333-0.048095 0.24457-0.048095l0.73678 0 0-0.148379c13.413498-0.540306 24.174586-11.422144 24.174586-24.960485 0-13.55983-10.760065-24.441669-24.174586-24.981974l0-0.393973-50.949392 0 1.450025-402.275993L190.193225 471.409536z" fill="currentColor" p-id="15131"></path><path d="M926.52241 433.948343c-19.283182-31.445176-47.339168-44.172035-81.289398-45.546336-1.77032-0.246617-3.536546-0.39295-5.380544-0.39295l-205.447139-0.688685c13.462616-39.059598 22.698978-85.58933 22.698978-129.317251 0-28.349675-3.193739-55.962569-9.041934-82.542948l-0.490164 0.049119c-10.638291-46.578852-51.736315-81.31498-100.966553-81.31498-57.264215 0-95.466282 48.15065-95.466282 106.126063 0 3.241834-0.294712 6.387477 0 9.532097-2.996241 108.386546-91.240027 195.548698-196.23636 207.513194l0 54.881958-0.785899 222.227314 0 229.744521 10.709923 0 500.025271 0.222057 8.746198-0.243547c19.35686 0.049119 30.239721-4.817726 47.803749-16.116049 16.682961-10.761088 29.236881-25.50079 37.490869-42.156122 2.260483-3.341095 4.028757-7.075139 5.106298-11.20111l77.018118-344.324116c1.056052-4.053316 1.348718-8.181333 1.056052-12.160971C943.643346 476.446249 938.781618 453.944769 926.52241 433.948343zM893.82573 486.837924l-82.983993 367.783411-0.099261-0.049119c-2.555196 6.141884-6.879688 11.596106-12.872169 15.427364-4.177136 2.727111-8.773827 4.351098-13.414521 4.964058-1.49812-0.195451-3.046383 0-4.620227 0l-477.028511-0.540306-0.171915-407.408897c89.323375-40.266076 154.841577-79.670527 188.596356-173.661202 0.072655 0.024559 0.124843 0.049119 0.195451 0.072655 2.99931-9.137101 6.313799-20.73423 8.697079-33.164331 5.551436-29.185716 5.258771-58.123792 5.258771-58.123792-4.937452-37.98001 25.940812-52.965306 44.364417-52.965306 25.304316 0.860601 50.263777 33.656541 50.263777 52.326762 0 0 5.600555 27.563776 5.649674 57.190537 0.048095 37.366026-4.6673 56.847729-4.6673 56.847729l-0.466628 0c-5.872754 30.879288-16.214287 60.138682-30.464849 86.964654l0.36839 0.342808c-2.358721 4.815679-3.709485 10.220782-3.709485 15.943111 0 19.922748 19.088754 21.742187 38.765909 21.742187l238.761895 0.270153c0 0 14.666024 0.465604 14.690584 0.465604l0 0.100284c12.132318-0.638543 24.221658 5.207605 31.100322 16.409738 5.504364 9.016351 6.437619 19.6045 3.486404 28.988218L893.82573 486.837924z" fill="currentColor" p-id="15132"></path><path d="M264.827039 924.31872c0.319272 0.024559 0.441045 0.024559 0.295735-0.024559 0.243547-0.048095 0.367367-0.074701-0.295735-0.074701s-0.539282 0.026606-0.271176 0.074701C264.43409 924.343279 264.532327 924.343279 264.827039 924.31872z" fill="currentColor" p-id="15133"></path></svg>
\ No newline at end of file

src/assets/svg/praise_fill.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1764641794770" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5469" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M64 483.04V872c0 37.216 30.144 67.36 67.36 67.36H192V416.32l-60.64-0.64A67.36 67.36 0 0 0 64 483.04zM857.28 344.992l-267.808 1.696c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-68.832-155.488-137.568-145.504-60.608 8.8-67.264 61.184-67.264 126.816v59.264c0 76.064-63.84 140.864-137.856 148L256 416.96v522.4h527.552a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824z" p-id="5470" fill="#3b82f6"></path></svg>
\ No newline at end of file

src/views/articleDetail/components/actionButtons.vue

@@ -14,17 +14,13 @@
           class="flex flex-col items-center justify-center w-56px h-56px transition-all duration-200 group"
           @click="handleClick(item as StatItem)"
         >
-          <el-icon
-            class="group-hover:text-blue-500! cursor-pointer"
-            size="20"
-            :style="{ color: item.active ? '#409eff' : '#606266' }"
-          >
-            <component :is="item.icon" />
+          <el-icon class="group-hover:text-blue-500! cursor-pointer" size="24">
+            <component :is="item.icon" :active="item.active" />
           </el-icon>
 
           <span
             class="text-12px cursor-pointer group-hover:text-blue-500!"
-            :style="{ color: item.active ? '#409eff' : '#606266' }"
+            :style="{ color: item.active ? '#3b82f6' : '#606266' }"
           >
             {{ item.count }}
           </span>
@@ -34,8 +30,7 @@
     <ScrollTopComp class="flex flex-col" />
   </div>
 </template>
-<script setup lang="ts">
-import { Star, ChatLineSquare, Pointer } from '@element-plus/icons-vue'
+<script setup lang="tsx">
 import type { ArticleItemDto } from '@/api'
 import type { Component } from 'vue'
 import { useScrollTop } from '@/hooks'
@@ -60,7 +55,9 @@ interface StatItem {
 const stats = computed(() => {
   return [
     {
-      icon: Pointer,
+      icon: ({ active }: { active: boolean }) => (
+        <SvgIcon name={active ? 'praise_fill' : 'praise'}></SvgIcon>
+      ),
       count: modelValue.value?.praiseCount ?? 0,
       label: '点赞',
       active: modelValue.value?.hasPraised,
@@ -79,7 +76,9 @@ const stats = computed(() => {
       },
     },
     {
-      icon: Star,
+      icon: ({ active }: { active: boolean }) => (
+        <SvgIcon name={active ? 'collection_fill' : 'collection'}></SvgIcon>
+      ),
       count: modelValue.value?.collectionCount ?? 0,
       label: '收藏',
       active: modelValue.value?.hasCollect,
@@ -96,7 +95,7 @@ const stats = computed(() => {
       },
     },
     {
-      icon: ChatLineSquare,
+      icon: <SvgIcon name="comment"></SvgIcon>,
       count: modelValue.value?.replyCount ?? 0,
       label: '评论',
       // active: modelValue.value?.replyCount > 0,

src/views/videoDetail/components/rewardDialog.vue

@@ -30,17 +30,17 @@
             <img
               v-if="option.amount === 1"
               src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23e0e0e0'/%3E%3Ctext x='50' y='65' font-size='40' text-anchor='middle' fill='%23666'%3E🪙%3C/text%3E%3C/svg%3E"
-              alt="1硬币"
+              alt="1YA币"
               class="w-full h-full"
             />
             <img
               v-else
               src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='35' cy='50' r='30' fill='%23ffd700'/%3E%3Ccircle cx='65' cy='50' r='30' fill='%23ffd700'/%3E%3Ctext x='50' y='65' font-size='30' text-anchor='middle' fill='%23fff'%3E🪙%3C/text%3E%3C/svg%3E"
-              alt="2硬币"
+              alt="2YA币"
               class="w-full h-full"
             />
           </div>
-          <div class="reward-amount">{{ option.amount }}硬币</div>
+          <div class="reward-amount">{{ option.amount }}YA币</div>
         </div>
       </div>
 

src/views/videoDetail/index.vue

@@ -8,7 +8,7 @@
         <h1 class="text-xl md:text-2xl font-medium text-gray-900 mb-2 leading-snug">
           {{ videoDetail?.title }}
         </h1>
-        <div class="flex items-center text-xs text-gray-500 gap-4 flex-wrap">
+        <div class="flex items-center text-14px text-gray-500 gap-4 flex-wrap">
           <span class="flex items-center gap-1">
             <i class="i-carbon-play-filled text-gray-400"></i>
             {{ formatNumber(videoDetail?.viewCount) }}播放
@@ -53,11 +53,13 @@
             <!-- 浏览量 -->
             <el-button
               text
-              class="flex items-center gap-2 text-gray-500"
+              class="flex items-center gap-2 transition-colors hover:text-blue-500"
               @click="handleLike(videoDetail)"
             >
-              <el-icon :color="videoDetail?.hasPraised ? '#409EFF' : '#999'"><Pointer /></el-icon>
-              <span class="text-sm" :class="{ 'text-blue-500': videoDetail?.hasPraised }">{{
+              <el-icon size="20">
+                <svg-icon :name="videoDetail?.hasPraised ? 'praise_fill' : 'praise'"></svg-icon>
+              </el-icon>
+              <span class="text-base" :class="{ 'text-blue-500': videoDetail?.hasPraised }">{{
                 videoDetail?.praiseCount || 0
               }}</span>
             </el-button>
@@ -65,28 +67,35 @@
             <!-- 收藏 -->
             <el-button
               text
-              class="flex items-center gap-2 text-gray-500 transition-colors"
+              class="flex items-center gap-2 transition-colors hover:text-blue-500"
               @click="handleCollect(videoDetail)"
             >
-              <el-icon :color="videoDetail?.hasCollect ? '#409EFF' : '#999'"><Star /></el-icon>
-              <span class="text-sm" :class="{ 'text-blue-500': videoDetail?.hasCollect }">{{
+              <el-icon size="20">
+                <svg-icon
+                  :name="videoDetail?.hasCollect ? 'collection_fill' : 'collection'"
+                ></svg-icon>
+              </el-icon>
+              <span class="text-base" :class="{ 'text-blue-500': videoDetail?.hasCollect }">{{
                 videoDetail?.collectionCount || 0
               }}</span>
             </el-button>
 
             <!-- 评论 -->
-            <el-button text class="flex items-center gap-2 text-gray-500 transition-colors">
-              <el-icon><ChatDotRound /></el-icon>
-              <span class="text-sm">{{ videoDetail?.replyCount || 0 }}</span>
-            </el-button>
-            <!-- 打赏 -->
             <el-button
               text
-              class="flex items-center gap-2 text-gray-500 transition-colors"
-              @click="handleReward"
+              class="flex items-center gap-2 transition-colors hover:text-blue-500"
+              @click="() => commentRef?.scrollToCommentBox?.()"
             >
+              <el-icon size="20">
+                <svg-icon name="comment"></svg-icon>
+              </el-icon>
+              <span class="text-base">{{ videoDetail?.replyCount || 0 }}</span>
+            </el-button>
+            <!-- 打赏 -->
+            <el-button text class="flex items-center gap-2 transition-colors" @click="handleReward">
               <!-- <el-icon><Star /></el-icon> -->
-              <span class="text-sm">打赏</span>
+              {{ videoDetail?.rewardNum }}
+              <span class="text-base"> 打赏</span>
             </el-button>
             <!-- 更多 -->
             <button
@@ -100,7 +109,7 @@
     </div>
 
     <!-- 卡片3: 简介与标签 -->
-    <div class="bg-white rounded-lg shadow-sm p-5">
+    <div class="bg-white rounded-lg shadow-sm p-5 mt-5">
       <h2 class="text-lg font-semibold text-gray-900 mb-3">视频简介</h2>
 
       <!-- 简介文本 -->
@@ -131,11 +140,15 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs'
 
-import { getArticleDetail, addOrCanceArticlelCollect, addOrCanceArticlelLike } from '@/api'
+import {
+  getArticleDetail,
+  addOrCanceArticlelCollect,
+  addOrCanceArticlelLike,
+  addVideoPlayCount,
+} from '@/api'
 import type { ArticleItemDto } from '@/api/article/types'
 
 import Comment from '@/components/common/Comment/index.vue'
-import { Pointer } from '@element-plus/icons-vue'
 import RewardDialog from './components/rewardDialog.vue'
 
 const route = useRoute()
@@ -145,7 +158,7 @@ const videoId = route.params.id as string
 // 视频详情
 const videoDetail = ref({} as ArticleItemDto)
 
-const commentRef = useTemplateRef<HTMLElement | null>('commentRef')
+const commentRef = useTemplateRef<InstanceType<typeof Comment> | null>('commentRef')
 const rewardDialogRef = useTemplateRef<InstanceType<typeof RewardDialog> | null>('rewardDialogRef')
 
 // 格式化数字
@@ -157,9 +170,10 @@ const formatNumber = (num: number) => {
   return num
 }
 
-// 视频播放处理
-const handlePlay = () => {
-  // 记录播放
+// 播放 记录播放量 + 1
+const handlePlay = async () => {
+  await addVideoPlayCount(videoDetail.value.id)
+  videoDetail.value.viewCount = videoDetail.value.viewCount + 1
 }
 
 const handlePause = () => {