liulidong
/
knowledge_search


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
							<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <!-- 顶部标题栏 -->
    <header class="header">
        <div class="header-content">
            <h1 class="header-title">🔍 小红书搜索结果可视化</h1>
            <div class="header-stats">
                <span class="stat-item">
                    <span class="stat-label">结果项:</span>
                    <span class="stat-value" id="stat-results">0</span>
                </span>
                <span class="stat-item">
                    <span class="stat-label">特征数:</span>
                    <span class="stat-value" id="stat-features">0</span>
                </span>
                <span class="stat-item">
                    <span class="stat-label">帖子数:</span>
                    <span class="stat-value" id="stat-notes">0</span>
                </span>
            </div>
        </div>

        <!-- 搜索和筛选栏 -->
        <div class="toolbar">
            <div class="search-box">
                <input type="text"
                       id="search-input"
                       class="search-input"
                       placeholder="搜索特征名称或关键词...">
                <button class="search-btn" id="search-btn">🔍</button>
            </div>
            <div class="filter-box">
                <select id="filter-status" class="filter-select">
                    <option value="all">全部状态</option>
                    <option value="success">搜索成功</option>
                    <option value="failed">搜索失败</option>
                    <option value="pending">待搜索</option>
                </select>
                <select id="sort-by" class="filter-select">
                    <option value="default">默认排序</option>
                    <option value="note_count">按帖子数</option>
                    <option value="weight">按权重</option>
                </select>
                <button class="theme-toggle" id="theme-toggle" title="切换主题">🌙</button>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="main-container">
        <!-- 左侧树形列表 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h2 class="sidebar-title">特征树形结构</h2>
                <button class="collapse-all-btn" id="collapse-all">全部折叠</button>
            </div>
            <div class="tree-container" id="tree-container">
                <div class="loading">加载中...</div>
            </div>
        </aside>

        <!-- 右侧详情面板 -->
        <section class="content-panel">
            <div class="panel-header">
                <h2 class="panel-title" id="panel-title">搜索结果详情</h2>
                <div class="panel-info" id="panel-info"></div>
            </div>
            <div class="cards-container" id="cards-container">
                <div class="empty-state">
                    <div class="empty-icon">📋</div>
                    <p class="empty-text">请从左侧选择一个特征查看搜索结果</p>
                </div>
            </div>
        </section>
    </main>

    <!-- 图片查看器模态框 -->
    <div class="modal" id="image-modal">
        <div class="modal-overlay" id="modal-overlay"></div>
        <div class="modal-content">
            <button class="modal-close" id="modal-close">×</button>
            <button class="modal-prev" id="modal-prev">‹</button>
            <button class="modal-next" id="modal-next">›</button>
            <img class="modal-image" id="modal-image" src="" alt="">
            <div class="modal-caption" id="modal-caption"></div>
        </div>
    </div>

    <!-- 加载脚本 -->
    <script src="js/carousel.js"></script>
    <script src="js/card.js"></script>
    <script src="js/tree.js"></script>
    <script src="js/main.js"></script>
</body>
</html>