From 3dd75f34c03491883dbea416727b844208af5c24 Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Fri, 10 Apr 2026 22:47:33 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=95=86=E4=B8=9A=E6=A0=B8=E7=AE=97+?=
 =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E5=BA=93=E5=AD=98+=E8=AE=A4=E8=AF=81?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

商业核算:
- 加标语和示意项目（芳香调理），所有人可体验
- 管理员开放（不需认证）
- 新增项目需认证，未认证提示

个人库存:
- 搜索直接添加（回车或点击）
- 4个套装快捷按钮（家庭医生/居家呵护3988/芳香调理/全精油）
- 精油库默认折叠
- 配方匹配排除椰子油，降低门槛（至少1种匹配）

商业认证:
- 简化为商户名+证明图片
- 通过后内容仍显示（和二维码页面一致）
- 审核中内容不可修改

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/views/Inventory.vue | 139 ++++++++++++++++++++++++++-----
 frontend/src/views/MyDiary.vue   | 103 +++++++++++------------
 frontend/src/views/Projects.vue  |  62 +++++++++++++-
 3 files changed, 222 insertions(+), 82 deletions(-)

diff --git a/frontend/src/views/Inventory.vue b/frontend/src/views/Inventory.vue
index 2340a20..7ab1b46 100644
--- a/frontend/src/views/Inventory.vue
+++ b/frontend/src/views/Inventory.vue
@@ -1,29 +1,29 @@
 <template>
   <div class="inventory-page">
-    <!-- Search -->
+    <!-- Search + direct add -->
     <div class="search-box">
       <input
         class="search-input"
         v-model="searchQuery"
-        placeholder="搜索精油..."
+        placeholder="搜索精油名称，回车添加..."
+        @keydown.enter="addFromSearch"
       />
       <button v-if="searchQuery" class="search-clear-btn" @click="searchQuery = ''">✕</button>
     </div>
-
-    <!-- Oil Picker Grid -->
-    <div class="section-label">点击添加到库存</div>
-    <div class="oil-picker-grid">
-      <div
-        v-for="name in filteredOilNames"
-        :key="name"
-        class="oil-pick-chip"
-        :class="{ owned: ownedSet.has(name) }"
-        @click="toggleOil(name)"
-      >
+    <!-- Search results for direct add -->
+    <div v-if="searchQuery && searchResults.length" class="search-results">
+      <div v-for="name in searchResults" :key="name" class="search-result-item" @click="addOil(name)">
         <span class="pick-dot" :class="{ active: ownedSet.has(name) }">{{ ownedSet.has(name) ? '✓' : '+' }}</span>
-        <span class="pick-name">{{ name }}</span>
+        {{ name }}
       </div>
-      <div v-if="filteredOilNames.length === 0" class="empty-hint">未找到精油</div>
+    </div>
+
+    <!-- Quick add kits -->
+    <div class="kit-bar">
+      <button class="kit-btn" @click="addKit('family')">家庭医生</button>
+      <button class="kit-btn" @click="addKit('home3988')">居家呵护(3988)</button>
+      <button class="kit-btn" @click="addKit('aroma')">芳香调理</button>
+      <button class="kit-btn" @click="addKit('full')">全精油</button>
     </div>
 
     <!-- Owned Oils Section -->
@@ -36,7 +36,25 @@
         {{ name }} ✕
       </div>
     </div>
-    <div v-else class="empty-hint">暂未添加精油，点击上方精油添加到库存</div>
+    <div v-else class="empty-hint">搜索添加精油，或点击上方套装快捷添加</div>
+
+    <!-- Oil Picker Grid (collapsed by default) -->
+    <div class="section-header clickable" @click="showPicker = !showPicker">
+      <span>📦 全部精油</span>
+      <span class="toggle-icon">{{ showPicker ? '▾' : '▸' }}</span>
+    </div>
+    <div v-if="showPicker" class="oil-picker-grid">
+      <div
+        v-for="name in oils.oilNames"
+        :key="name"
+        class="oil-pick-chip"
+        :class="{ owned: ownedSet.has(name) }"
+        @click="toggleOil(name)"
+      >
+        <span class="pick-dot" :class="{ active: ownedSet.has(name) }">{{ ownedSet.has(name) ? '✓' : '+' }}</span>
+        <span class="pick-name">{{ name }}</span>
+      </div>
+    </div>
 
     <!-- Matching Recipes Section -->
     <div class="section-header" style="margin-top:20px">
