From 297fd6505b599cf14142604be3419fdc3dee4203 Mon Sep 17 00:00:00 2001 From: Nut He <18328704+hetao92@users.noreply.github.com> Date: Wed, 2 Mar 2022 19:12:05 +0800 Subject: [PATCH] feat: add doc page (#135) --- app/config/locale/en-US.json | 18 +++- app/config/locale/zh-CN.json | 18 +++- app/pages/Doc/index.less | 105 +++++++++++++++++++ app/pages/Doc/index.tsx | 95 +++++++++++++++++ app/pages/MainPage/Header/HelpMenu/index.tsx | 1 + app/pages/MainPage/Header/index.tsx | 5 +- app/pages/MainPage/routes.tsx | 6 ++ 7 files changed, 241 insertions(+), 7 deletions(-) create mode 100644 app/pages/Doc/index.less create mode 100644 app/pages/Doc/index.tsx diff --git a/app/config/locale/en-US.json b/app/config/locale/en-US.json index 3a907cb5..804aceaa 100644 --- a/app/config/locale/en-US.json +++ b/app/config/locale/en-US.json @@ -82,6 +82,21 @@ "statistics": "Statistics", "download": "Download" }, + "doc": { + "welcome": "Welcome to", + "functionIntro": "Functions introduction", + "schemaIntro": "You can use the Schema page to operate graph spaces in Nebula Graph", + "importIntro": "You can use the Import page to batch import vertex and edge data into Nebula Graph for graph exploration and data analysis.", + "consoleIntro": "When data is imported, you can use the Console page to query graph data.", + "learningDoc": "Learning Docs", + "getStarted": "Getting started with Nebula Studio", + "getStartedTip": "What's Nebula Studio", + "useGuide": "Documents of Nebula Studio", + "useGuideTip": "Learn how to use Nebula Studio", + "ngqlIntro": "Nebula Graph Query Language (nGQL)", + "ngqlIntroTip": "nGQL is a declarative graph query language for Nebula Graph. It allows expressive and efficient graph patterns. ", + "start": "Get Started" + }, "NGQLOutput": { "success": "Execution successful!" }, @@ -398,7 +413,6 @@ "link": { "nGQLHref": "https://docs.nebula-graph.io/3.0.0/3.ngql-guide/1.nGQL-overview/1.overview/", "mannualHref": "https://docs.nebula-graph.io/3.0.0/nebula-studio/about-studio/st-ug-what-is-graph-studio/", - "versionLogHref": "https://docs.nebula-graph.io/3.0.0/nebula-studio/about-studio/st-ug-release-note/", - "forumLink": "https://discuss.nebula-graph.io/" + "startStudioHref": "https://docs.nebula-graph.io/3.0.0/nebula-studio/quick-start/st-ug-plan-schema/" } } diff --git a/app/config/locale/zh-CN.json b/app/config/locale/zh-CN.json index 76314150..c635426c 100644 --- a/app/config/locale/zh-CN.json +++ b/app/config/locale/zh-CN.json @@ -81,6 +81,21 @@ "statistics": "统计", "download": "下载" }, + "doc": { + "welcome": "欢迎使用", + "functionIntro": "功能介绍", + "schemaIntro": "您可以在 schema 模块对 Nebula Graph 图空间进行管理。", + "importIntro": "您可以使用导入模块将数据批量导入 Nebula Graph。", + "consoleIntro": "您可以使用控制台模块对 Nebula Graph 内的数据进行查询操作。", + "learningDoc": "学习文档", + "getStarted": "认识 Nebula Studio", + "getStartedTip": "什么是 Nebula Studio。", + "useGuide": "Nebula Studio 使用手册", + "useGuideTip": "学习如何使用 Nebula Studio。", + "ngqlIntro": "Nebula Graph 查询语言 (nGQL)", + "ngqlIntroTip": "nGQL 是 Nebula Graph 使用的的声明式图查询语言，是为开发和运维人员设计的类 SQL 查询语言，易于学习。", + "start": "快速开始" + }, "warning": { "configServer": "请先配置服务器", "connectError": "数据库连接有误，请重新配置" @@ -394,7 +409,6 @@ "link": { "nGQLHref": "https://docs.nebula-graph.com.cn/3.0.0/3.ngql-guide/1.nGQL-overview/1.overview/", "mannualHref": "https://docs.nebula-graph.com.cn/3.0.0/nebula-studio/about-studio/st-ug-what-is-graph-studio/", - "versionLogHref": "https://docs.nebula-graph.com.cn/3.0.0/nebula-studio/about-studio/st-ug-release-note/", - "forumLink": "https://discuss.nebula-graph.com.cn/" + "startStudioHref": "https://docs.nebula-graph.com.cn/3.0.0/nebula-studio/quick-start/st-ug-plan-schema/" } } \ No newline at end of file diff --git a/app/pages/Doc/index.less b/app/pages/Doc/index.less new file mode 100644 index 00000000..d08d941a --- /dev/null +++ b/app/pages/Doc/index.less @@ -0,0 +1,105 @@ +.studio-doc { + margin-top: 50px; + display: flex; + flex-direction: column; + align-items: center; + .welcome-label { + font-family: Roboto-Light, sans-serif; + font-weight: 300; + font-size: 64px; + + color: #000000; + > span { + font-family: Roboto-Bold, sans-serif; + } + } + .doc-box { + width: 100%; + margin-bottom: 36px; + .header { + font-family: Roboto-Regular, sans-serif; + font-size: 18px; + padding-bottom: 12px; + border-bottom: 1px solid #D5DDEB; + } + .module-intro { + padding: 14px; + display: flex; + .module-item { + padding: 27px 30px; + display: inline-flex; + flex-direction: column; + align-items: flex-start; + font-family: Roboto-Regular, sans-serif; + .anticon > svg { + width: 50px; + height: 50px; + fill: #0091FF; + } + .title { + color: #0091FF; + font-weight: 500; + font-size: 24px; + margin: 20px 0 15px; + } + .tip { + font-weight: 300; + font-size: 14px; + color: #4F4F4F; + padding-right: 5px; + } + } + } + .doc-carousel { + width: 100%; + padding: 20px; + .doc-group { + display: flex !important; + } + .doc-item { + height: 295px; + background: #FFFFFF; + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); + padding: 30px 20px 15px 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + font-family: Roboto-Regular, sans-serif; + .doc-title { + font-weight: 500; + font-size: 24px; + height: 72px; + } + .doc-tip { + font-weight: 300; + font-size: 14px; + color: #4F4F4F; + } + .ant-btn { + width: 100%; + } + } + } + } + + .ant-carousel .slick-dots-bottom { + bottom: -30px; + margin: 0; + + li { + width: 24px; + } + + li button { + width: 10px; + height: 10px; + border-radius: 10px; + background-color: #E0E0E0; + } + + li.slick-active button { + width: 10px; + background-color: #0091FF; + } + } +} \ No newline at end of file diff --git a/app/pages/Doc/index.tsx b/app/pages/Doc/index.tsx new file mode 100644 index 00000000..ec473438 --- /dev/null +++ b/app/pages/Doc/index.tsx @@ -0,0 +1,95 @@ +import { Button, Carousel, Col, Row } from 'antd'; +import React, { useEffect } from 'react'; +import intl from 'react-intl-universal'; +import { observer } from 'mobx-react-lite'; +import { trackPageView } from '@app/utils/stat'; +import Icon from '@app/components/Icon'; +import { chunk } from 'lodash'; + +import './index.less'; + +const MODULES = [ + { + icon: 'icon-studio-nav-schema', + title: 'common.schema', + tip: 'doc.schemaIntro' + }, + { + icon: 'icon-studio-nav-import', + title: 'import.importData', + tip: 'doc.importIntro' + }, + { + icon: 'icon-studio-nav-console', + title: 'common.console', + tip: 'doc.consoleIntro' + }, +]; + +const DOCS = [ + { + title: 'doc.getStarted', + tip: 'doc.getStartedTip', + link: 'link.mannualHref' + }, + { + title: 'doc.useGuide', + tip: 'doc.useGuideTip', + link: 'link.startStudioHref' + }, + { + title: 'doc.ngqlIntro', + tip: 'doc.ngqlIntroTip', + link: 'link.nGQLHref' + }, +]; + +const DocPage = () => { + const docGroup = chunk(DOCS, 3); + useEffect(() => { + trackPageView('/doc'); + }, []); + + return ( +
+

{intl.get('doc.welcome')} Nebula Studio

+
+
{intl.get('doc.functionIntro')}
+
+ {MODULES.map(module => +
+ + {intl.get(module.title)} + {intl.get(module.tip)} +
+ )} +
+
+
+
{intl.get('doc.learningDoc')}
+
+ + {docGroup.map((group, index) => ( + + {group.map(doc => +
+
+

{intl.get(doc.title)}

+

{intl.get(doc.tip)}

+
+ +
+ )} + + ))} + +
+
+
+ ); +}; +export default observer(DocPage); diff --git a/app/pages/MainPage/Header/HelpMenu/index.tsx b/app/pages/MainPage/Header/HelpMenu/index.tsx index fed15875..2e1072c1 100644 --- a/app/pages/MainPage/Header/HelpMenu/index.tsx +++ b/app/pages/MainPage/Header/HelpMenu/index.tsx @@ -17,6 +17,7 @@ const HelpMenu = () => { className="help-menu" mode="horizontal" theme="dark" + selectedKeys={[]} > { const { menus } = props; const [activeKey, setActiveKey] = useState(''); const { global: { username, host } } = useStore(); - const location = useLocation(); + const { pathname } = useLocation(); const handleMenuClick = async({ key }) => { setActiveKey(key); }; useEffect(() => { - const { pathname } = location; const activeKey = pathname.split('/')[1]; setActiveKey(activeKey); - }, []); + }, [pathname]); return
diff --git a/app/pages/MainPage/routes.tsx b/app/pages/MainPage/routes.tsx index 6590f7c1..69a719ba 100644 --- a/app/pages/MainPage/routes.tsx +++ b/app/pages/MainPage/routes.tsx @@ -6,6 +6,7 @@ const SpaceCreate = lazy(() => import('@app/pages/Schema/SpaceCreate')); const SchemaConfig = lazy(() => import('@app/pages/Schema/SchemaConfig')); const Import = lazy(() => import('@app/pages/Import')); const TaskCreate = lazy(() => import('@app/pages/Import/TaskCreate')); +const Doc = lazy(() => import('@app/pages/Doc')); export const RoutesList = [ @@ -37,6 +38,11 @@ export const RoutesList = [ path: '/import/:type', component: Import, }, + { + path: '/doc', + component: Doc, + exact: true, + }, ]; export const MENU_LIST = [