Merge pull request #40 from patractlabs/new-site

New Design

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  //开启 eslint 支持
+  eslintIntegration: true,
+  //使用单引号
+  singleQuote: true,
+  //结尾不加分号
+  semi: false,
+}

README.md

@@ -1,141 +1,55 @@
 # elara-website
 
-## 技术栈
+A Front-end application developed using `React` to provide interaction and statistical analysis for [elara](https://github.com/patractlabs/elara-ts). Authorize to log into your github account and create your own projects, and for each project you can view data traffic and bandwidth usage.
 
-- JavaScript
-- React + TypeScript + Axios + Echarts + Hox + Andt + react-i18next
-- TailwindCSS + CSS Modules + Scss
+## Install dependencies
 
-
-## 项目结构
-主入口是Home路由，有登陆权限，登陆访问第三方Github登陆
-
-## 部署环境、CI、CD
-
-### Test
-测试环境地址：<a href="https://test-elara.patract.io">https://test-elara.patract.io</a></br>
-测试环境打包 npm run build_test  也可以yarn build_test,把build包一起推上去
-正式环境直接在线上build npm run build
-
-```diff
-- npm run build
-+ npm run build_test
+```
+yarn install
 ```
 
-## 安装、运行、构建
-
-- `npm i`
-- `npm start`
-- `npm build_test`
-- `npm build`
-
-## 开发
-
-
-直接向**当前域名**（不跨域）发送的 API 请求会被统一代理到指定的后端服务，开发环境中由 CRA 管理代理
+## DEV
 
-在 setupProxy 中默认配置的 API 请求代理（测试环境）：
+Modify the proxy configuration of the corresponding environment in the file `src/setupProxy.js`
 
-```js
-app.use(
-    '/accountApi',
+```javascript
+module.exports = function (app) {
+  app.use(
+    '/accountApi',  // This variable should be the same as the API_DOMAIN variable of the development environment in the src/config/origin.ts file
     proxy.createProxyMiddleware({
-      target: 'https://test-elara.patract.io',
-      changeOrigin: true,
-      pathRewrite: {
-        '^/accountApi': ''
-      }
+      target: 'https://elara.patract.io', //replace this to your own elara service url
+      ...
     })
-  );
+  )
+}
 ```
 
-### 状态管理
-
-**区分组件（树）内部状态和全局状态，全局状态里只存需要全局或者跨组件树维护的状态，优先使用组件（树）内部状态（Context、useState），避免全局状态泛滥**
-
-
-更新环境变量后重新 `npm start`
-
-使用绝对路径导入组件，避免多层级的相对路径导入
-
-### Webpack Alias
-
-使用绝对路径导入组件，避免多层级的相对路径导入
+Then run the npm script
 
-Webpack alias `@` 映射到项目根目录下的 `src` 目录
-
-同时配置 **jsconfig.json** ，在 VSCode 内点击导入路径跳转到对应文件
-
-
-### 国际化/多语言
-
-`react-i18next` 配置：**src/i18n.js**
-
-**组件函数外翻译：**
-
-```js
-import i18n from '@/i18n'
+```
+yarn start
 
-function eventHandler() {
-  // 注意不要在文件顶级（函数外）中调用翻译，因为执行的时候翻译文件正在网络中加载，此时调用翻译结果是空字符串
-  i18.t('xxx')
-}
 ```
 
-**组件函数内翻译：**
+## Production Build
 
-#### Using the hook
+Change the publicPath configuration of the corresponding environment in the file `src/config/origin.ts`
 
-```react
- the hook
-import { useTranslation } from 'react-i18next';
+run the npm script
 
-function MyComponent () {
-  const { t, i18n } = useTranslation();
-  return <h1>{t('Welcome to React')}</h1>
-}
 ```
+yarn build:prod
 
-#### Using the Trans component
+```
 
-```react
-import { Trans } from 'react-i18next'
+## Translation( i18n )
 
-export default function MyComponent () {
-  return <Trans><H1>Welcome to React</H1></Trans>
-}
+The language profile is located at `config/locales/*`, You can modify the JSON fields to suit your needs.
 
-// the translation in this case should be
-"<0>Welcome to React</0>": "<0>Welcome to React and react-i18next</0>"
-```
+## State management
 
-## Plans
-
-- [X] 性能监控
-- [ ] Bundless Dev （Snowpack、Vite）
-- [ ] RxJS
-- [ ] BFF
-
-## github认证过程
-1. window.open(test-elara.patract.cn/auth/github)
-2. node进程重定向到
-  https://github.com/login/oauth/authorize
-  response_type=code  
-  redirect_uri=https://test-elara.patract.cn/auth/github/callback  
-  client_id=c8857f82ccbf2d5fbcc3
-3. 用户在github网站完成认证
-4. github向node发起请求
-```
-'GET /auth/github/callback': callback, //github 验证回调
-```
-5. ~~node返回html页面，页面通过js调用window.postMessage发送sid给原网页，该窗口任务完成，关闭。~~
-6. ~~原网页通过sid（sid通过cookie传给服务器）获取用户信息，存在localstorage~~
-5. 服务端设置cookie：sid="..."
-``` js
-async (ctx, next) => {
-  return passport.authenticate('github')(ctx)
-}
-```
+No State Container such as `Redux`, just use `Context` to manage the application state.
 
-https://github.com/login/oauth/authorize?client_id=f47f304f25add575a164&redirect_uri=https%3A%2F%2Fhackmd.io%2Fauth%2Fgithub%2Fcallback&response_type=code
+## Authorised Login
 
+This application only support Github Authorized Authentication Login. For more information, Refer to the [elara](https://github.com/patractlabs/elara-ts).

package.json

@@ -9,6 +9,7 @@
     "echarts": "^5.0.2",
     "i18next": "^19.8.3",
     "i18next-browser-languagedetector": "^6.0.1",
+    "lottie-web": "^5.7.13",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-i18next": "^11.7.3",
@@ -38,6 +39,7 @@
     "build": "react-app-rewired build",
     "build:prod": "cross-env REACT_APP_NODE_ENV=production react-app-rewired build",
     "build:pre": "cross-env REACT_APP_NODE_ENV=pre-production react-app-rewired build",
+    "build:hz": "cross-env REACT_APP_NODE_ENV=pre-production-hz react-app-rewired build",
     "test": "cross-env REACT_APP_NODE_ENV=test react-app-rewired test"
   },
   "eslintConfig": {

src/App.css

@@ -1,4 +1,4 @@
-@import '~antd/dist/antd.css';
+@import "~antd/dist/antd.css";
 
 html,
 body,
@@ -81,11 +81,11 @@ time,
 mark,
 audio,
 video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	vertical-align: baseline;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  vertical-align: baseline;
 }
 
 /* HTML5 display-role reset for older browsers */
@@ -100,64 +100,64 @@ hgroup,
 menu,
 nav,
 section {
-	display: block;
+  display: block;
 }
 
 body {
-	line-height: 1;
+  line-height: 1;
 }
 
 ol,
 ul {
-	list-style: none;
+  list-style: none;
 }
 
 blockquote,
 q {
-	quotes: none;
+  quotes: none;
 }
 
 blockquote:before,
 blockquote:after,
 q:before,
 q:after {
-	content: '';
-	content: none;
+  content: "";
+  content: none;
 }
 
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 
 .ant-btn-primary {
-	background: #39CA9F;
-	border-color: #39CA9F;
+  background: #39ca9f;
+  border-color: #39ca9f;
 }
 
-
 .ant-btn-primary:hover,
 .ant-btn-primary:focus {
-	color: #fff;
-	background: #449e83;
-	border-color: #449e83;
+  color: #fff;
+  background: #449e83;
+  border-color: #449e83;
 }
 
 html,
 body {
-	min-width: 1200px;
-  /* background: #EFF2F5; */
+  min-width: 1200px;
+  background: #f6f6f6;
 }
 
-.ant-layout.ant-layout-has-sider>.ant-layout,
-.ant-layout.ant-layout-has-sider>.ant-layout-content {
-	overflow-x: hidden;
+.ant-layout.ant-layout-has-sider > .ant-layout,
+.ant-layout.ant-layout-has-sider > .ant-layout-content {
+  overflow-x: hidden;
 }
-input, button {
+input,
+button {
   outline: none;
 }
-.ant-spin-dot-item{
-	background: #39CA9F;
+.ant-spin-dot-item {
+  background: #39ca9f;
 }
 .modal-button {
   font-size: 12px;
@@ -177,13 +177,13 @@ input, button {
 }
 .modal-button-default {
   min-width: 88px;
-  border: 1px solid #14B071;
+  border: 1px solid #14b071;
   background-color: white;
-  color: #2CA26E;
+  color: #2ca26e;
 }
 .modal-button-active {
   min-width: 88px;
   color: white;
-  background: #14B071;
+  background: #14b071;
   border-width: 0px;
-}
+}