From 414f0f28ab77777d64770679461ffaabae7d27f1 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Sun, 12 Nov 2023 21:23:11 +0800
Subject: [PATCH 01/11] Feat: get schedules

---
 frontend/src/config/index.ts                  |   4 +-
 frontend/src/config/router.ts                 |  18 ++
 frontend/src/services/apis/instance.ts        |  16 +-
 frontend/src/types/index.ts                   |  10 +
 frontend/src/widgets/instance/ManagerBtns.vue |  14 +-
 frontend/src/widgets/instance/schedule.vue    | 223 ++++++++++++++++++
 panel/src/app/service/frontend_layout.ts      |  22 ++
 7 files changed, 302 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/widgets/instance/schedule.vue

diff --git a/frontend/src/config/index.ts b/frontend/src/config/index.ts
index b990ceec..56e47161 100644
--- a/frontend/src/config/index.ts
+++ b/frontend/src/config/index.ts
@@ -32,6 +32,7 @@ import UserStatusBlock from "@/widgets/UserStatusBlock.vue";
 import UserInstanceList from "@/widgets/UserInstanceList.vue";
 import ImageManager from "@/widgets/imageManager/index.vue";
 import NewImage from "@/widgets/imageManager/NewImage.vue";
+import Schedule from "@/widgets/instance/schedule.vue";
 
 import { NEW_CARD_TYPE } from "../types/index";
 import { ROLE } from "./router";
@@ -67,7 +68,8 @@ export const LAYOUT_CARD_TYPES: { [key: string]: any } = {
   UserStatusBlock,
   UserInstanceList,
   ImageManager,
-  NewImage
+  NewImage,
+  Schedule
 };
 
 export interface NewCardItem extends LayoutCard {
diff --git a/frontend/src/config/router.ts b/frontend/src/config/router.ts
index bd908fe4..b1005067 100644
--- a/frontend/src/config/router.ts
+++ b/frontend/src/config/router.ts
@@ -103,6 +103,24 @@ let originRouterConfig: RouterConfig[] = [
             ]
           }
         ]
+      },
+      {
+        path: "/instances/schedule",
+        name: t("计划任务"),
+        component: LayoutContainer,
+        meta: {
+          permission: ROLE.USER
+        }
+        // children: [
+        //   {
+        //     path: "/instances/schedule/new",
+        //     name: t("新增计划任务"),
+        //     component: LayoutContainer,
+        //     meta: {
+        //       permission: ROLE.USER
+        //     }
+        //   }
+        // ]
       }
     ]
   },
diff --git a/frontend/src/services/apis/instance.ts b/frontend/src/services/apis/instance.ts
index 8282aa52..92fb1236 100644
--- a/frontend/src/services/apis/instance.ts
+++ b/frontend/src/services/apis/instance.ts
@@ -1,5 +1,5 @@
 import { useDefineApi } from "@/stores/useDefineApi";
-import type { InstanceDetail, NewInstanceForm, QuickStartTemplate } from "@/types";
+import type { InstanceDetail, NewInstanceForm, QuickStartTemplate, Schedule } from "@/types";
 import type { IGlobalInstanceConfig } from "../../../../common/global";
 import type { InstanceMoreDetail } from "@/hooks/useInstance";
 
@@ -343,3 +343,17 @@ export const batchDelete = useDefineApi<
   method: "DELETE",
   url: "/api/instance"
 });
+
+// 获取计划任务
+export const scheduleList = useDefineApi<
+  {
+    params: {
+      remote_uuid: string;
+      uuid: string;
+    };
+  },
+  Schedule[]
+>({
+  method: "GET",
+  url: "/api/protected_schedule"
+});
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 2746ab48..9526c755 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -218,3 +218,13 @@ export interface MountComponent {
   destroyComponent: Function;
   emitResult: Function;
 }
+
+export interface Schedule {
+  instanceUuid: string;
+  name: string;
+  count: number;
+  time: string;
+  action: string;
+  payload: string;
+  type: number;
+}
diff --git a/frontend/src/widgets/instance/ManagerBtns.vue b/frontend/src/widgets/instance/ManagerBtns.vue
index 7cb5a24f..3b86abd6 100644
--- a/frontend/src/widgets/instance/ManagerBtns.vue
+++ b/frontend/src/widgets/instance/ManagerBtns.vue
@@ -3,7 +3,7 @@ import { ref, computed } from "vue";
 import type { LayoutCard } from "@/types";
 import { arrayFilter } from "../../tools/array";
 import { t } from "@/lang/i18n";
-import { ArrowRightOutlined, CloudServerOutlined } from "@ant-design/icons-vue";
+import { ArrowRightOutlined, CloudServerOutlined, FieldTimeOutlined } from "@ant-design/icons-vue";
 import InnerCard from "@/components/InnerCard.vue";
 import { LayoutCardHeight } from "../../config/originLayoutConfig";
 import { useAppRouters } from "@/hooks/useAppRouters";
@@ -80,9 +80,17 @@ const btns = computed(() =>
     },
     {
       title: t("TXT_CODE_b7d026f8"),
-      icon: CloudServerOutlined,
+      icon: FieldTimeOutlined,
       condition: () => !isGlobalTerminal.value,
-      click: () => {}
+      click: () => {
+        toPage({
+          path: "/instances/schedule",
+          query: {
+            instanceId,
+            daemonId
+          }
+        });
+      }
     },
     // 暂时删除
     // {
