feat: add email testing functionality to health API and config form

- Introduced a new API method to send test emails, enhancing the health API.
- Implemented a conditional field display logic in the config form to show fields based on sibling field values.
- Added a button in the system settings tab to trigger the sending of test emails, improving user interaction.

These changes aim to enhance the configuration options and provide a way to test email functionality directly from the settings interface.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

src/api/health.ts

@@ -17,4 +17,10 @@ export const healthApi = {
 
   // 手动运行 Cron 任务
   runCron: (name: string) => request.post<void>(`/health/cron/run/${name}`),
+
+  // === 邮件测试 ===
+
+  // 发送测试邮件
+  sendTestEmail: () =>
+    request.get<{ message?: string; trace?: string }>('/health/email/test'),
 }

src/components/config-form/index.tsx

@@ -8,6 +8,29 @@ import type { FormField } from './types'
 import { SettingsItem } from '~/layouts/settings-layout'
 import { uuid } from '~/utils'
 
+/**
+ * Check if a field should be shown based on showWhen conditions.
+ * When the condition is not met, the field and all its nested children are hidden.
+ */
+function shouldShowField(
+  field: FormField,
+  formData: Ref<any>,
+  sectionPrefix: string,
+): boolean {
+  const { showWhen } = field.ui
+  if (!showWhen) return true
+
+  for (const [key, expected] of Object.entries(showWhen)) {
+    const actualValue = get(formData.value, `${sectionPrefix}.${key}`)
+    if (Array.isArray(expected)) {
+      if (!expected.includes(actualValue)) return false
+    } else {
+      if (actualValue !== expected) return false
+    }
+  }
+  return true
+}
+
 export const SectionFields = defineComponent({
   props: {
     fields: {
@@ -31,6 +54,7 @@ export const SectionFields = defineComponent({
         <>
           {fields
             .filter((field) => !field.ui.hidden)
+            .filter((field) => shouldShowField(field, formData, dataKeyPrefix))
             .map((field) => {
               const fieldPath = `${dataKeyPrefix}.${field.key}`
 

src/components/config-form/types.ts

@@ -13,6 +13,11 @@ export interface UIConfig {
   hidden?: boolean
   placeholder?: string
   options?: Array<{ label: string; value: string | number }>
+  /**
+   * Conditionally show this field based on sibling field values.
+   * When the condition is not met, the field and all its nested children are hidden.
+   */
+  showWhen?: Record<string, string | string[]>
 }
 
 export interface FormField {

src/views/setting/tabs/system.tsx

@@ -1,4 +1,6 @@
 import { cloneDeep, isEmpty } from 'es-toolkit/compat'
+import { Mail as MailIcon } from 'lucide-vue-next'
+import { NButton } from 'naive-ui'
 import {
   computed,
   defineComponent,
@@ -16,6 +18,7 @@ import type {
 } from '~/components/config-form/types'
 import type { PropType } from 'vue'
 
+import { healthApi } from '~/api/health'
 import { optionsApi } from '~/api/options'
 import { SectionFields } from '~/components/config-form'
 import { SettingsSection } from '~/layouts/settings-layout'
@@ -169,6 +172,25 @@ export const TabSystem = defineComponent({
       saveAll,
     })
 
+    const isSendingTestEmail = ref(false)
+
+    const handleSendTestEmail = async () => {
+      if (isSendingTestEmail.value) return
+      isSendingTestEmail.value = true
+      try {
+        const result = await healthApi.sendTestEmail()
+        if (result.message) {
+          toast.error(`发送失败: ${result.message}`)
+        } else {
+          toast.success('测试邮件已发送，请检查收件箱')
+        }
+      } catch (error: any) {
+        toast.error(error?.message || '发送测试邮件失败')
+      } finally {
+        isSendingTestEmail.value = false
+      }
+    }
+
     return () => {
       const { activeGroup } = props
 
@@ -191,13 +213,31 @@ export const TabSystem = defineComponent({
                 />
               ) : (
                 <SettingsSection key={section.key} title={section.title}>
-                  <div class="py-2">
-                    <SectionFields
-                      fields={section.fields}
-                      formData={computed(() => configs)}
-                      dataKeyPrefix={section.key}
-                    />
-                  </div>
+                  {{
+                    default: () => (
+                      <div class="py-2">
+                        <SectionFields
+                          fields={section.fields}
+                          formData={computed(() => configs)}
+                          dataKeyPrefix={section.key}
+                        />
+                      </div>
+                    ),
+                    actions:
+                      section.key === 'mailOptions'
+                        ? () => (
+                            <NButton
+                              size="small"
+                              secondary
+                              loading={isSendingTestEmail.value}
+                              onClick={handleSendTestEmail}
+                              renderIcon={() => <MailIcon size={14} />}
+                            >
+                              发送测试邮件
+                            </NButton>
+                          )
+                        : undefined,
+                  }}
                 </SettingsSection>
               ),
             )}