Skip to content

X
xiaomai-cloud-class-web
Commit 8cbd2a07 by wufan
Options

feat:增加PageControl组件并引入iconfont

parent 2bb97039
Showing with 332 additions and 15 deletions
config/paths.js
...@@ -62,7 +62,7 @@ module.exports = { ...@@ -62,7 +62,7 @@ module.exports = {
appPath: resolveApp('.'), appPath: resolveApp('.'),
appBuild: resolveApp('dist'), appBuild: resolveApp('dist'),
appPublic: resolveApp('public'), appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'), appHtml: resolveApp('src/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/index'), appIndexJs: resolveModule(resolveApp, 'src/index'),
appPackageJson: resolveApp('package.json'), appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'), appSrc: resolveApp('src'),
......
config/webpack.config.js
...@@ -160,7 +160,7 @@ module.exports = function(webpackEnv) { ...@@ -160,7 +160,7 @@ module.exports = function(webpackEnv) {
// to bring better experience for Create React App users. You can replace // to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client: // the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/', // require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'), require.resolve('webpack/hot/dev-server'),
isEnvDevelopment && isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'), require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code: // Finally, this is your app's code:
......
src/components/Breadcrumbs.less 0 → 100644
@import '../core/variables.less';
.xm-breadCrumb{
margin-left: 16px;
color: #989898;
margin-top:10px;
margin-bottom: 10px;
+.statistic-tips{
position: relative;
top: -8px;
margin-bottom: 0px !important;
}
.back-btn {
cursor: pointer;
&:hover {
color: @xm-color-primary;
}
}
span {
font-size: @xm-font-size-m;
line-height: 25px;
}
.ant-breadcrumb{
display: inline-block;
span{
color: #989898;
font-weight: 400;
}
}
.divide{
display: inline-block;
position: relative;
height: 12px;
width: 25px;
&:after{
content:'';
position: absolute;
left: 12px;
height: 16px;
top: 0px;
border-left:1px solid #989898;
}
}
}
\ No newline at end of file
src/components/Breadcrumbs.tsx 0 → 100644
/*
* @Author: sunbingqing
* @Date: 2019-07-26 11:26:00
* @Last Modified by: 孙冰清
* @Last Modified time: 2019-07-26 11:59:24
*/
import React from 'react';
import { Breadcrumb } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
import _ from 'underscore';
import './Breadcrumbs.less';
interface BreadcrumbsProps {
goBack?: () => void;
navList: string | string[];
text?: string;
}
const Breadcrumbs = (props: BreadcrumbsProps) => {
const { goBack, navList, text } = props;
function _onClick(): any {
goBack ? goBack() : window.RCHistory.goBack();
}
const isString = _.isString(navList);
const isArray = _.isArray(navList);
return (
<div className="xm-breadCrumb">
<span onClick={_onClick} className="back-btn" />
<LeftOutlined/>
<span className="text ml5" >{text ? text : '返回'}</span>
<div className="divide"></div>
<Breadcrumb>
{isString && <Breadcrumb.Item>{navList}</Breadcrumb.Item>}
{isArray && _.map(navList, (item: string, index: number) => {
return <Breadcrumb.Item key={index}>{item}</Breadcrumb.Item>;
})}
{ !isString && !isArray && <Breadcrumb.Item>{navList}</Breadcrumb.Item>}
</Breadcrumb>
</div>
);
};
export default Breadcrumbs;
src/components/PageControl.less 0 → 100644
@import "../core/variables.less";
.xm-page-control {
margin: 16px 0px;
position: relative;
padding-bottom: 16px;
.title {
position: absolute;
left: 0;
color: @text-sub;
}
> ul {
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
line-height: 30px;
}
.select-list{
ul{
li{
display: block;
border:none;
}
}
}
> ul {
li {
display: inline-block;
vertical-align: top;
padding: 0px 5px;
min-width: 26px;
height: 26px;
line-height: 26px;
border-bottom: 1px solid @border;
border-top: 1px solid @border;
border-right: 1px solid @border;
margin-top: 1px;
color: @text-sub;
a {
color: @primary;
display: block;
}
&.active {
a {
color: #fff;
}
}
&:nth-child(2) {
border-left: 1px solid @border;
}
&:nth-child(11) {
border-right: 1px solid @border;
}
&:nth-child(12) {
border-right: 1px solid @border;
}
}
.omit+li {
border-left: 1px solid @border;
}
li:first-child {
border-left: 1px solid @border;
}
&>span {
display: inline-block;
}
&>div {
display: inline-block;
width: 26px;
height: 26px;
border: 1px solid @border;
line-height: 26px;
}
}
.back {
margin-right: 10px;
border-radius: 4px;
cursor: pointer;
color: @primaryDark;
}
.go {
margin-left: 10px;
border-radius: 4px;
cursor: pointer;
color: @primaryDark;
}
.active {
background-color: @primaryDark;
border: 1px solid @primaryDark;
color: white;
}
.omit {
border: 0px;
margin: 0 5px;
}
.jumper {
margin-left: 5px;
border: none;
border-radius: 0px;
line-height: 26px;
color: @text-sub;
width: auto;
input {
width: 35px;
height: 25px;
border-radius: 4px;
border: 1px solid @border;
padding: 0px 5px;
margin: 0px 5px;
color: @text-sub;
}
button {
margin-left: 5px;
height: 26px;
line-height: 26px;
border: 1px solid @primaryDark;
border-radius: 4px;
padding: 0px 10px;
color: @primaryDark;
&:hover, &:active {
color: #fff;
background: @primaryDark;
}
}
}
.hide {
opacity: 0;
}
.show {
opacity: 1;
}
}
.xm-page-control_primary {
.go {
color: @primary;
}
.active {
background-color: @primary;
border: 1px solid @primary;
}
.back {
color: @primary;
}
}
\ No newline at end of file
src/components/PageControl.tsx 0 → 100644
/*
* @Author: sunbingqing
* @Date: 2019-07-24 17:21:00
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2020-11-25 14:36:16
*/
import React from 'react';
import { Pagination } from 'antd';
import './PageControl.less';
interface PageControlProps {
current: number;
total: number;
pageSize: number;
showDataNums?: boolean;
showSizeChanger?: boolean;
size?: 'default' | 'small';
toPage: (value: number) => void;
className?: string;
onShowSizeChange?: any;
pageSizeOptions?:any
}
const PageControl = (props: PageControlProps) => {
const { current, total, pageSize, showDataNums, showSizeChanger, size, toPage, className,
onShowSizeChange, pageSizeOptions } = props;
const cls = 'xm-page-control ' + className;
function _onChange(page: number): any {
toPage(page - 1);
}
return (
<div className={cls}>
{(showDataNums === undefined ? true : showDataNums) &&
<span>共{total}条数据</span>
}
<div style={{ display: 'inline', float: 'right' }}>
<Pagination
size={size}
current={current + 1}
total={total || 0}
pageSizeOptions={['10', '20', '50', '100']}
onShowSizeChange={onShowSizeChange}
showSizeChanger={showSizeChanger}
pageSize={pageSize || 10}
onChange={(page: any) => _onChange(page)}
showQuickJumper
/>
</div>
</div>
);
};
export default PageControl;
public/index.html → src/index.html
...@@ -10,19 +10,23 @@ ...@@ -10,19 +10,23 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <!-- <link rel="apple-touch-icon" href="../src/common/images/logo.png" /> -->
<link rel="shortcut icon" href="https://image.xiaomaiketang.com/xm/KGSYFEpcHT.png">
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_1wpr50mnvdo.css">
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
...@@ -32,7 +36,7 @@ ...@@ -32,7 +36,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>小麦云课堂</title>
<script type="text/javascript" src="https://image.xiaomaiketang.com/xm/PhotoClip.js"></script> <script type="text/javascript" src="https://image.xiaomaiketang.com/xm/PhotoClip.js"></script>
</head> </head>
<body> <body>
......
src/modules/root/Main.less
@import '../../core/variables.less'; @import '../../core/variables.less';
@import '../../core/page.less'; @import '../../core/page.less';
@import '../../core/table.less'; @import '../../core/table.less';
@import '../../core/global.less';
@top-height: 50px; @top-height: 50px;
......
src/modules/test/index.jsx
import React from 'react'; import React from "react";
import Breadcrumbs from "@/components/Breadcrumbs";
class testPage extends React.Component { class testPage extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {} this.state = {};
} }
render() { render() {
return ( return (
<div className="prepare-lesson-page page"> <div className="prepare-lesson-page page">
<div className="content-header">测试</div> <div className="content-header">
<Breadcrumbs
navList="选班调班"
goBack={() => {
RCHistory.goBack();
}}
/>
</div>
<div className="box content-body"> <div className="box content-body">
测试内容 <i class="iconfont icontanhao_caise"></i>
</div> </div>
</div> </div>
) );
} }
} }
export default testPage; export default testPage;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment