From 8bf968d27305bbb686adbec5b20a4f9e223e1662 Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Thu, 7 Aug 2025 15:32:20 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=96=B0=E7=82=B9?=
 =?UTF-8?q?=E4=BD=8D=E8=AF=A6=E7=BB=86=E5=8D=A1=E7=89=87=E7=9A=84=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E5=B1=95=E7=A4=BA=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E6=91=98=E8=A6=81=E5=92=8C=E5=B7=A5=E5=85=B7=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=E4=BB=A5=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/card/point-detail-card.vue | 135 +++++++++++++++++-----
 src/pages/group-editor.vue                |   1 +
 src/pages/movement-supervision.vue        |   1 +
 src/pages/scene-editor.vue                |   1 +
 4 files changed, 111 insertions(+), 27 deletions(-)

diff --git a/src/components/card/point-detail-card.vue b/src/components/card/point-detail-card.vue
index 101d034..ffd3aa5 100644
--- a/src/components/card/point-detail-card.vue
+++ b/src/components/card/point-detail-card.vue
@@ -296,23 +296,35 @@ const binTaskData = computed(() => {
                   <div v-for="(task, taskIndex) in binLocation.binTasks" :key="taskIndex" class="bin-task-item">
                     <div v-if="task && task.Load && typeof task.Load === 'object'" class="task-operation">
                       <a-typography-text class="operation-title">装载</a-typography-text>
-                      <div class="operation-details">
-                        <div v-for="(value, key) in task.Load" :key="key" class="detail-item">
-                          <span class="detail-key">{{ key }}:</span>
-                          <span class="detail-value">
-                            {{ typeof value === 'boolean' ? (value ? '是' : '否') : (value ?? '未知') }}
-                          </span>
+                      <div class="operation-summary">
+                        <span class="operation-type">{{ task.Load.operation || '未知操作' }}</span>
+                        <div class="operation-tooltip">
+                          <i class="icon detail" />
+                          <div class="tooltip-content">
+                            <div v-for="(value, key) in task.Load" :key="key" class="detail-item">
+                              <span class="detail-key">{{ key }}:</span>
+                              <span class="detail-value">
+                                {{ typeof value === 'boolean' ? (value ? '是' : '否') : (value ?? '未知') }}
+                              </span>
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
                     <div v-if="task && task.Unload && typeof task.Unload === 'object'" class="task-operation">
                       <a-typography-text class="operation-title">卸载</a-typography-text>
-                      <div class="operation-details">
-                        <div v-for="(value, key) in task.Unload" :key="key" class="detail-item">
-                          <span class="detail-key">{{ key }}:</span>
-                          <span class="detail-value">
-                            {{ typeof value === 'boolean' ? (value ? '是' : '否') : (value ?? '未知') }}
-                          </span>
+                      <div class="operation-summary">
+                        <span class="operation-type">{{ task.Unload.operation || '未知操作' }}</span>
+                        <div class="operation-tooltip">
+                          <i class="icon detail" />
+                          <div class="tooltip-content">
+                            <div v-for="(value, key) in task.Unload" :key="key" class="detail-item">
+                              <span class="detail-key">{{ key }}:</span>
+                              <span class="detail-value">
+                                {{ typeof value === 'boolean' ? (value ? '是' : '否') : (value ?? '未知') }}
+                              </span>
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -442,28 +454,97 @@ const binTaskData = computed(() => {
               display: block;
             }
 
-            .operation-details {
-              .detail-item {
-                display: flex;
-                justify-content: space-between;
-                margin-bottom: 4px;
-                font-size: 12px;
+            .operation-summary {
+              display: flex;
+              align-items: center;
+              gap: 8px;
+              cursor: pointer;
 
-                &:last-child {
-                  margin-bottom: 0;
+              .operation-type {
+                font-weight: 500;
+                color: get-color(primary);
+                flex-shrink: 0;
+              }
+
+              .operation-tooltip {
+                position: relative;
+                display: inline-block;
+
+                .icon.detail {
+                  width: 14px;
+                  height: 14px;
+                  background-image: url('/src/assets/icons/dark/detail.png');
+                  background-size: contain;
+                  background-repeat: no-repeat;
+                  background-position: center;
+                  cursor: pointer;
+                  opacity: 0.6;
+                  transition: opacity 0.2s ease;
+
+                  &:hover {
+                    opacity: 1;
+                  }
                 }
 
-                .detail-key {
-                  color: get-color(text2);
-                  font-weight: 500;
-                  flex-shrink: 0;
-                  margin-right: 8px;
+                @media (prefers-color-scheme: light) {
+                  .icon.detail {
+                    background-image: url('/src/assets/icons/light/detail.png');
+                  }
                 }
 
-                .detail-value {
+                .tooltip-content {
+                  position: absolute;
+                  bottom: 100%;
+                  left: 50%;
+                  transform: translateX(-50%);
+                  background-color: get-color(fill1);
                   color: get-color(text1);
-                  text-align: right;
+                  padding: 8px;
+                  border-radius: 4px;
+                  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+                  z-index: 1000;
+                  white-space: nowrap;
+                  font-size: 12px;
+                  line-height: 1.5;
+                  max-width: 200px;
                   word-break: break-all;
+                  border: 1px solid get-color(border1);
+                  opacity: 0;
+                  visibility: hidden;
+                  transition:
+                    opacity 0.2s ease,
+                    visibility 0.2s ease;
+                  backdrop-filter: blur(8px);
+                  -webkit-backdrop-filter: blur(8px);
+                  background: get-color(fill1) !important;
+                }
+
+                &:hover .tooltip-content {
+                  opacity: 1;
+                  visibility: visible;
+                }
+
+                .detail-item {
+                  display: flex;
+                  justify-content: space-between;
+                  margin-bottom: 4px;
+
+                  &:last-child {
+                    margin-bottom: 0;
+                  }
+
+                  .detail-key {
+                    color: get-color(text2);
+                    font-weight: 500;
+                    flex-shrink: 0;
+                    margin-right: 8px;
+                  }
+
+                  .detail-value {
+                    color: get-color(text1);
+                    text-align: right;
+                    word-break: break-all;
+                  }
                 }
               }
             }
diff --git a/src/pages/group-editor.vue b/src/pages/group-editor.vue
index 519063b..789e0b8 100644
--- a/src/pages/group-editor.vue
+++ b/src/pages/group-editor.vue
@@ -195,6 +195,7 @@ const selectRobot = (id: string) => {
   width: 320px;
   height: calc(100% - 96px);
   overflow: visible;
+  overflow-y: auto;
   pointer-events: none;
 
   & > * {
diff --git a/src/pages/movement-supervision.vue b/src/pages/movement-supervision.vue
index da83b9c..4da4f7b 100644
--- a/src/pages/movement-supervision.vue
+++ b/src/pages/movement-supervision.vue
@@ -293,6 +293,7 @@ const show = ref<boolean>(true);
   width: 320px;
   height: calc(100% - 96px);
   overflow: visible;
+  overflow-y: auto;
   pointer-events: none;
 
   & > * {
diff --git a/src/pages/scene-editor.vue b/src/pages/scene-editor.vue
index e80ca11..bc2c510 100644
--- a/src/pages/scene-editor.vue
+++ b/src/pages/scene-editor.vue
@@ -257,6 +257,7 @@ const handleAutoSaveAndRestoreViewState = async () => {
   width: 320px;
   height: calc(100% - 96px);
   overflow: visible;
+  overflow-y: auto;
   pointer-events: none;
 
   & > * {