Pivot-Studio · 1360151219 · Jul 28, 2023 · Jul 16, 2023 · Jul 16, 2023 · Jul 16, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -17,5 +17,5 @@
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "svg.preview.background": "white" // required to format on save
+  "svg.preview.background": "black" // required to format on save
 }
diff --git a/README.md b/README.md
@@ -27,6 +27,8 @@ Pivot-Studio 前端组件库
 
 - props：所有的 props 均定义在`design-prop`中。每一个组件的 props 均要继承`PivotDesignProps`，**名字规范格式要求：「组件名」+ `Props`**，每一个组件若有自定义 css 变量，**名字规范格式要求：「组件名」+ `CssTokens`**
 
+- 基础色值：本项目利用了 Semi 的 DSM，定制了一套色值。设计系统连接如下：https://semi.design/dsm_store/theme?dsmID=10493
+
 - css 变量：我们默认的 css 变量放在`design/components/common.scss`里，**命名规范：「--pivot-componentName-property」**，用法如下：
 
 ```css

diff --git a/packages/demo/.prettierrc b/packages/demo/.prettierrc
@@ -1,5 +1,4 @@
 {
-  "parser": "babel",
   "singleQuote": true,
   "printWidth": 120
 }
diff --git a/packages/demo/index.scss b/packages/demo/index.scss
@@ -1,122 +1,26 @@
-:root {
-  --master-bg-color: rgb(252, 234, 220);
-  --master-deep-bg-color: #c76591;
-  --master-text-color: #fff;
-  --link-color: #eabe9e;
-}
 * {
   padding: 0;
   margin: 0;
 }
+
 body,
 html,
 #root {
   height: 100%;
-  font-family: 'Helvetica Neue', 'Gilroy ExtraBold', Times, serif;
+  font-family: system, -apple-system, BlinkMacSystemFont, PingFang SC, Segoe UI, Microsoft YaHei, wenquanyi micro hei,
+    Hiragino Sans GB, Hiragino Sans GB W3, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
+    Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  color: var(--semi-color-text-0);
 }
 
-h1 {
-  padding-bottom: 20px;
-}
-h2 {
-  position: relative;
-  margin: 16px 0;
-  padding: 0 16px;
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 4px;
-    height: 100%;
-    background-color: #1677ff;
-  }
-}
-h3 {
-  position: relative;
-  margin: 12px 0;
-  padding: 0 12px;
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 3px;
-    height: 100%;
-    background-color: #1677ff;
-  }
-}
 .display {
   height: auto;
 }
+
 .hidden {
   height: 0;
 }
 
-.title {
-  color: #000;
-  font-size: 18px;
-}
 
 
-
-.pivot-code-box {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  margin: 16px 0;
-  overflow: hidden;
-  border: 1px solid rgba(5, 5, 5, 0.06);
-  border-radius: 6px;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  &-actions {
-    display: flex;
-    flex-direction: row-reverse;
-    padding: 4px 8px;
-    .pivot-code-box-icon {
-      width: 20px;
-      height: 20px;
-      cursor: pointer;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-  &-demo {
-    padding: 24px 30px;
-    display: flex;
-    border-bottom: 1px solid rgba(5, 5, 5, 0.06);
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    > :not(.PIVOT-draggable-item) {
-      margin: 0 24px;
-    }
-  }
-
-  .line-numbers {
-    //width: 100%;
-    .code-toolbar {
-      .data-prismjs-copy {
-        //width: 70vw;
-        //width: 100%;
-        overflow: auto;
-      }
-    }
-  }
-}
-.demo-draggable-item {
-  color: #fff;
-  background-color: #3685f5;
-  padding: 8px 18px;
-  border-radius: 4px;
-}
-.demo-sortable-horizen {
-  padding: 8px 88px;
-}
-.demo-sortable-grid {
-  padding: 32px 40px;
-  margin: 24px;
-}
diff --git a/packages/demo/src/components/Card/index.mdx b/packages/demo/src/components/Card/index.mdx
@@ -1,48 +1,43 @@
-import Actions from "./svg/index.tsx"
-import More from "./svg/tab.tsx"
-
+import Actions from './svg/index.tsx';
+import More from './svg/tab.tsx';
 
 # Card
 
 <div className="title">默认样式</div>
-<CodeBlock  line={'5-7'}>
-  <Card title={<div>测试</div>} time="19:20 2020-09-15" extra={<More/>} actions={<Actions></Actions>} >
-<div>
-   <p>我好想买Airpods但是没有钱，梁老师可不可以资助我
-  一点钱钱呢啊？不多不多的 </p>
- </div>
-</Card>
+<CodeBlock line={'5-7'}>
+  <Card title={<div>测试</div>} time="19:20 2020-09-15" extra={<More />} actions={<Actions></Actions>}>
+    <div>
+      <p>我好想买Airpods但是没有钱，梁老师可不可以资助我 一点钱钱呢啊？不多不多的 </p>
+    </div>
+  </Card>
 </CodeBlock>
 <div className="title">带头像</div>
 <CodeBlock line={'5-7'}>
-<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/>}>
-
-   我好想买Airpods但是没有钱，梁老师可不可以
-   资助我我好想买Airpods
-   但是没有钱，
-   梁老师可不可以资助我一点钱呢啊？不多不多的，
-  球球了！我好想买Airpods但是没有钱，
-  梁老师可不可以资助我一点钱钱呢啊？
-  不多不多的，球球了！我好想买Airpods但是没有钱，梁老师可
-   我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢啊？
-   不多不多的，球球了！
-   我好想买Airpods但是没有钱，
-   梁老师可不可以资助我一点钱钱呢啊？不多不多的，球球了！
-   我好想买Airpods但是没有钱，梁老师可
-    我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢啊？
-
-    不多不多的，球球了！
-    我好想买Airpods但是没有钱，
-    梁老师可不可以资助我一点钱钱呢啊？
-    不多不多的，
-    球球了！我好想买Airpods但是没有钱，梁老师可
-
+  <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 />}
+  >
+    我好想买Airpods但是没有钱，梁老师可不可以 资助我我好想买Airpods 但是没有钱，
+    梁老师可不可以资助我一点钱呢啊？不多不多的， 球球了！我好想买Airpods但是没有钱， 梁老师可不可以资助我一点钱钱呢啊？
+    不多不多的，球球了！我好想买Airpods但是没有钱，梁老师可
+    我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢啊？ 不多不多的，球球了！ 我好想买Airpods但是没有钱，
+    梁老师可不可以资助我一点钱钱呢啊？不多不多的，球球了！ 我好想买Airpods但是没有钱，梁老师可
+    我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢啊？ 不多不多的，球球了！ 我好想买Airpods但是没有钱，
+    梁老师可不可以资助我一点钱钱呢啊？ 不多不多的， 球球了！我好想买Airpods但是没有钱，梁老师可
   </Card>
 </CodeBlock>
 
 <div className="title">栅格</div>
 <CodeBlock line={'5-7'}>
-<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}>
+  <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}
+  >
     <div>足球</div>
     <div>足球</div>
     <div>足球</div>
@@ -51,62 +46,62 @@ import More from "./svg/tab.tsx"
     <div>足球</div>
     <div>足球</div>
     <div>足球</div>
-</Card>
+  </Card>
 </CodeBlock>
 <div className="title">收起与展开长度</div>
 <CodeBlock line={'5-7'}>
-<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"}}>
-
-   我好想买Airpods但是没有钱，梁老师可不可以资助我
-   我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢
-   啊？不多不多的，球球了！我好想买Airpods但
-  是没有钱，梁老师可不可以资助我一点钱钱呢啊？不多不多的，
-  球球了！我好想买Airpods但是没有钱，梁老师可
-   我好想买Airpods但是没有钱，梁老师可不可以
-   资助我一点钱钱呢啊？不多不多的，球球了！我好
-   想买Airpods但是没有钱，梁老师可不可以资助我一
-   点钱钱呢啊？不多不多的，球球了！我好想买
-   irpods但是没有钱，梁老师可
-    我好想买Airpods但是没有钱，
-    梁老师可不可以资助我一点钱钱呢啊？
-    不多不多的，球球了！我好想买Airpods但是没有钱，
-    梁老师可不可以资助我一点钱钱呢啊？不多不多的，球球了！
-    我好想买Airpods但是没有钱，梁老师可
-
+  <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' }}
+  >
+    我好想买Airpods但是没有钱，梁老师可不可以资助我 我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢
+    啊？不多不多的，球球了！我好想买Airpods但 是没有钱，梁老师可不可以资助我一点钱钱呢啊？不多不多的，
+    球球了！我好想买Airpods但是没有钱，梁老师可 我好想买Airpods但是没有钱，梁老师可不可以
+    资助我一点钱钱呢啊？不多不多的，球球了！我好 想买Airpods但是没有钱，梁老师可不可以资助我一
+    点钱钱呢啊？不多不多的，球球了！我好想买 irpods但是没有钱，梁老师可 我好想买Airpods但是没有钱，
+    梁老师可不可以资助我一点钱钱呢啊？ 不多不多的，球球了！我好想买Airpods但是没有钱，
+    梁老师可不可以资助我一点钱钱呢啊？不多不多的，球球了！ 我好想买Airpods但是没有钱，梁老师可
+  </Card>
+  <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' }}
+  >
+    我好想买Airpods但是没有钱，梁老师可不可以资助我 我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢
+    啊？不多不多的，球球了！我好想买Airpods但 是没有钱，梁老师可不可以资助我一点钱钱呢啊？不多不多的，
+    球球了！我好想买Airpods但是没有钱，梁老师可 我好想买Airpods但是没有钱，梁老师可不可以
+    资助我一点钱钱呢啊？不多不多的，球球了！我好 想买Airpods但是没有钱，梁老师可不可以资助我一
+    点钱钱呢啊？不多不多的，球球了！我好想买 irpods但是没有钱，梁老师可 我好想买Airpods但是没有钱，
+    梁老师可不可以资助我一点钱钱呢啊？ 不多不多的，球球了！我好想买Airpods但是没有钱，
+    梁老师可不可以资助我一点钱钱呢啊？不多不多的，球球了！ 我好想买Airpods但是没有钱，梁老师可
   </Card>
-<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"}}>
-
-   我好想买Airpods但是没有钱，梁老师可不可以资助我
-   我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢
-   啊？不多不多的，球球了！我好想买Airpods但
-  是没有钱，梁老师可不可以资助我一点钱钱呢啊？不多不多的，
-  球球了！我好想买Airpods但是没有钱，梁老师可
-   我好想买Airpods但是没有钱，梁老师可不可以
-   资助我一点钱钱呢啊？不多不多的，球球了！我好
-   想买Airpods但是没有钱，梁老师可不可以资助我一
-   点钱钱呢啊？不多不多的，球球了！我好想买
-   irpods但是没有钱，梁老师可
-    我好想买Airpods但是没有钱，
-    梁老师可不可以资助我一点钱钱呢啊？
-    不多不多的，球球了！我好想买Airpods但是没有钱，
-    梁老师可不可以资助我一点钱钱呢啊？不多不多的，球球了！
-    我好想买Airpods但是没有钱，梁老师可
-
-</Card>
 </CodeBlock>
 <div className="title">自定义背景色和宽度</div>
 <CodeBlock line={'5-7'}>
- <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/>}>
-  <p> 我好想买Airpods但是没有钱，梁老师可不可以资助我</p>
-  <p>我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢啊？
-  不多不多的，球球了！我好想买Airpods但是没有钱，
-  梁老师可不可以
-  资助我一点钱钱呢啊？不多不多的，球球了！
-  我好想买Airpods但是没有钱，梁老师可</p>
+  <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 />}
+  >
+    <p> 我好想买Airpods但是没有钱，梁老师可不可以资助我</p>
+    <p>
+      我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢啊？ 不多不多的，球球了！我好想买Airpods但是没有钱，
+      梁老师可不可以 资助我一点钱钱呢啊？不多不多的，球球了！ 我好想买Airpods但是没有钱，梁老师可
+    </p>
   </Card>
 </CodeBlock>
 
 <div className="title">加载中</div>
 <CodeBlock line={'5-7'}>
-<Loading/>
-</CodeBlock>
+  <Loading />
+</CodeBlock>
diff --git a/packages/demo/src/components/Draggable/demo/Basic.scss b/packages/demo/src/components/Draggable/demo/Basic.scss
@@ -0,0 +1,6 @@
+.demo-draggable-item {
+  color: var(--semi-color-white);
+  background-color: var(--semi-color-primary);
+  padding: 8px 18px;
+  border-radius: 4px;
+}
diff --git a/packages/demo/src/components/Draggable/demo/Basic.tsx b/packages/demo/src/components/Draggable/demo/Basic.tsx
@@ -1,5 +1,6 @@
 import { DndContext, DraggableItem } from 'pivot-design';
 import React, { useState } from 'react';
+import './Basic.scss';
 const Basic: React.FC = () => {
   const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });
   const onDragEnd = (e) => {

diff --git a/packages/demo/src/components/Draggable/demo/Droppable.tsx b/packages/demo/src/components/Draggable/demo/Droppable.tsx
@@ -1,5 +1,6 @@
 import { DndContext, DraggableItem, Droppable } from 'pivot-design';
 import React, { useState } from 'react';
+import './Basic.scss';
 const Basic: React.FC = () => {
   const [parent, setParent] = useState('');
   const onDragEnd = ({ id, isDrop }) => {

diff --git a/packages/demo/src/components/Draggable/demo/GridSortable.scss b/packages/demo/src/components/Draggable/demo/GridSortable.scss
@@ -17,8 +17,8 @@
     }
   }
   .demo-sortable-item {
-    background-color: #6193f0;
-    color: #fff;
+    background-color: var(--semi-color-primary);
+    color: var(--semi-color-white);
     text-align: center;
     padding: 12px 0;
     margin: 8px 0;

diff --git a/packages/demo/src/components/Draggable/demo/HorizenSortable.scss b/packages/demo/src/components/Draggable/demo/HorizenSortable.scss
@@ -3,7 +3,6 @@
   width: 100%;
   justify-content: center;
   align-items: center;
-
 
   &.__demo-sortable-horizen {
     justify-content: space-around;
@@ -12,10 +11,9 @@
     }
   }
 
-
   .demo-sortable-item {
-    background-color: #6193f0;
-    color: #fff;
+    background-color: var(--semi-color-primary);
+    color: var(--semi-color-white);
     text-align: center;
     padding: 12px 0;
     margin: 8px 0;
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,6 +27,8 @@ Pivot-Studio 前端组件库 @@
     - props：所有的 props 均定义在`design-prop`中。每一个组件的 props 均要继承`PivotDesignProps`，**名字规范格式要求：「组件名」+ `Props`**，每一个组件若有自定义 css 变量，**名字规范格式要求：「组件名」+ `CssTokens`**
+    - 基础色值：本项目利用了 Semi 的 DSM，定制了一套色值。设计系统连接如下：https://semi.design/dsm_store/theme?dsmID=10493
     - css 变量：我们默认的 css 变量放在`design/components/common.scss`里，**命名规范：「--pivot-componentName-property」**，用法如下：
     ```css
@@ Expand Down @@