YG-Soft/YG-Datasets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): 增强背景动画效果和侧边栏交互

Browse Source 
- App.vue: 增强 sci-fi 背景动画，mesh 渐变光晕缓慢移动
- ProjectView.vue: 移除侧边栏"返回首页"按钮
- TextSplit.vue: 分割生成页面多选交互改造
- DeleteDialog.vue: 删除确认对话框组件

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Developer
2026-03-19 10:11:52 +08:00
parent 45b77a44c6
commit 135f75e6be
4 changed files with 2423 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/App.vue
View File

@@ -129,43 +129,59 @@ html, body, #app {
.mesh-gradient { .mesh-gradient {
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
filter: blur(80px); filter: blur(100px);
opacity: 0.6; opacity: 0.5;
animation: float 20s ease-in-out infinite; animation: sciFiFloat 15s ease-in-out infinite;
} }
.mesh-1 { .mesh-1 {
width: 800px; width: 900px;
height: 800px; height: 900px;
background: radial-gradient(circle, rgba(0, 212, 255, 0.4) 0%, rgba(6, 182, 212, 0.2) 40%, transparent 70%); background: radial-gradient(circle, rgba(0, 212, 255, 0.5) 0%, rgba(6, 182, 212, 0.25) 40%, transparent 70%);
top: -300px; top: -400px;
right: -200px; left: -300px;
animation-delay: 0s; animation-delay: 0s;
animation-duration: 18s;
} }
.mesh-2 { .mesh-2 {
width: 700px; width: 800px;
height: 700px; height: 800px;
background: radial-gradient(circle, rgba(124, 58, 237, 0.4) 0%, rgba(139, 92, 246, 0.2) 40%, transparent 70%); background: radial-gradient(circle, rgba(124, 58, 237, 0.5) 0%, rgba(139, 92, 246, 0.25) 40%, transparent 70%);
bottom: -250px; bottom: -300px;
left: -200px; right: -200px;
animation-delay: -7s; animation-delay: -5s;
animation-duration: 20s;
} }
.mesh-3 { .mesh-3 {
width: 600px; width: 700px;
height: 600px; height: 700px;
background: radial-gradient(circle, rgba(236, 72, 153, 0.3) 0%, rgba(168, 85, 247, 0.15) 40%, transparent 70%); background: radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, rgba(168, 85, 247, 0.2) 40%, transparent 70%);
top: 30%; top: 50%;
left: 25%; left: 50%;
animation-delay: -14s; transform: translate(-50%, -50%);
animation-delay: -10s;
animation-duration: 22s;
} }
@keyframes float { @keyframes sciFiFloat {
0%, 100% { transform: translate(0, 0) scale(1); } 0%, 100% {
25% { transform: translate(60px, -50px) scale(1.1); } transform: translate(0, 0) scale(1) rotate(0deg);
50% { transform: translate(-40px, 40px) scale(0.95); } opacity: 0.4;
75% { transform: translate(-50px, -30px) scale(1.05); } }
25% {
transform: translate(200px, -150px) scale(1.2) rotate(10deg);
opacity: 0.65;
}
50% {
transform: translate(-150px, 100px) scale(0.85) rotate(-5deg);
opacity: 0.5;
}
75% {
transform: translate(100px, 150px) scale(1.15) rotate(8deg);
opacity: 0.6;
}
} }
.noise-overlay { .noise-overlay {

171
frontend/src/components/common/DeleteDialog.vue
View File

@@ -2,7 +2,7 @@
<el-dialog <el-dialog
:model-value="visible" :model-value="visible"
title="" title=""
width="420px" width="460px"
class="delete-dialog" class="delete-dialog"
:show-close="false" :show-close="false"
align-center align-center
@@ -11,16 +11,23 @@
> >
<template #header> <template #header>
<div class="delete-dialog-header"> <div class="delete-dialog-header">
<div class="delete-header-top">
<div class="delete-icon-wrapper"> <div class="delete-icon-wrapper">
<el-icon size="28"><WarningFilled /></el-icon> <el-icon size="26"><WarningFilled /></el-icon>
</div> </div>
<div class="delete-kicker">Danger Zone</div>
</div>
<div class="delete-title-group">
<h3>{{ title }}</h3> <h3>{{ title }}</h3>
<p v-if="detailText" class="detail-text">{{ detailText }}</p>
</div>
</div> </div>
</template> </template>
<div class="delete-dialog-body"> <div class="delete-dialog-body">
<p> <div class="delete-target-card">
确定要删除 <strong>{{ itemName }}</strong> 吗？ <span class="target-label">目标对象</span>
</p> <strong class="target-name">{{ itemName }}</strong>
</div>
<p class="warning-text">{{ warningText }}</p> <p class="warning-text">{{ warningText }}</p>
</div> </div>
<template #footer> <template #footer>
@@ -38,7 +45,7 @@
class="btn-delete" class="btn-delete"
> >
<el-icon v-if="!loading"><Delete /></el-icon> <el-icon v-if="!loading"><Delete /></el-icon>
确认删除 {{ confirmText }}
</el-button> </el-button>
</div> </div>
</template> </template>
@@ -63,6 +70,14 @@ const props = defineProps({
type: String, type: String,
default: '此操作不可恢复，所有相关数据将被永久删除' default: '此操作不可恢复，所有相关数据将被永久删除'
}, },
detailText: {
type: String,
default: ''
},
confirmText: {
type: String,
default: '确认删除'
},
loading: { loading: {
type: Boolean, type: Boolean,
default: false default: false
@@ -83,18 +98,25 @@ const handleCancel = () => {
<style scoped> <style scoped>
.delete-dialog :deep(.el-dialog) { .delete-dialog :deep(.el-dialog) {
background: linear-gradient(145deg, #1a1a2e 0%, #16162a 100%); background:
border: 1px solid rgba(239, 68, 68, 0.2); radial-gradient(circle at top left, rgba(239, 68, 68, 0.14), transparent 24%),
border-radius: 16px; radial-gradient(circle at bottom right, rgba(251, 146, 60, 0.08), transparent 20%),
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(239, 68, 68, 0.1); linear-gradient(180deg, #11151d 0%, #0d1118 100%);
border: 1px solid rgba(239, 68, 68, 0.18);
border-radius: 22px;
overflow: hidden;
box-shadow:
0 24px 80px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
} }
.delete-dialog :deep(.el-dialog__header) { .delete-dialog :deep(.el-dialog__header) {
padding: 24px 24px 12px; padding: 0;
margin: 0;
} }
.delete-dialog :deep(.el-dialog__body) { .delete-dialog :deep(.el-dialog__body) {
padding: 0 24px 24px; padding: 0;
} }
.delete-dialog :deep(.el-dialog__footer) { .delete-dialog :deep(.el-dialog__footer) {
@@ -102,87 +124,138 @@ const handleCancel = () => {
} }
.delete-dialog-header { .delete-dialog-header {
padding: 24px 24px 18px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}
.delete-header-top {
display: flex;
align-items: center; align-items: center;
gap: 12px; justify-content: space-between;
} }
.delete-icon-wrapper { .delete-icon-wrapper {
width: 56px; width: 48px;
height: 56px; height: 48px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%); background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(249, 115, 22, 0.08));
border: 1px solid rgba(239, 68, 68, 0.3); border: 1px solid rgba(239, 68, 68, 0.24);
border-radius: 50%; border-radius: 14px;
color: #ef4444; color: #fb7185;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.delete-kicker {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(251, 113, 133, 0.72);
font-family: 'JetBrains Mono', 'SF Mono', monospace;
}
.delete-title-group {
display: flex;
flex-direction: column;
gap: 6px;
} }
.delete-dialog-header h3 { .delete-dialog-header h3 {
margin: 0; margin: 0;
font-size: 18px; font-size: 22px;
font-weight: 600; font-weight: 600;
color: #fff; color: #f8fafc;
letter-spacing: -0.02em;
}
.detail-text {
margin: 0;
color: rgba(226, 232, 240, 0.72);
font-size: 13px;
line-height: 1.6;
} }
.delete-dialog-body { .delete-dialog-body {
text-align: center; padding: 22px 24px 24px;
padding: 8px 0;
} }
.delete-dialog-body p { .delete-target-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 14px;
}
.target-label {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(148, 163, 184, 0.65);
font-family: 'JetBrains Mono', 'SF Mono', monospace;
}
.target-name {
color: #f8fafc;
font-size: 15px;
font-weight: 600;
line-height: 1.5;
word-break: break-word;
}
.warning-text {
margin: 0; margin: 0;
color: #ccc;
font-size: 14px;
}
.delete-dialog-body p strong {
color: #fff;
}
.delete-dialog-body .warning-text {
margin-top: 8px;
color: #ef4444;
font-size: 13px; font-size: 13px;
line-height: 1.7;
color: #fca5a5;
} }
.delete-dialog-footer { .delete-dialog-footer {
display: flex; display: flex;
justify-content: center; justify-content: flex-end;
gap: 12px; gap: 12px;
padding: 20px 24px; padding: 18px 24px 24px;
background: rgba(0, 0, 0, 0.2); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.14));
border-top: 1px solid rgba(255, 255, 255, 0.05); border-top: 1px solid rgba(255, 255, 255, 0.04);
} }
.btn-cancel-delete { .btn-cancel-delete {
padding: 10px 24px; min-width: 108px;
background: transparent; padding: 10px 20px;
border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px; border-radius: 10px;
color: #ccc; color: rgba(226, 232, 240, 0.8);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.btn-cancel-delete:hover { .btn-cancel-delete:hover {
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.16);
color: #fff; color: #fff;
} }
.btn-delete { .btn-delete {
padding: 10px 24px; min-width: 128px;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); padding: 10px 20px;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 55%, #b91c1c 100%);
border: none; border: none;
border-radius: 10px; border-radius: 10px;
font-weight: 500; font-weight: 600;
transition: all 0.25s ease; transition: all 0.25s ease;
box-shadow: 0 10px 30px rgba(239, 68, 68, 0.18);
} }
.btn-delete:hover { .btn-delete:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); box-shadow: 0 14px 34px rgba(239, 68, 68, 0.28);
} }
</style> </style>