@@ -85,32 +103,86 @@ const ui = useUiStore()
 const searchQuery = ref('')
 const ownedOils = ref([])
 const loading = ref(false)
+const showPicker = ref(false)
 
 const ownedSet = computed(() => new Set(ownedOils.value))
 
-const filteredOilNames = computed(() => {
-  if (!searchQuery.value.trim()) return oils.oilNames
+const searchResults = computed(() => {
+  if (!searchQuery.value.trim()) return []
   const q = searchQuery.value.trim().toLowerCase()
-  return oils.oilNames.filter(n => n.toLowerCase().includes(q))
+  return oils.oilNames.filter(n => n.toLowerCase().includes(q)).slice(0, 15)
 })
 
+// Kit definitions
+const KITS = {
+  family: ['乳香', '茶树', '薰衣草', '柠檬', '椒样薄荷', '保卫', '牛至', '乐活', '顺畅呼吸', '舒缓'],
+  home3988: ['乳香', '野橘', '柠檬', '薰衣草', '椒样薄荷', '冬青', '茶树', '生姜', '柠檬草', '西班牙牛至',
+    '西洋蓍草石榴籽', '乐活', '保卫', '新瑞活力', '舒缓', '安定情绪', '安宁神气', '顺畅呼吸', '柑橘清新', '芳香调理', '元气焕能'],
+  aroma: ['芳香调理'],
+  full: ['侧柏', '乳香', '雪松', '芫荽', '丝柏', '圆柚', '红橘', '冬青', '没药', '扁柏', '檀香', '姜黄', '玫瑰',
+    '绿薄荷', '薰衣草', '永久花', '香蜂草', '迷迭香', '麦卢卡', '天竺葵', '蓝艾菊', '小茴香',
+    '古巴香脂', '依兰依兰', '丁香花蕾', '柠檬尤加利', '藿香', '西班牙牛至尾草',
+    '罗勒', '莱姆', '生姜', '柠檬', '茶树', '野橘', '香茅', '枫香',
+    '芹菜籽', '岩兰草', '苦橙叶', '柠檬草', '山鸡椒', '黑云杉',
+    '马郁兰', '佛手柑', '黑胡椒', '小豆蔻', '尤加利', '百里香',
+    '椒样薄荷', '杜松浆果', '加州白鼠尾草',
+    '快乐鼠尾草', '西伯利亚冷杉',
+    '西班牙牛至', '斯里兰卡肉桂']
+}
+
+function addKit(kitName) {
+  const kit = KITS[kitName]
+  if (!kit) return
+  let added = 0
+  for (const name of kit) {
+    // Match existing oil names (fuzzy)
+    const match = oils.oilNames.find(n => n === name) || oils.oilNames.find(n => n.includes(name) || name.includes(n))
+    if (match && !ownedOils.value.includes(match)) {
+      ownedOils.value.push(match)
+      added++
+    }
+  }
+  ownedOils.value.sort((a, b) => a.localeCompare(b, 'zh'))
+  saveInventory()
+  ui.showToast(`已添加 ${added} 种精油`)
+}
+
+function addFromSearch() {
+  if (searchResults.value.length > 0) {
+    addOil(searchResults.value[0])
+  }
+}
+
+function addOil(name) {
+  if (!ownedOils.value.includes(name)) {
+    ownedOils.value.push(name)
+    ownedOils.value.sort((a, b) => a.localeCompare(b, 'zh'))
+    saveInventory()
+  }
+  searchQuery.value = ''
+}
+
 const matchingRecipes = computed(() => {
   if (ownedOils.value.length === 0) return []
   return recipeStore.recipes
     .filter(r => {
-      const needed = r.ingredients.map(i => i.oil)
+      // Exclude coconut oil from matching
+      const needed = r.ingredients.filter(i => i.oil !== '椰子油').map(i => i.oil)
+      if (needed.length === 0) return false
       const coverage = needed.filter(o => ownedSet.value.has(o)).length
-      return coverage >= Math.ceil(needed.length * 0.5)
+      // Show if at least 1 oil matches
+      return coverage >= 1
     })
     .sort((a, b) => {
       const aCov = coverageRatio(a)
       const bCov = coverageRatio(b)
-      return bCov - aCov
+      if (bCov !== aCov) return bCov - aCov
+      return a.name.localeCompare(b.name, 'zh')
     })
 })
 
 function coverageRatio(recipe) {
-  const needed = recipe.ingredients.map(i => i.oil)
+  const needed = recipe.ingredients.filter(i => i.oil !== '椰子油').map(i => i.oil)
   if (needed.length === 0) return 0
   return needed.filter(o => ownedSet.value.has(o)).length / needed.length
 }
@@ -205,6 +277,27 @@ onMounted(() => {
   padding: 4px;
 }
 
+.search-results {
+  margin-bottom: 10px; max-height: 200px; overflow-y: auto;
+  border: 1.5px solid #e5e4e7; border-radius: 10px; background: #fff;
+}
+.search-result-item {
+  padding: 8px 12px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.search-result-item:hover { background: #f0faf5; }
+.search-result-item:last-child { border-bottom: none; }
+
+.kit-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
+.kit-btn {
+  padding: 5px 12px; border: 1.5px solid #e5e4e7; border-radius: 20px; background: #fff;
+  font-size: 12px; cursor: pointer; font-family: inherit; color: #6b6375;
+}
+.kit-btn:hover { border-color: #7ec6a4; color: #4a9d7e; }
+
+.clickable { cursor: pointer; }
+.toggle-icon { font-size: 12px; color: #999; margin-left: auto; }
+
 .section-label {
   font-size: 12px;
   color: #b0aab5;
diff --git a/frontend/src/views/MyDiary.vue b/frontend/src/views/MyDiary.vue
index 8d2f865..9b2766e 100644
--- a/frontend/src/views/MyDiary.vue
+++ b/frontend/src/views/MyDiary.vue
@@ -245,56 +245,41 @@
       <div ref="bizCertRef" class="section-card biz-card">
         <h4>🏢 商业用户认证</h4>
 
-        <!-- 已认证 -->
+        <!-- Status bar -->
         <div v-if="auth.isBusiness" class="biz-status-bar biz-approved">
           <span>✅ 已认证商业用户</span>
         </div>
-
-        <!-- 审核中 -->
         <div v-else-if="bizApp.status === 'pending'" class="biz-status-bar biz-pending">
           <span>⏳ 认证申请审核中</span>
-          <div class="biz-status-detail">商户名：{{ bizApp.business_name }} · 提交时间：{{ formatDate(bizApp.created_at) }}</div>
+        </div>
+        <div v-else-if="bizApp.status === 'rejected'" class="biz-status-bar biz-rejected">
+          <span>❌ 认证申请未通过</span>
+          <div v-if="bizApp.reject_reason" class="biz-status-detail">原因：{{ bizApp.reject_reason }}</div>
+          <p style="font-size:12px;margin-top:4px">你可以修改后重新申请</p>
         </div>
 
-        <!-- 被拒绝 -->
-        <template v-else-if="bizApp.status === 'rejected'">
-          <div class="biz-status-bar biz-rejected">
-            <span>❌ 认证申请未通过</span>
-            <div v-if="bizApp.reject_reason" class="biz-status-detail">原因：{{ bizApp.reject_reason }}</div>
+        <!-- Always show filled info (like QR page) -->
+        <div class="biz-form">
+          <div class="form-group">
+            <label class="form-label">商户名称 *</label>
+            <input v-model="businessName" class="form-input" placeholder="你的商户或品牌名称" :disabled="bizApp.status === 'pending'" />
           </div>
-          <p class="hint-text">你可以修改信息后重新申请。</p>
-        </template>
-
-        <!-- 申请表单（首次或被拒后重新申请） -->
-        <template v-if="!auth.isBusiness && bizApp.status !== 'pending'">
-          <div class="biz-form">
-            <div class="form-group">
-              <label class="form-label">认证类型 *</label>
-              <select v-model="bizType" class="form-select">
-                <option value="">请选择</option>
-                <option value="individual">个体经营户</option>
-                <option value="company">公司</option>
-                <option value="studio">工作室/美容院</option>
-                <option value="distributor">代理商</option>
-              </select>
-            </div>
-            <div class="form-group">
-              <label class="form-label">企业/商户名称 *</label>
-              <input v-model="businessName" class="form-input" placeholder="你的企业或品牌名称" />
-            </div>
-            <div class="form-group">
-              <label class="form-label">联系电话 *</label>
-              <input v-model="bizPhone" class="form-input" type="tel" placeholder="联系电话" />
-            </div>
-            <div class="form-group">
-              <label class="form-label">业务描述</label>
-              <textarea v-model="businessReason" class="form-textarea" rows="3" placeholder="描述你的业务范围和计划..."></textarea>
-            </div>
-            <div style="display:flex;gap:10px;margin-top:12px">
-              <button class="btn-primary" @click="applyBusiness" :disabled="!businessName.trim() || !bizType">💾 提交申请</button>
+          <div class="form-group">
+            <label class="form-label">证明图片 *</label>
+            <p style="font-size:11px;color:var(--text-light);margin-bottom:6px">营业执照或相关证明材料</p>
+            <div class="upload-box" @click="$refs.bizDocInput?.click()">
+              <img v-if="bizDocImage" :src="bizDocImage" class="upload-box-img" />
+              <span v-else class="upload-box-hint">点击上传</span>
             </div>
+            <input ref="bizDocInput" type="file" accept="image/*" style="display:none" @change="handleBizDocUpload" />
+            <button v-if="bizDocImage" class="btn-clear" @click="bizDocImage = ''">清除</button>
           </div>
-        </template>
+          <template v-if="!auth.isBusiness && bizApp.status !== 'pending'">
+            <div style="margin-top:12px">
+              <button class="btn-primary" @click="applyBusiness" :disabled="!businessName.trim() || !bizDocImage">💾 提交申请</button>
+            </div>
+          </template>
+        </div>
       </div>
     </div>
   </div>
@@ -346,6 +331,7 @@ const businessName = ref('')
 const businessReason = ref('')
 const bizType = ref('')
 const bizPhone = ref('')
+const bizDocImage = ref('')
 const bizApp = ref({ status: null })
 
 onMounted(async () => {
@@ -356,7 +342,11 @@ onMounted(async () => {
   // Load business application status
   try {
     const bizRes = await api('/api/my-business-application')
-    if (bizRes.ok) bizApp.value = await bizRes.json()
+    if (bizRes.ok) {
+      bizApp.value = await bizRes.json()
+      if (bizApp.value.business_name) businessName.value = bizApp.value.business_name
+      if (bizApp.value.document) bizDocImage.value = bizApp.value.document
+    }
   } catch {}
   // 从商业核算跳转过来，滚到商业认证区域
   if (route.query.section === 'biz-cert') {
@@ -702,33 +692,36 @@ async function changePassword() {
   }
 }
 
+async function handleBizDocUpload(event) {
+  const file = event.target.files[0]
+  if (!file) return
+  let base64 = await readFileAsBase64(file)
+  base64 = await compressImage(base64, 300000, 600)
+  bizDocImage.value = base64
+}
+
 async function applyBusiness() {
-  if (!businessName.value.trim() || !bizType.value) {
-    ui.showToast('请填写必填项')
+  if (!businessName.value.trim() || !bizDocImage.value) {
+    ui.showToast('请填写商户名称并上传证明图片')
     return
   }
-  const typeLabels = { individual: '个体经营户', company: '公司', studio: '工作室/美容院', distributor: '代理商' }
-  const info = [
-    `认证类型：${typeLabels[bizType.value] || bizType.value}`,
-    bizPhone.value ? `联系电话：${bizPhone.value}` : '',
-    businessReason.value ? `业务描述：${businessReason.value}` : '',
-  ].filter(Boolean).join('\n')
   try {
     const res = await api('/api/business-apply', {
       method: 'POST',
       body: JSON.stringify({
         business_name: businessName.value.trim(),
-        document: info,
+        document: bizDocImage.value,
       }),
     })
     if (res.ok) {
-      businessName.value = ''
-      businessReason.value = ''
-      bizType.value = ''
-      bizPhone.value = ''
+      // Don't clear — keep showing submitted data
       ui.showToast('申请已提交，请等待管理员审核')
       const bizRes = await api('/api/my-business-application')
-      if (bizRes.ok) bizApp.value = await bizRes.json()
+      if (bizRes.ok) {
+        bizApp.value = await bizRes.json()
+        // Restore document image from app data
+        if (bizApp.value.document) bizDocImage.value = bizApp.value.document
+      }
     } else {
       const err = await res.json().catch(() => ({}))
       ui.showToast(err.detail || '提交失败')
diff --git a/frontend/src/views/Projects.vue b/frontend/src/views/Projects.vue
index a3b8b88..2db66ed 100644
--- a/frontend/src/views/Projects.vue
+++ b/frontend/src/views/Projects.vue
@@ -1,12 +1,29 @@
 <template>
   <div class="projects-page">
+    <!-- Header -->
+    <div class="commercial-header">
+      <div class="commercial-icon">💼</div>
+      <div class="commercial-desc">商业用户专属功能，包含项目核算、成本分析等工具</div>
+    </div>
+
     <!-- Project List -->
     <div class="toolbar">
-      <h3 class="page-title">💼 商业核算</h3>
-      <button v-if="auth.isBusiness" class="btn-primary" @click="createProject">+ 新建项目</button>
+      <h3 class="page-title">📊 服务项目成本利润分析</h3>
+      <button class="btn-primary btn-sm" @click="handleCreateProject">+ 新增项目</button>
     </div>
 
     <div v-if="!selectedProject" class="project-list">
+      <!-- Demo project (always visible) -->
+      <div class="project-card demo-card" @click="openDemo">
+        <div class="proj-header">
+          <span class="proj-name">芳香调理（示意）</span>
+          <span class="proj-badge">体验</span>
+        </div>
+        <div class="proj-summary">
+          <span>点击查看示意项目</span>
+        </div>
+      </div>
+      <!-- Real projects -->
       <div
         v-for="p in projects"
         :key="p._id || p.id"
@@ -27,7 +44,6 @@
           <button class="btn-icon-sm" @click="deleteProject(p)" title="删除">🗑️</button>
         </div>
       </div>
-      <div v-if="projects.length === 0" class="empty-hint">暂无项目，点击上方创建</div>
     </div>
 
     <!-- Project Detail -->
@@ -244,6 +260,34 @@ async function loadProjects() {
   }
 }
 
+function handleCreateProject() {
+  if (!auth.isBusiness && !auth.isAdmin) {
+    showCertPrompt()
+    return
+  }
+  createProject()
+}
+
+// Demo project data (local only, per user)
+const demoProject = ref(null)
+function openDemo() {
+  demoProject.value = {
+    _demo: true,
+    name: '芳香调理（示意）',
+    ingredients: [
+      { oil: '芳香调理', drops: 12 },
+      { oil: '椰子油', drops: 186 },
+    ],
+    packaging_cost: 5,
+    labor_cost: 30,
+    other_cost: 10,
+    selling_price: 198,
+    quantity: 1,
+    notes: '这是一个示意项目，您可以修改数字体验功能',
+  }
+  selectedProject.value = demoProject.value
+}
+
 async function createProject() {
   const name = await showPrompt('项目名称:', '新项目')
   if (!name) return
@@ -273,7 +317,7 @@ async function createProject() {
 }
 
 function selectProject(p) {
-  if (!auth.isBusiness) {
+  if (!auth.isBusiness && !auth.isAdmin) {
     showCertPrompt()
     return
   }
@@ -383,6 +427,16 @@ function formatDate(d) {
   padding: 0 12px 24px;
 }
 
+.commercial-header {
+  text-align: center; padding: 24px 16px 16px; margin-bottom: 16px;
+}
+.commercial-icon { font-size: 48px; margin-bottom: 8px; }
+.commercial-desc { font-size: 14px; color: var(--text-light, #999); }
+.demo-card { border-style: dashed !important; opacity: 0.85; }
+.proj-badge {
+  font-size: 10px; background: #fff3e0; color: #e65100; padding: 2px 8px; border-radius: 8px;
+}
+
 .toolbar {
   display: flex;
   align-items: center;