體驗庫存倒計時 - 掌握試用時間是您管理鋼材庫存的得力助手。通過這個功能，您可以輕松管理和展示您的庫存信息。
體驗庫存倒計時功能說明
?? 功能概述
為體驗庫存數據添加10分鐘有效期，并在`/searchai/`搜索結果中實時顯示剩余時間，過期后自動隱藏，提升用戶體驗。
---
? 核心功能
1. 體驗數據識別
- 識別標志: 備注字段包含"體驗數據"的庫存記錄
- 有效期: 上傳后10分鐘內有效
- 自動過期: 超過10分鐘自動隱藏，不再顯示在搜索結果中
2. 倒計時顯示
- 格式: `體驗剩余: X分X秒`
- 位置: 搜索結果卡片的底部元信息區域
- 樣式: 漸變紫色背景，帶脈沖動畫效果
- 過期處理: 過期數據直接從搜索結果中移除
3. 本地倒計時
- 更新頻率: 每秒更新一次
- 無需刷新: 客戶端JavaScript本地計算，不刷新頁面
- 自動移除: 倒計時結束后自動淡出移除卡片
4. 過期提示
- 位置: `/kucun/` 庫存管理頁面
- 觸發條件: 檢測到用戶有過期的體驗數據
- 提示內容: 黃色警告框提示數據已過期，引導用戶重新加載
5. 使用提示
- 位置: 體驗庫存按鈕點擊時
- 提示內容: "? 注意：體驗數據僅在現貨庫存搜索中顯示10分鐘！"
?? 實現細節
1. 時間計算邏輯
2. API返回數據
在`local_stock_search_api`視圖中，返回的每個庫存項目包含以下額外字段：
?? 視覺效果
活躍狀態（未過期）
過期狀態
---
?? 時間線示例
用戶使用體驗庫存功能
---
?? 技術要點
1. 時區處理
2. 時間格式化
3. 客戶端倒計時
4. 性能優化
- 客戶端本地計算，無需請求服務器
- 每秒僅更新DOM元素文本，開銷極小
- 倒計時結束自動淡出移除，釋放DOM資源
?? 測試場景
場景1: 正常倒計時
- 用戶點擊"體驗庫存"按鈕
- 進入`/searchai/`搜索頁面
- 搜索任意品種（如"方矩管"）
- 預期結果: 顯示體驗數據，帶有倒計時標簽
場景2: 倒計時更新
- 觀察倒計時顯示
- 預期結果:
場景3: 倒計時歸零
- 等待倒計時到 0分0秒
- 預期結果:
場景4: 使用提示
- 點擊"體驗庫存"按鈕
- 預期結果:
場景5: 重新體驗
- 體驗數據過期后，再次點擊"體驗庫存"
- 看到使用提示后確認
- 刷新搜索結果
- 預期結果: 倒計時重置為10分鐘
場景6: 混合數據
- 用戶有自己上傳的庫存 + 體驗庫存
- 預期結果:
---
?? 配置參數
可調整的參數
| 參數 | 位置 | 默認值 | 說明 | |-----|------|--------|------| | 倒計時更新間隔 | | 1秒 | `setInterval(..., 1000)` | | 淡出動畫時長 | | 0.5秒 | `transition: 'opacity 0.5s'` |
修改示例
如果要改為15分鐘有效期：
如果要改為2秒更新一次倒計時：
如果要改為1秒淡出動畫：
---
?? 業務價值
1. 提升用戶體驗
- ? 明確告知體驗數據的限制（點擊時提示）
- ? 實時倒計時創造緊迫感
- ? 過期后自動隱藏，搜索結果更干凈
- ? 過期提示清晰，引導用戶重新加載
2. 引導用戶轉化
- ? 10分鐘限制促使用戶快速決策
- ? 過期后引導用戶上傳正式庫存
- ? 體驗即時性增強產品價值感知
- ? 使用前提示增強認知
3. 系統資源管理
- ? 過期數據不顯示，減少搜索結果噪音
- ? 明確體驗數據的生命周期
- ? 避免體驗數據長期占用展示資源
?? 維護建議
定期任務（可選）
可以添加定時任務自動刪除過期的體驗數據：
監控指標
建議監控以下指標：
- 體驗數據的使用頻率
- 體驗數據轉化為正式數據的比例
- 體驗數據的平均存活時間
- 用戶重復使用體驗功能的次數
?? 完成總結
實現的功能
- ? 體驗數據10分鐘有效期
- ? 實時倒計時顯示
- ? 過期自動隱藏（不在搜索結果中顯示）
- ? 過期提示（/kucun/頁面黃色警告框）
- ? 使用提示（點擊體驗庫存按鈕時）
- ? 自動刷新機制
- ? 美觀的視覺效果
- ? 脈沖動畫吸引注意
技術亮點
- ? 精確的時間計算（timezone aware）
- ? 優雅的過期處理（自動淡出移除）
- ? 客戶端本地倒計時（無需刷新頁面）
- ? 多層提示機制（使用前、過期時）
- ? 響應式的UI設計
- ? 流暢的動畫效果
用戶體驗
- 直觀: 一眼就能看到剩余時間
- 動態: 倒計時每秒實時更新，無需刷新
- 美觀: 漸變色和動畫效果吸引眼球
- 流暢: 倒計時歸零后優雅淡出
- 清晰: 過期提示明確，引導用戶操作
- 高效: 客戶端計算，減少服務器壓力
?? 相關文件
- 過期數據過濾：第312-315行（continue跳過） - 過期檢測：第167-181行 - 傳遞過期狀態：第190行- 搜索頁面:
- 庫存管理頁面:
---
?? 完整功能流程
---
功能已完成并可投入使用！ ??