github
/
allinssl
mirror of https://github.com/allinssl/allinssl
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【修复】部署网站选择，初始值和重置的问题

pull/135/head
chudong 2025-05-23 19:11:57 +08:00
parent ad833d6643
commit 52e853aab4
3 changed files with 83 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/apps/allin-ssl/src/components/dnsProviderSelect/index.tsx
View File

@ -115,12 +115,12 @@ export default defineComponent<DnsProviderSelectProps>({
> >
<NSelect <NSelect
class="flex-1 w-full" class="flex-1 w-full"
filterable
options={controller.dnsProviderRef.value} options={controller.dnsProviderRef.value}
renderLabel={renderLabel} renderLabel={renderLabel}
renderTag={({ option }: { option: any }) => renderTag={({ option }: { option: any }) =>
renderSingleSelectTag({ option: option as DnsProviderOption }) renderSingleSelectTag({ option: option as DnsProviderOption })
} }
filterable
filter={(pattern: string, option: any) => controller.handleFilter(pattern, option as DnsProviderOption)} filter={(pattern: string, option: any) => controller.handleFilter(pattern, option as DnsProviderOption)}
placeholder={props.type === 'dns' ? $t('t_3_1745490735059') : $t('t_0_1746858920894')} placeholder={props.type === 'dns' ? $t('t_3_1745490735059') : $t('t_0_1746858920894')}
value={controller.param.value.value} // 使用 controller 中的 param.value.value value={controller.param.value.value} // 使用 controller 中的 param.value.value

151
frontend/apps/allin-ssl/src/components/dnsProviderSelect/useController.tsx
View File

@ -1,13 +1,12 @@
import { ref, watch, onMounted, onUnmounted } from 'vue'; import { ref, watch, onMounted, onUnmounted } from 'vue'
import type { DnsProviderSelectProps, DnsProviderOption, DnsProviderType, DnsProviderSelectEmits } from './types'; import type { DnsProviderSelectProps, DnsProviderOption, DnsProviderType, DnsProviderSelectEmits } from './types'
// 绝对内部导入 - Stores // 绝对内部导入 - Stores
import { useStore } from '@layout/useStore'; import { useStore } from '@layout/useStore'
// 绝对内部导入 - Hooks // 绝对内部导入 - Hooks
import { useError } from '@baota/hooks/error'; import { useError } from '@baota/hooks/error'
// 绝对内部导入 - Utilities // 绝对内部导入 - Utilities
import { $t } from '@locales/index'; import { $t } from '@locales/index'
/** /**
* @function useDnsProviderSelectController * @function useDnsProviderSelectController
@ -16,29 +15,26 @@ import { $t } from '@locales/index';
* @param emit - 组件的 emit 函数 * @param emit - 组件的 emit 函数
* @returns {DnsProviderControllerExposes} 控制器暴露给视图的数据和方法 * @returns {DnsProviderControllerExposes} 控制器暴露给视图的数据和方法
*/ */
export function useDnsProviderSelectController( export function useDnsProviderSelectController(props: DnsProviderSelectProps, emit: DnsProviderSelectEmits) {
props: DnsProviderSelectProps, const { handleError } = useError()
emit: DnsProviderSelectEmits, const { fetchDnsProvider, resetDnsProvider, dnsProvider } = useStore()
) {
const { handleError } = useError();
const { fetchDnsProvider, resetDnsProvider, dnsProvider } = useStore();
const param = ref<DnsProviderOption>({ const param = ref<DnsProviderOption>({
label: '', label: '',
value: '', value: '',
type: '', type: '',
}); })
const dnsProviderRef = ref<DnsProviderOption[]>([]); const dnsProviderRef = ref<DnsProviderOption[]>([])
const isLoading = ref(false); const isLoading = ref(false)
const errorMessage = ref(''); const errorMessage = ref('')
/** /**
* @function goToAddDnsProvider * @function goToAddDnsProvider
* @description 跳转到DNS提供商授权页面 * @description 跳转到DNS提供商授权页面
*/ */
const goToAddDnsProvider = () => { const goToAddDnsProvider = () => {
window.open('/auth-api-manage', '_blank'); window.open('/auth-api-manage', '_blank')
}; }
/** /**
* @function handleUpdateType * @function handleUpdateType
@ -47,26 +43,32 @@ export function useDnsProviderSelectController(
const handleUpdateType = () => { const handleUpdateType = () => {
const selectedProvider = dnsProvider.value.find((item) => { const selectedProvider = dnsProvider.value.find((item) => {
// 根据 props.valueType 决定是比较 item.value 还是 item.type // 根据 props.valueType 决定是比较 item.value 还是 item.type
const valueToCompare = props.valueType === 'value' ? item.value : item.type; const valueToCompare = props.valueType === 'value' ? item.value : item.type
return valueToCompare === param.value.value; return valueToCompare === param.value.value
}); })
if (selectedProvider) { if (selectedProvider) {
param.value = { param.value = {
label: selectedProvider.label, label: selectedProvider.label,
value: props.valueType === 'value' ? selectedProvider.value : selectedProvider.type, value: props.valueType === 'value' ? selectedProvider.value : selectedProvider.type,
type: props.valueType === 'value' ? selectedProvider.type : selectedProvider.value, type: props.valueType === 'value' ? selectedProvider.type : selectedProvider.value,
}; }
} else if (dnsProvider.value.length > 0 && param.value.value === '') { emit('update:value', { ...param.value })
// 如果 param.value 为空（例如初始状态或清空后），且 dnsProvider 列表不为空，则默认选中第一个 } else {
param.value = { // 如果找不到匹配的选项，只有在 param.value.value 为空时才设置默认值
label: dnsProvider.value[0]?.label || '', // 这样可以避免覆盖用户设置的初始值
value: props.valueType === 'value' ? dnsProvider.value[0]?.value || '' : dnsProvider.value[0]?.type || '', if (param.value.value === '' && dnsProvider.value.length > 0) {
type: props.valueType === 'value' ? dnsProvider.value[0]?.type || '' : dnsProvider.value[0]?.value || '', param.value = {
}; label: dnsProvider.value[0]?.label || '',
value: props.valueType === 'value' ? dnsProvider.value[0]?.value || '' : dnsProvider.value[0]?.type || '',
type: props.valueType === 'value' ? dnsProvider.value[0]?.type || '' : dnsProvider.value[0]?.value || '',
}
emit('update:value', { ...param.value })
}
// 如果 param.value.value 不为空但找不到匹配项，保持当前值不变
// 这种情况可能是数据还未加载完成或者选项暂时不可用
} }
emit('update:value', { ...param.value }); }
};
/** /**
* @function handleUpdateValue * @function handleUpdateValue
@ -74,9 +76,9 @@ export function useDnsProviderSelectController(
* @param value - 新的选中值 * @param value - 新的选中值
*/ */
const handleUpdateValue = (value: string) => { const handleUpdateValue = (value: string) => {
param.value.value = value; param.value.value = value
handleUpdateType(); handleUpdateType()
}; }
/** /**
* @function loadDnsProviders * @function loadDnsProviders
@ -84,24 +86,26 @@ export function useDnsProviderSelectController(
* @param type - DNS提供商类型，默认为 props.type * @param type - DNS提供商类型，默认为 props.type
*/ */
const loadDnsProviders = async (type: DnsProviderType = props.type) => { const loadDnsProviders = async (type: DnsProviderType = props.type) => {
isLoading.value = true; isLoading.value = true
errorMessage.value = ''; errorMessage.value = ''
try { try {
await fetchDnsProvider(type); await fetchDnsProvider(type)
// 数据加载后，如果 props.value 有值，尝试根据 props.value 初始化 param // 数据加载后，优先使用 props.value 设置初始值
// 否则 handleUpdateType 会尝试选择第一个或保持空
if (props.value) { if (props.value) {
handleUpdateValue(props.value); // 直接设置 param.value.value，然后调用 handleUpdateType 来更新完整信息
param.value.value = props.value
handleUpdateType()
} else { } else {
handleUpdateType(); // 确保在 dnsProvider 更新后，param 也得到相应更新 // 只有在 props.value 为空时才考虑设置默认值
handleUpdateType()
} }
} catch (error) { } catch (error) {
errorMessage.value = typeof error === 'string' ? error : $t('t_0_1746760933542'); // '获取DNS提供商列表失败' errorMessage.value = typeof error === 'string' ? error : $t('t_0_1746760933542') // '获取DNS提供商列表失败'
handleError(error); handleError(error)
} finally { } finally {
isLoading.value = false; isLoading.value = false
} }
}; }
/** /**
* @function handleFilter * @function handleFilter
@ -111,8 +115,8 @@ export function useDnsProviderSelectController(
* @returns {boolean} 是否匹配 * @returns {boolean} 是否匹配
*/ */
const handleFilter = (pattern: string, option: DnsProviderOption): boolean => { const handleFilter = (pattern: string, option: DnsProviderOption): boolean => {
return option.label.toLowerCase().includes(pattern.toLowerCase()); return option.label.toLowerCase().includes(pattern.toLowerCase())
}; }
watch( watch(
() => dnsProvider.value, () => dnsProvider.value,
@ -122,23 +126,30 @@ export function useDnsProviderSelectController(
label: item.label, label: item.label,
value: props.valueType === 'value' ? item.value : item.type, value: props.valueType === 'value' ? item.value : item.type,
type: props.valueType === 'value' ? item.type : item.value, // 确保 type 也被正确映射 type: props.valueType === 'value' ? item.type : item.value, // 确保 type 也被正确映射
})) || []; })) || []
// 当 dnsProvider 列表更新后，重新评估 param 的值 // 当 dnsProvider 列表更新后，重新评估 param 的值
// 如果当前 param.value 对应的项仍然存在，则更新 param 的 label 和 type const currentParamExists = dnsProviderRef.value.some((opt) => opt.value === param.value.value)
// 如果不存在（例如，列表刷新后原来的项没了），则尝试根据 props.value (如果存在) 或列表第一项来设定
const currentParamExists = dnsProviderRef.value.some(opt => opt.value === param.value.value);
if (currentParamExists) { if (currentParamExists) {
handleUpdateType(); // 如果当前值在新列表中存在，更新完整信息
} else if (props.value && dnsProviderRef.value.some(opt => opt.value === props.value)) { handleUpdateType()
handleUpdateValue(props.value); } else if (props.value && dnsProviderRef.value.some((opt) => opt.value === props.value)) {
} else { // 如果 props.value 在新列表中存在，使用 props.value
// 如果 props.value 也不在新的列表里，或者 props.value 为空，则默认选择第一个或清空 param.value.value = props.value
param.value.value = dnsProviderRef.value?.[0]?.value || ''; handleUpdateType()
handleUpdateType(); } else if (param.value.value === '') {
// 只有在当前值为空时才设置默认值
if (dnsProviderRef.value.length > 0) {
param.value.value = dnsProviderRef.value[0]?.value || ''
handleUpdateType()
}
} }
// 如果当前值不为空但在新列表中不存在，保持当前值不变
// 这样可以避免在数据加载过程中意外覆盖用户设置的值
}, },
{ deep: true }, // 监听 dnsProvider 数组内部变化 { deep: true }, // 监听 dnsProvider 数组内部变化
); )
watch( watch(
() => props.value, () => props.value,
@ -146,26 +157,26 @@ export function useDnsProviderSelectController(
// 仅当外部 props.value 与内部 param.value.value 不一致时才更新 // 仅当外部 props.value 与内部 param.value.value 不一致时才更新
// 避免因子组件 emit('update:value') 导致父组件 props.value 更新，从而再次触发此 watch 造成的循环 // 避免因子组件 emit('update:value') 导致父组件 props.value 更新，从而再次触发此 watch 造成的循环
if (newValue !== param.value.value) { if (newValue !== param.value.value) {
handleUpdateValue(newValue); handleUpdateValue(newValue)
} }
}, },
{ immediate: true }, { immediate: true },
); )
watch( watch(
() => props.type, () => props.type,
(newType) => { (newType) => {
loadDnsProviders(newType); loadDnsProviders(newType)
} },
); )
onMounted(() => { onMounted(() => {
loadDnsProviders(props.type); loadDnsProviders(props.type)
}); })
onUnmounted(() => { onUnmounted(() => {
resetDnsProvider(); resetDnsProvider()
}); })
return { return {
param, param,
@ -176,5 +187,5 @@ export function useDnsProviderSelectController(
handleUpdateValue, handleUpdateValue,
loadDnsProviders, loadDnsProviders,
handleFilter, handleFilter,
}; }
} }

2
frontend/apps/allin-ssl/src/views/autoDeploy/children/workflowView/node/deploy/model.tsx
View File

@ -125,7 +125,7 @@ export default defineComponent({
param.value.siteName = [] param.value.siteName = []
} }
param.value.provider_id = val.value param.value.provider_id = val.value
}, },
} }
return (<DnsProviderSelect {...dnsProviderProps} />) as VNode return (<DnsProviderSelect {...dnsProviderProps} />) as VNode
}), }),