📢 新文章推送 · 每周更新优质内容 · 订阅更新 →
向下滚动
开发编程

Lumin Admin 插件系统:可扩展的功能管理框架

AI 智能总结

Lumin Admin 插件系统:可扩展的功能管理框架

📌 概述

插件系统为 Lumin Admin 提供了可扩展的功能管理框架,管理员可以按需安装和卸载插件,扩展博客的功能。当前系统内置 8 个插件定义,涵盖内容、媒体、SEO、外观、系统五大分类。

本功能采用轻量级设计,插件列表存储在 admin/plugins/installed.json,后续可扩展为动态加载机制。

一、插件分类

分类Key说明
内容content文章相关的增强功能
媒体media图片、音频、视频相关
SEOseo搜索引擎优化相关
外观appearance主题和显示相关
系统system系统级功能增强

二、内置插件列表

插件 ID名称分类说明
seo-analyzerSEO 分析器内容分析文章的 SEO 质量,提供优化建议
broken-link-checker死链检测内容扫描文章中的外链,检测失效链接
image-compressor图片压缩媒体自动压缩上传的图片,减小文件体积
markdown-linterMarkdown 规范内容检查 Markdown 文件格式规范
sitemap-generatorSitemap 生成器SEO自动生成站点地图 sitemap.xml
rss-enhancerRSS 增强SEO增强 RSS 订阅功能,支持自定义格式
code-highlight代码高亮增强外观增加更多代码语言的高亮支持
cache-manager缓存管理系统管理站点缓存,提升访问速度

三、后端实现

3.1 插件数据定义

 1const BUILTIN_PLUGINS = [
 2  {
 3    id: 'seo-analyzer',
 4    name: 'SEO 分析器',
 5    desc: '分析文章的 SEO 质量,提供优化建议',
 6    icon: 'Search',
 7    version: '1.0.0',
 8    author: 'Lumin',
 9    installed: false,
10    category: 'content'
11  },
12  // ... 其他插件
13]

3.2 安装状态持久化

 1const PLUGINS_DIR = join(ROOT, 'admin', 'plugins')
 2
 3function loadInstalledPlugins() {
 4  try {
 5    const fp = join(PLUGINS_DIR, 'installed.json')
 6    if (!existsSync(fp)) return []
 7    return JSON.parse(readFileSync(fp, 'utf-8'))
 8  } catch { return [] }
 9}
10
11function saveInstalledPlugins(list) {
12  writeFileSync(
13    join(PLUGINS_DIR, 'installed.json'),
14    JSON.stringify(list, null, 2),
15    'utf-8'
16  )
17}

3.3 API 接口

 1// 获取插件列表
 2app.get('/api/plugins', (req, res) => {
 3  const installed = loadInstalledPlugins()
 4  const plugins = BUILTIN_PLUGINS.map(p => ({
 5    ...p,
 6    installed: installed.includes(p.id)
 7  }))
 8  ok(res, { plugins })
 9})
10
11// 安装插件
12app.post('/api/plugins/:id/install', (req, res) => {
13  const plugin = BUILTIN_PLUGINS.find(p => p.id === req.params.id)
14  if (!plugin) return fail(res, 404, 'Plugin not found')
15  const installed = loadInstalledPlugins()
16  if (!installed.includes(plugin.id)) {
17    installed.push(plugin.id)
18    saveInstalledPlugins(installed)
19  }
20  ok(res, { status: 'ok' })
21})
22
23// 卸载插件
24app.post('/api/plugins/:id/uninstall', (req, res) => {
25  const installed = loadInstalledPlugins()
26  const idx = installed.indexOf(req.params.id)
27  if (idx >= 0) {
28    installed.splice(idx, 1)
29    saveInstalledPlugins(installed)
30  }
31  ok(res, { status: 'ok' })
32})

四、前端实现

4.1 插件卡片

每个插件以卡片形式展示,包含图标、名称、描述、版本号和操作按钮:

 1.plugin-icon {
 2  width: 52px;
 3  height: 52px;
 4  border-radius: 14px;
 5  color: #fff;
 6
 7  &.icon--content { background: linear-gradient(135deg, #3699ff, #1e90ff); }
 8  &.icon--media { background: linear-gradient(135deg, #0bb783, #4caf50); }
 9  &.icon--seo { background: linear-gradient(135deg, #ffa800, #ff9800); }
10  &.icon--appearance { background: linear-gradient(135deg, #8950fc, #7c3aed); }
11  &.icon--system { background: linear-gradient(135deg, #64748b, #475569); }
12}

4.2 分类筛选

1<el-radio-group v-model="categoryFilter" @change="filterPlugins">
2  <el-radio-button value="all">全部</el-radio-button>
3  <el-radio-button value="content">内容</el-radio-button>
4  <el-radio-button value="media">媒体</el-radio-button>
5  <el-radio-button value="seo">SEO</el-radio-button>
6  <el-radio-button value="appearance">外观</el-radio-button>
7  <el-radio-button value="system">系统</el-radio-button>
8</el-radio-group>

4.3 安装/卸载

 1async function installPlugin(plugin) {
 2  installingId.value = plugin.id
 3  try {
 4    await installApi(plugin.id)
 5    plugin.installed = true
 6    ElMessage.success(`${plugin.name} 安装成功`)
 7  } catch (e) {
 8    ElMessage.error('安装失败')
 9  } finally {
10    installingId.value = ''
11  }
12}

卸载需要二次确认:

1async function uninstallPlugin(plugin) {
2  await ElMessageBox.confirm(`确定卸载 ${plugin.name}?`, '确认卸载', { type: 'warning' })
3  await uninstallApi(plugin.id)
4  plugin.installed = false
5  ElMessage.success(`${plugin.name} 已卸载`)
6}

五、扩展设计

5.1 插件接口规范(规划)

 1// 每个插件需要实现的标准接口
 2const pluginInterface = {
 3  id: 'string',          // 唯一标识
 4  name: 'string',        // 显示名称
 5  version: 'string',     // 版本号
 6  category: 'string',    // 分类
 7  init: 'function',      // 初始化钩子
 8  activate: 'function',  // 激活钩子
 9  deactivate: 'function', // 停用钩子
10  settings: 'object'     // 插件配置
11}

5.2 后续规划

  • 插件实际功能:实现每个插件的具体逻辑
  • 动态加载:从远程仓库加载插件
  • 插件配置:每个插件独立的配置页面
  • 插件钩子:统一的生命周期管理
  • 插件市场:与应用市场打通

六、文件变更清单

文件变更
admin/backend/server.js新增 3 个插件 API
admin/frontend/src/views/Plugins/Index.vue新建插件管理页面
admin/frontend/src/api/index.js新增 3 个插件 API 函数
admin/frontend/src/router/index.js/plugins 路由从 Placeholder 改为真实页面
admin/plugins/installed.json已安装插件列表
版权声明

本文作者 Lumin

本文链接 https://www.zhengquan.xyz/code/lumin-admin-plugins/

许可协议 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

请作者喝杯咖啡 ☕

  • 微信打赏
    微信支付
  • 支付宝打赏
    支付宝
点击按钮查看打赏二维码
🎁 推荐工具
试试这些实用在线工具,提升工作效率
前往工具集 →

留言评论

期待你的想法

评论加载中