xuans/Scert
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(settings): 系统设置单项独立保存且解决按钮禁用光标转圈问题

Browse Source
This commit is contained in:
xuans 2026-10-16 19:01:36 +08:00
parent bfc36d3ad3
commit 348c7d42dd
3 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/views/Dashboard/Dashboard.css
View File

@ -62,7 +62,7 @@ h2 {
} }
.primary-button:disabled, .primary-button:disabled,
.secondary-button:disabled { .secondary-button:disabled {
cursor: wait; cursor: not-allowed;
opacity: 0.6; opacity: 0.6;
} }
.status-dot { .status-dot {

27
frontend/src/views/Dashboard/SettingsModal.js
View File

@ -6,18 +6,26 @@ export function useSettingsModal(saveSettings) {
const activeSection = ref(sections[0]); const activeSection = ref(sections[0]);
async function submitSettings(event) { async function submitSettings(event) {
const invalid = event.currentTarget.querySelector( const form = event && event.currentTarget ? event.currentTarget : null;
"input:invalid, select:invalid, textarea:invalid", let invalid = null;
); const currentPanel = form && form.querySelector ? form.querySelector(`[data-settings-section="${activeSection.value}"]`) : null;
if (currentPanel && typeof currentPanel.querySelector === "function") {
invalid = currentPanel.querySelector("input:invalid, select:invalid, textarea:invalid");
} else if (form && typeof form.querySelector === "function") {
invalid = form.querySelector("input:invalid, select:invalid, textarea:invalid");
}
if (invalid) { if (invalid) {
const section = invalid.closest("[data-settings-section]"); const section = invalid.closest && invalid.closest("[data-settings-section]");
if (section) activeSection.value = section.dataset.settingsSection; if (section && section.dataset && section.dataset.settingsSection) {
activeSection.value = section.dataset.settingsSection;
}
await nextTick(); await nextTick();
invalid.focus(); if (invalid.focus) invalid.focus();
invalid.reportValidity(); if (invalid.reportValidity) invalid.reportValidity();
return; return;
} }
await saveSettings(); await saveSettings(activeSection.value);
} }
async function navigateTabs(event) { async function navigateTabs(event) {
@ -32,7 +40,8 @@ export function useSettingsModal(saveSettings) {
const tablist = event.currentTarget.parentElement; const tablist = event.currentTarget.parentElement;
activeSection.value = sections[next]; activeSection.value = sections[next];
await nextTick(); await nextTick();
tablist.querySelector(`#settings-tab-${sections[next]}`)?.focus(); const targetTab = tablist && tablist.querySelector ? tablist.querySelector('#settings-tab-' + sections[next]) : null;
if (targetTab && targetTab.focus) targetTab.focus();
} }
return { activeSection, submitSettings, navigateTabs }; return { activeSection, submitSettings, navigateTabs };

2
frontend/src/views/Dashboard/SettingsModal.vue
View File

@ -381,7 +381,7 @@ const { activeSection, submitSettings, navigateTabs } = useSettingsModal(saveSet
<button <button
class="primary-button" class="primary-button"
type="submit" type="submit"
:disabled="settingsSaving || !dnsReadyToSave" :disabled="settingsSaving || (activeSection === 'dns' && !dnsReadyToSave)"
> >
{{ settingsSaving ? "保存中……" : "保存设置" }} {{ settingsSaving ? "保存中……" : "保存设置" }}
</button> </button>