From dc188b1ed8abf2afdad4f18af11a0790979b1aab Mon Sep 17 00:00:00 2001 From: smail Date: Tue, 8 Sep 2026 16:26:11 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=85=8D=E7=BD=AE=E4=BF=9D?= =?UTF-8?q?=E5=AD=98=E6=8F=90=E7=A4=BA=E9=97=AA=E7=83=81=E5=B9=B6=E4=BF=9D?= =?UTF-8?q?=E7=95=99=E7=9C=9F=E5=AE=9E=E9=94=99=E8=AF=AF=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ConfigEditor/ConfigEditor.vue | 46 ++--- .../ConfigSettings/ConfigSettings.js | 58 ++++-- test/frontend/config-settings.test.mjs | 182 +++++++++++++++++- 3 files changed, 242 insertions(+), 44 deletions(-) diff --git a/frontend/src/views/components/ConfigSettings/ConfigEditor/ConfigEditor.vue b/frontend/src/views/components/ConfigSettings/ConfigEditor/ConfigEditor.vue index 85ba13c..1c754e7 100644 --- a/frontend/src/views/components/ConfigSettings/ConfigEditor/ConfigEditor.vue +++ b/frontend/src/views/components/ConfigSettings/ConfigEditor/ConfigEditor.vue @@ -13,7 +13,7 @@ size="small" plain :loading="loading" - :disabled="!!working || sectionLoading || loading" + :disabled="busy || sectionLoading || loading" @click="refreshPage" > 刷新状态 @@ -48,13 +48,21 @@ show-icon class="config-alert" /> +
@@ -68,7 +76,7 @@ type="password" show-password clearable - :disabled="!canWrite || sectionLoading || !!working || !!sectionError || !!pendingCandidate" + :disabled="!canWrite || sectionLoading || busy || !!sectionError || !!pendingCandidate" :placeholder="secretField.placeholder" autocomplete="new-password" @update:model-value="updateSecret" @@ -77,14 +85,14 @@
- 保存配置 + {{ continuingSave ? '继续保存' : '保存配置' }} - 继续保存 - - 放弃更改 @@ -141,7 +139,9 @@ import ConfigForm from '../ConfigForm/ConfigForm.vue' const { availabilityError, loading, - working, + busy, + showPendingRecovery, + continuingSave, status, selectedSection, currentSection, @@ -151,6 +151,7 @@ const { updateField, updateSecret, sectionError, + saveError, secretField, secretValue, pendingCandidate, @@ -160,8 +161,7 @@ const { hasChanges, canWrite, refreshPage, - saveAndApply, - continuePending + saveAndApply } = inject('smail-config-page') diff --git a/frontend/src/views/components/ConfigSettings/ConfigSettings.js b/frontend/src/views/components/ConfigSettings/ConfigSettings.js index a42bb34..590e7dc 100644 --- a/frontend/src/views/components/ConfigSettings/ConfigSettings.js +++ b/frontend/src/views/components/ConfigSettings/ConfigSettings.js @@ -41,6 +41,9 @@ export function usePage(pageKey = 'base') { const loading = ref(false) const availabilityError = ref('') const working = ref('') + // 一次保存跨越暂存、应用和回读；中间候选不是需要用户恢复的失败记录。 + const saveFlow = ref('') + const busy = computed(() => !!working.value || !!saveFlow.value) const backupsLoading = ref(false) const auditLoading = ref(false) const backupsError = ref('') @@ -67,10 +70,13 @@ export function usePage(pageKey = 'base') { const formErrors = ref({}) const loadedText = ref('') const sectionError = ref('') + const saveError = ref('') const secretValue = ref('') const confirmed = ref(false) const savedGeneration = ref(0) const pendingCandidate = ref(null) + const showPendingRecovery = computed(() => !!pendingCandidate.value && !saveFlow.value) + const continuingSave = computed(() => saveFlow.value === 'resume' || showPendingRecovery.value) const pendingScopeHint = computed(() => { const pending = pendingCandidate.value if (pending?.section === 'plugins' && apiSection() === 'plugins') { @@ -178,16 +184,18 @@ export function usePage(pageKey = 'base') { const canOperate = () => !disposed && canWrite.value && !loading.value && !working.value && !sectionLoading.value && !sectionError.value && !availabilityError.value const canEdit = () => canOperate() && !pendingCandidate.value && !savedGeneration.value const updateField = (path, value) => { - if (!canEdit()) return + if (saveFlow.value || !canEdit()) return const updated = updateFormConfig(editorText.value, selectedSection.value, path, value) if (updated === editorText.value) return editorText.value = updated + saveError.value = '' if (Object.keys(formErrors.value).length) formErrors.value = validateFormConfig(selectedSection.value, formConfig.value) invalidateCandidate() } const updateSecret = value => { - if (!canEdit() || !secretField.value || secretValue.value === value) return + if (saveFlow.value || !canEdit() || !secretField.value || secretValue.value === value) return secretValue.value = value + saveError.value = '' invalidateCandidate() } @@ -246,6 +254,7 @@ export function usePage(pageKey = 'base') { const managePending = async action => { if (!canOperate() || !pendingCandidate.value) return false + saveError.value = '' working.value = action try { if (action === 'cancel') { @@ -268,7 +277,10 @@ export function usePage(pageKey = 'base') { if (action === 'cancel') ElMessage.success('本次更改已放弃') return true } catch (error) { - if (error !== 'cancel' && error !== 'close') ElMessage.error(error.message || '未完成的配置更改处理失败') + if (error !== 'cancel' && error !== 'close') { + saveError.value = error.message || '未完成的配置更改处理失败' + ElMessage.error(saveError.value) + } return false } finally { working.value = '' @@ -280,6 +292,7 @@ export function usePage(pageKey = 'base') { const section = apiSection() sectionLoading.value = true sectionError.value = '' + saveError.value = '' formErrors.value = {} editorText.value = '' loadedText.value = '' @@ -571,6 +584,7 @@ export function usePage(pageKey = 'base') { const saveConfig = async ({ quiet = false } = {}) => { if (!canEdit() || !checkForm()) return false + saveError.value = '' working.value = 'save' try { const request = buildRequest() @@ -588,7 +602,8 @@ export function usePage(pageKey = 'base') { return true } catch (error) { if (isRecentAuthenticationCancelled(error)) return false - ElMessage.error(error.message || '配置保存失败') + saveError.value = error.message || '配置保存失败' + ElMessage.error(saveError.value) return false } finally { working.value = '' @@ -597,6 +612,7 @@ export function usePage(pageKey = 'base') { const applyConfig = async ({ successMessage = '配置已保存' } = {}) => { if (!canOperate() || !savedGeneration.value) return false + saveError.value = '' if (!savedInput || savedInput.text !== editorText.value || savedInput.secret !== secretValue.value) { invalidateCandidate() ElMessage.warning('填写内容已变更，请重新保存配置') @@ -638,7 +654,8 @@ export function usePage(pageKey = 'base') { ElMessage.warning(sectionError.value) return false } - ElMessage.error(error.message || '配置保存失败') + saveError.value = error.message || '配置保存失败' + ElMessage.error(saveError.value) return false } finally { working.value = '' @@ -646,21 +663,23 @@ export function usePage(pageKey = 'base') { } const saveAndApply = async () => { - if (pendingCandidate.value) { - await continuePending() - return + if (saveFlow.value || !canOperate()) return false + saveFlow.value = pendingCandidate.value ? 'resume' : 'save' + try { + if (pendingCandidate.value) { + if (!pendingCandidate.value.sameSession && !await managePending('resume')) return false + return await applyConfig() + } + const saved = await saveConfig({ quiet: true }) + return saved ? await applyConfig({ successMessage: '配置已保存' }) : false + } finally { + saveFlow.value = '' } - const saved = await saveConfig({ quiet: true }) - if (saved) await applyConfig({ successMessage: '配置已保存' }) } const continuePending = async () => { - if (!pendingCandidate.value) return - if (!pendingCandidate.value.sameSession) { - const resumed = await managePending('resume') - if (!resumed) return - } - await applyConfig() + if (!pendingCandidate.value) return false + return saveAndApply() } const previewRollback = async () => { @@ -735,7 +754,7 @@ export function usePage(pageKey = 'base') { } const beforeLeave = async () => { - if (working.value) { + if (busy.value) { ElMessage.warning('当前操作尚未完成，请稍后再切换页面') return false } @@ -746,7 +765,7 @@ export function usePage(pageKey = 'base') { '确认离开当前页', { type: 'warning', confirmButtonText: '离开页面', cancelButtonText: '继续编辑' } ) - return !working.value + return !busy.value } catch { return false } @@ -770,9 +789,10 @@ export function usePage(pageKey = 'base') { return { pendingScopeHint, + saveFlow, busy, showPendingRecovery, continuingSave, loading, availabilityError, working, status, stateLabel, stateTagType, sectionOptions: sections, selectedSection, currentSection, sectionLoading, editorText, formConfig, formErrors, updateField, updateSecret, - sectionError, sensitiveHint, secretField, secretValue, + sectionError, saveError, sensitiveHint, secretField, secretValue, confirmed, savedGeneration, pendingCandidate, managePending, validationResult, canWrite, canRollback, canAudit, canExportAudit, backupsLoading, backupsError, backups, rollbackGeneration, rollbackConfirmed, rollbackPreview, auditLoading, auditError, auditItems, loadAll, loadSection, validateConfig, saveConfig, applyConfig, saveAndApply, continuePending, diff --git a/test/frontend/config-settings.test.mjs b/test/frontend/config-settings.test.mjs index 2bb9e7e..b41eeac 100644 --- a/test/frontend/config-settings.test.mjs +++ b/test/frontend/config-settings.test.mjs @@ -444,7 +444,10 @@ test('配置编辑页将验证、候选保存和应用精简为单一保存操 assert.doesNotMatch(sharedCss + editorCss, /change-workflow|step-number/) assert.match(template, /@click="saveAndApply"/) assert.match(template, /保存配置/) - assert.match(template, /@click="continuePending"/) + assert.match(template, /continuingSave \? '继续保存' : '保存配置'/) + assert.match(template, /v-if="showPendingRecovery"/) + assert.match(template, /v-if="showPendingRecovery && pendingScopeHint"/) + assert.match(template, /v-if="saveError"[\s\S]*?:title="saveError"[\s\S]*?type="error"/) assert.match(template, /继续保存/) assert.match(template, /v-if="canWrite" class="editor-footer"/) assert.match(template, /@click="managePending\('cancel'\)"/) @@ -498,6 +501,181 @@ test('保存并应用一次点击按候选协议连续完成保存和应用', as assert.equal(page.formConfig.value.listener.port, 2525) }) +test('一键保存的所有异步阶段保持忙碌，不闪现恢复提示或允许重复操作', { timeout: 5000 }, async t => { + const stages = Array.from({ length: 7 }, () => ({ entered: deferred(), release: deferred() })) + t.after(() => stages.forEach(stage => stage.release.resolve())) + let requestIndex = 0 + let testing = false + let pending = null + let active = { + meta: { generation: 1 }, + tls: { management: 'custom', mode: 'managed_upload', defaultDirectory: 'config/ssl', customDirectory: 'config/ssl', certificateRef: 'config/ssl/public.crt', privateKeyRef: 'config/ssl/private.key' } + } + const pause = async () => { + if (!testing) return + const stage = stages[requestIndex++] + assert.ok(stage, '不应产生重复请求') + stage.entered.resolve() + await stage.release.promise + } + const { page, successes } = fixture(() => {}, 'ssl', { http: { + get: async path => { + await pause() + return { errorNo: 0, data: path.endsWith('/pending') ? pending : path.endsWith('/status') ? { activeGeneration: active.meta.generation } : active } + }, + put: async (path, body) => { + await pause() + pending = { generation: 2, candidateId: 'continuous-save', section: 'ssl', sameSession: true, payload: body.payload } + return { errorNo: 0, data: pending } + }, + post: async () => { + await pause() + active = { ...pending.payload, meta: { generation: 2 } } + pending = null + return { errorNo: 0, data: { generation: 2 } } + } + } }) + await page.loadAll() + page.updateField(['tls', 'certificateRef'], 'D:/certs/public.crt') + const require = createRequire(new URL('../../frontend/package.json', import.meta.url)) + const { watch } = require('vue') + const transitions = [] + const stop = watch(() => [page.working.value, page.saveFlow.value, page.pendingCandidate.value], () => { + transitions.push({ working: page.working.value, flow: page.saveFlow.value, pending: !!page.pendingCandidate.value, busy: page.busy.value, recovery: page.showPendingRecovery.value }) + }, { flush: 'sync' }) + t.after(stop) + testing = true + const saving = page.saveAndApply() + for (const stage of stages) { + await Promise.race([stage.entered.promise, saving.then(() => { throw new Error('保存流程提前结束') })]) + assert.equal(page.busy.value, true) + assert.equal(page.saveFlow.value, 'save') + assert.equal(page.showPendingRecovery.value, false) + assert.equal(page.continuingSave.value, false) + const input = page.editorText.value + page.updateField(['tls', 'certificateRef'], 'D:/blocked.crt') + assert.equal(page.editorText.value, input) + assert.equal(await page.saveAndApply(), false) + assert.equal(await page.continuePending(), false) + assert.equal(await page.beforeLeave(), false) + stage.release.resolve() + } + assert.equal(await saving, true) + assert.equal(requestIndex, 7) + assert.equal(page.busy.value, false) + assert.equal(page.saveFlow.value, '') + assert.equal(page.showPendingRecovery.value, false) + assert.deepEqual(successes, ['配置已保存']) + const gaps = transitions.filter(state => state.pending && !state.working && state.flow) + assert.ok(gaps.length > 0, '必须检查暂存与应用之间的同步状态切换') + assert.ok(gaps.every(state => state.busy && !state.recovery)) +}) + +for (const failure of ['save', 'apply', 'apply-auth-cancel', 'readback']) { + test(`一键保存 ${failure} 后解除忙碌，真实失败仍提示且未应用的候选可以恢复`, async () => { + let fail = true + let applied = false + let pending = null + let writes = 0 + const config = { + meta: { generation: 1 }, + tls: { management: 'custom', mode: 'managed_upload', defaultDirectory: 'config/ssl', customDirectory: 'config/ssl', certificateRef: 'config/ssl/public.crt', privateKeyRef: 'config/ssl/private.key' } + } + const { page, messages, successes } = fixture(() => {}, 'ssl', { http: { + get: async path => { + if (fail && applied && failure === 'readback') throw new Error('模拟回读失败') + return { errorNo: 0, data: path.endsWith('/pending') ? pending : path.endsWith('/status') ? { activeGeneration: applied ? 2 : 1 } : { ...config, meta: { generation: applied ? 2 : 1 } } } + }, + put: async (path, body) => { + writes++ + if (fail && failure === 'save') throw new Error('模拟保存失败') + pending = { generation: 2, candidateId: 'failed-save', section: 'ssl', sameSession: true, payload: body.payload } + return { errorNo: 0, data: pending } + }, + post: async () => { + writes++ + if (fail && failure === 'apply') throw new Error('模拟应用失败') + if (fail && failure === 'apply-auth-cancel') throw Object.assign(new Error('需要最近认证'), { apiErrorCode: 'RECENT_AUTH_REQUIRED' }) + applied = true + pending = null + return { errorNo: 0, data: { generation: 2 } } + } + } }) + await page.loadAll() + page.updateField(['tls', 'certificateRef'], 'D:/certs/public.crt') + assert.equal(await page.saveAndApply(), false) + assert.equal(page.busy.value, false) + assert.equal(page.saveFlow.value, '') + assert.deepEqual(successes, []) + const recoverable = ['apply', 'apply-auth-cancel'].includes(failure) + assert.equal(page.showPendingRecovery.value, recoverable) + assert.equal(page.continuingSave.value, recoverable) + if (failure === 'apply-auth-cancel') { + assert.deepEqual(messages, []) + assert.equal(page.saveError.value, '') + } else { + assert.ok(messages.length > 0, '真实失败不能被隐藏') + assert.equal(page.saveError.value || page.sectionError.value, messages.at(-1), '错误必须保留在页面中') + } + if (failure === 'save') { + page.updateField(['tls', 'certificateRef'], 'D:/certs/fixed/public.crt') + assert.equal(page.saveError.value, '') + } + if (recoverable) { + fail = false + const writesBefore = writes + const continuing = page.continuePending() + assert.equal(page.saveFlow.value, 'resume') + assert.equal(page.continuingSave.value, true) + assert.equal(page.showPendingRecovery.value, false) + assert.equal(page.saveError.value, '') + assert.equal(await continuing, true) + assert.equal(writes, writesBefore + 1, '只应用已有候选，不重复保存') + assert.equal(page.showPendingRecovery.value, false) + assert.deepEqual(successes, ['配置已保存']) + } + }) +} + +for (const rejected of [false, true]) { + test(`恢复其他会话候选期间保持按钮稳定，恢复失败保留入口：失败=${rejected}`, async () => { + let active = { + meta: { generation: 1 }, + tls: { management: 'custom', mode: 'managed_upload', defaultDirectory: 'config/ssl', customDirectory: 'config/ssl', certificateRef: 'config/ssl/public.crt', privateKeyRef: 'config/ssl/private.key' } + } + let pending = { generation: 2, section: 'ssl', sameSession: false, candidateId: 'another-session', payload: active } + const requests = [] + const { page, messages } = fixture(() => {}, 'ssl', { http: { + get: async path => ({ errorNo: 0, data: path.endsWith('/pending') ? pending : path.endsWith('/status') ? { activeGeneration: active.meta.generation } : active }), + post: async (path, body) => { + assert.equal(page.saveFlow.value, 'resume') + assert.equal(page.busy.value, true) + assert.equal(page.continuingSave.value, true) + assert.equal(page.showPendingRecovery.value, false) + requests.push(path) + if (path.endsWith('/pending')) { + assert.equal(body.action, 'resume') + if (rejected) throw new Error('模拟候选恢复失败') + pending = { ...pending, sameSession: true } + } else { + assert.equal(body.candidateId, 'another-session') + active = { ...active, meta: { generation: 2 } } + pending = null + } + return { errorNo: 0, data: { generation: 2 } } + } + } }) + await page.loadAll() + assert.equal(page.showPendingRecovery.value, true) + assert.equal(await page.continuePending(), !rejected) + assert.equal(page.busy.value, false) + assert.equal(page.showPendingRecovery.value, rejected) + assert.equal(page.saveError.value, rejected ? '模拟候选恢复失败' : '') + assert.deepEqual(requests, rejected ? ['/api/v1/config/pending'] : ['/api/v1/config/pending', '/api/v1/config/ssl/apply']) + assert.deepEqual(messages, rejected ? ['模拟候选恢复失败'] : []) + }) +} + test('最近认证过期时在当前页确认密码并自动重试保存和应用', async () => { const requests = [] let pending = null @@ -631,7 +809,7 @@ test('标题合并配置状态，保留刷新保护和降级提示，不再渲 assert.doesNotMatch(header, /stateLabel|运行状态|state-tag/) assert.match(header, /v-for="issue in status.degradedReasons \|\| \[\]"/) assert.match(header, /v-if="!loading && !availabilityError"/) - assert.match(header, /:disabled="!!working \|\| sectionLoading \|\| loading"/) + assert.match(header, /:disabled="busy \|\| sectionLoading \|\| loading"/) assert.match(header, /@click="refreshPage"/) assert.doesNotMatch(header, /