优化

frontend/app/web-gold/src/components/TopNav.vue

@@ -4,11 +4,6 @@ import { useUserStore } from '@/stores/user'
 import UserDropdown from '@/components/UserDropdown.vue'
 import BrandLogo from '@/components/BrandLogo.vue'
 
-const styles = {
-  background: 'var(--color-gray-900)',
-  color: 'var(--color-text-inverse)'
-}
-
 const userStore = useUserStore()
 
 // 计算是否应该显示用户组件
@@ -19,29 +14,17 @@ const shouldShowUser = computed(() => {
 </script>
 
 <template>
-  <header class="header-box" :style="styles">
-    <div>
-      <div class="h-[70px] flex items-center">
-        <div class="flex items-center gap-3 flex-1 pl-[30px]">
-          <BrandLogo :size="40" />
-        </div>
-        <div class="flex items-center gap-4 pr-[35px]">
-          <template v-if="shouldShowUser">
-            <UserDropdown />
-          </template>
-        </div>
-      </div>
+  <header
+    class="fixed top-0 left-0 right-0 z-[100]
+           h-[70px] flex items-center px-[30px]
+           bg-gray-900 text-white
+           border-b border-border"
+  >
+    <div class="flex items-center gap-3 flex-1">
+      <BrandLogo :size="40" />
+    </div>
+    <div class="flex items-center gap-4 pr-1">
+      <UserDropdown v-if="shouldShowUser" />
     </div>
   </header>
 </template>
-
-<style scoped>
-.header-box {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 100;
-  border-bottom: 1px solid var(--color-border);
-}
-</style>