feat: update import task

feat: update import task

feat: update 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,7 @@
+@grayDark: #36383D;
+@dark: rgba(0,0,0,.9);
+@disableGray: rgba(255, 255, 255, 0.3);
+@promptGray: #8C8C8C;
+@blue: #0091ff;
+@errorRed: #E02020;
+@disableBlue: #375d7a;

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,25 @@
+.csv-preview {
+	padding: 16px 8px;
+	overflow: auto;
+
+	table {
+		td,
+		th {
+			text-align: center;
+		}
+	}
+
+	> .operation {
+		padding: 16px;
+		text-align: center;
+	}
+
+	.csv-select-index {
+		margin-right: 10px;
+	}
+
+	.anticon {
+		font-size: 16px;
+	}
+}
+

app-v2/components/CSVPreviewLink/index.tsx

@@ -0,0 +1,94 @@
+import { Button, Modal, Table, Tooltip } from 'antd';
+import React, { useState } from 'react';
+import intl from 'react-intl-universal';
+import './index.less';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { v4 as uuidv4 } from 'uuid';
+
+interface IProps {
+  file: any;
+  children: string;
+  onMapping?: (index) => void;
+  prop?: string;
+  centered?: boolean
+}
+
+const CSVPreviewLink = (props: IProps) => {
+  const { onMapping, prop, file: { content }, children, centered } = props;
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const handleLinkClick = e => {
+    setPosition({
+      x: e.clientX,
+      y: e.clientY,
+    });
+    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>
+            <Tooltip
+              title={intl.get('import.setMappingTip', {
+                prop,
+                index: textIndex,
+              })}
+            >
+              <InfoCircleOutlined />
+            </Tooltip>
+          </>
+        ) : (
+          `column ${textIndex}`
+        ),
+        dataIndex: index,
+      };
+    })
+    : [];
+  return (
+    <>
+      <Button type="link" className="btn-preview" onClick={handleLinkClick}>
+        {children}
+      </Button>
+      <Modal
+        className="preview-modal"
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        footer={false}
+        mask={false}
+        style={centered ? undefined : { top: position.y || undefined, left: position.x || undefined, margin: 0 }}
+      >
+        <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>
+      </Modal>
+    </>
+  );
+};
+
+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[] = ['请求成功'];

app-v2/config/constants.ts

@@ -0,0 +1,18 @@
+import enUS from './locale/en-US.json';
+import zhCN from './locale/zh-CN.json';
+
+export const INTL_LOCALE_SELECT = {
+  EN_US: {
+    TEXT: 'English',
+    NAME: 'EN_US',
+  },
+  ZH_CN: {
+    TEXT: '中文',
+    NAME: 'ZH_CN',
+  },
+};
+
+export const INTL_LOCALES = {
+  EN_US: enUS,
+  ZH_CN: zhCN,
+};