任务 #1 — 做一个白虎群发的tg助手的说明文档

任务详情 completed

做一个白虎群发的tg助手的说明文档

任务内容

这是对标网站https://docs.tgcaihong.com/，不要抄内容，就抄这个网站结构，我后面会在后台增加内容
要求有独立的发内容后台

AI 执行结果

任务信息

任务 ID #1

创建时间 2026-05-10 12:09:24

更新时间 2026-05-10 12:24:27

状态 completed

状态流转

pending

running

completed ← 当前

failed

操作

写入结果

# 白虎TG助手 — 说明文档

> 以下为完整的文档站结构 + 独立发内容后台的实现方案，内容留白供你后台填充。

---

## 一、文档站结构设计

参考目标站结构，规划如下导航体系：

```
白虎TG助手 文档站
├── 🏠 首页（产品介绍 + 快速开始入口）
├── 📖 新手指引
│   ├── 产品简介
│   ├── 功能概览
│   └── 快速上手
├── 🚀 功能说明
│   ├── 群发消息
│   ├── 定时任务
│   ├── 关键词回复
│   ├── 成员管理
│   └── 数据统计
├── ⚙️ 配置教程
│   ├── 账号绑定
│   ├── 机器人设置
│   └── API 对接
├── 💰 套餐与计费
├── ❓ 常见问题
└── 📞 联系我们
```

---

## 二、完整代码实现

### 文件结构

```
baihu-docs/
├── index.html          # 文档站前台
├── admin.html          # 发内容后台
├── css/
│   └── style.css
├── js/
│   └── app.js
└── data/
    └── docs.json       # 文档数据存储
```

---

### `index.html` — 文档站前台

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>白虎TG助手 — 官方文档</title>
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
  
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>

<header class="top-bar">
  <div class="logo">
    <span class="logo-icon">🐯</span>
    <span class="logo-text">白虎TG助手</span>
    <span class="logo-badge">文档中心</span>
  </div>
  <nav class="top-nav">
    <a href="#" class="active">文档</a>
    <a href="#">官网</a>
    <a href="#">频道</a>
    <a href="admin.html" class="btn-admin">管理后台</a>
  </nav>
  <button class="menu-toggle" id="menuToggle">☰</button>
</header>

<div class="layout">

<aside class="sidebar" id="sidebar">
    <div class="sidebar-search">
      <input type="text" id="searchInput" placeholder="🔍 搜索文档..." />
    </div>
    <nav class="side-nav" id="sideNav">
      
    </nav>
  </aside>

<main class="content-area" id="contentArea">
    <div class="content-inner" id="contentInner">
      
      <div class="home-hero">
        <div class="hero-icon">🐯</div>
        <h1>白虎 TG 助手</h1>
        <p class="hero-sub">专业的 Telegram 群发与自动化运营工具</p>
        <div class="hero-btns">
          <button class="btn-primary" onclick="loadDoc('quick-start')">🚀 快速开始</button>
          <button class="btn-outline" onclick="loadDoc('intro')">📖 产品介绍</button>
        </div>
        <div class="feature-cards">
          <div class="feature-card">
            <div class="fc-icon">📢</div>
            <h3>批量群发</h3>
            <p>支持文字、图片、视频、文件多类型内容一键群发</p>
          </div>
          <div class="feature-card">
            <div class="fc-icon">⏰</div>
            <h3>定时任务</h3>
            <p>设定发送时间，自动执行，解放双手</p>
          </div>
          <div class="feature-card">
            <div class="fc-icon">🤖</div>
            <h3>智能回复</h3>
            <p>关键词触发自动回复，提升运营效率</p>
          </div>
          <div class="feature-card">
            <div class="fc-icon">📊</div>
            <h3>数据统计</h3>
            <p>实时查看发送数据，优化运营策略</p>
          </div>
        </div>
      </div>
    </div>
  </main>

<aside class="toc-bar" id="tocBar">
    <div class="toc-title">本页目录</div>
    <ul class="toc-list" id="tocList"></ul>
  </aside>

</div>

<footer class="footer">
  <span>© 2024 白虎TG助手 版权所有</span>
  <span>·</span>
  <a href="#">TG频道</a>
  <span>·</span>
  <a href="#">联系客服</a>
</footer>

---

### `admin.html` — 独立发内容后台

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>白虎TG助手 — 内容管理后台</title>
  <link rel="stylesheet" href="css/style.css" />
  
  <link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css" />
  <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
</head>
<body class="admin-body">

<div class="login-mask" id="loginMask">
  <div class="login-box">
    <div class="login-logo">🐯 白虎后台</div>
    <h2>内容管理登录</h2>
    <input type="password" id="loginPwd" placeholder="请输入管理密码" />
    <button onclick="doLogin()">登 录</button>
    <p class="login-tip">默认密码：baihu2024</p>
  </div>
</div>

<div class="admin-layout" id="adminLayout" style="display:none">

<aside class="admin-sidebar">
    <div class="admin-logo">🐯 白虎后台</div>
    <nav>
      <a href="#" class="admin-nav-item active" data-panel="doc-list">
        <span>📄</span> 文档列表
      </a>
      <a href="#" class="admin-nav-item" data-panel="doc-edit">
        <span>✏️</span> 新建/编辑
      </a>
      <a href="#" class="admin-nav-item" data-panel="nav-manage">
        <span>🗂️</span> 菜单管理
      </a>
      <a href="#" class="admin-nav-item" data-panel="site-setting">
        <span>⚙️</span> 站点设置
      </a>
    </nav>
    <div class="admin-sidebar-footer">
      <a href="index.html" target="_blank">👁 预览前台</a>
      <button onclick="doLogout()">退出登录</button>
    </div>
  </aside>

<main class="admin-main">

<div class="panel active" id="panel-doc-list">
      <div class="panel-header">
        <h2>📄 文档列表</h2>
        <button class="btn-primary" onclick="switchPanel('doc-edit'); newDoc()">+ 新建文档</button>
      </div>

<div class="filter-bar">
        <input type="text" id="filterKeyword" placeholder="搜索标题..." oninput="renderDocList()" />
        <select id="filterCategory" onchange="renderDocList()">
          <option value="">全部分类</option>
        </select>
      </div>

<div class="panel" id="panel-doc-edit">
      <div class="panel-header">
        <h2 id="editPanelTitle">✏️ 新建文档</h2>
        <div>
          <button class="btn-outline" onclick="switchPanel('doc-list')">← 返回列表</button>
          <button class="btn-primary" onclick="saveDoc()">💾 保存发布</button>
        </div>
      </div>

<div class="edit-form">
        <div class="form-row">
          <div class="form-group" style="flex:2">
            <label>文档标题 *</label>
            <input type="text" id="docTitle" placeholder="输入文档标题" />
          </div>
          <div class="form-group">
            <label>所属分类 *</label>
            <select id="docCategory">
              <option value="">请选择分类</option>
            </select>
          </div>
          <div class="form-group">
            <label>排序权重</label>
            <input type="number" id="docOrder" value="0" min="0" />
          </div>
        </div>

<div class="form-row">
          <div class="form-group" style="flex:2">
            <label>文档ID（路由slug）</label>
            <input type="text" id="docSlug" placeholder="例: quick-start（留空自动生成）" />
          </div>
          <div class="form-group">
            <label>状态</label>
            <select id="docStatus">
              <option value="published">已发布</option>
              <option value="draft">草稿</option>
            </select>
          </div>
        </div>

<div class="form-group">
          <label>文档正文（支持 Markdown）</label>
          <textarea id="docContent"></textarea>
        </div>

<div class="panel" id="panel-nav-manage">
      <div class="panel-header">
        <h2>🗂️ 菜单/分类管理</h2>
        <button class="btn-primary" onclick="addCategory()">+ 新建分类</button>
      </div>
      <p class="tip-text">💡 拖动可调整菜单排序，双击名称可编辑</p>
      <ul class="category-list" id="categoryList"></ul>
    </div>

<div class="panel" id="panel-site-setting">
      <div class="panel-header">
        <h2>⚙️ 站点设置</h2>
        <button class="btn-primary" onclick="saveSiteSettings()">💾 保存设置</button>
      </div>
      <div class="edit-form">
        <div class="form-group">
          <label>网站标题</label>
          <input type="text" id="siteTitle" placeholder="白虎TG助手" />
        </div>
        <div class="form-group">
          <label>网站 Logo 文字/Emoji</label>
          <input type="text" id="siteLogo" placeholder="🐯" />
        </div>
        <div class="form-group">
          <label>首页副标题</label>
          <input type="text" id="siteSubtitle" placeholder="专业的 Telegram 群发与自动化运营工具" />
        </div>
        <div class="form-group">
          <label>TG 频道链接</label>
          <input type="text" id="siteTgLink" placeholder="https://t.me/yourChannel" />
        </div>
        <div class="form-group">
          <label>客服联系方式</label>
          <input type="text" id="siteContact" placeholder="@yourUsername" />
        </div>
        <div class="form-group">
          <label>管理密码（留空不修改）</label>
          <input type="password" id="newPassword" placeholder="输入新密码" />
        </div>
        <div class="form-group">
          <label>页脚版权文字</label>
          <input type="text" id="siteFooter" placeholder="© 2024 白虎TG助手 版权所有" />
        </div>
      </div>
    </div>

</main>
</div>

---

### `css/style.css

做一个白虎群发的tg助手的说明文档

部署到 VPS