Vue3Admin: 一款必备的Typecho后台面板插件

开发 typecho 插件 3880 字

1、制作背景和功能预览

https://github.com/mx-space/mx-admin

  • 界面参考与布局实现：
    Vue3Admin 的后台视觉与交互中，存在基于 mx-admin 的结构化参考与适配实现。
  • 采纳内容：侧边栏/内容区变量体系（--sidebar-width、--page-bg、--content-shadow 等）、折叠与移动端遮罩布局思路、Toast 的 sonner 风格层次、评论页 master-detail 分栏交互、Dashboard/Settings 的间距与尺寸标尺映射。
  • 调用点：Vue3Admin: admin/assets/app.css, admin/assets/app.js; 来源参考: mx-admin/src/components/sidebar/index.module.css, mx-admin/src/layouts/sidebar/index.module.css, mx-admin/src/layouts/sidebar/index.tsx, mx-admin/src/index.css

目前Typecho的后台面板即便官方1.3.0依旧没有进行美化（轻量博客系统，也是合理之中）。于是，参考mx-space系统的后台面板界面进行制作适合现代化的后台面板插件：Vue3Admin

https://github.com/TGU-HansJack/Vue3Admin-Typecho

  1. 仪表盘数据统计：图表、数字、快捷操作
  2. 博文编辑器基于Vditor编辑器，全屏编辑等
  3. 文件管理提供网格布局预览
  4. 提供友链页面和功能支持
  5. 额外功能展示插件面板和守兔塔安全插件功能 免费开源Typecho守兔塔防御应用插件 - 李的日志
  6. 维护进行备份、升级
  7. 更加详细的路由数据
  8. 更完善的AI功能
  9. 更完善的数据存储本地化
  10. 更细节的通知系统
  11. 更好用的代码编辑器和自定义字段
  12. 更细粒化的权限

2、如何使用

（1）安装与启用

  1. 将插件目录上传到：usr/plugins/Vue3Admin/。
  2. 在 Typecho 后台插件管理中启用 Vue3Admin。

启用后插件会自动：

  1. 复制插件内置的 admin/ 到站点根目录：/Vue3Admin/。
  2. 修改站点根目录 config.inc.php 内的 __TYPECHO_ADMIN_DIR__ 为 /Vue3Admin/，从而“弃用”旧的 /admin/。

完成后请通过 https://你的域名/Vue3Admin/ 访问新后台。

（2）如何补救？

修改config.inc.php文件中的：

// admin directory (relative path)
define('__TYPECHO_ADMIN_DIR__', '/Vue3Admin/');

如果后台出现域名被截断，补齐域名即可，目前没有解决这个问题。

（3）如何添加前台访客统计

为了避免把后台面板请求计入统计，并兼容一些缓存/静态化场景，推荐在主题的 footer.php（或页面底部公共文件，建议放在 </body> 前）添加以下代码：

<!-- Vue3Admin 访客统计：仅前台（不含后台面板） -->
<script>
(function () {
  try {
    var endpoint = "<?php echo \Typecho\Common::url('Vue3Admin/track.php', $this->options->siteUrl); ?>";
    var payload = {
      path: location.pathname + location.search,
      cid: <?php echo $this->is('post') && isset($this->cid) ? (int) $this->cid : 0; ?>,
      referrer: document.referrer || ""
    };
    var body = JSON.stringify(payload);
    if (navigator.sendBeacon) {
      navigator.sendBeacon(endpoint, new Blob([body], { type: "application/json" }));
      return;
    }
    fetch(endpoint, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: body,
      keepalive: true,
      credentials: "omit"
    }).catch(function () {});
  } catch (e) {}
})();
</script>

其他说明：

  • 记录字段：访问 IP（服务端获取）、访问路径（path）、文章 ID（cid，仅文章页）、访问设备（由 UA 解析）、访问时间（服务端时间）。
  • 上报端点：站点根目录的 /Vue3Admin/track.php（插件启用后会自动部署）。
  • 如果站点在反代/CDN 后，想显示真实访客 IP，请确保服务器正确传递 CF-Connecting-IP / X-Forwarded-For / X-Real-IP 等请求头。

（4）插件的配置

在插件设置中可配置：

  • 主色（Primary Color）：用于面板主题色（CSS 变量）。
  • Vue3 CDN：默认使用 https://unpkg.com/。
  • ECharts CDN：默认使用 https://cdn.jsdelivr.net/。

如站点环境无法访问外网 CDN，请替换为自建静态资源地址。

3、数据库相关介绍

