【同步】前端项目源码

【修复】工作流兼容问题

frontend/apps/allin-ssl/src/views/settings/components/aboutSettings.tsx

@@ -0,0 +1,77 @@
+import { NCard, NSpace, NDescriptions, NDescriptionsItem, NIcon, NButton } from 'naive-ui'
+import { $t } from '@locales/index'
+import { LogoGithub } from '@vicons/ionicons5'
+/**
+ * 关于我们标签页组件
+ */
+export default defineComponent({
+	name: 'AboutSettings',
+	setup() {
+		return () => (
+			<div class="about-settings">
+				<NCard title={$t('t_4_1745833932780')} class="mb-4">
+					<NSpace vertical size={24}>
+						<NDescriptions bordered>
+							<NDescriptionsItem label={$t('t_5_1745833933241')}>
+								<div class="flex items-center">
+									<span class="text-[2rem] font-medium">v1.0.0</span>
+								</div>
+							</NDescriptionsItem>
+							<NDescriptionsItem label={$t('t_29_1746667589773')}>
+								<div class="flex items-center space-x-2 h-[3.2rem]">
+									<NIcon size="20" class="text-gray-600">
+										<LogoGithub />
+									</NIcon>
+									<NButton text tag="a" href="https://github.com/allinssl/allinssl" target="_blank" type="primary">
+										https://github.com/allinssl/allinssl
+									</NButton>
+								</div>
+							</NDescriptionsItem>
+						</NDescriptions>
+					</NSpace>
+				</NCard>
+
+				<NCard title={$t('t_13_1745833933630')} class="mb-4">
+					<div class="about-content">
+						<p class="text-gray-700 leading-relaxed">
+							<p class="text-[3rem] font-medium">ALLinSSL</p>
+							<br />
+							<p class="text-[1.6rem] text-primary mb-[2rem]">{$t('t_35_1746773362992')}</p>
+							<span class="text-[1.4rem] mb-[1rem] text-gray-500">
+								{$t(
+									'本工具可帮助用户轻松管理多个网站的SSL证书，提供自动化的证书申请、更新和部署流程，并实时监控证书状态，确保网站安全持续运行。',
+								)}
+								<ul class="list-disc pl-[2rem] mt-[2rem]">
+									<li class="mb-[1rem]">
+										<span class="text-[1.4rem]">{$t('t_36_1746773348989')}</span>
+										{$t('t_1_1746773763643')}
+									</li>
+									<li class="mb-[1rem]">
+										<span class="text-[1.4rem]">{$t('t_38_1746773349796')}</span>
+										{$t('t_39_1746773358932')}
+									</li>
+									<li class="mb-[1rem]">
+										<span class="text-[1.4rem]">{$t('t_40_1746773352188')}</span>
+										{$t('t_41_1746773364475')}
+									</li>
+									<li class="mb-[1rem]">
+										<span class="text-[1.4rem]">{$t('t_42_1746773348768')}</span>
+										{$t('t_43_1746773359511')}
+									</li>
+									<li class="mb-[1rem]">
+										<span class="text-[1.4rem]">{$t('t_44_1746773352805')}</span>
+										{$t('t_45_1746773355717')}
+									</li>
+									<li class="mb-[1rem]">
+										<span class="text-[1.4rem]">{$t('t_46_1746773350579')}</span>
+										{$t('t_47_1746773360760')}
+									</li>
+								</ul>
+							</span>
+						</p>
+					</div>
+				</NCard>
+			</div>
+		)
+	},
+})

frontend/apps/allin-ssl/src/views/settings/components/emailChannelForm.tsx

