mirror of https://github.com/longtai-cn/hippo4j
Feat/new UI (#1422)
* Remove console autofill hippo4j username and password logic (#1246) * feat:更改网址 * feat: submit new-uipull/1427/head
GRL-bxy
11 months ago
committed by
GitHub
parent
de703cfca1
commit
a49a1b2fff
File diff suppressed because it is too large
Load Diff
@ -1,29 +1,8 @@
|
||||
import { Layout } from 'antd';
|
||||
import { Routes, Route, Link } from 'react-router-dom';
|
||||
import Home from './page/home';
|
||||
import About from './page/about';
|
||||
import style from './index.module.less';
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
import React from 'react';
|
||||
import LayoutCom from './components/layout-com';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className={style.container}>
|
||||
<Header className={style.header}>header</Header>
|
||||
<Layout>
|
||||
<Sider className={style.sider}>
|
||||
<Link to="/home">home</Link>
|
||||
<Link to="/about">about</Link>
|
||||
</Sider>
|
||||
<Content className={style.content}>
|
||||
<Routes>
|
||||
<Route path="/home" Component={Home}></Route>
|
||||
<Route path="/about" Component={About}></Route>
|
||||
</Routes>
|
||||
</Content>
|
||||
</Layout>
|
||||
</div>
|
||||
);
|
||||
return <LayoutCom></LayoutCom>;
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@ -0,0 +1,99 @@
|
||||
"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;
|
||||
@ -0,0 +1,19 @@
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #eee;
|
||||
color: #fff;
|
||||
.header {
|
||||
height: 48px;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.01), 0 3px 6px 3px rgba(0, 0, 0, 0.01), 0 2px 6px 0 rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.sider {
|
||||
height: calc(100vh - 48px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.content {
|
||||
margin: 24px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,121 @@
|
||||
import React, { useEffect, useState, useContext } from 'react';
|
||||
import { DefaultTheme, ThemeContext } from 'styled-components';
|
||||
|
||||
import { Layout, Button, Menu, Table } from 'antd';
|
||||
import { Routes, Route, Link } from 'react-router-dom';
|
||||
import Home from '@/page/home';
|
||||
import About from '@/page/about';
|
||||
import Login from '@/page/login';
|
||||
import style from './index.module.less';
|
||||
import TableBox from '../table';
|
||||
import Search from '@/page/search';
|
||||
|
||||
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
|
||||
import { THEME_NAME, MyThemeContext } from '@/context/themeContext';
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
|
||||
interface ThemeProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const items = [
|
||||
{
|
||||
label: <a href="/about">Navigation One</a>,
|
||||
key: 'mail',
|
||||
icon: <MailOutlined />,
|
||||
},
|
||||
{
|
||||
label: 'Navigation Two',
|
||||
key: 'app',
|
||||
icon: <AppstoreOutlined />,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: <a href="/about">Navigation One</a>,
|
||||
key: 'app',
|
||||
icon: <AppstoreOutlined />,
|
||||
},
|
||||
{
|
||||
label: 'Navigation Three - Submenu',
|
||||
key: 'SubMenu',
|
||||
icon: <SettingOutlined />,
|
||||
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: (
|
||||
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
|
||||
Navigation Four - Link
|
||||
</a>
|
||||
),
|
||||
key: 'alipay',
|
||||
},
|
||||
];
|
||||
|
||||
const LayoutCom = () => {
|
||||
const myThemes: DefaultTheme = useContext<any>(ThemeContext);
|
||||
const { themeName, setThemeName } = useContext<any>(MyThemeContext);
|
||||
const [current, setCurrent] = useState('mail');
|
||||
const onClick = (e: any) => {
|
||||
console.log('click ', e);
|
||||
setCurrent(e.key);
|
||||
};
|
||||
const [isDark, setIsDark] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
isDark ? setThemeName(THEME_NAME.DARK) : setThemeName(THEME_NAME.DEFAULT);
|
||||
}, [isDark, setThemeName]);
|
||||
|
||||
return (
|
||||
<main className={style.container} style={{ backgroundColor: myThemes.backgroundColor.bg1 }}>
|
||||
<Header className={style.header} style={{ backgroundColor: myThemes.backgroundColor.bg1 }}>
|
||||
<Button onClick={() => setIsDark(pre => !pre)}>切换主题</Button>
|
||||
</Header>
|
||||
<Layout>
|
||||
<Sider className={style.sider} style={{ backgroundColor: myThemes.backgroundColor.bg1 }}>
|
||||
<Menu onClick={onClick} selectedKeys={[current]} mode="inline" items={items} />
|
||||
</Sider>
|
||||
<Content className={style.content}>
|
||||
<Routes>
|
||||
<Route path="/Search" Component={Search}></Route>
|
||||
<Route path="/Table" Component={TableBox}></Route>
|
||||
<Route path="/Login" Component={Login}></Route>
|
||||
<Route path="/home" Component={Home}></Route>
|
||||
<Route path="/about" Component={About}></Route>
|
||||
</Routes>
|
||||
</Content>
|
||||
</Layout>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default LayoutCom;
|
||||
@ -0,0 +1,71 @@
|
||||
"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;
|
||||
@ -0,0 +1,88 @@
|
||||
import React from 'react';
|
||||
import { Space, Table, Tag } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
|
||||
interface DataType {
|
||||
key: string;
|
||||
name: string;
|
||||
age: number;
|
||||
address: string;
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
const columns: ColumnsType<DataType> = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
render: text => <a>{text}</a>,
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
},
|
||||
{
|
||||
title: 'Tags',
|
||||
key: 'tags',
|
||||
dataIndex: 'tags',
|
||||
render: (_, { tags }) => (
|
||||
<>
|
||||
{tags.map(tag => {
|
||||
let color = tag.length > 5 ? 'geekblue' : 'green';
|
||||
if (tag === 'loser') {
|
||||
color = 'volcano';
|
||||
}
|
||||
return (
|
||||
<Tag color={color} key={tag}>
|
||||
{tag.toUpperCase()}
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
render: (_, record) => (
|
||||
<Space size="middle">
|
||||
<a>Invite {record.name}</a>
|
||||
<a>Delete</a>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const data: DataType[] = [
|
||||
{
|
||||
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'],
|
||||
},
|
||||
];
|
||||
|
||||
const TableBox: React.FC = () => <Table columns={columns} dataSource={data} />;
|
||||
|
||||
export default TableBox;
|
||||
@ -0,0 +1,42 @@
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { DefaultTheme, ThemeProvider, useTheme } from 'styled-components';
|
||||
import { ConfigProvider, theme } from 'antd';
|
||||
|
||||
import { darkAlgorithm } from '../../theme/dark-algorithm';
|
||||
import { defaultAlgorithm } from '../../theme/default-algnorithm';
|
||||
import { lightDefaultTheme, darkDefaultTheme } from '../../theme';
|
||||
import { MyThemeContext, THEME_NAME } from '../../context/themeContext';
|
||||
import zhCN from 'antd/es/locale/zh_CN';
|
||||
|
||||
interface ThemeProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const ThemeComponent = ({ children }: ThemeProps) => {
|
||||
const [themes, setThemes] = useState(defaultAlgorithm);
|
||||
const [myThemes, setMyThemes] = useState<DefaultTheme>(lightDefaultTheme);
|
||||
const { themeName } = useContext<any>(MyThemeContext);
|
||||
|
||||
const changeColor = (themeName: THEME_NAME) => {
|
||||
if (themeName === THEME_NAME.DARK) {
|
||||
darkAlgorithm.algorithm = theme.darkAlgorithm;
|
||||
setThemes(darkAlgorithm);
|
||||
setMyThemes(darkDefaultTheme);
|
||||
} else {
|
||||
defaultAlgorithm.algorithm = theme.defaultAlgorithm;
|
||||
setThemes(defaultAlgorithm);
|
||||
setMyThemes(lightDefaultTheme);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
changeColor(themeName);
|
||||
}, [themeName]);
|
||||
|
||||
return (
|
||||
<ConfigProvider locale={zhCN} theme={themes}>
|
||||
<ThemeProvider theme={myThemes}>{children}</ThemeProvider>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
export default ThemeComponent;
|
||||
@ -0,0 +1,17 @@
|
||||
import React, { createContext, useState, ReactNode } from 'react';
|
||||
|
||||
export enum THEME_NAME {
|
||||
DEFAULT = 'default',
|
||||
DARK = 'dark',
|
||||
}
|
||||
|
||||
export const MyThemeContext = createContext<{ themeName: string; setThemeName: (name: THEME_NAME) => void } | null>(
|
||||
null
|
||||
);
|
||||
|
||||
export const ThemeStore: React.FC<{
|
||||
children: ReactNode;
|
||||
}> = ({ children }) => {
|
||||
const [themeName, setThemeName] = useState<string>(THEME_NAME.DEFAULT);
|
||||
return <MyThemeContext.Provider value={{ themeName, setThemeName }}>{children}</MyThemeContext.Provider>;
|
||||
};
|
||||
@ -0,0 +1,15 @@
|
||||
"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))))));
|
||||
|
Before Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,6 @@
|
||||
"use strict";
|
||||
exports.__esModule = true;
|
||||
var About = function () {
|
||||
return React.createElement("div", { style: { color: 'red' } }, "About");
|
||||
};
|
||||
exports["default"] = About;
|
||||
@ -0,0 +1,65 @@
|
||||
"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;
|
||||
@ -0,0 +1,85 @@
|
||||
import React, { useEffect, useState, useContext } from 'react';
|
||||
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();
|
||||
const 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 }],
|
||||
},
|
||||
};
|
||||
|
||||
const validatePassword = (rule: any, value: string | any[], callback: (arg0: Error | undefined) => void) => {
|
||||
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();
|
||||
}
|
||||
};
|
||||
|
||||
const onFinish = () => {
|
||||
let loginParams = {
|
||||
username: form.getFieldValue('username'),
|
||||
password: form.getFieldValue('password'),
|
||||
rememberMe: 1,
|
||||
};
|
||||
data.loginForm.username = form.getFieldValue('username');
|
||||
console.log('hhhhhh', loginParams);
|
||||
};
|
||||
const showPwd = () => {
|
||||
if (data.passwordType === 'password') {
|
||||
data.passwordType = '';
|
||||
} else {
|
||||
data.passwordType = 'password';
|
||||
}
|
||||
// $nextTick(() => {
|
||||
// $refs.password.focus();
|
||||
// });
|
||||
};
|
||||
return (
|
||||
<div className="login-container">
|
||||
<Form name="loginForm" form={form} onFinish={onFinish}
|
||||
style={{ maxWidth: 600 }}>
|
||||
<div className="title-container">
|
||||
<h3 className="title">你好呀</h3>
|
||||
{/* <h3 className="title">{{ $t('system.login') }}</h3> */}
|
||||
</div>
|
||||
<Form.Item name="username" label="用户名"
|
||||
rules={[{ required: true, message: 'Username is required' }]}
|
||||
>
|
||||
<Input placeholder="用户名" />
|
||||
</Form.Item>
|
||||
<Form.Item name="password" label="密码"
|
||||
rules={[{ required: true, message: 'Street is required' }]}
|
||||
>
|
||||
<Input placeholder="密码" />
|
||||
</Form.Item>
|
||||
<Form.Item name="submit">
|
||||
<Button type="primary" htmlType="submit" className="login-button">登录</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
@ -0,0 +1,16 @@
|
||||
"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;
|
||||
@ -0,0 +1,31 @@
|
||||
import React from 'react';
|
||||
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
|
||||
import { Button, Input, Space } from 'antd';
|
||||
|
||||
const Search: React.FC = () => {
|
||||
const [passwordVisible, setPasswordVisible] = React.useState(false);
|
||||
|
||||
return (
|
||||
<Space direction="vertical">
|
||||
<Input.Password placeholder="input password" />
|
||||
<Input.Password
|
||||
placeholder="input password"
|
||||
iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
|
||||
/>
|
||||
<Space direction="horizontal">
|
||||
<Input.Password
|
||||
placeholder="input password"
|
||||
visibilityToggle={{ visible: passwordVisible, onVisibleChange: setPasswordVisible }}
|
||||
/>
|
||||
<Button style={{ width: 80 }} onClick={() => setPasswordVisible(prevState => !prevState)}>
|
||||
{passwordVisible ? 'Hide' : 'Show'}
|
||||
</Button>
|
||||
<Button style={{ width: 80 }} onClick={() => setPasswordVisible(prevState => !prevState)}>
|
||||
{passwordVisible ? 'Hide' : 'Show'}
|
||||
</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
export default Search;
|
||||
@ -1,2 +1,88 @@
|
||||
/// <reference types="react-scripts" />
|
||||
declare module '*.less';
|
||||
// import { DefaultTheme } from 'styled-components'
|
||||
|
||||
// export const lightDefaultTheme: DefaultTheme = {
|
||||
// primary: "#3495EE",
|
||||
|
||||
// baseColor: {
|
||||
// // 前两个是固定的，用于，有颜色按钮 字体颜色等固定不会变的颜色值
|
||||
// bc1: "#fff",
|
||||
// bc2: "#000000",
|
||||
// bc3: "#ED2D00",
|
||||
// bc4: "#10CC55",
|
||||
// bc5: "#3094f1",
|
||||
// },
|
||||
// fontColor: {
|
||||
// fc1: "#333",
|
||||
// fc2: "#000",
|
||||
// fc3: "#666",
|
||||
// fc4: '#D2E0F4',
|
||||
// fc5: "#000000",
|
||||
// fc6: "#FFFFFF",
|
||||
// },
|
||||
// borderColor: {
|
||||
// bl1: "#E2E2E2",
|
||||
// bl2: "#d8dbe2",
|
||||
// bl3: "#B5BDCE",
|
||||
// },
|
||||
// backgroundColor: {
|
||||
// bg1: "#FFFFFF",
|
||||
// bg2: "#EEEFF4",
|
||||
// // title的及表格头部背景极
|
||||
// bg3: "#EDEDED",
|
||||
// bg5: "#F8F8F8",
|
||||
// bg4: "#F6F6F6",
|
||||
// bg6: "rgba(0, 0, 0, 0.70)",
|
||||
// },
|
||||
// hoverColor: {
|
||||
// hc1: 'rgba(24, 144, 255, 0)',
|
||||
// // 表格的hover及选 中
|
||||
// hc2: '#F5F8FA'
|
||||
// }
|
||||
// }
|
||||
|
||||
// export const darkDefaultTheme: DefaultTheme = {
|
||||
// primary: "#177DDC",
|
||||
// baseColor: {
|
||||
// bc1: "#fff",
|
||||
// bc2: "#000000",
|
||||
// bc3: "#FF3D3D",
|
||||
// bc4: "#10CC55",
|
||||
// bc5: "#3094f1",
|
||||
// // 固定为白色，有颜色按钮文字颜色 fixedcolor
|
||||
// },
|
||||
// fontColor: {
|
||||
// fc1: "#ffffff",
|
||||
// fc2: "#B4B6B8",
|
||||
// fc3: "#555555",
|
||||
// fc4: '#666666',
|
||||
// fc5: "#FFFFFF",
|
||||
// fc6: "#FFFFFF",
|
||||
// },
|
||||
// borderColor: {
|
||||
// bl1: "#6A6A6A",
|
||||
// bl2: "#4A4B51",
|
||||
// bl3: "#424242",
|
||||
|
||||
// },
|
||||
// backgroundColor: {
|
||||
// // 大面积色
|
||||
// bg1: "#1C1D21",
|
||||
// // tab顶部颜色
|
||||
// bg2: "#323337",
|
||||
// // title 颜色
|
||||
// bg3: "#2A2B2E",
|
||||
// bg5: "#4A4B51",
|
||||
// // 菜单选中
|
||||
// bg4: "#0F3C66",
|
||||
// // 锁定背景色
|
||||
// bg6: "rgba(255, 255, 255, 0.70)",
|
||||
// // bg3: "rgba(255, 255, 255, 0.70)",
|
||||
// // bg4: "rgba(250, 250, 250, 1)",
|
||||
// },
|
||||
// hoverColor: {
|
||||
// hc1: 'rgba(24, 144, 255, 0)',
|
||||
// hc2: '#2A2B2E'
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
const Fc = () => {
|
||||
return <div>hhh</div>;
|
||||
};
|
||||
@ -0,0 +1,33 @@
|
||||
import { theme } from 'antd';
|
||||
import { darkDefaultTheme } from '.';
|
||||
export const darkAlgorithm = {
|
||||
token: {
|
||||
borderRadius: 2,
|
||||
colorPrimary: darkDefaultTheme.primary,
|
||||
fontSize: 14,
|
||||
},
|
||||
components: {
|
||||
Button: {
|
||||
fontSize: 14,
|
||||
},
|
||||
Table: {
|
||||
borderRadius: 0,
|
||||
borderRadiusLG: 0,
|
||||
padding: 10,
|
||||
paddingXS: 5,
|
||||
margin: 0,
|
||||
fontSize: 14,
|
||||
colorBorderSecondary: darkDefaultTheme.borderColor.bl1,
|
||||
paddingContentVerticalLG: 4,
|
||||
},
|
||||
Modal: {
|
||||
borderRadiusLG: 2,
|
||||
borderRadiusSM: 2,
|
||||
colorText: darkDefaultTheme.fontColor.fc3,
|
||||
borderRadius: 2,
|
||||
paddingContentHorizontalLG: 0,
|
||||
paddingMD: 0,
|
||||
},
|
||||
},
|
||||
algorithm: theme.darkAlgorithm,
|
||||
};
|
||||
@ -0,0 +1,34 @@
|
||||
import { theme } from 'antd';
|
||||
import { lightDefaultTheme } from '.';
|
||||
export const defaultAlgorithm = {
|
||||
token: {
|
||||
borderRadius: 2,
|
||||
colorPrimary: lightDefaultTheme.primary,
|
||||
fontSize: 14,
|
||||
// colorBgBase: lightDefaultTheme.backgroundColor.bg1,
|
||||
},
|
||||
components: {
|
||||
Button: {
|
||||
fontSize: 14,
|
||||
},
|
||||
Table: {
|
||||
borderRadius: 0,
|
||||
borderRadiusLG: 0,
|
||||
padding: 10,
|
||||
paddingXS: 5,
|
||||
margin: 0,
|
||||
fontSize: 14,
|
||||
colorBorderSecondary: lightDefaultTheme.borderColor.bl1,
|
||||
paddingContentVerticalLG: 4,
|
||||
},
|
||||
Modal: {
|
||||
borderRadiusLG: 2,
|
||||
borderRadiusSM: 2,
|
||||
colorText: lightDefaultTheme.fontColor.fc3,
|
||||
borderRadius: 2,
|
||||
paddingContentHorizontalLG: 0,
|
||||
paddingMD: 0,
|
||||
},
|
||||
},
|
||||
algorithm: theme.defaultAlgorithm,
|
||||
};
|
||||
@ -0,0 +1,44 @@
|
||||
import 'styled-components';
|
||||
// and extend them!
|
||||
declare module 'styled-components' {
|
||||
export interface DefaultTheme {
|
||||
primary: string;
|
||||
|
||||
// 基本固定颜色，如有颜色按钮，文字颜色
|
||||
baseColor: {
|
||||
bc1: string;
|
||||
bc2: string;
|
||||
bc3: string;
|
||||
bc4: string;
|
||||
bc5: string;
|
||||
};
|
||||
// 字体颜色
|
||||
fontColor: {
|
||||
fc1: string;
|
||||
fc2: string;
|
||||
fc3: string;
|
||||
fc4: string;
|
||||
fc5: string;
|
||||
fc6: string;
|
||||
};
|
||||
// 边框颜色 line
|
||||
borderColor: {
|
||||
bl1: string;
|
||||
bl2: string;
|
||||
bl3: string;
|
||||
};
|
||||
// 背景色
|
||||
backgroundColor: {
|
||||
bg1: string;
|
||||
bg2: string;
|
||||
bg3: string;
|
||||
bg4: string;
|
||||
bg5: string;
|
||||
bg6: string;
|
||||
};
|
||||
hoverColor: {
|
||||
hc1: string;
|
||||
hc2: string;
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,85 @@
|
||||
import { DefaultTheme } from 'styled-components';
|
||||
|
||||
export const lightDefaultTheme: DefaultTheme = {
|
||||
primary: '#0d68a8',
|
||||
|
||||
baseColor: {
|
||||
// 前两个是固定的，用于，有颜色按钮 字体颜色等固定不会变的颜色值
|
||||
bc1: '#fff',
|
||||
bc2: '#000000',
|
||||
bc3: '#ED2D00',
|
||||
bc4: '#10CC55',
|
||||
bc5: '#3094f1',
|
||||
},
|
||||
fontColor: {
|
||||
fc1: '#333',
|
||||
fc2: '#000',
|
||||
fc3: '#666',
|
||||
fc4: '#D2E0F4',
|
||||
fc5: '#000000',
|
||||
fc6: '#FFFFFF',
|
||||
},
|
||||
borderColor: {
|
||||
bl1: '#E2E2E2',
|
||||
bl2: '#d8dbe2',
|
||||
bl3: '#B5BDCE',
|
||||
},
|
||||
backgroundColor: {
|
||||
bg1: '#FFFFFF',
|
||||
bg2: '#EEEFF4',
|
||||
// title的及表格头部背景极
|
||||
bg3: '#EDEDED',
|
||||
bg5: '#F8F8F8',
|
||||
bg4: '#F6F6F6',
|
||||
bg6: 'rgba(0, 0, 0, 0.70)',
|
||||
},
|
||||
hoverColor: {
|
||||
hc1: 'rgba(24, 144, 255, 0)',
|
||||
// 表格的hover及选 中
|
||||
hc2: '#F5F8FA',
|
||||
},
|
||||
};
|
||||
|
||||
export const darkDefaultTheme: DefaultTheme = {
|
||||
primary: '#0d68a8',
|
||||
baseColor: {
|
||||
bc1: '#fff',
|
||||
bc2: '#000000',
|
||||
bc3: '#FF3D3D',
|
||||
bc4: '#10CC55',
|
||||
bc5: '#3094f1',
|
||||
// 固定为白色，有颜色按钮文字颜色 fixedcolor
|
||||
},
|
||||
fontColor: {
|
||||
fc1: '#ffffff',
|
||||
fc2: '#B4B6B8',
|
||||
fc3: '#555555',
|
||||
fc4: '#666666',
|
||||
fc5: '#FFFFFF',
|
||||
fc6: '#FFFFFF',
|
||||
},
|
||||
borderColor: {
|
||||
bl1: '#6A6A6A',
|
||||
bl2: '#4A4B51',
|
||||
bl3: '#424242',
|
||||
},
|
||||
backgroundColor: {
|
||||
// 大面积色
|
||||
bg1: '#141414',
|
||||
// tab顶部颜色
|
||||
bg2: '#323337',
|
||||
// title 颜色
|
||||
bg3: '#2A2B2E',
|
||||
bg5: '#4A4B51',
|
||||
// 菜单选中
|
||||
bg4: '#0F3C66',
|
||||
// 锁定背景色
|
||||
bg6: 'rgba(255, 255, 255, 0.70)',
|
||||
// bg3: "rgba(255, 255, 255, 0.70)",
|
||||
// bg4: "rgba(250, 250, 250, 1)",
|
||||
},
|
||||
hoverColor: {
|
||||
hc1: 'rgba(24, 144, 255, 0)',
|
||||
hc2: '#2A2B2E',
|
||||
},
|
||||
};
|
||||
Loading…
Reference in new issue