【需求 20331】 perf: 覆盖组件库样式，优化样式，优化上传视频等内容

src/components/common/UploadVideo/index.vue

@@ -49,10 +49,11 @@
             </p>
           </div>
         </div>
-        <div class="video-actions">
+        <div class="video-actions" :class="btnClass">
           <el-button type="primary" @click="replaceVideo">
             <el-icon class="mr-2"><IEpRefresh /></el-icon> 重新选择
           </el-button>
+          <span></span>
           <el-button type="success" @click="previewVideo">
             <el-icon class="mr-2"><IEpView /></el-icon> 预览播放
           </el-button>
@@ -85,9 +86,12 @@ interface VideoInfo {
   fileId?: string
 }
 
-const { maxSize = 1000, acceptFormats = ['mp4', 'avi', 'mov', 'wmv', 'flv'] } =
-  defineProps<UploadVideoProps>()
-
+const {
+  maxSize = 1000,
+  acceptFormats = ['mp4', 'avi', 'mov', 'wmv', 'flv'],
+  btnClass = '',
+} = defineProps<UploadVideoProps>()
+console.log(btnClass, 'btnClass')
 const modelValue = defineModel<string>('modelValue', { required: true })
 const videoInfo = defineModel<VideoInfo | null>('videoInfo', { required: false, default: null })
 
