1 changed files with 127 additions and 0 deletions
--- a/result.html
+++ b/result.html
@ -0,0 +1,127 @@
+<!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-gray-600 hover:text-primary">历史记录</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>
+
+      <!-- 结果卡片 -->
+      <div class="bg-white rounded-xl shadow-sm overflow-hidden">
+        <div class="md:flex">
+          <!-- 图片区域 -->
+          <div class="md:w-1/2 p-6">
+            <h3 class="text-gray-700 font-medium mb-3">识别图片</h3>
+            <img id="plant-image" src="" alt="植物图片" class="w-full h-64 object-cover rounded-lg">
+          </div>
+          <!-- 信息区域 -->
+          <div class="md:w-1/2 p-6">
+            <h2 id="plant-name" class="text-2xl font-bold mb-3"></h2>
+            <div class="flex items-center mb-4">
+              <span id="confidence" class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium mr-3"></span>
+              <span id="time" class="text-gray-500 text-sm"></span>
+            </div>
+            <div class="mb-6">
+              <h3 class="text-gray-700 font-medium mb-2">植物信息</h3>
+              <p class="text-gray-600">已成功识别植物种类，点击下方按钮获取养护建议</p>
+            </div>
+            <!-- 操作按钮 -->
+            <div class="flex gap-3">
+              <button id="advice-btn" class="flex-1 bg-primary text-white py-2 rounded-lg font-medium hover:bg-primary/90 transition-colors">
+                <i class="fa fa-lightbulb-o mr-2"></i>养护建议
+              </button>
+              <button onclick="window.location.href='index.html'" class="border border-gray-300 px-4 py-2 rounded-lg font-medium hover:border-primary hover:text-primary transition-colors">
+                <i class="fa fa-refresh"></i>
+              </button>
+            </div>
+          </div>
+        </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 result = JSON.parse(localStorage.getItem("currentResult"));
+      if (!result) {
+        alert("未找到识别结果");
+        window.location.href = "index.html";
+        return;
+      }
+
+      // 渲染结果
+      document.getElementById("plant-name").textContent = result.plantName;
+      document.getElementById("confidence").textContent = `置信度 ${result.plantConfidence}%`;
+      document.getElementById("time").textContent = result.identifyTime;
+      document.getElementById("plant-image").src = result.imageBase64;
+
+      // 养护建议按钮
+      document.getElementById("advice-btn").addEventListener("click", async () => {
+        try {
+          const res = await fetch("http://localhost:3000/get-advice", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ plantName: result.plantName })
+          });
+          const adviceData = await res.json();
+
+          if (adviceData.error) throw new Error(adviceData.error);
+          if (!adviceData.output?.text) throw new Error("未获取到建议");
+
+          // 保存建议并跳转
+          localStorage.setItem("currentAdvice", JSON.stringify({
+            ...result,
+            advice: adviceData.output.text
+          }));
+          window.location.href = "advice.html";
+        } catch (err) {
+          alert("生成建议失败：" + err.message);
+        }
+      });
+    };
+  </script>
+</body>
+</html>