feat 通知消息设置

src/pages/account-setting.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import AccountSettingAccount from "@/views/account-setting/AccountSettingAccount.vue";
+import AccountSettingNotification from "@/views/account-setting/AccountSettingNotification.vue";
 import AccountSettingSystem from "@/views/account-setting/AccountSettingSystem.vue";
 import { useRoute } from "vue-router";
 
@@ -10,7 +11,8 @@ const activeTab = ref(route.params.tab);
 // tabs
 const tabs = [
   { title: "用户", icon: "mdi-account-outline", tab: "account" },
-  { title: "进阶", icon: "mdi-monitor-dashboard", tab: "system" },
+  { title: "搜索", icon: "mdi-magnify", tab: "system" },
+  { title: "通知", icon: "mdi-bell-outline", tab: "notification" },
 ];
 </script>
 
@@ -34,6 +36,11 @@ const tabs = [
       <VWindowItem value="system">
         <AccountSettingSystem />
       </VWindowItem>
+
+      <!-- Notification -->
+      <VWindowItem value="notification">
+        <AccountSettingNotification />
+      </VWindowItem>
     </VWindow>
   </div>
 </template>

src/views/account-setting/AccountSettingNotification.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+const messageTypes = ref([
+  {
+    type: "资源下载",
+    wechat: true,
+    telegram: true,
+    slack: true,
+  },
+  {
+    type: "整理入库",
+    wechat: true,
+    telegram: true,
+    slack: true,
+  },
+  {
+    type: "订阅",
+    wechat: true,
+    telegram: true,
+    slack: true,
+  },
+  {
+    type: "站点消息",
+    wechat: true,
+    telegram: true,
+    slack: true,
+  },
+  {
+    type: "媒体服务器通知",
+    wechat: true,
+    telegram: true,
+    slack: true,
+  },
+]);
+</script>
+
+<template>
+  <VCard title="消息通知">
+    <VCardText> 对应消息类型只会发送给选中的消息渠道 </VCardText>
+
+    <VTable class="text-no-wrap">
+      <thead>
+        <tr>
+          <th scope="col">消息类型</th>
+          <th scope="col">微信</th>
+          <th scope="col">Telegram</th>
+          <th scope="col">Slack</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="message in messageTypes" :key="message.type">
+          <td>
+            {{ message.type }}
+          </td>
+          <td>
+            <VCheckbox v-model="message.wechat" />
+          </td>
+          <td>
+            <VCheckbox v-model="message.telegram" />
+          </td>
+          <td>
+            <VCheckbox v-model="message.slack" />
+          </td>
+        </tr>
+      </tbody>
+    </VTable>
+    <VDivider />
+
+    <VCardText>
+      <VForm @submit.prevent="() => {}">
+        <div class="d-flex flex-wrap gap-4 mt-4">
+          <VBtn type="submit"> 保存 </VBtn>
+        </div>
+      </VForm>
+    </VCardText>
+  </VCard>
+</template>

src/views/account-setting/AccountSettingSystem.vue

@@ -100,7 +100,7 @@ onMounted(() => {
 <template>
   <VRow>
     <VCol cols="12">
-      <VCard title="索引站点">
+      <VCard title="搜索站点">
         <VCardSubtitle> 只有选中的站点才会在搜索中使用 </VCardSubtitle>
 
         <VCardItem>