-
-
{{ key }}:
-
- {{ typeof value === 'boolean' ? (value ? '是' : '否') : (value ?? '未知') }}
-
+
+
{{ task.Unload.operation || '未知操作' }}
+
@@ -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
(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;
& > * {