Skip to content

Commit 2a74f0f

Browse files
xiaoyatongxiaoyatong
authored
feat: 优化了一下文档样式,更紧凑清晰 (#3105)
1 parent 9ada0f8 commit 2a74f0f

File tree

11 files changed

+88
-88
lines changed

11 files changed

+88
-88
lines changed

‎src/sites/assets/styles/highlight.scss

+4-5
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ code {
55
overflow-x: auto;
66
color: $nutui-doc-code-color;
77
font-weight: 400;
8-
font-size: 14px;
8+
font-size: 13px;
99
font-family: $nutui-doc-code-font-family;
10-
line-height: 26px;
10+
line-height: 1.8;
1111
white-space: pre-wrap;
1212
word-wrap: break-word;
1313
-webkit-font-smoothing: auto;
1414
background-color: #fafafa;
15-
border-radius: 16px;
15+
border-radius: 4px;
16+
border: 1px solid #eee;
1617

1718
span {
1819
font-family: $nutui-doc-code-font-family;
@@ -29,9 +30,7 @@ pre {
2930

3031
.hljs {
3132
display: block;
32-
padding: 30px;
3333
overflow-x: auto;
34-
background: #f7f8fa;
3534
}
3635

3736
.hljs-comment,

‎src/sites/assets/styles/md-style.scss

+9-20
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
h5,
4343
h6 {
4444
color: $nutui-doc-black;
45-
font-weight: bold;
45+
font-weight: 600;
4646
line-height: 1.5;
4747
}
4848

@@ -61,7 +61,6 @@
6161
font-weight: bold;
6262
position: relative;
6363
margin-bottom: 56px;
64-
// display: none;
6564
&:after {
6665
content: '';
6766
position: absolute;
@@ -81,26 +80,23 @@
8180

8281
h3 {
8382
margin: 16px 0px;
84-
font-weight: 400;
8583
font-size: 18px;
8684
}
8785

8886
h4 {
8987
margin: 24px 0 12px;
90-
font-weight: 600;
9188
font-size: 16px;
9289
}
9390

9491
h5 {
9592
margin: 24px 0 12px;
96-
font-weight: 600;
9793
font-size: 15px;
9894
}
9995

10096
p {
10197
color: $nutui-doc-text-color;
10298
font-size: 14px;
103-
line-height: 22px;
99+
line-height: 2;
104100
}
105101

106102
strong {
@@ -112,36 +108,33 @@
112108

113109
table {
114110
width: 100%;
115-
margin-top: 12px;
111+
margin: 12px 0;
116112
color: $nutui-doc-text-color;
117113
font-size: 14px;
118114
line-height: 1.5;
119115
border-collapse: collapse;
120116
border: 1px solid #eee;
121117

122118
th {
123-
padding: 8px 20px;
119+
padding: 8px 12px;
124120
font-weight: 600;
125121
text-align: left;
126122
border-left: 1px solid #e9e9e9;
127123
background-color: #f7f8fa;
128-
// &:first-child {
129-
// padding-left: 0;
130-
// }
131124

132125
&:last-child {
133126
padding-right: 0;
134127
}
135128
}
136129

137130
td {
138-
padding: 8px 20px;
131+
padding: 8px 12px;
139132
border-top: 1px solid $nutui-doc-code-background-color;
140133
border-left: 1px solid #e9e9e9;
141134

142135
&:first-child {
143-
// padding-left: 0;
144136
border-left: 0px;
137+
font-weight: 600;
145138
// version tag
146139
code {
147140
margin: 0;
@@ -153,10 +146,6 @@
153146
border-radius: 20px;
154147
}
155148
}
156-
157-
&:last-child {
158-
padding-right: 0;
159-
}
160149
}
161150

162151
em {
@@ -177,10 +166,10 @@
177166
ol li {
178167
position: relative;
179168
margin: 5px 0 5px 10px;
180-
padding-left: 15px;
169+
padding-left: 14px;
181170
color: $nutui-doc-text-color;
182-
font-size: 15px;
183-
line-height: 26px;
171+
font-size: 14px;
172+
line-height: 2;
184173

185174
&::before {
186175
position: absolute;

‎src/sites/sites-react/doc-taro/App.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ $doc-title-height: 137px;
22

33
.doc {
44
&-content {
5-
margin-left: 290px;
5+
margin-left: 270px;
66
display: flex;
77
flex-direction: column;
88
background: #fff;
@@ -164,7 +164,7 @@ $doc-title-height: 137px;
164164
transition: opacity 0.8s;
165165

166166
&.fixed {
167-
width: calc(100% - 290px);
167+
width: calc(100% - 270px);
168168
position: fixed;
169169
padding: 24px 48px;
170170
z-index: 999;

‎src/sites/sites-react/doc/App.scss

+2-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ $doc-title-height: 137px;
22

33
.doc {
44
&-content {
5-
margin-left: 290px;
5+
margin-left: 270px;
66
display: flex;
77
flex-direction: column;
88
background: #fff;
@@ -85,7 +85,6 @@ $doc-title-height: 137px;
8585
background-color: #000;
8686
border-radius: 5px;
8787
position: absolute;
88-
/* min-width:150px; */
8988
white-space: nowrap;
9089
top: -200%;
9190
transform: translateX(-55%);
@@ -164,7 +163,7 @@ $doc-title-height: 137px;
164163
transition: opacity 0.8s;
165164

166165
&.fixed {
167-
width: calc(100% - 290px);
166+
width: calc(100% - 270px);
168167
position: fixed;
169168
padding: 24px 48px;
170169
z-index: 999;

‎src/sites/sites-react/doc/components/contribution/contribution.scss

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.qa-container {
2+
margin: 0;
3+
border: 1px solid #eee;
4+
border-radius: 4px;
5+
padding: 16px;
6+
font-size: 14px;
7+
.qa-list {
8+
&-item {
9+
text-decoration: none;
10+
color: rgba(0, 115, 255, 0.7);
11+
line-height: 2;
12+
}
13+
.version-tag {
14+
font-size: 12px;
15+
color: #c2c4cc;
16+
background-color: #f5f5f5;
17+
padding: 0 4px;
18+
margin-left: 2px;
19+
border-radius: 4px;
20+
}
21+
}
22+
.qa-tips {
23+
color: #666;
24+
margin-top: 16px;
25+
&-link {
26+
color: rgba(0, 115, 255, 0.6);
27+
text-decoration: none;
28+
}
29+
}
30+
}

‎src/sites/sites-react/doc/components/contribution/contribution.tsx

+26-44
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { FunctionComponent } from 'react'
22
import data from './contribution.json'
3+
import './contribution.scss'
34

45
interface ContributionMDXProps {
56
name: string
@@ -12,33 +13,23 @@ const Contribution: FunctionComponent<ContributionMDXProps> = (props) => {
1213
return (
1314
<>
1415
<h3>Bugs & Tips</h3>
15-
<div style={{ margin: 0 }}>
16+
<div className='qa-container'>
1617
{issues[name].map((item) => (
17-
<div key={item.number} style={{ margin: 2 }}>
18+
<div key={item.number} className='qa-list'>
1819
<a
1920
href={item.url}
2021
target="_blank"
21-
style={{
22-
display: 'block',
23-
textDecoration: 'none',
24-
color: '#576b95',
25-
fontSize: 14,
26-
}}
22+
className='qa-list-item'
2723
>
2824
{item.title}
2925
</a>
3026
</div>
3127
))}
3228
{logs[name].map((item) => (
33-
<div key={item.version} style={{ margin: 2 }}>
29+
<div key={item.version} className='qa-list'>
3430
<a
3531
href={item.content.match(/\(\[(#\d+)\]\(([^)]+)\)\)/)?.[2]}
36-
style={{
37-
display: 'inline',
38-
textDecoration: 'none',
39-
color: '#576b95',
40-
fontSize: 14,
41-
}}
32+
className='qa-list-item'
4233
>
4334
{item.content
4435
.replace(/@[^\s]+$/, '')
@@ -49,40 +40,31 @@ const Contribution: FunctionComponent<ContributionMDXProps> = (props) => {
4940
''
5041
)}
5142
</a>
52-
<span
53-
style={{
54-
fontSize: 14,
55-
color: '#666',
56-
backgroundColor: '#f5f5f5',
57-
padding: '0 4px',
58-
borderRadius: 5,
59-
}}
60-
>
43+
<span className='version-tag'>
6144
{item.version}
6245
</span>
6346
</div>
6447
))}
48+
49+
<div className='qa-tips'>
50+
<span>查看更多 </span>
51+
<a
52+
href={`https://github.com/jdf2e/nutui-react/issues?q=is%3Aissue%20state%3Aclosed%20${name.toLowerCase()}`}
53+
className='qa-tips-link'
54+
>
55+
issues
56+
</a>
57+
<span> and </span>
58+
<a
59+
href={`https://github.com/jdf2e/nutui-react/releases?q=${name.toLowerCase()}&expanded=true`}
60+
className='qa-tips-link'
61+
>
62+
releases
63+
</a>
64+
，欢迎提交 PR。
65+
</div>
6566
</div>
66-
{issues[name].length > 0 ||
67-
(logs[name].length > 0 && (
68-
<div style={{ fontSize: '14px', color: '#666', marginTop: '16px' }}>
69-
<span>View more resolved </span>
70-
<a
71-
href={`https://github.com/jdf2e/nutui-react/issues?q=is%3Aissue%20state%3Aclosed%20${name.toLowerCase()}`}
72-
style={{ color: '#1677ff', textDecoration: 'none' }}
73-
>
74-
issues
75-
</a>
76-
<span> and </span>
77-
<a
78-
href={`https://github.com/jdf2e/nutui-react/releases?q=${name.toLowerCase()}&expanded=true`}
79-
style={{ color: '#1677ff', textDecoration: 'none' }}
80-
>
81-
releases
82-
</a>
83-
<span> for {name}</span>
84-
</div>
85-
))}
67+
8668
</>
8769
)
8870
}

‎src/sites/sites-react/doc/components/demoblock/codeblock.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ const modules = import.meta.glob(`@/packages/**/demos/**/*.tsx`, {
1212

1313
const CodeBlock: FunctionComponent = (props: { src?: string }) => {
1414
const ctx = useContext(APPContext)
15-
const path = `${ctx.path}/doc.md`
1615
const originCode = modules[`${ctx.path}/demos/${props.src}`]
1716
try {
1817
const highlightedCode = hljs.highlightAuto(originCode, ['jsx']).value

‎src/sites/sites-react/doc/components/nav/nav.scss

+9-7
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
bottom: 0;
77
z-index: 1;
88
background: $white;
9-
width: 290px;
9+
width: 270px;
1010
height: 100vh;
1111
border-right: 1px solid #eee;
1212
overflow: auto;
@@ -33,12 +33,12 @@
3333
}
3434

3535
li {
36-
height: 48px;
37-
line-height: 48px;
36+
height: 40px;
37+
line-height: 40px;
3838
font-size: 14px;
3939
color: $doc-default-nav-color;
4040
position: relative;
41-
font-weight: bold;
41+
font-weight: 600;
4242

4343
&.active {
4444
font-weight: bold;
@@ -47,7 +47,7 @@
4747
&::before {
4848
position: absolute;
4949
content: '';
50-
left: 0;
50+
left: -12px;
5151
top: 50%;
5252
width: 22px;
5353
margin-top: -5px;
@@ -61,10 +61,12 @@
6161

6262
> ul {
6363
li {
64-
padding-left: 29px;
64+
padding-left: 12px;
65+
height: 36px;
66+
line-height: 36px;
6567
cursor: pointer;
6668
height: 100%;
67-
font-weight: bold;
69+
font-weight: 500;
6870

6971
&:hover {
7072
&:visited {

‎src/sites/sites-react/doc/components/nav/nav.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const Nav = () => {
8686
}
8787
to={`${lang ? `/${lang}` : ''}/component/${cp.name}`}
8888
>
89-
{cp.name}&nbsp;&nbsp;
89+
{cp.name}&nbsp;
9090
<b>{lang === 'zh-CN' && cp.cName}</b>
9191
</NavLink>
9292
</li>

0 commit comments

Comments
 (0)