41
frontend/src/views/ProjectView.vue
View File

@@ -32,13 +32,6 @@
<span class="nav-dot"></span> <span class="nav-dot"></span>
</router-link> </router-link>
</nav> </nav>
<div class="sidebar-footer">
<router-link to="/" class="home-link">
<el-icon><HomeFilled /></el-icon>
<span>返回首页</span>
</router-link>
</div>
</aside> </aside>
<!-- Main Content --> <!-- Main Content -->
@@ -296,37 +289,6 @@ onMounted(() => fetchProject())
} }
/* Sidebar Footer */ /* Sidebar Footer */
.sidebar-footer {
padding: 16px 20px;
border-top: 1px solid var(--border-subtle);
}
.home-link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--radius-md);
color: var(--text-tertiary);
font-size: 14px;
text-decoration: none;
transition: all var(--transition-fast);
}
.home-link:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.home-link span {
transition: opacity 0.2s ease;
}
.sidebar.collapsed .home-link span {
opacity: 0;
width: 0;
overflow: hidden;
}
/* Main Content */ /* Main Content */
.main-content { .main-content {
@@ -348,8 +310,7 @@ onMounted(() => fetchProject())
} }
.sidebar .project-details, .sidebar .project-details,
.sidebar .nav-label, .sidebar .nav-label {
.sidebar .home-link span {
display: none; display: none;
} }

2632
frontend/src/views/project/TextSplit.vue
View File

File diff suppressed because it is too large Load Diff