gitrusprusandCursor
1d6d54ab9f
Add filtered map API, creamy-caprice-style toolbar (dates, layers, search), Yandex ru tiles, and store Telegram session in MapMil/data instead of mounting SocialParser. Co-authored-by: Cursor <cursoragent@cursor.com>
120 lines
2.1 KiB
Vue
120 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
|
|
const route = useRoute();
|
|
|
|
const navItems = [
|
|
{ to: "/", label: "Карта", exact: true },
|
|
{ to: "/parsers", label: "Парсеры" },
|
|
{ to: "/events", label: "События" },
|
|
{ to: "/analytics", label: "Аналитика" },
|
|
{ to: "/consumers", label: "ПИ" },
|
|
];
|
|
|
|
function isActive(path: string, exact = false): boolean {
|
|
if (exact) return route.path === path;
|
|
return route.path.startsWith(path);
|
|
}
|
|
|
|
const pageTitle = computed(() => {
|
|
const item = navItems.find((n) => isActive(n.to, n.exact));
|
|
return item?.label ?? "MapMil";
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app-layout">
|
|
<header class="admin-header">
|
|
<div class="brand">
|
|
<h1>MapMil</h1>
|
|
<span class="page-title">{{ pageTitle }}</span>
|
|
</div>
|
|
<nav class="nav">
|
|
<router-link
|
|
v-for="item in navItems"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
class="nav-link"
|
|
:class="{ active: isActive(item.to, item.exact) }"
|
|
>
|
|
{{ item.label }}
|
|
</router-link>
|
|
</nav>
|
|
</header>
|
|
<main class="admin-main">
|
|
<router-view />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.app-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.admin-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1.5rem;
|
|
padding: 0.6rem 1.25rem;
|
|
background: #fff;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.brand h1 {
|
|
margin: 0;
|
|
font-size: 1.15rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 0.875rem;
|
|
color: #888;
|
|
}
|
|
|
|
.nav {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.nav-link {
|
|
padding: 0.4rem 0.75rem;
|
|
border-radius: 6px;
|
|
font-size: 0.875rem;
|
|
color: #444;
|
|
text-decoration: none;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.nav-link.active {
|
|
background: #e3f2fd;
|
|
color: #1565c0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.admin-main {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.admin-main:has(.map-page) {
|
|
overflow: hidden;
|
|
}
|
|
</style>
|