feat(设置页面): 同步标签页状态到URL并更新图标
- 将标签页状态与URL查询参数同步,支持直接通过URL访问特定标签页 - 替换域设置组件中的全部移动按钮图标,使用更直观的双箭头图标
This commit is contained in:
@@ -40,10 +40,10 @@
|
|||||||
<!-- Actions -->
|
<!-- Actions -->
|
||||||
<div class="transfer-actions">
|
<div class="transfer-actions">
|
||||||
<button class="action-btn" @click="moveAllToVisible" title="全部左移">
|
<button class="action-btn" @click="moveAllToVisible" title="全部左移">
|
||||||
<PhChecks :size="20" />
|
<PhCaretDoubleLeft />
|
||||||
</button>
|
</button>
|
||||||
<button class="action-btn" @click="moveAllToHidden" title="全部右移">
|
<button class="action-btn" @click="moveAllToHidden" title="全部右移">
|
||||||
<PhTrash :size="20" />
|
<PhCaretDoubleRight />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -91,7 +91,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, computed } from 'vue';
|
import { ref, onMounted, computed } from 'vue';
|
||||||
import { fetchDomainList, fetchFeatureSettings, saveFeatureSettings } from '../../../api/admin';
|
import { fetchDomainList, fetchFeatureSettings, saveFeatureSettings } from '../../../api/admin';
|
||||||
import { PhArrowRight, PhArrowLeft, PhChecks, PhTrash } from '@phosphor-icons/vue';
|
|
||||||
|
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const allDomains = ref<string[]>([]);
|
const allDomains = ref<string[]>([]);
|
||||||
|
|||||||
@@ -528,7 +528,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<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 {
|
import {
|
||||||
fetchCommentSettings,
|
fetchCommentSettings,
|
||||||
saveCommentSettings,
|
saveCommentSettings,
|
||||||
@@ -647,8 +648,42 @@ const savingTelegram = ref(false);
|
|||||||
const settingUpWebhook = ref(false);
|
const settingUpWebhook = ref(false);
|
||||||
const testingTelegram = 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",
|
"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() {
|
function addAllowedDomainsFromInput() {
|
||||||
|
|||||||
Reference in New Issue
Block a user