diff --git a/.gitignore b/.gitignore index f5cf4588..8ddeddd8 100644 --- a/.gitignore +++ b/.gitignore @@ -6,7 +6,6 @@ node_modules/ .vscode *.swp *.lock -*.js *.map .github/workflows/nodejs.yml diff --git a/app-v2/App.less b/app-v2/app.less similarity index 67% rename from app-v2/App.less rename to app-v2/app.less index 16cbea55..7c352d38 100644 --- a/app-v2/App.less +++ b/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; + } + } +} + diff --git a/app-v2/components/Breadcrumb/index.less b/app-v2/components/Breadcrumb/index.less index 89c1af5b..b4908eb3 100644 --- a/app-v2/components/Breadcrumb/index.less +++ b/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 { diff --git a/app-v2/components/Breadcrumb/index.tsx b/app-v2/components/Breadcrumb/index.tsx index b3c23be2..a7eca207 100644 --- a/app-v2/components/Breadcrumb/index.tsx +++ b/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) => { {first ? ( <> - {/* */} + {route.breadcrumbName} ) : ( diff --git a/app-v2/components/CSVPreviewLink/index.less b/app-v2/components/CSVPreviewLink/index.less index 9b8e92de..9e7d6844 100644 --- a/app-v2/components/CSVPreviewLink/index.less +++ b/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 { diff --git a/app-v2/components/CSVPreviewLink/index.tsx b/app-v2/components/CSVPreviewLink/index.tsx index 40542505..a30c67e6 100644 --- a/app-v2/components/CSVPreviewLink/index.tsx +++ b/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={
{ } > - diff --git a/app-v2/components/Icon/index.less b/app-v2/components/Icon/index.less deleted file mode 100644 index d2cf6081..00000000 --- a/app-v2/components/Icon/index.less +++ /dev/null @@ -1,4 +0,0 @@ -svg.icon { - width: 30px; - height: 30px; -} diff --git a/app-v2/components/Icon/index.tsx b/app-v2/components/Icon/index.tsx index 026d330f..8919e717 100644 --- a/app-v2/components/Icon/index.tsx +++ b/app-v2/components/Icon/index.tsx @@ -1,15 +1,7 @@ -import React, { HTMLProps } from 'react'; - -interface IIconFontProps extends HTMLProps { - type: string; - className?: string -} - -const IconFont = (props: IIconFontProps) => { - const { type, className, ...others } = props; - return ( - - ); -}; +import { createFromIconfontCN } from '@ant-design/icons'; +import icon from '@appv2/static/fonts/iconfont.js'; +const IconFont = createFromIconfontCN({ + scriptUrl: icon, +}); export default IconFont; diff --git a/app-v2/index.tsx b/app-v2/index.tsx index b40410da..2b05951a 100644 --- a/app-v2/index.tsx +++ b/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'; diff --git a/app-v2/pages/Import/FileUpload/index.less b/app-v2/pages/Import/FileUpload/index.less index 349f41cb..a80efe37 100644 --- a/app-v2/pages/Import/FileUpload/index.less +++ b/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; + } + } } \ No newline at end of file diff --git a/app-v2/pages/Import/FileUpload/index.tsx b/app-v2/pages/Import/FileUpload/index.tsx index 5737f5f7..2b2c9924 100644 --- a/app-v2/pages/Import/FileUpload/index.tsx +++ b/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,8 +64,8 @@ const FileUpload = () => { return (
- - {intl.get('import.preview')} + + asyncDeleteFile(index)} @@ -74,7 +73,9 @@ const FileUpload = () => { okText={intl.get('common.ok')} cancelText={intl.get('common.cancel')} > - +
@@ -97,8 +98,8 @@ const FileUpload = () => { customRequest={handleUpdate} beforeUpload={transformFile as any} > -
diff --git a/app-v2/pages/Import/TaskCreate/FileSelect/index.tsx b/app-v2/pages/Import/TaskCreate/FileSelect/index.tsx index 2f807ab7..2b8f8792 100644 --- a/app-v2/pages/Import/TaskCreate/FileSelect/index.tsx +++ b/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) => { } title={intl.get('import.selectFile')} > - ); diff --git a/app-v2/pages/Import/TaskCreate/SchemaConfig/index.tsx b/app-v2/pages/Import/TaskCreate/SchemaConfig/index.tsx index e6c5c94a..02a88032 100644 --- a/app-v2/pages/Import/TaskCreate/SchemaConfig/index.tsx +++ b/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) => )} {type === 'edge' && } {type === 'vertices' &&
-
}
diff --git a/app-v2/pages/Import/TaskList/TaskItem/index.tsx b/app-v2/pages/Import/TaskList/TaskItem/index.tsx index 795120b9..4c4b9d07 100644 --- a/app-v2/pages/Import/TaskList/TaskItem/index.tsx +++ b/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) => {
{intl.get('common.space')}: {space} - +
@@ -107,8 +111,8 @@ const TaskItem = (props: IProps) => { strokeColor={status && COLOR_MAP[status]} />
- - + + {taskStatus === ITaskStatus.statusProcessing && { okText={intl.get('common.confirm')} cancelText={intl.get('common.cancel')} > - + } {taskStatus !== ITaskStatus.statusProcessing && button:not(:last-child) { margin-right: 15px; } diff --git a/app-v2/pages/Import/TaskList/index.tsx b/app-v2/pages/Import/TaskList/index.tsx index a2357d88..08913d41 100644 --- a/app-v2/pages/Import/TaskList/index.tsx +++ b/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 = () => {
}> - + {intl.get('menu.release')} - - + + {intl.get('configServer.clear')} diff --git a/app-v2/pages/MainPage/Header/index.less b/app-v2/pages/MainPage/Header/index.less index c27d5d95..7b34be04 100644 --- a/app-v2/pages/MainPage/Header/index.less +++ b/app-v2/pages/MainPage/Header/index.less @@ -16,10 +16,17 @@ } .main-menu { flex: auto; - font-family: Roboto-Bold, serif; + font-family: Roboto, serif; font-style: normal; font-size: 16px; - .nebula-studio-icon { + .nav-link { + display: flex; + align-items: center; + color: white; + } + .nav-icon > svg { + width: 16px; + height: 16px; margin-right: 5px; } } diff --git a/app-v2/pages/MainPage/Header/index.tsx b/app-v2/pages/MainPage/Header/index.tsx index 63f74237..b60fa4a0 100644 --- a/app-v2/pages/MainPage/Header/index.tsx +++ b/app-v2/pages/MainPage/Header/index.tsx @@ -55,12 +55,13 @@ const PageHeader = (props: IProps) => { > {menus.map(item => - + {intl.get(item.intlKey)} )} diff --git a/app-v2/pages/MainPage/routes.tsx b/app-v2/pages/MainPage/routes.tsx index adc2ba52..974f40bb 100644 --- a/app-v2/pages/MainPage/routes.tsx +++ b/app-v2/pages/MainPage/routes.tsx @@ -42,7 +42,7 @@ export const MENU_LIST = [ action: 'view_schema', label: 'from_navigation' }, - icon: 'iconnav-model', + icon: 'icon-nav-schema', intlKey: 'common.schema' }, { @@ -53,7 +53,7 @@ export const MENU_LIST = [ action: 'view_import', label: 'from_navigation' }, - icon: 'iconnav-model', + icon: 'icon-btn-download', intlKey: 'common.import' }, { @@ -64,7 +64,7 @@ export const MENU_LIST = [ action: 'view_console', label: 'from_navigation' }, - icon: 'iconnav-model', + icon: 'icon-nav-console', intlKey: 'common.console' }, ]; \ No newline at end of file diff --git a/app-v2/pages/Schema/Edge/index.tsx b/app-v2/pages/Schema/Edge/index.tsx index 67fa5f89..b83fee5e 100644 --- a/app-v2/pages/Schema/Edge/index.tsx +++ b/app-v2/pages/Schema/Edge/index.tsx @@ -2,7 +2,7 @@ import { Button, Popconfirm, Table, message } from 'antd'; import React, { useEffect, useMemo, useState } from 'react'; import intl from 'react-intl-universal'; import { Link, useParams } from 'react-router-dom'; -import { DeleteTwoTone, FormOutlined } from '@ant-design/icons'; +import Icon from '@appv2/components/Icon'; import { observer } from 'mobx-react-lite'; import { useStore } from '@appv2/stores'; import { sortByFieldAndFilter } from '@appv2/utils/function'; @@ -44,7 +44,7 @@ function renderEdgeInfo(edge: IEdge) { } const EdgeList = () => { - const { space } = useParams() as {space :string, type: string}; + const { space } = useParams() as { space :string }; const { schema: { edgeList, deleteEdge, getEdgeList } } = useStore(); const [searchVal, setSearchVal] = useState(''); const [loading, setLoading] = useState(false); @@ -89,7 +89,7 @@ const EdgeList = () => { data-track-action="view_edge_edit" data-track-label="from_edge_list" > - + { cancelText={intl.get('common.cancel')} >
@@ -124,6 +122,7 @@ const EdgeList = () => { })); }, [edgeList, searchVal]); return { data-track-action="view_index_edit" data-track-label="from_index_list" > - + { cancelText={intl.get('common.cancel')} >
@@ -133,6 +131,7 @@ const IndexList = () => { return diff --git a/app-v2/pages/Schema/SchemaListLayout/index.less b/app-v2/pages/Schema/SchemaListLayout/index.less index ee454c51..2a1c5cf0 100644 --- a/app-v2/pages/Schema/SchemaListLayout/index.less +++ b/app-v2/pages/Schema/SchemaListLayout/index.less @@ -5,6 +5,25 @@ justify-content: space-between; align-items: center; margin-bottom: 20px; + .ant-btn { + display: flex; + align-items: center; + a { + color: white; + line-height: 24px; + padding-right: 15px; + font-weight: 500; + font-size: 14px; + } + } + .add-btn-icon { + display: flex; + svg { + width: 22px; + height: 22px; + margin-right: 10px; + } + } } .operation { button { diff --git a/app-v2/pages/Schema/SchemaListLayout/index.tsx b/app-v2/pages/Schema/SchemaListLayout/index.tsx index 7de8a21d..13c62714 100644 --- a/app-v2/pages/Schema/SchemaListLayout/index.tsx +++ b/app-v2/pages/Schema/SchemaListLayout/index.tsx @@ -4,7 +4,7 @@ import intl from 'react-intl-universal'; import { Link, useParams } from 'react-router-dom'; import { observer } from 'mobx-react-lite'; import Search from '../Search'; - +import Icon from '@appv2/components/Icon'; import './index.less'; interface IProps { @@ -13,11 +13,12 @@ interface IProps { columns: any; loading: boolean; renderExpandInfo: (record) => any; - children?: any + children?: any; + type: string } const SchemaListLayout = (props: IProps) => { - const { onSearch, data, columns, loading, renderExpandInfo, children } = props; - const { space, type } = useParams() as { space :string, type: string, module?: string }; + const { onSearch, data, columns, loading, renderExpandInfo, children, type } = props; + const { space } = useParams() as { space :string, module?: string }; const [expandKeys, setExpandKeys] = useState([]); const handleRowClick = row => { const { name: key } = row; @@ -27,14 +28,14 @@ const SchemaListLayout = (props: IProps) => { return (
- diff --git a/app-v2/pages/Schema/SpaceCreate/index.less b/app-v2/pages/Schema/SpaceCreate/index.less index a9ad4b28..7a1c596b 100644 --- a/app-v2/pages/Schema/SpaceCreate/index.less +++ b/app-v2/pages/Schema/SpaceCreate/index.less @@ -7,9 +7,10 @@ padding-bottom: 20px; .item-string-length { position: absolute; - right: 0; bottom: 0; - width: 100px; + input { + margin-left: 10px; + } } } } diff --git a/app-v2/pages/Schema/SpaceCreate/index.tsx b/app-v2/pages/Schema/SpaceCreate/index.tsx index 71222278..4a3d0f94 100644 --- a/app-v2/pages/Schema/SpaceCreate/index.tsx +++ b/app-v2/pages/Schema/SpaceCreate/index.tsx @@ -119,15 +119,17 @@ const SpaceCreate = () => { {({ getFieldValue }) => { const vidType = getFieldValue('vidType'); - return vidType === 'FIXED_STRING' ? - - + return vidType === 'FIXED_STRING' ?
+ + + + : null; }} diff --git a/app-v2/pages/Schema/Tag/index.tsx b/app-v2/pages/Schema/Tag/index.tsx index 51dac2d3..24b64fee 100644 --- a/app-v2/pages/Schema/Tag/index.tsx +++ b/app-v2/pages/Schema/Tag/index.tsx @@ -2,7 +2,7 @@ import { Button, Popconfirm, Table, message } from 'antd'; import React, { useEffect, useMemo, useState } from 'react'; import intl from 'react-intl-universal'; import { Link, useParams } from 'react-router-dom'; -import { DeleteTwoTone, FormOutlined } from '@ant-design/icons'; +import Icon from '@appv2/components/Icon'; import { observer } from 'mobx-react-lite'; import { useStore } from '@appv2/stores'; import { sortByFieldAndFilter } from '@appv2/utils/function'; @@ -44,7 +44,7 @@ function renderTagInfo(tag: ITag) { } const TagList = () => { - const { space } = useParams() as {space :string, type: string}; + const { space } = useParams() as {space :string}; const { schema: { tagList, deleteTag, getTagList } } = useStore(); const [searchVal, setSearchVal] = useState(''); const [loading, setLoading] = useState(false); @@ -92,7 +92,7 @@ const TagList = () => { data-track-action="view_tag_edit" data-track-label="from_tag_list" > - + { cancelText={intl.get('common.cancel')} > @@ -128,6 +126,7 @@ const TagList = () => { }, [tagList, searchVal]); return { cancelText={intl.get('common.cancel')} > @@ -137,14 +137,14 @@ const Schema = () => { {intl.get('_schema.spaceList')}
-
.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}")}catch(a){console&&console.log(a)}}function i(){e||(e=!0,t())}function n(){try{l.documentElement.doScroll("left")}catch(a){return void setTimeout(n,50)}i()}o=function(){var a,o=document.createElement("div");o.innerHTML=c,c=null,(o=o.getElementsByTagName("svg")[0])&&(o.setAttribute("aria-hidden","true"),o.style.position="absolute",o.style.width=0,o.style.height=0,o.style.overflow="hidden",o=o,(a=document.body).firstChild?m(o,a.firstChild):a.appendChild(o))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),o()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(t=o,l=a.document,e=!1,n(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,i())})}(window); \ No newline at end of file diff --git a/app-v2/static/fonts/iconfont.ttf b/app-v2/static/fonts/iconfont.ttf deleted file mode 100644 index 014770f1..00000000 Binary files a/app-v2/static/fonts/iconfont.ttf and /dev/null differ diff --git a/app-v2/static/fonts/iconfont.woff b/app-v2/static/fonts/iconfont.woff deleted file mode 100644 index 6d8ac6e5..00000000 Binary files a/app-v2/static/fonts/iconfont.woff and /dev/null differ diff --git a/app-v2/static/fonts/iconfont.woff2 b/app-v2/static/fonts/iconfont.woff2 deleted file mode 100644 index 11629b11..00000000 Binary files a/app-v2/static/fonts/iconfont.woff2 and /dev/null differ diff --git a/app-v2/utils/http.ts b/app-v2/utils/http.ts index db7c48ee..ee499618 100644 --- a/app-v2/utils/http.ts +++ b/app-v2/utils/http.ts @@ -37,7 +37,7 @@ service.interceptors.response.use( if ( code === -1 && errMsg && - (errMsg.includes('connection refused') || + (errMsg.includes('Connection refused') || errMsg.includes('broken pipe') || errMsg.includes('session expired') || errMsg.includes('an existing connection was forcibly closed')) diff --git a/config/webpack.base.ts b/config/webpack.base.ts index abed16db..1ee60dc4 100644 --- a/config/webpack.base.ts +++ b/config/webpack.base.ts @@ -45,7 +45,9 @@ const commonConfig: Configuration = { 'table-header-bg': '#E9EDEF', 'table-header-color': '#465B7A', 'table-header-cell-split-color': '#E9EDEF', - 'layout-body-background': '#F8F8F8' + 'layout-body-background': '#F8F8F8', + 'font-family': 'Robot, sans-serif', + 'height-base': '38px' } } },