Merge pull request #957 from zhichaosong/master

fix: fr-generator editor styles

Author: siyi98

CONTRIBUTING.md

@@ -11,8 +11,6 @@ yarn
 yarn build
 # 将文档网站跑起来
 yarn start
-# windows环境
-yarn start-win
 ```
 
 #### 3. 进入文档网站了，如何开发呢？

tools/schema-generator/src/components/Settings/index.jsx

@@ -27,7 +27,7 @@ export default function Settings({ widgets }) {
       style={{ height: 30, width: 30, padding: '8px 0 0 8px' }}
       onClick={toggleRight}
     >
-      <RightOutlined className="f5" />
+      <RightOutlined style={{color: '#666'}} />
     </div>
   );
 

tools/schema-generator/src/components/Settings/index.less

@@ -7,6 +7,17 @@
   height: 100%;
 }
 
+// 统一左右编辑区滚动条样式
+.fr-generator-container .right-layout ::-webkit-scrollbar {
+  width: 5px;
+  background-color: #0001;
+}
+
+.fr-generator-container .right-layout ::-webkit-scrollbar-thumb {
+  background: #0003;
+  border-radius: 5px;
+}
+
 @media screen and (min-width: 60em) {
   .fr-generator-container .right-layout {
     width: 16rem;

tools/schema-generator/src/components/Sidebar/Element.less

@@ -1,5 +1,5 @@
 .left-item {
-  width: 7.2rem;
+  width: 7.0rem;
   height: 2.2rem;
   display: flex;
   margin: 4px;

tools/schema-generator/src/components/Sidebar/index.less

@@ -5,6 +5,17 @@
   height: 100%;
 }
 
+// 修复 Windows 滚动条太宽导致两列布局变成一列
+.left-layout::-webkit-scrollbar {
+  width: 5px;
+  background-color: #0001;
+}
+
+.left-layout::-webkit-scrollbar-thumb {
+  background: #0003;
+  border-radius: 5px;
+}
+
 .left-layout ul {
   display: flex;
   flex-wrap: wrap;