feat：目录设置UI

src/views/setting/AccountSettingNotification.vue

@@ -67,8 +67,7 @@ async function loadNotificationSwitchs() {
     const result: NotificationSwitch[] = await api.get('message/switchs')
 
     messagemTypes.value = result
-  }
-  catch (error) {
+  } catch (error) {
     console.log(error)
   }
 }
@@ -76,17 +75,11 @@ async function loadNotificationSwitchs() {
 // 调用API保存消息开关
 async function saveNotificationSwitchs() {
   try {
-    const result: { [key: string]: any } = await api.post(
-      'message/switchs',
-      messagemTypes.value,
-    )
+    const result: { [key: string]: any } = await api.post('message/switchs', messagemTypes.value)
 
-    if (result.success)
-      $toast.success('保存通知消息设置成功')
-    else
-      $toast.error('保存通知消息设置失败！')
-  }
-  catch (error) {
+    if (result.success) $toast.success('保存通知消息设置成功')
+    else $toast.error('保存通知消息设置失败！')
+  } catch (error) {
     console.log(error)
   }
 }
@@ -143,8 +136,7 @@ async function loadNotificationSettings() {
         VOCECHAT_CHANNEL_ID,
       }
     }
-  }
-  catch (error) {
+  } catch (error) {
     console.log(error)
   }
 }
@@ -152,23 +144,17 @@ async function loadNotificationSettings() {
 // 调用API保存消息渠道设置
 async function saveNotificationSettings() {
   try {
-    const result1: { [key: string]: any } = await api.post(
-      'system/setting/MESSAGER',
-      selectedChannels.value.join(','),
-    )
+    const result1: { [key: string]: any } = await api.post('system/setting/MESSAGER', selectedChannels.value.join(','))
 
-    const result2: { [key: string]: any } = await api.post(
-      'system/env',
-      notificationSettings.value,
-    )
+    const result2: { [key: string]: any } = await api.post('system/env', notificationSettings.value)
 
     if (result1.success && result2.success) {
       $toast.success('保存通知渠道设置成功')
       reloadModule()
+    } else {
+      $toast.error('保存通知渠道设置失败！')
     }
-    else { $toast.error('保存通知渠道设置失败！') }
-  }
-  catch (error) {
+  } catch (error) {
     console.log(error)
   }
 }
@@ -177,12 +163,9 @@ async function saveNotificationSettings() {
 async function reloadModule() {
   try {
     const result: { [key: string]: any } = await api.get('system/reload')
-    if (result.success)
-      $toast.success('重新加载模块成功')
-    else
-      $toast.error('重新加载模块失败！')
-  }
-  catch (error) {
+    if (result.success) $toast.success('重新加载模块成功')
+    else $toast.error('重新加载模块失败！')
+  } catch (error) {
     console.log(error)
   }
 }
@@ -197,8 +180,11 @@ onMounted(() => {
 <template>
   <VRow>
     <VCol cols="12">
-      <VCard title="通知渠道">
-        <VCardSubtitle>只有选中的渠道才会发送消息。</VCardSubtitle>
+      <VCard>
+        <VCardItem>
+          <VCardTitle>通知渠道</VCardTitle>
+          <VCardSubtitle>只有选中的渠道才会发送消息。</VCardSubtitle>
+        </VCardItem>
         <VCardText>
           <VForm>
             <VRow>
@@ -215,31 +201,14 @@ onMounted(() => {
             </VRow>
             <VRow>
               <VCol>
-                <VTabs
-                  v-model="messagerTab"
-                  stacked
-                >
-                  <VTab value="wechat">
-                    微信
-                  </VTab>
-                  <VTab value="telegram">
-                    Telegram
-                  </VTab>
-                  <VTab value="slack">
-                    Slack
-                  </VTab>
-                  <VTab value="synologychat">
-                    SynologyChat
-                  </VTab>
-                  <VTab value="vocechat">
-                    VoceChat
-                  </VTab>
+                <VTabs v-model="messagerTab" stacked>
+                  <VTab value="wechat"> 微信 </VTab>
+                  <VTab value="telegram"> Telegram </VTab>
+                  <VTab value="slack"> Slack </VTab>
+                  <VTab value="synologychat"> SynologyChat </VTab>
+                  <VTab value="vocechat"> VoceChat </VTab>
                 </VTabs>
-                <VWindow
-                  v-model="messagerTab"
-                  class="mt-5 disable-tab-transition"
-                  :touch="false"
-                >
+                <VWindow v-model="messagerTab" class="mt-5 disable-tab-transition" :touch="false">
                   <VWindowItem value="wechat">
                     <VForm>
                       <VRow>
@@ -386,10 +355,7 @@ onMounted(() => {
                     <VForm>
                       <VRow>
                         <VCol cols="12" md="4">
-                          <VTextField
-                            v-model="notificationSettings.VOCECHAT_HOST"
-                            label="地址"
-                          />
+                          <VTextField v-model="notificationSettings.VOCECHAT_HOST" label="地址" />
                         </VCol>
                         <VCol cols="12" md="4">
                           <VTextField
@@ -417,12 +383,7 @@ onMounted(() => {
         <VCardText>
           <VForm @submit.prevent="() => {}">
             <div class="d-flex flex-wrap gap-4 mt-4">
-              <VBtn
-                mtype="submit"
-                @click="saveNotificationSettings"
-              >
-                保存
-              </VBtn>
+              <VBtn mtype="submit" @click="saveNotificationSettings"> 保存 </VBtn>
             </div>
           </VForm>
         </VCardText>
@@ -431,36 +392,24 @@ onMounted(() => {
   </VRow>
   <VRow>
     <VCol cols="12">
-      <VCard title="消息类型">
-        <VCardSubtitle> 对应消息类型只会发送给选中的消息渠道。 </VCardSubtitle>
+      <VCard>
+        <VCardItem>
+          <VCardTitle>消息类型</VCardTitle>
+          <VCardSubtitle>对应消息类型只会发送给选中的消息渠道。</VCardSubtitle>
+        </VCardItem>
         <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>
-              <th scope="col">
-                SynologyChat
-              </th>
-              <th scope="col">
-                VoceChat
-              </th>
+              <th scope="col">消息类型</th>
+              <th scope="col">微信</th>
+              <th scope="col">Telegram</th>
+              <th scope="col">Slack</th>
+              <th scope="col">SynologyChat</th>
+              <th scope="col">VoceChat</th>
             </tr>
           </thead>
           <tbody>
-            <tr
-              v-for="message in messagemTypes"
-              :key="message.mtype"
-            >
+            <tr v-for="message in messagemTypes" :key="message.mtype">
               <td>
                 {{ message.mtype }}
               </td>
@@ -481,26 +430,15 @@ onMounted(() => {
               </td>
             </tr>
             <tr v-if="messagemTypes.length === 0">
-              <td
-                colspan="6"
-                class="text-center"
-              >
-                没有设置任何通知渠道
-              </td>
+              <td colspan="6" class="text-center">没有设置任何通知渠道</td>
             </tr>
           </tbody>
         </VTable>
         <VDivider />
-
         <VCardText>
           <VForm @submit.prevent="() => {}">
             <div class="d-flex flex-wrap gap-4 mt-4">
-              <VBtn
-                mtype="submit"
-                @click="saveNotificationSwitchs"
-              >
-                保存
-              </VBtn>
+              <VBtn mtype="submit" @click="saveNotificationSwitchs"> 保存 </VBtn>
             </div>
           </VForm>
         </VCardText>