From 1844a843eb668b4f2e4d2c0a86b1519b643bf9f8 Mon Sep 17 00:00:00 2001
From: akrike <1625167628@qq.com>
Date: Sun, 7 Sep 2025 21:15:47 +0800
Subject: [PATCH] add task ui

---
 resources/src/configs/menus/task.menus.ts |   8 ++
 resources/src/configs/navigation.ts       |   8 +-
 resources/src/router/index.ts             |   4 +-
 resources/src/router/task.routes.ts       |  12 +++
 resources/src/views/process/Process.vue   |  16 ++-
 resources/src/views/task/Task.vue         | 120 ++++++++++++++++++++++
 6 files changed, 162 insertions(+), 6 deletions(-)
 create mode 100644 resources/src/configs/menus/task.menus.ts
 create mode 100644 resources/src/router/task.routes.ts
 create mode 100644 resources/src/views/task/Task.vue

diff --git a/resources/src/configs/menus/task.menus.ts b/resources/src/configs/menus/task.menus.ts
new file mode 100644
index 0000000..2e11016
--- /dev/null
+++ b/resources/src/configs/menus/task.menus.ts
@@ -0,0 +1,8 @@
+export default [
+  {
+    icon: "mdi-application-braces",
+    name: "task-page",
+    key: "menu.task",
+    link: "/task",
+  },
+];
diff --git a/resources/src/configs/navigation.ts b/resources/src/configs/navigation.ts
index bbd3551..2bcc260 100644
--- a/resources/src/configs/navigation.ts
+++ b/resources/src/configs/navigation.ts
@@ -5,8 +5,8 @@ import menuCharts from "./menus/charts.menu";
 import menuUML from "./menus/uml.menu";
 import menuLanding from "./menus/landing.menu";
 import menuData from "./menus/data.menu";
