docs(readme): 编写项目README文档，描述功能与架构
- 完整撰写玉宗珠宝设计大师项目README，介绍项目概况及核心功能 - 说明用户认证系统实现及优势，包含JWT鉴权和密码加密细节 - 详细描述品类管理系统，支持多流程类型和多种玉石品类 - 说明设计图生成方案及技术，包含Pillow生成示例及字体支持 - 介绍设计管理功能，支持分页浏览、预览、下载和删除设计 - 个人信息管理模块说明，涵盖昵称、手机号、密码的安全修改 - 绘制业务流程图和关键数据流图，清晰展现系统架构与数据流 - 提供详细API调用链路及参数说明，涵盖用户、品类、设计接口 - 列明技术栈及版本，包含前后端框架、ORM、认证、加密等工具 - 展示目录结构，标明后端与前端项目布局 - 规划本地开发环境与启动步骤，包括数据库初始化及运行命令 - 说明服务器部署流程和Nginx配置方案 - 详细数据库表结构说明及环境变量配置指导 - 汇总常用开发及测试命令，方便开发调试与部署管理
This commit is contained in:
changyoutongxue
366
frontend/src/components/DesignPreview.vue
Normal file
366
frontend/src/components/DesignPreview.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<div class="design-preview">
|
||||
<!-- 图片预览区 -->
|
||||
<div class="preview-container">
|
||||
<div class="image-wrapper" :style="{ transform: `scale(${scale})` }">
|
||||
<el-image
|
||||
:src="imageUrl"
|
||||
:alt="design.prompt"
|
||||
fit="contain"
|
||||
:preview-src-list="[imageUrl]"
|
||||
:initial-index="0"
|
||||
preview-teleported
|
||||
class="design-image"
|
||||
>
|
||||
<template #placeholder>
|
||||
<div class="image-placeholder">
|
||||
<el-icon class="loading-icon"><Loading /></el-icon>
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #error>
|
||||
<div class="image-error">
|
||||
<el-icon><PictureFilled /></el-icon>
|
||||
<span>图片加载失败</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</div>
|
||||
|
||||
<!-- 缩放控制 -->
|
||||
<div class="zoom-controls">
|
||||
<button class="zoom-btn" @click="zoomOut" :disabled="scale <= 0.5">
|
||||
<el-icon><ZoomOut /></el-icon>
|
||||
</button>
|
||||
<span class="zoom-level">{{ Math.round(scale * 100) }}%</span>
|
||||
<button class="zoom-btn" @click="zoomIn" :disabled="scale >= 2">
|
||||
<el-icon><ZoomIn /></el-icon>
|
||||
</button>
|
||||
<button class="zoom-btn reset-btn" @click="resetZoom" v-if="scale !== 1">
|
||||
<el-icon><RefreshRight /></el-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 设计信息 -->
|
||||
<div class="design-info">
|
||||
<h4 class="info-title">设计详情</h4>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-label">品类</span>
|
||||
<span class="info-value">{{ design.category?.name || '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item" v-if="design.sub_type">
|
||||
<span class="info-label">类型</span>
|
||||
<span class="info-value">{{ design.sub_type.name }}</span>
|
||||
</div>
|
||||
<div class="info-item" v-if="design.color">
|
||||
<span class="info-label">颜色</span>
|
||||
<span class="info-value">{{ design.color.name }}</span>
|
||||
</div>
|
||||
<div class="info-item full-width">
|
||||
<span class="info-label">设计需求</span>
|
||||
<span class="info-value prompt">{{ design.prompt }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons">
|
||||
<a
|
||||
:href="downloadUrl"
|
||||
:download="downloadFilename"
|
||||
class="action-btn download-btn"
|
||||
>
|
||||
<el-icon><Download /></el-icon>
|
||||
<span>下载设计图</span>
|
||||
</a>
|
||||
<button class="action-btn secondary-btn" @click="goToUserCenter">
|
||||
<el-icon><User /></el-icon>
|
||||
<span>查看我的设计</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Loading, PictureFilled, ZoomIn, ZoomOut, RefreshRight, Download, User } from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { Design } from '@/stores/design'
|
||||
import { getDesignDownloadUrl } from '@/api/design'
|
||||
|
||||
const props = defineProps<{
|
||||
design: Design
|
||||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 缩放比例
|
||||
const scale = ref(1)
|
||||
|
||||
// 图片URL（添加API前缀）
|
||||
const imageUrl = computed(() => {
|
||||
if (!props.design.image_url) return ''
|
||||
// 如果已经是完整URL则直接使用，否则添加 /api 前缀
|
||||
if (props.design.image_url.startsWith('http')) {
|
||||
return props.design.image_url
|
||||
}
|
||||
return `/api${props.design.image_url}`
|
||||
})
|
||||
|
||||
// 下载URL
|
||||
const downloadUrl = computed(() => getDesignDownloadUrl(props.design.id))
|
||||
|
||||
// 下载文件名
|
||||
const downloadFilename = computed(() => {
|
||||
const category = props.design.category?.name || '设计'
|
||||
const subType = props.design.sub_type?.name || ''
|
||||
return `${category}${subType ? '-' + subType : ''}-${props.design.id}.png`
|
||||
})
|
||||
|
||||
// 放大
|
||||
const zoomIn = () => {
|
||||
if (scale.value < 2) {
|
||||
scale.value = Math.min(2, scale.value + 0.25)
|
||||
}
|
||||
}
|
||||
|
||||
// 缩小
|
||||
const zoomOut = () => {
|
||||
if (scale.value > 0.5) {
|
||||
scale.value = Math.max(0.5, scale.value - 0.25)
|
||||
}
|
||||
}
|
||||
|
||||
// 重置缩放
|
||||
const resetZoom = () => {
|
||||
scale.value = 1
|
||||
}
|
||||
|
||||
// 跳转到用户中心
|
||||
const goToUserCenter = () => {
|
||||
ElMessage.success('设计已自动保存到您的设计历史中')
|
||||
router.push('/user')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$primary-color: #5B7E6B;
|
||||
$primary-light: #8BAF9C;
|
||||
$secondary-color: #C4A86C;
|
||||
$bg-color: #FAF8F5;
|
||||
$bg-dark: #F0EDE8;
|
||||
$border-color: #E8E4DF;
|
||||
$text-primary: #2C2C2C;
|
||||
$text-secondary: #6B6B6B;
|
||||
$text-light: #999999;
|
||||
|
||||
.design-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 300px;
|
||||
max-height: 500px;
|
||||
transition: transform 0.3s ease;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.design-image {
|
||||
max-width: 100%;
|
||||
max-height: 450px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
cursor: zoom-in;
|
||||
|
||||
:deep(img) {
|
||||
max-width: 100%;
|
||||
max-height: 450px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.image-placeholder,
|
||||
.image-error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: $bg-color;
|
||||
border-radius: 8px;
|
||||
color: $text-light;
|
||||
|
||||
.el-icon {
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.zoom-controls {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.zoom-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: transparent;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
color: $text-secondary;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: $primary-color;
|
||||
border-color: $primary-color;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.zoom-level {
|
||||
min-width: 48px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.design-info {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px 24px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: $text-primary;
|
||||
margin: 0 0 16px 0;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
&.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
color: $text-light;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
color: $text-primary;
|
||||
|
||||
&.prompt {
|
||||
line-height: 1.6;
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 14px 28px;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
text-decoration: none;
|
||||
letter-spacing: 1px;
|
||||
|
||||
.el-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
background: $primary-color;
|
||||
color: #fff;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: #4a6a5a;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba($primary-color, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
background: #fff;
|
||||
color: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
|
||||
&:hover {
|
||||
background: $primary-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user