feat:tidy up front frame (#1449)

Co-authored-by: yikai <yikai@didiglobal.com>
pull/1450/head
bobowiki 1 year ago committed by GitHub
parent 4539c352a5
commit ca11f4aa34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

2
.gitignore vendored

@ -36,7 +36,7 @@ build/
!**/src/test/**/build/ !**/src/test/**/build/
### VS Code ### ### VS Code ###
.vscode/ # .vscode/
# maven plugin ignore # maven plugin ignore
*.gpg *.gpg

@ -0,0 +1,35 @@
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true,
"editor.formatOnSave": true
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true,
"editor.formatOnSave": true
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true,
"editor.formatOnSave": true
},
"typescript.tsdk":"./node_modules/typescript/lib"
}

@ -1,4 +1,3 @@
/.git /.git
/.vscode
node_modules node_modules
build build

@ -0,0 +1,50 @@
// craco.config.js
const CracoLessPlugin = require('craco-less');
const lessModuleRegex = /\.module\.less$/;
const path = require('path');
const basePath = path.resolve(__dirname, '.');
const resolve = dir => path.resolve(basePath, dir);
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
// less loader options
lessLoaderOptions: {
lessOptions: {
// modifyVars: { "@primary-color": "#1DA57A" },
javascriptEnabled: true,
},
},
// A callback function that receives two arguments: the webpack rule,
// and the context. You must return an updated rule object.
modifyLessRule: (lessRule, context) => {
lessRule.test = lessModuleRegex;
lessRule.exclude = /node_modules|antd\.css/;
return lessRule;
},
// Passing an options object to configure the css-loaders
cssLoaderOptions: {
modules: { localIdentName: '[local]_[hash:base64:5]' },
},
},
},
],
webpack: {
alias: {
'@': resolve('src'),
},
},
devServer: {
// 本地服务的端口号
port: 3001,
// 本地服务的响应头设置
headers: {
// 允许跨域
'Access-Control-Allow-Origin': '*',
},
},
};

File diff suppressed because it is too large Load Diff

