859 lines
21 KiB
Vue
859 lines
21 KiB
Vue
<template>
|
||
<a-drawer
|
||
v-model:open="visible"
|
||
title="上传作品"
|
||
placement="right"
|
||
width="850px"
|
||
:footer-style="{ textAlign: 'right', padding: '16px 24px' }"
|
||
@close="handleCancel"
|
||
>
|
||
<template #title>
|
||
<div class="drawer-title">
|
||
<span>上传作品</span>
|
||
</div>
|
||
</template>
|
||
|
||
<a-form
|
||
ref="formRef"
|
||
:model="form"
|
||
:rules="rules"
|
||
:label-col="{ span: 4 }"
|
||
:wrapper-col="{ span: 20 }"
|
||
layout="horizontal"
|
||
>
|
||
<a-form-item label="作品名称" name="title" required>
|
||
<a-input
|
||
v-model:value="form.title"
|
||
placeholder="请输入作品名称"
|
||
:maxlength="200"
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="作品介绍" name="description" required>
|
||
<a-textarea
|
||
v-model:value="form.description"
|
||
placeholder="请输入作品介绍"
|
||
:rows="4"
|
||
:maxlength="2000"
|
||
show-count
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="选择方式" required>
|
||
<a-radio-group v-model:value="uploadMode" @change="handleModeChange">
|
||
<a-radio value="history">从创作历史选择</a-radio>
|
||
<a-radio value="local">本地上传</a-radio>
|
||
</a-radio-group>
|
||
</a-form-item>
|
||
|
||
<!-- 从创作历史选择模式 -->
|
||
<template v-if="uploadMode === 'history'">
|
||
<a-form-item label="选择作品" name="selectedWork" required>
|
||
<div class="work-selection">
|
||
<!-- 加载状态 -->
|
||
<div v-if="worksLoading" class="works-loading">
|
||
<a-spin />
|
||
<span>加载创作历史...</span>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<div v-else-if="completedWorks.length === 0" class="works-empty">
|
||
<a-empty description="暂无已完成的3D作品">
|
||
<template #image>
|
||
<FileImageOutlined style="font-size: 48px; color: #d9d9d9" />
|
||
</template>
|
||
</a-empty>
|
||
<a-button type="link" @click="goTo3DLab">
|
||
前往3D建模实验室创作
|
||
</a-button>
|
||
</div>
|
||
|
||
<!-- 作品网格 -->
|
||
<div v-else class="works-grid">
|
||
<div
|
||
v-for="work in completedWorks"
|
||
:key="work.id"
|
||
class="work-card"
|
||
:class="{ 'is-selected': form.selectedWorkId === work.id }"
|
||
@click="handleSelectWork(work)"
|
||
>
|
||
<div class="work-preview">
|
||
<img
|
||
v-if="work.previewUrl"
|
||
:src="getPreviewUrl(work.previewUrl)"
|
||
alt="预览"
|
||
@error="handleImageError"
|
||
/>
|
||
<div v-else class="preview-placeholder">
|
||
<FileImageOutlined />
|
||
</div>
|
||
<div v-if="form.selectedWorkId === work.id" class="selected-badge">
|
||
<CheckOutlined />
|
||
</div>
|
||
</div>
|
||
<div class="work-info">
|
||
<div class="work-desc" :title="work.inputContent">
|
||
{{ work.inputContent }}
|
||
</div>
|
||
<div class="work-time">
|
||
{{ formatTime(work.createTime) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div v-if="worksPagination.total > worksPagination.pageSize" class="works-pagination">
|
||
<a-pagination
|
||
v-model:current="worksPagination.current"
|
||
:total="worksPagination.total"
|
||
:page-size="worksPagination.pageSize"
|
||
size="small"
|
||
@change="handleWorksPageChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</a-form-item>
|
||
</template>
|
||
|
||
<!-- 本地上传模式 -->
|
||
<template v-else>
|
||
<a-form-item label="上传作品" name="localWorkFile" required>
|
||
<a-upload
|
||
v-model:file-list="localWorkFileList"
|
||
:before-upload="handleBeforeUploadWork"
|
||
:remove="handleRemoveWork"
|
||
:accept="workAcceptTypes"
|
||
:max-count="1"
|
||
>
|
||
<a-button>
|
||
<template #icon><UploadOutlined /></template>
|
||
选择3D文件
|
||
</a-button>
|
||
</a-upload>
|
||
<div class="upload-tip">
|
||
支持格式：.obj, .fbx, .3ds, .dae, .blend, .stl, .ply, .gltf, .glb，最大500MB
|
||
</div>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="预览图" name="localPreviewFile" required>
|
||
<a-upload
|
||
v-model:file-list="localPreviewFileList"
|
||
:before-upload="handleBeforeUploadPreview"
|
||
:remove="handleRemovePreview"
|
||
accept="image/*"
|
||
:max-count="1"
|
||
list-type="picture-card"
|
||
>
|
||
<div v-if="localPreviewFileList.length === 0" class="upload-placeholder">
|
||
<PlusOutlined />
|
||
<div>上传预览图</div>
|
||
</div>
|
||
</a-upload>
|
||
<div class="upload-tip">
|
||
请上传作品预览图，支持 JPG、PNG 格式，用于作品展示
|
||
</div>
|
||
</a-form-item>
|
||
</template>
|
||
|
||
<a-form-item label="上传附件">
|
||
<a-upload
|
||
v-model:file-list="attachmentFileList"
|
||
:before-upload="handleBeforeUploadAttachment"
|
||
:remove="handleRemoveAttachment"
|
||
:max-count="5"
|
||
>
|
||
<a-button>
|
||
<template #icon><UploadOutlined /></template>
|
||
上传附件
|
||
</a-button>
|
||
<template #itemRender="{ file, actions }">
|
||
<div class="attachment-item">
|
||
<PaperClipOutlined />
|
||
<span class="file-name">{{ file.name }}</span>
|
||
<DeleteOutlined class="delete-icon" @click="actions.remove" />
|
||
</div>
|
||
</template>
|
||
</a-upload>
|
||
<div class="upload-tip">可上传补充材料，最多5个文件，单个文件不超过100MB</div>
|
||
</a-form-item>
|
||
</a-form>
|
||
|
||
<template #footer>
|
||
<a-space>
|
||
<a-button @click="handleCancel">取消</a-button>
|
||
<a-button type="primary" :loading="submitLoading" @click="handleSubmit">
|
||
提交作品
|
||
</a-button>
|
||
</a-space>
|
||
</template>
|
||
</a-drawer>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, watch, computed } from "vue"
|
||
import { useRouter, useRoute } from "vue-router"
|
||
import { message } from "ant-design-vue"
|
||
import {
|
||
UploadOutlined,
|
||
FileImageOutlined,
|
||
CheckOutlined,
|
||
PaperClipOutlined,
|
||
DeleteOutlined,
|
||
PlusOutlined,
|
||
} from "@ant-design/icons-vue"
|
||
import type { FormInstance, UploadFile } from "ant-design-vue"
|
||
import { worksApi, registrationsApi, type SubmitWorkForm } from "@/api/contests"
|
||
import { getAI3DTasks, type AI3DTask } from "@/api/ai-3d"
|
||
import { useAuthStore } from "@/stores/auth"
|
||
import request from "@/utils/request"
|
||
import dayjs from "dayjs"
|
||
|
||
interface Props {
|
||
open: boolean
|
||
contestId: number
|
||
}
|
||
|
||
interface Emits {
|
||
(e: "update:open", value: boolean): void
|
||
(e: "success"): void
|
||
}
|
||
|
||
const props = defineProps<Props>()
|
||
const emit = defineEmits<Emits>()
|
||
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
const authStore = useAuthStore()
|
||
const visible = ref(false)
|
||
const submitLoading = ref(false)
|
||
const formRef = ref<FormInstance>()
|
||
|
||
// 上传模式
|
||
const uploadMode = ref<"history" | "local">("history")
|
||
|
||
// 3D文件格式
|
||
const workAcceptTypes =
|
||
".obj,.fbx,.3ds,.dae,.blend,.max,.c4d,.stl,.ply,.gltf,.glb"
|
||
|
||
// 表单数据
|
||
const form = reactive<{
|
||
title: string
|
||
description: string
|
||
// 历史记录模式
|
||
selectedWorkId: number | null
|
||
selectedWork: AI3DTask | null
|
||
// 本地上传模式
|
||
localWorkFile: File | null
|
||
localPreviewFile: File | null
|
||
// 附件
|
||
attachmentFiles: File[]
|
||
}>({
|
||
title: "",
|
||
description: "",
|
||
selectedWorkId: null,
|
||
selectedWork: null,
|
||
localWorkFile: null,
|
||
localPreviewFile: null,
|
||
attachmentFiles: [],
|
||
})
|
||
|
||
// 文件列表
|
||
const localWorkFileList = ref<UploadFile[]>([])
|
||
const localPreviewFileList = ref<UploadFile[]>([])
|
||
const attachmentFileList = ref<UploadFile[]>([])
|
||
|
||
// 3D作品列表
|
||
const worksLoading = ref(false)
|
||
const worksList = ref<AI3DTask[]>([])
|
||
const worksPagination = reactive({
|
||
current: 1,
|
||
pageSize: 8,
|
||
total: 0,
|
||
})
|
||
|
||
// 只显示已完成的作品
|
||
const completedWorks = computed(() => {
|
||
return worksList.value.filter((work) => work.status === "completed")
|
||
})
|
||
|
||
// 表单验证规则
|
||
const rules = computed(() => ({
|
||
title: [{ required: true, message: "请输入作品名称", trigger: "blur" }],
|
||
description: [{ required: true, message: "请输入作品介绍", trigger: "blur" }],
|
||
selectedWork: [
|
||
{
|
||
required: uploadMode.value === "history",
|
||
validator: () => {
|
||
if (uploadMode.value === "history" && !form.selectedWorkId) {
|
||
return Promise.reject(new Error("请选择一个3D作品"))
|
||
}
|
||
return Promise.resolve()
|
||
},
|
||
trigger: "change",
|
||
},
|
||
],
|
||
localWorkFile: [
|
||
{
|
||
required: uploadMode.value === "local",
|
||
validator: () => {
|
||
if (uploadMode.value === "local" && !form.localWorkFile) {
|
||
return Promise.reject(new Error("请上传3D文件"))
|
||
}
|
||
return Promise.resolve()
|
||
},
|
||
trigger: "change",
|
||
},
|
||
],
|
||
localPreviewFile: [
|
||
{
|
||
required: uploadMode.value === "local",
|
||
validator: () => {
|
||
if (uploadMode.value === "local" && !form.localPreviewFile) {
|
||
return Promise.reject(new Error("请上传预览图"))
|
||
}
|
||
return Promise.resolve()
|
||
},
|
||
trigger: "change",
|
||
},
|
||
],
|
||
}))
|
||
|
||
watch(
|
||
() => props.open,
|
||
(newVal) => {
|
||
visible.value = newVal
|
||
if (newVal) {
|
||
resetForm()
|
||
fetchRegistrationId()
|
||
fetchWorks()
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
)
|
||
|
||
watch(visible, (newVal) => {
|
||
emit("update:open", newVal)
|
||
})
|
||
|
||
// 模式切换时清空对应的数据
|
||
const handleModeChange = () => {
|
||
if (uploadMode.value === "history") {
|
||
form.localWorkFile = null
|
||
form.localPreviewFile = null
|
||
localWorkFileList.value = []
|
||
localPreviewFileList.value = []
|
||
} else {
|
||
form.selectedWorkId = null
|
||
form.selectedWork = null
|
||
}
|
||
formRef.value?.clearValidate()
|
||
}
|
||
|
||
// 获取报名记录ID
|
||
const registrationIdRef = ref<number | null>(null)
|
||
|
||
const fetchRegistrationId = async () => {
|
||
if (!authStore.user?.id) {
|
||
message.error("用户未登录")
|
||
return
|
||
}
|
||
|
||
try {
|
||
const response = await registrationsApi.getList({
|
||
contestId: props.contestId,
|
||
userId: authStore.user.id,
|
||
page: 1,
|
||
pageSize: 1,
|
||
})
|
||
|
||
if (response.list && response.list.length > 0) {
|
||
const registration = response.list[0]
|
||
if (registration.registrationState === "passed") {
|
||
registrationIdRef.value = registration.id
|
||
} else {
|
||
message.warning("您的报名尚未通过审核，无法上传作品")
|
||
visible.value = false
|
||
}
|
||
} else {
|
||
message.warning("您尚未报名该赛事，无法上传作品")
|
||
visible.value = false
|
||
}
|
||
} catch (error: any) {
|
||
message.error(error?.response?.data?.message || "获取报名信息失败")
|
||
visible.value = false
|
||
}
|
||
}
|
||
|
||
// 获取3D创作历史
|
||
const fetchWorks = async () => {
|
||
worksLoading.value = true
|
||
try {
|
||
const res = await getAI3DTasks({
|
||
page: worksPagination.current,
|
||
pageSize: worksPagination.pageSize,
|
||
status: "completed",
|
||
})
|
||
const data = res.data || res
|
||
worksList.value = data.list || []
|
||
worksPagination.total = data.total || 0
|
||
} catch (error) {
|
||
console.error("获取创作历史失败:", error)
|
||
message.error("获取创作历史失败")
|
||
} finally {
|
||
worksLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 分页变化
|
||
const handleWorksPageChange = (page: number) => {
|
||
worksPagination.current = page
|
||
fetchWorks()
|
||
}
|
||
|
||
// 选择作品
|
||
const handleSelectWork = (work: AI3DTask) => {
|
||
if (form.selectedWorkId === work.id) {
|
||
form.selectedWorkId = null
|
||
form.selectedWork = null
|
||
} else {
|
||
form.selectedWorkId = work.id
|
||
form.selectedWork = work
|
||
if (!form.title && work.inputContent) {
|
||
form.title = work.inputContent.substring(0, 50)
|
||
}
|
||
}
|
||
}
|
||
|
||
// 获取预览图URL
|
||
const getPreviewUrl = (url: string) => {
|
||
if (!url) return ""
|
||
if (url.includes("tencentcos.cn") || url.includes("qcloud.com")) {
|
||
return `/api/ai-3d/proxy-preview?url=${encodeURIComponent(url)}`
|
||
}
|
||
return url
|
||
}
|
||
|
||
// 图片加载错误处理
|
||
const handleImageError = (e: Event) => {
|
||
const img = e.target as HTMLImageElement
|
||
img.style.display = "none"
|
||
}
|
||
|
||
// 格式化时间
|
||
const formatTime = (time: string) => {
|
||
return dayjs(time).format("MM-DD HH:mm")
|
||
}
|
||
|
||
// 跳转到3D实验室
|
||
const goTo3DLab = () => {
|
||
const tenantCode = route.params.tenantCode as string
|
||
router.push(`/${tenantCode}/workbench/3d-lab`)
|
||
visible.value = false
|
||
}
|
||
|
||
// 上传3D文件前验证
|
||
const handleBeforeUploadWork = (file: File): boolean => {
|
||
const fileName = file.name.toLowerCase()
|
||
const validExtensions = [
|
||
".obj", ".fbx", ".3ds", ".dae", ".blend",
|
||
".max", ".c4d", ".stl", ".ply", ".gltf", ".glb",
|
||
]
|
||
|
||
const isValid = validExtensions.some((ext) => fileName.endsWith(ext))
|
||
if (!isValid) {
|
||
message.error("请上传支持的3D文件格式")
|
||
return false
|
||
}
|
||
|
||
const maxSize = 500 * 1024 * 1024
|
||
if (file.size > maxSize) {
|
||
message.error("文件大小不能超过500MB")
|
||
return false
|
||
}
|
||
|
||
form.localWorkFile = file
|
||
return false
|
||
}
|
||
|
||
// 移除3D文件
|
||
const handleRemoveWork = () => {
|
||
form.localWorkFile = null
|
||
return true
|
||
}
|
||
|
||
// 上传预览图前验证
|
||
const handleBeforeUploadPreview = (file: File): boolean => {
|
||
const isImage = file.type.startsWith("image/")
|
||
if (!isImage) {
|
||
message.error("请上传图片文件")
|
||
return false
|
||
}
|
||
|
||
const maxSize = 10 * 1024 * 1024
|
||
if (file.size > maxSize) {
|
||
message.error("图片大小不能超过10MB")
|
||
return false
|
||
}
|
||
|
||
form.localPreviewFile = file
|
||
return false
|
||
}
|
||
|
||
// 移除预览图
|
||
const handleRemovePreview = () => {
|
||
form.localPreviewFile = null
|
||
return true
|
||
}
|
||
|
||
// 上传附件前验证
|
||
const handleBeforeUploadAttachment = (file: File): boolean => {
|
||
const maxSize = 100 * 1024 * 1024
|
||
if (file.size > maxSize) {
|
||
message.error("附件大小不能超过100MB")
|
||
return false
|
||
}
|
||
|
||
form.attachmentFiles.push(file)
|
||
return false
|
||
}
|
||
|
||
// 移除附件
|
||
const handleRemoveAttachment = (file: UploadFile) => {
|
||
const index = form.attachmentFiles.findIndex(
|
||
(f) => f.name === file.name && f.size === file.size
|
||
)
|
||
if (index > -1) {
|
||
form.attachmentFiles.splice(index, 1)
|
||
}
|
||
return true
|
||
}
|
||
|
||
// 重置表单
|
||
const resetForm = () => {
|
||
uploadMode.value = "history"
|
||
form.title = ""
|
||
form.description = ""
|
||
form.selectedWorkId = null
|
||
form.selectedWork = null
|
||
form.localWorkFile = null
|
||
form.localPreviewFile = null
|
||
form.attachmentFiles = []
|
||
localWorkFileList.value = []
|
||
localPreviewFileList.value = []
|
||
attachmentFileList.value = []
|
||
worksPagination.current = 1
|
||
formRef.value?.resetFields()
|
||
}
|
||
|
||
// 提交表单
|
||
const handleSubmit = async () => {
|
||
if (!formRef.value) return
|
||
|
||
try {
|
||
await formRef.value.validate()
|
||
|
||
if (!registrationIdRef.value) {
|
||
message.error("无法获取报名记录，请重新打开")
|
||
return
|
||
}
|
||
|
||
submitLoading.value = true
|
||
|
||
let workFileUrl = ""
|
||
let previewUrl = ""
|
||
const attachmentUrls: string[] = []
|
||
|
||
if (uploadMode.value === "history") {
|
||
// 从创作历史选择模式
|
||
if (!form.selectedWork) {
|
||
message.error("请选择一个3D作品")
|
||
return
|
||
}
|
||
workFileUrl = form.selectedWork.resultUrl || ""
|
||
previewUrl = form.selectedWork.previewUrl || ""
|
||
} else {
|
||
// 本地上传模式
|
||
if (!form.localWorkFile) {
|
||
message.error("请上传3D文件")
|
||
return
|
||
}
|
||
if (!form.localPreviewFile) {
|
||
message.error("请上传预览图")
|
||
return
|
||
}
|
||
|
||
// 上传3D文件
|
||
try {
|
||
workFileUrl = await uploadFile(form.localWorkFile)
|
||
} catch (error: any) {
|
||
message.error("3D文件上传失败：" + (error?.message || "未知错误"))
|
||
submitLoading.value = false
|
||
return
|
||
}
|
||
|
||
// 上传预览图
|
||
try {
|
||
previewUrl = await uploadFile(form.localPreviewFile)
|
||
} catch (error: any) {
|
||
message.error("预览图上传失败：" + (error?.message || "未知错误"))
|
||
submitLoading.value = false
|
||
return
|
||
}
|
||
}
|
||
|
||
// 上传附件
|
||
for (const file of form.attachmentFiles) {
|
||
try {
|
||
const url = await uploadFile(file)
|
||
attachmentUrls.push(url)
|
||
} catch (error: any) {
|
||
console.error("附件上传失败:", error)
|
||
}
|
||
}
|
||
|
||
const submitData: SubmitWorkForm = {
|
||
registrationId: registrationIdRef.value,
|
||
title: form.title,
|
||
description: form.description,
|
||
files: [workFileUrl, ...attachmentUrls],
|
||
previewUrl: previewUrl,
|
||
}
|
||
|
||
await worksApi.submit(submitData)
|
||
|
||
message.success("作品提交成功")
|
||
emit("success")
|
||
visible.value = false
|
||
resetForm()
|
||
} catch (error: any) {
|
||
if (error?.errorFields) {
|
||
return
|
||
}
|
||
message.error(error?.response?.data?.message || "作品提交失败")
|
||
} finally {
|
||
submitLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 文件上传函数
|
||
const uploadFile = async (file: File): Promise<string> => {
|
||
const formData = new FormData()
|
||
formData.append("file", file)
|
||
|
||
try {
|
||
const response = await request.post<any>("/upload", formData, {
|
||
headers: {
|
||
"Content-Type": "multipart/form-data",
|
||
},
|
||
})
|
||
|
||
if (response && typeof response === "object" && "url" in response) {
|
||
return String(response.url)
|
||
}
|
||
|
||
throw new Error("文件上传返回格式不正确")
|
||
} catch (error: any) {
|
||
console.error("文件上传失败:", error)
|
||
throw new Error(error?.response?.data?.message || "文件上传失败")
|
||
}
|
||
}
|
||
|
||
// 取消
|
||
const handleCancel = () => {
|
||
visible.value = false
|
||
resetForm()
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.drawer-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
}
|
||
|
||
.work-selection {
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
background: #fafafa;
|
||
min-height: 200px;
|
||
}
|
||
|
||
.works-loading {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
min-height: 180px;
|
||
color: #8c8c8c;
|
||
}
|
||
|
||
.works-empty {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 180px;
|
||
}
|
||
|
||
.works-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
.work-card {
|
||
background: #fff;
|
||
border: 2px solid #e8e8e8;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
border-color: #1677ff;
|
||
box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
|
||
}
|
||
|
||
&.is-selected {
|
||
border-color: #1677ff;
|
||
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
|
||
|
||
.work-preview {
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(22, 119, 255, 0.1);
|
||
}
|
||
}
|
||
}
|
||
|
||
.work-preview {
|
||
position: relative;
|
||
height: 100px;
|
||
background: #f0f0f0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.preview-placeholder {
|
||
font-size: 32px;
|
||
color: #d9d9d9;
|
||
}
|
||
|
||
.selected-badge {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
width: 24px;
|
||
height: 24px;
|
||
background: #1677ff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
.work-info {
|
||
padding: 8px;
|
||
|
||
.work-desc {
|
||
font-size: 12px;
|
||
color: #303133;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.work-time {
|
||
font-size: 11px;
|
||
color: #8c8c8c;
|
||
}
|
||
}
|
||
}
|
||
|
||
.works-pagination {
|
||
margin-top: 16px;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.upload-placeholder {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #8c8c8c;
|
||
|
||
.anticon {
|
||
font-size: 24px;
|
||
margin-bottom: 8px;
|
||
}
|
||
}
|
||
|
||
.attachment-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 4px 8px;
|
||
background: #f5f5f5;
|
||
border-radius: 4px;
|
||
margin-top: 8px;
|
||
|
||
.file-name {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.delete-icon {
|
||
color: #8c8c8c;
|
||
cursor: pointer;
|
||
transition: color 0.3s;
|
||
|
||
&:hover {
|
||
color: #ff4d4f;
|
||
}
|
||
}
|
||
}
|
||
|
||
.upload-tip {
|
||
margin-top: 8px;
|
||
font-size: 12px;
|
||
color: #8c8c8c;
|
||
}
|
||
|
||
:deep(.ant-upload-list) {
|
||
&.ant-upload-list-picture-card {
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
:deep(.ant-upload-select-picture-card) {
|
||
width: 120px !important;
|
||
height: 120px !important;
|
||
}
|
||
|
||
:deep(.ant-upload-list-item-container) {
|
||
width: 120px !important;
|
||
height: 120px !important;
|
||
}
|
||
</style>
|