From c056ec937758f8a28775ab42daef09129a8907f9 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 22 Feb 2025 12:11:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(Workflow):=20=E6=B7=BB=E5=8A=A0=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E6=B5=81=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=8C=85=E5=90=AB?=
 =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=B5=81=E5=88=97=E8=A1=A8=E5=92=8C=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E6=8E=A5=E5=8F=A3=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/types.ts                        |  42 +++++++
 src/pages/workflow.vue                  |   7 ++
 src/router/index.ts                     |   8 ++
 src/router/menu.ts                      |  10 ++
 src/views/workflow/WorkflowListView.vue | 150 ++++++++++++++++++++++++
 5 files changed, 217 insertions(+)
 create mode 100644 src/pages/workflow.vue
 create mode 100644 src/views/workflow/WorkflowListView.vue

diff --git a/src/api/types.ts b/src/api/types.ts
index 83336ab3..1c1984a2 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -1261,3 +1261,45 @@ export interface SiteCategory {
   cat: string
   desc: string
 }
+
+// 动作
+export interface Action {
+  // 动作ID (类名)
+  id?: string;
+  // 动作名称
+  name?: string;
+  // 动作描述
+  description?: string;
+  // 是否需要循环
+  loop?: boolean;
+  // 循环间隔 (秒)
+  loop_interval?: number;
+  // 参数
+  params?: { [key: string]: any };
+}
+
+// 工作流
+export interface Workflow {
+  // 工作流ID
+  id?: string;
+  // 工作流名称
+  name?: string;
+  // 工作流描述
+  description?: string;
+  // 定时器
+  timer?: string;
+  // 状态
+  state?: string;
+  // 当前执行动作
+  current_action?: string;
+  // 任务执行结果
+  result?: string;
+  // 已执行次数
+  run_count?: number;
+  // 动作列表
+  actions?: Action[];
+  // 创建时间
+  add_time?: string;
+  // 最后执行时间
+  last_time?: string;
+}
diff --git a/src/pages/workflow.vue b/src/pages/workflow.vue
new file mode 100644
index 00000000..db70166f
--- /dev/null
+++ b/src/pages/workflow.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import WorkflowListView from '@/views/workflow/WorkflowListView.vue'
+</script>
+
+<template>
+  <WorkflowListView />
+</template>
diff --git a/src/router/index.ts b/src/router/index.ts
index b1f8860d..57dbfe50 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -68,6 +68,14 @@ const router = createRouter({
             subType: '电视剧',
           },
         },
+        {
+          path: '/workflow',
+          component: () => import('../pages/workflow.vue'),
+          meta: {
+            keepAlive: true,
+            requiresAuth: true,
+          },
+        },
         {
           path: '/calendar',
           component: () => import('../pages/calendar.vue'),
diff --git a/src/router/menu.ts b/src/router/menu.ts
index e92505f0..dc28886c 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -49,6 +49,16 @@ export const SystemNavMenus = [
     admin: false,
     footer: true,
   },
+  
+  {
+    title: '工作流',
+    full_title: '自定义工作流',
+    icon: 'mdi-state-machine',
+    to: '/workflow',
+    header: '订阅',
+    admin: false,
+    footer: false,
+  },
   {
     title: '日历',
     full_title: '订阅日历',
diff --git a/src/views/workflow/WorkflowListView.vue b/src/views/workflow/WorkflowListView.vue
new file mode 100644
index 00000000..92fbedc3
--- /dev/null
+++ b/src/views/workflow/WorkflowListView.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import api from '@/api'
+import { Workflow } from '@/api/types'
+import { useDisplay } from 'vuetify'
+
+// APP
+const display = useDisplay()
+const appMode = inject('pwaMode') && display.mdAndDown.value
+
+// 是否刷新
+const isRefreshed = ref(false)
+
+// 所有工作流
+const workflowList = ref<Workflow[]>([])
+
+const options = ref({ page: 1, itemsPerPage: 25, sortBy: [''], sortDesc: [false] })
+
+// headers
+const headers = [
+  { title: '名称', key: 'name' },
+  { title: '定时', key: 'timer' },
+  { title: '当前任务', key: 'current_action' },
+  { title: '状态', key: 'state' },
+  { title: '进度', key: 'progress' },
+  { title: '创建时间', key: 'add_time' },
+]
+
+// 加载数据
+async function fetchData() {
+  try {
+    workflowList.value = await api.get('workflow/')
+    isRefreshed.value = true
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 计算状态颜色
+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
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <VCard>
+    <VCardItem>
+      <div class="flex">
+        <VCardTitle> 工作流 </VCardTitle>
+        <VSpacer />
+        <VCombobox
+          max-width="300"
+          key="search_navbar"
+          class="text-disabled"
+          density="compact"
+          label="搜索"
+          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="options.itemsPerPage"
+      :page="options.page"
+      :options="options"
+      loading-text="加载中..."
+      class="text-no-wrap"
+      hover
+    >
+      <!-- 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">
+            <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>
+          </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" color="primary" height="8" />
+          </div>
+          <div>{{ resolveProgress }}%</div>
+        </div>
+      </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"
+              style="max-inline-size: 8rem; min-inline-size: 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>
+  <!-- 新增按钮 -->
+  <VFab
+    v-if="isRefreshed"
+    icon="mdi-plus"
+    location="bottom"
+    size="x-large"
+    fixed
+    app
+    appear
+    :class="{ 'mb-12': appMode }"
+  />
+</template>