diff --git a/frontend/src/widgets/instance/schedule.vue b/frontend/src/widgets/instance/schedule.vue
new file mode 100644
index 00000000..5b88845d
--- /dev/null
+++ b/frontend/src/widgets/instance/schedule.vue
@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import { t } from "@/lang/i18n";
+import { message } from "ant-design-vue";
+import { DeleteOutlined, FieldTimeOutlined } from "@ant-design/icons-vue";
+import { throttle } from "lodash";
+import CardPanel from "@/components/CardPanel.vue";
+import BetweenMenus from "@/components/BetweenMenus.vue";
+import { useLayoutCardTools } from "@/hooks/useCardTools";
+import { useScreen } from "@/hooks/useScreen";
+import { useAppRouters } from "@/hooks/useAppRouters";
+import { scheduleList } from "@/services/apis/instance";
+import type { LayoutCard, Schedule } from "@/types/index";
+
+const props = defineProps<{
+  card: LayoutCard;
+}>();
+
+const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
+const instanceId = getMetaOrRouteValue("instanceId");
+const daemonId = getMetaOrRouteValue("daemonId");
+const { toPage } = useAppRouters();
+const screen = useScreen();
+
+const { state, execute, isLoading } = scheduleList();
+const getScheduleList = async () => {
+  try {
+    await execute({
+      params: {
+        remote_uuid: daemonId ?? "",
+        uuid: instanceId ?? ""
+      }
+    });
+  } catch (err: any) {
+    console.error(err);
+    message.error(err.message);
+  }
+};
+
+const action = {
+  command: t("发送命令"),
+  stop: t("停止实例"),
+  start: t("开启实例"),
+  restart: t("重启实例"),
+  kill: t("终止实例")
+};
+
+const type = {
+  1: t("间隔时间性任务"),
+  2: t("周期时间性任务"),
+  3: t("指定时间性任务")
+};
+
+const rendTime = (text: string, e: Schedule) => {
+  switch (e.type) {
+    case 1: {
+      const time = Number(text);
+      let s = time;
+      let m = 0;
+      let h = 0;
+      while (s >= 60) {
+        s -= 60;
+        m += 1;
+      }
+      while (m >= 60) {
+        m -= 60;
+        h += 1;
+      }
+      return `${t("每隔")} ${h} ${t("小时")} ${m} ${t("分钟")} ${s} ${t("秒")}`;
+    }
+    case 2: {
+      const time = text;
+      const timeArr = time.split(" ");
+      const h = timeArr[2];
+      const m = timeArr[1];
+      const s = timeArr[0];
+      const w = timeArr[5];
+      return `${t("每星期")} ${w} ${t("的")} ${h}:${m}:${s}`;
+    }
+    case 3: {
+      const time = text;
+      const timeArr = time.split(" ");
+      const h = timeArr[2];
+      const m = timeArr[1];
+      const s = timeArr[0];
+      const dd = timeArr[3];
+      const mm = timeArr[4];
+      return `${mm} ${t("每隔")} ${dd} ${t("每隔")} ${h}:${m}:${s}`;
+    }
+    default:
+      return "Unknown Time";
+  }
+};
+
+const columns = [
+  {
+    align: "center",
+    title: t("任务名"),
+    dataIndex: "name",
+    key: "name"
+  },
+  {
+    align: "center",
+    title: t("有效载荷"),
+    dataIndex: "payload",
+    key: "payload"
+  },
+  {
+    align: "center",
+    title: t("剩余次数"),
+    dataIndex: "count",
+    key: "count",
+    minWidth: "80px",
+    customRender: (e: { text: number }) => {
+      return e.text > 0 ? e.text : t("无限");
+    }
+  },
+  {
+    align: "center",
+    title: t("动作"),
+    dataIndex: "action",
+    key: "action",
+    minWidth: "180px",
+    customRender: (e: { text: "command" | "stop" | "start" | "restart" | "kill" }) => {
+      return action[e.text];
+    }
+  },
+  {
+    align: "center",
+    title: t("类型"),
+    dataIndex: "type",
+    key: "type",
+    minWidth: "180px",
+    customRender: (e: { text: 1 | 2 | 3 }) => {
+      return type[e.text];
+    }
+  },
+  {
+    align: "center",
+    title: t("触发时间"),
+    dataIndex: "time",
+    key: "time",
+    minWidth: "240px",
+    customRender: (e: { text: string; record: Schedule }) => rendTime(e.text, e.record)
+  },
+  {
+    align: "center",
+    title: t("TXT_CODE_fe731dfc"),
+    key: "actions",
+    minWidth: "180px"
+  }
+];
+
+const refresh = throttle(() => {
+  getScheduleList();
+}, 600);
+
+onMounted(async () => {
+  getScheduleList();
+});
+</script>
+
+<template>
+  <div style="height: 100%" class="container">
+    <a-row :gutter="[24, 24]" style="height: 100%">
+      <a-col :span="24">
+        <BetweenMenus>
+          <template #left>
+            <a-typography-title class="mb-0" :level="4">
+              <FieldTimeOutlined />
+              {{ card.title }}
+            </a-typography-title>
+          </template>
+          <template #right>
+            <a-button class="mr-10">
+              {{ t("返回控制台") }}
+            </a-button>
+            <a-button class="mr-10" @click="refresh">
+              {{ t("刷新") }}
+            </a-button>
+            <a-button type="primary">
+              {{ t("新增计划任务") }}
+            </a-button>
+          </template>
+        </BetweenMenus>
+      </a-col>
+      <a-col :span="24">
+        <CardPanel style="height: 100%">
+          <template #body>
+            <a-spin :spinning="isLoading">
+              <a-table :data-source="state" :columns="columns" :scroll="{ x: 'max-content' }">
+                <template #bodyCell="{ column, record }">
+                  <template v-if="column.key === 'actions'">
+                    <a-button size="" @click="console.log(record)">
+                      {{ t("删除") }}
+                      <DeleteOutlined />
+                    </a-button>
+                  </template>
+                </template>
+              </a-table>
+            </a-spin>
+          </template>
+        </CardPanel>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.search-input {
+  transition: all 0.4s;
+  text-align: center;
+  width: 50%;
+
+  &:hover {
+    width: 100%;
+  }
+
+  @media (max-width: 992px) {
+    width: 100% !important;
+  }
+}
+</style>
diff --git a/panel/src/app/service/frontend_layout.ts b/panel/src/app/service/frontend_layout.ts
index 68a87486..4f4f78e9 100644
--- a/panel/src/app/service/frontend_layout.ts
+++ b/panel/src/app/service/frontend_layout.ts
@@ -254,6 +254,28 @@ function getDefaultFrontendLayoutConfig(): IPageLayoutConfig[] {
         }
       ]
     },
