Skip to content

Commit b148c0b

Browse files
54895y54895y
committed
Add homepage plugin telemetry section
1 parent 499ebb2 commit b148c0b

2 files changed

Lines changed: 166 additions & 6 deletions

File tree

‎src/pages/index.module.css‎

Lines changed: 79 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
.heroCard,
2020
.quickCard,
2121
.pluginCard,
22-
.flowCard {
22+
.flowCard,
23+
.telemetryCard {
2324
border: 1px solid var(--site-panel-border);
2425
background: var(--site-panel-bg);
2526
box-shadow: var(--site-panel-shadow);
@@ -145,7 +146,8 @@
145146

146147
.quickGrid,
147148
.pluginGrid,
148-
.flowGrid {
149+
.flowGrid,
150+
.telemetryGrid {
149151
display: grid;
150152
gap: 1rem;
151153
}
@@ -155,13 +157,15 @@
155157
}
156158

157159
.pluginGrid,
158-
.flowGrid {
160+
.flowGrid,
161+
.telemetryGrid {
159162
grid-template-columns: repeat(3, minmax(0, 1fr));
160163
}
161164

162165
.quickCard,
163166
.pluginCard,
164-
.flowCard {
167+
.flowCard,
168+
.telemetryCard {
165169
display: flex;
166170
flex-direction: column;
167171
padding: 1.4rem;
@@ -213,6 +217,73 @@
213217
font-size: 0.9rem;
214218
}
215219

220+
.telemetryHeader {
221+
display: flex;
222+
align-items: flex-start;
223+
justify-content: space-between;
224+
gap: 1rem;
225+
}
226+
227+
.telemetryHeader h3 {
228+
margin: 0;
229+
color: var(--site-text-strong);
230+
font-size: 1.35rem;
231+
}
232+
233+
.telemetrySummary {
234+
margin: 0.7rem 0 0;
235+
color: var(--site-text-muted);
236+
line-height: 1.8;
237+
}
238+
239+
.telemetryMeta {
240+
display: flex;
241+
flex-wrap: wrap;
242+
gap: 0.6rem;
243+
margin-top: 1rem;
244+
}
245+
246+
.telemetryMeta span,
247+
.telemetryBadgeActive,
248+
.telemetryBadgePending {
249+
display: inline-flex;
250+
align-items: center;
251+
justify-content: center;
252+
border-radius: 999px;
253+
font-weight: 700;
254+
}
255+
256+
.telemetryMeta span {
257+
padding: 0.36rem 0.72rem;
258+
background: var(--site-badge-bg);
259+
color: var(--site-badge-text);
260+
font-size: 0.82rem;
261+
}
262+
263+
.telemetryBadgeActive,
264+
.telemetryBadgePending {
265+
padding: 0.32rem 0.72rem;
266+
font-size: 0.82rem;
267+
white-space: nowrap;
268+
}
269+
270+
.telemetryBadgeActive {
271+
background: rgba(20, 138, 58, 0.12);
272+
color: #167a3f;
273+
}
274+
275+
.telemetryBadgePending {
276+
background: rgba(217, 119, 6, 0.12);
277+
color: #b45309;
278+
}
279+
280+
.telemetryList {
281+
margin: 1rem 0 0;
282+
padding-left: 1.15rem;
283+
color: var(--site-list-color);
284+
line-height: 1.9;
285+
}
286+
216287
.topicList {
217288
margin: 1rem 0 0;
218289
padding-left: 1.15rem;
@@ -238,7 +309,8 @@
238309
@media screen and (max-width: 996px) {
239310
.quickGrid,
240311
.pluginGrid,
241-
.flowGrid {
312+
.flowGrid,
313+
.telemetryGrid {
242314
grid-template-columns: 1fr;
243315
}
244316

@@ -261,7 +333,8 @@
261333
.heroCard,
262334
.quickCard,
263335
.pluginCard,
264-
.flowCard {
336+
.flowCard,
337+
.telemetryCard {
265338
padding: 1.2rem;
266339
border-radius: 20px;
267340
}

‎src/pages/index.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,52 @@ const workflowSteps = [
7070
},
7171
];
7272

73+
const telemetryCards = [
74+
{
75+
title: 'MatrixShop',
76+
status: '已接入',
77+
statusTone: 'active',
78+
summary: '首页展示当前已经接入的 bStats 统计维度，便于后续继续扩展到另外两个插件。',
79+
meta: ['插件 ID 30502', '8 项聚合图表', '仅配置与模块级统计'],
80+
points: [
81+
'database_backend / configured_database_backend',
82+
'enabled_module_count / enabled_modules',
83+
'systemshop_category_count / systemshop_goods_count',
84+
'economy_currency_count / economy_currency_modes',
85+
],
86+
to: '/docs/matrixshop/bstats-and-telemetry',
87+
action: '查看 MatrixShop 统计',
88+
},
89+
{
90+
title: 'MatrixAuth',
91+
status: '预留位置',
92+
statusTone: 'pending',
93+
summary: '等待插件代码和统计口径确定后接入。首页布局和卡位已经保留，后续只补内容。',
94+
meta: ['待提供代码', '待确定插件 ID', '待定义图表范围'],
95+
points: [
96+
'预留模块启用状态统计',
97+
'预留存储后端统计',
98+
'预留身份模式分布统计',
99+
],
100+
to: '/docs/matrixauth/overview',
101+
action: '查看 MatrixAuth 文档',
102+
},
103+
{
104+
title: 'MatrixCook',
105+
status: '预留位置',
106+
statusTone: 'pending',
107+
summary: '等待插件代码和统计口径确定后接入。后续可以直接沿用当前首页的同一展示结构。',
108+
meta: ['待提供代码', '待确定插件 ID', '待定义图表范围'],
109+
points: [
110+
'预留配方与锅具配置统计',
111+
'预留存储后端统计',
112+
'预留可选集成启用统计',
113+
],
114+
to: '/docs/matrixcook/overview',
115+
action: '查看 MatrixCook 文档',
116+
},
117+
];
118+
73119
export default function Home(): ReactNode {
74120
return (
75121
<Layout title="Matrix 官方文档" description="Matrix 系列插件官方文档站点。">
@@ -156,6 +202,47 @@ export default function Home(): ReactNode {
156202
</div>
157203
</section>
158204

205+
<section className={styles.section}>
206+
<div className={styles.sectionHeader}>
207+
<p className={styles.kicker}>插件统计</p>
208+
<h2>首页统计与预留位置</h2>
209+
<p className={styles.sectionLead}>
210+
MatrixShop 已经接入统计说明展示，MatrixAuth 和 MatrixCook 的首页卡位也已预留，后续收到代码后可直接补齐。
211+
</p>
212+
</div>
213+
<div className={styles.telemetryGrid}>
214+
{telemetryCards.map((card) => (
215+
<article key={card.title} className={styles.telemetryCard}>
216+
<div className={styles.telemetryHeader}>
217+
<div>
218+
<h3>{card.title}</h3>
219+
<p className={styles.telemetrySummary}>{card.summary}</p>
220+
</div>
221+
<span
222+
className={
223+
card.statusTone === 'active' ? styles.telemetryBadgeActive : styles.telemetryBadgePending
224+
}>
225+
{card.status}
226+
</span>
227+
</div>
228+
<div className={styles.telemetryMeta}>
229+
{card.meta.map((item) => (
230+
<span key={item}>{item}</span>
231+
))}
232+
</div>
233+
<ul className={styles.telemetryList}>
234+
{card.points.map((point) => (
235+
<li key={point}>{point}</li>
236+
))}
237+
</ul>
238+
<Link className={styles.cardAction} to={card.to}>
239+
{card.action}
240+
</Link>
241+
</article>
242+
))}
243+
</div>
244+
</section>
245+
159246
<section className={styles.section}>
160247
<div className={styles.sectionHeader}>
161248
<p className={styles.kicker}>阅读路径</p>

0 commit comments

Comments
 (0)