1291 lines
49 KiB
Vue
1291 lines
49 KiB
Vue
<script setup>
|
||
import { ref, onMounted, computed } from "vue"
|
||
import AOS from "aos"
|
||
import "aos/dist/aos.css"
|
||
import { message, Upload, Select } from "ant-design-vue"
|
||
import {labelOptionApi} from "@/api/request/label.js";
|
||
import {categoryOptionApi} from "@/api/request/category.js";
|
||
import {
|
||
createProjectApi,
|
||
deleteProjectApi,
|
||
projectDetailApi,
|
||
projectListApi,
|
||
updateProjectApi
|
||
} from "@/api/request/project.js";
|
||
import {uploadImageApi, uploadVideoApi} from "@/api/request/upload.js";
|
||
import ProjectDetails from './common/ProjectDetails.vue'
|
||
|
||
onMounted(() => {
|
||
AOS.init({
|
||
duration: 800,
|
||
offset: 120,
|
||
easing: "ease-out-cubic",
|
||
once: false,
|
||
})
|
||
})
|
||
|
||
// 分类数据
|
||
const categoryOptions = ref([])
|
||
|
||
// 表单相关
|
||
const tagsOption = ref([]);
|
||
|
||
const getLabelOption = () => {
|
||
labelOptionApi().then((res) => {
|
||
tagsOption.value = res;
|
||
})
|
||
}
|
||
|
||
const getCategoryOption = () => {
|
||
categoryOptionApi().then((res) => {
|
||
categoryOptions.value = res;
|
||
})
|
||
}
|
||
|
||
const dataSource = ref([])
|
||
|
||
const getList = () => {
|
||
projectListApi({
|
||
page: currentPage.value,
|
||
pageSize: pageSize.value,
|
||
}).then((res) => {
|
||
dataSource.value = res.items;
|
||
currentPage.value = res.page;
|
||
pageSize.value = res.size;
|
||
totalItems.value = res.total;
|
||
pageCount.value = res.page_count;
|
||
})
|
||
}
|
||
|
||
const statusOptions = [
|
||
{ value: 0, label: "草稿" },
|
||
{ value: 1, label: "已发布" },
|
||
{ value: 2, label: "已下架" },
|
||
]
|
||
|
||
// 分页
|
||
const currentPage = ref(1)
|
||
const pageSize = ref(20)
|
||
const totalItems = ref(0)
|
||
const pageCount = ref(0)
|
||
|
||
const paginatedData = computed(() => {
|
||
const start = (currentPage.value - 1) * pageSize.value
|
||
const end = start + pageSize.value
|
||
return dataSource.value.slice(start, end)
|
||
})
|
||
|
||
const changePage = (page) => {
|
||
currentPage.value = page
|
||
getList();
|
||
}
|
||
|
||
// 模态框
|
||
const showModal = ref(false)
|
||
const currentItem = ref(null)
|
||
const formLoading = ref(false)
|
||
|
||
// 图片上传相关
|
||
const fileList = ref([])
|
||
const uploading = ref(false)
|
||
const previewVisible = ref(false)
|
||
const previewImage = ref("")
|
||
|
||
// 多图上传相关
|
||
const screenshotsFileList = ref([])
|
||
const screenshotsUploading = ref(false)
|
||
|
||
// 视频上传相关
|
||
const videoFileList = ref([])
|
||
const videoUploading = ref(false)
|
||
const videoPreviewVisible = ref(false)
|
||
const videoPreviewUrl = ref("")
|
||
|
||
// 详情模态框
|
||
const showDetailModal = ref(false)
|
||
const currentDetailItem = ref(null)
|
||
|
||
const handlePreview = (file) => {
|
||
previewImage.value = file.url || file.thumbUrl
|
||
previewVisible.value = true
|
||
}
|
||
|
||
const handleVideoPreview = () => {
|
||
videoPreviewUrl.value = currentItem.value.video_url
|
||
videoPreviewVisible.value = true
|
||
}
|
||
|
||
const handleUploadChange = (info) => {
|
||
if (info.file.status === "uploading") {
|
||
uploading.value = true
|
||
return
|
||
}
|
||
if (info.file.status === "done") {
|
||
// 模拟上传成功后获取图片URL
|
||
uploading.value = false
|
||
message.success("封面上传成功")
|
||
}
|
||
if (info.file.status === "error") {
|
||
uploading.value = false
|
||
message.error("封面上传失败")
|
||
}
|
||
}
|
||
|
||
const handleScreenshotsUploadChange = (info) => {
|
||
screenshotsFileList.value = info.fileList
|
||
|
||
if (info.file.status === "uploading") {
|
||
screenshotsUploading.value = true
|
||
return
|
||
}
|
||
if (info.file.status === "done") {
|
||
// 模拟上传成功后获取图片URL
|
||
if (!currentItem.value.screenshots) {
|
||
currentItem.value.screenshots = []
|
||
}
|
||
|
||
screenshotsUploading.value = false
|
||
message.success("截图上传成功")
|
||
}
|
||
if (info.file.status === "error") {
|
||
screenshotsUploading.value = false
|
||
message.error("截图上传失败")
|
||
}
|
||
}
|
||
|
||
const handleVideoUploadChange = (info) => {
|
||
videoFileList.value = info.fileList.slice(-1) // 只保留最后一个文件
|
||
|
||
console.log(info, 'ssssssss')
|
||
if (info.file.status === "uploading") {
|
||
videoUploading.value = true
|
||
return
|
||
}
|
||
if (info.file.status === "done") {
|
||
// 模拟上传成功后获取视频URL
|
||
// currentItem.value.video_url = info.file.response.url
|
||
videoUploading.value = false
|
||
message.success("视频上传成功")
|
||
}
|
||
if (info.file.status === "error") {
|
||
videoUploading.value = false
|
||
message.error("视频上传失败")
|
||
}
|
||
}
|
||
|
||
const removeScreenshot = (index) => {
|
||
currentItem.value.screenshots.splice(index, 1)
|
||
// 同步更新文件列表
|
||
if (screenshotsFileList.value.length > index) {
|
||
screenshotsFileList.value.splice(index, 1)
|
||
}
|
||
}
|
||
|
||
const beforeUpload = (file) => {
|
||
const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png"
|
||
if (!isJpgOrPng) {
|
||
message.error("只能上传JPG或PNG格式的图片!")
|
||
}
|
||
const isLt2M = file.size / 1024 / 1024 < 2
|
||
if (!isLt2M) {
|
||
message.error("图片大小不能超过2MB!")
|
||
}
|
||
return isJpgOrPng && isLt2M
|
||
}
|
||
|
||
const beforeVideoUpload = (file) => {
|
||
const isVideo = file.type.startsWith("video/")
|
||
if (!isVideo) {
|
||
message.error("只能上传视频文件!")
|
||
}
|
||
const isLt50M = file.size / 1024 / 1024 < 50
|
||
if (!isLt50M) {
|
||
message.error("视频大小不能超过50MB!")
|
||
}
|
||
return isVideo && isLt50M
|
||
}
|
||
|
||
const customCoverRequest = ({ file, onSuccess }) => {
|
||
// 模拟上传
|
||
uploadImageApi(file).then((res) => {
|
||
currentItem.value.cover = res.url;
|
||
onSuccess("ok", { status: "done" })
|
||
})
|
||
}
|
||
|
||
const customRequest = ({ file, onSuccess }) => {
|
||
// 模拟上传
|
||
uploadImageApi(file).then((res) => {
|
||
currentItem.value.screenshots.push(res.url);
|
||
onSuccess("ok", { status: "done" })
|
||
})
|
||
}
|
||
|
||
const customVideoRequest = ({ file, onSuccess }) => {
|
||
// 模拟上传
|
||
uploadVideoApi(file).then((res) => {
|
||
currentItem.value.video_url = res.url
|
||
onSuccess("ok", { status: "done" })
|
||
})
|
||
}
|
||
|
||
const openModal = (item = null) => {
|
||
getLabelOption();
|
||
getCategoryOption();
|
||
if (item) {
|
||
item = JSON.parse(JSON.stringify(item));
|
||
item.labels = item.label_ids;
|
||
}
|
||
currentItem.value = item
|
||
? JSON.parse(JSON.stringify(item)) // 深拷贝避免直接修改原对象
|
||
: {
|
||
title: "",
|
||
category_id: 1,
|
||
tags: [],
|
||
price: "",
|
||
status: 0,
|
||
preferential_price: '',
|
||
description: "",
|
||
cover: "",
|
||
features: [],
|
||
front: "",
|
||
server: "",
|
||
deploy: "",
|
||
screenshots: [],
|
||
video_url: ""
|
||
}
|
||
|
||
// 重置文件列表
|
||
fileList.value = []
|
||
if (currentItem.value.cover) {
|
||
fileList.value = [
|
||
{
|
||
uid: "-1",
|
||
name: "cover.jpg",
|
||
status: "done",
|
||
url: currentItem.value.cover,
|
||
},
|
||
]
|
||
}
|
||
|
||
// 重置截图文件列表
|
||
screenshotsFileList.value = []
|
||
if (currentItem.value.screenshots && currentItem.value.screenshots.length > 0) {
|
||
currentItem.value.screenshots.forEach((url, index) => {
|
||
screenshotsFileList.value.push({
|
||
uid: `-${index + 1}`,
|
||
name: `screenshot-${index + 1}.jpg`,
|
||
status: "done",
|
||
url: url,
|
||
})
|
||
})
|
||
}
|
||
|
||
// 重置视频文件列表
|
||
videoFileList.value = []
|
||
if (currentItem.value.video_url) {
|
||
videoFileList.value = [
|
||
{
|
||
uid: "-1",
|
||
name: "video.mp4",
|
||
status: "done",
|
||
url: currentItem.value.video_url,
|
||
},
|
||
]
|
||
}
|
||
|
||
showModal.value = true
|
||
}
|
||
|
||
const closeModal = () => {
|
||
showModal.value = false
|
||
}
|
||
|
||
// 确认删除模态框
|
||
const showDeleteConfirm = ref(false)
|
||
const itemToDelete = ref(null)
|
||
|
||
const openDeleteConfirm = (id) => {
|
||
itemToDelete.value = id
|
||
showDeleteConfirm.value = true
|
||
}
|
||
|
||
const closeDeleteConfirm = () => {
|
||
showDeleteConfirm.value = false
|
||
itemToDelete.value = null
|
||
}
|
||
|
||
const handleDelete = () => {
|
||
if (itemToDelete.value) {
|
||
deleteProjectApi({
|
||
ids: [itemToDelete.value]
|
||
}).then(() => {
|
||
message.success("项目删除成功")
|
||
closeDeleteConfirm()
|
||
getList();
|
||
})
|
||
}
|
||
}
|
||
|
||
const formatPrice = (price) => {
|
||
return "¥ " + parseFloat(price).toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||
}
|
||
|
||
const formatDate = (dateString) => {
|
||
const date = new Date(dateString)
|
||
return date.toLocaleDateString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" })
|
||
}
|
||
|
||
const handleSubmit = () => {
|
||
formLoading.value = true
|
||
|
||
// 模拟API请求
|
||
setTimeout(() => {
|
||
// 确保price是数字
|
||
if (typeof currentItem.value.price === "string") {
|
||
currentItem.value.price = parseFloat(currentItem.value.price.replace(/,/g, ""))
|
||
}
|
||
|
||
if (currentItem.value.id) {
|
||
updateProjectApi(currentItem.value).then((res) => {
|
||
|
||
message.success("项目更新成功")
|
||
closeModal()
|
||
getList();
|
||
})
|
||
// 更新现有项目
|
||
const index = dataSource.value.findIndex((item) => item.id === currentItem.value.id)
|
||
if (index !== -1) {
|
||
dataSource.value[index] = {...currentItem.value}
|
||
}
|
||
} else {
|
||
createProjectApi(currentItem.value).then((res) => {
|
||
console.log(res)
|
||
message.success("项目创建成功")
|
||
closeModal()
|
||
getList();
|
||
})
|
||
}
|
||
|
||
formLoading.value = false
|
||
}, 800)
|
||
}
|
||
|
||
// 标签管理
|
||
const tagInputValue = ref("")
|
||
const handleAddTag = () => {
|
||
if (tagInputValue.value) {
|
||
// 检查是否已存在该标签
|
||
const existingTag = tagsOption.find((tag) => tag.name.toLowerCase() === tagInputValue.value.toLowerCase())
|
||
|
||
// 如果存在且未添加到当前项目，则添加
|
||
if (existingTag && !currentItem.value.tags.some((tag) => tag.id === existingTag.id)) {
|
||
currentItem.value.tags.push(existingTag)
|
||
}
|
||
// 如果不存在，创建新标签并添加
|
||
else if (!existingTag) {
|
||
const newTagId = Math.max(...tagsOption.map((tag) => tag.id), 0) + 1
|
||
const newTag = {id: newTagId, name: tagInputValue.value}
|
||
tagsOption.push(newTag)
|
||
currentItem.value.tags.push(newTag)
|
||
}
|
||
|
||
tagInputValue.value = ""
|
||
}
|
||
}
|
||
|
||
const removeTag = (index) => {
|
||
currentItem.value.tags.splice(index, 1)
|
||
}
|
||
|
||
// 功能和技术栈管理
|
||
const featureInputValue = ref("")
|
||
const front = ref("")
|
||
const service = ref("")
|
||
const deploy = ref("")
|
||
|
||
const handleAddFeature = () => {
|
||
if (featureInputValue.value && !currentItem.value.features.includes(featureInputValue.value)) {
|
||
if (!currentItem.value.features) {
|
||
currentItem.value.features = []
|
||
}
|
||
currentItem.value.features.push(featureInputValue.value)
|
||
featureInputValue.value = ""
|
||
}
|
||
}
|
||
|
||
const removeFeature = (index) => {
|
||
currentItem.value.features.splice(index, 1)
|
||
}
|
||
|
||
const openDetailModal = (item) => {
|
||
projectDetailApi({
|
||
id: item.id
|
||
}).then((res) => {
|
||
currentDetailItem.value = res
|
||
showDetailModal.value = true
|
||
})
|
||
}
|
||
|
||
getList();
|
||
</script>
|
||
|
||
<template>
|
||
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6" data-aos="fade-up">
|
||
<!-- 页面标题和新建按钮 -->
|
||
<div class="mb-6 flex justify-between items-center">
|
||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">项目管理</h2>
|
||
<button
|
||
class="px-5 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 flex items-center cursor-pointer"
|
||
@click="openModal()"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
|
||
stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
||
</svg>
|
||
新建项目
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 表格 -->
|
||
<div class="rounded-2xl border border-gray-200 dark:border-gray-700">
|
||
<div class="overflow-x-auto" style="height: 60vh">
|
||
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||
<!-- 表头 -->
|
||
<thead class="bg-gray-50 dark:bg-gray-700">
|
||
<tr>
|
||
<th scope="col"
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">
|
||
项目名称
|
||
</th>
|
||
<th scope="col"
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">
|
||
分类
|
||
</th>
|
||
<th scope="col"
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">
|
||
标签
|
||
</th>
|
||
<th scope="col"
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">
|
||
价格
|
||
</th>
|
||
<th scope="col"
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">
|
||
状态
|
||
</th>
|
||
<th scope="col"
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">
|
||
创建时间
|
||
</th>
|
||
<th scope="col"
|
||
class="px-6 py-3 text-right text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">
|
||
操作
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<!-- 表格内容 -->
|
||
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||
<tr v-for="item in paginatedData" :key="item.id"
|
||
class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
|
||
<div class="flex items-center space-x-3">
|
||
<div class="flex-shrink-0 h-10 w-10 rounded-lg overflow-hidden">
|
||
<img :src="item.cover" :alt="item.title" class="h-full w-full object-cover"/>
|
||
</div>
|
||
<div>
|
||
{{ item.title }}
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
|
||
{{ item.category.name }}
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<div class="flex flex-wrap gap-1">
|
||
<span
|
||
v-for="(tag, index) in item.labels"
|
||
:key="index"
|
||
class="px-2 py-1 bg-rose-50 dark:bg-rose-900/20 text-rose-600 dark:text-rose-300 text-xs font-medium rounded-full"
|
||
>
|
||
{{ tag.name }}
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
|
||
{{ formatPrice(item.price) }}
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<span
|
||
:class="`px-2 py-1 text-xs font-medium rounded-full ${
|
||
item.status === 1
|
||
? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
|
||
: item.status === 2
|
||
? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
|
||
: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
|
||
}`"
|
||
>
|
||
{{ item.status_text }}
|
||
</span>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
|
||
{{ formatDate(item.createdAt) }}
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||
<div class="flex justify-end space-x-2">
|
||
<button
|
||
class="p-1.5 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors cursor-pointer"
|
||
title="查看"
|
||
@click="openDetailModal(item)"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
||
stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
||
</svg>
|
||
</button>
|
||
<button
|
||
class="p-1.5 text-amber-600 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-300 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-lg transition-colors cursor-pointer"
|
||
title="编辑"
|
||
@click="openModal(item)"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
||
stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
||
</svg>
|
||
</button>
|
||
<button
|
||
class="p-1.5 text-rose-600 hover:text-rose-800 dark:text-rose-400 dark:hover:text-rose-300 hover:bg-rose-50 dark:hover:bg-rose-900/20 rounded-lg transition-colors cursor-pointer"
|
||
title="删除"
|
||
@click="openDeleteConfirm(item.id)"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
||
stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div
|
||
class="bg-white dark:bg-gray-800 px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
||
<div class="text-sm text-gray-700 dark:text-gray-300">
|
||
共 {{ totalItems }} 条记录
|
||
</div>
|
||
<div class="flex space-x-1">
|
||
<button
|
||
class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
|
||
:disabled="currentPage === 1"
|
||
:class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }"
|
||
@click="currentPage > 1 && changePage(currentPage - 1)"
|
||
>
|
||
上一页
|
||
</button>
|
||
<button
|
||
v-for="page in pageCount"
|
||
:key="page"
|
||
class="px-3 py-1 border rounded-md text-sm font-medium cursor-pointer"
|
||
:class="page === currentPage
|
||
? 'bg-rose-600 text-white border-rose-600 dark:bg-rose-600 dark:border-rose-600'
|
||
: 'border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'"
|
||
@click="changePage(page)"
|
||
>
|
||
{{ page }}
|
||
</button>
|
||
<button
|
||
class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
|
||
:disabled="currentPage === pageCount"
|
||
:class="{ 'opacity-50 cursor-not-allowed': currentPage === pageCount }"
|
||
@click="currentPage < pageCount && changePage(currentPage + 1)"
|
||
>
|
||
下一页
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 项目表单模态框 -->
|
||
<div v-if="showModal" class="fixed inset-0 z-50 overflow-y-scroll" aria-labelledby="modal-title" role="dialog"
|
||
aria-modal="true">
|
||
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||
<!-- 背景遮罩 -->
|
||
<div
|
||
class="fixed inset-0 transition-opacity backdrop-blur-xl bg-gray-500/80 dark:bg-gray-900/80"
|
||
aria-hidden="true"
|
||
@click="closeModal"
|
||
></div>
|
||
|
||
<!-- 使模态框居中 -->
|
||
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
||
|
||
<!-- 模态框内容 -->
|
||
<div
|
||
class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-5xl sm:w-full relative z-50">
|
||
<div class="bg-white dark:bg-gray-800 px-6 pt-5 pb-4 sm:p-6">
|
||
<div class="flex justify-between items-center mb-5">
|
||
<h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white" id="modal-title">
|
||
{{ currentItem?.id ? '编辑项目' : '新建项目' }}
|
||
</h3>
|
||
<button
|
||
class="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 cursor-pointer"
|
||
@click="closeModal"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
||
stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<form @submit.prevent="handleSubmit" @keydown.enter.prevent="event.preventDefault()" class="space-y-6">
|
||
<div class="grid grid-cols-1 md:grid-cols-2">
|
||
|
||
<!-- 基本信息 -->
|
||
<div class="mr-10">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<!-- 项目名称 -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">项目名称</label>
|
||
<input
|
||
v-model="currentItem.title"
|
||
type="text"
|
||
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
|
||
placeholder="请输入项目名称"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<!-- 价格 -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">项目价格</label>
|
||
<div class="relative">
|
||
<span
|
||
class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500 dark:text-gray-400">¥</span>
|
||
<input
|
||
v-model="currentItem.price"
|
||
type="text"
|
||
class="w-full pl-8 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
|
||
placeholder="请输入项目价格"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 价格 -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">优惠价格</label>
|
||
<div class="relative">
|
||
<span
|
||
class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500 dark:text-gray-400">¥</span>
|
||
<input
|
||
v-model="currentItem.preferential_price"
|
||
type="text"
|
||
class="w-full pl-8 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
|
||
placeholder="请输入项目价格"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分类 -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">项目分类</label>
|
||
<select
|
||
v-model="currentItem.category_id"
|
||
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white cursor-pointer"
|
||
>
|
||
<option v-for="option in categoryOptions" :key="option.id" :value="option.id">
|
||
{{ option.name }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- 状态 -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">项目状态</label>
|
||
<select
|
||
v-model="currentItem.status"
|
||
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white cursor-pointer"
|
||
>
|
||
<option v-for="option in statusOptions" :key="option.value" :value="option.value">
|
||
{{ option.label }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- 技术栈 -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">前端技术栈</label>
|
||
<div class="flex">
|
||
<input
|
||
v-model="currentItem.front"
|
||
type="text"
|
||
class="w-full pl-8 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
|
||
placeholder="输入前端技术栈"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">后端技术栈</label>
|
||
<div class="flex">
|
||
<input
|
||
v-model="currentItem.service"
|
||
type="text"
|
||
class="w-full pl-8 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
|
||
placeholder="输入后端技术栈"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">部署架构</label>
|
||
<div class="flex">
|
||
<input
|
||
v-model="currentItem.deploy"
|
||
type="text"
|
||
class="w-full pl-8 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
|
||
placeholder="输入部署架构"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<div>
|
||
<!-- 标签 -->
|
||
<div class="mt-3">
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">项目标签</label>
|
||
<div
|
||
class="w-full px-1 py-1 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white cursor-pointer">
|
||
<Select
|
||
class="w-full"
|
||
v-model:value="currentItem.labels"
|
||
:options="tagsOption"
|
||
mode="multiple"
|
||
placeholder="请选择标签"
|
||
:fieldNames="{
|
||
label: 'name',
|
||
value: 'id',
|
||
}"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目功能 -->
|
||
<div class="mt-3">
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">核心功能</label>
|
||
<div class="flex flex-wrap gap-2 mb-2">
|
||
<span
|
||
v-for="(feature, index) in currentItem.features"
|
||
:key="index"
|
||
class="px-3 py-1.5 bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-300 text-sm font-medium rounded-lg flex items-center"
|
||
>
|
||
{{ feature }}
|
||
<button
|
||
type="button"
|
||
class="ml-1.5 text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-200 cursor-pointer"
|
||
@click="removeFeature(index)"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
|
||
stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||
</svg>
|
||
</button>
|
||
</span>
|
||
</div>
|
||
<div class="flex">
|
||
<input
|
||
v-model="featureInputValue"
|
||
type="text"
|
||
class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-l-xl focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
|
||
placeholder="输入功能"
|
||
@keyup.enter="handleAddFeature"
|
||
/>
|
||
<button
|
||
type="button"
|
||
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-r-xl transition-colors cursor-pointer"
|
||
@click="handleAddFeature"
|
||
>
|
||
添加
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 项目描述 -->
|
||
<div class="mt-3">
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">项目描述</label>
|
||
<textarea
|
||
v-model="currentItem.description"
|
||
rows="4"
|
||
class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
|
||
placeholder="请输入项目描述"
|
||
></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 截图视频 -->
|
||
<div class="ml-10">
|
||
|
||
|
||
<!-- 项目封面上传 -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">项目封面</label>
|
||
<div class="border border-gray-300 dark:border-gray-600 rounded-xl p-4 dark:bg-gray-700">
|
||
<Upload
|
||
v-model:file-list="fileList"
|
||
list-type="picture-card"
|
||
:before-upload="beforeUpload"
|
||
:custom-request="customCoverRequest"
|
||
@preview="handlePreview"
|
||
@change="handleUploadChange"
|
||
:show-upload-list="{ showPreviewIcon: true, showRemoveIcon: true }"
|
||
:maxCount="1"
|
||
>
|
||
<div v-if="fileList.length < 1">
|
||
<div
|
||
class="ant-upload-text flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mb-1" fill="none" viewBox="0 0 24 24"
|
||
stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||
</svg>
|
||
<span>点击上传封面</span>
|
||
</div>
|
||
</div>
|
||
</Upload>
|
||
<div class="text-xs text-gray-500 dark:text-gray-400 mt-2">
|
||
支持JPG、PNG格式，大小不超过2MB
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视频上传 -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">演示视频</label>
|
||
<div class="border border-gray-300 dark:border-gray-600 rounded-xl p-4 dark:bg-gray-700">
|
||
<Upload
|
||
v-model:file-list="videoFileList"
|
||
list-type="picture-card"
|
||
:before-upload="beforeVideoUpload"
|
||
:custom-request="customVideoRequest"
|
||
@change="handleVideoUploadChange"
|
||
:show-upload-list="{ showPreviewIcon: false, showRemoveIcon: true }"
|
||
:maxCount="1"
|
||
>
|
||
<div v-if="videoFileList.length < 1">
|
||
<div
|
||
class="ant-upload-text flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mb-1" fill="none" viewBox="0 0 24 24"
|
||
stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
||
</svg>
|
||
<span>点击上传视频</span>
|
||
</div>
|
||
</div>
|
||
</Upload>
|
||
<div class="text-xs text-gray-500 dark:text-gray-400 mt-2">
|
||
支持MP4、WebM等常见视频格式，大小不超过50MB
|
||
</div>
|
||
|
||
<!-- 视频预览按钮 -->
|
||
<div v-if="currentItem.video_url" class="mt-3">
|
||
<button
|
||
type="button"
|
||
class="px-3 py-1.5 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 text-sm font-medium rounded-lg flex items-center hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors cursor-pointer"
|
||
@click="handleVideoPreview"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" fill="none" viewBox="0 0 24 24"
|
||
stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||
</svg>
|
||
预览视频
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 项目截图上传 -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">项目截图</label>
|
||
<div class="border border-gray-300 dark:border-gray-600 rounded-xl p-4 dark:bg-gray-700">
|
||
<Upload
|
||
v-model:file-list="screenshotsFileList"
|
||
list-type="picture-card"
|
||
:before-upload="beforeUpload"
|
||
:custom-request="customRequest"
|
||
@preview="handlePreview"
|
||
@change="handleScreenshotsUploadChange"
|
||
:show-upload-list="{ showPreviewIcon: true, showRemoveIcon: true }"
|
||
multiple
|
||
:maxCount="10"
|
||
>
|
||
<div>
|
||
<div
|
||
class="ant-upload-text flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mb-1" fill="none" viewBox="0 0 24 24"
|
||
stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||
</svg>
|
||
<span>点击上传截图</span>
|
||
</div>
|
||
</div>
|
||
</Upload>
|
||
<div class="text-xs text-gray-500 dark:text-gray-400 mt-2">
|
||
支持JPG、PNG格式，大小不超过2MB，可上传多张
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 表单按钮 -->
|
||
<div class="flex justify-end space-x-3 pt-4">
|
||
<button
|
||
type="button"
|
||
class="px-5 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
|
||
@click="closeModal"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
class="px-5 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 flex items-center cursor-pointer"
|
||
:disabled="formLoading"
|
||
>
|
||
<span v-if="formLoading" class="mr-2">
|
||
<svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||
viewBox="0 0 24 24">
|
||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||
<path class="opacity-75" fill="currentColor"
|
||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||
</svg>
|
||
</span>
|
||
{{ currentItem?.id ? '保存修改' : '创建项目' }}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 删除确认模态框 -->
|
||
<div v-if="showDeleteConfirm" class="fixed inset-0 z-50" aria-labelledby="modal-title" role="dialog"
|
||
aria-modal="true">
|
||
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||
<!-- 背景遮罩 -->
|
||
<div
|
||
class="fixed inset-0 transition-opacity backdrop-blur-xl bg-gray-500/80 dark:bg-gray-900/80"
|
||
aria-hidden="true"
|
||
@click="closeDeleteConfirm"
|
||
></div>
|
||
|
||
<!-- 使模态框居中 -->
|
||
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
||
|
||
<!-- 模态框内容 -->
|
||
<div
|
||
class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-50">
|
||
<div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||
<div class="sm:flex sm:items-start">
|
||
<div
|
||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900/30 sm:mx-0 sm:h-10 sm:w-10">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-600 dark:text-red-400" fill="none"
|
||
viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-title">
|
||
确认删除
|
||
</h3>
|
||
<div class="mt-2">
|
||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||
确定要删除这个项目吗？此操作无法撤销。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
||
<button
|
||
type="button"
|
||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm cursor-pointer"
|
||
@click="handleDelete"
|
||
>
|
||
确认
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm cursor-pointer"
|
||
@click="closeDeleteConfirm"
|
||
>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图片预览模态框 -->
|
||
<div v-if="previewVisible" class="fixed inset-0 z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
||
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||
<!-- 背景遮罩 -->
|
||
<div
|
||
class="fixed inset-0 transition-opacity backdrop-blur-xl bg-gray-500/80 dark:bg-gray-900/80"
|
||
aria-hidden="true"
|
||
@click="previewVisible = false"
|
||
></div>
|
||
|
||
<!-- 使模态框居中 -->
|
||
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
||
|
||
<!-- 模态框内容 -->
|
||
<div
|
||
class="inline-block align-bottom bg-transparent rounded-lg text-left overflow-hidden transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full relative z-50">
|
||
<div class="relative">
|
||
<button
|
||
class="absolute top-2 right-2 p-2 rounded-full bg-gray-800/50 text-white hover:bg-gray-700/50 transition-colors cursor-pointer"
|
||
@click="previewVisible = false"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
||
stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||
</svg>
|
||
</button>
|
||
<img :src="previewImage" class="w-full max-h-[80vh] max-w-full rounded-lg shadow-xl"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视频预览模态框 -->
|
||
<div v-if="videoPreviewVisible" class="fixed inset-0 z-50" aria-labelledby="modal-title" role="dialog"
|
||
aria-modal="true">
|
||
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||
<!-- 背景遮罩 -->
|
||
<div
|
||
class="fixed inset-0 transition-opacity backdrop-blur-xl bg-gray-500/80 dark:bg-gray-900/80"
|
||
aria-hidden="true"
|
||
@click="videoPreviewVisible = false"
|
||
></div>
|
||
|
||
<!-- 使模态框居中 -->
|
||
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
||
|
||
<!-- 模态框内容 -->
|
||
<div
|
||
class="inline-block align-bottom bg-transparent rounded-lg text-left overflow-hidden transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full relative z-50">
|
||
{{ videoPreviewUrl }}
|
||
<div class="relative">
|
||
<button
|
||
class="absolute top-2 right-2 p-2 rounded-full bg-gray-800/50 text-white hover:bg-gray-700/50 transition-colors cursor-pointer z-10"
|
||
@click="videoPreviewVisible = false"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
||
stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||
</svg>
|
||
</button>
|
||
<div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden shadow-xl">
|
||
<video
|
||
:src="videoPreviewUrl"
|
||
class="w-full h-full"
|
||
controls
|
||
autoplay
|
||
></video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目详情模态框 -->
|
||
<ProjectDetails
|
||
v-model:visible="showDetailModal"
|
||
:project="currentDetailItem"
|
||
@close="showDetailModal = false"
|
||
/>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 自定义样式 */
|
||
|
||
/* 毛玻璃效果增强 */
|
||
.backdrop-blur-xl {
|
||
backdrop-filter: blur(16px);
|
||
}
|
||
|
||
.backdrop-blur-md {
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.backdrop-blur-sm {
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
/* 上传组件暗黑模式适配 */
|
||
:deep(.ant-upload-list-picture-card .ant-upload-list-item) {
|
||
border-color: #4b5563;
|
||
}
|
||
|
||
:deep(.ant-upload.ant-upload-select-picture-card) {
|
||
background-color: transparent;
|
||
border-color: #4b5563;
|
||
}
|
||
|
||
:deep(.ant-upload-list-picture-card-container) {
|
||
width: 150px;
|
||
height: 150px;
|
||
}
|
||
|
||
:deep(.ant-upload.ant-upload-select-picture-card) {
|
||
width: 150px;
|
||
height: 150px;
|
||
}
|
||
|
||
/* 视频播放器样式 */
|
||
.aspect-w-16 {
|
||
position: relative;
|
||
|
||
padding- {
|
||
width: 150px;
|
||
height: 150px;
|
||
}
|
||
|
||
/* 视频播放器样式 */
|
||
.aspect-w-16 {
|
||
position: relative;
|
||
padding-bottom: 56.25%; /* 16:9 */
|
||
}
|
||
|
||
.aspect-h-9 {
|
||
position: relative;
|
||
}
|
||
|
||
.aspect-w-16 > *, .aspect-h-9 > * {
|
||
position: absolute;
|
||
height: 100%;
|
||
width: 100%;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
/* 模态框动画 */
|
||
.transform {
|
||
transition-property: transform, opacity;
|
||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||
transition-duration: 150ms;
|
||
}
|
||
|
||
/* 表单元素暗黑模式适配 */
|
||
:deep(.dark input),
|
||
:deep(.dark select),
|
||
:deep(.dark textarea) {
|
||
color-scheme: dark;
|
||
}
|
||
|
||
/* 滚动条美化 */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background-color: rgba(156, 163, 175, 0.5);
|
||
border-radius: 20px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background-color: rgba(156, 163, 175, 0.7);
|
||
}
|
||
|
||
/* 暗黑模式滚动条 */
|
||
.dark ::-webkit-scrollbar-thumb {
|
||
background-color: rgba(75, 85, 99, 0.5);
|
||
}
|
||
|
||
.dark ::-webkit-scrollbar-thumb:hover {
|
||
background-color: rgba(75, 85, 99, 0.7);
|
||
}
|
||
}
|
||
|
||
:deep .ant-select-show-search:where(.css-dev-only-do-not-override-1p3hq3p).ant-select:not(.ant-select-customize-input) .ant-select-selector {
|
||
cursor: text;
|
||
border-color: #364153;
|
||
background-color: #364153;
|
||
color: white;
|
||
}
|
||
|
||
:deep :where(.css-dev-only-do-not-override-1p3hq3p).ant-select-multiple .ant-select-selection-item {
|
||
position: relative;
|
||
display: flex;
|
||
flex: none;
|
||
box-sizing: border-box;
|
||
max-width: 100%;
|
||
height: 24px;
|
||
margin-top: 2px;
|
||
margin-bottom: 2px;
|
||
line-height: 22px;
|
||
background: rgba(255, 32, 86, 0.35);
|
||
border: 1px solid;
|
||
border-radius: 4px;
|
||
cursor: default;
|
||
transition: font-size 0.3s, line-height 0.3s, height 0.3s;
|
||
user-select: none;
|
||
margin-inline-end: 4px;
|
||
padding-inline-start: 8px;
|
||
padding-inline-end: 4px;
|
||
border-color: var(--color-gray-600);
|
||
}
|
||
|
||
:deep :where(.css-dev-only-do-not-override-1p3hq3p).ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
|
||
//background-color: #364153;
|
||
background-color: var(--color-gray-600);
|
||
}
|
||
|
||
:deep :where(.css-dev-only-do-not-override-1p3hq3p).ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
|
||
color: rgba(0, 0, 0, 0.88);
|
||
font-weight: 600;
|
||
background-color: var(--color-purple-500);
|
||
}
|
||
:where(.css-dev-only-do-not-override-1p3hq3p).ant-select-multiple .ant-select-selection-placeholder {
|
||
position: absolute;
|
||
top: 50%;
|
||
inset-inline-start: 11px;
|
||
inset-inline-end: 11px;
|
||
transform: translateY(-50%);
|
||
transition: all 0.3s;
|
||
color: var(--color-gray-300);
|
||
}
|
||
</style>
|