feat: enhance dependency management with status tracking and UI impro…

…vements

- Added a new DependencyStatusTag component to visually represent the status of dependencies.
- Updated DependencyLogsDialog to include active target name and status, improving context in the logs view.
- Enhanced state management in the dependency module to track active target name and status.
- Refactored useDependencyList and SpiderDetailTabDependencies to utilize the new status tracking, improving user feedback and interaction.
- Improved UI elements to display dependency statuses more clearly, enhancing overall user experience.

These changes provide better visibility and management of dependency statuses, streamlining user interactions with the dependency management system.

src/components/core/dependency/DependencyLogsDialog.vue

@@ -2,6 +2,7 @@
 import { ref, computed, watch } from 'vue';
 import { translate } from '@/utils';
 import { useStore } from 'vuex';
+import { TagProps } from '@/components/ui/tag/types';
 
 const t = translate;
 
@@ -11,6 +12,9 @@ const { dependency: state } = store.state as RootStoreState;
 
 const visible = computed(() => state.activeDialogKey === 'logs');
 
+const activeTargetName = computed(() => state.activeTargetName);
+const activeTargetStatus = computed(() => state.activeTargetStatus);
+
 const content = computed(() => {
   const data: string[] = [];
   state.activeTargetLogs?.forEach(l => {
@@ -26,22 +30,36 @@ const content = computed(() => {
 
 const logsViewRef = ref<HTMLDivElement>();
 
+const previousActiveTargetLogsLength = ref(0);
+const getActiveTargetLogs = async () => {
+  previousActiveTargetLogsLength.value = state.activeTargetLogs?.length || 0;
+  await store.dispatch(`${ns}/getActiveTargetLogs`);
+  if (state.activeTargetLogs?.length > previousActiveTargetLogsLength.value) {
+    setTimeout(() => {
+      scrollToBottom();
+    }, 100);
+  }
+};
+
 const scrollToBottom = () => {
-  logsViewRef.value?.scrollTo(0, logsViewRef.value?.scrollHeight);
+  logsViewRef.value?.scrollTo(0, logsViewRef.value?.clientHeight);
 };
 
 const onClose = () => {
   store.commit(`${ns}/hideDialog`);
 };
 
 let handle: any = null;
-watch(visible, () => {
+watch(visible, async () => {
   if (visible.value) {
-    store.dispatch(`${ns}/getActiveTargetLogs`);
-    handle = setInterval(() => {
-      store.dispatch(`${ns}/getActiveTargetLogs`);
+    await getActiveTargetLogs();
+    handle = setInterval(async () => {
+      await getActiveTargetLogs();
     }, 5000);
   } else {
+    store.commit(`${ns}/resetActiveTargetId`);
+    store.commit(`${ns}/resetActiveTargetName`);
+    store.commit(`${ns}/resetActiveTargetStatus`);
     store.commit(`${ns}/resetActiveTargetLogs`);
     if (handle) {
       clearInterval(handle);
@@ -63,6 +81,11 @@ defineOptions({ name: 'ClDependencyLogsDialog' });
     @confirm="onClose"
     @close="onClose"
   >
+    <template #title>
+      <div class="title-wrapper">
+        <span>{{ t('common.tabs.logs') }} - {{ activeTargetName }}</span>
+      </div>
+    </template>
     <div class="logs-view" ref="logsViewRef">
       <pre>{{ content }}</pre>
     </div>
@@ -77,4 +100,10 @@ defineOptions({ name: 'ClDependencyLogsDialog' });
   min-height: 480px;
   max-height: 560px;
 }
+
+.title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
 </style>

src/components/core/dependency/DependencyStatusTag.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { TagProps } from '@/components/ui/tag/types';
+import { translate } from '@/utils';
+
+const props = defineProps<{
+  status?: DependencyStatus;
+  size?: BasicSize;
+  clickDisabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'click'): void;
+}>();
+
+const t = translate;
+
+const tagProps = computed<TagProps>(() => {
+  const { status, size, clickDisabled } = props;
+  let tagProps: TagProps;
+  switch (status) {
+    case 'installed':
+      tagProps = {
+        icon: ['fa', 'check'],
+        type: 'success',
+        clickable: true,
+      };
+      break;
+    case 'installing':
+    case 'uninstalling':
+      tagProps = {
+        icon: ['fa', 'spinner'],
+        type: 'warning',
+        spinning: true,
+        clickable: true,
+      };
+      break;
+    case 'error':
+    case 'abnormal':
+      tagProps = {
+        icon: ['fa', 'times'],
+        type: 'danger',
+        clickable: true,
+      };
+      break;
+    default:
+      tagProps = {
+        icon: ['fa', 'question'],
+        type: 'info',
+        clickable: false,
+      };
+  }
+  if (status) {
+    tagProps.label = t(`views.env.deps.dependency.status.${status}`);
+  } else {
+    tagProps.label = t('common.status.unknown');
+  }
+  if (clickDisabled) {
+    tagProps.clickable = false;
+  }
+  if (typeof size !== 'undefined') {
+    tagProps.size = size;
+  }
+  return tagProps;
+});
+
+defineOptions({ name: 'ClDependencyStatusTag' });
+</script>
+
+<template>
+  <cl-tag
+    :label="tagProps.label"
+    :icon="tagProps.icon"
+    :type="tagProps.type"
+    :size="tagProps.size"
+    :spinning="tagProps.spinning"
+    :clickable="tagProps.clickable"
+    @click="emit('click')"
+  />
+</template>

src/components/index.ts

@@ -64,6 +64,7 @@ import DependencyConfigDialog from './core/dependency/DependencyConfigDialog.vue
 import DependencyInstallDialog from './core/dependency/DependencyInstallDialog.vue';
 import DependencyLogsDialog from './core/dependency/DependencyLogsDialog.vue';
 import DependencySetupDialog from './core/dependency/DependencySetupDialog.vue';
+import DependencyStatusTag from './core/dependency/DependencyStatusTag.vue';
 import DependencyUninstallDialog from './core/dependency/DependencyUninstallDialog.vue';
 import DependencyVersions from './core/dependency/DependencyVersions.vue';
 import DetailTabList from './ui/list/DetailTabList.vue';
@@ -296,6 +297,7 @@ export {
   DependencyInstallDialog as ClDependencyInstallDialog,
   DependencyLogsDialog as ClDependencyLogsDialog,
   DependencySetupDialog as ClDependencySetupDialog,
+  DependencyStatusTag as ClDependencyStatusTag,
   DependencyUninstallDialog as ClDependencyUninstallDialog,
   DependencyVersions as ClDependencyVersions,
   DetailTabList as ClDetailTabList,

src/interfaces/store/modules/dependency.d.ts

@@ -31,6 +31,8 @@ export declare global {
     versions: string[];
     getVersionsLoading: boolean;
     activeTargetId?: string;
+    activeTargetName?: string;
+    activeTargetStatus?: DependencyStatus;
     activeTargetLogs: DependencyLog[];
     config?: DependencyConfig;
     configVersions: string[];
@@ -122,6 +124,13 @@ export declare global {
     ) => void;
     setActiveTargetId: (state: DependencyStoreState, id: string) => void;
     resetActiveTargetId: (state: DependencyStoreState) => void;
+    setActiveTargetName: (state: DependencyStoreState, name: string) => void;
+    resetActiveTargetName: (state: DependencyStoreState) => void;
+    setActiveTargetStatus: (
+      state: DependencyStoreState,
+      status: DependencyStatus
+    ) => void;
+    resetActiveTargetStatus: (state: DependencyStoreState) => void;
     setActiveTargetLogs: (
       state: DependencyStoreState,
       logs: DependencyLog[]

src/store/modules/dependency.ts

@@ -49,6 +49,8 @@ const state = {
   getVersionsLoading: false,
   versions: [],
   activeTargetId: undefined,
+  activeTargetName: undefined,
+  activeTargetStatus: undefined,
   activeTargetLogs: [],
   config: undefined,
   configVersions: [],
@@ -214,6 +216,21 @@ const mutations = {
   resetActiveTargetId: (state: DependencyStoreState): void => {
     state.activeTargetId = undefined;
   },
+  setActiveTargetName: (state: DependencyStoreState, name: string): void => {
+    state.activeTargetName = name;
+  },
+  resetActiveTargetName: (state: DependencyStoreState): void => {
+    state.activeTargetName = undefined;
+  },
+  setActiveTargetStatus: (
+    state: DependencyStoreState,
+    status: DependencyStatus
+  ): void => {
+    state.activeTargetStatus = status;
+  },
+  resetActiveTargetStatus: (state: DependencyStoreState): void => {
+    state.activeTargetStatus = undefined;
+  },
   setActiveTargetLogs: (
     state: DependencyStoreState,
     logs: DependencyLog[]