Skip to content

Commit b826ece

Browse files
ForteScarletForteScarlet
committed
加载卡片数据改为从外部 JSON 文件引入，同时支持动态计算和已废弃内容的管理。
1 parent dbf3ee1 commit b826ece

File tree

4 files changed

+69
-269
lines changed

4 files changed

+69
-269
lines changed

‎src/components/Index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
</n-card>
4040
<n-card embedded :bordered="false">
4141
<n-collapse-item name="作品展示">
42-
<ShowCards :theme="theme" />
42+
<ShowCards :theme="theme !== null" />
4343
<template #header>
4444
<n-divider title-placement="left" style="user-select: none">
4545
<n-text strong style="font-size: 19px" class="sub-text">作品展示</n-text>

‎src/components/RepoDocCards.vue‎

Lines changed: 44 additions & 176 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,18 @@
5656
* 展示各种机器人组件的信息，包括核心库和各平台组件
5757
*/
5858
59+
// Vue 核心功能导入
60+
import {computed} from "vue";
61+
5962
// Naive UI 组件导入
6063
import {NA, NButton, NCard, NGi, NGrid, NImage, NImageGroup, NP, NSpace} from "naive-ui";
6164
6265
// 统一标签组件导入
6366
import UnifiedTag from "./common/UnifiedTag.vue";
6467
68+
// 数据导入
69+
import repoDocCardsData from "../data/repo-doc-cards.json";
70+
6571
// ==================== 类型定义 ====================
6672
6773
/**
@@ -96,12 +102,14 @@ interface LinkConfig {
96102
* 组件卡片数据接口
97103
*/
98104
interface ComponentCard {
105+
id: string;
99106
name: string;
100107
tags: TagConfig[];
101108
shields: ReturnType<typeof Shield>[];
102109
description: string;
103110
links: LinkConfig[][];
104111
deprecated?: boolean;
112+
deprecatedReason?: string;
105113
}
106114
107115
// ==================== 辅助函数 ====================
@@ -124,182 +132,42 @@ function Shield(props: ShieldConfig) {
124132
125133
// ==================== 预定义标签 ====================
126134
127-
/** 官方标签 - 标识官方维护的组件 */
128-
const officialTag: TagConfig = { name: 'Official', type: 'info' };
129-
130-
/** 核心标签 - 标识核心库组件 */
131-
const coreTag: TagConfig = { name: '核心', type: 'info' };
132-
133-
/** 组件标签 - 标识组件库类型 */
134-
const componentTag: TagConfig = { name: "组件", type: "success" };
135-
136-
/** 开发中标签 - 标识正在开发的组件 */
137-
const WIPTag: TagConfig = { name: '<b>🚧WIP</b>', type: 'warning' };
138-
139-
/** 期待协助标签 - 标识需要社区帮助的组件 */
140-
const helpWanted: TagConfig = { name: '<b>🤝期待协助</b>', type: 'success' };
141-
142-
/** 已废弃标签 - 标识不再维护的组件 */
143-
const deadTag: TagConfig = { name: '<b>💀阵亡</b>', type: 'error' };
144-
145-
const componentCards: ComponentCard[] = [
146-
{
147-
name: "核心库",
148-
tags: [officialTag, coreTag],
149-
shields: [
150-
Shield({ src: "https://img.shields.io/github/v/release/simple-robot/simpler-robot?label=version", alt: "核心库" }),
151-
],
152-
description: "核心库是组件库的基础，也是绝大多数基本API存在的地方。",
153-
links: [
154-
[{name: "前往仓库", href: "https://github.com/simple-robot/simpler-robot", type: "info"}],
155-
[
156-
{name: "API文档", href: "main-v4/", type: "primary"},
157-
{name: "API文档(快照)", href: "snapshots/main-v4/", type: "primary"},
158-
],
159-
[{name: "🍀官网", href: "https://simbot.forte.love/", type: "default"}],
160-
]
161-
},
162-
163-
{
164-
name: "QQ机器人组件",
165-
tags: [officialTag, componentTag],
166-
shields: [
167-
Shield({
168-
src: "https://img.shields.io/github/v/release/simple-robot/simbot-component-qq-guild?label=version",
169-
alt: "QQ机器人组件"
170-
}),
171-
],
172-
description: "QQ机器人组件基于核心库对 <a href='https://bot.q.qq.com/wiki'>QQ机器人官方API</a> 进行实现，提供强大的QQ机器人平台功能。",
173-
links: [
174-
[{name: "前往仓库", href: "https://github.com/simple-robot/simbot-component-qq-guild", type: "info"}],
175-
[
176-
{name: "API文档", href: "components/qq-guild/", type: "primary"},
177-
{name: "API文档(快照)", href: "snapshots/components/qq-guild/", type: "primary"}
178-
],
179-
[{name: "前往手册", href: "https://simbot.forte.love/component-qq-guild.html", type: "default"}],
180-
]
181-
},
182-
{
183-
name: "OneBot组件",
184-
tags: [officialTag, componentTag],
185-
shields: [
186-
Shield({
187-
src: "https://img.shields.io/github/v/release/simple-robot/simbot-component-onebot?label=version",
188-
alt: "OneBot组件"
189-
}),
190-
],
191-
description: "OneBot组件基于核心库对 <a href='https://github.com/botuniverse/onebot-11'>OneBot11协议</a> 进行实现，提供强大的OneBot客户端功能。",
192-
links: [
193-
[{name: "前往仓库", href: "https://github.com/simple-robot/simbot-component-onebot", type: "info"}],
194-
[
195-
{name: "API文档", href: "components/onebot/", type: "primary"},
196-
{name: "API文档(快照)", href: "snapshots/components/onebot/", type: "primary"}
197-
],
198-
// [{name: "前往手册", href: "https://simple-robot.github.io/simbot-component-onebot", type: "default"}],
199-
[{name: "前往手册", href: "https://simbot.forte.love/component-onebot.html", type: "default"}],
200-
]
201-
},
202-
{
203-
name: "KOOK组件",
204-
tags: [officialTag, componentTag],
205-
shields: [
206-
Shield({
207-
src: "https://img.shields.io/github/v/release/simple-robot/simbot-component-kook?label=version",
208-
alt: "KOOK组件"
209-
}),
210-
],
211-
212-
description: "KOOK组件基于核心库对 <a href='https://developer.kookapp.cn/doc/reference'>KOOK机器人</a> 进行实现，提供强大的KOOK机器人平台功能。",
213-
links: [
214-
[{name: "前往仓库", href: "https://github.com/simple-robot/simbot-component-kook", type: "info"}],
215-
[
216-
{name: "API文档", href: "components/kook/", type: "primary"},
217-
{name: "API文档(快照)", href: "snapshots/components/kook/", type: "primary"},
218-
],
219-
[{name: "前往手册", href: "https://simbot.forte.love/component-kook.html", type: "default"}],
220-
]
221-
},
222-
{
223-
name: "Telegram组件",
224-
tags: [WIPTag, helpWanted, officialTag, componentTag],
225-
shields: [
226-
Shield({
227-
src: "https://img.shields.io/github/v/release/simple-robot/simbot-component-telegram?label=version",
228-
alt: "Telegram组件"
229-
}),
230-
],
231-
description: "Telegram组件基于核心库对 <a href='https://core.telegram.org/bots/api'>Telegram Bot</a> 进行实现，提供强大的Telegram机器人平台功能。",
232-
links: [
233-
[{name: "前往仓库", href: "https://github.com/simple-robot/simbot-component-telegram", type: "info"}],
234-
[
235-
{name: "API文档", href: "components/telegram/", type: "primary"},
236-
{name: "API文档(快照)", href: "snapshots/components/telegram/", type: "primary"}
237-
],
238-
[{name: "前往手册", href: "https://simbot.forte.love/component-telegram.html", type: "default"}],
239-
]
240-
},
241-
{
242-
name: "Discord组件",
243-
tags: [WIPTag, helpWanted, officialTag, componentTag],
244-
shields: [
245-
Shield({
246-
src: "https://img.shields.io/github/v/release/simple-robot/simbot-component-discord?label=version",
247-
alt: "Discord组件"
248-
}),
249-
],
250-
description: "Discord组件基于核心库对 <a href='https://discord.com/developers/docs/intro'>Discord Bot</a> 进行实现，提供强大的Discord机器人平台功能。",
251-
links: [
252-
[{name: "前往仓库", href: "https://github.com/simple-robot/simbot-component-discord", type: "info"}],
253-
[
254-
{name: "API文档", href: "components/discord/", type: "primary"},
255-
{name: "API文档(快照)", href: "snapshots/components/discord/", type: "primary"}
256-
],
257-
[{name: "前往手册", href: "https://simbot.forte.love/component-discord.html", type: "default"}],
258-
]
259-
},
260-
// {
261-
// name: "mirai组件",
262-
// deprecated: true,
263-
// tags: [Tag({ name: '⚠濒死', type: 'warning', round: false }), officialTag, componentTag],
264-
// shields: [
265-
// Shield({
266-
// // src: "https://img.shields.io/maven-central/v/love.forte.simbot.component/simbot-component-mirai-core?&label=version",
267-
// src: "https://img.shields.io/github/v/release/simple-robot/simbot-component-mirai?label=version",
268-
// alt: "mirai组件"
269-
// }),
270-
// ],
271-
// description: "Mirai组件基于核心库对 <a href='https://github.com/mamoe/mirai'>mirai框架</a> 进行实现，提供强大的QQ机器人平台功能。",
272-
// links: [
273-
// [{name: "前往仓库", href: "https://github.com/simple-robot/simbot-component-mirai", type: "info"}],
274-
// [
275-
// {name: "API文档", href: "components/mirai/", type: "primary"},
276-
// {name: "API文档(快照)", href: "snapshots/components/mirai/", type: "primary"},
277-
// ],
278-
// [{name: "前往手册", href: "https://simple-robot.github.io/simbot-component-mirai", type: "default"}],
279-
// ]
280-
// },
281-
// {
282-
// name: "米游社大别野组件",
283-
// tags: [deadTag, officialTag, componentTag],
284-
// deprecated: true,
285-
// shields: [
286-
// Shield({
287-
// src: "https://img.shields.io/github/v/release/simple-robot/simbot-component-miyoushe-villa?label=version",
288-
// alt: "米游社大别野组件"
289-
// }),
290-
// ],
291-
// description: "米游社大别野组件基于核心库对 <a href='https://open.miyoushe.com/'>米游社大别野机器人</a> 进行实现，提供强大的米游社大别野机器人平台功能。",
292-
// links: [
293-
// [{name: "前往仓库", href: "https://github.com/simple-robot/simbot-component-miyoushe-villa", type: "info"}],
294-
// [
295-
// {name: "API文档", href: "components/miyoushe-villa/", type: "primary"},
296-
// {name: "API文档(快照)", href: "snapshots/components/miyoushe-villa/", type: "primary"}
297-
// ],
298-
// [{name: "前往手册", href: "https://simple-robot.github.io/simbot-component-miyoushe-villa/", type: "default"}],
299-
// ]
300-
// },
301-
302-
]
135+
/**
136+
* 预定义标签映射
137+
* 从外部JSON文件加载，提供统一的标签管理
138+
*/
139+
const predefinedTags = computed<Record<string, TagConfig>>(() => {
140+
return repoDocCardsData.predefinedTags as Record<string, TagConfig>;
141+
});
142+
143+
/**
144+
* 组件卡片数据
145+
* 从外部JSON文件加载，支持灵活配置和标签引用
146+
*/
147+
const componentCards = computed<ComponentCard[]>(() => {
148+
const tags = predefinedTags.value;
149+
150+
// 处理活跃卡片
151+
const processCard = (card: any): ComponentCard => ({
152+
id: card.id,
153+
name: card.name,
154+
tags: card.tags.map((tagKey: string) => tags[tagKey]).filter(Boolean),
155+
shields: card.shields.map((shield: any) => Shield(shield)),
156+
description: card.description,
157+
links: card.links,
158+
deprecated: card.deprecated,
159+
deprecatedReason: card.deprecatedReason
160+
});
161+
162+
const allCards = [...repoDocCardsData.cards.map(processCard)];
163+
164+
// 可以根据需要决定是否显示已废弃的卡片
165+
// 目前只显示活跃的卡片，如需显示废弃卡片可以取消下面的注释
166+
// allCards.push(...repoDocCardsData.deprecatedCards.map(processCard));
167+
168+
return allCards;
169+
});
170+
303171
304172
</script>
305173

‎src/components/show/ShowCards.vue‎

Lines changed: 18 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ import {NA, NButton, NCard, NGi, NGrid, NImage, NImageGroup, NP, NSpace} from "n
1313
// 统一标签组件导入
1414
import UnifiedTag from "../common/UnifiedTag.vue";
1515
16+
// 数据导入
17+
import showCardsData from "../../data/show-cards.json";
18+
1619
// ==================== 组件属性定义 ====================
1720
1821
/**
@@ -78,109 +81,32 @@ interface ThemeImages {
7881
* 展示卡片数据接口
7982
*/
8083
interface ShowCard {
84+
id: string;
8185
name: string;
8286
tags: TagConfig[];
8387
description: string;
8488
images?: (string | ThemeImages)[];
8589
links: LinkConfig[][];
90+
deprecated?: boolean;
91+
deprecatedReason?: string;
8692
}
8793
8894
// ==================== 展示案例数据 ====================
8995
9096
/**
9197
* 机器人实例展示数据
92-
* 包含各平台上运行的法欧莉机器人实例
93-
*/
94-
const componentCards: ShowCard[] = [
95-
{
96-
name: "QQ频道法欧莉",
97-
tags: [
98-
{name: "QQ频道", type: "info"},
99-
{name: "BOT实例", type: "info"},
100-
{name: "法欧莉", type: "success"}
101-
],
102-
description: "<p>法欧莉，占领QQ频道！</p><p>快使用QQ扫描下面的图片把法欧莉添加到你的频道中吧~</p>",
103-
images: [
104-
{
105-
light: "img/fol_mk2_guild_light.jpg",
106-
dark: "img/fol_mk2_guild_dark.jpg"
107-
}
108-
],
109-
links: [
110-
[{
111-
name: "点击邀请法欧莉",
112-
href: "https://qun.qq.com/qunpro/robot/share?robot_appid=102145654",
113-
type: "info"
114-
}],
115-
]
116-
},
117-
{
118-
name: "QQ群法欧莉",
119-
tags: [
120-
{name: "QQ群", type: "info"},
121-
{name: "BOT实例", type: "info"},
122-
{name: "法欧莉", type: "success"}
123-
],
124-
description: "<p>法欧莉，占领QQ群！</p><p>快使用QQ扫描下面的图片把法欧莉添加到你的群中吧~</p>",
125-
images: [
126-
{
127-
light: "img/fol_mk2_qq_light.jpg",
128-
dark: "img/fol_mk2_qq_dark.jpg"
129-
}
130-
],
131-
links: [
132-
[{
133-
name: "点击邀请法欧莉",
134-
href: "https://bot.q.qq.com/s/16jtuq1vh?id=102145654",
135-
type: "info"
136-
}],
137-
]
138-
},
139-
{
140-
name: "KOOK法欧莉",
141-
tags: [
142-
{name: "KOOK", type: "info"},
143-
{name: "BOT实例", type: "info"},
144-
{name: "法欧莉", type: "success"}
145-
],
146-
description: `
147-
<p>法欧莉，占领KOOK！</p>
148-
<p>快点击下方的按钮把法欧莉添加到你的KOOK中吧~</p>
149-
`,
150-
links: [
151-
[{
152-
name: "点击邀请法欧莉",
153-
href: "https://www.kookapp.cn/app/oauth2/authorize?id=10250&permissions=536870911&client_id=jqdlyHK85xe1i5Bo&redirect_uri=&scope=bot",
154-
type: "info"
155-
}]
156-
]
157-
},
158-
159-
// 注释掉的大别野法欧莉实例（已停用）
160-
// {
161-
// name: "大别野法欧莉",
162-
// tags: [
163-
// { name: "大别野", type: "info" },
164-
// { name: "BOT实例", type: "info" },
165-
// { name: "法欧莉", type: "success" }
166-
// ],
167-
// description: `
168-
// <p>法欧莉，占领大别野！</p>
169-
// <p>快扫描下方的二维码添加大别野、寻找法欧莉并将她添加到你的大别野中吧~</p>
170-
// <p>当然，直接去机器人市场也可以遇到她喔！</p>
171-
// `,
172-
// images: [
173-
// "img/villa-forliy-qrcode.png"
174-
// ],
175-
// links: [
176-
// [{
177-
// name: "点击进入大别野",
178-
// href: "https://dby.miyoushe.com/chat/6272/113235",
179-
// type: "info"
180-
// }]
181-
// ]
182-
// }
183-
];
98+
* 从外部JSON文件加载，支持主题切换和灵活配置
99+
*/
100+
const componentCards = computed<ShowCard[]>(() => {
101+
// 合并活跃卡片和已废弃卡片（如果需要显示的话）
102+
const allCards = [...showCardsData.cards];
103+
104+
// 可以根据需要决定是否显示已废弃的卡片
105+
// 目前只显示活跃的卡片，如需显示废弃卡片可以取消下面的注释
106+
// allCards.push(...showCardsData.deprecatedCards);
107+
108+
return allCards as ShowCard[];
109+
});
184110
185111
</script>
186112

0 commit comments

Comments
 (0)