Skip to content

Commit c768252

Browse files
ascodersascoders
committed
feat: add dashboard
1 parent 9d2c437 commit c768252

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+12318
-137
lines changed

‎dev-dashboard-entry.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<html>
2+
3+
<head>
4+
<style>
5+
html,
6+
body {
7+
margin: 0;
8+
padding: 0;
9+
}
10+
</style>
11+
</head>
12+
13+
<body>
14+
<div id="root"></div>
15+
<script src="./built/commands/dev/dashboard/client/index.js"></script>
16+
</body>
17+
18+
</html>

‎package-lock.json

+10,859
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+25-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
{
22
"name": "pri",
3-
"version": "0.0.29",
3+
"version": "0.0.30",
44
"types": "src/index.ts",
55
"main": "built/index.js",
66
"scripts": {
77
"start": "tsc -w",
8-
"build": "rm -rf built && rm -rf .cache && tsc",
9-
"prepublishOnly": "npm run build"
8+
"build": "rm -rf built && rm -rf .cache && tsc && npm run build-dashboard",
9+
"prepublishOnly": "npm run build",
10+
"build-dashboard": "parcel build --out-dir built/bundle ./src/commands/dev/dashboard/client/index.tsx"
1011
},
1112
"bin": {
1213
"pri": "built/bin.js"
@@ -18,33 +19,54 @@
1819
"@babel/core": "^7.0.0-beta.39",
1920
"@babel/preset-env": "^7.0.0-beta.39",
2021
"@babel/preset-react": "^7.0.0-beta.39",
22+
"@koa/cors": "^2.2.1",
2123
"@types/chokidar": "^1.7.4",
2224
"@types/commander": "^2.12.2",
2325
"@types/fs-extra": "^5.0.0",
26+
"@types/koa": "^2.0.44",
27+
"@types/koa-route": "^3.2.3",
2428
"@types/lodash": "^4.14.100",
2529
"@types/node": "^9.4.0",
2630
"@types/opn": "^5.1.0",
2731
"@types/ora": "^1.3.1",
32+
"@types/prettier": "^1.10.0",
2833
"@types/react-dom": "^16.0.3",
2934
"@types/react-loadable": "^5.3.2",
3035
"@types/react-router-dom": "^4.2.3",
36+
"@types/socket.io": "^1.4.31",
37+
"@types/socket.io-client": "^1.4.32",
3138
"@types/update-notifier": "^2.0.0",
3239
"@types/yargs": "^10.0.1",
40+
"antd": "^3.2.1",
3341
"babel-preset-env": "^1.6.1",
42+
"body-parser": "^1.18.2",
3443
"chokidar": "^2.0.1",
3544
"colors": "^1.1.2",
3645
"commander": "^2.13.0",
46+
"cors": "^2.8.4",
47+
"dob": "^2.5.8",
48+
"dob-react": "^2.4.10",
3749
"fs-extra": "^5.0.0",
50+
"koa": "^2.5.0",
51+
"koa-compress": "^2.0.0",
52+
"koa-mount": "^3.0.0",
53+
"koa-route": "^3.2.0",
54+
"koa-static": "^4.0.2",
3855
"lodash": "^4.17.4",
56+
"node-forge": "^0.7.1",
3957
"opn": "^5.2.0",
4058
"ora": "^1.4.0",
4159
"parcel-bundler": "^1.5.1",
4260
"portfinder": "^1.0.13",
61+
"prettier": "^1.10.2",
4362
"react": "^16.2.0",
4463
"react-dom": "^16.2.0",
4564
"react-hot-loader": "^3.1.3",
4665
"react-loadable": "^5.3.1",
4766
"react-router-dom": "^4.2.2",
67+
"socket.io": "^2.0.4",
68+
"socket.io-client": "^2.0.4",
69+
"styled-components": "^3.1.6",
4870
"ts-loader": "^3.4.0",
4971
"tslint": "^5.9.1",
5072
"typescript": "^2.7.1",

‎readme.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,10 @@ Production deployment. By default the dist folder is `./dist`.
152152

153153
```typescript
154154
class IConfig {
155+
/**
156+
* Title for html <title>
157+
*/
158+
public title?: string = "pri"
155159
/**
156160
* Dist dir path when running: npm run build | pri build
157161
*/
@@ -401,4 +405,4 @@ Production deployment. By default the dist folder is `./dist`.
401405
- PWA support.
402406
- Tree Shaking.
403407
- Scope Hoist.
404-
- Prefetch router.
408+
- Prefetching.

‎src/commands/build/index.ts

+5-4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ensureFiles } from "../../utils/ensure-files"
77
import { spinner } from "../../utils/log"
88
import { findNearestNodemodules } from "../../utils/npm-finder"
99
import { getConfig } from "../../utils/project-config"
10+
import { IConfig } from "../../utils/project-config-interface"
1011

1112
const projectRootPath = process.cwd();
1213

@@ -29,22 +30,22 @@ export const CommandBuild = async () => {
2930
}
3031

3132
// Run parcel
32-
execSync(`${findNearestNodemodules()}/.bin/parcel build ${entryPath} --out-dir ${path.join(projectRootPath, config.distDir || "dist")} ${publicUrl} --no-cache`, {
33+
execSync(`${findNearestNodemodules()}/.bin/parcel build ${entryPath} --out-dir ${path.join(projectRootPath, config.distDir || "dist")} ${publicUrl}`, {
3334
stdio: "inherit",
3435
cwd: __dirname
3536
});
3637

37-
createEntryHtmlFile("/entry.js")
38+
createEntryHtmlFile("/entry.js", config)
3839
}
3940

40-
function createEntryHtmlFile(entryPath: string) {
41+
function createEntryHtmlFile(entryPath: string, config: IConfig) {
4142
const htmlPath = path.join(projectRootPath, "dist/index.html")
4243

4344
fs.outputFileSync(htmlPath, `
4445
<html>
4546
4647
<head>
47-
<title>Pri dev</title>
48+
<title>${config.title}</title>
4849
4950
<style>
5051
html,

‎src/commands/dev/dashboard/client/components/icon/assets/add.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as React from "react"
2+
3+
export default (size: number) => (
4+
<svg viewBox="0 0 1024 1024" width={size} height={size}>
5+
<path d="M512 1008C238.064 1008 16 785.936 16 512S238.064 16 512 16s496 222.064 496 496S785.936 1008 512 1008zM512 78C272.304 78 78 272.304 78 512S272.304 946 512 946 946 751.696 946 512 751.696 78 512 78zM714.096 542.272 542.272 542.272l0 171.824c0 16.72-13.552 30.272-30.272 30.272s-30.272-13.552-30.272-30.272L481.728 542.272 309.904 542.272c-16.72 0-30.272-13.552-30.272-30.272 0-16.72 13.552-30.272 30.272-30.272l171.824 0L481.728 309.904c0-16.72 13.552-30.272 30.272-30.272s30.272 13.552 30.272 30.272l0 171.824 171.824 0c16.72 0 30.272 13.552 30.272 30.272C744.368 528.72 730.816 542.272 714.096 542.272z" />
6+
</svg>
7+
)

‎src/commands/dev/dashboard/client/components/icon/icon/icon.component.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as React from "react"
2+
import * as ReactDOM from "react-dom"
3+
import * as Styled from "./icon.style"
4+
import * as typings from "./icon.type"
5+
6+
import add from "../assets/add"
7+
8+
const iconMap = new Map<string, (size: number) => React.ReactElement<any>>()
9+
iconMap.set("add", add)
10+
11+
export class Icon extends React.Component<typings.Props, typings.State> {
12+
public static defaultProps = new typings.Props()
13+
public state = new typings.State()
14+
15+
public render() {
16+
return (
17+
<Styled.Container className={this.props.className}>
18+
{iconMap.get(this.props.type)(this.props.size)}
19+
</Styled.Container>
20+
)
21+
}
22+
}

‎src/commands/dev/dashboard/client/components/icon/icon/icon.style.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import styled from "styled-components"
2+
3+
export const Container = styled.div`
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
`

‎src/commands/dev/dashboard/client/components/icon/icon/icon.type.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import * as React from "react"
2+
3+
export class Props {
4+
/**
5+
* 图标类型
6+
*/
7+
public type?: string = "close"
8+
/**
9+
* 图标大小
10+
*/
11+
public size?: number = 20
12+
public className?: string = null
13+
}
14+
15+
export class State {
16+
17+
}

‎src/commands/dev/dashboard/client/components/icon/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Icon as default } from "./icon/icon.component"

‎src/commands/dev/dashboard/client/index.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Provider } from "dob-react"
2+
import { useStrict } from 'dob'
3+
import * as React from "react"
4+
import * as ReactDOM from "react-dom"
5+
import stores from "./stores"
6+
import { LayoutComponent } from './pages/layout/layout.component'
7+
8+
import 'antd/dist/antd.css';
9+
10+
useStrict()
11+
12+
const Root = () => (
13+
<Provider {...stores}>
14+
<LayoutComponent />
15+
</Provider>
16+
)
17+
18+
ReactDOM.render(<Root />, document.getElementById("root"))

