feat: 优化用户界面和交互提示

src/components/dialog/WorkflowAddDialog.vue

@@ -24,7 +24,7 @@ const workflowForm = ref<Workflow>({
 // 提示框
 const $toast = useToast()
 
-// 调用API 新增工作流
+// 调用API 新增任务
 async function addWorkflow() {
   if (!workflowForm.value.name || !workflowForm.value.timer) {
     $toast.error('请填写完整信息！')
@@ -34,10 +34,10 @@ async function addWorkflow() {
   try {
     const result: { [key: string]: string } = await api.post('workflow/', workflowForm.value)
     if (result.success) {
-      $toast.success('新增工作流成功，请编辑流程！')
+      $toast.success('新增任务成功，请编辑流程！')
       emit('save')
     } else {
-      $toast.error(`新增工作流失败：${result.message}`)
+      $toast.error(`新增任务失败：${result.message}`)
     }
   } catch (error) {
     console.error(error)
@@ -48,7 +48,7 @@ async function addWorkflow() {
 
 <template>
   <VDialog scrollable :close-on-back="false" persistent eager max-width="30rem" :fullscreen="!display.mdAndUp.value">
-    <VCard title="新增工作流" class="rounded-t">
+    <VCard title="新建任务" class="rounded-t">
       <DialogCloseBtn @click="emit('close')" />
       <VDivider />
       <VCardText>
@@ -60,7 +60,7 @@ async function addWorkflow() {
                 label="别名"
                 :rules="[requiredValidator]"
                 persistent-hint
-                hint="工作流名称"
+                hint="任务名称"
               />
             </VCol>
             <VCol cols="12">
@@ -70,11 +70,11 @@ async function addWorkflow() {
                 :rules="[requiredValidator]"
                 placeholder="5位cron表达式"
                 persistent-hint
-                hint="工作流执行周期"
+                hint="任务执行周期"
               />
             </VCol>
             <VCol cols="12">
-              <VTextarea v-model="workflowForm.description" label="工作流描述" />
+              <VTextarea v-model="workflowForm.description" label="任务描述" />
             </VCol>
           </VRow>
         </VForm>

src/components/dialog/WorkflowEditDialog.vue

@@ -29,11 +29,16 @@ const emit = defineEmits(['close', 'save'])
       <!-- Toolbar -->
       <div>
         <VToolbar color="primary">
-          <VToolbarTitle>编辑工作流 - {{ workflow?.name }}</VToolbarTitle>
+          <VToolbarItems>
+            <VBtn icon @click="emit('close')" class="ms-3">
+              <VIcon size="large" color="white" icon="mdi-close" />
+            </VBtn>
+          </VToolbarItems>
+          <VToolbarTitle> 编辑流程 - {{ workflow?.name }} </VToolbarTitle>
           <VSpacer />
           <VToolbarItems>
-            <VBtn icon variant="plain" @click="emit('close')" class="me-3">
-              <VIcon size="large" color="white" icon="ri-close-line" />
+            <VBtn icon @click="emit('save')" class="me-5">
+              <VIcon size="large" color="white" icon="mdi-content-save" />
             </VBtn>
           </VToolbarItems>
         </VToolbar>
@@ -50,10 +55,10 @@ const emit = defineEmits(['close', 'save'])
               <p v-if="isDragOver">Drop here</p>
             </DropzoneBackground>
           </VueFlow>
-
           <Sidebar />
-        </div> </VCardText
-    ></VCard>
+        </div>
+      </VCardText>
+    </VCard>
   </VDialog>
 </template>
 <style>

src/main.ts

@@ -96,7 +96,7 @@ initializeApp().then(() => {
     .use(VuetifyUseDialog, {
       confirmDialog: {
         dialogProps: {
-          maxWidth: '40rem',
+          maxWidth: '30rem',
         },
         confirmationButtonProps: {
           variant: 'elevated',

src/views/reorganize/TransferHistoryView.vue

@@ -633,7 +633,9 @@ onMounted(fetchData)
       </template>
       <template #no-data> 没有数据 </template>
     </VDataTableVirtual>
-    <div class="flex items-center justify-center">
+    <!-- 分页 -->
+    <VDivider />
+    <div class="flex items-center justify-between">
       <div class="w-auto">
         <VSelect v-model="itemsPerPage" :items="pageRange" density="compact" variant="solo" flat />
       </div>
@@ -642,6 +644,7 @@ onMounted(fetchData)
         v-model="currentPage"
         show-first-last-page
         :length="totalPage"
+        :total-visible="display.mdAndUp.value ? 7 : 0"
         @next="currentPage + 1"
         @prev="currentPage - 1"
       >

src/views/workflow/WorkflowListView.vue

@@ -14,30 +14,37 @@ const appMode = inject('pwaMode') && display.mdAndDown.value
 // 是否刷新
 const isRefreshed = ref(false)
 
+// 过滤关键字
+const filter = ref('')
+
 // 新增对话框
 const addDialog = ref(false)
 
 // 流程编辑对话框
 const editDialog = ref(false)
 
-// 所有工作流
+// 所有任务
 const workflowList = ref<Workflow[]>([])
 
-// 当前编辑工作流
+// 当前编辑任务
 const currentWorkflow = ref<Workflow>()
 
-const options = ref({ page: 1, itemsPerPage: 25, sortBy: [''], sortDesc: [false] })
-
 // headers
 const headers = [
-  { title: '名称', key: 'name' },
+  { title: '任务', key: 'name' },
   { title: '定时', key: 'timer' },
-  { title: '当前任务', key: 'current_action' },
   { title: '状态', key: 'state' },
   { title: '进度', key: 'progress' },
-  { title: '', key: 'action' },
+  { title: '操作', key: 'action' },
 ]
 
+// 表格样式
+const tableStyle = computed(() => {
+  return appMode
+    ? 'height: calc(100vh - 12.5rem - env(safe-area-inset-bottom)'
+    : 'height: calc(100vh - 11.5rem - env(safe-area-inset-bottom)'
+})
+
 // 提示框
 const $toast = useToast()
 
@@ -54,17 +61,17 @@ async function fetchData() {
   }
 }
 
-// 编辑工作流
+// 编辑任务
 function handleEdit(item: Workflow) {
   currentWorkflow.value = item
   editDialog.value = true
 }
 
-// 删除工作流
+// 删除任务
 async function handleDelete(item: Workflow) {
   const isConfirmed = await createConfirm({
     title: '确认',
-    content: `是否确认删除工作流 ${item.name} ?`,
+    content: `是否确认删除任务 ${item.name} ?`,
   })
 
   if (!isConfirmed) return
@@ -72,55 +79,55 @@ async function handleDelete(item: Workflow) {
   try {
     const result: { [key: string]: string } = await api.delete(`workflow/${item.id}`)
     if (result.success) {
-      $toast.success('删除工作流成功！')
+      $toast.success('删除任务成功！')
       fetchData()
     } else {
-      $toast.error(`删除工作流失败：${result.message}`)
+      $toast.error(`删除任务失败：${result.message}`)
     }
   } catch (error) {
     console.error(error)
   }
 }
 
-// 开始工作流
+// 开始任务
 async function handleEnable(item: Workflow) {
   try {
     const result: { [key: string]: string } = await api.post(`workflow/${item.id}/start`)
     if (result.success) {
-      $toast.success('启用工作流成功！')
+      $toast.success('启用任务成功！')
       fetchData()
     } else {
-      $toast.error(`启用工作流失败：${result.message}`)
+      $toast.error(`启用任务失败：${result.message}`)
     }
   } catch (error) {
     console.error(error)
   }
 }
 
-// 停用工作流
+// 停用任务
 async function handlePause(item: Workflow) {
   try {
     const result: { [key: string]: string } = await api.post(`workflow/${item.id}/pause`)
     if (result.success) {
-      $toast.success('停用工作流成功！')
+      $toast.success('停用任务成功！')
       fetchData()
     } else {
-      $toast.error(`停用工作流失败：${result.message}`)
+      $toast.error(`停用任务失败：${result.message}`)
     }
   } catch (error) {
     console.error(error)
   }
 }
 
-// 立即执行工作流
+// 立即执行任务
 async function handleRun(item: Workflow) {
   try {
     const result: { [key: string]: string } = await api.post(`workflow/${item.id}/run`)
     if (result.success) {
-      $toast.success('立即执行工作流成功！')
+      $toast.success('任务执行成功！')
       fetchData()
     } else {
-      $toast.error(`立即执行工作流失败：${result.message}`)
+      $toast.error(`任务执行失败：${result.message}`)
     }
   } catch (error) {
     console.error(error)
@@ -142,13 +149,13 @@ const resolveProgress = (item: Workflow) => {
   return item.actions?.length ? Math.round((current_action_index / item.actions.length) * 100) : 0
 }
 
-// 新增工作流成功
+// 新增任务成功
 const addDone = () => {
   addDialog.value = false
   fetchData()
 }
 
-// 修改工作流成功
+// 修改任务成功
 const editDone = () => {
   editDialog.value = false
   fetchData()
@@ -170,6 +177,7 @@ onActivated(() => {
         <VCardTitle> 工作流 </VCardTitle>
         <VSpacer />
         <VCombobox
+          v-model="filter"
           max-width="300"
           key="search_navbar"
           class="text-disabled"
@@ -188,22 +196,24 @@ onActivated(() => {
     <VDataTable
       :headers="headers"
       :items="workflowList"
-      :items-per-page="options.itemsPerPage"
-      :page="options.page"
-      :options="options"
+      :items-per-page="1000"
       loading-text="加载中..."
       class="text-no-wrap"
       hover
+      fixed-header
+      hide-default-footer
+      :style="tableStyle"
+      :search="filter"
     >
       <!-- name -->
       <template #item.name="{ item }">
         <div class="d-flex align-center">
-          <VAvatar size="32" color="primary" class="v-avatar-light-bg primary--text" variant="tonal">
+          <VAvatar size="32" color="primary" variant="tonal">
             <span class="text-sm">{{ item.actions?.length }}</span>
           </VAvatar>
           <div class="d-flex flex-column ms-3">
-            <span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.name }}</span>
-            <small>{{ item.description }}</small>
+            <span class="d-block text-base text-high-emphasis text-truncate">{{ item.name }}</span>
+            <span class="text-sm">{{ item.description }}</span>
           </div>
         </div>
       </template>
@@ -240,25 +250,6 @@ onActivated(() => {
           <VIcon color="error" icon="mdi-delete" @click="handleDelete(item)" />
         </IconBtn>
       </template>
-      <template #bottom>
-        <VCardText class="pt-2">
-          <div class="d-flex flex-wrap justify-space-between gap-y-2 mt-2">
-            <VSelect
-              v-model="options.itemsPerPage"
-              :items="[10, 25, 50, 100]"
-              label="每页条数:"
-              variant="underlined"
-              max-width="5rem"
-            />
-
-            <VPagination
-              v-model="options.page"
-              :total-visible="$vuetify.display.smAndDown ? 2 : 3"
-              :length="Math.ceil(workflowList.length / options.itemsPerPage)"
-            />
-          </div>
-        </VCardText>
-      </template>
       <template #no-data> 没有数据 </template>
     </VDataTable>
   </VCard>
@@ -285,3 +276,8 @@ onActivated(() => {
   <!-- 新增对话框 -->
   <WorkflowAddDialog v-if="addDialog" v-model="addDialog" @close="addDialog = false" @save="addDone" />
 </template>
+<style lang="scss">
+.v-table th {
+  white-space: nowrap;
+}
+</style>