feat 服务设置

src/pages/setting.vue

@@ -8,6 +8,7 @@ import AccountSettingWords from '@/views/setting/AccountSettingWords.vue'
 import AccountSettingAbout from '@/views/setting/AccountSettingAbout.vue'
 import AccountSettingSearch from '@/views/setting/AccountSettingSearch.vue'
 import AccountSettingSubscribe from '@/views/setting/AccountSettingSubscribe.vue'
+import AccountSettingService from '@/views/setting/AccountSettingService.vue'
 
 const route = useRoute()
 
@@ -35,6 +36,11 @@ const tabs = [
     icon: 'mdi-rss',
     tab: 'subscribe',
   },
+  {
+    title: '服务',
+    icon: 'mdi-list-box',
+    tab: 'service',
+  },
   {
     title: '规则',
     icon: 'mdi-filter-cog',
@@ -60,7 +66,10 @@ const tabs = [
 
 <template>
   <div>
-    <VTabs v-model="activeTab" show-arrows>
+    <VTabs
+      v-model="activeTab"
+      show-arrows
+    >
       <VTab v-for="item in tabs" :key="item.icon" :value="item.tab">
         <VIcon size="20" start :icon="item.icon" />
         {{ item.title }}
@@ -68,15 +77,19 @@ const tabs = [
     </VTabs>
     <VDivider />
 
-    <VWindow v-model="activeTab" class="mt-5 disable-tab-transition">
-      <!-- Account -->
+    <VWindow
+      v-model="activeTab"
+      class="mt-5 disable-tab-transition"
+      :touch="false"
+    >
+      <!-- 用户 -->
       <VWindowItem value="account">
         <transition name="fade-slide" appear>
           <AccountSettingAccount />
         </transition>
       </VWindowItem>
 
-      <!-- 用户 -->
+      <!-- 站点 -->
       <VWindowItem value="site">
         <transition name="fade-slide" appear>
           <AccountSettingSite />
@@ -97,7 +110,14 @@ const tabs = [
         </transition>
       </VWindowItem>
 
-      <!-- Notification -->
+      <!-- 服务 -->
+      <VWindowItem value="service">
+        <transition name="fade-slide" appear>
+          <AccountSettingService />
+        </transition>
+      </VWindowItem>
+
+      <!-- 规则 -->
       <VWindowItem value="filter">
         <transition name="fade-slide" appear>
           <AccountSettingRule />

src/views/setting/AccountSettingService.vue

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import { useToast } from 'vue-toast-notification'
+import api from '@/api'
+import type { ScheduleInfo } from '@/api/types'
+
+// 提示框
+const $toast = useToast()
+
+// 定时服务列表
+const schedulerList = ref<ScheduleInfo[]>([])
+
+// 定时器
+let refreshTimer: NodeJS.Timer | null = null
+
+// 调用API加载定时服务列表
+async function loadSchedulerList() {
+  try {
+    const res: ScheduleInfo[] = await api.get('dashboard/schedule')
+
+    schedulerList.value = res
+  }
+  catch (e) {
+    console.log(e)
+  }
+}
+
+// 任务状态颜色
+function getSchedulerColor(status: string) {
+  switch (status) {
+    case '正在运行':
+      return 'success'
+    case '等待':
+      return ''
+    default:
+      return ''
+  }
+}
+
+// 执行命令
+async function runCommand(id: string) {
+  // 取id|前面的命令
+  id = `/${id.split('|')[0]}`
+  try {
+    const result: { [key: string]: any } = await api.get('system/command', {
+      params: {
+        cmd: id,
+      },
+    })
+    if (result.success) {
+      $toast.success('执行请求提交成功！')
+      loadSchedulerList()
+    }
+    else {
+      $toast.error(`执行请求提交失败：${result.message}`)
+    }
+  }
+  catch (e) {
+    console.log(e)
+  }
+}
+
+onMounted(() => {
+  loadSchedulerList()
+
+  // 启动定时器
+  refreshTimer = setInterval(() => {
+    loadSchedulerList()
+  }, 5000)
+})
+
+// 组件卸载时停止定时器
+onUnmounted(() => {
+  if (refreshTimer) {
+    clearInterval(refreshTimer)
+    refreshTimer = null
+  }
+})
+</script>
+
+<template>
+  <VCard title="定时作业">
+    <VCardText> 手动执行不会影响作业正常的时间表。 </VCardText>
+
+    <VTable class="text-no-wrap">
+      <thead>
+        <tr>
+          <th scope="col">
+            任务名称
+          </th>
+          <th scope="col">
+            任务状态
+          </th>
+          <th scope="col">
+            下一次执行时间
+          </th>
+          <th scope="col" />
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="scheduler in schedulerList"
+          :key="scheduler.id"
+        >
+          <td>
+            {{ scheduler.name }}
+          </td>
+          <td>
+            <VChip :color="getSchedulerColor(scheduler.status)">
+              {{ scheduler.status }}
+            </VChip>
+          </td>
+          <td>
+            {{ scheduler.next_run }}
+          </td>
+          <td>
+            <VBtn
+              small
+              @click="runCommand(scheduler.id)"
+            >
+              <template #prepend>
+                <VIcon>mdi-play</VIcon>
+              </template>
+              执行
+            </VBtn>
+          </td>
+        </tr>
+        <tr v-if="schedulerList.length === 0">
+          <td
+            colspan="4"
+            class="text-center"
+          >
+            没有后台服务
+          </td>
+        </tr>
+      </tbody>
+    </VTable>
+  </VCard>
+</template>