‎src/commands/dev/dashboard/client/pages/layout/layout.component.tsx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { Connect } from "dob-react"
2+
import * as React from "react"
3+
import { Props, State } from './layout.type'
4+
import * as S from './layout.style'
5+
6+
import { StructComponent } from '../struct/struct.component'
7+
import { MenuComponent } from '../menu/menu.component'
8+
import { NavComponent } from '../nav/nav.component'
9+
import { MainComponent } from '../main/main.component'
10+
import { PureComponent } from '../../utils/react-helper'
11+
12+
@Connect
13+
export class LayoutComponent extends PureComponent<Props, State> {
14+
static defaultProps = new Props()
15+
state = new State()
16+
17+
public componentDidMount() {
18+
this.props.ApplicationAction.initSocket()
19+
}
20+
21+
render() {
22+
return (
23+
<S.Container>
24+
<S.ContainerLeft>
25+
<S.TopContainer>
26+
<NavComponent />
27+
</S.TopContainer>
28+
29+
<S.BottomContainer>
30+
<StructComponent />
31+
</S.BottomContainer>
32+
</S.ContainerLeft>
33+
34+
<S.ContainerRight>
35+
<S.TopContainer>
36+
<MenuComponent />
37+
</S.TopContainer>
38+
39+
<S.BottomContainer>
40+
<MainComponent />
41+
</S.BottomContainer>
42+
</S.ContainerRight>
43+
</S.Container>
44+
)
45+
}
46+
}

