添加条件时自动滚动到最底部，添加节流

src/views/CommandInfo.vue

@@ -10,7 +10,7 @@
         <van-icon name="question-o" size="24" @click="showHelpDoc = true" />
       </div>
     </div>
-    <div class="container">
+    <div class="container" ref="stepListRef">
       <div class="card-group" v-if="crtCommand!.stepList.length">
         <VueDraggableNext :list="crtCommand!.stepList" animation="250" :delay="500">
           <div class="card" v-for="(item, index) in crtCommand!.stepList">
@@ -400,7 +400,10 @@ const handleEditCommand = (type: string, index: number, cIndex?: number) => {
   }
 }
 
-const handleAddCommand = (type: string) => {
+const stepListRef = ref<HTMLDivElement>()
+let flag = false
+let timer: any
+const handleAddCommand = async (type: string) => {
   if (!crtCommand.value) return
   if (type === 'del') {
     if (crtProject.value && crtCommand.value) {
@@ -423,6 +426,9 @@ const handleAddCommand = (type: string) => {
     }
     return
   }
+  if (flag) return
+  if (timer) clearTimeout(timer)
+  flag = true
   const endCMD = crtCommand.value.stepList[crtCommand.value.stepList.length - 1]
   const isExistTime = endCMD?.list?.some((item) => item.type === 'time')
   const x = endCMD?.x || crtCommand.value.x
@@ -478,6 +484,13 @@ const handleAddCommand = (type: string) => {
       })
       break
   }
+  await nextTick()
+  if (stepListRef.value && stepListRef.value.scrollHeight > stepListRef.value.clientHeight) {
+    stepListRef.value.scroll({ top: stepListRef.value.scrollHeight, behavior: 'smooth' })
+  }
+  timer = setTimeout(() => {
+    flag = false
+  }, 300)
 }
 
 const handleSaveCommand = () => {
@@ -687,7 +700,7 @@ const showBtnGroup = ref(true)
   bottom: 64px;
   right: 16px;
   padding: 16px;
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(255, 255, 255);
   border-radius: 4px;
   display: flex;
   justify-content: center;
@@ -695,12 +708,13 @@ const showBtnGroup = ref(true)
   gap: 8px;
   max-width: 90%;
   transition: all 0.3s;
+  box-shadow: 0 0 2px 2px #ccc;
 }
 .unfold {
   position: fixed;
   bottom: 72px;
   right: 16px;
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(255, 255, 255);
   border-radius: 4px;
   display: flex;
   justify-content: center;
@@ -710,6 +724,8 @@ const showBtnGroup = ref(true)
   height: 48px;
   font-size: 28px;
   transition: all 0.3s;
+  color: #4fb5f9;
+  box-shadow: 0 0 2px 2px #ccc;
 }
 .pack {
   display: flex;

src/views/ProjectInfo.vue

@@ -167,7 +167,9 @@ const showEditPopup = ref(false)
 const newProjectName = ref('')
 const onSubmit = (values: Record<string, string>) => {
   console.log(values)
-  const isExist = projectList.value.some((item) => item.name === values.newProjectName && item.id !== crtProject.value?.id)
+  const isExist = projectList.value.some(
+    (item) => item.name === values.newProjectName && item.id !== crtProject.value?.id
+  )
   if (isExist) {
     showFailToast('工程名称已存在')
     return
@@ -196,13 +198,13 @@ const handleDelete = (val: string) => {
   }
 }
 
+let flag = false
+let timer: any
 const handleAddCommond = () => {
-  let name = `任务${crtProject.value!.commandList.length + 1}`
-  if (crtProject.value!.commandList.length) {
-    const beforeName = crtProject.value!.commandList[crtProject.value!.commandList.length - 1].name
-    const index = beforeName.split('任务')[1]
-    name = `任务${+index + 1}`
-  }
+  if (flag) return
+  if (timer) clearTimeout(timer)
+  flag = true
+  let name = `任务${Math.floor(Date.now())}`
   crtProject.value!.commandList.push({
     id: '' + Date.now(),
     name,
@@ -216,6 +218,9 @@ const handleAddCommond = () => {
     crtProject.value.isCompiled = false
     localStorage.removeItem('imgobj' + crtProject.value!.id)
   }
+  timer = setTimeout(() => {
+    flag = false
+  }, 500)
 }
 
 // 文件编译