【同步】前端项目源码

【修复】工作流兼容问题

frontend/apps/allin-ssl/src/components/notifyProviderSelect/index.tsx

@@ -0,0 +1,178 @@
+import { defineComponent, VNode } from 'vue'
+import { NButton, NFlex, NFormItemGi, NGrid, NSelect, NText } from 'naive-ui'
+import { $t } from '@locales/index'
+import { useStore } from '@/views/layout/useStore'
+import SvgIcon from '@components/svgIcon'
+
+interface NotifyProviderOption {
+	label: string
+	value: string
+	type: string
+}
+
+interface NotifyProviderSelectProps {
+	path: string
+	value: string
+	valueType: 'value' | 'type'
+	isAddMode: boolean
+}
+
+export default defineComponent({
+	name: 'NotifyProviderSelect',
+	props: {
+		// 表单，用于绑定表单的值
+		path: {
+			type: String,
+			default: '',
+		},
+		// 表单的值
+		value: {
+			type: String,
+			default: '',
+		},
+		// 表单的值类型
+		valueType: {
+			type: String,
+			default: 'value',
+		},
+
+		// 是否为添加模式
+		isAddMode: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['update:value'],
+	setup(props: NotifyProviderSelectProps, { emit }) {
+		// 获取消息通知提供商
+		const { fetchNotifyProvider, notifyProvider } = useStore()
+		// 表单的值
+		const param = ref<NotifyProviderOption>({
+			label: '',
+			value: '',
+			type: '',
+		})
+		const notifyProviderRef = ref<NotifyProviderOption[]>([])
+
+		/**
+		 * 打开通知渠道配置页面
+		 */
+		const goToAddNotifyProvider = () => {
+			window.open('/settings?tab=notification', '_blank')
+		}
+
+		/**
+		 * 渲染单选标签
+		 * @param option - 选项
+		 * @returns 渲染后的VNode
+		 */
+		const renderSingleSelectTag = ({ option }: Record<string, any>): VNode => {
+			return (
+				<div class="flex items-center">
+					{option.label ? (
+						<NFlex>
+							<SvgIcon icon={`notify-${props.valueType === 'value' ? option.type : option.value}`} size="2rem" />
+							<NText>{option.label}</NText>
+						</NFlex>
+					) : (
+						<NText>{$t('t_0_1745887835267')}</NText>
+					)}
+				</div>
+			)
+		}
+
+		/**
+		 * 渲染标签
+		 * @param option - 选项
+		 * @returns 渲染后的VNode
+		 */
+		const renderLabel = (option: NotifyProviderOption): VNode => {
+			return (
+				<NFlex>
+					<SvgIcon icon={`notify-${props.valueType === 'value' ? option.type : option.value}`} size="2rem" />
+					<NText>{option.label}</NText>
+				</NFlex>
+			)
+		}
+
+		/**
+		 * @description 更新类型
+		 * @param option - 选项
+		 * @param value - 值
+		 */
+		const handleUpdateType = (value: string) => {
+			if (!value) return
+			const row = notifyProviderRef.value.find((item) => {
+				return item.value === value
+			})
+			param.value = {
+				label: row?.label || '',
+				value: row?.value || '',
+				type: row?.type || '',
+			}
+		}
+
+		/**
+		 * 更新表单的值
+		 * @param value - 表单的值
+		 */
+		const handleUpdateValue = (value: string) => {
+			handleUpdateType(value)
+			emit('update:value', param.value)
+		}
+
+		// 监听父组件的值
+		watch(
+			() => props.value,
+			(newVal) => {
+				fetchNotifyProvider()
+				handleUpdateType(newVal)
+			},
+			{ immediate: true },
+		)
+
+		// 监听消息通知提供商
+		watch(
+			() => notifyProvider.value,
+			(newVal) => {
+				notifyProviderRef.value =
+					newVal.map((item) => ({
+						label: item.label,
+						value: props.valueType === 'value' ? item.value : item.type,
+						type: props.valueType === 'value' ? item.type : item.value,
+					})) || []
+				handleUpdateType(props.value)
+			},
+		)
+
+		return () => (
+			<NGrid cols={24}>
+				<NFormItemGi span={props.isAddMode ? 13 : 24} label={$t('t_1_1745887832941')} path={props.path}>
+					<NSelect
+						class="flex-1 w-full "
+						options={notifyProviderRef.value}
+						renderLabel={renderLabel}
+						renderTag={renderSingleSelectTag}
+						filterable
+						placeholder={$t('t_0_1745887835267')}
+						v-model:value={param.value.value}
+						onUpdateValue={handleUpdateValue}
+						v-slots={{
+							empty: () => {
+								return <span class="text-[1.4rem]">{$t('t_0_1745887835267')}</span>
+							},
+						}}
+					/>
+				</NFormItemGi>
+				{props.isAddMode && (
+					<NFormItemGi span={11}>
+						<NButton class="mx-[8px]" onClick={goToAddNotifyProvider}>
+							{$t('t_2_1745887834248')}
+						</NButton>
+						<NButton onClick={fetchNotifyProvider}>{$t('t_0_1746497662220')}</NButton>
+					</NFormItemGi>
+				)}
+			</NGrid>
+		)
+	},
+})