From 2794cabdc8257ccfb79ea63809f68cde37770a99 Mon Sep 17 00:00:00 2001
From: caiyiling <1321909229@qq.com>
Date: Thu, 18 Jun 2026 11:28:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B3=E9=94=AE=E5=BA=8F=E5=88=97=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E5=B1=95=E7=A4=BA=E4=BF=A1=E6=81=AF=E8=A1=A5=E5=85=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reading/dicoms/components/DicomViewer.vue | 91 +++++++++++++++---
 .../reading/dicoms3D/components/ReadPage.vue  | 93 +++++++++++++++----
 .../visit-review/components/FileViewer.vue    | 93 +++++++++++++++----
 3 files changed, 226 insertions(+), 51 deletions(-)

diff --git a/src/views/trials/trials-panel/reading/dicoms/components/DicomViewer.vue b/src/views/trials/trials-panel/reading/dicoms/components/DicomViewer.vue
index c5ac4c6b..c093f444 100644
--- a/src/views/trials/trials-panel/reading/dicoms/components/DicomViewer.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/components/DicomViewer.vue
@@ -222,6 +222,16 @@
         <el-popover v-model="keySeriesPopoverVisible" placement="bottom" trigger="click" popper-class="key-series-popper"
           @show="showKeySeriesPanel">
           <ul class="key-series-list">
+            <li v-if="keyStack && keyStack.taskBlindName" class="key-series-header">
+              <div class="key-series-header-top">
+                <div class="key-series-header-title">
+                  <span class="key-series-header-dot"></span>
+                  <div class="key-series-task-name" :title="keyStack.taskBlindName">
+                    {{ keyStack.taskBlindName }}
+                  </div>
+                </div>
+              </div>
+            </li>
             <li v-if="keySeriesLoading" class="key-series-empty">
               <i class="el-icon-loading"></i>
             </li>
@@ -237,13 +247,13 @@
               <div class="key-series-info">
                 <div v-if="kf.MarkName" class="key-series-meta">
                   <div class="key-series-label">{{ $t('trials:reading:keySeries:annotationName') }}</div>
-                  <div class="key-series-value" :title="kf.MarkName">
+                  <div class="key-series-uid" :title="kf.MarkName">
                     {{ kf.MarkName }}
                   </div>
                 </div>
                 <div class="key-series-meta">
                   <div class="key-series-label">{{ $t('trials:reading:keySeries:sopUid') }}</div>
-                  <div class="key-series-value" :title="kf.SopInstanceUid">
+                  <div class="key-series-uid" :title="kf.SopInstanceUid">
                     {{ kf.SopInstanceUid }}
                   </div>
                 </div>
