From 653f856e18a074fbd7c3fc1c18d6f2d4815c92d1 Mon Sep 17 00:00:00 2001
From: Chris <wtc.justin82@gmail.com>
Date: Mon, 30 Mar 2026 02:58:38 +0800
Subject: [PATCH] refactor: Redesign navbar to single-row tab layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 單列 header（高度 56px），sticky top
- 左：logo 區（固定寬度，方便之後換圖）
- 中：tab 列，active 用藍色底線 + 淡藍底色
- 分隔用細豎線 | 區隔用戶與管理員 tab
- 右：輕量文字登出按鈕，不搶焦點
- NavTab 用行內 defineComponent 封裝，乾淨不額外建檔

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

diff --git a/src/App.vue b/src/App.vue
index 8e36227..21b53cf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,47 +1,33 @@
 <template>
   <div class="min-h-screen bg-gray-50">
-    <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>
+    <header v-if="showNav" class="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm">
+      <div class="max-w-7xl mx-auto px-6 flex items-center justify-between h-14">
+
+        <!-- Logo 區（之後換圖） -->
+        <div class="flex-shrink-0 w-36">
+          <span class="text-sm font-semibold text-gray-700 tracking-wide">member.ose.tw</span>
+        </div>
+
+        <!-- Tab 導覽 -->
+        <nav class="flex items-stretch h-full overflow-x-auto gap-0 flex-1 min-w-0">
+          <NavTab v-for="tab in userTabs" :key="tab.to" :to="tab.to">{{ tab.label }}</NavTab>
+
+          <span class="self-center mx-3 text-gray-200 select-none text-lg">|</span>
+
+          <NavTab v-for="tab in adminTabs" :key="tab.to" :to="tab.to">{{ tab.label }}</NavTab>
+        </nav>
+
+        <!-- 右側：登出 -->
+        <div class="flex-shrink-0 ml-4">
+          <button
+            @click="logout"
+            class="text-xs text-gray-400 hover:text-gray-600 transition-colors px-2 py-1 rounded hover:bg-gray-100"
+          >
+            登出
+          </button>
+        </div>
+
       </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="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">
@@ -51,8 +37,8 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { computed, defineComponent, h } from 'vue'
+import { useRoute, useRouter, RouterLink } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 
 const route = useRoute()
@@ -79,6 +65,24 @@ const adminTabs = [
   { to: '/admin/permission-groups', label: '群組' }
 ]
 
+// 行內 NavTab 元件：避免另開檔案
+const NavTab = defineComponent({
+  props: { to: String },
+  setup(props, { slots }) {
+    return () => h(RouterLink, { to: props.to, custom: true }, {
+      default: ({ isActive, navigate }) => h('button', {
+        onClick: navigate,
+        class: [
+          'px-3 h-full text-sm whitespace-nowrap border-b-2 transition-all duration-150 flex items-center',
+          isActive
+            ? 'border-blue-500 text-blue-600 font-medium bg-blue-50/40'
+            : 'border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-300'
+        ].join(' ')
+      }, slots.default?.())
+    })
+  }
+})
+
 function logout() {
   authStore.logout()
   router.push('/login')