From 19f4ab8abe4f1a504cb95850212eff4345acb656 Mon Sep 17 00:00:00 2001
From: YoYo <yoyo@euphon.net>
Date: Tue, 7 Apr 2026 22:54:45 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=A1=B6=E9=83=A8=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E6=A0=8Fsticky=E4=BF=AE=E6=AD=A3=E3=80=81=E5=8F=B3=E4=B8=8A?=
 =?UTF-8?q?=E8=A7=92=E6=98=BE=E7=A4=BA=E8=A7=92=E8=89=B2=E8=BA=AB=E4=BB=BD?=
 =?UTF-8?q?=E3=80=81QR=E4=B8=8A=E4=BC=A0=E9=A2=84=E8=A7=88=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 预览环境下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           | 13 ++++++++++---
 frontend/src/views/MyDiary.vue | 28 +++++++++++++++++++---------
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7581f53..b5c21dd 100644
--- a/frontend/src/App.vue
+++ b/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) => {
diff --git a/frontend/src/views/MyDiary.vue b/frontend/src/views/MyDiary.vue
index 514bdb1..cbe657e 100644
--- a/frontend/src/views/MyDiary.vue
+++ b/frontend/src/views/MyDiary.vue
@@ -125,12 +125,14 @@
 
         <div class="form-group">
           <label>我的二维码图片</label>
-          <div class="upload-area" @click="triggerUpload('qr')">
-            <img v-if="brandQrImage" :src="brandQrImage" class="upload-preview qr-upload-preview" />
-            <span v-else class="upload-hint">📲 点击上传二维码图片</span>
+          <div class="qr-preview">
+            <div class="upload-area qr-upload-area" @click="triggerUpload('qr')">
+              <img v-if="brandQrImage" :src="brandQrImage" class="qr-img" />
+              <span v-else class="upload-hint">📲 点击上传</span>
+            </div>
           </div>
           <input ref="qrInput" type="file" accept="image/*" style="display:none" @change="handleUpload('qr', $event)" />
-          <div class="field-hint">上传后将显示在配方卡片右下角</div>
+          <div class="field-hint" style="text-align:center">上传后将显示在配方卡片右下角</div>
         </div>
 
         <div class="form-group">
@@ -171,7 +173,7 @@
 
         <div class="form-group">
           <label>角色</label>
-          <div class="form-static role-badge">{{ roleLabel }}</div>
+          <div class="role-badge-display">{{ roleLabel }}</div>
         </div>
       </div>
 
@@ -774,8 +776,14 @@ async function applyBusiness() {
   color: #6b6375;
 }
 
-.role-badge {
+.role-badge-display {
   display: inline-block;
+  font-size: 12px;
+  padding: 3px 12px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
+  color: #4a9d7e;
+  font-weight: 500;
 }
 
 .qr-preview {
@@ -818,9 +826,11 @@ async function applyBusiness() {
   max-height: 100px;
 }
 
-.qr-upload-preview {
-  max-width: 120px;
-  max-height: 120px;
+.qr-upload-area {
+  width: 120px;
+  height: 120px;
+  min-height: unset;
+  border-radius: 8px;
 }
 
 .field-hint {