1.2.3版本之前（不包括1.2.3版本）：插件会自动创建/升级数据表（表前缀统一使用 v3a_，实际表名会拼接 Typecho 表前缀，例如 typecho_v3a_visit_log）。

注：后续会将数据库转本地文件存储，避免数据库操作复杂或者其他安全问题。

1.2.3版本后本地化数据，需要迁移操作！

1.2.3版本开始替换本地数据，之前的版本如何迁移数据？

可以通过维护/升级底部的旧数据迁移进行删除旧数据库、然后生成目前本地数据（如图）

4、如何升级？

请下载>=1.1.0版本！

在后台面板的左侧栏中，底部维护下拉菜单有升级页面，点击进入，右上角的蓝色下载图标按钮就是升级按钮。

必要的时候可以设置升级决策：

  1. 严格升级 不以 release 为准，直接对比 GitHub 默认分支最新 commit。
  2. 全局替换 升级时同步替换站点根目录 /Vue3Admin/（无需停用/启用插件）。

5、停用与恢复

在插件管理中停用 Vue3Admin 后：

  • 会把 __TYPECHO_ADMIN_DIR__ 改回 /admin/（恢复默认后台路径）。

可选操作（手动）：

  • 删除站点根目录的 /Vue3Admin/。

（1）无法正常卸载（出现报错）

报错日志

如果无法正常卸载，请数据库操作：

typecho_options表中的plugins替换为：

a:0:{}

参考文章：Typecho不用进入后台如何关闭已启用的插件 | 大鱼博客

6、注意事项（必读）

  • 插件会改写 config.inc.php，并在首次改写时自动备份到 config.inc.php.vue3admin.bak。
  • 请确保 PHP 进程对站点根目录与 config.inc.php 具备写权限，否则启用会失败。比如出现Cannot write config.inc.php: /var/www/html/config.inc.php报错。
  • 如出现无法进入后台的情况，可手动把 config.inc.php 中的 __TYPECHO_ADMIN_DIR__ 恢复为 /admin/，或用备份文件回滚。

7、致谢

基于 GitHub Commit 记录与当前代码调用点整理（持续补充）：

  1. mx-space / mx-admin

    • 界面参考与布局实现
    • Vue3Admin 后台视觉与交互中，参考并适配了 mx-admin 的结构化设计。
    • 采纳内容：侧边栏/内容区变量体系、折叠与移动端遮罩布局思路、Toast 的 sonner 风格层次、评论页 master-detail 分栏交互、Dashboard/Settings 的间距与尺寸标尺映射。

  2. Typecho

    • 宿主框架
    • 提供插件体系、Widget、路由与后台能力，是 Vue3Admin 的运行基础。

  3. Vue.js（Vue 3）

    • 前端框架
    • 后台 SPA 的响应式状态、组件渲染与交互逻辑基础。

  4. Apache Software Foundation – Apache ECharts

    • 图表引擎
    • 用于仪表盘访问趋势、分类/发布数据等可视化图表。

  5. ECharts WordCloud

    • 图表扩展
    • 用于标签词云等扩展图表能力。

  6. Vditor

    • Markdown 编辑器
    • 支持文章/页面编辑、预览与上传流程。

  7. CodeMirror（CodeMirror 6）

    • 代码编辑器
    • 用于主题编辑器与 JSON 字段编辑弹窗。

  8. PHPMailer

    • 邮件发送
    • 提供评论通知、友链通知与测试邮件 SMTP 能力。

  9. jQuery Foundation – jQuery

    • 兼容层
    • 兼容旧版后台插件配置页与脚本执行环境。

  10. jQuery UI

    • 兼容层
    • 为旧后台依赖的 UI 组件与交互提供支持。

  11. DOMPurify

    • 安全清洗
    • 用于 HTML 内容清洗，降低富文本渲染风险。

  12. HyperDown

    • Markdown 兼容
    • 沿用 Typecho 传统后台 Markdown 处理能力。

  13. PageDown

    • Markdown 兼容
    • 沿用传统后台编辑链路解析与工具能力。

  14. Normalize.css

    • 样式基础
    • 统一浏览器默认样式基线。

  15. Lucide – Lucide Icons

    • 图标系统
    • 后台导航与操作图标来源。

  16. ShouTuTa（守兔塔）插件联动

    • 提供状态读取、统计查询与管理联动能力。

  17. AbuseIPDB

    • 威胁情报
    • 在守兔塔联动场景中提供 IP 信誉查询。

  18. Gravatar

    • 头像服务
    • 用户头像展示与镜像配置支持。

感谢所有开源项目与服务的支持 ❤️

8、赞助

赞助二维码