diff --git a/packages/li-editor/docs/case/Theme/demos/default.tsx b/packages/li-editor/docs/case/Theme/demos/default.tsx new file mode 100644 index 00000000..706e1c75 --- /dev/null +++ b/packages/li-editor/docs/case/Theme/demos/default.tsx @@ -0,0 +1,35 @@ +import { LocationInsightEditor } from '@antv/li-editor'; +import type { Application } from '@antv/li-sdk'; +import { ConfigProvider, Layout } from 'antd'; +import zhCN from 'antd/es/locale/zh_CN'; +import 'dayjs/locale/zh-cn'; +import React from 'react'; +import defaultApplication from '../../../common/application'; +import MyAssets from '../../../common/my-assets'; +import { ANTD_DARK_THEME } from './theme'; + +const assets = [MyAssets]; + +export default () => { + const handleUpdate = (app: Application) => { + console.log('app: ', app); + }; + + return ( + <ConfigProvider locale={zhCN} theme={ANTD_DARK_THEME}> + <Layout style={{ height: '100vh' }}> + <Layout.Header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> + <div style={{ width: '120px', height: '31px', background: 'rgba(255, 255, 255, 0.3)' }} /> + </Layout.Header> + <Layout.Content> + <LocationInsightEditor + defaultApplication={defaultApplication} + assets={assets} + onChange={handleUpdate} + style={{ height: '100%' }} + /> + </Layout.Content> + </Layout> + </ConfigProvider> + ); +}; diff --git a/packages/li-editor/docs/case/Theme/demos/switch.tsx b/packages/li-editor/docs/case/Theme/demos/switch.tsx new file mode 100644 index 00000000..8c051945 --- /dev/null +++ b/packages/li-editor/docs/case/Theme/demos/switch.tsx @@ -0,0 +1,49 @@ +import { LocationInsightEditor } from '@antv/li-editor'; +import type { Application } from '@antv/li-sdk'; +import { ConfigProvider, Layout, Segmented } from 'antd'; +import zhCN from 'antd/es/locale/zh_CN'; +import type { SegmentedValue } from 'antd/es/segmented'; +import 'dayjs/locale/zh-cn'; +import React, { useState } from 'react'; +import defaultApplication from '../../../common/application'; +import MyAssets from '../../../common/my-assets'; +import { ANTD_DARK_THEME, ANTD_DEFAULT_THEME } from './theme'; + +const assets = [MyAssets]; + +export default () => { + const [theme, setTheme] = useState(ANTD_DEFAULT_THEME); + + const onThemeChange = (value: SegmentedValue) => { + setTheme(value === 'light' ? ANTD_DEFAULT_THEME : ANTD_DARK_THEME); + }; + const handleUpdate = (app: Application) => { + console.log('app: ', app); + }; + + return ( + <ConfigProvider locale={zhCN} theme={theme}> + <Layout style={{ height: '100vh' }}> + <Layout.Header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> + <div style={{ width: '120px', height: '31px', background: 'rgba(255, 255, 255, 0.3)' }} /> + <Segmented + defaultValue="light" + options={[ + { label: '亮色', value: 'light' }, + { label: '暗色', value: 'dark' }, + ]} + onChange={onThemeChange} + /> + </Layout.Header> + <Layout.Content> + <LocationInsightEditor + defaultApplication={defaultApplication} + assets={assets} + onChange={handleUpdate} + style={{ height: '100%' }} + /> + </Layout.Content> + </Layout> + </ConfigProvider> + ); +}; diff --git a/packages/li-editor/docs/case/Theme/demos/theme.ts b/packages/li-editor/docs/case/Theme/demos/theme.ts new file mode 100644 index 00000000..306112f5 --- /dev/null +++ b/packages/li-editor/docs/case/Theme/demos/theme.ts @@ -0,0 +1,16 @@ +import { theme } from 'antd'; + +export const ANTD_DEFAULT_THEME = { + algorithm: theme.defaultAlgorithm, +}; + +export const ANTD_DARK_THEME = { + algorithm: theme.darkAlgorithm, + token: { + colorPrimary: '#8274FF', + colorTextBase: 'rgba(255,255,255,0.85)', + colorBgBase: '#0f0f13', + colorInfo: '#8274FF', + borderRadius: 6, + }, +}; diff --git a/packages/li-editor/docs/case/Theme/index.md b/packages/li-editor/docs/case/Theme/index.md new file mode 100644 index 00000000..db35a9a9 --- /dev/null +++ b/packages/li-editor/docs/case/Theme/index.md @@ -0,0 +1,11 @@ +--- +group: + title: 主题设置 + order: 3 +title: 暗色主题 +toc: false +mobile: false +order: 1 +--- + +<code src="./demos/default.tsx" iframe="70vh"></code> diff --git a/packages/li-editor/docs/case/Theme/switch.md b/packages/li-editor/docs/case/Theme/switch.md new file mode 100644 index 00000000..c4d3c8e7 --- /dev/null +++ b/packages/li-editor/docs/case/Theme/switch.md @@ -0,0 +1,11 @@ +--- +group: + title: 主题设置 + order: 3 +title: 主题切换 +toc: false +mobile: false +order: 2 +--- + +<code src="./demos/switch.tsx" iframe="70vh"></code> diff --git a/packages/li-editor/package.json b/packages/li-editor/package.json index 3956ec55..127a5d8c 100644 --- a/packages/li-editor/package.json +++ b/packages/li-editor/package.json @@ -38,6 +38,7 @@ "@antv/event-emitter": "^0.1.3", "@antv/li-p2": "^1.6.0", "@antv/li-sdk": "^1.3.0", + "@emotion/css": "^11.10.6", "@formily/antd-v5": "^1.1.2", "@formily/core": "^2.2.24", "@formily/react": "^2.2.24", diff --git a/packages/li-editor/src/components/EditName/index.less b/packages/li-editor/src/components/EditName/index.less deleted file mode 100644 index d90f5724..00000000 --- a/packages/li-editor/src/components/EditName/index.less +++ /dev/null @@ -1,19 +0,0 @@ -@import '../../theme/index.less'; - -.@{prefix}-title-name { - display: flex; - - &__text { - display: flex; - align-items: center; - cursor: pointer; - justify-content: space-between; - max-width: 180px; - } - - &__title { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } -} diff --git a/packages/li-editor/src/components/EditName/index.tsx b/packages/li-editor/src/components/EditName/index.tsx index dbadc601..85cd352c 100644 --- a/packages/li-editor/src/components/EditName/index.tsx +++ b/packages/li-editor/src/components/EditName/index.tsx @@ -2,7 +2,8 @@ import { EnterOutlined } from '@ant-design/icons'; import { Input, message, Tooltip } from 'antd'; import classnames from 'classnames'; import React, { useCallback, useEffect, useState } from 'react'; -import './index.less'; +import { usePrefixCls } from '../../hooks'; +import useStyle from './style'; type EditNameProps = { className?: string; @@ -16,6 +17,8 @@ type EditNameProps = { export default ({ className, name, isEdit, onClick, onCancel, onChange }: EditNameProps) => { const [cacheName, setCacheName] = useState(''); const [messageApi, messageContextHolder] = message.useMessage(); + const prefixCls = usePrefixCls('title-name'); + const styles = useStyle(); const onSubmit = useCallback(() => { if (!cacheName) { @@ -37,7 +40,7 @@ export default ({ className, name, isEdit, onClick, onCancel, onChange }: EditNa }, [isEdit, name]); return ( - <div className={classnames('li-title-name', className)}> + <div className={classnames(`${prefixCls}`, styles.titleName, className)}> {messageContextHolder} {isEdit ? ( <Input @@ -52,8 +55,8 @@ export default ({ className, name, isEdit, onClick, onCancel, onChange }: EditNa onBlur={onCancel} /> ) : ( - <span className="li-title-name__text"> - <span className="li-title-name__title" onClick={onClick}> + <span className={classnames(`${prefixCls}__text`, styles.titleNameText)}> + <span className={classnames(`${prefixCls}__title`, styles.titleNameTitle)} onClick={onClick}> <Tooltip title={name}>{name}</Tooltip> </span> </span> diff --git a/packages/li-editor/src/components/EditName/style.ts b/packages/li-editor/src/components/EditName/style.ts new file mode 100644 index 00000000..ed7fcde8 --- /dev/null +++ b/packages/li-editor/src/components/EditName/style.ts @@ -0,0 +1,25 @@ +import { css } from '@emotion/css'; + +const useStyle = () => { + return { + titleName: css` + display: flex; + `, + + titleNameText: css` + display: flex; + align-items: center; + cursor: pointer; + justify-content: space-between; + max-width: 180px; + `, + + titleNameTitle: css` + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/hooks/index.ts b/packages/li-editor/src/hooks/index.ts index ab84f27b..b197821b 100644 --- a/packages/li-editor/src/hooks/index.ts +++ b/packages/li-editor/src/hooks/index.ts @@ -1,3 +1,4 @@ export * from './useEditorState'; export * from './useEditor'; export * from './useEditorDatasets'; +export * from './useAntdToken'; diff --git a/packages/li-editor/src/hooks/useAntdToken.ts b/packages/li-editor/src/hooks/useAntdToken.ts new file mode 100644 index 00000000..9ba86e2d --- /dev/null +++ b/packages/li-editor/src/hooks/useAntdToken.ts @@ -0,0 +1,28 @@ +import { ConfigProvider, theme } from 'antd'; +import { useContext } from 'react'; + +const { ConfigContext } = ConfigProvider; +const useConfig = () => useContext(ConfigContext); + +export const useAntdToken = () => { + const { getPrefixCls } = useConfig(); + const rootPrefixCls = getPrefixCls(); + + const { useToken } = theme; + const { token } = useToken(); + + return { + ...token, + antCls: `.${rootPrefixCls}`, + }; +}; + +export const usePrefixCls = ( + tag?: string, + props?: { + prefixCls?: string; + }, +) => { + const prefix = props?.prefixCls ?? 'li-'; + return `${prefix}${tag ?? ''}`; +}; diff --git a/packages/li-editor/src/layout/SideNav/NavMenu/index.less b/packages/li-editor/src/layout/SideNav/NavMenu/index.less deleted file mode 100644 index 85942fe9..00000000 --- a/packages/li-editor/src/layout/SideNav/NavMenu/index.less +++ /dev/null @@ -1,55 +0,0 @@ -@import '../../../theme/index.less'; - -.@{prefix}-nav-menu { - width: 100%; - margin: 0; - padding: 0; - text-align: center; - - &__item { - position: relative; - display: flex; - flex-direction: column; - padding: 10px 0; - color: @text-primary-color; - text-align: center; - cursor: pointer; - - &::before { - position: absolute; - top: 0; - bottom: 0; - left: -3px; - display: block; - width: 3px; - background: @primary-color-1; - border-radius: 0 100px 100px 0; - visibility: hidden; - transition: left 0.4s ease-in; - content: ''; - } - - &_active { - color: @primary-color-1; - - &::before { - left: 0; - visibility: visible; - } - } - } - - &__item-icon { - padding: 4px 0; - font-size: 18px; - line-height: 1; - } - - &__item-title { - padding: 2px 0; - font-weight: bold; - font-size: 12px; - line-height: 1; - white-space: nowrap; - } -} diff --git a/packages/li-editor/src/layout/SideNav/NavMenu/index.tsx b/packages/li-editor/src/layout/SideNav/NavMenu/index.tsx index 0201c231..464c6da7 100644 --- a/packages/li-editor/src/layout/SideNav/NavMenu/index.tsx +++ b/packages/li-editor/src/layout/SideNav/NavMenu/index.tsx @@ -1,8 +1,9 @@ import { Tooltip } from 'antd'; import classNames from 'classnames'; import React from 'react'; +import { usePrefixCls } from '../../../hooks'; import type { NavMenuItem } from '../../../types/menu'; -import './index.less'; +import useStyle from './style'; export type NavMenuProps = { className?: string; @@ -13,9 +14,11 @@ export type NavMenuProps = { const NavMenu: React.FC<NavMenuProps> = (props) => { const { className, selectedKey, items, onChange } = props; + const prefixCls = usePrefixCls('nav-menu'); + const styles = useStyle(); return ( - <ul className={classNames('li-nav-menu', className)}> + <ul className={classNames(prefixCls, styles.navMenu, className)}> {items.map((item) => { const { icon, key, name } = item; const isActive = key === selectedKey; @@ -26,11 +29,12 @@ const NavMenu: React.FC<NavMenuProps> = (props) => { onClick={() => { onChange(item.key); }} - className={classNames('li-nav-menu__item', { - ['li-nav-menu__item_active']: isActive, + className={classNames(`${prefixCls}__item`, styles.menuItem, { + [styles.menuItemActive]: isActive, + [`${prefixCls}__item-active`]: isActive, })} > - <span className="li-nav-menu__item-icon">{icon}</span> + <span className={classNames(`${prefixCls}__item-icon`, styles.menuItemIcon, className)}>{icon}</span> {/* <span className='li-nav-menu__item-icon'>{name}</span> */} </li> </Tooltip> diff --git a/packages/li-editor/src/layout/SideNav/NavMenu/style.ts b/packages/li-editor/src/layout/SideNav/NavMenu/style.ts new file mode 100644 index 00000000..82c28fa0 --- /dev/null +++ b/packages/li-editor/src/layout/SideNav/NavMenu/style.ts @@ -0,0 +1,64 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../../hooks'; + +const useStyle = () => { + const { colorText, colorPrimaryTextActive } = useAntdToken(); + + return { + navMenu: css` + width: 100%; + margin: 0; + padding: 0; + text-align: center; + `, + + menuItem: css` + position: relative; + display: flex; + flex-direction: column; + padding: 10px 0; + color: ${colorText}; + text-align: center; + cursor: pointer; + + &::before { + position: absolute; + top: 0; + bottom: 0; + left: -3px; + display: block; + width: 3px; + border-radius: 0 100px 100px 0; + visibility: hidden; + transition: left 0.4s ease-in; + content: ''; + } + `, + + menuItemActive: css` + color: ${colorPrimaryTextActive}; + + &::before { + left: 0; + background: ${colorPrimaryTextActive}; + visibility: visible; + } + `, + + menuItemIcon: css` + padding: 4px 0; + font-size: 18px; + line-height: 1; + `, + + menuItemTitle: css` + padding: 2px 0; + font-weight: bold; + font-size: 12px; + line-height: 1; + white-space: nowrap; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/layout/SideNav/index.less b/packages/li-editor/src/layout/SideNav/index.less deleted file mode 100644 index f9888173..00000000 --- a/packages/li-editor/src/layout/SideNav/index.less +++ /dev/null @@ -1,18 +0,0 @@ -@import '../../theme/index.less'; - -.@{prefix}-side-nav { - display: flex; - flex-direction: column; - align-items: center; - width: 46px; - background-color: @bg-color-primary; - - &__menu { - margin-top: 0; - } - - &__bottom { - margin-top: auto; - padding-bottom: 25px; - } -} diff --git a/packages/li-editor/src/layout/SideNav/index.tsx b/packages/li-editor/src/layout/SideNav/index.tsx index 151bb9b1..14475b2d 100644 --- a/packages/li-editor/src/layout/SideNav/index.tsx +++ b/packages/li-editor/src/layout/SideNav/index.tsx @@ -1,16 +1,18 @@ import { Space } from 'antd'; import classNames from 'classnames'; import React, { useMemo } from 'react'; -import { useEditorState } from '../../hooks'; +import { useEditorState, usePrefixCls } from '../../hooks'; import { useEditorContext } from '../../hooks/internal'; -import './index.less'; import NavMenu from './NavMenu'; +import useStyle from './style'; type SideNavProps = { className?: string; }; const SideNav: React.FC<SideNavProps> = (props) => { + const prefixCls = usePrefixCls('side-nav'); + const styles = useStyle(); const { containerSlotMap, editorService } = useEditorContext(); const { state, updateState } = useEditorState(); const topWidgets = containerSlotMap.SideNav?.top || []; @@ -28,19 +30,19 @@ const SideNav: React.FC<SideNavProps> = (props) => { }; return ( - <div className={classNames('li-side-nav', props.className)}> + <div className={classNames(`${prefixCls}`, styles.sideNav, props.className)}> <div className="li-side-nav__top"> {topWidgets.map((widget) => ( <widget.component key={widget.metadata.name} /> ))} </div> <NavMenu - className="li-side-nav__menu" + className={classNames(`${prefixCls}__nemu`, styles.sideNavMenu)} selectedKey={state.activeNavMenuKey} items={navMenuList} onChange={onChange} /> - <div className={'li-side-nav__bottom'}> + <div className={classNames(`${prefixCls}__bottom`, styles.sideNavBottom)}> <Space direction="vertical" size="middle"> {actionsWidgets.map((widget) => ( <widget.component key={widget.metadata.name} /> diff --git a/packages/li-editor/src/layout/SideNav/style.ts b/packages/li-editor/src/layout/SideNav/style.ts new file mode 100644 index 00000000..a1d82b99 --- /dev/null +++ b/packages/li-editor/src/layout/SideNav/style.ts @@ -0,0 +1,27 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../hooks'; + +const useStyle = () => { + const { colorBgContainer } = useAntdToken(); + + return { + sideNav: css` + display: flex; + flex-direction: column; + align-items: center; + width: 46px; + background-color: ${colorBgContainer}; + `, + + sideNavMenu: css` + margin-top: 0; + `, + + sideNavBottom: css` + margin-top: auto; + padding-bottom: 25px; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/layout/SidePanel/index.less b/packages/li-editor/src/layout/SidePanel/index.less deleted file mode 100644 index 350cfe15..00000000 --- a/packages/li-editor/src/layout/SidePanel/index.less +++ /dev/null @@ -1,18 +0,0 @@ -@import '../../theme/index.less'; - -.@{prefix}-side-panel { - display: flex; - flex-direction: column; - height: 100%; - background-color: @bg-color-secondary; - border-left: 1px solid @border-secondary-color; - box-shadow: rgba(0, 0, 0, 0.1) 0 0 5px 1px; - - &__header { - padding: 0 20px; - } - - &__content { - overflow: hidden; - } -} diff --git a/packages/li-editor/src/layout/SidePanel/index.tsx b/packages/li-editor/src/layout/SidePanel/index.tsx index 64defbe0..3ee2cf06 100644 --- a/packages/li-editor/src/layout/SidePanel/index.tsx +++ b/packages/li-editor/src/layout/SidePanel/index.tsx @@ -1,8 +1,8 @@ import classNames from 'classnames'; import React, { useMemo } from 'react'; -import { useEditorState } from '../../hooks'; +import { useEditorState, usePrefixCls } from '../../hooks'; import { useEditorContext } from '../../hooks/internal'; -import './index.less'; +import useStyle from './style'; type SidePanelProps = { className?: string; @@ -10,6 +10,8 @@ type SidePanelProps = { const SidePanel: React.FC<SidePanelProps> = (props) => { const { className } = props; + const prefixCls = usePrefixCls('side-panel'); + const styles = useStyle(); const { editorService } = useEditorContext(); const { state } = useEditorState(); const navMenuList = useMemo(() => editorService.getNavMenuList(), []); @@ -17,9 +19,9 @@ const SidePanel: React.FC<SidePanelProps> = (props) => { const { component: Component } = matchItem!; return ( - <div className={classNames('li-side-panel', className)}> - <div className="li-side-bar__header" /> - <Component className="li-side-panel__content" /> + <div className={classNames(`${prefixCls}`, styles.sidePanel, className)}> + <div className={classNames(`${prefixCls}__header`, styles.panelHeader)} /> + <Component className={classNames(`${prefixCls}__content`, styles.panelContent)} /> </div> ); }; diff --git a/packages/li-editor/src/layout/SidePanel/style.ts b/packages/li-editor/src/layout/SidePanel/style.ts new file mode 100644 index 00000000..b15d0eac --- /dev/null +++ b/packages/li-editor/src/layout/SidePanel/style.ts @@ -0,0 +1,26 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../hooks'; + +const useStyle = () => { + const { colorSplit, boxShadowSecondary } = useAntdToken(); + + return { + sidePanel: css` + display: flex; + flex-direction: column; + height: 100%; + border-left: 1px solid ${colorSplit}; + box-shadow: ${boxShadowSecondary}; + `, + + panelHeader: css` + padding: 0 20px; + `, + + panelContent: css` + overflow: hidden; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/layout/index.less b/packages/li-editor/src/layout/index.less deleted file mode 100644 index a0c4f844..00000000 --- a/packages/li-editor/src/layout/index.less +++ /dev/null @@ -1,74 +0,0 @@ -@import '../theme/index.less'; - -.@{prefix}-editor-layout { - position: relative; - display: flex; - - /* 滚动条整体部分,必须要设置 */ - ::-webkit-scrollbar { - width: 7px; - height: 7px; - appearance: none; - } - - /* 滚动条的滑块按钮 */ - ::-webkit-scrollbar-thumb { - background: @border-secondary-color; - border-radius: 3px; - cursor: pointer; - - &:hover { - background-color: @border-primary-color; - } - } - - /* 滚动条的轨道 */ - ::-webkit-scrollbar-track { - background: none; - border-radius: 0; - } - - &__loading { - position: absolute; - top: 30px; - left: 50%; - z-index: 10; - display: flex; - align-items: center; - justify-content: space-around; - width: 180px; - margin-left: 50px; - padding: 15px; - color: @text-secondary-color; - background-color: @bg-color-secondary; - border-radius: @border-radius; - } - - &__left { - position: relative; - display: flex; - color: @text-primary-color; - } - - &__side-nav { - z-index: 2; - } - - &__side-panel { - z-index: 1; - width: 350px; - transition: width 50ms ease 0s; - - &_hidden { - width: 0; - visibility: hidden; - } - } - - &__cavans { - flex: 1; - overflow: hidden; - text-align: center; - transition: width 50ms ease 0s; - } -} diff --git a/packages/li-editor/src/layout/index.tsx b/packages/li-editor/src/layout/index.tsx index 17a48e8f..08af674d 100644 --- a/packages/li-editor/src/layout/index.tsx +++ b/packages/li-editor/src/layout/index.tsx @@ -1,12 +1,12 @@ import { ConfigProvider, notification, Spin } from 'antd'; -import classNames from 'classnames'; +import cx from 'classnames'; import React, { useEffect } from 'react'; -import { useEditorDatasets, useEditorState } from '../hooks'; -import './index.less'; +import { useEditorDatasets, useEditorState, usePrefixCls } from '../hooks'; import type { RuntimeAppProps } from './RuntimeApp'; import RuntimeApp from './RuntimeApp'; import SideNav from './SideNav'; import SidePanel from './SidePanel'; +import useStyle from './style'; export type LayoutProps = RuntimeAppProps; @@ -22,6 +22,8 @@ const Layout: React.FC<LayoutProps> = (props) => { const [notificationApi, contextHolder] = notification.useNotification(); const { state } = useEditorState(); const { editorDatasets, isLoading } = useEditorDatasets(); + const prefixCls = usePrefixCls('editor-layout'); + const styles = useStyle(); useEffect(() => { editorDatasets.forEach((editorDataset) => { @@ -35,25 +37,25 @@ const Layout: React.FC<LayoutProps> = (props) => { }, [editorDatasets]); return ( - <div className={classNames('li-editor', 'li-editor-layout', className)} style={style}> + <div className={cx(`${prefixCls}`, styles.editorLayout, className)} style={style}> <ConfigProvider theme={DefaultTheme}> {contextHolder} {isLoading && ( - <div className="li-editor-layout__loading"> + <div className={cx(`${prefixCls}__loading`, styles.loading)}> <Spin /> <span>数据集加载中...</span> </div> )} - <div className="li-editor-layout__left"> - <SideNav className="li-editor-layout__side-nav" /> + <div className={cx(`${prefixCls}__left`, styles.left)}> + <SideNav className={cx(`${prefixCls}__side-nav`, styles.sideNav)} /> <SidePanel - className={classNames('li-editor-layout__side-panel', { - 'li-editor-layout__side-panel_hidden': state.collapsed, + className={cx(`${prefixCls}__side-panel`, styles.sidePanel, { + [styles.sidePanelHidden]: state.collapsed, })} /> </div> </ConfigProvider> - <RuntimeApp className="li-editor-layout__cavans" App={App} /> + <RuntimeApp className={cx(`${prefixCls}__cavans`, styles.cavans)} App={App} /> </div> ); }; diff --git a/packages/li-editor/src/layout/style.ts b/packages/li-editor/src/layout/style.ts new file mode 100644 index 00000000..082999d5 --- /dev/null +++ b/packages/li-editor/src/layout/style.ts @@ -0,0 +1,97 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../hooks'; + +const useStyle = () => { + const { + colorBgLayout, + colorBgContainer, + colorFillSecondary, + colorFill, + colorText, + colorTextSecondary, + borderRadius, + } = useAntdToken(); + + return { + editorLayout: css` + position: relative; + display: flex; + + /* 滚动条整体部分,必须要设置 */ + ::-webkit-scrollbar { + width: 7px; + height: 7px; + appearance: none; + } + + /* 滚动条的滑块按钮 */ + ::-webkit-scrollbar-thumb { + background: ${colorFillSecondary}; + border-radius: 3px; + cursor: pointer; + + &:hover { + background-color: ${colorFill}; + } + } + + /* 滚动条的轨道 */ + ::-webkit-scrollbar-track { + background: none; + border-radius: 0; + } + `, + + loading: css` + position: absolute; + top: 30px; + left: 50%; + z-index: 10; + display: flex; + align-items: center; + justify-content: space-around; + width: 180px; + margin-left: 50px; + padding: 15px; + color: ${colorTextSecondary}; + background-color: ${colorBgContainer}; + border-radius: ${borderRadius}px; + `, + + left: css` + position: relative; + display: flex; + color: ${colorText}; + background-color: ${colorBgLayout}; + `, + + sideNav: css` + z-index: 2; + `, + + sidePanel: css` + z-index: 1; + width: 350px; + transition: width 50ms ease 0s; + + &_hidden { + width: 0; + visibility: hidden; + } + `, + + sidePanelHidden: css` + width: 0; + visibility: hidden; + `, + + cavans: css` + flex: 1; + overflow: hidden; + text-align: center; + transition: width 50ms ease 0s; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/theme/dark.less b/packages/li-editor/src/theme/dark.less deleted file mode 100644 index 8a155c2e..00000000 --- a/packages/li-editor/src/theme/dark.less +++ /dev/null @@ -1,13 +0,0 @@ -@import './variables.less'; - -// 边框色 -@border-primary-color: #434343; -@border-secondary-color: #303030; - -// 文本色 -@text-primary-color: fade(#fff, 85%); -@text-secondary-color: fade(#fff, 45%); - -// 高亮组件背景色 -@bg-color-primary: #2d3849; -@bg-color-secondary: #1f2d3a; diff --git a/packages/li-editor/src/theme/default.less b/packages/li-editor/src/theme/default.less deleted file mode 100644 index fe412f05..00000000 --- a/packages/li-editor/src/theme/default.less +++ /dev/null @@ -1,13 +0,0 @@ -@import './variables.less'; - -// 边框色 -@border-primary-color: hsv(0, 0, 85%); -@border-secondary-color: hsv(0, 0, 94%); - -// 文本色 -@text-primary-color: fade(#000, 85%); -@text-secondary-color: fade(#000, 45%); - -// 高亮组件背景色 -@bg-color-primary: #fff; -@bg-color-secondary: #fff; diff --git a/packages/li-editor/src/theme/index.less b/packages/li-editor/src/theme/index.less deleted file mode 100644 index ffaf51cc..00000000 --- a/packages/li-editor/src/theme/index.less +++ /dev/null @@ -1,22 +0,0 @@ -@editor-theme: 'default'; - -// @import './default.less'; -// @import './dark.less'; -@import './@{editor-theme}.less'; - -:root { - // 主题色 - --@{prefix}-primary-color: @primary-color-1; - - // 边框色 - --@{prefix}-border-primary-color: @border-primary-color; - // 文本色 - --@{prefix}-text-primary-color: @text-primary-color; - --@{prefix}-text-secondary-color: @text-secondary-color; - // 高亮组件背景色 - --@{prefix}-bg-color-primary: @bg-color-primary; - --@{prefix}-bg-color-secondary: @bg-color-secondary; - - // 组件圆角 - --@{prefix}-border-radius: @border-radius; -} diff --git a/packages/li-editor/src/theme/variables.less b/packages/li-editor/src/theme/variables.less deleted file mode 100644 index 0bb2992f..00000000 --- a/packages/li-editor/src/theme/variables.less +++ /dev/null @@ -1,11 +0,0 @@ -/* 类名前缀 */ -@prefix: li; - -/* 颜色表 */ -// 主题色 -@primary-color-1: #39f; -// @primary-color-2: ; - -/* 尺寸表 */ -// 组件圆角 -@border-radius: 4px; diff --git a/packages/li-editor/src/widgets/DatasetPreview/DatasetPreview.less b/packages/li-editor/src/widgets/DatasetPreview/DatasetPreview.less deleted file mode 100644 index 156bdcbf..00000000 --- a/packages/li-editor/src/widgets/DatasetPreview/DatasetPreview.less +++ /dev/null @@ -1,22 +0,0 @@ -@import '../../theme/index.less'; - -.@{prefix}-dataset-preview { - min-width: 600px; - - &__clamp { - display: inline-block; - width: 150px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - &__table { - width: 100%; - padding: 20px; - } - - &__column-title { - width: 100%; - } -} diff --git a/packages/li-editor/src/widgets/DatasetPreview/DatasetPreview.tsx b/packages/li-editor/src/widgets/DatasetPreview/DatasetPreview.tsx index 916e7853..540592b3 100644 --- a/packages/li-editor/src/widgets/DatasetPreview/DatasetPreview.tsx +++ b/packages/li-editor/src/widgets/DatasetPreview/DatasetPreview.tsx @@ -2,10 +2,11 @@ import { Modal, Table, Tooltip } from 'antd'; import type { ColumnsType } from 'antd/lib/table'; import { uniqueId } from 'lodash-es'; import React, { useState } from 'react'; -import { useEditorDataset } from '../../hooks'; +import classNames from 'classnames'; +import { useEditorDataset, usePrefixCls } from '../../hooks'; import type { ImplementEditorPreviewDatasetWidgetProps } from '../../types'; -import './DatasetPreview.less'; import TypeTag from './TypeTag'; +import useStyle from './style'; type DatasetPreviewProps = ImplementEditorPreviewDatasetWidgetProps; @@ -13,6 +14,8 @@ const DatasetPreview = (props: DatasetPreviewProps) => { const { datasetId, visible, onCancel } = props; const [pagination, setPagination] = useState({ current: 1, pageSize: 50 }); const editorDataset = useEditorDataset(datasetId); + const prefixCls = usePrefixCls('dataset-preview'); + const styles = useStyle(); if (!editorDataset?.isLocalOrRemoteDataset) { return null; @@ -41,24 +44,26 @@ const DatasetPreview = (props: DatasetPreviewProps) => { if (typeof value === 'object') { return ( <Tooltip title={JSON.stringify(value)}> - <span className="li-dataset-preview__clamp">{JSON.stringify(value)}</span> + <span className={classNames(`${prefixCls}__clamp`, styles.datasetPreviewClamp)}> + {JSON.stringify(value)} + </span> </Tooltip> ); } else if (typeof value === 'string') { return value.length > 20 ? ( <Tooltip title={value}> - <span className="li-dataset-preview__clamp">{value}</span> + <span className={classNames(`${prefixCls}__clamp`, styles.datasetPreviewClamp)}>{value}</span> </Tooltip> ) : ( - <span className="li-dataset-preview__clamp">{value}</span> + <span className={classNames(`${prefixCls}__clamp`, styles.datasetPreviewClamp)}>{value}</span> ); } else { - return <span className="li-dataset-preview__clamp">{value}</span>; + return <span className={classNames(`${prefixCls}__clamp`, styles.datasetPreviewClamp)}>{value}</span>; } }, title() { return ( - <div className="li-dataset-preview__column-title"> + <div className={classNames(`${prefixCls}__clamp-title`, styles.datasetPreviewClampTitle)}> <TypeTag type={item.type} /> <span title={item.name}>{item.name}</span> </div> @@ -71,7 +76,7 @@ const DatasetPreview = (props: DatasetPreviewProps) => { return ( <Modal - className="li-dataset-preview" + className={classNames(prefixCls, styles.datasetPreview)} title={`${editorDataset.metadata.name}`} open={visible} destroyOnClose @@ -80,7 +85,7 @@ const DatasetPreview = (props: DatasetPreviewProps) => { onCancel={() => onCancel()} > <Table - className="li-dataset-preview__table" + className={classNames(`${prefixCls}__table`, styles.datasetPreviewTable)} dataSource={tableData} rowKey={(record) => uniqueId(`location-insight${record.id}`)} bordered diff --git a/packages/li-editor/src/widgets/DatasetPreview/style.ts b/packages/li-editor/src/widgets/DatasetPreview/style.ts new file mode 100644 index 00000000..a7cb3bae --- /dev/null +++ b/packages/li-editor/src/widgets/DatasetPreview/style.ts @@ -0,0 +1,28 @@ +import { css } from '@emotion/css'; + +const useStyle = () => { + return { + datasetPreview: css` + min-width: 600px; + `, + + datasetPreviewClamp: css` + display: inline-block; + width: 150px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + `, + + datasetPreviewTable: css` + width: 100%; + padding: 20px; + `, + + datasetPreviewClampTitle: css` + width: 100%; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/index.less b/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/index.less deleted file mode 100644 index 6f1a192c..00000000 --- a/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/index.less +++ /dev/null @@ -1,72 +0,0 @@ -@import '../../../../theme/index.less'; - -.@{prefix}-dataset-list { - &__card { - position: relative; - width: auto; - padding: 8px; - background-color: @bg-color-primary; - border: 1px solid @border-secondary-color; - border-left: 3px solid @primary-color-1; - border-radius: @border-radius; - cursor: pointer; - - & + & { - margin-top: 10px; - } - } - - &__actions:hover &__actions-item_show { - opacity: 1 !important; - } - - &__actions { - position: absolute; - top: 0; - right: 10px; - height: 40px !important; - padding-top: 6px; - cursor: pointer; - - .ant-space-item:last-child { - margin-left: -5px !important; - } - - &-item_hide { - opacity: 0; - } - } - - &__info { - width: 200px; - height: 100%; - padding-top: 3px; - overflow: hidden; - .@{prefix}-title-name__title { - width: 200px !important; - } - - > * { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - &-name { - color: #979a9d; - font-size: 12px; - } - &-count { - color: #979a9d; - } - } - - &__popconfirm-title { - margin-bottom: 0; - color: #bbb; - font-size: 10px; - } - - &__popconfirm-layers-count { - color: #faad14; - } -} diff --git a/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/index.tsx b/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/index.tsx index 9ad755b4..26c9b178 100644 --- a/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/index.tsx +++ b/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/index.tsx @@ -7,8 +7,8 @@ import classnames from 'classnames'; import { downloadText } from 'download.js'; import React, { useState } from 'react'; import DatasetName from '../../../../components/EditName'; -import { useEditorDataset, useEditorState } from '../../../../hooks'; -import './index.less'; +import { useEditorDataset, useEditorState, usePrefixCls } from '../../../../hooks'; +import useStyle from './style'; export type DatasetItemProps = { className?: string; @@ -20,6 +20,8 @@ export type DatasetItemProps = { const DatasetItem = (props: DatasetItemProps) => { const { dataset: datasetSchema, onReplaceDataset, onPreviewDataset, className } = props; const { state, updateState } = useEditorState(); + const prefixCls = usePrefixCls('dataset-list'); + const styles = useStyle(); const [isEditName, setIsEditName] = useState(false); const editorDataset = useEditorDataset(datasetSchema.id); const isLocalOrRemoteDataSource = editorDataset?.isLocalOrRemoteDataset; @@ -96,8 +98,8 @@ const DatasetItem = (props: DatasetItemProps) => { ]; return ( - <div className={classnames('li-dataset-list__card', className)}> - <div className="li-dataset-list__info"> + <div className={classnames(`${prefixCls}__card`, styles.listCard, className)}> + <div className={classnames(`${prefixCls}__info`, styles.listInfo)}> <DatasetName name={datasetSchema.metadata.name} isEdit={isEditName} @@ -108,14 +110,18 @@ const DatasetItem = (props: DatasetItemProps) => { /> <div - className="li-dataset-list__info-name" + className={classnames(`${prefixCls}__info-name`, styles.infoName)} onClick={(e) => { e.stopPropagation(); }} > {isLocalOrRemoteDataSource ? ( <> - 共<span className="li-dataset-list__info-count">{editorDataset.data.length}</span>行数据 + 共 + <span className={classnames(`${prefixCls}__info-count`, styles.infoCount)}> + {editorDataset.data.length} + </span> + 行数据 </> ) : ( editorDataset?.metadata.description @@ -123,10 +129,11 @@ const DatasetItem = (props: DatasetItemProps) => { </div> </div> - <Space className="li-dataset-list__actions" onClick={(e) => e.stopPropagation()}> + <Space className={classnames(`${prefixCls}__actions`, styles.listActions)} onClick={(e) => e.stopPropagation()}> <Tooltip title="点击修改数据集名称"> <FormOutlined - className={classnames('li-dataset-list__actions-item_hide', 'li-dataset-list__actions-item_show')} + data-comp="dataset-actions-item_hover-show" + className={classnames(`${prefixCls}__actions-item`, styles.actionsItem)} onClick={() => { setIsEditName(true); }} @@ -137,9 +144,9 @@ const DatasetItem = (props: DatasetItemProps) => { <div> <span>你确定要删除{datasetSchema.metadata.name}吗</span> {getDelLayersCount(datasetSchema.id) ? ( - <p className="li-dataset-list__popconfirm-title"> + <p className={classnames(`${prefixCls}__popconfirm-title`, styles.popconfirmTitle)}> 删掉此数据集,会删除与此数据集关联的 - <span className="li-dataset-list__popconfirm-layers-count"> + <span className={classnames(`${prefixCls}__popconfirm-layers-count`, styles.popconfirmLayersCount)}> {getDelLayersCount(datasetSchema.id)} </span> 个图层 @@ -154,7 +161,8 @@ const DatasetItem = (props: DatasetItemProps) => { > <Tooltip title="删除数据集" placement="top"> <DeleteOutlined - className={classnames('li-dataset-list__actions-item_hide', 'li-dataset-list__actions-item_show')} + data-comp="dataset-actions-item_hover-show" + className={classnames(`${prefixCls}__actions-item`, styles.actionsItem)} onClick={(e) => e.stopPropagation()} /> </Tooltip> diff --git a/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/style.ts b/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/style.ts new file mode 100644 index 00000000..78ebc6dd --- /dev/null +++ b/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/DatasetItem/style.ts @@ -0,0 +1,78 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../../../hooks'; + +const useStyle = () => { + const { antCls, colorBgContainer, colorSplit, colorPrimary, borderRadius } = useAntdToken(); + + return { + listCard: css` + position: relative; + width: auto; + padding: 8px; + background-color: ${colorBgContainer}; + border: 1px solid ${colorSplit}; + border-left: 3px solid ${colorPrimary}; + border-radius: ${borderRadius}px; + cursor: pointer; + + & + & { + margin-top: 10px; + } + `, + + listActions: css` + position: absolute; + top: 0; + right: 10px; + height: 40px !important; + padding-top: 6px; + cursor: pointer; + + ${antCls}-space-item { + opacity: 1; + } + + &:hover [data-comp='dataset-actions-item_hover-show'] { + opacity: 1 !important; + } + `, + + actionsItem: css` + opacity: 0; + `, + + listInfo: css` + width: 200px; + height: 100%; + padding-top: 3px; + overflow: hidden; + + > * { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + `, + + infoName: css` + color: #979a9d; + font-size: 12px; + `, + + infoCount: css` + color: #979a9d; + `, + + popconfirmTitle: css` + margin-bottom: 0; + color: #bbb; + font-size: 10px; + `, + + popconfirmLayersCount: css` + color: #faad14; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/index.less b/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/index.less deleted file mode 100644 index 1aff8e98..00000000 --- a/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/index.less +++ /dev/null @@ -1,5 +0,0 @@ -@import '../../../theme/index.less'; - -.@{prefix}-dataset-list { - padding-top: 10px; -} diff --git a/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/index.tsx b/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/index.tsx index e495bf5b..21285594 100644 --- a/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/index.tsx +++ b/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/index.tsx @@ -2,9 +2,9 @@ import { Empty } from 'antd'; import classnames from 'classnames'; import { isEmpty } from 'lodash-es'; import React from 'react'; -import { useEditorState } from '../../../hooks'; +import { useEditorState, usePrefixCls } from '../../../hooks'; import DatasetItem from './DatasetItem'; -import './index.less'; +import useStyle from './style'; export type DatasetListProps = { className?: string; @@ -15,13 +15,15 @@ export type DatasetListProps = { export default function DatasetList(props: DatasetListProps) { const { state } = useEditorState(); const { datasets } = state; + const prefixCls = usePrefixCls('dataset-list'); + const styles = useStyle(); if (isEmpty(datasets)) { return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据,请先添加数据集" />; } return ( - <div className={classnames('li-dataset-list', props.className)}> + <div className={classnames(prefixCls, styles.datasetList, props.className)}> {datasets.map((item) => { return ( <DatasetItem diff --git a/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/style.ts b/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/style.ts new file mode 100644 index 00000000..f6009f72 --- /dev/null +++ b/packages/li-editor/src/widgets/DatasetsPanel/DatasetList/style.ts @@ -0,0 +1,11 @@ +import { css } from '@emotion/css'; + +const useStyle = () => { + return { + datasetList: css` + width: 100%; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/DatasetsPanel/DatasetsPanel.less b/packages/li-editor/src/widgets/DatasetsPanel/DatasetsPanel.less deleted file mode 100644 index 8681492b..00000000 --- a/packages/li-editor/src/widgets/DatasetsPanel/DatasetsPanel.less +++ /dev/null @@ -1,28 +0,0 @@ -@import '../../theme/index.less'; - -.@{prefix}-datasets-panel { - position: relative; - height: 100%; - - &__header { - margin: 0 20px; - padding: 15px 0 15px; - font-weight: 500; - font-size: 16px; - border-bottom: 1px solid @border-primary-color; - } - - &__add-dataset { - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 20px; - font-size: 14px; - } - - &__dataset-list { - height: calc(100% - 57px - 52px); - padding: 0 20px 15px; - overflow-y: auto; - } -} diff --git a/packages/li-editor/src/widgets/DatasetsPanel/DatasetsPanel.tsx b/packages/li-editor/src/widgets/DatasetsPanel/DatasetsPanel.tsx index c15bcd0e..4573a2da 100644 --- a/packages/li-editor/src/widgets/DatasetsPanel/DatasetsPanel.tsx +++ b/packages/li-editor/src/widgets/DatasetsPanel/DatasetsPanel.tsx @@ -2,13 +2,13 @@ import { PlusOutlined } from '@ant-design/icons'; import { Button } from 'antd'; import classNames from 'classnames'; import React, { useState } from 'react'; -import { useEditorState } from '../../hooks'; +import { useEditorState, usePrefixCls } from '../../hooks'; import type { ImplementEditorWidgetProps } from '../../types'; import AddDataset from './AddDataset'; import DatasetList from './DatasetList'; -import './DatasetsPanel.less'; import PreviewDataset from './PreviewDataset'; import ReplaceDataset from './ReplaceDataset'; +import useStyle from './DatasetsPanelStyle'; interface DatasetsPanelProps extends ImplementEditorWidgetProps { className?: string; @@ -16,6 +16,8 @@ interface DatasetsPanelProps extends ImplementEditorWidgetProps { const DatasetsPanel: React.FC<DatasetsPanelProps> = (props: DatasetsPanelProps) => { const { className } = props; + const prefixCls = usePrefixCls('datasets-panel'); + const styles = useStyle(); const { state } = useEditorState(); const [addDatasetVisible, setAddDatasetVisible] = useState(false); const [replaceDatasetId, setReplaceDatasetId] = useState<string>(''); @@ -24,9 +26,9 @@ const DatasetsPanel: React.FC<DatasetsPanelProps> = (props: DatasetsPanelProps) const [previewDatasetVisible, setPreviewDatasetVisible] = useState(false); return ( - <div className={classNames('li-datasets-panel', className)}> - <div className="li-datasets-panel__header">数据</div> - <div className="li-datasets-panel__add-dataset"> + <div className={classNames(prefixCls, styles.datasetPanel, className)}> + <div className={classNames(`${prefixCls}__header`, styles.panelHeader)}>数据</div> + <div className={classNames(`${prefixCls}__add-dataset`, styles.addDataset)}> <span>数据集({state.datasets.length})</span> <Button type="primary" @@ -41,7 +43,7 @@ const DatasetsPanel: React.FC<DatasetsPanelProps> = (props: DatasetsPanelProps) </div> <DatasetList - className="li-datasets-panel__dataset-list" + className={classNames(`${prefixCls}__dataset-list`, styles.datasetList)} onReplaceDataset={(datasetId) => { setReplaceDatasetId(datasetId); setReplaceDatasetVisible(true); diff --git a/packages/li-editor/src/widgets/DatasetsPanel/DatasetsPanelStyle.ts b/packages/li-editor/src/widgets/DatasetsPanel/DatasetsPanelStyle.ts new file mode 100644 index 00000000..5fe94019 --- /dev/null +++ b/packages/li-editor/src/widgets/DatasetsPanel/DatasetsPanelStyle.ts @@ -0,0 +1,37 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../hooks'; + +const useStyle = () => { + const { colorSplit } = useAntdToken(); + + return { + datasetPanel: css` + position: relative; + height: 100%; + `, + + panelHeader: css` + margin: 0 20px; + padding: 15px 0 15px; + font-weight: 500; + font-size: 16px; + border-bottom: 1px solid ${colorSplit}; + `, + + addDataset: css` + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 20px; + font-size: 14px; + `, + + datasetList: css` + height: calc(100% - 57px - 52px); + padding: 0 20px 15px; + overflow-y: auto; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/Export/Export.less b/packages/li-editor/src/widgets/Export/Export.less deleted file mode 100644 index 1c5e3d7a..00000000 --- a/packages/li-editor/src/widgets/Export/Export.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '../../theme/index.less'; - -.@{prefix}-export-popover { - .ant-popover-arrow { - display: none; - } - - .ant-popover-inner-content { - padding: 0; - } -} diff --git a/packages/li-editor/src/widgets/Export/Export.tsx b/packages/li-editor/src/widgets/Export/Export.tsx index 259927e1..d7964863 100644 --- a/packages/li-editor/src/widgets/Export/Export.tsx +++ b/packages/li-editor/src/widgets/Export/Export.tsx @@ -1,14 +1,18 @@ import { CodeOutlined, DownloadOutlined, TableOutlined } from '@ant-design/icons'; import { Button, Popover, Tooltip } from 'antd'; import React, { useState } from 'react'; +import classNames from 'classnames'; import type { ImplementEditorWidgetProps } from '../../types'; -import './Export.less'; +import { usePrefixCls } from '../../hooks'; import ExportApp from './ExportApp'; import ExportData from './ExportData'; +import useStyle from './style'; type ExportProps = ImplementEditorWidgetProps; -const Export: React.FC<ExportProps> = (props) => { +const Export: React.FC<ExportProps> = () => { + const prefixCls = usePrefixCls('export-popover'); + const styles = useStyle(); const [exportDataVisible, setExportDataVisible] = useState(false); const [exportAppVisible, setExportAppVisible] = useState(false); const [toolTipOpen, setToolTipOpen] = useState(false); @@ -35,9 +39,10 @@ const Export: React.FC<ExportProps> = (props) => { return ( <> <Popover - overlayClassName="li-export-popover" + overlayClassName={classNames(prefixCls, styles.exportPopover)} placement="rightBottom" trigger="click" + arrow={false} content={exportPopoverContent} onOpenChange={(open) => { if (open) { diff --git a/packages/li-editor/src/widgets/Export/ExportApp/index.less b/packages/li-editor/src/widgets/Export/ExportApp/index.less deleted file mode 100644 index 027d2939..00000000 --- a/packages/li-editor/src/widgets/Export/ExportApp/index.less +++ /dev/null @@ -1,33 +0,0 @@ -@import '../../../theme/index.less'; - -.@{prefix}-export-app { - &__content { - margin: 8px 0 35px; - } - - &__content-item { - display: flex; - } - - &__title { - width: 185px; - margin-right: 60px; - } - - &__subtitle { - color: rgb(160, 167, 180); - font-size: 11px; - } - - &__code-pre { - display: inline-block; - width: 100%; - max-width: 600px; - height: 180px; - overflow: hidden; - overflow-y: auto; - color: @text-primary-color; - border: 1 solid @border-secondary-color; - border-radius: 2px; - } -} diff --git a/packages/li-editor/src/widgets/Export/ExportApp/index.tsx b/packages/li-editor/src/widgets/Export/ExportApp/index.tsx index 7ddce21e..be6776c8 100644 --- a/packages/li-editor/src/widgets/Export/ExportApp/index.tsx +++ b/packages/li-editor/src/widgets/Export/ExportApp/index.tsx @@ -1,7 +1,8 @@ import { Button, Modal } from 'antd'; import React from 'react'; -import { useEditorService } from '../../../hooks'; -import './index.less'; +import classNames from 'classnames'; +import { useEditorService, usePrefixCls } from '../../../hooks'; +import useStyle from './style'; type ExportAppProps = { visible: boolean; @@ -10,6 +11,8 @@ type ExportAppProps = { const ExportApp: React.FC<ExportAppProps> = (props) => { const { visible, onVisbleChange } = props; + const prefixCls = usePrefixCls('export-app'); + const styles = useStyle(); const { editorService } = useEditorService(); const config = editorService.getApplicationConfig(); @@ -23,7 +26,7 @@ const ExportApp: React.FC<ExportAppProps> = (props) => { return ( <Modal - className="li-export-app" + className={prefixCls} width={960} title="导出配置" open={visible} @@ -45,12 +48,16 @@ const ExportApp: React.FC<ExportAppProps> = (props) => { </> } > - <div className="li-export-app__content-item"> - <div className="li-export-app__title"> + <div className={classNames(`${prefixCls}__content-item`, styles.contentItem)}> + <div className={classNames(`${prefixCls}__title`, styles.appTitle)}> <div>应用配置</div> - <div className="li-export-app__subtitle">应用的配置文件,导出后可以通过项目方式再次导入。</div> + <div className={classNames(`${prefixCls}__subtitle`, styles.appSubtitle)}> + 应用的配置文件,导出后可以通过项目方式再次导入。 + </div> </div> - <pre className="li-export-app__code-pre">{JSON.stringify(config, null, ' ')}</pre> + <pre className={classNames(`${prefixCls}__code-pre`, styles.appCodePre)}> + {JSON.stringify(config, null, ' ')} + </pre> </div> </Modal> ); diff --git a/packages/li-editor/src/widgets/Export/ExportApp/style.ts b/packages/li-editor/src/widgets/Export/ExportApp/style.ts new file mode 100644 index 00000000..8d63d3fd --- /dev/null +++ b/packages/li-editor/src/widgets/Export/ExportApp/style.ts @@ -0,0 +1,36 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../../hooks'; + +const useStyle = () => { + const { colorText, colorSplit } = useAntdToken(); + + return { + contentItem: css` + display: flex; + `, + + appTitle: css` + width: 185px; + margin-right: 60px; + `, + + appSubtitle: css` + color: rgb(160, 167, 180); + font-size: 11px; + `, + + appCodePre: css` + display: inline-block; + width: 100%; + max-width: 600px; + height: 180px; + overflow: hidden; + overflow-y: auto; + color: ${colorText}; + border: 1 solid ${colorSplit}; + border-radius: 2px; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/Export/ExportData/index.less b/packages/li-editor/src/widgets/Export/ExportData/index.less deleted file mode 100644 index 8d75cb2f..00000000 --- a/packages/li-editor/src/widgets/Export/ExportData/index.less +++ /dev/null @@ -1,15 +0,0 @@ -@import '../../../theme/index.less'; - -.@{prefix}-export-data { - &__form-label { - display: flex; - flex-direction: column; - align-items: flex-start; - margin: 35px 0; - } - - &__form-desc { - color: rgb(160, 167, 180); - font-size: 11px; - } -} diff --git a/packages/li-editor/src/widgets/Export/ExportData/index.tsx b/packages/li-editor/src/widgets/Export/ExportData/index.tsx index 7de8b04e..01322e4e 100644 --- a/packages/li-editor/src/widgets/Export/ExportData/index.tsx +++ b/packages/li-editor/src/widgets/Export/ExportData/index.tsx @@ -2,9 +2,10 @@ import type { LocalDatasetSchema } from '@antv/li-sdk'; import { Form, message, Modal, Radio, Select } from 'antd'; import { downloadBlob, downloadText } from 'download.js'; import React from 'react'; -import { useEditorState } from '../../../hooks'; +import classNames from 'classnames'; +import { useEditorState, usePrefixCls } from '../../../hooks'; import { json2CSV, json2geo, json2xlsx } from './helper'; -import './index.less'; +import useStyle from './style'; type ExportDataProps = { visible: boolean; @@ -12,6 +13,8 @@ type ExportDataProps = { }; const ExportData = ({ visible, onVisbleChange }: ExportDataProps) => { + const prefixCls = usePrefixCls('export-data'); + const styles = useStyle(); const [form] = Form.useForm(); const { state } = useEditorState(); const localDatasets = state.datasets.filter((dataset) => dataset.type === 'local') as LocalDatasetSchema[]; @@ -100,7 +103,7 @@ const ExportData = ({ visible, onVisbleChange }: ExportDataProps) => { return ( <Modal - className="li-export-data" + className={prefixCls} destroyOnClose open={visible} onCancel={() => onVisbleChange(false)} @@ -115,9 +118,9 @@ const ExportData = ({ visible, onVisbleChange }: ExportDataProps) => { <Form.Item name="dataSourceId" label={ - <div className="li-export-data__form-label"> + <div className={classNames(`${prefixCls}__form-label`, styles.formLabel)}> <span>数据集</span> - <span className="li-export-data__form-desc">选择要导出的数据集</span> + <span className={classNames(`${prefixCls}__form-desc`, styles.formDesc)}>选择要导出的数据集</span> </div> } style={{ padding: 20 }} @@ -135,9 +138,9 @@ const ExportData = ({ visible, onVisbleChange }: ExportDataProps) => { <Form.Item name="type" label={ - <div className="li-export-data__form-label"> + <div className={classNames(`${prefixCls}__form-label`, styles.formLabel)}> <span>数据类型</span> - <span className="li-export-data__form-desc">选择要导出的数据类型</span> + <span className={classNames(`${prefixCls}__form-desc`, styles.formDesc)}>选择要导出的数据类型</span> </div> } style={{ padding: 20 }} diff --git a/packages/li-editor/src/widgets/Export/ExportData/style.ts b/packages/li-editor/src/widgets/Export/ExportData/style.ts new file mode 100644 index 00000000..86562e61 --- /dev/null +++ b/packages/li-editor/src/widgets/Export/ExportData/style.ts @@ -0,0 +1,22 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../../hooks'; + +const useStyle = () => { + const { antCls } = useAntdToken(); + + return { + formLabel: css` + display: flex; + flex-direction: column; + align-items: flex-start; + margin: 35px 0; + `, + + formDesc: css` + color: rgb(160, 167, 180); + font-size: 11px; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/Export/style.ts b/packages/li-editor/src/widgets/Export/style.ts new file mode 100644 index 00000000..2de294a5 --- /dev/null +++ b/packages/li-editor/src/widgets/Export/style.ts @@ -0,0 +1,16 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../hooks'; + +const useStyle = () => { + const { antCls } = useAntdToken(); + + return { + exportPopover: css` + ${antCls}-popover-inner-content { + padding: 0; + } + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/FetchDataset/DynamicFormItem/DynamicFormItemValue.tsx b/packages/li-editor/src/widgets/FetchDataset/DynamicFormItem/DynamicFormItemValue.tsx index 1cbcb092..58abcf4f 100644 --- a/packages/li-editor/src/widgets/FetchDataset/DynamicFormItem/DynamicFormItemValue.tsx +++ b/packages/li-editor/src/widgets/FetchDataset/DynamicFormItem/DynamicFormItemValue.tsx @@ -1,6 +1,8 @@ import { Input, InputNumber, Select, Switch } from 'antd'; import React, { useEffect, useState } from 'react'; -import './index.less'; +import classNames from 'classnames'; +import { usePrefixCls } from '../../../hooks'; +import useStyle from './style'; type Props = { onChange?: (e: any) => void; @@ -11,6 +13,8 @@ const DynamicFormItemValue = (props: Props) => { const [type, setType] = useState<Type>('string'); const [val, setVal] = useState<string | boolean | number>(); const { onChange } = props; + const prefixCls = usePrefixCls('li-dynamic-form-item__item__value'); + const styles = useStyle(); const onValueChange = (val: string | boolean | number) => { setVal(val); @@ -30,8 +34,8 @@ const DynamicFormItemValue = (props: Props) => { }, [type, val]); return ( - <div className="li-dynamic-form-item__item__value"> - <div className="li-dynamic-form-item__item__value__content"> + <div className={classNames(prefixCls, styles.itemValue)}> + <div className={classNames(`${prefixCls}__content`, styles.valueContent)}> {type === 'string' && <Input placeholder="请输入" onChange={(e) => onValueChange(e.target.value)} />} {type === 'boolean' && <Switch onChange={onValueChange} />} {type === 'number' && <InputNumber placeholder="请输入" onChange={(e) => onValueChange(Number(e))} />} @@ -44,7 +48,7 @@ const DynamicFormItemValue = (props: Props) => { /> )} </div> - <div className="li-dynamic-form-item__item__value__type"> + <div className={classNames(`${prefixCls}__type`, styles.valueType)}> <Select style={{ width: '90px' }} value={type} diff --git a/packages/li-editor/src/widgets/FetchDataset/DynamicFormItem/index.less b/packages/li-editor/src/widgets/FetchDataset/DynamicFormItem/index.less deleted file mode 100644 index 09e2d23e..00000000 --- a/packages/li-editor/src/widgets/FetchDataset/DynamicFormItem/index.less +++ /dev/null @@ -1,51 +0,0 @@ -@import '../../../theme/index.less'; - -.li-dynamic-form-item__item { - display: flex; - flex: 1; - justify-content: space-between; - height: 42px; - overflow: hidden; - - .ant-form-item { - margin-bottom: 10px; - } - - &__field { - width: 200px; - } - - &__icon { - width: 10px; - color: @border-primary-color; - } - - &__value { - display: flex; - align-items: center; - justify-content: space-between; - width: 450px; - overflow: hidden; - - &__content { - width: 100%; - - .ant-input-number { - width: 100%; - } - - .ant-input-number-input { - vertical-align: baseline; - } - } - - &__type { - margin-left: 5px; - } - } -} - -.li-dynamic-form-item__add-btn { - width: 100px; - margin: 0; -} diff --git a/packages/li-editor/src/widgets/FetchDataset/DynamicFormItem/index.tsx b/packages/li-editor/src/widgets/FetchDataset/DynamicFormItem/index.tsx index c62e5238..2432d238 100644 --- a/packages/li-editor/src/widgets/FetchDataset/DynamicFormItem/index.tsx +++ b/packages/li-editor/src/widgets/FetchDataset/DynamicFormItem/index.tsx @@ -1,8 +1,10 @@ import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; import { Button, Form, Input, Space } from 'antd'; import React from 'react'; +import classNames from 'classnames'; +import { usePrefixCls } from '../../../hooks'; import DynamicFormItemValue from './DynamicFormItemValue'; -import './index.less'; +import useStyle from './style'; type DynamicFormItemProps = { fieldName: string; @@ -10,25 +12,35 @@ type DynamicFormItemProps = { const DynamicFormItem = (props: DynamicFormItemProps) => { const { fieldName } = props; + const prefixCls = usePrefixCls('dynamic-form-item'); + const styles = useStyle(); return ( <Form.List name={fieldName}> {(fields, { add, remove }) => ( <> {fields.map(({ key, name, ...restField }) => ( - <Space key={key} align="baseline" className="li-dynamic-form-item__item"> - <Form.Item {...restField} name={[name, 'field']} className="li-dynamic-form-item__item__field"> + <Space key={key} align="baseline" className={classNames(`${prefixCls}__item`, styles.dynamicFormItem)}> + <Form.Item + {...restField} + name={[name, 'field']} + className={classNames(`${prefixCls}__item__field`, styles.itemField)} + > <Input placeholder="name" /> </Form.Item> - <div className="li-dynamic-form-item__item__icon">:</div> - <Form.Item {...restField} name={[name, 'value']} className="li-dynamic-form-item__item__value"> + <div className={classNames(`${prefixCls}__item__icon`, styles.itemIcon)}>:</div> + <Form.Item + {...restField} + name={[name, 'value']} + className={classNames(`${prefixCls}__item__value`, styles.itemValue)} + > <DynamicFormItemValue /> </Form.Item> <MinusCircleOutlined onClick={() => remove(name)} /> </Space> ))} - <Form.Item className="li-dynamic-form-item__add-btn"> + <Form.Item className={classNames(`${prefixCls}__add-btn`, styles.dynamicFormAddBtn)}> <Button onClick={() => add()} block icon={<PlusOutlined />}> 添加 </Button> diff --git a/packages/li-editor/src/widgets/FetchDataset/DynamicFormItem/style.ts b/packages/li-editor/src/widgets/FetchDataset/DynamicFormItem/style.ts new file mode 100644 index 00000000..2c42e291 --- /dev/null +++ b/packages/li-editor/src/widgets/FetchDataset/DynamicFormItem/style.ts @@ -0,0 +1,60 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../../hooks'; + +const useStyle = () => { + const { antCls, colorBorder } = useAntdToken(); + + return { + dynamicFormItem: css` + display: flex; + flex: 1; + justify-content: space-between; + height: 42px; + overflow: hidden; + + ${antCls}-form-item { + margin-bottom: 10px; + } + `, + + itemField: css` + width: 200px; + `, + + itemIcon: css` + width: 10px; + color: ${colorBorder}; + `, + + itemValue: css` + display: flex; + align-items: center; + justify-content: space-between; + width: 450px; + overflow: hidden; + `, + + valueContent: css` + width: 100%; + + ${antCls}-input-number { + width: 100%; + } + + ${antCls}-input-number-input { + vertical-align: baseline; + } + `, + + valueType: css` + margin-left: 5px; + `, + + dynamicFormAddBtn: css` + width: 100px; + margin: 0; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/FetchDataset/FetchDataset.less b/packages/li-editor/src/widgets/FetchDataset/FetchDataset.less deleted file mode 100644 index f0175737..00000000 --- a/packages/li-editor/src/widgets/FetchDataset/FetchDataset.less +++ /dev/null @@ -1,3 +0,0 @@ -.li-fetch-dataset { - width: 800px; -} diff --git a/packages/li-editor/src/widgets/FetchDataset/FetchDataset.tsx b/packages/li-editor/src/widgets/FetchDataset/FetchDataset.tsx index b3f6bf5a..4819e2f5 100644 --- a/packages/li-editor/src/widgets/FetchDataset/FetchDataset.tsx +++ b/packages/li-editor/src/widgets/FetchDataset/FetchDataset.tsx @@ -1,10 +1,11 @@ import { getUniqueId } from '@antv/li-sdk'; import { Button, Form, Input, Select, Space } from 'antd'; import React, { useEffect, useState } from 'react'; -import { useEditorService } from '../../hooks'; +import classNames from 'classnames'; +import { useEditorService, usePrefixCls } from '../../hooks'; import type { ImplementEditorAddDatasetWidgetProps } from '../../types'; import DynamicFormItem from './DynamicFormItem'; -import './FetchDataset.less'; +import useStyle from './FetchDatasetStyle'; import { getProperties } from './helper'; import ProcessingFunction from './ProcessingFunction'; import type { FetchDatasetConfig } from './types'; @@ -13,6 +14,8 @@ type FetchDatasetProps = ImplementEditorAddDatasetWidgetProps; export default function FetchDataset(props: FetchDatasetProps) { const { onSubmit, onCancel } = props; + const prefixCls = usePrefixCls('fetch-dataset'); + const styles = useStyle(); const { appService } = useEditorService(); const [datasetConfig, setDatasetConfig] = useState<FetchDatasetConfig>(); const [form] = Form.useForm(); @@ -53,7 +56,7 @@ export default function FetchDataset(props: FetchDatasetProps) { return ( <> - <div className="li-fetch-dataset"> + <div className={classNames(prefixCls, styles.fetchDataset)}> <Form requiredMark={false} form={form} onValuesChange={onFormChange} labelCol={{ span: 3 }}> <Form.Item name="name" label="名称" rules={[{ required: true, message: '请填写数据集名称' }]}> <Input placeholder="请输入数据集名称" /> diff --git a/packages/li-editor/src/widgets/FetchDataset/FetchDatasetStyle.ts b/packages/li-editor/src/widgets/FetchDataset/FetchDatasetStyle.ts new file mode 100644 index 00000000..73898b92 --- /dev/null +++ b/packages/li-editor/src/widgets/FetchDataset/FetchDatasetStyle.ts @@ -0,0 +1,11 @@ +import { css } from '@emotion/css'; + +const useStyle = () => { + return { + fetchDataset: css` + width: 800px; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/FetchDataset/ProcessingFunction/index.less b/packages/li-editor/src/widgets/FetchDataset/ProcessingFunction/index.less deleted file mode 100644 index 4e825c80..00000000 --- a/packages/li-editor/src/widgets/FetchDataset/ProcessingFunction/index.less +++ /dev/null @@ -1,27 +0,0 @@ -@import '../../../theme/index.less'; - -.li-provessing-function { - &__success-and-err { - margin-top: 10px; - - &__content { - display: flex; - align-items: center; - justify-content: center; - - &-js { - flex: 1; - height: 100px; - } - - &-icon { - width: 30px; - text-align: center; - - &:hover { - cursor: pointer; - } - } - } - } -} diff --git a/packages/li-editor/src/widgets/FetchDataset/ProcessingFunction/index.tsx b/packages/li-editor/src/widgets/FetchDataset/ProcessingFunction/index.tsx index f180d5c5..5f5ad658 100644 --- a/packages/li-editor/src/widgets/FetchDataset/ProcessingFunction/index.tsx +++ b/packages/li-editor/src/widgets/FetchDataset/ProcessingFunction/index.tsx @@ -2,8 +2,10 @@ import { DownOutlined, MinusCircleOutlined } from '@ant-design/icons'; import MonacoEditor from '@monaco-editor/react'; import { Button, Dropdown } from 'antd'; import React, { useRef, useState } from 'react'; +import classNames from 'classnames'; +import { usePrefixCls } from '../../../hooks'; import { getValue } from './helper'; -import './index.less'; +import useStyle from './style'; type ProcessingFunctionProps = { onChange?: (funs: { @@ -27,6 +29,8 @@ const ItemList = [ const ProcessingFunction = (props: ProcessingFunctionProps) => { const { onChange } = props; + const prefixCls = usePrefixCls('provessing-function'); + const styles = useStyle(); const [menus, setMenus] = useState(ItemList); const functionListRef = useRef<FuncItem[]>([]); @@ -83,8 +87,8 @@ function onComplete(res) { }; return ( - <div className="li-provessing-function"> - <div className="li-provessing-function__btn"> + <div className={prefixCls}> + <div className={`${prefixCls}__btn`}> <Dropdown menu={{ items: menus.map((item) => ({ ...item, onClick: () => onAddFunc(item) })) }} disabled={menus.length === 0} @@ -97,10 +101,10 @@ function onComplete(res) { {functionListRef.current.map((item: FuncItem) => { return ( - <div className="li-provessing-function__success-and-err" key={item.key}> + <div className={classNames(`${prefixCls}__success-and-err`, styles.successAndErr)} key={item.key}> <p>{item.name}:</p> - <div className="li-provessing-function__success-and-err__content"> - <div className="li-provessing-function__success-and-err__content-js"> + <div className={classNames(`${prefixCls}__success-and-err__content`, styles.content)}> + <div className={classNames(`${prefixCls}__success-and-err__content-js`, styles.contentJs)}> <MonacoEditor language="javascript" options={{ @@ -113,7 +117,7 @@ function onComplete(res) { defaultValue={item.value} /> </div> - <div className="li-provessing-function__success-and-err__content-icon"> + <div className={classNames(`${prefixCls}__success-and-err__content-icon`, styles.contentIcon)}> <MinusCircleOutlined onClick={() => { onDel(item.key); diff --git a/packages/li-editor/src/widgets/FetchDataset/ProcessingFunction/style.ts b/packages/li-editor/src/widgets/FetchDataset/ProcessingFunction/style.ts new file mode 100644 index 00000000..734036ff --- /dev/null +++ b/packages/li-editor/src/widgets/FetchDataset/ProcessingFunction/style.ts @@ -0,0 +1,31 @@ +import { css } from '@emotion/css'; + +const useStyle = () => { + return { + successAndErr: css` + margin-top: 10px; + `, + + content: css` + display: flex; + align-items: center; + justify-content: center; + `, + + contentJs: css` + flex: 1; + height: 100px; + `, + + contentIcon: css` + width: 30px; + text-align: center; + + &:hover { + cursor: pointer; + } + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/FiltersPanel/FilterCard/index.less b/packages/li-editor/src/widgets/FiltersPanel/FilterCard/index.less deleted file mode 100644 index 418c7fa2..00000000 --- a/packages/li-editor/src/widgets/FiltersPanel/FilterCard/index.less +++ /dev/null @@ -1,12 +0,0 @@ -@import '../../../theme/index.less'; -@cls-prefix: li-filter-widget-card; - -.@{cls-prefix} { - width: 100%; - margin-bottom: 10px; - background-color: @bg-color-primary; - - &__select { - width: 100%; - } -} diff --git a/packages/li-editor/src/widgets/FiltersPanel/FilterCard/index.tsx b/packages/li-editor/src/widgets/FiltersPanel/FilterCard/index.tsx index e54c8133..390aed8d 100644 --- a/packages/li-editor/src/widgets/FiltersPanel/FilterCard/index.tsx +++ b/packages/li-editor/src/widgets/FiltersPanel/FilterCard/index.tsx @@ -5,10 +5,9 @@ import { getDatasetFields } from '@antv/li-sdk'; import { Button, Card, Popconfirm, Select, theme } from 'antd'; import type { DefaultOptionType } from 'antd/lib/select'; import React, { useMemo } from 'react'; -import { useEditorDataset, useEditorState } from '../../../hooks'; -import './index.less'; - -const CLS_PREFIX = 'li-filter-widget-card'; +import classNames from 'classnames'; +import { useEditorDataset, useEditorState, usePrefixCls } from '../../../hooks'; +import useStyle from './style'; type FilterCardProps = { id: string; @@ -21,6 +20,8 @@ type FilterCardProps = { const { useToken } = theme; const FilterCard = ({ id: datasetId, datasetOptions, selectedDatasets, onDatasetIdChange, onDel }: FilterCardProps) => { + const prefixCls = usePrefixCls('filter-widget-card'); + const styles = useStyle(); const { token } = useToken(); const editorDataset = useEditorDataset(datasetId); const filter = editorDataset?.filter; @@ -100,7 +101,7 @@ const FilterCard = ({ id: datasetId, datasetOptions, selectedDatasets, onDataset const CardTitle = ( <Select showSearch - className={`${CLS_PREFIX}__select`} + className={classNames(`${prefixCls}__select`, styles.filterCardSelect)} size="small" placeholder="请选择数据集" value={datasetId} @@ -112,7 +113,7 @@ const FilterCard = ({ id: datasetId, datasetOptions, selectedDatasets, onDataset return ( <Card - className={`${CLS_PREFIX}`} + className={classNames(prefixCls, styles.filterCard)} title={CardTitle} headStyle={{ padding: '0 16px', borderLeft: `3px solid ${token.colorPrimary}` }} bodyStyle={{ padding: 0 }} diff --git a/packages/li-editor/src/widgets/FiltersPanel/FilterCard/style.ts b/packages/li-editor/src/widgets/FiltersPanel/FilterCard/style.ts new file mode 100644 index 00000000..69c8935d --- /dev/null +++ b/packages/li-editor/src/widgets/FiltersPanel/FilterCard/style.ts @@ -0,0 +1,20 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../../hooks'; + +const useStyle = () => { + const { colorBgContainer } = useAntdToken(); + + return { + filterCard: css` + width: 100%; + margin-bottom: 10px; + background-color: ${colorBgContainer}; + `, + + filterCardSelect: css` + width: 100%; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/FiltersPanel/FiltersPanel.less b/packages/li-editor/src/widgets/FiltersPanel/FiltersPanel.less deleted file mode 100644 index 3b3726c6..00000000 --- a/packages/li-editor/src/widgets/FiltersPanel/FiltersPanel.less +++ /dev/null @@ -1,28 +0,0 @@ -@import '../../theme/index.less'; - -.@{prefix}-filters-panel { - position: relative; - height: 100%; - - &__header { - margin: 0 20px; - padding: 15px 0 15px; - font-weight: 500; - font-size: 16px; - border-bottom: 1px solid @border-primary-color; - } - - &__add-filter { - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 20px; - font-size: 14px; - } - - &__filter-list { - max-height: calc(100% - 57px - 52px); - padding: 0 15px 20px; - overflow-y: auto; - } -} diff --git a/packages/li-editor/src/widgets/FiltersPanel/FiltersPanel.tsx b/packages/li-editor/src/widgets/FiltersPanel/FiltersPanel.tsx index f69a3379..67669ddd 100644 --- a/packages/li-editor/src/widgets/FiltersPanel/FiltersPanel.tsx +++ b/packages/li-editor/src/widgets/FiltersPanel/FiltersPanel.tsx @@ -5,11 +5,11 @@ import { Button, Empty, Popover, Select } from 'antd'; import classNames from 'classnames'; import { isEmpty, isUndefined } from 'lodash-es'; import React, { useMemo, useState } from 'react'; -import { useEditorState } from '../../hooks'; +import { useEditorState, usePrefixCls } from '../../hooks'; import type { ImplementEditorWidgetProps } from '../../types'; import PreviewDataset from '../DatasetsPanel/PreviewDataset'; import FilterCard from './FilterCard'; -import './FiltersPanel.less'; +import useStyle from './style'; type LocalOrRemoteDatasetSchema = LocalDatasetSchema | RemoteDatasetSchema; @@ -19,6 +19,8 @@ interface FiltersPanelProps extends ImplementEditorWidgetProps { const FiltersPanel: React.FC<FiltersPanelProps> = (props: FiltersPanelProps) => { const { className } = props; + const prefixCls = usePrefixCls('filters-panel'); + const styles = useStyle(); const { state, updateState } = useEditorState(); const [addFilterPanelOpen, setFilterPanelOpen] = useState(false); @@ -69,7 +71,7 @@ const FiltersPanel: React.FC<FiltersPanelProps> = (props: FiltersPanelProps) => }; const AddFilter = ( - <div className="li-filters-panel__add-filter"> + <div className={classNames(`${prefixCls}__add-filter`, styles.addFilter)}> <span>筛选器({filteredDatasets.length})</span> <Popover placement="bottomRight" @@ -105,10 +107,10 @@ const FiltersPanel: React.FC<FiltersPanelProps> = (props: FiltersPanelProps) => ); return ( - <div className={classNames('li-filters-panel', className)}> - <div className="li-filters-panel__header">筛选</div> + <div className={classNames(prefixCls, styles.filterPanel, className)}> + <div className={classNames(`${prefixCls}__header`, styles.panelHeader)}>筛选</div> {AddFilter} - <div className="li-filters-panel__filter-list"> + <div className={classNames(`${prefixCls}__filter-list`, styles.filterList)}> {isEmpty(filteredDatasets) ? ( <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据,请先添加筛选器" /> ) : ( diff --git a/packages/li-editor/src/widgets/FiltersPanel/style.ts b/packages/li-editor/src/widgets/FiltersPanel/style.ts new file mode 100644 index 00000000..8831d4d2 --- /dev/null +++ b/packages/li-editor/src/widgets/FiltersPanel/style.ts @@ -0,0 +1,37 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../hooks'; + +const useStyle = () => { + const { colorSplit } = useAntdToken(); + + return { + filterPanel: css` + position: relative; + height: 100%; + `, + + panelHeader: css` + margin: 0 20px; + padding: 15px 0 15px; + font-weight: 500; + font-size: 16px; + border-bottom: 1px solid ${colorSplit}; + `, + + addFilter: css` + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 20px; + font-size: 14px; + `, + + filterList: css` + max-height: calc(100% - 57px - 52px); + padding: 0 15px 20px; + overflow-y: auto; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/BaseFormSchemaField/VisTypeSelect/VisTypeSelect.less b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/BaseFormSchemaField/VisTypeSelect/VisTypeSelect.less deleted file mode 100644 index ed4754d3..00000000 --- a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/BaseFormSchemaField/VisTypeSelect/VisTypeSelect.less +++ /dev/null @@ -1,74 +0,0 @@ -@import url('../../../../../theme/index.less'); - -@layer-icon-bg: 'data:image/png;base64,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'; - -@prefix-select-cls: ~'@{prefix}-vis-type-select'; - -.@{prefix-select-cls} { - &__drop-down { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - max-height: 280px; - padding: 12px 5px; - overflow-y: auto; - } - - &__select-item { - display: flex; - flex-direction: column; - align-items: center; - width: 60px; - margin: 5px 0; - cursor: pointer; - } - - &__item-icon { - width: 50px; - height: 50px; - line-height: 50px; - color: rgb(106 116 133); - background-image: url(@layer-icon-bg); - background-repeat: no-repeat; - border-radius: @border-radius; - font-size: 50px; - - :hover { - color: @primary-color-1; - } - - &_selected { - color: @primary-color-1; - } - } - - &__item-label { - height: 20px; - line-height: 20px; - text-align: center; - } - - &__selected-option { - display: flex; - align-items: center; - width: 100%; - height: 100%; - margin: 0; - } - - &__selected-icon { - width: 22px; - height: 22px; - line-height: 22px; - color: @primary-color-1; - background-image: url(@layer-icon-bg); - background-repeat: no-repeat; - background-size: 22px 22px; - border-radius: @border-radius; - font-size: 22px; - } - - &__selected-label { - margin-left: 12px; - } -} diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/BaseFormSchemaField/VisTypeSelect/VisTypeSelect.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/BaseFormSchemaField/VisTypeSelect/VisTypeSelect.tsx index 22888326..7720220d 100644 --- a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/BaseFormSchemaField/VisTypeSelect/VisTypeSelect.tsx +++ b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/BaseFormSchemaField/VisTypeSelect/VisTypeSelect.tsx @@ -3,10 +3,14 @@ import type { SelectProps } from 'antd'; import { Select } from 'antd'; import classNames from 'classnames'; import React, { useState } from 'react'; -import './VisTypeSelect.less'; +import { usePrefixCls } from '../../../../../hooks'; +import useStyle from './style'; const VisTypeSelect: React.FC<SelectProps<any, any>> = (props) => { const { options, onChange, ...prop } = props; + const { className } = props; + const prefixCls = usePrefixCls('vis-type-select'); + const styles = useStyle(); const [open, setOpen] = useState(false); const onTypeChange = (val: string) => { @@ -20,21 +24,26 @@ const VisTypeSelect: React.FC<SelectProps<any, any>> = (props) => { open={open} virtual={false} onDropdownVisibleChange={(visible) => setOpen(visible)} - className="li-vis-type-select" + className={classNames(prefixCls, className)} dropdownRender={() => ( - <div className="li-vis-type-select__drop-down"> + <div className={classNames(`${prefixCls}__drop-down`, styles.dropDown)}> {options?.map((item: Record<string, any>, index) => { const isSelected = item.value === prop.value; return ( - <div className="li-vis-type-select__select-item" onClick={() => onTypeChange(item.value)} key={index}> + <div + className={classNames(`${prefixCls}__select-item`, styles.selectItem)} + onClick={() => onTypeChange(item.value)} + key={index} + > <div - className={classNames('li-vis-type-select__item-icon', { - 'li-vis-type-select__item-icon_selected': isSelected, + className={classNames(`${prefixCls}__item-icon`, styles.itemIcon, { + [`${prefixCls}__item-icon_selected`]: isSelected, + [styles.itemIconSelected]: isSelected, })} > <Icon component={item.icon} /> </div> - <span className="li-vis-type-select__item-label">{item.label}</span> + <span className={classNames(`${prefixCls}__item-label`, styles.itemLabel)}>{item.label}</span> </div> ); })} @@ -44,11 +53,11 @@ const VisTypeSelect: React.FC<SelectProps<any, any>> = (props) => { {options?.map((item: Record<string, any>, index) => { return ( <Select.Option value={item.value} key={index}> - <div className="li-vis-type-select__selected-option"> - <div className="li-vis-type-select__selected-icon"> + <div className={classNames(`${prefixCls}__selected-option`, styles.selectedOption)}> + <div className={classNames(`${prefixCls}__selected-icon`, styles.selectedIcon)}> <Icon component={item.icon} /> </div> - <span className="li-vis-type-select__selected-label">{item.label}</span> + <span className={classNames(`${prefixCls}__selected-label`, styles.selectedLabel)}>{item.label}</span> </div> </Select.Option> ); diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/BaseFormSchemaField/VisTypeSelect/constant.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/BaseFormSchemaField/VisTypeSelect/constant.tsx new file mode 100644 index 00000000..fe20404b --- /dev/null +++ b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/BaseFormSchemaField/VisTypeSelect/constant.tsx @@ -0,0 +1,2 @@ +export const LayerIconBg = + 'data:image/png;base64,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'; diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/BaseFormSchemaField/VisTypeSelect/style.ts b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/BaseFormSchemaField/VisTypeSelect/style.ts new file mode 100644 index 00000000..e1735a37 --- /dev/null +++ b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/BaseFormSchemaField/VisTypeSelect/style.ts @@ -0,0 +1,77 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../../../../hooks'; +import { LayerIconBg } from './constant'; + +const useStyle = () => { + const { colorPrimaryActive, colorPrimaryHover, borderRadius } = useAntdToken(); + + return { + dropDown: css` + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + max-height: 280px; + padding: 12px 5px; + overflow-y: auto; + `, + + selectItem: css` + display: flex; + flex-direction: column; + align-items: center; + width: 60px; + margin: 5px 0; + cursor: pointer; + `, + + itemIcon: css` + width: 50px; + height: 50px; + line-height: 50px; + color: rgb(106 116 133); + background-image: url(${LayerIconBg}); + background-repeat: no-repeat; + border-radius: @border-radius; + font-size: 50px; + + :hover { + color: ${colorPrimaryHover}; + } + `, + itemIconSelected: css` + color: ${colorPrimaryActive}; + `, + + itemLabel: css` + height: 20px; + line-height: 20px; + text-align: center; + `, + + selectedOption: css` + display: flex; + align-items: center; + width: 100%; + height: 100%; + margin: 0; + `, + + selectedIcon: css` + width: 22px; + height: 22px; + line-height: 22px; + color: ${colorPrimaryActive}; + background-image: url(${LayerIconBg}); + background-repeat: no-repeat; + background-size: 22px 22px; + border-radius: ${borderRadius}px; + font-size: 22px; + `, + + selectedLabel: css` + margin-left: 12px; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.less b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.less deleted file mode 100644 index e0ec8f2d..00000000 --- a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.less +++ /dev/null @@ -1,37 +0,0 @@ -@import '../../../../theme/index.less'; - -.@{prefix}-layer-form { - overflow-y: auto; - - .ant-badge-count { - color: @text-primary-color; - box-shadow: none; - } - - .ant-formily-item-label { - color: @text-primary-color; - } - - .ant-formily-item-asterisk { - color: @text-secondary-color; - } - - .ant-formily-item-label-tooltip-icon { - color: @text-secondary-color; - } - - .ant-collapse-item .ant-collapse-header { - padding: 6px 13px !important; - background-color: @bg-color-primary; - border: 1px solid @border-secondary-color; - border-radius: @border-radius !important; - } - - .ant-collapse-item .ant-collapse-content .ant-collapse-content-box { - padding: 10px 0 !important; - } - - .ant-collapse { - margin-bottom: 10px; - } -} diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.tsx index e0d885c3..4bdb46cc 100644 --- a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.tsx +++ b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/index.tsx @@ -6,10 +6,10 @@ import { useMemoizedFn } from 'ahooks'; import classNames from 'classnames'; import { max, min, pick } from 'lodash-es'; import React, { useMemo, useState } from 'react'; -import { useEditorDataset, useEditorService, useEditorState } from '../../../../hooks'; +import { useEditorDataset, useEditorService, useEditorState, usePrefixCls } from '../../../../hooks'; import BaseFormSchemaField from '../BaseFormSchemaField'; -import './index.less'; import StyleForm from './StyleForm'; +import useStyle from './style'; export type LayerFormValue = Pick<LayerSchema, 'type' | 'sourceConfig' | 'visConfig'>; type LayerStyleFormValue = Pick<LayerSchema, 'sourceConfig' | 'visConfig'>; @@ -21,6 +21,8 @@ type LayerFormProps = { }; const LayerForm: React.FC<LayerFormProps> = ({ className, config, onChange }) => { + const prefixCls = usePrefixCls('layer-form'); + const styles = useStyle(); const { state } = useEditorState(); const [visType, setVisType] = useState(config.type); const [datasetId, setDatasetId] = useState(config.sourceConfig.datasetId); @@ -106,7 +108,7 @@ const LayerForm: React.FC<LayerFormProps> = ({ className, config, onChange }) => }, []); return ( - <div className={classNames('li-layer-form', className)}> + <div className={classNames(prefixCls, styles.layerForm, className)}> {/* 基础配置,选择数据集和可视化类型 */} <Form form={baseForm} diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/style.ts b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/style.ts new file mode 100644 index 00000000..243ef77f --- /dev/null +++ b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/LayerForm/style.ts @@ -0,0 +1,46 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../../../hooks'; + +const useStyle = () => { + const { antCls, colorBgContainer, colorText, colorSplit, colorTextSecondary, borderRadius } = useAntdToken(); + + return { + layerForm: css` + overflow-y: auto; + + ${antCls}-badge-count { + color: ${colorText}; + box-shadow: none; + } + + ${antCls}-formily-item-label { + color: ${colorText}; + } + + ${antCls}-formily-item-asterisk { + color: ${colorTextSecondary}; + } + + ${antCls}-formily-item-label-tooltip-icon { + color: ${colorTextSecondary}; + } + + ${antCls}-collapse-item ${antCls}-collapse-header { + padding: 6px 13px !important; + background-color: ${colorBgContainer}; + border: 1px solid ${colorSplit}; + border-radius: ${borderRadius}px !important; + } + + ${antCls}-collapse-item ${antCls}-collapse-content ${antCls}-collapse-content-box { + padding: 10px 0 !important; + } + + ${antCls}-collapse { + margin-bottom: 10px; + } + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/index.less b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/index.less deleted file mode 100644 index d35d7b6f..00000000 --- a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/index.less +++ /dev/null @@ -1,39 +0,0 @@ -@import '../../../theme/index.less'; - -.@{prefix}-layer-attribute { - &__header { - display: flex; - align-items: center; - justify-content: space-between; - height: 57px; - margin: 0 20px; - overflow: hidden; - font-weight: 500; - font-size: 16px; - border-bottom: 1px solid @border-primary-color; - } - - &__title { - display: flex; - align-items: center; - } - - &__back-icon { - margin-right: 10px; - cursor: pointer; - - &:hover { - color: @primary-color-1; - } - } - - &__layer-form { - height: calc(100% - 57px); - padding: 15px 20px; - } - - &__dropdown-icon { - font-size: 16px; - cursor: pointer; - } -} diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/index.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/index.tsx index 8a9cdaa4..f4a4cbaa 100644 --- a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/index.tsx +++ b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/index.tsx @@ -6,8 +6,8 @@ import { Button, Dropdown, Space, Tooltip } from 'antd'; import classNames from 'classnames'; import React, { useCallback, useRef, useState } from 'react'; import LayerName from '../../../components/EditName'; -import { useEditorService, useEditorState } from '../../../hooks'; -import './index.less'; +import { useEditorService, useEditorState, usePrefixCls } from '../../../hooks'; +import useStyle from './style'; import type { LayerFormValue } from './LayerForm'; import LayerForm from './LayerForm'; @@ -19,6 +19,8 @@ type LayerAttributeProps = { const LayerAttribute: React.FC<LayerAttributeProps> = (props) => { const { className, onBack, config } = props; + const prefixCls = usePrefixCls('layer-attribute'); + const styles = useStyle(); const { updateState } = useEditorState(); const service = useEditorService().appService; const layerIdRef = useRef(config.id); @@ -83,10 +85,13 @@ const LayerAttribute: React.FC<LayerAttributeProps> = (props) => { ]; return ( - <div className={classNames('li-layer-attribute', className)}> - <div className="li-layer-attribute__header"> - <div className="li-layer-attribute__title"> - <ArrowLeftOutlined className="li-layer-attribute__back-icon" onClick={onBack} /> + <div className={classNames(prefixCls, className)}> + <div className={classNames(`${prefixCls}__header`, styles.attributeHeader)}> + <div className={classNames(`${prefixCls}__title`, styles.attributeTitle)}> + <ArrowLeftOutlined + className={classNames(`${prefixCls}__back-icon`, styles.attributeBackIcon)} + onClick={onBack} + /> <LayerName name={layerName} onChange={changeLayerName} @@ -105,11 +110,15 @@ const LayerAttribute: React.FC<LayerAttributeProps> = (props) => { /> </Tooltip> <Dropdown menu={{ items: dropDownItems }}> - <MoreOutlined className={'li-layer-attribute__dropdown-icon'} /> + <MoreOutlined className={classNames(`${prefixCls}__dropdown-icon`, styles.dropdownIcon)} /> </Dropdown> </Space> </div> - <LayerForm className={'li-layer-attribute__layer-form'} config={config} onChange={handleValuesChange} /> + <LayerForm + className={classNames(`${prefixCls}__layer-form`, styles.layerForm)} + config={config} + onChange={handleValuesChange} + /> </div> ); }; diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/style.ts b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/style.ts new file mode 100644 index 00000000..0412abf0 --- /dev/null +++ b/packages/li-editor/src/widgets/LayersPanel/LayerAttribute/style.ts @@ -0,0 +1,46 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../../hooks'; + +const useStyle = () => { + const { colorBorder, colorPrimaryHover } = useAntdToken(); + + return { + attributeHeader: css` + display: flex; + align-items: center; + justify-content: space-between; + height: 57px; + margin: 0 20px; + overflow: hidden; + font-weight: 500; + font-size: 16px; + border-bottom: 1px solid ${colorBorder}; + `, + + attributeTitle: css` + display: flex; + align-items: center; + `, + + attributeBackIcon: css` + margin-right: 10px; + cursor: pointer; + + &:hover { + color: ${colorPrimaryHover}; + } + `, + + layerForm: css` + height: calc(100% - 57px); + padding: 15px 20px; + `, + + dropdownIcon: css` + font-size: 16px; + cursor: pointer; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerList/DragList/index.less b/packages/li-editor/src/widgets/LayersPanel/LayerList/DragList/index.less deleted file mode 100644 index cb62e110..00000000 --- a/packages/li-editor/src/widgets/LayersPanel/LayerList/DragList/index.less +++ /dev/null @@ -1,12 +0,0 @@ -@import '../../../../theme/index.less'; - -.@{prefix}-drag-list { - &__item:hover &__item-icon { - opacity: 1; - } - - &__item-icon { - cursor: move; - opacity: 0; - } -} diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerList/DragList/index.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerList/DragList/index.tsx index 249fad98..276c3792 100644 --- a/packages/li-editor/src/widgets/LayersPanel/LayerList/DragList/index.tsx +++ b/packages/li-editor/src/widgets/LayersPanel/LayerList/DragList/index.tsx @@ -2,7 +2,8 @@ import classNames from 'classnames'; import React, { useCallback } from 'react'; import type { DropResult } from 'react-beautiful-dnd'; import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; -import './index.less'; +import { usePrefixCls } from '../../../../hooks'; +import useStyle from './style'; interface DragListProps<P extends Record<string, any>> { itemStyle?: React.CSSProperties | ((dataset: P) => React.CSSProperties); @@ -16,6 +17,8 @@ interface DragListProps<P extends Record<string, any>> { } function DragList<P extends Record<string, any>>({ children, itemStyle, items, onDrag, dragIcon }: DragListProps<P>) { + const prefixCls = usePrefixCls('drag-list'); + const styles = useStyle(); const onDragEnd = useCallback( (result: DropResult) => { if (result.destination) { @@ -34,7 +37,7 @@ function DragList<P extends Record<string, any>>({ children, itemStyle, items, o <DragDropContext onDragEnd={onDragEnd}> <Droppable droppableId="dropable" direction="vertical"> {(provided) => ( - <div className="li-drag-list" ref={provided.innerRef} {...provided.droppableProps}> + <div className={prefixCls} ref={provided.innerRef} {...provided.droppableProps}> {items.map((item, index) => ( <Draggable key={item.id} draggableId={item.id} index={index}> {(itemProvided, itemSnapshot) => { @@ -42,8 +45,9 @@ function DragList<P extends Record<string, any>>({ children, itemStyle, items, o <div {...itemProvided.draggableProps} ref={itemProvided.innerRef} - className={classNames('li-drag-list__item', { - 'li-drag-list__item': itemSnapshot.isDragging, + className={classNames(`${prefixCls}__item`, styles.dragItem, { + [`${prefixCls}__item`]: itemSnapshot.isDragging, + [styles.dragItem]: itemSnapshot.isDragging, })} style={{ ...(itemStyle instanceof Function ? itemStyle(item) : itemStyle), @@ -53,7 +57,11 @@ function DragList<P extends Record<string, any>>({ children, itemStyle, items, o > {children( item, - <i {...itemProvided.dragHandleProps} className="li-drag-list__item-icon"> + <i + data-comp="drag-item-icon" + className={classNames(`${prefixCls}__item-icon`, styles.itemIcon)} + {...itemProvided.dragHandleProps} + > {dragIcon} </i>, )} diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerList/DragList/style.ts b/packages/li-editor/src/widgets/LayersPanel/LayerList/DragList/style.ts new file mode 100644 index 00000000..1da9ad9b --- /dev/null +++ b/packages/li-editor/src/widgets/LayersPanel/LayerList/DragList/style.ts @@ -0,0 +1,18 @@ +import { css } from '@emotion/css'; + +const useStyle = () => { + return { + dragItem: css` + &:hover [data-comp='drag-item-icon'] { + opacity: 1 !important; + } + `, + + itemIcon: css` + cursor: move; + opacity: 0; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/constant.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/constant.tsx new file mode 100644 index 00000000..fe20404b --- /dev/null +++ b/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/constant.tsx @@ -0,0 +1,2 @@ +export const LayerIconBg = + 'data:image/png;base64,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'; diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/index.less b/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/index.less deleted file mode 100644 index c4b9e8b9..00000000 --- a/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/index.less +++ /dev/null @@ -1,67 +0,0 @@ -@import url('../../../../theme/index.less'); - -@layer-icon-bg: 'data:image/png;base64,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'; - -.@{prefix}-layer-item { - display: flex; - align-items: center; - margin-bottom: 10px; - background: @bg-color-primary; - border: 1px solid @border-secondary-color; - border-left: 3px solid; - border-radius: @border-radius; - padding: 0 8px; - - &__drag-icon { - margin: 3px; - } - - &__infor { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding: 15px 0; - - .@{prefix}-title-name__title { - width: 140px !important; - } - } - - &__title { - display: flex; - flex: 1; - align-items: center; - cursor: pointer; - } - - &__tag { - width: 30px; - height: 30px; - line-height: 30px; - margin-right: 10px; - color: @primary-color-1; - background-image: url(@layer-icon-bg); - background-repeat: no-repeat; - border-radius: 2; - font-size: 30px; - } - - &__actions:hover &__actions_show { - opacity: 1 !important; - } - - &__actions { - float: right; - height: 100%; - cursor: pointer; - - .ant-space-item:last-child { - margin-left: -5px !important; - } - - &_hide { - opacity: 0; - } - } -} diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/index.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/index.tsx index e3f3999a..05ed6722 100644 --- a/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/index.tsx +++ b/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/index.tsx @@ -6,8 +6,8 @@ import { Dropdown, message, Popconfirm, Space, Tooltip } from 'antd'; import classnames from 'classnames'; import React, { useState } from 'react'; import LayerName from '../../../../components/EditName'; -import { useEditorService, useEditorState } from '../../../../hooks'; -import './index.less'; +import { useEditorService, useEditorState, usePrefixCls } from '../../../../hooks'; +import useStyle from './style'; const defaultVis = { icon: () => <span />, color: 'gray' }; @@ -18,6 +18,8 @@ type LayerItemProps = { }; const LayerItem = ({ layer, dragIcon, onClickLayer }: LayerItemProps) => { + const prefixCls = usePrefixCls('layer-item'); + const styles = useStyle(); const { updateState } = useEditorState(); const { appService } = useEditorService(); const implementLayer = appService.getImplementLayer(layer.type); @@ -98,18 +100,18 @@ const LayerItem = ({ layer, dragIcon, onClickLayer }: LayerItemProps) => { ]; return ( - <div className="li-layer-item" style={{ borderLeftColor: visLayer?.color }}> - <div className="li-layer-item__drag-icon">{dragIcon}</div> - <div className="li-layer-item__infor" onClick={(e) => e.stopPropagation()}> + <div className={classnames(prefixCls, styles.layerItem)} style={{ borderLeftColor: visLayer?.color }}> + <div className={classnames(`${prefixCls}__drag-icon`, styles.dragIcon)}>{dragIcon}</div> + <div className={classnames(`${prefixCls}__infor`, styles.itemInfor)} onClick={(e) => e.stopPropagation()}> <div - className="li-layer-item__title" + className={classnames(`${prefixCls}__title`, styles.itemTitle)} onClick={() => { if (!isEditName) { onClickLayer(layer); } }} > - <div className="li-layer-item__tag"> + <div className={classnames(`${prefixCls}__tag`, styles.itemTag)}> {typeof visLayer?.icon === 'function' ? <Icon component={visLayer.icon} /> : null} </div> <LayerName @@ -126,10 +128,11 @@ const LayerItem = ({ layer, dragIcon, onClickLayer }: LayerItemProps) => { </div> {messageContextHolder} - <Space className="li-layer-item__actions"> + <Space className={classnames(`${prefixCls}__actions`, styles.itemActions)}> <Tooltip title="点击修改图层名称"> <FormOutlined - className={classnames('li-layer-item__actions_hide', 'li-layer-item__actions_show')} + data-comp="layer-actions-item_hover-show" + className={classnames(`${prefixCls}__actions-item`, styles.actionsItem)} onClick={() => { setIsEditName(true); }} @@ -137,7 +140,8 @@ const LayerItem = ({ layer, dragIcon, onClickLayer }: LayerItemProps) => { </Tooltip> <Tooltip title="点击复制图层"> <CopyOutlined - className={classnames('li-layer-item__actions_hide', 'li-layer-item__actions_show')} + data-comp="layer-actions-item_hover-show" + className={classnames(`${prefixCls}__actions-item`, styles.actionsItem)} onClick={() => handleCopyLayer(layer)} /> </Tooltip> diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/style.ts b/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/style.ts new file mode 100644 index 00000000..864c6673 --- /dev/null +++ b/packages/li-editor/src/widgets/LayersPanel/LayerList/LayerItem/style.ts @@ -0,0 +1,73 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../../../hooks'; +import { LayerIconBg } from './constant'; + +const useStyle = () => { + const { antCls, colorBgContainer, colorSplit, colorPrimary, borderRadius } = useAntdToken(); + + return { + layerItem: css` + display: flex; + align-items: center; + margin-bottom: 10px; + background: ${colorBgContainer}; + border: 1px solid ${colorSplit}; + border-left: 3px solid; + border-radius: ${borderRadius}px; + padding: 0 8px; + `, + + dragIcon: css` + margin: 3px; + `, + + itemInfor: css` + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 15px 0; + .li-title-name__title { + width: 140px !important; + } + `, + + itemTitle: css` + display: flex; + flex: 1; + align-items: center; + cursor: pointer; + `, + + itemTag: css` + width: 30px; + height: 30px; + line-height: 30px; + margin-right: 10px; + color: ${colorPrimary}; + background-image: url(${LayerIconBg}); + background-repeat: no-repeat; + border-radius: 2; + font-size: 30px; + `, + + itemActions: css` + float: right; + height: 100%; + cursor: pointer; + + ${antCls}-space-item:last-child { + margin-left: -5px !important; + } + + &:hover [data-comp='layer-actions-item_hover-show'] { + opacity: 1; + } + `, + actionsItem: css` + opacity: 0; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerList/index.less b/packages/li-editor/src/widgets/LayersPanel/LayerList/index.less deleted file mode 100644 index 85d6b2fe..00000000 --- a/packages/li-editor/src/widgets/LayersPanel/LayerList/index.less +++ /dev/null @@ -1,3 +0,0 @@ -@import '../../../theme/index.less'; - -// .@{prefix}-layer-list {} diff --git a/packages/li-editor/src/widgets/LayersPanel/LayerList/index.tsx b/packages/li-editor/src/widgets/LayersPanel/LayerList/index.tsx index 95a96475..8d99cbd8 100644 --- a/packages/li-editor/src/widgets/LayersPanel/LayerList/index.tsx +++ b/packages/li-editor/src/widgets/LayersPanel/LayerList/index.tsx @@ -4,9 +4,8 @@ import { Empty } from 'antd'; import classNames from 'classnames'; import { isEmpty } from 'lodash-es'; import React, { useMemo } from 'react'; -import { useEditorState } from '../../../hooks'; +import { useEditorState, usePrefixCls } from '../../../hooks'; import DragList from './DragList'; -import './index.less'; import LayerItem from './LayerItem'; type LayersPanelProps = { @@ -16,6 +15,7 @@ type LayersPanelProps = { const LayerList: React.FC<LayersPanelProps> = (props) => { const { onClickLayer } = props; + const prefixCls = usePrefixCls('layer-list'); const { state, updateState } = useEditorState(); // 以图层在地图上的层级从高到低的(地图上)排列,以方便用户从 UI 上理解图层列表。 @@ -43,7 +43,7 @@ const LayerList: React.FC<LayersPanelProps> = (props) => { if (isEmpty(layers)) { return ( <Empty - className="li-layer-list__empty" + className={`${prefixCls}__empty`} image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无图层,请先新增图层" /> @@ -51,7 +51,7 @@ const LayerList: React.FC<LayersPanelProps> = (props) => { } return ( - <div className={classNames('li-layer-list', props.className)}> + <div className={classNames(prefixCls, props.className)}> <DragList items={layers} onDrag={onDragEnd} dragIcon={<HolderOutlined />}> {(layer, icon) => <LayerItem dragIcon={icon} layer={layer} onClickLayer={onClickLayer} />} </DragList> diff --git a/packages/li-editor/src/widgets/LayersPanel/LayersPanel.less b/packages/li-editor/src/widgets/LayersPanel/LayersPanel.less deleted file mode 100644 index a392eefb..00000000 --- a/packages/li-editor/src/widgets/LayersPanel/LayersPanel.less +++ /dev/null @@ -1,52 +0,0 @@ -@import '../../theme/index.less'; - -.@{prefix}-layers-panel { - position: relative; - height: 100%; - - &__content { - height: 100%; - - &_hidden { - display: none; - } - } - - &__header { - margin: 0 20px; - padding: 15px 0 15px; - font-weight: 500; - font-size: 16px; - border-bottom: 1px solid @border-primary-color; - } - - &__add-layer { - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 20px; - font-size: 14px; - - &-popver { - .ant-popover-inner-content { - .ant-form-item { - margin-bottom: 20px !important; - } - - .ant-form-item:last-child { - margin-bottom: 8px !important; - } - } - } - } - - &__layer-list { - height: calc(100% - 57px - 52px); - padding: 0 20px 15px; - overflow-y: auto; - } - - &__layer-attribute { - height: 100%; - } -} diff --git a/packages/li-editor/src/widgets/LayersPanel/LayersPanel.tsx b/packages/li-editor/src/widgets/LayersPanel/LayersPanel.tsx index 37f44797..3f7f5e7a 100644 --- a/packages/li-editor/src/widgets/LayersPanel/LayersPanel.tsx +++ b/packages/li-editor/src/widgets/LayersPanel/LayersPanel.tsx @@ -3,19 +3,21 @@ import type { LayerSchema } from '@antv/li-sdk'; import { Button, Popover } from 'antd'; import classNames from 'classnames'; import React, { useState } from 'react'; -import { useEditorState } from '../../hooks'; +import { useEditorState, usePrefixCls } from '../../hooks'; import type { ImplementEditorWidgetProps } from '../../types'; import AddLayer from './AddLayer'; import { getDefaultLayerAttr } from './helper'; import LayerAttributes from './LayerAttribute'; import LayerList from './LayerList'; -import './LayersPanel.less'; +import useStyle from './style'; interface LayersPanelProps extends ImplementEditorWidgetProps { className?: string; } const LayersPanel: React.FC<LayersPanelProps> = (props) => { + const prefixCls = usePrefixCls('layers-panel'); + const styles = useStyle(); const [visibleAttribute, setVisibleAttribute] = useState(false); const [layerConfig, setLayerConfig] = useState<LayerSchema>(); const { state, updateState } = useEditorState(); @@ -40,21 +42,22 @@ const LayersPanel: React.FC<LayersPanelProps> = (props) => { }; return ( - <div className={classNames('li-layers-panel', props.className)}> + <div className={classNames(prefixCls, props.className, styles.layerPanel)}> <div - className={classNames('li-layers-panel__content', { - 'li-layers-panel__content_hidden': visibleAttribute, + className={classNames(`${prefixCls}__content`, styles.panelContent, { + [`${prefixCls}__content_hidden`]: visibleAttribute, + [styles.panelContentHidden]: visibleAttribute, })} > - <div className="li-layers-panel__header">图层</div> - <div className="li-layers-panel__add-layer"> + <div className={classNames(`${prefixCls}__header`, styles.panelHeader)}>图层</div> + <div className={classNames(`${prefixCls}__add-layer`, styles.addLayer)}> 图层({state.layers.length}) <Popover placement="bottomLeft" trigger="click" open={addLayerPanelOpen} onOpenChange={(open) => setAddLayerPanelOpen(open)} - overlayClassName="li-layers-panel__add-layer-popver" + overlayClassName={classNames(`${prefixCls}l__add-layer-popver`, styles.addLayerPopover)} content={ <AddLayer onSubmit={handleSubmit} @@ -76,11 +79,18 @@ const LayersPanel: React.FC<LayersPanelProps> = (props) => { </Button> </Popover> </div> - <LayerList className="li-layers-panel__layer-list" onClickLayer={onAttributesOpen} /> + <LayerList + className={classNames(`${prefixCls}__layer-list`, styles.layerList)} + onClickLayer={onAttributesOpen} + /> </div> {visibleAttribute && layerConfig && ( - <LayerAttributes className="li-layers-panel__layer-attribute" onBack={onAttributesClose} config={layerConfig} /> + <LayerAttributes + className={classNames(`${prefixCls}__layer-attribute`, styles.layerAttribute)} + onBack={onAttributesClose} + config={layerConfig} + /> )} </div> ); diff --git a/packages/li-editor/src/widgets/LayersPanel/style.ts b/packages/li-editor/src/widgets/LayersPanel/style.ts new file mode 100644 index 00000000..0e3543f6 --- /dev/null +++ b/packages/li-editor/src/widgets/LayersPanel/style.ts @@ -0,0 +1,61 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../hooks'; + +const useStyle = () => { + const { colorSplit, antCls } = useAntdToken(); + + return { + layerPanel: css` + position: relative; + height: 100%; + `, + + panelContent: css` + height: 100%; + `, + + panelContentHidden: css` + display: none; + `, + + panelHeader: css` + margin: 0 20px; + padding: 15px 0 15px; + font-weight: 500; + font-size: 16px; + border-bottom: 1px solid ${colorSplit}; + `, + + addLayer: css` + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 20px; + font-size: 14px; + `, + + addLayerPopover: css` + ${antCls}-popover-inner-content { + ${antCls}-form-item { + margin-bottom: 20px !important; + } + + ${antCls}-form-item:last-child { + margin-bottom: 8px !important; + } + } + `, + + layerList: css` + height: calc(100% - 57px - 52px); + padding: 0 20px 15px; + overflow-y: auto; + `, + + layerAttribute: css` + height: 100%; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/MapSetting/MapCenterModal/index.less b/packages/li-editor/src/widgets/MapSetting/MapCenterModal/index.less deleted file mode 100644 index 2fe349a9..00000000 --- a/packages/li-editor/src/widgets/MapSetting/MapCenterModal/index.less +++ /dev/null @@ -1,52 +0,0 @@ -@import '../../../theme/index.less'; - -@cls-prefix: li-map-setting; - -.@{cls-prefix} { - &__map-center { - width: 14px; - height: 14px; - position: absolute; - top: calc(50% - 9px); - left: calc(50% - 9px); - background: #1a90ff; - border-radius: 50%; - border: solid 2px #fff; - pointer-events: none; - } - - &__control { - .larkmap-location-search { - background-color: @bg-color-primary; - } - - .larkmap-select-selection-search { - color: @text-primary-color; - - .larkmap-select-selection-search-input { - color: @text-primary-color; - } - } - - .larkmap-select-clear { - display: none !important; - } - } - - &__location-search { - width: 200px; - background-color: @bg-color-primary; - .larkmap-select-item-empty, - .larkmap-location-search__option-name { - color: @text-primary-color; - } - - .larkmap-select-item-option-active { - background: @bg-color-secondary; - } - } - - &__location-search-dropdown { - z-index: 1101; - } -} diff --git a/packages/li-editor/src/widgets/MapSetting/MapCenterModal/index.tsx b/packages/li-editor/src/widgets/MapSetting/MapCenterModal/index.tsx index 1fc097cb..a4b53b7d 100644 --- a/packages/li-editor/src/widgets/MapSetting/MapCenterModal/index.tsx +++ b/packages/li-editor/src/widgets/MapSetting/MapCenterModal/index.tsx @@ -2,11 +2,11 @@ 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 { CLS_PREFIX } from '../constant'; -import './index.less'; +import { usePrefixCls } from '../../../hooks'; +import useStyle from './style'; export interface MapCenterModalProps extends Omit<ModalProps, 'onOk'> { currentMapCenter: [number, number]; @@ -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, @@ -26,6 +31,8 @@ export const MapCenterModal: React.FC<MapCenterModalProps> = ({ mapCenterModalOpen, ...modalProps }) => { + const prefixCls = usePrefixCls('map-setting'); + const styles = useStyle(); const [scene, setScene] = useState<Scene | null>(null); const [mapCenter, setMapCenter] = useState<ILngLat | null>(null); const [messageApi, messageContextHolder] = message.useMessage(); @@ -77,20 +84,22 @@ export const MapCenterModal: React.FC<MapCenterModalProps> = ({ return ( <Modal {...modalProps} onOk={okClick}> <LarkMap {...larkMap} onSceneLoaded={onSceneLoaded} onDragEnd={dragEnd} onZoomEnd={zoomEnd}> - <div className={`${CLS_PREFIX}__map-center`} /> - <CustomControl className={`${CLS_PREFIX}__control`}> + <div className={classNames(`${prefixCls}__map-center`, styles.mapCenter)} /> + <CustomControl className={classNames(`${prefixCls}__control`, styles.control)}> {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(`${CLS_PREFIX}__location-search`, `${CLS_PREFIX}__location-search-dropdown`)} + popupClassName={classNames(`${prefixCls}__location-search`, styles.locationSearch)} /> </CustomControl> </LarkMap> diff --git a/packages/li-editor/src/widgets/MapSetting/MapCenterModal/style.ts b/packages/li-editor/src/widgets/MapSetting/MapCenterModal/style.ts new file mode 100644 index 00000000..757090ab --- /dev/null +++ b/packages/li-editor/src/widgets/MapSetting/MapCenterModal/style.ts @@ -0,0 +1,55 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../../hooks'; + +const useStyle = () => { + const { colorBgContainer, borderRadius, colorBgElevated, colorText } = useAntdToken(); + + return { + mapCenter: css` + width: 14px; + height: 14px; + position: absolute; + top: calc(50% - 9px); + left: calc(50% - 9px); + background: #1a90ff; + border-radius: 50%; + border: solid 2px #fff; + pointer-events: none; + `, + + control: css` + .larkmap-location-search { + background-color: ${colorBgContainer}; + border-radius: ${borderRadius}px; + } + + .larkmap-select-selection-search { + color: ${colorText}; + + .larkmap-select-selection-search-input { + color: ${colorText}; + } + } + + .larkmap-select-clear { + display: none !important; + } + `, + + locationSearch: css` + width: 200px; + background-color: ${colorBgContainer}; + + .larkmap-select-item-empty, + .larkmap-location-search__option-name { + color: ${colorText}; + } + + .larkmap-select-item-option-active { + background: ${colorBgElevated}; + } + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/MapSetting/MapSerringStyle.ts b/packages/li-editor/src/widgets/MapSetting/MapSerringStyle.ts new file mode 100644 index 00000000..ae8c1ad2 --- /dev/null +++ b/packages/li-editor/src/widgets/MapSetting/MapSerringStyle.ts @@ -0,0 +1,135 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../hooks'; + +const useStyle = () => { + const { antCls, colorSplit, colorPrimaryText, colorTextSecondary, borderRadius } = useAntdToken(); + + return { + mapSetting: css` + display: flex; + justify-content: space-between; + padding-top: 10px !important; + + ${antCls}-form-item { + margin-bottom: 10px !important; + } + + , + ${antCls}-input-number { + width: 100px; + } + `, + + settingDesc: css` + margin-bottom: 0; + color: ${colorTextSecondary}; + font-size: 12px; + `, + + settingBtn: css` + width: 100%; + margin-bottom: 10px; + `, + + mapContent: css` + display: flex; + align-items: center; + `, + + selectMapCenter: css` + display: flex; + justify-content: flex-end; + margin-bottom: 20px; + `, + + selectMapCenterText: css` + color: ${colorPrimaryText}; + `, + + mapType: css` + display: flex; + align-items: center; + justify-content: space-between; + `, + + viewMode: css` + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 10px; + `, + + viewAngle: css` + display: flex; + justify-content: space-between; + margin-bottom: 10px; + `, + + viewAngleItem: css` + display: flex; + align-items: center; + `, + viewAngleItemInput: css` + display: flex; + justify-content: space-between; + width: 100px; + margin-left: 10px; + `, + + settingStyle: css` + display: flex; + flex-wrap: wrap; + justify-content: space-around; + max-height: 250px; + margin-top: 10px; + overflow-y: auto; + `, + + settingStyleContent: css` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0 12px 12px 0; + cursor: pointer; + + &:hover { + box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), + 0 9px 28px 8px rgba(0, 0, 0, 0.05); + } + `, + + settingStyleItem: css` + border: solid 1px ${colorSplit}; + border-radius: ${borderRadius}px; + + &:nth-child(3n) { + margin-right: 0; + } + `, + + settingStyleItemActive: css` + box-sizing: content-box; + border: solid 1px ${colorPrimaryText}; + border-radius: 4px; + `, + + settingStyleItemText: css` + display: flex; + flex-direction: column; + align-items: center; + `, + settingStyleItemTextActive: css` + display: flex; + flex-direction: column; + align-items: center; + color: ${colorPrimaryText}; + `, + + settingStyleItemImg: css` + border-radius: ${borderRadius}px; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/MapSetting/MapSetting.less b/packages/li-editor/src/widgets/MapSetting/MapSetting.less deleted file mode 100644 index 1b6ca8a0..00000000 --- a/packages/li-editor/src/widgets/MapSetting/MapSetting.less +++ /dev/null @@ -1,124 +0,0 @@ -@import '../../theme/index.less'; - -@cls-prefix: li-map-setting; - -.@{cls-prefix} { - display: flex; - justify-content: space-between; - padding-top: 10px !important; - - &__desc { - margin-bottom: 0; - color: @text-secondary-color; - font-size: 12px; - } - - &__btn { - width: 100%; - margin-bottom: 10px; - } - - .ant-form-item { - margin-bottom: 10px !important; - } - - &__map-content { - display: flex; - align-items: center; - } - - &__select-map-center { - display: flex; - justify-content: flex-end; - margin-bottom: 20px; - &-text { - color: @primary-color-1; - } - } - - &__map-type { - display: flex; - align-items: center; - justify-content: space-between; - } - &__view-mode { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 10px; - } - - &__view-angle { - display: flex; - justify-content: space-between; - margin-bottom: 10px; - &-item { - display: flex; - align-items: center; - &-input { - display: flex; - justify-content: space-between; - width: 100px; - margin-left: 10px; - } - } - } - - &__style { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - max-height: 250px; - margin-top: 10px; - overflow-y: auto; - - &-content { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 0 12px 12px 0; - cursor: pointer; - } - - &-item { - border: solid 1px @border-secondary-color; - border-radius: 4px; - - &-active { - box-sizing: content-box; - border: solid 1px @primary-color-1; - border-radius: 4px; - } - - &-text { - display: flex; - flex-direction: column; - align-items: center; - - &-active { - display: flex; - flex-direction: column; - align-items: center; - color: @primary-color-1; - } - } - - &-img { - border-radius: 4px; - } - } - - &-content:hover { - box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), - 0 9px 28px 8px rgba(0, 0, 0, 0.05); - } - - &-item :nth-child(3n) { - margin-right: 0; - } - } - .ant-input-number { - width: 100px; - } -} diff --git a/packages/li-editor/src/widgets/MapSetting/MapSetting.tsx b/packages/li-editor/src/widgets/MapSetting/MapSetting.tsx index e5500a02..af978bd9 100644 --- a/packages/li-editor/src/widgets/MapSetting/MapSetting.tsx +++ b/packages/li-editor/src/widgets/MapSetting/MapSetting.tsx @@ -2,12 +2,13 @@ import Icon, { DownOutlined } from '@ant-design/icons'; import type { RadioChangeEvent } from 'antd'; import { Button, ConfigProvider, Dropdown, Form, InputNumber, message, Modal, Radio, Space, Tooltip } from 'antd'; import React, { useState } from 'react'; +import classNames from 'classnames'; import { AMAP_KEY as AMAP__KEY, MAPBOX_TOKEN as MAPBOX__TOKEN } from '../../constants'; -import { useEditorService, useEditorState } from '../../hooks'; +import { useEditorService, useEditorState, usePrefixCls } from '../../hooks'; import type { ImplementEditorWidgetProps } from '../../types'; -import { BaseMapSvg, CLS_PREFIX, GaodeMapStyleConfig, MapboxStyleConfig } from './constant'; +import { BaseMapSvg, GaodeMapStyleConfig, MapboxStyleConfig } from './constant'; import { MapCenterModal } from './MapCenterModal'; -import './MapSetting.less'; +import useStyle from './MapSerringStyle'; type MapSettingProps = ImplementEditorWidgetProps & { AMAP_KEY?: string; @@ -42,6 +43,8 @@ const MapSetting: React.FC<MapSettingProps> = (props) => { function MapSettingModal(props: { AMAP_KEY?: string; MAPBOX_TOKEN?: string; open: boolean; onClose: () => void }) { const { AMAP_KEY = AMAP__KEY, MAPBOX_TOKEN = MAPBOX__TOKEN, open, onClose } = props; + const prefixCls = usePrefixCls('map-setting'); + const styles = useStyle(); const context = useEditorState(); const appService = useEditorService().appService; const [mapCenterModalOpen, setMapCenterModalOpen] = useState(false); @@ -154,19 +157,21 @@ function MapSettingModal(props: { AMAP_KEY?: string; MAPBOX_TOKEN?: string; open <> <Modal okText="保存" cancelText="取消" title="地图设置" open={open} onOk={handleOk} onCancel={handleCancel}> <ConfigProvider componentSize="small"> - <p className={`${CLS_PREFIX}__desc`}>设置地图初始化的中心点、缩放等级、底图样式</p> + <p className={classNames(`${prefixCls}__desc`, styles.settingDesc)}> + 设置地图初始化的中心点、缩放等级、底图样式 + </p> - <Form layout="vertical" className={`${CLS_PREFIX}`}> + <Form layout="vertical" className={classNames(`${prefixCls}`, styles.mapSetting)}> <Form.Item label="地图中心点"> - <div className={`${CLS_PREFIX}__map-content`}> - <div className={`${CLS_PREFIX}__map-content-text`}>{mapCenterValue?.toString()}</div> + <div className={classNames(`${prefixCls}__map-content`, styles.mapContent)}> + <div className={`${prefixCls}__map-content-text`}>{mapCenterValue?.toString()}</div> </div> </Form.Item> <Form.Item label="缩放等级"> <InputNumber value={zoomValue} onChange={onZoomChange} precision={0} min={1} max={17} /> </Form.Item> </Form> - <div className={`${CLS_PREFIX}__select-map-center`}> + <div className={classNames(`${prefixCls}__select-map-center`, styles.selectMapCenter)}> <Dropdown placement="bottomRight" menu={{ @@ -174,7 +179,7 @@ function MapSettingModal(props: { AMAP_KEY?: string; MAPBOX_TOKEN?: string; open }} > <Button type="link"> - <Space className={`${CLS_PREFIX}__select-map-center-text`}> + <Space className={classNames(`${prefixCls}__select-map-center-text`, styles.selectMapCenterText)}> 拾取 <DownOutlined /> </Space> @@ -182,7 +187,7 @@ function MapSettingModal(props: { AMAP_KEY?: string; MAPBOX_TOKEN?: string; open </Dropdown> </div> - <div className={`${CLS_PREFIX}__view-mode`}> + <div className={classNames(`${prefixCls}__view-mode`, styles.viewMode)}> <div>视图模式</div> <Radio.Group onChange={onViewModeChange} value={viewMode}> <Radio.Button value="2D">2D</Radio.Button> @@ -190,11 +195,11 @@ function MapSettingModal(props: { AMAP_KEY?: string; MAPBOX_TOKEN?: string; open </Radio.Group> </div> {viewMode === '3D' ? ( - <div className={`${CLS_PREFIX}__view-angle`}> - <div className={`${CLS_PREFIX}__view-angle-item`}> + <div className={classNames(`${prefixCls}__view-angle`, styles.viewAngle)}> + <div className={classNames(`${prefixCls}__view-angle-item`, styles.viewAngleItem)}> <div>地图倾角</div> <InputNumber - className={`${CLS_PREFIX}__view-angle-item-input`} + className={classNames(`${prefixCls}__view-angle-item-input`, styles.viewAngleItemInput)} min={0} // mapBox\map 地图倾斜角度最大为60 max={mapType === 'Gaode' ? 90 : 60} @@ -203,10 +208,10 @@ function MapSettingModal(props: { AMAP_KEY?: string; MAPBOX_TOKEN?: string; open onChange={onPictChange} /> </div> - <div className={`${CLS_PREFIX}__view-angle-item`}> + <div className={classNames(`${prefixCls}__view-angle-item`, styles.viewAngleItem)}> <div>地图旋转</div> <InputNumber - className={`${CLS_PREFIX}__view-angle-item-input`} + className={classNames(`${prefixCls}__view-angle-item-input`, styles.viewAngleItemInput)} min={0} max={360} value={rotationValue} @@ -215,7 +220,7 @@ function MapSettingModal(props: { AMAP_KEY?: string; MAPBOX_TOKEN?: string; open </div> </div> ) : null} - <div className={`${CLS_PREFIX}__map-type`}> + <div className={classNames(`${prefixCls}__map-type`, styles.mapType)}> <div>底图样式</div> <Radio.Group onChange={onMapTypeChange} value={mapType}> <Radio.Button style={{ width: 70, textAlign: 'center' }} value="Gaode"> @@ -230,23 +235,34 @@ function MapSettingModal(props: { AMAP_KEY?: string; MAPBOX_TOKEN?: string; open </Radio.Group> </div> - <div className={`${CLS_PREFIX}__style`}> + <div className={classNames(`${prefixCls}__style`, styles.settingStyle)}> {mapType === 'Gaode' && GaodeMapStyleConfig.map((item) => { return ( - <div key={item.text} className={`${CLS_PREFIX}__style-content`} onClick={() => onMapStyleClick(item)}> + <div + key={item.text} + className={classNames(`${prefixCls}__style-content`, styles.settingStyleContent)} + onClick={() => onMapStyleClick(item)} + > <div className={ - mapStyle === item.type ? `${CLS_PREFIX}__style-item-active` : `${CLS_PREFIX}__style-item` + mapStyle === item.type + ? classNames(`${prefixCls}__style-item-active`, styles.settingStyleItemActive) + : classNames(`${prefixCls}__style-item`, styles.settingStyleItem) } > - <img src={item.img} width={120} height={90} className={`${CLS_PREFIX}__style-item-img`} /> + <img + src={item.img} + width={120} + height={90} + className={classNames(`${prefixCls}__style-item-img`, styles.settingStyleItemImg)} + /> </div> <div className={ mapStyle === item.type - ? `${CLS_PREFIX}__style-item-text-active` - : `${CLS_PREFIX}__style-item-text` + ? classNames(`${prefixCls}__style-item-text-active`, styles.settingStyleItemTextActive) + : classNames(`${prefixCls}__style-item-text`, styles.settingStyleItemText) } > {item.text} @@ -258,19 +274,30 @@ function MapSettingModal(props: { AMAP_KEY?: string; MAPBOX_TOKEN?: string; open {mapType === 'Mapbox' && MapboxStyleConfig.map((item) => { return ( - <div key={item.text} className={`${CLS_PREFIX}__style-content`} onClick={() => onMapStyleClick(item)}> + <div + key={item.text} + className={classNames(`${prefixCls}__style-content`, styles.settingStyleContent)} + onClick={() => onMapStyleClick(item)} + > <div className={ - mapStyle === item.type ? `${CLS_PREFIX}__style-item-active` : `${CLS_PREFIX}__style-item` + mapStyle === item.type + ? classNames(`${prefixCls}__style-item-active`, styles.settingStyleItemActive) + : classNames(`${prefixCls}__style-item`, styles.settingStyleItem) } > - <img src={item.img} width={120} height={90} className={`${CLS_PREFIX}__style-item-img`} /> + <img + src={item.img} + width={120} + height={90} + className={classNames(`${prefixCls}__style-item-img`, styles.settingStyleItemImg)} + /> </div> <div className={ mapStyle === item.type - ? `${CLS_PREFIX}__style-item-text-active` - : `${CLS_PREFIX}__style-item-text` + ? classNames(`${prefixCls}__style-item-text-active`, styles.settingStyleItemTextActive) + : classNames(`${prefixCls}__style-item-text`, styles.settingStyleItemText) } > {item.text} diff --git a/packages/li-editor/src/widgets/MapSetting/constant.tsx b/packages/li-editor/src/widgets/MapSetting/constant.tsx index 634460db..c2fc9528 100644 --- a/packages/li-editor/src/widgets/MapSetting/constant.tsx +++ b/packages/li-editor/src/widgets/MapSetting/constant.tsx @@ -1,8 +1,5 @@ import React from 'react'; -/** 组件名称, 前缀 */ -export const CLS_PREFIX = 'li-map-setting'; - export const BaseMapSvg = () => ( <svg viewBox="0 0 1024 1024" diff --git a/packages/li-editor/src/widgets/TilesetsDataset/TilesetsDataset.less b/packages/li-editor/src/widgets/TilesetsDataset/TilesetsDataset.less deleted file mode 100644 index b87d7753..00000000 --- a/packages/li-editor/src/widgets/TilesetsDataset/TilesetsDataset.less +++ /dev/null @@ -1,10 +0,0 @@ -.li-tilesets { - &__type { - margin-bottom: 24px; - } - - &__type-label { - margin: 0; - padding-bottom: 8px; - } -} diff --git a/packages/li-editor/src/widgets/TilesetsDataset/TilesetsDataset.tsx b/packages/li-editor/src/widgets/TilesetsDataset/TilesetsDataset.tsx index 6114155b..d5899f50 100644 --- a/packages/li-editor/src/widgets/TilesetsDataset/TilesetsDataset.tsx +++ b/packages/li-editor/src/widgets/TilesetsDataset/TilesetsDataset.tsx @@ -1,22 +1,26 @@ import type { RadioChangeEvent } from 'antd'; import { Radio } from 'antd'; import React, { useState } from 'react'; +import classNames from 'classnames'; import type { ImplementEditorAddDatasetWidgetProps } from '../../types'; +import { usePrefixCls } from '../../hooks'; import MVTTile from './MVTTile'; -import './TilesetsDataset.less'; import XYZTile from './XYZTile'; +import useStyle from './TilesetsDatasetStyle'; type TilesetsDatasetProps = ImplementEditorAddDatasetWidgetProps; export default function TilesetsDataset(props: TilesetsDatasetProps) { const { onSubmit, onCancel } = props; + const prefixCls = usePrefixCls('tilesets'); + const styles = useStyle(); const [tilesetType, setTilesetType] = useState('XYZ Tile'); return ( <> - <div className="li-tilesets"> - <div className="li-tilesets__type"> - <p className="li-tilesets__type-label">瓦片类型</p> + <div className={prefixCls}> + <div className={classNames(`${prefixCls}__type`, styles.tilesetsType)}> + <p className={classNames(`${prefixCls}__type-label`, styles.tilesetsTypeLabel)}>瓦片类型</p> <Radio.Group value={tilesetType} onChange={(e: RadioChangeEvent) => setTilesetType(e.target.value)}> <Radio.Button value="XYZ Tile">XYZ Tile</Radio.Button> {/* <Radio.Button value="WMS">TMS</Radio.Button> */} diff --git a/packages/li-editor/src/widgets/TilesetsDataset/TilesetsDatasetStyle.ts b/packages/li-editor/src/widgets/TilesetsDataset/TilesetsDatasetStyle.ts new file mode 100644 index 00000000..0d61b1b6 --- /dev/null +++ b/packages/li-editor/src/widgets/TilesetsDataset/TilesetsDatasetStyle.ts @@ -0,0 +1,16 @@ +import { css } from '@emotion/css'; + +const useStyle = () => { + return { + tilesetsType: css` + margin-bottom: 24px; + `, + + tilesetsTypeLabel: css` + margin: 0; + padding-bottom: 8px; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/TilesetsDataset/Zoom/index.less b/packages/li-editor/src/widgets/TilesetsDataset/Zoom/index.less deleted file mode 100644 index 893955f4..00000000 --- a/packages/li-editor/src/widgets/TilesetsDataset/Zoom/index.less +++ /dev/null @@ -1,13 +0,0 @@ -@cls-prefix: li-tiles-zoom; - -.@{cls-prefix} { - &__input-number { - display: flex; - flex-direction: column; - margin-top: 5px !important; - - &-min { - margin-bottom: 10px !important; - } - } -} diff --git a/packages/li-editor/src/widgets/TilesetsDataset/Zoom/index.tsx b/packages/li-editor/src/widgets/TilesetsDataset/Zoom/index.tsx index 091679b4..54638502 100644 --- a/packages/li-editor/src/widgets/TilesetsDataset/Zoom/index.tsx +++ b/packages/li-editor/src/widgets/TilesetsDataset/Zoom/index.tsx @@ -1,14 +1,16 @@ import { Checkbox, InputNumber } from 'antd'; import React, { useEffect, useState } from 'react'; -import './index.less'; +import classNames from 'classnames'; +import { usePrefixCls } from '../../../hooks'; +import useStyle from './style'; type ZoomProps = { onChange: (val: { minZoom?: number; maxZoom?: number }) => void; }; -export const CLS_PREFIX = 'li-tiles-zoom'; - const Zoom = (props: ZoomProps) => { + const prefixCls = usePrefixCls('tiles-zoom'); + const styles = useStyle(); const [minZoom, setMinZoom] = useState(0); const [maxZoom, setMaxZoom] = useState(18); const [minChecked, setMinCheck] = useState(true); @@ -19,8 +21,8 @@ const Zoom = (props: ZoomProps) => { }, [minZoom, maxZoom]); return ( - <div className={`${CLS_PREFIX}__input-number`}> - <div className={`${CLS_PREFIX}__input-number-min`}> + <div className={classNames(`${prefixCls}__input-number`, styles.tilesZoomInputNumber)}> + <div className={classNames(`${prefixCls}__input-number-min`, styles.tilesZoomInputNumberMin)}> <Checkbox checked={minChecked} onChange={(e) => { @@ -39,7 +41,7 @@ const Zoom = (props: ZoomProps) => { }} /> </div> - <div className={`${CLS_PREFIX}__input-number-max`}> + <div className={classNames(`${prefixCls}__input-number-max`, styles.tilesZoomInputNumberMin)}> <Checkbox checked={maxChecked} onChange={(e) => { diff --git a/packages/li-editor/src/widgets/TilesetsDataset/Zoom/style.ts b/packages/li-editor/src/widgets/TilesetsDataset/Zoom/style.ts new file mode 100644 index 00000000..604ea67d --- /dev/null +++ b/packages/li-editor/src/widgets/TilesetsDataset/Zoom/style.ts @@ -0,0 +1,17 @@ +import { css } from '@emotion/css'; + +const useStyle = () => { + return { + tilesZoomInputNumber: css` + display: flex; + flex-direction: column; + margin-top: 5px !important; + `, + + tilesZoomInputNumberMin: css` + margin-bottom: 10px !important; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/UploadDataset/UploadDataset/index.less b/packages/li-editor/src/widgets/UploadDataset/UploadDataset/index.less deleted file mode 100644 index 992eb2a8..00000000 --- a/packages/li-editor/src/widgets/UploadDataset/UploadDataset/index.less +++ /dev/null @@ -1,42 +0,0 @@ -@import '../../../theme/index.less'; - -.@{prefix}-upload { - &__description { - color: @text-secondary-color; - } - - &__content { - display: flex; - height: 400px; - overflow: hidden; - } - - &-dataset { - flex: 1; - - &__dragger-content { - display: flex; - flex-direction: column; - align-items: center; - padding: 20px; - - &_icon { - font-size: 40px; - } - - &_text { - padding-bottom: 20px; - } - } - } - - &-list { - display: flex; - flex-direction: column; - margin-left: 10px; - - &__title { - color: @text-secondary-color; - } - } -} diff --git a/packages/li-editor/src/widgets/UploadDataset/UploadDataset/index.tsx b/packages/li-editor/src/widgets/UploadDataset/UploadDataset/index.tsx index 4aba844e..d1487d1c 100644 --- a/packages/li-editor/src/widgets/UploadDataset/UploadDataset/index.tsx +++ b/packages/li-editor/src/widgets/UploadDataset/UploadDataset/index.tsx @@ -4,16 +4,20 @@ import { Button, message, Space, Tooltip, Upload } from 'antd'; import { isEmpty } from 'lodash-es'; import type { UploadRequestOption } from 'rc-upload/lib/interface'; import React, { useState } from 'react'; +import classNames from 'classnames'; import type { ImplementEditorAddDatasetWidgetProps } from '../../../types'; import UploadDatasetList from '../UploadDatasetList'; import UrlUpload from '../UrlUpload'; +import { usePrefixCls } from '../../../hooks'; import { parserFileToSource } from './helpers/parser-file'; -import './index.less'; +import useStyle from './style'; type UploadDatasetProps = ImplementEditorAddDatasetWidgetProps; export default function UploadDataset(props: UploadDatasetProps) { const { onSubmit, onCancel } = props; + const prefixCls = usePrefixCls('upload'); + const styles = useStyle(); const [uploadData, setUploadData] = useState<DatasetSchema[]>([]); /* 选择的文件id */ const [checkedDatasetIdList, setCheckedDatasetIdList] = useState<string[]>([]); @@ -35,11 +39,13 @@ export default function UploadDataset(props: UploadDatasetProps) { }; const UploadDraggerContent = ( - <div className={'li-upload-dataset__dragger-content'}> - <span className="li-upload-dataset__dragger-content_icon"> + <div className={classNames(`${prefixCls}-dataset__dragger-content`, styles.draggerContent)}> + <span className={classNames(`${prefixCls}-dataset__dragger-content_icon`, styles.draggerContentIcon)}> <FileTextOutlined /> </span> - <div className="li-upload-dataset__dragger-content_text">点击或将文件拖拽到这里,也可以文件 URL 地址上传</div> + <div className={classNames(`${prefixCls}-dataset__dragger-content_text`, styles.draggerContentText)}> + 点击或将文件拖拽到这里,也可以文件 URL 地址上传 + </div> <UrlUpload onSubmit={(fileSource: DatasetSchema) => { setUploadData((pre) => [...pre, fileSource]); @@ -50,8 +56,8 @@ export default function UploadDataset(props: UploadDatasetProps) { return ( <> - <div className="li-upload"> - <p className="li-upload__description"> + <div className={prefixCls}> + <p className={classNames(`${prefixCls}__description`, styles.uploadDescription)}> 支持的文件格式有{' '} <a href="https://www.yuque.com/antv/l7vp/data-format-csv" target="_blank" rel="noreferrer"> CSV @@ -80,8 +86,8 @@ export default function UploadDataset(props: UploadDatasetProps) { </a> 。 </p> - <div className="li-upload__content"> - <div className="li-upload-dataset"> + <div className={classNames(`${prefixCls}__content`, styles.uploadContent)}> + <div className={classNames(`${prefixCls}-dataset`, styles.uploadDataset)}> {messageContextHolder} <Upload.Dragger name="data" @@ -94,8 +100,8 @@ export default function UploadDataset(props: UploadDatasetProps) { </div> {!isEmpty(uploadData) && ( - <div className="li-upload-list"> - <p className="li-upload-list__title">已上传文件</p> + <div className={classNames(`${prefixCls}-list`, styles.uploadList)}> + <p className={classNames(`${prefixCls}-list__title`, styles.uploadListTitle)}>已上传文件</p> <UploadDatasetList dataset={uploadData} onChange={(e) => { diff --git a/packages/li-editor/src/widgets/UploadDataset/UploadDataset/style.ts b/packages/li-editor/src/widgets/UploadDataset/UploadDataset/style.ts new file mode 100644 index 00000000..dccb7358 --- /dev/null +++ b/packages/li-editor/src/widgets/UploadDataset/UploadDataset/style.ts @@ -0,0 +1,46 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../../hooks'; + +const useStyle = () => { + const { colorTextSecondary } = useAntdToken(); + + return { + uploadDescription: css` + color: ${colorTextSecondary}; + `, + + uploadContent: css` + display: flex; + height: 400px; + overflow: hidden; + `, + + uploadDataset: css` + flex: 1; + `, + + draggerContent: css` + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + `, + draggerContentIcon: css` + font-size: 40px; + `, + + draggerContentText: css` + padding-bottom: 20px; + `, + uploadList: css` + display: flex; + flex-direction: column; + margin-left: 10px; + `, + uploadListTitle: css` + color: ${colorTextSecondary}; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/UploadDataset/UploadDatasetList/index.less b/packages/li-editor/src/widgets/UploadDataset/UploadDatasetList/index.less deleted file mode 100644 index f9fa290b..00000000 --- a/packages/li-editor/src/widgets/UploadDataset/UploadDatasetList/index.less +++ /dev/null @@ -1,54 +0,0 @@ -@import '../../../theme/index.less'; - -.@{prefix}-upload-list { - &__content { - display: flex; - flex-direction: column; - overflow-x: hidden; - overflow-y: auto; - - &-item { - position: relative; - display: flex; - align-items: center; - margin: 0 5px 10px 0; - padding: 5px 10px; - border: 1px solid rgba(0, 0, 0, 0.08); - border-radius: 2px; - cursor: pointer; - - &__title { - width: 250px; - height: 30px; - overflow: hidden; - line-height: 30px; - text-overflow: ellipsis; - } - - &-selected { - position: absolute; - top: 50%; - right: 10px; - width: 20px; - height: 20px; - margin-top: -10px; - text-align: center; - background: @primary-color-1; - border-radius: 50%; - - svg { - color: #fff; - } - } - } - - &-item_selected { - border: 1px solid @primary-color-1; - } - - &-item:hover { - box-shadow: 0 5px 12px 4px rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.12), - 0 1px 2px -2px rgba(0, 0, 0, 0.16); - } - } -} diff --git a/packages/li-editor/src/widgets/UploadDataset/UploadDatasetList/index.tsx b/packages/li-editor/src/widgets/UploadDataset/UploadDatasetList/index.tsx index 93890e66..612370c2 100644 --- a/packages/li-editor/src/widgets/UploadDataset/UploadDatasetList/index.tsx +++ b/packages/li-editor/src/widgets/UploadDataset/UploadDatasetList/index.tsx @@ -4,7 +4,8 @@ import { theme } from 'antd'; import Tooltip from 'antd/es/tooltip'; import classNames from 'classnames'; import React, { useEffect, useState } from 'react'; -import './index.less'; +import { usePrefixCls } from '../../../hooks'; +import useStyle from './style'; const { useToken } = theme; type DatasetListProps = { @@ -15,6 +16,8 @@ type DatasetListProps = { const DatasetList: React.FC<DatasetListProps> = (props) => { const { dataset, onChange } = props || {}; + const prefixCls = usePrefixCls('upload-list'); + const styles = useStyle(); const [selectedItem, setSelectedItem] = useState<string[]>([]); const { token } = useToken(); @@ -39,23 +42,24 @@ const DatasetList: React.FC<DatasetListProps> = (props) => { }, [dataset]); return ( - <div className="li-upload-list__content"> + <div className={classNames(`${prefixCls}__content`, styles.uploadListContent)}> {dataset.map((item) => { const fileNames = item.metadata.name; return ( <div key={item.id} - className={classNames('li-upload-list__content-item', { - ['li-upload-list__content-item_selected']: selectedItem.includes(item.id), + className={classNames(`${prefixCls}__content-item`, styles.uploadListContentItem, { + [styles.contentItemSelecteds]: selectedItem.includes(item.id), + [`${prefixCls}__content-item_selected`]: selectedItem.includes(item.id), })} onClick={() => handleClickItem(item.id)} > {selectedItem.includes(item.id) && ( - <div className="li-upload-list__content-item-selected"> + <div className={classNames(`${prefixCls}__content-item-selected`, styles.uploadListContentItemSelected)}> <CheckOutlined /> </div> )} - <div className="li-upload-list__content-item__title"> + <div className={classNames(`${prefixCls}__content-item__title`, styles.uploadListContentItemTitle)}> <Tooltip title={fileNames} zIndex={token.zIndexPopupBase + 70}> {fileNames} </Tooltip> diff --git a/packages/li-editor/src/widgets/UploadDataset/UploadDatasetList/style.ts b/packages/li-editor/src/widgets/UploadDataset/UploadDatasetList/style.ts new file mode 100644 index 00000000..d4246ad8 --- /dev/null +++ b/packages/li-editor/src/widgets/UploadDataset/UploadDatasetList/style.ts @@ -0,0 +1,60 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../../hooks'; + +const useStyle = () => { + const { boxShadow, colorPrimary } = useAntdToken(); + + return { + uploadListContent: css` + display: flex; + flex-direction: column; + overflow-x: hidden; + overflow-y: auto; + `, + + uploadListContentItem: css` + position: relative; + display: flex; + align-items: center; + margin: 0 5px 10px 0; + padding: 5px 10px; + border: 1px solid rgba(0, 0, 0, 0.08); + border-radius: 2px; + cursor: pointer; + + &:hover { + box-shadow: ${boxShadow}; + } + `, + + uploadListContentItemTitle: css` + width: 250px; + height: 30px; + overflow: hidden; + line-height: 30px; + text-overflow: ellipsis; + `, + + uploadListContentItemSelected: css` + position: absolute; + top: 50%; + right: 10px; + width: 20px; + height: 20px; + margin-top: -10px; + text-align: center; + background: ${colorPrimary}; + border-radius: 50%; + + svg { + color: #fff; + } + `, + + contentItemSelecteds: css` + border: 1px solid ${colorPrimary}; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/WidgetsPanel/AddWidgetsPanel/WidgetList.tsx b/packages/li-editor/src/widgets/WidgetsPanel/AddWidgetsPanel/WidgetList.tsx index 014661d5..3b5487b3 100644 --- a/packages/li-editor/src/widgets/WidgetsPanel/AddWidgetsPanel/WidgetList.tsx +++ b/packages/li-editor/src/widgets/WidgetsPanel/AddWidgetsPanel/WidgetList.tsx @@ -4,8 +4,9 @@ import { Card, Empty, Tooltip } from 'antd'; import classNames from 'classnames'; import { isEmpty } from 'lodash-es'; import React, { useEffect, useState } from 'react'; +import { usePrefixCls } from '../../../hooks'; import { WidgetTypeMap } from '../../../constants'; -import './index.less'; +import useStyle from './style'; type WidgetListProps = { className?: string; @@ -15,6 +16,8 @@ type WidgetListProps = { const WidgetList: React.FC<WidgetListProps> = (props) => { const { widgets, onChange } = props || {}; + const prefixCls = usePrefixCls('add-widgets-panel'); + const styles = useStyle(); const [selectedItem, setSelectedItem] = useState<string[]>([]); const handleClickItem = (item: ImplementWidget) => { @@ -36,11 +39,11 @@ const WidgetList: React.FC<WidgetListProps> = (props) => { }, [selectedItem]); if (isEmpty(widgets)) { - return <Empty description="暂无可选组件" className="li-add-widgets-panel__impty" />; + return <Empty description="暂无可选组件" className={classNames(`${prefixCls}__impty`, styles.panelImpty)} />; } return ( - <div className="li-add-widgets-panel__content"> + <div className={classNames(`${prefixCls}__content`, styles.panelContent)}> {widgets.map((item) => { const Description = isEmpty(item.metadata.description) ? ( '暂无描述' @@ -56,23 +59,38 @@ const WidgetList: React.FC<WidgetListProps> = (props) => { <Card bodyStyle={{ overflow: 'hidden', padding: 0 }} key={item.metadata.name} - className={classNames('li-add-widgets-panel__content-item', { - ['li-add-widgets-panel__content-item_selected']: selectedItem.includes(item.metadata.name), + className={classNames(`${prefixCls}__content-item`, styles.contentItem, { + [styles.contentItemSelected]: selectedItem.includes(item.metadata.name), + [`${prefixCls}__content-item_selected`]: selectedItem.includes(item.metadata.name), })} > - <div onClick={() => handleClickItem(item)} className="li-add-widgets-panel__content-item-content"> - <div className="li-add-widgets-panel__content-item-content__img">{Image}</div> + <div + onClick={() => handleClickItem(item)} + className={classNames(`${prefixCls}__content-item-content`, styles.itemContent)} + > + <div className={classNames(`${prefixCls}__content-item-content__img`, styles.itemContentImg)}> + {Image} + </div> - <div className="li-add-widgets-panel__content-item-content__info"> - <div className="li-add-widgets-panel__content-item-content__info-title"> + <div className={classNames(`${prefixCls}__content-item-content__info`, styles.itemContentInfo)}> + <div + className={classNames(`${prefixCls}__content-item-content__info-title`, styles.itemContentInfoTitle)} + > {item.metadata.displayName} </div> - <div className="li-add-widgets-panel__content-item-content__info-description">{Description}</div> + <div + className={classNames( + `${prefixCls}__content-item-content__info-description`, + styles.itemContentInfoDescription, + )} + > + {Description} + </div> </div> {selectedItem.includes(item.metadata.name) && ( - <div className="li-add-widgets-panel__content-item-selected"> + <div className={classNames(`${prefixCls}__content-item-selected`, styles.itemContentSelected)}> <CheckOutlined /> </div> )} diff --git a/packages/li-editor/src/widgets/WidgetsPanel/AddWidgetsPanel/index.less b/packages/li-editor/src/widgets/WidgetsPanel/AddWidgetsPanel/index.less deleted file mode 100644 index 350754f9..00000000 --- a/packages/li-editor/src/widgets/WidgetsPanel/AddWidgetsPanel/index.less +++ /dev/null @@ -1,106 +0,0 @@ -@import url('../../../theme/index.less'); - -.@{prefix}-add-widgets-panel { - position: relative; - - .ant-modal-footer { - .ant-badge { - margin-left: 10px; - - .ant-badge-count { - color: @text-primary-color; - box-shadow: none; - } - } - } - - &__impty { - padding-top: 20px; - } - - &__content { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - - &-item { - position: relative; - width: 200px; - margin: 0 5px 5px 0; - background-color: @bg-color-secondary; - cursor: pointer; - - &-content { - position: relative; - display: flex; - align-items: center; - padding: 10px; - - &__img { - margin-right: 10px; - font-size: 40px; - - svg { - color: @primary-color-1; - } - } - - &__info { - display: flex; - flex-direction: column; - justify-content: space-between; - overflow: hidden; - - &-title { - display: -webkit-box; - height: 25px; - overflow: hidden; - font-size: 14px; - line-height: 20px; - text-overflow: ellipsis; - -webkit-line-clamp: 1; - line-clamp: 1; - -webkit-box-orient: vertical; - } - - &-description { - display: -webkit-box; - height: 40px; - overflow: hidden; - color: @text-secondary-color; - font-size: 12px; - line-height: 20px; - text-overflow: ellipsis; - -webkit-line-clamp: 2; - line-clamp: 2; - -webkit-box-orient: vertical; - } - } - } - - &-selected { - position: absolute; - top: 0; - right: 0; - width: 20px; - height: 20px; - text-align: center; - background: @primary-color-1; - border-radius: 50%; - - svg { - color: #fff; - } - } - } - - &-item_selected { - border: 1px solid @primary-color-1; - } - - &-item:hover { - box-shadow: 0 5px 12px 4px rgb(0 0 0 / 9%), 0 3px 6px 0 rgb(0 0 0 / 12%), - 0 1px 2px -2px rgb(0 0 0 / 16%); - } - } -} diff --git a/packages/li-editor/src/widgets/WidgetsPanel/AddWidgetsPanel/index.tsx b/packages/li-editor/src/widgets/WidgetsPanel/AddWidgetsPanel/index.tsx index 14102c25..8775eb60 100644 --- a/packages/li-editor/src/widgets/WidgetsPanel/AddWidgetsPanel/index.tsx +++ b/packages/li-editor/src/widgets/WidgetsPanel/AddWidgetsPanel/index.tsx @@ -1,12 +1,13 @@ import type { ImplementWidget } from '@antv/li-sdk'; import { Badge, Button, Modal, Tabs, theme } from 'antd'; import { isEmpty } from 'lodash-es'; +import classNames from 'classnames'; import React, { useMemo, useState } from 'react'; import { WidgetTypeMap } from '../../../constants'; -import { useEditorService, useEditorState } from '../../../hooks'; +import { useEditorService, useEditorState, usePrefixCls } from '../../../hooks'; import { getMarketWidgetCategory } from '../../../utils/widget'; import { getWidgetDefaultSchema } from './helper'; -import './index.less'; +import useStyle from './style'; import WidgetList from './WidgetList'; type AddWidgetsPanelProps = { @@ -19,6 +20,8 @@ const { useToken } = theme; const AddWidgetsPanel: React.FC<AddWidgetsPanelProps> = (props) => { const { open, onClose } = props; + const prefixCls = usePrefixCls('add-widgets-panel'); + const styles = useStyle(); const { state, updateState } = useEditorState(); const { appService } = useEditorService(); const [selectedWidgets, setSelectedWidgets] = useState<Record<string, ImplementWidget[]>>({}); @@ -112,7 +115,7 @@ const AddWidgetsPanel: React.FC<AddWidgetsPanelProps> = (props) => { return ( <Modal title="新增组件" - className="li-add-widgets-panel" + className={classNames(prefixCls, styles.addPanel)} width={1100} destroyOnClose styles={{ body: { minHeight: '300px' } }} diff --git a/packages/li-editor/src/widgets/WidgetsPanel/AddWidgetsPanel/style.ts b/packages/li-editor/src/widgets/WidgetsPanel/AddWidgetsPanel/style.ts new file mode 100644 index 00000000..dad13644 --- /dev/null +++ b/packages/li-editor/src/widgets/WidgetsPanel/AddWidgetsPanel/style.ts @@ -0,0 +1,112 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../../hooks'; + +const useStyle = () => { + const { antCls, colorText, colorBgContainer, colorPrimary, colorTextTertiary } = useAntdToken(); + + return { + addPanel: css` + position: relative; + ${antCls}-modal-footer { + ${antCls}-badge { + margin-left: 10px; + + ${antCls}-badge-count { + color: ${colorText}; + box-shadow: none; + } + } + } + `, + + panelImpty: css` + padding-top: 20px; + `, + + panelContent: css` + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + `, + + contentItem: css` + position: relative; + width: 200px; + margin: 0 5px 5px 0; + background-color: ${colorBgContainer}; + cursor: pointer; + + &:hover { + box-shadow: 0 5px 12px 4px rgb(0 0 0 / 9%), 0 3px 6px 0 rgb(0 0 0 / 12%), 0 1px 2px -2px rgb(0 0 0 / 16%); + } + `, + + contentItemSelected: css` + border: 1px solid ${colorPrimary}; + `, + + itemContent: css` + position: relative; + display: flex; + align-items: center; + padding: 10px; + `, + + itemContentSelected: css` + position: absolute; + top: 0; + right: 0; + width: 20px; + height: 20px; + text-align: center; + background: ${colorPrimary}; + border-radius: 50%; + + svg { + color: #fff; + } + `, + itemContentImg: css` + margin-right: 10px; + font-size: 40px; + + svg { + color: ${colorPrimary}; + } + `, + + itemContentInfo: css` + display: flex; + flex-direction: column; + justify-content: space-between; + overflow: hidden; + `, + + itemContentInfoTitle: css` + display: -webkit-box; + height: 25px; + overflow: hidden; + font-size: 14px; + line-height: 20px; + text-overflow: ellipsis; + -webkit-line-clamp: 1; + line-clamp: 1; + -webkit-box-orient: vertical; + `, + + itemContentInfoDescription: css` + display: -webkit-box; + height: 40px; + overflow: hidden; + color: ${colorTextTertiary}; + font-size: 12px; + line-height: 20px; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/WidgetsPanel/WidgetAttribute/WidgetForm/index.less b/packages/li-editor/src/widgets/WidgetsPanel/WidgetAttribute/WidgetForm/index.less deleted file mode 100644 index 74f64ab7..00000000 --- a/packages/li-editor/src/widgets/WidgetsPanel/WidgetAttribute/WidgetForm/index.less +++ /dev/null @@ -1,33 +0,0 @@ -@import '../../../../theme/index.less'; - -.@{prefix}-widget-form { - .ant-formily-item-label { - color: @text-primary-color; - } - - .ant-formily-item-asterisk { - color: @text-secondary-color; - } - - .ant-formily-item-label-tooltip-icon { - color: @text-secondary-color; - } - - .ant-formily-item { - margin-bottom: 8px; - padding-bottom: 5px; - border-bottom: 1px solid @border-secondary-color; - } - - .ant-formily-item:last-child { - margin-bottom: 0; - padding-bottom: 0; - border-bottom: none; - } - - .ant-formily-item .ant-formily-item-control-content-component { - display: flex; - align-items: center; - justify-content: flex-end; - } -} diff --git a/packages/li-editor/src/widgets/WidgetsPanel/WidgetAttribute/WidgetForm/index.tsx b/packages/li-editor/src/widgets/WidgetsPanel/WidgetAttribute/WidgetForm/index.tsx index 583ef46d..bb187484 100644 --- a/packages/li-editor/src/widgets/WidgetsPanel/WidgetAttribute/WidgetForm/index.tsx +++ b/packages/li-editor/src/widgets/WidgetsPanel/WidgetAttribute/WidgetForm/index.tsx @@ -6,7 +6,8 @@ import { useMemoizedFn } from 'ahooks'; import classNames from 'classnames'; import { debounce } from 'lodash-es'; import React, { useMemo } from 'react'; -import './index.less'; +import { usePrefixCls } from '../../../../hooks'; +import useStyle from './style'; import WidgetSchemaField from './SchemaField'; type WidgetFormProps = { @@ -19,6 +20,8 @@ type WidgetFormProps = { const WidgetForm: React.FC<WidgetFormProps> = (props) => { const { className, initialValues, registerForm, registerFormProps, onChange } = props; + const prefixCls = usePrefixCls('widget-form'); + const styles = useStyle(); const registerFormData = useMemo(() => { const result = typeof registerForm === 'function' ? registerForm(registerFormProps) : registerForm; @@ -60,7 +63,7 @@ const WidgetForm: React.FC<WidgetFormProps> = (props) => { return ( <Form - className={classNames('li-widget-form', className)} + className={classNames(prefixCls, styles.widgetForm, className)} form={formInstance} labelCol={8} wrapperCol={16} diff --git a/packages/li-editor/src/widgets/WidgetsPanel/WidgetAttribute/WidgetForm/style.ts b/packages/li-editor/src/widgets/WidgetsPanel/WidgetAttribute/WidgetForm/style.ts new file mode 100644 index 00000000..dd3bcdfd --- /dev/null +++ b/packages/li-editor/src/widgets/WidgetsPanel/WidgetAttribute/WidgetForm/style.ts @@ -0,0 +1,42 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../../../hooks'; + +const useStyle = () => { + const { antCls, colorText, colorTextTertiary, colorSplit } = useAntdToken(); + + return { + widgetForm: css` + ${antCls}-formily-item-label { + color: ${colorText}; + } + + ${antCls}-formily-item-asterisk { + color: ${colorTextTertiary}; + } + + ${antCls}-formily-item-label-tooltip-icon { + color: ${colorTextTertiary}; + } + + ${antCls}-formily-item { + margin-bottom: 8px; + padding-bottom: 5px; + border-bottom: 1px solid ${colorSplit}; + } + + ${antCls}-formily-item:last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; + } + + ${antCls}-formily-item ${antCls}-formily-item-control-content-component { + display: flex; + align-items: center; + justify-content: flex-end; + } + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/WidgetsPanel/WidgetList/WidgetGroup.tsx b/packages/li-editor/src/widgets/WidgetsPanel/WidgetList/WidgetGroup.tsx index 3ea60b61..1e06242c 100644 --- a/packages/li-editor/src/widgets/WidgetsPanel/WidgetList/WidgetGroup.tsx +++ b/packages/li-editor/src/widgets/WidgetsPanel/WidgetList/WidgetGroup.tsx @@ -7,8 +7,9 @@ import { isEmpty, isUndefined } from 'lodash-es'; import React, { useMemo, useState } from 'react'; import WidgetName from '../../../components/EditName'; import { WidgetTypeMap } from '../../../constants'; -import { useEditorService, useEditorState } from '../../../hooks'; +import { useEditorService, useEditorState, usePrefixCls } from '../../../hooks'; import WidgetAttribute from '../WidgetAttribute'; +import useStyle from './style'; type WidgetGroupProps = { className?: string; @@ -16,6 +17,8 @@ type WidgetGroupProps = { }; const WidgetGroup: React.FC<WidgetGroupProps> = ({ className, item }) => { + const prefixCls = usePrefixCls('widget-list'); + const styles = useStyle(); const { appService } = useEditorService(); const { state, updateState } = useEditorState(); const [focusWigetId, setFocusWidgetId] = useState(''); @@ -81,7 +84,7 @@ const WidgetGroup: React.FC<WidgetGroupProps> = ({ className, item }) => { return { key: widget.id, - className: 'li-widget-list__panel', + className: classNames(`${prefixCls}__panel`, styles.panel), label: ( <WidgetName name={widget?.metadata?.name} @@ -109,8 +112,8 @@ const WidgetGroup: React.FC<WidgetGroupProps> = ({ className, item }) => { }); return ( - <div className={classNames(className, 'li-widget-list__widget-group')}> - <p className="li-widget-list__widget-group-title">{item.categoryName}</p> + <div className={classNames(className, `${prefixCls}__widget-group`, styles.widgetGroup)}> + <p className={classNames(`${prefixCls}__widget-group-title`, styles.widgetGroupTitle)}>{item.categoryName}</p> <Collapse defaultActiveKey={[]} ghost={true} diff --git a/packages/li-editor/src/widgets/WidgetsPanel/WidgetList/index.less b/packages/li-editor/src/widgets/WidgetsPanel/WidgetList/index.less deleted file mode 100644 index 5e8ac1bb..00000000 --- a/packages/li-editor/src/widgets/WidgetsPanel/WidgetList/index.less +++ /dev/null @@ -1,39 +0,0 @@ -@import '../../../theme/index.less'; - -.@{prefix}-widget-list { - &__widget-group { - &-title { - margin-bottom: 0; - padding-bottom: 10px; - color: @text-secondary-color; - font-weight: 400; - font-size: 14px; - } - - & + & { - margin-top: 20px; - } - } - - &__panel { - .ant-collapse-header { - padding: 6px 13px !important; - background-color: @bg-color-primary !important; - border: 1px solid @border-secondary-color !important; - border-radius: @border-radius !important; - overflow: hidden; - - .ant-collapse-extra { - cursor: pointer !important; - } - } - } - - .ant-collapse .ant-collapse-item { - margin-bottom: 10px; - } - - .ant-collapse-content > .ant-collapse-content-box { - padding: 10px 0; - } -} diff --git a/packages/li-editor/src/widgets/WidgetsPanel/WidgetList/index.tsx b/packages/li-editor/src/widgets/WidgetsPanel/WidgetList/index.tsx index 570b407c..1c8fc812 100644 --- a/packages/li-editor/src/widgets/WidgetsPanel/WidgetList/index.tsx +++ b/packages/li-editor/src/widgets/WidgetsPanel/WidgetList/index.tsx @@ -1,9 +1,9 @@ import { default as classNames } from 'classnames'; import { isEmpty } from 'lodash-es'; import React, { useMemo } from 'react'; -import { useEditorService } from '../../../hooks'; +import { useEditorService, usePrefixCls } from '../../../hooks'; import { getMarketWidgetCategory } from '../../../utils/widget'; -import './index.less'; +import useStyle from './style'; import WidgetGroup from './WidgetGroup'; type WidgetListProps = { @@ -11,6 +11,8 @@ type WidgetListProps = { }; const WidgetList: React.FC<WidgetListProps> = (props) => { + const prefixCls = usePrefixCls('widget-list'); + const styles = useStyle(); const { appService } = useEditorService(); const implementWidgets = useMemo(() => appService.getImplementWidgets(), [appService]); @@ -26,7 +28,7 @@ const WidgetList: React.FC<WidgetListProps> = (props) => { }); }, [implementWidgets]); - return <div className={classNames('li-widget-list', props.className)}>{WidgetGroupList}</div>; + return <div className={classNames(prefixCls, styles.widgetList, props.className)}>{WidgetGroupList}</div>; }; export default WidgetList; diff --git a/packages/li-editor/src/widgets/WidgetsPanel/WidgetList/style.ts b/packages/li-editor/src/widgets/WidgetsPanel/WidgetList/style.ts new file mode 100644 index 00000000..e9c747bd --- /dev/null +++ b/packages/li-editor/src/widgets/WidgetsPanel/WidgetList/style.ts @@ -0,0 +1,48 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../../hooks'; + +const useStyle = () => { + const { antCls, colorTextSecondary, colorBgContainer, colorSplit, borderRadius } = useAntdToken(); + + return { + widgetList: css` + ${antCls}-collapse ${antCls}-collapse-item { + margin-bottom: 10px; + } + + ${antCls}-collapse-content > ${antCls}-collapse-content-box { + padding: 10px 0; + } + `, + + widgetGroup: css` + & + & { + margin-top: 20px; + } + `, + + widgetGroupTitle: css` + margin-bottom: 0; + padding-bottom: 10px; + color: ${colorTextSecondary}; + font-weight: 400; + font-size: 14px; + `, + + panel: css` + ${antCls}-collapse-header { + padding: 6px 13px !important; + overflow: hidden; + background-color: ${colorBgContainer} !important; + border: 1px solid ${colorSplit} !important; + border-radius: ${borderRadius}px !important; + + ${antCls}-collapse-extra { + cursor: pointer !important; + } + } + `, + }; +}; + +export default useStyle; diff --git a/packages/li-editor/src/widgets/WidgetsPanel/WidgetsPanel.less b/packages/li-editor/src/widgets/WidgetsPanel/WidgetsPanel.less deleted file mode 100644 index 9eb47911..00000000 --- a/packages/li-editor/src/widgets/WidgetsPanel/WidgetsPanel.less +++ /dev/null @@ -1,41 +0,0 @@ -@import '../../theme/index.less'; - -.@{prefix}-widgets-panel { - position: relative; - height: 100%; - - &__content { - height: 100%; - - &_hidden { - display: none; - } - } - - &__header { - display: flex; - justify-content: space-between; - margin: 0 20px; - padding: 15px 0 15px; - border-bottom: 1px solid @border-primary-color; - } - - &__title { - font-weight: 500; - font-size: 16px; - } - - &__add-icon { - font-size: 16px !important; - } - - &__widget-list { - height: calc(100% - 57px); - padding: 10px 20px; - overflow-y: auto; - } - - &__attribute { - height: 100%; - } -} diff --git a/packages/li-editor/src/widgets/WidgetsPanel/WidgetsPanel.tsx b/packages/li-editor/src/widgets/WidgetsPanel/WidgetsPanel.tsx index 10732cc2..0dc7faec 100644 --- a/packages/li-editor/src/widgets/WidgetsPanel/WidgetsPanel.tsx +++ b/packages/li-editor/src/widgets/WidgetsPanel/WidgetsPanel.tsx @@ -3,9 +3,10 @@ import { Button, theme } from 'antd'; import classNames from 'classnames'; import React, { useState } from 'react'; import type { ImplementEditorWidgetProps } from '../../types'; +import { usePrefixCls } from '../../hooks'; import AddWidgetsPanel from './AddWidgetsPanel'; import WidgetList from './WidgetList'; -import './WidgetsPanel.less'; +import useStyle from './WidgetsPanelStyle'; interface WidgetsPanelProps extends ImplementEditorWidgetProps { className?: string; @@ -14,6 +15,8 @@ interface WidgetsPanelProps extends ImplementEditorWidgetProps { const { useToken } = theme; const WidgetsPanel: React.FC<WidgetsPanelProps> = (props) => { + const prefixCls = usePrefixCls('widgets-panel'); + const styles = useStyle(); const [visibleAttribute, setVisibleAttribute] = useState(false); const [addWidgetsPanelOpen, setAddWidgetsPanelOpen] = useState(false); const { token } = useToken(); @@ -23,14 +26,15 @@ const WidgetsPanel: React.FC<WidgetsPanelProps> = (props) => { }; return ( - <div className={classNames('li-widgets-panel', props.className)}> + <div className={classNames(prefixCls, styles.panel, props.className)}> <div - className={classNames('li-widgets-panel__content', { - 'li-widgets-panel__content_hidden': visibleAttribute, + className={classNames(`${prefixCls}__content`, styles.panelContent, { + [`${prefixCls}__content_hidden`]: visibleAttribute, + [styles.panelContentHidden]: visibleAttribute, })} > - <div className="li-widgets-panel__header"> - <div className="li-widgets-panel__title">组件</div> + <div className={classNames(`${prefixCls}__header`, styles.panelHeader)}> + <div className={classNames(`${prefixCls}__title`, styles.panelTitle)}>组件</div> <Button size="small" type="link" @@ -39,10 +43,10 @@ const WidgetsPanel: React.FC<WidgetsPanelProps> = (props) => { onClick={openAddWidgetsPanel} /> </div> - <WidgetList className="li-widgets-panel__widget-list" /> + <WidgetList className={classNames(`${prefixCls}__widget-list`, styles.widgetList)} /> </div> - {/* {visibleAttribute && <div className="li-widgets-panel__attribute">组件配置内容</div>} */} + {/* {visibleAttribute && <div className={classNames(`${prefixCls}__attribute`, styles.attribute)}>组件配置内容</div>} */} {addWidgetsPanelOpen && ( <AddWidgetsPanel open={addWidgetsPanelOpen} diff --git a/packages/li-editor/src/widgets/WidgetsPanel/WidgetsPanelStyle.ts b/packages/li-editor/src/widgets/WidgetsPanel/WidgetsPanelStyle.ts new file mode 100644 index 00000000..899a7ed0 --- /dev/null +++ b/packages/li-editor/src/widgets/WidgetsPanel/WidgetsPanelStyle.ts @@ -0,0 +1,49 @@ +import { css } from '@emotion/css'; +import { useAntdToken } from '../../hooks'; + +const useStyle = () => { + const { colorSplit } = useAntdToken(); + + return { + panel: css` + position: relative; + height: 100%; + `, + + panelContent: css` + height: 100%; + `, + + panelContentHidden: css` + display: none; + `, + + panelHeader: css` + display: flex; + justify-content: space-between; + margin: 0 20px; + padding: 15px 0 15px; + border-bottom: 1px solid ${colorSplit}; + `, + panelTitle: css` + font-weight: 500; + font-size: 16px; + `, + + panelAddIcon: css` + font-size: 16px !important; + `, + + widgetList: css` + height: calc(100% - 57px); + padding: 10px 20px; + overflow-y: auto; + `, + + attribute: css` + height: 100%; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-p2/src/LayerAttribute/components/IconScaleSelector/CustomItem/style.ts b/packages/li-p2/src/LayerAttribute/components/IconScaleSelector/CustomItem/style.ts index 9199cb92..2b244c29 100644 --- a/packages/li-p2/src/LayerAttribute/components/IconScaleSelector/CustomItem/style.ts +++ b/packages/li-p2/src/LayerAttribute/components/IconScaleSelector/CustomItem/style.ts @@ -33,7 +33,7 @@ export default genStyleHook('icon-scale-selector-icon-item', (token) => { justifyContent: 'center', background: controlItemBgHover, verticalAlign: 'middle', - borderRadius: borderRadius, + borderRadius: `${borderRadius}px`, border: 0, cursor: 'pointer', diff --git a/packages/li-p2/src/LayerAttribute/components/IconScaleSelector/UnknownIconItem/style.ts b/packages/li-p2/src/LayerAttribute/components/IconScaleSelector/UnknownIconItem/style.ts index 0e8fd15f..c195c4ad 100644 --- a/packages/li-p2/src/LayerAttribute/components/IconScaleSelector/UnknownIconItem/style.ts +++ b/packages/li-p2/src/LayerAttribute/components/IconScaleSelector/UnknownIconItem/style.ts @@ -33,7 +33,7 @@ export default genStyleHook('icon-scale-selector-unknown-item', (token) => { justifyContent: 'center', background: controlItemBgHover, verticalAlign: 'middle', - borderRadius: borderRadius, + borderRadius: `${borderRadius}px`, '&:hover': { background: controlItemBgActive, }, diff --git a/packages/li-p2/src/LayerAttribute/components/ResterScaleSelector/CustomMappingColors/CustomCat/CustomItem/style.ts b/packages/li-p2/src/LayerAttribute/components/ResterScaleSelector/CustomMappingColors/CustomCat/CustomItem/style.ts index 0a1b9019..92816529 100644 --- a/packages/li-p2/src/LayerAttribute/components/ResterScaleSelector/CustomMappingColors/CustomCat/CustomItem/style.ts +++ b/packages/li-p2/src/LayerAttribute/components/ResterScaleSelector/CustomMappingColors/CustomCat/CustomItem/style.ts @@ -43,14 +43,14 @@ export default genStyleHook('rester-scale-selector__custom-input', (token) => { zIndex: 1, }, - '.ant-popover': { + [`${antCls}-popover`]: { zIndex: '4 !important', - '.ant-color-picker-presets .ant-collapse-item .ant-collapse-header': { + [`${antCls}-color-picker-presets ${antCls}-collapse-item ${antCls}-collapse-header`]: { display: 'none', }, }, - '.ant-color-picker .ant-color-picker-panel .ant-color-picker-inner-panel-divider': { + [`${antCls}-color-picker ${antCls}-color-picker-panel ${antCls}-color-picker-inner-panel-divider`]: { margin: '3px 8px ', }, }; diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomNumber/CustomItem/InputNumber/style.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomNumber/CustomItem/InputNumber/style.ts index 258f89b8..fc3bfc03 100644 --- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomNumber/CustomItem/InputNumber/style.ts +++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomNumber/CustomItem/InputNumber/style.ts @@ -1,7 +1,7 @@ import { genStyleHook } from '@formily/antd-v5/esm/__builtins__'; export default genStyleHook('scale-selector__custom-input__number', (token) => { - const { componentCls } = token; + const { componentCls, antCls } = token; return { [componentCls]: { @@ -17,7 +17,7 @@ export default genStyleHook('scale-selector__custom-input__number', (token) => { width: '50px', }, - '.ant-input-number-input-wrap': { + [`${antCls}-input-number-input-wrap`]: { input: { fontSize: '12px', }, diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomNumber/CustomItem/style.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomNumber/CustomItem/style.ts index ec677b9e..818ec631 100644 --- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomNumber/CustomItem/style.ts +++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomNumber/CustomItem/style.ts @@ -43,14 +43,14 @@ export default genStyleHook('scale-selector__custom-content__custom-number__inpu zIndex: 1, }, - '.ant-popover': { + [`${antCls}-popover`]: { zIndex: '4 !important', - '.ant-color-picker-presets .ant-collapse-item .ant-collapse-header': { + [`${antCls}-color-picker-presets ${antCls}-collapse-item ${antCls}-collapse-header`]: { display: 'none', }, }, - '.ant-color-picker .ant-color-picker-panel .ant-color-picker-inner-panel-divider': { + [`${antCls}-color-picker ${antCls}-color-picker-panel ${antCls}-color-picker-inner-panel-divider`]: { margin: '3px 8px ', }, }; diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomString/CustomItem/style.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomString/CustomItem/style.ts index 52fae478..6ec4a782 100644 --- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomString/CustomItem/style.ts +++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomString/CustomItem/style.ts @@ -44,14 +44,14 @@ export default genStyleHook('scale-selector__custom-string', (token) => { zIndex: 1, }, - '.ant-popover': { + [`${antCls}-popover`]: { zIndex: '4 !important', - '.ant-color-picker-presets .ant-collapse-item .ant-collapse-header': { + [`${antCls}-color-picker-presets ${antCls}-collapse-item ${antCls}-collapse-header`]: { display: 'none', }, }, - '.ant-color-picker .ant-color-picker-panel .ant-color-picker-inner-panel-divider': { + [`${antCls}-color-picker ${antCls}-color-picker-panel ${antCls}-color-picker-inner-panel-divider`]: { margin: '3px 8px ', }, }; diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomString/UnknownItem/style.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomString/UnknownItem/style.ts index e84a732a..cebe9ec7 100644 --- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomString/UnknownItem/style.ts +++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomString/UnknownItem/style.ts @@ -41,14 +41,13 @@ export default genStyleHook('scale-selector__custom-string-unknown', (token) => zIndex: 1, }, - '.ant-popover': { + [`${antCls}-popover`]: { zIndex: '4 !important', - '.ant-color-picker-presets .ant-collapse-item .ant-collapse-header': { + [`${antCls}-color-picker-presets ${antCls}-collapse-item ${antCls}-collapse-header`]: { display: 'none', }, }, - - '.ant-color-picker .ant-color-picker-panel .ant-color-picker-inner-panel-divider': { + [`${antCls}-color-picker ${antCls}-color-picker-panel ${antCls}-color-picker-inner-panel-divider`]: { margin: '3px 8px ', }, }; diff --git a/packages/li-p2/src/components/Formily/ColorPicker/style.ts b/packages/li-p2/src/components/Formily/ColorPicker/style.ts index c8404660..f790a3d5 100644 --- a/packages/li-p2/src/components/Formily/ColorPicker/style.ts +++ b/packages/li-p2/src/components/Formily/ColorPicker/style.ts @@ -1,7 +1,7 @@ import { genStyleHook } from '@formily/antd-v5/esm/__builtins__'; export default genStyleHook('color-picker', (token) => { - const { componentCls, lineWidth, lineType, colorBorder } = token; + const { antCls, componentCls, lineWidth, lineType, colorBorder, borderRadius } = token; return { [componentCls]: { @@ -12,24 +12,25 @@ export default genStyleHook('color-picker', (token) => { height: ' 32px', padding: '0 5px', backgroundColor: 'initial', - borderWidth: lineWidth, + borderWidth: `${lineWidth}px`, borderStyle: lineType, borderColor: colorBorder, - borderRadius: '2px', + borderRadius: `${borderRadius}px`, [`${componentCls}__color-block`]: { width: '35px', height: '20px', - borderRadius: '2px', + borderRadius: `${borderRadius}px`, cursor: 'pointer', }, }, - '.ant-popover': { - '.ant-color-picker-inner-panel-divider': { + [`${antCls}-popover`]: { + [`${antCls}-color-picker-inner-panel-divider`]: { margin: '3px 8px !important', }, - '.ant-color-picker-presets .ant-collapse-item .ant-collapse-header': { + + [`${antCls}-color-picker-presets ${antCls}-collapse-item ${antCls}-collapse-header`]: { display: 'none', }, }, diff --git a/packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/CustomRange/RangeItem/style.ts b/packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/CustomRange/RangeItem/style.ts index 5f981aa7..a2274c00 100644 --- a/packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/CustomRange/RangeItem/style.ts +++ b/packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/CustomRange/RangeItem/style.ts @@ -1,7 +1,15 @@ import { genStyleHook } from '@formily/antd-v5/esm/__builtins__'; export default genStyleHook('color-range-selector__custom-range__range-item', (token) => { - const { componentCls, antCls, colorTextSecondary, colorBorder, colorInfoTextHover, controlItemBgHover } = token; + const { + componentCls, + antCls, + colorTextSecondary, + colorBorder, + colorInfoTextHover, + controlItemBgHover, + borderRadius, + } = token; return { [componentCls]: { @@ -30,7 +38,7 @@ export default genStyleHook('color-range-selector__custom-range__range-item', (t paddingLeft: '3px', '&:hover': { - borderRadius: 4, + borderRadius: `${borderRadius}px`, background: controlItemBgHover, }, }, @@ -75,14 +83,14 @@ export default genStyleHook('color-range-selector__custom-range__range-item', (t }, }, - '.ant-popover': { + [`${antCls}-popover`]: { zIndex: '4 !important', - '.ant-color-picker-presets .ant-collapse-item .ant-collapse-header': { + [`${antCls}-color-picker-presets ${antCls}-collapse-item ${antCls}-collapse-header`]: { display: 'none', }, }, - '.ant-color-picker .ant-color-picker-panel .ant-color-picker-inner-panel-divider': { + [`${antCls}-color-picker ${antCls}-color-picker-panel ${antCls}-color-picker-inner-panel-divider`]: { margin: '3px 8px ', }, };