1 changed files with 105 additions and 0 deletions
--- a/history.html
+++ b/history.html
@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>历史记录 - 植物智识</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: '#165DFF', // 蓝色主色调
+          }
+        }
+      }
+    }
+  </script>
+</head>
+<body class="bg-gray-50 min-h-screen flex flex-col">
+  <!-- 导航栏 -->
+  <nav class="bg-white shadow-sm fixed w-full top-0 z-50">
+    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+      <div class="flex items-center">
+        <i class="fa fa-leaf text-primary text-2xl mr-2"></i>
+        <h1 class="text-xl font-bold">植物智识</h1>
+      </div>
+      <div class="hidden md:flex space-x-6">
+        <a href="index.html" class="text-gray-600 hover:text-primary">首页</a>
+        <a href="history.html" class="text-primary font-medium">历史记录</a>
+      </div>
+    </div>
+  </nav>
+
+  <!-- 主内容 -->
+  <main class="container mx-auto px-4 pt-24 pb-16 flex-grow">
+    <div class="max-w-4xl mx-auto">
+      <!-- 返回按钮 -->
+      <a href="index.html" class="inline-flex items-center text-gray-600 mb-6 hover:text-primary">
+        <i class="fa fa-arrow-left mr-2"></i>返回首页
+      </a>
+
+      <h2 class="text-2xl font-bold mb-6">识别历史记录</h2>
+
+      <!-- 历史记录列表 -->
+      <div id="history-container" class="space-y-4">
+        <!-- 无记录提示 -->
+        <div id="empty-tip" class="text-center py-12 text-gray-500">
+          <i class="fa fa-history text-4xl mb-4"></i>
+          <p>暂无识别记录，快去首页上传图片吧</p>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <!-- 页脚 -->
+  <footer class="bg-gray-800 text-white py-8">
+    <div class="container mx-auto px-4 text-center">
+      <p>© 2025 植物智识 - 学生开发的植物识别与养护工具</p>
+    </div>
+  </footer>
+
+  <script>
+    window.onload = () => {
+      const history = JSON.parse(localStorage.getItem("plantHistory") || "[]");
+      const container = document.getElementById("history-container");
+      const emptyTip = document.getElementById("empty-tip");
+
+      if (history.length === 0) return;
+
+      // 隐藏空提示，渲染记录
+      emptyTip.remove();
+      container.innerHTML = history.map((item, index) => `
+        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
+          <div class="md:flex">
+            <div class="md:w-1/4 p-4">
+              <img src="${item.imageBase64}" alt="${item.plantName}" class="w-full h-32 object-cover rounded-lg">
+            </div>
+            <div class="md:w-3/4 p-4">
+              <h3 class="font-bold text-lg mb-1">${item.plantName}</h3>
+              <div class="flex items-center text-sm text-gray-500 mb-3">
+                <span class="mr-3">置信度 ${item.plantConfidence}%</span>
+                <span>${item.identifyTime}</span>
+              </div>
+              <button onclick="viewDetail(${index})" class="text-primary hover:underline text-sm">
+                <i class="fa fa-eye mr-1"></i>查看详情
+              </button>
+            </div>
+          </div>
+        </div>
+      `).join("");
+    };
+
+    // 查看历史详情
+    function viewDetail(index) {
+      const history = JSON.parse(localStorage.getItem("plantHistory") || "[]");
+      if (index >= 0 && index < history.length) {
+        localStorage.setItem("currentResult", JSON.stringify(history[index]));
+        window.location.href = "result.html";
+      }
+    }
+  </script>
+</body>
+</html>