feat: update import task & layout

.eslintrc.js

@@ -177,7 +177,7 @@ module.exports = {
             'error',
             10
         ],
-        'no-bitwise': 'error',
+        'no-bitwise': 'off',
         'no-caller': 'error',
         'no-cond-assign': 'error',
         'no-console': [

app-v2/AuthorizedRoute.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import { observer } from 'mobx-react-lite';
+
+import { useStore } from '@appv2/stores';
+interface IProps {
+  component?: any;
+  render?: any
+}
+
+const AuthorizedRoute = (props: IProps) => {
+  const { component: Component, render, ...rest } = props;
+  const { global: { host, username } } = useStore();
+  if (host && username) {
+    return Component ? (
+      <Route {...rest} render={props => <Component {...props} />} />
+    ) : (
+      <Route render={render} {...rest} />
+    );
+  } else {
+    return <Redirect to="/login" />;
+  }
+};
+
+export default observer(AuthorizedRoute);

app-v2/common.less

@@ -0,0 +1,32 @@
+@grayDark: #36383D;
+@dark: rgba(0,0,0,.9);
+@disableGray: rgba(255, 255, 255, 0.3);
+@promptGray: #8C8C8C;
+@blue: #0091ff;
+@errorRed: #E02020;
+@disableBlue: #375d7a;
+
+@font-face {
+	font-family: 'Roboto-Black';
+	src: url(~@appv2/static/fonts/Roboto-Black.ttf);
+}
+
+@font-face {
+	font-family: 'Roboto-Bold';
+	src: url(~@appv2/static/fonts/Roboto-Bold.ttf);
+}
+
+@font-face {
+	font-family: 'Roboto-Light';
+	src: url(~@appv2/static/fonts/Roboto-Light.ttf);
+}
+
+@font-face {
+	font-family: 'Roboto-Medium';
+	src: url(~@appv2/static/fonts/Roboto-Medium.ttf);
+}
+
+@font-face {
+	font-family: 'Roboto-Regular';
+	src: url(~@appv2/static/fonts/Roboto-Regular.ttf);
+}

app-v2/components/Avatar/index.tsx

@@ -0,0 +1,33 @@
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { Avatar as AntAvatar } from 'antd';
+
+interface IProps {
+  username?: string,
+  size: 'small'|'large'|'default'
+}
+
+const getColorIndex = (value: string) => {
+  const index = value.toLowerCase().charCodeAt(0) - 96;
+  return Math.floor(index / Math.floor(26 / RANDOM_COLOR_PICKER.length + 1));
+};
+
+const RANDOM_COLOR_PICKER = ['#345EDA', '#0C89BE', '#1D9E96', '#219A1F', '#D4A600', '#B36235', '#C54262'];
+
+const Avatar = (props: IProps) => {
+  const { username, size } = props;
+
+  const [avatarColor, setAvatarColor] = useState<string>(RANDOM_COLOR_PICKER[0]);
+  useEffect(() => {
+    if(username) {
+      const colorIndex = getColorIndex(username[0]);
+      setAvatarColor(RANDOM_COLOR_PICKER[colorIndex]);
+    }
+  }, [username]
+  );
+  return (<AntAvatar size={size} style={{ backgroundColor: avatarColor }}>
+    {username && username[0]?.toUpperCase()}
+  </AntAvatar>);
+};
+
+export default Avatar;

app-v2/components/Breadcrumb/index.less

@@ -0,0 +1,28 @@
+.nebula-breadcrumb {
+	height: 60px;
+	background-color: #fff;
+	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+	font-size: 18px;
+	align-items: center;
+	display: flex;
+	padding-left: 40px;
+	.arrow-icon {
+		width: 23px;
+		height: 23px;
+		margin-right: 15px;
+	}
+	.ant-breadcrumb {
+		font-size: 18px;
+		& > span {
+			a, span {
+				font-weight: 300;
+			}
+		}
+		& > span:last-child {
+			a, span {
+				color: #465B7A;
+				font-weight: 600;
+			}
+		}
+	}
+}

app-v2/components/Breadcrumb/index.tsx

@@ -0,0 +1,46 @@
+import { PageHeader } from 'antd';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import './index.less';
+
+interface IProps {
+  routes: {
+    path: string;
+    breadcrumbName: string;
+  }[];
+  ExtraNode?: JSX.Element;
+}
+
+const itemRender = (route, _params, routes, _paths) => {
+  const last = routes.indexOf(route) === routes.length - 1;
+  const first = routes.indexOf(route) === 0;
+  return last ? (
+    <span>{route.breadcrumbName}</span>
+  ) : (
+    <Link to={route.path}>
+      {first ? (
+        <>
+          {/* <BorderVerticleOutlined className="arrow-icon" /> */}
+          {route.breadcrumbName}
+        </>
+      ) : (
+        route.breadcrumbName
+      )}
+    </Link>
+  );
+};
+
+const Breadcrumb: React.FC<IProps> = (props: IProps) => {
+  const { routes, ExtraNode } = props;
+  return (
+    <PageHeader
+      title={null}
+      className="nebula-breadcrumb"
+      breadcrumb={{ routes, itemRender }}
+      extra={ExtraNode}
+    />
+  );
+};
+
+export default Breadcrumb;

app-v2/components/CSVPreviewLink/index.less

@@ -0,0 +1,32 @@
+.popover-preview {
+	max-width: 80%;
+}
+.csv-preview {
+	padding: 16px 8px 50px;
+	overflow: auto;
+
+	table {
+		td,
+		th {
+			text-align: center;
+		}
+	}
+
+	> .operation {
+		padding-bottom: 25px;
+		text-align: center;
+		position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+	}
+
+	.csv-select-index {
+		margin-right: 10px;
+	}
+
+	.anticon {
+		font-size: 16px;
+	}
+}
+

app-v2/components/CSVPreviewLink/index.tsx

@@ -0,0 +1,73 @@
+import { Button, Popover, Table } from 'antd';
+import React, { useState } from 'react';
+import intl from 'react-intl-universal';
+import './index.less';
+import { v4 as uuidv4 } from 'uuid';
+
+interface IProps {
+  file: any;
+  children: string;
+  onMapping?: (index) => void;
+}
+
+const CSVPreviewLink = (props: IProps) => {
+  const { onMapping, file: { content }, children } = props;
+  const [visible, setVisible] = useState(false);
+  const handleLinkClick = e => {
+    e.stopPropagation();
+    setVisible(true);
+  };
+
+  const handleMapping = index => {
+    onMapping && onMapping(index);
+    setVisible(false);
+  };
+  const columns = content.length
+    ? content[0].map((_, index) => {
+      const textIndex = index;
+      return {
+        title: onMapping ? (
+          <Button
+            type="primary"
+            className="csv-select-index"
+            onClick={() => handleMapping(textIndex)}
+          >{`column ${textIndex}`}</Button>
+        ) : (
+          `Column ${textIndex}`
+        ),
+        dataIndex: index,
+      };
+    })
+    : [];
+  return (
+    <Popover
+      destroyTooltipOnHide={true}
+      overlayClassName="popover-preview"
+      visible={visible}
+      trigger="click"
+      onVisibleChange={visible => setVisible(visible)}
+      content={<div className="csv-preview">
+        <Table
+          bordered={true}
+          dataSource={content}
+          columns={columns}
+          pagination={false}
+          rowKey={() => uuidv4()}
+        />
+        <div className="operation">
+          {onMapping && (
+            <Button onClick={() => handleMapping(null)}>
+              {intl.get('import.ignore')}
+            </Button>
+          )}
+        </div>
+      </div>}
+    >
+      <Button type="link" className="btn-preview" onClick={handleLinkClick}>
+        {children}
+      </Button>
+    </Popover>
+  );
+};
+
+export default CSVPreviewLink;

app-v2/components/Icon/index.less

@@ -0,0 +1,4 @@
+svg.icon {
+	width: 30px;
+	height: 30px;
+}

app-v2/components/Icon/index.tsx

@@ -0,0 +1,15 @@
+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} />
+  );
+};
+
+export default IconFont;

