Refactor frontend to Vue 3 + Vite + Pinia + Cypress E2E

- Replace single-file 8441-line HTML with Vue 3 SPA
- Pinia stores: auth, oils, recipes, diary, ui
- Composables: useApi, useDialog, useSmartPaste, useOilTranslation
- 6 shared components: RecipeCard, RecipeDetailOverlay, TagPicker, etc.
- 9 page views: RecipeSearch, RecipeManager, Inventory, OilReference, etc.
- 14 Cypress E2E test specs (113 tests), all passing
- Multi-stage Dockerfile (Node build + Python runtime)
- Demo video generation scripts (TTS + subtitles + screen recording)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/UserMenu.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="usermenu-overlay" @click.self="$emit('close')">
+    <div class="usermenu-card">
+      <div class="usermenu-name">{{ auth.user.display_name || auth.user.username }}</div>
+      <div class="usermenu-role">
+        <span class="role-badge">{{ roleLabel }}</span>
+      </div>
+
+      <div class="usermenu-actions">
+        <button class="usermenu-btn" @click="goMyDiary">
+          📖 我的
+        </button>
+        <button class="usermenu-btn" @click="goNotifications">
+          🔔 通知
+          <span v-if="unreadCount > 0" class="unread-badge">{{ unreadCount }}</span>
+        </button>
+        <button class="usermenu-btn usermenu-btn-logout" @click="handleLogout">
+          🚪 退出登录
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
+import { useUiStore } from '../stores/ui'
+
+const emit = defineEmits(['close'])
+
+const auth = useAuthStore()
+const ui = useUiStore()
+const router = useRouter()
+
+const unreadCount = ref(0)
+
+const roleLabel = computed(() => {
+  const map = {
+    admin: '管理员',
+    senior_editor: '高级编辑',
+    editor: '编辑',
+    viewer: '查看者',
+  }
+  return map[auth.user.role] || auth.user.role
+})
+
+function goMyDiary() {
+  emit('close')
+  router.push('/mydiary')
+}
+
+function goNotifications() {
+  emit('close')
+  router.push('/notifications')
+}
+
+function handleLogout() {
+  auth.logout()
+  ui.showToast('已退出登录')
+  emit('close')
+  window.location.reload()
+}
+</script>
+
+<style scoped>
+.usermenu-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 4000;
+}
+
+.usermenu-card {
+  position: absolute;
+  top: 56px;
+  right: 16px;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
+  padding: 18px 20px 14px;
+  min-width: 180px;
+  z-index: 4001;
+}
+
+.usermenu-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #3e3a44;
+  margin-bottom: 4px;
+}
+
+.usermenu-role {
+  margin-bottom: 14px;
+}
+
+.role-badge {
+  display: inline-block;
+  font-size: 11px;
+  padding: 2px 10px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
+  color: #4a9d7e;
+  font-weight: 500;
+}
+
+.usermenu-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.usermenu-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 9px 10px;
+  border: none;
+  background: none;
+  border-radius: 8px;
+  font-size: 14px;
+  color: #3e3a44;
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+  transition: background 0.15s;
+  position: relative;
+}
+
+.usermenu-btn:hover {
+  background: #f5f3f0;
+}
+
+.usermenu-btn-logout {
+  color: #d9534f;
+  margin-top: 6px;
+  border-top: 1px solid #eee;
+  padding-top: 12px;
+  border-radius: 0 0 8px 8px;
+}
+
+.unread-badge {
+  background: #d9534f;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  min-width: 18px;
+  height: 18px;
+  line-height: 18px;
+  text-align: center;
+  border-radius: 9px;
+  padding: 0 5px;
+  margin-left: auto;
+}
+</style>