feat: updated dependencies

src/components/core/dependency/DependencyVersions.vue

@@ -70,7 +70,6 @@ const versions = computed(() => {
   const versions = new Set<string>();
   repo.dependencies?.forEach(dep => {
     if (!dep.version) return;
-    console.debug(dep.version);
     versions.add(dep.version);
   });
   return versions;

src/components/core/node/NodeTag.vue

@@ -2,7 +2,6 @@
 import { computed } from 'vue';
 import { NODE_STATUS_OFFLINE, NODE_STATUS_ONLINE } from '@/constants';
 import { translate } from '@/utils';
-import { ElTag } from 'element-plus';
 
 const t = translate;
 
@@ -14,6 +13,7 @@ const props = defineProps<{
   clickable?: boolean;
   loading?: boolean;
   effect?: BasicEffect;
+  hit?: boolean;
   iconOnly?: boolean;
 }>();
 
@@ -75,8 +75,9 @@ defineOptions({ name: 'ClNodeTag' });
     :tooltip="tooltip"
     :clickable="clickable"
     :effect="effect"
+    :hit="hit"
+    max-width="150px"
     short
-    short-width="100px"
     @click="emit('click')"
     @mouseenter="emit('mouseenter')"
     @mouseleave="emit('mouseleave')"

src/components/ui/tag/Tag.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, CSSProperties, onMounted, ref, watch } from 'vue';
 import { ElTag } from 'element-plus';
 
 interface TagProps {
@@ -14,13 +14,13 @@ interface TagProps {
   size?: BasicSize;
   spinning?: boolean;
   width?: string;
+  maxWidth?: string;
   effect?: BasicEffect;
   clickable?: boolean;
   closable?: boolean;
   disabled?: boolean;
   className?: string;
   short?: boolean;
-  shortWidth?: string;
 }
 
 const props = defineProps<TagProps>();
@@ -94,27 +94,38 @@ const setStyle = () => {
   elTagClose.setAttribute('style', styleTagClose);
 };
 
-watch(() => props.color, setStyle);
-watch(() => props.backgroundColor, setStyle);
-watch(() => props.borderColor, setStyle);
-
-onMounted(() => {
-  setStyle();
+const style = computed<CSSProperties>(() => {
+  const { color, borderColor, width, maxWidth } = props;
+  return {
+    color,
+    borderColor,
+    width,
+    maxWidth,
+  };
 });
+
+// watch(() => props.color, setStyle);
+// watch(() => props.backgroundColor, setStyle);
+// watch(() => props.borderColor, setStyle);
+// onMounted(() => {
+//   setStyle();
+// });
+
 defineOptions({ name: 'ClTag' });
 </script>
 
 <template>
-  <el-tooltip :content="tooltip" :disabled="!tooltip && !$slots.tooltip">
+  <el-tooltip :content="tooltip" :disabled="!tooltip && !slots.tooltip">
     <el-tag
       ref="tagRef"
-      :closable="closable"
+      class="tag"
       :class="cls"
       :size="size"
       :type="type"
+      :closable="closable"
       :color="backgroundColor"
       :effect="effect"
-      class="tag"
+      :style="style"
       @click="onClick($event)"
       @close="onClose($event)"
       @mouseenter="$emit('mouseenter')"
@@ -170,7 +181,7 @@ defineOptions({ name: 'ClTag' });
   }
 
   &.short {
-    max-width: 120px;
+    max-width: 150px;
     overflow: hidden;
     justify-content: start;
     align-items: center;

src/views/dependency/list/useDependencyList.tsx

@@ -191,11 +191,12 @@ const useDependencyList = () => {
         value: (row: DependencyRepo) =>
           row.dependencies?.map(dep => {
             const node = allNodeDict.value.get(dep.node_id!);
-            return node ? (
+            if (!node?.active) return;
+            return (
               <ClNodeTag
                 node={node}
                 loading={isLoading(dep)}
-                effect={isLoading(dep) ? 'dark' : 'light'}
+                hit={isLoading(dep)}
                 type={getTypeByDep(dep)}
                 clickable
                 onClick={() => {
@@ -270,8 +271,6 @@ const useDependencyList = () => {
                   },
                 }}
               </ClNodeTag>
-            ) : (
-              ''
             );
           }),
       },