Skip to content

Commit 1dd8fa4

Browse files
13601512191360151219
1360151219
and
1360151219
authored
Feature markdown UI (#30)
* feat: 组件文档样式布局 * feat: code默认展开 * feat: 侧边栏样式&semi DSM原子引入 * feat: 文档应用semi色值 * feat: 拖拽组件使用semi色值 * docs: semi token --------- Co-authored-by: 1360151219 <[email protected]>
1 parent feeb6c0 commit 1dd8fa4

35 files changed

+834
-2308
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ Pivot-Studio 前端组件库
2727

2828
- props：所有的 props 均定义在`design-prop`中。每一个组件的 props 均要继承`PivotDesignProps`，**名字规范格式要求：「组件名」+ `Props`**，每一个组件若有自定义 css 变量，**名字规范格式要求：「组件名」+ `CssTokens`**
2929

30+
- 基础色值：本项目利用了 Semi 的 DSM，定制了一套色值。设计系统连接如下：https://semi.design/dsm_store/theme?dsmID=10493
31+
3032
- css 变量：我们默认的 css 变量放在`design/components/common.scss`里，**命名规范：「--pivot-componentName-property」**，用法如下：
3133

3234
```css

‎packages/demo/.prettierrc‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
{
2-
"parser": "babel",
32
"singleQuote": true,
43
"printWidth": 120
54
}

‎packages/demo/index.scss‎

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
:root {
2-
--master-text-color: #fff;
3-
--primary: #1677ff;
4-
--link-color: #eabe9e;
5-
}
61
* {
72
padding: 0;
83
margin: 0;
94
}
5+
106
body,
117
html,
128
#root {
@@ -15,25 +11,16 @@ html,
1511
Hiragino Sans GB, Hiragino Sans GB W3, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
1612
Helvetica, Arial, sans-serif;
1713
font-weight: 400;
18-
color: var(--master-text-color);
14+
color: var(--semi-color-text-0);
1915
}
2016

2117
.display {
2218
height: auto;
2319
}
20+
2421
.hidden {
2522
height: 0;
2623
}
27-
.demo-draggable-item {
28-
color: #fff;
29-
background-color: #3685f5;
30-
padding: 8px 18px;
31-
border-radius: 4px;
32-
}
33-
.demo-sortable-horizen {
34-
padding: 8px 88px;
35-
}
36-
.demo-sortable-grid {
37-
padding: 32px 40px;
38-
margin: 24px;
39-
}
24+
25+
26+

‎packages/demo/src/components/Card/index.mdx‎

Lines changed: 75 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,43 @@
1-
import Actions from "./svg/index.tsx"
2-
import More from "./svg/tab.tsx"
3-
1+
import Actions from './svg/index.tsx';
2+
import More from './svg/tab.tsx';
43

54
# Card
65

76
<div className="title">默认样式</div>
8-
<CodeBlock line={'5-7'}>
9-
<Card title={<div>测试</div>} time="19:20 2020-09-15" extra={<More/>} actions={<Actions></Actions>} >
10-
<div>
11-
<p>我好想买Airpods但是没有钱，梁老师可不可以资助我
12-
一点钱钱呢啊？不多不多的 </p>
13-
</div>
14-
</Card>
7+
<CodeBlock line={'5-7'}>
8+
<Card title={<div>测试</div>} time="19:20 2020-09-15" extra={<More />} actions={<Actions></Actions>}>
9+
<div>
10+
<p>我好想买Airpods但是没有钱，梁老师可不可以资助我 一点钱钱呢啊？不多不多的 </p>
11+
</div>
12+
</Card>
1513
</CodeBlock>
1614
<div className="title">带头像</div>
1715
<CodeBlock line={'5-7'}>
18-
<Card title={<div>多余文本</div>} time="19:20 2020-09-15" extra={<More/>} avatar={<img src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" width="35" height="35"/>} actions={<Actions/>}>
19-
20-
我好想买Airpods但是没有钱，梁老师可不可以
21-
资助我我好想买Airpods
22-
但是没有钱，
23-
梁老师可不可以资助我一点钱呢啊？不多不多的，
24-
球球了！我好想买Airpods但是没有钱，
25-
梁老师可不可以资助我一点钱钱呢啊？
26-
不多不多的，球球了！我好想买Airpods但是没有钱，梁老师可
27-
我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢啊？
28-
不多不多的，球球了！
29-
我好想买Airpods但是没有钱，
30-
梁老师可不可以资助我一点钱钱呢啊？不多不多的，球球了！
31-
我好想买Airpods但是没有钱，梁老师可
32-
我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢啊？
33-
34-
不多不多的，球球了！
35-
我好想买Airpods但是没有钱，
36-
梁老师可不可以资助我一点钱钱呢啊？
37-
不多不多的，
38-
球球了！我好想买Airpods但是没有钱，梁老师可
39-
16+
<Card
17+
title={<div>多余文本</div>}
18+
time="19:20 2020-09-15"
19+
extra={<More />}
20+
avatar={<img src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" width="35" height="35" />}
21+
actions={<Actions />}
22+
>
23+
我好想买Airpods但是没有钱，梁老师可不可以 资助我我好想买Airpods 但是没有钱，
24+
梁老师可不可以资助我一点钱呢啊？不多不多的， 球球了！我好想买Airpods但是没有钱， 梁老师可不可以资助我一点钱钱呢啊？
25+
不多不多的，球球了！我好想买Airpods但是没有钱，梁老师可
26+
我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢啊？ 不多不多的，球球了！ 我好想买Airpods但是没有钱，
27+
梁老师可不可以资助我一点钱钱呢啊？不多不多的，球球了！ 我好想买Airpods但是没有钱，梁老师可
28+
我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢啊？ 不多不多的，球球了！ 我好想买Airpods但是没有钱，
29+
梁老师可不可以资助我一点钱钱呢啊？ 不多不多的， 球球了！我好想买Airpods但是没有钱，梁老师可
4030
</Card>
4131
</CodeBlock>
4232

4333
<div className="title">栅格</div>
4434
<CodeBlock line={'5-7'}>
45-
<Card avatar={<img src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" width="35" height="35"/>} title={<div style={{fontSize:"18px",fontWeight:"700",marginTop:"10px"}}>运动小天才</div>} style={{'--card-background-color':' rgba(244, 247, 250,1)',}} Grid={true}>
35+
<Card
36+
avatar={<img src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" width="35" height="35" />}
37+
title={<div style={{ fontSize: '18px', fontWeight: '700', marginTop: '10px' }}>运动小天才</div>}
38+
style={{ '--card-background-color': ' rgba(244, 247, 250,1)' }}
39+
Grid={true}
40+
>
4641
<div>足球</div>
4742
<div>足球</div>
4843
<div>足球</div>
@@ -51,62 +46,62 @@ import More from "./svg/tab.tsx"
5146
<div>足球</div>
5247
<div>足球</div>
5348
<div>足球</div>
54-
</Card>
49+
</Card>
5550
</CodeBlock>
5651
<div className="title">收起与展开长度</div>
5752
<CodeBlock line={'5-7'}>
58-
<Card title={<div>多余文本</div>} time="19:20 2020-09-15" extra={<More/>} avatar={<img src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" width="35" height="35"/>} actions={<Actions/>} style={{'--card-minLength':"5"}}>
59-
60-
我好想买Airpods但是没有钱，梁老师可不可以资助我
61-
我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢
62-
啊？不多不多的，球球了！我好想买Airpods但
63-
是没有钱，梁老师可不可以资助我一点钱钱呢啊？不多不多的，
64-
球球了！我好想买Airpods但是没有钱，梁老师可
65-
我好想买Airpods但是没有钱，梁老师可不可以
66-
资助我一点钱钱呢啊？不多不多的，球球了！我好
67-
想买Airpods但是没有钱，梁老师可不可以资助我一
68-
点钱钱呢啊？不多不多的，球球了！我好想买
69-
irpods但是没有钱，梁老师可
70-
我好想买Airpods但是没有钱，
71-
梁老师可不可以资助我一点钱钱呢啊？
72-
不多不多的，球球了！我好想买Airpods但是没有钱，
73-
梁老师可不可以资助我一点钱钱呢啊？不多不多的，球球了！
74-
我好想买Airpods但是没有钱，梁老师可
75-
53+
<Card
54+
title={<div>多余文本</div>}
55+
time="19:20 2020-09-15"
56+
extra={<More />}
57+
avatar={<img src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" width="35" height="35" />}
58+
actions={<Actions />}
59+
style={{ '--card-minLength': '5' }}
60+
>
61+
我好想买Airpods但是没有钱，梁老师可不可以资助我 我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢
62+
啊？不多不多的，球球了！我好想买Airpods但 是没有钱，梁老师可不可以资助我一点钱钱呢啊？不多不多的，
63+
球球了！我好想买Airpods但是没有钱，梁老师可 我好想买Airpods但是没有钱，梁老师可不可以
64+
资助我一点钱钱呢啊？不多不多的，球球了！我好 想买Airpods但是没有钱，梁老师可不可以资助我一
65+
点钱钱呢啊？不多不多的，球球了！我好想买 irpods但是没有钱，梁老师可 我好想买Airpods但是没有钱，
66+
梁老师可不可以资助我一点钱钱呢啊？ 不多不多的，球球了！我好想买Airpods但是没有钱，
67+
梁老师可不可以资助我一点钱钱呢啊？不多不多的，球球了！ 我好想买Airpods但是没有钱，梁老师可
68+
</Card>
69+
<Card
70+
title={<div>多余文本</div>}
71+
time="19:20 2020-09-15"
72+
extra={<More />}
73+
avatar={<img src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" width="35" height="35" />}
74+
actions={<Actions />}
75+
style={{ '--card-maxLength': '7' }}
76+
>
77+
我好想买Airpods但是没有钱，梁老师可不可以资助我 我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢
78+
啊？不多不多的，球球了！我好想买Airpods但 是没有钱，梁老师可不可以资助我一点钱钱呢啊？不多不多的，
79+
球球了！我好想买Airpods但是没有钱，梁老师可 我好想买Airpods但是没有钱，梁老师可不可以
80+
资助我一点钱钱呢啊？不多不多的，球球了！我好 想买Airpods但是没有钱，梁老师可不可以资助我一
81+
点钱钱呢啊？不多不多的，球球了！我好想买 irpods但是没有钱，梁老师可 我好想买Airpods但是没有钱，
82+
梁老师可不可以资助我一点钱钱呢啊？ 不多不多的，球球了！我好想买Airpods但是没有钱，
83+
梁老师可不可以资助我一点钱钱呢啊？不多不多的，球球了！ 我好想买Airpods但是没有钱，梁老师可
7684
</Card>
77-
<Card title={<div>多余文本</div>} time="19:20 2020-09-15" extra={<More/>} avatar={<img src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" width="35" height="35"/>} actions={<Actions/>} style={{'--card-maxLength':"7"}}>
78-
79-
我好想买Airpods但是没有钱，梁老师可不可以资助我
80-
我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢
81-
啊？不多不多的，球球了！我好想买Airpods但
82-
是没有钱，梁老师可不可以资助我一点钱钱呢啊？不多不多的，
83-
球球了！我好想买Airpods但是没有钱，梁老师可
84-
我好想买Airpods但是没有钱，梁老师可不可以
85-
资助我一点钱钱呢啊？不多不多的，球球了！我好
86-
想买Airpods但是没有钱，梁老师可不可以资助我一
87-
点钱钱呢啊？不多不多的，球球了！我好想买
88-
irpods但是没有钱，梁老师可
89-
我好想买Airpods但是没有钱，
90-
梁老师可不可以资助我一点钱钱呢啊？
91-
不多不多的，球球了！我好想买Airpods但是没有钱，
92-
梁老师可不可以资助我一点钱钱呢啊？不多不多的，球球了！
93-
我好想买Airpods但是没有钱，梁老师可
94-
95-
</Card>
9685
</CodeBlock>
9786
<div className="title">自定义背景色和宽度</div>
9887
<CodeBlock line={'5-7'}>
99-
<Card title={<div>多余文本</div>} time="19:20 2020-09-15" extra={<a href="#">...</a>} boradius={false} style={{width:"600px",'--card-background-color': 'rgb(233, 233, 15)'}} actions={<Actions/>}>
100-
<p> 我好想买Airpods但是没有钱，梁老师可不可以资助我</p>
101-
<p>我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢啊？
102-
不多不多的，球球了！我好想买Airpods但是没有钱，
103-
梁老师可不可以
104-
资助我一点钱钱呢啊？不多不多的，球球了！
105-
我好想买Airpods但是没有钱，梁老师可</p>
88+
<Card
89+
title={<div>多余文本</div>}
90+
time="19:20 2020-09-15"
91+
extra={<a href="#">...</a>}
92+
boradius={false}
93+
style={{ width: '600px', '--card-background-color': 'rgb(233, 233, 15)' }}
94+
actions={<Actions />}
95+
>
96+
<p> 我好想买Airpods但是没有钱，梁老师可不可以资助我</p>
97+
<p>
98+
我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢啊？ 不多不多的，球球了！我好想买Airpods但是没有钱，
99+
梁老师可不可以 资助我一点钱钱呢啊？不多不多的，球球了！ 我好想买Airpods但是没有钱，梁老师可
100+
</p>
106101
</Card>
107102
</CodeBlock>
108103

109104
<div className="title">加载中</div>
110105
<CodeBlock line={'5-7'}>
111-
<Loading/>
112-
</CodeBlock>
106+
<Loading />
107+
</CodeBlock>

‎packages/demo/src/components/Draggable/demo/Basic.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.demo-draggable-item {
2+
color: var(--semi-color-white);
3+
background-color: var(--semi-color-primary);
4+
padding: 8px 18px;
5+
border-radius: 4px;
6+
}

‎packages/demo/src/components/Draggable/demo/Basic.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { DndContext, DraggableItem } from 'pivot-design';
22
import React, { useState } from 'react';
3+
import './Basic.scss';
34
const Basic: React.FC = () => {
45
const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });
56
const onDragEnd = (e) => {

‎packages/demo/src/components/Draggable/demo/Droppable.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { DndContext, DraggableItem, Droppable } from 'pivot-design';
22
import React, { useState } from 'react';
3+
import './Basic.scss';
34
const Basic: React.FC = () => {
45
const [parent, setParent] = useState('');
56
const onDragEnd = ({ id, isDrop }) => {

‎packages/demo/src/components/Draggable/demo/GridSortable.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
}
1818
}
1919
.demo-sortable-item {
20-
background-color: #6193f0;
21-
color: #fff;
20+
background-color: var(--semi-color-primary);
21+
color: var(--semi-color-white);
2222
text-align: center;
2323
padding: 12px 0;
2424
margin: 8px 0;

‎packages/demo/src/components/Draggable/demo/HorizenSortable.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
width: 100%;
44
justify-content: center;
55
align-items: center;
6-
76

87
&.__demo-sortable-horizen {
98
justify-content: space-around;
@@ -12,10 +11,9 @@
1211
}
1312
}
1413

15-
1614
.demo-sortable-item {
17-
background-color: #6193f0;
18-
color: #fff;
15+
background-color: var(--semi-color-primary);
16+
color: var(--semi-color-white);
1917
text-align: center;
2018
padding: 12px 0;
2119
margin: 8px 0;

‎packages/demo/src/components/Draggable/demo/MultipleContainer.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
}
1313
.demo-sortable-item {
1414
width: 50%;
15-
background-color: #6193f0;
16-
color: #fff;
15+
background-color: var(--semi-color-primary);
16+
color: var(--semi-color-white);
1717
text-align: center;
1818
padding: 12px 0;
1919
margin: 8px 0;

0 commit comments

Comments
 (0)