Lumin Admin 插件系统:可扩展的功能管理框架
📌 概述
插件系统为 Lumin Admin 提供了可扩展的功能管理框架,管理员可以按需安装和卸载插件,扩展博客的功能。当前系统内置 8 个插件定义,涵盖内容、媒体、SEO、外观、系统五大分类。
本功能采用轻量级设计,插件列表存储在
admin/plugins/installed.json,后续可扩展为动态加载机制。
一、插件分类
| 分类 | Key | 说明 |
|---|---|---|
| 内容 | content | 文章相关的增强功能 |
| 媒体 | media | 图片、音频、视频相关 |
| SEO | seo | 搜索引擎优化相关 |
| 外观 | appearance | 主题和显示相关 |
| 系统 | system | 系统级功能增强 |
二、内置插件列表
| 插件 ID | 名称 | 分类 | 说明 |
|---|---|---|---|
seo-analyzer | SEO 分析器 | 内容 | 分析文章的 SEO 质量,提供优化建议 |
broken-link-checker | 死链检测 | 内容 | 扫描文章中的外链,检测失效链接 |
image-compressor | 图片压缩 | 媒体 | 自动压缩上传的图片,减小文件体积 |
markdown-linter | Markdown 规范 | 内容 | 检查 Markdown 文件格式规范 |
sitemap-generator | Sitemap 生成器 | SEO | 自动生成站点地图 sitemap.xml |
rss-enhancer | RSS 增强 | 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 | 已安装插件列表 |
留言评论
期待你的想法评论加载中