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/views/BugTracker.vue

@@ -0,0 +1,644 @@
+<template>
+  <div class="bug-tracker">
+    <div class="toolbar">
+      <h3 class="page-title">🐛 Bug Tracker</h3>
+      <button class="btn-primary" @click="showAddBug = true">+ 新增Bug</button>
+    </div>
+
+    <!-- Active Bugs -->
+    <div class="section-header">
+      <span>🔴 活跃 ({{ activeBugs.length }})</span>
+    </div>
+    <div class="bug-list">
+      <div v-for="bug in activeBugs" :key="bug._id || bug.id" class="bug-card" :class="'priority-' + (bug.priority || 'normal')">
+        <div class="bug-header">
+          <span class="bug-priority" :class="'p-' + (bug.priority || 'normal')">{{ priorityLabel(bug.priority) }}</span>
+          <span class="bug-status" :class="'s-' + (bug.status || 'open')">{{ statusLabel(bug.status) }}</span>
+          <span class="bug-date">{{ formatDate(bug.created_at) }}</span>
+        </div>
+        <div class="bug-title">{{ bug.title }}</div>
+        <div v-if="bug.description" class="bug-desc">{{ bug.description }}</div>
+        <div v-if="bug.reporter" class="bug-reporter">报告者: {{ bug.reporter }}</div>
+
+        <!-- Status workflow -->
+        <div class="bug-actions">
+          <template v-if="bug.status === 'open'">
+            <button class="btn-sm btn-status" @click="updateStatus(bug, 'testing')">开始测试</button>
+          </template>
+          <template v-else-if="bug.status === 'testing'">
+            <button class="btn-sm btn-status" @click="updateStatus(bug, 'fixed')">标记修复</button>
+            <button class="btn-sm btn-reopen" @click="updateStatus(bug, 'open')">重新打开</button>
+          </template>
+          <template v-else-if="bug.status === 'fixed'">
+            <button class="btn-sm btn-status" @click="updateStatus(bug, 'tested')">验证通过</button>
+            <button class="btn-sm btn-reopen" @click="updateStatus(bug, 'open')">重新打开</button>
+          </template>
+          <button class="btn-sm btn-delete" @click="removeBug(bug)">删除</button>
+        </div>
+
+        <!-- Comments -->
+        <div class="comments-section" v-if="expandedBugId === (bug._id || bug.id)">
+          <div v-for="comment in (bug.comments || [])" :key="comment._id || comment.id" class="comment-item">
+            <div class="comment-meta">
+              <span class="comment-author">{{ comment.author || comment.user_name || '匿名' }}</span>
+              <span class="comment-time">{{ formatDate(comment.created_at) }}</span>
+            </div>
+            <div class="comment-text">{{ comment.text || comment.content }}</div>
+          </div>
+          <div class="comment-add">
+            <input
+              v-model="newComment"
+              class="form-input"
+              placeholder="添加备注..."
+              @keydown.enter="addComment(bug)"
+            />
+            <button class="btn-primary btn-sm" @click="addComment(bug)" :disabled="!newComment.trim()">发送</button>
+          </div>
+        </div>
+        <button class="btn-toggle-comments" @click="toggleComments(bug)">
+          💬 {{ (bug.comments || []).length }} 条备注
+          {{ expandedBugId === (bug._id || bug.id) ? '▴' : '▾' }}
+        </button>
+      </div>
+      <div v-if="activeBugs.length === 0" class="empty-hint">暂无活跃Bug</div>
+    </div>
+
+    <!-- Resolved Bugs -->
+    <div class="section-header" style="margin-top:20px" @click="showResolved = !showResolved">
+      <span>✅ 已解决 ({{ resolvedBugs.length }})</span>
+      <span class="toggle-icon">{{ showResolved ? '▾' : '▸' }}</span>
+    </div>
+    <div v-if="showResolved" class="bug-list">
+      <div v-for="bug in resolvedBugs" :key="bug._id || bug.id" class="bug-card resolved">
+        <div class="bug-header">
+          <span class="bug-priority" :class="'p-' + (bug.priority || 'normal')">{{ priorityLabel(bug.priority) }}</span>
+          <span class="bug-status s-tested">已解决</span>
+          <span class="bug-date">{{ formatDate(bug.created_at) }}</span>
+        </div>
+        <div class="bug-title">{{ bug.title }}</div>
+        <div class="bug-actions">
+          <button class="btn-sm btn-reopen" @click="updateStatus(bug, 'open')">重新打开</button>
+          <button class="btn-sm btn-delete" @click="removeBug(bug)">删除</button>
+        </div>
+      </div>
+      <div v-if="resolvedBugs.length === 0" class="empty-hint">暂无已解决Bug</div>
+    </div>
+
+    <!-- Add Bug Modal -->
+    <div v-if="showAddBug" class="overlay" @click.self="showAddBug = false">
+      <div class="overlay-panel">
+        <div class="overlay-header">
+          <h3>新增Bug</h3>
+          <button class="btn-close" @click="showAddBug = false">✕</button>
+        </div>
+        <div class="form-group">
+          <label>标题</label>
+          <input v-model="bugForm.title" class="form-input" placeholder="Bug标题" />
+        </div>
+        <div class="form-group">
+          <label>描述</label>
+          <textarea v-model="bugForm.description" class="form-textarea" rows="4" placeholder="Bug描述，复现步骤等..."></textarea>
+        </div>
+        <div class="form-group">
+          <label>优先级</label>
+          <div class="priority-btns">
+            <button
+              v-for="p in priorities"
+              :key="p.value"
+              class="priority-btn"
+              :class="{ active: bugForm.priority === p.value, ['p-' + p.value]: true }"
+              @click="bugForm.priority = p.value"
+            >{{ p.label }}</button>
+          </div>
+        </div>
+        <div class="overlay-footer">
+          <button class="btn-outline" @click="showAddBug = false">取消</button>
+          <button class="btn-primary" @click="createBug" :disabled="!bugForm.title.trim()">提交</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive, onMounted } from 'vue'
+import { useAuthStore } from '../stores/auth'
+import { useUiStore } from '../stores/ui'
+import { api } from '../composables/useApi'
+import { showConfirm } from '../composables/useDialog'
+
+const auth = useAuthStore()
+const ui = useUiStore()
+
+const bugs = ref([])
+const showAddBug = ref(false)
+const showResolved = ref(false)
+const expandedBugId = ref(null)
+const newComment = ref('')
+
+const bugForm = reactive({
+  title: '',
+  description: '',
+  priority: 'normal',
+})
+
+const priorities = [
+  { value: 'low', label: '低' },
+  { value: 'normal', label: '中' },
+  { value: 'high', label: '高' },
+  { value: 'critical', label: '紧急' },
+]
+
+const activeBugs = computed(() =>
+  bugs.value.filter(b => b.status !== 'tested' && b.status !== 'closed')
+    .sort((a, b) => {
+      const order = { critical: 0, high: 1, normal: 2, low: 3 }
+      return (order[a.priority] ?? 2) - (order[b.priority] ?? 2)
+    })
+)
+
+const resolvedBugs = computed(() =>
+  bugs.value.filter(b => b.status === 'tested' || b.status === 'closed')
+)
+
+function priorityLabel(p) {
+  const map = { low: '低', normal: '中', high: '高', critical: '紧急' }
+  return map[p] || '中'
+}
+
+function statusLabel(s) {
+  const map = { open: '待处理', testing: '测试中', fixed: '已修复', tested: '已验证', closed: '已关闭' }
+  return map[s] || s
+}
+
+function formatDate(d) {
+  if (!d) return ''
+  return new Date(d).toLocaleString('zh-CN', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+function toggleComments(bug) {
+  const id = bug._id || bug.id
+  expandedBugId.value = expandedBugId.value === id ? null : id
+}
+
+async function loadBugs() {
+  try {
+    const res = await api('/api/bugs')
+    if (res.ok) {
+      bugs.value = await res.json()
+    }
+  } catch {
+    bugs.value = []
+  }
+}
+
+async function createBug() {
+  if (!bugForm.title.trim()) return
+  try {
+    const res = await api('/api/bugs', {
+      method: 'POST',
+      body: JSON.stringify({
+        title: bugForm.title.trim(),
+        description: bugForm.description.trim(),
+        priority: bugForm.priority,
+        status: 'open',
+        reporter: auth.user.display_name || auth.user.username,
+      }),
+    })
+    if (res.ok) {
+      showAddBug.value = false
+      bugForm.title = ''
+      bugForm.description = ''
+      bugForm.priority = 'normal'
+      await loadBugs()
+      ui.showToast('Bug已提交')
+    }
+  } catch {
+    ui.showToast('提交失败')
+  }
+}
+
+async function updateStatus(bug, newStatus) {
+  const id = bug._id || bug.id
+  try {
+    const res = await api(`/api/bugs/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify({ status: newStatus }),
+    })
+    if (res.ok) {
+      bug.status = newStatus
+      ui.showToast(`状态已更新: ${statusLabel(newStatus)}`)
+    }
+  } catch {
+    ui.showToast('更新失败')
+  }
+}
+
+async function removeBug(bug) {
+  const ok = await showConfirm(`确定删除 "${bug.title}"？`)
+  if (!ok) return
+  const id = bug._id || bug.id
+  try {
+    const res = await api(`/api/bugs/${id}`, { method: 'DELETE' })
+    if (res.ok) {
+      bugs.value = bugs.value.filter(b => (b._id || b.id) !== id)
+      ui.showToast('已删除')
+    }
+  } catch {
+    ui.showToast('删除失败')
+  }
+}
+
+async function addComment(bug) {
+  if (!newComment.value.trim()) return
+  const id = bug._id || bug.id
+  try {
+    const res = await api(`/api/bugs/${id}/comments`, {
+      method: 'POST',
+      body: JSON.stringify({
+        text: newComment.value.trim(),
+        author: auth.user.display_name || auth.user.username,
+      }),
+    })
+    if (res.ok) {
+      newComment.value = ''
+      await loadBugs()
+      ui.showToast('备注已添加')
+    }
+  } catch {
+    ui.showToast('添加失败')
+  }
+}
+
+onMounted(() => {
+  loadBugs()
+})
+</script>
+
+<style scoped>
+.bug-tracker {
+  padding: 0 12px 24px;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 16px;
+  color: #3e3a44;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 4px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #3e3a44;
+  margin-bottom: 8px;
+  cursor: pointer;
+}
+
+.toggle-icon {
+  font-size: 12px;
+  color: #999;
+}
+
+.bug-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.bug-card {
+  padding: 14px 16px;
+  background: #fff;
+  border: 1.5px solid #e5e4e7;
+  border-radius: 12px;
+  border-left: 4px solid #e5e4e7;
+}
+
+.bug-card.priority-critical { border-left-color: #d32f2f; }
+.bug-card.priority-high { border-left-color: #f57c00; }
+.bug-card.priority-normal { border-left-color: #1976d2; }
+.bug-card.priority-low { border-left-color: #9e9e9e; }
+.bug-card.resolved { opacity: 0.7; }
+
+.bug-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.bug-priority {
+  padding: 2px 10px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.p-critical { background: #ffebee; color: #c62828; }
+.p-high { background: #fff3e0; color: #e65100; }
+.p-normal { background: #e3f2fd; color: #1565c0; }
+.p-low { background: #f5f5f5; color: #757575; }
+
+.bug-status {
+  padding: 2px 10px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.s-open { background: #ffebee; color: #c62828; }
+.s-testing { background: #fff3e0; color: #e65100; }
+.s-fixed { background: #e3f2fd; color: #1565c0; }
+.s-tested { background: #e8f5e9; color: #2e7d5a; }
+
+.bug-date {
+  font-size: 11px;
+  color: #b0aab5;
+  margin-left: auto;
+}
+
+.bug-title {
+  font-weight: 600;
+  font-size: 15px;
+  color: #3e3a44;
+  margin-bottom: 4px;
+}
+
+.bug-desc {
+  font-size: 13px;
+  color: #6b6375;
+  line-height: 1.6;
+  margin-bottom: 4px;
+}
+
+.bug-reporter {
+  font-size: 12px;
+  color: #b0aab5;
+  margin-bottom: 6px;
+}
+
+.bug-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+
+.btn-sm {
+  padding: 5px 14px;
+  font-size: 12px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+}
+
+.btn-status {
+  background: linear-gradient(135deg, #7ec6a4, #4a9d7e);
+  color: #fff;
+}
+
+.btn-reopen {
+  background: #fff3e0;
+  color: #e65100;
+  border: 1.5px solid #ffe0b2;
+}
+
+.btn-delete {
+  background: #fff;
+  color: #ef5350;
+  border: 1.5px solid #ffcdd2;
+}
+
+.btn-toggle-comments {
+  border: none;
+  background: transparent;
+  color: #6b6375;
+  font-size: 12px;
+  cursor: pointer;
+  padding: 6px 0;
+  font-family: inherit;
+  margin-top: 4px;
+}
+
+.btn-toggle-comments:hover {
+  color: #3e3a44;
+}
+
+/* Comments */
+.comments-section {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid #f0eeeb;
+}
+
+.comment-item {
+  padding: 8px 10px;
+  background: #f8f7f5;
+  border-radius: 8px;
+  margin-bottom: 6px;
+}
+
+.comment-meta {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2px;
+}
+
+.comment-author {
+  font-size: 12px;
+  font-weight: 600;
+  color: #3e3a44;
+}
+
+.comment-time {
+  font-size: 11px;
+  color: #b0aab5;
+}
+
+.comment-text {
+  font-size: 13px;
+  color: #6b6375;
+  line-height: 1.5;
+}
+
+.comment-add {
+  display: flex;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.form-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+}
+
+.form-input:focus {
+  border-color: #7ec6a4;
+}
+
+/* Overlay */
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.overlay-panel {
+  background: #fff;
+  border-radius: 16px;
+  padding: 24px;
+  max-width: 480px;
+  width: 100%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+}
+
+.overlay-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+
+.overlay-header h3 {
+  margin: 0;
+  font-size: 17px;
+  color: #3e3a44;
+}
+
+.overlay-footer {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  margin-top: 18px;
+}
+
+.form-group {
+  margin-bottom: 14px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: #3e3a44;
+  margin-bottom: 6px;
+}
+
+.form-textarea {
+  width: 100%;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 13px;
+  font-family: inherit;
+  resize: vertical;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.form-textarea:focus {
+  border-color: #7ec6a4;
+}
+
+.priority-btns {
+  display: flex;
+  gap: 6px;
+}
+
+.priority-btn {
+  padding: 6px 16px;
+  border-radius: 8px;
+  border: 1.5px solid #e5e4e7;
+  background: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.15s;
+}
+
+.priority-btn.active {
+  font-weight: 600;
+}
+
+.priority-btn.active.p-low { background: #f5f5f5; border-color: #9e9e9e; color: #616161; }
+.priority-btn.active.p-normal { background: #e3f2fd; border-color: #64b5f6; color: #1565c0; }
+.priority-btn.active.p-high { background: #fff3e0; border-color: #ffb74d; color: #e65100; }
+.priority-btn.active.p-critical { background: #ffebee; border-color: #ef9a9a; color: #c62828; }
+
+/* Buttons */
+.btn-primary {
+  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 9px 20px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.btn-outline {
+  background: #fff;
+  color: #6b6375;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  padding: 9px 20px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.btn-close {
+  border: none;
+  background: #f0eeeb;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #6b6375;
+}
+
+.empty-hint {
+  text-align: center;
+  color: #b0aab5;
+  font-size: 13px;
+  padding: 24px 0;
+}
+</style>