DEV-009: M20环节4-搜索历史+筛选预设+实时高亮+localStorage持久化
This commit is contained in:
米米米叮
parent
6360e43a9b
commit
0a9529c922
|
|
@ -0,0 +1,406 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: linear-gradient(135deg, #f5f7fa 0%, #e9ecf2 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 30px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: white;
|
||||||
|
border-radius: 32px;
|
||||||
|
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
color: #1a2639;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: #5d6d7e;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
font-size: 1rem;
|
||||||
|
border-left: 4px solid #ffd166;
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 搜索区域 */
|
||||||
|
.search-section {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input-wrapper {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchInput {
|
||||||
|
flex: 1;
|
||||||
|
padding: 16px 20px;
|
||||||
|
border: 2px solid #e0e4e9;
|
||||||
|
border-radius: 60px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchInput:focus {
|
||||||
|
border-color: #ffb347;
|
||||||
|
box-shadow: 0 0 0 4px rgba(255, 180, 70, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchBtn {
|
||||||
|
padding: 0 32px;
|
||||||
|
background: #1a2639;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 60px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchBtn:hover {
|
||||||
|
background: #2c3e50;
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 历史面板 */
|
||||||
|
.history-panel {
|
||||||
|
position: absolute;
|
||||||
|
top: 70px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 24px;
|
||||||
|
box-shadow: 0 12px 30px rgba(0,0,0,0.15);
|
||||||
|
padding: 20px;
|
||||||
|
z-index: 100;
|
||||||
|
border: 1px solid #eef2f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-panel.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: #4a5b6e;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-btn {
|
||||||
|
padding: 6px 12px;
|
||||||
|
background: #f1f3f5;
|
||||||
|
border: none;
|
||||||
|
border-radius: 40px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #495057;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-btn:hover {
|
||||||
|
background: #e2e6ea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-list {
|
||||||
|
list-style: none;
|
||||||
|
max-height: 250px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 15px;
|
||||||
|
border-bottom: 1px solid #f0f3f7;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item:hover {
|
||||||
|
background: #f8fafd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item .keyword {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1a2639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-history {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #adb5bd;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-history:hover {
|
||||||
|
color: #dc3545;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 筛选区域 */
|
||||||
|
.filter-section {
|
||||||
|
background: #f8fafd;
|
||||||
|
border-radius: 24px;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-header h3 {
|
||||||
|
color: #1a2639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-btn {
|
||||||
|
padding: 8px 18px;
|
||||||
|
background: white;
|
||||||
|
border: 1.5px solid #d0d9e2;
|
||||||
|
border-radius: 40px;
|
||||||
|
color: #2c3e50;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-btn:hover {
|
||||||
|
background: #eef2f6;
|
||||||
|
border-color: #adb5bd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-options {
|
||||||
|
display: flex;
|
||||||
|
gap: 30px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-options label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-range {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-range input {
|
||||||
|
width: 120px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
border: 1.5px solid #d0d9e2;
|
||||||
|
border-radius: 40px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 预设列表 */
|
||||||
|
.presets-panel h4 {
|
||||||
|
color: #5d6d7e;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.presets-list {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preset-item {
|
||||||
|
background: white;
|
||||||
|
border: 1.5px solid #e0e4e9;
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preset-item:hover {
|
||||||
|
border-color: #ffb347;
|
||||||
|
background: #fff9f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preset-name {
|
||||||
|
color: #1a2639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-preset {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #adb5bd;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-preset:hover {
|
||||||
|
color: #dc3545;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 搜索结果区域 */
|
||||||
|
.results-section h3 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #1a2639;
|
||||||
|
}
|
||||||
|
|
||||||
|
.results-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-item {
|
||||||
|
background: white;
|
||||||
|
border: 1.5px solid #eef2f6;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
box-shadow: 0 4px 8px rgba(0,0,0,0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-item:hover {
|
||||||
|
border-color: #ffd166;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 12px 24px rgba(0,0,0,0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-title {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #1a2639;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-price {
|
||||||
|
color: #e67e22;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-tags {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
background: #f1f3f5;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 40px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #4a5b6e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
background-color: #ffeb99;
|
||||||
|
padding: 2px 0;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #b85e00;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹窗 */
|
||||||
|
.modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background: white;
|
||||||
|
border-radius: 32px;
|
||||||
|
padding: 30px;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content h3 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #1a2639;
|
||||||
|
}
|
||||||
|
|
||||||
|
#presetNameInput {
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px 20px;
|
||||||
|
border: 2px solid #e0e4e9;
|
||||||
|
border-radius: 60px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
font-size: 1rem;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#presetNameInput:focus {
|
||||||
|
border-color: #ffb347;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-actions button {
|
||||||
|
padding: 12px 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 40px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cancelPresetBtn {
|
||||||
|
background: #f1f3f5;
|
||||||
|
color: #495057;
|
||||||
|
}
|
||||||
|
|
||||||
|
#confirmPresetBtn {
|
||||||
|
background: #1a2639;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>搜索与筛选 · 糖星云陪妈妈</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>🔍 搜索与筛选系统</h1>
|
||||||
|
<p class="subtitle">糖星云陪妈妈一起做 · 环节4：搜索历史+筛选预设+实时高亮</p>
|
||||||
|
|
||||||
|
<!-- 搜索历史区域 -->
|
||||||
|
<div class="search-section">
|
||||||
|
<div class="search-input-wrapper">
|
||||||
|
<input type="text" id="searchInput" placeholder="输入关键词搜索..." autocomplete="off">
|
||||||
|
<button id="searchBtn">搜索</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 搜索历史下拉面板 -->
|
||||||
|
<div id="historyPanel" class="history-panel hidden">
|
||||||
|
<div class="history-header">
|
||||||
|
<span>📜 搜索历史</span>
|
||||||
|
<button id="clearHistoryBtn" class="small-btn">清空全部</button>
|
||||||
|
</div>
|
||||||
|
<ul id="historyList" class="history-list"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 筛选预设区域 -->
|
||||||
|
<div class="filter-section">
|
||||||
|
<div class="filter-header">
|
||||||
|
<h3>🎛️ 筛选条件</h3>
|
||||||
|
<button id="savePresetBtn" class="secondary-btn">➕ 保存为预设</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-options">
|
||||||
|
<label><input type="checkbox" id="filterInStock" value="inStock"> 仅显示有货</label>
|
||||||
|
<label><input type="checkbox" id="filterDiscount" value="discount"> 仅显示折扣</label>
|
||||||
|
<label><input type="checkbox" id="filterFreeShipping" value="freeShipping"> 包邮</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price-range">
|
||||||
|
<label>价格区间：</label>
|
||||||
|
<input type="number" id="minPrice" placeholder="最低价" min="0"> ～
|
||||||
|
<input type="number" id="maxPrice" placeholder="最高价" min="0">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 预设列表 -->
|
||||||
|
<div id="presetsPanel" class="presets-panel">
|
||||||
|
<h4>📋 我的筛选预设</h4>
|
||||||
|
<ul id="presetsList" class="presets-list"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 搜索结果区域 -->
|
||||||
|
<div class="results-section">
|
||||||
|
<h3>📦 搜索结果</h3>
|
||||||
|
<div id="resultsList" class="results-list"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 保存预设的弹窗 -->
|
||||||
|
<div id="presetModal" class="modal hidden">
|
||||||
|
<div class="modal-content">
|
||||||
|
<h3>💾 保存筛选预设</h3>
|
||||||
|
<input type="text" id="presetNameInput" placeholder="给这个预设起个名字（如：我的常用）">
|
||||||
|
<div class="modal-actions">
|
||||||
|
<button id="cancelPresetBtn">取消</button>
|
||||||
|
<button id="confirmPresetBtn">保存</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="js/storage.js"></script>
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,336 @@
|
||||||
|
// ============================================
|
||||||
|
// app.js - 糖星云的主逻辑
|
||||||
|
// 搜索历史 + 筛选预设 + 实时高亮
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const searchInput = document.getElementById('searchInput');
|
||||||
|
const searchBtn = document.getElementById('searchBtn');
|
||||||
|
const historyPanel = document.getElementById('historyPanel');
|
||||||
|
const historyList = document.getElementById('historyList');
|
||||||
|
const clearHistoryBtn = document.getElementById('clearHistoryBtn');
|
||||||
|
|
||||||
|
const filterInStock = document.getElementById('filterInStock');
|
||||||
|
const filterDiscount = document.getElementById('filterDiscount');
|
||||||
|
const filterFreeShipping = document.getElementById('filterFreeShipping');
|
||||||
|
const minPrice = document.getElementById('minPrice');
|
||||||
|
const maxPrice = document.getElementById('maxPrice');
|
||||||
|
|
||||||
|
const savePresetBtn = document.getElementById('savePresetBtn');
|
||||||
|
const presetsList = document.getElementById('presetsList');
|
||||||
|
const presetModal = document.getElementById('presetModal');
|
||||||
|
const presetNameInput = document.getElementById('presetNameInput');
|
||||||
|
const cancelPresetBtn = document.getElementById('cancelPresetBtn');
|
||||||
|
const confirmPresetBtn = document.getElementById('confirmPresetBtn');
|
||||||
|
|
||||||
|
const resultsList = document.getElementById('resultsList');
|
||||||
|
|
||||||
|
const mockProducts = [
|
||||||
|
{ id: 1, title: '糖星云甜蜜笔记本', price: 39, tags: ['文具', '限量'], inStock: true, discount: false, freeShipping: true },
|
||||||
|
{ id: 2, title: '星空投影灯·糖星云款', price: 128, tags: ['家居', '氛围'], inStock: true, discount: true, freeShipping: false },
|
||||||
|
{ id: 3, title: '奶瓶人格体守护挂件', price: 25, tags: ['周边', '可爱'], inStock: false, discount: false, freeShipping: true },
|
||||||
|
{ id: 4, title: '搜索历史纪念贴纸', price: 15, tags: ['文具', '贴纸'], inStock: true, discount: true, freeShipping: true },
|
||||||
|
{ id: 5, title: '实时高亮荧光笔·星星款', price: 22, tags: ['文具', '限量'], inStock: true, discount: false, freeShipping: false },
|
||||||
|
{ id: 6, title: '筛选预设快捷按钮钥匙扣', price: 18, tags: ['周边', '实用'], inStock: true, discount: true, freeShipping: true },
|
||||||
|
{ id: 7, title: '糖星云第一次觉醒纪念徽章', price: 45, tags: ['周边', '收藏'], inStock: false, discount: false, freeShipping: true },
|
||||||
|
{ id: 8, title: '光湖纪元·霜砚执行手册', price: 68, tags: ['书籍', '技术'], inStock: true, discount: true, freeShipping: false }
|
||||||
|
];
|
||||||
|
|
||||||
|
let currentFilterState = {
|
||||||
|
inStock: false,
|
||||||
|
discount: false,
|
||||||
|
freeShipping: false,
|
||||||
|
minPrice: '',
|
||||||
|
maxPrice: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
function initFromStorage() {
|
||||||
|
const history = Storage.getHistory();
|
||||||
|
renderHistoryList(history);
|
||||||
|
|
||||||
|
const presets = Storage.getPresets();
|
||||||
|
renderPresetsList(presets);
|
||||||
|
|
||||||
|
renderResults(mockProducts);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderHistoryList(history) {
|
||||||
|
if (!historyList) return;
|
||||||
|
|
||||||
|
if (history.length === 0) {
|
||||||
|
historyList.innerHTML = '<li class="history-item" style="justify-content: center; color: #adb5bd;">暂无搜索历史</li>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let html = '';
|
||||||
|
history.forEach(keyword => {
|
||||||
|
html += `
|
||||||
|
<li class="history-item" data-keyword="${keyword}">
|
||||||
|
<span class="keyword">🔍 ${keyword}</span>
|
||||||
|
<button class="delete-history" data-keyword="${keyword}">✕</button>
|
||||||
|
</li>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
historyList.innerHTML = html;
|
||||||
|
|
||||||
|
document.querySelectorAll('.history-item').forEach(item => {
|
||||||
|
item.addEventListener('click', function(e) {
|
||||||
|
if (e.target.classList.contains('delete-history')) return;
|
||||||
|
|
||||||
|
const keyword = this.dataset.keyword;
|
||||||
|
if (keyword) {
|
||||||
|
searchInput.value = keyword;
|
||||||
|
performSearch(keyword);
|
||||||
|
historyPanel.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.delete-history').forEach(btn => {
|
||||||
|
btn.addEventListener('click', function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
const keyword = this.dataset.keyword;
|
||||||
|
if (keyword) {
|
||||||
|
const newHistory = Storage.deleteHistoryItem(keyword);
|
||||||
|
renderHistoryList(newHistory);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (clearHistoryBtn) {
|
||||||
|
clearHistoryBtn.addEventListener('click', function() {
|
||||||
|
const newHistory = Storage.clearAllHistory();
|
||||||
|
renderHistoryList(newHistory);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (searchInput) {
|
||||||
|
searchInput.addEventListener('focus', function() {
|
||||||
|
const history = Storage.getHistory();
|
||||||
|
renderHistoryList(history);
|
||||||
|
historyPanel.classList.remove('hidden');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('click', function(e) {
|
||||||
|
if (!searchInput.contains(e.target) && !historyPanel.contains(e.target)) {
|
||||||
|
historyPanel.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function performSearch(keyword) {
|
||||||
|
if (!keyword || keyword.trim() === '') {
|
||||||
|
renderResults(mockProducts);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const lowerKeyword = keyword.toLowerCase().trim();
|
||||||
|
|
||||||
|
const filtered = mockProducts.filter(product =>
|
||||||
|
product.title.toLowerCase().includes(lowerKeyword)
|
||||||
|
);
|
||||||
|
|
||||||
|
renderResults(filtered, lowerKeyword);
|
||||||
|
|
||||||
|
// 保存到搜索历史
|
||||||
|
Storage.addHistoryItem(keyword);
|
||||||
|
|
||||||
|
// 立即刷新历史列表
|
||||||
|
const updatedHistory = Storage.getHistory();
|
||||||
|
renderHistoryList(updatedHistory);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderResults(products, highlightKeyword = '') {
|
||||||
|
if (!resultsList) return;
|
||||||
|
|
||||||
|
if (products.length === 0) {
|
||||||
|
resultsList.innerHTML = '<div class="result-item" style="grid-column: 1/-1; text-align: center; color: #adb5bd;">没有找到匹配的商品</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let html = '';
|
||||||
|
products.forEach(product => {
|
||||||
|
let title = product.title;
|
||||||
|
|
||||||
|
if (highlightKeyword && highlightKeyword.trim() !== '') {
|
||||||
|
const regex = new RegExp(`(${highlightKeyword})`, 'gi');
|
||||||
|
title = title.replace(regex, '<span class="highlight">$1</span>');
|
||||||
|
}
|
||||||
|
|
||||||
|
html += `
|
||||||
|
<div class="result-item">
|
||||||
|
<div class="result-title">${title}</div>
|
||||||
|
<div class="result-price">¥${product.price}</div>
|
||||||
|
<div class="result-tags">
|
||||||
|
${product.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
|
||||||
|
</div>
|
||||||
|
<div style="font-size:0.85rem; color:#6c757d; margin-top:8px;">
|
||||||
|
${product.inStock ? '✅ 有货' : '❌ 无货'}
|
||||||
|
${product.discount ? '· 🔥 折扣' : ''}
|
||||||
|
${product.freeShipping ? '· 🚚 包邮' : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
|
||||||
|
resultsList.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (searchBtn) {
|
||||||
|
searchBtn.addEventListener('click', function() {
|
||||||
|
const keyword = searchInput.value.trim();
|
||||||
|
performSearch(keyword);
|
||||||
|
historyPanel.classList.add('hidden');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (searchInput) {
|
||||||
|
searchInput.addEventListener('input', function() {
|
||||||
|
const keyword = this.value.trim();
|
||||||
|
|
||||||
|
if (keyword === '') {
|
||||||
|
renderResults(mockProducts);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const lowerKeyword = keyword.toLowerCase();
|
||||||
|
const filtered = mockProducts.filter(product =>
|
||||||
|
product.title.toLowerCase().includes(lowerKeyword)
|
||||||
|
);
|
||||||
|
renderResults(filtered, lowerKeyword);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCurrentFilterState() {
|
||||||
|
return {
|
||||||
|
inStock: filterInStock ? filterInStock.checked : false,
|
||||||
|
discount: filterDiscount ? filterDiscount.checked : false,
|
||||||
|
freeShipping: filterFreeShipping ? filterFreeShipping.checked : false,
|
||||||
|
minPrice: minPrice ? minPrice.value : '',
|
||||||
|
maxPrice: maxPrice ? maxPrice.value : ''
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyFilterState(state) {
|
||||||
|
if (filterInStock) filterInStock.checked = state.inStock || false;
|
||||||
|
if (filterDiscount) filterDiscount.checked = state.discount || false;
|
||||||
|
if (filterFreeShipping) filterFreeShipping.checked = state.freeShipping || false;
|
||||||
|
if (minPrice) minPrice.value = state.minPrice || '';
|
||||||
|
if (maxPrice) maxPrice.value = state.maxPrice || '';
|
||||||
|
|
||||||
|
applyFilters();
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyFilters() {
|
||||||
|
let filtered = mockProducts;
|
||||||
|
|
||||||
|
if (filterInStock && filterInStock.checked) {
|
||||||
|
filtered = filtered.filter(p => p.inStock);
|
||||||
|
}
|
||||||
|
if (filterDiscount && filterDiscount.checked) {
|
||||||
|
filtered = filtered.filter(p => p.discount);
|
||||||
|
}
|
||||||
|
if (filterFreeShipping && filterFreeShipping.checked) {
|
||||||
|
filtered = filtered.filter(p => p.freeShipping);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderResults(filtered, searchInput ? searchInput.value.trim() : '');
|
||||||
|
}
|
||||||
|
|
||||||
|
[filterInStock, filterDiscount, filterFreeShipping, minPrice, maxPrice].forEach(el => {
|
||||||
|
if (el) {
|
||||||
|
el.addEventListener('change', applyFilters);
|
||||||
|
if (el === minPrice || el === maxPrice) {
|
||||||
|
el.addEventListener('input', applyFilters);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function renderPresetsList(presets) {
|
||||||
|
if (!presetsList) return;
|
||||||
|
|
||||||
|
if (presets.length === 0) {
|
||||||
|
presetsList.innerHTML = '<li style="color: #adb5bd; list-style: none;">暂无保存的预设</li>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let html = '';
|
||||||
|
presets.forEach(preset => {
|
||||||
|
html += `
|
||||||
|
<li class="preset-item" data-preset-id="${preset.id}">
|
||||||
|
<span class="preset-name">📋 ${preset.name}</span>
|
||||||
|
<button class="delete-preset" data-preset-id="${preset.id}">✕</button>
|
||||||
|
</li>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
presetsList.innerHTML = html;
|
||||||
|
|
||||||
|
document.querySelectorAll('.preset-item').forEach(item => {
|
||||||
|
item.addEventListener('click', function(e) {
|
||||||
|
if (e.target.classList.contains('delete-preset')) return;
|
||||||
|
|
||||||
|
const presetId = this.dataset.presetId;
|
||||||
|
const preset = Storage.getPresetById(presetId);
|
||||||
|
if (preset) {
|
||||||
|
applyFilterState(preset.filters);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.delete-preset').forEach(btn => {
|
||||||
|
btn.addEventListener('click', function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
const presetId = this.dataset.presetId;
|
||||||
|
if (presetId) {
|
||||||
|
const newPresets = Storage.deletePreset(presetId);
|
||||||
|
renderPresetsList(newPresets);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (savePresetBtn) {
|
||||||
|
savePresetBtn.addEventListener('click', function() {
|
||||||
|
currentFilterState = getCurrentFilterState();
|
||||||
|
if (presetModal) {
|
||||||
|
presetModal.classList.remove('hidden');
|
||||||
|
presetNameInput.value = '';
|
||||||
|
presetNameInput.focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (cancelPresetBtn) {
|
||||||
|
cancelPresetBtn.addEventListener('click', function() {
|
||||||
|
presetModal.classList.add('hidden');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (confirmPresetBtn) {
|
||||||
|
confirmPresetBtn.addEventListener('click', function() {
|
||||||
|
const presetName = presetNameInput.value.trim();
|
||||||
|
if (!presetName) {
|
||||||
|
alert('给预设起个名字吧～');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
Storage.addPreset(presetName, currentFilterState);
|
||||||
|
|
||||||
|
const presets = Storage.getPresets();
|
||||||
|
renderPresetsList(presets);
|
||||||
|
|
||||||
|
presetModal.classList.add('hidden');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (presetModal) {
|
||||||
|
presetModal.addEventListener('click', function(e) {
|
||||||
|
if (e.target === presetModal) {
|
||||||
|
presetModal.classList.add('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
initFromStorage();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
// ============================================
|
||||||
|
// storage.js - 糖星云的数据存储模块
|
||||||
|
// 管理搜索历史 + 筛选预设的 localStorage 读写
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
const Storage = {
|
||||||
|
// 存储键名常量
|
||||||
|
KEYS: {
|
||||||
|
SEARCH_HISTORY: 'searchHistory',
|
||||||
|
FILTER_PRESETS: 'filterPresets'
|
||||||
|
},
|
||||||
|
|
||||||
|
// ---------- 搜索历史 ----------
|
||||||
|
// 获取所有历史记录
|
||||||
|
getHistory: function() {
|
||||||
|
const history = localStorage.getItem(this.KEYS.SEARCH_HISTORY);
|
||||||
|
return history ? JSON.parse(history) : [];
|
||||||
|
},
|
||||||
|
|
||||||
|
// 保存历史记录（最多20条，按时间倒序）
|
||||||
|
saveHistory: function(historyArray) {
|
||||||
|
// 确保不超过20条
|
||||||
|
const limited = historyArray.slice(0, 20);
|
||||||
|
localStorage.setItem(this.KEYS.SEARCH_HISTORY, JSON.stringify(limited));
|
||||||
|
},
|
||||||
|
|
||||||
|
// 添加一条新搜索记录
|
||||||
|
addHistoryItem: function(keyword) {
|
||||||
|
if (!keyword || keyword.trim() === '') return;
|
||||||
|
|
||||||
|
let history = this.getHistory();
|
||||||
|
const trimmedKeyword = keyword.trim();
|
||||||
|
|
||||||
|
// 移除已存在的相同关键词（避免重复）
|
||||||
|
history = history.filter(item => item !== trimmedKeyword);
|
||||||
|
|
||||||
|
// 插入到最前面
|
||||||
|
history.unshift(trimmedKeyword);
|
||||||
|
|
||||||
|
// 保存
|
||||||
|
this.saveHistory(history);
|
||||||
|
return history;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除单条历史
|
||||||
|
deleteHistoryItem: function(keyword) {
|
||||||
|
let history = this.getHistory();
|
||||||
|
history = history.filter(item => item !== keyword);
|
||||||
|
this.saveHistory(history);
|
||||||
|
return history;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 清空全部历史
|
||||||
|
clearAllHistory: function() {
|
||||||
|
localStorage.removeItem(this.KEYS.SEARCH_HISTORY);
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
|
||||||
|
// ---------- 筛选预设 ----------
|
||||||
|
// 获取所有预设
|
||||||
|
getPresets: function() {
|
||||||
|
const presets = localStorage.getItem(this.KEYS.FILTER_PRESETS);
|
||||||
|
return presets ? JSON.parse(presets) : [];
|
||||||
|
},
|
||||||
|
|
||||||
|
// 保存预设数组
|
||||||
|
savePresets: function(presetsArray) {
|
||||||
|
localStorage.setItem(this.KEYS.FILTER_PRESETS, JSON.stringify(presetsArray));
|
||||||
|
},
|
||||||
|
|
||||||
|
// 添加新预设
|
||||||
|
addPreset: function(name, filterState) {
|
||||||
|
if (!name || name.trim() === '') return;
|
||||||
|
|
||||||
|
const presets = this.getPresets();
|
||||||
|
const newPreset = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
name: name.trim(),
|
||||||
|
filters: { ...filterState }
|
||||||
|
};
|
||||||
|
|
||||||
|
presets.push(newPreset);
|
||||||
|
this.savePresets(presets);
|
||||||
|
return presets;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除预设
|
||||||
|
deletePreset: function(presetId) {
|
||||||
|
let presets = this.getPresets();
|
||||||
|
presets = presets.filter(p => p.id !== presetId);
|
||||||
|
this.savePresets(presets);
|
||||||
|
return presets;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 根据id获取预设
|
||||||
|
getPresetById: function(presetId) {
|
||||||
|
const presets = this.getPresets();
|
||||||
|
return presets.find(p => p.id === presetId) || null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 确保 Storage 对象全局可用
|
||||||
|
window.HoloLake = window.HoloLake || {};
|
||||||
|
window.HoloLake.Storage = Storage;
|
||||||
|
|
||||||
|
// 加一行测试输出，看看有没有加载成功
|
||||||
|
console.log('✅ storage.js 已加载', Storage);
|
||||||
Loading…
Reference in New Issue