@@ -0,0 +1,106 @@
+import { NGrid, NFormItemGi, NInput, NSwitch } from 'naive-ui'
+import { useForm, useModalHooks } from '@baota/naive-ui/hooks'
+import { useError } from '@baota/hooks/error'
+import { $t } from '@locales/index'
+import { useEmailChannelFormController } from '../useController'
+import { useStore } from '../useStore'
+
+import type { ReportMail, ReportType } from '@/types/setting'
+
+/**
+ * 邮箱通知渠道表单组件
+ */
+export default defineComponent({
+	name: 'EmailChannelForm',
+	props: {
+		data: {
+			type: Object as PropType<ReportType<ReportMail> | null>,
+			default: () => null,
+		},
+	},
+	setup(props: { data: ReportType<ReportMail> | null }) {
+		const { handleError } = useError()
+		const { confirm } = useModalHooks()
+		const { fetchNotifyChannels } = useStore()
+		const { config, rules, emailChannelForm, submitForm } = useEmailChannelFormController()
+
+		if (props.data) {
+			const { name, config } = props.data
+			emailChannelForm.value = {
+				name,
+				...config,
+			}
+		}
+		// 使用表单hooks
+		const {
+			component: EmailForm,
+			example,
+			data,
+		} = useForm({
+			config,
+			defaultValue: emailChannelForm,
+			rules,
+		})
+
+		// 关联确认按钮
+		confirm(async (close) => {
+			try {
+				const { name, ...other } = data.value
+				await example.value?.validate()
+				const res = await submitForm(
+					{
+						type: 'mail',
+						name: name || '',
+						config: other,
+					},
+					example,
+					props.data?.id,
+				)
+
+				fetchNotifyChannels()
+				if (res) close()
+			} catch (error) {
+				handleError(error)
+			}
+		})
+
+		return () => (
+			<div class="email-channel-form">
+				<EmailForm
+					labelPlacement="top"
+					v-slots={{
+						'smtp-template': (formData: Ref<ReportMail>) => {
+							return (
+								<NGrid cols="24" xGap="24">
+									<NFormItemGi span="12" label={$t('t_14_1745833932440')} path="smtpHost">
+										<NInput v-model:value={formData.value.smtpHost} placeholder={$t('t_15_1745833940280')} />
+									</NFormItemGi>
+									<NFormItemGi span="7" label={$t('t_16_1745833933819')} path="smtpPort">
+										<NInput v-model:value={formData.value.smtpPort} placeholder={$t('t_17_1745833935070')} />
+									</NFormItemGi>
+									<NFormItemGi span="5" label={$t('t_18_1745833933989')} path="smtpTLS">
+										<NSwitch v-model:value={formData.value.smtpTLS} checkedValue="true" uncheckedValue="false" />
+									</NFormItemGi>
+								</NGrid>
+							)
+						},
+						'username-template': (formData: Ref<ReportMail>) => {
+							return (
+								<NGrid cols="24" xGap="24">
+									<NFormItemGi span="24" label={$t('t_48_1745289355714')} path="password">
+										<NInput
+											v-model:value={formData.value.password}
+											placeholder={$t('t_4_1744164840458')}
+											type="password"
+											showPasswordOn="click"
+										/>
+									</NFormItemGi>
+								</NGrid>
+							)
+						},
+					}}
+				></EmailForm>
+			</div>
+		)
+	},
+})

frontend/apps/allin-ssl/src/views/settings/components/generalSettings.tsx

@@ -0,0 +1,33 @@
+import { NCard, NButton, NGrid, NGridItem } from 'naive-ui'
+import { $t } from '@locales/index'
+import { useStore } from '../useStore'
+import { useController, useGeneralSettingsController } from '../useController'
+
+/**
+ * 常用设置标签页组件
+ */
+export default defineComponent({
+	name: 'GeneralSettings',
+	setup() {
+		const { generalSettings } = useStore()
+		const { handleSaveGeneralSettings } = useController()
+		const { GeneralForm } = useGeneralSettingsController()
+		return () => (
+			<div class="flex flex-col gap-[2rem]">
+				<div class="mt-[2rem]">
+					<NButton type="primary" onClick={() => handleSaveGeneralSettings(generalSettings.value)}>
+						{$t('t_9_1745464078110')}
+					</NButton>
+				</div>
+
+				<NCard title={$t('t_10_1745464073098')} class="mb-4">
+					<NGrid cols="1 m:2" xGap={24} yGap={24}>
+						<NGridItem>
+							<GeneralForm labelPlacement="top" />
+						</NGridItem>
+					</NGrid>
+				</NCard>
+			</div>
+		)
+	},
+})

frontend/apps/allin-ssl/src/views/settings/components/notificationSettings.tsx

