feat: 第一次加入任务时自动打开状态面板

components/object/upload/picker.vue

@@ -83,7 +83,7 @@ interface SelectedItem {
   files?: FileItem[]
 }
 
-const emit = defineEmits(['update:show'])
+const emit = defineEmits(['update:show', 'submit'])
 
 const props = defineProps<{ show: boolean; bucketName: string; prefix: string }>()
 
@@ -160,6 +160,7 @@ function handleUpload() {
     uploadTaskManagerStore.addFiles([fileItem.file], props.bucketName, fileItem.prefix)
   })
   selectedItems.value = []
+  emit('submit')
   closeModal()
 }
 </script>

components/object/upload/stats.vue

@@ -21,7 +21,7 @@
           </div>
           <n-progress type="line" :height="2" :percentage="percentage" :show-indicator="false" :processing="percentage < 100" />
         </div>
-        <n-tabs type="line" animated :value="tab">
+        <n-tabs type="line" animated v-model:value="tab">
           <n-tab-pane :tab="`待处理(${pending.length})`" name="pending">
             <object-upload-task-list :tasks="pending" />
           </n-tab-pane>
@@ -40,14 +40,14 @@
   </n-drawer>
 </template>
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useUploadTaskManagerStore } from '~/store/upload-tasks'
 
 const showDrawer = ref(false)
 
 const store = useUploadTaskManagerStore()
-
 const tasks = computed(() => store.tasks)
+
 const total = computed(() => tasks.value.length)
 const percentage = computed(() => total.value === 0 ? 100 : Math.floor((completed.value.length / total.value) * 100))
 
@@ -59,7 +59,7 @@ const failed = computed(() => tasks.value.filter(task => task.status === 'failed
 const tab = ref('pending')
 
 // 根据任务执行状态切换任务列表，如果有进行中的任务则默认展示进行中，否则展示已完成
-watch([pending, uploading], () => {
+watch(percentage, () => {
   if (uploading.value.length > 0) {
     tab.value = 'uploading'
   } else {
@@ -67,6 +67,15 @@ watch([pending, uploading], () => {
   }
 })
 
+// 第一次加入任务时自动打开抽屉
+const autoOpened = ref(false)
+watch(total, (newVal, oldVal) => {
+  if (!autoOpened.value && !showDrawer.value && oldVal === 0 && newVal > 0) {
+    showDrawer.value = true
+    autoOpened.value = true
+  }
+})
+
 const toggleDrawer = () => {
   showDrawer.value = !showDrawer.value
 }