Match-id-83cea2d9496c456763cbe5292447e45cec99946e
This commit is contained in:
*
commit
0568c0a0f1
|
|
@ -1,28 +0,0 @@
|
|||
const BasicGenerator = require('../../BasicGenerator');
|
||||
|
||||
class Generator extends BasicGenerator {
|
||||
prompting() {
|
||||
return this.prompt([
|
||||
{
|
||||
type: 'list',
|
||||
name: 'bundlerType',
|
||||
message: 'Please select the build type',
|
||||
choices: ['webpack', 'vite'],
|
||||
},
|
||||
]).then(props => {
|
||||
this.prompts = props;
|
||||
console.log('finish prompting');
|
||||
});
|
||||
}
|
||||
writing() {
|
||||
const src = this.templatePath(this.prompts.bundlerType);
|
||||
const dest = this.destinationPath();
|
||||
this.writeFiles(src, dest, {
|
||||
context: {
|
||||
...this.prompts,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Generator;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"description": "Inula-antd template."
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Inula Antd</title>
|
||||
<script type="module" src="/src/admin/main.jsx"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
/**
|
||||
* Query objects that specify keys and values in an array where all values are objects.
|
||||
* @param {array} array An array where all values are objects, like [{key:1},{key:2}].
|
||||
* @param {string} key The key of the object that needs to be queried.
|
||||
* @param {string} value The value of the object that needs to be queried.
|
||||
* @return {object|undefined} Return frist object when query success.
|
||||
*/
|
||||
export function queryArray(array, key, value) {
|
||||
if (!Array.isArray(array)) {
|
||||
return;
|
||||
}
|
||||
return array.filter(_ => _[key] === value);
|
||||
}
|
||||
|
||||
export const Constant = {
|
||||
ApiPrefix: '/api/v1',
|
||||
NotFound: {
|
||||
message: 'Not Found',
|
||||
documentation_url: '',
|
||||
},
|
||||
Color: {
|
||||
green: '#64ea91',
|
||||
blue: '#8fc9fb',
|
||||
purple: '#d897eb',
|
||||
red: '#f69899',
|
||||
yellow: '#f8c82e',
|
||||
peach: '#f797d6',
|
||||
borderBase: '#e5e5e5',
|
||||
borderSplit: '#f4f4f4',
|
||||
grass: '#d6fbb5',
|
||||
sky: '#c1e0fc',
|
||||
},
|
||||
};
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
import { Constant } from './_utils';
|
||||
import Mock from 'mockjs';
|
||||
|
||||
const { ApiPrefix, Color } = Constant;
|
||||
|
||||
const Dashboard = Mock.mock({
|
||||
'sales|8': [
|
||||
{
|
||||
'name|+1': 2008,
|
||||
'Clothes|200-500': 1,
|
||||
'Food|180-400': 1,
|
||||
'Electronics|300-550': 1,
|
||||
},
|
||||
],
|
||||
quote: {
|
||||
name: 'Joho Doe',
|
||||
title: 'Graphic Designer',
|
||||
content:
|
||||
"I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.",
|
||||
avatar: '//cdn.antd-admin.zuiidea.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236',
|
||||
},
|
||||
numbers: [
|
||||
{
|
||||
icon: 'pay-circle-o',
|
||||
color: Color.green,
|
||||
title: 'Online Review',
|
||||
number: 2781,
|
||||
},
|
||||
{
|
||||
icon: 'team',
|
||||
color: Color.blue,
|
||||
title: 'New Customers',
|
||||
number: 3241,
|
||||
},
|
||||
{
|
||||
icon: 'message',
|
||||
color: Color.purple,
|
||||
title: 'Active Projects',
|
||||
number: 253,
|
||||
},
|
||||
{
|
||||
icon: 'shopping-cart',
|
||||
color: Color.red,
|
||||
title: 'Referrals',
|
||||
number: 4324,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export default [
|
||||
{
|
||||
url: `${ApiPrefix}/dashboard`,
|
||||
method: 'get',
|
||||
response: () => {
|
||||
return Dashboard;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import { Constant } from './_utils';
|
||||
|
||||
const { ApiPrefix } = Constant;
|
||||
|
||||
const database = [
|
||||
{
|
||||
id: '1',
|
||||
icon: 'dashboard',
|
||||
name: 'Dashboard',
|
||||
zh: {
|
||||
name: '仪表盘',
|
||||
},
|
||||
'pt-br': {
|
||||
name: 'Dashboard',
|
||||
},
|
||||
route: '/dashboard',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
breadcrumbParentId: '',
|
||||
name: 'User Management',
|
||||
zh: {
|
||||
name: '用户管理',
|
||||
},
|
||||
'pt-br': {
|
||||
name: 'Usuário',
|
||||
},
|
||||
icon: 'user',
|
||||
route: '/user',
|
||||
},
|
||||
];
|
||||
|
||||
export default [
|
||||
{
|
||||
url: `${ApiPrefix}/routes`,
|
||||
method: 'get',
|
||||
response: () => {
|
||||
return database;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
import { Constant } from "./_utils";
|
||||
import Mock from "mockjs";
|
||||
import url from "url";
|
||||
|
||||
const { ApiPrefix } = Constant;
|
||||
|
||||
let usersListData = Mock.mock({
|
||||
"data|80-100": [
|
||||
{
|
||||
id: "@id",
|
||||
name: "@name",
|
||||
nickName: "@last",
|
||||
phone: /^1[34578]\d{9}$/,
|
||||
"age|11-99": 1,
|
||||
address: "@county(true)",
|
||||
isMale: "@boolean",
|
||||
email: "@email",
|
||||
createTime: "@datetime",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
let database = usersListData.data;
|
||||
|
||||
const EnumRoleType = {
|
||||
ADMIN: "admin",
|
||||
DEFAULT: "guest",
|
||||
DEVELOPER: "developer",
|
||||
};
|
||||
|
||||
const userPermission = {
|
||||
DEFAULT: {
|
||||
visit: ["1", "2", "21", "7", "5", "51", "52", "53"],
|
||||
role: EnumRoleType.DEFAULT,
|
||||
},
|
||||
ADMIN: {
|
||||
role: EnumRoleType.ADMIN,
|
||||
},
|
||||
DEVELOPER: {
|
||||
role: EnumRoleType.DEVELOPER,
|
||||
},
|
||||
};
|
||||
|
||||
const adminUsers = [
|
||||
{
|
||||
id: 0,
|
||||
username: "admin",
|
||||
password: "admin",
|
||||
permissions: userPermission.ADMIN,
|
||||
},
|
||||
];
|
||||
|
||||
const queryArray = (array, key, keyAlias = "key") => {
|
||||
if (!(array instanceof Array)) {
|
||||
return null;
|
||||
}
|
||||
let data;
|
||||
|
||||
for (let item of array) {
|
||||
if (item[keyAlias] === key) {
|
||||
data = item;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (data) {
|
||||
return data;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const NOTFOUND = {
|
||||
message: "Not Found",
|
||||
documentation_url: "http://localhost:8000/request",
|
||||
};
|
||||
|
||||
export default [
|
||||
{
|
||||
url: `${ApiPrefix}/user`,
|
||||
method: "get",
|
||||
response: () => {
|
||||
return {
|
||||
success: true,
|
||||
user: adminUsers[0],
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
url: `${ApiPrefix}/users`,
|
||||
method: "get",
|
||||
response: (req) => {
|
||||
const { query } = url.parse(req.url, true);
|
||||
let { pageSize, page, ...other } = query;
|
||||
if (other["address[]"]) {
|
||||
other["address"] = other["address[]"];
|
||||
delete(other["address[]"]);
|
||||
}
|
||||
pageSize = pageSize || 10;
|
||||
page = page || 1;
|
||||
|
||||
let newData = database;
|
||||
for (let key in other) {
|
||||
newData = newData.filter((item) => {
|
||||
if ({}.hasOwnProperty.call(item, key)) {
|
||||
if (key === "address") {
|
||||
for (const addr of other[key]) {
|
||||
if (item[key].indexOf(addr) === -1) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
} else if (key === "createTime") {
|
||||
const start = new Date(other[key][0]).getTime();
|
||||
const end = new Date(other[key][1]).getTime();
|
||||
const now = new Date(item[key]).getTime();
|
||||
|
||||
if (start && end) {
|
||||
return now >= start && now <= end;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return (
|
||||
String(item[key]).trim().indexOf(decodeURI(other[key]).trim()) >
|
||||
-1
|
||||
);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
return {
|
||||
data: newData.slice((page - 1) * pageSize, page * pageSize),
|
||||
total: newData.length,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
url: `${ApiPrefix}/users/delete`,
|
||||
method: "post",
|
||||
response: (req) => {
|
||||
const { ids = [] } = req.body;
|
||||
database = database.filter((item) => !ids.some((_) => _ === item.id));
|
||||
},
|
||||
},
|
||||
{},
|
||||
];
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
{
|
||||
"name": "inula-vite-app",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"build": "vite build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.0.1",
|
||||
"@babel/plugin-proposal-export-default-from": "^7.18.6",
|
||||
"@babel/plugin-transform-react-jsx": "^7.21.0",
|
||||
"@babel/runtime": "7.6.2",
|
||||
"antd": "^4.0.0",
|
||||
"axios": "^0.21.0",
|
||||
"classnames": "^2.2.6",
|
||||
"echarts": "^5.0.0",
|
||||
"history": "^5.3.0",
|
||||
"lodash": "^4.17.11",
|
||||
"moment": "2.24.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"path-to-regexp": "^6.1.0",
|
||||
"prop-types": "^15.7.0",
|
||||
"qs": "^6.10.0",
|
||||
"inulajs": "0.0.11",
|
||||
"react-draft-wysiwyg": "^1.13.0",
|
||||
"inula-intl": "^0.0.1",
|
||||
"react-perfect-scrollbar": "^1.5.0",
|
||||
"inula-router": "^0.0.1",
|
||||
"recharts": "^2.0.0",
|
||||
"store": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "7.18.6",
|
||||
"@babel/core": "^7.18.6",
|
||||
"@babel/eslint-parser": "7.18.2",
|
||||
"@babel/plugin-proposal-class-properties": "7.18.6",
|
||||
"@babel/plugin-syntax-dynamic-import": "7.8.3",
|
||||
"@babel/plugin-syntax-jsx": "^7.18.6",
|
||||
"@babel/plugin-transform-flow-strip-types": "^7.18.6",
|
||||
"@babel/plugin-transform-runtime": "^7.18.6",
|
||||
"@babel/preset-env": "^7.18.6",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@babel/runtime": "7.18.6",
|
||||
"@babel/types": "7.18.6",
|
||||
"@vitejs/plugin-react": "^3.1.0",
|
||||
"@vitejs/plugin-react-refresh": "^1.3.5",
|
||||
"babel-loader": "8.2.5",
|
||||
"babel-plugin-syntax-trailing-function-commas": "^6.22.0",
|
||||
"cross-env": "7.0.3",
|
||||
"css-loader": "^4.3.0",
|
||||
"eslint": "^7.0.0",
|
||||
"express-interceptor": "1.2.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"less": "^4.1.3",
|
||||
"less-vars-to-js": "^1.3.0",
|
||||
"mockjs": "^1.1.0",
|
||||
"prettier": "^2.0.0",
|
||||
"style-loader": "^3.2.2",
|
||||
"ts-loader": "^9.3.1",
|
||||
"tsconfig-paths-webpack-plugin": "^4.0.1",
|
||||
"typescript": "^4.2.3",
|
||||
"url-loader": "^4.1.1",
|
||||
"vite": "^4.2.1",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
"vite-plugin-require-transform": "^1.0.12"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
|
|
@ -1,24 +0,0 @@
|
|||
|
||||
<svg width="169px" height="141px" viewBox="0 0 169 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="54.0428975%" y1="4.39752391%" x2="54.0428975%" y2="108.456714%" id="linearGradient-1">
|
||||
<stop stop-color="#29CDFF" offset="0%"></stop>
|
||||
<stop stop-color="#148EFF" offset="62.3089445%"></stop>
|
||||
<stop stop-color="#0A60FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="14.2201464%" x2="50%" y2="113.263844%" id="linearGradient-2">
|
||||
<stop stop-color="#FA816E" offset="0%"></stop>
|
||||
<stop stop-color="#F74A5C" offset="65.9092442%"></stop>
|
||||
<stop stop-color="#F51D2C" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Group" transform="translate(0.000000, -5.000000)">
|
||||
<rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(83.718923, 75.312358) rotate(-24.000000) translate(-83.718923, -75.312358) " x="68.7189234" y="0.312357954" width="30" height="150" rx="15"></rect>
|
||||
<rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(129.009910, 75.580213) rotate(-24.000000) translate(-129.009910, -75.580213) " x="114.00991" y="0.580212739" width="30" height="150" rx="15"></rect>
|
||||
<circle id="Oval" fill="url(#linearGradient-2)" cx="25" cy="120" r="25"></circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,25 +0,0 @@
|
|||
import Inula from 'inulajs';
|
||||
import PropTypes from 'prop-types';
|
||||
import { BarsOutlined, DownOutlined } from '@ant-design/icons';
|
||||
import { Dropdown, Button, Menu } from 'antd';
|
||||
|
||||
const DropOption = ({ onMenuClick, menuOptions = [], buttonStyle, dropdownProps }) => {
|
||||
const menu = menuOptions.map(item => <Menu.Item key={item.key}>{item.name}</Menu.Item>);
|
||||
return (
|
||||
<Dropdown overlay={<Menu onClick={onMenuClick}>{menu}</Menu>} {...dropdownProps}>
|
||||
<Button style={{ border: 'none', ...buttonStyle }}>
|
||||
<BarsOutlined style={{ marginRight: 2 }} />
|
||||
<DownOutlined />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
);
|
||||
};
|
||||
|
||||
DropOption.propTypes = {
|
||||
onMenuClick: PropTypes.func,
|
||||
menuOptions: PropTypes.array.isRequired,
|
||||
buttonStyle: PropTypes.object,
|
||||
dropdownProps: PropTypes.object,
|
||||
};
|
||||
|
||||
export default DropOption;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"name": "DropOption",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "DropOption.js"
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import Inula from 'inulajs';
|
||||
import { TooltipProps } from 'antd/lib/tooltip';
|
||||
|
||||
export interface EllipsisTooltipProps extends TooltipProps {
|
||||
title?: undefined;
|
||||
overlayStyle?: undefined;
|
||||
}
|
||||
|
||||
export interface EllipsisProps {
|
||||
tooltip?: boolean | EllipsisTooltipProps;
|
||||
length?: number;
|
||||
lines?: number;
|
||||
style?: Inula.CSSProperties;
|
||||
className?: string;
|
||||
fullWidthRecognition?: boolean;
|
||||
}
|
||||
|
||||
export function getStrFullLength(str: string): number;
|
||||
export function cutStrByFullLength(str: string, maxLength: number): string;
|
||||
|
||||
export default class Ellipsis extends Inula.Component<EllipsisProps, any> {}
|
||||
|
|
@ -1,259 +0,0 @@
|
|||
import Inula, { Component } from 'inulajs';
|
||||
import { Tooltip } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import styles from './index.module.less';
|
||||
|
||||
const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
|
||||
|
||||
const TooltipOverlayStyle = {
|
||||
overflowWrap: 'break-word',
|
||||
wordWrap: 'break-word',
|
||||
};
|
||||
|
||||
export const getStrFullLength = (str = '') =>
|
||||
str.split('').reduce((pre, cur) => {
|
||||
const charCode = cur.charCodeAt(0);
|
||||
if (charCode >= 0 && charCode <= 128) {
|
||||
return pre + 1;
|
||||
}
|
||||
return pre + 2;
|
||||
}, 0);
|
||||
|
||||
export const cutStrByFullLength = (str = '', maxLength) => {
|
||||
let showLength = 0;
|
||||
return str.split('').reduce((pre, cur) => {
|
||||
const charCode = cur.charCodeAt(0);
|
||||
if (charCode >= 0 && charCode <= 128) {
|
||||
showLength += 1;
|
||||
} else {
|
||||
showLength += 2;
|
||||
}
|
||||
if (showLength <= maxLength) {
|
||||
return pre + cur;
|
||||
}
|
||||
return pre;
|
||||
}, '');
|
||||
};
|
||||
|
||||
const getTooltip = ({ tooltip, overlayStyle, title, children }) => {
|
||||
if (tooltip) {
|
||||
const props = tooltip === true ? { overlayStyle, title } : { ...tooltip, overlayStyle, title };
|
||||
return <Tooltip {...props}>{children}</Tooltip>;
|
||||
}
|
||||
return children;
|
||||
};
|
||||
|
||||
const EllipsisText = ({ text, length, tooltip, fullWidthRecognition, ...other }) => {
|
||||
if (typeof text !== 'string') {
|
||||
throw new Error('Ellipsis children must be string.');
|
||||
}
|
||||
const textLength = fullWidthRecognition ? getStrFullLength(text) : text.length;
|
||||
if (textLength <= length || length < 0) {
|
||||
return <span {...other}>{text}</span>;
|
||||
}
|
||||
const tail = '...';
|
||||
let displayText;
|
||||
if (length - tail.length <= 0) {
|
||||
displayText = '';
|
||||
} else {
|
||||
displayText = fullWidthRecognition ? cutStrByFullLength(text, length) : text.slice(0, length);
|
||||
}
|
||||
|
||||
const spanAttrs = tooltip ? {} : { ...other };
|
||||
return getTooltip({
|
||||
tooltip,
|
||||
overlayStyle: TooltipOverlayStyle,
|
||||
title: text,
|
||||
children: (
|
||||
<span {...spanAttrs}>
|
||||
{displayText}
|
||||
{tail}
|
||||
</span>
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
export default class Ellipsis extends Component {
|
||||
state = {
|
||||
text: '',
|
||||
targetCount: 0,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
if (this.node) {
|
||||
this.computeLine();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(perProps) {
|
||||
const { lines } = this.props;
|
||||
if (lines !== perProps.lines) {
|
||||
this.computeLine();
|
||||
}
|
||||
}
|
||||
|
||||
computeLine = () => {
|
||||
const { lines } = this.props;
|
||||
if (lines && !isSupportLineClamp) {
|
||||
const text = this.shadowChildren.innerText || this.shadowChildren.textContent;
|
||||
const lineHeight = parseInt(getComputedStyle(this.root).lineHeight, 10);
|
||||
const targetHeight = lines * lineHeight;
|
||||
this.content.style.height = `${targetHeight}px`;
|
||||
const totalHeight = this.shadowChildren.offsetHeight;
|
||||
const shadowNode = this.shadow.firstChild;
|
||||
|
||||
if (totalHeight <= targetHeight) {
|
||||
this.setState({
|
||||
text,
|
||||
targetCount: text.length,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// bisection
|
||||
const len = text.length;
|
||||
const mid = Math.ceil(len / 2);
|
||||
|
||||
const count = this.bisection(targetHeight, mid, 0, len, text, shadowNode);
|
||||
|
||||
this.setState({
|
||||
text,
|
||||
targetCount: count,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
bisection = (th, m, b, e, text, shadowNode) => {
|
||||
const suffix = '...';
|
||||
let mid = m;
|
||||
let end = e;
|
||||
let begin = b;
|
||||
shadowNode.innerHTML = text.substring(0, mid) + suffix;
|
||||
let sh = shadowNode.offsetHeight;
|
||||
|
||||
if (sh <= th) {
|
||||
shadowNode.innerHTML = text.substring(0, mid + 1) + suffix;
|
||||
sh = shadowNode.offsetHeight;
|
||||
if (sh > th || mid === begin) {
|
||||
return mid;
|
||||
}
|
||||
begin = mid;
|
||||
if (end - begin === 1) {
|
||||
mid = 1 + begin;
|
||||
} else {
|
||||
mid = Math.floor((end - begin) / 2) + begin;
|
||||
}
|
||||
return this.bisection(th, mid, begin, end, text, shadowNode);
|
||||
}
|
||||
if (mid - 1 < 0) {
|
||||
return mid;
|
||||
}
|
||||
shadowNode.innerHTML = text.substring(0, mid - 1) + suffix;
|
||||
sh = shadowNode.offsetHeight;
|
||||
if (sh <= th) {
|
||||
return mid - 1;
|
||||
}
|
||||
end = mid;
|
||||
mid = Math.floor((end - begin) / 2) + begin;
|
||||
return this.bisection(th, mid, begin, end, text, shadowNode);
|
||||
};
|
||||
|
||||
handleRoot = n => {
|
||||
this.root = n;
|
||||
};
|
||||
|
||||
handleContent = n => {
|
||||
this.content = n;
|
||||
};
|
||||
|
||||
handleNode = n => {
|
||||
this.node = n;
|
||||
};
|
||||
|
||||
handleShadow = n => {
|
||||
this.shadow = n;
|
||||
};
|
||||
|
||||
handleShadowChildren = n => {
|
||||
this.shadowChildren = n;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { text, targetCount } = this.state;
|
||||
const { children, lines, length, className, tooltip, fullWidthRecognition, ...restProps } = this.props;
|
||||
|
||||
const cls = classNames(styles.ellipsis, className, {
|
||||
[styles.lines]: lines && !isSupportLineClamp,
|
||||
[styles.lineClamp]: lines && isSupportLineClamp,
|
||||
});
|
||||
|
||||
if (!lines && !length) {
|
||||
return (
|
||||
<span className={cls} {...restProps}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// length
|
||||
if (!lines) {
|
||||
return (
|
||||
<EllipsisText
|
||||
className={cls}
|
||||
length={length}
|
||||
text={children || ''}
|
||||
tooltip={tooltip}
|
||||
fullWidthRecognition={fullWidthRecognition}
|
||||
{...restProps}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const id = `antd-pro-ellipsis-${`${new Date().getTime()}${Math.floor(Math.random() * 100)}`}`;
|
||||
|
||||
// support document.body.style.webkitLineClamp
|
||||
if (isSupportLineClamp) {
|
||||
const style = `#${id}{-webkit-line-clamp:${lines};-webkit-box-orient: vertical;}`;
|
||||
|
||||
const node = (
|
||||
<div id={id} className={cls} {...restProps}>
|
||||
<style>{style}</style>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
return getTooltip({
|
||||
tooltip,
|
||||
overlayStyle: TooltipOverlayStyle,
|
||||
title: children,
|
||||
children: node,
|
||||
});
|
||||
}
|
||||
|
||||
const childNode = (
|
||||
<span ref={this.handleNode}>
|
||||
{targetCount > 0 && text.substring(0, targetCount)}
|
||||
{targetCount > 0 && targetCount < text.length && '...'}
|
||||
</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<div {...restProps} ref={this.handleRoot} className={cls}>
|
||||
<div ref={this.handleContent}>
|
||||
{getTooltip({
|
||||
tooltip,
|
||||
overlayStyle: TooltipOverlayStyle,
|
||||
title: text,
|
||||
children: childNode,
|
||||
})}
|
||||
<div className={styles.shadow} ref={this.handleShadowChildren}>
|
||||
{children}
|
||||
</div>
|
||||
<div className={styles.shadow} ref={this.handleShadow}>
|
||||
<span>{text}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
---
|
||||
title: Ellipsis
|
||||
subtitle: 文本自动省略号
|
||||
cols: 1
|
||||
order: 10
|
||||
---
|
||||
|
||||
文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------------- | ------------------------------------------------ | ------- | ------ |
|
||||
| tooltip | 移动到文本展示完整内容的提示 | boolean | - |
|
||||
| length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | - |
|
||||
| lines | 在按照行数截取下最大的行数，超过则截取省略 | number | `1` |
|
||||
| fullWidthRecognition | 是否将全角字符的长度视为 2 来计算字符串长度 | boolean | - |
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
.ellipsis {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.lines {
|
||||
position: relative;
|
||||
.shadow {
|
||||
position: absolute;
|
||||
z-index: -999;
|
||||
display: block;
|
||||
color: transparent;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.lineClamp {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { getStrFullLength, cutStrByFullLength } from './index';
|
||||
|
||||
describe('test calculateShowLength', () => {
|
||||
it('get full length', () => {
|
||||
expect(getStrFullLength('一二，a,')).toEqual(8);
|
||||
});
|
||||
it('cut str by full length', () => {
|
||||
expect(cutStrByFullLength('一二，a,', 7)).toEqual('一二，a');
|
||||
});
|
||||
it('cut str when length small', () => {
|
||||
expect(cutStrByFullLength('一22三', 5)).toEqual('一22');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import Inula from 'inulajs';
|
||||
import PropTypes from 'prop-types';
|
||||
import styles from './FilterItem.module.less';
|
||||
|
||||
const FilterItem = ({ label = '', children }) => {
|
||||
const labelArray = label.split('');
|
||||
return (
|
||||
<div className={styles.filterItem}>
|
||||
{labelArray.length > 0 && (
|
||||
<div className={styles.labelWrap}>
|
||||
{labelArray.map((item, index) => (
|
||||
<span className="labelText" key={index}>
|
||||
{item}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.item}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
FilterItem.propTypes = {
|
||||
label: PropTypes.string,
|
||||
children: PropTypes.element.isRequired,
|
||||
};
|
||||
|
||||
export default FilterItem;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.filterItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.labelWrap {
|
||||
width: 64px;
|
||||
line-height: 28px;
|
||||
margin-right: 12px;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"name": "FilterItem",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "FilterItem.js"
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import Inula from 'inulajs';
|
||||
import type { InulaNode, CSSProperties, Component } from 'inulajs';
|
||||
|
||||
export interface GlobalFooterProps {
|
||||
links?: Array<{
|
||||
key?: string;
|
||||
title: InulaNode;
|
||||
href: string;
|
||||
blankTarget?: boolean;
|
||||
}>;
|
||||
copyright?: InulaNode;
|
||||
style?: CSSProperties;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default class GlobalFooter extends Component<GlobalFooterProps, any> {}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import Inula from 'inulajs';
|
||||
import classNames from 'classnames';
|
||||
import styles from './index.module.less';
|
||||
|
||||
const GlobalFooter = ({ className, links, copyright }) => {
|
||||
const clsString = classNames(styles.globalFooter, className);
|
||||
return (
|
||||
<footer className={clsString}>
|
||||
{links && (
|
||||
<div className={styles.links}>
|
||||
{links.map(link => (
|
||||
<a key={link.key} title={link.key} target={link.blankTarget ? '_blank' : '_self'} href={link.href}>
|
||||
{link.title}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{copyright && <div className={styles.copyright}>{copyright}</div>}
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default GlobalFooter;
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
---
|
||||
title: GlobalFooter
|
||||
subtitle: 全局页脚
|
||||
cols: 1
|
||||
order: 7
|
||||
---
|
||||
|
||||
页脚属于全局导航的一部分，作为对顶部导航的补充，通过传递数据控制展示内容。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------- | -------- | ---------------------------------------------------------------- | ------ |
|
||||
| links | 链接数据 | array<{ title: InulaNode, href: string, blankTarget?: boolean }> | - |
|
||||
| copyright | 版权信息 | InulaNode | - |
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
@import '../../../../node_modules/antd/lib/style/themes/default.less';
|
||||
|
||||
.globalFooter {
|
||||
margin: 48px 0 24px 0;
|
||||
padding: 0 16px;
|
||||
text-align: center;
|
||||
|
||||
.links {
|
||||
margin-bottom: 8px;
|
||||
|
||||
a {
|
||||
color: @text-color-secondary;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
import Inula, { Fragment } from 'inulajs';
|
||||
import { Breadcrumb } from 'antd';
|
||||
import { Link } from 'inula-router';
|
||||
import { t } from 'utils/intl';
|
||||
import iconMap from 'utils/iconMap';
|
||||
|
||||
import { pathToRegexp } from 'path-to-regexp';
|
||||
import { queryAncestors } from 'utils';
|
||||
import styles from './Bread.module.less';
|
||||
import { withRouter } from 'inula-router';
|
||||
|
||||
function Bread({ routeList, history }) {
|
||||
const generateBreadcrumbs = paths => {
|
||||
return paths.map((item, key) => {
|
||||
const content = item && (
|
||||
<Fragment>
|
||||
{item.icon && <span style={{ marginRight: 4 }}>{iconMap[item.icon]}</span>}
|
||||
{item.name}
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
return (
|
||||
item && (
|
||||
<Breadcrumb.Item key={key}>
|
||||
{paths.length - 1 !== key ? <Link to={item.route || '#'}>{content}</Link> : content}
|
||||
</Breadcrumb.Item>
|
||||
)
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// Find a route that matches the pathname.
|
||||
const currentRoute = routeList.find(_ => _.route && pathToRegexp(_.route).exec(history.location.pathname));
|
||||
|
||||
// Find the breadcrumb navigation of the current route match and all its ancestors.
|
||||
const paths =
|
||||
history.location.pathname === '/'
|
||||
? [routeList[0]]
|
||||
: currentRoute
|
||||
? queryAncestors(routeList, currentRoute, 'breadcrumbParentId').reverse()
|
||||
: [
|
||||
{
|
||||
id: 404,
|
||||
name: t`Not Found`,
|
||||
},
|
||||
];
|
||||
|
||||
return <Breadcrumb className={styles.bread}>{generateBreadcrumbs(paths)}</Breadcrumb>;
|
||||
}
|
||||
|
||||
export default withRouter(Bread);
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
.bread {
|
||||
margin-bottom: 24px !important;
|
||||
|
||||
:global {
|
||||
.ant-breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.bread {
|
||||
margin-bottom: 12px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
import Inula from 'inulajs';
|
||||
import { Menu, Layout } from 'antd';
|
||||
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
|
||||
import { Trans } from 'utils/intl';
|
||||
import { getLocale, setLocale } from 'utils';
|
||||
import classnames from 'classnames';
|
||||
import config from 'config';
|
||||
import styles from './Header.module.less';
|
||||
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
function Header({ fixed, username, collapsed, notifications, onCollapseChange, onAllNotificationsRead }) {
|
||||
const rightContent = [
|
||||
<div style={{ position: 'fixed', right: '100px' }}>
|
||||
<span style={{ color: '#999', marginRight: 4 }}>
|
||||
<Trans>Hi,</Trans>
|
||||
</span>
|
||||
<span>{username}</span>
|
||||
</div>
|
||||
];
|
||||
|
||||
if (config.i18n) {
|
||||
const { languages } = config.i18n;
|
||||
const language = getLocale();
|
||||
const currentLanguage = languages.find(item => item.key === language);
|
||||
|
||||
rightContent.unshift(
|
||||
<Menu
|
||||
key="language"
|
||||
selectedKeys={[currentLanguage.key]}
|
||||
onClick={data => {
|
||||
setLocale(data.key);
|
||||
}}
|
||||
mode="horizontal"
|
||||
>
|
||||
<SubMenu title={currentLanguage.title}>
|
||||
{languages.map(item => (
|
||||
<Menu.Item key={item.key}>
|
||||
{item.title}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout.Header
|
||||
className={classnames(styles.header, {
|
||||
[styles.fixed]: fixed,
|
||||
[styles.collapsed]: collapsed,
|
||||
})}
|
||||
id="layoutHeader"
|
||||
>
|
||||
<div className={styles.button} onClick={onCollapseChange.bind(this, !collapsed)}>
|
||||
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
</div>
|
||||
<div className={styles.rightContainer}>{rightContent}</div>
|
||||
</Layout.Header>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
@import '../../themes/vars.less';
|
||||
|
||||
.header {
|
||||
padding: 0 !important;
|
||||
box-shadow: @shadow-2;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 72px !important;
|
||||
z-index: 9;
|
||||
align-items: center;
|
||||
background-color: #fff !important;
|
||||
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: ~'calc(100% - 256px)';
|
||||
z-index: 29;
|
||||
transition: width 0.2s;
|
||||
|
||||
&.collapsed {
|
||||
width: ~'calc(100% - 80px)';
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-menu-submenu-title {
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal {
|
||||
line-height: 72px;
|
||||
|
||||
& > .ant-menu-submenu:hover {
|
||||
color: @primary-color;
|
||||
background-color: @hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu {
|
||||
border-bottom: none;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal > .ant-menu-submenu {
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal > .ant-menu-item,
|
||||
.ant-menu-horizontal > .ant-menu-submenu {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal > .ant-menu-item-active,
|
||||
.ant-menu-horizontal > .ant-menu-item-open,
|
||||
.ant-menu-horizontal > .ant-menu-item-selected,
|
||||
.ant-menu-horizontal > .ant-menu-item:hover,
|
||||
.ant-menu-horizontal > .ant-menu-submenu-active,
|
||||
.ant-menu-horizontal > .ant-menu-submenu-open,
|
||||
.ant-menu-horizontal > .ant-menu-submenu-selected,
|
||||
.ant-menu-horizontal > .ant-menu-submenu:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rightContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
line-height: 72px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: @transition-ease-in;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
background-color: @hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.iconButton {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 24px;
|
||||
cursor: pointer;
|
||||
.background-hover();
|
||||
|
||||
&:hover {
|
||||
.iconFont {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
& + .iconButton {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.iconFont {
|
||||
color: #b2b0c7;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
padding: 24px 0;
|
||||
width: 320px;
|
||||
.notificationItem {
|
||||
transition: all 0.3s;
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: @hover-color;
|
||||
}
|
||||
}
|
||||
.clearButton {
|
||||
text-align: center;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
cursor: pointer;
|
||||
.background-hover();
|
||||
}
|
||||
}
|
||||
|
||||
.notificationPopover {
|
||||
:global {
|
||||
.ant-popover-inner-content {
|
||||
padding: 0;
|
||||
}
|
||||
.ant-popover-arrow {
|
||||
display: none;
|
||||
}
|
||||
.ant-list-item-content {
|
||||
flex: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.header {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
import Inula from 'inulajs';
|
||||
import { Switch, Layout } from 'antd';
|
||||
import { t } from 'utils/intl';
|
||||
import { Trans } from 'utils/intl';
|
||||
import { BulbOutlined } from '@ant-design/icons';
|
||||
import ScrollBar from '../ScrollBar';
|
||||
import config from 'utils/config';
|
||||
import SiderMenu from './SiderMenu';
|
||||
import styles from './Sider.module.less';
|
||||
|
||||
function Sider({ menus, theme, isMobile, collapsed, onThemeChange, onCollapseChange }) {
|
||||
return (
|
||||
<Layout.Sider
|
||||
width={256}
|
||||
theme={theme}
|
||||
breakpoint="lg"
|
||||
trigger={null}
|
||||
collapsible
|
||||
collapsed={collapsed}
|
||||
onBreakpoint={!isMobile && onCollapseChange}
|
||||
className={styles.sider}
|
||||
>
|
||||
<div className={styles.brand}>
|
||||
<div className={styles.logo}>
|
||||
<img alt="logo" src={config.logoPath} />
|
||||
{!collapsed && <h1>{config.siteName}</h1>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.menuContainer}>
|
||||
<ScrollBar
|
||||
options={{
|
||||
// Disabled horizontal scrolling, https://github.com/utatti/perfect-scrollbar#options
|
||||
suppressScrollX: true,
|
||||
}}
|
||||
>
|
||||
<SiderMenu
|
||||
menus={menus}
|
||||
theme={theme}
|
||||
isMobile={isMobile}
|
||||
collapsed={collapsed}
|
||||
onCollapseChange={onCollapseChange}
|
||||
/>
|
||||
</ScrollBar>
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<div className={styles.switchTheme}>
|
||||
<span className={theme === 'dark' ? styles.darkTheme : ''}>
|
||||
<BulbOutlined />
|
||||
<Trans>Switch Theme</Trans>
|
||||
</span>
|
||||
<Switch
|
||||
onChange={onThemeChange.bind(this, theme === 'dark' ? 'light' : 'dark')}
|
||||
defaultChecked={theme === 'dark'}
|
||||
checkedChildren={t`Dark`}
|
||||
unCheckedChildren={t`Light`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Layout.Sider>
|
||||
);
|
||||
}
|
||||
|
||||
export default Sider;
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
@import '../../themes/vars.less';
|
||||
|
||||
.sider {
|
||||
box-shadow: fade(@primary-color, 10%) 0 0 28px 0;
|
||||
z-index: 10;
|
||||
:global {
|
||||
.ant-layout-sider-children {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand {
|
||||
z-index: 1;
|
||||
height: 72px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 24px;
|
||||
box-shadow: 0 1px 9px -3px rgba(0, 0, 0, 0.2);
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 36px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
vertical-align: text-bottom;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
color: @primary-color;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0;
|
||||
.text-gradient();
|
||||
|
||||
:local {
|
||||
animation: fadeRightIn 300ms @ease-in-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menuContainer {
|
||||
height: ~'calc(100vh - 120px)';
|
||||
overflow-x: hidden;
|
||||
flex: 1;
|
||||
padding: 24px 0;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-menu-inline {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.darkTheme {
|
||||
color: rgb(102, 102, 102);
|
||||
}
|
||||
|
||||
.switchTheme {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:global {
|
||||
.anticon {
|
||||
min-width: 14px;
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeLeftIn {
|
||||
0% {
|
||||
transform: translateX(5px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
import Inula, { useState, Fragment } from 'inulajs';
|
||||
import { Menu } from 'antd';
|
||||
import { NavLink, withRouter } from 'inula-router';
|
||||
import { pathToRegexp } from 'path-to-regexp';
|
||||
import { arrayToTree, queryAncestors } from '../../utils';
|
||||
import iconMap from '../../utils/iconMap';
|
||||
import store from 'store';
|
||||
import { getStore } from '../../models/app-model';
|
||||
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
function SiderMenu({ theme, menus, history, isMobile, onCollapseChange }) {
|
||||
const st = getStore();
|
||||
|
||||
const [openKeys, setOpenKeys] = useState(store.get('openKeys') || []);
|
||||
|
||||
const onOpenChange = openKeys => {
|
||||
const rootSubmenuKeys = menus.filter(_ => !_.menuParentId).map(_ => _.id);
|
||||
|
||||
const latestOpenKey = openKeys.find(key => openKeys.indexOf(key) === -1);
|
||||
|
||||
let newOpenKeys = openKeys;
|
||||
if (rootSubmenuKeys.indexOf(latestOpenKey) !== -1) {
|
||||
newOpenKeys = latestOpenKey ? [latestOpenKey] : [];
|
||||
}
|
||||
|
||||
setOpenKeys(newOpenKeys);
|
||||
|
||||
store.set('openKeys', newOpenKeys);
|
||||
};
|
||||
|
||||
const generateMenus = data => {
|
||||
return data.map(item => {
|
||||
if (item.children) {
|
||||
return (
|
||||
<SubMenu
|
||||
key={item.id}
|
||||
title={
|
||||
<Fragment>
|
||||
{item.icon && iconMap[item.icon]}
|
||||
<span>{item.name}</span>
|
||||
</Fragment>
|
||||
}
|
||||
>
|
||||
{generateMenus(item.children)}
|
||||
</SubMenu>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Menu.Item key={item.id}>
|
||||
<NavLink to={item.route || '#'}>
|
||||
{item.icon && iconMap[item.icon]}
|
||||
<span>{item.name}</span>
|
||||
</NavLink>
|
||||
</Menu.Item>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// Generating tree-structured data for menu content.
|
||||
const menuTree = arrayToTree(menus, 'id', 'menuParentId');
|
||||
|
||||
// Find a menu that matches the pathname.
|
||||
const currentMenu = menus.find(_ => _.route && pathToRegexp(_.route).exec(history.location.pathname));
|
||||
|
||||
// Find the key that should be selected according to the current menu.
|
||||
const selectedKeys = currentMenu ? queryAncestors(menus, currentMenu, 'menuParentId').map(_ => _.id) : [];
|
||||
|
||||
const menuProps = st.collapsed
|
||||
? {}
|
||||
: {
|
||||
openKeys: openKeys,
|
||||
};
|
||||
|
||||
return (
|
||||
<Menu
|
||||
mode="inline"
|
||||
theme={theme}
|
||||
onOpenChange={onOpenChange}
|
||||
selectedKeys={selectedKeys}
|
||||
onClick={
|
||||
isMobile
|
||||
? () => {
|
||||
onCollapseChange(true);
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
{...menuProps}
|
||||
>
|
||||
{generateMenus(menuTree)}
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
export default withRouter(SiderMenu);
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import Header from './Header';
|
||||
import Menu from './SiderMenu';
|
||||
import Bread from './Bread';
|
||||
import Sider from './Sider';
|
||||
|
||||
export { Header, Menu, Bread, Sider };
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import Inula from 'inulajs';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import styles from './Loader.module.less';
|
||||
|
||||
const Loader = ({ spinning = false, fullScreen }) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.loader, {
|
||||
[styles.hidden]: !spinning,
|
||||
[styles.fullScreen]: fullScreen,
|
||||
})}
|
||||
>
|
||||
<div className={styles.warpper}>
|
||||
<div className={styles.inner} />
|
||||
<div className={styles.text}>LOADING</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Loader.propTypes = {
|
||||
spinning: PropTypes.bool,
|
||||
fullScreen: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Loader;
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
.loader {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 1;
|
||||
text-align: center;
|
||||
|
||||
&.fullScreen {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.warpper {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 auto;
|
||||
text-indent: -12345px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.7);
|
||||
border-radius: 50%;
|
||||
z-index: 100001;
|
||||
|
||||
:local {
|
||||
animation: spinner 600ms infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
letter-spacing: 4px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 1s ease 0.5s,
|
||||
z-index 0.1s ease 1.5s;
|
||||
}
|
||||
}
|
||||
@keyframes spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"name": "Loader",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "Loader.js"
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import Inula, { Component } from 'inulajs';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import Loader from '../Loader';
|
||||
import styles from './Page.module.less';
|
||||
|
||||
export default class Page extends Component {
|
||||
render() {
|
||||
const { className, children, loading = false, inner = false } = this.props;
|
||||
const loadingStyle = {
|
||||
height: 'calc(100vh - 184px)',
|
||||
overflow: 'hidden',
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className={classnames(className, {
|
||||
[styles.contentInner]: inner,
|
||||
})}
|
||||
style={loading ? loadingStyle : null}
|
||||
>
|
||||
{loading ? <Loader spinning /> : ''}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Page.propTypes = {
|
||||
className: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
loading: PropTypes.bool,
|
||||
inner: PropTypes.bool,
|
||||
};
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
@import '../../themes/vars.less';
|
||||
|
||||
.contentInner {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
box-shadow: @shadow-1;
|
||||
min-height: ~'calc(100vh - 230px)';
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.contentInner {
|
||||
padding: 12px;
|
||||
min-height: ~'calc(100vh - 160px)';
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"name": "Page",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "Page.js"
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import ScrollBar from 'react-perfect-scrollbar';
|
||||
import 'react-perfect-scrollbar/dist/css/styles.css';
|
||||
import './index.less';
|
||||
|
||||
export default ScrollBar;
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
:global {
|
||||
.ps--active-x > .ps__rail-x,
|
||||
.ps--active-y > .ps__rail-y {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ps__rail-x:hover > .ps__thumb-x,
|
||||
.ps__rail-x:focus > .ps__thumb-x {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.ps__rail-y:hover > .ps__thumb-y,
|
||||
.ps__rail-y:focus > .ps__thumb-y {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.ps__rail-y,
|
||||
.ps__rail-x {
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
width: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.ps__thumb-x {
|
||||
height: 4px;
|
||||
bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import FilterItem from './FilterItem';
|
||||
import DropOption from './DropOption';
|
||||
import Loader from './Loader';
|
||||
import ScrollBar from './ScrollBar';
|
||||
import GlobalFooter from './GlobalFooter';
|
||||
import Ellipsis from './Ellipsis';
|
||||
import * as MyLayout from './Layout';
|
||||
import Page from './Page';
|
||||
|
||||
export { MyLayout, GlobalFooter, Ellipsis, FilterItem, DropOption, Loader, Page, ScrollBar };
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import Inula, { Fragment } from 'inulajs';
|
||||
import { queryLayout } from 'utils';
|
||||
import config from 'utils/config';
|
||||
|
||||
import PublicLayout from './PublicLayout';
|
||||
import PrimaryLayout from './PrimaryLayout';
|
||||
import { withRouter } from 'inula-router';
|
||||
import './BaseLayout.less';
|
||||
|
||||
const LayoutMap = {
|
||||
primary: PrimaryLayout,
|
||||
public: PublicLayout,
|
||||
};
|
||||
|
||||
function BaseLayout({ children, location }) {
|
||||
const Container = LayoutMap[queryLayout(config.layouts, location.pathname)];
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Container>{children}</Container>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default withRouter(BaseLayout);
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
@import '../themes/vars.less';
|
||||
@import '../themes/index.less';
|
||||
|
||||
:global {
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
|
||||
.bar {
|
||||
background: @primary-color;
|
||||
position: fixed;
|
||||
z-index: 2048;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.peg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
box-shadow:
|
||||
0 0 10px @primary-color,
|
||||
0 0 5px @primary-color;
|
||||
opacity: 1;
|
||||
transform: rotate(3deg) translate(0, -4px);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.spinner-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
box-sizing: border-box;
|
||||
border: solid 2px transparent;
|
||||
border-top-color: @primary-color;
|
||||
border-left-color: @primary-color;
|
||||
border-radius: 50%;
|
||||
|
||||
:local {
|
||||
animation: nprogress-spinner 400ms linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nprogress-custom-parent {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
#nprogress {
|
||||
.bar,
|
||||
.spinner {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nprogress-spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
@import '../themes/vars.less';
|
||||
|
||||
.backTop {
|
||||
right: 50px;
|
||||
|
||||
:global {
|
||||
.ant-back-top-content {
|
||||
background: @primary-color;
|
||||
opacity: 0.3;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 0 15px 1px rgba(69, 65, 78, 0.1);
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 24px;
|
||||
min-height: ~'calc(100% - 72px)';
|
||||
// overflow-y: scroll;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100vh;
|
||||
flex: 1;
|
||||
width: ~'calc(100% - 256px)';
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: #fff;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
min-height: 72px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.backTop {
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100vh;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
import Inula, { useEffect, Fragment } from 'inulajs';
|
||||
import PropTypes from 'prop-types';
|
||||
import { MyLayout, GlobalFooter } from '../components';
|
||||
import { BackTop, Layout, Drawer } from 'antd';
|
||||
|
||||
import { pathToRegexp } from 'path-to-regexp';
|
||||
import { getLocale } from '../utils';
|
||||
import config from '../utils/config';
|
||||
import Error from '../pages/404';
|
||||
import styles from './PrimaryLayout.module.less';
|
||||
import store from 'store';
|
||||
import { getStore } from '../models/app-model';
|
||||
import { withRouter } from 'inula-router';
|
||||
|
||||
const { Content } = Layout;
|
||||
const { Header, Bread, Sider } = MyLayout;
|
||||
|
||||
function PrimaryLayout({ children, location, history }) {
|
||||
const st = getStore();
|
||||
|
||||
useEffect(() => {
|
||||
st.query(history);
|
||||
}, []);
|
||||
|
||||
const onCollapseChange = collapsed => {
|
||||
st.handleCollapseChange(collapsed);
|
||||
};
|
||||
|
||||
const theme = st.theme;
|
||||
const collapsed = st.collapsed;
|
||||
const notifications = st.notifications;
|
||||
const user = store.get('user') || {};
|
||||
const permissions = st.permissions;
|
||||
const routeList = st.routeList || [];
|
||||
|
||||
const lang = getLocale();
|
||||
|
||||
const newRouteList =
|
||||
lang !== 'en'
|
||||
? routeList.map(item => {
|
||||
const { name, ...other } = item;
|
||||
return {
|
||||
...other,
|
||||
name: (item[lang] || {}).name || name,
|
||||
};
|
||||
})
|
||||
: routeList;
|
||||
|
||||
// Find a route that matches the pathname.
|
||||
const currentRoute = newRouteList.find(_ => _.route && pathToRegexp(`${_.route}`).exec(location.pathname));
|
||||
|
||||
// Query whether you have permission to enter this page
|
||||
const hasPermission = currentRoute ? permissions.visit.includes(currentRoute.id) : false;
|
||||
|
||||
// MenuParentId is equal to -1 is not a available menu.
|
||||
const menus = newRouteList.filter(_ => _.menuParentId !== '-1');
|
||||
|
||||
const headerProps = {
|
||||
menus,
|
||||
collapsed,
|
||||
notifications,
|
||||
onCollapseChange,
|
||||
avatar: user.avatar,
|
||||
username: user.username,
|
||||
fixed: config.fixedHeader,
|
||||
onAllNotificationsRead: () => {
|
||||
st.allNotificationsRead();
|
||||
},
|
||||
};
|
||||
|
||||
const siderProps = {
|
||||
theme,
|
||||
menus,
|
||||
collapsed,
|
||||
onCollapseChange,
|
||||
onThemeChange: theme => {
|
||||
st.handleThemeChange(theme);
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Layout>
|
||||
<Sider {...siderProps} />
|
||||
|
||||
<div className={styles.container} style={{ paddingTop: config.fixedHeader ? 72 : 0 }} id="primaryLayout">
|
||||
<Header {...headerProps} />
|
||||
<Content className={styles.content}>
|
||||
<Bread routeList={newRouteList} />
|
||||
{hasPermission ? children : <Error />}
|
||||
</Content>
|
||||
<BackTop className={styles.backTop} target={() => document.querySelector('#primaryLayout')} />
|
||||
<GlobalFooter className={styles.footer} copyright={config.copyright} />
|
||||
</div>
|
||||
</Layout>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default withRouter(PrimaryLayout);
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export default ({ children }) => {
|
||||
return children;
|
||||
};
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import Inula, { Suspense } from 'inulajs';
|
||||
import { ConfigProvider } from 'antd';
|
||||
import { IntlProvider } from 'inula-intl';
|
||||
import { getLocale } from '../utils';
|
||||
import BaseLayout from './BaseLayout';
|
||||
import { Route, withRouter } from 'inula-router';
|
||||
import { getRoutes } from '../pages/routes';
|
||||
import { getLangResource } from '../utils/intl';
|
||||
|
||||
function Layout() {
|
||||
let language = getLocale();
|
||||
|
||||
let langResource = getLangResource(language);
|
||||
|
||||
const routes = getRoutes();
|
||||
|
||||
return (
|
||||
<ConfigProvider locale={langResource[language]}>
|
||||
<IntlProvider messages={langResource[language]} locale={language}>
|
||||
<BaseLayout>
|
||||
<Suspense fallback={''}>
|
||||
<Route path={routes[0].path} component={routes[0].component}>
|
||||
{routes[0].childRoutes.map(item => {
|
||||
return <Route path={item.path} component={item.component} />;
|
||||
})}
|
||||
</Route>
|
||||
</Suspense>
|
||||
</BaseLayout>
|
||||
</IntlProvider>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default withRouter(Layout);
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
export default {
|
||||
'/dashboard': '/dashboard',
|
||||
'Add Param': 'Add Param',
|
||||
Address: 'Address',
|
||||
Age: 'Age',
|
||||
'Are you sure delete this record?': 'Are you sure delete this record?',
|
||||
Author: 'Author',
|
||||
Avatar: 'Avatar',
|
||||
Categories: 'Categories',
|
||||
'Clear notifications': 'Clear notifications',
|
||||
Comments: 'Comments',
|
||||
Create: 'Create',
|
||||
'Create User': 'Create User',
|
||||
CreateTime: 'CreateTime',
|
||||
Dark: 'Dark',
|
||||
Delete: 'Delete',
|
||||
Email: 'Email',
|
||||
Female: 'Female',
|
||||
Gender: 'Gender',
|
||||
'Hi,': 'Hi,',
|
||||
Image: 'Image',
|
||||
Light: 'Light',
|
||||
Male: 'Male',
|
||||
Name: 'Name',
|
||||
NickName: 'NickName',
|
||||
'Not Found': 'Not Found',
|
||||
Operation: 'Operation',
|
||||
Params: 'Params',
|
||||
Password: 'Password',
|
||||
Phone: 'Phone',
|
||||
'Pick an address': 'Pick an address',
|
||||
'Please pick an address': 'Please pick an address',
|
||||
Published: 'Published',
|
||||
'Publish Date': 'Publish Date',
|
||||
Reset: 'Reset',
|
||||
Search: 'Search',
|
||||
'Search Name': 'Search Name',
|
||||
Send: 'Send',
|
||||
'Sign in': 'Sign in',
|
||||
'Sign out': 'Sign out',
|
||||
'Switch Theme': 'Switch Theme',
|
||||
Tags: 'Tags',
|
||||
'The input is not valid E-mail!': 'The input is not valid E-mail!',
|
||||
'The input is not valid phone!': 'The input is not valid phone!',
|
||||
Title: 'Title',
|
||||
Total: 'Total {total} Items',
|
||||
Unpublished: 'Unpublished',
|
||||
Update: 'Update',
|
||||
'Update User': 'Update User',
|
||||
Username: 'Username',
|
||||
Views: 'Views',
|
||||
Visibility: 'Visibility',
|
||||
'You have viewed all notifications.': 'You have viewed all notifications.',
|
||||
};
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
export default {
|
||||
'/dashboard': '/dashboard',
|
||||
'Add Param': 'Add Parametro',
|
||||
Address: 'Endereço',
|
||||
Age: 'Ano',
|
||||
'Are you sure delete this record?': 'Tem certeza de excluir este registro?',
|
||||
Author: 'Autor',
|
||||
Avatar: 'Avatar',
|
||||
Categories: 'Categorias',
|
||||
'Clear notifications': 'limpar notificações',
|
||||
Comments: 'Comentarios',
|
||||
Create: 'Criar',
|
||||
'Create User': 'Criar Usuário',
|
||||
CreateTime: 'CreateTime',
|
||||
Dark: 'Escuro',
|
||||
Delete: 'Deletar',
|
||||
Email: 'Email',
|
||||
Female: 'Feminino',
|
||||
Gender: 'Genero',
|
||||
'Hi,': 'Olá,',
|
||||
Image: 'Imagem',
|
||||
Light: 'Claro',
|
||||
Male: 'masculino',
|
||||
Name: 'Nome',
|
||||
NickName: 'NickName',
|
||||
'Not Found': 'Não Encontrado',
|
||||
Operation: 'Operation',
|
||||
Params: 'Parametros',
|
||||
Password: 'Senha',
|
||||
Phone: 'Fone',
|
||||
'Pick an address': 'Escolha um endereço',
|
||||
'Please pick an address': 'Por favor, escolha um endereço',
|
||||
Published: 'Publicado',
|
||||
'Publish Date': 'Data de publicação',
|
||||
Reset: 'Reset',
|
||||
Search: 'procurar',
|
||||
'Search Name': 'Search Name',
|
||||
Send: 'Enviar',
|
||||
'Sign in': 'Sign in',
|
||||
'Sign out': 'Sign out',
|
||||
'Switch Theme': 'Trocar tema',
|
||||
Tags: 'Tags',
|
||||
'The input is not valid E-mail!': 'Não é um E-mail valido!',
|
||||
'The input is not valid phone!': 'Não é um telefone Valido!',
|
||||
Title: 'Titulo',
|
||||
Total: 'Total {total} Items',
|
||||
Unpublished: 'Não publicado',
|
||||
Update: 'Atualizar',
|
||||
'Update User': 'Atualizar Usuário',
|
||||
Username: 'Usuário',
|
||||
Views: 'visualizações',
|
||||
Visibility: 'Visibilidade',
|
||||
'You have viewed all notifications.': 'Você visualizou todas as notificações.',
|
||||
};
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
export default {
|
||||
'/dashboard': '/zh/dashboard',
|
||||
'Add Param': '添加参数',
|
||||
Address: '地址',
|
||||
Age: '年龄',
|
||||
'Are you sure delete this record?': '您确定要删除这条记录吗?',
|
||||
Author: '作者',
|
||||
Avatar: '头像',
|
||||
Categories: '类别',
|
||||
'Clear notifications': '清空消息',
|
||||
Comments: '评论数',
|
||||
Create: '创建',
|
||||
'Create User': '创建用户',
|
||||
CreateTime: '创建时间',
|
||||
Dark: '暗',
|
||||
Delete: '删除',
|
||||
Email: '电子邮件',
|
||||
Female: '女',
|
||||
Gender: '性别',
|
||||
'Hi,': '你好，',
|
||||
Image: '图像',
|
||||
Light: '明',
|
||||
Male: '男性',
|
||||
Name: '名字',
|
||||
NickName: '昵称',
|
||||
'Not Found': '未找到',
|
||||
Operation: '操作',
|
||||
Params: '参数',
|
||||
Password: '密码',
|
||||
Phone: '电话',
|
||||
'Pick an address': '选择地址',
|
||||
'Please pick an address': '选择地址',
|
||||
Published: '已发布',
|
||||
'Publish Date': '发布日期',
|
||||
Reset: '重置',
|
||||
Search: '搜索',
|
||||
'Search Name': '搜索名字',
|
||||
Send: '发送',
|
||||
'Sign in': '登录',
|
||||
'Sign out': '退出登录',
|
||||
'Switch Theme': '切换主题',
|
||||
Tags: '标签',
|
||||
'The input is not valid E-mail!': '输入的电子邮件无效!',
|
||||
'The input is not valid phone!': '输入无效的手机!',
|
||||
Title: '标题',
|
||||
Total: '总共 {total} 条记录',
|
||||
Unpublished: '未发布',
|
||||
Update: '更新',
|
||||
'Update User': '更新用户',
|
||||
Username: '用户名',
|
||||
Views: '浏览数',
|
||||
Visibility: '可见性',
|
||||
'You have viewed all notifications.': '您已查看所有通知',
|
||||
};
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import Inula from 'inulajs';
|
||||
import { BrowserRouter } from 'inula-router';
|
||||
import config from './utils/config';
|
||||
import 'antd/dist/antd.css';
|
||||
|
||||
import Layout from './layouts';
|
||||
|
||||
document.title = config.siteName;
|
||||
|
||||
Inula.render(
|
||||
<BrowserRouter>
|
||||
<Layout></Layout>
|
||||
</BrowserRouter>,
|
||||
document.getElementsByTagName('body')[0]
|
||||
);
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
import store from 'store';
|
||||
import { pathToRegexp } from 'path-to-regexp';
|
||||
import { ROLE_TYPE } from '../utils/constant';
|
||||
import api from '../services';
|
||||
// @ts-ignore
|
||||
const { queryRouteList, queryUserInfo } = api;
|
||||
|
||||
import { createStore } from 'inulajs';
|
||||
|
||||
const goDashboard = history => {
|
||||
if (pathToRegexp(['/', '/login']).exec(window.location.pathname)) {
|
||||
history.push({
|
||||
pathname: '/dashboard',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export const getStore = createStore({
|
||||
id: 'app',
|
||||
state: {
|
||||
routeList: [],
|
||||
permissions: { visit: [] },
|
||||
locationPathname: '',
|
||||
locationQuery: {},
|
||||
theme: store.get('theme') || 'light',
|
||||
collapsed: store.get('collapsed') || false,
|
||||
notifications: [
|
||||
{
|
||||
title: 'New User is registered.',
|
||||
date: new Date(Date.now() - 10000000),
|
||||
},
|
||||
{
|
||||
title: 'Application has been approved.',
|
||||
date: new Date(Date.now() - 50000000),
|
||||
},
|
||||
],
|
||||
},
|
||||
actions: {
|
||||
handleThemeChange(state, val) {
|
||||
store.set('theme', val);
|
||||
state.theme = val;
|
||||
},
|
||||
|
||||
handleCollapseChange(state, val) {
|
||||
store.set('collapsed', val);
|
||||
state.collapsed = val;
|
||||
},
|
||||
|
||||
allNotificationsRead(state) {
|
||||
state.notifications = [];
|
||||
},
|
||||
|
||||
async query(state, history) {
|
||||
const locationPathname = state.locationPathname;
|
||||
const { success, user } = await queryUserInfo();
|
||||
if (success && user) {
|
||||
const { list } = await queryRouteList();
|
||||
const { permissions } = user;
|
||||
let routeList = list;
|
||||
if (permissions.role === ROLE_TYPE.ADMIN || permissions.role === ROLE_TYPE.DEVELOPER) {
|
||||
permissions.visit = list.map(item => item.id);
|
||||
} else {
|
||||
routeList = list.filter(item => {
|
||||
const cases = [
|
||||
permissions.visit.includes(item.id),
|
||||
item.mpid ? permissions.visit.includes(item.mpid) || item.mpid === '-1' : true,
|
||||
item.bpid ? permissions.visit.includes(item.bpid) : true,
|
||||
];
|
||||
return cases.every(_ => _);
|
||||
});
|
||||
}
|
||||
state.routeList = routeList;
|
||||
state.permissions = permissions;
|
||||
store.set('user', user);
|
||||
goDashboard(history);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import Inula from 'inulajs';
|
||||
import { FrownOutlined } from '@ant-design/icons';
|
||||
import { Page } from 'components';
|
||||
import styles from './404.module.less';
|
||||
|
||||
const Error = () => (
|
||||
<Page inner>
|
||||
<div className={styles.error}>
|
||||
<FrownOutlined />
|
||||
<h1>404 Not Found</h1>
|
||||
</div>
|
||||
</Page>
|
||||
);
|
||||
|
||||
export default Error;
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
.error {
|
||||
color: black;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
margin-top: -50px;
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
width: 200px;
|
||||
|
||||
:global .anticon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: cursive;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import NumberCard from './numberCard';
|
||||
import Quote from './quote';
|
||||
import Sales from './sales';
|
||||
import Weather from './weather';
|
||||
|
||||
export { NumberCard, Quote, Sales, Weather };
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import Inula from 'inulajs';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Card } from 'antd';
|
||||
import iconMap from 'utils/iconMap';
|
||||
import styles from './numberCard.module.less';
|
||||
|
||||
function NumberCard({ icon, color, title, number }) {
|
||||
return (
|
||||
<Card className={styles.numberCard} bordered={false} bodyStyle={{ padding: 10 }}>
|
||||
<span className={styles.iconWarp} style={{ color }}>
|
||||
{iconMap[icon]}
|
||||
</span>
|
||||
<div className={styles.content}>
|
||||
<p className={styles.title}>{title || 'No Title'}</p>
|
||||
<p className={styles.number}>
|
||||
{number}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
NumberCard.propTypes = {
|
||||
icon: PropTypes.string,
|
||||
color: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
number: PropTypes.number,
|
||||
countUp: PropTypes.object,
|
||||
};
|
||||
|
||||
export default NumberCard;
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
@import '../../../themes/vars';
|
||||
|
||||
.numberCard {
|
||||
padding: 32px;
|
||||
margin-bottom: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
.iconWarp {
|
||||
font-size: 54px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
padding-left: 78px;
|
||||
|
||||
.title {
|
||||
line-height: 16px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
height: 16px;
|
||||
.text-overflow();
|
||||
}
|
||||
|
||||
.number {
|
||||
line-height: 32px;
|
||||
font-size: 24px;
|
||||
height: 32px;
|
||||
.text-overflow();
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import Inula from 'inulajs';
|
||||
import PropTypes from 'prop-types';
|
||||
import styles from './quote.module.less';
|
||||
|
||||
function Quote({ name, content, title, avatar }) {
|
||||
return (
|
||||
<div className={styles.quote}>
|
||||
<div className={styles.inner}>{content}</div>
|
||||
<div className={styles.footer}>
|
||||
<div className={styles.description}>
|
||||
<p>-{name}-</p>
|
||||
<p>{title}</p>
|
||||
</div>
|
||||
<div className={styles.avatar} style={{ backgroundImage: `url(${avatar})` }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Quote.propTypes = {
|
||||
name: PropTypes.string,
|
||||
content: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
avatar: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Quote;
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
@import '../../../themes/vars';
|
||||
|
||||
.quote {
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
|
||||
.inner {
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: normal;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
overflow: hidden;
|
||||
text-indent: 24px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
margin-top: 14px;
|
||||
|
||||
.description {
|
||||
width: 100%;
|
||||
|
||||
p {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 64px;
|
||||
text-align: right;
|
||||
|
||||
&:last-child {
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
import Inula from 'inulajs';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import Color from '../../../utils/theme';
|
||||
// import { Color } from '../../../utils/theme';
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
||||
import styles from './sales.module.less';
|
||||
|
||||
function Sales({ data }) {
|
||||
return (
|
||||
<div className={styles.sales}>
|
||||
<div className={styles.title}>Yearly Sales</div>
|
||||
<ResponsiveContainer minHeight={360}>
|
||||
<LineChart data={data}>
|
||||
<Legend
|
||||
verticalAlign="top"
|
||||
content={prop => {
|
||||
const { payload } = prop;
|
||||
return (
|
||||
<ul
|
||||
className={classnames({
|
||||
[styles.legend]: true,
|
||||
clearfix: true,
|
||||
})}
|
||||
>
|
||||
{payload.map((item, key) => (
|
||||
<li key={key}>
|
||||
<span className={styles.radiusdot} style={{ background: item.color }} />
|
||||
{item.value}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<XAxis dataKey="name" axisLine={{ stroke: Color.borderBase, strokeWidth: 1 }} tickLine={false} />
|
||||
<YAxis axisLine={false} tickLine={false} />
|
||||
<CartesianGrid vertical={false} stroke={Color.borderBase} strokeDasharray="3 3" />
|
||||
<Tooltip
|
||||
wrapperStyle={{
|
||||
border: 'none',
|
||||
boxShadow: '4px 4px 40px rgba(0, 0, 0, 0.05)',
|
||||
}}
|
||||
content={content => {
|
||||
const list = content.payload.map((item, key) => (
|
||||
<li key={key} className={styles.tipitem}>
|
||||
<span className={styles.radiusdot} style={{ background: item.color }} />
|
||||
{`${item.name}:${item.value}`}
|
||||
</li>
|
||||
));
|
||||
return (
|
||||
<div className={styles.tooltip}>
|
||||
<p className={styles.tiptitle}>{content.label}</p>
|
||||
{content.payload && <ul>{list}</ul>}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="Food"
|
||||
stroke={Color.purple}
|
||||
strokeWidth={3}
|
||||
dot={{ fill: Color.purple }}
|
||||
activeDot={{ r: 5, strokeWidth: 0 }}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="Clothes"
|
||||
stroke={Color.red}
|
||||
strokeWidth={3}
|
||||
dot={{ fill: Color.red }}
|
||||
activeDot={{ r: 5, strokeWidth: 0 }}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="Electronics"
|
||||
stroke={Color.green}
|
||||
strokeWidth={3}
|
||||
dot={{ fill: Color.green }}
|
||||
activeDot={{ r: 5, strokeWidth: 0 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Sales.propTypes = {
|
||||
data: PropTypes.array,
|
||||
};
|
||||
|
||||
export default Sales;
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
@import '../../../themes/vars';
|
||||
|
||||
.sales {
|
||||
overflow: hidden;
|
||||
.title {
|
||||
margin-left: 32px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.radiusdot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.legend {
|
||||
text-align: right;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
|
||||
li {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
display: inline-block;
|
||||
|
||||
& + li {
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
font-size: 14px;
|
||||
|
||||
.tiptitle {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.tipitem {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
import Inula from 'inulajs';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Spin } from 'antd';
|
||||
import styles from './weather.module.less';
|
||||
|
||||
function Weather({ city, icon, dateTime, temperature, name, loading }) {
|
||||
return (
|
||||
<Spin spinning={loading}>
|
||||
<div className={styles.weather}>
|
||||
<div className={styles.left}>
|
||||
<div
|
||||
className={styles.icon}
|
||||
style={{
|
||||
backgroundImage: `url(${icon})`,
|
||||
}}
|
||||
/>
|
||||
<p>{name}</p>
|
||||
</div>
|
||||
<div className={styles.right}>
|
||||
<h1 className={styles.temperature}>{`${temperature}°`}</h1>
|
||||
<p className={styles.description}>
|
||||
{city},{dateTime}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Spin>
|
||||
);
|
||||
}
|
||||
|
||||
Weather.propTypes = {
|
||||
city: PropTypes.string,
|
||||
icon: PropTypes.string,
|
||||
dateTime: PropTypes.string,
|
||||
temperature: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
loading: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Weather;
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
@import '../../../themes/vars';
|
||||
|
||||
.weather {
|
||||
color: #fff;
|
||||
height: 204px;
|
||||
padding: 24px;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 64px;
|
||||
padding-top: 55px;
|
||||
|
||||
.icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
|
||||
.temperature {
|
||||
font-size: 36px;
|
||||
text-align: right;
|
||||
height: 64px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.description {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
.dashboard {
|
||||
position: relative;
|
||||
:global {
|
||||
.ant-card {
|
||||
border-radius: 0;
|
||||
margin-bottom: 24px;
|
||||
&:hover {
|
||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
.ant-card-body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.weather {
|
||||
&:hover {
|
||||
box-shadow: 4px 4px 40px rgba(143, 201, 251, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.quote {
|
||||
&:hover {
|
||||
box-shadow: 4px 4px 40px rgba(246, 152, 153, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
import Inula, { useEffect } from 'inulajs';
|
||||
import { Row, Col, Card } from 'antd';
|
||||
import Color from '../../utils/theme';
|
||||
import { Page, ScrollBar } from '../../components';
|
||||
import { NumberCard, Quote, Sales, Weather } from './components';
|
||||
import styles from './index.module.less';
|
||||
import { getStore } from './model';
|
||||
|
||||
const bodyStyle = {
|
||||
bodyStyle: {
|
||||
height: 432,
|
||||
background: '#fff',
|
||||
},
|
||||
};
|
||||
|
||||
function Dashboard() {
|
||||
const st = getStore();
|
||||
|
||||
useEffect(() => {
|
||||
st.query();
|
||||
}, []);
|
||||
|
||||
const weather = st.weather;
|
||||
const sales = st.sales;
|
||||
const quote = st.quote;
|
||||
const numbers = st.numbers;
|
||||
|
||||
const numberCards = numbers.map((item, key) => (
|
||||
<Col key={key} lg={6} md={12}>
|
||||
<NumberCard {...item} />
|
||||
</Col>
|
||||
));
|
||||
|
||||
return (
|
||||
<Page loading={st.loading} className={styles.dashboard}>
|
||||
<Row gutter={24}>
|
||||
{numberCards}
|
||||
<Col lg={18} md={24}>
|
||||
<Card
|
||||
bordered={false}
|
||||
bodyStyle={{
|
||||
padding: '24px 36px 24px 0',
|
||||
}}
|
||||
>
|
||||
<Sales data={sales} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={6} md={24}>
|
||||
<Row gutter={24}>
|
||||
<Col lg={24} md={12}>
|
||||
<Card
|
||||
bordered={false}
|
||||
className={styles.weather}
|
||||
bodyStyle={{
|
||||
padding: 0,
|
||||
height: 204,
|
||||
background: Color.blue,
|
||||
}}
|
||||
>
|
||||
<Weather {...weather} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={24} md={12}>
|
||||
<Card
|
||||
bordered={false}
|
||||
className={styles.quote}
|
||||
bodyStyle={{
|
||||
padding: 0,
|
||||
height: 204,
|
||||
background: Color.peach,
|
||||
}}
|
||||
>
|
||||
<ScrollBar>
|
||||
<Quote {...quote} />
|
||||
</ScrollBar>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
export default Dashboard;
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
import { parse } from 'qs';
|
||||
import api from '../../services';
|
||||
import { createStore } from 'inulajs';
|
||||
|
||||
const { queryDashboard, queryWeather } = api;
|
||||
const avatar = '//cdn.antd-admin.zuiidea.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236.jpeg';
|
||||
|
||||
export const getStore = createStore({
|
||||
id: 'dashboard',
|
||||
state: {
|
||||
weather: {
|
||||
city: '深圳',
|
||||
temperature: '30',
|
||||
name: '晴',
|
||||
icon: '//cdn.antd-admin.zuiidea.com/sun.png',
|
||||
},
|
||||
message: null,
|
||||
sales: [],
|
||||
quote: {
|
||||
avatar,
|
||||
},
|
||||
numbers: [],
|
||||
recentSales: [],
|
||||
comments: [],
|
||||
completed: [],
|
||||
browser: [],
|
||||
cpu: {},
|
||||
user: {
|
||||
avatar,
|
||||
},
|
||||
loading: false,
|
||||
},
|
||||
actions: {
|
||||
async query(state, payload) {
|
||||
state.loading = true;
|
||||
const data = await queryDashboard(parse(payload));
|
||||
state.loading = false;
|
||||
|
||||
state.browser = data.browser;
|
||||
state.comments = data.comments;
|
||||
state.completed = data.completed;
|
||||
state.cpu = data.cpu;
|
||||
state.message = data.message;
|
||||
state.numbers = data.numbers;
|
||||
state.quote = data.quote;
|
||||
state.recentSales = data.recentSales;
|
||||
state.sales = data.sales;
|
||||
state.user = data.user;
|
||||
},
|
||||
async queryWeather(state, payload = {}) {
|
||||
payload.location = 'shenzhen';
|
||||
const result = await queryWeather(payload);
|
||||
const { success } = result;
|
||||
if (success) {
|
||||
const data = result.results[0];
|
||||
const weather = {
|
||||
city: data.location.name,
|
||||
temperature: data.now.temperature,
|
||||
name: data.now.text,
|
||||
icon: `//cdn.antd-admin.zuiidea.com/web/icons/3d_50/${data.now.code}.png`,
|
||||
};
|
||||
|
||||
state.weather = weather;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { request, config } from 'utils';
|
||||
|
||||
const { api } = config;
|
||||
const { dashboard } = api;
|
||||
|
||||
export function query(params) {
|
||||
return request({
|
||||
url: dashboard,
|
||||
method: 'get',
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { request, config } from 'utils';
|
||||
|
||||
const { APIV1 } = config;
|
||||
|
||||
export function query(params) {
|
||||
params.key = 'i7sau1babuzwhycn';
|
||||
return request({
|
||||
url: `${APIV1}/weather/now.json`,
|
||||
method: 'get',
|
||||
data: params,
|
||||
});
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import Inula from 'inulajs';
|
||||
import { Redirect } from 'inula-router';
|
||||
|
||||
function Index() {
|
||||
return <Redirect to={'/dashboard'} />;
|
||||
}
|
||||
|
||||
export default Index;
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import Inula, { lazy } from 'inulajs';
|
||||
|
||||
export function getRoutes() {
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: lazy(() => import(/* webpackChunkName: 'layouts__index' */ '@/layouts/index.js')),
|
||||
childRoutes: [
|
||||
{
|
||||
path: '/404',
|
||||
component: lazy(() => import(/* webpackChunkName: 'p__404' */ '@/pages/404.jsx')),
|
||||
},
|
||||
{
|
||||
path: '/dashboard',
|
||||
component: lazy(() => import(/* webpackChunkName: 'p__dashboard__index' */ './dashboard/index.tsx')),
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
component: lazy(() => import(/* webpackChunkName: 'p__user__index' */ '@/pages/user/index.tsx')),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return routes;
|
||||
}
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
import Inula, { useRef } from 'inulajs';
|
||||
import moment from 'moment';
|
||||
import { FilterItem } from 'components';
|
||||
import { Button, Row, Col, DatePicker, Form, Input, Cascader } from 'antd';
|
||||
import city from 'utils/city';
|
||||
import { Trans, t } from 'utils/intl';
|
||||
import styles from './Filter.module.less';
|
||||
|
||||
const { Search } = Input;
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const ColProps = {
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
style: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
};
|
||||
|
||||
const TwoColProps = {
|
||||
...ColProps,
|
||||
xl: 96,
|
||||
};
|
||||
|
||||
function Filter({ onFilterChange, onAdd, filter }) {
|
||||
const formRef = useRef();
|
||||
|
||||
const handleFields = fields => {
|
||||
const { createTime } = fields;
|
||||
if (createTime && createTime.length) {
|
||||
fields.createTime = [moment(createTime[0]).format('YYYY-MM-DD'), moment(createTime[1]).format('YYYY-MM-DD')];
|
||||
}
|
||||
return fields;
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
const values = formRef.current.getFieldsValue();
|
||||
const fields = handleFields(values);
|
||||
onFilterChange(fields);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
const fields = formRef.current.getFieldsValue();
|
||||
for (let item in fields) {
|
||||
if ({}.hasOwnProperty.call(fields, item)) {
|
||||
if (fields[item] instanceof Array) {
|
||||
fields[item] = [];
|
||||
} else {
|
||||
fields[item] = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
formRef.current.setFieldsValue(fields);
|
||||
handleSubmit();
|
||||
};
|
||||
|
||||
const handleChange = (key, values) => {
|
||||
let fields = formRef.current.getFieldsValue();
|
||||
fields[key] = values;
|
||||
fields = handleFields(fields);
|
||||
onFilterChange(fields);
|
||||
};
|
||||
|
||||
const { name, address } = filter;
|
||||
|
||||
let initialCreateTime = [];
|
||||
if (filter.createTime && filter.createTime[0]) {
|
||||
initialCreateTime[0] = moment(filter.createTime[0]);
|
||||
}
|
||||
if (filter.createTime && filter.createTime[1]) {
|
||||
initialCreateTime[1] = moment(filter.createTime[1]);
|
||||
}
|
||||
|
||||
return (
|
||||
<Form ref={formRef} name="control-ref" initialValues={{ name, address, createTime: initialCreateTime }}>
|
||||
<Row gutter={24}>
|
||||
<Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
|
||||
<Form.Item name="name">
|
||||
<Search placeholder={t`Search Name`} onSearch={handleSubmit} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }} id="addressCascader">
|
||||
<Form.Item name="address">
|
||||
<Cascader style={{ width: '100%' }} options={city} placeholder={t`Please pick an address`} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...ColProps} xl={{ span: 6 }} md={{ span: 8 }} sm={{ span: 12 }} id="createTimeRangePicker">
|
||||
<FilterItem label={t`CreateTime`}>
|
||||
<Form.Item name="createTime">
|
||||
<RangePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
</FilterItem>
|
||||
</Col>
|
||||
<Col {...TwoColProps} xl={{ span: 10 }} md={{ span: 24 }} sm={{ span: 24 }}>
|
||||
<Row type="flex" align="middle" justify="space-between">
|
||||
<div>
|
||||
<Button type="primary" htmlType="submit" className={styles['margin-right']} onClick={handleSubmit}>
|
||||
<Trans>Search</Trans>
|
||||
</Button>
|
||||
<Button onClick={handleReset}>
|
||||
<Trans>Reset</Trans>
|
||||
</Button>
|
||||
</div>
|
||||
<Button type="ghost" onClick={onAdd}>
|
||||
<Trans>Create</Trans>
|
||||
</Button>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default Filter;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.margin-right {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
import Inula from 'inulajs';
|
||||
import { Table, Modal } from 'antd';
|
||||
import { DropOption } from 'components';
|
||||
import { t } from 'utils/intl';
|
||||
import { Trans } from 'utils/intl';
|
||||
import styles from './List.module.less';
|
||||
|
||||
const { confirm } = Modal;
|
||||
|
||||
function List({ onDeleteItem, onEditItem, ...tableProps }) {
|
||||
const handleMenuClick = (record, e) => {
|
||||
if (e.key === '1') {
|
||||
onEditItem(record);
|
||||
} else if (e.key === '2') {
|
||||
confirm({
|
||||
title: t`Are you sure delete this record?`,
|
||||
onOk() {
|
||||
onDeleteItem(record.id);
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: <Trans>Name</Trans>,
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: <Trans>NickName</Trans>,
|
||||
dataIndex: 'nickName',
|
||||
key: 'nickName',
|
||||
},
|
||||
{
|
||||
title: <Trans>Age</Trans>,
|
||||
dataIndex: 'age',
|
||||
width: '6%',
|
||||
key: 'age',
|
||||
},
|
||||
{
|
||||
title: <Trans>Gender</Trans>,
|
||||
dataIndex: 'isMale',
|
||||
key: 'isMale',
|
||||
width: '7%',
|
||||
render: text => <span>{text ? 'Male' : 'Female'}</span>,
|
||||
},
|
||||
{
|
||||
title: <Trans>Phone</Trans>,
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
},
|
||||
{
|
||||
title: <Trans>Email</Trans>,
|
||||
dataIndex: 'email',
|
||||
key: 'email',
|
||||
},
|
||||
{
|
||||
title: <Trans>Address</Trans>,
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
},
|
||||
{
|
||||
title: <Trans>CreateTime</Trans>,
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
},
|
||||
{
|
||||
title: <Trans>Operation</Trans>,
|
||||
key: 'operation',
|
||||
fixed: 'right',
|
||||
width: '8%',
|
||||
render: (text, record) => {
|
||||
return (
|
||||
<DropOption
|
||||
onMenuClick={e => handleMenuClick(record, e)}
|
||||
menuOptions={[
|
||||
{ key: '1', name: t`Update` },
|
||||
{ key: '2', name: t`Delete` },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Table
|
||||
{...tableProps}
|
||||
pagination={{
|
||||
...tableProps.pagination,
|
||||
showTotal: total => t(`Total`, { total }),
|
||||
}}
|
||||
className={styles.table}
|
||||
bordered
|
||||
scroll={{ x: 1200 }}
|
||||
columns={columns}
|
||||
simple
|
||||
rowKey={record => record.id}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default List;
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.table {
|
||||
:global {
|
||||
.ant-table td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
import Inula, { useRef } from 'inulajs';
|
||||
import { Form, Input, InputNumber, Radio, Modal, Cascader } from 'antd';
|
||||
import { t, Trans } from 'utils/intl';
|
||||
import city from 'utils/city';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
span: 6,
|
||||
},
|
||||
wrapperCol: {
|
||||
span: 14,
|
||||
},
|
||||
};
|
||||
|
||||
function UserModal({ item = {}, onOk, form, ...modalProps }) {
|
||||
const formRef = useRef();
|
||||
|
||||
const handleOk = () => {
|
||||
formRef.current
|
||||
.validateFields()
|
||||
.then(values => {
|
||||
const data = {
|
||||
...values,
|
||||
key: item.key,
|
||||
};
|
||||
data.address = data.address.join(' ');
|
||||
onOk(data);
|
||||
})
|
||||
.catch(errorInfo => {
|
||||
console.log(errorInfo);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal {...modalProps} onOk={handleOk}>
|
||||
<Form
|
||||
ref={formRef}
|
||||
name="control-ref"
|
||||
initialValues={{
|
||||
...item,
|
||||
address: item.address && item.address.split(' '),
|
||||
}}
|
||||
layout="horizontal"
|
||||
>
|
||||
<FormItem name="name" rules={[{ required: true }]} label={t`Name`} hasFeedback {...formItemLayout}>
|
||||
<Input />
|
||||
</FormItem>
|
||||
<FormItem name="nickName" rules={[{ required: true }]} label={t`NickName`} hasFeedback {...formItemLayout}>
|
||||
<Input />
|
||||
</FormItem>
|
||||
<FormItem name="isMale" rules={[{ required: true }]} label={t`Gender`} hasFeedback {...formItemLayout}>
|
||||
<Radio.Group>
|
||||
<Radio value>
|
||||
<Trans>Male</Trans>
|
||||
</Radio>
|
||||
<Radio value={false}>
|
||||
<Trans>Female</Trans>
|
||||
</Radio>
|
||||
</Radio.Group>
|
||||
</FormItem>
|
||||
<FormItem name="age" label={t`Age`} hasFeedback {...formItemLayout}>
|
||||
<InputNumber min={18} max={100} />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="phone"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
pattern: /^1[34578]\d{9}$/,
|
||||
message: t`The input is not valid phone!`,
|
||||
},
|
||||
]}
|
||||
label={t`Phone`}
|
||||
hasFeedback
|
||||
{...formItemLayout}
|
||||
>
|
||||
<Input />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name="email"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
|
||||
message: t`The input is not valid E-mail!`,
|
||||
},
|
||||
]}
|
||||
label={t`Email`}
|
||||
hasFeedback
|
||||
{...formItemLayout}
|
||||
>
|
||||
<Input />
|
||||
</FormItem>
|
||||
<FormItem name="address" rules={[{ required: true }]} label={t`Address`} hasFeedback {...formItemLayout}>
|
||||
<Cascader style={{ width: '100%' }} options={city} placeholder={t`Pick an address`} />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default UserModal;
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import Inula, { PureComponent } from 'inulajs';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Page } from 'components';
|
||||
import styles from './index.module.less';
|
||||
|
||||
class UserDetail extends PureComponent {
|
||||
render() {
|
||||
const { userDetail } = this.props;
|
||||
const { data } = userDetail;
|
||||
const content = [];
|
||||
for (let key in data) {
|
||||
if ({}.hasOwnProperty.call(data, key)) {
|
||||
content.push(
|
||||
<div key={key} className={styles.item}>
|
||||
<div>{key}</div>
|
||||
<div>{String(data[key])}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Page inner>
|
||||
<div className={styles.content}>{content}</div>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
UserDetail.propTypes = {
|
||||
userDetail: PropTypes.object,
|
||||
};
|
||||
|
||||
export default UserDetail;
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
.content {
|
||||
line-height: 2.4;
|
||||
font-size: 13px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
|
||||
& > div {
|
||||
&:first-child {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
const { pathToRegexp } = require('path-to-regexp');
|
||||
import api from 'api';
|
||||
|
||||
const { queryUser } = api;
|
||||
|
||||
export default {
|
||||
namespace: 'userDetail',
|
||||
|
||||
state: {
|
||||
data: {},
|
||||
},
|
||||
|
||||
subscriptions: {
|
||||
setup({ dispatch, history }) {
|
||||
history.listen(({ pathname }) => {
|
||||
const match = pathToRegexp('/user/:id').exec(pathname);
|
||||
if (match) {
|
||||
dispatch({ type: 'query', payload: { id: match[1] } });
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
effects: {
|
||||
*query({ payload }, { call, put }) {
|
||||
const data = yield call(queryUser, payload);
|
||||
const { success, message, status, ...other } = data;
|
||||
if (success) {
|
||||
yield put({
|
||||
type: 'querySuccess',
|
||||
payload: {
|
||||
data: other,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
throw data;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
reducers: {
|
||||
querySuccess(state, { payload }) {
|
||||
const { data } = payload;
|
||||
return {
|
||||
...state,
|
||||
data,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -1,152 +0,0 @@
|
|||
import Inula, { useEffect } from 'inulajs';
|
||||
import { Row, Col, Button, Popconfirm } from 'antd';
|
||||
import { Page } from '../../components';
|
||||
import { stringify } from 'qs';
|
||||
import List from './components/List';
|
||||
import Filter from './components/Filter';
|
||||
import Modal from './components/Modal';
|
||||
import { getStore } from './model';
|
||||
import { pathToRegexp } from 'path-to-regexp';
|
||||
import { t } from '../../utils/intl';
|
||||
import { parseSearch } from '../../utils';
|
||||
|
||||
function User({ location, history }) {
|
||||
const st = getStore();
|
||||
|
||||
useEffect(() => {
|
||||
if (pathToRegexp('/user').exec(location.pathname)) {
|
||||
const payload = {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
...parseSearch(location.search),
|
||||
};
|
||||
st.query(payload);
|
||||
}
|
||||
}, [st.pagination.total]);
|
||||
|
||||
const handleRefresh = newQuery => {
|
||||
const { search, pathname } = location;
|
||||
|
||||
const params = {
|
||||
...parseSearch(search),
|
||||
...newQuery,
|
||||
};
|
||||
|
||||
history.push({
|
||||
pathname,
|
||||
search: stringify(params, { arrayFormat: 'repeat' }),
|
||||
});
|
||||
|
||||
st.query(params);
|
||||
};
|
||||
|
||||
const handleDeleteItems = () => {
|
||||
st.multiDelete({
|
||||
ids: st.selectedRowKeys,
|
||||
});
|
||||
|
||||
handleRefresh({
|
||||
page:
|
||||
st.list.length === st.selectedRowKeys.length && st.pagination.current > 1
|
||||
? st.pagination.current - 1
|
||||
: st.pagination.current,
|
||||
});
|
||||
};
|
||||
|
||||
const modalProps = () => {
|
||||
return {
|
||||
item: st.modalType === 'create' ? {} : st.currentItem,
|
||||
visible: st.modalVisible,
|
||||
destroyOnClose: true,
|
||||
maskClosable: false,
|
||||
confirmLoading: false,
|
||||
title: `${st.modalType === 'create' ? t`Create User` : t`Update User`}`,
|
||||
centered: true,
|
||||
onOk: data => {
|
||||
st[st.modalType](data);
|
||||
handleRefresh();
|
||||
},
|
||||
onCancel() {
|
||||
st.hideModal();
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const listProps = () => {
|
||||
return {
|
||||
dataSource: st.list,
|
||||
loading: false,
|
||||
pagination: st.pagination,
|
||||
onChange: page => {
|
||||
const { search } = location;
|
||||
const params = {
|
||||
...parseSearch(search),
|
||||
page: page.current,
|
||||
pageSize: page.pageSize,
|
||||
};
|
||||
|
||||
handleRefresh(params);
|
||||
},
|
||||
onDeleteItem: id => {
|
||||
st.delete(id);
|
||||
handleRefresh({
|
||||
page: st.list.length === 1 && st.pagination.current > 1 ? st.pagination.current - 1 : st.pagination.current,
|
||||
});
|
||||
},
|
||||
onEditItem: item => {
|
||||
st.showModal({
|
||||
modalType: 'update',
|
||||
currentItem: item,
|
||||
});
|
||||
},
|
||||
rowSelection: {
|
||||
selectedRowKeys: st.selectedRowKeys,
|
||||
onChange: keys => {
|
||||
st.selectedRowKeys = keys;
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const filterProps = () => {
|
||||
const { search } = location;
|
||||
|
||||
return {
|
||||
filter: {
|
||||
...parseSearch(search),
|
||||
},
|
||||
onFilterChange: value => {
|
||||
handleRefresh({
|
||||
...value,
|
||||
});
|
||||
},
|
||||
onAdd: () => {
|
||||
st.showModal({
|
||||
modalType: 'create',
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<Page inner loading={st.loading}>
|
||||
<Filter {...filterProps()} />
|
||||
{st.selectedRowKeys.length > 0 && (
|
||||
<Row style={{ marginBottom: 24, textAlign: 'right', fontSize: 13 }}>
|
||||
<Col>
|
||||
{`Selected ${st.selectedRowKeys.length} items `}
|
||||
<Popconfirm title="Are you sure delete these items?" placement="left" onConfirm={handleDeleteItems}>
|
||||
<Button type="primary" style={{ marginLeft: 8 }}>
|
||||
Remove
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
<List {...listProps()} />
|
||||
<Modal {...modalProps()} />
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
export default User;
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
import api from '../../services';
|
||||
import { createStore } from 'inulajs';
|
||||
|
||||
const { queryUserList, createUser, removeUser, updateUser, removeUserList } = api;
|
||||
|
||||
export const getStore = createStore({
|
||||
id: 'user',
|
||||
|
||||
state: {
|
||||
currentItem: {
|
||||
id: 0,
|
||||
},
|
||||
modalVisible: false,
|
||||
modalType: 'create',
|
||||
selectedRowKeys: [],
|
||||
|
||||
list: [],
|
||||
pagination: {
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
current: 1,
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
},
|
||||
loading: false,
|
||||
},
|
||||
|
||||
actions: {
|
||||
async query(state, payload) {
|
||||
state.loading = true;
|
||||
const data = await queryUserList(payload);
|
||||
state.loading = false;
|
||||
if (data) {
|
||||
state.list = data.data;
|
||||
state.pagination.current = Number(payload.page) || 1;
|
||||
state.pagination.pageSize = Number(payload.pageSize) || 10;
|
||||
state.pagination.total = data.total;
|
||||
}
|
||||
},
|
||||
|
||||
async delete(state, payload) {
|
||||
const data = await removeUser({ id: payload });
|
||||
if (data.success) {
|
||||
state.selectedRowKeys = state.selectedRowKeys.filter(_ => _ !== payload);
|
||||
} else {
|
||||
throw data;
|
||||
}
|
||||
},
|
||||
|
||||
async multiDelete(state, payload) {
|
||||
const data = await removeUserList(payload);
|
||||
if (data.success) {
|
||||
state.selectedRowKeys = [];
|
||||
} else {
|
||||
throw data;
|
||||
}
|
||||
},
|
||||
|
||||
async create(state, payload) {
|
||||
const data = await createUser(payload);
|
||||
if (data.success) {
|
||||
this.hideModal();
|
||||
} else {
|
||||
throw data;
|
||||
}
|
||||
},
|
||||
|
||||
async update(state, payload) {
|
||||
const newUser = { ...payload, id: state.currentItem.id };
|
||||
const data = await updateUser(newUser);
|
||||
if (data.success) {
|
||||
this.hideModal();
|
||||
} else {
|
||||
throw data;
|
||||
}
|
||||
},
|
||||
|
||||
showModal(state, payload) {
|
||||
state.modalVisible = true;
|
||||
if (state.modalType !== undefined) {
|
||||
state.modalType = payload.modalType;
|
||||
}
|
||||
if (payload.currentItem !== undefined) {
|
||||
state.currentItem = payload.currentItem;
|
||||
}
|
||||
},
|
||||
|
||||
hideModal(state) {
|
||||
state.modalVisible = false;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { message } from 'antd';
|
||||
|
||||
export default {
|
||||
onError(e, a) {
|
||||
e.preventDefault();
|
||||
if (e.message) {
|
||||
message.error(e.message);
|
||||
} else {
|
||||
/* eslint-disable */
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
export default {
|
||||
queryRouteList: '/routes',
|
||||
|
||||
queryUserInfo: '/user',
|
||||
|
||||
queryUser: '/user/:id',
|
||||
queryUserList: '/users',
|
||||
updateUser: 'Patch /user/:id',
|
||||
createUser: 'POST /user',
|
||||
removeUser: 'DELETE /user/:id',
|
||||
removeUserList: 'POST /users/delete',
|
||||
|
||||
queryPostList: '/posts',
|
||||
|
||||
queryDashboard: '/dashboard',
|
||||
};
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import request from 'utils/request';
|
||||
import config from 'utils/config';
|
||||
|
||||
import api from './api';
|
||||
|
||||
const gen = params => {
|
||||
let url = config.apiPrefix + params;
|
||||
let method = 'GET';
|
||||
|
||||
const paramsArray = params.split(' ');
|
||||
if (paramsArray.length === 2) {
|
||||
method = paramsArray[0];
|
||||
url = config.apiPrefix + paramsArray[1];
|
||||
}
|
||||
|
||||
return function (data) {
|
||||
return request({
|
||||
url,
|
||||
data,
|
||||
method,
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const APIFunction = {};
|
||||
for (const key in api) {
|
||||
APIFunction[key] = gen(api[key]);
|
||||
}
|
||||
|
||||
APIFunction.queryWeather = params => {
|
||||
params.key = 'i7sau1babuzwhycn';
|
||||
return request({
|
||||
url: `${config.apiPrefix}/weather/now.json`,
|
||||
data: params,
|
||||
});
|
||||
};
|
||||
|
||||
export default APIFunction;
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
// 本文件是对 ant-design:
|
||||
// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
|
||||
// 相应变量值的覆盖
|
||||
// 注意：只需写出要覆盖的变量即可（不需要覆盖的变量不要写）
|
||||
|
||||
@import '../../../node_modules/antd/lib/style/themes/default.less';
|
||||
|
||||
@border-radius-base: 3px;
|
||||
@border-radius-sm: 2px;
|
||||
@shadow-color: rgba(0, 0, 0, 0.05);
|
||||
@shadow-1-down: 4px 4px 40px @shadow-color;
|
||||
@border-color-split: #f4f4f4;
|
||||
@border-color-base: #e5e5e5;
|
||||
@font-size-base: 13px;
|
||||
@text-color: #666;
|
||||
@hover-color: #f9f9fc;
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
@import './vars.less';
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.margin-right {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-breadcrumb {
|
||||
& > span {
|
||||
&:last-child {
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-breadcrumb-link {
|
||||
.anticon + span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table {
|
||||
.ant-table-thead > tr > th {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.ant-table-small {
|
||||
.ant-table-thead > tr > th {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.ant-table-body > table {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-pagination {
|
||||
float: none !important;
|
||||
display: table;
|
||||
margin: 16px auto !important;
|
||||
}
|
||||
|
||||
.ant-popover-inner {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 20px rgba(100, 100, 100, 0.2);
|
||||
}
|
||||
|
||||
.ant-form-item-control {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ant-modal-mask {
|
||||
background-color: rgba(55, 55, 55, 0.2);
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ant-select-dropdown-menu-item {
|
||||
padding: 12px 16px !important;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ant-table-layout-fixed table {
|
||||
table-layout: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
:global {
|
||||
.ant-col-xl-48 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.ant-col-xl-96 {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
:global {
|
||||
.ant-pagination-item,
|
||||
.ant-pagination-next,
|
||||
.ant-pagination-options,
|
||||
.ant-pagination-prev {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ant-card {
|
||||
.ant-card-head {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
@import './default.less';
|
||||
|
||||
@dark-half: #494949;
|
||||
@purple: #d897eb;
|
||||
@shadow-1: 4px 4px 20px 0 rgba(0, 0, 0, 0.01);
|
||||
@shadow-2: 4px 4px 40px 0 rgba(0, 0, 0, 0.05);
|
||||
@transition-ease-in: all 0.3s ease-out;
|
||||
@transition-ease-out: all 0.3s ease-out;
|
||||
@ease-in: ease-in;
|
||||
|
||||
.text-overflow {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
37.219838% 34.532506%,
|
||||
36.425669% 93.178216%,
|
||||
from(#29cdff),
|
||||
to(#0a60ff),
|
||||
color-stop(0.37, #148eff)
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.background-hover {
|
||||
transition: @transition-ease-in;
|
||||
&:hover {
|
||||
background-color: @hover-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@import './default.less';
|
||||
@import './mixin.less';
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,38 +0,0 @@
|
|||
const config = {
|
||||
siteName: 'inula Antd',
|
||||
copyright: 'Ant Design Admin ©2020 zuiidea',
|
||||
logoPath: '/logo.svg',
|
||||
apiPrefix: '/api/v1',
|
||||
fixedHeader: true, // sticky primary layout header
|
||||
|
||||
/* Layout configuration, specify which layout to use for route. */
|
||||
layouts: [
|
||||
{
|
||||
name: 'primary',
|
||||
include: [/.*/],
|
||||
exclude: [/(\/(en|zh))*\/login/],
|
||||
},
|
||||
],
|
||||
|
||||
/* I18n configuration, `languages` and `defaultLanguage` are required currently. */
|
||||
i18n: {
|
||||
/* Countrys flags: https://www.flaticon.com/packs/countrys-flags */
|
||||
languages: [
|
||||
{
|
||||
key: 'pt-br',
|
||||
title: 'Português',
|
||||
},
|
||||
{
|
||||
key: 'en',
|
||||
title: 'English',
|
||||
},
|
||||
{
|
||||
key: 'zh',
|
||||
title: '中文',
|
||||
},
|
||||
],
|
||||
defaultLanguage: 'en',
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
export const ROLE_TYPE = {
|
||||
ADMIN: 'admin',
|
||||
DEFAULT: 'admin',
|
||||
DEVELOPER: 'developer',
|
||||
};
|
||||
|
||||
export const CANCEL_REQUEST_MESSAGE = 'cancel request';
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue