<?php
/**
 * 芋头CMS
 * ============================================================================
 * 版权所有 2016-2028 沅陵县乌托邦网络服务有限公司，并保留所有权利。
 * 网站地址: http://www.yutoucms.cn
 * ----------------------------------------------------------------------------
 * 如果商业用途务必到官方购买正版授权, 以免引起不必要的法律纠纷.
 * ============================================================================
 * Author: 芋头 <mxgsf@qq.com>
 * Date: 2026-5-30
 */
?>
<div class="page-container fade-in">
    <div class="page-header">
        <div class="page-title">
            <div class="page-icon">
                <svg style="width:22px;height:22px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
                    <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
                </svg>
            </div>
            <div>
                <h1>使用帮助中心</h1>
                <p style="font-size:12px;color:var(--gray-500);margin:0;">后台和前台常用操作说明，适合管理员和普通使用人员查看</p>
            </div>
        </div>
    </div>

    <style>
    .help-layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 18px;
        align-items: start;
    }
    .help-nav,
    .help-panel,
    .help-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .help-nav {
        position: sticky;
        top: 20px;
        padding: 16px 12px;
    }
    .help-nav-title {
        font-size: 15px;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 10px 8px;
    }
    .help-nav a {
        display: block;
        padding: 9px 12px;
        border-radius: 10px;
        color: #334155;
        text-decoration: none;
        font-size: 13px;
        margin-bottom: 4px;
    }
    .help-nav a:hover {
        background: #eff6ff;
        color: #2563eb;
    }
    .help-nav .sub {
        padding-left: 20px;
        font-size: 12px;
        color: #64748b;
    }
    .help-panel {
        padding: 18px;
    }
    .help-intro {
        background: linear-gradient(135deg, #eff6ff, #dbeafe);
        border: 1px solid #bfdbfe;
        color: #1e40af;
        border-radius: 14px;
        padding: 16px 18px;
        margin-bottom: 16px;
        font-size: 13px;
        line-height: 1.8;
    }
    .help-section {
        margin-bottom: 16px;
    }
    .help-section:last-child {
        margin-bottom: 0;
    }
    .help-section-head {
        padding: 16px 18px;
        border-radius: 14px 14px 0 0;
        background: linear-gradient(135deg, #fff7ed, #ffedd5);
        border: 1px solid #fed7aa;
        border-bottom: none;
    }
    .help-section-head h2 {
        margin: 0;
        font-size: 20px;
        color: #9a3412;
    }
    .help-section-head p {
        margin: 6px 0 0;
        font-size: 13px;
        color: #9a3412;
    }
    .help-card {
        border-radius: 0 0 14px 14px;
        overflow: hidden;
    }
    .help-step {
        padding: 16px 18px;
        border-bottom: 1px solid #f1f5f9;
        display: grid;
        grid-template-columns: 90px 1fr;
        gap: 14px;
        align-items: start;
    }
    .help-step:last-child {
        border-bottom: none;
    }
    .help-step-no {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        padding: 0 14px;
        border-radius: 999px;
        background: #2563eb;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }
    .help-step h3 {
        margin: 0 0 6px;
        font-size: 15px;
        color: #0f172a;
    }
    .help-step p {
        margin: 0 0 8px;
        font-size: 13px;
        color: #475569;
        line-height: 1.8;
    }
    .help-step ul {
        margin: 0;
        padding-left: 18px;
        color: #64748b;
        font-size: 13px;
    }
    .help-step li {
        margin: 5px 0;
    }
    .help-note {
        margin-top: 10px;
        display: inline-block;
        background: #fffbeb;
        color: #b45309;
        border: 1px solid #fde68a;
        border-radius: 8px;
        padding: 8px 10px;
        font-size: 12px;
    }
    @media (max-width: 980px) {
        .help-layout {
            grid-template-columns: 1fr;
        }
        .help-nav {
            position: static;
        }
    }
    @media (max-width: 720px) {
        .help-step {
            grid-template-columns: 1fr;
        }
    }
    </style>

    <div class="help-layout">
        <div class="help-nav">
            <div class="help-nav-title">目录导航</div>
            <a href="#help-admin">后台操作</a>
            <a class="sub" href="#help-admin-login">后台登录</a>
            <a class="sub" href="#help-admin-site">网站设置</a>
            <a class="sub" href="#help-admin-channel">栏目管理</a>
            <a class="sub" href="#help-admin-article">文章发布</a>
            <a class="sub" href="#help-admin-product">产品发布</a>
            <a class="sub" href="#help-admin-order">订单处理</a>
            <a class="sub" href="#help-admin-template">模板切换</a>
            <a class="sub" href="#help-admin-auth">授权检查</a>
            <a href="#help-front">前台使用</a>
            <a class="sub" href="#help-front-browse">浏览网站</a>
            <a class="sub" href="#help-front-message">提交留言</a>
            <a class="sub" href="#help-front-register">会员注册登录</a>
            <a class="sub" href="#help-front-buy">购物下单</a>
            <a class="sub" href="#help-front-recharge">充值余额</a>
        </div>

        <div class="help-panel">
            <div class="help-intro">
                <strong>说明：</strong> 这是一份后台内嵌的简明帮助中心，适合日常查看常用操作。如果需要更完整的步骤说明，请结合完整用户手册和详细操作步骤文档一起使用。
            </div>

            <div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px;">
                <a href="/docs/芋头CMS用户使用手册.html" target="_blank" style="display:block;text-decoration:none;background:#fff7ed;border:1px solid #fed7aa;border-radius:14px;padding:16px;color:#9a3412;">
                    <div style="font-size:14px;font-weight:700;margin-bottom:6px;">完整用户手册</div>
                    <div style="font-size:12px;line-height:1.7;">适合客户阅读、培训和打印导出 PDF。</div>
                </a>
                <a href="/docs/芋头CMS后台与前台详细操作步骤.html" target="_blank" style="display:block;text-decoration:none;background:#eff6ff;border:1px solid #bfdbfe;border-radius:14px;padding:16px;color:#1d4ed8;">
                    <div style="font-size:14px;font-weight:700;margin-bottom:6px;">详细操作步骤</div>
                    <div style="font-size:12px;line-height:1.7;">从第一步开始，查看后台和前台的完整流程。</div>
                </a>
                <a href="/docs/功能清单_版本对比_价格说明.html" target="_blank" style="display:block;text-decoration:none;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:14px;padding:16px;color:#166534;">
                    <div style="font-size:14px;font-weight:700;margin-bottom:6px;">版本与价格说明</div>
                    <div style="font-size:12px;line-height:1.7;">查看免费版、基础版、专业版的功能差异与价格。</div>
                </a>
            </div>

            <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px;">
                <a href="/docs/芋头CMS产品介绍.html" target="_blank" style="display:block;text-decoration:none;background:#faf5ff;border:1px solid #ddd6fe;border-radius:14px;padding:16px;color:#6d28d9;">
                    <div style="font-size:14px;font-weight:700;margin-bottom:6px;">产品介绍页</div>
                    <div style="font-size:12px;line-height:1.7;">适合发客户看，快速了解系统价值和适用场景。</div>
                </a>
                <a href="/docs/芋头CMS客户培训版PPT文案.md" target="_blank" style="display:block;text-decoration:none;background:#fffef2;border:1px solid #fde68a;border-radius:14px;padding:16px;color:#a16207;">
                    <div style="font-size:14px;font-weight:700;margin-bottom:6px;">客户培训版 PPT 文案</div>
                    <div style="font-size:12px;line-height:1.7;">可直接拿去做培训课件、演示稿和交付讲解材料。</div>
                </a>
            </div>

            <div class="help-section" id="help-admin">
                <div class="help-section-head">
                    <h2>后台操作</h2>
                    <p>适合管理员和负责维护网站内容的使用人员</p>
                </div>
                <div class="help-card">
                    <div class="help-step" id="help-admin-login">
                        <div class="help-step-no">第 1 步</div>
                        <div>
                            <h3>登录后台</h3>
                            <p>打开后台登录地址，输入管理员账号和密码，点击登录后进入后台首页。</p>
                            <ul>
                                <li>常见后台地址：`您的域名/admin/login.php`</li>
                                <li>登录成功后通常会看到左侧菜单和系统概览页</li>
                            </ul>
                        </div>
                    </div>
                    <div class="help-step" id="help-admin-site">
                        <div class="help-step-no">第 2 步</div>
                        <div>
                            <h3>先设置网站基础信息</h3>
                            <p>进入“网站设置”，优先完善网站名称、域名、LOGO、电话、地址和 SEO 信息。</p>
                            <ul>
                                <li>保存后刷新前台，检查标题、LOGO 和联系方式是否生效</li>
                            </ul>
                        </div>
                    </div>
                    <div class="help-step" id="help-admin-channel">
                        <div class="help-step-no">第 3 步</div>
                        <div>
                            <h3>创建网站栏目</h3>
                            <p>进入“栏目管理”，新增新闻资讯、产品中心、关于我们、案例展示、视频中心、招聘信息等栏目，并按用途设置对应模型。</p>
                            <ul>
                                <li>新闻资讯：文章模型</li>
                                <li>产品中心：产品模型</li>
                                <li>关于我们：单页模型</li>
                                <li>案例展示：图集模型</li>
                            </ul>
                        </div>
                    </div>
                    <div class="help-step" id="help-admin-article">
                        <div class="help-step-no">第 4 步</div>
                        <div>
                            <h3>发布文章和产品</h3>
                            <p>进入“文章管理”发布新闻资讯，进入“产品管理”发布产品信息。填写标题、栏目、简介、正文、图片等内容后保存。</p>
                            <ul>
                                <li>文章适合发布新闻、公告、资讯</li>
                                <li>产品适合展示图片、价格、参数和详情说明</li>
                            </ul>
                        </div>
                    </div>
                    <div class="help-step" id="help-admin-product">
                        <div class="help-step-no">第 5 步</div>
                        <div>
                            <h3>补充单页、图集、招聘和留言</h3>
                            <p>单页用于关于我们、联系我们；图集用于案例展示；招聘用于岗位发布；留言管理用于查看客户咨询。</p>
                        </div>
                    </div>
                    <div class="help-step" id="help-admin-order">
                        <div class="help-step-no">第 6 步</div>
                        <div>
                            <h3>查看会员和处理订单</h3>
                            <p>如网站启用了会员和订单功能，可在“会员管理”和“订单管理”中查看用户资料、订单状态、支付情况和发货信息。</p>
                            <ul>
                                <li>待付款订单：等待用户支付或手动取消</li>
                                <li>已付款订单：准备发货</li>
                                <li>已发货订单：等待确认</li>
                            </ul>
                        </div>
                    </div>
                    <div class="help-step" id="help-admin-template">
                        <div class="help-step-no">第 7 步</div>
                        <div>
                            <h3>切换前台模板</h3>
                            <p>进入“模板中心”选择并启用模板，然后刷新前台检查首页、列表页和详情页显示是否正常。</p>
                        </div>
                    </div>
                    <div class="help-step" id="help-admin-auth">
                        <div class="help-step-no">第 8 步</div>
                        <div>
                            <h3>检查授权和备份数据库</h3>
                            <p>进入“授权信息”查看当前版本、授权 KEY 和绑定域名；进入“数据库”进行备份，建议在升级或大改前先备份。</p>
                            <div class="help-note">提示：如果授权 KEY 已失效或被删除，系统会自动恢复为免费版。</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="help-section" id="help-front">
                <div class="help-section-head">
                    <h2>前台使用</h2>
                    <p>适合普通访客、会员用户和需要熟悉前台流程的管理人员</p>
                </div>
                <div class="help-card">
                    <div class="help-step" id="help-front-browse">
                        <div class="help-step-no">前台 1</div>
                        <div>
                            <h3>浏览网站内容</h3>
                            <p>打开网站首页后，可通过导航查看关于我们、新闻资讯、产品中心、案例展示、视频中心、招聘信息和在线留言等页面。</p>
                        </div>
                    </div>
                    <div class="help-step" id="help-front-message">
                        <div class="help-step-no">前台 2</div>
                        <div>
                            <h3>提交在线留言</h3>
                            <p>进入“在线留言”页面，填写姓名、电话、标题和留言内容后提交，管理员会在后台留言管理中查看。</p>
                        </div>
                    </div>
                    <div class="help-step" id="help-front-register">
                        <div class="help-step-no">前台 3</div>
                        <div>
                            <h3>会员注册和登录</h3>
                            <p>点击网站顶部“注册”或“登录”，完成账号注册后即可进入会员中心，查看资料、订单、下载记录和财务明细。</p>
                        </div>
                    </div>
                    <div class="help-step" id="help-front-buy">
                        <div class="help-step-no">前台 4</div>
                        <div>
                            <h3>购物车和下单流程</h3>
                            <p>进入产品详情页后可加入购物车，确认商品和数量后结算，填写收货信息并选择支付方式完成下单。</p>
                            <ul>
                                <li>可用支付方式以网站当前设置为准</li>
                                <li>下单成功后可在“我的订单”中查看状态</li>
                            </ul>
                        </div>
                    </div>
                    <div class="help-step" id="help-front-recharge">
                        <div class="help-step-no">前台 5</div>
                        <div>
                            <h3>充值余额</h3>
                            <p>登录会员中心后，进入“充值中心”，选择金额并完成支付，支付成功后可返回查看余额是否更新。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