+    {
+      page: "/instances/schedule",
+      items: [
+        {
+          id: getRandomId(),
+          meta: {},
+          type: "Schedule",
+          title: t("计划任务"),
+          width: 12,
+          height: LayoutCardHeight.AUTO,
+          disableDelete: true
+        },
+        {
+          id: getRandomId(),
+          meta: {},
+          type: "EmptyCard",
+          title: "",
+          width: 12,
+          height: LayoutCardHeight.MINI
+        }
+      ]
+    },
     {
       page: "/users",
       items: [

From 649d0147d054f3003b22e88907ba458f5c777cbb Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Sun, 12 Nov 2023 21:29:26 +0800
Subject: [PATCH 02/11] Fix: Capitalize

---
 frontend/src/config/index.ts                                 | 2 +-
 frontend/src/widgets/instance/{schedule.vue => Schedule.vue} | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename frontend/src/widgets/instance/{schedule.vue => Schedule.vue} (98%)

diff --git a/frontend/src/config/index.ts b/frontend/src/config/index.ts
index 56e47161..a2ea3c9f 100644
--- a/frontend/src/config/index.ts
+++ b/frontend/src/config/index.ts
@@ -32,7 +32,7 @@ import UserStatusBlock from "@/widgets/UserStatusBlock.vue";
 import UserInstanceList from "@/widgets/UserInstanceList.vue";
 import ImageManager from "@/widgets/imageManager/index.vue";
 import NewImage from "@/widgets/imageManager/NewImage.vue";
-import Schedule from "@/widgets/instance/schedule.vue";
+import Schedule from "@/widgets/instance/Schedule.vue";
 
 import { NEW_CARD_TYPE } from "../types/index";
 import { ROLE } from "./router";
diff --git a/frontend/src/widgets/instance/schedule.vue b/frontend/src/widgets/instance/Schedule.vue
similarity index 98%
rename from frontend/src/widgets/instance/schedule.vue
rename to frontend/src/widgets/instance/Schedule.vue
index 5b88845d..282e051c 100644
--- a/frontend/src/widgets/instance/schedule.vue
+++ b/frontend/src/widgets/instance/Schedule.vue
@@ -51,8 +51,8 @@ const type = {
   3: t("指定时间性任务")
 };
 
-const rendTime = (text: string, e: Schedule) => {
-  switch (e.type) {
+const rendTime = (text: string, schedule: Schedule) => {
+  switch (schedule.type) {
     case 1: {
       const time = Number(text);
       let s = time;

From f42ba4a819849617e4812cabeb75fe496a47c7b4 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Sun, 12 Nov 2023 21:51:46 +0800
Subject: [PATCH 03/11] Feat: del schedule

---
 frontend/src/services/apis/instance.ts     | 15 ++++++++++
 frontend/src/widgets/instance/Schedule.vue | 35 ++++++++++++++++++----
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/frontend/src/services/apis/instance.ts b/frontend/src/services/apis/instance.ts
index 92fb1236..089bbf21 100644
--- a/frontend/src/services/apis/instance.ts
+++ b/frontend/src/services/apis/instance.ts
@@ -357,3 +357,18 @@ export const scheduleList = useDefineApi<
   method: "GET",
   url: "/api/protected_schedule"
 });
+
+// 删除计划任务
+export const scheduleDelete = useDefineApi<
+  {
+    params: {
+      remote_uuid: string;
+      uuid: string;
+      task_name: string;
+    };
+  },
+  boolean
+>({
+  method: "DELETE",
+  url: "/api/protected_schedule"
+});
diff --git a/frontend/src/widgets/instance/Schedule.vue b/frontend/src/widgets/instance/Schedule.vue
index 282e051c..effeb9d7 100644
--- a/frontend/src/widgets/instance/Schedule.vue
+++ b/frontend/src/widgets/instance/Schedule.vue
@@ -9,7 +9,7 @@ import BetweenMenus from "@/components/BetweenMenus.vue";
 import { useLayoutCardTools } from "@/hooks/useCardTools";
 import { useScreen } from "@/hooks/useScreen";
 import { useAppRouters } from "@/hooks/useAppRouters";
-import { scheduleList } from "@/services/apis/instance";
+import { scheduleList, scheduleDelete } from "@/services/apis/instance";
 import type { LayoutCard, Schedule } from "@/types/index";
 
 const props = defineProps<{
@@ -37,6 +37,26 @@ const getScheduleList = async () => {
   }
 };
 
+const deleteSchedule = async (name: string) => {
+  const { execute, state } = scheduleDelete();
+  try {
+    await execute({
+      params: {
+        remote_uuid: daemonId ?? "",
+        uuid: instanceId ?? "",
+        task_name: name
+      }
+    });
+    if (state.value) {
+      message.success(t("删除成功"));
+      refresh();
+    }
+  } catch (err: any) {
+    console.error(err);
+    message.error(err.message);
+  }
+};
+
 const action = {
   command: t("发送命令"),
   stop: t("停止实例"),
@@ -191,10 +211,15 @@ onMounted(async () => {
               <a-table :data-source="state" :columns="columns" :scroll="{ x: 'max-content' }">
                 <template #bodyCell="{ column, record }">
                   <template v-if="column.key === 'actions'">
-                    <a-button size="" @click="console.log(record)">
-                      {{ t("删除") }}
-                      <DeleteOutlined />
-                    </a-button>
+                    <a-popconfirm
+                      :title="t('你确定要删除这条计划任务吗?')"
+                      @confirm="deleteSchedule(record.name)"
+                    >
+                      <a-button size="">
+                        {{ t("删除") }}
+                        <DeleteOutlined />
+                      </a-button>
+                    </a-popconfirm>
                   </template>
                 </template>
               </a-table>

From d250c298bb27b7bbeb1ef187a1bd9b7512298263 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Mon, 13 Nov 2023 14:01:48 +0800
Subject: [PATCH 04/11] Feat: create schedule

---
 frontend/components.d.ts                      |   1 +
 frontend/src/services/apis/instance.ts        |  23 +-
 frontend/src/types/const.ts                   |  14 +
 frontend/src/types/index.ts                   |   8 +
 frontend/src/widgets/instance/Schedule.vue    |  46 ++--
 .../widgets/instance/dialogs/NewSchedule.vue  | 252 ++++++++++++++++++
 6 files changed, 323 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/widgets/instance/dialogs/NewSchedule.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 77c21ffc..66ed7237 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -51,6 +51,7 @@ declare module 'vue' {
     ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATag: typeof import('ant-design-vue/es')['Tag']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
+    ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     ATypography: typeof import('ant-design-vue/es')['Typography']
     ATypographyParagraph: typeof import('ant-design-vue/es')['TypographyParagraph']
diff --git a/frontend/src/services/apis/instance.ts b/frontend/src/services/apis/instance.ts
index 089bbf21..57734a9f 100644
--- a/frontend/src/services/apis/instance.ts
+++ b/frontend/src/services/apis/instance.ts
@@ -1,5 +1,11 @@
 import { useDefineApi } from "@/stores/useDefineApi";
-import type { InstanceDetail, NewInstanceForm, QuickStartTemplate, Schedule } from "@/types";
+import type {
+  InstanceDetail,
+  NewInstanceForm,
+  QuickStartTemplate,
+  Schedule,
+  NewScheduleTask
+} from "@/types";
 import type { IGlobalInstanceConfig } from "../../../../common/global";
 import type { InstanceMoreDetail } from "@/hooks/useInstance";
 
@@ -372,3 +378,18 @@ export const scheduleDelete = useDefineApi<
   method: "DELETE",
   url: "/api/protected_schedule"
 });
+
+// 创建计划任务
+export const scheduleCreate = useDefineApi<
+  {
+    params: {
+      remote_uuid: string;
+      uuid: string;
+    };
+    data: NewScheduleTask;
+  },
+  boolean
+>({
+  url: "/api/protected_schedule",
+  method: "POST"
+});
diff --git a/frontend/src/types/const.ts b/frontend/src/types/const.ts
index 0c83ff5a..e7a770e1 100644
--- a/frontend/src/types/const.ts
+++ b/frontend/src/types/const.ts
@@ -80,3 +80,17 @@ ENV LC_ALL=zh_CN.UTF-8
 ENV TZ=Asia/Shanghai
 WORKDIR /workspace
 `;
+
+export const ScheduleAction = {
+  command: t("发送命令"),
+  stop: t("停止实例"),
+  start: t("开启实例"),
+  restart: t("重启实例"),
+  kill: t("终止实例")
+};
+
+export const ScheduleType = {
+  1: t("间隔时间性任务"),
+  2: t("周期时间性任务"),
+  3: t("指定时间性任务")
+};
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 9526c755..460d0c66 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -228,3 +228,11 @@ export interface Schedule {
   payload: string;
   type: number;
 }
+
+export interface NewScheduleTask {
+  name: String;
+  count: String;
+  time: String;
+  action: String;
+  type: String;
+}
diff --git a/frontend/src/widgets/instance/Schedule.vue b/frontend/src/widgets/instance/Schedule.vue
index effeb9d7..7f4211e7 100644
--- a/frontend/src/widgets/instance/Schedule.vue
+++ b/frontend/src/widgets/instance/Schedule.vue
@@ -11,6 +11,8 @@ import { useScreen } from "@/hooks/useScreen";
 import { useAppRouters } from "@/hooks/useAppRouters";
 import { scheduleList, scheduleDelete } from "@/services/apis/instance";
 import type { LayoutCard, Schedule } from "@/types/index";
+import { ScheduleAction, ScheduleType } from "@/types/const";
+import NewSchedule from "@/widgets/instance/dialogs/NewSchedule.vue";
 
 const props = defineProps<{
   card: LayoutCard;
@@ -21,6 +23,7 @@ const instanceId = getMetaOrRouteValue("instanceId");
 const daemonId = getMetaOrRouteValue("daemonId");
 const { toPage } = useAppRouters();
 const screen = useScreen();
+const newScheduleDialog = ref<InstanceType<typeof NewSchedule>>();
 
 const { state, execute, isLoading } = scheduleList();
 const getScheduleList = async () => {
@@ -57,20 +60,6 @@ const deleteSchedule = async (name: string) => {
   }
 };
 
-const action = {
-  command: t("发送命令"),
-  stop: t("停止实例"),
-  start: t("开启实例"),
-  restart: t("重启实例"),
-  kill: t("终止实例")
-};
-
-const type = {
-  1: t("间隔时间性任务"),
-  2: t("周期时间性任务"),
-  3: t("指定时间性任务")
-};
-
 const rendTime = (text: string, schedule: Schedule) => {
   switch (schedule.type) {
     case 1: {
@@ -105,7 +94,7 @@ const rendTime = (text: string, schedule: Schedule) => {
       const s = timeArr[0];
       const dd = timeArr[3];
       const mm = timeArr[4];
-      return `${mm} ${t("每隔")} ${dd} ${t("每隔")} ${h}:${m}:${s}`;
+      return `${mm} ${t("月")} ${dd} ${t("日")} ${h}:${m}:${s}`;
     }
     default:
       return "Unknown Time";
@@ -142,7 +131,7 @@ const columns = [
     key: "action",
     minWidth: "180px",
     customRender: (e: { text: "command" | "stop" | "start" | "restart" | "kill" }) => {
-      return action[e.text];
+      return ScheduleAction[e.text];
     }
   },
   {
@@ -152,7 +141,7 @@ const columns = [
     key: "type",
     minWidth: "180px",
     customRender: (e: { text: 1 | 2 | 3 }) => {
-      return type[e.text];
+      return ScheduleType[e.text];
     }
   },
   {
@@ -173,7 +162,17 @@ const columns = [
 
 const refresh = throttle(() => {
   getScheduleList();
-}, 600);
+}, 100);
+
+const toConsole = () => {
+  toPage({
+    path: "/instances/terminal",
+    query: {
+      daemonId,
+      instanceId
+    }
+  });
+};
 
 onMounted(async () => {
   getScheduleList();
@@ -192,13 +191,13 @@ onMounted(async () => {
             </a-typography-title>
           </template>
           <template #right>
-            <a-button class="mr-10">
+            <a-button class="mr-10" @click="toConsole()">
               {{ t("返回控制台") }}
             </a-button>
             <a-button class="mr-10" @click="refresh">
               {{ t("刷新") }}
             </a-button>
-            <a-button type="primary">
+            <a-button type="primary" @click="newScheduleDialog?.openDialog()">
               {{ t("新增计划任务") }}
             </a-button>
           </template>
@@ -229,6 +228,13 @@ onMounted(async () => {
       </a-col>
     </a-row>
   </div>
+
+  <NewSchedule
+    ref="newScheduleDialog"
+    :daemon-id="daemonId ?? ''"
+    :instance-id="instanceId ?? ''"
+    @get-schedule-list="getScheduleList()"
+  />
 </template>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/widgets/instance/dialogs/NewSchedule.vue b/frontend/src/widgets/instance/dialogs/NewSchedule.vue
new file mode 100644
index 00000000..73be2001
--- /dev/null
+++ b/frontend/src/widgets/instance/dialogs/NewSchedule.vue
@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { t } from "@/lang/i18n";
+import { message, notification } from "ant-design-vue";
+import { ScheduleAction, ScheduleType } from "@/types/const";
+import type { NewScheduleTask } from "@/types";
+import { scheduleCreate } from "@/services/apis/instance";
+import { useScreen } from "@/hooks/useScreen";
+import type { Dayjs } from "dayjs";
+import _ from "lodash";
+
+const props = defineProps<{
+  daemonId: string;
+  instanceId: string;
+}>();
+const emit = defineEmits(["getScheduleList"]);
+const open = ref(false);
+const openDialog = () => {
+  open.value = true;
+};
+const { isPhone } = useScreen();
+
+const weeks = [
+  { label: t("周一"), value: 1 },
+  { label: t("周二"), value: 2 },
+  { label: t("周三"), value: 3 },
+  { label: t("周四"), value: 4 },
+  { label: t("周五"), value: 5 },
+  { label: t("周六"), value: 6 },
+  { label: t("周日"), value: 7 }
+];
+
+enum TYPE {
+  INTERVAL = "1",
+  CYCLE = "2",
+  SPECIFY = "3"
+}
+
+interface NewTask extends NewScheduleTask {
+  payload: string;
+  weekend: string[];
+  cycle: string[];
+  objTime: string;
+}
+
+const newTaskOrigin = reactive<NewTask>({
+  name: "",
+  action: "command",
+  count: "",
+  type: TYPE.INTERVAL,
+  time: "",
+  payload: "",
+  weekend: [],
+  cycle: ["0", "0", "0"],
+  objTime: ""
+});
+
+let newTask = reactive(_.cloneDeep(newTaskOrigin));
+
+const createTaskTypeInterval = async () => {
+  const arr = newTask.cycle;
+  let ps = Number(arr[0]);
+  let pm = Number(arr[1]);
+  let ph = Number(arr[2]);
+  const rs = ps + pm * 60 + ph * 60 * 60;
+  newTask.time = rs.toString();
+  await createRequest();
+};
+
+const createTaskTypeCycle = async () => {
+  const weekend = newTask.weekend;
+  if (newTask.objTime === "") throw new Error(t("请选择时间"));
+  if (weekend.length === 0) throw new Error(t("请选择星期"));
+  const time = new Date(newTask.objTime);
+  const h = time.getHours();
+  const m = time.getMinutes();
+  const s = time.getSeconds();
+  newTask.time = `${s} ${m} ${h} * * ${weekend.join(",")}`;
+  await createRequest();
+};
+
+const createTaskTypeSpecify = async () => {
+  if (newTask.objTime === "") throw new Error(t("请选择时间"));
+  const time = newTask.objTime as unknown as Dayjs;
+  const mm = time.month() + 1;
+  const dd = time.date();
+  const h = time.hour();
+  const m = time.minute();
+  const s = time.second();
+  newTask.time = `${s} ${m} ${h} ${dd} ${mm} *`;
+  await createRequest();
+};
+
+const { state, isLoading, execute } = scheduleCreate();
+const createRequest = async () => {
+  try {
+    if (!newTask.count) newTask.count = "-1";
+    await execute({
+      params: {
+        remote_uuid: props.daemonId,
+        uuid: props.instanceId
+      },
+      data: newTask
+    });
+    if (state.value) {
+      emit("getScheduleList");
+      notification.success({
+        message: t("创建成功")
+      });
+      newTask = reactive(_.cloneDeep(newTaskOrigin));
+      open.value = false;
+    }
+  } catch (err: any) {
+    console.error(err);
+    message.error(err.message);
+  }
+};
+
+const submit = async () => {
+  try {
+    if (newTask.type === TYPE.INTERVAL) await createTaskTypeInterval();
+    if (newTask.type === TYPE.CYCLE) await createTaskTypeCycle();
+    if (newTask.type === TYPE.SPECIFY) await createTaskTypeSpecify();
+  } catch (err: any) {
+    return message.error(err.message);
+  }
+};
+
+defineExpose({
+  openDialog
+});
+</script>
+
+<template>
+  <a-modal
+    v-model:open="open"
+    centered
+    :mask-closable="false"
+    :title="t('新增计划任务')"
+    :confirm-loading="isLoading"
+    :destroy-on-close="true"
+    :ok-text="t('保存')"
+    @ok="submit"
+  >
+    <a-form-item>
+      <a-typography-title :level="5">{{ t("计划任务名字") }}</a-typography-title>
+      <a-typography-paragraph>
+        <a-typography-text type="secondary">
+          {{ t("必填，且必须唯一") }}
+        </a-typography-text>
+      </a-typography-paragraph>
+      <a-input v-model:value="newTask.name" />
+    </a-form-item>
+
+    <a-form-item>
+      <a-typography-title :level="5">{{ t("任务动作 / 类型") }}</a-typography-title>
+      <a-row :gutter="20">
+        <a-col :xs="24" :md="12" :offset="0" :class="{ 'mb-10': isPhone }">
+          <a-select
+            v-model:value="newTask.action"
+            :placeholder="t('请选择')"
+            :dropdown-match-select-width="false"
+          >
+            <a-select-option v-for="(action, i) in ScheduleAction" :key="i" :value="i">
+              {{ action }}
+            </a-select-option>
+          </a-select>
+        </a-col>
+        <a-col :xs="24" :md="12" :offset="0">
+          <a-select
+            v-model:value="newTask.type"
+            :placeholder="t('请选择')"
+            :dropdown-match-select-width="false"
+          >
+            <a-select-option v-for="(type, i) in ScheduleType" :key="i" :value="i">
+              {{ type }}
+            </a-select-option>
+          </a-select>
+        </a-col>
+      </a-row>
+    </a-form-item>
+
+    <a-form-item v-if="newTask.type === TYPE.INTERVAL">
+      <a-typography-paragraph>
+        <a-typography-text>
+          {{ t("每隔一定时间将执行一次，具体间隔可以仔细设置") }}
+        </a-typography-text>
+      </a-typography-paragraph>
+      <a-row :gutter="20">
+        <a-col :xs="24" :md="6" :offset="0" :class="{ 'mb-10': isPhone }">
+          <a-input
+            v-model:value="newTask.cycle[2]"
+            :placeholder="t('不可为空，请写 0 代表每隔 0 时')"
+            :addon-after="t('时')"
+          />
+        </a-col>
+        <a-col :xs="24" :md="6" :offset="0" :class="{ 'mb-10': isPhone }">
+          <a-input
+            v-model:value="newTask.cycle[1]"
+            :placeholder="t('不可为空，请写 0 代表每隔 0 时')"
+            :addon-after="t('分')"
+          />
+        </a-col>
+        <a-col :xs="24" :md="6" :offset="0" :class="{ 'mb-10': isPhone }">
+          <a-input
+            v-model:value="newTask.cycle[0]"
+            :placeholder="t('不可为空，请写 0 代表每隔 0 时')"
+            :addon-after="t('秒')"
+          />
+        </a-col>
+        <a-col :xs="24" :md="6" :offset="0">
+          <a-input v-model:value="newTask.count" :placeholder="t('执行次数，留空无限')" />
+        </a-col>
+      </a-row>
+    </a-form-item>
+
+    <div v-if="newTask.type === TYPE.CYCLE">
+      <a-form-item>
+        <a-typography-title :level="5">{{ t("触发时间") }}</a-typography-title>
+        <a-time-picker
+          v-model:value="newTask.objTime"
+          size="large"
+          :placeholder="$t('具体时间点')"
+          class="w-100"
+        />
+      </a-form-item>
+      <a-form-item>
+        <a-checkbox-group v-model:value="newTask.weekend" :options="weeks" />
+      </a-form-item>
+
+      <a-form-item>
+        <a-typography-title :level="5">{{ t("执行次数") }}</a-typography-title>
+        <a-input v-model:value="newTask.count" :placeholder="t('留空无限')" />
+      </a-form-item>
+    </div>
+
+    <a-form-item v-if="newTask.type === TYPE.SPECIFY">
+      <a-typography-title :level="5">{{ t("请选择日期和时间") }}</a-typography-title>
+      <a-date-picker v-model:value="newTask.objTime" show-time size="large" class="w-100" />
+    </a-form-item>
+
+    <a-form-item>
+      <a-typography-title :level="5">{{ t("任务有效负载") }}</a-typography-title>
+      <a-typography-paragraph>
+        <a-typography-text type="secondary">
+          {{ t("比如命令，文件名或其他参数等") }}
+        </a-typography-text>
+      </a-typography-paragraph>
+      <a-input v-model:value="newTask.payload" />
+    </a-form-item>
+  </a-modal>
+</template>

From ddb20ce11d433a638f2f857877eff1e9c3722916 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Mon, 13 Nov 2023 15:01:34 +0800
Subject: [PATCH 05/11] Feat: restart instance

---
 frontend/src/services/apis/instance.ts     | 15 +++++++++++++++
 frontend/src/widgets/instance/Terminal.vue |  9 +++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/frontend/src/services/apis/instance.ts b/frontend/src/services/apis/instance.ts
index 57734a9f..54949393 100644
--- a/frontend/src/services/apis/instance.ts
+++ b/frontend/src/services/apis/instance.ts
@@ -73,6 +73,21 @@ export const stopInstance = useDefineApi<
   method: "GET"
 });
 
+export const restartInstance = useDefineApi<
+  {
+    params: {
+      uuid: string;
+      remote_uuid: string;
+    };
+  },
+  {
+    instanceUuid: string;
+  }
+>({
+  url: "/api/protected_instance/restart",
+  method: "GET"
+});
+
 // 更新实例设置（普通用户）
 export const updateInstanceConfig = useDefineApi<
   {
diff --git a/frontend/src/widgets/instance/Terminal.vue b/frontend/src/widgets/instance/Terminal.vue
index aa281a49..ee0bb184 100644
--- a/frontend/src/widgets/instance/Terminal.vue
+++ b/frontend/src/widgets/instance/Terminal.vue
@@ -18,7 +18,7 @@ import { onMounted, computed, ref } from "vue";
 import { useLayoutCardTools } from "@/hooks/useCardTools";
 import { getRandomId } from "../../tools/randId";
 import IconBtn from "@/components/IconBtn.vue";
-import { openInstance, stopInstance } from "@/services/apis/instance";
+import { openInstance, stopInstance, restartInstance } from "@/services/apis/instance";
 import { CloseOutlined } from "@ant-design/icons-vue";
 import { GLOBAL_INSTANCE_NAME } from "../../config/const";
 import { INSTANCE_STATUS_TEXT } from "../../hooks/useInstance";
@@ -95,7 +95,12 @@ const instanceOperations = arrayFilter([
     title: t("TXT_CODE_47dcfa5"),
     icon: ReconciliationOutlined,
     click: () => {
-      console.log(3);
+      restartInstance().execute({
+        params: {
+          uuid: instanceId || "",
+          remote_uuid: daemonId || ""
+        }
+      });
     }
   },
   {

From 825de481434e6641e7c623c6c5d8bfb677295b54 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Mon, 13 Nov 2023 15:03:18 +0800
Subject: [PATCH 06/11] Feat: kill instance

---
 frontend/src/services/apis/instance.ts     | 15 +++++++++++++++
 frontend/src/widgets/instance/Terminal.vue | 14 ++++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/frontend/src/services/apis/instance.ts b/frontend/src/services/apis/instance.ts
index 54949393..c2a5a1f8 100644
--- a/frontend/src/services/apis/instance.ts
+++ b/frontend/src/services/apis/instance.ts
@@ -88,6 +88,21 @@ export const restartInstance = useDefineApi<
   method: "GET"
 });
 
+export const killInstance = useDefineApi<
+  {
+    params: {
+      uuid: string;
+      remote_uuid: string;
+    };
+  },
+  {
+    instanceUuid: string;
+  }
+>({
+  url: "/api/protected_instance/kill",
+  method: "GET"
+});
+
 // 更新实例设置（普通用户）
 export const updateInstanceConfig = useDefineApi<
   {
diff --git a/frontend/src/widgets/instance/Terminal.vue b/frontend/src/widgets/instance/Terminal.vue
index ee0bb184..5c1a7e34 100644
--- a/frontend/src/widgets/instance/Terminal.vue
+++ b/frontend/src/widgets/instance/Terminal.vue
@@ -18,7 +18,12 @@ import { onMounted, computed, ref } from "vue";
 import { useLayoutCardTools } from "@/hooks/useCardTools";
 import { getRandomId } from "../../tools/randId";
 import IconBtn from "@/components/IconBtn.vue";
-import { openInstance, stopInstance, restartInstance } from "@/services/apis/instance";
+import {
+  openInstance,
+  stopInstance,
+  restartInstance,
+  killInstance
+} from "@/services/apis/instance";
 import { CloseOutlined } from "@ant-design/icons-vue";
 import { GLOBAL_INSTANCE_NAME } from "../../config/const";
 import { INSTANCE_STATUS_TEXT } from "../../hooks/useInstance";
@@ -107,7 +112,12 @@ const instanceOperations = arrayFilter([
     title: t("TXT_CODE_7b67813a"),
     icon: CloseOutlined,
     click: () => {
-      console.log(3);
+      killInstance().execute({
+        params: {
+          uuid: instanceId || "",
+          remote_uuid: daemonId || ""
+        }
+      });
     }
   },
   {

From f2fd7f414693df2cd03c23257ec94a2af094b09f Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Mon, 13 Nov 2023 15:19:47 +0800
Subject: [PATCH 07/11] Feat: update Instance

---
 frontend/src/services/apis/instance.ts     | 17 +++++++++++++++++
 frontend/src/widgets/instance/Terminal.vue | 14 ++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/frontend/src/services/apis/instance.ts b/frontend/src/services/apis/instance.ts
index c2a5a1f8..648d50ba 100644
--- a/frontend/src/services/apis/instance.ts
+++ b/frontend/src/services/apis/instance.ts
@@ -103,6 +103,23 @@ export const killInstance = useDefineApi<
   method: "GET"
 });
 
+export const updateInstance = useDefineApi<
+  {
+    params: {
+      uuid: string;
+      remote_uuid: string;
+      task_name: string;
+    };
+    data: {
+      time: number;
+    };
+  },
+  boolean
+>({
+  url: "/api/protected_instance/asynchronous",
+  method: "POST"
+});
+
 // 更新实例设置（普通用户）
 export const updateInstanceConfig = useDefineApi<
   {
diff --git a/frontend/src/widgets/instance/Terminal.vue b/frontend/src/widgets/instance/Terminal.vue
index 5c1a7e34..98a6e693 100644
--- a/frontend/src/widgets/instance/Terminal.vue
+++ b/frontend/src/widgets/instance/Terminal.vue
@@ -22,7 +22,8 @@ import {
   openInstance,
   stopInstance,
   restartInstance,
-  killInstance
+  killInstance,
+  updateInstance
 } from "@/services/apis/instance";
 import { CloseOutlined } from "@ant-design/icons-vue";
 import { GLOBAL_INSTANCE_NAME } from "../../config/const";
@@ -124,7 +125,16 @@ const instanceOperations = arrayFilter([
     title: t("TXT_CODE_40ca4f2"),
     icon: CloudDownloadOutlined,
     click: () => {
-      console.log(4);
+      updateInstance().execute({
+        params: {
+          uuid: instanceId || "",
+          remote_uuid: daemonId || "",
+          task_name: "update"
+        },
+        data: {
+          time: new Date().getTime()
+        }
+      });
     }
   }
 ]);

From 7b15d519fc8536a3f010f04109ebd4666f83bb89 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Mon, 13 Nov 2023 15:45:47 +0800
Subject: [PATCH 08/11] Optimize: instance operation menu

---
 frontend/src/widgets/instance/Terminal.vue | 95 ++++++++++++----------
 1 file changed, 51 insertions(+), 44 deletions(-)

diff --git a/frontend/src/widgets/instance/Terminal.vue b/frontend/src/widgets/instance/Terminal.vue
index 98a6e693..a9a19152 100644
--- a/frontend/src/widgets/instance/Terminal.vue
+++ b/frontend/src/widgets/instance/Terminal.vue
@@ -76,7 +76,8 @@ const quickOperations = computed(() =>
           }
         });
       },
-      props: {}
+      props: {},
+      condition: () => isStopped.value
     },
     {
       title: t("TXT_CODE_b1dedda3"),
@@ -91,53 +92,59 @@ const quickOperations = computed(() =>
       },
       props: {
         danger: true
-      }
+      },
+      condition: () => isRunning.value
     }
   ])
 );
 
-const instanceOperations = arrayFilter([
-  {
-    title: t("TXT_CODE_47dcfa5"),
-    icon: ReconciliationOutlined,
-    click: () => {
-      restartInstance().execute({
-        params: {
-          uuid: instanceId || "",
-          remote_uuid: daemonId || ""
-        }
-      });
+const instanceOperations = computed(() =>
+  arrayFilter([
+    {
+      title: t("TXT_CODE_47dcfa5"),
+      icon: ReconciliationOutlined,
+      click: () => {
+        restartInstance().execute({
+          params: {
+            uuid: instanceId || "",
+            remote_uuid: daemonId || ""
+          }
+        });
+      },
+      condition: () => isRunning.value
+    },
+    {
+      title: t("TXT_CODE_7b67813a"),
+      icon: CloseOutlined,
+      click: () => {
+        killInstance().execute({
+          params: {
+            uuid: instanceId || "",
+            remote_uuid: daemonId || ""
+          }
+        });
+      },
+      condition: () => isRunning.value
+    },
+    {
+      title: t("TXT_CODE_40ca4f2"),
+      icon: CloudDownloadOutlined,
+      click: () => {
+        updateInstance().execute({
+          params: {
+            uuid: instanceId || "",
+            remote_uuid: daemonId || "",
+            task_name: "update"
+          },
+          data: {
+            time: new Date().getTime()
+          }
+        });
+      },
+      condition: () => isStopped.value
     }
-  },
-  {
-    title: t("TXT_CODE_7b67813a"),
-    icon: CloseOutlined,
-    click: () => {
-      killInstance().execute({
-        params: {
-          uuid: instanceId || "",
-          remote_uuid: daemonId || ""
-        }
-      });
-    }
-  },
-  {
-    title: t("TXT_CODE_40ca4f2"),
-    icon: CloudDownloadOutlined,
-    click: () => {
-      updateInstance().execute({
-        params: {
-          uuid: instanceId || "",
-          remote_uuid: daemonId || "",
-          task_name: "update"
-        },
-        data: {
-          time: new Date().getTime()
-        }
-      });
-    }
-  }
-]);
+  ])
+);
 
 const handleSendCommand = () => {
   sendCommand(commandInputValue.value);
@@ -265,7 +272,7 @@ const innerTerminalType = viewType === "inner";
         </template>
       </BetweenMenus>
     </div>
-    <a-spin :spinning="!isConnect" tip="正在连接终端中...">
+    <a-spin :spinning="!isConnect" :tip="t('正在连接终端中...')">
       <div v-if="!containerState.isDesignMode" class="console-wrapper">
         <div class="terminal-wrapper global-card-container-shadow">
           <div class="terminal-container">

From 95020bf62c154f37d54cc5dabc9d4948c3fdce6b Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Mon, 13 Nov 2023 16:17:13 +0800
Subject: [PATCH 09/11] Optimize: schedule page

---
 frontend/src/widgets/instance/Schedule.vue | 35 ++++++++++++----------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/frontend/src/widgets/instance/Schedule.vue b/frontend/src/widgets/instance/Schedule.vue
index 7f4211e7..7dfff725 100644
--- a/frontend/src/widgets/instance/Schedule.vue
+++ b/frontend/src/widgets/instance/Schedule.vue
@@ -22,7 +22,7 @@ const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
 const instanceId = getMetaOrRouteValue("instanceId");
 const daemonId = getMetaOrRouteValue("daemonId");
 const { toPage } = useAppRouters();
-const screen = useScreen();
+const { isPhone } = useScreen();
 const newScheduleDialog = ref<InstanceType<typeof NewSchedule>>();
 
 const { state, execute, isLoading } = scheduleList();
@@ -52,7 +52,7 @@ const deleteSchedule = async (name: string) => {
     });
     if (state.value) {
       message.success(t("删除成功"));
-      refresh();
+      await getScheduleList();
     }
   } catch (err: any) {
     console.error(err);
@@ -120,9 +120,7 @@ const columns = [
     dataIndex: "count",
     key: "count",
     minWidth: "80px",
-    customRender: (e: { text: number }) => {
-      return e.text > 0 ? e.text : t("无限");
-    }
+    customRender: (e: { text: number }) => (e.text > 0 ? e.text : t("无限"))
   },
   {
     align: "center",
@@ -130,9 +128,8 @@ const columns = [
     dataIndex: "action",
     key: "action",
     minWidth: "180px",
-    customRender: (e: { text: "command" | "stop" | "start" | "restart" | "kill" }) => {
-      return ScheduleAction[e.text];
-    }
+    customRender: (e: { text: "command" | "stop" | "start" | "restart" | "kill" }) =>
+      ScheduleAction[e.text]
   },
   {
     align: "center",
@@ -140,9 +137,7 @@ const columns = [
     dataIndex: "type",
     key: "type",
     minWidth: "180px",
-    customRender: (e: { text: 1 | 2 | 3 }) => {
-      return ScheduleType[e.text];
-    }
+    customRender: (e: { text: 1 | 2 | 3 }) => ScheduleType[e.text]
   },
   {
     align: "center",
@@ -160,9 +155,10 @@ const columns = [
   }
 ];
 
-const refresh = throttle(() => {
-  getScheduleList();
-}, 100);
+const refresh = async () => {
+  await getScheduleList();
+  message.success(t("已刷新"));
+};
 
 const toConsole = () => {
   toPage({
@@ -184,7 +180,7 @@ onMounted(async () => {
     <a-row :gutter="[24, 24]" style="height: 100%">
       <a-col :span="24">
         <BetweenMenus>
-          <template #left>
+          <template v-if="!isPhone" #left>
             <a-typography-title class="mb-0" :level="4">
               <FieldTimeOutlined />
               {{ card.title }}
@@ -207,7 +203,14 @@ onMounted(async () => {
         <CardPanel style="height: 100%">
           <template #body>
             <a-spin :spinning="isLoading">
-              <a-table :data-source="state" :columns="columns" :scroll="{ x: 'max-content' }">
+              <a-table
+                :data-source="state"
+                :columns="columns"
+                :scroll="{ x: 'max-content' }"
+                :pagination="{
+                  pageSize: 15
+                }"
+              >
                 <template #bodyCell="{ column, record }">
                   <template v-if="column.key === 'actions'">
                     <a-popconfirm

From a795a5e7350f5eff77d7c28a1f78240d379eb246 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Mon, 13 Nov 2023 17:36:35 +0800
Subject: [PATCH 10/11] Optimize: code

---
 frontend/src/config/router.ts                 | 10 -------
 frontend/src/types/const.ts                   |  6 +++++
 frontend/src/widgets/instance/Schedule.vue    |  6 ++---
 .../widgets/instance/dialogs/NewSchedule.vue  | 26 +++++++------------
 4 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/frontend/src/config/router.ts b/frontend/src/config/router.ts
index b1005067..f23d494c 100644
--- a/frontend/src/config/router.ts
+++ b/frontend/src/config/router.ts
@@ -111,16 +111,6 @@ let originRouterConfig: RouterConfig[] = [
         meta: {
           permission: ROLE.USER
         }
-        // children: [
-        //   {
-        //     path: "/instances/schedule/new",
-        //     name: t("新增计划任务"),
-        //     component: LayoutContainer,
-        //     meta: {
-        //       permission: ROLE.USER
-        //     }
-        //   }
-        // ]
       }
     ]
   },
diff --git a/frontend/src/types/const.ts b/frontend/src/types/const.ts
index e7a770e1..02fd27ca 100644
--- a/frontend/src/types/const.ts
+++ b/frontend/src/types/const.ts
@@ -94,3 +94,9 @@ export const ScheduleType = {
   2: t("周期时间性任务"),
   3: t("指定时间性任务")
 };
+
+export enum ScheduleCreateType {
+  INTERVAL = "1",
+  CYCLE = "2",
+  SPECIFY = "3"
+}
diff --git a/frontend/src/widgets/instance/Schedule.vue b/frontend/src/widgets/instance/Schedule.vue
index 7dfff725..fdd55201 100644
--- a/frontend/src/widgets/instance/Schedule.vue
+++ b/frontend/src/widgets/instance/Schedule.vue
@@ -180,7 +180,7 @@ onMounted(async () => {
     <a-row :gutter="[24, 24]" style="height: 100%">
       <a-col :span="24">
         <BetweenMenus>
-          <template v-if="!isPhone" #left>
+          <template #left>
             <a-typography-title class="mb-0" :level="4">
               <FieldTimeOutlined />
               {{ card.title }}
@@ -188,13 +188,13 @@ onMounted(async () => {
           </template>
           <template #right>
             <a-button class="mr-10" @click="toConsole()">
-              {{ t("返回控制台") }}
+              {{ t("返回") }}
             </a-button>
             <a-button class="mr-10" @click="refresh">
               {{ t("刷新") }}
             </a-button>
             <a-button type="primary" @click="newScheduleDialog?.openDialog()">
-              {{ t("新增计划任务") }}
+              {{ t("新增") }}
             </a-button>
           </template>
         </BetweenMenus>
diff --git a/frontend/src/widgets/instance/dialogs/NewSchedule.vue b/frontend/src/widgets/instance/dialogs/NewSchedule.vue
index 73be2001..6fde01bf 100644
--- a/frontend/src/widgets/instance/dialogs/NewSchedule.vue
+++ b/frontend/src/widgets/instance/dialogs/NewSchedule.vue
@@ -2,7 +2,7 @@
 import { ref, reactive } from "vue";
 import { t } from "@/lang/i18n";
 import { message, notification } from "ant-design-vue";
-import { ScheduleAction, ScheduleType } from "@/types/const";
+import { ScheduleAction, ScheduleType, ScheduleCreateType } from "@/types/const";
 import type { NewScheduleTask } from "@/types";
 import { scheduleCreate } from "@/services/apis/instance";
 import { useScreen } from "@/hooks/useScreen";
@@ -30,12 +30,6 @@ const weeks = [
   { label: t("周日"), value: 7 }
 ];
 
-enum TYPE {
-  INTERVAL = "1",
-  CYCLE = "2",
-  SPECIFY = "3"
-}
-
 interface NewTask extends NewScheduleTask {
   payload: string;
   weekend: string[];
@@ -43,17 +37,17 @@ interface NewTask extends NewScheduleTask {
   objTime: string;
 }
 
-const newTaskOrigin = reactive<NewTask>({
+const newTaskOrigin = {
   name: "",
   action: "command",
   count: "",
-  type: TYPE.INTERVAL,
+  type: ScheduleCreateType.INTERVAL,
   time: "",
   payload: "",
   weekend: [],
   cycle: ["0", "0", "0"],
   objTime: ""
-});
+};
 
 let newTask = reactive(_.cloneDeep(newTaskOrigin));
 
@@ -118,9 +112,9 @@ const createRequest = async () => {
 
 const submit = async () => {
   try {
-    if (newTask.type === TYPE.INTERVAL) await createTaskTypeInterval();
-    if (newTask.type === TYPE.CYCLE) await createTaskTypeCycle();
-    if (newTask.type === TYPE.SPECIFY) await createTaskTypeSpecify();
+    if (newTask.type === ScheduleCreateType.INTERVAL) await createTaskTypeInterval();
+    if (newTask.type === ScheduleCreateType.CYCLE) await createTaskTypeCycle();
+    if (newTask.type === ScheduleCreateType.SPECIFY) await createTaskTypeSpecify();
   } catch (err: any) {
     return message.error(err.message);
   }
@@ -180,7 +174,7 @@ defineExpose({
       </a-row>
     </a-form-item>
 
-    <a-form-item v-if="newTask.type === TYPE.INTERVAL">
+    <a-form-item v-if="newTask.type === ScheduleCreateType.INTERVAL">
       <a-typography-paragraph>
         <a-typography-text>
           {{ t("每隔一定时间将执行一次，具体间隔可以仔细设置") }}
@@ -214,7 +208,7 @@ defineExpose({
       </a-row>
     </a-form-item>
 
-    <div v-if="newTask.type === TYPE.CYCLE">
+    <div v-if="newTask.type === ScheduleCreateType.CYCLE">
       <a-form-item>
         <a-typography-title :level="5">{{ t("触发时间") }}</a-typography-title>
         <a-time-picker
@@ -234,7 +228,7 @@ defineExpose({
       </a-form-item>
     </div>
 
-    <a-form-item v-if="newTask.type === TYPE.SPECIFY">
+    <a-form-item v-if="newTask.type === ScheduleCreateType.SPECIFY">
       <a-typography-title :level="5">{{ t("请选择日期和时间") }}</a-typography-title>
       <a-date-picker v-model:value="newTask.objTime" show-time size="large" class="w-100" />
     </a-form-item>

From eea610aa89cc8abe1141663fd180a7b89daa54b0 Mon Sep 17 00:00:00 2001
From: Lazy <2211717435@qq.com>
Date: Mon, 13 Nov 2023 19:17:14 +0800
Subject: [PATCH 11/11] Optimize: code

---
 frontend/src/widgets/instance/Schedule.vue        | 15 ++++++---------
 .../src/widgets/instance/dialogs/NewSchedule.vue  |  4 ++--
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/frontend/src/widgets/instance/Schedule.vue b/frontend/src/widgets/instance/Schedule.vue
index fdd55201..ee4d72f8 100644
--- a/frontend/src/widgets/instance/Schedule.vue
+++ b/frontend/src/widgets/instance/Schedule.vue
@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import { t } from "@/lang/i18n";
 import { message } from "ant-design-vue";
 import { DeleteOutlined, FieldTimeOutlined } from "@ant-design/icons-vue";
-import { throttle } from "lodash";
 import CardPanel from "@/components/CardPanel.vue";
 import BetweenMenus from "@/components/BetweenMenus.vue";
 import { useLayoutCardTools } from "@/hooks/useCardTools";
-import { useScreen } from "@/hooks/useScreen";
 import { useAppRouters } from "@/hooks/useAppRouters";
 import { scheduleList, scheduleDelete } from "@/services/apis/instance";
 import type { LayoutCard, Schedule } from "@/types/index";
-import { ScheduleAction, ScheduleType } from "@/types/const";
+import { ScheduleAction, ScheduleType, ScheduleCreateType } from "@/types/const";
 import NewSchedule from "@/widgets/instance/dialogs/NewSchedule.vue";
 
 const props = defineProps<{
@@ -22,7 +20,6 @@ const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
 const instanceId = getMetaOrRouteValue("instanceId");
 const daemonId = getMetaOrRouteValue("daemonId");
 const { toPage } = useAppRouters();
-const { isPhone } = useScreen();
 const newScheduleDialog = ref<InstanceType<typeof NewSchedule>>();
 
 const { state, execute, isLoading } = scheduleList();
@@ -61,8 +58,8 @@ const deleteSchedule = async (name: string) => {
 };
 
 const rendTime = (text: string, schedule: Schedule) => {
-  switch (schedule.type) {
-    case 1: {
+  switch (schedule.type.toString()) {
+    case ScheduleCreateType.INTERVAL: {
       const time = Number(text);
       let s = time;
       let m = 0;
@@ -77,7 +74,7 @@ const rendTime = (text: string, schedule: Schedule) => {
       }
       return `${t("每隔")} ${h} ${t("小时")} ${m} ${t("分钟")} ${s} ${t("秒")}`;
     }
-    case 2: {
+    case ScheduleCreateType.CYCLE: {
       const time = text;
       const timeArr = time.split(" ");
       const h = timeArr[2];
@@ -86,7 +83,7 @@ const rendTime = (text: string, schedule: Schedule) => {
       const w = timeArr[5];
       return `${t("每星期")} ${w} ${t("的")} ${h}:${m}:${s}`;
     }
-    case 3: {
+    case ScheduleCreateType.SPECIFY: {
       const time = text;
       const timeArr = time.split(" ");
       const h = timeArr[2];
diff --git a/frontend/src/widgets/instance/dialogs/NewSchedule.vue b/frontend/src/widgets/instance/dialogs/NewSchedule.vue
index 6fde01bf..7c85e7c1 100644
--- a/frontend/src/widgets/instance/dialogs/NewSchedule.vue
+++ b/frontend/src/widgets/instance/dialogs/NewSchedule.vue
@@ -37,7 +37,7 @@ interface NewTask extends NewScheduleTask {
   objTime: string;
 }
 
-const newTaskOrigin = {
+const newTaskOrigin: NewTask = {
   name: "",
   action: "command",
   count: "",
@@ -49,7 +49,7 @@ const newTaskOrigin = {
   objTime: ""
 };
 
-let newTask = reactive(_.cloneDeep(newTaskOrigin));
+let newTask = reactive<NewTask>(_.cloneDeep(newTaskOrigin));
 
 const createTaskTypeInterval = async () => {
   const arr = newTask.cycle;