heritage-admin/src/App.vue

<script setup>
import { computed } from 'vue'
import { RouterLink, RouterView, useRoute } from 'vue-router'

const route = useRoute()
const isAdmin = computed(() => route.path.startsWith('/admin'))
</script>

<template>
  <div class="app">
    <RouterView v-if="isAdmin" />
    <template v-else>
      <header class="topbar">
        <div class="topbar__left">
          <div class="brand">
            <div class="brand__mark">遗</div>
            <div class="brand__text">
              <div class="brand__title">古建筑保护信息化平台</div>
              <div class="brand__subtitle">Heritage Admin</div>
            </div>
          </div>
        </div>

        <nav class="topnav">
          <RouterLink class="topnav__link" exact-active-class="is-active" to="/">首页</RouterLink>
          <RouterLink class="topnav__link" active-class="is-active" to="/archives">资源档案</RouterLink>
          <RouterLink class="topnav__link" active-class="is-active" to="/inspections">巡查监测</RouterLink>
          <RouterLink class="topnav__link" active-class="is-active" to="/projects">修缮项目</RouterLink>
          <RouterLink class="topnav__link" active-class="is-active" to="/analytics">统计分析</RouterLink>
        </nav>

        <div class="topbar__right">
          <RouterLink class="login" active-class="is-active" to="/login">用户登录</RouterLink>
        </div>
      </header>

      <main class="main">
        <RouterView />
      </main>
    </template>
  </div>
</template>

<style scoped>
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
}

.topbar__left {
  display: flex;
  align-items: center;
}

.topbar__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
}

.brand__mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #b48040, #205c40);
  color: #fff;
  font-weight: 800;
}

.brand__title {
  font-weight: 800;
  line-height: 1.2;
}

.brand__subtitle {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  margin-top: 2px;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.topnav__link {
  padding: 7px 9px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
}

.topnav__link:hover {
  color: var(--text);
  border-color: rgba(180, 128, 64, 0.35);
  background: rgba(255, 255, 255, 0.7);
}

.topnav__link.is-active {
  color: var(--text);
  border-color: rgba(180, 128, 64, 0.45);
  background: rgba(180, 128, 64, 0.08);
}

.login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  text-decoration: none;
  border-color: rgba(32, 92, 64, 0.25);
  background: rgba(32, 92, 64, 0.12);
  color: var(--text);
  font-weight: 800;
  border: 1px solid rgba(32, 92, 64, 0.25);
  font-size: 13px;
}

.login:hover {
  border-color: rgba(32, 92, 64, 0.35);
  background: rgba(32, 92, 64, 0.18);
}

.login.is-active {
  border-color: rgba(32, 92, 64, 0.35);
  background: rgba(32, 92, 64, 0.18);
}

.main {
  width: min(1200px, 100%);
  margin: 0 auto;
  flex: 1;
}

@media (max-width: 720px) {
  .topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'left right'
      'nav nav';
    padding: 10px 12px;
  }
  .topbar__left {
    grid-area: left;
  }
  .topbar__right {
    grid-area: right;
  }
  .topnav {
    grid-area: nav;
    justify-content: center;
  }
  .brand {
    min-width: 0;
  }
  .brand__title {
    font-size: 14px;
  }
  .brand__subtitle {
    display: none;
  }
  .topnav__link {
    padding: 7px 9px;
  }
}
</style>