feat: enhance Gemini OCR and update schema for home currency support

CF · CF · commit ddf20906d93e · 2026-01-22T23:11:36.000+08:00
diff --git a/src/components/ManualInvoiceForm.tsx b/src/components/ManualInvoiceForm.tsx
@@ -15,6 +15,8 @@ export const ManualInvoiceForm: React.FC<ManualInvoiceFormProps> = ({ initialDat
   const [invoice, setInvoice] = useState({
     tripId: initialData?.tripId || '',
     shopName: initialData?.shopName || '',
+    shopAddress: initialData?.shopAddress || '',
+    tel: initialData?.tel || '',
     country: initialData?.country || '',
     currency: initialData?.currency || 'HKD',
     txDate: initialData?.txDate || new Date().toISOString().split('T')[0],
@@ -23,7 +25,7 @@ export const ManualInvoiceForm: React.FC<ManualInvoiceFormProps> = ({ initialDat
   });
 
   const [items, setItems] = useState<Partial<Item>[]>(
-    initialData?.items || [{ id: crypto.randomUUID(), nameOriginal: '', nameChinese: '', type: '食品', qty: 1, price: 0, currency: 'HKD' }]
+    initialData?.items || [{ id: crypto.randomUUID(), nameOriginal: '', nameChinese: '', type: '食品', qty: 1, price: 0, discount: 0, currency: 'HKD' }]
   );
 
   const [isTranslating, setIsTranslating] = useState<string | null>(null);
@@ -33,7 +35,7 @@ export const ManualInvoiceForm: React.FC<ManualInvoiceFormProps> = ({ initialDat
   }, []);
 
   const addItem = () => {
-    setItems([...items, { id: crypto.randomUUID(), nameOriginal: '', nameChinese: '', type: '食品', qty: 1, price: 0, currency: invoice.currency }]);
+    setItems([...items, { id: crypto.randomUUID(), nameOriginal: '', nameChinese: '', type: '食品', qty: 1, price: 0, discount: 0, currency: invoice.currency }]);
   };
 
   const removeItem = (id: string) => {
@@ -61,7 +63,7 @@ export const ManualInvoiceForm: React.FC<ManualInvoiceFormProps> = ({ initialDat
     const newInvoice: Invoice = {
       ...invoice,
       id: invoiceId,
-      totalAmount: items.reduce((sum, item) => sum + (Number(item.price) || 0) * (Number(item.qty) || 1), 0)
+      totalAmount: items.reduce((sum, item) => sum + ((Number(item.price) || 0) * (Number(item.qty) || 1)) - (Number(item.discount) || 0), 0)
     };
 
     await dbService.saveInvoice(newInvoice);
@@ -72,7 +74,8 @@ export const ManualInvoiceForm: React.FC<ManualInvoiceFormProps> = ({ initialDat
         id: item.id || crypto.randomUUID(),
         invoiceId,
         currency: item.currency || invoice.currency,
-        status: '未開封'
+        status: '未開封',
+        discount: Number(item.discount) || 0
       });
     }
 
@@ -103,6 +106,23 @@ export const ManualInvoiceForm: React.FC<ManualInvoiceFormProps> = ({ initialDat
               placeholder="例如：驚安之殿堂"
             />
           </div>
+          <div className="col-span-2">
+            <label className="text-xs font-bold text-slate-500 mb-1 block">商店地址</label>
+            <input 
+              type="text" 
+              value={invoice.shopAddress} 
+              onChange={e => setInvoice({...invoice, shopAddress: e.target.value})}
+              placeholder="例如：東京都新宿區..."
+            />
+          </div>
+          <div className="col-span-2">
+            <label className="text-xs font-bold text-slate-500 mb-1 block">電話</label>
+            <input 
+              type="text" 
+              value={invoice.tel} 
+              onChange={e => setInvoice({...invoice, tel: e.target.value})}
+            />
+          </div>
           <div>
             <label className="text-xs font-bold text-slate-500 mb-1 block">日期</label>
             <input 
@@ -185,7 +205,7 @@ export const ManualInvoiceForm: React.FC<ManualInvoiceFormProps> = ({ initialDat
                     placeholder="翻譯或手動輸入"
                   />
                 </div>
-                <div className="col-span-6">
+                <div className="col-span-4">
                   <label className="text-[10px] font-bold text-slate-400 uppercase">類別</label>
                   <select 
                     value={item.type} 
@@ -200,7 +220,7 @@ export const ManualInvoiceForm: React.FC<ManualInvoiceFormProps> = ({ initialDat
                     <option value="其他">其他</option>
                   </select>
                 </div>
-                <div className="col-span-3">
+                <div className="col-span-2">
                   <label className="text-[10px] font-bold text-slate-400 uppercase">數量</label>
                   <input 
                     type="number" 
@@ -216,6 +236,14 @@ export const ManualInvoiceForm: React.FC<ManualInvoiceFormProps> = ({ initialDat
                     onChange={e => updateItem(item.id!, 'price', Number(e.target.value))}
                   />
                 </div>
+                <div className="col-span-3">
+                  <label className="text-[10px] font-bold text-slate-400 uppercase">折扣</label>
+                  <input 
+                    type="number" 
+                    value={item.discount} 
+                    onChange={e => updateItem(item.id!, 'discount', Number(e.target.value))}
+                  />
+                </div>
               </div>
             </div>
           ))}
diff --git a/src/services/ocr.ts b/src/services/ocr.ts
@@ -2,9 +2,19 @@ import { createWorker } from 'tesseract.js';
 
 export interface ParsedReceipt {
   shopName: string;
+  shopAddress?: string;
+  country?: string;
+  tel?: string;
   txDate: string;
   txTime: string;
-  items: { name: string; nameChinese?: string; price: number; qty: number }[];
+  items: { 
+    name: string; 
+    nameChinese?: string; 
+    price: number; 
+    qty: number; 
+    type?: string;
+    discount?: number;
+  }[];
   totalAmount: number;
   currency?: string;
 }
@@ -29,15 +39,32 @@ export async function processReceiptWithGemini(imageFile: File, apiKey: string,
     reader.readAsDataURL(imageFile);
   });
 
-  const prompt = `分析這張收據圖片。請提取以下資訊並以 JSON 格式返回：
-  - 商店名稱 (shopName)
-  - 交易日期 (txDate, 格式 YYYY-MM-DD)
-  - 交易時間 (txTime, 格式 HH:mm)
-  - 幣別 (currency, 如 HKD, JPY, TWD)
-  - 總金額 (totalAmount, 數字)
-  - 項目清單 (items): 每個項目包含名稱 (name, 原始語言)、中文翻譯 (nameChinese)、單價 (price) 和數量 (qty)。
+  const prompt = `你是一個專業的收據識別助手。請分析這張圖片，並提取以下詳細資訊，以 JSON 格式返回：
+
+  1. 商店資訊：
+     - shopName: 商店名稱
+     - shopAddress: 商店地址 (如有)
+     - country: 國家/地區 (如 Japan, Taiwan, Hong Kong)
+     - tel: 電話號碼 (如有)
+  
+  2. 交易資訊：
+     - txDate: 交易日期 (格式 YYYY-MM-DD)
+     - txTime: 交易時間 (格式 HH:mm)
+     - currency: 貨幣代碼 (如 JPY, TWD, HKD, USD)
+     - totalAmount: 總金額 (純數字)
   
-  請只返回 JSON 代碼塊。`;
+  3. 商品清單 (items 陣列)，每項包含：
+     - name: 原始品名 (保留原文)
+     - nameChinese: 中文翻譯品名 (繁體中文)
+     - price: 單價 (純數字)
+     - qty: 數量 (純數字，預設 1)
+     - discount: 此項目的折扣金額 (如有，正數表示扣減金額，無則為 0)
+     - type: 商品類別 (從以下選擇：食品, 藥品, 生活用品, 化妝品, 衣物, 電子產品, 其他)
+
+  請注意：
+  - 如果無法識別某些欄位，請省略或設為 null。
+  - 確保 JSON 格式正確且無 Markdown 標記。
+  - 若有折扣，請確保 totalAmount 是折扣後的最終金額。`;
 
   const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`, {
     method: 'POST',
diff --git a/src/types/schema.ts b/src/types/schema.ts
@@ -19,6 +19,7 @@ export interface Invoice {
   txDate: string;
   txTime: string;
   totalAmount: number;
+  totalAmountHomeCurrency?: number;
 }
 
 export interface Item {
@@ -30,6 +31,7 @@ export interface Item {
   type: string;
   qty: number;
   price: number;
+  priceHomeCurrency?: number;
   currency: string;
   discount: number;
   expiryDate?: string;
diff --git a/src/views/Record.tsx b/src/views/Record.tsx
@@ -36,6 +36,9 @@ export const RecordView: React.FC = () => {
       
       setInitialData({
         shopName: parsed.shopName,
+        shopAddress: parsed.shopAddress,
+        country: parsed.country,
+        tel: parsed.tel,
         txDate: parsed.txDate,
         txTime: parsed.txTime,
         totalAmount: parsed.totalAmount,
@@ -46,7 +49,8 @@ export const RecordView: React.FC = () => {
           nameChinese: item.nameChinese || '',
           price: item.price,
           qty: item.qty,
-          type: '食品'
+          type: item.type || '食品',
+          discount: item.discount || 0
         }))
       });
       setMode('review');
