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/cypress/e2e/oil-reference.cy.js

@@ -0,0 +1,32 @@
+describe('Oil Reference Page', () => {
+  beforeEach(() => {
+    cy.visit('/oils')
+    cy.get('.oil-card, .oils-grid', { timeout: 10000 }).should('exist')
+  })
+
+  it('displays oil grid with items', () => {
+    cy.contains('精油价目').should('be.visible')
+    cy.get('.oil-card').should('have.length.gte', 10)
+  })
+
+  it('shows oil name and price on each chip', () => {
+    cy.get('.oil-card').first().should('contain', '¥')
+  })
+
+  it('filters oils by search', () => {
+    cy.get('.oil-card').then($chips => {
+      const initial = $chips.length
+      cy.get('input[placeholder*="搜索精油"]').type('薰衣草')
+      cy.wait(300)
+      cy.get('.oil-card').should('have.length.lt', initial)
+    })
+  })
+
+  it('toggles between bottle and drop price view', () => {
+    cy.get('.oil-card').first().invoke('text').then(textBefore => {
+      cy.contains('滴价').click()
+      cy.wait(300)
+      cy.get('.oil-card').first().invoke('text').should('not.eq', textBefore)
+    })
+  })
+})