feat: update iconfont

.gitignore

@@ -6,7 +6,6 @@ node_modules/
 .vscode
 *.swp
 *.lock
-*.js
 *.map
 .github/workflows/nodejs.yml
 

app-v2/App.less → app-v2/app.less

@@ -67,6 +67,11 @@
 	color: @red;
 	border-color: @red;
 
+	svg {
+		width: 20px;
+		height: 20px;
+	}
+
 	&:hover {
 		color: @red;
 		border-color: @red;
@@ -76,9 +81,59 @@
 .ant-btn.primary-btn {
 	color: @blue;
 	border-color: @blue;
+	display: inline-flex;
+	align-items: center;
+
+	svg {
+		width: 20px;
+		height: 20px;
+	}
 
 	&:hover {
 		color: @blue;
 		border-color: @blue;
 	}
 }
+
+.ant-btn.cancel-btn {
+	color: @darkGray;
+	border-color: @darkGray;
+
+	svg {
+		width: 20px;
+		height: 20px;
+	}
+
+	&:hover {
+		color: @darkGray;
+		border-color: @darkGray;
+	}
+}
+
+.ant-btn.studio-add-btn {
+	border-radius: 3px;
+	display: inline-flex;
+	align-items: center;
+	padding: 0 29px;
+
+	a {
+		display: flex;
+		align-items: center;
+	}
+
+	.studio-add-btn-icon {
+		display: inline-flex;
+		margin-right: 10px;
+		height: 22px;
+
+		> svg {
+			width: 22px;
+			height: 22px;
+		}
+
+		& ~ span {
+			margin-left: 0;
+		}
+	}
+}
+

app-v2/components/Breadcrumb/index.less

@@ -7,7 +7,7 @@
 	display: flex;
 	padding-left: 0;
 	padding-right: 0;
-	.arrow-icon {
+	.arrow-icon > svg {
 		width: 23px;
 		height: 23px;
 		margin-right: 15px;
@@ -18,10 +18,16 @@
 		align-items: center;
 	}
 	.ant-breadcrumb {
+		display: inline-flex;
+		align-items: center;
 		font-size: 18px;
 		& > span {
+			display: inline-flex;
+			align-items: center;
 			a, span {
 				font-weight: 300;
+				display: inline-flex;
+				align-items: center;
 			}
 		}
 		& > span:last-child {

app-v2/components/Breadcrumb/index.tsx

@@ -1,6 +1,7 @@
 import { Breadcrumb, PageHeader } from 'antd';
 import React from 'react';
 import { Link } from 'react-router-dom';
+import Icon from '@appv2/components/Icon';
 
 import './index.less';
 
@@ -21,7 +22,7 @@ const itemRender = (route, _params, routes, _paths) => {
     <Link to={route.path}>
       {first ? (
         <>
-          {/* <BorderVerticleOutlined className="arrow-icon" /> */}
+          <Icon className="arrow-icon" type="icon-btn-return" />
           {route.breadcrumbName}
         </>
       ) : (

app-v2/components/CSVPreviewLink/index.less

@@ -10,6 +10,19 @@
 		th {
 			text-align: center;
 		}
+		.ant-table-tbody {
+			tr {
+				background-color: #F3F6F9;
+			}
+		}
+	}
+	.noBackground {
+		.ant-table-thead > tr > th {
+			background-color: #fff;
+			&::before {
+				content: none !important;
+			}
+		}
 	}
 
 	> .operation {

app-v2/components/CSVPreviewLink/index.tsx

@@ -1,17 +1,20 @@
 import { Button, Popover, Table } from 'antd';
+import { } from 'antd/lib/button';
 import React, { useState } from 'react';
 import intl from 'react-intl-universal';
-import './index.less';
 import { v4 as uuidv4 } from 'uuid';
+import './index.less';
+import classNames from 'classnames';
 
 interface IProps {
   file: any;
-  children: string;
+  children: any;
   onMapping?: (index) => void;
+  btnType?: string
 }
 
 const CSVPreviewLink = (props: IProps) => {
-  const { onMapping, file: { content }, children } = props;
+  const { onMapping, file: { content }, children, btnType } = props;
   const [visible, setVisible] = useState(false);
   const handleLinkClick = e => {
     e.stopPropagation();
@@ -48,7 +51,7 @@ const CSVPreviewLink = (props: IProps) => {
       onVisibleChange={visible => setVisible(visible)}
       content={<div className="csv-preview">
         <Table
-          bordered={true}
+          className={classNames({ 'noBackground': !!onMapping })}
           dataSource={content}
           columns={columns}
           pagination={false}
@@ -63,7 +66,7 @@ const CSVPreviewLink = (props: IProps) => {
         </div>
       </div>}
     >
-      <Button type="link" className="btn-preview" onClick={handleLinkClick}>
+      <Button type={btnType as any || 'link'} className={classNames('btn-preview', { 'primary-btn': btnType === 'default' })} onClick={handleLinkClick}>
         {children}
       </Button>
     </Popover>

app-v2/components/Icon/index.tsx

@@ -1,15 +1,7 @@
-import React, { HTMLProps } from 'react';
-
-interface IIconFontProps extends HTMLProps<HTMLElement> {
-  type: string;
-  className?: string
-}
-
-const IconFont = (props: IIconFontProps) => {
-  const { type, className, ...others } = props;
-  return (
-    <span className={`nebula-studio-icon ${type} ${className}`} {...others} />
-  );
-};
+import { createFromIconfontCN } from '@ant-design/icons';
+import icon from '@appv2/static/fonts/iconfont.js';
+const IconFont = createFromIconfontCN({
+  scriptUrl: icon,
+});
 
 export default IconFont;

app-v2/index.tsx

@@ -9,7 +9,6 @@ import dayjs from 'dayjs';
 import intl from 'react-intl-universal';
 import duration from 'dayjs/plugin/duration';
 import AuthorizedRoute from './AuthorizedRoute';
-import '@appv2/static/fonts/iconfont.css';
 import Cookie from 'js-cookie';
 import { INTL_LOCALES } from '@appv2/config/constants';
 import { LanguageContext } from '@appv2/context';

app-v2/pages/Import/FileUpload/index.less

@@ -14,4 +14,12 @@
 			margin-bottom: 20px;
 		}
 	}
+	.operation {
+		button {
+			width: 70px;
+		}
+		button:not(:last-child) {
+			margin-right: 15px;
+		}
+	}
 }

app-v2/pages/Import/FileUpload/index.tsx

@@ -2,10 +2,9 @@ import { Button, Checkbox, Popconfirm, Table, Upload } from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import intl from 'react-intl-universal';
-
+import Icon from '@appv2/components/Icon';
 import CSVPreviewLink from '@appv2/components/CSVPreviewLink';
 import { observer } from 'mobx-react-lite';
-
 import { useStore } from '@appv2/stores';
 import { getFileSize } from '@appv2/utils/file';
 import { trackPageView } from '@appv2/utils/stat';
@@ -65,16 +64,18 @@ const FileUpload = () => {
           return (
             <div className="operation">
               <div>
-                <CSVPreviewLink file={file}>
-                  {intl.get('import.preview')}
+                <CSVPreviewLink file={file} btnType="default">
+                  <Icon type="icon-btn-detail" />
                 </CSVPreviewLink>
                 <Popconfirm
                   onConfirm={() => asyncDeleteFile(index)}
                   title={intl.get('common.ask')}
                   okText={intl.get('common.ok')}
                   cancelText={intl.get('common.cancel')}
                 >
-                  <Button type="link">{intl.get('common.delete')}</Button>
+                  <Button className="warning-btn">
+                    <Icon type="icon-btn-delete" />
+                  </Button>
                 </Popconfirm>
               </div>
             </div>
@@ -97,8 +98,8 @@ const FileUpload = () => {
         customRequest={handleUpdate}
         beforeUpload={transformFile as any}
       >
-        <Button className="upload-btn" type="primary">
-          + {intl.get('import.uploadFile')}
+        <Button className="studio-add-btn upload-btn" type="primary">
+          <Icon className="studio-add-btn-icon" type="icon-btn-add" />{intl.get('import.uploadFile')}
         </Button>
       </Upload>
       <div className="file-list">

app-v2/pages/Import/TaskCreate/FileSelect/index.tsx

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react-lite';
 import { useStore } from '@appv2/stores';
 import { v4 as uuidv4 } from 'uuid';
 import './index.less';
+import Icon from '@appv2/components/Icon';
 
 const Option = Select.Option;
 
@@ -69,8 +70,9 @@ const FileSelect = (props: IProps) => {
       </Form>}
       title={intl.get('import.selectFile')}
     >
-      <Button type="primary" className="btn-bind-source" onClick={() => setVisible(true)}>
-        + {intl.get('import.bindDatasource')}
+      <Button type="primary" className="studio-add-btn-icon btn-bind-source" onClick={() => setVisible(true)}>
+        <Icon className="studio-add-btn-icon" type="icon-btn-add" />
+        {intl.get('import.bindDatasource')}
       </Button>
     </Popover>
   );

app-v2/pages/Import/TaskCreate/SchemaConfig/index.tsx

@@ -9,6 +9,8 @@ import TagConfig from './TagConfig';
 import intl from 'react-intl-universal';
 import EdgeConfig from './EdgeConfig';
 const { Panel } = Collapse;
+import Icon from '@appv2/components/Icon';
+
 import './index.less';
 
 interface IProps {
@@ -71,8 +73,9 @@ const SchemaConfig = (props: IProps) => {
           {type === 'vertices' && data.tags.map((tag, tagIndex) => <TagConfig key={tagIndex} file={data.file} tag={tag} tagIndex={tagIndex} configIndex={configIndex} />)}
           {type === 'edge' && <EdgeConfig configIndex={configIndex} edge={data} />}
           {type === 'vertices' && <div className="btns">
-            <Button type="default" onClick={() => addTag(configIndex)}>
-              + {intl.get('import.addTag')}
+            <Button className="primary-btn studio-add-btn-icon" onClick={() => addTag(configIndex)}>
+              <Icon className="studio-add-btn-icon" type="icon-btn-add" />
+              {intl.get('import.addTag')}
             </Button>
           </div>}
         </div>

app-v2/pages/Import/TaskList/TaskItem/index.tsx

@@ -6,6 +6,7 @@ import './index.less';
 import { ITaskItem, ITaskStatus } from '@appv2/interfaces/import';
 import dayjs from 'dayjs';
 import { floor } from 'lodash';
+import Icon from '@appv2/components/Icon';
 interface IProps {
   data: ITaskItem;
   handleStop: (id: number) => void;
@@ -73,7 +74,10 @@ const TaskItem = (props: IProps) => {
     <div className="task-item">
       <div className="row">
         <span>{intl.get('common.space')}: {space}</span>
-        <Button type="link" size="small" onClick={() => handleDownload(taskID)}>{intl.get('import.downloadConfig')}</Button>
+        <Button type="link" size="small" onClick={() => handleDownload(taskID)}>
+          <Icon type="icon-btn-download" />
+          {intl.get('import.downloadConfig')}
+        </Button>
       </div>
       <div className="row">
         <div className="progress">
@@ -107,8 +111,8 @@ const TaskItem = (props: IProps) => {
             strokeColor={status && COLOR_MAP[status]} />
         </div>
         <div className="operations">
-          <Button>{intl.get('import.details')}</Button>
-          <Button type="primary">{intl.get('import.viewLogs')}</Button>
+          <Button className="primary-btn">{intl.get('import.details')}</Button>
+          <Button className="primary-btn">{intl.get('import.viewLogs')}</Button>
           {taskStatus === ITaskStatus.statusProcessing && 
           <Popconfirm
             placement="left"
@@ -117,7 +121,7 @@ const TaskItem = (props: IProps) => {
             okText={intl.get('common.confirm')}
             cancelText={intl.get('common.cancel')}
           >
-            <Button>{intl.get('import.endImport')}</Button>
+            <Button className="cancel-btn">{intl.get('import.endImport')}</Button>
           </Popconfirm>}
           {taskStatus !== ITaskStatus.statusProcessing && 
           <Popconfirm

app-v2/pages/Import/TaskList/index.less

@@ -2,6 +2,7 @@
 .nebula-data-import {
   .task-btns {
     margin: 15px 0 20px;
+    display: flex;
     & > button:not(:last-child) {
       margin-right: 15px;
     }

app-v2/pages/Import/TaskList/index.tsx

@@ -5,7 +5,7 @@ import TaskItem from './TaskItem';
 import { useHistory } from 'react-router-dom';
 import intl from 'react-intl-universal';
 import { observer } from 'mobx-react-lite';
-
+import Icon from '@appv2/components/Icon';
 import { useStore } from '@appv2/stores';
 import { trackPageView } from '@appv2/utils/stat';
 
@@ -56,11 +56,11 @@ const TaskList = () => {
     <div className="nebula-data-import">
       <div className="task-btns">
         <Button
-          className="upload-btn"
+          className="studio-add-btn upload-btn"
           type="primary"
           onClick={() => history.push('/import/create')}
         >
-          {intl.get('import.createTask')}
+          <Icon className="studio-add-btn-icon" type="icon-btn-add" />{intl.get('import.createTask')}
         </Button>
         <Button className="upload-btn" type="default">
           {intl.get('import.uploadTemp')}