-import menuAi from "./menus/ai.menu";
-import menuProcess from "./menus/process.menus"
+import menuProcess from "./menus/process.menus";
+import menuTask from "./menus/task.menus";
 
 export default {
   menu: [
@@ -26,6 +26,10 @@ export default {
       text: "process",
       items: menuProcess,
     },
+    {
+      text: "task",
+      items: menuTask,
+    },
     {
       text: "Apps",
       items: menuApps,
diff --git a/resources/src/router/index.ts b/resources/src/router/index.ts
index 304b1f4..20f9b05 100644
--- a/resources/src/router/index.ts
+++ b/resources/src/router/index.ts
@@ -10,6 +10,7 @@ import UmlRoutes from "./uml.routes";
 import AppsRoutes from "./apps.routes";
 import DataRoutes from "./data.routes";
 import ProcessRoutes from "./process.routes";
+import TaskRoutes from "./task.routes";
 
 export const routes = [
   {
@@ -41,7 +42,8 @@ export const routes = [
   ...UmlRoutes,
   ...AppsRoutes,
   ...DataRoutes,
-  ...ProcessRoutes
+  ...ProcessRoutes,
+  ...TaskRoutes
 ];
 
 // 动态路由，基于用户权限动态去加载
diff --git a/resources/src/router/task.routes.ts b/resources/src/router/task.routes.ts
new file mode 100644
index 0000000..4c4f104
--- /dev/null
+++ b/resources/src/router/task.routes.ts
@@ -0,0 +1,12 @@
+// users Data Page
+export default [
+  {
+    path: "/task",
+    component: () => import("@/views/task/Task.vue"),
+    meta: {
+      requiresAuth: true,
+      layout: "landing",
+      category: "Data",
+    },
+  },
+];
diff --git a/resources/src/views/process/Process.vue b/resources/src/views/process/Process.vue
index cd585dd..de8d6ab 100644
--- a/resources/src/views/process/Process.vue
+++ b/resources/src/views/process/Process.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="toolbar">
+  <!-- <div class="toolbar">
     <ConfirmButton @confirm="startAll" color="#3CB371">全部启动</ConfirmButton>
     <ConfirmButton @confirm="killAll" color="#CD5555">全部停止</ConfirmButton>
     <v-btn
@@ -9,7 +9,7 @@
       @click="processCreateComponent?.createProcessDialog()"
       >创建<v-icon dark right> mdi-plus-circle </v-icon>
     </v-btn>
-  </div>
+  </div> -->
   <v-container>
     <!-- 顶部工具栏 -->
 
@@ -100,7 +100,6 @@ onMounted(() => {
   gap: 10px;
   margin-bottom: 20px;
   padding: 4px 0;
-  border-bottom: 1px solid #eee; /* 轻量分隔线 */
 }
 
 /* 原来的网格样式 */
@@ -127,4 +126,15 @@ onMounted(() => {
   transform: translateY(-6px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
+
+.fab {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  z-index: 999;
+  border-radius: 50%;
+  width: 80px;
+  height: 80px;
+}
 </style>
diff --git a/resources/src/views/task/Task.vue b/resources/src/views/task/Task.vue
new file mode 100644
index 0000000..008aa25
--- /dev/null
+++ b/resources/src/views/task/Task.vue
@@ -0,0 +1,120 @@
+<template>
+  <v-card class="pa-4">
+    <v-card-title>任务明细（单行）</v-card-title>
+
+    <v-data-table
+      :headers="headers"
+      :items="items"
+      :items-per-page="5"
+      item-key="id"
+      class="elevation-1"
+    >
+      <!-- 自定义列渲染 -->
+      <template #item.nextId="{ item }">
+        <span>{{ item.nextId === null ? "-" : item.nextId }}</span>
+      </template>
+
+      <template #item.enable="{ item }">
+        <v-chip size="small" variant="tonal">{{
+          item.enable ? "启用" : "未启用"
+        }}</v-chip>
+      </template>
+
+      <template #item.apiEnable="{ item }">
+        <v-chip size="small" variant="tonal">{{
+          item.apiEnable ? "可用" : "不可用"
+        }}</v-chip>
+      </template>
+
+      <template #item.running="{ item }">
+        <v-chip size="small" variant="tonal">{{
+          item.running ? "运行中" : "未运行"
+        }}</v-chip>
+      </template>
+
+      <template #item.startTime="{ item }">
+        <span>{{ formatStartTime(item.startTime) }}</span>
+      </template>
+
+      <template #item.key="{ item }">
+        <code>{{ item.key }}</code>
+      </template>
+
+      <!-- 如果需要可以加 actions 列 -->
+      <template #body.append>
+        <!-- 这里可以放底部说明或按钮 -->
+      </template>
+    </v-data-table>
+  </v-card>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+/**
+ * 自定义列头：title -> 显示标题（中文），key -> 对应数据字段名
+ * （Vuetify 3 的 headers 使用 title/key 风格）
+ */
+const headers = [
+  { title: "任务ID", key: "id" },
+  { title: "任务名", key: "processName" },
+  { title: "流程 ID", key: "processId" },
+  { title: "条件", key: "condition" },
+  { title: "下一步 ID", key: "nextId" },
+  { title: "触发进程", key: "targetName" },
+  { title: "触发名称", key: "triggerName" },
+  { title: "操作", key: "operation" },
+  { title: "触发事件", key: "triggerEvent" },
+  { title: "触发目标", key: "triggerTarget" },
+  { title: "操作目标", key: "operationTarget" },
+  { title: "定时任务", key: "cron" },
+  { title: "是否启用", key: "enable" },
+  { title: "API 可用", key: "apiEnable" },
+  { title: "开始时间", key: "startTime" },
+  { title: "状态", key: "running" },
+];
+
+const rawData = {
+  id: 1,
+  processId: 0,
+  condition: 3,
+  nextId: null,
+  operation: 0,
+  triggerEvent: null,
+  triggerTarget: null,
+  operationTarget: 112,
+  cron: "",
+  enable: false,
+  apiEnable: true,
+  key: "bhCSw2QDdu",
+  processName: "",
+  targetName: "push",
+  triggerName: "",
+  startTime: "0001-01-01T00:00:00Z",
+  running: false,
+};
+
+// 单行数组（v-data-table 接受 items 数组）
+const items = ref([rawData]);
+
+/** 格式化开始时间（兼容 null / 空字符串） */
+function formatStartTime(v) {
+  if (!v) return "-";
+  try {
+    const d = new Date(v);
+    if (Number.isNaN(d.getTime())) return v;
+    return d.toLocaleString();
+  } catch (e) {
+    return v;
+  }
+}
+</script>
+
+<style scoped>
+code {
+  font-size: 0.85rem;
+  background: rgba(0, 0, 0, 0.04);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+</style>