@@ -0,0 +1,156 @@
+import { NCard, NButton, NList, NListItem, NTag, NSpace, NGrid, NGridItem, NSwitch } from 'naive-ui'
+import { useController } from '../useController'
+import { useStore } from '../useStore'
+import SvgIcon from '@components/svgIcon'
+import { $t } from '@locales/index'
+
+/**
+ * 告警通知标签页组件
+ */
+export default defineComponent({
+	name: 'NotificationSettings',
+	setup() {
+		const { notifyChannels, channelTypes } = useStore()
+		const { openAddEmailChannelModal, editChannelConfig, testChannelConfig, confirmDeleteChannel, handleEnableChange } =
+			useController()
+
+		// 获取已配置的渠道数量
+		const getConfiguredCount = (type: string) => {
+			return notifyChannels.value.filter((item) => item.type === type).length
+		}
+
+		// 检查渠道是否已配置
+		const isChannelConfigured = (type: string) => {
+			return getConfiguredCount(type) > 0
+		}
+
+		// 根据渠道类型和配置状态获取操作按钮
+		const getChannelActionButton = (type: string) => {
+			// 目前只有邮件通知是可配置的
+			if (type === 'mail') {
+				return (
+					<NButton strong secondary type="primary" onClick={() => openAddEmailChannelModal(getConfiguredCount(type))}>
+						{$t('t_1_1746676859550')}
+					</NButton>
+				)
+			}
+			// 其他渠道暂未支持
+			return (
+				<NButton strong secondary disabled>
+					{$t('t_2_1746676856700')}
+				</NButton>
+			)
+		}
+
+		// 渠道配置项数据
+		const channelConfigs = [
+			{
+				type: 'mail',
+				name: $t('t_3_1746676857930'),
+				description: $t('t_4_1746676861473'),
+				color: '#2080f0',
+			},
+			{
+				type: 'dingtalk',
+				name: $t('t_5_1746676856974'),
+				description: $t('t_6_1746676860886'),
+				color: '#1677ff',
+			},
+			{
+				type: 'wecom',
+				name: $t('t_7_1746676857191'),
+				description: $t('t_8_1746676860457'),
+				color: '#07c160',
+			},
+			{
+				type: 'feishu',
+				name: $t('t_9_1746676857164'),
+				description: $t('t_10_1746676862329'),
+				color: '#3370ff',
+			},
+			{
+				type: 'webhook',
+				name: $t('t_11_1746676859158'),
+				description: $t('t_12_1746676860503'),
+				color: '#531dab',
+			},
+		]
+		return () => (
+			<div class="notification-settings">
+				<NCard title={$t('t_13_1746676856842')} class="mb-4">
+					<NGrid cols="2 s:1 m:2" xGap={16} yGap={16}>
+						{channelConfigs.map((item) => (
+							<NGridItem key={item.type}>
+								<div class="flex justify-between items-center p-4 border rounded-md hover:shadow-sm transition-shadow">
+									<div class="flex items-center">
+										<SvgIcon icon={`notify-${item.type}`} size="3rem" />
+										<div class="ml-4">
+											<div class="flex items-center mb-1">
+												<span class="mr-2 font-medium">{item.name}</span>
+												{isChannelConfigured(item.type) && (
+													<NTag size="small" type="success">
+														{$t('t_8_1745735765753')} {getConfiguredCount(item.type)}
+													</NTag>
+												)}
+											</div>
+											<div class="text-gray-500 text-[1.2rem]">{item.description}</div>
+										</div>
+									</div>
+									<div>{getChannelActionButton(item.type)}</div>
+								</div>
+							</NGridItem>
+						))}
+					</NGrid>
+				</NCard>
+
+				{/* 已配置的通知渠道列表 */}
+				{notifyChannels.value.length > 0 && (
+					<NCard title={$t('t_14_1746676859019')} class="mb-4">
+						<NList bordered>
+							{notifyChannels.value.map((item) => (
+								<NListItem key={item.id}>
+									<div class=" items-center justify-between p-2 grid grid-cols-12">
+										<div class="flex items-center col-span-6">
+											<SvgIcon icon={`notify-${item.type}`} size="3rem" />
+											<div class="font-medium mb-1 mx-[1rem]">{item.name}</div>
+											<div class="flex items-center ">
+												<NTag type="info" size="small">
+													{(channelTypes.value as Record<string, string>)[item.type] || item.id}
+												</NTag>
+											</div>
+										</div>
+										<div class="flex items-center gap-4 col-span-3 justify-end">
+											<NSwitch
+												v-model:value={item.config.enabled}
+												onUpdateValue={() => handleEnableChange(item)}
+												checkedValue={'1'}
+												uncheckedValue={'0'}
+												v-slots={{
+													checked: () => <span>{$t('t_0_1745457486299')}</span>,
+													unchecked: () => <span>{$t('t_15_1746676856567')}</span>,
+												}}
+											/>
+										</div>
+										<div class="flex items-center gap-8 col-span-3 justify-end">
+											<NSpace>
+												<NButton size="small" onClick={() => editChannelConfig(item)}>
+													{$t('t_11_1745215915429')}
+												</NButton>
+												<NButton size="small" onClick={() => testChannelConfig(item)}>
+													{$t('t_16_1746676855270')}
+												</NButton>
+												<NButton size="small" type="error" onClick={() => confirmDeleteChannel(item)}>
+													{$t('t_12_1745215914312')}
+												</NButton>
+											</NSpace>
+										</div>
+									</div>
+								</NListItem>
+							))}
+						</NList>
+					</NCard>
+				)}
+			</div>
+		)
+	},
+})