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

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文件中的：

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

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

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

其他说明：

• 记录字段：访问 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替换为：

参考文章：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、赞助