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/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 {