1708 lines
48 KiB
HTML
Executable File
1708 lines
48 KiB
HTML
Executable File
{% extends "base.html" %}
|
|
|
|
{% block title %}Wiki{% endblock %}
|
|
|
|
{% block head %}
|
|
{{ super() }}
|
|
<link href="{{ url_for('static', filename='libs/swiper/swiper-bundle.min.css') }}" rel="stylesheet">
|
|
<script src="{{ url_for('static', filename='libs/swiper/swiper-bundle.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/wiki.js') }}"></script>
|
|
|
|
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="wiki-container">
|
|
<div class="wiki-header">
|
|
<div class="header-content">
|
|
<div class="header-main">
|
|
<div class="title-and-toggle">
|
|
<!-- Wiki类型切换按钮 -->
|
|
<div class="wiki-type-toggle">
|
|
<div class="toggle-container">
|
|
<div class="toggle-btn active" data-type="news">
|
|
资讯
|
|
</div>
|
|
<div class="toggle-btn" data-type="version">
|
|
更新日志
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-container">
|
|
<div class="search-wrapper">
|
|
<i class="fas fa-search search-icon"></i>
|
|
<input
|
|
type="text"
|
|
id="wiki-search-input"
|
|
placeholder="搜索相关内容..."
|
|
>
|
|
</div>
|
|
<div class="search-shortcut">
|
|
<kbd>⌘K</kbd>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 轮播图区域 -->
|
|
<div class="wiki-carousel">
|
|
<div class="swiper wiki-swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="carousel-item" style="background-image: url('/static/images/carousel/banner1.png?v=20240101');">
|
|
<div class="carousel-content">
|
|
<!-- <p>全新旗舰，引领科技新高度</p> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="carousel-item" style="background-image: url('/static/images/carousel/banner2.png?v=20240101');">
|
|
<div class="carousel-content">
|
|
|
|
<!-- <p>智能互联，打造极致体验</p> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="carousel-item" style="background-image: url('/static/images/carousel/banner3.png');">
|
|
<div class="carousel-content">
|
|
|
|
<!--<p>5G、AI、芯片技术全面领先</p>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
<!-- <div class="swiper-button-prev"></div>
|
|
<div class="swiper-button-next"></div> -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="version-filter" style="display: none;">
|
|
<div class="filter-container">
|
|
<div class="filter-section first-level-filter">
|
|
<label>一级分类</label>
|
|
<select id="first-level-select">
|
|
<option value="">全部</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-section second-level-filter">
|
|
<label>二级分类</label>
|
|
<select id="second-level-select">
|
|
<option value="">全部</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="version-category-filter" style="display: none;">
|
|
<div class="filter-container">
|
|
<div class="filter-wrapper">
|
|
<div class="filter-chip-group">
|
|
<div class="filter-chip" data-type="second-level">
|
|
<select id="second-level-filter" class="filter-chip-select">
|
|
<option value="">设备类型</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-chip" data-type="third-level">
|
|
<select id="third-level-filter" class="filter-chip-select">
|
|
<option value="">设备型号</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<button class="filter-reset-btn">
|
|
<i class="fas fa-undo"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wiki-content">
|
|
<div class="wiki-entries grid-view">
|
|
{% for entry in entries %}
|
|
<article
|
|
class="news-card {% if entry.wiki_type == 'version' %}version-card{% endif %}"
|
|
onclick="window.location.href='{{ url_for('wiki.wiki_detail', entry_id=entry.id) }}';"
|
|
data-type="{{ entry.wiki_type }}"
|
|
data-id="{{ entry.id }}"
|
|
data-second-level="{{ entry.second_level }}"
|
|
data-third-level="{{ entry.third_level }}"
|
|
>
|
|
<div class="news-card-content">
|
|
<div class="news-card-text">
|
|
<h3 class="news-card-title">{{ entry.title }}</h3>
|
|
<div class="news-card-meta">
|
|
<span class="news-card-tag
|
|
{% if entry.wiki_type == 'version' %}version-tag{% endif %}
|
|
{% if entry.second_level %}{{ entry.second_level|lower|replace(' ', '-') }}-tag{% endif %}
|
|
">
|
|
{% if entry.wiki_type == 'version' %}
|
|
<i class="fas fa-code-branch"></i> {{ entry.version }} - {{ entry.second_level }} - {{ entry.third_level }}
|
|
{% else %}
|
|
{{ entry.second_level }}
|
|
{% endif %}
|
|
</span>
|
|
<time class="news-card-date">{{ entry.created_at }}</time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include 'nav_bar.html' %}
|
|
|
|
<style>
|
|
.wiki-content {
|
|
margin-top: 0 0 20px 0;
|
|
}
|
|
|
|
/* 标题和切换按钮容器 */
|
|
.title-and-toggle {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
padding: 0 15px;
|
|
text-align: left;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.title-and-toggle {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 5px;
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
|
|
/* Wiki 容器样式 */
|
|
.wiki-container {
|
|
max-width: 1200px;;
|
|
margin: 0 auto;;
|
|
}
|
|
|
|
.wiki-header {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
padding: 0 15px;
|
|
|
|
}
|
|
|
|
.header-main {
|
|
margin-bottom: 1px;
|
|
width: 100%;
|
|
padding: 0 15px 15px 15px;
|
|
}
|
|
|
|
.wiki-title {
|
|
font-size: 2.5rem;
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
text-align: left;
|
|
}
|
|
|
|
.wiki-subtitle {
|
|
color: #666;
|
|
font-size: 1rem;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Wiki 类型切换按钮样式 */
|
|
.wiki-type-toggle {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
width: auto;
|
|
margin-bottom: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.toggle-container {
|
|
display: flex;
|
|
gap: 15px;
|
|
text-align: left;
|
|
}
|
|
|
|
.toggle-btn {
|
|
color: #999;
|
|
font-size: 20px; /* 增大字体大小 */
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
opacity: 0.7; /* 未选中状态半透明 */
|
|
text-align: left;
|
|
display: flex; /* Add this */
|
|
align-items: flex-end; /* Add this to align text at bottom */
|
|
line-height: 1.2; /* Adjust line height for consistent alignment */
|
|
}
|
|
|
|
.toggle-btn.active {
|
|
color: #333;
|
|
font-size: 28px; /* 选中状态更大 */
|
|
font-weight: 700;
|
|
opacity: 1;
|
|
display: flex; /* Add this */
|
|
align-items: flex-end; /* Add this to align text at bottom */
|
|
line-height: 1.2; /* Adjust line height for consistent alignment */
|
|
}
|
|
|
|
/* 添加动画效果 */
|
|
@keyframes toggleFade {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.toggle-btn {
|
|
animation: toggleFade 0.5s ease;
|
|
}
|
|
|
|
/* 暗色模式 */
|
|
[data-theme="dark"] .toggle-btn {
|
|
color: #666;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
[data-theme="dark"] .toggle-btn.active {
|
|
color: #f0f0f0;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Wiki 条目样式 */
|
|
.wiki-entries {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 0 auto 20px;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.news-card {
|
|
background: white;
|
|
border-bottom: 1px solid rgba(0,0,0,0.05);
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.news-card:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.news-card:hover {
|
|
background-color: rgba(59, 130, 246, 0.02);
|
|
}
|
|
|
|
.news-card-content {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.news-card-title {
|
|
font-size: 1.1rem; /* 增大字体大小 */
|
|
color: #333;
|
|
font-weight: 600; /* 增加字重 */
|
|
flex-grow: 1;
|
|
margin-right: 15px;
|
|
line-height: 1.4; /* 增加行高 */
|
|
letter-spacing: 0.5px; /* 增加字间距 */
|
|
}
|
|
|
|
.news-card-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #666;
|
|
font-size: 0.7rem; /* 减小字体大小 */
|
|
gap: 8px; /* 减小间距 */
|
|
width: 100%;
|
|
line-height: 1.2; /* 减小行高 */
|
|
}
|
|
|
|
.news-card-tag {
|
|
background: rgba(59, 130, 246, 0.05);
|
|
color: #3b82f6;
|
|
padding: 2px 6px; /* 减小内边距 */
|
|
border-radius: 4px; /* 略微减小圆角 */
|
|
font-weight: 500;
|
|
font-size: 0.65rem; /* 减小字体大小 */
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px; /* 减小图标与文字间距 */
|
|
}
|
|
|
|
.news-card-tag.version-tag {
|
|
background: rgba(96, 125, 139, 0.05);
|
|
color: #607D8B;
|
|
}
|
|
|
|
.news-card-date {
|
|
color: #888;
|
|
min-width: 80px; /* 减小最小宽度 */
|
|
text-align: right;
|
|
font-size: 0.65rem; /* 减小字体大小 */
|
|
}
|
|
|
|
/* 不同分类的标签样式 */
|
|
.news-card-tag.手机-tag {
|
|
background: rgba(33, 150, 243, 0.1);
|
|
color: #2196F3;
|
|
}
|
|
|
|
.news-card-tag.平板-tag {
|
|
background: rgba(76, 175, 80, 0.1);
|
|
color: #4CAF50;
|
|
}
|
|
|
|
.news-card-tag.穿戴设备-tag {
|
|
background: rgba(255, 152, 0, 0.1);
|
|
color: #FF9800;
|
|
}
|
|
|
|
.news-card-tag.产品发布-tag {
|
|
background: rgba(156, 39, 176, 0.1);
|
|
color: #9C27B0;
|
|
}
|
|
|
|
.news-card-tag.技术前沿-tag {
|
|
background: rgba(0, 150, 136, 0.1);
|
|
color: #009688;
|
|
}
|
|
|
|
.news-card-tag.行业动态-tag {
|
|
background: rgba(244, 67, 54, 0.1);
|
|
color: #F44336;
|
|
}
|
|
|
|
/* 暗色模式适配 */
|
|
[data-theme="dark"] .news-card-tag.手机-tag {
|
|
background: rgba(33, 150, 243, 0.2);
|
|
color: #4FC3F7;
|
|
}
|
|
|
|
[data-theme="dark"] .news-card-tag.平板-tag {
|
|
background: rgba(76, 175, 80, 0.2);
|
|
color: #81C784;
|
|
}
|
|
|
|
[data-theme="dark"] .news-card-tag.穿戴设备-tag {
|
|
background: rgba(255, 152, 0, 0.2);
|
|
color: #FFB74D;
|
|
}
|
|
|
|
[data-theme="dark"] .news-card-tag.产品发布-tag {
|
|
background: rgba(156, 39, 176, 0.2);
|
|
color: #BA68C8;
|
|
}
|
|
|
|
[data-theme="dark"] .news-card-tag.技术前沿-tag {
|
|
background: rgba(0, 150, 136, 0.2);
|
|
color: #4DB6AC;
|
|
}
|
|
|
|
[data-theme="dark"] .news-card-tag.行业动态-tag {
|
|
background: rgba(244, 67, 54, 0.2);
|
|
color: #E57373;
|
|
}
|
|
|
|
/* 暗色模式适配 */
|
|
[data-theme="dark"] .wiki-entries {
|
|
background: #1f1f1f;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
[data-theme="dark"] .news-card {
|
|
background: transparent;
|
|
border-bottom-color: rgba(255,255,255,0.05);
|
|
}
|
|
|
|
[data-theme="dark"] .news-card:hover {
|
|
background-color: rgba(74, 144, 226, 0.05);
|
|
}
|
|
|
|
[data-theme="dark"] .news-card-title {
|
|
color: #e0e0e0; /* 略微亮一些的颜色 */
|
|
font-weight: 600;
|
|
}
|
|
|
|
[data-theme="dark"] .news-card-meta {
|
|
color: #aaa;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.wiki-entries {
|
|
max-width: 100%;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.news-card {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.news-card-content {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 5px;
|
|
}
|
|
|
|
.news-card-meta {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
/* Wiki 搜索栏样式 */
|
|
.wiki-search {
|
|
width: 100%;
|
|
max-width: 600px;
|
|
margin: 2px auto;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border-radius: 30px;
|
|
padding: 8px 12px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.search-box:focus-within {
|
|
box-shadow: 0 6px 12px rgba(59, 130, 246, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.search-icon {
|
|
color: #3b82f6;
|
|
margin-right: 10px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
#wikiSearch {
|
|
flex-grow: 1;
|
|
border: none;
|
|
background: transparent;
|
|
font-size: 16px;
|
|
color: #333;
|
|
outline: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.search-shortcut {
|
|
position: absolute;
|
|
right: 25px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
pointer-events: none;
|
|
background: none;
|
|
}
|
|
|
|
.search-shortcut kbd {
|
|
background-color: #f0f0f0; /* 浅灰色背景 */
|
|
border: 1px solid #e0e0e0; /* 稍微深一点的边框 */
|
|
border-radius: 4px; /* 圆角 */
|
|
color: #666;
|
|
font-size: 12px;
|
|
padding: 2px 6px; /* 增加一些内边距 */
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* 轻微阴影 */
|
|
}
|
|
|
|
/* 暗色模式适配 */
|
|
[data-theme="dark"] .search-shortcut kbd {
|
|
background-color: #3a3a3a; /* 深灰色背景 */
|
|
border-color: #4a4a4a;
|
|
color: #a0a0a0;
|
|
}
|
|
|
|
/* 响应式搜索栏 */
|
|
@media (max-width: 768px) {
|
|
.search-box {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
#wikiSearch {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.search-shortcut {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* 新增的 news-card-text 样式 */
|
|
.news-card-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
gap: 8px;
|
|
}
|
|
|
|
.news-card-content {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.news-card-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #666;
|
|
font-size: 0.7rem; /* 减小字体大小 */
|
|
gap: 8px; /* 减小间距 */
|
|
width: 100%;
|
|
line-height: 1.2; /* 减小行高 */
|
|
}
|
|
|
|
/* 轮播图样式 */
|
|
.wiki-carousel {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 5px 0;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.swiper.wiki-swiper {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
|
|
.carousel-item {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: flex-start;
|
|
padding: 20px;
|
|
color: white;
|
|
transition: transform 0.3s ease;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
/* Add image optimization */
|
|
will-change: background-image;
|
|
transition: background-image 0.3s ease-in-out;
|
|
}
|
|
|
|
.carousel-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.));
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.carousel-item:hover::before {
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.0));
|
|
}
|
|
|
|
.carousel-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
max-width: 70%;
|
|
}
|
|
|
|
.carousel-content h3 {
|
|
font-size: 2.2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.carousel-content p {
|
|
font-size: 1.2rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.swiper-button-prev,
|
|
.swiper-button-next {
|
|
color: white !important;
|
|
background: rgba(0,0,0,0.3);
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.swiper-pagination-bullet {
|
|
background: white !important;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.swiper-pagination-bullet-active {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 暗色模式适配 */
|
|
[data-theme="dark"] .wiki-carousel {
|
|
box-shadow: 0 4px 15px rgba(255,255,255,0.1);
|
|
}
|
|
|
|
[data-theme="dark"] .carousel-item::before {
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8));
|
|
}
|
|
|
|
[data-theme="dark"] .carousel-content h3 {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
[data-theme="dark"] .carousel-content p {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.wiki-carousel {
|
|
max-width: 100%;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.swiper.wiki-swiper {
|
|
height: 200px;
|
|
}
|
|
|
|
.carousel-content h3 {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.carousel-content p {
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
|
|
/* 版本筛选样式 */
|
|
.version-filter {
|
|
width: 100%;
|
|
padding: 10px 15px;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border-radius: 12px;
|
|
margin-top: 10px;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
|
transition: all 0.3s ease;
|
|
border: 1px solid rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.filter-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.filter-section {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.filter-section label {
|
|
margin-bottom: 8px;
|
|
font-size: 0.85rem;
|
|
color: #4a4a4a;
|
|
font-weight: 600;
|
|
position: relative;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.filter-section label::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: #4a90e2;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.filter-section select {
|
|
padding: 10px 15px;
|
|
border: 1px solid rgba(0,0,0,0.1);
|
|
border-radius: 8px;
|
|
font-size: 0.9rem;
|
|
background: white;
|
|
transition: all 0.3s ease;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a90e2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 15px center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.filter-section select:focus {
|
|
outline: none;
|
|
border-color: #4a90e2;
|
|
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
|
|
}
|
|
|
|
/* 暗色模式适配 */
|
|
[data-theme="dark"] .version-filter {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
[data-theme="dark"] .filter-section label {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
[data-theme="dark"] .filter-section label::before {
|
|
background-color: #4FC3F7;
|
|
}
|
|
|
|
[data-theme="dark"] .filter-section select {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
color: #f0f0f0;
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234FC3F7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
[data-theme="dark"] .filter-section select:focus {
|
|
box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.15);
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.filter-container {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.filter-section {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* 搜索栏优化样式 */
|
|
.search-container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
#wiki-search-input {
|
|
width: 100%;
|
|
padding: 12px 12px 12px 45px; /* 增加左侧内边距 */
|
|
padding-left: 50px; /* 增加左侧内边距，为放大镜腾出更多空间 */
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 12px;
|
|
font-size: 16px;
|
|
transition: all 0.3s ease;
|
|
background-color: #f9f9f9;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
/* 搜索图标 */
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 20px; /* 稍微向右移动放大镜 */
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #a0a0a0;
|
|
font-size: 18px;
|
|
pointer-events: none;
|
|
transition: color 0.3s ease;
|
|
z-index: 10;
|
|
}
|
|
|
|
#wiki-search-input:focus + .search-icon {
|
|
color: #3b82f6;
|
|
}
|
|
|
|
#wiki-search-input:focus {
|
|
outline: none;
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 4px 10px rgba(59,130,246,0.1);
|
|
background-color: white;
|
|
}
|
|
|
|
#wiki-search-input::placeholder {
|
|
color: #a0a0a0;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
#wiki-search-input:focus::placeholder {
|
|
color: #c0c0c0;
|
|
}
|
|
|
|
/* 暗色模式适配 */
|
|
[data-theme="dark"] #wiki-search-input {
|
|
background-color: #2c2c2c;
|
|
border-color: #444;
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
[data-theme="dark"] #wiki-search-input:focus {
|
|
border-color: #4f46e5;
|
|
background-color: #1f2937;
|
|
}
|
|
|
|
[data-theme="dark"] .search-container::before {
|
|
color: #666;
|
|
}
|
|
|
|
[data-theme="dark"] #wiki-search-input:focus + .search-container::before {
|
|
color: #6366f1;
|
|
}
|
|
|
|
/* 移动端适配 */
|
|
@media (max-width: 768px) {
|
|
.search-container {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
#wiki-search-input {
|
|
font-size: 14px;
|
|
padding: 10px 40px 10px 35px;
|
|
}
|
|
|
|
.search-container::before {
|
|
right: 25px;
|
|
}
|
|
}
|
|
|
|
/* ⌘K 快捷键样式 */
|
|
.search-container {
|
|
position: relative;
|
|
}
|
|
|
|
.search-shortcut {
|
|
position: absolute;
|
|
right: 25px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.search-shortcut kbd {
|
|
background-color: transparent;
|
|
border: none;
|
|
color: #888;
|
|
font-size: 12px;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* 暗色模式适配 */
|
|
[data-theme="dark"] .search-shortcut kbd {
|
|
color: #666;
|
|
}
|
|
|
|
/* 响应式隐藏 */
|
|
@media (max-width: 768px) {
|
|
.search-shortcut {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* 移动端适配 */
|
|
@media (max-width: 768px) {
|
|
.header-content,
|
|
.search-container,
|
|
.wiki-carousel {
|
|
max-width: 100%;
|
|
padding: 0 0px;
|
|
}
|
|
}
|
|
|
|
/* 移动端隐藏 search-shortcut */
|
|
@media (max-width: 768px) {
|
|
.search-shortcut {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.version-category-filter {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.filter-container {
|
|
background-color: #F5F5F5;
|
|
border-radius: 16px;
|
|
padding: 12px;
|
|
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.filter-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.filter-chip-group {
|
|
display: flex;
|
|
gap: 15px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.filter-chip {
|
|
flex: 1;
|
|
position: relative;
|
|
background-color: #f5f5f5;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 12px;
|
|
transition: all 0.3s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.filter-chip:hover {
|
|
border-color: #4a90e2;
|
|
box-shadow: 0 4px 15px rgba(74,144,226,0.1);
|
|
}
|
|
|
|
.filter-chip-select {
|
|
width: 100%;
|
|
padding: 10px 40px 10px 15px;
|
|
border: none;
|
|
background: transparent;
|
|
appearance: none;
|
|
font-size: 0.9rem;
|
|
color: #333;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a90e2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 15px center;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.filter-chip-select:focus {
|
|
outline: 2px solid rgba(74,144,226,0.3);
|
|
}
|
|
|
|
.filter-reset-btn {
|
|
background-color: #f5f5f5;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 12px;
|
|
width: 38px; /* 减小宽度 */
|
|
height: 38px; /* 减小高度 */
|
|
color: #4a4a4a;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.filter-reset-btn i {
|
|
font-size: 16px; /* 减小图标大小 */
|
|
transition: transform 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* 移动端适配 */
|
|
@media (max-width: 768px) {
|
|
.filter-reset-btn {
|
|
width: 35px; /* 移动端更小 */
|
|
height: 35px;
|
|
}
|
|
|
|
.filter-reset-btn i {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.filter-reset-btn:hover {
|
|
border-color: #4a90e2;
|
|
box-shadow: 0 4px 15px rgba(74,144,226,0.1);
|
|
color: #4a90e2;
|
|
}
|
|
|
|
.filter-reset-btn i {
|
|
font-size: 18px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.filter-reset-btn:hover i {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* 暗色模式适配 */
|
|
[data-theme="dark"] .filter-reset-btn {
|
|
background-color: #3a3a3a;
|
|
border-color: #444;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
[data-theme="dark"] .filter-reset-btn:hover {
|
|
border-color: #4FC3F7;
|
|
box-shadow: 0 4px 15px rgba(79,195,247,0.1);
|
|
color: #4FC3F7;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
|
|
.filter-container {
|
|
padding: 8px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.filter-chip-select {
|
|
padding: 8px 35px 8px 12px;
|
|
font-size: 0.85rem;
|
|
}
|
|
}
|
|
|
|
.wiki-carousel .swiper-slide img {
|
|
width: 100%;
|
|
height: 300px;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.wiki-carousel .swiper-slide img {
|
|
width: 100%;
|
|
height: auto;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
|
|
.swiper.wiki-swiper {
|
|
height: 170px;
|
|
}
|
|
}
|
|
|
|
/* 版本分类筛选器 - 黑暗模式适配 */
|
|
[data-theme="dark"] .version-category-filter .filter-container {
|
|
background-color: #2c2c2c;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
[data-theme="dark"] .version-category-filter .filter-chip {
|
|
background-color: #3a3a3a;
|
|
border-color: rgba(255,255,255,0.1);
|
|
}
|
|
|
|
[data-theme="dark"] .version-category-filter .filter-chip:hover {
|
|
border-color: #4FC3F7;
|
|
box-shadow: 0 4px 15px rgba(79,195,247,0.1);
|
|
}
|
|
|
|
[data-theme="dark"] .version-category-filter .filter-chip-select {
|
|
color: #e0e0e0;
|
|
background-color: transparent;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234FC3F7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
[data-theme="dark"] .version-category-filter .filter-chip-select option {
|
|
background-color: #2c2c2c;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
[data-theme="dark"] .version-category-filter .filter-reset-btn {
|
|
background-color: #3a3a3a;
|
|
border-color: rgba(255,255,255,0.1);
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
[data-theme="dark"] .version-category-filter .filter-reset-btn:hover {
|
|
border-color: #4FC3F7;
|
|
color: #4FC3F7;
|
|
box-shadow: 0 4px 15px rgba(79,195,247,0.1);
|
|
}
|
|
|
|
[data-theme="dark"] .version-category-filter .filter-reset-btn i {
|
|
color: #e0e0e0;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
[data-theme="dark"] .version-category-filter .filter-reset-btn:hover i {
|
|
color: #4FC3F7;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
var wikiSwiper;
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var toggleBtns = document.querySelectorAll('.toggle-btn');
|
|
var newsCards = document.querySelectorAll('.news-card');
|
|
var wikiCarousel = document.querySelector('.wiki-carousel');
|
|
var lastSelectedType = localStorage.getItem('wikiSelectedType') || 'news';
|
|
|
|
toggleBtns.forEach(function(btn) {
|
|
btn.classList.toggle('active', btn.dataset.type === lastSelectedType);
|
|
});
|
|
|
|
// 控制轮播图显示
|
|
wikiCarousel.style.display = lastSelectedType === 'news' ? 'block' : 'none';
|
|
|
|
newsCards.forEach(function(card) {
|
|
card.style.display = (lastSelectedType === 'news' && !card.classList.contains('version-card')) ||
|
|
(lastSelectedType === 'version' && card.classList.contains('version-card')) ? '' : 'none';
|
|
});
|
|
|
|
toggleBtns.forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
toggleBtns.forEach(function(b) { b.classList.remove('active'); });
|
|
this.classList.add('active');
|
|
|
|
var type = this.dataset.type;
|
|
localStorage.setItem('wikiSelectedType', type);
|
|
|
|
// 控制轮播图显示
|
|
wikiCarousel.style.display = type === 'news' ? 'block' : 'none';
|
|
|
|
newsCards.forEach(function(card) {
|
|
card.style.display = (type === 'news' && !card.classList.contains('version-card')) ||
|
|
(type === 'version' && card.classList.contains('version-card')) ? '' : 'none';
|
|
});
|
|
});
|
|
});
|
|
|
|
// 优化轮播图图片加载和缓存
|
|
const CAROUSEL_VERSION = '20240101';
|
|
const carouselImages = [
|
|
'/static/images/carousel/banner1.png?v=' + CAROUSEL_VERSION,
|
|
'/static/images/carousel/banner2.png?v=' + CAROUSEL_VERSION
|
|
];
|
|
|
|
// 高级缓存管理
|
|
function getImageCacheKey(imageSrc) {
|
|
return `wiki_carousel_image_cache_${imageSrc.split('?')[0].split('/').pop()}_${CAROUSEL_VERSION}`;
|
|
}
|
|
|
|
// 检查并应用图片缓存
|
|
function applyCachedCarouselImages() {
|
|
const carouselSlides = document.querySelectorAll('.swiper-slide .carousel-item');
|
|
|
|
carouselSlides.forEach((slide, index) => {
|
|
const imageSrc = carouselImages[index];
|
|
const cacheKey = getImageCacheKey(imageSrc);
|
|
|
|
// 尝试从缓存获取图片数据
|
|
const cachedImageData = localStorage.getItem(cacheKey);
|
|
|
|
if (cachedImageData) {
|
|
// 如果有缓存，直接应用缓存的背景图
|
|
slide.style.backgroundImage = `url(${imageSrc})`;
|
|
console.log(`使用缓存图片: ${imageSrc}`);
|
|
} else {
|
|
// 如果没有缓存，预加载并缓存
|
|
const img = new Image();
|
|
img.onload = function() {
|
|
// 缓存图片
|
|
slide.style.backgroundImage = `url(${imageSrc})`;
|
|
localStorage.setItem(cacheKey, 'loaded');
|
|
console.log(`预加载并缓存图片: ${imageSrc}`);
|
|
};
|
|
img.src = imageSrc;
|
|
}
|
|
});
|
|
}
|
|
|
|
// 清理旧的缓存（可选）
|
|
function cleanupOldCache() {
|
|
Object.keys(localStorage).forEach(key => {
|
|
if (key.startsWith('wiki_carousel_image_cache_') &&
|
|
!key.includes(CAROUSEL_VERSION)) {
|
|
localStorage.removeItem(key);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 网络状态缓存策略
|
|
function enhancedCacheStrategy() {
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('/static/sw-wiki-carousel.js')
|
|
.then(registration => {
|
|
console.log('Service Worker 注册成功:', registration);
|
|
})
|
|
.catch(error => {
|
|
console.log('Service Worker 注册失败:', error);
|
|
});
|
|
}
|
|
}
|
|
|
|
// 执行缓存策略
|
|
cleanupOldCache();
|
|
applyCachedCarouselImages();
|
|
enhancedCacheStrategy();
|
|
|
|
// 初始化轮播图（保持原有逻辑）
|
|
wikiSwiper = new Swiper('.wiki-swiper', {
|
|
slidesPerView: 1,
|
|
spaceBetween: 0,
|
|
loop: true,
|
|
autoplay: {
|
|
delay: 5000,
|
|
disableOnInteraction: false
|
|
},
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true
|
|
},
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev'
|
|
},
|
|
effect: 'slide',
|
|
speed: 600
|
|
});
|
|
});
|
|
|
|
// 版本筛选功能
|
|
function populateVersionFilters() {
|
|
const newsCards = document.querySelectorAll('.news-card.version-card');
|
|
const firstLevelSelect = document.getElementById('first-level-select');
|
|
const secondLevelSelect = document.getElementById('second-level-select');
|
|
const versionFilter = document.querySelector('.version-filter');
|
|
|
|
// 重置下拉选项
|
|
firstLevelSelect.innerHTML = '<option value="">全部</option>';
|
|
secondLevelSelect.innerHTML = '<option value="">全部</option>';
|
|
|
|
// 从服务器获取分类数据
|
|
fetch('/admin/wiki/categories?pre=true')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('获取分类数据失败');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('获取的分类数据:', data);
|
|
|
|
// 收集唯一的分类
|
|
const firstLevels = new Set();
|
|
const secondLevels = new Set();
|
|
|
|
// 处理获取的分类数据
|
|
data.categories.forEach(category => {
|
|
if (category.first_level === '版本号') {
|
|
firstLevels.add(category.first_level);
|
|
secondLevels.add(category.second_level);
|
|
}
|
|
});
|
|
|
|
// 填充一级分类
|
|
firstLevels.forEach(level => {
|
|
const option = document.createElement('option');
|
|
option.value = level;
|
|
option.textContent = level;
|
|
firstLevelSelect.appendChild(option);
|
|
});
|
|
|
|
// 二级分类联动
|
|
firstLevelSelect.addEventListener('change', function() {
|
|
const selectedFirst = this.value;
|
|
secondLevelSelect.innerHTML = '<option value="">全部</option>';
|
|
|
|
data.categories.forEach(category => {
|
|
if (selectedFirst === '' || category.first_level === selectedFirst) {
|
|
const option = document.createElement('option');
|
|
option.value = category.second_level;
|
|
option.textContent = category.second_level;
|
|
if (!Array.from(secondLevelSelect.options).some(opt => opt.value === category.second_level)) {
|
|
secondLevelSelect.appendChild(option);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// 筛选逻辑
|
|
function filterVersions() {
|
|
const selectedFirst = firstLevelSelect.value;
|
|
const selectedSecond = secondLevelSelect.value;
|
|
|
|
newsCards.forEach(card => {
|
|
const tagText = card.querySelector('.news-card-tag').textContent.trim();
|
|
const parts = tagText.split(' - ');
|
|
const [first, second] = [parts[0], parts[parts.length - 1]];
|
|
|
|
const matchFirst = selectedFirst === '' || first === selectedFirst;
|
|
const matchSecond = selectedSecond === '' || second === selectedSecond;
|
|
|
|
card.style.display = (matchFirst && matchSecond) ? '' : 'none';
|
|
});
|
|
}
|
|
|
|
// 添加筛选事件监听
|
|
firstLevelSelect.addEventListener('change', filterVersions);
|
|
secondLevelSelect.addEventListener('change', filterVersions);
|
|
|
|
// 切换到版本号时显示筛选器
|
|
const toggleBtns = document.querySelectorAll('.toggle-btn');
|
|
toggleBtns.forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
versionFilter.style.display = this.dataset.type === 'version' ? 'block' : 'none';
|
|
|
|
// 重置筛选
|
|
if (this.dataset.type === 'version') {
|
|
firstLevelSelect.value = '';
|
|
secondLevelSelect.value = '';
|
|
filterVersions();
|
|
}
|
|
});
|
|
});
|
|
|
|
// 初始化时根据当前选中的标签页决定是否显示筛选器
|
|
const lastSelectedType = localStorage.getItem('wikiSelectedType') || 'news';
|
|
versionFilter.style.display = lastSelectedType === 'version' ? 'block' : 'none';
|
|
})
|
|
.catch(error => {
|
|
console.error('获取分类数据失败:', error);
|
|
});
|
|
}
|
|
|
|
// 在 DOMContentLoaded 中调用
|
|
document.addEventListener('DOMContentLoaded', populateVersionFilters);
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const searchInput = document.getElementById('wiki-search-input');
|
|
const wikiEntries = document.querySelectorAll('.news-card');
|
|
|
|
// 创建"未找到结果"消息元素
|
|
const noResultsMessage = document.createElement('div');
|
|
noResultsMessage.id = 'no-results-message';
|
|
noResultsMessage.style.display = 'none';
|
|
noResultsMessage.style.textAlign = 'center';
|
|
noResultsMessage.style.color = '#666';
|
|
noResultsMessage.style.padding = '20px';
|
|
noResultsMessage.textContent = '未找到相关内容';
|
|
|
|
// 将消息插入到 wiki-content
|
|
const wikiContent = document.querySelector('.wiki-content');
|
|
if (wikiContent) {
|
|
wikiContent.appendChild(noResultsMessage);
|
|
}
|
|
|
|
function performSearch() {
|
|
const searchTerm = searchInput.value.toLowerCase().trim();
|
|
let matchFound = false;
|
|
|
|
wikiEntries.forEach(entry => {
|
|
// 使用更健壮的选择器
|
|
const titleElement = entry.querySelector('.news-card-title');
|
|
const tagElement = entry.querySelector('.news-card-tag');
|
|
|
|
if (!titleElement || !tagElement) {
|
|
console.warn('搜索元素未找到', entry);
|
|
return;
|
|
}
|
|
|
|
const title = titleElement.textContent.toLowerCase();
|
|
const tag = tagElement.textContent.toLowerCase();
|
|
|
|
// 同时搜索标题和标签
|
|
const isMatch =
|
|
title.includes(searchTerm) ||
|
|
tag.includes(searchTerm);
|
|
|
|
entry.style.display = isMatch ? 'block' : 'none';
|
|
|
|
if (isMatch) {
|
|
matchFound = true;
|
|
}
|
|
});
|
|
|
|
// 显示/隐藏"未找到结果"消息
|
|
if (noResultsMessage) {
|
|
noResultsMessage.style.display = matchFound ? 'none' : 'block';
|
|
}
|
|
}
|
|
|
|
// 添加搜索输入事件监听器
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', performSearch);
|
|
|
|
// 调试日志
|
|
console.log('Wiki 搜索功能已初始化');
|
|
console.log('搜索输入框:', searchInput);
|
|
console.log('Wiki 条目数量:', wikiEntries.length);
|
|
} else {
|
|
console.error('未找到 wiki-search-input 元素');
|
|
}
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const searchInput = document.getElementById('wiki-search-input');
|
|
|
|
// 添加 ⌘K 快捷键功能
|
|
document.addEventListener('keydown', function(e) {
|
|
// 同时按下 Cmd/Ctrl 和 K
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
|
e.preventDefault(); // 阻止默认行为
|
|
searchInput.focus(); // 聚焦到搜索框
|
|
}
|
|
});
|
|
|
|
// 点击搜索框时选中所有文本
|
|
searchInput.addEventListener('click', function() {
|
|
this.select();
|
|
});
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const secondLevelFilter = document.getElementById('second-level-filter');
|
|
const thirdLevelFilter = document.getElementById('third-level-filter');
|
|
const wikiEntries = document.querySelectorAll('.news-card');
|
|
const versionCategoryFilter = document.querySelector('.version-category-filter');
|
|
const toggleBtns = document.querySelectorAll('.toggle-btn');
|
|
const filterResetBtn = document.querySelector('.filter-reset-btn');
|
|
|
|
// 动态填充分类选项
|
|
function populateCategoryFilters() {
|
|
const secondLevels = new Set();
|
|
const thirdLevels = new Set();
|
|
|
|
const versionEntries = Array.from(wikiEntries).filter(entry =>
|
|
entry.classList.contains('version-card')
|
|
);
|
|
|
|
versionEntries.forEach(entry => {
|
|
const secondLevel = entry.getAttribute('data-second-level');
|
|
const thirdLevel = entry.getAttribute('data-third-level');
|
|
|
|
if (secondLevel) secondLevels.add(secondLevel);
|
|
if (thirdLevel) thirdLevels.add(thirdLevel);
|
|
});
|
|
|
|
// 填充二级分类
|
|
secondLevelFilter.innerHTML = '<option value="">设备类型</option>';
|
|
secondLevels.forEach(level => {
|
|
const option = document.createElement('option');
|
|
option.value = level;
|
|
option.textContent = level;
|
|
secondLevelFilter.appendChild(option);
|
|
});
|
|
|
|
// 填充三级分类
|
|
thirdLevelFilter.innerHTML = '<option value="">设备型号</option>';
|
|
thirdLevels.forEach(level => {
|
|
const option = document.createElement('option');
|
|
option.value = level;
|
|
option.textContent = level;
|
|
thirdLevelFilter.appendChild(option);
|
|
});
|
|
}
|
|
|
|
// 筛选逻辑
|
|
function filterVersionEntries() {
|
|
const secondLevelValue = secondLevelFilter.value;
|
|
const thirdLevelValue = thirdLevelFilter.value;
|
|
|
|
wikiEntries.forEach(entry => {
|
|
const isVersionCard = entry.classList.contains('version-card');
|
|
const entrySecondLevel = entry.getAttribute('data-second-level');
|
|
const entryThirdLevel = entry.getAttribute('data-third-level');
|
|
|
|
const matchSecondLevel = !secondLevelValue || entrySecondLevel === secondLevelValue;
|
|
const matchThirdLevel = !thirdLevelValue || entryThirdLevel === thirdLevelValue;
|
|
|
|
entry.style.display = (isVersionCard && matchSecondLevel && matchThirdLevel) ? '' : 'none';
|
|
});
|
|
}
|
|
|
|
// 重置筛选
|
|
function resetFilters() {
|
|
secondLevelFilter.value = '';
|
|
thirdLevelFilter.value = '';
|
|
filterVersionEntries();
|
|
}
|
|
|
|
// 添加事件监听器
|
|
secondLevelFilter.addEventListener('change', filterVersionEntries);
|
|
thirdLevelFilter.addEventListener('change', filterVersionEntries);
|
|
filterResetBtn.addEventListener('click', resetFilters);
|
|
|
|
// 切换标签页时控制筛选器显示
|
|
toggleBtns.forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const isVersionTab = this.dataset.type === 'version';
|
|
versionCategoryFilter.style.display = isVersionTab ? 'block' : 'none';
|
|
|
|
// 重置筛选
|
|
if (isVersionTab) {
|
|
resetFilters();
|
|
}
|
|
});
|
|
});
|
|
|
|
// 初始化
|
|
populateCategoryFilters();
|
|
|
|
// 根据当前选中的标签页决定是否显示筛选器
|
|
const lastSelectedType = localStorage.getItem('wikiSelectedType') || 'news';
|
|
versionCategoryFilter.style.display = lastSelectedType === 'version' ? 'block' : 'none';
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const filterTrigger = document.querySelector('.filter-trigger');
|
|
const filterDropdown = document.querySelector('.filter-dropdown');
|
|
const secondLevelOptions = document.getElementById('second-level-options');
|
|
const thirdLevelOptions = document.getElementById('third-level-options');
|
|
const resetFilterBtn = document.querySelector('.reset-filter');
|
|
const applyFilterBtn = document.querySelector('.apply-filter');
|
|
const wikiEntries = document.querySelectorAll('.news-card');
|
|
|
|
// 切换筛选器显示
|
|
filterTrigger.addEventListener('click', function() {
|
|
filterDropdown.style.display = filterDropdown.style.display === 'block' ? 'none' : 'block';
|
|
});
|
|
|
|
// 点击外部关闭筛选器
|
|
document.addEventListener('click', function(event) {
|
|
if (!filterTrigger.contains(event.target) && !filterDropdown.contains(event.target)) {
|
|
filterDropdown.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// 动态生成分类选项
|
|
function generateCategoryOptions() {
|
|
const secondLevels = new Set();
|
|
const thirdLevels = new Set();
|
|
|
|
const versionEntries = Array.from(wikiEntries).filter(entry =>
|
|
entry.classList.contains('version-card')
|
|
);
|
|
|
|
versionEntries.forEach(entry => {
|
|
const secondLevel = entry.getAttribute('data-second-level');
|
|
const thirdLevel = entry.getAttribute('data-third-level');
|
|
|
|
if (secondLevel) secondLevels.add(secondLevel);
|
|
if (thirdLevel) thirdLevels.add(thirdLevel);
|
|
});
|
|
|
|
// 生成二级分类选项
|
|
secondLevelOptions.innerHTML = '';
|
|
secondLevels.forEach(level => {
|
|
const option = document.createElement('div');
|
|
option.classList.add('filter-option');
|
|
option.textContent = level;
|
|
option.setAttribute('data-value', level);
|
|
option.addEventListener('click', () => toggleOption(option));
|
|
secondLevelOptions.appendChild(option);
|
|
});
|
|
|
|
// 生成三级分类选项
|
|
thirdLevelOptions.innerHTML = '';
|
|
thirdLevels.forEach(level => {
|
|
const option = document.createElement('div');
|
|
option.classList.add('filter-option');
|
|
option.textContent = level;
|
|
option.setAttribute('data-value', level);
|
|
option.addEventListener('click', () => toggleOption(option));
|
|
thirdLevelOptions.appendChild(option);
|
|
});
|
|
}
|
|
|
|
// 切换选项选中状态
|
|
function toggleOption(option) {
|
|
option.classList.toggle('selected');
|
|
}
|
|
|
|
// 重置筛选
|
|
resetFilterBtn.addEventListener('click', function() {
|
|
document.querySelectorAll('.filter-option').forEach(option => {
|
|
option.classList.remove('selected');
|
|
});
|
|
});
|
|
|
|
// 应用筛选
|
|
applyFilterBtn.addEventListener('click', function() {
|
|
const selectedSecondLevels = Array.from(
|
|
secondLevelOptions.querySelectorAll('.filter-option.selected')
|
|
).map(el => el.getAttribute('data-value'));
|
|
|
|
const selectedThirdLevels = Array.from(
|
|
thirdLevelOptions.querySelectorAll('.filter-option.selected')
|
|
).map(el => el.getAttribute('data-value'));
|
|
|
|
wikiEntries.forEach(entry => {
|
|
const isVersionCard = entry.classList.contains('version-card');
|
|
const entrySecondLevel = entry.getAttribute('data-second-level');
|
|
const entryThirdLevel = entry.getAttribute('data-third-level');
|
|
|
|
const matchSecondLevel = selectedSecondLevels.length === 0 ||
|
|
selectedSecondLevels.includes(entrySecondLevel);
|
|
const matchThirdLevel = selectedThirdLevels.length === 0 ||
|
|
selectedThirdLevels.includes(entryThirdLevel);
|
|
|
|
entry.style.display = (isVersionCard && matchSecondLevel && matchThirdLevel) ? '' : 'none';
|
|
});
|
|
|
|
filterDropdown.style.display = 'none';
|
|
});
|
|
|
|
// 初始化
|
|
generateCategoryOptions();
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Preload carousel images for better performance
|
|
const carouselImages = [
|
|
'/static/images/carousel/banner1.png?v=20240101',
|
|
'/static/images/carousel/banner2.png?v=20240101'
|
|
];
|
|
|
|
carouselImages.forEach(imageSrc => {
|
|
const img = new Image();
|
|
img.src = imageSrc;
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |