refactor: Replace admin dropdown with flat tab navigation

導覽列重新設計:
- 上方 bar:品牌名 + 登出按鈕
- 下方 tab 列:我的資料、我的權限 | 權限管理、系統、模組、公司、站台、會員、群組
- 用戶 tab(藍色底線)與管理員 tab(靛色底線)視覺分組
- 支持 overflow-x scroll,小螢幕也可橫滑
- 移除 el-dropdown 依賴,改用純 router-link + button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Chris
2026-03-30 02:56:19 +08:00
parent f3d5937d37
commit d80ab57795

View File

@@ -1,45 +1,49 @@
<template>
<div class="min-h-screen bg-gray-50">
<nav v-if="showNav" class="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between shadow-sm">
<div class="flex items-center gap-6">
<span class="font-bold text-gray-800 text-base">member.ose.tw</span>
<router-link
to="/me"
class="text-sm text-gray-600 hover:text-blue-600 transition-colors"
active-class="text-blue-600 font-medium"
>
我的資料
</router-link>
<router-link
to="/me/permissions"
class="text-sm text-gray-600 hover:text-blue-600 transition-colors"
active-class="text-blue-600 font-medium"
>
我的權限
<header v-if="showNav" class="bg-white shadow-sm border-b border-gray-200">
<!-- 頂部 bar品牌 + 登出 -->
<div class="px-6 py-2 flex items-center justify-between border-b border-gray-100">
<span class="font-bold text-gray-800 text-sm tracking-wide">member.ose.tw</span>
<el-button size="small" @click="logout">登出</el-button>
</div>
<!-- Tab 導覽列 -->
<nav class="px-6 flex items-end gap-0 overflow-x-auto">
<!-- 我的 -->
<router-link v-for="tab in userTabs" :key="tab.to" :to="tab.to" custom v-slot="{ isActive, navigate }">
<button
@click="navigate"
:class="[
'px-4 py-2.5 text-sm whitespace-nowrap border-b-2 transition-colors',
isActive
? 'border-blue-600 text-blue-600 font-medium'
: 'border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-300'
]"
>
{{ tab.label }}
</button>
</router-link>
<div class="flex items-center gap-4 border-l border-gray-300 pl-6">
<el-dropdown @command="handleAdminNav">
<span class="text-sm text-gray-600 hover:text-blue-600 cursor-pointer transition-colors">
管理員 <el-icon class="el-icon--right"><arrow-down /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="permissions">權限管理</el-dropdown-item>
<el-dropdown-divider />
<el-dropdown-item command="systems">系統管理</el-dropdown-item>
<el-dropdown-item command="modules">模組管理</el-dropdown-item>
<el-dropdown-item command="companies">公司管理</el-dropdown-item>
<el-dropdown-item command="sites">站台管理</el-dropdown-item>
<el-dropdown-item command="members">會員列表</el-dropdown-item>
<el-dropdown-item command="groups">權限群組</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<el-button v-if="authStore.isLoggedIn" size="small" @click="logout">登出</el-button>
</nav>
<!-- 分隔 -->
<div class="mx-2 self-center h-4 w-px bg-gray-300 flex-shrink-0" />
<!-- 管理員 -->
<router-link v-for="tab in adminTabs" :key="tab.to" :to="tab.to" custom v-slot="{ isActive, navigate }">
<button
@click="navigate"
:class="[
'px-4 py-2.5 text-sm whitespace-nowrap border-b-2 transition-colors',
isActive
? 'border-indigo-500 text-indigo-600 font-medium'
: 'border-transparent text-gray-400 hover:text-gray-700 hover:border-gray-300'
]"
>
{{ tab.label }}
</button>
</router-link>
</nav>
</header>
<main class="p-6 max-w-6xl mx-auto">
<router-view />
</main>
@@ -50,7 +54,6 @@
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ArrowDown } from '@element-plus/icons-vue'
const route = useRoute()
const router = useRouter()
@@ -61,18 +64,20 @@ const showNav = computed(() => {
return authStore.isLoggedIn && !onAuthPage
})
function handleAdminNav(command) {
const routes = {
permissions: '/admin/permissions',
systems: '/admin/systems',
modules: '/admin/modules',
companies: '/admin/companies',
sites: '/admin/sites',
members: '/admin/members',
groups: '/admin/permission-groups'
}
router.push(routes[command])
}
const userTabs = [
{ to: '/me', label: '我的資料' },
{ to: '/me/permissions', label: '我的權限' }
]
const adminTabs = [
{ to: '/admin/permissions', label: '權限管理' },
{ to: '/admin/systems', label: '系統' },
{ to: '/admin/modules', label: '模組' },
{ to: '/admin/companies', label: '公司' },
{ to: '/admin/sites', label: '站台' },
{ to: '/admin/members', label: '會員' },
{ to: '/admin/permission-groups', label: '群組' }
]
function logout() {
authStore.logout()