✨ feat: 用户反馈操作新增防抖

 <template>
 <template>
   <div class="video-wrapper">
   <div class="video-wrapper">
-    <div class="video-div" :id="'mui-player-' + item.id"></div>
+    <div :id="'mui-player-' + item.id" class="video-div" />
     <div class="normal-module">
     <div class="normal-module">
       <div class="video-bar">
       <div class="video-bar">
         <van-row>
         <van-row>
@@ -25,11 +25,9 @@
           </van-col>
           </van-col>
         </van-row>
         </van-row>
       </div>
       </div>
-      <slot name="bookDetailSub"></slot>
-    </div>
-    <div class="audit-module">
-      
+      <slot name="bookDetailSub" />
     </div>
     </div>
+    <div class="audit-module" />
   </div>
   </div>
 </template>
 </template>
 
 
@@ -38,22 +36,26 @@
  * 视频组件通用模块
  * 视频组件通用模块
  */
  */
 import { icon_dianzan1, icon_dianzan2, icon_liuyan, icon_avatar } from '@/utils/generateIcons.js'
 import { icon_dianzan1, icon_dianzan2, icon_liuyan, icon_avatar } from '@/utils/generateIcons.js'
-import { ref, reactive, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { _, Toast } from '@/utils/generatePackage.js'
 import { _, Toast } from '@/utils/generatePackage.js'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import 'mui-player/dist/mui-player.min.css'
 import 'mui-player/dist/mui-player.min.css'
 import MuiPlayer from 'mui-player'
 import MuiPlayer from 'mui-player'
 import { prodActionAPI, prodInfoAPI } from '@/api/C/prod.js'
 import { prodActionAPI, prodInfoAPI } from '@/api/C/prod.js'
 
 
-const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
-
 const props = defineProps({
 const props = defineProps({
-  item: Object
+  item: {
+    type: Object,
+  }
 })
 })
 
 
 // 作品用户操作
 // 作品用户操作
-async function handleAction(action_type, prod_id) {
+/**
+ * 两个请求顺序执行，处理直接写在请求函数里面似乎有点问题，get请求数据似乎无法顺利渲染显示
+ */
+// FIXME：防抖处理
+const handleAction = _.debounce(async (action_type, prod_id) => {
   const { msg } = await prodActionAPI({ action_type, prod_id });
   const { msg } = await prodActionAPI({ action_type, prod_id });
   if (msg === `${action_type}-add-OK`) { // 动作操作成功
   if (msg === `${action_type}-add-OK`) { // 动作操作成功
     if (action_type === 'favor') {
     if (action_type === 'favor') {
@@ -62,15 +64,16 @@ async function handleAction(action_type, prod_id) {
     if (action_type === 'like') {
     if (action_type === 'like') {
       Toast('点赞成功');
       Toast('点赞成功');
     }
     }
-  } else { // 取消操作
+  } else { // 取消操作，播放动作不提示
     if (action_type !== 'play') {
     if (action_type !== 'play') {
       Toast('取消成功');
       Toast('取消成功');
     }
     }
   }
   }
   getProductDetail(action_type, prod_id); // 更新信息
   getProductDetail(action_type, prod_id); // 更新信息
-}
+}, 500, { leading: true, trailing: false });
+
 // 查询作品详情
 // 查询作品详情
-async function getProductDetail(action_type, prod_id) {
+const getProductDetail = async (action_type, prod_id) => {
   const { data } = await prodInfoAPI({ prod_id });
   const { data } = await prodInfoAPI({ prod_id });
   // 更新详情显示
   // 更新详情显示
   detail.value[`is_${action_type}`] = data[`is_${action_type}`];
   detail.value[`is_${action_type}`] = data[`is_${action_type}`];
@@ -95,7 +98,7 @@ onMounted(() => {
   detail.value = _.cloneDeep(props.item);
   detail.value = _.cloneDeep(props.item);
   const video = mp.video();
   const video = mp.video();
   // 监听原生video事件
   // 监听原生video事件
-  video && video.addEventListener('play', function (event) {
+  video && video.addEventListener('play', function () {
     handleAction('play', props.item.id)
     handleAction('play', props.item.id)
   });
   });
 });
 });