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>

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">
+    <header v-if="showNav" class="bg-white shadow-sm border-b border-gray-200">
-      <div class="flex items-center gap-6">
+      <!-- 頂部 bar：品牌 + 登出 -->
-        <span class="font-bold text-gray-800 text-base">member.ose.tw</span>
+      <div class="px-6 py-2 flex items-center justify-between border-b border-gray-100">
-        <router-link
+        <span class="font-bold text-gray-800 text-sm tracking-wide">member.ose.tw</span>
-          to="/me"
+        <el-button size="small" @click="logout">登出</el-button>
-          class="text-sm text-gray-600 hover:text-blue-600 transition-colors"
+      </div>
-          active-class="text-blue-600 font-medium"
+
-        >
+      <!-- Tab 導覽列 -->
-          我的資料
+      <nav class="px-6 flex items-end gap-0 overflow-x-auto">
-        </router-link>
+        <!-- 我的 -->
-        <router-link
+        <router-link v-for="tab in userTabs" :key="tab.to" :to="tab.to" custom v-slot="{ isActive, navigate }">
-          to="/me/permissions"
+          <button
-          class="text-sm text-gray-600 hover:text-blue-600 transition-colors"
+            @click="navigate"
-          active-class="text-blue-600 font-medium"
+            :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">
+        <div class="mx-2 self-center h-4 w-px bg-gray-300 flex-shrink-0" />
-            <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>
+        <router-link v-for="tab in adminTabs" :key="tab.to" :to="tab.to" custom v-slot="{ isActive, navigate }">
-            <template #dropdown>
+          <button
-              <el-dropdown-menu>
+            @click="navigate"
-                <el-dropdown-item command="permissions">權限管理</el-dropdown-item>
+            :class="[
-                <el-dropdown-divider />
+              'px-4 py-2.5 text-sm whitespace-nowrap border-b-2 transition-colors',
-                <el-dropdown-item command="systems">系統管理</el-dropdown-item>
+              isActive
-                <el-dropdown-item command="modules">模組管理</el-dropdown-item>
+                ? 'border-indigo-500 text-indigo-600 font-medium'
-                <el-dropdown-item command="companies">公司管理</el-dropdown-item>
+                : 'border-transparent text-gray-400 hover:text-gray-700 hover:border-gray-300'
-                <el-dropdown-item command="sites">站台管理</el-dropdown-item>
+            ]"
-                <el-dropdown-item command="members">會員列表</el-dropdown-item>
+          >
-                <el-dropdown-item command="groups">權限群組</el-dropdown-item>
+            {{ tab.label }}
-              </el-dropdown-menu>
+          </button>
-            </template>
+        </router-link>
-          </el-dropdown>
+      </nav>
-        </div>
+    </header>
-      </div>
+
-      <el-button v-if="authStore.isLoggedIn" size="small" @click="logout">登出</el-button>
-    </nav>
     <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 userTabs = [
-  const routes = {
+  { to: '/me', label: '我的資料' },
-    permissions: '/admin/permissions',
+  { to: '/me/permissions', label: '我的權限' }
-    systems: '/admin/systems',
+]
-    modules: '/admin/modules',
+
-    companies: '/admin/companies',
+const adminTabs = [
-    sites: '/admin/sites',
+  { to: '/admin/permissions', label: '權限管理' },
-    members: '/admin/members',
+  { to: '/admin/systems', label: '系統' },
-    groups: '/admin/permission-groups'
+  { to: '/admin/modules', label: '模組' },
-  }
+  { to: '/admin/companies', label: '公司' },
-  router.push(routes[command])
+  { to: '/admin/sites', label: '站台' },
-}
+  { to: '/admin/members', label: '會員' },
+  { to: '/admin/permission-groups', label: '群組' }
+]
 
 function logout() {
   authStore.logout()