Files
thebet365/apps/admin/src/components/MatchesSubNav.vue
Mars 2a8b8415e7 feat: 赛事管理操作日志与审计页体验优化
- API 为赛事/联赛/盘口/赔率/冠军盘写操作写入 CATALOG 审计日志,并新增 catalog-audit-logs 接口

- 管理端将赛事日志独立至赛事管理子页,通用操作日志排除 CATALOG 模块

- 统一赛事子页 list-chrome 布局与面包屑;修复操作日志页表格滚动与分页不可见问题

- 补充中英文/马来语文案及 UAT 验收项 SEC013/SEC014

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-16 10:00:24 +08:00

124 lines
2.8 KiB
Vue

<script setup lang="ts">
import { RouterLink, useRoute } from 'vue-router';
import { useAdminLocale } from '../composables/useAdminLocale';
const { t } = useAdminLocale();
const route = useRoute();
withDefaults(
defineProps<{
embedded?: boolean;
}>(),
{ embedded: false },
);
const tabs = [
{ path: '/matches', labelKey: 'nav.matches.fixtures' },
{ path: '/matches/outrights', labelKey: 'nav.matches.outrights' },
{ path: '/matches/market-templates', labelKey: 'nav.matches.market_templates' },
{ path: '/matches/audit-logs', labelKey: 'nav.matches.audit_logs' },
];
function isActive(path: string) {
if (path === '/matches/outrights') {
return route.path === '/matches/outrights';
}
if (path === '/matches/market-templates') {
return route.path === '/matches/market-templates';
}
if (path === '/matches/audit-logs') {
return route.path === '/matches/audit-logs';
}
return (
route.path === '/matches' ||
(route.path.startsWith('/matches/') &&
!route.path.startsWith('/matches/outrights') &&
!route.path.startsWith('/matches/market-templates') &&
!route.path.startsWith('/matches/audit-logs'))
);
}
</script>
<template>
<nav
class="matches-subnav"
:class="{ 'matches-subnav--embedded': embedded }"
aria-label="Matches sections"
>
<RouterLink
v-for="tab in tabs"
:key="tab.path"
:to="tab.path"
class="matches-subnav__item"
:class="{ 'matches-subnav__item--active': isActive(tab.path) }"
>
{{ t(tab.labelKey) }}
</RouterLink>
</nav>
</template>
<style scoped>
.matches-subnav {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 16px;
padding: 4px;
border-radius: 8px;
background: #ffffff;
border: 1px solid var(--border);
flex-shrink: 0;
min-height: 48px;
box-sizing: border-box;
}
.matches-subnav--embedded {
margin-bottom: 0;
padding: 0 14px 0 0;
border: none;
border-right: 1px solid var(--border);
background: transparent;
flex-shrink: 0;
min-height: 0;
height: auto;
align-self: center;
box-sizing: border-box;
}
.matches-subnav--embedded .matches-subnav__item {
height: 32px;
padding: 0 12px;
font-size: 12px;
}
.matches-subnav__item {
padding: 0 14px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
color: var(--text-muted);
transition: color 0.15s, background 0.15s;
}
.matches-subnav__item:hover {
color: var(--text);
background: var(--accent-hover);
}
.matches-subnav__item--active {
color: #ffffff;
background: var(--primary);
}
@media (max-width: 700px) {
.matches-subnav {
overflow-x: auto;
justify-content: flex-start;
}
.matches-subnav__item {
flex: 0 0 auto;
}
}
</style>