@ -65,7 +65,7 @@
"styled-components": "^6.0.0-rc.1", "styled-components": "^6.0.0-rc.1",
"typescript": "^4.9.5" "typescript": "^4.9.5"
}, },
"cracoConfig": "./build/craco.config.js", "cracoConfig": "./craco.config.js",
"lint-staged": { "lint-staged": {
"src/**/*.{ts,tsx,js,jsx}": [ "src/**/*.{ts,tsx,js,jsx}": [
"eslint -c .eslintrc.js --fix" "eslint -c .eslintrc.js --fix"

@ -1,4 +1,3 @@
import React from 'react';
import LayoutCom from './components/layout-com'; import LayoutCom from './components/layout-com';
function App() { function App() {

@ -1,99 +0,0 @@
"use strict";
exports.__esModule = true;
var react_1 = require("react");
var styled_components_1 = require("styled-components");
var antd_1 = require("antd");
var react_router_dom_1 = require("react-router-dom");
var home_1 = require("@/page/home");
var about_1 = require("@/page/about");
var login_1 = require("@/page/login");
var index_module_less_1 = require("./index.module.less");
var table_1 = require("../table");
var search_1 = require("@/page/search");
var icons_1 = require("@ant-design/icons");
var themeContext_1 = require("@/context/themeContext");
var Header = antd_1.Layout.Header, Sider = antd_1.Layout.Sider, Content = antd_1.Layout.Content;
var items = [
{
label: react_1["default"].createElement("a", { href: "/about" }, "Navigation One"),
key: 'mail',
icon: react_1["default"].createElement(icons_1.MailOutlined, null)
},
{
label: 'Navigation Two',
key: 'app',
icon: react_1["default"].createElement(icons_1.AppstoreOutlined, null),
disabled: true
},
{
label: react_1["default"].createElement("a", { href: "/about" }, "Navigation One"),
key: 'app',
icon: react_1["default"].createElement(icons_1.AppstoreOutlined, null)
},
{
label: 'Navigation Three - Submenu',
key: 'SubMenu',
icon: react_1["default"].createElement(icons_1.SettingOutlined, null),
children: [
{
type: 'group',
label: 'Item 1',
children: [
{
label: 'Option 1',
key: 'setting:1'
},
{
label: 'Option 2',
key: 'setting:2'
},
]
},
{
type: 'group',
label: 'Item 2',
children: [
{
label: 'Option 3',
key: 'setting:3'
},
{
label: 'Option 4',
key: 'setting:4'
},
]
},
]
},
{
label: (react_1["default"].createElement("a", { href: "https://ant.design", target: "_blank", rel: "noopener noreferrer" }, "Navigation Four - Link")),
key: 'alipay'
},
];
var LayoutCom = function () {
var myThemes = react_1.useContext(styled_components_1.ThemeContext);
var _a = react_1.useContext(themeContext_1.MyThemeContext), themeName = _a.themeName, setThemeName = _a.setThemeName;
var _b = react_1.useState('mail'), current = _b[0], setCurrent = _b[1];
var onClick = function (e) {
console.log('click ', e);
setCurrent(e.key);
};
var _c = react_1.useState(false), isDark = _c[0], setIsDark = _c[1];
react_1.useEffect(function () {
isDark ? setThemeName(themeContext_1.THEME_NAME.DARK) : setThemeName(themeContext_1.THEME_NAME.DEFAULT);
}, [isDark, setThemeName]);
return (react_1["default"].createElement("main", { className: index_module_less_1["default"].container, style: { backgroundColor: myThemes.backgroundColor.bg1 } },
react_1["default"].createElement(Header, { className: index_module_less_1["default"].header, style: { backgroundColor: myThemes.backgroundColor.bg1 } },
react_1["default"].createElement(antd_1.Button, { onClick: function () { return setIsDark(function (pre) { return !pre; }); } }, "\u5207\u6362\u4E3B\u9898")),
react_1["default"].createElement(antd_1.Layout, null,
react_1["default"].createElement(Sider, { className: index_module_less_1["default"].sider, style: { backgroundColor: myThemes.backgroundColor.bg1 } },
react_1["default"].createElement(antd_1.Menu, { onClick: onClick, selectedKeys: [current], mode: "inline", items: items })),
react_1["default"].createElement(Content, { className: index_module_less_1["default"].content },
react_1["default"].createElement(react_router_dom_1.Routes, null,
react_1["default"].createElement(react_router_dom_1.Route, { path: "/Search", Component: search_1["default"] }),
react_1["default"].createElement(react_router_dom_1.Route, { path: "/Table", Component: table_1["default"] }),
react_1["default"].createElement(react_router_dom_1.Route, { path: "/Login", Component: login_1["default"] }),
react_1["default"].createElement(react_router_dom_1.Route, { path: "/home", Component: home_1["default"] }),
react_1["default"].createElement(react_router_dom_1.Route, { path: "/about", Component: about_1["default"] }))))));
};
exports["default"] = LayoutCom;

@ -1,71 +0,0 @@
"use strict";
exports.__esModule = true;
var react_1 = require("react");
var antd_1 = require("antd");
var columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: function (text) { return react_1["default"].createElement("a", null, text); }
},
{
title: 'Age',
dataIndex: 'age',
key: 'age'
},
{
title: 'Address',
dataIndex: 'address',
key: 'address'
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
render: function (_, _a) {
var tags = _a.tags;
return (react_1["default"].createElement(react_1["default"].Fragment, null, tags.map(function (tag) {
var color = tag.length > 5 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
}
return (react_1["default"].createElement(antd_1.Tag, { color: color, key: tag }, tag.toUpperCase()));
})));
}
},
{
title: 'Action',
key: 'action',
render: function (_, record) { return (react_1["default"].createElement(antd_1.Space, { size: "middle" },
react_1["default"].createElement("a", null,
"Invite ",
record.name),
react_1["default"].createElement("a", null, "Delete"))); }
},
];
var data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer']
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser']
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sydney No. 1 Lake Park',
tags: ['cool', 'teacher']
},
];
var TableBox = function () { return react_1["default"].createElement(antd_1.Table, { columns: columns, dataSource: data }); };
exports["default"] = TableBox;

@ -1,5 +1,5 @@
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { DefaultTheme, ThemeProvider, useTheme } from 'styled-components'; import { DefaultTheme, ThemeProvider } from 'styled-components';
import { ConfigProvider, theme } from 'antd'; import { ConfigProvider, theme } from 'antd';
import { darkAlgorithm } from '../../theme/dark-algorithm'; import { darkAlgorithm } from '../../theme/dark-algorithm';
@ -17,7 +17,7 @@ const ThemeComponent = ({ children }: ThemeProps) => {
const [myThemes, setMyThemes] = useState<DefaultTheme>(lightDefaultTheme); const [myThemes, setMyThemes] = useState<DefaultTheme>(lightDefaultTheme);
const { themeName } = useContext<any>(MyThemeContext); const { themeName } = useContext<any>(MyThemeContext);
const changeColor = (themeName: THEME_NAME) => { const changeMode = (themeName: THEME_NAME) => {
if (themeName === THEME_NAME.DARK) { if (themeName === THEME_NAME.DARK) {
darkAlgorithm.algorithm = theme.darkAlgorithm; darkAlgorithm.algorithm = theme.darkAlgorithm;
setThemes(darkAlgorithm); setThemes(darkAlgorithm);
@ -30,7 +30,7 @@ const ThemeComponent = ({ children }: ThemeProps) => {
}; };
useEffect(() => { useEffect(() => {
changeColor(themeName); changeMode(themeName);
}, [themeName]); }, [themeName]);
return ( return (

@ -1,15 +0,0 @@
"use strict";
exports.__esModule = true;
var react_1 = require("react");
var client_1 = require("react-dom/client");
var App_1 = require("./App");
var react_router_dom_1 = require("react-router-dom");
var themeContext_1 = require("./context/themeContext");
var theme_com_1 = require("./components/theme-com");
require("antd/dist/reset.css");
var root = client_1["default"].createRoot(document.getElementById('root'));
root.render(react_1["default"].createElement(react_1["default"].StrictMode, null,
react_1["default"].createElement(react_router_dom_1.BrowserRouter, null,
react_1["default"].createElement(themeContext_1.ThemeStore, null,
react_1["default"].createElement(theme_com_1["default"], null,
react_1["default"].createElement(App_1["default"], null))))));

@ -11,7 +11,9 @@ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<BrowserRouter> <BrowserRouter>
{/* 全局配置主体context */}
<ThemeStore> <ThemeStore>
{/* 提供主体色配置 */}
<ThemeComponent> <ThemeComponent>
<App /> <App />
</ThemeComponent> </ThemeComponent>

@ -1,6 +0,0 @@
"use strict";
exports.__esModule = true;
var About = function () {
return React.createElement("div", { style: { color: 'red' } }, "About");
};
exports["default"] = About;

@ -1,65 +0,0 @@
"use strict";
exports.__esModule = true;
var react_1 = require("react");
var antd_1 = require("antd");
var Login = function () {
var form = antd_1.Form.useForm()[0];
var data = {
passwordType: 'password',
capsTooltip: false,
loading: false,
showDialog: false,
redirect: undefined,
otherQuery: {},
loginForm: {
username: '',
password: ''
},
loginRules: {
// username: [{ required: true, trigger: 'blur', validator: validateUsername }],
// password: [{ required: true, trigger: 'blur', validator: this.validatePassword }],
}
};
var validatePassword = function (rule, value, callback) {
if (value.length < 6) {
callback(new Error('The password can not be less than 6 digits'));
}
else if (value.length > 72) {
callback(new Error('The password can not be greater than 72 digits'));
}
else {
// callback();
}
};
var onFinish = function () {
var loginParams = {
username: form.getFieldValue('username'),
password: form.getFieldValue('password'),
rememberMe: 1
};
data.loginForm.username = form.getFieldValue('username');
console.log('hhhhhh', loginParams);
};
var showPwd = function () {
if (data.passwordType === 'password') {
data.passwordType = '';
}
else {
data.passwordType = 'password';
}
// $nextTick(() => {
// $refs.password.focus();
// });
};
return (react_1["default"].createElement("div", { className: "login-container" },
react_1["default"].createElement(antd_1.Form, { name: "loginForm", form: form, onFinish: onFinish, style: { maxWidth: 600 } },
react_1["default"].createElement("div", { className: "title-container" },
react_1["default"].createElement("h3", { className: "title" }, "\u4F60\u597D\u5440")),
react_1["default"].createElement(antd_1.Form.Item, { name: "username", label: "\u7528\u6237\u540D", rules: [{ required: true, message: 'Username is required' }] },
react_1["default"].createElement(antd_1.Input, { placeholder: "\u7528\u6237\u540D" })),
react_1["default"].createElement(antd_1.Form.Item, { name: "password", label: "\u5BC6\u7801", rules: [{ required: true, message: 'Street is required' }] },
react_1["default"].createElement(antd_1.Input, { placeholder: "\u5BC6\u7801" })),
react_1["default"].createElement(antd_1.Form.Item, { name: "submit" },
react_1["default"].createElement(antd_1.Button, { type: "primary", htmlType: "submit", className: "login-button" }, "\u767B\u5F55")))));
};
exports["default"] = Login;

@ -1,12 +1,4 @@
import React, { useEffect, useState, useContext } from 'react'; import { Form, Input, Button } from 'antd';
import { DefaultTheme, ThemeContext } from 'styled-components';
import { Form, Tooltip, Input, Button } from 'antd';
import { Routes, Route, Link } from 'react-router-dom';
import style from './index.module.less';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import { THEME_NAME, MyThemeContext } from '@/context/themeContext';
const Login = () => { const Login = () => {
const [form] = Form.useForm(); const [form] = Form.useForm();
@ -58,24 +50,21 @@ const Login = () => {
}; };
return ( return (
<div className="login-container"> <div className="login-container">
<Form name="loginForm" form={form} onFinish={onFinish} <Form name="loginForm" form={form} onFinish={onFinish} style={{ maxWidth: 600 }}>
style={{ maxWidth: 600 }}>
<div className="title-container"> <div className="title-container">
<h3 className="title"></h3> <h3 className="title"></h3>
{/* <h3 className="title">{{ $t('system.login') }}</h3> */} {/* <h3 className="title">{{ $t('system.login') }}</h3> */}
</div> </div>
<Form.Item name="username" label="用户名" <Form.Item name="username" label="用户名" rules={[{ required: true, message: 'Username is required' }]}>
rules={[{ required: true, message: 'Username is required' }]}
>
<Input placeholder="用户名" /> <Input placeholder="用户名" />
</Form.Item> </Form.Item>
<Form.Item name="password" label="密码" <Form.Item name="password" label="密码" rules={[{ required: true, message: 'Street is required' }]}>
rules={[{ required: true, message: 'Street is required' }]}
>
<Input placeholder="密码" /> <Input placeholder="密码" />
</Form.Item> </Form.Item>
<Form.Item name="submit"> <Form.Item name="submit">
<Button type="primary" htmlType="submit" className="login-button"></Button> <Button type="primary" htmlType="submit" className="login-button">
</Button>
</Form.Item> </Form.Item>
</Form> </Form>
</div> </div>

@ -1,16 +0,0 @@
"use strict";
exports.__esModule = true;
var react_1 = require("react");
var icons_1 = require("@ant-design/icons");
var antd_1 = require("antd");
var Search = function () {
var _a = react_1["default"].useState(false), passwordVisible = _a[0], setPasswordVisible = _a[1];
return (react_1["default"].createElement(antd_1.Space, { direction: "vertical" },
react_1["default"].createElement(antd_1.Input.Password, { placeholder: "input password" }),
react_1["default"].createElement(antd_1.Input.Password, { placeholder: "input password", iconRender: function (visible) { return (visible ? react_1["default"].createElement(icons_1.EyeTwoTone, null) : react_1["default"].createElement(icons_1.EyeInvisibleOutlined, null)); } }),
react_1["default"].createElement(antd_1.Space, { direction: "horizontal" },
react_1["default"].createElement(antd_1.Input.Password, { placeholder: "input password", visibilityToggle: { visible: passwordVisible, onVisibleChange: setPasswordVisible } }),
react_1["default"].createElement(antd_1.Button, { style: { width: 80 }, onClick: function () { return setPasswordVisible(function (prevState) { return !prevState; }); } }, passwordVisible ? 'Hide' : 'Show'),
react_1["default"].createElement(antd_1.Button, { style: { width: 80 }, onClick: function () { return setPasswordVisible(function (prevState) { return !prevState; }); } }, passwordVisible ? 'Hide' : 'Show'))));
};
exports["default"] = Search;

@ -2,6 +2,10 @@
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es5",
"lib": ["dom", "dom.iterable", "esnext"], "lib": ["dom", "dom.iterable", "esnext"],
"typeRoots": [
"node_modules/@types",
"src/typings"
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": true,
@ -19,7 +23,7 @@
"paths": { "paths": {
// baseUrl // baseUrl
"@/*": ["src/*"], "@/*": ["src/*"],
} },
}, },
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"] "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"]
} }

File diff suppressed because it is too large Load Diff

@ -12,7 +12,7 @@ selenium-debug.log
# Editor directories and files # Editor directories and files
.idea .idea
.vscode # .vscode
*.suo *.suo
*.ntvs* *.ntvs*
*.njsproj *.njsproj

Loading…
Cancel
Save