feat: 添加工作流新增对话框和编辑功能，优化工作流列表视图

src/api/types.ts

@@ -1265,41 +1265,55 @@ export interface SiteCategory {
 // 动作
 export interface Action {
   // 动作ID (类名)
-  id?: string;
+  id?: string
   // 动作名称
-  name?: string;
+  name?: string
   // 动作描述
-  description?: string;
+  description?: string
   // 是否需要循环
-  loop?: boolean;
+  loop?: boolean
   // 循环间隔 (秒)
-  loop_interval?: number;
+  loop_interval?: number
   // 参数
-  params?: { [key: string]: any };
+  params?: { [key: string]: any }
+}
+
+// 工作流
+export interface ActionFlow {
+  // ID
+  id?: string
+  // 源动作
+  source?: string
+  // 目标动作
+  target?: string
+  // 是否动画流程
+  animated?: boolean
 }
 
 // 工作流
 export interface Workflow {
   // 工作流ID
-  id?: string;
+  id?: string
   // 工作流名称
-  name?: string;
+  name?: string
   // 工作流描述
-  description?: string;
+  description?: string
   // 定时器
-  timer?: string;
+  timer?: string
   // 状态
-  state?: string;
+  state?: string
   // 当前执行动作
-  current_action?: string;
+  current_action?: string
   // 任务执行结果
-  result?: string;
+  result?: string
   // 已执行次数
-  run_count?: number;
+  run_count?: number
   // 动作列表
-  actions?: Action[];
+  actions?: Action[]
+  // 动作流
+  flows?: ActionFlow[]
   // 创建时间
-  add_time?: string;
+  add_time?: string
   // 最后执行时间
-  last_time?: string;
+  last_time?: string
 }

src/components/dialog/WorkflowAddDialog.vue

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import { useToast } from 'vue-toast-notification'
+import type { Workflow } from '@/api/types'
+import { doneNProgress, startNProgress } from '@/api/nprogress'
+import { requiredValidator } from '@/@validators'
+import api from '@/api'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 注册事件
+const emit = defineEmits(['save', 'remove', 'close'])
+
+// 站点编辑表单数据
+const workflowForm = ref<Workflow>({
+  name: undefined,
+  timer: undefined,
+  description: undefined,
+  state: 'P',
+  run_count: 0,
+})
+
+// 提示框
+const $toast = useToast()
+
+// 调用API 新增工作流
+async function addWorkflow() {
+  if (!workflowForm.value.name || !workflowForm.value.timer) {
+    $toast.error('请填写完整信息！')
+    return
+  }
+  startNProgress()
+  try {
+    const result: { [key: string]: string } = await api.post('workflow/', workflowForm.value)
+    if (result.success) {
+      $toast.success('新增工作流成功，请编辑流程！')
+      emit('save')
+    } else {
+      $toast.error(`新增工作流失败：${result.message}`)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+  doneNProgress()
+}
+</script>
+
+<template>
+  <VDialog scrollable :close-on-back="false" persistent eager max-width="30rem" :fullscreen="!display.mdAndUp.value">
+    <VCard title="新增工作流" class="rounded-t">
+      <DialogCloseBtn @click="emit('close')" />
+      <VDivider />
+      <VCardText>
+        <VForm @submit.prevent="() => {}">
+          <VRow>
+            <VCol cols="12">
+              <VTextField
+                v-model="workflowForm.name"
+                label="别名"
+                :rules="[requiredValidator]"
+                persistent-hint
+                hint="工作流名称"
+              />
+            </VCol>
+            <VCol cols="12">
+              <VCronField
+                v-model="workflowForm.timer"
+                label="定时"
+                :rules="[requiredValidator]"
+                placeholder="5位cron表达式"
+                persistent-hint
+                hint="工作流执行周期"
+              />
+            </VCol>
+            <VCol cols="12">
+              <VTextarea v-model="workflowForm.description" label="工作流描述" />
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+      <VCardActions class="pt-3">
+        <VSpacer />
+        <VBtn block color="primary" variant="elevated" @click="addWorkflow" prepend-icon="mdi-plus" class="px-5">
+          新增
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/dialog/WorkflowEditDialog.vue

@@ -4,6 +4,7 @@ import { VueFlow, useVueFlow } from '@vue-flow/core'
 import Sidebar from '../workflow/Sidebar.vue'
 import DropzoneBackground from '../workflow/DropzoneBackground.vue'
 import useDragAndDrop from '@core/utils/workflow'
+import { Workflow } from '@/api/types'
 
 const { onConnect, addEdges } = useVueFlow()
 
@@ -12,23 +13,48 @@ const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop()
 const nodes = ref([])
 
 onConnect(addEdges)
+
+// 定义输入参数
+const props = defineProps({
+  workflow: Object as PropType<Workflow>,
+})
+
+// 定义事件
+const emit = defineEmits(['close', 'save'])
 </script>
 
 <template>
-  <div class="dnd-flow" @drop="onDrop">
-    <VueFlow :nodes="nodes" @dragover="onDragOver" @dragleave="onDragLeave">
-      <DropzoneBackground
-        :style="{
-          backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
-          transition: 'background-color 0.2s ease',
-        }"
-      >
-        <p v-if="isDragOver">Drop here</p>
-      </DropzoneBackground>
-    </VueFlow>
+  <VDialog scrollable fullscreen :scrim="false" transition="dialog-bottom-transition">
+    <VCard>
+      <!-- Toolbar -->
+      <div>
+        <VToolbar color="primary">
+          <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>
+          </VToolbarItems>
+        </VToolbar>
+      </div>
+      <VCardText>
+        <div class="dnd-flow" @drop="onDrop">
+          <VueFlow :nodes="nodes" @dragover="onDragOver" @dragleave="onDragLeave">
+            <DropzoneBackground
+              :style="{
+                backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
+                transition: 'background-color 0.2s ease',
+              }"
+            >
+              <p v-if="isDragOver">Drop here</p>
+            </DropzoneBackground>
+          </VueFlow>
 
-    <Sidebar />
-  </div>
+          <Sidebar />
+        </div> </VCardText
+    ></VCard>
+  </VDialog>
 </template>
 <style>
 @import '@vue-flow/core/dist/style.css';

src/views/workflow/WorkflowListView.vue

@@ -3,6 +3,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 { useConfirm } from 'vuetify-use-dialog'
 
 // APP
 const display = useDisplay()
@@ -11,9 +14,18 @@ const appMode = inject('pwaMode') && display.mdAndDown.value
 // 是否刷新
 const isRefreshed = ref(false)
 
+// 新增对话框
+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
@@ -23,9 +35,15 @@ const headers = [
   { title: '当前任务', key: 'current_action' },
   { title: '状态', key: 'state' },
   { title: '进度', key: 'progress' },
-  { title: '创建时间', key: 'add_time' },
+  { title: '', key: 'action' },
 ]
 
+// 提示框
+const $toast = useToast()
+
+// 确认框
+const createConfirm = useConfirm()
+
 // 加载数据
 async function fetchData() {
   try {
@@ -36,6 +54,79 @@ 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) {
+  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)
+  }
+}
+
+// 停用工作流
+async function handlePause(item: Workflow) {
+  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)
+  }
+}
+
+// 立即执行工作流
+async function handleRun(item: Workflow) {
+  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)
+  }
+}
+
 // 计算状态颜色
 const resolveStatusVariant = (status: string | undefined) => {
   if (status === 'S') return { color: 'success', text: '成功' }
@@ -51,9 +142,25 @@ 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()
+}
+
 onMounted(() => {
   fetchData()
 })
+
+onActivated(() => {
+  fetchData()
+})
 </script>
 
 <template>
@@ -110,20 +217,38 @@ onMounted(() => {
       <template #item.progress="{ item }">
         <div class="d-flex align-center gap-x-4">
           <div class="w-100">
-            <VProgressLinear rounded :value="resolveProgress" color="primary" height="8" />
+            <VProgressLinear rounded :value="resolveProgress(item)" color="primary" height="8" />
           </div>
-          <div>{{ resolveProgress }}%</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 #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="每页记录数:"
+              label="每页条数:"
               variant="underlined"
-              style="max-inline-size: 8rem; min-inline-size: 5rem"
+              max-width="5rem"
             />
 
             <VPagination
@@ -147,5 +272,16 @@ onMounted(() => {
     app
     appear
     :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" />
 </template>