@@ -459,49 +463,46 @@ defineExpose({
 
 .upload-success-optimized {
   display: flex;
-  flex-direction: column; /* Stack video info and actions vertically */
-  align-items: center; /* Center content horizontally */
+  align-items: center;
   justify-content: center;
-  padding: 20px 40px; /* Add some internal padding */
-  gap: 15px; /* Space between video info and actions */
+  padding: 0 20px;
+  height: 100%;
+  gap: 15px;
+  justify-content: space-between;
 }
 
 .video-info-display {
   display: flex;
-  align-items: center; /* Vertically align icon and text */
-  gap: 15px; /* Space between icon and text */
+  align-items: center;
+  gap: 15px;
 }
 
 .video-icon-wrapper {
-  font-size: 48px; /* Larger icon size */
+  font-size: 48px;
   color: #6366f1;
 }
 
 .video-details-text {
-  text-align: left; /* Align text within its container */
+  text-align: left;
 }
 
 .video-name {
   font-size: 16px;
   font-weight: bold;
-  color: #303133; /* Darker color for prominence */
+  color: #303133;
   margin-bottom: 5px;
-  word-break: break-all; /* Ensure long file names wrap */
+  word-break: break-all;
 }
 
 .video-meta {
   font-size: 13px;
-  color: #909399; /* Lighter color for secondary info */
+  color: #909399;
 }
 
 .video-actions {
   display: flex;
-  gap: 10px; /* Space between buttons */
-  margin-top: 10px; /* Space above buttons if stacked below video info */
-}
-
-.upload-success-optimized {
-  flex-direction: row;
-  justify-content: space-between;
+  gap: 5px;
+  margin-top: 10px;
+  /* flex-direction: column; */
 }
 </style>

src/components/common/UploadVideo/types.ts

 export interface UploadVideoProps {
   maxSize?: number // MB
   acceptFormats?: string[]
+  btnClass?: string
 }

src/hooks/useScrollTop.tsx

@@ -12,7 +12,7 @@ function ScrollTopComp(_: any, { emit }: SetupContext<Events>) {
       <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full flex items-center justify-center group-hover:rotate-15 transition-transform duration-300 shadow-sm">
         <SvgIcon name="icon_top" size="16" className="text-white" />
       </div>
-      <span class="text-12px font-medium text-gray-700 group-hover:text-blue-600 transition-colors">
+      <span class=" hidden lg:block text-xs font-medium text-gray-700 group-hover:text-blue-600 transition-colors">
         回到顶部
       </span>
     </button>

src/style/element.scss

+// 重置 element-plus 样式
+:root {
+  --el-color-primary: #3b82f6;
+}

src/style/index.css

 @import './reset.css';
+@import './element.scss';
 /* 解决弹窗滚轮 */

src/views/columnSearchList/index.vue

@@ -136,7 +136,7 @@
         </div>
 
         <div class="bottom-pagination backdrop-blur-8 border-t border-gray-200">
-          <div class="max-w-7xl mx-auto py-6">
+          <div class="max-w-7xl mx-auto py-4">
             <div class="flex items-center justify-end gap-4">
               <!-- 左侧：回到顶部按钮 -->
               <!-- <div class="left">

src/views/homePage/askTab/index.vue

@@ -76,9 +76,9 @@
             <!-- 底部信息栏 -->
             <div class="flex items-center justify-between border-t border-gray-100">
               <!-- 左侧：发布人信息 -->
-              <div class="flex items-center gap-4">
+              <div class="flex items-center gap-2 lg:gap-4">
                 <div class="flex items-center gap-2">
-                  <span class="text-orange-500 text-sm font-medium">发布人</span>
+                  <span class="text-orange-500 text-sm font-medium hidden lg:block">发布人</span>
                   <div class="flex items-center gap-2">
                     <el-avatar :size="20" :src="item.showAvatar"> </el-avatar>
                     <span class="text-sm text-gray-700 font-medium">{{ item.showName }}</span>
@@ -182,7 +182,7 @@
         </div>
         <!-- 底部分页 -->
         <div class="bottom-pagination backdrop-blur-8 border-t border-gray-200">
-          <div class="max-w-7xl mx-auto py-6">
+          <div class="max-w-7xl mx-auto py-4">
             <div class="flex items-center justify-between">
               <!-- 左侧：回到顶部按钮 -->
               <div class="left">
@@ -192,7 +192,7 @@
               <!-- 右侧：分页器 -->
               <div class="right">
                 <div
-                  class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3"
+                  class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2"
                 >
                   <el-pagination
                     v-model:current-page="searchParams.current"

src/views/homePage/homeTab/components/recommendList.vue

@@ -35,16 +35,14 @@
               </div>
 
               <!-- 统计信息 -->
-              <div
-                class="flex flex-wrap items-center gap-2 sm:gap-4 text-gray-500 text-xs sm:text-sm"
-              >
+              <div class="flex items-center gap-2 xl:gap-4 text-gray-500 text-xs lg:text-sm">
                 <!-- 发布人名称和头像 -->
                 <div class="flex items-center gap-2">
                   <el-avatar :size="24" :src="item.showAvatar" />
                   <span class="text-sm text-gray-500">{{ item.showName }}</span>
                 </div>
                 <!-- 时间 -->
-                <span class="text-gray-500 font-medium ml-auto sm:ml-0">
+                <span class="text-gray-500 font-medium ml-0">
                   <span class="hidden sm:inline">{{
                     dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm')
                   }}</span>
@@ -74,7 +72,7 @@
             </div>
 
             <!-- 图片区域 -->
-            <div v-show="item.faceUrl" class="relative flex-shrink-0 w-36 h-24">
+            <div v-show="item.faceUrl" class="relative flex-shrink-0 w-30 h-20 xl:w-36 xl:h-24">
               <el-image
                 :src="item.faceUrl + '?x-oss-process=image/format,webp'"
                 alt="文章配图"
@@ -94,7 +92,7 @@
 
       <!-- 底部分页 -->
       <div class="bottom-pagination backdrop-blur-8 border-t border-gray-200">
-        <div class="max-w-7xl mx-auto py-6">
+        <div class="max-w-7xl mx-auto py-4">
           <div class="flex items-center justify-between">
             <!-- 左侧：回到顶部按钮 -->
             <div class="left">
@@ -104,7 +102,7 @@
             <!-- 右侧：分页器 -->
             <div class="right">
               <div
-                class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3"
+                class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2"
               >
                 <el-pagination
                   v-model:current-page="searchParams.current"

src/views/homePage/homeTab/components/videoList.vue

@@ -379,7 +379,7 @@
 
       <!-- 底部分页 -->
       <div class="bottom-pagination backdrop-blur-8 border-t border-gray-200">
-        <div class="max-w-7xl mx-auto py-6">
+        <div class="max-w-7xl mx-auto py-4">
           <div class="flex items-center justify-between">
             <!-- 左侧：回到顶部按钮 -->
             <div class="left">
@@ -389,7 +389,7 @@
             <!-- 右侧：分页器 -->
             <div class="right">
               <div
-                class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3"
+                class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2"
               >
                 <el-pagination
                   v-model:current-page="searchParams.current"

src/views/homePage/yaTab/components/columnList.vue

@@ -60,7 +60,7 @@
                   {{ i.content }}
                 </p> -->
                 <div class="flex items-center justify-between text-xs text-gray-500">
-                  <div class="flex items-center space-x-4">
+                  <div class="flex items-center gap-2">
                     <span class="flex items-center">
                       <el-icon class="mr-1">
                         <IEpView />
@@ -80,7 +80,13 @@
                       {{ i.collectCount }}
                     </span>
                   </div>
-                  <span>{{ dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
+                  <span>
+                    {{
+                      smallerThanXl
+                        ? dayjs(i.createTime * 1000).format('YYYY-MM-DD')
+                        : dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm:ss')
+                    }}
+                  </span>
                 </div>
               </div>
             </div>
@@ -91,7 +97,7 @@
         </div>
       </div>
       <div class="bottom-pagination backdrop-blur-8 border-t border-gray-200">
-        <div class="max-w-7xl mx-auto py-6">
+        <div class="max-w-7xl mx-auto py-4">
           <div class="flex items-center justify-between">
             <!-- 左侧：回到顶部按钮 -->
             <div class="left">
@@ -100,7 +106,7 @@
             <!-- 右侧：分页器 -->
             <div class="right">
               <div
-                class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3"
+                class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2"
               >
                 <el-pagination
                   v-model:current-page="searchParams.current"
@@ -138,6 +144,11 @@ import { TABS_REF_KEY } from '@/constants'
 import dayjs from 'dayjs'
 import { useRouter } from 'vue-router'
 import { jumpToArticleDetailPage } from '@/utils'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+console.log(breakpointsTailwind, 'breakpointsTailwind')
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const smallerThanXl = breakpoints.smaller('xl')
+
 const router = useRouter()
 const tabsRef = inject(TABS_REF_KEY)
 const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!)

src/views/homePage/yaTab/components/interviewList.vue

@@ -78,7 +78,11 @@
                       {{ i.collectCount }}
                     </span>
                   </div>
-                  <span>{{ dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
+                  <span>{{
+                    smallerThanXl
+                      ? dayjs(i.createTime * 1000).format('YYYY-MM-DD')
+                      : dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm:ss')
+                  }}</span>
                 </div>
               </div>
             </div>
@@ -89,7 +93,7 @@
         </div>
       </div>
       <div class="bottom-pagination backdrop-blur-8 border-t border-gray-200">
-        <div class="max-w-7xl mx-auto py-6">
+        <div class="max-w-7xl mx-auto py-4">
           <div class="flex items-center justify-between">
             <!-- 左侧：回到顶部按钮 -->
             <div class="left">
@@ -98,7 +102,7 @@
             <!-- 右侧：分页器 -->
             <div class="right">
               <div
-                class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3"
+                class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2"
               >
                 <el-pagination
                   v-model:current-page="searchParams.current"
@@ -137,6 +141,9 @@ import { TABS_REF_KEY, ArticleTypeEnum } from '@/constants'
 import { useRouter } from 'vue-router'
 import dayjs from 'dayjs'
 import { jumpToArticleDetailPage } from '@/utils'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const smallerThanXl = breakpoints.smaller('xl')
 const router = useRouter()
 const tabsRef = inject(TABS_REF_KEY)
 

src/views/homePage/yaTab/components/practiceList.vue

@@ -192,7 +192,7 @@
     </div>
     <!-- 底部分页 -->
     <div class="bottom-pagination backdrop-blur-8 border-t border-gray-200">
-      <div class="max-w-7xl mx-auto py-6">
+      <div class="max-w-7xl mx-auto py-4">
         <div class="flex items-center justify-between">
           <!-- 左侧：回到顶部按钮 -->
           <div class="left">
@@ -202,7 +202,7 @@
           <!-- 右侧：分页器 -->
           <div class="right">
             <div
-              class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3"
+              class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2"
             >
               <el-pagination
                 v-model:current-page="searchParams.current"

src/views/homePage/yaTab/components/videoList.vue

@@ -256,7 +256,7 @@
         </div>
       </div>
       <div class="bottom-pagination backdrop-blur-8 border-t border-gray-200">
-        <div class="max-w-7xl mx-auto py-6">
+        <div class="max-w-7xl mx-auto py-4">
           <div class="flex items-center justify-between">
             <!-- 左侧：回到顶部按钮 -->
             <div class="left">
@@ -265,7 +265,7 @@
             <!-- 右侧：分页器 -->
             <div class="right">
               <div
-                class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3"
+                class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2"
               >
                 <el-pagination
                   v-model:current-page="searchParams.current"

src/views/practiceSearchList/index.vue

@@ -194,7 +194,7 @@
         </div>
 
         <div class="bottom-pagination backdrop-blur-8 border-t border-gray-200">
-          <div class="max-w-7xl mx-auto py-6">
+          <div class="max-w-7xl mx-auto py-4">
             <div class="flex items-center justify-end gap-4">
               <!-- 左侧：回到顶部按钮 -->
               <!-- <div class="left">

src/views/publishLongArticle/index.vue

@@ -165,7 +165,7 @@
                 <el-radio :value="BooleanFlag.NO">否</el-radio>
               </el-radio-group>
             </el-form-item>
-            <!-- 如果是官方账号的话还有推送相关的配置 -->
+            <!-- 如果是官方账号的话还有推送相关的配置  以及能上传视频-->
             <template v-if="userInfo.isOfficialAccount">
               <el-form-item label="推送给">
                 <el-button class="button-new-tag" size="small" @click="handleSelectUserAndDept">
@@ -188,6 +188,18 @@
                   value-format="X"
                 />
               </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-radio-group>
+              </el-form-item>
+
+              <el-form-item label="视频" prop="videoUrl">
+                <UploadVideo v-model="form.videoUrl" btnClass="flex-col" />
+              </el-form-item>
             </template>
           </div>
         </template>
@@ -244,6 +256,7 @@ import {
   articleTypeListOptions,
 } from '@/constants'
 import UploadFile from '@/components/common/UploadFile/index.vue'
+import UploadVideo from '@/components/common/UploadVideo/index.vue'
 import { useResetData } from '@/hooks'
 import { useColumnStore } from '@/stores/column'
 import { useInterviewStore } from '@/stores/interview'
@@ -253,6 +266,7 @@ import { useRouter, useRoute } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import { selectDepOrUser } from '@/utils'
 import type { FormItemRule } from 'element-plus'
+
 const columnStore = useColumnStore()
 const { columnList } = storeToRefs(columnStore)
 const interviewStore = useInterviewStore()
@@ -298,6 +312,10 @@ const [form, resetForm] = useResetData({
   pushType: SendTypeEnum.IMMEDIATE,
   pushTime: '',
   pushList: [],
+
+  // 视频
+  videoUrl: '',
+  insertVideo: BooleanFlag.NO,
 })
 
 const rules: Record<string, FormItemRule[]> = {

src/views/searchPage/index.vue

@@ -166,7 +166,7 @@
         </div>
 
         <div class="bottom-pagination backdrop-blur-8 border-t border-gray-200">
-          <div class="max-w-7xl mx-auto py-6">
+          <div class="max-w-7xl mx-auto py-4">
             <div class="flex items-center justify-end gap-4">
               <!-- 左侧：回到顶部按钮 -->
               <!-- <div class="left">

src/views/userPage/components/SelfComplaint.vue

@@ -102,7 +102,7 @@
       v-if="list.length"
       class="flex items-center justify-end px-6 py-4 border-t border-gray-200"
     >
-      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
+      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2">
         <el-pagination
           v-model:current-page="searchParams.current"
           v-model:page-size="searchParams.size"

src/views/userPage/components/selfAnswer.vue

@@ -53,7 +53,7 @@
       v-if="list.length"
       class="flex items-center justify-end px-6 py-4 border-t border-gray-200"
     >
-      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
+      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2">
         <el-pagination
           v-model:current-page="searchParams.current"
           v-model:page-size="searchParams.size"

src/views/userPage/components/selfAudit.vue

@@ -101,7 +101,7 @@
       v-if="list.length"
       class="flex items-center justify-end px-6 py-4 border-t border-gray-200"
     >
-      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
+      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2">
         <el-pagination
           v-model:current-page="searchParams.current"
           v-model:page-size="searchParams.size"

src/views/userPage/components/selfCase.vue

@@ -94,7 +94,7 @@
       v-if="list.length"
       class="flex items-center justify-end px-6 py-4 border-t border-gray-200"
     >
-      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
+      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2">
         <el-pagination
           v-model:current-page="searchParams.current"
           v-model:page-size="searchParams.size"

src/views/userPage/components/selfCollect.vue

@@ -62,7 +62,7 @@
       v-if="list.length"
       class="flex items-center justify-end px-6 py-4 border-t border-gray-200"
     >
-      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
+      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2">
         <el-pagination
           v-model:current-page="searchParams.current"
           v-model:page-size="searchParams.size"

src/views/userPage/components/selfComment.vue

@@ -77,7 +77,7 @@
       v-if="list.length"
       class="flex items-center justify-end px-6 py-4 border-t border-gray-200"
     >
-      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
+      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2">
         <el-pagination
           v-model:current-page="searchParams.current"
           v-model:page-size="searchParams.size"

src/views/userPage/components/selfDraft.vue

@@ -61,7 +61,7 @@
       v-if="list.length"
       class="flex items-center justify-end px-6 py-4 border-t border-gray-200"
     >
-      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
+      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2">
         <el-pagination
           v-model:current-page="searchParams.current"
           v-model:page-size="searchParams.size"

src/views/userPage/components/selfPraise.vue

@@ -61,7 +61,7 @@
       v-if="list.length"
       class="flex items-center justify-end px-6 py-4 border-t border-gray-200"
     >
-      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
+      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2">
         <el-pagination
           v-model:current-page="searchParams.current"
           v-model:page-size="searchParams.size"

src/views/userPage/components/selfPublish.vue

@@ -67,7 +67,7 @@
       v-if="list.length"
       class="flex items-center justify-end px-6 py-4 border-t border-gray-200"
     >
-      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
+      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2">
         <el-pagination
           v-model:current-page="searchParams.current"
           v-model:page-size="searchParams.size"

src/views/userPage/components/selfTask.vue

@@ -65,7 +65,7 @@
       v-if="list.length"
       class="flex items-center justify-end px-6 py-4 border-t border-gray-200"
     >
-      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
+      <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2">
         <el-pagination
           v-model:current-page="searchParams.current"
           v-model:page-size="searchParams.size"

src/views/videoDetail/index.vue

@@ -436,7 +436,6 @@ onMounted(async () => {
 
 .reward-button:hover .reward-number {
   animation: number-bounce 0.5s ease;
-  color: #3b82f6;
 }
 
 @keyframes number-bounce {

src/views/videoSearchList/index.vue

@@ -137,7 +137,7 @@
         </div>
 
         <div class="bottom-pagination backdrop-blur-8 border-t border-gray-200">
-          <div class="max-w-7xl mx-auto py-6">
+          <div class="max-w-7xl mx-auto py-4">
             <div class="flex items-center justify-end gap-4">
               <!-- 左侧：回到顶部按钮 -->
               <!-- <div class="left">