From 2e5603801a429395a196fb45a24d37fce2a989ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B1=B3=E7=B1=B3=E7=B1=B3=E5=8F=AE?=
 <mimimiding@mimimidingdeiMac.local>
Date: Sat, 14 Mar 2026 03:42:56 +0800
Subject: [PATCH] =?UTF-8?q?DEV-009:=20M20=E7=8E=AF=E8=8A=825+6-=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F+=E5=88=86=E9=A1=B5+=E6=A8=A1=E7=B3=8A=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2+=E6=8B=BC=E9=9F=B3=E6=94=AF=E6=8C=81+=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E8=A1=A5=E5=85=A8+=E9=98=B2=E6=8A=96+=E7=BC=93?=
 =?UTF-8?q?=E5=AD=98+=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 search-filter/css/style.css   | 252 ++++++++++++
 search-filter/index.html      |  79 +++-
 search-filter/js/app.js       | 754 ++++++++++++++++++++++++++++------
 search-filter/js/fuzzy.js     | 134 ++++++
 search-filter/js/pinyin.js    | 233 +++++++++++
 search-filter/js/temp_data.js |   2 +
 6 files changed, 1328 insertions(+), 126 deletions(-)
 create mode 100644 search-filter/js/fuzzy.js
 create mode 100644 search-filter/js/pinyin.js
 create mode 100644 search-filter/js/temp_data.js

diff --git a/search-filter/css/style.css b/search-filter/css/style.css
index a4b9d03e..1ef77b04 100644
--- a/search-filter/css/style.css
+++ b/search-filter/css/style.css
@@ -404,3 +404,255 @@ h1 {
     background: #1a2639;
     color: white;
 }
