base.html 3.17 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>店匠通用搜索 - Base Configuration</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="page-container">
        <!-- Header -->
        <header class="top-header">
            <div class="header-left">
                <span class="logo">Shoplazza Base Search</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>
        </header>

        <!-- 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>
            </div>

            <!-- Vendor Filter -->
            <div class="filter-row">
                <div class="filter-label">Vendor:</div>
                <div class="filter-tags" id="brandTags"></div>
            </div>

            <!-- Tags Filter -->
            <div class="filter-row">
                <div class="filter-label">Tags:</div>
                <div class="filter-tags" id="supplierTags"></div>
            </div>

            <!-- Price Range Filter -->
            <div class="filter-row">
                <div class="filter-label">Price Range:</div>
                <div class="filter-tags" id="priceTags"></div>
            </div>

            <!-- Clear Filters Button -->
            <div class="filter-row">
                <button id="clearFiltersBtn" onclick="clearAllFilters()" class="clear-filters-btn" style="display: none;">
                    Clear All Filters
                </button>
            </div>
        </div>

        <!-- Results Section -->
        <div class="results-section">
            <div class="product-grid" id="productGrid">
                <div class="welcome-message">
                    <h2>Welcome to Shoplazza Base Search</h2>
                    <p>Enter keywords to search for products</p>
                </div>
            </div>
        </div>

        <!-- Loading Indicator -->
        <div id="loading" style="display: none; text-align: center; padding: 20px;">
            <div class="spinner"></div>
            <p>Searching...</p>
        </div>

        <!-- Debug Info (collapsible) -->
        <div class="debug-section" id="debugSection" style="display: none;">
            <button onclick="toggleDebug()" class="debug-toggle">Toggle Debug Info</button>
            <div id="debugInfo" style="display: none;"></div>
        </div>
    </div>

    <script src="/static/js/app_base.js"></script>
</body>
</html>