From ec7d789be664c9fa5e2d04df61a245fddf3744f4 Mon Sep 17 00:00:00 2001 From: lvisei Date: Tue, 16 Jan 2024 17:35:11 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E8=A7=84=E8=8C=83=E5=B8=83=E5=B1=80?= =?UTF-8?q?=E5=BA=95=E8=89=B2=20(#123)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: 规范布局底色 * style: 修改底色层级 --- packages/li-editor/src/layout/SideNav/style.ts | 4 ++-- packages/li-editor/src/layout/SidePanel/style.ts | 3 +-- packages/li-editor/src/layout/style.ts | 15 ++++++++++++--- .../DatasetList/DatasetItem/style.ts | 4 ++-- .../widgets/DatasetsPanel/DatasetsPanelStyle.ts | 4 ++-- .../src/widgets/FiltersPanel/FilterCard/style.ts | 4 ++-- .../LayersPanel/LayerAttribute/LayerForm/style.ts | 4 ++-- .../LayersPanel/LayerList/LayerItem/style.ts | 4 ++-- .../li-editor/src/widgets/LayersPanel/style.ts | 4 ++-- .../widgets/MapSetting/MapCenterModal/index.tsx | 11 +++++++++-- .../widgets/MapSetting/MapCenterModal/style.ts | 10 +++++----- .../src/widgets/WidgetsPanel/WidgetList/style.ts | 4 ++-- .../src/widgets/WidgetsPanel/WidgetsPanelStyle.ts | 4 ++-- 13 files changed, 45 insertions(+), 30 deletions(-) diff --git a/packages/li-editor/src/layout/SideNav/style.ts b/packages/li-editor/src/layout/SideNav/style.ts index a7e8a463..a1d82b99 100644 --- a/packages/li-editor/src/layout/SideNav/style.ts +++ b/packages/li-editor/src/layout/SideNav/style.ts @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import { useAntdToken } from '../../hooks'; const useStyle = () => { - const { colorBgElevated } = useAntdToken(); + const { colorBgContainer } = useAntdToken(); return { sideNav: css` @@ -10,7 +10,7 @@ const useStyle = () => { 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 index 9c14b632..b15d0eac 100644 --- 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 index e3ffe3e7..082999d5 100644 --- 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 index d625d6ab..78ebc6dd 100644 --- 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 index 48b9890e..5fe94019 100644 --- 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 index e6de104e..69c8935d 100644 --- 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 index 075ce516..243ef77f 100644 --- 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 index 87624336..d1814b7d 100644 --- 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 index 4679cd79..0e3543f6 100644 --- 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 index b058754b..a4b53b7d 100644 --- 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 { mapCenterModalOpen: boolean; } +const getDefaultKey = () => ({ + AMAP_KEY: 'd76a81e912e36130d498216d1085db31', + PRIVATE_KEY: atob('ZWJkZmNjNjkzOTI1Nzg2NGJjOTEzMmY3NDE4MTEwNDM'), +}); + export const MapCenterModal: React.FC = ({ currentMapCenter, larkMap, @@ -84,13 +89,15 @@ export const MapCenterModal: React.FC = ({ {messageContextHolder} } 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 index 4e905642..757090ab 100644 --- 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,8 +38,7 @@ const useStyle = () => { locationSearch: css` width: 200px; - background-color: ${colorBgElevated}; - z-index: 1101; + background-color: ${colorBgContainer}; .larkmap-select-item-empty, .larkmap-location-search__option-name { @@ -46,7 +46,7 @@ const useStyle = () => { } .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 index cfe2d734..e9c747bd 100644 --- 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 index 6d2c6d19..899a7ed0 100644 --- 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;