|
@@ -8,65 +8,50 @@
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
// 메뉴 열림 상태 관리
|
|
// 메뉴 열림 상태 관리
|
|
|
- const openMenus = ref(["basic", "branch", "staff", "service", "board", "system"]);
|
|
|
|
|
|
|
+ const openMenus = ref(["dashboard"]);
|
|
|
|
|
|
|
|
// GNB 메뉴 구조
|
|
// GNB 메뉴 구조
|
|
|
const menuItems = ref([
|
|
const menuItems = ref([
|
|
|
{
|
|
{
|
|
|
- id: "basic",
|
|
|
|
|
- title: "기본정보관리",
|
|
|
|
|
- children: [
|
|
|
|
|
- {
|
|
|
|
|
- title: "사이트 정보",
|
|
|
|
|
- path: "/site-manager/basic/site-info",
|
|
|
|
|
- pattern: /^\/site-manager\/basic\/site-info/,
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- title: "팝업관리",
|
|
|
|
|
- path: "/site-manager/basic/popup",
|
|
|
|
|
- pattern: /^\/site-manager\/basic\/popup/,
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
|
|
+ id: "dashboard",
|
|
|
|
|
+ title: "📊 대시보드",
|
|
|
|
|
+ path: "/site-manager/dashboard",
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: "admins",
|
|
|
|
|
+ title: "🔑 관리자 관리",
|
|
|
|
|
+ path: "/site-manager/admins",
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
id: "branch",
|
|
id: "branch",
|
|
|
- title: "지점관리",
|
|
|
|
|
|
|
+ title: "🗺️ 분야 및 지역관리",
|
|
|
children: [
|
|
children: [
|
|
|
{
|
|
{
|
|
|
- title: "딜러사 관리",
|
|
|
|
|
|
|
+ title: "낚시분야",
|
|
|
path: "/site-manager/branch/list",
|
|
path: "/site-manager/branch/list",
|
|
|
pattern: /^\/site-manager\/branch\/(list|create|edit)/,
|
|
pattern: /^\/site-manager\/branch\/(list|create|edit)/,
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
- title: "전시장목록",
|
|
|
|
|
|
|
+ title: "지역관리",
|
|
|
path: "/site-manager/showroom/list",
|
|
path: "/site-manager/showroom/list",
|
|
|
pattern: /^\/site-manager\/showroom\/(list|create|edit)/,
|
|
pattern: /^\/site-manager\/showroom\/(list|create|edit)/,
|
|
|
},
|
|
},
|
|
|
- {
|
|
|
|
|
- title: "서비스센터목록",
|
|
|
|
|
- path: "/site-manager/service-center/list",
|
|
|
|
|
- pattern: /^\/site-manager\/service-center\/(list|create|edit)/,
|
|
|
|
|
- },
|
|
|
|
|
],
|
|
],
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
- id: "board",
|
|
|
|
|
- title: "게시판관리",
|
|
|
|
|
|
|
+ id: "fishing",
|
|
|
|
|
+ title: "⚓ 선상 및 낚시터 관리",
|
|
|
children: [
|
|
children: [
|
|
|
{
|
|
{
|
|
|
- title: "이벤트",
|
|
|
|
|
|
|
+ title: "선상관리",
|
|
|
path: "/site-manager/board/event",
|
|
path: "/site-manager/board/event",
|
|
|
pattern: /^\/site-manager\/board\/event/,
|
|
pattern: /^\/site-manager\/board\/event/,
|
|
|
},
|
|
},
|
|
|
- // { title: "뉴스", path: "/site-manager/board/news", pattern: /^\/site-manager\/board\/news/ },
|
|
|
|
|
- // { title: "IR", path: "/site-manager/board/ir", pattern: /^\/site-manager\/board\/ir/ },
|
|
|
|
|
- ],
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- id: "system",
|
|
|
|
|
- title: "시스템관리",
|
|
|
|
|
- children: [
|
|
|
|
|
- { title: "관리자관리", path: "/site-manager/admins", pattern: /^\/site-manager\/admins/ },
|
|
|
|
|
|
|
+ {
|
|
|
|
|
+ title: "낚시터관리",
|
|
|
|
|
+ path: "/site-manager/board/event",
|
|
|
|
|
+ pattern: /^\/site-manager\/board\/event/,
|
|
|
|
|
+ }
|
|
|
],
|
|
],
|
|
|
},
|
|
},
|
|
|
]);
|
|
]);
|
|
@@ -96,6 +81,14 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
for (const menu of menuItems.value) {
|
|
for (const menu of menuItems.value) {
|
|
|
|
|
+ // children이 없는 단일 메뉴는 자기 자신이 매칭 대상
|
|
|
|
|
+ if (!menu.children) {
|
|
|
|
|
+ if (menu.path && currentPath === menu.path) {
|
|
|
|
|
+ return { menu, child: { title: menu.title, path: menu.path } };
|
|
|
|
|
+ }
|
|
|
|
|
+ continue;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
for (const child of menu.children) {
|
|
for (const child of menu.children) {
|
|
|
// pattern이 있으면 정규식으로 매칭, 없으면 정확히 일치하는지 확인
|
|
// pattern이 있으면 정규식으로 매칭, 없으면 정확히 일치하는지 확인
|
|
|
if (child.pattern && child.pattern.test(currentPath)) {
|
|
if (child.pattern && child.pattern.test(currentPath)) {
|
|
@@ -304,9 +297,8 @@
|
|
|
<!-- Header -->
|
|
<!-- Header -->
|
|
|
<header class="admin--header">
|
|
<header class="admin--header">
|
|
|
<div class="admin--header-left">
|
|
<div class="admin--header-left">
|
|
|
- <div class="admin--logo" @click="goToDashboard" style="cursor: pointer">
|
|
|
|
|
- <h1>파이럿존</h1>
|
|
|
|
|
- <span class="admin--logo-sub">ADMIN</span>
|
|
|
|
|
|
|
+ <div class="admin--logo">
|
|
|
|
|
+ <h1>{{ pageTitle }}</h1>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="admin--header-right">
|
|
<div class="admin--header-right">
|
|
@@ -322,34 +314,54 @@
|
|
|
</header>
|
|
</header>
|
|
|
|
|
|
|
|
<!-- Main Content Area -->
|
|
<!-- Main Content Area -->
|
|
|
- <div class="admin--content-wrapper">
|
|
|
|
|
|
|
+ <div class="admin--content--wrapper">
|
|
|
<!-- Sidebar GNB -->
|
|
<!-- Sidebar GNB -->
|
|
|
<aside class="admin--sidebar">
|
|
<aside class="admin--sidebar">
|
|
|
|
|
+ <NuxtLink to="/site-manager" class="admin--brand" @click="goToDashboard">
|
|
|
|
|
+ <div class="brand--logo">🏴☠️</div>
|
|
|
|
|
+ <div class="brand--title">
|
|
|
|
|
+ <h1>파이럿존</h1>
|
|
|
|
|
+ <span>ADMIN</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </NuxtLink>
|
|
|
<nav class="admin--gnb">
|
|
<nav class="admin--gnb">
|
|
|
<div v-for="menu in menuItems" :key="menu.id" class="admin--gnb-group">
|
|
<div v-for="menu in menuItems" :key="menu.id" class="admin--gnb-group">
|
|
|
- <div class="admin--gnb-title" @click="toggleMenu(menu.id)">
|
|
|
|
|
|
|
+ <!-- children 없는 메뉴: 토글 없이 바로 이동 -->
|
|
|
|
|
+ <NuxtLink
|
|
|
|
|
+ v-if="!menu.children"
|
|
|
|
|
+ :to="menu.path"
|
|
|
|
|
+ class="admin--gnb-title admin--gnb-title-link"
|
|
|
|
|
+ :class="{ 'is-active': isActiveRoute(menu.path) }"
|
|
|
|
|
+ >
|
|
|
{{ menu.title }}
|
|
{{ menu.title }}
|
|
|
- <span
|
|
|
|
|
- class="admin--gnb-arrow"
|
|
|
|
|
- :class="{ 'is-open': openMenus.includes(menu.id) }"
|
|
|
|
|
- >
|
|
|
|
|
- ▼
|
|
|
|
|
- </span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <transition name="admin--submenu">
|
|
|
|
|
- <ul v-show="openMenus.includes(menu.id)" class="admin--gnb-submenu">
|
|
|
|
|
- <li
|
|
|
|
|
- v-for="submenu in menu.children"
|
|
|
|
|
- :key="submenu.path"
|
|
|
|
|
- class="admin--gnb-item"
|
|
|
|
|
- :class="{ 'is-active': isActiveRoute(submenu.path) }"
|
|
|
|
|
|
|
+ </NuxtLink>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- children 있는 메뉴: 기존 토글 동작 -->
|
|
|
|
|
+ <template v-else>
|
|
|
|
|
+ <div class="admin--gnb-title" @click="toggleMenu(menu.id)">
|
|
|
|
|
+ {{ menu.title }}
|
|
|
|
|
+ <span
|
|
|
|
|
+ class="admin--gnb-arrow"
|
|
|
|
|
+ :class="{ 'is-open': openMenus.includes(menu.id) }"
|
|
|
>
|
|
>
|
|
|
- <NuxtLink :to="submenu.path" class="admin--gnb-link">
|
|
|
|
|
- {{ submenu.title }}
|
|
|
|
|
- </NuxtLink>
|
|
|
|
|
- </li>
|
|
|
|
|
- </ul>
|
|
|
|
|
- </transition>
|
|
|
|
|
|
|
+ ▼
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <transition name="admin--submenu">
|
|
|
|
|
+ <ul v-show="openMenus.includes(menu.id)" class="admin--gnb-submenu">
|
|
|
|
|
+ <li
|
|
|
|
|
+ v-for="submenu in menu.children"
|
|
|
|
|
+ :key="submenu.path"
|
|
|
|
|
+ class="admin--gnb-item"
|
|
|
|
|
+ :class="{ 'is-active': isActiveRoute(submenu.path) }"
|
|
|
|
|
+ >
|
|
|
|
|
+ <NuxtLink :to="submenu.path" class="admin--gnb-link">
|
|
|
|
|
+ {{ submenu.title }}
|
|
|
|
|
+ </NuxtLink>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </transition>
|
|
|
|
|
+ </template>
|
|
|
</div>
|
|
</div>
|
|
|
</nav>
|
|
</nav>
|
|
|
</aside>
|
|
</aside>
|
|
@@ -357,8 +369,7 @@
|
|
|
<!-- Content Area -->
|
|
<!-- Content Area -->
|
|
|
<main class="admin--main">
|
|
<main class="admin--main">
|
|
|
<!-- Breadcrumb & Title -->
|
|
<!-- Breadcrumb & Title -->
|
|
|
- <div class="admin--page-header">
|
|
|
|
|
- <h2 class="admin--page-title">{{ pageTitle }}</h2>
|
|
|
|
|
|
|
+ <!-- <div class="admin--page-header">
|
|
|
<div class="admin--breadcrumb">
|
|
<div class="admin--breadcrumb">
|
|
|
<span v-for="(crumb, index) in breadcrumbs" :key="index">
|
|
<span v-for="(crumb, index) in breadcrumbs" :key="index">
|
|
|
<NuxtLink v-if="crumb.path" :to="crumb.path" class="admin--breadcrumb-link">
|
|
<NuxtLink v-if="crumb.path" :to="crumb.path" class="admin--breadcrumb-link">
|
|
@@ -372,20 +383,12 @@
|
|
|
>
|
|
>
|
|
|
</span>
|
|
</span>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </div> -->
|
|
|
|
|
|
|
|
<!-- Page Content -->
|
|
<!-- Page Content -->
|
|
|
<div class="admin--page-content">
|
|
<div class="admin--page-content">
|
|
|
<slot />
|
|
<slot />
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
- <!-- Admin Footer -->
|
|
|
|
|
- <footer class="admin--footer">
|
|
|
|
|
- <p>
|
|
|
|
|
- © {{ new Date().getFullYear() }} FORDKOREA 포드코리아. All rights
|
|
|
|
|
- reserved.
|
|
|
|
|
- </p>
|
|
|
|
|
- </footer>
|
|
|
|
|
</main>
|
|
</main>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|