You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
3.8 KiB
105 lines
3.8 KiB
<!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> |