@@ -947,6 +957,7 @@ export default {
       uploadStatus: 'upload',
       taskId: '',
       keySeries: [],
+      keyStack: null,
       keySeriesPopoverVisible: false,
       keySeriesLoading: false,
       signVisible: false,
@@ -1404,7 +1415,9 @@ export default {
     },
     async showKeySeriesPanel() {
       this.keySeries = []
-      const visitTaskId = this.getKeySeriesVisitTaskId()
+      const currentCanvas = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`]
+      this.keyStack = currentCanvas && currentCanvas[0] ? currentCanvas[0].stack : null
+      const visitTaskId = this.keyStack?.visitTaskId
       if (!visitTaskId) return
       this.keySeriesLoading = true
       try {
@@ -1420,7 +1433,7 @@ export default {
     },
     jumpToKeySeries(kf) {
       this.keySeriesPopoverVisible = false
-      const visitTaskId = this.getKeySeriesVisitTaskId()
+      const visitTaskId = this.keyStack?.visitTaskId
       if (!visitTaskId) return
       // let annotation = {}
       // try {
@@ -3141,6 +3154,45 @@ export default {
     }
   }
 
+  .key-series-header {
+    padding: 5px 12px;
+    margin-bottom: 10px;
+    background: linear-gradient(180deg, rgba(64, 64, 64, 0.92) 0%, rgba(43, 43, 43, 0.98) 100%);
+    border: 1px solid #474747;
+    border-radius: 6px;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(0, 0, 0, 0.2);
+  }
+
+  .key-series-header-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .key-series-header-title {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .key-series-header-dot {
+    width: 8px;
+    height: 8px;
+    margin-right: 8px;
+    border-radius: 50%;
+    background: linear-gradient(180deg, #ffd76a 0%, #f39c12 100%);
+    box-shadow: 0 0 8px rgba(243, 156, 18, 0.45);
+  }
+
+  .key-series-task-name {
+    color: #fff;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 22px;
+    word-break: break-all;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+
   .key-series-empty {
     text-align: center;
     color: #999;
@@ -3151,21 +3203,24 @@ export default {
     text-align: left;
     display: flex;
     align-items: center;
-    padding: 8px;
+    padding: 10px;
     cursor: pointer;
-    background-color: #2b2b2b;
-    border-radius: 4px;
+    background: linear-gradient(180deg, rgba(46, 46, 46, 0.96) 0%, rgba(40, 40, 40, 0.98) 100%);
+    border-radius: 6px;
     margin-bottom: 8px;
-    border: 1px solid transparent;
-    transition: all 0.2s ease;
+    border: 1px solid #353535;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
+    // transition: all 0.2s ease;
 
     &:last-child {
       margin-bottom: 0;
     }
 
     &:hover {
-      background-color: #363636;
-      border-color: #555;
+      background: linear-gradient(180deg, rgba(54, 54, 54, 0.98) 0%, rgba(46, 46, 46, 1) 100%);
+      border-color: #5a5a5a;
+      // transform: translateY(-1px);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
     }
 
     .key-series-img {
@@ -3178,7 +3233,8 @@ export default {
       align-items: center;
       overflow: hidden;
       margin-right: 12px;
-      border-radius: 2px;
+      border-radius: 4px;
+      border: 1px solid #3a3a3a;
 
       img {
         width: 100%;
@@ -3221,12 +3277,12 @@ export default {
         white-space: nowrap;
       }
 
-      .key-series-value {
+      .key-series-uid {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         font-size: 13px;
-        color: #ccc;
+        color: #ddd;
         line-height: 1.2;
       }
     }
@@ -3236,10 +3292,15 @@ export default {
       display: flex;
       align-items: center;
       justify-content: center;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: rgba(243, 156, 18, 0.08);
+      border: 1px solid rgba(243, 156, 18, 0.16);
 
       .svg-icon {
         color: #f39c12;
-        font-size: 18px;
+        font-size: 16px;
       }
     }
   }
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
index c48e33cf..6713942e 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
@@ -181,6 +181,16 @@
               @show="showKeySeriesPanel"
             >
               <ul class="key-series-list">
+                <li v-if="keyTaskInfo && keyTaskInfo.TaskBlindName" class="key-series-header">
+                  <div class="key-series-header-top">
+                    <div class="key-series-header-title">
+                      <span class="key-series-header-dot"></span>
+                      <div class="key-series-task-name" :title="keyTaskInfo.TaskBlindName">
+                        {{ keyTaskInfo.TaskBlindName }}
+                      </div>
+                    </div>
+                  </div>
+                </li>
                 <li v-if="keySeriesLoading" class="key-series-empty">
                   <i class="el-icon-loading"></i>
                 </li>
@@ -765,6 +775,7 @@ export default {
       fullScreenIndex: null,
       activeViewportIndex: 0,
       keySeries: [],
+      keyTaskInfo: null,
       keySeriesPopoverVisible: false,
       keySeriesLoading: false,
       activeTool: '',
@@ -4300,9 +4311,9 @@ export default {
       this.keySeriesLoading = true
       try {
         const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
-        const visitTaskId = series?.TaskInfo?.VisitTaskId
-        if (visitTaskId) {
-          let res = await getMarkList({ visitTaskId: visitTaskId })
+        this.keyTaskInfo = series ? series.TaskInfo : null
+        if (this.keyTaskInfo) {
+          let res = await getMarkList({ visitTaskId: this.keyTaskInfo.VisitTaskId })
           if (res && res.Result) {
             this.keySeries = res.Result
           }
@@ -4314,10 +4325,8 @@ export default {
       }
     },
     jumpToKeySeries(kf) {
-      const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
-      const visitTaskId = series?.TaskInfo?.VisitTaskId
-      if (!visitTaskId) return
-      let tIdx = this.visitTaskList.findIndex(i=> i.VisitTaskId === visitTaskId) 
+
+      let tIdx = this.visitTaskList.findIndex(i=> i.VisitTaskId === this.keyTaskInfo.VisitTaskId) 
       if (tIdx < 0) return
       const task = this.visitTaskList[tIdx]
       const studyList = task.StudyList
@@ -4326,7 +4335,7 @@ export default {
       if (Object.keys(targetSeries).length === 0) return
       // this.activeTaskId = this.taskInfo.VisitTaskId
       this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].setSeriesInfo(targetSeries, true)
-      this.$refs[visitTaskId][0].setSeriesActive(targetSeries.StudyIndex, targetSeries.SeriesIndex)
+      this.$refs[this.keyTaskInfo.VisitTaskId][0].setSeriesActive(targetSeries.StudyIndex, targetSeries.SeriesIndex)
     },
     showPanel(e, toolName) {
       if (toolName === 'layout' && (this.isFusion || this.isMPR)) return false
@@ -5374,6 +5383,45 @@ export default {
     }
   }
 
+  .key-series-header {
+    padding: 5px 12px;
+    margin-bottom: 10px;
+    background: linear-gradient(180deg, rgba(64, 64, 64, 0.92) 0%, rgba(43, 43, 43, 0.98) 100%);
+    border: 1px solid #474747;
+    border-radius: 6px;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(0, 0, 0, 0.2);
+  }
+
+  .key-series-header-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .key-series-header-title {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .key-series-header-dot {
+    width: 8px;
+    height: 8px;
+    margin-right: 8px;
+    border-radius: 50%;
+    background: linear-gradient(180deg, #ffd76a 0%, #f39c12 100%);
+    box-shadow: 0 0 8px rgba(243, 156, 18, 0.45);
+  }
+
+  .key-series-task-name {
+    color: #fff;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 22px;
+    word-break: break-all;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+
   .key-series-empty {
     text-align: center;
     color: #999;
@@ -5384,21 +5432,24 @@ export default {
     text-align: left;
     display: flex;
     align-items: center;
-    padding: 8px;
+    padding: 10px;
     cursor: pointer;
-    background-color: #2b2b2b;
-    border-radius: 4px;
+    background: linear-gradient(180deg, rgba(46, 46, 46, 0.96) 0%, rgba(40, 40, 40, 0.98) 100%);
+    border-radius: 6px;
     margin-bottom: 8px;
-    border: 1px solid transparent;
-    transition: all 0.2s ease;
+    border: 1px solid #353535;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
+    // transition: all 0.2s ease;
 
     &:last-child {
       margin-bottom: 0;
     }
 
     &:hover {
-      background-color: #363636;
-      border-color: #555;
+      background: linear-gradient(180deg, rgba(54, 54, 54, 0.98) 0%, rgba(46, 46, 46, 1) 100%);
+      border-color: #5a5a5a;
+      // transform: translateY(-1px);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
     }
 
     .key-series-img {
@@ -5411,7 +5462,8 @@ export default {
       align-items: center;
       overflow: hidden;
       margin-right: 12px;
-      border-radius: 2px;
+      border-radius: 4px;
+      border: 1px solid #3a3a3a;
 
       img {
         width: 100%;
@@ -5459,7 +5511,7 @@ export default {
         text-overflow: ellipsis;
         white-space: nowrap;
         font-size: 13px;
-        color: #ccc;
+        color: #ddd;
         line-height: 1.2;
       }
     }
@@ -5469,10 +5521,15 @@ export default {
       display: flex;
       align-items: center;
       justify-content: center;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: rgba(243, 156, 18, 0.08);
+      border: 1px solid rgba(243, 156, 18, 0.16);
 
       .svg-icon {
         color: #f39c12;
-        font-size: 18px;
+        font-size: 16px;
       }
     }
   }
diff --git a/src/views/trials/trials-panel/reading/visit-review/components/FileViewer.vue b/src/views/trials/trials-panel/reading/visit-review/components/FileViewer.vue
index f83cc090..43baf5c3 100644
--- a/src/views/trials/trials-panel/reading/visit-review/components/FileViewer.vue
+++ b/src/views/trials/trials-panel/reading/visit-review/components/FileViewer.vue
@@ -40,6 +40,16 @@
           @show="showKeySeriesPanel"
         >
           <ul class="key-series-list">
+            <li v-if="keyTaskInfo && keyTaskInfo.TaskBlindName" class="key-series-header">
+              <div class="key-series-header-top">
+                <div class="key-series-header-title">
+                  <span class="key-series-header-dot"></span>
+                  <div class="key-series-task-name" :title="keyTaskInfo.TaskBlindName">
+                    {{ keyTaskInfo.TaskBlindName }}
+                  </div>
+                </div>
+              </div>
+            </li>
             <li v-if="keySeriesLoading" class="key-series-empty">
               <i class="el-icon-loading"></i>
             </li>
@@ -59,14 +69,14 @@
               <div class="key-series-info">
                 <div class="key-series-meta" v-if="kf.MarkName">
                   <div class="key-series-label">{{ $t('trials:reading:keySeries:annotationName') }}</div>
-                  <div class="key-series-value" :title="kf.MarkName">
+                  <div class="key-series-uid" :title="kf.MarkName">
                     {{ kf.MarkName }}
                   </div>
                 </div>
                 <div class="key-series-meta">
                   <div class="key-series-label">{{ $t('trials:reading:keySeries:fileName') }}</div>
-                  <div class="key-series-value" :title="kf.FileName">
-                    {{ kf.FileName || '-' }}
+                  <div class="key-series-uid" :title="kf.FileName">
+                    {{ kf.FileName }}
                   </div>
                 </div>
               </div>
@@ -537,6 +547,7 @@ export default {
       hotKeyList: [],
       isShowAnnotations: true,
       keySeries: [],
+      keyTaskInfo: null,
       keySeriesLoading: false,
       keySeriesPopoverVisible: false
     }
@@ -693,13 +704,13 @@ export default {
       try {
         const i = this.viewportInfos.findIndex(i => i.index === this.activeCanvasIndex)
         if (i > -1) {
+          this.keyTaskInfo = this.viewportInfos[i].taskInfo
           const visitTaskId = this.viewportInfos[i].taskInfo.VisitTaskId
           const res = await getNoneDicomMarkList({ visitTaskId: visitTaskId })
           if (res && res.Result) {
             this.keySeries = res.Result
           }
         }
-        
       } catch (err) {
         console.log(err)
       } finally {
@@ -707,9 +718,7 @@ export default {
       }
     },
     jumpToKeySeries(kf) {
-      const i = this.viewportInfos.findIndex(i => i.index === this.activeCanvasIndex)
-      if (i === -1) return
-      const visitTaskId = this.viewportInfos[i].taskInfo.VisitTaskId
+      const visitTaskId = this.keyTaskInfo.VisitTaskId
       this.$emit('selectFile', {
         path: kf.Path,
         studyId: kf.StudyId,
@@ -2607,6 +2616,45 @@ export default {
     }
   }
 
+  .key-series-header {
+    padding: 5px 12px;
+    margin-bottom: 10px;
+    background: linear-gradient(180deg, rgba(64, 64, 64, 0.92) 0%, rgba(43, 43, 43, 0.98) 100%);
+    border: 1px solid #474747;
+    border-radius: 6px;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(0, 0, 0, 0.2);
+  }
+
+  .key-series-header-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .key-series-header-title {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .key-series-header-dot {
+    width: 8px;
+    height: 8px;
+    margin-right: 8px;
+    border-radius: 50%;
+    background: linear-gradient(180deg, #ffd76a 0%, #f39c12 100%);
+    box-shadow: 0 0 8px rgba(243, 156, 18, 0.45);
+  }
+
+  .key-series-task-name {
+    color: #fff;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 22px;
+    word-break: break-all;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+
   .key-series-empty {
     text-align: center;
     color: #999;
@@ -2617,21 +2665,24 @@ export default {
     text-align: left;
     display: flex;
     align-items: center;
-    padding: 8px;
+    padding: 10px;
     cursor: pointer;
-    background-color: #2b2b2b;
-    border-radius: 4px;
+    background: linear-gradient(180deg, rgba(46, 46, 46, 0.96) 0%, rgba(40, 40, 40, 0.98) 100%);
+    border-radius: 6px;
     margin-bottom: 8px;
-    border: 1px solid transparent;
-    transition: all 0.2s ease;
+    border: 1px solid #353535;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
+    // transition: all 0.2s ease;
 
     &:last-child {
       margin-bottom: 0;
     }
 
     &:hover {
-      background-color: #363636;
-      border-color: #555;
+      background: linear-gradient(180deg, rgba(54, 54, 54, 0.98) 0%, rgba(46, 46, 46, 1) 100%);
+      border-color: #5a5a5a;
+      // transform: translateY(-1px);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
     }
 
     .key-series-img {
@@ -2644,7 +2695,8 @@ export default {
       align-items: center;
       overflow: hidden;
       margin-right: 12px;
-      border-radius: 2px;
+      border-radius: 4px;
+      border: 1px solid #3a3a3a;
 
       img {
         width: 100%;
@@ -2687,12 +2739,12 @@ export default {
         white-space: nowrap;
       }
 
-      .key-series-value {
+      .key-series-uid {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         font-size: 13px;
-        color: #ccc;
+        color: #ddd;
         line-height: 1.2;
       }
     }
@@ -2702,10 +2754,15 @@ export default {
       display: flex;
       align-items: center;
       justify-content: center;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: rgba(243, 156, 18, 0.08);
+      border: 1px solid rgba(243, 156, 18, 0.16);
 
       .svg-icon {
         color: #f39c12;
-        font-size: 18px;
+        font-size: 16px;
       }
     }
   }