update: 智能体管理样式优化

main/manager-web/src/components/DeviceItem.vue

@@ -33,7 +33,7 @@
       </div>
       <div :class="['settings-btn', { 'disabled-btn': device.memModelId === 'Memory_nomem' }]"
         @click="handleChatHistory">
-        <el-tooltip v-if="device.memModelId === 'Memory_nomem'" :content="$t('home.enableMemory')" placement="top">
+        <el-tooltip effect="light" v-if="device.memModelId === 'Memory_nomem'" :content="$t('home.enableMemory')" placement="top">
           <span>{{ $t('home.chatHistory') }}</span>
         </el-tooltip>
         <span v-else>{{ $t('home.chatHistory') }}</span>
@@ -41,11 +41,11 @@
     </div>
     <div class="version-info">
       <div>{{ $t('home.lastConversation') }}：{{ formattedLastConnectedTime }}</div>
-      <div ref="scrollRef" class="version-info-scroll">
-        <div ref="tagsRef" class="version-info-tags">
-          <el-tag v-for="(tag, index) in tags" :key="index" size="mini">{{ tag }}</el-tag>
+      <el-tooltip :content="tags.join()" placement="top" effect="light">
+        <div class="version-info-scroll">
+          {{ tags.join() }}
         </div>
-      </div>
+      </el-tooltip>
     </div>
   </div>
 </template>
@@ -114,25 +114,6 @@ export default {
       this.$emit('chat-history', { agentId: this.device.agentId, agentName: this.device.agentName })
     }
   },
-  watch: {
-    tags: {
-      handler(newTags) {
-        if (newTags.length === 0) return;
-        this.$nextTick(() => {
-          const scrollWidth = this.$refs.scrollRef.clientWidth;
-          const tagsWidth = this.$refs.tagsRef.clientWidth;
-          if (tagsWidth < scrollWidth) {
-            this.$refs.tagsRef.style.width = '100%';
-            this.$refs.tagsRef.style.justifyContent = 'flex-end';
-          } else {
-            this.$refs.tagsRef.style.width = 'fit-content';
-            this.$refs.tagsRef.style.justifyContent = 'flex-start';
-          }
-        })
-      },
-      immediate: true
-    }
-  }
 }
 </script>
 <style lang="scss" scoped>
@@ -178,34 +159,18 @@ export default {
 .version-info {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   margin-top: 15px;
   font-size: 12px;
   color: #979db1;
   font-weight: 400;
-  > div {
-    &:first-of-type {
-      margin-top: 5px;
-    }
-  }
   &-scroll {
-    height: 26px;
     margin-left: 20px;
     flex: 1;
-    overflow-x: auto;
-    padding-bottom: 4px;
-    &::-webkit-scrollbar {
-      height: 6px;
-      background: #e6ebff;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: #409EFF;
-      border-radius: 8px;
-    }
-  }
-  &-tags {
-    width: fit-content;
-    display: flex;
-    gap: 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
+    text-align: right;
   }
 }