1360 lines
49 KiB
HTML
1360 lines
49 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>帮助中心 - Chookoo</title>
|
||
<style>
|
||
:root {
|
||
color-scheme: light;
|
||
--bg: #f5f7fb;
|
||
--text: #0f172a;
|
||
--muted: #5b6472;
|
||
--primary: #2f6bff;
|
||
--primary-weak: #e8f1ff;
|
||
--card: #ffffff;
|
||
--line: #e5e7eb;
|
||
--shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { overflow-y: scroll; }
|
||
body {
|
||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
min-width: 1280px;
|
||
line-height: 1.6;
|
||
transform-origin: top left;
|
||
}
|
||
a { color: inherit; text-decoration: none; }
|
||
|
||
/* 导航栏 */
|
||
.navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
.navbar-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 64px;
|
||
padding: 0 32px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
.navbar-logo img { height: 40px; }
|
||
.navbar-back {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
transition: color 0.2s;
|
||
}
|
||
.navbar-back:hover { color: var(--text); }
|
||
|
||
/* 主内容区 */
|
||
.main-content {
|
||
padding-top: 100px;
|
||
padding-bottom: 80px;
|
||
min-height: 100vh;
|
||
}
|
||
.container {
|
||
width: 1000px;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
}
|
||
|
||
/* 搜索区域 */
|
||
.search-section {
|
||
text-align: center;
|
||
margin-bottom: 48px;
|
||
}
|
||
.search-title {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
color: var(--text);
|
||
}
|
||
.search-subtitle {
|
||
font-size: 16px;
|
||
color: var(--muted);
|
||
margin-bottom: 32px;
|
||
}
|
||
.search-box {
|
||
position: relative;
|
||
max-width: 560px;
|
||
margin: 0 auto;
|
||
}
|
||
.search-input {
|
||
width: 100%;
|
||
padding: 16px 24px 16px 52px;
|
||
font-size: 16px;
|
||
border: 2px solid var(--line);
|
||
border-radius: 16px;
|
||
background: var(--card);
|
||
outline: none;
|
||
transition: all 0.3s;
|
||
}
|
||
.search-input:focus {
|
||
border-color: var(--primary);
|
||
box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.1);
|
||
}
|
||
.search-icon {
|
||
position: absolute;
|
||
left: 20px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--muted);
|
||
}
|
||
.search-results {
|
||
position: absolute;
|
||
top: calc(100% + 8px);
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--card);
|
||
border-radius: 12px;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
display: none;
|
||
z-index: 100;
|
||
}
|
||
.search-results.active { display: block; }
|
||
.search-result-item {
|
||
padding: 14px 20px;
|
||
cursor: pointer;
|
||
border-bottom: 1px solid var(--line);
|
||
transition: background 0.2s;
|
||
}
|
||
.search-result-item:last-child { border-bottom: none; }
|
||
.search-result-item:hover { background: var(--primary-weak); }
|
||
.search-result-title {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
margin-bottom: 4px;
|
||
}
|
||
.search-result-category {
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
}
|
||
.search-no-result {
|
||
padding: 24px;
|
||
text-align: center;
|
||
color: var(--muted);
|
||
}
|
||
|
||
/* 分类标签 */
|
||
.category-tabs {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 40px;
|
||
}
|
||
.category-tab {
|
||
padding: 10px 20px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
border-radius: 999px;
|
||
background: var(--card);
|
||
border: 1px solid var(--line);
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
.category-tab:hover {
|
||
border-color: var(--primary);
|
||
color: var(--primary);
|
||
}
|
||
.category-tab.active {
|
||
background: var(--primary);
|
||
border-color: var(--primary);
|
||
color: #fff;
|
||
}
|
||
|
||
/* 文章分类区块 */
|
||
.articles-section {
|
||
margin-bottom: 48px;
|
||
}
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 20px;
|
||
cursor: pointer;
|
||
}
|
||
.section-icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 12px;
|
||
font-size: 20px;
|
||
}
|
||
.section-icon.litter { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
|
||
.section-icon.fountain { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
|
||
.section-icon.feeder { background: linear-gradient(135deg, #fef3c7, #fde68a); }
|
||
.section-icon.app { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); }
|
||
.section-icon.other { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
|
||
.section-icon.install { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); }
|
||
.section-title {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
flex: 1;
|
||
}
|
||
.section-count {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
background: var(--bg);
|
||
padding: 4px 12px;
|
||
border-radius: 999px;
|
||
}
|
||
.section-toggle {
|
||
color: var(--muted);
|
||
transition: transform 0.3s;
|
||
}
|
||
.section-header.collapsed .section-toggle {
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
/* 文章列表 */
|
||
.article-list {
|
||
display: grid;
|
||
gap: 12px;
|
||
padding-left: 56px;
|
||
}
|
||
.article-list.hidden { display: none; }
|
||
.article-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 16px 20px;
|
||
background: var(--card);
|
||
border-radius: 12px;
|
||
border: 1px solid var(--line);
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
.article-item:hover {
|
||
border-color: var(--primary);
|
||
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.1);
|
||
transform: translateX(4px);
|
||
}
|
||
.article-item svg {
|
||
color: var(--primary);
|
||
flex-shrink: 0;
|
||
}
|
||
.article-title {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
flex: 1;
|
||
}
|
||
.article-arrow {
|
||
color: var(--muted);
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.article-item:hover .article-arrow {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 文章详情页 */
|
||
.article-detail {
|
||
display: none;
|
||
}
|
||
.article-detail.active {
|
||
display: block;
|
||
}
|
||
.article-breadcrumb {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
margin-bottom: 24px;
|
||
}
|
||
.article-breadcrumb a:hover { color: var(--primary); }
|
||
.article-detail-title {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
line-height: 1.4;
|
||
}
|
||
.article-meta {
|
||
display: flex;
|
||
gap: 16px;
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
margin-bottom: 32px;
|
||
padding-bottom: 24px;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.article-content {
|
||
font-size: 16px;
|
||
line-height: 1.8;
|
||
color: #374151;
|
||
}
|
||
.article-content h3 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin: 32px 0 16px;
|
||
color: var(--text);
|
||
}
|
||
.article-content p {
|
||
margin-bottom: 16px;
|
||
}
|
||
.article-content ul, .article-content ol {
|
||
margin-bottom: 16px;
|
||
padding-left: 24px;
|
||
}
|
||
.article-content li {
|
||
margin-bottom: 8px;
|
||
}
|
||
.article-content img {
|
||
max-width: 100%;
|
||
border-radius: 12px;
|
||
margin: 20px 0;
|
||
}
|
||
.article-tip {
|
||
background: var(--primary-weak);
|
||
border-left: 4px solid var(--primary);
|
||
padding: 16px 20px;
|
||
border-radius: 0 12px 12px 0;
|
||
margin: 24px 0;
|
||
}
|
||
.article-tip-title {
|
||
font-weight: 600;
|
||
color: var(--primary);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* 返回按钮 */
|
||
.back-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 10px 16px;
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
background: var(--card);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
margin-bottom: 24px;
|
||
}
|
||
.back-btn:hover {
|
||
border-color: var(--primary);
|
||
color: var(--primary);
|
||
}
|
||
|
||
/* 相关文章 */
|
||
.related-articles {
|
||
margin-top: 48px;
|
||
padding-top: 32px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.related-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
}
|
||
.related-list {
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
.related-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 16px;
|
||
background: var(--card);
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
.related-item:hover {
|
||
background: var(--primary-weak);
|
||
}
|
||
.related-item svg {
|
||
color: var(--primary);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 页脚 */
|
||
.footer {
|
||
background: #1a1f2e;
|
||
color: #9ca3af;
|
||
padding: 40px 24px;
|
||
text-align: center;
|
||
}
|
||
.footer-logo {
|
||
height: 32px;
|
||
margin-bottom: 16px;
|
||
filter: brightness(0) invert(1);
|
||
opacity: 0.8;
|
||
}
|
||
.footer-text {
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* 响应式 */
|
||
@media (max-width: 768px) {
|
||
.search-title { font-size: 24px; }
|
||
.search-input { padding: 14px 20px 14px 48px; font-size: 15px; }
|
||
.article-list { padding-left: 0; margin-top: 16px; }
|
||
.section-header { padding: 12px 16px; background: var(--card); border-radius: 12px; }
|
||
.article-detail-title { font-size: 22px; }
|
||
}
|
||
|
||
/* 列表页隐藏/显示 */
|
||
.articles-list-view { display: block; }
|
||
.articles-list-view.hidden { display: none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar">
|
||
<div class="navbar-inner">
|
||
<a href="index.html" class="navbar-logo">
|
||
<img src="logo.png" alt="Chookoo" />
|
||
</a>
|
||
<a href="index.html" class="navbar-back">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
||
返回首页
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主内容 -->
|
||
<main class="main-content">
|
||
<div class="container">
|
||
<!-- 文章列表视图 -->
|
||
<div class="articles-list-view" id="articlesListView">
|
||
<!-- 搜索区域 -->
|
||
<section class="search-section">
|
||
<h1 class="search-title">帮助中心</h1>
|
||
<p class="search-subtitle">搜索您想了解的问题，或浏览下方分类</p>
|
||
<div class="search-box">
|
||
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
||
<input type="text" class="search-input" id="searchInput" placeholder="搜索问题，如：如何连接WiFi、设备不工作..." />
|
||
<div class="search-results" id="searchResults"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 分类标签 -->
|
||
<div class="category-tabs" id="categoryTabs">
|
||
<div class="category-tab active" data-category="all">全部</div>
|
||
<div class="category-tab" data-category="install">安装指导</div>
|
||
<div class="category-tab" data-category="litter">智能猫厕所</div>
|
||
<div class="category-tab" data-category="fountain">智能饮水机</div>
|
||
<div class="category-tab" data-category="feeder">智能喂食器</div>
|
||
<div class="category-tab" data-category="app">APP使用</div>
|
||
<div class="category-tab" data-category="other">其他问题</div>
|
||
</div>
|
||
|
||
<!-- 文章分类列表 -->
|
||
<div id="articlesContainer"></div>
|
||
</div>
|
||
|
||
<!-- 文章详情视图 -->
|
||
<div class="article-detail" id="articleDetail">
|
||
<button class="back-btn" id="backToList">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
||
返回列表
|
||
</button>
|
||
<div id="articleContent"></div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<img src="logo.png" alt="Chookoo" class="footer-logo" />
|
||
<p class="footer-text">© 2025 宠科智能科技（苏州）有限公司 保留所有权利</p>
|
||
</footer>
|
||
|
||
<script>
|
||
// 视口缩放 - 基于1920px设计稿
|
||
(() => {
|
||
const designWidth = 1920;
|
||
const minWidth = 1280;
|
||
const maxWidth = 2560;
|
||
|
||
function scale() {
|
||
const vw = window.innerWidth;
|
||
let scale = 1;
|
||
|
||
if (vw < minWidth) {
|
||
scale = vw / minWidth;
|
||
} else if (vw > maxWidth) {
|
||
scale = vw / maxWidth;
|
||
} else {
|
||
scale = vw / designWidth;
|
||
}
|
||
|
||
document.body.style.transform = `scale(${scale})`;
|
||
document.body.style.width = `${designWidth}px`;
|
||
}
|
||
|
||
scale();
|
||
window.addEventListener('resize', scale);
|
||
})();
|
||
</script>
|
||
<script>
|
||
// 文章数据
|
||
const articles = [
|
||
// 安装指导
|
||
{
|
||
id: 101,
|
||
category: 'install',
|
||
categoryName: '安装指导',
|
||
title: '智能猫厕所安装指南',
|
||
content: `
|
||
<p>本指南将帮助您正确安装智能猫厕所，请按以下步骤操作：</p>
|
||
<h3>开箱检查</h3>
|
||
<ul>
|
||
<li>主机 × 1</li>
|
||
<li>集便仓 × 1</li>
|
||
<li>电源适配器 × 1</li>
|
||
<li>集便袋（初始装）× 5</li>
|
||
<li>说明书 × 1</li>
|
||
</ul>
|
||
<h3>安装步骤</h3>
|
||
<ol>
|
||
<li><strong>选择位置</strong>：将设备放置在平稳干燥的地面，远离水源和热源，建议距离墙面10cm以上</li>
|
||
<li><strong>安装集便仓</strong>：打开上盖，将集便仓对准卡槽推入到底，听到"咔哒"声表示安装到位</li>
|
||
<li><strong>套入集便袋</strong>：将集便袋套在集便仓口部，确保边缘平整无褶皱</li>
|
||
<li><strong>添加猫砂</strong>：向内桶倒入猫砂，建议用量3-5L，高度不要超过MAX刻度线</li>
|
||
<li><strong>连接电源</strong>：将电源适配器连接到设备，插头插入插座</li>
|
||
<li><strong>开机测试</strong>：长按电源键3秒开机，设备会自动进行一次自检</li>
|
||
</ol>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 注意事项</div>
|
||
<p>首次使用前请撕掉设备上的保护膜，确保传感器表面清洁无遮挡。</p>
|
||
</div>
|
||
`,
|
||
views: 2345,
|
||
date: '2025-01-15'
|
||
},
|
||
{
|
||
id: 102,
|
||
category: 'install',
|
||
categoryName: '安装指导',
|
||
title: '智能饮水机安装指南',
|
||
content: `
|
||
<p>智能饮水机安装简单，只需几个步骤即可完成：</p>
|
||
<h3>开箱检查</h3>
|
||
<ul>
|
||
<li>水箱 × 1</li>
|
||
<li>底座（含水泵）× 1</li>
|
||
<li>滤芯 × 1</li>
|
||
<li>电源适配器 × 1</li>
|
||
<li>说明书 × 1</li>
|
||
</ul>
|
||
<h3>安装步骤</h3>
|
||
<ol>
|
||
<li><strong>清洗部件</strong>：首次使用前，用清水清洗水箱和底座，不要水洗电机部分</li>
|
||
<li><strong>安装滤芯</strong>：将滤芯浸泡5分钟后冲洗，然后安装到水箱内指定位置</li>
|
||
<li><strong>加水</strong>：向水箱加入清水，注意不要超过MAX水位线</li>
|
||
<li><strong>组装</strong>：将水箱放置到底座上，确保对齐卡扣</li>
|
||
<li><strong>连接电源</strong>：将电源适配器连接到底座，插头插入插座</li>
|
||
<li><strong>开机</strong>：短按电源键开机，选择工作模式（持续出水/间歇出水）</li>
|
||
</ol>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 建议水位</div>
|
||
<p>建议水位保持在最低线以上，避免水泵空转影响寿命。</p>
|
||
</div>
|
||
`,
|
||
views: 1876,
|
||
date: '2025-01-14'
|
||
},
|
||
{
|
||
id: 103,
|
||
category: 'install',
|
||
categoryName: '安装指导',
|
||
title: '智能喂食器安装指南',
|
||
content: `
|
||
<p>智能喂食器安装步骤如下：</p>
|
||
<h3>开箱检查</h3>
|
||
<ul>
|
||
<li>粮仓桶 × 1</li>
|
||
<li>底座 × 1</li>
|
||
<li>食盆 × 1</li>
|
||
<li>干燥剂盒 × 1</li>
|
||
<li>电源适配器 × 1</li>
|
||
<li>备用电池仓盖 × 1</li>
|
||
</ul>
|
||
<h3>安装步骤</h3>
|
||
<ol>
|
||
<li><strong>选择位置</strong>：放置在平稳干燥的地面或桌面，远离潮湿环境</li>
|
||
<li><strong>安装食盆</strong>：将食盆对准底座卡槽推入，确保稳固</li>
|
||
<li><strong>装入粮食</strong>：打开粮仓盖，倒入干燥的猫粮/狗粮，注意不要超过MAX刻度</li>
|
||
<li><strong>放入干燥剂</strong>：将干燥剂放入专用盒内，保持粮食干燥</li>
|
||
<li><strong>合上盖子</strong>：确保粮仓盖密封良好</li>
|
||
<li><strong>连接电源</strong>：插入电源适配器，也可安装4节D型电池作为备用电源</li>
|
||
<li><strong>测试出粮</strong>：按手动出粮键，确认出粮正常</li>
|
||
</ol>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 粮食选择</div>
|
||
<p>建议使用直径8-12mm的干粮，过大或过小可能导致出粮不畅。</p>
|
||
</div>
|
||
`,
|
||
views: 1654,
|
||
date: '2025-01-13'
|
||
},
|
||
{
|
||
id: 104,
|
||
category: 'install',
|
||
categoryName: '安装指导',
|
||
title: '设备WiFi配网教程',
|
||
content: `
|
||
<p>所有Chookoo智能设备都支持WiFi连接，配网步骤如下：</p>
|
||
<h3>配网前准备</h3>
|
||
<ul>
|
||
<li>确保设备已通电并开机</li>
|
||
<li>手机连接2.4GHz WiFi网络（不支持5GHz）</li>
|
||
<li>确认WiFi密码正确</li>
|
||
<li>下载并安装Chookoo APP，注册账号</li>
|
||
</ul>
|
||
<h3>配网步骤</h3>
|
||
<ol>
|
||
<li><strong>进入配网模式</strong>：长按设备配网键5秒，直到指示灯快闪</li>
|
||
<li><strong>打开APP</strong>：在APP首页点击右上角"+"号</li>
|
||
<li><strong>选择设备</strong>：在列表中选择要添加的设备类型</li>
|
||
<li><strong>输入WiFi密码</strong>：输入当前手机连接的WiFi密码</li>
|
||
<li><strong>等待配网</strong>：将手机靠近设备，等待30-60秒</li>
|
||
<li><strong>配网成功</strong>：指示灯常亮，APP提示添加成功</li>
|
||
</ol>
|
||
<h3>配网失败排查</h3>
|
||
<ul>
|
||
<li>确认WiFi是2.4GHz频段</li>
|
||
<li>检查WiFi密码是否正确</li>
|
||
<li>确保设备与路由器距离不要太远</li>
|
||
<li>重启设备后重试</li>
|
||
</ul>
|
||
`,
|
||
views: 2134,
|
||
date: '2025-01-12'
|
||
},
|
||
{
|
||
id: 105,
|
||
category: 'install',
|
||
categoryName: '安装指导',
|
||
title: '设备指示灯状态说明',
|
||
content: `
|
||
<p>了解设备指示灯状态，可以帮助您快速判断设备运行情况：</p>
|
||
<h3>智能猫厕所指示灯</h3>
|
||
<ul>
|
||
<li><strong>常亮蓝灯</strong>：正常待机状态</li>
|
||
<li><strong>快闪蓝灯</strong>：正在配网</li>
|
||
<li><strong>慢闪蓝灯</strong>：正在清理中</li>
|
||
<li><strong>红灯常亮</strong>：故障或需要维护（如集便袋已满）</li>
|
||
<li><strong>灯灭</strong>：设备关机或断电</li>
|
||
</ul>
|
||
<h3>智能饮水机指示灯</h3>
|
||
<ul>
|
||
<li><strong>常亮蓝灯</strong>：正常工作</li>
|
||
<li><strong>快闪蓝灯</strong>：正在配网</li>
|
||
<li><strong>红灯闪烁</strong>：缺水提醒</li>
|
||
<li><strong>黄灯常亮</strong>：需要更换滤芯</li>
|
||
</ul>
|
||
<h3>智能喂食器指示灯</h3>
|
||
<ul>
|
||
<li><strong>常亮蓝灯</strong>：正常待机</li>
|
||
<li><strong>快闪蓝灯</strong>：正在配网</li>
|
||
<li><strong>绿灯闪烁</strong>：正在出粮</li>
|
||
<li><strong>红灯常亮</strong>：粮仓缺粮</li>
|
||
</ul>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 提示</div>
|
||
<p>如遇到异常指示灯状态，请先尝试重启设备，如问题仍存在请联系客服。</p>
|
||
</div>
|
||
`,
|
||
views: 1432,
|
||
date: '2025-01-11'
|
||
},
|
||
// 智能猫厕所
|
||
{
|
||
id: 1,
|
||
category: 'litter',
|
||
categoryName: '智能猫厕所',
|
||
title: '智能猫厕所支持哪些类型的猫砂？',
|
||
content: `
|
||
<p>Chookoo智能猫厕所支持多种常见猫砂类型，为了获得最佳使用效果，我们推荐以下猫砂：</p>
|
||
<h3>推荐的猫砂类型</h3>
|
||
<ul>
|
||
<li><strong>豆腐砂</strong>：结团性好，环保可冲厕，是我们的首选推荐</li>
|
||
<li><strong>膨润土砂</strong>：结团性强，但粉尘较多，建议选择低尘产品</li>
|
||
<li><strong>混合砂</strong>：豆腐砂与膨润土混合，兼具两者优点</li>
|
||
<li><strong>活性炭砂</strong>：除臭效果好，适合对气味敏感的家庭</li>
|
||
</ul>
|
||
<h3>不推荐的猫砂类型</h3>
|
||
<ul>
|
||
<li>水晶砂（可能损坏设备）</li>
|
||
<li>纸砂（结团性差）</li>
|
||
<li>松木砂（可能堵塞集便仓）</li>
|
||
</ul>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 小贴士</div>
|
||
<p>建议使用2-3mm粒径的豆腐砂，可以获得最佳的结团效果和过滤效率。</p>
|
||
</div>
|
||
`,
|
||
views: 1234,
|
||
date: '2025-01-15'
|
||
},
|
||
{
|
||
id: 2,
|
||
category: 'litter',
|
||
categoryName: '智能猫厕所',
|
||
title: '如何引导猫咪使用智能猫厕所？',
|
||
content: `
|
||
<p>让猫咪适应智能猫厕所需要一定的耐心，以下是我们的建议步骤：</p>
|
||
<h3>第一步：放置位置</h3>
|
||
<p>将智能猫厕所放在猫咪原来使用猫砂盆附近，保持环境安静，避免放在人来人往的地方。</p>
|
||
<h3>第二步：保持原有猫砂</h3>
|
||
<p>刚开始使用时，建议放入猫咪之前使用的同款猫砂，气味熟悉会让猫咪更有安全感。</p>
|
||
<h3>第三步：关闭自动功能</h3>
|
||
<p>前3-5天建议关闭自动清理功能，让猫咪先适应新的如厕环境。</p>
|
||
<h3>第四步：逐步开启功能</h3>
|
||
<p>当猫咪主动使用后，可以开启自动清理功能，建议设置为静音模式或延时清理。</p>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 小贴士</div>
|
||
<p>如果猫咪抗拒使用，可以在猫砂盆中放入一些猫咪的粪便，气味引导会很有效。</p>
|
||
</div>
|
||
`,
|
||
views: 892,
|
||
date: '2025-01-12'
|
||
},
|
||
{
|
||
id: 3,
|
||
category: 'litter',
|
||
categoryName: '智能猫厕所',
|
||
title: '智能猫厕所显示"设备离线"怎么办？',
|
||
content: `
|
||
<p>设备离线通常是由网络问题导致的，请按以下步骤排查：</p>
|
||
<h3>检查网络连接</h3>
|
||
<ul>
|
||
<li>确认家中WiFi正常工作，可以用手机测试网络</li>
|
||
<li>确保设备位于WiFi信号覆盖范围内</li>
|
||
<li>检查路由器是否设置了设备连接数量限制</li>
|
||
</ul>
|
||
<h3>重启设备</h3>
|
||
<ul>
|
||
<li>长按电源键5秒关闭设备</li>
|
||
<li>等待10秒后重新开机</li>
|
||
<li>观察指示灯是否正常闪烁</li>
|
||
</ul>
|
||
<h3>重新配网</h3>
|
||
<p>如果重启无效，请在APP中删除设备，重新进行配网操作。</p>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 注意事项</div>
|
||
<p>请确保使用2.4GHz WiFi网络，设备暂不支持5GHz网络。</p>
|
||
</div>
|
||
`,
|
||
views: 756,
|
||
date: '2025-01-10'
|
||
},
|
||
{
|
||
id: 4,
|
||
category: 'litter',
|
||
categoryName: '智能猫厕所',
|
||
title: '多久需要更换一次集便袋？',
|
||
content: `
|
||
<p>集便袋的更换频率取决于猫咪数量和大小：</p>
|
||
<h3>建议更换周期</h3>
|
||
<ul>
|
||
<li><strong>1只猫</strong>：约7-10天更换一次</li>
|
||
<li><strong>2只猫</strong>：约5-7天更换一次</li>
|
||
<li><strong>3只及以上</strong>：约3-5天更换一次</li>
|
||
</ul>
|
||
<h3>更换提示</h3>
|
||
<p>APP会在集便袋即将装满时推送提醒，建议在收到提醒后及时更换，避免影响设备正常工作。</p>
|
||
<h3>更换步骤</h3>
|
||
<ol>
|
||
<li>打开设备上盖</li>
|
||
<li>取出集便仓</li>
|
||
<li>将集便袋打结密封后丢弃</li>
|
||
<li>套上新的集便袋</li>
|
||
<li>将集便仓放回设备</li>
|
||
</ol>
|
||
`,
|
||
views: 623,
|
||
date: '2025-01-08'
|
||
},
|
||
|
||
// 智能饮水机
|
||
{
|
||
id: 5,
|
||
category: 'fountain',
|
||
categoryName: '智能饮水机',
|
||
title: '饮水机多久需要更换滤芯？',
|
||
content: `
|
||
<p>为了保证水质和宠物健康，建议定期更换滤芯：</p>
|
||
<h3>更换周期</h3>
|
||
<ul>
|
||
<li><strong>正常使用</strong>：每30天更换一次</li>
|
||
<li><strong>多宠家庭</strong>：每20-25天更换一次</li>
|
||
<li><strong>水质较硬地区</strong>：每20天更换一次</li>
|
||
</ul>
|
||
<h3>滤芯更换提示</h3>
|
||
<p>APP会记录滤芯使用时间，并在需要更换时推送提醒。您也可以在APP中手动重置滤芯计时。</p>
|
||
<h3>更换步骤</h3>
|
||
<ol>
|
||
<li>关闭电源，取出水箱</li>
|
||
<li>取出旧滤芯</li>
|
||
<li>将新滤芯浸泡5分钟后冲洗</li>
|
||
<li>安装新滤芯</li>
|
||
<li>在APP中重置滤芯计时</li>
|
||
</ol>
|
||
`,
|
||
views: 945,
|
||
date: '2025-01-14'
|
||
},
|
||
{
|
||
id: 6,
|
||
category: 'fountain',
|
||
categoryName: '智能饮水机',
|
||
title: '饮水机水泵噪音大怎么办？',
|
||
content: `
|
||
<p>水泵噪音可能由以下原因造成：</p>
|
||
<h3>水位过低</h3>
|
||
<p>请检查水箱水量，水量不足会导致水泵空转产生噪音。建议保持水位在最低线以上。</p>
|
||
<h3>水泵内有杂质</h3>
|
||
<ul>
|
||
<li>关闭电源，取出水泵</li>
|
||
<li>用清水冲洗水泵进水口</li>
|
||
<li>检查是否有毛发或杂物堵塞</li>
|
||
<li>清理后重新安装</li>
|
||
</ul>
|
||
<h3>放置不平</h3>
|
||
<p>确保饮水机放置在平整的地面上，可以垫一块软垫减少共振。</p>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 建议</div>
|
||
<p>如果清理后噪音仍然很大，可能是水泵老化，请联系客服申请更换。</p>
|
||
</div>
|
||
`,
|
||
views: 567,
|
||
date: '2025-01-11'
|
||
},
|
||
{
|
||
id: 7,
|
||
category: 'fountain',
|
||
categoryName: '智能饮水机',
|
||
title: '如何清洗饮水机？',
|
||
content: `
|
||
<p>定期清洗可以保证水质卫生，建议每周清洗一次：</p>
|
||
<h3>清洗步骤</h3>
|
||
<ol>
|
||
<li>关闭电源，拔掉插头</li>
|
||
<li>倒掉剩余的水</li>
|
||
<li>拆解所有可拆卸部件</li>
|
||
<li>用温和的洗涤剂和软刷清洗</li>
|
||
<li>用清水彻底冲洗</li>
|
||
<li>晾干后重新组装</li>
|
||
</ol>
|
||
<h3>注意事项</h3>
|
||
<ul>
|
||
<li>不要使用强酸强碱清洗剂</li>
|
||
<li>电机部分不要浸水</li>
|
||
<li>清洗滤芯时只需用清水冲洗，不要使用洗涤剂</li>
|
||
</ul>
|
||
`,
|
||
views: 432,
|
||
date: '2025-01-09'
|
||
},
|
||
|
||
// 智能喂食器
|
||
{
|
||
id: 8,
|
||
category: 'feeder',
|
||
categoryName: '智能喂食器',
|
||
title: '喂食器出粮不准确怎么办？',
|
||
content: `
|
||
<p>出粮不准确可能由以下原因导致：</p>
|
||
<h3>粮仓问题</h3>
|
||
<ul>
|
||
<li>检查粮仓是否有粮食结块或受潮</li>
|
||
<li>确保粮食干燥，颗粒大小均匀</li>
|
||
<li>不要将不同大小的粮食混合使用</li>
|
||
</ul>
|
||
<h3>出粮口堵塞</h3>
|
||
<ul>
|
||
<li>关闭电源</li>
|
||
<li>打开粮仓检查出粮口</li>
|
||
<li>清理可能堵塞的粮食碎屑</li>
|
||
<li>用干布擦拭出粮口周围</li>
|
||
</ul>
|
||
<h3>校准设置</h3>
|
||
<p>在APP中可以设置出粮校准，根据实际出粮量微调参数。</p>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 粮食选择建议</div>
|
||
<p>建议使用直径8-12mm的干粮，过大或过小的粮食都可能导致出粮不准确。</p>
|
||
</div>
|
||
`,
|
||
views: 678,
|
||
date: '2025-01-13'
|
||
},
|
||
{
|
||
id: 9,
|
||
category: 'feeder',
|
||
categoryName: '智能喂食器',
|
||
title: '断网后喂食器还能正常工作吗？',
|
||
content: `
|
||
<p>可以！智能喂食器支持离线工作：</p>
|
||
<h3>离线功能</h3>
|
||
<ul>
|
||
<li>已设置的定时喂食计划会正常执行</li>
|
||
<li>手动按键出粮功能正常使用</li>
|
||
<li>设备会记录喂食日志</li>
|
||
</ul>
|
||
<h3>离线限制</h3>
|
||
<ul>
|
||
<li>无法远程控制出粮</li>
|
||
<li>无法实时查看设备状态</li>
|
||
<li>不会收到低粮提醒推送</li>
|
||
</ul>
|
||
<h3>恢复联网后</h3>
|
||
<p>设备重新联网后，会自动同步离线期间的喂食记录到APP。</p>
|
||
`,
|
||
views: 534,
|
||
date: '2025-01-07'
|
||
},
|
||
{
|
||
id: 10,
|
||
category: 'feeder',
|
||
categoryName: '智能喂食器',
|
||
title: '如何设置喂食计划？',
|
||
content: `
|
||
<p>在APP中设置喂食计划非常简单：</p>
|
||
<h3>创建喂食计划</h3>
|
||
<ol>
|
||
<li>打开Chookoo APP，选择您的喂食器设备</li>
|
||
<li>点击"喂食计划"</li>
|
||
<li>点击"添加计划"</li>
|
||
<li>设置喂食时间和出粮份数</li>
|
||
<li>选择重复周期（每天/指定星期）</li>
|
||
<li>点击保存</li>
|
||
</ol>
|
||
<h3>支持的喂食模式</h3>
|
||
<ul>
|
||
<li><strong>定时喂食</strong>：在指定时间自动出粮</li>
|
||
<li><strong>智能喂食</strong>：根据宠物进食习惯自动调整</li>
|
||
<li><strong>手动加餐</strong>：随时在APP中点击出粮</li>
|
||
</ul>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 建议</div>
|
||
<p>建议设置多个少量喂食，模拟自然进食习惯，有利于宠物消化。</p>
|
||
</div>
|
||
`,
|
||
views: 789,
|
||
date: '2025-01-06'
|
||
},
|
||
|
||
// APP使用
|
||
{
|
||
id: 11,
|
||
category: 'app',
|
||
categoryName: 'APP使用',
|
||
title: '如何注册Chookoo账号？',
|
||
content: `
|
||
<p>注册Chookoo账号只需几个简单步骤：</p>
|
||
<h3>注册流程</h3>
|
||
<ol>
|
||
<li>下载并打开Chookoo APP</li>
|
||
<li>点击"注册账号"</li>
|
||
<li>输入手机号码</li>
|
||
<li>获取并输入验证码</li>
|
||
<li>设置密码（8-20位，包含字母和数字）</li>
|
||
<li>完成注册</li>
|
||
</ol>
|
||
<h3>其他注册方式</h3>
|
||
<ul>
|
||
<li>微信一键登录</li>
|
||
<li>Apple ID登录（iOS）</li>
|
||
</ul>
|
||
`,
|
||
views: 1234,
|
||
date: '2025-01-15'
|
||
},
|
||
{
|
||
id: 12,
|
||
category: 'app',
|
||
categoryName: 'APP使用',
|
||
title: '如何添加设备到APP？',
|
||
content: `
|
||
<p>添加新设备的步骤：</p>
|
||
<h3>准备工作</h3>
|
||
<ul>
|
||
<li>确保设备已通电</li>
|
||
<li>手机连接2.4GHz WiFi</li>
|
||
<li>知道WiFi密码</li>
|
||
</ul>
|
||
<h3>添加步骤</h3>
|
||
<ol>
|
||
<li>打开APP，点击右上角"+"号</li>
|
||
<li>选择要添加的设备类型</li>
|
||
<li>确认设备指示灯正在快闪</li>
|
||
<li>输入WiFi密码</li>
|
||
<li>等待配网完成（约30秒）</li>
|
||
<li>设置设备名称和房间</li>
|
||
</ol>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 配网失败？</div>
|
||
<p>如果配网失败，请确保WiFi是2.4GHz频段，并且设备与路由器距离不要太远。</p>
|
||
</div>
|
||
`,
|
||
views: 876,
|
||
date: '2025-01-10'
|
||
},
|
||
{
|
||
id: 13,
|
||
category: 'app',
|
||
categoryName: 'APP使用',
|
||
title: '如何分享设备给家人？',
|
||
content: `
|
||
<p>您可以将设备分享给家人，让他们也能控制设备：</p>
|
||
<h3>分享步骤</h3>
|
||
<ol>
|
||
<li>打开APP，进入设备详情页</li>
|
||
<li>点击右上角设置图标</li>
|
||
<li>选择"设备分享"</li>
|
||
<li>输入家人的Chookoo账号（手机号）</li>
|
||
<li>选择分享权限（完全控制/仅查看）</li>
|
||
<li>点击确认发送邀请</li>
|
||
</ol>
|
||
<h3>接受分享</h3>
|
||
<p>家人会在APP中收到邀请通知，点击接受后即可看到该设备。</p>
|
||
<h3>权限说明</h3>
|
||
<ul>
|
||
<li><strong>完全控制</strong>：可以控制设备、修改设置</li>
|
||
<li><strong>仅查看</strong>：只能查看设备状态，不能操作</li>
|
||
</ul>
|
||
`,
|
||
views: 654,
|
||
date: '2025-01-08'
|
||
},
|
||
|
||
// 其他问题
|
||
{
|
||
id: 14,
|
||
category: 'other',
|
||
categoryName: '其他问题',
|
||
title: '产品保修政策是什么？',
|
||
content: `
|
||
<p>Chookoo产品享有以下保修服务：</p>
|
||
<h3>保修期限</h3>
|
||
<ul>
|
||
<li><strong>主机</strong>：1年保修</li>
|
||
<li><strong>配件</strong>（滤芯、集便袋等）：不在保修范围内</li>
|
||
</ul>
|
||
<h3>保修范围</h3>
|
||
<ul>
|
||
<li>非人为损坏的性能故障</li>
|
||
<li>正常使用情况下的零部件损坏</li>
|
||
<li>制造工艺缺陷</li>
|
||
</ul>
|
||
<h3>不在保修范围内</h3>
|
||
<ul>
|
||
<li>人为损坏、进水、摔落</li>
|
||
<li>私自拆机维修</li>
|
||
<li>使用非官方配件导致的损坏</li>
|
||
<li>超过保修期限</li>
|
||
</ul>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 延保服务</div>
|
||
<p>购买延保服务可享受2年保修，详情请咨询客服。</p>
|
||
</div>
|
||
`,
|
||
views: 987,
|
||
date: '2025-01-14'
|
||
},
|
||
{
|
||
id: 15,
|
||
category: 'other',
|
||
categoryName: '其他问题',
|
||
title: '如何联系售后服务？',
|
||
content: `
|
||
<p>您可以通过以下方式联系我们：</p>
|
||
<h3>在线客服</h3>
|
||
<p>在APP中点击"我的" > "帮助与反馈" > "在线客服"，工作时间9:00-21:00。</p>
|
||
<h3>客服热线</h3>
|
||
<p>400-888-8888（工作时间：周一至周日 9:00-21:00）</p>
|
||
<h3>邮箱</h3>
|
||
<p>support@chookoo.com</p>
|
||
<h3>微信公众号</h3>
|
||
<p>关注"Chookoo宠科"公众号，在菜单中选择"售后服务"。</p>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 建议</div>
|
||
<p>联系客服时请准备好订单号或设备SN码，以便我们更快为您服务。</p>
|
||
</div>
|
||
`,
|
||
views: 876,
|
||
date: '2025-01-12'
|
||
},
|
||
{
|
||
id: 16,
|
||
category: 'other',
|
||
categoryName: '其他问题',
|
||
title: '在哪里可以购买Chookoo产品？',
|
||
content: `
|
||
<p>您可以通过以下渠道购买Chookoo产品：</p>
|
||
<h3>官方渠道</h3>
|
||
<ul>
|
||
<li>Chookoo官方网站</li>
|
||
<li>Chookoo天猫旗舰店</li>
|
||
<li>Chookoo京东旗舰店</li>
|
||
<li>Chookoo微信小程序</li>
|
||
</ul>
|
||
<h3>线下渠道</h3>
|
||
<ul>
|
||
<li>宠物连锁店</li>
|
||
<li>部分家电卖场</li>
|
||
</ul>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 温馨提示</div>
|
||
<p>建议通过官方渠道购买，以确保产品质量和售后服务保障。</p>
|
||
</div>
|
||
`,
|
||
views: 765,
|
||
date: '2025-01-10'
|
||
}
|
||
];
|
||
|
||
// 页面类型
|
||
const PAGE_TYPE = 'help';
|
||
|
||
// 分类配置
|
||
const categories = {
|
||
all: { name: '全部', icon: '📋' },
|
||
install: { name: '安装指导', icon: '🔧' },
|
||
litter: { name: '智能猫厕所', icon: '🐱' },
|
||
fountain: { name: '智能饮水机', icon: '💧' },
|
||
feeder: { name: '智能喂食器', icon: '🍽️' },
|
||
app: { name: 'APP使用', icon: '📱' },
|
||
other: { name: '其他问题', icon: '❓' }
|
||
};
|
||
|
||
// 当前状态
|
||
let currentCategory = 'all';
|
||
let collapsedSections = {};
|
||
|
||
// 初始化
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 从 localStorage 加载文章数据（如果有）
|
||
const savedArticles = localStorage.getItem('chookoo_help_articles');
|
||
if (savedArticles) {
|
||
try {
|
||
const parsed = JSON.parse(savedArticles);
|
||
if (Array.isArray(parsed) && parsed.length > 0) {
|
||
// 合并默认文章和管理员添加的文章
|
||
const defaultIds = articles.map(a => a.id);
|
||
const customArticles = parsed.filter(a => !defaultIds.includes(a.id));
|
||
articles.push(...customArticles);
|
||
}
|
||
} catch (e) {
|
||
console.error('加载文章数据失败:', e);
|
||
}
|
||
}
|
||
|
||
// 解析 URL 参数
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const category = urlParams.get('category');
|
||
const articleId = urlParams.get('article');
|
||
const searchQuery = urlParams.get('search');
|
||
|
||
// 处理 URL 参数
|
||
if (articleId) {
|
||
showArticle(parseInt(articleId));
|
||
} else if (category && categories[category]) {
|
||
currentCategory = category;
|
||
// 更新分类标签高亮
|
||
document.querySelectorAll('.category-tab').forEach(tab => {
|
||
tab.classList.toggle('active', tab.dataset.category === category);
|
||
});
|
||
}
|
||
|
||
if (searchQuery) {
|
||
document.getElementById('searchInput').value = searchQuery;
|
||
document.getElementById('searchInput').dispatchEvent(new Event('input'));
|
||
}
|
||
|
||
renderArticles();
|
||
initSearch();
|
||
initCategoryTabs();
|
||
initBackButton();
|
||
});
|
||
|
||
// 渲染文章列表
|
||
function renderArticles() {
|
||
const container = document.getElementById('articlesContainer');
|
||
let html = '';
|
||
|
||
const categoryOrder = ['install', 'litter', 'fountain', 'feeder', 'app', 'other'];
|
||
|
||
categoryOrder.forEach(cat => {
|
||
if (currentCategory !== 'all' && currentCategory !== cat) return;
|
||
|
||
const catArticles = articles.filter(a => a.category === cat && (!a.pageType || a.pageType === PAGE_TYPE));
|
||
if (catArticles.length === 0) return;
|
||
|
||
const isCollapsed = collapsedSections[cat];
|
||
const catInfo = categories[cat];
|
||
|
||
html += `
|
||
<section class="articles-section" data-category="${cat}">
|
||
<div class="section-header ${isCollapsed ? 'collapsed' : ''}" onclick="toggleSection('${cat}')">
|
||
<div class="section-icon ${cat}">${catInfo.icon}</div>
|
||
<h2 class="section-title">${catInfo.name}</h2>
|
||
<span class="section-count">${catArticles.length} 篇文章</span>
|
||
<svg class="section-toggle" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
|
||
</div>
|
||
<div class="article-list ${isCollapsed ? 'hidden' : ''}">
|
||
${catArticles.map(article => `
|
||
<div class="article-item" onclick="showArticle(${article.id})">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
||
<span class="article-title">${article.title}</span>
|
||
<svg class="article-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
</section>
|
||
`;
|
||
});
|
||
|
||
container.innerHTML = html;
|
||
}
|
||
|
||
// 切换分类折叠
|
||
function toggleSection(cat) {
|
||
collapsedSections[cat] = !collapsedSections[cat];
|
||
renderArticles();
|
||
}
|
||
|
||
// 显示文章详情
|
||
function showArticle(id) {
|
||
const article = articles.find(a => a.id === id);
|
||
if (!article) return;
|
||
|
||
const content = document.getElementById('articleContent');
|
||
content.innerHTML = `
|
||
<div class="article-breadcrumb">
|
||
<a href="#" onclick="backToList(); return false;">帮助中心</a>
|
||
<span>/</span>
|
||
<span>${article.categoryName}</span>
|
||
</div>
|
||
<h1 class="article-detail-title">${article.title}</h1>
|
||
<div class="article-meta">
|
||
<span>📅 ${article.date}</span>
|
||
<span>👁️ ${article.views} 次浏览</span>
|
||
</div>
|
||
<div class="article-content">
|
||
${article.content}
|
||
</div>
|
||
${getRelatedArticles(id)}
|
||
`;
|
||
|
||
document.getElementById('articlesListView').classList.add('hidden');
|
||
document.getElementById('articleDetail').classList.add('active');
|
||
window.scrollTo(0, 0);
|
||
}
|
||
|
||
// 获取相关文章
|
||
function getRelatedArticles(currentId) {
|
||
const current = articles.find(a => a.id === currentId);
|
||
const related = articles
|
||
.filter(a => a.category === current.category && a.id !== currentId)
|
||
.slice(0, 3);
|
||
|
||
if (related.length === 0) return '';
|
||
|
||
return `
|
||
<div class="related-articles">
|
||
<h3 class="related-title">相关文章</h3>
|
||
<div class="related-list">
|
||
${related.map(a => `
|
||
<div class="related-item" onclick="showArticle(${a.id})">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||
<span>${a.title}</span>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 返回列表
|
||
function backToList() {
|
||
document.getElementById('articleDetail').classList.remove('active');
|
||
document.getElementById('articlesListView').classList.remove('hidden');
|
||
}
|
||
|
||
// 初始化返回按钮
|
||
function initBackButton() {
|
||
document.getElementById('backToList').addEventListener('click', backToList);
|
||
}
|
||
|
||
// 初始化搜索
|
||
function initSearch() {
|
||
const input = document.getElementById('searchInput');
|
||
const results = document.getElementById('searchResults');
|
||
|
||
input.addEventListener('input', function() {
|
||
const query = this.value.trim().toLowerCase();
|
||
|
||
if (query.length < 2) {
|
||
results.classList.remove('active');
|
||
return;
|
||
}
|
||
|
||
const matched = articles.filter(a =>
|
||
(!a.pageType || a.pageType === PAGE_TYPE) &&
|
||
(a.title.toLowerCase().includes(query) ||
|
||
a.content.toLowerCase().includes(query))
|
||
);
|
||
|
||
if (matched.length === 0) {
|
||
results.innerHTML = '<div class="search-no-result">未找到相关文章</div>';
|
||
} else {
|
||
results.innerHTML = matched.slice(0, 8).map(a => `
|
||
<div class="search-result-item" onclick="showArticle(${a.id})">
|
||
<div class="search-result-title">${a.title}</div>
|
||
<div class="search-result-category">${a.categoryName}</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
results.classList.add('active');
|
||
});
|
||
|
||
// 点击外部关闭搜索结果
|
||
document.addEventListener('click', function(e) {
|
||
if (!e.target.closest('.search-box')) {
|
||
results.classList.remove('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 初始化分类标签
|
||
function initCategoryTabs() {
|
||
document.querySelectorAll('.category-tab').forEach(tab => {
|
||
tab.addEventListener('click', function() {
|
||
document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
|
||
this.classList.add('active');
|
||
currentCategory = this.dataset.category;
|
||
renderArticles();
|
||
});
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|