feat(设置页面): 同步标签页状态到URL并更新图标

- 将标签页状态与URL查询参数同步,支持直接通过URL访问特定标签页
- 替换域设置组件中的全部移动按钮图标,使用更直观的双箭头图标
This commit is contained in:
anghunk
2026-02-05 17:29:03 +08:00
parent c580aec52d
commit daab04867f
2 changed files with 39 additions and 5 deletions

View File

@@ -40,10 +40,10 @@
<!-- Actions -->
<div class="transfer-actions">
<button class="action-btn" @click="moveAllToVisible" title="全部左移">
<PhChecks :size="20" />
<PhCaretDoubleLeft />
</button>
<button class="action-btn" @click="moveAllToHidden" title="全部右移">
<PhTrash :size="20" />
<PhCaretDoubleRight />
</button>
</div>
@@ -91,7 +91,6 @@
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { fetchDomainList, fetchFeatureSettings, saveFeatureSettings } from '../../../api/admin';
import { PhArrowRight, PhArrowLeft, PhChecks, PhTrash } from '@phosphor-icons/vue';
const loading = ref(false);
const allDomains = ref<string[]>([]);

View File

@@ -528,7 +528,8 @@
</template>
<script setup lang="ts">
import { onMounted, ref, type Ref, inject } from "vue";
import { onMounted, ref, type Ref, inject, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
fetchCommentSettings,
saveCommentSettings,
@@ -647,8 +648,42 @@ const savingTelegram = ref(false);
const settingUpWebhook = ref(false);
const testingTelegram = ref(false);
const activeTab = ref<"comment" | "feature" | "display" | "emailNotify" | "telegramNotify" | "domain">(
const route = useRoute();
const router = useRouter();
type TabKey =
| "comment"
| "feature"
| "display"
| "emailNotify"
| "telegramNotify"
| "domain";
const validTabs: TabKey[] = [
"comment",
"feature",
"display",
"emailNotify",
"telegramNotify",
"domain",
];
const activeTab = ref<TabKey>(
validTabs.includes(route.query.tab as TabKey)
? (route.query.tab as TabKey)
: "comment",
);
watch(activeTab, (newTab) => {
router.replace({ query: { ...route.query, tab: newTab } });
});
watch(
() => route.query.tab,
(newTab) => {
if (newTab && validTabs.includes(newTab as TabKey)) {
activeTab.value = newTab as TabKey;
}
},
);
function addAllowedDomainsFromInput() {