Vue3Admin: 一款必备的Typecho后台面板插件 - 寒士杰克

2026-02-13 开发 typecho 插件 3880 字

1、制作背景和功能预览

界面参考与布局实现：
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

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

2、如何使用

（1）安装与启用

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

启用后插件会自动：

复制插件内置的 admin/ 到站点根目录：/Vue3Admin/。
修改站点根目录 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版本！

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

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

严格升级 不以 release 为准，直接对比 GitHub 默认分支最新 commit。
全局替换 升级时同步替换站点根目录 /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 记录与当前代码调用点整理（持续补充）：

mx-space / mx-admin
- 界面参考与布局实现
- Vue3Admin 后台视觉与交互中，参考并适配了 mx-admin 的结构化设计。
- 采纳内容：侧边栏/内容区变量体系、折叠与移动端遮罩布局思路、Toast 的 sonner 风格层次、评论页 master-detail 分栏交互、Dashboard/Settings 的间距与尺寸标尺映射。
Typecho
- 宿主框架
- 提供插件体系、Widget、路由与后台能力，是 Vue3Admin 的运行基础。
Vue.js（Vue 3）
- 前端框架
- 后台 SPA 的响应式状态、组件渲染与交互逻辑基础。
Apache Software Foundation – Apache ECharts
- 图表引擎
- 用于仪表盘访问趋势、分类/发布数据等可视化图表。
ECharts WordCloud
- 图表扩展
- 用于标签词云等扩展图表能力。
Vditor
- Markdown 编辑器
- 支持文章/页面编辑、预览与上传流程。
CodeMirror（CodeMirror 6）
- 代码编辑器
- 用于主题编辑器与 JSON 字段编辑弹窗。
PHPMailer
- 邮件发送
- 提供评论通知、友链通知与测试邮件 SMTP 能力。
jQuery Foundation – jQuery
- 兼容层
- 兼容旧版后台插件配置页与脚本执行环境。
jQuery UI
- 兼容层
- 为旧后台依赖的 UI 组件与交互提供支持。
DOMPurify
- 安全清洗
- 用于 HTML 内容清洗，降低富文本渲染风险。
HyperDown
- Markdown 兼容
- 沿用 Typecho 传统后台 Markdown 处理能力。
PageDown
- Markdown 兼容
- 沿用传统后台编辑链路解析与工具能力。
Normalize.css
- 样式基础
- 统一浏览器默认样式基线。
Lucide – Lucide Icons
- 图标系统
- 后台导航与操作图标来源。
ShouTuTa（守兔塔）插件联动
- 提供状态读取、统计查询与管理联动能力。
AbuseIPDB
- 威胁情报
- 在守兔塔联动场景中提供 IP 信誉查询。
Gravatar
- 头像服务
- 用户头像展示与镜像配置支持。

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

8、赞助

赞助二维码

猜你想看

phpBB扩展：数据库文档 2026/03/22-03:03:09
本站入驻爱发电！ 2026/03/20-02:43:56