app-v2/components/Modal.tsx

@@ -0,0 +1,79 @@
+import { Modal as AntModal } from 'antd';
+import { ModalProps } from 'antd/lib/modal';
+import React, { Component } from 'react';
+
+interface IModalState {
+  visible: boolean;
+}
+
+interface IModalHandler {
+  show: (callback?: any) => void;
+  hide: (callback?: any) => void;
+}
+
+interface IModalProps extends ModalProps {
+  /**
+   * use this hook you can get the handler of Modal
+   * handlerRef => ({ visible, show, hide })
+   */
+  handlerRef?: (handler: IModalHandler) => void;
+  children?: any;
+}
+export default class Modal extends Component<IModalProps, IModalState> {
+  constructor(props: IModalProps) {
+    super(props);
+    this.state = {
+      visible: false,
+    };
+  }
+  componentDidMount() {
+    if (this.props.handlerRef) {
+      this.props.handlerRef({
+        show: this.show,
+        hide: this.hide,
+      });
+    }
+  }
+
+  show = (callback?: any) => {
+    this.setState(
+      {
+        visible: true,
+      },
+      () => {
+        if (callback) {
+          callback();
+        }
+      },
+    );
+  };
+
+  hide = (callback?: any) => {
+    this.setState(
+      {
+        visible: false,
+      },
+      () => {
+        if (callback) {
+          callback();
+        }
+      },
+    );
+  };
+
+  render() {
+    return (
+      this.state.visible && (
+        <AntModal
+          visible={true}
+          onCancel={() => {
+            this.hide();
+          }}
+          {...this.props}
+        >
+          {this.props.children}
+        </AntModal>
+      )
+    );
+  }
+}

app-v2/components/index.ts

@@ -0,0 +1 @@
+export { default as Modal } from './Modal';

app-v2/config/codeLog.ts

@@ -0,0 +1 @@
+export const codeLog: string[] = ['请求成功'];