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/responsive.cy.js

@@ -0,0 +1,76 @@
+describe('Responsive Design', () => {
+  describe('Mobile viewport (375x667)', () => {
+    beforeEach(() => {
+      cy.viewport(375, 667)
+    })
+
+    it('loads the app on mobile', () => {
+      cy.visit('/')
+      cy.get('.app-header').should('be.visible')
+      cy.contains('doTERRA').should('be.visible')
+    })
+
+    it('nav tabs are scrollable', () => {
+      cy.visit('/')
+      cy.get('.nav-tabs').should('have.css', 'overflow-x', 'auto')
+    })
+
+    it('recipe cards stack in single column', () => {
+      cy.visit('/')
+      cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
+      // On mobile, cards should be full width
+      cy.get('.recipe-card').first().then($card => {
+        const width = $card.outerWidth()
+        expect(width).to.be.gte(300)
+      })
+    })
+
+    it('search input is usable on mobile', () => {
+      cy.visit('/')
+      cy.get('input[placeholder*="搜索"]').should('be.visible')
+      cy.get('input[placeholder*="搜索"]').type('薰衣草')
+      cy.get('input[placeholder*="搜索"]').should('have.value', '薰衣草')
+    })
+
+    it('oil reference page works on mobile', () => {
+      cy.visit('/oils')
+      cy.contains('精油价目').should('be.visible')
+      cy.get('.oil-card').should('have.length.gte', 1)
+    })
+  })
+
+  describe('Tablet viewport (768x1024)', () => {
+    beforeEach(() => {
+      cy.viewport(768, 1024)
+    })
+
+    it('loads and shows recipe grid', () => {
+      cy.visit('/')
+      cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
+    })
+
+    it('oil grid shows multiple columns', () => {
+      cy.visit('/oils')
+      cy.get('.oil-card', { timeout: 10000 }).should('have.length.gte', 1)
+    })
+  })
+
+  describe('Wide viewport (1920x1080)', () => {
+    beforeEach(() => {
+      cy.viewport(1920, 1080)
+    })
+
+    it('content is centered with max-width', () => {
+      cy.visit('/')
+      cy.get('.main').then($main => {
+        const width = $main.outerWidth()
+        expect(width).to.be.lte(960)
+      })
+    })
+
+    it('recipe grid shows multiple columns', () => {
+      cy.visit('/')
+      cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
+    })
+  })
+})