style: Update AccountSettingNotification.vue, AccountSettingSystem.vue, MediaServerCard.vue, and DownloaderCard.vue to include default values for config and name properties

src/api/types.ts

@@ -870,7 +870,7 @@ export interface NotificationConf {
   // 类型 telegram/wechat/vocechat/synologychat
   type: string
   // 配置
-  config?: { [key: string]: any }
+  config: { [key: string]: any }
   // 场景开关
   switchs?: string[]
   // 是否启用

src/components/cards/DownloaderCard.vue

@@ -24,6 +24,9 @@ const download_rate = ref(0)
 // 下载器详情弹窗
 const downloaderInfoDialog = ref(false)
 
+// 下载器名称
+const downloaderName = ref('')
+
 // 下载器详情
 const downloaderInfo = ref<DownloaderConf>({
   name: '',
@@ -36,12 +39,14 @@ const downloaderInfo = ref<DownloaderConf>({
 // 打开详情弹窗
 function openDownloaderInfoDialog() {
   downloaderInfo.value = props.downloader
+  downloaderName.value = props.downloader.name
   downloaderInfoDialog.value = true
 }
 
 // 保存详情数据
 function saveDownloaderInfo() {
   downloaderInfoDialog.value = false
+  downloaderInfo.value.name = downloaderName.value
   emit('change', downloaderInfo.value)
 }
 
@@ -78,9 +83,15 @@ function onClose() {
       </span>
       <VCardText class="flex justify-space-between align-center gap-3">
         <div class="align-self-start">
-          <div>
-            <VBadge v-if="props.downloader.default && props.downloader.enabled" dot inline color="success" />
-            <span class="text-h6 mb-1 ms-1">{{ downloader.name }}</span>
+          <div class="flex items-center">
+            <VBadge
+              v-if="props.downloader.default && props.downloader.enabled"
+              dot
+              inline
+              color="success"
+              class="me-1"
+            />
+            <span class="text-h6 mb-1">{{ downloader.name }}</span>
           </div>
           <div class="text-body-1 mb-3">{{ getSpeedText }}</div>
         </div>
@@ -104,7 +115,7 @@ function onClose() {
             <VRow v-if="downloaderInfo.type == 'qbittorrent'">
               <VCol cols="12" md="6">
                 <VTextField
-                  v-model="downloaderInfo.name"
+                  v-model="downloaderName"
                   label="名称"
                   placeholder="别名"
                   hint="下载器的别名"
@@ -166,7 +177,7 @@ function onClose() {
             <VRow v-if="downloaderInfo.type == 'transmission'">
               <VCol cols="12" md="6">
                 <VTextField
-                  v-model="downloaderInfo.name"
+                  v-model="downloaderName"
                   label="名称"
                   placeholder="别名"
                   hint="下载器的别名"

src/components/cards/MediaServerCard.vue

@@ -18,6 +18,9 @@ const emit = defineEmits(['close', 'change'])
 // 媒体服务器详情弹窗
 const mediaServerInfoDialog = ref(false)
 
+// 媒体服务器名称
+const mediaServerName = ref('')
+
 // 媒体服务器详情
 const mediaServerInfo = ref<MediaServerConf>({
   name: '',
@@ -29,12 +32,14 @@ const mediaServerInfo = ref<MediaServerConf>({
 // 打开详情弹窗
 function openMediaServerInfoDialog() {
   mediaServerInfo.value = props.mediaserver
+  mediaServerName.value = props.mediaserver.name
   mediaServerInfoDialog.value = true
 }
 
 // 保存详情数据
 function saveMediaServerInfo() {
   mediaServerInfoDialog.value = false
+  mediaServerInfo.value.name = mediaServerName.value
   emit('change', mediaServerInfo.value)
 }
 
@@ -81,7 +86,7 @@ function onClose() {
             <VRow v-if="mediaServerInfo.type == 'emby'">
               <VCol cols="12" md="6">
                 <VTextField
-                  v-model="mediaServerInfo.name"
+                  v-model="mediaServerName"
                   label="名称"
                   placeholder="别名"
                   hint="媒体服务器的别名"
@@ -118,7 +123,7 @@ function onClose() {
             <VRow v-if="mediaServerInfo.type == 'jellyfin'">
               <VCol cols="12" md="6">
                 <VTextField
-                  v-model="mediaServerInfo.name"
+                  v-model="mediaServerName"
                   label="名称"
                   placeholder="别名"
                   hint="媒体服务器的别名"
@@ -155,7 +160,7 @@ function onClose() {
             <VRow v-if="mediaServerInfo.type == 'plex'">
               <VCol cols="12" md="6">
                 <VTextField
-                  v-model="mediaServerInfo.name"
+                  v-model="mediaServerName"
                   label="名称"
                   placeholder="别名"
                   hint="媒体服务器的别名"

src/components/cards/NotificationChannelCard.vue

@@ -15,6 +15,37 @@ const props = defineProps({
   },
 })
 
+// 定义触发的自定义事件
+const emit = defineEmits(['close', 'change'])
+
+// 通知详情弹窗
+const notificationInfoDialog = ref(false)
+
+// 通知名称
+const notificationName = ref('')
+
+// 通知详情
+const notificationInfo = ref<NotificationConf>({
+  name: '',
+  type: '',
+  enabled: false,
+  config: {},
+})
+
+// 打开详情弹窗
+function openNotificationInfoDialog() {
+  notificationInfo.value = props.notification
+  notificationName.value = props.notification.name
+  notificationInfoDialog.value = true
+}
+
+// 保存详情数据
+function saveNotificationInfo() {
+  notificationInfoDialog.value = false
+  notificationInfo.value.name = notificationName.value
+  emit('change', notificationInfo.value)
+}
+
 // 根据存储类型选择图标
 const getIcon = computed(() => {
   switch (props.notification.type) {
@@ -35,23 +66,275 @@ const getIcon = computed(() => {
   }
 })
 
-// 定义触发的自定义事件
-const emit = defineEmits(['close'])
-
 // 按钮点击
 function onClose() {
   emit('close')
 }
 </script>
 <template>
-  <VCard variant="tonal">
-    <DialogCloseBtn @click="onClose" />
-    <VCardText class="flex justify-space-between align-center gap-3">
-      <div class="align-self-start">
-        <h5 class="text-h6 mb-1">{{ notification.name }}</h5>
-        <div class="text-body-1 mb-3">{{ notification.type }}</div>
-      </div>
-      <VImg :src="getIcon" cover class="mt-5 me-7" max-width="4rem" />
-    </VCardText>
-  </VCard>
+  <div>
+    <VCard variant="tonal" @click="openNotificationInfoDialog">
+      <DialogCloseBtn @click="onClose" />
+      <VCardText class="flex justify-space-between align-center gap-3">
+        <div class="align-self-start">
+          <h5 class="text-h6 mb-1">{{ notification.name }}</h5>
+          <div class="text-body-1 mb-3">{{ notification.type }}</div>
+        </div>
+        <VImg :src="getIcon" cover class="mt-5 me-7" max-width="4rem" />
+      </VCardText>
+    </VCard>
+    <VDialog v-model="notificationInfoDialog" scrollable max-width="40rem">
+      <VCard :title="`${props.notification.name} - 配置`" class="rounded-t">
+        <DialogCloseBtn v-model="notificationInfoDialog" />
+        <VDivider />
+        <VCardText>
+          <VForm>
+            <VRow>
+              <VCol cols="12" md="6">
+                <VSwitch v-model="notificationInfo.enabled" label="启用通知" />
+              </VCol>
+            </VRow>
+            <VRow v-if="notificationInfo.type == 'wechat'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationName"
+                  label="名称"
+                  placeholder="别名"
+                  hint="通知渠道的别名"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.WECHAT_CORPID"
+                  label="企业ID"
+                  hint="企业微信后台企业信息中的企业ID"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.WECHAT_APP_ID"
+                  label="应用 AgentId"
+                  hint="企业微信自建应用的AgentId"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.WECHAT_APP_SECRET"
+                  label="应用 Secret"
+                  hint="企业微信自建应用的Secret"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.WECHAT_PROXY"
+                  label="代理地址"
+                  hint="微信消息的转发代理地址，2022年6月20日后创建的自建应用才需要，不使用代理时需要保留默认值"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.WECHAT_TOKEN"
+                  label="Token"
+                  hint="微信企业自建应用->API接收消息配置中的Token"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.WECHAT_ENCODING_AESKEY"
+                  label="EncodingAESKey"
+                  hint="微信企业自建应用->API接收消息配置中的EncodingAESKey"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.WECHAT_ADMINS"
+                  label="管理员白名单"
+                  placeholder="多个用,分隔"
+                  hint="可使用管理菜单及命令的用户ID列表，多个ID使用,分隔"
+                  persistent-hint
+                />
+              </VCol>
+            </VRow>
+            <VRow v-if="notificationInfo.type == 'telegram'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationName"
+                  label="名称"
+                  placeholder="别名"
+                  hint="通知渠道的别名"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.TELEGRAM_TOKEN"
+                  label="Bot Token"
+                  hint="Telegram机器人token，格式：123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.TELEGRAM_CHAT_ID"
+                  label="Chat ID"
+                  hint="接受消息通知的用户、群组或频道Chat ID"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.TELEGRAM_USERS"
+                  label="用户白名单"
+                  placeholder="多个用,分隔"
+                  hint="可使用Telegram机器人的用户ID清单，多个用户用,分隔，不填写则所有用户都能使用"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.TELEGRAM_ADMINS"
+                  label="管理员白名单"
+                  placeholder="多个用,分隔"
+                  hint="可使用管理菜单及命令的用户ID列表，多个ID使用,分隔"
+                  persistent-hint
+                />
+              </VCol>
+            </VRow>
+            <VRow v-if="notificationInfo.type == 'slack'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationName"
+                  label="名称"
+                  placeholder="别名"
+                  hint="通知渠道的别名"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.SLACK_OAUTH_TOKEN"
+                  label="Slack Bot User OAuth Token"
+                  placeholder="xoxb-xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxx"
+                  hint="Slack应用`OAuth & Permissions`页面中的`Bot User OAuth Token`"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.SLACK_APP_TOKEN"
+                  label="Slack App-Level Token"
+                  placeholder="xapp-xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxx"
+                  hint="Slack应用`OAuth & Permissions`页面中的`App-Level Token`"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.SLACK_CHANNEL"
+                  label="频道名称"
+                  placeholder="全体"
+                  hint="消息发送频道，默认`全体`"
+                  persistent-hint
+                />
+              </VCol>
+            </VRow>
+            <VRow v-if="notificationInfo.type == 'synologychat'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationName"
+                  label="名称"
+                  placeholder="别名"
+                  hint="通知渠道的别名"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.SYNOLOGYCHAT_WEBHOOK"
+                  label="机器人传入URL"
+                  hint="Synology Chat机器人传入URL"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.SYNOLOGYCHAT_TOKEN"
+                  label="令牌"
+                  hint="Synology Chat机器人令牌"
+                  persistent-hint
+                />
+              </VCol>
+            </VRow>
+            <VRow v-if="notificationInfo.type == 'vocechat'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationName"
+                  label="名称"
+                  placeholder="别名"
+                  hint="通知渠道的别名"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.VOCECHAT_HOST"
+                  label="地址"
+                  hint="VoceChat服务端地址，格式：http(s)://ip:port"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.VOCECHAT_API_KEY"
+                  label="机器人密钥"
+                  hint="VoceChat机器人密钥"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.VOCECHAT_CHANNEL_ID"
+                  label="频道ID"
+                  placeholder="不包含#号"
+                  hint="VoceChat的频道ID，不包含#号"
+                  persistent-hint
+                />
+              </VCol>
+            </VRow>
+            <VRow v-if="notificationInfo.type == 'webpush'">
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationName"
+                  label="名称"
+                  placeholder="别名"
+                  hint="通知渠道的别名"
+                  persistent-hint
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="notificationInfo.config.WEBPUSH_USERNAME"
+                  label="登录用户名"
+                  hint="只有对应的用户登录后才会推送消息"
+                  persistent-hint
+                />
+              </VCol>
+            </VRow>
+          </VForm>
+        </VCardText>
+        <VCardActions class="pt-3">
+          <VBtn @click="saveNotificationInfo" variant="elevated" prepend-icon="mdi-content-save" class="px-5">
+            确定
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+  </div>
 </template>

src/views/setting/AccountSettingNotification.vue

@@ -17,6 +17,7 @@ function addNotification(notification: string) {
     name: `通知${notifications.value.length + 1}`,
     type: notification,
     enabled: false,
+    config: {},
   })
 }
 

src/views/setting/AccountSettingSystem.vue

@@ -167,7 +167,7 @@ onMounted(() => {
       <VCard>
         <VCardItem>
           <VCardTitle>下载器</VCardTitle>
-          <VCardSubtitle>只有第1个启用的下载器才会被默认使用。</VCardSubtitle>
+          <VCardSubtitle>只有默认下载器才会被默认使用。</VCardSubtitle>
         </VCardItem>
         <VCardText>
           <draggable