style(spreadSheet): optimize spreadSheet's some styles (#474)

* style: spreadSheet

optimize some styles

* feat: update spreadSheet's choose style

---------

Co-authored-by: zhaoge <>

Author: Cythia828

src/spreadSheet/style.scss

@@ -1,11 +1,86 @@
 .dtc-handsontable-no-border {
-    width: 100%;
     .handsontable {
+        tbody {
+            th.ht__highlight {
+                background-color: #E8F1FF;
+            }
+            th.ht__active__highlight {
+                background-color: #E8F1FF;
+            }
+        }
         thead tr:first-child th {
+            background: #F9F9FA;
             border-top: 0;
         }
-        th:first-child {
-            border-left: 0;
+        th {
+            background: #FFF;
+            border-right: solid 1px #EBECF0;
+            color: #3D446E;
+
+            /* SM/Medium */
+            font-family: "PingFang SC";
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 500;
+            text-align: left;
+            &:first-child {
+                border-left: 0;
+            }
+            &:nth-child(2) {
+                border-left: solid 1px #EBECF0;
+            }
+            &:last-child {
+                border-right: solid 1px #EBECF0;
+                border-bottom: solid 1px #EBECF0;
+            }
+        }
+        tr {
+            &:first-child {
+                th {
+                    border-top: solid 1px #EBECF0;
+                }
+                td {
+                    border-top: solid 1px #EBECF0;
+                    &:first-of-type {
+                        border-left: solid 1px #EBECF0;
+                    }
+                }
+            }
+        }
+        td {
+            border-right: solid 1px #EBECF0;
+            border-bottom: solid 1px #EBECF0;
+            color: #3D446E;
+
+            /* SM/Medium */
+            font-family: "PingFang SC";
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 400;
+            &:first-of-type {
+                border-left: solid 1px #EBECF0;
+            }
+        }
+        td.area {
+            &::before {
+                background: #1D78FF;
+            }
+        }
+    }
+}
+
+.ht_master:not(.innerBorderLeft):not(.emptyColumns) ~ .handsontable tbody tr th {
+    font-weight: 400;
+}
+
+.handsontable.htRowHeaders {
+    thead {
+        tr {
+            th {
+                &:nth-child(2) {
+                    border-left: solid 1px #EBECF0 !important;
+                }
+            }
         }
     }
 }