Skip to content

C
corporateCulture-qd
Commit 16dcab51 by lijiabin
Options

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

parent 36f6d06a
Showing with 103 additions and 63 deletions
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 0 → 100644
// 重置 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">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment