thebet365/apps/admin/src/layouts/ManageLayout.vue

<script setup lang="ts">
import { computed } from 'vue';
import { RouterView, RouterLink, useRoute, useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth';
import { useAdminLocale } from '../composables/useAdminLocale';
import AdminLocaleSwitcher from '../components/AdminLocaleSwitcher.vue';

const route = useRoute();
const router = useRouter();
const auth = useAuthStore();
const { t } = useAdminLocale();

const adminMenus = computed(() => [
  { path: '/', label: t('nav.dashboard') },
  { path: '/users', label: t('nav.users') },
  { path: '/agents', label: t('nav.agents') },
  { path: '/matches', label: t('nav.matches') },
  { path: '/outrights', label: t('nav.outrights'), matchPrefix: true },
  { path: '/bets', label: t('nav.bets') },
  { path: '/cashback', label: t('nav.cashback') },
  { path: '/contents', label: t('nav.contents') },
  { path: '/audit', label: t('nav.audit') },
]);

const agentMenus = computed(() => [
  { path: '/', label: t('nav.dashboard') },
  { path: '/my-players', label: t('nav.players') },
  { path: '/sub-agents', label: t('nav.subAgents') },
  { path: '/my-bets', label: t('nav.myBets') },
]);

const menus = computed(() => (auth.isAdmin.value ? adminMenus.value : agentMenus.value));

const currentLabel = computed(() => {
  const hit = menus.value.find((m) => {
    if ('matchPrefix' in m && m.matchPrefix) {
      return route.path === m.path || route.path.startsWith(`${m.path}/`);
    }
    return route.path === m.path;
  });
  return hit?.label ?? '';
});

const userInitial = computed(() =>
  (auth.user?.username ?? '').charAt(0).toUpperCase()
);

function logout() {
  auth.logout();
  router.push('/login');
}
</script>

<template>
  <div class="shell">
    <!-- ── Sidebar ── -->
    <aside class="sidebar">
      <div class="brand">
        <img src="/logo.png" alt="TheBet365" class="brand-logo" />
      </div>

      <nav class="nav">
        <RouterLink
          v-for="m in menus" :key="m.path" :to="m.path"
          class="nav-item"
          :class="{
            active:
              route.path === m.path ||
              ('matchPrefix' in m && m.matchPrefix && route.path.startsWith(`${m.path}/`)),
          }"
        >
          {{ m.label }}
        </RouterLink>
      </nav>

      <div class="sidebar-foot">TheBet365 &copy; 2025</div>
    </aside>

    <!-- ── Main ── -->
    <div class="main">
      <header class="topbar">
        <div class="topbar-title">
          <span class="topbar-accent" />
          <span>{{ currentLabel }}</span>
        </div>
        <div class="topbar-right">
          <div class="user-chip">
            <div class="avatar">{{ userInitial }}</div>
            <div class="user-info">
              <span class="user-name">{{ auth.user?.username }}</span>
              <span class="user-role">{{ auth.isAdmin ? t('role.admin') : t('role.agent') }}</span>
            </div>
          </div>
          <AdminLocaleSwitcher />
          <div class="portal-tag">{{ auth.isAdmin ? t('portal.admin') : t('portal.agent') }}</div>
          <button class="btn-logout" @click="logout">{{ t('logout') }}</button>
        </div>
      </header>
      <main class="page-main">
        <RouterView />
      </main>
    </div>
  </div>
</template>

<style scoped>
.shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
  width: 200px;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  background: rgba(6, 6, 6, 0.98);
  border-right: 1px solid #1c1c1c;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.brand {
  padding: 20px 16px 18px;
  border-bottom: 1px solid #181818;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-logo {
  max-width: 140px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.nav {
  flex: 1;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 7px;
  color: #aaa;
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.15s;
  border-left: 2px solid transparent;
  letter-spacing: 0.02em;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(36, 143, 84, 0.22), rgba(36, 143, 84, 0.04));
  color: var(--green-text);
  font-weight: 700;
  border-left-color: var(--green-bright);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sidebar-foot {
  padding: 12px 16px;
  font-size: 10px;
  color: #282828;
  border-top: 1px solid #161616;
  letter-spacing: 0.04em;
}

/* ── Main ── */
.main {
  margin-left: 200px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.topbar {
  position: sticky; top: 0; z-index: 90;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  background: rgba(6, 6, 6, 0.98);
  border-bottom: 1px solid #1a1a1a;
  backdrop-filter: blur(12px);
}

.topbar-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700;
  color: #e8e8e8;
  letter-spacing: 0.04em;
}
.topbar-accent {
  width: 3px; height: 15px;
  background: linear-gradient(180deg, var(--green-glow), var(--green-deep));
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(47, 181, 106, 0.45);
}

.topbar-right {
  display: flex; align-items: center; gap: 12px;
}

.user-chip {
  display: flex; align-items: center; gap: 8px;
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary-grad);
  border: 1px solid var(--green-border);
  box-shadow: var(--primary-shadow);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.user-info {
  display: flex; flex-direction: column; gap: 1px;
}
.user-name {
  font-size: 13px; font-weight: 600; color: #e0e0e0;
  line-height: 1;
}
.user-role {
  font-size: 10px; color: #555;
  line-height: 1;
}

.portal-tag {
  padding: 3px 8px;
  border: 1px solid var(--green-border);
  border-radius: 4px;
  font-size: 11px;
  color: var(--green-text);
  background: var(--green-surface);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.btn-logout {
  padding: 5px 14px;
  background: transparent;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #888;
  font-size: 12px;
  font-family: inherit;
  transition: all 0.15s;
}
.btn-logout:hover { border-color: #444; color: #ccc; }

.page-main {
  flex: 1;
  min-height: 0;
  padding: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.page-main > * {
  flex: 1;
  min-height: 0;
}
</style>