From 0742194f9cce79a1394bb7b7066dc5400f99b080 Mon Sep 17 00:00:00 2001 From: 666ghj <670939375@qq.com> Date: Fri, 9 Jan 2026 16:13:37 +0800 Subject: [PATCH] style(HistoryDatabase): enhance modal design and transition effects - Wrapped modal content in a Transition component for smoother animations. - Adjusted modal dimensions and padding for improved layout and user experience. - Updated styles for modal elements, including background colors, borders, and hover effects. - Enhanced visual feedback for buttons and file items within the modal. --- frontend/src/components/HistoryDatabase.vue | 272 ++++++++++++-------- 1 file changed, 163 insertions(+), 109 deletions(-) diff --git a/frontend/src/components/HistoryDatabase.vue b/frontend/src/components/HistoryDatabase.vue index 42feaf9..5d2d1a9 100644 --- a/frontend/src/components/HistoryDatabase.vue +++ b/frontend/src/components/HistoryDatabase.vue @@ -85,76 +85,78 @@ -
-
- -
-
- {{ formatSimulationId(selectedProject.simulation_id) }} - - ● {{ formatRounds(selectedProject) }} - -
- -
- - -
- -
-
模拟需求
-
{{ selectedProject.simulation_requirement || '无' }}
+ +
+
+ +
+
+ {{ formatSimulationId(selectedProject.simulation_id) }} + + ● {{ formatRounds(selectedProject) }} + +
+
- -
-
关联文件
-
-
- {{ getFileTypeLabel(file.filename) }} - {{ file.filename }} + +
+ +
+
模拟需求
+
{{ selectedProject.simulation_requirement || '无' }}
+
+ + +
+
关联文件
+
+
+ {{ getFileTypeLabel(file.filename) }} + {{ file.filename }} +
+
+
暂无关联文件
+
+ + +
+
+ 创建时间 + {{ formatDate(selectedProject.created_at) }} {{ formatTime(selectedProject.created_at) }}
-
暂无关联文件
- -
-
- 创建时间 - {{ formatDate(selectedProject.created_at) }} {{ formatTime(selectedProject.created_at) }} -
+ +
+ + +
- - -
- - - -
-
+
@@ -918,7 +920,7 @@ onUnmounted(() => { left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.5); + background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; @@ -928,12 +930,42 @@ onUnmounted(() => { .modal-content { background: #FFFFFF; - width: 480px; + width: 560px; max-width: 90vw; max-height: 85vh; overflow-y: auto; border: 1px solid #E5E7EB; - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + border-radius: 8px; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); +} + +/* 动画过渡 */ +.modal-enter-active, +.modal-leave-active { + transition: opacity 0.3s ease; +} + +.modal-enter-from, +.modal-leave-to { + opacity: 0; +} + +.modal-enter-active .modal-content { + transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.modal-leave-active .modal-content { + transition: all 0.2s ease-in; +} + +.modal-enter-from .modal-content { + transform: scale(0.95) translateY(10px); + opacity: 0; +} + +.modal-leave-to .modal-content { + transform: scale(0.95) translateY(10px); + opacity: 0; } /* 弹窗头部 */ @@ -941,22 +973,22 @@ onUnmounted(() => { display: flex; justify-content: space-between; align-items: center; - padding: 20px 24px; + padding: 20px 32px; border-bottom: 1px solid #F3F4F6; - background: #FAFAFA; + background: #FFFFFF; } .modal-title-section { display: flex; align-items: center; - gap: 12px; + gap: 16px; } .modal-id { font-family: 'JetBrains Mono', monospace; - font-size: 0.85rem; + font-size: 1rem; font-weight: 600; - color: #374151; + color: #111827; letter-spacing: 0.5px; } @@ -965,41 +997,44 @@ onUnmounted(() => { align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; - font-size: 0.7rem; + font-size: 0.75rem; font-weight: 600; + padding: 4px 8px; + border-radius: 4px; + background: #F9FAFB; } -.modal-progress.completed { color: #10B981; } -.modal-progress.in-progress { color: #F59E0B; } -.modal-progress.not-started { color: #9CA3AF; } +.modal-progress.completed { color: #10B981; background: rgba(16, 185, 129, 0.1); } +.modal-progress.in-progress { color: #F59E0B; background: rgba(245, 158, 11, 0.1); } +.modal-progress.not-started { color: #9CA3AF; background: #F3F4F6; } .modal-close { width: 32px; height: 32px; - border: 1px solid #E5E7EB; - background: #FFFFFF; - font-size: 1.2rem; - color: #6B7280; + border: none; + background: transparent; + font-size: 1.5rem; + color: #9CA3AF; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; + border-radius: 6px; } .modal-close:hover { background: #F3F4F6; - border-color: #D1D5DB; color: #111827; } /* 弹窗内容 */ .modal-body { - padding: 24px; + padding: 24px 32px; } .modal-section { - margin-bottom: 20px; + margin-bottom: 24px; } .modal-section:last-child { @@ -1008,39 +1043,48 @@ onUnmounted(() => { .modal-label { font-family: 'JetBrains Mono', monospace; - font-size: 0.7rem; - color: #9CA3AF; + font-size: 0.75rem; + color: #6B7280; text-transform: uppercase; letter-spacing: 1px; - margin-bottom: 8px; + margin-bottom: 10px; + font-weight: 500; } .modal-requirement { - font-size: 0.9rem; + font-size: 0.95rem; color: #374151; line-height: 1.6; - padding: 12px; + padding: 16px; background: #F9FAFB; border: 1px solid #F3F4F6; + border-radius: 8px; } .modal-files { display: flex; flex-direction: column; - gap: 8px; + gap: 10px; } .modal-file-item { display: flex; align-items: center; - gap: 10px; - padding: 8px 12px; - background: #F9FAFB; - border: 1px solid #F3F4F6; + gap: 12px; + padding: 10px 14px; + background: #FFFFFF; + border: 1px solid #E5E7EB; + border-radius: 6px; + transition: all 0.2s ease; +} + +.modal-file-item:hover { + border-color: #D1D5DB; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .modal-file-name { - font-size: 0.8rem; + font-size: 0.85rem; color: #4B5563; flex: 1; overflow: hidden; @@ -1051,26 +1095,29 @@ onUnmounted(() => { .modal-empty { font-size: 0.85rem; color: #9CA3AF; - padding: 12px; + padding: 16px; background: #F9FAFB; - border: 1px solid #F3F4F6; + border: 1px dashed #E5E7EB; + border-radius: 6px; text-align: center; } .modal-time-section { display: flex; - gap: 24px; + gap: 32px; + padding-top: 16px; + border-top: 1px solid #F3F4F6; } .modal-time-item { display: flex; flex-direction: column; - gap: 4px; + gap: 6px; } .modal-time-label { font-family: 'JetBrains Mono', monospace; - font-size: 0.65rem; + font-size: 0.7rem; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.5px; @@ -1078,17 +1125,18 @@ onUnmounted(() => { .modal-time-value { font-family: 'JetBrains Mono', monospace; - font-size: 0.8rem; + font-size: 0.85rem; color: #374151; + font-weight: 500; } /* 导航按钮 */ .modal-actions { display: flex; - gap: 12px; - padding: 20px 24px; + gap: 16px; + padding: 24px 32px; border-top: 1px solid #F3F4F6; - background: #FAFAFA; + background: #FFFFFF; } .modal-btn { @@ -1096,42 +1144,48 @@ onUnmounted(() => { display: flex; flex-direction: column; align-items: center; - gap: 6px; - padding: 16px 12px; + gap: 8px; + padding: 16px; border: 1px solid #E5E7EB; + border-radius: 8px; background: #FFFFFF; cursor: pointer; transition: all 0.2s ease; + position: relative; + overflow: hidden; } .modal-btn:hover:not(:disabled) { border-color: #000000; - background: #000000; - color: #FFFFFF; + transform: translateY(-2px); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .modal-btn:disabled { - opacity: 0.4; + opacity: 0.5; cursor: not-allowed; + background: #F9FAFB; } .btn-icon { - font-size: 1.2rem; + font-size: 1.4rem; line-height: 1; + transition: color 0.2s ease; } .btn-text { font-family: 'JetBrains Mono', monospace; - font-size: 0.7rem; + font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px; + color: #4B5563; } .modal-btn.btn-project .btn-icon { color: #3B82F6; } .modal-btn.btn-simulation .btn-icon { color: #F59E0B; } .modal-btn.btn-report .btn-icon { color: #10B981; } -.modal-btn:hover:not(:disabled) .btn-icon { - color: #FFFFFF; +.modal-btn:hover:not(:disabled) .btn-text { + color: #111827; }