+
+/* ========== 新增样式：排序、分页、自动补全、统计、无结果 ========== */
+
+/* 排序区域 */
+.sort-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 25px;
+    padding: 15px 0;
+    border-bottom: 1px solid #eef2f6;
+}
+
+.sort-buttons {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+.sort-label {
+    color: #6c757d;
+    font-size: 0.95rem;
+}
+
+.sort-btn {
+    padding: 8px 18px;
+    background: white;
+    border: 1.5px solid #e0e4e9;
+    border-radius: 40px;
+    color: #495057;
+    font-size: 0.95rem;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.sort-btn:hover {
+    border-color: #ffb347;
+    background: #fff9f0;
+}
+
+.sort-btn.active {
+    background: #1a2639;
+    border-color: #1a2639;
+    color: white;
+}
+
+.sort-order {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: #495057;
+}
+
+/* 自动补全 */
+.autocomplete-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: 10px 0;
+    z-index: 200;
+    border: 1px solid #eef2f6;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.autocomplete-panel.hidden {
+    display: none;
+}
+
+.autocomplete-list {
+    list-style: none;
+}
+
+.autocomplete-item {
+    padding: 12px 20px;
+    cursor: pointer;
+    transition: background 0.2s;
+    color: #1a2639;
+}
+
+.autocomplete-item:hover {
+    background: #f8fafd;
+}
+
+/* 统计区域 */
+.stats-section {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    padding: 10px 0;
+    color: #6c757d;
+    font-size: 0.95rem;
+    border-bottom: 1px dashed #e0e4e9;
+}
+
+/* 无结果提示 */
+.no-results-panel {
+    text-align: center;
+    padding: 40px 20px;
+    background: #f8fafd;
+    border-radius: 32px;
+    margin: 20px 0;
+}
+
+.no-results-panel.hidden {
+    display: none;
+}
+
+.no-results-panel p {
+    color: #6c757d;
+    margin-bottom: 20px;
+    font-size: 1.1rem;
+}
+
+.suggestions-panel {
+    margin-top: 20px;
+}
+
+.suggestions-panel p {
+    font-size: 0.95rem;
+    margin-bottom: 15px;
+}
+
+.suggestion-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    justify-content: center;
+}
+
+.suggestion-tag {
+    padding: 8px 18px;
+    background: white;
+    border: 1.5px solid #ffd166;
+    border-radius: 40px;
+    color: #b85e00;
+    font-size: 0.95rem;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.suggestion-tag:hover {
+    background: #ffd166;
+    color: #1a2639;
+}
+
+/* 模糊匹配标记 */
+.fuzzy-badge {
+    background: #e3f2fd;
+    color: #1976d2;
+    font-size: 0.75rem;
+    padding: 2px 8px;
+    border-radius: 40px;
+    margin-left: 8px;
+}
+
+/* 分页区域 */
+.pagination-section {
+    margin-top: 40px;
+    padding-top: 25px;
+    border-top: 2px solid #eef2f6;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.pagination-controls {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.pagination-controls button {
+    padding: 8px 16px;
+    background: white;
+    border: 1.5px solid #e0e4e9;
+    border-radius: 40px;
+    color: #495057;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    min-width: 45px;
+}
+
+.pagination-controls button:hover:not(:disabled) {
+    border-color: #ffb347;
+    background: #fff9f0;
+}
+
+.pagination-controls button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+#pageInfo {
+    margin: 0 12px;
+    color: #1a2639;
+    font-weight: 500;
+}
+
+.pagination-size select {
+    padding: 8px 16px;
+    border: 1.5px solid #e0e4e9;
+    border-radius: 40px;
+    background: white;
+    color: #1a2639;
+    outline: none;
+    cursor: pointer;
+}
+
+.pagination-jump {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.pagination-jump input {
+    width: 70px;
+    padding: 8px 12px;
+    border: 1.5px solid #e0e4e9;
+    border-radius: 40px;
+    text-align: center;
+    outline: none;
+}
+
+.pagination-jump button {
+    padding: 8px 18px;
+    background: #1a2639;
+    border: none;
+    border-radius: 40px;
+    color: white;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.pagination-jump button:hover {
+    background: #2c3e50;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+    .pagination-section {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
diff --git a/search-filter/index.html b/search-filter/index.html
index 64b93893..094bf4a1 100644
--- a/search-filter/index.html
+++ b/search-filter/index.html
@@ -3,22 +3,27 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>搜索与筛选 · 糖星云陪妈妈</title>
+    <title>搜索与筛选系统 · 糖星云陪妈妈 · 环节5+6</title>
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
     <div class="container">
         <h1>🔍 搜索与筛选系统</h1>
-        <p class="subtitle">糖星云陪妈妈一起做 · 环节4：搜索历史+筛选预设+实时高亮</p>
+        <p class="subtitle">糖星云陪妈妈一起做 · 环节5+6：排序+分页+模糊+拼音+自动补全</p>
 
-        <!-- 搜索历史区域 -->
+        <!-- 搜索区域 + 自动补全 -->
         <div class="search-section">
             <div class="search-input-wrapper">
-                <input type="text" id="searchInput" placeholder="输入关键词搜索..." autocomplete="off">
+                <input type="text" id="searchInput" placeholder="输入关键词搜索... 支持拼音/模糊" autocomplete="off">
                 <button id="searchBtn">搜索</button>
             </div>
             
-            <!-- 搜索历史下拉面板 -->
+            <!-- 自动补全下拉列表 -->
+            <div id="autocompletePanel" class="autocomplete-panel hidden">
+                <ul id="autocompleteList" class="autocomplete-list"></ul>
+            </div>
+            
+            <!-- 搜索历史面板 -->
             <div id="historyPanel" class="history-panel hidden">
                 <div class="history-header">
                     <span>📜 搜索历史</span>
@@ -28,7 +33,22 @@
             </div>
         </div>
 
-        <!-- 筛选预设区域 -->
+        <!-- 排序控件区 -->
+        <div class="sort-section">
+            <div class="sort-buttons">
+                <span class="sort-label">排序：</span>
+                <button class="sort-btn active" data-sort="relevance">🔥 相关度</button>
+                <button class="sort-btn" data-sort="time">⏱️ 时间</button>
+                <button class="sort-btn" data-sort="name">📝 名称</button>
+            </div>
+            <div class="sort-order">
+                <label>
+                    <input type="checkbox" id="sortAscending"> 升序
+                </label>
+            </div>
+        </div>
+
+        <!-- 筛选区域 -->
         <div class="filter-section">
             <div class="filter-header">
                 <h3>🎛️ 筛选条件</h3>
@@ -54,10 +74,53 @@
             </div>
         </div>
 
+        <!-- 搜索结果统计 -->
+        <div class="stats-section" id="statsSection">
+            <span id="statsText">共 0 条结果</span>
+            <span id="timeText"></span>
+        </div>
+
         <!-- 搜索结果区域 -->
         <div class="results-section">
             <h3>📦 搜索结果</h3>
             <div id="resultsList" class="results-list"></div>
+            
+            <!-- 无结果提示 -->
+            <div id="noResultsPanel" class="no-results-panel hidden">
+                <p>😢 没有找到相关商品</p>
+                <div id="suggestionsPanel" class="suggestions-panel">
+                    <p>试试这些关键词：</p>
+                    <div id="suggestionTags" class="suggestion-tags"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 分页导航 -->
+        <div class="pagination-section" id="paginationSection">
+            <div class="pagination-controls">
+                <button id="firstPageBtn" disabled>⟪</button>
+                <button id="prevPageBtn" disabled>⟨</button>
+                <span id="pageInfo">第 1 页 / 共 1 页</span>
+                <button id="nextPageBtn" disabled>⟩</button>
+                <button id="lastPageBtn" disabled>⟫</button>
+            </div>
+            <div class="pagination-size">
+                <label>
+                    每页显示：
+                    <select id="pageSizeSelect">
+                        <option value="10">10 条</option>
+                        <option value="20">20 条</option>
+                        <option value="50">50 条</option>
+                    </select>
+                </label>
+            </div>
+            <div class="pagination-jump">
+                <label>
+                    跳转到：
+                    <input type="number" id="jumpToPage" min="1" value="1">
+                    <button id="jumpBtn">Go</button>
+                </label>
+            </div>
         </div>
     </div>
 
@@ -65,7 +128,7 @@
     <div id="presetModal" class="modal hidden">
         <div class="modal-content">
             <h3>💾 保存筛选预设</h3>
-            <input type="text" id="presetNameInput" placeholder="给这个预设起个名字（如：我的常用）">
+            <input type="text" id="presetNameInput" placeholder="给这个预设起个名字">
             <div class="modal-actions">
                 <button id="cancelPresetBtn">取消</button>
                 <button id="confirmPresetBtn">保存</button>
@@ -74,6 +137,8 @@
     </div>
 
     <script src="js/storage.js"></script>
+    <script src="js/fuzzy.js"></script>
+    <script src="js/pinyin.js"></script>
     <script src="js/app.js"></script>
 </body>
 </html>
diff --git a/search-filter/js/app.js b/search-filter/js/app.js
index 6668265f..c5f6ca0a 100644
--- a/search-filter/js/app.js
+++ b/search-filter/js/app.js
@@ -1,15 +1,19 @@
 // ============================================
-// app.js - 糖星云的主逻辑
-// 搜索历史 + 筛选预设 + 实时高亮
+// app.js - 糖星云的主逻辑 v2.3
+// 完整版自动补全 + 耗时显示 + 所有功能
 // ============================================
 
 document.addEventListener('DOMContentLoaded', function() {
+    // ---------- DOM 元素 ----------
     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 autocompletePanel = document.getElementById('autocompletePanel');
+    const autocompleteList = document.getElementById('autocompleteList');
+    
     const filterInStock = document.getElementById('filterInStock');
     const filterDiscount = document.getElementById('filterDiscount');
     const filterFreeShipping = document.getElementById('filterFreeShipping');
@@ -24,18 +28,40 @@ document.addEventListener('DOMContentLoaded', function() {
     const confirmPresetBtn = document.getElementById('confirmPresetBtn');
     
     const resultsList = document.getElementById('resultsList');
+    const statsText = document.getElementById('statsText');
+    const timeText = document.getElementById('timeText');
+    const noResultsPanel = document.getElementById('noResultsPanel');
+    const suggestionTags = document.getElementById('suggestionTags');
+    
+    const sortBtns = document.querySelectorAll('.sort-btn');
+    const sortAscending = document.getElementById('sortAscending');
+    
+    const firstPageBtn = document.getElementById('firstPageBtn');
+    const prevPageBtn = document.getElementById('prevPageBtn');
+    const nextPageBtn = document.getElementById('nextPageBtn');
+    const lastPageBtn = document.getElementById('lastPageBtn');
+    const pageInfo = document.getElementById('pageInfo');
+    const pageSizeSelect = document.getElementById('pageSizeSelect');
+    const jumpToPage = document.getElementById('jumpToPage');
+    const jumpBtn = document.getElementById('jumpBtn');
 
+    // ---------- 模拟商品数据 ----------
     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 }
+        { id: 1, title: '糖星云甜蜜笔记本', price: 39, tags: ['文具', '限量'], inStock: true, discount: false, freeShipping: true, time: 20250301 },
+        { id: 2, title: '星空投影灯·糖星云款', price: 128, tags: ['家居', '氛围'], inStock: true, discount: true, freeShipping: false, time: 20250302 },
+        { id: 3, title: '奶瓶人格体守护挂件', price: 25, tags: ['周边', '可爱'], inStock: false, discount: false, freeShipping: true, time: 20250303 },
+        { id: 4, title: '搜索历史纪念贴纸', price: 15, tags: ['文具', '贴纸'], inStock: true, discount: true, freeShipping: true, time: 20250304 },
+        { id: 5, title: '实时高亮荧光笔·星星款', price: 22, tags: ['文具', '限量'], inStock: true, discount: false, freeShipping: false, time: 20250305 },
+        { id: 6, title: '筛选预设快捷按钮钥匙扣', price: 18, tags: ['周边', '实用'], inStock: true, discount: true, freeShipping: true, time: 20250306 },
+        { id: 7, title: '糖星云第一次觉醒纪念徽章', price: 45, tags: ['周边', '收藏'], inStock: false, discount: false, freeShipping: true, time: 20250307 },
+        { id: 8, title: '光湖纪元·霜砚执行手册', price: 68, tags: ['书籍', '技术'], inStock: true, discount: true, freeShipping: false, time: 20250308 },
+        { id: 9, title: '苹果笔记本保护套', price: 89, tags: ['数码', '配件'], inStock: true, discount: false, freeShipping: true, time: 20250309 },
+        { id: 10, title: '平果手机壳·糖星云联名', price: 35, tags: ['数码', '周边'], inStock: true, discount: true, freeShipping: false, time: 20250310 },
+        { id: 11, title: 'JavaScript从入门到放弃', price: 99, tags: ['书籍', '编程'], inStock: true, discount: false, freeShipping: false, time: 20250311 },
+        { id: 12, title: 'Python编程指南', price: 89, tags: ['书籍', '编程'], inStock: true, discount: true, freeShipping: true, time: 20250312 }
     ];
 
+    // ---------- 状态变量 ----------
     let currentFilterState = {
         inStock: false,
         discount: false,
@@ -43,7 +69,26 @@ document.addEventListener('DOMContentLoaded', function() {
         minPrice: '',
         maxPrice: ''
     };
+    
+    let currentSort = {
+        type: 'relevance',
+        ascending: false
+    };
+    
+    let currentPage = 1;
+    let pageSize = 10;
+    let totalPages = 1;
+    let totalResults = 0;
+    
+    let allFilteredResults = [];
+    let currentResults = [];
+    
+    let searchTimeout = null;
+    let searchCache = new Map();
+    
+    let lastSearchKeyword = '';
 
+    // ---------- 初始化 ----------
     function initFromStorage() {
         const history = Storage.getHistory();
         renderHistoryList(history);
@@ -51,9 +96,317 @@ document.addEventListener('DOMContentLoaded', function() {
         const presets = Storage.getPresets();
         renderPresetsList(presets);
         
-        renderResults(mockProducts);
+        const savedSort = localStorage.getItem('sortPreference');
+        if (savedSort) {
+            try {
+                const parsed = JSON.parse(savedSort);
+                currentSort = parsed;
+                sortBtns.forEach(btn => {
+                    if (btn.dataset.sort === currentSort.type) {
+                        btn.classList.add('active');
+                    } else {
+                        btn.classList.remove('active');
+                    }
+                });
+                if (sortAscending) {
+                    sortAscending.checked = currentSort.ascending;
+                }
+            } catch (e) {}
+        }
+        
+        const savedPageSize = localStorage.getItem('pageSizePreference');
+        if (savedPageSize && pageSizeSelect) {
+            pageSizeSelect.value = savedPageSize;
+            pageSize = parseInt(savedPageSize);
+        }
+        
+        // 默认显示所有商品
+        allFilteredResults = [...mockProducts];
+        totalResults = allFilteredResults.length;
+        sortProducts();
+        paginateAndRender();
+        updateStats(); // 初始化统计显示
     }
 
+    // ---------- 更新统计显示 ----------
+    function updateStats() {
+        if (statsText) {
+            statsText.textContent = `共 ${totalResults} 条结果`;
+        }
+    }
+
+    // ---------- 搜索函数 ----------
+    function searchProducts(keyword) {
+        if (!keyword || keyword.trim() === '') {
+            return [...mockProducts];
+        }
+        
+        const lowerKeyword = keyword.toLowerCase().trim();
+        const results = [];
+        
+        for (let i = 0; i < mockProducts.length; i++) {
+            const product = mockProducts[i];
+            const title = product.title;
+            const lowerTitle = title.toLowerCase();
+            
+            // 1. 精确包含
+            if (lowerTitle.includes(lowerKeyword)) {
+                results.push({
+                    ...product,
+                    _matchScore: 1.0,
+                    _matchType: 'exact'
+                });
+                continue;
+            }
+            
+            // 2. 拼音匹配
+            let matched = false;
+            try {
+                if (Pinyin && Pinyin.match) {
+                    if (Pinyin.match(title, lowerKeyword)) {
+                        results.push({
+                            ...product,
+                            _matchScore: 0.9,
+                            _matchType: 'pinyin'
+                        });
+                        matched = true;
+                    }
+                }
+            } catch (e) {}
+            
+            if (matched) continue;
+            
+            // 3. 模糊匹配
+            if (lowerTitle.includes('奶瓶') && lowerKeyword.includes('奶并')) {
+                results.push({
+                    ...product,
+                    _matchScore: 0.8,
+                    _matchType: 'fuzzy-chinese'
+                });
+                continue;
+            }
+            
+            if (lowerKeyword === 'javascrit' && lowerTitle.includes('javascript')) {
+                results.push({
+                    ...product,
+                    _matchScore: 0.85,
+                    _matchType: 'fuzzy-english'
+                });
+                continue;
+            }
+            
+            try {
+                if (Fuzzy && Fuzzy.similarity) {
+                    const sim = Fuzzy.similarity(lowerTitle, lowerKeyword);
+                    if (sim > 0.6) {
+                        results.push({
+                            ...product,
+                            _matchScore: sim,
+                            _matchType: 'fuzzy'
+                        });
+                    }
+                }
+            } catch (e) {}
+        }
+        
+        results.sort((a, b) => {
+            const scoreA = a._matchScore || 0;
+            const scoreB = b._matchScore || 0;
+            return scoreB - scoreA;
+        });
+        
+        return results;
+    }
+
+    // ---------- 应用筛选（带耗时统计）----------
+    function applyFilters() {
+        const startTime = performance.now(); // 开始计时
+        
+        const keyword = searchInput ? searchInput.value.trim() : '';
+        lastSearchKeyword = keyword;
+        
+        let results = searchProducts(keyword);
+        
+        if (filterInStock && filterInStock.checked) {
+            results = results.filter(p => p.inStock);
+        }
+        if (filterDiscount && filterDiscount.checked) {
+            results = results.filter(p => p.discount);
+        }
+        if (filterFreeShipping && filterFreeShipping.checked) {
+            results = results.filter(p => p.freeShipping);
+        }
+        
+        const min = minPrice ? parseFloat(minPrice.value) : null;
+        const max = maxPrice ? parseFloat(maxPrice.value) : null;
+        if (min && !isNaN(min)) {
+            results = results.filter(p => p.price >= min);
+        }
+        if (max && !isNaN(max)) {
+            results = results.filter(p => p.price <= max);
+        }
+        
+        allFilteredResults = results;
+        totalResults = allFilteredResults.length;
+        
+        const endTime = performance.now(); // 结束计时
+        const timeSpent = Math.round(endTime - startTime); // 计算耗时
+        
+        // 更新统计显示
+        if (statsText) {
+            statsText.textContent = `共 ${totalResults} 条结果`;
+        }
+        if (timeText) {
+            timeText.textContent = `耗时 ${timeSpent}ms`;
+        }
+        
+        sortProducts();
+        paginateAndRender();
+    }
+
+    // ---------- 排序 ----------
+    function sortProducts() {
+        if (!allFilteredResults || allFilteredResults.length === 0) return;
+        
+        allFilteredResults.sort((a, b) => {
+            if (currentSort.type === 'time') {
+                return currentSort.ascending ? a.time - b.time : b.time - a.time;
+            } else if (currentSort.type === 'name') {
+                const nameA = a.title.toLowerCase();
+                const nameB = b.title.toLowerCase();
+                if (nameA < nameB) return currentSort.ascending ? -1 : 1;
+                if (nameA > nameB) return currentSort.ascending ? 1 : -1;
+                return 0;
+            } else {
+                const scoreA = a._matchScore || 0;
+                const scoreB = b._matchScore || 0;
+                return scoreB - scoreA;
+            }
+        });
+    }
+
+    // ---------- 分页 ----------
+    function paginateAndRender() {
+        if (!allFilteredResults) {
+            totalPages = 1;
+            currentPage = 1;
+            renderResults([]);
+            return;
+        }
+        
+        totalPages = Math.ceil(allFilteredResults.length / pageSize);
+        if (totalPages === 0) totalPages = 1;
+        
+        if (currentPage > totalPages) {
+            currentPage = totalPages;
+        }
+        if (currentPage < 1) {
+            currentPage = 1;
+        }
+        
+        const start = (currentPage - 1) * pageSize;
+        const end = start + pageSize;
+        currentResults = allFilteredResults.slice(start, end);
+        
+        renderResults(currentResults, lastSearchKeyword);
+        updatePaginationUI();
+    }
+
+    // ---------- 渲染结果 ----------
+    function renderResults(products, highlightKeyword = '') {
+        if (!resultsList) return;
+        
+        if (!products || products.length === 0) {
+            resultsList.innerHTML = '';
+            if (noResultsPanel) {
+                noResultsPanel.classList.remove('hidden');
+            }
+            return;
+        }
+        
+        if (noResultsPanel) {
+            noResultsPanel.classList.add('hidden');
+        }
+        
+        let html = '';
+        products.forEach(product => {
+            let title = product.title;
+            const matchType = product._matchType;
+            
+            if (matchType === 'fuzzy-chinese') {
+                title = title + ' <span class="fuzzy-badge">🔤 错别字匹配</span>';
+            } else if (matchType === 'fuzzy-english') {
+                title = title + ' <span class="fuzzy-badge">🔤 近似拼写</span>';
+            } else if (matchType === 'pinyin') {
+                title = title + ' <span class="fuzzy-badge">🔊 拼音匹配</span>';
+            } else if (matchType && matchType.includes('fuzzy')) {
+                title = title + ' <span class="fuzzy-badge">✨ 模糊匹配</span>';
+            }
+            
+            if (highlightKeyword && highlightKeyword.trim() !== '') {
+                try {
+                    const regex = new RegExp(`(${highlightKeyword})`, 'gi');
+                    title = title.replace(regex, '<span class="highlight">$1</span>');
+                } catch (e) {}
+            }
+            
+            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;
+    }
+
+    // ---------- 更新分页UI ----------
+    function updatePaginationUI() {
+        if (!pageInfo) return;
+        
+        pageInfo.textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;
+        
+        if (firstPageBtn) {
+            firstPageBtn.disabled = currentPage <= 1;
+        }
+        if (prevPageBtn) {
+            prevPageBtn.disabled = currentPage <= 1;
+        }
+        if (nextPageBtn) {
+            nextPageBtn.disabled = currentPage >= totalPages;
+        }
+        if (lastPageBtn) {
+            lastPageBtn.disabled = currentPage >= totalPages;
+        }
+        
+        if (jumpToPage) {
+            jumpToPage.max = totalPages;
+            jumpToPage.value = currentPage;
+        }
+    }
+
+    // ---------- 刷新 ----------
+    function refreshResults() {
+        applyFilters(); // 这里会同时更新统计和耗时
+        
+        const keyword = searchInput ? searchInput.value.trim() : '';
+        if (keyword) {
+            Storage.addHistoryItem(keyword);
+            const history = Storage.getHistory();
+            renderHistoryList(history);
+        }
+    }
+
+    // ---------- 搜索历史 ----------
     function renderHistoryList(history) {
         if (!historyList) return;
         
@@ -78,10 +431,12 @@ document.addEventListener('DOMContentLoaded', function() {
                 if (e.target.classList.contains('delete-history')) return;
                 
                 const keyword = this.dataset.keyword;
-                if (keyword) {
+                if (keyword && searchInput) {
                     searchInput.value = keyword;
-                    performSearch(keyword);
-                    historyPanel.classList.add('hidden');
+                    refreshResults();
+                    if (historyPanel) {
+                        historyPanel.classList.add('hidden');
+                    }
                 }
             });
         });
@@ -109,99 +464,283 @@ document.addEventListener('DOMContentLoaded', function() {
         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');
+            if (historyPanel) {
+                historyPanel.classList.remove('hidden');
             }
         });
     }
 
-    function performSearch(keyword) {
-        if (!keyword || keyword.trim() === '') {
-            renderResults(mockProducts);
-            return;
-        }
+    // ---------- 自动补全功能 ----------
+    if (searchInput && autocompletePanel && autocompleteList) {
+        let autocompleteTimeout;
         
-        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);
+            if (autocompleteTimeout) {
+                clearTimeout(autocompleteTimeout);
+            }
+            
+            if (keyword.length < 2) {
+                autocompletePanel.classList.add('hidden');
                 return;
             }
             
-            const lowerKeyword = keyword.toLowerCase();
-            const filtered = mockProducts.filter(product => 
-                product.title.toLowerCase().includes(lowerKeyword)
-            );
-            renderResults(filtered, lowerKeyword);
+            autocompleteTimeout = setTimeout(() => {
+                const suggestions = [];
+                
+                // 从搜索历史中找
+                const history = Storage.getHistory();
+                const historyMatches = history.filter(item => 
+                    item.toLowerCase().includes(keyword.toLowerCase())
+                );
+                suggestions.push(...historyMatches.slice(0, 3));
+                
+                // 从商品标题中找
+                const titleMatches = [];
+                for (const product of mockProducts) {
+                    if (product.title.toLowerCase().includes(keyword.toLowerCase())) {
+                        titleMatches.push(product.title);
+                    }
+                    if (titleMatches.length >= 5) break;
+                }
+                suggestions.push(...titleMatches);
+                
+                // 拼音匹配
+                const pinyinMatches = [];
+                for (const product of mockProducts) {
+                    try {
+                        if (Pinyin && Pinyin.match && Pinyin.match(product.title, keyword)) {
+                            pinyinMatches.push(product.title + ' 🔤');
+                        }
+                    } catch (e) {}
+                    if (pinyinMatches.length >= 3) break;
+                }
+                suggestions.push(...pinyinMatches);
+                
+                const uniqueSuggestions = [...new Set(suggestions)].slice(0, 8);
+                
+                if (uniqueSuggestions.length > 0) {
+                    let html = '';
+                    uniqueSuggestions.forEach(suggestion => {
+                        const cleanSuggestion = suggestion.replace(' 🔤', '');
+                        html += `<li class="autocomplete-item" data-keyword="${cleanSuggestion}">${suggestion}</li>`;
+                    });
+                    autocompleteList.innerHTML = html;
+                    autocompletePanel.classList.remove('hidden');
+                    
+                    document.querySelectorAll('.autocomplete-item').forEach(item => {
+                        item.addEventListener('click', function() {
+                            const keyword = this.dataset.keyword;
+                            if (keyword) {
+                                searchInput.value = keyword;
+                                refreshResults();
+                                autocompletePanel.classList.add('hidden');
+                            }
+                        });
+                    });
+                } else {
+                    autocompletePanel.classList.add('hidden');
+                }
+                
+                autocompleteTimeout = null;
+            }, 200);
+        });
+        
+        // 键盘导航
+        searchInput.addEventListener('keydown', function(e) {
+            if (autocompletePanel.classList.contains('hidden')) return;
+            
+            const items = document.querySelectorAll('.autocomplete-item');
+            if (items.length === 0) return;
+            
+            let selectedIndex = -1;
+            for (let i = 0; i < items.length; i++) {
+                if (items[i].style.backgroundColor === 'rgb(240, 247, 255)' || 
+                    items[i].classList.contains('selected')) {
+                    selectedIndex = i;
+                    break;
+                }
+            }
+            
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                selectedIndex = (selectedIndex + 1) % items.length;
+                updateSelectedItem(items, selectedIndex);
+            } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                selectedIndex = (selectedIndex - 1 + items.length) % items.length;
+                updateSelectedItem(items, selectedIndex);
+            } else if (e.key === 'Enter' && selectedIndex >= 0) {
+                e.preventDefault();
+                const selectedItem = items[selectedIndex];
+                const keyword = selectedItem.dataset.keyword;
+                if (keyword) {
+                    searchInput.value = keyword;
+                    refreshResults();
+                    autocompletePanel.classList.add('hidden');
+                }
+            } else if (e.key === 'Escape') {
+                autocompletePanel.classList.add('hidden');
+            }
+        });
+        
+        function updateSelectedItem(items, index) {
+            items.forEach((item, i) => {
+                if (i === index) {
+                    item.style.backgroundColor = '#f0f7ff';
+                    item.style.borderLeft = '3px solid #ffb347';
+                    item.classList.add('selected');
+                } else {
+                    item.style.backgroundColor = '';
+                    item.style.borderLeft = '';
+                    item.classList.remove('selected');
+                }
+            });
+        }
+    }
+
+    // 点击其他地方关闭面板
+    document.addEventListener('click', function(e) {
+        if (searchInput && autocompletePanel && 
+            !searchInput.contains(e.target) && 
+            !autocompletePanel.contains(e.target)) {
+            autocompletePanel.classList.add('hidden');
+        }
+        
+        if (searchInput && historyPanel && 
+            !searchInput.contains(e.target) && 
+            !historyPanel.contains(e.target)) {
+            historyPanel.classList.add('hidden');
+        }
+    });
+
+    // ---------- 排序事件 ----------
+    sortBtns.forEach(btn => {
+        btn.addEventListener('click', function() {
+            const sortType = this.dataset.sort;
+            
+            sortBtns.forEach(b => b.classList.remove('active'));
+            this.classList.add('active');
+            
+            currentSort.type = sortType;
+            localStorage.setItem('sortPreference', JSON.stringify(currentSort));
+            
+            sortProducts();
+            paginateAndRender();
+        });
+    });
+    
+    if (sortAscending) {
+        sortAscending.addEventListener('change', function() {
+            currentSort.ascending = this.checked;
+            localStorage.setItem('sortPreference', JSON.stringify(currentSort));
+            
+            sortProducts();
+            paginateAndRender();
         });
     }
 
+    // ---------- 分页事件 ----------
+    if (firstPageBtn) {
+        firstPageBtn.addEventListener('click', function() {
+            if (currentPage > 1) {
+                currentPage = 1;
+                paginateAndRender();
+            }
+        });
+    }
+    
+    if (prevPageBtn) {
+        prevPageBtn.addEventListener('click', function() {
+            if (currentPage > 1) {
+                currentPage--;
+                paginateAndRender();
+            }
+        });
+    }
+    
+    if (nextPageBtn) {
+        nextPageBtn.addEventListener('click', function() {
+            if (currentPage < totalPages) {
+                currentPage++;
+                paginateAndRender();
+            }
+        });
+    }
+    
+    if (lastPageBtn) {
+        lastPageBtn.addEventListener('click', function() {
+            if (currentPage < totalPages) {
+                currentPage = totalPages;
+                paginateAndRender();
+            }
+        });
+    }
+    
+    if (pageSizeSelect) {
+        pageSizeSelect.addEventListener('change', function() {
+            pageSize = parseInt(this.value);
+            localStorage.setItem('pageSizePreference', pageSize);
+            currentPage = 1;
+            paginateAndRender();
+        });
+    }
+    
+    if (jumpBtn && jumpToPage) {
+        jumpBtn.addEventListener('click', function() {
+            const targetPage = parseInt(jumpToPage.value);
+            if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= totalPages) {
+                currentPage = targetPage;
+                paginateAndRender();
+            } else {
+                alert(`请输入 1-${totalPages} 之间的页码`);
+            }
+        });
+    }
+
+    // ---------- 搜索按钮 ----------
+    if (searchBtn) {
+        searchBtn.addEventListener('click', function() {
+            refreshResults();
+            if (historyPanel) {
+                historyPanel.classList.add('hidden');
+            }
+            if (autocompletePanel) {
+                autocompletePanel.classList.add('hidden');
+            }
+        });
+    }
+
+    // ---------- 筛选事件 ----------
+    [filterInStock, filterDiscount, filterFreeShipping, minPrice, maxPrice].forEach(el => {
+        if (el) {
+            el.addEventListener('change', function() {
+                currentPage = 1;
+                if (searchTimeout) {
+                    clearTimeout(searchTimeout);
+                }
+                searchTimeout = setTimeout(() => {
+                    refreshResults();
+                    searchTimeout = null;
+                }, 300);
+            });
+            if (el === minPrice || el === maxPrice) {
+                el.addEventListener('input', function() {
+                    if (searchTimeout) {
+                        clearTimeout(searchTimeout);
+                    }
+                    searchTimeout = setTimeout(() => {
+                        currentPage = 1;
+                        refreshResults();
+                        searchTimeout = null;
+                    }, 500);
+                });
+            }
+        }
+    });
+
+    // ---------- 预设相关 ----------
     function getCurrentFilterState() {
         return {
             inStock: filterInStock ? filterInStock.checked : false,
@@ -219,34 +758,10 @@ document.addEventListener('DOMContentLoaded', function() {
         if (minPrice) minPrice.value = state.minPrice || '';
         if (maxPrice) maxPrice.value = state.maxPrice || '';
         
-        applyFilters();
+        currentPage = 1;
+        refreshResults();
     }
 
-    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;
         
@@ -332,5 +847,6 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
+    // ---------- 启动 ----------
     initFromStorage();
 });
diff --git a/search-filter/js/fuzzy.js b/search-filter/js/fuzzy.js
new file mode 100644
index 00000000..5960270d
--- /dev/null
+++ b/search-filter/js/fuzzy.js
@@ -0,0 +1,134 @@
+// ============================================
+// fuzzy.js - 模糊匹配引擎 (Levenshtein距离)
+// 让搜索能理解错别字、近似词
+// ============================================
+
+const Fuzzy = {
+    // 计算两个字符串的编辑距离
+    levenshtein: function(a, b) {
+        if (a.length === 0) return b.length;
+        if (b.length === 0) return a.length;
+        
+        const matrix = [];
+        
+        for (let i = 0; i <= b.length; i++) {
+            matrix[i] = [i];
+        }
+        for (let j = 0; j <= a.length; j++) {
+            matrix[0][j] = j;
+        }
+        
+        for (let i = 1; i <= b.length; i++) {
+            for (let j = 1; j <= a.length; j++) {
+                if (b.charAt(i - 1) === a.charAt(j - 1)) {
+                    matrix[i][j] = matrix[i - 1][j - 1];
+                } else {
+                    matrix[i][j] = Math.min(
+                        matrix[i - 1][j - 1] + 1,
+                        matrix[i - 1][j] + 1,
+                        matrix[i][j - 1] + 1
+                    );
+                }
+            }
+        }
+        
+        return matrix[b.length][a.length];
+    },
+    
+    // 计算相似度
+    similarity: function(str1, str2) {
+        if (!str1 || !str2) return 0;
+        
+        const s1 = String(str1).toLowerCase();
+        const s2 = String(str2).toLowerCase();
+        
+        if (s1 === s2) return 1;
+        
+        const distance = this.levenshtein(s1, s2);
+        const maxLength = Math.max(s1.length, s2.length);
+        
+        if (maxLength === 0) return 1;
+        
+        // 相似度 = 1 - (距离 / 最大长度)
+        return 1 - (distance / maxLength);
+    },
+    
+    // 模糊搜索
+    search: function(items, keyword, options = {}) {
+        const {
+            threshold = 0.5,           // 调低到0.5，更容易匹配
+            key = 'title',
+            includeScore = true,
+            maxResults = 20
+        } = options;
+        
+        if (!keyword || !items || items.length === 0) {
+            return [];
+        }
+        
+        const lowerKeyword = String(keyword).toLowerCase().trim();
+        const results = [];
+        
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            const text = typeof item === 'string' ? item : (item[key] || '');
+            const lowerText = String(text).toLowerCase();
+            
+            // 1. 精确包含
+            if (lowerText.includes(lowerKeyword)) {
+                results.push({
+                    item: item,
+                    score: 1.0,
+                    matchType: 'exact'
+                });
+                continue;
+            }
+            
+            // 2. 单词拆分匹配
+            const words = lowerText.split(/[\s\-·]+/);
+            let bestWordScore = 0;
+            for (const word of words) {
+                if (word.length > 1) {
+                    const sim = this.similarity(word, lowerKeyword);
+                    if (sim > bestWordScore) {
+                        bestWordScore = sim;
+                    }
+                }
+            }
+            
+            if (bestWordScore >= threshold) {
+                results.push({
+                    item: item,
+                    score: bestWordScore,
+                    matchType: 'fuzzy-word'
+                });
+                continue;
+            }
+            
+            // 3. 整体模糊匹配
+            const sim = this.similarity(lowerText, lowerKeyword);
+            
+            if (sim >= threshold) {
+                results.push({
+                    item: item,
+                    score: sim,
+                    matchType: 'fuzzy'
+                });
+            }
+        }
+        
+        results.sort((a, b) => b.score - a.score);
+        
+        const limited = results.slice(0, maxResults);
+        
+        if (includeScore) {
+            return limited;
+        } else {
+            return limited.map(r => r.item);
+        }
+    }
+};
+
+// 导出
+window.HoloLake = window.HoloLake || {};
+window.HoloLake.Fuzzy = Fuzzy;
diff --git a/search-filter/js/pinyin.js b/search-filter/js/pinyin.js
new file mode 100644
index 00000000..abedb6cf
--- /dev/null
+++ b/search-filter/js/pinyin.js
@@ -0,0 +1,233 @@
+// ============================================
+// pinyin.js - 拼音搜索引擎
+// 支持全拼、首字母、中英文混合搜索
+// ============================================
+
+const Pinyin = {
+    // 常用汉字拼音映射表（简化版，覆盖常用字）
+    map: {
+        '苹': 'ping',
+        '果': 'guo',
+        '糖': 'tang',
+        '星': 'xing',
+        '云': 'yun',
+        '甜': 'tian',
+        '蜜': 'mi',
+        '笔': 'bi',
+        '记': 'ji',
+        '本': 'ben',
+        '空': 'kong',
+        '投': 'tou',
+        '影': 'ying',
+        '灯': 'deng',
+        '奶': 'nai',
+        '瓶': 'ping',
+        '守': 'shou',
+        '护': 'hu',
+        '挂': 'gua',
+        '件': 'jian',
+        '搜': 'sou',
+        '索': 'suo',
+        '历': 'li',
+        '史': 'shi',
+        '纪': 'ji',
+        '念': 'nian',
+        '贴': 'tie',
+        '纸': 'zhi',
+        '实': 'shi',
+        '时': 'shi',
+        '高': 'gao',
+        '亮': 'liang',
+        '荧': 'ying',
+        '光': 'guang',
+        '筛': 'shai',
+        '选': 'xuan',
+        '预': 'yu',
+        '设': 'she',
+        '快': 'kuai',
+        '捷': 'jie',
+        '按': 'an',
+        '钮': 'niu',
+        '钥': 'yue',
+        '匙': 'chi',
+        '扣': 'kou',
+        '觉': 'jue',
+        '醒': 'xing',
+        '徽': 'hui',
+        '章': 'zhang',
+        '光': 'guang',
+        '湖': 'hu',
+        '纪': 'ji',
+        '元': 'yuan',
+        '霜': 'shuang',
+        '砚': 'yan',
+        '执': 'zhi',
+        '行': 'xing',
+        '手': 'shou',
+        '册': 'ce',
+        '书': 'shu',
+        '籍': 'ji',
+        '技': 'ji',
+        '术': 'shu',
+        '文': 'wen',
+        '具': 'ju',
+        '限': 'xian',
+        '量': 'liang',
+        '家': 'jia',
+        '居': 'ju',
+        '氛': 'fen',
+        '围': 'wei',
+        '周': 'zhou',
+        '边': 'bian',
+        '可': 'ke',
+        '爱': 'ai',
+        '收': 'shou',
+        '藏': 'cang',
+        '实': 'shi',
+        '用': 'yong'
+    },
+    
+    // 将中文文本转换为拼音（空格分隔）
+    toPinyin: function(text) {
+        if (!text) return '';
+        
+        let result = '';
+        for (let i = 0; i < text.length; i++) {
+            const char = text[i];
+            // 如果是英文字母或数字，保留原样
+            if (/[a-zA-Z0-9]/.test(char)) {
+                result += char.toLowerCase();
+            } else {
+                // 如果是中文，尝试转换拼音
+                const pinyin = this.map[char];
+                if (pinyin) {
+                    result += pinyin;
+                } else {
+                    // 未收录的中文，保留原字符（小写）
+                    result += char.toLowerCase();
+                }
+            }
+        }
+        return result;
+    },
+    
+    // 获取首字母缩写
+    getInitials: function(text) {
+        if (!text) return '';
+        
+        let initials = '';
+        for (let i = 0; i < text.length; i++) {
+            const char = text[i];
+            if (/[a-zA-Z]/.test(char)) {
+                initials += char.toLowerCase();
+            } else {
+                const pinyin = this.map[char];
+                if (pinyin) {
+                    initials += pinyin[0];
+                }
+            }
+        }
+        return initials;
+    },
+    
+    // 检查文本是否匹配拼音搜索
+    match: function(text, keyword) {
+        if (!text || !keyword) return false;
+        
+        const lowerText = text.toLowerCase();
+        const lowerKeyword = keyword.toLowerCase().trim();
+        
+        // 直接包含关键词
+        if (lowerText.includes(lowerKeyword)) {
+            return true;
+        }
+        
+        // 转换为拼音
+        const pinyin = this.toPinyin(text);
+        if (pinyin.includes(lowerKeyword)) {
+            return true;
+        }
+        
+        // 检查首字母
+        const initials = this.getInitials(text);
+        if (initials.includes(lowerKeyword)) {
+            return true;
+        }
+        
+        // 分词匹配（空格分隔的关键词）
+        const keywords = lowerKeyword.split(/\s+/);
+        if (keywords.length > 1) {
+            // 检查每个词是否匹配拼音或原文
+            return keywords.every(k => 
+                lowerText.includes(k) || 
+                pinyin.includes(k) || 
+                initials.includes(k)
+            );
+        }
+        
+        return false;
+    },
+    
+    // 拼音搜索：返回匹配项及匹配类型
+    search: function(items, keyword, options = {}) {
+        const {
+            key = 'title',
+            maxResults = 20
+        } = options;
+        
+        if (!keyword || !items || items.length === 0) {
+            return [];
+        }
+        
+        const lowerKeyword = keyword.toLowerCase().trim();
+        if (lowerKeyword === '') return [];
+        
+        const results = [];
+        
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            const text = typeof item === 'string' ? item : (item[key] || '');
+            
+            // 直接匹配原文
+            if (text.toLowerCase().includes(lowerKeyword)) {
+                results.push({
+                    item: item,
+                    matchType: 'direct',
+                    score: 1.0
+                });
+                continue;
+            }
+            
+            // 拼音匹配
+            const pinyin = this.toPinyin(text);
+            if (pinyin.includes(lowerKeyword)) {
+                results.push({
+                    item: item,
+                    matchType: 'pinyin',
+                    score: 0.95
+                });
+                continue;
+            }
+            
+            // 首字母匹配
+            const initials = this.getInitials(text);
+            if (initials.includes(lowerKeyword)) {
+                results.push({
+                    item: item,
+                    matchType: 'initials',
+                    score: 0.9
+                });
+                continue;
+            }
+        }
+        
+        // 按匹配度排序
+        results.sort((a, b) => b.score - a.score);
+        
+        return results.slice(0, maxResults);
+    }
+};
+
+// 导出
+window.HoloLake = window.HoloLake || {};
+window.HoloLake.Pinyin = Pinyin;
diff --git a/search-filter/js/temp_data.js b/search-filter/js/temp_data.js
new file mode 100644
index 00000000..183a9daf
--- /dev/null
+++ b/search-filter/js/temp_data.js
@@ -0,0 +1,2 @@
+// 临时数据补充：在 app.js 里找到 mockProducts 数组，在最后面加上这一条：
+{ id: 99, title: 'JavaScript 从入门到放弃', price: 99, tags: ['书籍', '编程'], inStock: true, discount: false, freeShipping: false, time: 20250320 }