temp

package.json

@@ -36,7 +36,7 @@
     "lint-staged:ts": {
         "src/**/*.{ts,tsx}": [
             "prettier --write",
-            "tslint --fix",
+            "tslint --fix"
         ]
     }
 }

src/apollo-table/component/Cell.tsx

-import React, { ReactComponentElement } from 'react';
+import React from 'react';
 import { message, Popover, Modal } from 'antd';
 
 import { getComponent } from './base';

src/apollo-table/component/Table.less

+@import '../../common';
+
 .tableCell {
-    //padding: 0 !important;
     &.sortCol {
-        background: rgba(92, 153, 255, 0.2);
+        background: @hoverColor;
     }
 }
 
@@ -18,23 +19,13 @@
 
     :global(.ant-table-thead > tr > th) {
         padding: 0;
-        //margin-bottom: 1px;
-        //text-align: center;
     }
 
-    //:global(.ant-table-thead > tr > th:first-child) {
-    //    border-right: none;
-    //}
-
     :global(.ant-table-tbody > tr > td) {
         padding: 0;
         height: 40px;
     }
 
-    //:global(.ant-table-tbody > tr > td:first-child) {
-    //    border-right: none;
-    //}
-
     :global(.ant-table-tbody > tr > td:last-child) {
         text-align: left;
     }
@@ -48,13 +39,6 @@
         background: white;
     }
 
-    //:global(.ant-table-bordered.ant-table-fixed-header
-    //        .ant-table-header
-    //        + .ant-table-body
-    //        > table) {
-    //    border-top: 0px solid #e8e8e8;
-    //}
-
     :global(.ant-table-row-hover) {
         .unchecked {
             display: block;
@@ -80,7 +64,7 @@
     box-sizing: border-box;
 
     &.disabled {
-        background: #f9f9f9;
+        background: @disabledColor;
 
         &:hover {
             box-shadow: none;
@@ -88,7 +72,7 @@
     }
 
     &:hover {
-        box-shadow: inset 0 0 0 1px #85b6ff;
+        box-shadow: inset 0 0 0 1px @operateColor;
 
         .showFormBtn {
             visibility: visible;
@@ -106,9 +90,11 @@
     .cellNo {
         display: flex;
         align-items: center;
+        min-width: 50px;
     }
 
     .cellContent {
+
         flex: 1;
         overflow: hidden;
         height: 100%;
@@ -143,6 +129,11 @@
     display: flex;
     flex-direction: row;
     background: #fff;
+    .LeftSideContainer{
+        box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);
+        position: absolute;
+        z-index: 1;
+    }
 }
 
 .GridColumn {
@@ -157,7 +148,6 @@
     z-index: 10;
     background: #fff;
     border-left: 1px solid #e8e8e8;
-    box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);
 }
 
 .LeftSideGrid {
@@ -181,7 +171,7 @@
         box-sizing: border-box;
 
         .cellNo {
-            margin-right: 5px;
+            min-width: 50px;
         }
 
         .cellContent {
@@ -206,7 +196,7 @@
     justify-content: center;
     align-items: center;
     text-align: center;
-    padding: 0 0.5em;
+    padding: 0 .5em;
 }
 
 .headerCell,

src/common.less

+//全局布局
+@secondSliderBg: #F8FAFA; //二级菜单背景
+@contentBg: #F5F5F5; //内容区背景
+//全局color
+@primaryColor: #04B4AD; //主题色  --关键行动点，操作状态、重要信息高亮，图形化等场
+@textPrimaryColor: #2C3F53; //重要文字颜色 --用于重要级文字信息、内页标题信息(label)
+@textGeneralColor: #5A6876; //普通文字颜色 --用于普通级段落信息、内标题信息(如详情段落标题信息)(value)
+@textSupplyColor: #848F9B; //辅助文字颜色  --用于辅助、次要文字信息、普通按钮描边
+@textHolderColor: #AEB4BA; //  --用于表格输入框文字提示、缺省图下方文案
+@borderColor: #ECECEC; //  --分割线及边框颜色
+@tableHoverBgColor: #F9FBFF; //  --用于表格的选中底色
+@disabledColor: #F9F9F9; //禁用颜色
+@errorColor: #FF5363; //错误提示颜色
+@hoverColor: #04B4AD; //鼠标悬停颜色
+@operateColor: #04B4AD; //表格操作按钮颜色
+
+// 菜单颜色
+@sliderWidth: 70px; //一级菜单宽度
+@secondSliderWidth: 180px; //二级菜单宽度
+@headerHeight: 60px; //三级标题菜单高度
+//全局字号
+@textFontLgX: 18px; //标题
+@textFontLg: 16px; //小标题&需醒目区别的正文
+@textFontGen: 14px; //正文
+@textFontSm: 12px; //正文和辅助文字
+
+//全局间距
+@marginLgX: 24px;
+@marginLg: 16px;
+@marginGen: 10px;
+@marginSm: 8px;
+@marginSmX: 5px;
+@paddingLgX: 24px;
+@paddingLg: 16px;
+@paddingGen: 10px;
+@paddingSm: 8px;
+@paddingSmX: 5px;
+
+//全局圆角
+@borderRadius: 4px;

src/index.mdx

@@ -11,4 +11,6 @@ import ApolloTable from './apollo-table';
 
 ## Normal ApolloTable
 
+<div style={{position:"relative",margin:"0 20px"}}>
 <ApolloTable>Hi</ApolloTable>
+</div>