[feat-DTStack#1007]ui更新

qscgu23 · Jul 18, 2022 · a24a4ad · a24a4ad
1 parent 9c161ad
commit a24a4ad
Show file tree

Hide file tree

Showing 26 changed files with 904 additions and 157 deletions.
diff --git a/website/gatsby-browser.js b/website/gatsby-browser.js
@@ -4,13 +4,15 @@
  * See: https://www.gatsbyjs.com/docs/browser-apis/
  */
 require("./src/styles/global.css")
+require('antd/dist/antd.css')
 const React = require("react")
 // const { default: AppHeader } = require("./src/components/AppHeader")
 
 const Layout = require("./src/components/documentsMenu/menu").default
 const JsonLayout = require("./src/components/jsonMenu/menu").default
 const SqlLayout = require("./src/components/sqlMenu/menu").default
 const SpaceLayout = require("./src/components/space/spaceLayout").default
+const Context = require("./src/components/Context/index").default
 // const AppFooter = require("./src/components/AppFooter").default
 
 // You can delete this file if you're not using it
@@ -22,17 +24,20 @@ exports.wrapPageElement = ({ element, props }) => {
  const flag = element.key.includes("documents") || element.key.includes("examples") || element.key.includes("download")
  console.log(element.key)
  return (
- <div>
- {flag ? (
- <>
- {element.key.includes("documents") && <Layout {...props}>{element}</Layout>}
- {element.key.includes("examples/json") && <JsonLayout {...props}>{element}</JsonLayout>}
- {element.key.includes("examples/sql") && <SqlLayout {...props}>{element}</SqlLayout>}
- </>
- ) : (
- <SpaceLayout {...props}>{element}</SpaceLayout>
- )}
- </div>
+ <Context>
+ <>
+ {flag ? (
+ <>
+ {element.key.includes("documents") && <Layout {...props}>{element}</Layout>}
+ {element.key.includes("examples/json") && <JsonLayout {...props}>{element}</JsonLayout>}
+ {element.key.includes("examples/sql") && <SqlLayout {...props}>{element}</SqlLayout>}
+ </>
+ ) : (
+ <SpaceLayout {...props}>{element}</SpaceLayout>
+ )}
+ </>
+ </Context>
+
  )
 }
 

diff --git a/website/package.json b/website/package.json
@@ -5,12 +5,15 @@
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
+ "@ant-design/icons": "^4.7.0",
  "@icon-park/react": "^1.3.5",
  "@mantine/core": "^4.2.5",
  "@mantine/hooks": "^4.2.5",
  "@mantine/ssr": "^4.2.11",
+ "antd": "^4.21.5",
  "aos": "^2.3.4",
  "autoprefixer": "^10.4.7",
+ "eslint-plugin-react": "^7.30.1",
  "gatsby": "^4.17.2",
  "gatsby-link": "^4.17.0",
  "gatsby-plugin-gatsby-cloud": "^4.17.0",
@@ -34,13 +37,15 @@
  "gatsby-transformer-remark": "^5.14.0",
  "gatsby-transformer-sharp": "^4.17.0",
  "gh-pages": "^4.0.0",
+ "highlight.js": "^11.5.1",
  "node-sass": "^6.0.1",
  "postcss": "^8.4.14",
  "prop-types": "^15.8.1",
  "react": "^18.1.0",
  "react-dom": "^18.1.0",
  "react-helmet": "^6.1.0",
  "react-highlight": "^0.14.0",
+ "react-icons": "^4.4.0",
  "react-json-tree": "^0.17.0",
  "react-json-view": "^1.21.3",
  "react-spring": "^9.4.5",
@@ -56,7 +61,7 @@
  "scripts": {
  "deploy": "gatsby build --prefix-paths && gh-pages -d public",
  "build": "gatsby build",
- "develop": "gatsby develop",
+ "develop": "gatsby develop ",
  "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,css}\"",
  "start": "gatsby develop",
  "serve": "gatsby serve",

diff --git a/website/src/components/AppBannner/index.jsx b/website/src/components/AppBannner/index.jsx
@@ -1,21 +1,34 @@
 import React from "react"
 import { Github } from "@icon-park/react"
-import Link from '../Link'
+import Link from "../Link"
 
 const AppBanner = () => {
  return (
- <section className="relative hero bg-block2 bg-center bg-no-repeat bg-contain flex items-center">
+ <section className="relative hero bg-block2 dark:bg-[#1a1e1b] dark:text-[#797a7d] dark:bg-none bg-center bg-no-repeat bg-contain flex items-center">
  <div className="px-4 py-8 flex flex-col items-center w-full">
  <p className="text-4xl lg:text-6xl xl:text-8xl text-center mb-8 inline-block">
- <span className="inline-block bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 bg-clip-text text-transparent">ChunJun</span> 纯钧
+ <span className="inline-block bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 bg-clip-text text-transparent">
+ ChunJun
+ </span>{" "}
+ 纯钧
+ </p>
+ <p className="inline-block xl:text-4xl font-mono text-xl text-center mb-6 font-bold">
+ 基于Flink之上提供稳定，高效，易用的 批流一体的数据集成工具
  </p>
- <p className="inline-block xl:text-4xl font-mono text-xl text-center mb-6 font-bold">基于Flink之上提供稳定，高效，易用的 批流一体的数据集成工具</p>
  <div className="flex items-center">
- <a className="btn btn__black btn__large mr-4 text-base flex items-center xl:text-2xl" rel="noreferrer" target="_blank" href="https://github.com/DTStack/chunjun">
+ <a
+ className="btn btn__black btn__large mr-4 text-base flex items-center xl:text-2xl"
+ rel="noreferrer"
+ target="_blank"
+ href="https://github.com/DTStack/chunjun"
+ >
  <Github color="#fff" className="mr-2 text-base xl:text-2xl" />
  github
  </a>
- <Link to="/documents" className="btn btn__blue btn__large text-base xl:text-2xl">
+ <Link
+ to="/documents"
+ className="btn btn__blue btn__large text-base xl:text-2xl"
+ >
  快速开始
  </Link>
  </div>

diff --git a/website/src/components/AppCards/index.jsx b/website/src/components/AppCards/index.jsx
@@ -10,41 +10,76 @@ const AppCards = () => {
  }, [])
 
  return (
- <section className="w-full space-y-6 mb-6">
+ <section className="w-full space-y-6 mb-6 dark:bg-[#1a1b1e]">
  <section data-aos="zoom-in" className="w-full">
  <div className="text-center lg:text-3xl text-2xl font-bold md:w-3/5 w-4/5 m-auto uppercase font-mono">
- <span className="from-indigo-400 bg-gradient-to-r via-blue-500 to-pink-500 bg-clip-text text-transparent">source&nbsp;&&nbsp;</span>
- <span className="from-green-400 bg-gradient-to-r via-blue-500 to-pink-500 bg-clip-text text-transparent">sink</span>
+ <span className="from-indigo-400 bg-gradient-to-r via-blue-500 to-pink-500 bg-clip-text text-transparent">
+ source&nbsp;&&nbsp;
+ </span>
+ <span className="from-green-400 bg-gradient-to-r via-blue-500 to-pink-500 bg-clip-text text-transparent">
+ sink
+ </span>
  </div>
- <img className=" md:w-3/5 w-4/5 m-auto bg-gray-100" src={require("../../assets/img/chunjun.gif").default} alt="" />
+ <img
+ className=" md:w-3/5 w-4/5 m-auto bg-gray-100"
+ src={require("../../assets/img/chunjun.gif").default}
+ alt=""
+ />
  </section>
- <section data-aos="zoom-in" className="w-full">
- <h1 className="text-center lg:text-3xl text-2xl font-bold font-mono">
- ChunJun 纯钧 <span className="from-yellow-400 bg-gradient-to-r via-red-500 to-pink-500 bg-clip-text text-transparent">核心特性</span>
+ <section data-aos="zoom-in" className="w-full dark:text-[#797a7d]">
+ <h1 className="text-center lg:text-3xl text-2xl font-bold font-mono dark:text-[#797a7d]">
+ ChunJun 纯钧{" "}
+ <span className="from-yellow-400 bg-gradient-to-r via-red-500 to-pink-500 bg-clip-text text-transparent">
+ 核心特性
+ </span>
  </h1>
  <div className="grid md:grid-cols-3 grid-cols-2 md:gap-y-6 gap-y-4 justify-items-center lg:p-6 p-4">
  <div className="w-full flex flex-col items-center">
- <img className="card" src={require("../../assets/svg/hero-6.svg").default} alt="" />
+ <img
+ className="card"
+ src={require("../../assets/svg/hero-6.svg").default}
+ alt=""
+ />
  <Text className="card-text">基于json、sql 构建任务</Text>
  </div>
  <div className="w-full flex flex-col items-center">
- <img className="card" src={require("../../assets/svg/hero-2.svg").default} alt="" />
+ <img
+ className="card"
+ src={require("../../assets/svg/hero-2.svg").default}
+ alt=""
+ />
  <Text className="card-text">支持多种异构数据源之间数据传输</Text>
  </div>
  <div className="w-full flex flex-col items-center">
- <img className="card" src={require("../../assets/svg/hero-4.svg").default} alt="" />
+ <img
+ className="card"
+ src={require("../../assets/svg/hero-4.svg").default}
+ alt=""
+ />
  <Text className="card-text">支持断点续传、增量同步</Text>
  </div>
  <div className="w-full flex flex-col items-center">
- <img className="card" src={require("../../assets/svg/hero-1.svg").default} alt="" />
+ <img
+ className="card"
+ src={require("../../assets/svg/hero-1.svg").default}
+ alt=""
+ />
  <Text className="card-text">支持任务脏数据存储管理</Text>
  </div>
  <div className="w-full flex flex-col items-center">
- <img className="card" src={require("../../assets/svg/hero-3.svg").default} alt="" />
+ <img
+ className="card"
+ src={require("../../assets/svg/hero-3.svg").default}
+ alt=""
+ />
  <Text className="card-text">支持Schema同步</Text>
  </div>
  <div className="w-full flex flex-col items-center">
- <img className="card" src={require("../../assets/svg/hero-5.svg").default} alt="" />
+ <img
+ className="card"
+ src={require("../../assets/svg/hero-5.svg").default}
+ alt=""
+ />
  <Text className="card-text">支持RDBS数据源实时采集</Text>
  </div>
  </div>

diff --git a/website/src/components/AppContainer/darkMenu.scss b/website/src/components/AppContainer/darkMenu.scss
@@ -0,0 +1,8 @@
+.dark {
+
+ .ant-menu,
+
+ .ant-menu-submenu {
+ background-color: #1a1b1e !important;
+ }
+}