style: editor less to style in js

packages/li-editor/src/layout/style.ts

@@ -47,7 +47,7 @@ const useStyle = () => {
       padding: 15px;
       color: ${colorTextSecondary};
       background-color: ${colorBgContainer};
-      border-radius: ${borderRadius};
+      border-radius: ${borderRadius}px;
     `,
 
     left: css`

packages/li-editor/src/widgets/DatasetPreview/DatasetPreview.tsx

@@ -2,17 +2,20 @@ 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;
 
 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

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;

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,25 +110,30 @@ 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
           )}
         </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>

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, colorBgElevated, colorSplit, colorPrimary, borderRadius } = useAntdToken();
+
+  return {
+    listCard: css`
+      position: relative;
+      width: auto;
+      padding: 8px;
+      background-color: ${colorBgElevated};
+      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;