From d80ab577957dbca68337734b4edd750bda99e63f Mon Sep 17 00:00:00 2001
From: Chris <wtc.justin82@gmail.com>
Date: Mon, 30 Mar 2026 02:56:19 +0800
Subject: [PATCH] refactor: Replace admin dropdown with flat tab navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.vue | 107 +++++++++++++++++++++++++++-------------------------
 1 file changed, 56 insertions(+), 51 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c874b6d..8e36227 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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()