feat:tidy up front frame (#1449)

Co-authored-by: yikai <yikai@didiglobal.com>

.gitignore

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

.vscode/settings.json

@@ -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"
+  }
+  

threadpool/console-new/.prettierignore

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

threadpool/console-new/craco.config.js

@@ -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': '*',
+    },
+  },
+};

threadpool/console-new/package.json

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

threadpool/console-new/src/App.tsx

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

threadpool/console-new/src/components/layout-com/dist/index.js

@@ -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;

threadpool/console-new/src/components/table/dist/index.js

@@ -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;

threadpool/console-new/src/components/theme-com/index.tsx

@@ -1,5 +1,5 @@
 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 { darkAlgorithm } from '../../theme/dark-algorithm';
@@ -17,7 +17,7 @@ const ThemeComponent = ({ children }: ThemeProps) => {
   const [myThemes, setMyThemes] = useState<DefaultTheme>(lightDefaultTheme);
   const { themeName } = useContext<any>(MyThemeContext);
 
-  const changeColor = (themeName: THEME_NAME) => {
+  const changeMode = (themeName: THEME_NAME) => {
     if (themeName === THEME_NAME.DARK) {
       darkAlgorithm.algorithm = theme.darkAlgorithm;
       setThemes(darkAlgorithm);
@@ -30,7 +30,7 @@ const ThemeComponent = ({ children }: ThemeProps) => {
   };
 
   useEffect(() => {
-    changeColor(themeName);
+    changeMode(themeName);
   }, [themeName]);
 
   return (

threadpool/console-new/src/dist/index.js

@@ -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))))));

threadpool/console-new/src/index.tsx

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

threadpool/console-new/src/page/about/dist/index.js

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

threadpool/console-new/src/page/login/dist/index.js

@@ -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;

threadpool/console-new/src/page/login/index.tsx

@@ -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 [form] = Form.useForm();
@@ -58,24 +50,21 @@ const Login = () => {
   };
   return (
     <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">
           <h3 className="title">你好呀</h3>
           {/* <h3 className="title">{{ $t('system.login') }}</h3> */}
         </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="用户名" />
         </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="密码" />
         </Form.Item>
         <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>
     </div>

threadpool/console-new/src/page/search/dist/index.js

@@ -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;

threadpool/console-new/tsconfig.json

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

threadpool/console/.gitignore

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