Skip to content

Commit 1843ed4

Browse files
chen201724babydog-ai
chen201724
and
babydog-ai
authored
docs: add Upgrade section component to homepage (#5)
Co-authored-by: babydog-ai <willchen.babydog@gmail.com>
1 parent 2b04083 commit 1843ed4

3 files changed

Lines changed: 207 additions & 0 deletions

File tree

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import McpTools from './components/McpTools/McpTools'
44
import Skills from './components/Skills/Skills'
55
import Plugin from './components/Plugin/Plugin'
66
import QuickStart from './components/QuickStart/QuickStart'
7+
import Upgrade from './components/Upgrade/Upgrade'
78
import Footer from './components/Footer/Footer'
89

910
function App() {
@@ -15,6 +16,7 @@ function App() {
1516
<Skills />
1617
<Plugin />
1718
<QuickStart />
19+
<Upgrade />
1820
<Footer />
1921
</>
2022
)

‎src/components/Upgrade/Upgrade.module.css‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
.section {
2+
padding: 100px 24px;
3+
max-width: 800px;
4+
margin: 0 auto;
5+
}
6+
7+
.sectionLabel {
8+
text-align: center;
9+
font-size: 13px;
10+
font-weight: 600;
11+
text-transform: uppercase;
12+
letter-spacing: 0.1em;
13+
color: var(--color-primary);
14+
margin-bottom: 16px;
15+
}
16+
17+
.sectionTitle {
18+
text-align: center;
19+
font-size: clamp(28px, 4vw, 40px);
20+
font-weight: 700;
21+
letter-spacing: -0.02em;
22+
margin-bottom: 16px;
23+
}
24+
25+
.sectionDesc {
26+
text-align: center;
27+
color: var(--color-text-secondary);
28+
font-size: 16px;
29+
margin-bottom: 48px;
30+
}
31+
32+
.steps {
33+
display: flex;
34+
flex-direction: column;
35+
gap: 24px;
36+
}
37+
38+
.step {
39+
display: flex;
40+
gap: 20px;
41+
align-items: flex-start;
42+
}
43+
44+
.stepNumber {
45+
flex-shrink: 0;
46+
width: 36px;
47+
height: 36px;
48+
border-radius: 10px;
49+
background: rgba(0, 185, 107, 0.1);
50+
border: 1px solid rgba(0, 185, 107, 0.2);
51+
display: flex;
52+
align-items: center;
53+
justify-content: center;
54+
font-size: 14px;
55+
font-weight: 700;
56+
color: var(--color-primary);
57+
}
58+
59+
.stepContent {
60+
flex: 1;
61+
min-width: 0;
62+
}
63+
64+
.stepTitle {
65+
font-size: 16px;
66+
font-weight: 600;
67+
margin-bottom: 8px;
68+
}
69+
70+
.stepDesc {
71+
font-size: 14px;
72+
color: var(--color-text-secondary);
73+
margin-bottom: 12px;
74+
line-height: 1.5;
75+
}
76+
77+
.codeBlock {
78+
position: relative;
79+
background: var(--color-bg);
80+
border: 1px solid var(--color-border);
81+
border-radius: 10px;
82+
padding: 16px 20px;
83+
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
84+
font-size: 13px;
85+
line-height: 1.7;
86+
color: var(--color-text);
87+
overflow-x: auto;
88+
white-space: pre;
89+
max-width: 100%;
90+
word-break: break-all;
91+
}
92+
93+
.codeComment {
94+
color: var(--color-text-muted);
95+
}
96+
97+
.codeHighlight {
98+
color: var(--color-primary);
99+
}
100+
101+
.divider {
102+
width: 1px;
103+
height: 24px;
104+
background: var(--color-border);
105+
margin-left: 17px;
106+
}
107+
108+
@media (max-width: 640px) {
109+
.section {
110+
padding: 60px 16px;
111+
}
112+
.step {
113+
flex-direction: column;
114+
gap: 12px;
115+
}
116+
.stepTitle {
117+
font-size: 15px;
118+
}
119+
.stepDesc {
120+
font-size: 13px;
121+
}
122+
.codeBlock {
123+
font-size: 11px;
124+
padding: 12px 14px;
125+
border-radius: 8px;
126+
}
127+
.divider {
128+
margin-left: 0;
129+
width: 24px;
130+
height: 1px;
131+
}
132+
}

‎src/components/Upgrade/Upgrade.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import styles from './Upgrade.module.css'
2+
3+
function Upgrade() {
4+
return (
5+
<section className={styles.section}>
6+
<p className={styles.sectionLabel}>Upgrade</p>
7+
<h2 className={styles.sectionTitle}>🔄 更新 / Upgrade</h2>
8+
<p className={styles.sectionDesc}>
9+
保持你的语雀 AI 工具始终是最新版本。
10+
</p>
11+
<div className={styles.steps}>
12+
<div className={styles.step}>
13+
<div className={styles.stepNumber}>1</div>
14+
<div className={styles.stepContent}>
15+
<h3 className={styles.stepTitle}>更新 Plugin（Skills &amp; Agent）</h3>
16+
<p className={styles.stepDesc}>
17+
当我们发布新版本的 Skills 或 Agent 时，你可以通过以下方式更新：
18+
</p>
19+
<div className={styles.codeBlock}>
20+
<span className={styles.codeComment}># 更新 Marketplace 目录</span>{'\n'}
21+
/plugin marketplace update{'\n'}{'\n'}
22+
<span className={styles.codeComment}># 重新安装 Plugin 以获取最新版本</span>{'\n'}
23+
/plugin install yuque@yuque-ecosystem
24+
</div>
25+
</div>
26+
</div>
27+
28+
<div className={styles.divider} />
29+
30+
<div className={styles.step}>
31+
<div className={styles.stepNumber}>2</div>
32+
<div className={styles.stepContent}>
33+
<h3 className={styles.stepTitle}>更新 MCP Server</h3>
34+
<p className={styles.stepDesc}>
35+
MCP Server（yuque-mcp）通过 <code>npx -y yuque-mcp</code> 运行，每次启动时会自动检查并使用最新版本，无需手动更新。
36+
</p>
37+
<div className={styles.codeBlock}>
38+
<span className={styles.codeComment}># 如需指定版本</span>{'\n'}
39+
{'{'}{'\n'}
40+
{' '}"mcpServers": {'{'}{'\n'}
41+
{' '}"yuque": {'{'}{'\n'}
42+
{' '}"command": "npx",{'\n'}
43+
{' '}"args": ["-y", "<span className={styles.codeHighlight}>yuque-mcp@1.0.0</span>"]{'\n'}
44+
{' '}{'}'}{'\n'}
45+
{' '}{'}'}{'\n'}
46+
{'}'}
47+
</div>
48+
</div>
49+
</div>
50+
51+
<div className={styles.divider} />
52+
53+
<div className={styles.step}>
54+
<div className={styles.stepNumber}>3</div>
55+
<div className={styles.stepContent}>
56+
<h3 className={styles.stepTitle}>查看版本</h3>
57+
<p className={styles.stepDesc}>
58+
随时确认你正在使用的版本。
59+
</p>
60+
<div className={styles.codeBlock}>
61+
<span className={styles.codeComment}># Plugin 版本</span>{'\n'}
62+
查看 /plugin 界面的 Installed tab{'\n'}{'\n'}
63+
<span className={styles.codeComment}># MCP Server 版本</span>{'\n'}
64+
npx yuque-mcp --version
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
</section>
70+
)
71+
}
72+
73+
export default Upgrade

0 commit comments

Comments
 (0)