测试props.children
7 | {props.children}
8 |
9 | )
10 | }
11 |
12 | export default Test
--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 |
--------------------------------------------------------------------------------
/src/components/content-title/style/index.less:
--------------------------------------------------------------------------------
1 |
2 | .content-title {
3 | height: 50px;
4 | font-size: 24px;
5 | color: #3e7fee;
6 | line-height: 50px;
7 | padding-left: 10px;
8 | cursor: pointer;
9 | &__icon {
10 | font-size: 18px;
11 | margin-left: 10px;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/pages/category/ModalStatusCode.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * @Descripttion:
3 | * @version:
4 | * @Author: alexwjj
5 | * @Date: 2020-10-16 16:52:25
6 | * @LastEditors: alexwjj
7 | * @LastEditTime: 2020-10-16 16:54:22
8 | */
9 | export enum ModalStatusCode{
10 | Invisble=0,
11 | Add=1,
12 | Update=2
13 | }
--------------------------------------------------------------------------------
/src/pages/todo/constants.tsx:
--------------------------------------------------------------------------------
1 | export const TASK_STATUS = {
2 | TODO: 0,
3 | DOING: 1,
4 | DONE: 2
5 | }
6 |
7 | export const TASK_BTN_TEXT = {
8 | 0: '点击开始',
9 | 1: '点击完成',
10 | 2: '查看详情'
11 | }
12 |
13 | export const TASK_BTN_STYLE = {
14 | 0: 'warning',
15 | 1: 'success',
16 | 2: 'primary'
17 | }
--------------------------------------------------------------------------------
/src/api/ReqMethodEnum.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * @Descripttion:
3 | * @version:
4 | * @Author: alexwjj
5 | * @Date: 2020-11-02 14:18:37
6 | * @LastEditors: alexwjj
7 | * @LastEditTime: 2020-11-02 14:28:09
8 | */
9 | export enum ReqMethodEnum {
10 | GET = 'GET',
11 | POST = 'POST',
12 | PUT = 'PUT',
13 | DELETE = 'DELETE',
14 | }
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/pages/demo-hooks/withLogger.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | const withLogger = (prefix = "") => (WrappedComponent) => {
4 | const WithLogger = (props) => {
5 | console.log(`${prefix}[Props]:`, props);
6 | return
6 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
15 | h3{
16 | margin-bottom: 0!important;
17 | }
18 |
--------------------------------------------------------------------------------
/src/redux/store.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * @Descripttion:
3 | * @version:
4 | * @Author: alexwjj
5 | * @Date: 2021-01-27 23:36:53
6 | * @LastEditors: alexwjj
7 | * @LastEditTime: 2021-01-30 21:37:58
8 | */
9 | import { createStore, applyMiddleware, compose } from 'redux';
10 |
11 | import thunk from 'redux-thunk';
12 | import reducer from './reducer';
13 |
14 | const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
15 |
16 | export default createStore(reducer, composeEnhancers(applyMiddleware(thunk)));
17 |
--------------------------------------------------------------------------------
/src/pages/category/Model.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * @Descripttion:
3 | * @version:
4 | * @Author: alexwjj
5 | * @Date: 2020-10-21 17:11:52
6 | * @LastEditors: alexwjj
7 | * @LastEditTime: 2020-11-29 15:48:03
8 | */
9 | export interface ICategory {
10 | parentId: string;
11 | _id: string;
12 | name: string;
13 | __v: number;
14 | categoryName: string;
15 | parentName: string;
16 | }
17 |
18 | export interface CategoryModel {
19 | parentId: string;
20 | id: number;
21 | name: string;
22 | categoryName: string;
23 | parentName: string;
24 | }
--------------------------------------------------------------------------------
/src/pages/demo/test-loading.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import withLoading from './withLoading';
3 |
4 | const TestLoading: React.FCloading结束
:loading中
}; 12 | }; 13 | 14 | const Loading = () =>loading
; 15 | 16 | export default withLoading(Loading)(TestLoading) 17 | -------------------------------------------------------------------------------- /src/components/left-nav/index.less: -------------------------------------------------------------------------------- 1 | .left-nav{ 2 | height: 100vh; 3 | color: white; 4 | position: fixed; 5 | 6 | .left-nav-header{ 7 | height: 60px; 8 | width:200px; 9 | display: flex; 10 | display: -webkit-flex; 11 | align-items: center; 12 | justify-content: center; 13 | background-color: #002140; 14 | img{ 15 | height: 40px; 16 | width: 40px; 17 | margin-right: 15px; 18 | } 19 | h1{ 20 | color: white; 21 | font-size: 20px; 22 | margin-bottom: 0px; 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /src/redux/types.d.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * @Descripttion: 3 | * @version: 4 | * @Author: alexwjj 5 | * @Date: 2021-01-30 21:39:42 6 | * @LastEditors: alexwjj 7 | * @LastEditTime: 2021-02-02 21:41:44 8 | */ 9 | 10 | import { StateType } from 'typesafe-actions'; 11 | 12 | declare module 'typesafe-actions' { 13 | export type Store = StateType
14 |
15 |
16 |
17 |
18 |
21 |
22 | );
23 | }
24 |
25 | export default JJIME
26 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./path.json",
3 | "compilerOptions": {
4 | "target": "es5",
5 | "lib": [
6 | "dom",
7 | "dom.iterable",
8 | "esnext"
9 | ],
10 | "allowJs": true,
11 | "skipLibCheck": true,
12 | "esModuleInterop": true,
13 | "allowSyntheticDefaultImports": true,
14 | "strict": true,
15 | "forceConsistentCasingInFileNames": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "noUnusedParameters": false,
20 | "suppressImplicitAnyIndexErrors": true,
21 | "noEmit": true,
22 | "noImplicitAny": false,
23 | "noUnusedLocals": false,
24 | "jsx": "react",
25 | "isolatedModules": true
26 | },
27 | "include": [
28 | "src",
29 | "craco.config.js"
30 | ]
31 | }
32 |
--------------------------------------------------------------------------------
/src/pages/ts-study/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Alert } from "zent";
3 | import ReactMarkdown from "react-markdown";
4 | // @ts-ignore
5 | import apiMd from "./tstype.md";
6 | import CodeBlock from "./code-block";
7 |
8 | export const TS: React.FC
20 | {title}
21 | {isShowIcon &&
27 | );
28 | };
29 |
30 | export default ContentTitle;
31 |
--------------------------------------------------------------------------------
/src/components/affix-tabs-nav/style/index.scss:
--------------------------------------------------------------------------------
1 | @import "vars/colors";
2 |
3 | .zent-affix.rc__affix-tabs-nav__wrap {
4 | @include theme-color(background-color, stroke, 9);
5 |
6 | .zent-tabs-nav {
7 | height: 48px;
8 | line-height: 48px;
9 | border: none;
10 | }
11 |
12 | .zent-tabs-nav-content {
13 | .zent-tabs-tab {
14 | @include theme-border-right(1px, solid, stroke, 6);
15 |
16 | &:last-child {
17 | border-right: none;
18 | }
19 | }
20 | }
21 |
22 | .zent-tabs-tab,
23 | .zent-tabs-tab-inner {
24 | border: none;
25 | }
26 |
27 | .zent-tabs-tab-inner {
28 | height: 48px;
29 | line-height: 48px;
30 | font-weight: 500;
31 | }
32 |
33 | .zent-tabs-tab__actived {
34 | @include theme-color(color, primary, 4);
35 |
36 | .zent-tabs-tab-inner {
37 | border: none;
38 | }
39 | }
40 |
41 | &--pined {
42 | @include theme-border-bottom(1px, solid, stroke, 6);
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/pages/demo-hooks/useReducer.tsx:
--------------------------------------------------------------------------------
1 | import React, { useReducer } from "react";
2 | import { Button } from "zent";
3 |
4 | const myReducer = (state, action) => {
5 | switch(action.type) {
6 | case('countUp'):
7 | return {
8 | ...state,
9 | count: state.count + 1
10 | }
11 | case('countDown'):
12 | return {
13 | ...state,
14 | count: state.count - 1
15 | }
16 | default:
17 | return state
18 | }
19 | }
20 |
21 | function ReducerDemo() {
22 | const [state, dispatch] = useReducer(myReducer, { count: 0 })
23 |
24 | return (
25 |
26 |
29 |
32 |
34 | );
35 | }
36 |
37 |
38 | export default ReducerDemo;
39 |
--------------------------------------------------------------------------------
/src/components/zent/affix.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Affix, Alert } from "zent";
3 |
4 | interface IProps {
5 | offsetTop?: number;
6 | title?: string;
7 | }
8 |
9 | class JJAffix extends React.ComponentCount: {state.count}
33 |
33 | {emptyHtml}
34 | 
39 |
40 | );
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/zent/Infinite.tsx:
--------------------------------------------------------------------------------
1 | import { InfiniteScroller, Card } from 'zent';
2 | import * as React from 'react';
3 | export default class JInfinite extends React.Component {
4 | state = {
5 | list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
6 | };
7 |
8 | loadMore(closeLoading) {
9 | const { list } = this.state;
10 | const latestList = list.slice(list.length - 10);
11 | const newList = latestList.map(item => item + 10);
12 |
13 | setTimeout(() => {
14 | this.setState({
15 | list: [...list, ...newList],
16 | });
17 | closeLoading && closeLoading();
18 | }, 500);
19 | }
20 |
21 | render() {
22 | const { list } = this.state;
23 | return (
24 |
28 |
32 |
33 |
34 | );
35 | };
36 |
37 | export default UseRouter;
38 |
--------------------------------------------------------------------------------
/src/utils/DateUtils.tsx:
--------------------------------------------------------------------------------
1 | export function formatDate(timeBySeconds: number) {
2 | let time = new Date(timeBySeconds);
3 | return (
4 | time.getFullYear() +
5 | '-' +
6 | (time.getMonth() + 1) +
7 | '-' +
8 | time.getDate() +
9 | ' ' +
10 | time.getHours() +
11 | ':' +
12 | time.getMinutes() +
13 | ':' +
14 | time.getSeconds()
15 | );
16 | }
17 |
18 | export function formatDateByString(date: Date, fmt: string) {
19 | let o = {
20 | 'M+': date.getMonth() + 1, //月份
21 | 'd+': date.getDate(), //日
22 | 'h+': date.getHours(), //小时
23 | 'm+': date.getMinutes(), //分
24 | 's+': date.getSeconds(), //秒
25 | 'q+': Math.floor((date.getMonth() + 3) / 3), //季度
26 | 'S': date.getMilliseconds(), //毫秒
27 | };
28 | if (/(y+)/.test(fmt)) {
29 | fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
30 | }
31 | for (var k in o) {
32 | if (new RegExp('(' + k + ')').test(fmt)) {
33 | fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
34 | }
35 | }
36 | return fmt;
37 | }
38 |
--------------------------------------------------------------------------------
/src/pages/zent/data.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import {
4 | LayoutRow as Row,
5 | LayoutCol as Col,
6 | LayoutGrid as Grid,
7 | LayoutConfigProvider as ConfigProvider,
8 | } from "zent";
9 | import JJForm from "../../components/zent/form";
10 |
11 | import { Alert } from "zent";
12 |
13 | class Data extends React.Component {
14 | state = {
15 | current: 1,
16 | };
17 | render() {
18 | return (
19 | <>
20 | 404
33 |抱歉，您访问的页面不存在
34 |
35 |
38 |
39 |
40 |
13 |
30 |
31 | );
32 | }
33 |
34 | function Spacer() {
35 | return (
36 |
14 |
29 |
37 |
39 | );
40 | }
41 |
42 | export default JJWayPoint
43 |
--------------------------------------------------------------------------------
/src/components/header/index.less:
--------------------------------------------------------------------------------
1 | .header {
2 | // height: 80px;
3 | background-color: white;
4 | .header-top {
5 | height: 60px;
6 | text-align: right;
7 | padding-right: 30px;
8 | line-height: 60px;
9 | box-shadow:0px 0px 3px #000;
10 | span {
11 | margin-right: 10px;
12 | }
13 | }
14 |
15 | .header-bottom {
16 | height: 40px;
17 | display: flex;
18 | align-items: center;
19 |
20 | .header-bottom-left {
21 | position: relative;
22 | width: 25%;
23 | text-align: center;
24 |
25 | &::after {
26 | content: '';
27 | position: absolute;
28 | right: 50%;
29 | transform: translateX(50%);
30 | top: 100%;
31 | border-top: 20px solid white;
32 | border-right: 20px solid transparent;
33 | border-left: 20px solid transparent;
34 | border-bottom: 20px solid transparent;
35 |
36 | }
37 | }
38 |
39 | .header-bottom-right {
40 | width: 75%;
41 | text-align: right;
42 | padding-right: 30px;
43 |
44 | img {
45 | margin: 0 15px;
46 | width: 30px;
47 | height: 20px;
48 | }
49 | }
50 | }
51 | }
--------------------------------------------------------------------------------
/src/pages/ts-study/code-block.tsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from "react";
2 | import PropTypes from "prop-types";
3 | import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
4 | // 设置高亮样式
5 | import { coy } from "react-syntax-highlighter/dist/esm/styles/prism";
6 | // 设置高亮的语言
7 | import {
8 | jsx,
9 | javascript,
10 | } from "react-syntax-highlighter/dist/esm/languages/prism";
11 |
12 | class CodeBlock extends PureComponent {
13 | static propTypes = {
14 | value: PropTypes.string.isRequired,
15 | language: PropTypes.string,
16 | };
17 |
18 | static defaultProps = {
19 | language: null,
20 | };
21 |
22 | componentWillMount() {
23 | // 注册要高亮的语法，
24 | // 注意：如果不设置打包后供第三方使用是不起作用的
25 | SyntaxHighlighter.registerLanguage("jsx", jsx);
26 | SyntaxHighlighter.registerLanguage("javascript", javascript);
27 | }
28 |
29 | render() {
30 | // @ts-ignore
31 | const { language, value } = this.props;
32 | return (
33 |
14 |
16 | );
17 | };
18 |
19 | const Messages = () => {
20 | const { username } = useContext(AppContext);
21 |
22 | return (
23 | 子组件 username 001:{username}
15 |
24 |
26 | );
27 | };
28 |
29 | function ContextDemo() {
30 | const [user, setUser] = useState({ username: "lxy" });
31 | return (
32 | 子组件 username 002:{username}
25 |
34 | 父组件传递了一个默认username：lxy
35 |
43 |
36 |
39 |
40 | Drawer Content ...
36 | Drawer Content ...
37 | Drawer Content ...
38 |
10 |
11 |
21 |
37 |
38 | );
39 | }
40 |
41 | export default JJPortal;
42 |
--------------------------------------------------------------------------------
/src/pages/chars/Bar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Card, Button } from 'antd';
3 | import ReactEcharts from 'echarts-for-react';
4 |
5 | /*
6 | 后台管理的柱状图路由组件
7 | */
8 | const Bar = () => {
9 | const [sales, setSales] = useState
34 | 默认插入到body最后，并设置为拥有遮罩用于关闭
35 |
36 |
50 |
51 |
54 |
55 |
56 |
57 |
59 |
60 | );
61 | };
62 | export default Bar;
--------------------------------------------------------------------------------
/src/api/ajax.ts:
--------------------------------------------------------------------------------
1 | import { ReqMethodEnum } from './ReqMethodEnum';
2 | /*
3 | * @Descripttion:
4 | * @version:
5 | * @Author: alexwjj
6 | * @Date: 2020-09-28 21:45:10
7 | * @LastEditors: alexwjj
8 | * @LastEditTime: 2021-01-23 21:57:33
9 | */
10 | import { message } from 'antd';
11 | import Axios from 'axios';
12 |
13 | export default function ajax{props.task.description}
32 |暂无任务
50 | );
51 | }
52 |
53 | export default TaskCard;
54 |
--------------------------------------------------------------------------------
/src/components/app-card/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from 'react';
2 | import { ClampLines } from 'zent';
3 | import './style/index.scss'
4 |
5 | interface IAppCard {
6 | href: string;
7 | icon?: string;
8 | title: string;
9 | desc: string;
10 | className?: string;
11 | imgColorClassName?: string;
12 | fontIcon?: string;
13 | onClick: (appName: string) => void;
14 | }
15 |
16 | // TODO: 修改 title 为 POP
17 | const AppCard: React.FC{fontIcon}
24 | ) : (
25 |
34 |
37 |
38 | );
39 | };
40 |
41 | export default AppCard;
42 |
--------------------------------------------------------------------------------
/src/pages/home/index.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Modal } from "antd";
2 | import React from "react";
3 | import { Alert } from "zent";
4 | import "./index.less";
5 |
6 | export const Home: React.FC{title}
35 |Some contents...
36 |Some contents...
37 |Some contents...
38 |Some contents...
39 |Some contents...
40 |Some contents...
41 |Some contents...
42 |Some contents...
43 |Some contents...
44 |Some contents...
45 |Some contents...
46 |Some contents...
47 |
56 |
66 | );
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/src/pages/demo-hooks/useRef.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { useState, useEffect, useRef } from "react";
3 | import { Button, BlockHeader } from "zent";
4 | import Child from "./child-class";
5 | interface IPropsText {
6 | value: string;
7 | }
8 | type IProps = Partial
39 |
50 | );
51 | }
52 |
53 | export default UseRef;
54 |
--------------------------------------------------------------------------------
/src/pages/chars/Line.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * @Descripttion:
3 | * @version:
4 | * @Author: alexwjj
5 | * @Date: 2020-10-01 19:15:01
6 | * @LastEditors: alexwjj
7 | * @LastEditTime: 2021-02-07 13:42:36
8 | */
9 | import React, { useState } from 'react';
10 | import { Card, Button } from 'antd';
11 | import ReactEcharts from 'echarts-for-react';
12 |
13 | /*
14 | 后台管理的柱状图路由组件
15 | */
16 | const Line = () => {
17 | const [sales, setSales] = useState
58 |
59 |
62 |
63 |
64 |
65 |
67 |
68 | );
69 | };
70 | export default Line;
--------------------------------------------------------------------------------
/src/pages/login/login.less:
--------------------------------------------------------------------------------
1 | .login {
2 | width: 100vw;
3 | height: 100vh;
4 | background-size: cover;
5 | position: relative;
6 | display: flex;
7 | justify-content: center;
8 | overflow: hidden;
9 | background-image: linear-gradient(125deg,#F44336,#E91E63,#9C27B0,#3F51B5,#2196F3);
10 | background-size: 400%;
11 | font-family: "montserrat";
12 | animation: bganimation 15s infinite;
13 | @keyframes bganimation{
14 | 0%{
15 | background-position: 0% 50%;
16 | }
17 | 50%{
18 | background-position: 100% 50%;
19 | }
20 | 100%{
21 | background-position: 0% 50%;
22 | }
23 | }
24 | .login-logo{
25 | position: absolute;
26 | top: 20px;
27 | left: 20px;
28 | width: 100px;
29 | height: 100px;
30 | background-image: url(../../assets/images/logo.png);
31 | background-size: cover;
32 |
33 | }
34 | .login-content{
35 | width: 400px;
36 | height: 320px;
37 | border: 1px solid white;
38 | box-shadow:2px 4px 6px #000;
39 | margin-top: 40vh;
40 | display: flex;
41 | justify-content: center;
42 | padding-top: 30px;
43 | background-color: white;
44 | // align-items: center;
45 | }
46 | .login-form{
47 | width:100%;
48 | &-title{
49 | font-size: 20px;
50 | font-weight: 700;
51 | text-align: center;
52 | margin-bottom: 12px;
53 | }
54 | }
55 |
56 | }
--------------------------------------------------------------------------------
/src/redux/actions.ts:
--------------------------------------------------------------------------------
1 | import { reqRoleById } from './../api/index';
2 | import { reqLogin } from '../api';
3 | import { RECEIVE_USER, RESET_USER, SET_HEAD_TITLE, SHOW_ERROR_MSG } from './action-types';
4 | import StorageUtils, { LoginUser } from '../utils/StorageUtils';
5 | import { createAction } from 'typesafe-actions';
6 | /*
7 | * @Descripttion: 包含多个action creator的函数模块
8 | * @version:
9 | * @Author: alexwjj
10 | * @Date: 2021-01-27 23:38:20
11 | * @LastEditors: alexwjj
12 | * @LastEditTime: 2021-02-02 23:48:19
13 | */
14 | export const setHeadTitle = createAction(SET_HEAD_TITLE)Hello World
,
18 | footer: ,
19 | onClose() {
20 | console.log("outer dialog closed");
21 | },
22 | });
23 | };
24 |
25 | componentDidMount() {
26 | console.log('componentDidMount');
27 | }
28 |
29 | shouldComponentUpdate(prevProps: any, nextState: any) {
30 | console.log(prevProps, nextState, "shouldComponentUpdate方法执行");
31 | return true;
32 | }
33 |
34 | render() {
35 | return (
36 |
37 |
40 |
43 |
51 |
52 | );
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
46 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/src/components/zent/swiper.tsx:
--------------------------------------------------------------------------------
1 | import { Swiper, Button } from 'zent';
2 | import * as React from 'react';
3 |
4 | const pages = [1, 2, 3, 4, 5];
5 |
6 | export default class JSwiper extends React.Component {
7 | [x: string]: any;
8 |
9 | go = (index) => {
10 | this.swiper?.swipeTo(index);
11 | }
12 |
13 | prev = () => {
14 | this.swiper?.prev();
15 | }
16 |
17 | next = () => {
18 | this.swiper?.next();
19 | }
20 |
21 | render() {
22 | return (
23 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
24 | this.swiper = swiper}
26 | className="swiper-demo-simple"
27 | >
28 | {
29 | pages.map((item, index) => {
30 | return
34 |
62 |
63 | );
64 | }
65 | }
--------------------------------------------------------------------------------
/src/components/app-card/style/index.scss:
--------------------------------------------------------------------------------
1 |
2 | @media screen and (max-width: 1199px) {
3 | .app-card-wrapper {
4 | width: calc(((100% - 32px) / 3));
5 |
6 | &:nth-child(3n) {
7 | margin-right: 0;
8 | }
9 | }
10 | }
11 |
12 | @media screen and (min-width: 1200px) and (max-width: 1599px) {
13 | .app-card-wrapper {
14 | width: calc((100% - 48px) / 4);
15 |
16 | &:nth-child(4n) {
17 | margin-right: 0;
18 | }
19 | }
20 | }
21 |
22 | @media screen and (min-width: 1600px) {
23 | .app-card-wrapper {
24 | width: calc((100% - 64px) / 5);
25 |
26 | &:nth-child(5n) {
27 | margin-right: 0;
28 | }
29 | }
30 | }
31 |
32 | .app-card-wrapper {
33 | display: flex;
34 | align-items: center;
35 | border-radius: 2px;
36 | box-sizing: border-box;
37 | padding: 16px;
38 | overflow: hidden;
39 | text-decoration: none;
40 | height: 73px;
41 | cursor: pointer;
42 |
43 |
44 | &:hover {
45 | }
46 |
47 | &-icon {
48 | width: 40px;
49 | height: 40px;
50 | border-radius: 4px;
51 |
52 | }
53 |
54 | &-icon__blue {
55 | background-color: #1989fa;
56 | }
57 |
58 | &-icon__green {
59 | background-color: #00bf56;
60 | }
61 |
62 | &-font-icon {
63 | display: flex;
64 | justify-content: center;
65 | align-items: center;
66 | font-size: 20px;
67 |
68 | }
69 |
70 | &-content {
71 | margin-left: 10px;
72 | display: flex;
73 | width: calc(100% - 50px);
74 | flex-direction: column;
75 | justify-content: center;
76 |
77 | &-title {
78 | font-size: 14px;
79 | line-height: 20px;
80 |
81 | }
82 |
83 | &-desc {
84 | font-size: 12px;
85 | line-height: 18px;
86 |
87 | }
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/src/test/api/Api.test.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * @Descripttion:
3 | * @version:
4 | * @Author: alexwjj
5 | * @Date: 2020-11-30 22:46:31
6 | * @LastEditors: alexwjj
7 | * @LastEditTime: 2021-01-22 21:38:27
8 | */
9 | import ajax from '../../api/ajax';
10 | import { PageSplitModel, ResponseValue } from '../../api/Model';
11 | import { ReqMethodEnum } from '../../api/ReqMethodEnum';
12 | import { CategoryModel } from '../../pages/category/Model';
13 | import { ProductsModel } from '../../pages/product/Model';
14 | import { BASE_URL } from '../../utils/Constants';
15 |
16 | describe('test api', () => {
17 |
18 | test('test reqByProductsByName', async () => {
19 | const result = await ajax{item}
;
31 | })
32 | }
33 |
35 | {
36 | pages.map((item, index) => {
37 | return (
38 |
45 | );
46 | })
47 | }
48 |
54 |
60 |
61 |
14 | {list.map((item, index) => {
15 | return (
16 |
22 | );
23 | }
24 |
25 | function CallbackDemoAdd() {
26 | const [count, setCount] = useState
17 | 列表：{item} ;
18 |
19 | );
20 | })}
21 |
43 |
71 | );
72 | }
73 |
74 | export default CallbackDemoAdd;
75 |
--------------------------------------------------------------------------------
/src/pages/demo/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import LifeCycle from "./lifeCycle";
3 | import { Button, Alert, BlockLoading } from "zent";
4 | import "./index.less";
5 | // import TestLoading from "./test-loading";
6 | // import Test from './test';
7 |
8 | // 定义 LifeCycle 组件的父组件
9 |
10 | export default class LifeCycleContainer extends React.Component {
11 | // state 也可以像这样用属性声明的形式初始化
12 | state = {
13 | text: "父组件的文本",
14 | display: "none",
15 | hideChild: true,
16 | loading: true,
17 | lifeCycle: "https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/",
18 | };
19 |
20 | // 点击按钮，修改父组件文本的方法
21 |
22 | changeText = () => {
23 | this.setState({
24 | text: "修改后的父组件文本",
25 | });
26 | };
27 |
28 | // 点击按钮，隐藏（卸载）LifeCycle 组件的方法
29 |
30 | hideChild = () => {
31 | this.setState({
32 | hideChild: !this.state.hideChild,
33 | });
34 | };
35 | onLoading = () => {
36 | this.setState({
37 | loading: false,
38 | });
39 | };
40 |
41 | render() {
42 | return (
43 | <>
44 | {/*
44 | 点击两个按钮，都会触发子组件的重新渲染，但是child组件只依赖于count，也就是只有count变化的时候才去重新渲染。
45 |
46 |
47 |
48 | 不使用
49 | 使用useCallback
50 |
51 |
52 |
53 |
61 |
69 |
48 |
51 |
54 | {this.state.hideChild ? null : (
55 |
58 |
59 |
69 |
70 | );
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
6 |
7 | 
73 |
76 |
77 |
83 | );
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/src/test/api/test.http:
--------------------------------------------------------------------------------
1 | ###
2 | POST http://localhost:5000/api/login
3 | Accept: */*
4 | Cache-Control: no-cache
5 | Content-Type: application/json
6 |
7 | {
8 | "name": "admin",
9 | "password": "admin"
10 | }
11 | ###
12 | GET http://localhost:5000/hello
13 | ###
14 | GET http://api.map.baidu.com/telematics/v3/weather?location=%E5%B8%B8%E5%B7%9E&output=json&ak=3p49MVra6urFRGOT9s8UBWr2
15 |
16 | ###
17 | GET http://localhost:5000/api/category/list/0
18 |
19 | ###
20 |
21 | POST http://localhost:5000/api/category/add
22 | Accept: */*
23 | Cache-Control: no-cache
24 | Content-Type: application/json
25 |
26 | {
27 | "parentId": "0",
28 | "categoryName":"一级分类",
29 | "name": "乐器1"
30 | }
31 |
32 |
33 | ###
34 |
35 | POST http://localhost:5000/api/category/add
36 |
37 | Content-Type: application/json
38 | {
39 | "categoryName":"一级分类100",
40 | "parentId":"0"
41 | }
42 |
43 |
44 | ###
45 |
46 | PUT http://localhost:5000/api/category/update
47 | Accept: */*
48 | Cache-Control: no-cache
49 | Content-Type: application/json
50 |
51 | {
52 | "parentId": "0",
53 | "categoryName":"一级分类",
54 | "name": "乐器1"
55 | }
56 |
57 | ###
58 |
59 | POST http://localhost:5000/api/products/list
60 | Accept: */*
61 | Cache-Control: no-cache
62 | Content-Type: application/json
63 |
64 | {
65 | "pageNum":1,
66 | "pageSize":3
67 | }
68 |
69 | ###
70 | GET http://localhost:5000/api/products/searchByDesc/一部手机而已/1/2
71 |
72 |
73 | ###
74 |
75 | GET http://localhost:5000/api/products/searchByName/小米8/1/2
76 |
77 |
78 | ###
79 | GET http://localhost:5000/api/products/searchByName?name=8&pageNum=1&pageSize=3
80 |
81 | ###
82 | GET http://wthrcdn.etouch.cn/weather_mini?citykey=101010100
83 |
84 | ###
85 | GET http://localhost:5000/files/1.jpV
86 |
87 | ###
88 | GET http://localhost:5000/api/products/findById/1
89 |
90 | ###
91 | DELETE http://localhost:5000/deleteFile/1.jpg
92 |
93 | ###
94 | POST http://localhost:5000/api/role/createRole HTTP/1.1
95 | Accept: */*
96 | Cache-Control: no-cache
97 | Content-Type: application/json
98 |
99 | {
100 | "authName": "admin",
101 | "menus": "" ,
102 | "name": "asdasda",
103 | "v": 0,
104 |
105 | }
106 |
--------------------------------------------------------------------------------
/src/pages/category/UpdateFrom.tsx:
--------------------------------------------------------------------------------
1 | import { Form, Input, message, Modal } from 'antd';
2 | import React, { Component } from 'react';
3 | import { reqUpdateCategory } from '../../api';
4 | import { ResponseValue } from '../../api/Model';
5 | import { ICategory } from './Model';
6 | import { ModalStatusCode } from './ModalStatusCode';
7 |
8 | interface IUpdateFormProps {
9 | category: ICategory;
10 | showStatus: ModalStatusCode;
11 | onCancel: () => void;
12 | updateCategory: (category:ICategory) => void;
13 | }
14 |
15 | interface IUpdateFormState {
16 | name: string | null;
17 | status: ModalStatusCode;
18 | }
19 |
20 | interface Values {
21 | title?: string;
22 | value?: string;
23 | }
24 |
25 | export default class UpdateFrom extends Component{this.props.count}
78 | 79 |{this.state.text}
80 | 81 |{this.props.text}
82 |
72 |
74 | );
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/pages/todo/dialog.tsx:
--------------------------------------------------------------------------------
1 | import { Dialog, Button } from "zent";
2 | import React from "react";
3 | import { FormInputField, Form, FormStrategy, Validators } from "zent";
4 | interface IFormValue {
5 | title: string;
6 | description: string;
7 | }
8 | interface IProps {
9 | visible: boolean;
10 | type: string;
11 | taskInfo: any;
12 | onConfirmDialog: (value: IFormValue) => void;
13 | onCloseDialog(): void;
14 | }
15 |
16 | function TaskDialog(props: IProps) {
17 | const form = Form.useForm(FormStrategy.View);
18 |
19 | setTimeout(() => {
20 | if (props.type === "detail") {
21 | form.initialize(props.taskInfo);
22 | } else {
23 | form.clear();
24 | }
25 | }, 0);
26 |
27 | const resetForm = React.useCallback(() => {
28 | form.clear();
29 | form.model.clearError()
30 | props.onCloseDialog();
31 | }, [form, props]);
32 | const onSubmit = React.useCallback(
33 | (form) => {
34 | const value = form.getValue();
35 | props.onConfirmDialog(value);
36 | form.resetValue();
37 | },
38 | [props]
39 | );
40 |
41 | return (
42 |
43 |
84 |
85 | );
86 | }
87 |
88 | export default TaskDialog;
89 |
--------------------------------------------------------------------------------
/src/components/zent/table.tsx:
--------------------------------------------------------------------------------
1 | /* tslint:disable */
2 | import { Grid, Notify } from "zent";
3 | import React from 'react';
4 |
5 | interface IData {
6 | id: string,
7 | name: string,
8 | uv: number,
9 | stock: number,
10 | }
11 | const columns = [
12 | {
13 | title: "grid组件实现的table",
14 | name: "name",
15 | },
16 | {
17 | title: "访问量",
18 | name: "uv",
19 | },
20 | {
21 | title: "库存",
22 | name: "stock",
23 | },
24 | ];
25 |
26 | const pageSize = 5;
27 | const totalItem = 10;
28 |
29 | const datasets: IData[] = [];
30 | const datasets2: IData[] = [];
31 |
32 | for (let i = 0; i < 5; i++) {
33 | datasets.push({
34 | id: `f-${i}`,
35 | name: `母婴商品 ${i}`,
36 | uv: 20,
37 | stock: 5,
38 | });
39 | datasets2.push({
40 | id: `s-${i}`,
41 | name: `宠物商品 ${i}`,
42 | uv: 20,
43 | stock: 5,
44 | });
45 | }
46 | interface IState {
47 | selectedRowKeys: any,
48 | datasets: IData[],
49 | current: number
50 | }
51 |
52 | export default class Table extends React.Component
52 |
88 | );
89 | }
90 |
91 | export default ScrmComponent;
92 |
--------------------------------------------------------------------------------
/src/components/zent/table-header-group.tsx:
--------------------------------------------------------------------------------
1 | import { Grid } from "zent";
2 | import * as React from "react";
3 | interface IData {
4 | id: string;
5 | name: string;
6 | stock: number;
7 | type: string;
8 | company: string;
9 | phone: string;
10 | createdTime: string;
11 | sortBy?: string
12 | sortType?: number;
13 | }
14 |
15 | const datasets: IData[] = [];
16 |
17 | for (let i = 0; i < 3; i++) {
18 | datasets.push({
19 | id: `id-${i}`,
20 | name: `商品 ${i}`,
21 | type: `type-${i}`,
22 | company: `company-${i}`,
23 | phone: `123342345${i}`,
24 | stock: 5,
25 | createdTime: "2018-12-11",
26 | });
27 | }
28 |
29 | export default class TableHeaderGroup extends React.Component {
30 | state = {
31 | datasets,
32 | sortBy: '',
33 | sortType: 0,
34 | };
35 |
36 | getColumns = () => {
37 | return [
38 | {
39 | title: "商品名",
40 | name: "name",
41 | className: "name",
42 | width: 100,
43 | fixed: true,
44 | },
45 | {
46 | title: "商品信息",
47 | name: "productInfo",
48 | children: [
49 | {
50 | title: "类型",
51 | name: "type",
52 | width: 200,
53 | },
54 | {
55 | title: "供货商",
56 | name: "supplier",
57 | children: [
58 | {
59 | title: "公司",
60 | name: "company",
61 | width: 300,
62 | },
63 | {
64 | title: "电话",
65 | name: "phone",
66 | width: 300,
67 | },
68 | ],
69 | },
70 | ],
71 | },
72 | {
73 | title: "库存",
74 | name: "stock",
75 | defaultText: 0,
76 | },
77 | {
78 | title: "创建时间",
79 | name: "createdTime",
80 | width: 100,
81 | needSort: true,
82 | fixed: "right",
83 | },
84 | ];
85 | };
86 |
87 | onChange = (conf: any) => {
88 | this.setState({
89 | ...conf,
90 | });
91 | };
92 |
93 | render() {
94 | const { sortBy, sortType } = this.state;
95 | return (
96 |
29 | {/* {props.title} */}
30 |
85 | );
86 | }
87 |
88 | export default withLogger("DIY：")(Hooks);
89 |
--------------------------------------------------------------------------------
/src/components/zent/tree-plain.tsx:
--------------------------------------------------------------------------------
1 | import { Tree, Icon, Radio } from "zent";
2 | import * as React from "react";
3 |
4 | const RadioGroup = Radio.Group;
5 | const originData = [
6 | {
7 | id: 1,
8 | title: "杭州有赞科技有限公司",
9 | },
10 | {
11 | id: 2,
12 | title: "技术",
13 | parentId: 1,
14 | },
15 | {
16 | id: 3,
17 | title: "后端",
18 | parentId: 2,
19 | },
20 | {
21 | id: 4,
22 | title: "运维",
23 | parentId: 2,
24 | },
25 | {
26 | id: 5,
27 | title: "前端",
28 | parentId: 2,
29 | },
30 | {
31 | id: 6,
32 | title: "产品",
33 | parentId: 1,
34 | },
35 | ];
36 | interface INode {
37 | id: string;
38 | parentId: number;
39 | title: string;
40 | }
41 | const deepClone = (
42 | node: any,
43 | parentId: number = 0,
44 | nodeArray: INode[] = []
45 | ) => {
46 | const copyNode: INode = {
47 | id: String(Math.random()).replace("0.", ""),
48 | parentId,
49 | title: node.title,
50 | };
51 | nodeArray.push(copyNode);
52 |
53 | for (
54 | let i = 0, l = (node.children && node.children.length) || 0;
55 | i < l;
56 | i++
57 | ) {
58 | // @ts-ignore
59 | deepClone(node.children[i], copyNode.id, nodeArray);
60 | }
61 | return nodeArray;
62 | };
63 |
64 | export default class JJTreePlain extends React.Component {
65 | state = {
66 | treeData: originData,
67 | copyType: "shallow",
68 | };
69 |
70 | onDelete = (data: any) => {
71 | this.setState({
72 | treeData: this.state.treeData.filter((item) => item.id !== data.id),
73 | });
74 | };
75 |
76 | onClone = (data: any) => {
77 | const { copyType } = this.state;
78 |
79 | if (copyType === "shallow") {
80 | const node = Object.assign({}, data, { id: Date.now() });
81 | this.setState({
82 | treeData: [...this.state.treeData, node],
83 | });
84 | } else if (copyType === "deep") {
85 | const nodeArray = deepClone(data, data.parentId);
86 | this.setState({
87 | treeData: [...this.state.treeData, ...nodeArray],
88 | });
89 | }
90 | };
91 |
92 | onCopyTypeChange = (e: any) => this.setState({ copyType: e.target.value });
93 |
94 | render() {
95 | const { copyType, treeData } = this.state;
96 | const operations = [
97 | {
98 | name: "Delete",
99 | icon: You clicked {count} times
51 | 54 | 55 |{time}
*/}
84 |
111 |
112 | 浅拷贝
113 | 深拷贝
114 |
115 |
116 |
118 | );
119 | }
120 | }
121 |
--------------------------------------------------------------------------------
/src/pages/category/AddForm.tsx:
--------------------------------------------------------------------------------
1 | import { Select, Form, Input, Modal, message } from 'antd';
2 | import React, { Component } from 'react';
3 | import { reqAddCategory } from '../../api';
4 | import { ICategory } from './Model';
5 | import { ModalStatusCode } from './ModalStatusCode';
6 |
7 | const Option = Select.Option;
8 | const Item = Form.Item;
9 |
10 | interface Values {
11 | title?: string;
12 | value?: string;
13 | }
14 |
15 | interface IAddFormProps {
16 | category: ICategory;
17 | onCancel: () => void;
18 | showStatus: ModalStatusCode;
19 | categorys: ICategory[];
20 | updateCategory: (category:ICategory) => void;
21 | }
22 | export default class AddForm extends Component116 |
72 | -
73 |
83 |
84 | -
85 |
86 |
87 |
88 | );
89 | }
90 |
91 | render() {
92 | return (
93 |
94 |
96 | );
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/src/pages/product/rich-text-editor.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { EditorState, convertToRaw, ContentState } from 'draft-js';
3 | import { Editor } from 'react-draft-wysiwyg';
4 | import draftToHtml from 'draftjs-to-html';
5 | import htmlToDraft from 'html-to-draftjs';
6 | import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
7 | import { BASE_URL } from '../../utils/Constants';
8 | import { ResponseValue } from '../../api/Model';
9 | import { FileUploadResponseModel } from './Model';
10 | import { myBlockRenderer } from './media';
11 |
12 | interface State {
13 | editorState: EditorState;
14 | }
15 |
16 | interface Props {
17 | detail: string;
18 | }
19 |
20 | export default class RichTextEditor extends Component
78 |
93 | );
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/src/pages/ts-study/tstype.md:
--------------------------------------------------------------------------------
1 | ## Partial
44 |
45 |
100 | );
101 | }
102 | export default Login;
103 |
--------------------------------------------------------------------------------
/src/pages/product/detail.tsx:
--------------------------------------------------------------------------------
1 | import { Card, List } from 'antd';
2 | import React, { Component } from 'react';
3 | import { ArrowLeftOutlined } from '@ant-design/icons';
4 | import { RouteComponentProps, withRouter } from 'react-router';
5 | import LinkButton from '../../components/link-button';
6 | import { reqCategoryById } from '../../api';
7 | import MemoryUtils from '../../utils/MemoryUtils';
8 |
9 | interface ProductDetailState {
10 | cName: string;
11 | pName: string;
12 | }
13 |
14 | interface ProductDetailProps {}
15 |
16 | type ProductDetailRoutePros = ProductDetailProps & RouteComponentProps;
17 |
18 | class ProductDetail extends Component
46 | {/* })
*/}
47 |
98 |
99 | */}
47 |
98 |
69 |
70 |
106 |
107 | );
108 | }
109 | }
110 |
111 | export default withRouter(ProductDetail);
112 |
--------------------------------------------------------------------------------
/src/components/header/index.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * @Descripttion:
3 | * @version:
4 | * @Author: alexwjj
5 | * @Date: 2021-01-31 19:59:55
6 | * @LastEditors: alexwjj
7 | * @LastEditTime: 2021-02-02 23:43:29
8 | */
9 | import { Modal } from 'antd';
10 | import React, { Component } from 'react';
11 | import { RouteComponentProps, withRouter } from 'react-router';
12 | // import { reqWheater } from '../../api';
13 | import { formatDate } from '../../utils/DateUtils';
14 | import { ExclamationCircleOutlined } from '@ant-design/icons';
15 | import './index.less';
16 | import LinkButton from '../link-button';
17 | import { connect } from 'react-redux';
18 | import { RootState } from 'typesafe-actions';
19 | import { logout } from '../../redux/actions';
20 | import { Affix } from "zent";
21 |
22 |
23 | const mapStateToProps = (state: RootState) => ({
24 | headTitle: state.headTitle,
25 | user: state.user,
26 | });
27 |
28 | const mapDispatchToProps = {
29 | logout
30 | };
31 | // interface userSession {
32 | // name?: string;
33 | // password?: string;
34 | // }
35 |
36 | const userSession: any = JSON.parse(sessionStorage.getItem('user') || '{}');
37 | interface HeaderState {
38 | currentTime: string;
39 | dayPictureUrl: string;
40 | weather: string;
41 | }
42 |
43 | type HeaderProps = RouteComponentProps & ReturnType-
71 |
105 |
118 |
106 | 欢迎，{userSession ? userSession.name : ''}
107 | 退出
108 |
109 | {/*
110 |
*/}
117 | {this.props.headTitle}
111 |
112 | {this.state.currentTime}
113 | 
114 | {this.state.weather}
115 |
116 | {b} : {c} ({d}%)' 96 | }, 97 | legend: { 98 | orient: 'vertical', 99 | left: 'left', 100 | data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] 101 | }, 102 | series: [ 103 | { 104 | name: '访问来源', 105 | type: 'pie', 106 | radius: '55%', 107 | center: ['50%', '60%'], 108 | data: [ 109 | {value: 335, name: '直接访问'}, 110 | {value: 310, name: '邮件营销'}, 111 | {value: 234, name: '联盟广告'}, 112 | {value: 135, name: '视频广告'}, 113 | {value: 1548, name: '搜索引擎'} 114 | ], 115 | emphasis: { 116 | itemStyle: { 117 | shadowBlur: 10, 118 | shadowOffsetX: 0, 119 | shadowColor: 'rgba(0, 0, 0, 0.5)' 120 | } 121 | } 122 | } 123 | ] 124 | }; 125 | 126 | }; 127 | 128 | return ( 129 |
130 |
131 |
133 |
135 |
136 |
137 | );
138 | };
139 |
140 | export default Pie;
141 |
--------------------------------------------------------------------------------
/src/pages/zent/show.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import {
4 | LayoutRow as Row,
5 | LayoutCol as Col,
6 | LayoutGrid as Grid,
7 | LayoutConfigProvider as ConfigProvider,
8 | } from "zent";
9 |
10 | import {
11 | Alert,
12 | Avatar,
13 | Badge,
14 | Icon,
15 | BlockHeader,
16 | Progress,
17 | TextMark,
18 | } from "zent";
19 | import JCollection from "../../components/zent/collapse";
20 | import JInfinite from "../../components/zent/Infinite";
21 | import JSwiper from "../../components/zent/swiper";
22 |
23 | class Show extends React.Component {
24 | state = {
25 | current: 1,
26 | };
27 | render() {
28 | return (
29 | <>
30 |
42 |
43 |
44 |
47 |
48 |
49 |
50 |
51 |
52 |
55 |
64 |
65 |
71 |
73 |
74 |
78 |
84 |
85 |
86 |
87 |
88 |
90 |
91 |
92 |
93 | 内容区，可以写任何html，慢慢感觉到react组件确实比vue更加自由
89 |
99 |
101 |
102 |
105 |
107 |
108 |
111 |
112 | {/* 
*/}
113 |
121 | );
122 | }
123 | }
124 |
125 | const dispatchProps = { setHeadTitle };
126 | const mapStateToProps = (state: RootState) => ({user:state.user})
127 |
128 | export default connect(mapStateToProps, dispatchProps)(withRouter(LeftNav));
129 |
--------------------------------------------------------------------------------
/src/pages/product/pictures-wall.tsx:
--------------------------------------------------------------------------------
1 | import { Upload, Modal, message } from 'antd';
2 | import { PlusOutlined } from '@ant-design/icons';
3 | import React, { Component } from 'react';
4 | import { UploadChangeParam } from 'antd/lib/upload';
5 | import { UploadFile } from 'antd/lib/upload/interface';
6 | import { BASE_IMAGES_URL, BASE_URL } from '../../utils/Constants';
7 | import { ResponseValue } from '../../api/Model';
8 | import { nanoid } from 'nanoid';
9 | import { reqDeleteProductsImages } from '../../api';
10 | import { FileUploadResponseModel } from './Model';
11 |
12 | function getBase64(file: any): Promise俊劫学习系统
114 | 115 |
116 |
119 |
120 |
116 |
119 | );
120 | return (
121 | Upload
118 |
122 |
132 | {fileList.length >= 3 ? null : uploadButton}
133 |
134 |
135 | 
136 |
137 |
138 | );
139 | }
140 | }
141 |
--------------------------------------------------------------------------------
/src/components/zent/form.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Form,
3 | FormStrategy,
4 | Checkbox,
5 | Validators,
6 | FormNumberInputField,
7 | FormCheckboxGroupField,
8 | FormSingleUploadField,
9 | FormInputField,
10 | FormUploadField,
11 | FormImageUploadField,
12 | Button
13 | } from "zent";
14 | import React, { useCallback } from 'react';
15 |
16 | /**
17 | * 自定义表单校验，内置组件接受 renderError 参数，若不传默认会显示 message
18 | */
19 | function equalsPassword(value:string, ctx: any):any {
20 | if (value !== ctx.getSectionValue("password").password) {
21 | return {
22 | name: "passwordEqual",
23 | message: "两次填写的密码不一致",
24 | };
25 | }
26 | return null;
27 | }
28 |
29 | function idLength(value:any) {
30 | if (value.length !== 10 && value.length !== 15) {
31 | return {
32 | name: "idLength",
33 | message: "证件号码是10位或者15位数字",
34 | };
35 | }
36 | }
37 |
38 | function JJForm() {
39 | const form = Form.useForm(FormStrategy.View);
40 | const resetForm = useCallback(() => {
41 | form.resetValue();
42 | }, [form]);
43 | const onSubmit = useCallback((form) => {
44 | const value = form.getValue();
45 | console.log(value);
46 | }, []);
47 | return (
48 |
151 | );
152 | }
153 |
154 | export default JJForm
--------------------------------------------------------------------------------
/src/pages/admin/admin.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * @Descripttion:
3 | * @version:
4 | * @Author: alexwjj
5 | * @Date: 2020-10-14 21:16:42
6 | * @LastEditors: alexwjj
7 | * @LastEditTime: 2021-02-11 01:32:47
8 | */
9 | import React, { Component } from "react";
10 | import { Layout } from "antd";
11 | import LeftNav from "../../components/left-nav";
12 | import Header from "../../components/header";
13 | import { Redirect, Route, Switch } from "react-router-dom";
14 | import Category from "../category/Category";
15 | import Product from "../product/Product";
16 | import Role from "../role/Role";
17 | import Bar from "../chars/Bar";
18 | import Line from "../chars/Line";
19 | import Pie from "../chars/Pie";
20 | import Home from "../home";
21 | import Todo from "../todo";
22 | import TsStudy from "../ts-study";
23 |
24 | import Clinic from "../clinic/index";
25 | import User from "../user/User";
26 | import Record from "../register/record";
27 | import AddRegister from "../register/add-register";
28 | import ChargeManage from "../charge/charge-manage";
29 | import SettleRecord from "../charge/settle-record";
30 | import PrescriptionDetail from "../charge/prescription-detail";
31 | import Demo from "../demo";
32 | import DemoHooks from "../demo-hooks";
33 | import DemoComponents from "../demo-components";
34 |
35 | import ZentBase from "../zent/base";
36 | import ZentNav from "../zent/nav";
37 | import ZentData from "../zent/data";
38 | import ZentShow from "../zent/show";
39 | import ZentFeedback from "../zent/feedback";
40 |
41 | import { connect } from "react-redux";
42 | import { RootState } from "typesafe-actions";
43 | import NotFound from "../not-found/not-found";
44 | const { Footer, Sider, Content } = Layout;
45 |
46 | type IProps = ReturnType
80 |
86 |
87 |
111 |
171 |
172 |
173 |
174 | );
175 | }
176 |
177 | export default Todo;
178 |
--------------------------------------------------------------------------------
/src/serviceWorker.ts:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | type Config = {
24 | onSuccess?: (registration: ServiceWorkerRegistration) => void;
25 | onUpdate?: (registration: ServiceWorkerRegistration) => void;
26 | };
27 |
28 | export function register(config?: Config) {
29 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
30 | // The URL constructor is available in all browsers that support SW.
31 | const publicUrl = new URL(
32 | process.env.PUBLIC_URL,
33 | window.location.href
34 | );
35 | if (publicUrl.origin !== window.location.origin) {
36 | // Our service worker won't work if PUBLIC_URL is on a different origin
37 | // from what our page is served on. This might happen if a CDN is used to
38 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
39 | return;
40 | }
41 |
42 | window.addEventListener('load', () => {
43 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
44 |
45 | if (isLocalhost) {
46 | // This is running on localhost. Let's check if a service worker still exists or not.
47 | checkValidServiceWorker(swUrl, config);
48 |
49 | // Add some additional logging to localhost, pointing developers to the
50 | // service worker/PWA documentation.
51 | navigator.serviceWorker.ready.then(() => {
52 | console.log(
53 | 'This web app is being served cache-first by a service ' +
54 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
55 | );
56 | });
57 | } else {
58 | // Is not localhost. Just register service worker
59 | registerValidSW(swUrl, config);
60 | }
61 | });
62 | }
63 | }
64 |
65 | function registerValidSW(swUrl: string, config?: Config) {
66 | navigator.serviceWorker
67 | .register(swUrl)
68 | .then(registration => {
69 | registration.onupdatefound = () => {
70 | const installingWorker = registration.installing;
71 | if (installingWorker == null) {
72 | return;
73 | }
74 | installingWorker.onstatechange = () => {
75 | if (installingWorker.state === 'installed') {
76 | if (navigator.serviceWorker.controller) {
77 | // At this point, the updated precached content has been fetched,
78 | // but the previous service worker will still serve the older
79 | // content until all client tabs are closed.
80 | console.log(
81 | 'New content is available and will be used when all ' +
82 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
83 | );
84 |
85 | // Execute callback
86 | if (config && config.onUpdate) {
87 | config.onUpdate(registration);
88 | }
89 | } else {
90 | // At this point, everything has been precached.
91 | // It's the perfect time to display a
92 | // "Content is cached for offline use." message.
93 | console.log('Content is cached for offline use.');
94 |
95 | // Execute callback
96 | if (config && config.onSuccess) {
97 | config.onSuccess(registration);
98 | }
99 | }
100 | }
101 | };
102 | };
103 | })
104 | .catch(error => {
105 | console.error('Error during service worker registration:', error);
106 | });
107 | }
108 |
109 | function checkValidServiceWorker(swUrl: string, config?: Config) {
110 | // Check if the service worker can be found. If it can't reload the page.
111 | fetch(swUrl, {
112 | headers: { 'Service-Worker': 'script' }
113 | })
114 | .then(response => {
115 | // Ensure service worker exists, and that we really are getting a JS file.
116 | const contentType = response.headers.get('content-type');
117 | if (
118 | response.status === 404 ||
119 | (contentType != null && contentType.indexOf('javascript') === -1)
120 | ) {
121 | // No service worker found. Probably a different app. Reload the page.
122 | navigator.serviceWorker.ready.then(registration => {
123 | registration.unregister().then(() => {
124 | window.location.reload();
125 | });
126 | });
127 | } else {
128 | // Service worker found. Proceed as normal.
129 | registerValidSW(swUrl, config);
130 | }
131 | })
132 | .catch(() => {
133 | console.log(
134 | 'No internet connection found. App is running in offline mode.'
135 | );
136 | });
137 | }
138 |
139 | export function unregister() {
140 | if ('serviceWorker' in navigator) {
141 | navigator.serviceWorker.ready
142 | .then(registration => {
143 | registration.unregister();
144 | })
145 | .catch(error => {
146 | console.error(error.message);
147 | });
148 | }
149 | }
150 |
--------------------------------------------------------------------------------
/src/pages/product/home.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Card, Input, message, Select, Table } from 'antd';
2 | import React, { Component } from 'react';
3 | import { PlusOutlined } from '@ant-design/icons';
4 | import LinkButton from '../../components/link-button';
5 | import { reqProducts, reqProductsByDesc, reqProductsByName, reqUpdateStatus } from '../../api';
6 | import { ProductsModel } from './Model';
7 | import { PageSplitModel } from '../../api/Model';
8 | import { PAGE_SIZE } from '../../utils/Constants';
9 | import { RouteComponentProps, withRouter } from 'react-router';
10 | import MemoryUtils from '../../utils/MemoryUtils';
11 | /**
12 | * product的默认子路由组件
13 | */
14 |
15 | interface ProductHomeState {
16 | products: ProductsModel[] | undefined;
17 | total: number;
18 | loading: boolean;
19 | searchInfo: string;
20 | searchType: string;
21 | pageNum: number;
22 | }
23 |
24 | interface ProductHomeProps {}
25 |
26 | type ProductHomeRouteProps = ProductHomeProps & RouteComponentProps;
27 | class ProductHome extends Component
88 |
89 | {taskList.map((task) => {
90 | return (
91 | {
99 | onStatusChange(task);
100 | }}
101 | >
102 | 查看详情
103 |
104 | }
105 | />
106 | );
107 | })}
108 |
109 |
110 |
113 | {
126 | onAddTask();
127 | }}
128 | >
129 | 新建任务
130 |
131 | }
132 | >
133 |
138 |
139 |
140 |
142 |
143 |
148 |
149 |
150 |
152 |
153 |
158 |
159 |
160 |
162 |
163 |
168 |
169 |
170 | 选项一的内容
151 | 选项二的内容
154 |
236 |
237 |
238 |
239 |
240 | );
241 | };
242 |
243 | export default User;
244 |
--------------------------------------------------------------------------------
/src/pages/category/Category.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * _oo0oo_
3 | * o8888888o
4 | * 88" . "88
5 | * (| -_- |)
6 | * 0\ = /0
7 | * ___/`---'\___
8 | * .' \\| |// '.
9 | * / \\||| : |||// \
10 | * / _||||| -:- |||||- \
11 | * | | \\\ - /// | |
12 | * | \_| ''\---/'' |_/ |
13 | * \ .-\__ '-' ___/-. /
14 | * ___'. .' /--.--\ `. .'___
15 | * ."" '< `.___\_<|>_/___.' >' "".
16 | * | | : `- \`.;`\ _ /`;.`/ - ` : | |
17 | * \ \ `_. \_ __\ /__ _/ .-` / /
18 | * =====`-.____`.___ \_____/___.-`___.-'=====
19 | * `=---='
20 | *
21 | *
22 | * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
23 | *
24 | * 佛祖保佑 永不宕机 永无BUG
25 | *
26 | * 佛曰:
27 | * 写字楼里写字间，写字间里程序员；
28 | * 程序人员写程序，又拿程序换酒钱。
29 | * 酒醒只在网上坐，酒醉还来网下眠；
30 | * 酒醉酒醒日复日，网上网下年复年。
31 | * 但愿老死电脑间，不愿鞠躬老板前；
32 | * 奔驰宝马贵者趣，公交自行程序员。
33 | * 别人笑我忒疯癫，我笑自己命太贱；
34 | * 不见满街漂亮妹，哪个归得程序员？
35 | */
36 |
37 | /*
38 | * @Descripttion:
39 | * @version:
40 | * @Author: alexwjj
41 | * @Date: 2020-10-14 21:16:42
42 | * @LastEditors: alexwjj
43 | * @LastEditTime: 2020-11-02 17:38:13
44 | */
45 |
46 | import { Button, Card, message, Table } from 'antd';
47 | import React, { Component } from 'react';
48 | import { PlusOutlined, ArrowRightOutlined } from '@ant-design/icons';
49 | import LinkButton from '../../components/link-button';
50 | import { reqCategorys } from '../../api';
51 | import { ModalStatusCode } from './ModalStatusCode';
52 | import { CategoryModel, ICategory } from './Model';
53 | import UpdateFrom from './UpdateFrom';
54 | import AddForm from './AddForm';
55 |
56 | interface ICategoryProps {}
57 |
58 | interface ICategoryState {
59 | categorys: ICategory[];
60 | loading: boolean;
61 | parentId: string;
62 | parentName: string;
63 | showStatus: number;
64 | }
65 |
66 |
67 | export default class Category extends Component