Skip to content

Commit 61a3dc7

Browse files
yyc-gityyc-git
committed
example(demos): add ui_2d demo
use ant design + ant desing charts to draw ui 2d;
1 parent 58052b2 commit 61a3dc7

9 files changed

Lines changed: 481 additions & 7 deletions

File tree

‎demos/ui_2d/.gitignore‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.DS_Store
2+
.merlin
3+
.idea/
4+
.vscode/
5+
jest_0/
6+
reference/
7+
node_modules/
8+
mine/
9+
10+
coverage
11+
12+
dist/
13+
14+
npm-debug
15+
16+
.bsb.lock
17+
18+
yarn.lock
19+

‎demos/ui_2d/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<title>2D UI Demo</title>
7+
<link href="//cdn.staticfile.org/layui/2.9.7/css/layui.css" rel="stylesheet">
8+
<style>
9+
/* solve "ResizeObserver loop completed with undelivered notifications" error when use Antd Tour to the last step:
10+
refer to
11+
https://stackoverflow.com/questions/76187282/react-resizeobserver-loop-completed-with-undelivered-notifications/77094068#77094068 */
12+
iframe#webpack-dev-server-client-overlay {
13+
display: none !important
14+
}
15+
</style>
16+
17+
</head>
18+
19+
<body>
20+
<div id="root1"></div>
21+
<!-- <div id="root2"></div> -->
22+
</body>
23+
24+
25+
</html>

‎demos/ui_2d/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "ui-2d-demo",
3+
"version": "0.0.1",
4+
"scripts": {
5+
"watch": "tsc -w -noEmit",
6+
"webpack:dev-server": "cross-env NODE_ENV=development webpack-dev-server --open 'Chrome' --config webpack.config.devserver.js"
7+
},
8+
"dependencies": {
9+
"@ant-design/charts": "^1.4.2",
10+
"@ant-design/icons": "^4.6.0",
11+
"antd": "^5.12.2",
12+
"lodash": "^4.17.20",
13+
"react": ">=16.8.4",
14+
"react-dom": ">=16.8.4"
15+
},
16+
"devDependencies": {
17+
"clean-webpack-plugin": "^4.0.0",
18+
"cross-env": "^7.0.3",
19+
"html-webpack-plugin": "^5.5.0",
20+
"source-map-loader": "^3.0.0",
21+
"ts-loader": "^9.2.6",
22+
"typescript": "^4.2.3",
23+
"webpack": "^5.62.1",
24+
"webpack-cli": "^4.9.1",
25+
"webpack-dev-server": "^4.4.0"
26+
}
27+
}

‎demos/ui_2d/src/Main.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import 'antd/dist/reset.css'
2+
import '@ant-design/flowchart/dist/index.css'
3+
4+
// import * as layui from "layui"
5+
6+
// // Usage
7+
// layui.use(function () {
8+
// var layer = layui.layer;
9+
// // Welcome
10+
// layer.msg('Hello World', { icon: 6 });
11+
// });
12+
// // import {use, layer, msg} from "layui"
13+
14+
// // // Usage
15+
// // use(function () {
16+
// // // var layer = layui.layer;
17+
// // // Welcome
18+
// // msg('Hello World', { icon: 6 });
19+
// // });
20+
import React, { useState, useEffect } from 'react';
21+
import ReactDOM from 'react-dom';
22+
23+
import { Bar } from '@ant-design/plots';
24+
import Page from './Page';
25+
26+
const DemoBar = () => {
27+
const data = [
28+
{
29+
year: '1951 年',
30+
value: 38,
31+
},
32+
{
33+
year: '1952 年',
34+
value: 52,
35+
},
36+
{
37+
year: '1956 年',
38+
value: 61,
39+
},
40+
{
41+
year: '1957 年',
42+
value: 145,
43+
},
44+
{
45+
year: '1958 年',
46+
value: 48,
47+
},
48+
];
49+
const config = {
50+
data,
51+
xField: 'value',
52+
yField: 'year',
53+
seriesField: 'year',
54+
legend: {
55+
position: 'top-left',
56+
},
57+
} as any;
58+
59+
return <>
60+
<Bar {...config} />
61+
<Page />
62+
</>
63+
64+
;
65+
};
66+
67+
68+
const DemoBar2 = () => {
69+
70+
return <>
71+
<Page />
72+
</>
73+
74+
;
75+
};
76+
77+
ReactDOM.render(<DemoBar />, document.getElementById('root1'));
78+
ReactDOM.render(<DemoBar2 />, document.getElementById('root2'));
79+

