feat(editor): 优化依赖收集状态显示，新增剩余任务数量显示

packages/editor/src/layouts/sidebar/Sidebar.vue

@@ -117,6 +117,10 @@
         </template>
       </component>
     </div>
+    <div class="m-editor-sidebar-tips" v-if="tipsBarVisible && collecting && taskLength > 0">
+      <span>依赖收集中(剩余任务：{{ taskLength }})</span>
+      <MIcon :icon="Close" class="close-icon" @click.stop="tipsBarVisible = false"></MIcon>
+    </div>
   </div>
 
   <Teleport to="body">
@@ -150,7 +154,7 @@
 
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue';
-import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
+import { Close, Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import MIcon from '@editor/components/Icon.vue';
@@ -200,6 +204,8 @@ const props = withDefaults(
 const { depService, uiService } = useServices();
 
 const collecting = computed(() => depService.get('collecting'));
+const taskLength = computed(() => depService.get('taskLength'));
+const tipsBarVisible = ref(true);
 
 const columnLeftWidth = computed(() => uiService.get('columnWidth')[ColumnLayout.LEFT]);
 const { height: editorContentHeight } = useEditorContentHeight();

packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -20,9 +20,6 @@
     </template>
 
     <template #tree-node-tool="{ data }">
-      <TMagicTag v-if="collecting && data.type === 'code'" type="info" size="small" style="margin-right: 5px"
-        >依赖收集中</TMagicTag
-      >
       <TMagicTooltip v-if="data.type === 'code'" effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
         <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.key}`)"></Icon>
       </TMagicTooltip>
@@ -40,7 +37,7 @@ import { Close, Edit, View } from '@element-plus/icons-vue';
 
 import type { Id, MNode } from '@tmagic/core';
 import { DepTargetType } from '@tmagic/core';
-import { tMagicMessage, tMagicMessageBox, TMagicTag, TMagicTooltip } from '@tmagic/design';
+import { tMagicMessage, tMagicMessageBox, TMagicTooltip } from '@tmagic/design';
 
 import Icon from '@editor/components/Icon.vue';
 import Tree from '@editor/components/Tree.vue';
@@ -69,8 +66,6 @@ const emit = defineEmits<{
 
 const { codeBlockService, depService, editorService } = useServices();
 
-const collecting = computed(() => depService.get('collecting'));
-
 // 代码块列表
 const codeList = computed<TreeNodeData[]>(() =>
   Object.entries(codeBlockService.getCodeDsl() || {}).map(([codeId, code]) => {

packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue

@@ -19,9 +19,6 @@
       </div>
     </template>
     <template #tree-node-tool="{ data }">
-      <TMagicTag v-if="collecting && data.type === 'ds'" type="info" size="small" style="margin-right: 5px"
-        >依赖收集中</TMagicTag
-      >
       <TMagicTooltip v-if="data.type === 'ds'" effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
         <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editHandler(`${data.key}`)"></Icon>
       </TMagicTooltip>
@@ -38,7 +35,7 @@ import { computed } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
 import { DepData, DepTargetType, Id, MNode } from '@tmagic/core';
-import { TMagicTag, TMagicTooltip } from '@tmagic/design';
+import { TMagicTooltip } from '@tmagic/design';
 
 import Icon from '@editor/components/Icon.vue';
 import Tree from '@editor/components/Tree.vue';
@@ -66,8 +63,6 @@ const emit = defineEmits<{
 
 const { depService, editorService, dataSourceService } = useServices();
 
-const collecting = computed(() => depService.get('collecting'));
-
 const editable = computed(() => dataSourceService.get('editable'));
 
 const dataSources = computed(() => dataSourceService.get('dataSources'));

packages/editor/src/services/dep.ts

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 import { reactive, shallowReactive } from 'vue';
+import { throttle } from 'lodash-es';
 
 import type { DepExtendedData, Id, MNode, Target, TargetNode } from '@tmagic/core';
 import { DepTargetType, Watcher } from '@tmagic/core';
@@ -34,19 +35,32 @@ export interface DepEvents {
 
 interface State {
   collecting: boolean;
+  taskLength: number;
 }
 
 type StateKey = keyof State;
 
-const idleTask = new IdleTask<{ node: TargetNode; deep: boolean; target: Target }>();
-
 class Dep extends BaseService {
   private state = shallowReactive<State>({
     collecting: false,
+    taskLength: 0,
   });
 
+  private idleTask = new IdleTask<{ node: TargetNode; deep: boolean; target: Target }>();
+
   private watcher = new Watcher({ initialTargets: reactive({}) });
 
+  constructor() {
+    super();
+
+    this.idleTask.on(
+      'update-task-length',
+      throttle(({ length }) => {
+        this.set('taskLength', length);
+      }, 1000),
+    );
+  }
+
   public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
     this.state[name] = value;
   }
@@ -116,11 +130,11 @@ class Dep extends BaseService {
         resolve();
         return;
       }
-      idleTask.once('finish', () => {
+      this.idleTask.once('finish', () => {
         this.emit('collected', nodes, deep);
         this.set('collecting', false);
       });
-      idleTask.once('hight-level-finish', () => {
+      this.idleTask.once('hight-level-finish', () => {
         this.emit('ds-collected', nodes, deep);
         resolve();
       });
@@ -159,7 +173,7 @@ class Dep extends BaseService {
   }
 
   public clearIdleTasks() {
-    idleTask.clearTasks();
+    this.idleTask.clearTasks();
   }
 
   public on<Name extends keyof DepEvents, Param extends DepEvents[Name]>(
@@ -177,8 +191,8 @@ class Dep extends BaseService {
   }
 
   public reset() {
-    idleTask.removeAllListeners();
+    this.idleTask.removeAllListeners();
-    idleTask.clearTasks();
+    this.idleTask.clearTasks();
 
     for (const type of Object.keys(this.watcher.getTargetsList())) {
       this.removeTargets(type);
@@ -191,6 +205,7 @@ class Dep extends BaseService {
     this.removeAllListeners();
     this.reset();
     this.removeAllPlugins();
+    this.idleTask.removeAllListeners();
   }
 
   public emit<Name extends keyof DepEvents, Param extends DepEvents[Name]>(eventName: Name, ...args: Param) {
@@ -198,7 +213,7 @@ class Dep extends BaseService {
   }
 
   private enqueueTask(node: MNode, target: Target, depExtendedData: DepExtendedData, deep: boolean) {
-    idleTask.enqueueTask(
+    this.idleTask.enqueueTask(
       ({ node, deep, target }) => {
         this.collectNode(node, target, depExtendedData, deep);
       },

packages/editor/src/theme/common/var.scss

@@ -10,6 +10,7 @@ $nav--background-color: #ffffff;
 
 $sidebar-heder-background-color: $theme-color;
 $sidebar-content-background-color: #ffffff;
+$sidebar-heder-width: 40px;
 
 $page-bar-height: 32px;
 

packages/editor/src/theme/sidebar.scss

@@ -3,11 +3,12 @@
 .m-editor-sidebar {
   display: flex;
   height: 100%;
+  position: relative;
 
   .m-editor-sidebar-header {
     background: $sidebar-heder-background-color;
     height: 100%;
-    width: 40px;
+    width: $sidebar-heder-width;
 
     .m-editor-sidebar-header-item {
       line-height: 15px;
@@ -52,6 +53,24 @@
     overflow: auto;
   }
 
+  .m-editor-sidebar-tips {
+    position: absolute;
+    bottom: 0;
+    left: $sidebar-heder-width;
+    width: calc(100% - #{$sidebar-heder-width});
+    text-align: center;
+    background-color: rgba(252.5, 245.7, 235.5, 0.9);
+    color: #e6a23c;
+    padding: 5px 0;
+    font-size: 12px;
+
+    .close-icon {
+      cursor: pointer;
+      position: absolute;
+      right: 15px;
+    }
+  }
+
   .fold-icon {
     position: absolute;
     bottom: 8px;

packages/editor/src/utils/idle-task.ts

@@ -3,6 +3,7 @@ import { EventEmitter } from 'events';
 export interface IdleTaskEvents {
   finish: [];
   'hight-level-finish': [];
+  'update-task-length': [{ length: number; hightLevelLength: number }];
 }
 
 type TaskList<T> = {
@@ -55,6 +56,11 @@ export class IdleTask<T = any> extends EventEmitter {
     this.hightLevelTaskList = [];
     this.taskList = [];
     this.taskHandle = null;
+
+    this.emit('update-task-length', {
+      length: this.taskList.length + this.hightLevelTaskList.length,
+      hightLevelLength: this.hightLevelTaskList.length,
+    });
   }
 
   public on<Name extends keyof IdleTaskEvents, Param extends IdleTaskEvents[Name]>(
@@ -117,5 +123,10 @@ export class IdleTask<T = any> extends EventEmitter {
 
       this.emit('finish');
     }
+
+    this.emit('update-task-length', {
+      length: taskList.length + hightLevelTaskList.length,
+      hightLevelLength: hightLevelTaskList.length,
+    });
   }
 }