】

src/api/article/types.ts

-import { ArticleTypeEnum, ReleaseStatusTypeEnum, BooleanFlag, SendTypeEnum } from '@/constants'
+import {
+  ArticleTypeEnum,
+  ReleaseStatusTypeEnum,
+  BooleanFlag,
+  SendTypeEnum,
+  VideoPositionEnum,
+} from '@/constants'
 import type { PageSearchParams } from '@/utils/request/types'
 
 /**
@@ -193,6 +199,8 @@ export interface ArticleItemDto {
   sendTime: string
   tagIdList: number[]
   pushList: { valueId: string; valueType: number; valueName: string }[]
+  videoLocation: VideoPositionEnum
+  articleVideoUrl: string
 }
 
 /**

src/components/common/ArticleContent/index.vue

@@ -73,7 +73,15 @@
       <h1 class="text-2xl font-bold text-gray-900 mb-4 leading-tight">
         {{ articleDetail?.title }}
       </h1>
-
+      <!-- 顶部添加的视频 剧中固定宽度 -->
+      <div v-if="showTopVideo" class="flex justify-center">
+        <video
+          :src="articleDetail.articleVideoUrl"
+          controls
+          class="w-80% aspect-video"
+          :poster="`${articleDetail.articleVideoUrl}?x-oss-process=video/snapshot,t_1000,f_jpg`"
+        />
+      </div>
       <!-- 文章内容 -->
       <div v-if="!isHtml" class="prose prose-lg max-w-none">
         <div class="text-gray-700 leading-relaxed space-y-4 whitespace-pre-line text-17px">
@@ -95,13 +103,23 @@
             :preview-teleported="true"
           />
         </div>
-        <div v-if="articleDetail.type === ArticleTypeEnum.VIDEO">
-          <video :src="articleDetail.videoUrl" controls />
+        <div v-if="articleDetail.type === ArticleTypeEnum.VIDEO" class="flex justify-center">
+          <video :src="articleDetail.videoUrl" controls class="w-80% aspect-video" />
         </div>
       </div>
 
-      <div v-else v-html="articleDetail.content" class="html-content" v-image-preview="1111" />
+      <div v-else v-html="articleDetail.content" class="html-content" v-image-preview />
 
+      <!-- 底部添加的视频 -->
+      <div v-if="showBottomVideo" class="flex justify-center">
+        <!-- 长宽 1/1 -->
+        <video
+          :src="articleDetail.articleVideoUrl"
+          controls
+          class="w-80% aspect-video"
+          :poster="`${articleDetail.articleVideoUrl}?x-oss-process=video/snapshot,t_1000,f_jpg`"
+        />
+      </div>
       <!-- 标签 -->
       <div class="flex flex-wrap gap-2 mt-6">
         <span
@@ -128,7 +146,7 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
 import type { ArticleItemDto } from '@/api'
-import { articleTypeListOptions, ArticleTypeEnum } from '@/constants'
+import { articleTypeListOptions, ArticleTypeEnum, VideoPositionEnum } from '@/constants'
 import ActionMore from '@/components/common/ActionMore/index.vue'
 import { jumpToUserHomePage } from '@/utils'
 import { useUserStore } from '@/stores/user'
@@ -159,6 +177,25 @@ const isHtml = computed(() => {
   )
 })
 
+const isInterviewOrColumn = computed(
+  () =>
+    articleDetail.type === ArticleTypeEnum.INTERVIEW ||
+    articleDetail.type === ArticleTypeEnum.COLUMN,
+)
+
+const showTopVideo = computed(
+  () =>
+    isInterviewOrColumn.value &&
+    articleDetail.videoLocation === VideoPositionEnum.TOP &&
+    articleDetail.articleVideoUrl,
+)
+const showBottomVideo = computed(
+  () =>
+    isInterviewOrColumn.value &&
+    articleDetail.videoLocation === VideoPositionEnum.BOTTOM &&
+    articleDetail.articleVideoUrl,
+)
+
 const showPreview = ref(false)
 const currentPreviewIndex = ref(0)
 const srcList = ref<string[]>([])

src/constants/enums.ts

@@ -97,3 +97,11 @@ export enum UsageStatusEnum {
   // 已使用
   USED = 1,
 }
+
+// 视频位置枚举
+export enum VideoPositionEnum {
+  // 顶部
+  TOP = 1,
+  // 底部
+  BOTTOM = 2,
+}

src/hooks/useUploadImg.ts

@@ -18,7 +18,7 @@ export const useUploadImg = (imgList: Ref<string[]> = ref([])) => {
         },
       })
       const data = await promise
-      imgList.value.push(data.filePath)
+      imgList.value = [...imgList.value, data.filePath]
     } catch (error) {
       console.error('上传失败:', error)
     } finally {

src/views/homePage/index.vue

@@ -47,7 +47,7 @@
         >
           <div class="content-wrapper p-6">
             <router-view v-slot="{ Component, route }">
-              <transition name="fade" mode="out-in">
+              <transition name="fade-home" mode="out-in">
                 <keep-alive>
                   <component :is="Component" :key="getThirdLevelKey(route)" />
                 </keep-alive>
@@ -519,22 +519,22 @@ provide(TABS_REF_KEY, tabsRef)
   }
 }
 
-.fade-enter-from,
-.fade-leave-to {
+.fade-home-enter-from,
+.fade-home-leave-to {
   opacity: 0;
   transform: translateX(30px);
   filter: blur(4px);
 }
 
-.fade-enter-to,
-.fade-leave-from {
+.fade-home-enter-to,
+.fade-home-leave-from {
   opacity: 1;
   transform: translateX(0);
   filter: blur(0);
 }
 
-.fade-enter-active,
-.fade-leave-active {
+.fade-home-enter-active,
+.fade-home-leave-active {
   transition: all 0.3s ease;
 }
 </style>

src/views/publishLongArticle/index.vue

@@ -190,15 +190,15 @@
               </el-form-item>
 
               <!-- 插入视频 顶部或者底部 radio -->
-              <el-form-item label="插入视频" prop="insertVideo">
-                <el-radio-group v-model="form.insertVideo">
-                  <el-radio :value="BooleanFlag.YES">顶部</el-radio>
-                  <el-radio :value="BooleanFlag.NO">底部</el-radio>
+              <el-form-item label="插入视频" prop="videoLocation">
+                <el-radio-group v-model="form.videoLocation">
+                  <el-radio :value="VideoPositionEnum.TOP">顶部</el-radio>
+                  <el-radio :value="VideoPositionEnum.BOTTOM">底部</el-radio>
                 </el-radio-group>
               </el-form-item>
 
-              <el-form-item label="视频" prop="videoUrl">
-                <UploadVideo v-model="form.videoUrl" btnClass="flex-col" />
+              <el-form-item label="视频" prop="articleVideoUrl">
+                <UploadVideo v-model="form.articleVideoUrl" btnClass="flex-col" />
               </el-form-item>
             </template>
           </div>
@@ -254,6 +254,7 @@ import {
   BooleanFlag,
   ReleaseStatusTypeEnum,
   articleTypeListOptions,
+  VideoPositionEnum,
 } from '@/constants'
 import UploadFile from '@/components/common/UploadFile/index.vue'
 import UploadVideo from '@/components/common/UploadVideo/index.vue'
@@ -314,8 +315,8 @@ const [form, resetForm] = useResetData({
   pushList: [],
 
   // 视频
-  videoUrl: '',
-  insertVideo: BooleanFlag.NO,
+  videoLocation: VideoPositionEnum.TOP,
+  articleVideoUrl: '',
 })
 
 const rules: Record<string, FormItemRule[]> = {

src/views/questionDetail/index.vue

@@ -236,7 +236,7 @@
             >
               <el-icon class="text-base"><IEpChatRound /></el-icon>
               <span>
-                {{ answer.childrenNum ? `${answer.childrenNum} 条评论` : '添加评论' }}
+                {{ answer.childrenNum ? `${answer.childrenNum} 条评论` : '回复' }}
               </span>
             </button>
           </div>

src/views/userPage/index.vue

@@ -138,7 +138,7 @@
         <div class="flex-1 min-w-0">
           <div class="bg-white rounded-lg shadow-sm min-h-500px">
             <router-view v-slot="{ Component, route }">
-              <transition name="fade" mode="in-out">
+              <transition name="fade-user" mode="out-in">
                 <keep-alive>
                   <component :is="Component" :key="getThirdLevelKey(route)" ref="componentRef" />
                 </keep-alive>
@@ -471,4 +471,20 @@ onMounted(() => {
   transform: translateY(-20px) rotateY(10deg) translateZ(200px) scale(0.9);
   filter: blur(6px);
 }
+.fade-user-enter-from,
+.fade-user-leave-to {
+  opacity: 0;
+  transform: translateX(10px);
+  filter: blur(4px);
+}
+.fade-user-enter-to,
+.fade-user-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+  filter: blur(0);
+}
+.fade-user-enter-active,
+.fade-user-leave-active {
+  transition: all 0.3s ease;
+}
 </style>