style: 规范布局底色 (#123)

* style: 规范布局底色 * style: 修改底色层级
antvis · Jan 16, 2024 · ec7d789 · ec7d789
1 parent be28a4b
commit ec7d789
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 30 deletions.
diff --git a/packages/li-editor/src/layout/SideNav/style.ts b/packages/li-editor/src/layout/SideNav/style.ts
@@ -2,15 +2,15 @@ import { css } from '@emotion/css';
 import { useAntdToken } from '../../hooks';
 
 const useStyle = () => {
-  const { colorBgElevated } = useAntdToken();
+  const { colorBgContainer } = useAntdToken();
 
   return {
     sideNav: css`
       display: flex;
       flex-direction: column;
       align-items: center;
       width: 46px;
-      background-color: ${colorBgElevated};
+      background-color: ${colorBgContainer};
     `,
 
     sideNavMenu: css`

diff --git a/packages/li-editor/src/layout/SidePanel/style.ts b/packages/li-editor/src/layout/SidePanel/style.ts
@@ -2,14 +2,13 @@ import { css } from '@emotion/css';
 import { useAntdToken } from '../../hooks';
 
 const useStyle = () => {
-  const { colorBgContainer, colorSplit, boxShadowSecondary } = useAntdToken();
+  const { colorSplit, boxShadowSecondary } = useAntdToken();
 
   return {
     sidePanel: css`
       display: flex;
       flex-direction: column;
       height: 100%;
-      background-color: ${colorBgContainer};
       border-left: 1px solid ${colorSplit};
       box-shadow: ${boxShadowSecondary};
     `,

diff --git a/packages/li-editor/src/layout/style.ts b/packages/li-editor/src/layout/style.ts
@@ -2,7 +2,15 @@ import { css } from '@emotion/css';
 import { useAntdToken } from '../hooks';
 
 const useStyle = () => {
-  const { colorBgContainer, colorSplit, colorText, colorTextSecondary, borderRadius } = useAntdToken();
+  const {
+    colorBgLayout,
+    colorBgContainer,
+    colorFillSecondary,
+    colorFill,
+    colorText,
+    colorTextSecondary,
+    borderRadius,
+  } = useAntdToken();
 
   return {
     editorLayout: css`
@@ -18,12 +26,12 @@ const useStyle = () => {
 
       /* 滚动条的滑块按钮 */
       ::-webkit-scrollbar-thumb {
-        background: ${colorSplit};
+        background: ${colorFillSecondary};
         border-radius: 3px;
         cursor: pointer;
 
         &:hover {
-          background-color: ${colorSplit};
+          background-color: ${colorFill};
         }
       }
 
@@ -54,6 +62,7 @@ const useStyle = () => {
       position: relative;
       display: flex;
       color: ${colorText};
+      background-color: ${colorBgLayout};
     `,
 
     sideNav: css`

diff --git a/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/style.ts b/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/style.ts
@@ -2,14 +2,14 @@ import { css } from '@emotion/css';
 import { useAntdToken } from '../../../../hooks';
 
 const useStyle = () => {
-  const { antCls, colorBgElevated, colorSplit, colorPrimary, borderRadius } = useAntdToken();
+  const { antCls, colorBgContainer, colorSplit, colorPrimary, borderRadius } = useAntdToken();
 
   return {
     listCard: css`
       position: relative;
       width: auto;
       padding: 8px;
-      background-color: ${colorBgElevated};
+      background-color: ${colorBgContainer};
       border: 1px solid ${colorSplit};
       border-left: 3px solid ${colorPrimary};
       border-radius: ${borderRadius}px;

diff --git a/packages/li-editor/src/widgets/DatasetsPanel/DatasetsPanelStyle.ts b/packages/li-editor/src/widgets/DatasetsPanel/DatasetsPanelStyle.ts
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { useAntdToken } from '../../hooks';
 
 const useStyle = () => {
-  const { colorBorder } = useAntdToken();
+  const { colorSplit } = useAntdToken();
 
   return {
     datasetPanel: css`
@@ -15,7 +15,7 @@ const useStyle = () => {
       padding: 15px 0 15px;
       font-weight: 500;
       font-size: 16px;
-      border-bottom: 1px solid ${colorBorder};
+      border-bottom: 1px solid ${colorSplit};
     `,
 
     addDataset: css`

diff --git a/packages/li-editor/src/widgets/FiltersPanel/FilterCard/style.ts b/packages/li-editor/src/widgets/FiltersPanel/FilterCard/style.ts
@@ -2,13 +2,13 @@ import { css } from '@emotion/css';
 import { useAntdToken } from '../../../hooks';
 
 const useStyle = () => {
-  const { colorBgElevated } = useAntdToken();
+  const { colorBgContainer } = useAntdToken();
 
   return {
     filterCard: css`
       width: 100%;
       margin-bottom: 10px;
-      background-color: ${colorBgElevated};
+      background-color: ${colorBgContainer};
     `,
 
     filterCardSelect: css`

diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/style.ts b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/style.ts
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { useAntdToken } from '../../../../hooks';
 
 const useStyle = () => {
-  const { antCls, colorBgElevated, colorText, colorSplit, colorTextSecondary, borderRadius } = useAntdToken();
+  const { antCls, colorBgContainer, colorText, colorSplit, colorTextSecondary, borderRadius } = useAntdToken();
 
   return {
     layerForm: css`
@@ -27,7 +27,7 @@ const useStyle = () => {
 
       ${antCls}-collapse-item ${antCls}-collapse-header {
         padding: 6px 13px !important;
-        background-color: ${colorBgElevated};
+        background-color: ${colorBgContainer};
         border: 1px solid ${colorSplit};
         border-radius: ${borderRadius}px !important;
       }

diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/style.ts b/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/style.ts
@@ -3,14 +3,14 @@ import { useAntdToken } from '../../../../hooks';
 import { LayerIconBg } from './constant';
 
 const useStyle = () => {
-  const { colorBgElevated, colorSplit, colorPrimary, borderRadius } = useAntdToken();
+  const { colorBgContainer, colorSplit, colorPrimary, borderRadius } = useAntdToken();
 
   return {
     layerItem: css`
       display: flex;
       align-items: center;
       margin-bottom: 10px;
-      background: ${colorBgElevated};
+      background: ${colorBgContainer};
       border: 1px solid ${colorSplit};
       border-left: 3px solid;
       border-radius: ${borderRadius}px;

diff --git a/packages/li-editor/src/widgets/LayersPanel/style.ts b/packages/li-editor/src/widgets/LayersPanel/style.ts
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { useAntdToken } from '../../hooks';
 
 const useStyle = () => {
-  const { colorBorder, antCls } = useAntdToken();
+  const { colorSplit, antCls } = useAntdToken();
 
   return {
     layerPanel: css`
@@ -23,7 +23,7 @@ const useStyle = () => {
       padding: 15px 0 15px;
       font-weight: 500;
       font-size: 16px;
-      border-bottom: 1px solid ${colorBorder};
+      border-bottom: 1px solid ${colorSplit};
     `,
 
     addLayer: css`

diff --git a/packages/li-editor/src/widgets/MapSetting/MapCenterModal/index.tsx b/packages/li-editor/src/widgets/MapSetting/MapCenterModal/index.tsx
@@ -2,7 +2,7 @@ import type { ILngLat, Scene } from '@antv/l7';
 import type { LarkMapProps, LocationSearchOption } from '@antv/larkmap';
 import { CustomControl, LarkMap, LocationSearch } from '@antv/larkmap';
 import type { ModalProps } from 'antd';
-import { message, Modal } from 'antd';
+import { Empty, message, Modal } from 'antd';
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import { usePrefixCls } from '../../../hooks';
@@ -17,6 +17,11 @@ export interface MapCenterModalProps extends Omit<ModalProps, 'onOk'> {
   mapCenterModalOpen: boolean;
 }
 
+const getDefaultKey = () => ({
+  AMAP_KEY: 'd76a81e912e36130d498216d1085db31',
+  PRIVATE_KEY: atob('ZWJkZmNjNjkzOTI1Nzg2NGJjOTEzMmY3NDE4MTEwNDM'),
+});
+
 export const MapCenterModal: React.FC<MapCenterModalProps> = ({
   currentMapCenter,
   larkMap,
@@ -84,13 +89,15 @@ export const MapCenterModal: React.FC<MapCenterModalProps> = ({
           {messageContextHolder}
           <LocationSearch
             searchParams={{
-              key: 'fdef552a086edf93e01b6bac2eb89197',
+              key: getDefaultKey().AMAP_KEY,
+              privateKey: getDefaultKey().PRIVATE_KEY,
             }}
             showDistrict
             showAddress
             autoFocus
             bordered={false}
             value={null}
+            notFoundContent={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={false} />}
             onChange={onChanges}
             popupClassName={classNames(`${prefixCls}__location-search`, styles.locationSearch)}
           />

diff --git a/packages/li-editor/src/widgets/MapSetting/MapCenterModal/style.ts b/packages/li-editor/src/widgets/MapSetting/MapCenterModal/style.ts
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { useAntdToken } from '../../../hooks';
 
 const useStyle = () => {
-  const { colorBgContainer, colorBgElevated, colorText } = useAntdToken();
+  const { colorBgContainer, borderRadius, colorBgElevated, colorText } = useAntdToken();
 
   return {
     mapCenter: css`
@@ -19,7 +19,8 @@ const useStyle = () => {
 
     control: css`
       .larkmap-location-search {
-        background-color: ${colorBgElevated};
+        background-color: ${colorBgContainer};
+        border-radius: ${borderRadius}px;
       }
 
       .larkmap-select-selection-search {
@@ -37,16 +38,15 @@ const useStyle = () => {
 
     locationSearch: css`
       width: 200px;
-      background-color: ${colorBgElevated};
-      z-index: 1101;
+      background-color: ${colorBgContainer};
 
       .larkmap-select-item-empty,
       .larkmap-location-search__option-name {
         color: ${colorText};
       }
 
       .larkmap-select-item-option-active {
-        background: ${colorBgContainer};
+        background: ${colorBgElevated};
       }
     `,
   };

diff --git a/packages/li-editor/src/widgets/WidgetsPanel/WidgetList/style.ts b/packages/li-editor/src/widgets/WidgetsPanel/WidgetList/style.ts
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { useAntdToken } from '../../../hooks';
 
 const useStyle = () => {
-  const { antCls, colorTextSecondary, colorBgElevated, colorSplit, borderRadius } = useAntdToken();
+  const { antCls, colorTextSecondary, colorBgContainer, colorSplit, borderRadius } = useAntdToken();
 
   return {
     widgetList: css`
@@ -33,7 +33,7 @@ const useStyle = () => {
       ${antCls}-collapse-header {
         padding: 6px 13px !important;
         overflow: hidden;
-        background-color: ${colorBgElevated} !important;
+        background-color: ${colorBgContainer} !important;
         border: 1px solid ${colorSplit} !important;
         border-radius: ${borderRadius}px !important;
 

diff --git a/packages/li-editor/src/widgets/WidgetsPanel/WidgetsPanelStyle.ts b/packages/li-editor/src/widgets/WidgetsPanel/WidgetsPanelStyle.ts
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { useAntdToken } from '../../hooks';
 
 const useStyle = () => {
-  const { colorBorder } = useAntdToken();
+  const { colorSplit } = useAntdToken();
 
   return {
     panel: css`
@@ -23,7 +23,7 @@ const useStyle = () => {
       justify-content: space-between;
       margin: 0 20px;
       padding: 15px 0 15px;
-      border-bottom: 1px solid ${colorBorder};
+      border-bottom: 1px solid ${colorSplit};
     `,
     panelTitle: css`
       font-weight: 500;