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) => {

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 {