‎src/commands/dev/dashboard/client/pages/layout/layout.style.ts

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import styled, { injectGlobal } from 'styled-components'
2+
3+
injectGlobal`
4+
* {
5+
&::-webkit-scrollbar {
6+
width: 1px;
7+
height: 1px;
8+
}
9+
&::-webkit-scrollbar-track {}
10+
&::-webkit-scrollbar-thumb {
11+
border-radius: 1px;
12+
background: #ccc;
13+
}
14+
}
15+
`
16+
17+
export const Container = styled.div`
18+
display: flex;
19+
height: 100%;
20+
`
21+
22+
export const ContainerLeft = styled.div`
23+
display: flex;
24+
flex-direction: column;
25+
width: 250px;
26+
border-right: 1px solid #eee;
27+
`
28+
29+
export const ContainerRight = styled.div`
30+
display: flex;
31+
flex-direction: column;
32+
flex-grow: 1;
33+
flex-basis: 0;
34+
`
35+
36+
export const TopContainer = styled.div`
37+
display: flex;
38+
height: 40px;
39+
border-bottom: 1px solid #eee;
40+
`
41+
42+
export const BottomContainer = styled.div`
43+
display: flex;
44+
flex-direction: column;
45+
flex-grow: 1;
46+
flex-basis: 0;
47+
`

‎src/commands/dev/dashboard/client/pages/layout/layout.type.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export class Props {
2+
3+
}
4+
5+
export class State {
6+
7+
}

‎src/commands/dev/dashboard/client/pages/main/main.component.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Connect } from "dob-react"
2+
import * as React from "react"
3+
import { Props, State } from './main.type'
4+
import * as S from './main.style'
5+
import { PureComponent } from '../../utils/react-helper'
6+
7+
@Connect
8+
export class MainComponent extends PureComponent<Props, State> {
9+
static defaultProps = new Props()
10+
state = new State()
11+
12+
public componentDidMount() {
13+
14+
}
15+
16+
render() {
17+
return (
18+
<S.Container>
19+
20+
</S.Container>
21+
)
22+
}
23+
}

‎src/commands/dev/dashboard/client/pages/main/main.style.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import styled from 'styled-components'
2+
3+
export const Container = styled.div`
4+
5+
`

‎src/commands/dev/dashboard/client/pages/main/main.type.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export class Props {
2+
3+
}
4+
5+
export class State {
6+
7+
}

‎src/commands/dev/dashboard/client/pages/menu/menu.component.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Connect } from "dob-react"
2+
import * as React from "react"
3+
import { Props, State } from './menu.type'
4+
import * as S from './menu.style'
5+
import { StructComponent } from '../struct/struct.component'
6+
import { PureComponent } from '../../utils/react-helper'
7+
8+
import { NewPageComponent } from './new-page/new-page.component'
9+
10+
@Connect
11+
export class MenuComponent extends PureComponent<Props, State> {
12+
static defaultProps = new Props()
13+
state = new State()
14+
15+
public componentDidMount() {
16+
this.props.ApplicationAction.initSocket()
17+
}
18+
19+
render() {
20+
return (
21+
<S.Container>
22+
<NewPageComponent />
23+
</S.Container>
24+
)
25+
}
26+
}

0 commit comments

Comments
 (0)