Skip to content

Commit 416af7c

Browse files
1360151219huhu-1981360151219
authored
Develop (#28)
* feat: 调整组件页样式 * feat: 调整标题栏背景 * feat: 隐藏博客按钮 * Feat homepage (#27) * feat: use gasp * feat: scroll animation(bats&birds&mountains) * feat: 网页路由&主页滚动效果 * feat: 增加md样式 * feat: 优化边距 --------- Co-authored-by: 1360151219 <[email protected]> * Feature markdown UI (#30) * feat: 组件文档样式布局 * feat: code默认展开 * feat: 侧边栏样式&semi DSM原子引入 * feat: 文档应用semi色值 * feat: 拖拽组件使用semi色值 * docs: semi token --------- Co-authored-by: 1360151219 <[email protected]> --------- Co-authored-by: huhu-198 <[email protected]> Co-authored-by: 1360151219 <[email protected]>
1 parent 1e6a6a7 commit 416af7c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1195
-2624
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,5 @@
1717
"[typescript]": {
1818
"editor.defaultFormatter": "esbenp.prettier-vscode"
1919
},
20-
"svg.preview.background": "white" // required to format on save
20+
"svg.preview.background": "black" // required to format on save
2121
}

‎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: 7 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,26 @@
1-
:root {
2-
--master-bg-color: rgb(252, 234, 220);
3-
--master-deep-bg-color: #c76591;
4-
--master-text-color: #fff;
5-
--link-color: #eabe9e;
6-
}
71
* {
82
padding: 0;
93
margin: 0;
104
}
5+
116
body,
127
html,
138
#root {
149
height: 100%;
15-
font-family: 'Helvetica Neue', 'Gilroy ExtraBold', Times, serif;
10+
font-family: system, -apple-system, BlinkMacSystemFont, PingFang SC, Segoe UI, Microsoft YaHei, wenquanyi micro hei,
11+
Hiragino Sans GB, Hiragino Sans GB W3, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
12+
Helvetica, Arial, sans-serif;
13+
font-weight: 400;
14+
color: var(--semi-color-text-0);
1615
}
1716

18-
h1 {
19-
padding-bottom: 20px;
20-
}
21-
h2 {
22-
position: relative;
23-
margin: 16px 0;
24-
padding: 0 16px;
25-
&::before {
26-
content: '';
27-
position: absolute;
28-
left: 0;
29-
top: 0;
30-
width: 4px;
31-
height: 100%;
32-
background-color: #1677ff;
33-
}
34-
}
35-
h3 {
36-
position: relative;
37-
margin: 12px 0;
38-
padding: 0 12px;
39-
&::before {
40-
content: '';
41-
position: absolute;
42-
left: 0;
43-
top: 0;
44-
width: 3px;
45-
height: 100%;
46-
background-color: #1677ff;
47-
}
48-
}
4917
.display {
5018
height: auto;
5119
}
20+
5221
.hidden {
5322
height: 0;
5423
}
5524

56-
.title {
57-
color: #000;
58-
font-size: 18px;
59-
}
6025

6126

62-
63-
.pivot-code-box {
64-
position: relative;
65-
display: inline-block;
66-
width: 100%;
67-
margin: 16px 0;
68-
overflow: hidden;
69-
border: 1px solid rgba(5, 5, 5, 0.06);
70-
border-radius: 6px;
71-
-webkit-transition: all 0.2s;
72-
transition: all 0.2s;
73-
&-actions {
74-
display: flex;
75-
flex-direction: row-reverse;
76-
padding: 4px 8px;
77-
.pivot-code-box-icon {
78-
width: 20px;
79-
height: 20px;
80-
cursor: pointer;
81-
img {
82-
width: 100%;
83-
height: 100%;
84-
}
85-
}
86-
}
87-
&-demo {
88-
padding: 24px 30px;
89-
display: flex;
90-
border-bottom: 1px solid rgba(5, 5, 5, 0.06);
91-
flex-wrap: wrap;
92-
justify-content: center;
93-
align-items: center;
94-
> :not(.PIVOT-draggable-item) {
95-
margin: 0 24px;
96-
}
97-
}
98-
99-
.line-numbers {
100-
//width: 100%;
101-
.code-toolbar {
102-
.data-prismjs-copy {
103-
//width: 70vw;
104-
//width: 100%;
105-
overflow: auto;
106-
}
107-
}
108-
}
109-
}
110-
.demo-draggable-item {
111-
color: #fff;
112-
background-color: #3685f5;
113-
padding: 8px 18px;
114-
border-radius: 4px;
115-
}
116-
.demo-sortable-horizen {
117-
padding: 8px 88px;
118-
}
119-
.demo-sortable-grid {
120-
padding: 32px 40px;
121-
margin: 24px;
122-
}

‎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;

0 commit comments

Comments
 (0)