Mars
929352bc62
- 阶段 A: 增加 KeepAlive 缓存高频列表页，改用 onActivated 进行后台静默刷新，优化 tab 切换与 HomeEntry 闪屏 - 阶段 B: beforeEach 守卫在 TTL 内走同步快速路径，api 请求拦截器缓存 token 避免重复解析 JWT - 阶段 C: 引入 unplugin 插件启用 Element Plus 组件按需加载，清理 App.vue 中 960+ 行冗余暗色主题 CSS - i18n 拆包: 将三语文案包提取为独立懒加载 chunks，主包体积从 209KB 减少至 99KB (降低 53%)
121 lines
2.5 KiB
Vue
121 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useAdminLocale } from '../composables/useAdminLocale';
|
|
import DepositOrders from './DepositOrders.vue';
|
|
import PaymentMethods from './PaymentMethods.vue';
|
|
|
|
const { t } = useAdminLocale();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const tabs = [
|
|
{ key: 'orders', label: () => t('deposit.deposit_orders_title') },
|
|
{ key: 'methods', label: () => t('deposit.payment_methods_title') },
|
|
] as const;
|
|
|
|
function getTabFromQuery(): string {
|
|
return route.query.tab === 'methods' ? 'methods' : 'orders';
|
|
}
|
|
|
|
const activeTab = ref(getTabFromQuery());
|
|
|
|
watch(() => route.query.tab, (val) => {
|
|
activeTab.value = val === 'methods' ? 'methods' : 'orders';
|
|
});
|
|
|
|
function switchTab(key: string) {
|
|
activeTab.value = key;
|
|
router.replace({ query: { ...route.query, tab: key } });
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-deposit-manage">
|
|
<div class="tab-bar">
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab.key"
|
|
class="tab-btn"
|
|
:class="{ active: activeTab === tab.key }"
|
|
@click="switchTab(tab.key)"
|
|
>
|
|
{{ tab.label() }}
|
|
</button>
|
|
</div>
|
|
|
|
<DepositOrders v-show="activeTab === 'orders'" />
|
|
<PaymentMethods v-show="activeTab === 'methods'" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.page-deposit-manage {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.tab-bar {
|
|
display: flex;
|
|
gap: 4px;
|
|
padding: 4px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
margin-bottom: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tab-btn {
|
|
position: relative;
|
|
padding: 8px 18px;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: var(--text-muted);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: color 0.15s;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.tab-btn:hover {
|
|
background: var(--accent-hover);
|
|
color: var(--text);
|
|
}
|
|
|
|
.tab-btn.active {
|
|
background: var(--primary);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.tab-btn.active::after {
|
|
display: none;
|
|
}
|
|
|
|
.page-deposit-manage :deep(.page-deposit-orders),
|
|
.page-deposit-manage :deep(.page-payment-methods) {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.page-deposit-manage :deep(.page-deposit-orders .toolbar h2),
|
|
.page-deposit-manage :deep(.page-payment-methods .toolbar h2) {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.tab-bar {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.tab-btn {
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
</style>
|