ai-saas / saas-search

Blame view

frontend/index.html 4.79 KB
Edit Raw Normal View History
115047ee   tangwang   为一个租户灌入测试数据；实例的启动... 
1
2
3
4
5
 
  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
a7a8c6cb   tangwang   测试过滤、聚合、排序 
6
 
      <title>电商搜索引擎 - Product Search</title>
115047ee   tangwang   为一个租户灌入测试数据；实例的启动... 
7
8
9
 
      <link rel="stylesheet" href="/static/css/style.css">
  </head>
  <body>
a7a8c6cb   tangwang   测试过滤、聚合、排序 
10
11
12
13
14
15
16
17
18
19
 
      <div class="page-container">
          <!-- Header -->
          <header class="top-header">
              <div class="header-left">
                  <span class="logo">Product</span>
                  <span class="product-count" id="productCount">0 products found</span>
              </div>
              <div class="header-right">
                  <button class="fold-btn" onclick="toggleFilters()">Fold</button>
              </div>
115047ee   tangwang   为一个租户灌入测试数据；实例的启动... 
20
21
 
          </header>
a7a8c6cb   tangwang   测试过滤、聚合、排序 
22
23
24
25
26
27
28
29
30
31
32
33
34
 
          <!-- Search Bar -->
          <div class="search-bar">
              <input type="text" id="searchInput" placeholder="输入搜索关键词... (支持中文、英文、俄文)"
                     onkeypress="handleKeyPress(event)">
              <button onclick="performSearch()" class="search-btn">搜索</button>
          </div>
  
          <!-- Filter Section -->
          <div class="filter-section" id="filterSection">
              <!-- Category Filter -->
              <div class="filter-row">
                  <div class="filter-label">Categories:</div>
                  <div class="filter-tags" id="categoryTags"></div>
115047ee   tangwang   为一个租户灌入测试数据；实例的启动... 
35
36
 
              </div>
a7a8c6cb   tangwang   测试过滤、聚合、排序 
37
38
39
40
41
42
43
44
45
46
 
              <!-- Brand Filter -->
              <div class="filter-row">
                  <div class="filter-label">Brand:</div>
                  <div class="filter-tags" id="brandTags"></div>
              </div>
  
              <!-- Supplier Filter -->
              <div class="filter-row">
                  <div class="filter-label">Supplier:</div>
                  <div class="filter-tags" id="supplierTags"></div>
115047ee   tangwang   为一个租户灌入测试数据；实例的启动... 
47
48
 
              </div>
a7a8c6cb   tangwang   测试过滤、聚合、排序 
49
50
51
52
53
54
55
56
57
58
59
60
61
 
              <!-- Dropdown Filters -->
              <div class="filter-row">
                  <div class="filter-label">Others:</div>
                  <div class="filter-dropdowns">
                      <select id="priceFilter">
                          <option value="">Price</option>
                          <option value="0-50">0-50</option>
                          <option value="50-100">50-100</option>
                          <option value="100-200">100-200</option>
                          <option value="200+">200+</option>
                      </select>
                      <button class="clear-filters-btn" onclick="clearAllFilters()" style="display: none;" id="clearFiltersBtn">Clear Filters</button>
                  </div>
115047ee   tangwang   为一个租户灌入测试数据；实例的启动... 
62
63
64
 
              </div>
          </div>
a7a8c6cb   tangwang   测试过滤、聚合、排序 
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
          <!-- Sort Section -->
          <div class="sort-section">
              <button class="sort-btn active" data-sort="" onclick="setSortBy(this, '')">By default</button>
              <button class="sort-btn" data-sort="create_time" onclick="setSortBy(this, 'create_time')">
                  By New Products
                  <span class="sort-arrows">
                      <span class="arrow-up" onclick="event.stopPropagation(); sortByField('create_time', 'desc')">▲</span>
                      <span class="arrow-down" onclick="event.stopPropagation(); sortByField('create_time', 'asc')">▼</span>
                  </span>
              </button>
              <button class="sort-btn" data-sort="price" onclick="setSortBy(this, 'price')">
                  By Price
                  <span class="sort-arrows">
                      <span class="arrow-up" onclick="event.stopPropagation(); sortByField('price', 'asc')">▲</span>
                      <span class="arrow-down" onclick="event.stopPropagation(); sortByField('price', 'desc')">▼</span>
                  </span>
              </button>
              <button class="sort-btn" data-sort="score" onclick="setSortBy(this, 'score')">By Relevance</button>
              
              <div class="sort-right">
                  <select id="resultSize" onchange="performSearch()">
                      <option value="10">10 per page</option>
                      <option value="20" selected>20 per page</option>
                      <option value="50">50 per page</option>
                  </select>
              </div>
          </div>
  
          <!-- Loading -->
115047ee   tangwang   为一个租户灌入测试数据；实例的启动... 
94
95
 
          <div id="loading" class="loading" style="display: none;">
              <div class="spinner"></div>
a7a8c6cb   tangwang   测试过滤、聚合、排序 
96
 
              <p>Loading...</p>
115047ee   tangwang   为一个租户灌入测试数据；实例的启动... 
97
98
 
          </div>
a7a8c6cb   tangwang   测试过滤、聚合、排序 
99
100
 
          <!-- Product Grid -->
          <div class="product-grid" id="productGrid"></div>
c86c8237   tangwang   支持聚合。过滤项补充了逻辑，但是有问题 
101
a7a8c6cb   tangwang   测试过滤、聚合、排序 
102
103
 
          <!-- Pagination -->
          <div class="pagination" id="pagination" style="display: none;"></div>
115047ee   tangwang   为一个租户灌入测试数据；实例的启动... 
104
a7a8c6cb   tangwang   测试过滤、聚合、排序 
105
106
107
108
109
 
          <!-- Debug Info (Collapsible) -->
          <details class="debug-info">
              <summary>Debug Info (Query Details)</summary>
              <div id="queryInfo" class="query-info-content"></div>
          </details>
115047ee   tangwang   为一个租户灌入测试数据；实例的启动... 
110
111
112
 
      </div>
  
      <footer>
a7a8c6cb   tangwang   测试过滤、聚合、排序 
113
 
          <p>SearchEngine © 2025 | API: <span id="apiUrl">http://120.76.41.98:6002</span></p>
115047ee   tangwang   为一个租户灌入测试数据；实例的启动... 
114
115
 
      </footer>
a7a8c6cb   tangwang   测试过滤、聚合、排序 
116
 
      <script src="/static/js/app.js?v=3.0"></script>
115047ee   tangwang   为一个租户灌入测试数据；实例的启动... 
117
118
 
  </body>
  </html>