From eaefac12909bfac0daaedef4b054422328344ff3 Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Sun, 25 May 2025 23:14:06 +0800
Subject: [PATCH] no message

---
 docker-compose.yml                |   2 +-
 src/App.vue                       |  56 +++++++++
 src/views/AnalysisHistoryView.vue | 197 +++++++++++++-----------------
 3 files changed, 141 insertions(+), 114 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 9ce0189..2d83f39 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,7 +5,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    image: tradus-web:1.3.23
+    image: tradus-web:1.3.24
     container_name: tradus-web
     ports:
       - '6000:80'
diff --git a/src/App.vue b/src/App.vue
index 2d6ac5e..76e44a2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1799,6 +1799,17 @@ body {
   max-width: 400px;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
   animation: modalSlideIn 0.3s ease;
+  border: 1px solid var(--color-border);
+}
+
+/* 深色主题下的通用模态框增强 */
+[data-theme='dark'] .modal-container {
+  background-color: #1a1a1a;
+  border: 2px solid rgba(255, 255, 255, 0.15);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.6),
+    0 0 0 1px rgba(255, 255, 255, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .modal-header {
@@ -2203,6 +2214,23 @@ html {
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
   animation: modalSlideIn 0.3s ease;
   overflow: hidden;
+  border: 1px solid var(--color-border);
+}
+
+/* 深色主题下的模态框增强 */
+[data-theme='dark'] .user-info-modal-container {
+  background-color: #1a1a1a;
+  border: 2px solid rgba(255, 255, 255, 0.15);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.6),
+    0 0 0 1px rgba(255, 255, 255, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+/* 深色主题下的模态框背景遮罩增强 */
+[data-theme='dark'] .modal-overlay {
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(8px);
 }
 
 .user-info-modal-content {
@@ -2441,4 +2469,32 @@ html {
 .mobile-user-info .user-info-box:hover .user-email-display {
   color: var(--color-accent);
 }
+
+/* 深色主题下的模态框头部增强 */
+[data-theme='dark'] .modal-header {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+/* 深色主题下的模态框内容区域 */
+[data-theme='dark'] .modal-content {
+  background-color: #1a1a1a;
+}
+
+/* 深色主题下的用户信息模态框头部 */
+[data-theme='dark'] .user-profile-section {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+/* 深色主题下的设置区域 */
+[data-theme='dark'] .settings-section {
+  background-color: #1a1a1a;
+}
+
+/* 深色主题下的模态框操作区域 */
+[data-theme='dark'] .modal-actions {
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  background-color: rgba(255, 255, 255, 0.03);
+}
 </style>
diff --git a/src/views/AnalysisHistoryView.vue b/src/views/AnalysisHistoryView.vue
index d550524..b57da19 100644
--- a/src/views/AnalysisHistoryView.vue
+++ b/src/views/AnalysisHistoryView.vue
@@ -311,37 +311,39 @@ onUnmounted(() => {
     </div>
 
     <!-- 详情弹窗 -->
-    <div v-if="showDetail && selectedHistory" class="detail-modal">
-      <div class="detail-content">
-        <div class="detail-header">
-          <h2>分析详情</h2>
-          <button class="close-btn" @click="closeDetail">×</button>
-        </div>
+    <Transition name="modal" appear>
+      <div v-if="showDetail && selectedHistory" class="detail-modal" @click="closeDetail">
+        <div class="detail-content" @click.stop>
+          <div class="detail-header">
+            <h2>分析详情</h2>
+            <button class="close-btn" @click="closeDetail">×</button>
+          </div>
 
-        <div class="detail-info">
-          <div class="info-row">
-            <span class="info-label">标的代码:</span>
-            <span class="info-value">{{ selectedHistory.symbol }}</span>
+          <div class="detail-info">
+            <div class="info-row">
+              <span class="info-label">标的代码:</span>
+              <span class="info-value">{{ selectedHistory.symbol }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">分析类型:</span>
+              <span class="info-value">{{ getTypeName(selectedHistory.type) }}</span>
+            </div>
+            <div v-if="selectedHistory.timeframe" class="info-row">
+              <span class="info-label">时间周期:</span>
+              <span class="info-value">{{ selectedHistory.timeframe }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">分析时间:</span>
+              <span class="info-value">{{ formatDateTime(selectedHistory.create_time) }}</span>
+            </div>
           </div>
-          <div class="info-row">
-            <span class="info-label">分析类型:</span>
-            <span class="info-value">{{ getTypeName(selectedHistory.type) }}</span>
-          </div>
-          <div v-if="selectedHistory.timeframe" class="info-row">
-            <span class="info-label">时间周期:</span>
-            <span class="info-value">{{ selectedHistory.timeframe }}</span>
-          </div>
-          <div class="info-row">
-            <span class="info-label">分析时间:</span>
-            <span class="info-value">{{ formatDateTime(selectedHistory.create_time) }}</span>
-          </div>
-        </div>
 
-        <div class="detail-content-wrapper">
-          <div class="analysis-content markdown-content" v-html="parsedContent"></div>
+          <div class="detail-content-wrapper">
+            <div class="analysis-content markdown-content" v-html="parsedContent"></div>
+          </div>
         </div>
       </div>
-    </div>
+    </Transition>
   </div>
 </template>
 
@@ -619,7 +621,7 @@ onUnmounted(() => {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
@@ -628,6 +630,12 @@ onUnmounted(() => {
   padding: 1rem;
 }
 
+/* 深色主题下的模态框背景遮罩增强 */
+[data-theme='dark'] .detail-modal {
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(8px);
+}
+
 .detail-content {
   background-color: var(--color-bg-primary);
   border-radius: var(--border-radius);
@@ -642,22 +650,14 @@ onUnmounted(() => {
   position: relative;
 }
 
-.detail-content::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.1) 0%,
-    rgba(255, 255, 255, 0.05) 50%,
-    rgba(255, 255, 255, 0.02) 100%
-  );
-  border-radius: var(--border-radius);
-  pointer-events: none;
-  z-index: 1;
+/* 深色主题下的详情模态框增强 */
+[data-theme='dark'] .detail-content {
+  background-color: #1a1a1a;
+  border: 2px solid rgba(255, 255, 255, 0.15);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.6),
+    0 0 0 1px rgba(255, 255, 255, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .detail-header {
@@ -671,6 +671,12 @@ onUnmounted(() => {
   z-index: 2;
 }
 
+/* 深色主题下的详情模态框头部增强 */
+[data-theme='dark'] .detail-header {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
 .detail-header h2 {
   font-size: 1.25rem;
   font-weight: 600;
@@ -706,6 +712,12 @@ onUnmounted(() => {
   z-index: 2;
 }
 
+/* 深色主题下的详情信息区域增强 */
+[data-theme='dark'] .detail-info {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
 .info-row {
   display: flex;
   gap: 0.5rem;
@@ -731,6 +743,11 @@ onUnmounted(() => {
   z-index: 2;
 }
 
+/* 深色主题下的详情内容包装器增强 */
+[data-theme='dark'] .detail-content-wrapper {
+  background-color: #1a1a1a;
+}
+
 .analysis-content {
   padding: 1.5rem;
 }
@@ -949,6 +966,30 @@ onUnmounted(() => {
 .history-content::-webkit-scrollbar-thumb:hover {
   background-color: rgba(0, 0, 0, 0.2);
 }
+
+/* 模态框动画效果 */
+.modal-enter-active,
+.modal-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-from .detail-content,
+.modal-leave-to .detail-content {
+  transform: scale(0.9) translateY(-20px);
+  opacity: 0;
+}
+
+.modal-enter-to .detail-content,
+.modal-leave-from .detail-content {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
 </style>
 
 <style>
@@ -1120,73 +1161,3 @@ onUnmounted(() => {
   border: 0;
 }
 </style>
-
-<style>
-/* 深色主题下的弹窗优化 */
-:global(html[data-theme='dark']) .detail-modal {
-  background-color: rgba(0, 0, 0, 0.8);
-}
-
-:global(html[data-theme='dark']) .detail-content {
-  background-color: #0a0a0a;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
-}
-
-:global(html[data-theme='dark']) .detail-content::before {
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.08) 0%,
-    rgba(255, 255, 255, 0.04) 50%,
-    rgba(255, 255, 255, 0.02) 100%
-  );
-}
-
-:global(html[data-theme='dark']) .detail-header {
-  background-color: rgba(255, 255, 255, 0.03);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-:global(html[data-theme='dark']) .detail-info {
-  background-color: rgba(255, 255, 255, 0.03);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-:global(html[data-theme='dark']) .detail-content-wrapper {
-  background-color: #0a0a0a;
-}
-
-/* 浅色主题下的弹窗优化 */
-:global(html[data-theme='light']) .detail-modal {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-:global(html[data-theme='light']) .detail-content {
-  background-color: #ffffff;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
-}
-
-:global(html[data-theme='light']) .detail-content::before {
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.8) 0%,
-    rgba(255, 255, 255, 0.4) 50%,
-    rgba(255, 255, 255, 0.2) 100%
-  );
-}
-
-:global(html[data-theme='light']) .detail-header {
-  background-color: rgba(0, 0, 0, 0.02);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-:global(html[data-theme='light']) .detail-info {
-  background-color: rgba(0, 0, 0, 0.02);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-:global(html[data-theme='light']) .detail-content-wrapper {
-  background-color: #ffffff;
-}
-</style>