fix: 顶部导航栏sticky修正、右上角显示角色身份、QR上传预览布局优化

- 预览环境下nav-tabs top偏移36px，避免被orange banner遮挡
- 登录用户名旁显示角色身份（查看者/编辑/管理员等）
- 账户页角色改用绿色渐变徽章样式，对齐UserMenu风格
- QR图片上传区改为120x120居中方形，预览样式与二维码链接预览一致

Closes #9 (part: items 1-3, accumulated to PR #5)

Co-Authored-By: YoYo <yoyo@euphon.net>

frontend/src/App.vue

@@ -15,7 +15,9 @@
             @click="toggleUserMenu"
           >
             <template v-if="auth.isLoggedIn">
-              👤 {{ auth.user.display_name || auth.user.username }} ▾
+              👤 {{ auth.user.display_name || auth.user.username }}
+              <span style="font-size:10px;background:rgba(255,255,255,0.2);padding:2px 7px;border-radius:8px;margin:0 3px;vertical-align:middle;font-weight:400;letter-spacing:0">{{ roleLabel }}</span>
+              ▾
             </template>
             <template v-else>
               <span style="background:rgba(255,255,255,0.2);padding:4px 12px;border-radius:12px">登录</span>
@@ -41,7 +43,7 @@
   <UserMenu v-if="showUserMenu" @close="showUserMenu = false" />
 
   <!-- Nav tabs -->
-  <div class="nav-tabs">
+  <div class="nav-tabs" :style="isPreview ? { top: '36px' } : {}">
     <div class="nav-tab" :class="{ active: ui.currentSection === 'search' }" @click="goSection('search')">🔍 配方查询</div>
     <div class="nav-tab" :class="{ active: ui.currentSection === 'manage' }" @click="requireLogin('manage')">📋 管理配方</div>
     <div class="nav-tab" :class="{ active: ui.currentSection === 'inventory' }" @click="requireLogin('inventory')">📦 个人库存</div>
@@ -68,7 +70,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from './stores/auth'
 import { useOilsStore } from './stores/oils'
@@ -86,6 +88,11 @@ const router = useRouter()
 const route = useRoute()
 const showUserMenu = ref(false)
 
+const roleLabel = computed(() => {
+  const map = { admin: '管理员', senior_editor: '高级编辑', editor: '编辑', viewer: '查看者' }
+  return map[auth.user.role] || '查看者'
+})
+
 // Sync ui.currentSection from route on load and navigation
 const routeToSection = { '/': 'search', '/manage': 'manage', '/inventory': 'inventory', '/oils': 'oils', '/projects': 'projects', '/mydiary': 'mydiary', '/audit': 'audit', '/bugs': 'bugs', '/users': 'users' }
 watch(() => route.path, (path) => {