feat: 添加工作流任务卡片组件，支持编辑、删除和执行功能

src/components/cards/WorkflowTaskCard.vue

@@ -0,0 +1,223 @@
+<script lang="ts" setup>
+import { Workflow } from '@/api/types'
+import { useToast } from 'vue-toast-notification'
+import { useConfirm } from 'vuetify-use-dialog'
+import WorkflowEditDialog from '@/components/dialog/WorkflowEditDialog.vue'
+import api from '@/api'
+
+// 定义输入参数
+const props = defineProps({
+  workflow: {
+    required: true,
+    type: Object as PropType<Workflow>,
+  },
+})
+
+// 定义事件
+const emit = defineEmits(['refresh'])
+
+// 提示框
+const $toast = useToast()
+
+// 确认框
+const createConfirm = useConfirm()
+
+// 流程编辑对话框
+const editDialog = ref(false)
+
+// 加载中
+const loading = ref(false)
+
+// 编辑任务
+function handleEdit(item: Workflow) {
+  editDialog.value = true
+}
+
+// 编辑完成
+function editDone() {
+  editDialog.value = false
+  emit('refresh')
+}
+
+// 删除任务
+async function handleDelete(item: Workflow) {
+  const isConfirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认删除任务 ${item.name} ?`,
+  })
+
+  if (!isConfirmed) return
+
+  try {
+    const result: { [key: string]: string } = await api.delete(`workflow/${item.id}`)
+    if (result.success) {
+      $toast.success('删除任务成功！')
+      emit('refresh')
+    } else {
+      $toast.error(`删除任务失败：${result.message}`)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 开始任务
+async function handleEnable(item: Workflow) {
+  loading.value = true
+  try {
+    const result: { [key: string]: string } = await api.post(`workflow/${item.id}/start`)
+    if (result.success) {
+      $toast.success('启用任务成功！')
+      emit('refresh')
+    } else {
+      $toast.error(`启用任务失败：${result.message}`)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+  loading.value = false
+}
+
+// 停用任务
+async function handlePause(item: Workflow) {
+  loading.value = true
+  try {
+    const result: { [key: string]: string } = await api.post(`workflow/${item.id}/pause`)
+    if (result.success) {
+      $toast.success('停用任务成功！')
+      emit('refresh')
+    } else {
+      $toast.error(`停用任务失败：${result.message}`)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+  loading.value = false
+}
+
+// 立即执行任务
+async function handleRun(item: Workflow) {
+  loading.value = true
+  try {
+    const result: { [key: string]: string } = await api.post(`workflow/${item.id}/run`)
+    if (result.success) {
+      $toast.success('任务执行成功！')
+      emit('refresh')
+    } else {
+      $toast.error(`任务执行失败：${result.message}`)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+  loading.value = false
+}
+
+// 计算状态颜色
+const resolveStatusVariant = (status: string | undefined) => {
+  if (status === 'S') return { color: 'success', text: '成功' }
+  else if (status === 'R') return { color: 'primary', text: '运行中' }
+  else if (status === 'F') return { color: 'error', text: '失败' }
+  else if (status === 'P') return { color: 'warning', text: '暂停' }
+  else return { color: 'secondary', text: '等待' }
+}
+
+// 计算当前动作占比
+const resolveProgress = (item: Workflow) => {
+  const current_action_index = item.actions?.findIndex(action => action.id === item.current_action) ?? 0
+  return item.actions?.length ? Math.round((current_action_index / item.actions.length) * 100) : 0
+}
+</script>
+<template>
+  <div>
+    <VCard class="mx-auto" @click="handleEdit(props.workflow)">
+      <VCardItem class="py-3">
+        <template #prepend>
+          <VBadge v-if="props.workflow?.state" dot inline :color="resolveStatusVariant(props.workflow?.state).color" />
+        </template>
+        <VCardTitle>
+          {{ props.workflow?.name }}
+        </VCardTitle>
+        <VCardSubtitle>{{ props.workflow?.description }}</VCardSubtitle>
+        <template #append>
+          <IconBtn v-if="props.workflow?.state === 'P'">
+            <VIcon color="success" icon="mdi-play" @click.stop="handleEnable(props.workflow)" />
+          </IconBtn>
+          <IconBtn v-else>
+            <VIcon color="warning" icon="mdi-pause" @click.stop="handlePause(props.workflow)" />
+          </IconBtn>
+          <IconBtn>
+            <VIcon icon="mdi-dots-vertical" />
+            <VMenu activator="parent" close-on-content-click>
+              <VList>
+                <VListItem variant="plain" base-color="primary" @click="handleEdit(props.workflow)">
+                  <template #prepend>
+                    <VIcon icon="mdi-pencil" />
+                  </template>
+                  <VListItemTitle>编辑流程</VListItemTitle>
+                </VListItem>
+                <VListItem variant="plain" base-color="info" @click="handleRun(props.workflow)">
+                  <template #prepend>
+                    <VIcon icon="mdi-run" />
+                  </template>
+                  <VListItemTitle>立即执行</VListItemTitle>
+                </VListItem>
+                <VListItem variant="plain" base-color="error" @click="handleDelete(props.workflow)">
+                  <template #prepend>
+                    <VIcon icon="mdi-delete" />
+                  </template>
+                  <VListItemTitle>删除任务</VListItemTitle>
+                </VListItem>
+              </VList>
+            </VMenu>
+          </IconBtn>
+        </template>
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <div class="d-flex flex-column gap-y-6">
+          <div class="d-flex flex-wrap gap-y-4">
+            <div class="flex-1">
+              <div class="mb-1">定时</div>
+              <h5 class="text-h6">{{ props.workflow?.timer }}</h5>
+            </div>
+            <div class="flex-1">
+              <div class="mb-1">状态</div>
+              <h5 class="text-h6" :class="`text-${resolveStatusVariant(props.workflow?.state).color}`">
+                {{ resolveStatusVariant(props.workflow?.state).text }}
+              </h5>
+            </div>
+          </div>
+          <div class="d-flex flex-wrap gap-y-4">
+            <div class="flex-1">
+              <div class="mb-1">执行结果</div>
+              <h5 class="text-h6">{{ props.workflow?.result || '无' }}</h5>
+            </div>
+            <div class="flex-1">
+              <div class="mb-1">已执行次数</div>
+              <h5 class="text-h6">{{ props.workflow?.run_count }}</h5>
+            </div>
+          </div>
+          <div class="d-flex flex-wrap gap-y-4">
+            <div class="w-full">
+              <div class="mb-1">进度</div>
+              <div class="d-flex align-center gap-5">
+                <div class="flex-grow-1">
+                  <VProgressLinear rounded :value="resolveProgress(props.workflow)" color="primary" height="10" />
+                </div>
+                <span>75%</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </VCardText>
+    </VCard>
+    <!-- 编辑对话框 -->
+    <WorkflowEditDialog
+      v-if="editDialog"
+      v-model="editDialog"
+      @close="editDialog = false"
+      @save="editDone"
+      :workflow="props.workflow"
+    />
+  </div>
+</template>

src/router/menu.ts

@@ -52,7 +52,7 @@ export const SystemNavMenus = [
 
   {
     title: '工作流',
-    full_title: '自定义工作流',
+    full_title: '工作流',
     icon: 'mdi-state-machine',
     to: '/workflow',
     header: '订阅',

src/views/workflow/WorkflowListView.vue

@@ -2,10 +2,9 @@
 import api from '@/api'
 import { Workflow } from '@/api/types'
 import { useDisplay } from 'vuetify'
-import WorkflowEditDialog from '@/components/dialog/WorkflowEditDialog.vue'
 import WorkflowAddDialog from '@/components/dialog/WorkflowAddDialog.vue'
-import { useToast } from 'vue-toast-notification'
+import WorkflowTaskCard from '@/components/cards/WorkflowTaskCard.vue'
-import { useConfirm } from 'vuetify-use-dialog'
+import NoDataFound from '@/components/NoDataFound.vue'
 
 // APP
 const display = useDisplay()
@@ -14,46 +13,12 @@ const appMode = inject('pwaMode') && display.mdAndDown.value
 // 是否刷新
 const isRefreshed = ref(false)
 
-// 过滤关键字
-const filter = ref('')
-
-// 加载中
-const loading = ref(false)
-
 // 新增对话框
 const addDialog = ref(false)
 
-// 流程编辑对话框
-const editDialog = ref(false)
-
 // 所有任务
 const workflowList = ref<Workflow[]>([])
 
-// 当前编辑任务
-const currentWorkflow = ref<Workflow>()
-
-// headers
-const headers = [
-  { title: '任务', key: 'name' },
-  { title: '定时', key: 'timer' },
-  { title: '状态', key: 'state' },
-  { title: '进度', key: 'progress' },
-  { 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()
-
-// 确认框
-const createConfirm = useConfirm()
-
 // 加载数据
 async function fetchData() {
   try {
@@ -64,112 +29,6 @@ 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} ?`,
-  })
-
-  if (!isConfirmed) return
-
-  try {
-    const result: { [key: string]: string } = await api.delete(`workflow/${item.id}`)
-    if (result.success) {
-      $toast.success('删除任务成功！')
-      fetchData()
-    } else {
-      $toast.error(`删除任务失败：${result.message}`)
-    }
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-// 开始任务
-async function handleEnable(item: Workflow) {
-  loading.value = true
-  try {
-    const result: { [key: string]: string } = await api.post(`workflow/${item.id}/start`)
-    if (result.success) {
-      $toast.success('启用任务成功！')
-      fetchData()
-    } else {
-      $toast.error(`启用任务失败：${result.message}`)
-    }
-  } catch (error) {
-    console.error(error)
-  }
-  loading.value = false
-}
-
-// 停用任务
-async function handlePause(item: Workflow) {
-  loading.value = true
-  try {
-    const result: { [key: string]: string } = await api.post(`workflow/${item.id}/pause`)
-    if (result.success) {
-      $toast.success('停用任务成功！')
-      fetchData()
-    } else {
-      $toast.error(`停用任务失败：${result.message}`)
-    }
-  } catch (error) {
-    console.error(error)
-  }
-  loading.value = false
-}
-
-// 立即执行任务
-async function handleRun(item: Workflow) {
-  loading.value = true
-  try {
-    const result: { [key: string]: string } = await api.post(`workflow/${item.id}/run`)
-    if (result.success) {
-      $toast.success('任务执行成功！')
-      fetchData()
-    } else {
-      $toast.error(`任务执行失败：${result.message}`)
-    }
-  } catch (error) {
-    console.error(error)
-  }
-  loading.value = false
-}
-
-// 计算状态颜色
-const resolveStatusVariant = (status: string | undefined) => {
-  if (status === 'S') return { color: 'success', text: '成功' }
-  else if (status === 'R') return { color: 'primary', text: '运行中' }
-  else if (status === 'F') return { color: 'error', text: '失败' }
-  else if (status === 'P') return { color: 'warning', text: '暂停' }
-  else return { color: '', text: '等待' }
-}
-
-// 计算当前动作占比
-const resolveProgress = (item: Workflow) => {
-  const current_action_index = item.actions?.findIndex(action => action.id === item.current_action) ?? 0
-  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()
-}
-
 onMounted(() => {
   fetchData()
 })
@@ -180,88 +39,21 @@ onActivated(() => {
 </script>
 
 <template>
-  <VCard>
+  <div>
-    <VCardItem>
+    <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-      <div class="flex">
+    <VRow v-if="workflowList.length > 0">
-        <VCardTitle> 工作流 </VCardTitle>
+      <VCol cols="12" md="6" v-for="item in workflowList" :key="item.id">
-        <VSpacer />
+        <WorkflowTaskCard :workflow="item" @refresh="fetchData" />
-        <VCombobox
+      </VCol>
-          v-model="filter"
+    </VRow>
-          max-width="300"
+    <NoDataFound
-          key="search_navbar"
+      v-if="workflowList.length === 0 && isRefreshed"
-          class="text-disabled"
+      error-code="404"
-          density="compact"
+      error-title="没有工作流"
-          label="搜索"
+      error-description="点击添加按钮创建工作流任务。"
-          prepend-inner-icon="mdi-magnify"
-          variant="solo-filled"
-          single-line
-          hide-details
-          flat
-          rounded
-          clearable
     />
   </div>
-    </VCardItem>
+
-    <VDataTable
-      :headers="headers"
-      :items="workflowList"
-      :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" variant="tonal">
-            <span class="text-sm">{{ item.actions?.length }}</span>
-          </VAvatar>
-          <div class="d-flex flex-column ms-3">
-            <span class="d-block text-base text-high-emphasis text-truncate">{{ item.name }}</span>
-            <span class="text-sm">{{ item.description }}</span>
-          </div>
-        </div>
-      </template>
-      <!-- state -->
-      <template #item.state="{ item }">
-        <VChip :color="resolveStatusVariant(item.state).color" class="font-weight-medium" size="small">
-          {{ resolveStatusVariant(item.state).text }}
-        </VChip>
-      </template>
-      <!-- progress -->
-      <template #item.progress="{ item }">
-        <div class="d-flex align-center gap-x-4">
-          <div class="w-100">
-            <VProgressLinear rounded :value="resolveProgress(item)" color="primary" height="8" />
-          </div>
-          <div>{{ resolveProgress(item) }}%</div>
-        </div>
-      </template>
-      <!-- action -->
-      <template #item.action="{ item }">
-        <IconBtn v-if="item.state === 'P'">
-          <VIcon color="success" icon="mdi-play" @click="handleEnable(item)" />
-        </IconBtn>
-        <IconBtn v-else>
-          <VIcon color="warning" icon="mdi-pause" @click="handlePause(item)" />
-        </IconBtn>
-        <IconBtn>
-          <VIcon color="primary" icon="mdi-pencil" @click="handleEdit(item)" />
-        </IconBtn>
-        <IconBtn>
-          <VIcon color="info" icon="mdi-run" @click="handleRun(item)" />
-        </IconBtn>
-        <IconBtn>
-          <VIcon color="error" icon="mdi-delete" @click="handleDelete(item)" />
-        </IconBtn>
-      </template>
-      <template #no-data> 没有数据 </template>
-    </VDataTable>
-  </VCard>
   <!-- 新增按钮 -->
   <VFab
     v-if="isRefreshed"
@@ -274,19 +66,6 @@ onActivated(() => {
     :class="{ 'mb-12': appMode }"
     @click="addDialog = true"
   />
-  <!-- 编辑对话框 -->
-  <WorkflowEditDialog
-    v-if="editDialog && currentWorkflow"
-    v-model="editDialog"
-    @close="editDialog = false"
-    @save="editDone"
-    :workflow="currentWorkflow"
-  />
   <!-- 新增对话框 -->
-  <WorkflowAddDialog v-if="addDialog" v-model="addDialog" @close="addDialog = false" @save="addDone" />
+  <WorkflowAddDialog v-if="addDialog" v-model="addDialog" @close="addDialog = false" @save="fetchData" />
 </template>
-<style lang="scss">
-.v-table th {
-  white-space: nowrap;
-}
-</style>