lq/spa-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

项目管理完成

Browse Source
This commit is contained in:
年糕崽崽
2025-05-07 08:58:51 +08:00
parent f005953af9
commit 8e4d1ad5f6
5 changed files with 618 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

453
src/views/admin/common/ProjectDetails.vue Normal file
View File

@@ -0,0 +1,453 @@
<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue"
import {
Calendar,
Tag,
DollarSign,
Award,
Layers,
Server,
Database,
Code,
Monitor,
CheckCircle,
User,
Image as ImageIcon,
Play,
X
} from "lucide-vue-next"
const props = defineProps({
visible: {
type: Boolean,
default: false
},
project: {
type: Object,
default: () => ({})
}
})
const emit = defineEmits(['update:visible', 'close'])
const closeModal = () => {
emit('update:visible', false)
emit('close')
}
// 处理ESC键关闭模态框
const handleKeyDown = (e) => {
if (e.key === 'Escape' && props.visible) {
closeModal()
}
}
// 监听键盘事件
onMounted(() => {
document.addEventListener('keydown', handleKeyDown)
})
onBeforeUnmount(() => {
document.removeEventListener('keydown', handleKeyDown)
})
// 防止模态框打开时页面滚动
watch(() => props.visible, (newVal) => {
if (newVal) {
document.body.style.overflow = 'hidden'
} else {
document.body.style.overflow = ''
}
})
// 图片预览相关
const previewVisible = ref(false)
const previewImage = ref("")
const handlePreview = (url) => {
previewImage.value = url
previewVisible.value = true
}
// 视频预览相关
const videoPreviewVisible = ref(false)
const videoPreviewUrl = ref("")
const handleVideoPreview = () => {
videoPreviewUrl.value = props.project.video_url
videoPreviewVisible.value = true
}
// 格式化价格
const formatPrice = (price) => {
return "¥ " + parseFloat(price).toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}
// 格式化日期
const formatDate = (dateString) => {
if (!dateString) return '-'
const date = new Date(dateString)
return date.toLocaleDateString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" })
}
// 计算优惠比例
const discountPercentage = computed(() => {
if (!props.project.price || !props.project.preferential_price) return 0
const originalPrice = parseFloat(props.project.price)
const discountPrice = parseFloat(props.project.preferential_price)
if (originalPrice <= 0 || discountPrice >= originalPrice) return 0
return Math.round((1 - discountPrice / originalPrice) * 100)
})
// 状态文本映射
const statusTextMap = {
0: '草稿',
1: '已发布',
2: '已下架'
}
// 状态颜色映射
const statusColorMap = {
0: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300',
1: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
2: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
}
// 阻止冒泡
const stopPropagation = (e) => {
e.stopPropagation()
}
</script>
<template>
<!-- 主模态框 -->
<div v-if="props.visible" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<!-- 背景遮罩 -->
<div
class="fixed inset-0 bg-gray-500/80 dark:bg-gray-900/80 backdrop-blur-sm transition-opacity"
@click="closeModal"
></div>
<!-- 模态框内容容器 -->
<div class="flex items-center justify-center min-h-screen p-4">
<!-- 模态框内容 -->
<div
class="relative bg-gray-800 dark:bg-gray-800 rounded-2xl overflow-hidden shadow-xl transform transition-all max-w-5xl w-full animate-fadeIn"
@click="stopPropagation"
>
<!-- 项目头部信息 -->
<div class="relative">
<!-- 封面图 -->
<div class="h-64 w-full overflow-hidden relative">
<img
:src="project.cover"
:alt="project.title"
class="w-full h-full object-cover"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
<!-- 状态标签 -->
<div class="absolute top-4 right-4">
<span
:class="`px-3 py-1.5 rounded-full text-sm font-medium ${statusColorMap[project.status] || 'bg-gray-100 text-gray-800'}`"
>
{{ statusTextMap[project.status] || '未知状态' }}
</span>
</div>
<!-- 标题和分类 -->
<div class="absolute bottom-0 left-0 right-0 p-6 text-white">
<div class="flex items-center mb-2">
<span class="px-3 py-1 bg-rose-600/90 rounded-full text-sm font-medium mr-2">
{{ project.category?.name || '未分类' }}
</span>
<span class="text-sm flex items-center">
<Calendar class="w-4 h-4 mr-1" />
{{ formatDate(project.created_at) }}
</span>
</div>
<h1 class="text-3xl font-bold">{{ project.title }}</h1>
</div>
</div>
<!-- 关闭按钮 -->
<button
class="absolute top-4 left-4 p-2 rounded-full bg-black/30 text-white hover:bg-black/50 transition-colors"
@click="closeModal"
>
<X class="h-5 w-5" />
</button>
</div>
<!-- 项目内容 -->
<div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-8 bg-gray-800 dark:bg-gray-800 text-white">
<!-- 左侧信息 -->
<div class="md:col-span-2 space-y-8">
<!-- 标签 -->
<div class="flex flex-wrap gap-2">
<span
v-for="(tag, index) in project.labels"
:key="index"
class="px-3 py-1.5 bg-rose-900/20 text-rose-300 text-sm font-medium rounded-full flex items-center"
>
<Tag class="w-3.5 h-3.5 mr-1.5" />
{{ tag.name }}
</span>
</div>
<!-- 项目描述 -->
<div class="space-y-3">
<h2 class="text-xl font-semibold text-white flex items-center">
<Layers class="w-5 h-5 mr-2 text-rose-500" />
项目描述
</h2>
<p class="text-gray-300 leading-relaxed">
{{ project.description }}
</p>
</div>
<!-- 技术栈 -->
<div class="space-y-4">
<h2 class="text-xl font-semibold text-white flex items-center">
<Code class="w-5 h-5 mr-2 text-rose-500" />
技术栈
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gray-700/50 p-4 rounded-xl">
<h3 class="text-sm font-medium text-gray-400 mb-2 flex items-center">
<Monitor class="w-4 h-4 mr-1.5 text-rose-500" />
前端技术
</h3>
<p class="text-gray-200">{{ project.front }}</p>
</div>
<div class="bg-gray-700/50 p-4 rounded-xl">
<h3 class="text-sm font-medium text-gray-400 mb-2 flex items-center">
<Server class="w-4 h-4 mr-1.5 text-rose-500" />
后端技术
</h3>
<p class="text-gray-200">{{ project.service }}</p>
</div>
<div class="bg-gray-700/50 p-4 rounded-xl">
<h3 class="text-sm font-medium text-gray-400 mb-2 flex items-center">
<Database class="w-4 h-4 mr-1.5 text-rose-500" />
部署架构
</h3>
<p class="text-gray-200">{{ project.deploy }}</p>
</div>
</div>
</div>
<!-- 核心功能 -->
<div class="space-y-4">
<h2 class="text-xl font-semibold text-white flex items-center">
<Award class="w-5 h-5 mr-2 text-rose-500" />
核心功能
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div
v-for="(feature, index) in project.features"
:key="index"
class="flex items-start"
>
<CheckCircle class="w-5 h-5 text-rose-500 mr-2 flex-shrink-0 mt-0.5" />
<span class="text-gray-300">{{ feature.name }}</span>
</div>
</div>
</div>
<!-- 项目截图 -->
<div v-if="project.screenshots && project.screenshots.length > 0" class="space-y-4">
<h2 class="text-xl font-semibold text-white flex items-center">
<ImageIcon class="w-5 h-5 mr-2 text-rose-500" />
项目截图
</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
<div
v-for="(screenshot, index) in project.screenshots"
:key="index"
class="relative group rounded-xl overflow-hidden cursor-pointer h-40"
@click="handlePreview(screenshot.url)"
>
<img
:src="screenshot.url"
:alt="`Screenshot ${index + 1}`"
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
/>
<div
class="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors duration-300 flex items-center justify-center opacity-0 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"/>
</svg>
</div>
</div>
</div>
</div>
<!-- 演示视频 -->
<div v-if="project.video_url" class="space-y-4">
<h2 class="text-xl font-semibold text-white flex items-center">
<Play class="w-5 h-5 mr-2 text-rose-500"/>
演示视频
</h2>
<div
class="relative rounded-xl overflow-hidden cursor-pointer h-64 bg-gray-700"
@click="handleVideoPreview"
>
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-16 h-16 rounded-full bg-rose-600 flex items-center justify-center shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white ml-1" 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"/>
</svg>
</div>
</div>
<div class="absolute bottom-4 left-4 right-4 text-white bg-black/50 p-2 rounded-lg">
<p class="text-sm font-medium">点击播放项目演示视频</p>
</div>
</div>
</div>
</div>
<!-- 右侧信息 -->
<div class="space-y-6">
<!-- 价格卡片 -->
<div class="bg-gray-700 rounded-xl shadow-md p-6 border border-gray-600">
<div class="space-y-4">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-white flex items-center">
<DollarSign class="w-5 h-5 mr-1.5 text-rose-500"/>
项目价格
</h3>
<span v-if="discountPercentage > 0"
class="px-2 py-1 bg-rose-900/30 text-rose-300 text-xs font-bold rounded-full">
{{ discountPercentage }}% OFF
</span>
</div>
<div>
<div v-if="project.preferential_price" class="flex items-center">
<span class="text-2xl font-bold text-rose-400">
{{ formatPrice(project.preferential_price) }}
</span>
<span class="ml-2 text-sm text-gray-400 line-through">
{{ formatPrice(project.price) }}
</span>
</div>
<div v-else class="text-2xl font-bold text-white">
{{ formatPrice(project.price) }}
</div>
</div>
</div>
</div>
<!-- 框架信息 -->
<div v-if="project.frameworks && project.frameworks.length > 0"
class="bg-gray-700 rounded-xl shadow-md p-6 border border-gray-600">
<h3 class="text-lg font-semibold text-white mb-4">使用框架</h3>
<div class="flex flex-wrap gap-2">
<span
v-for="(framework, index) in project.frameworks"
:key="index"
class="px-3 py-1.5 bg-blue-900/20 text-blue-300 text-sm font-medium rounded-full"
>
{{ framework.name }}
</span>
</div>
</div>
<!-- 作者信息 -->
<div v-if="project.author" class="bg-gray-700 rounded-xl shadow-md p-6 border border-gray-600">
<h3 class="text-lg font-semibold text-white mb-4 flex items-center">
<User class="w-5 h-5 mr-1.5 text-rose-500"/>
项目作者
</h3>
<div class="flex items-center">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img
:src="project.author.avatar"
:alt="project.author.nick_name"
class="w-full h-full object-cover"
/>
</div>
<div>
<h4 class="font-medium text-white">{{ project.author.nick_name }}</h4>
<p class="text-sm text-gray-400">ID: {{ project.author.id }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 图片预览模态框 -->
<div v-if="previewVisible" class="fixed inset-0 z-[60] overflow-y-auto" aria-labelledby="modal-title" role="dialog"
aria-modal="true">
<div
class="fixed inset-0 bg-gray-900/90 backdrop-blur-sm transition-opacity"
@click="previewVisible = false"
></div>
<div class="flex items-center justify-center min-h-screen p-4">
<div class="relative max-w-4xl w-full animate-fadeIn" @click="stopPropagation">
<button
class="absolute top-4 right-4 p-2 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors z-10"
@click="previewVisible = false"
>
<X class="h-6 w-6"/>
</button>
<img :src="previewImage" class="max-h-[80vh] max-w-full mx-auto rounded-lg"/>
</div>
</div>
</div>
<!-- 视频预览模态框 -->
<div v-if="videoPreviewVisible" class="fixed inset-0 z-[60] overflow-y-auto" aria-labelledby="modal-title"
role="dialog" aria-modal="true">
<div
class="fixed inset-0 bg-gray-900/90 backdrop-blur-sm transition-opacity"
@click="videoPreviewVisible = false"
></div>
<div class="flex items-center justify-center min-h-screen p-4">
<div class="relative max-w-4xl w-full animate-fadeIn" @click="stopPropagation">
<button
class="absolute top-4 right-4 p-2 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors z-10"
@click="videoPreviewVisible = false"
>
<X class="h-6 w-6"/>
</button>
<div class="relative pb-[56.25%] rounded-lg overflow-hidden">
<video
:src="videoPreviewUrl"
class="absolute inset-0 w-full h-full"
controls
autoplay
></video>
</div>
</div>
</div>
</div>
</template>
<style>
/* 添加淡入动画 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fadeIn {
animation: fadeIn 0.3s ease-out;
}
</style>