‎demos/ui_2d/src/Page.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, { useState } from 'react';
2+
import { Button, Modal } from 'antd';
3+
4+
const Page: React.FC = () => {
5+
const [isModalOpen, setIsModalOpen] = useState(false);
6+
7+
const showModal = () => {
8+
setIsModalOpen(true);
9+
};
10+
11+
const handleOk = () => {
12+
setIsModalOpen(false);
13+
};
14+
15+
const handleCancel = () => {
16+
setIsModalOpen(false);
17+
};
18+
19+
return (
20+
<>
21+
<Button type="primary" onClick={showModal}>
22+
Open Modal
23+
</Button>
24+
<Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
25+
<p>Some contents...</p>
26+
<p>Some contents...</p>
27+
<p>Some contents...</p>
28+
</Modal>
29+
</>
30+
);
31+
};
32+
33+
export default Page;

‎demos/ui_2d/tsconfig.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES6",
4+
"module": "ES6",
5+
"moduleResolution": "node",
6+
"sourceMap": true,
7+
"resolveJsonModule": true,
8+
"esModuleInterop": true,
9+
"jsx": "react",
10+
// "noEmit": true,
11+
// "noUnusedLocals": true,
12+
// "noUnusedParameters": true,
13+
"noImplicitAny": false,
14+
"lib": [
15+
"DOM",
16+
"ESNext",
17+
],
18+
"types": [],
19+
// "strict": true
20+
},
21+
"include": [
22+
"./src"
23+
]
24+
}

‎demos/ui_2d/webpack.config.devserver.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
const path = require('path');
2+
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
3+
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4+
const HtmlWebpackPlugin = require('html-webpack-plugin');
5+
6+
7+
module.exports = {
8+
entry: "./src/Main.tsx",
9+
mode: process.env.NODE_ENV.trim() == 'production' ? 'production' : 'development',
10+
output: {
11+
path: path.resolve(__dirname, 'dist'),
12+
filename: 'static/js/[name].js',
13+
},
14+
15+
16+
devServer: {
17+
compress: true,
18+
historyApiFallback: true,
19+
port: 8091,
20+
open: true,
21+
devMiddleware: {
22+
writeToDisk: true,
23+
},
24+
},
25+
26+
27+
// Enable sourcemaps for debugging webpack's output.
28+
devtool: "source-map",
29+
30+
resolve: {
31+
extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.css'],
32+
symlinks: false,
33+
modules: ['node_modules'],
34+
fallback: { "crypto": false }
35+
},
36+
37+
module: {
38+
rules: [
39+
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
40+
{
41+
test: /\.tsx?$/,
42+
exclude: /node_modules/,
43+
use: "ts-loader"
44+
},
45+
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
46+
{
47+
enforce: 'pre',
48+
test: /\.js$/,
49+
loader: "source-map-loader"
50+
},
51+
{
52+
test: /\.css$/,
53+
use: ['style-loader', 'css-loader'] //在Webpack中，loader的执行顺序是从右向左执行的，webpack先将所有css模块依赖解析完得到计算结果再创建style标签。因此把style-loader放在css-loader的前面。
54+
},
55+
]
56+
},
57+
plugins: [
58+
/**
59+
* All files inside webpack's output.path directory will be removed once, but the
60+
* directory itself will not be. If using webpack 4+'s default configuration,
61+
* everything under <PROJECT_DIR>/dist/ will be removed.
62+
* Use cleanOnceBeforeBuildPatterns to override this behavior.
63+
*
64+
* During rebuilds, all webpack assets that are not used anymore
65+
* will be removed automatically.
66+
*
67+
* See `Options and Defaults` for information
68+
*/
69+
new CleanWebpackPlugin(),
70+
new HtmlWebpackPlugin({
71+
template: './index.html',
72+
filename: 'index.html',
73+
}),
74+
],
75+
// When importing a module whose path matches one of the following, just
76+
// assume a corresponding global variable exists and use that instead.
77+
// This is important because it allows us to avoid bundling all of our
78+
// dependencies, which allows browsers to cache those libraries between builds.
79+
externals: {
80+
}
81+
};

0 commit comments

Comments
 (0)