('/log/geo/day', undefined, Method.GET).then(res => res.data)
9 | }
--------------------------------------------------------------------------------
/src/pages/threejs/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import { EarthMap } from './earth'
3 |
4 | export default function ThreeJSPage() {
5 | useEffect(() => {
6 | //
7 | }, [])
8 | return
9 | This is Threejs Demo Page
10 |
11 |
12 | }
--------------------------------------------------------------------------------
/statics/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "React",
3 | "icons": [
4 | {
5 | "src": "logo.svg",
6 | "sizes": "192x192",
7 | "type": "image/svg"
8 | }
9 | ],
10 | "theme_color": "#ffffff",
11 | "background_color": "#ffffff",
12 | "start_url": "/React-PWA/",
13 | "display": "standalone"
14 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | React + Vite
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/pages/logs/style.module.scss:
--------------------------------------------------------------------------------
1 |
2 | /* row-flex */
3 |
4 | .large {
5 | top: 80px;
6 |
7 | :global {
8 | .row {
9 | display: flex;
10 | padding-bottom: 12px;
11 |
12 | & > div {
13 | word-break: break-all;
14 |
15 | &:first-child {
16 | flex: 0 0 100px;
17 | }
18 | }
19 | }
20 | }
21 | }
--------------------------------------------------------------------------------
/src/pages/charts/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import DayChart from './day'
3 | import styles from './style.module.scss'
4 |
5 | export default function ChartPage() {
6 |
7 | return (
8 |
9 |
Date Matrix and Line Graphs of Requests from Around the World
10 |
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/src/scss/variables.scss:
--------------------------------------------------------------------------------
1 | $main-color: #fff;
2 |
3 | :root {
4 | --main-bg-color: #fff;
5 | --main-txt-color: #333;
6 | --main-border-color: #eee;
7 | }
8 |
9 | @media (prefers-color-scheme: dark) {
10 | :root {
11 | --main-bg-color: #000;
12 | --main-txt-color: #ddd;
13 | }
14 | }
15 |
16 | body[theme=dark] {
17 | --main-bg-color: #000;
18 | --main-txt-color: #ddd;
19 | }
--------------------------------------------------------------------------------
/src/plugins/redux/model.ts:
--------------------------------------------------------------------------------
1 |
2 | export interface IAction {
3 | type: string
4 | playload?: any
5 | }
6 |
7 | export interface IAnyObject {
8 | [key: string]: any
9 | }
10 |
11 | export interface ICreateStore {
12 | getState: () => any
13 | dispatch: (action: IAction) => void
14 | subscribe: (listener: Function) => () => void
15 | replaceReducer: (nextReducer: Function) => void
16 | }
--------------------------------------------------------------------------------
/statics/logo.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/pages/demos/demo.module.scss:
--------------------------------------------------------------------------------
1 | .block {
2 | margin-bottom: 20px;
3 | padding: 12px;
4 | border-radius: 6px;
5 | box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 8px, rgba(0, 0, 0, 0.12) 0px 1px 6px;
6 | }
7 |
8 |
9 | .jsonView {
10 | min-height: 200px;
11 |
12 | :global {
13 | .ant-form-item-control-input-content > div {
14 | border-radius: 6px;
15 | min-height: 400px;
16 | }
17 | }
18 | }
--------------------------------------------------------------------------------
/src/assets/imgs/logo.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/pages/app.tsx:
--------------------------------------------------------------------------------
1 | import React, { useReducer } from 'react'
2 | import { AppStore, reducer, initState } from '@/stores'
3 | import { Navigation } from '@/routes/index'
4 |
5 | const App: React.FC = () => {
6 |
7 | const store = useReducer(reducer, initState)
8 |
9 | return (
10 |
11 |
12 |
13 | )
14 | }
15 |
16 | export default App
--------------------------------------------------------------------------------
/src/scss/theme.scss:
--------------------------------------------------------------------------------
1 |
2 | /* dark mode */
3 | @media (prefers-color-scheme: dark) {
4 | body {
5 | background-color: var(--main-bg-color);
6 | color: var(--main-txt-color);
7 | }
8 |
9 | a {
10 | color: #4e9eff;
11 | }
12 | }
13 |
14 | /* custom dark mode */
15 | body[theme=dark] {
16 | background-color: var(--main-bg-color);
17 | color: var(--main-txt-color);
18 |
19 | a {
20 | color: #4e9eff;
21 | }
22 | }
--------------------------------------------------------------------------------
/src/types/base.ts:
--------------------------------------------------------------------------------
1 |
2 | export class BaseModel {
3 | id: string
4 | createAt: number
5 | createBy: string
6 | updateAt: number
7 | updateBy: string
8 | deleteAt: number
9 | deleteBy: string
10 | }
11 |
12 |
13 | export enum DateFormat {
14 | Date = 'yyyy-MM-dd',
15 | DateDiagonal = 'yyyy/MM/dd',
16 | DateTime = 'yyyy-MM-dd HH:mm:ss',
17 | DateTimeM = 'yyyy-MM-dd HH:mm',
18 | DateTimeMS = 'yyyy-MM-dd HH:mm:SSS'
19 | }
--------------------------------------------------------------------------------
/src/plugins/redux/combineReducers.ts:
--------------------------------------------------------------------------------
1 | import { IAction, IAnyObject } from './model'
2 |
3 | // 组合reducer，计算后存为单个state
4 | export const combineReducers = (reducers: IAnyObject) => {
5 | // 这里重新组合state
6 | return (state: IAnyObject = {}, action: IAction) => {
7 | let newState: IAnyObject = {}
8 | for (let key in reducers) {
9 | newState[key] = reducers[key](state[key], action)
10 | }
11 | return newState
12 | }
13 | }
--------------------------------------------------------------------------------
/src/custom.d.ts:
--------------------------------------------------------------------------------
1 | import { MessageInstance } from 'antd/lib/message/interface'
2 | import { NotificationInstance } from 'antd/lib/notification/interface'
3 | import { AxiosStatic } from 'axios'
4 |
5 | declare global {
6 |
7 | const $http: AxiosStatic
8 |
9 | const $msg: MessageInstance
10 |
11 | const $notice: NotificationInstance
12 |
13 | interface ICommonProps {
14 | [key: string]: P
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/types/dashboard.ts:
--------------------------------------------------------------------------------
1 |
2 | type Stats = {
3 | count: number
4 | name: string
5 | }
6 |
7 | export class StatsData {
8 | statusCnt: {
9 | apiCnt: Stats[]
10 | errCnt: Stats[]
11 | }
12 | pathCnt: {
13 | apiCnt: Stats[]
14 | errCnt: Stats[]
15 | }
16 | }
17 |
18 | export type GeographicStats = {
19 | ip: string
20 | name_en: string
21 | sub_name_en: string
22 | latitude: string
23 | longitude: string
24 | total: string
25 | }
--------------------------------------------------------------------------------
/src/components/jsonView.tsx:
--------------------------------------------------------------------------------
1 | import React, {} from 'react'
2 | import { JsonView, allExpanded, darkStyles, defaultStyles } from 'react-json-view-lite';
3 | import 'react-json-view-lite/dist/index.css';
4 |
5 | interface IProps {
6 | data: Object | any[]
7 | }
8 |
9 | export const JSONView: React.FC = ({
10 | data
11 | }) => {
12 | return
17 | }
--------------------------------------------------------------------------------
/src/stores/hooks.ts:
--------------------------------------------------------------------------------
1 | import { useAppStore } from './global'
2 | import { Action, setTheme } from './actions'
3 | import { THEME_MODE } from '@/constants'
4 | import { Theme } from '../types/global'
5 | import { storage } from '../utils/tools'
6 |
7 | /**
8 | * set app theme
9 | * @param theme enum Theme
10 | */
11 | export const useTheme = (theme: Theme, dispatch: React.Dispatch) => {
12 | storage.set(THEME_MODE, theme)
13 | dispatch(setTheme(theme))
14 | }
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { createRoot } from 'react-dom/client'
3 | import App from './pages/app'
4 | import './scss/app.scss'
5 | import 'antd/dist/reset.css'
6 | import 'quill/dist/quill.snow.css'
7 | import serviceWorker from './serviceWorker'
8 | import { setRem } from '@utils/tools'
9 | import '@utils/i18n'
10 |
11 | // setRem();
12 |
13 | const container = document.getElementById('app')!
14 | createRoot(container).render()
15 | serviceWorker()
--------------------------------------------------------------------------------
/src/pages/home/components/footer.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Layout, Flex, theme } from 'antd'
3 |
4 | const { Footer } = Layout
5 |
6 | export default () => {
7 | const { token: { boxShadow, paddingSM } } = theme.useToken()
8 | return
14 | }
--------------------------------------------------------------------------------
/src/pages/dashboard/style.module.scss:
--------------------------------------------------------------------------------
1 |
2 | .dashboard {
3 | color: var(--main-txt-color);
4 | background-color: var(--main-bg-color);
5 | padding: 20px;
6 |
7 | h2 {
8 | text-align: center;
9 | padding-bottom: 8px;
10 | }
11 |
12 | .chart {
13 | position: relative;
14 | height: 400px;
15 | width: 100%;
16 | margin-bottom: 24px;
17 | border: 1px solid var(--main-border-color);
18 |
19 | :global(.amap-container) {
20 | left: 0;
21 | }
22 | }
23 | }
--------------------------------------------------------------------------------
/src/models/article.ts:
--------------------------------------------------------------------------------
1 | import { BaseModel } from './base'
2 | import { ArticleType } from './articleType'
3 | import { Tag } from './tag'
4 |
5 | export interface Article extends BaseModel {
6 | title: string
7 |
8 | abstract: string
9 |
10 | description: string
11 |
12 | tag: string[]
13 | }
14 |
15 | export type ArticlesData = {
16 | articles?: IPageData
17 | article?: Article
18 | articleTypes: {
19 | list: ArticleType[]
20 | }
21 | tags: {
22 | list: Tag[]
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/pages/face/style.module.scss:
--------------------------------------------------------------------------------
1 |
2 | .face {
3 | height: 100%;
4 |
5 | img, canvas {
6 | width: 100%;
7 | display: block;
8 | margin: 0 auto;
9 | }
10 | }
11 |
12 | .wrap {
13 | height: 100%;
14 |
15 | &> div {
16 | width: 44%;
17 | height: 100%;
18 | border: 1px dashed #ccc;
19 | border-radius: 4px;
20 | display: flex;
21 | justify-content: center;
22 | align-items: center;
23 |
24 | &.result {
25 | border-color:red;
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/notFound.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react"
2 | import * as React from 'react'
3 | import { Button, Result } from 'antd'
4 | import { useNavigate } from 'react-router-dom'
5 |
6 |
7 | export const NotFound: React.FC = () => {
8 |
9 | const navigate = useNavigate()
10 |
11 | return navigate('/')}>Back Home}
16 | />
17 | }
18 |
--------------------------------------------------------------------------------
/src/types/demo.ts:
--------------------------------------------------------------------------------
1 | import { object2Options } from '@utils/tools'
2 |
3 | export interface APIFormTest {
4 | url: string
5 | method: Method
6 | apiType: APIType
7 | params: string
8 | }
9 |
10 |
11 | export enum Method {
12 | GET = 'GET',
13 | POST = 'POST',
14 | PUT = 'PUT',
15 | DELETE = 'DELETE',
16 | }
17 |
18 | export const methodOpts = object2Options(Method)
19 |
20 | export enum APIType {
21 | 'RESTful' = '/api',
22 | 'Graphql' = '/graphql'
23 | }
24 |
25 | export const apiTypeOpts = object2Options(APIType)
26 |
--------------------------------------------------------------------------------
/src/pages/charts/day/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import { useChart } from './useChart'
3 | import { Spin } from 'antd'
4 | import styles from '../style.module.scss'
5 |
6 | export default function Chart() {
7 |
8 | const {
9 | loading,
10 | heatRef,
11 | chartRef,
12 | } = useChart()
13 |
14 | return (
15 |
16 |
17 |
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/src/pages/lottery/detail/style.module.scss:
--------------------------------------------------------------------------------
1 |
2 | .ballWrap {
3 | flex-wrap: wrap;
4 | }
5 | .ball {
6 | width: 32px;
7 | height: 32px;
8 | border-radius: 100%;
9 | cursor: pointer;
10 | border: 1px solid #f54646;
11 | color: #f54646;
12 | transition: all .3s;
13 |
14 | &.active {
15 | background-color: #f54646;
16 | color: #fff;
17 | }
18 |
19 | &.blue {
20 | border-color: #39f;
21 | color: #39f;
22 |
23 | &.active {
24 | background-color: #39f;
25 | color: #fff;
26 | }
27 | }
28 | }
29 |
30 |
31 |
--------------------------------------------------------------------------------
/src/utils/i18n/en_US.json:
--------------------------------------------------------------------------------
1 | {
2 | "confirm": "Confirm",
3 | "ok": "OK",
4 | "success": "Success",
5 | "introduction": "Hello, welcome to my personal skills showcase project. I am a web application developer, and my project is developed using React+Typescript. The scaffolding was written by myself from scratch. I am very passionate about programming and enjoy front-end development. Fully understand and be able to develop all front-end and back-end processes and functions, proficient in using technology stacks such as Node.js, Python, Typescript, ES6+, MySQL, etc."
6 | }
--------------------------------------------------------------------------------
/src/stores/global.ts:
--------------------------------------------------------------------------------
1 | import { createContext, Dispatch, useContext, useReducer } from 'react'
2 | import { Store } from '@/types/global'
3 | import { Action, } from './actions'
4 |
5 | export const initState = new Store
6 |
7 | type AppContextProps = [Store, Dispatch] | undefined
8 |
9 | export const AppStore = createContext(undefined)
10 |
11 | export const useAppStore = () => {
12 | const store = useContext(AppStore)
13 | if (!store) {
14 | throw new Error('useAppStore must be used within a AppStore.Provider');
15 | }
16 | return store
17 | }
--------------------------------------------------------------------------------
/src/models/user.ts:
--------------------------------------------------------------------------------
1 | import { object2Options } from '@/utils/tools'
2 | import { BaseModel } from './base'
3 |
4 | export class User extends BaseModel {
5 |
6 | username: string
7 |
8 | nickName: string
9 |
10 | userType: number
11 |
12 | sex: number
13 |
14 | remark: string
15 | }
16 |
17 | export enum UserType {
18 | 超级用户 = 0,
19 | 管理员 = 1,
20 | 普通用户 = 2,
21 | 测试用户 = 9,
22 | }
23 |
24 | export const userTypeOpts = object2Options(UserType)
25 |
26 |
27 | export enum UserSex {
28 | 女 = 0,
29 | 男 = 1,
30 | }
31 |
32 | export const userSexOpts = object2Options(UserSex)
--------------------------------------------------------------------------------
/src/types/api.ts:
--------------------------------------------------------------------------------
1 |
2 | export interface APILog {
3 | host: string
4 |
5 | path: string
6 |
7 | url: string
8 |
9 | params: any
10 |
11 | method: string
12 |
13 | origin: string
14 |
15 | hostname: string
16 |
17 | headers: any
18 |
19 | resHeaders: any
20 |
21 | resData: any
22 |
23 | time: number
24 |
25 | protocol: string
26 |
27 | status: number
28 |
29 | msg: string
30 |
31 | client: string
32 | }
33 |
34 | export type RequestStatus = 'default' | 'success' | 'warning' | 'error'
35 |
36 | export type APIQuery = {
37 | url: string
38 | path: string
39 | createdAt: string
40 | }
--------------------------------------------------------------------------------
/src/models/ball.ts:
--------------------------------------------------------------------------------
1 | import { BaseModel } from './base'
2 |
3 | export interface Ball extends BaseModel {
4 |
5 | issue: number
6 |
7 | red1: number
8 |
9 | red2: number
10 |
11 | red3: number
12 |
13 | red4: number
14 |
15 | red5: number
16 |
17 | red6: number
18 |
19 | reds: number[]
20 |
21 | blue: number | number[]
22 |
23 | pool: number
24 |
25 | drawDate: string
26 | }
27 |
28 | export interface ChartOption {
29 | name: string
30 | value: number
31 | }
32 |
33 | export interface BallChart {
34 | reds: ChartOption[]
35 | blues: ChartOption[]
36 | redDisList: ChartOption[][]
37 | }
--------------------------------------------------------------------------------
/src/constants/index.ts:
--------------------------------------------------------------------------------
1 | // jwt token key
2 | export const JWT_TOKEN = 'JWT_TOKEN'
3 |
4 | // system language key
5 | export const SYS_LANG = 'SYS_LANG'
6 |
7 | // redirect url key
8 | export const REDIRECT_URL = 'REDIRECT_URL'
9 |
10 | // graphql api modal
11 | export const GRAPHQL_API = '/graphql'
12 |
13 | export const COLOR_PRIMARY_KEY = 'COLOR_PRIMARY_KEY'
14 |
15 | export const PRIMARY_COLOR = '#087ea4'
16 |
17 | export const THEME_MODE = 'THEME_MODE'
18 |
19 | export const PREFERS_COLOR_SCHEME_DARK = '(prefers-color-scheme: dark)'
20 |
21 | export const EXCLUDE_KEYS = [
22 | COLOR_PRIMARY_KEY,
23 | THEME_MODE,
24 | ]
25 |
--------------------------------------------------------------------------------
/src/types/stock.ts:
--------------------------------------------------------------------------------
1 |
2 |
3 | export class Stock {
4 | id: number
5 | name: string
6 | code: string
7 | market: Market
8 | block: Board
9 | amount: number // 单手成交数量
10 |
11 | // 最后交易时间
12 | lastestTradeAt: number
13 | }
14 |
15 | export enum Market {
16 | 上证 = 1,
17 | 深证
18 | }
19 |
20 | export type KeyofMarket = keyof typeof Market
21 |
22 | export enum Board {
23 | 主板 = 1,
24 | 创业板,
25 | 科创板
26 | }
27 |
28 | export type KeyofBlock = keyof typeof Board
29 |
30 |
31 | export type StockQuery = Omit
32 |
33 | export type StockStats = {
34 | total: number
35 | block: Board
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/message.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'antd'
2 | import type { MessageInstance } from 'antd/es/message/interface'
3 | import type { ModalStaticFunctions } from 'antd/es/modal/confirm'
4 | import type { NotificationInstance } from 'antd/es/notification/interface'
5 |
6 | let message: MessageInstance
7 | let notification: NotificationInstance
8 | let modal: Omit
9 |
10 | export default function useAntApp() {
11 | const app = App.useApp()
12 | message = app.message
13 | modal = app.modal
14 | notification = app.notification
15 | return { message, notification, modal }
16 | }
17 |
18 | export { message, notification, modal }
--------------------------------------------------------------------------------
/.stylelintrc.js:
--------------------------------------------------------------------------------
1 |
2 | module.exports = {
3 | 'extends': 'stylelint-config-standard',
4 | 'rules': {
5 | 'selector-list-comma-newline-after': 'never-multi-line',
6 | 'value-list-comma-newline-after': 'never-multi-line',
7 | 'selector-pseudo-class-no-unknown': null,
8 | 'declaration-colon-newline-after': null,
9 | 'no-descending-specificity': null,
10 | 'max-empty-lines': 2,
11 | 'at-rule-no-unknown': [true, {
12 | ignoreAtRules: [/for|while|include/]
13 | }]
14 | },
15 | ignoreFiles: [
16 | 'node_modules/**/*',
17 | 'public/**/*',
18 | 'dist/**/*',
19 | '**/*.js',
20 | '**/*.jsx',
21 | '**/*.tsx',
22 | '**/*.ts'
23 | ]
24 | }
--------------------------------------------------------------------------------
/src/components/loading.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Spin } from 'antd'
3 |
4 | interface ILoadingProps {
5 | size?: 'small' | 'default' | 'large'
6 | }
7 |
8 | export default class Loading extends React.Component {
9 |
10 | state = {
11 | id: '123'
12 | }
13 |
14 | render () {
15 | const { size = 'default' } = this.props
16 |
17 | return (
18 |
24 |
25 |
26 | )
27 | }
28 | }
29 |
30 | const component = new Loading({size: 'default'})
--------------------------------------------------------------------------------
/src/services/api.ts:
--------------------------------------------------------------------------------
1 | import { pageData2Params } from '@utils/tools'
2 | import { APILog, APIQuery } from 'types/api'
3 | import { ErrorLog, ErrorQuery } from 'types/apiError'
4 | import { useRequest } from './http'
5 | import { StatsData } from '@/types/dashboard'
6 |
7 |
8 | export const getMongoLogsStats = () => {
9 | return useRequest('/log/stats').then(r => r.data)
10 | }
11 |
12 |
13 | export const getApiLogs = (params: APIQuery & IPageParams) => {
14 | return useRequest('/log-api', { params })
15 | }
16 |
17 |
18 | export const getErrorLogs = (params: ErrorQuery & IPageParams) => {
19 | return useRequest('/log-errors', { params })
20 | }
21 |
22 |
--------------------------------------------------------------------------------
/src/types/stockHistory.ts:
--------------------------------------------------------------------------------
1 |
2 |
3 | export class StockHistory {
4 | id: number
5 | stockId: number
6 | timestamp: number
7 | volume: number
8 | open: number
9 | high: number
10 | low: number
11 | close: number
12 | chg: number
13 | percent: number
14 | turnoverrate: number
15 | amount: number
16 | volume_post: number
17 | amount_post: number
18 | pe: number
19 | pb: number
20 | ps: number
21 | pcf: number
22 | market_capital: number
23 | balance: number
24 | hold_volume_cn: number
25 | hold_ratio_cn: number
26 | net_volume_cn: number
27 | hold_volume_hk: number
28 | hold_ratio_hk: number
29 | net_volume_hk: number
30 |
31 | tradeAt: string
32 | }
--------------------------------------------------------------------------------
/src/pages/home/components/siderbar.module.scss:
--------------------------------------------------------------------------------
1 |
2 | .logo {
3 | height: 64px;
4 | display: flex;
5 | align-items: center;
6 | padding-left: 20px;
7 |
8 | svg {
9 | display: block;
10 | animation: logoRotate 6s linear 0s infinite normal running none;
11 |
12 | &:hover {
13 | animation-play-state: paused;
14 | }
15 | }
16 |
17 | .title {
18 | color: #fff;
19 | margin-left: 20px;
20 | font-weight: bold;
21 | }
22 | }
23 |
24 | :global(.ant-layout-sider-collapsed) .title {
25 | display: none;
26 | }
27 |
28 | @keyframes logoRotate {
29 | from {
30 | transform: rotateZ(0);
31 | }
32 |
33 | to {
34 | transform: rotateZ(360deg);
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-typescript
2 |
3 | ### 项目概况
4 | ***
5 | 使用Ant-Design开发的一套后台管理系统，主要用到了React、Typescript、Mobx、PWA等技术，使用webpack5打包构建，包含React18的一些新特性。
6 |
7 | ### 项目主要技术结构
8 |
9 | ***
10 | * react
11 | * typescript
12 | * antd
13 | * hooks
14 | * webpack5
15 | * react-router5
16 | * pwa
17 |
18 | ### 安装
19 | ***
20 | 在终端下操作
21 |
22 | 项目地址: (`git clone`)
23 |
24 | ```
25 | git clone git@github.com:xpioneer/react-typescript.git
26 | ```
27 |
28 | 安装node_modules依赖 `yarn`
29 |
30 | ```
31 | yarn #in your command terminal
32 | ```
33 | ***
34 |
35 |
36 | ### 运行
37 | 启动开发服务: (http://localhost:8060)
38 |
39 | ```
40 | yarn start
41 | ```
42 |
43 | 生产环境打包
44 |
45 | ```
46 | yarn build
47 | ```
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/src/pages/login/style.module.scss:
--------------------------------------------------------------------------------
1 | .login {
2 | width: 100%;
3 | height: 100vh;
4 | display: flex;
5 | justify-content: center;
6 | align-items: center;
7 | position: relative;
8 |
9 | .waveW {
10 | position: absolute;
11 | top: 0;
12 | left: 0;
13 | width: 100%;
14 | height: 100%;
15 | }
16 |
17 | .form {
18 | position: relative;
19 | z-index: 1;
20 |
21 | h2 {
22 | color: var(--main-txt-color);
23 | }
24 |
25 | :global(.ant-checkbox-wrapper) {
26 | color: var(--main-txt-color);
27 | }
28 | }
29 | }
30 |
31 | .intro {
32 | position: absolute;
33 | top: 70%;
34 | left: 0;
35 | width: 100%;
36 | z-index: 1;
37 | padding: 0 240px;
38 | }
--------------------------------------------------------------------------------
/src/types/apiError.ts:
--------------------------------------------------------------------------------
1 |
2 | export interface ErrorLog {
3 | id: string
4 |
5 | host: string
6 |
7 | ip: string
8 |
9 | path: string
10 |
11 | url: string
12 |
13 | params: any
14 |
15 | method: string
16 |
17 | origin: string
18 |
19 | hostname: string
20 |
21 | headers: any
22 |
23 | resHeaders: any
24 |
25 | resData: any
26 |
27 | time: number
28 |
29 | protocol: string
30 |
31 | status: number
32 |
33 | msg: string
34 |
35 | client: string
36 |
37 | errors: string[]
38 |
39 | createdAt: string
40 | }
41 |
42 |
43 | export type ErrorQuery = {
44 | url: string
45 | path: string
46 | msg: string
47 | createdAt: string
48 | _createdAt?: [Date, Date]
49 | }
--------------------------------------------------------------------------------
/src/services/account.ts:
--------------------------------------------------------------------------------
1 | import { LoginForm, RegisterForm } from "types/account"
2 | import $http from '@utils/http'
3 | import { storage } from "@/utils/tools"
4 | import { JWT_TOKEN } from "@/constants"
5 |
6 |
7 | export const onLogin = (data: LoginForm) => {
8 | return $http.post('/api/login', data).then(res => res.data)
9 | }
10 |
11 | export const onLogout = () => {
12 | return $http.post('/api/logout', {}).then((res: any) => {
13 | storage.remove(JWT_TOKEN)
14 | location.replace('/login')
15 | }, err => {
16 | // $msg.error(err.msg)
17 | })
18 | }
19 |
20 |
21 | export const onCreate = (data: LoginForm) => {
22 | return $http.post('/api/register', data).then(res => res.data)
23 | }
24 |
--------------------------------------------------------------------------------
/src/services/stock.ts:
--------------------------------------------------------------------------------
1 | import { Method } from '@/types/demo'
2 | import { pageData2Params } from '@utils/tools'
3 | import { StockStats, Stock } from 'types/stock'
4 | import { useRequest } from './http'
5 |
6 |
7 | export type StockQuery = Omit & { noPage: boolean }
8 |
9 | export const stockPageList = (params: Partial = pageData2Params()) => {
10 | return useRequest('/stocks', params)
11 | }
12 |
13 | export const getStockDetail = (id: number) => {
14 | return useRequest(`/stocks/${id}`).then(res => res.data)
15 | }
16 |
17 |
18 | export const getStockChartCount = () => {
19 | return useRequest('/stock/chartCount').then(res => res.data)
20 | }
--------------------------------------------------------------------------------
/.babelrc.js:
--------------------------------------------------------------------------------
1 |
2 | module.exports = {
3 | presets: [
4 | [
5 | '@babel/preset-env',
6 | {
7 | targets: '> 0.25%, not dead',
8 | ignoreBrowserslistConfig: true,
9 | useBuiltIns: false,
10 | modules: false,
11 | exclude: ['transform-typeof-symbol']
12 | }
13 | ],
14 | '@babel/preset-react',
15 | [
16 | '@babel/preset-typescript',
17 | {
18 | isTSX: true,
19 | allExtensions: true,
20 | allowNamespaces: true,
21 | allowDeclareFields: true
22 | }
23 | ]
24 | ],
25 | plugins: [
26 | [
27 | '@babel/plugin-proposal-decorators',
28 | {legacy: true}
29 | ],
30 | // [
31 | // '@babel/plugin-proposal-class-properties',
32 | // {loose: true}
33 | // ]
34 | ]
35 | }
--------------------------------------------------------------------------------
/src/services/geography.ts:
--------------------------------------------------------------------------------
1 | import { useRequest } from "./http"
2 | import { SystemLog } from "@/types/geolog"
3 | import { Method } from "@/types/demo"
4 | import { GeographicStats } from "@/types/dashboard"
5 |
6 | export const getGeologs = (params: any) => {
7 | return useRequest('/log/geos', params, Method.GET)
8 | }
9 |
10 | export const getGeoGPSStats = () => {
11 | return useRequest('/log/geo/stats').then(r => r.data)
12 | }
13 |
14 | export const getGeoGPSChina = () => {
15 | return useRequest('/log/geo/china').then(r => r.data)
16 | }
17 |
18 | export const getGeoVisit = () => {
19 | return useRequest('/log/geo/visit').then(r => r.data)
20 | }
21 |
22 | export const getGeoMapStats = () => {
23 | return Promise.all([getGeoVisit(), getGeoGPSStats()])
24 | }
--------------------------------------------------------------------------------
/src/utils/i18n/index.ts:
--------------------------------------------------------------------------------
1 | import i18n from 'i18next'
2 | import { initReactI18next } from 'react-i18next'
3 | import en_US from './en_US.json'
4 | import zh_CN from './zh_CN.json'
5 | import zh_TW from './zh_TW.json'
6 | import { getCurrentLang } from '@/types/global'
7 |
8 | const currentLang = getCurrentLang()
9 |
10 | i18n
11 | .use(initReactI18next) // passes i18n down to react-i18next
12 | .init({
13 | resources: {
14 | en_US: {
15 | translation: en_US,
16 | },
17 | zh_CN: {
18 | translation: zh_CN,
19 | },
20 | zh_TW: {
21 | translation: zh_TW,
22 | },
23 | },
24 | lng: currentLang,
25 | fallbackLng: currentLang,
26 | interpolation: {
27 | escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
28 | },
29 | })
--------------------------------------------------------------------------------
/src/pages/demos/components/test.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { Flex, Space, Button, Badge } from 'antd'
3 |
4 | const useTest = () => {
5 | const [count, setCount] = useState(10)
6 | return {
7 | count,
8 | setCount,
9 | }
10 | }
11 |
12 | export const TestComponent: React.FC = () => {
13 | const { count, setCount } = useTest()
14 | return
15 |
16 | test1
17 |
18 |
19 | }
20 |
21 |
22 | export const TestComponent2: React.FC = () => {
23 | const { count, setCount } = useTest()
24 | return
25 |
26 | test2
27 |
28 |
29 | }
--------------------------------------------------------------------------------
/src/pages/home/home.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Layout } from 'antd'
3 | import { Outlet } from 'react-router-dom'
4 | import { HeaderComponent } from './components/header'
5 | import Footer from './components/footer'
6 | import { SiderBar } from './components/siderbar'
7 | import { useAppStore } from '@/stores/global'
8 | import classNames from 'classnames'
9 | import styles from './style.module.scss'
10 |
11 | const { Content } = Layout
12 |
13 | const HomePage: React.FC = () => {
14 |
15 | const [{
16 | authorized
17 | }] = useAppStore()
18 |
19 |
20 | return (
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | )
32 | }
33 |
34 | export default HomePage
--------------------------------------------------------------------------------
/src/pages/stocks/kLine/index.tsx:
--------------------------------------------------------------------------------
1 | import { Spin, Form, Row, Col, Select } from 'antd'
2 | import React from 'react'
3 | import { useKLine } from './useKLine'
4 |
5 | const DayKLineChart: React.FC = () => {
6 |
7 | const {
8 | loading,
9 | chartRef,
10 | stockOpts,
11 | onQuery,
12 | onSelectSearch,
13 | } = useKLine()
14 |
15 | return
16 |
17 |
18 |
19 |
28 |
29 |
30 |
31 |
32 |
33 | }
34 |
35 | export default DayKLineChart
36 |
--------------------------------------------------------------------------------
/src/pages/dashboard/dashboard.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import { useData } from './useData'
3 | import styles from './style.module.scss'
4 | import { Col, Row } from 'antd'
5 |
6 | export default function Dashboard() {
7 | const {
8 | visitRef,
9 | geoRef,
10 | earthRef,
11 | pathRef,
12 | statusRef,
13 | earthBDRef,
14 | } = useData()
15 |
16 | return
17 |
Request for Information from Around the World
18 |
19 |
20 |
21 |
22 |
23 |
24 |
31 |
红蓝球历史出现次数
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
红球历史出现分布图
41 |
42 |
43 |
44 |
45 |
46 |
文章标签详情
33 |
73 |
74 | }
75 |
76 | export default TagDetailPage
--------------------------------------------------------------------------------
/src/pages/article/useList.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, useRef } from 'react'
2 | import { Form } from 'antd'
3 | import { ArticleType } from '@models/articleType'
4 | import { Tag } from '@models/tag'
5 | import { Article, ArticlesData } from '@models/article'
6 | import { data2AntPageData } from '@/utils/tools'
7 | import { useGraphQL } from '@/services/http'
8 |
9 | const query = `
10 | query articlePages($page: Int, $pageSize: Int, $order: pageOrder, $title: String, $abstract: String, $tag: String, $typeId: String, $createdAt: [String]){
11 | articles(page: $page, pageSize: $pageSize, order: $order, title: $title, abstract: $abstract, tag: $tag, typeId: $typeId, createdAt: $createdAt){
12 | list{id,title,abstract,createdAt,typeId,tag,createdBy}
13 | meta{current,total,pageSize}
14 | }
15 | articleTypes(page: 1, pageSize: 99){
16 | list{id,name}
17 | }
18 | tags(page: 1, pageSize: 99){
19 | list{id,name}
20 | }
21 | }`
22 |
23 | export const useList = () => {
24 | const [form] = Form.useForm()
25 |
26 | const [loading, setLoading] = useState(false)
27 | const [pageData, setPageData] = useState(data2AntPageData())
28 |
29 | const optsRef = useRef<{
30 | types: ArticleType[]
31 | tags: Tag[]
32 | }>({
33 | types: [],
34 | tags: [],
35 | })
36 |
37 | const onQuery = (page = 1, pageSize = 10, order = {createdAt: 'DESC'}) => {
38 | const vals = form.getFieldsValue()
39 | setLoading(true)
40 | useGraphQL(
41 | query,
42 | {
43 | page,
44 | pageSize,
45 | order,
46 | ...vals
47 | }
48 | ).then(res => {
49 | setPageData(data2AntPageData(res.articles))
50 | // 减少渲染，谨慎使用
51 | optsRef.current = {
52 | types: res.articleTypes.list,
53 | tags: res.tags.list,
54 | }
55 | }).finally(() => setLoading(false))
56 | }
57 |
58 | useEffect(() => {
59 | onQuery()
60 | }, [])
61 |
62 | return {
63 | form,
64 | optsRef,
65 | loading,
66 | pageData,
67 | onQuery,
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/src/pages/stocks/detail.tsx:
--------------------------------------------------------------------------------
1 | import { dateFormat } from '@utils/tools'
2 | import { Spin, Card, Col, Form, Row, Button, Space } from 'antd'
3 | import React, { useState, useEffect } from 'react'
4 | import { getStockDetail } from '@/services/stock'
5 | import { Stock, Board, Market } from '@/types/stock'
6 | import { useNavigate, useParams } from 'react-router-dom'
7 |
8 | const StockDetailPage: React.FC> = (props) => {
9 | const navigate = useNavigate()
10 | const { id } = useParams();
11 |
12 | const [data, setData] = useState(new Stock)
13 | const [loading, setLoading] = useState(false)
14 |
15 | const onSync = () => {
16 | //
17 | }
18 | const onSyncAll = () => {
19 | //
20 | }
21 |
22 | useEffect(() => {
23 | if (id) {
24 | setLoading(true)
25 | getStockDetail(+id)
26 | .then(setData)
27 | .finally(() => setLoading(false))
28 | }
29 | }, [id])
30 |
31 | console.log(data)
32 |
33 | return (
34 |
35 | navigate(-1)}>Back}>
36 |
37 |
38 | {data.name}
39 |
40 |
41 | {Market[data.market]}
42 |
43 |
44 | {Board[data.block]}
45 |
46 |
47 | {dateFormat(data.lastestTradeAt)}
48 |
49 |
50 |
51 |
54 |
57 |
58 |
59 |
60 |
61 |
62 | )
63 | }
64 |
65 | export default StockDetailPage
--------------------------------------------------------------------------------
/src/pages/articleType/detail.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useNavigate } from 'react-router-dom'
3 | import {
4 | Row, Col, Form, Input, Button,
5 | Spin,
6 | FormItemProps,
7 | Space
8 | } from 'antd'
9 | import { useArticleTypeDetail } from './useDetail'
10 |
11 | const formLayout: FormItemProps = {
12 | labelCol: {
13 | span: 4,
14 | },
15 | wrapperCol: {
16 | span: 16
17 | }
18 | }
19 |
20 | const ArticleTypeDetailPage: React.FC = () => {
21 |
22 | const {
23 | form,
24 | isEdit,
25 | loading,
26 | onSave,
27 | } = useArticleTypeDetail()
28 |
29 | const navigate = useNavigate()
30 |
31 | return
32 | 文章类型详情
33 |
73 |
74 | }
75 |
76 | export default ArticleTypeDetailPage
--------------------------------------------------------------------------------
/src/pages/leaveMsg/leaveMsgEdit.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import {inject, observer} from 'mobx-react'
3 | import { Row, Col, Form, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
4 |
5 | const FormItem = Form.Item
6 |
7 | @inject('leaveMsgEditStore')
8 | @observer
9 | export default class LeaveMsgEdit extends React.Component {
10 |
11 | back = () => {
12 | this.props.history.go(-1)
13 | }
14 |
15 | componentDidMount () {
16 | const {id}: any = this.props.match.params
17 | this.props.leaveMsgEditStore.getDetail(id)
18 | }
19 |
20 | render () {
21 | const { mainData } = this.props.leaveMsgEditStore
22 |
23 | return
24 |
54 |
55 |
56 | }
57 | }
--------------------------------------------------------------------------------
/src/pages/comment/detail.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useNavigate } from 'react-router-dom'
3 | import { Row, Col, Form, Input, Button, FormItemProps } from 'antd'
4 | import { useDetail } from './useDetail'
5 |
6 | const formLayout: FormItemProps = {
7 | labelCol: {
8 | span: 4,
9 | },
10 | wrapperCol: {
11 | span: 16
12 | }
13 | }
14 |
15 | export default function CommentDetail() {
16 |
17 | const navigate = useNavigate()
18 |
19 | const {
20 | form,
21 | isEdit,
22 | loading,
23 | onSave,
24 | } = useDetail()
25 |
26 | return
27 |
72 |
73 | }
--------------------------------------------------------------------------------
/src/pages/leaveMsg/detail.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useNavigate } from 'react-router-dom'
3 | import { Row, Col, Form, Input, Button, FormItemProps } from 'antd'
4 | import { useDetail } from './useDetail'
5 |
6 | const formLayout: FormItemProps = {
7 | labelCol: {
8 | span: 4,
9 | },
10 | wrapperCol: {
11 | span: 16
12 | }
13 | }
14 |
15 | export default function CommentDetail() {
16 |
17 | const navigate = useNavigate()
18 |
19 | const {
20 | form,
21 | isEdit,
22 | loading,
23 | onSave,
24 | } = useDetail()
25 |
26 | return
27 |
72 |
73 | }
--------------------------------------------------------------------------------
/src/components/progress/index.tsx:
--------------------------------------------------------------------------------
1 | import { useAppStore } from '@/stores'
2 | import React, { useEffect, useLayoutEffect, useRef } from 'react'
3 | import { createPortal } from 'react-dom'
4 | import styles from './style.module.scss'
5 |
6 | interface ProgressProps {
7 | size?: 'small' | 'default' | 'large'
8 | }
9 |
10 | export const ProgressComponent: React.FC> = ({
11 | size
12 | }) => {
13 |
14 | const [{
15 | colorPrimary,
16 | }] = useAppStore()
17 |
18 | const el = useRef(null)
19 | const sizes: Record, number> = {
20 | small: 2,
21 | default: 3,
22 | large: 4,
23 | }
24 |
25 | useLayoutEffect(() => {
26 | const TOTAL = 100
27 | let progress = 0, timer = 0
28 | let total = TOTAL // percent 100%
29 | const div = el.current!
30 |
31 | function animate(time: number) {
32 | const used = total * 0.1
33 | total -= used
34 | progress += used
35 |
36 | // update progress
37 | if (progress < TOTAL * 0.9999) {
38 | div.style.width = `${progress}%`
39 | timer = requestAnimationFrame(animate)
40 | } else {
41 | div.style.width = '100%'
42 | cancelAnimationFrame(timer)
43 | }
44 | }
45 |
46 | timer = requestAnimationFrame(animate)
47 | return () => {
48 | div.style.width = '100%'
49 | cancelAnimationFrame(timer)
50 | };
51 | }, []);
52 |
53 | return
62 | }
63 |
64 | export const Progress: React.FC = ({
65 | size = 'default'
66 | }) => {
67 |
68 | const node = useRef(document.createElement('div'))
69 |
70 | useLayoutEffect(() => {
71 | const el = node.current
72 | document.body.append(el)
73 | return () => {
74 | document.body.removeChild(el)
75 | }
76 | }, [])
77 |
78 |
79 |
80 | return createPortal(
81 | ,
82 | node.current
83 | )
84 | }
--------------------------------------------------------------------------------
/src/pages/login/wave.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react'
2 | import { Canvas, useFrame } from '@react-three/fiber'
3 | import * as THREE from 'three'
4 | import { useAppStore } from '@/stores'
5 |
6 | const Wave = ({ color }: { color: THREE.Color }) => {
7 | const meshRef = useRef(null)
8 | const geometryRef = useRef(null)
9 |
10 | // Wave parameters
11 | const waveParams = {
12 | amplitude: 2,
13 | wavelength: 10,
14 | frequency: 0.2,
15 | }
16 |
17 | useFrame(({ clock }) => {
18 | const time = clock.getElapsedTime()
19 | const geometry = geometryRef.current!
20 | const positionAttribute = geometry.attributes.position
21 |
22 | for (let i = 0; i < positionAttribute.count; i++) {
23 | const x = positionAttribute.getX(i)
24 | const y = positionAttribute.getY(i)
25 | const z =
26 | Math.sin(x * waveParams.frequency + time) * waveParams.amplitude +
27 | Math.cos(y * waveParams.frequency + time) * waveParams.amplitude
28 | positionAttribute.setZ(i, z)
29 | }
30 |
31 | positionAttribute.needsUpdate = true // Notify Three.js that the vertices have changed
32 | })
33 |
34 | return (
35 |
36 |
37 |
38 |
39 | )
40 | }
41 |
42 | export const WaveComponent: React.FC = () => {
43 | const [{ colorPrimary }] = useAppStore()
44 |
45 | const color = new THREE.Color(colorPrimary)
46 | const rgb = [color.r, color.g, color.b].map((i) => Math.round(i * 255))
47 |
48 | return (
49 |
65 | )
66 | }
67 |
--------------------------------------------------------------------------------
/src/pages/register/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { Form, Input, Button, Checkbox } from 'antd'
3 | import { UserOutlined, LockOutlined } from '@ant-design/icons'
4 | import { onCreate } from '@/services/account'
5 | import { LoginForm, RegisterForm } from '@/types/account'
6 | import { storage } from "@utils/tools"
7 | import { JWT_TOKEN, REDIRECT_URL } from "@constants/index"
8 |
9 |
10 | const RegisterPage: React.FC = () => {
11 |
12 | const [form] = Form.useForm()
13 |
14 | const [loading, setLoading] = useState(false)
15 |
16 | const onFinish = (values: LoginForm) => {
17 | onCreate(values).then(res => {
18 | window.location.href = '/login'
19 | })
20 | }
21 |
22 |
23 | return
24 | style={{
25 | 'maxWidth': '300px',
26 | 'margin': '0 auto',
27 | 'paddingTop': '15%',
28 | }}
29 | form={form}
30 | onFinish={onFinish}
31 | >
32 | Create Your Account
33 |
34 | } placeholder="Username"/>
35 |
36 |
37 | } type="password" placeholder="Password"/>
38 |
39 |
40 | name="confirm"
41 | dependencies={['password']}
42 | rules={[
43 | {required: true},
44 | ({ getFieldValue }) => ({
45 | validator(_, value) {
46 | if (!value || getFieldValue('password') === value) {
47 | return Promise.resolve();
48 | }
49 | return Promise.reject(new Error('The new password that you entered do not match!'));
50 | },
51 | }),
52 | ]}
53 | >
54 | } type="password" placeholder="Confirm Password"/>
55 |
56 |
57 |
58 |
59 |
60 | Already have an account?
Login
61 |
59 |
60 | mini测试
61 |
62 |
63 |
66 |
67 |
70 |
71 |
72 |
73 |
85 |
41 |
53 |
54 | My Zone
55 |
56 |
54 |
55 | redux测试
56 |
57 |
58 |
61 |
62 |
65 |
66 |
67 |
68 |
63 |
堆栈信息：
64 |
65 |
66 |
67 |
75 |
参数：
76 |
77 |
78 |
79 |
81 |
请求头：
82 |
83 |
84 |
85 |
87 |
响应头：
88 |
89 |
90 |
91 |
97 |
创建时间：
{createdAt}
98 |
record.id}
91 | dataSource={pageData.data}
92 | pagination={pageData.meta}
93 | onChange={({current, pageSize}) => onQuery(current, pageSize)}
94 | />
95 |
96 | }
97 |
98 | export default TagPage
--------------------------------------------------------------------------------
/src/pages/stocks/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { Row, Col, Form, Table, Input, Button, Spin, Select } from 'antd'
3 | import { listColumns } from './util'
4 | import { stockPageList, StockQuery } from '../../services/stock'
5 | import { data2PageData, pageData2Params } from '../../utils/tools'
6 | import { Stock, Market, Board } from '../../types/stock'
7 | import { object2Options } from '@utils/tools'
8 | import { StockChart } from './components/stockChart'
9 | import { useNavigate } from 'react-router-dom'
10 |
11 | const StockList: React.FC = () => {
12 |
13 | const navigate = useNavigate()
14 |
15 | const [form] = Form.useForm()
16 |
17 | const [loading, setLoading] = useState(false)
18 | const [pageData, setPageData] = useState(data2PageData())
19 | const [marketOpts] = useState(object2Options(Market))
20 | const [blockOpts] = useState(object2Options(Board))
21 |
22 | const onQuery = (params = pageData2Params(pageData.meta)) => {
23 | const vals = form.getFieldsValue()
24 | setLoading(true)
25 | stockPageList({...params, ...vals}).then(res => {
26 | setPageData(data2PageData(res))
27 | }).finally(() => setLoading(false))
28 | }
29 |
30 | const onOpts = (data: Stock) => {
31 | navigate(`${data.id}`)
32 | }
33 |
34 | useEffect(() => {
35 | onQuery()
36 | }, [])
37 |
38 |
39 | return
40 |
41 |
68 | onQuery({page, pageSize})
75 | }}
76 | />
77 |
78 | }
79 |
80 |
81 | export default StockList
--------------------------------------------------------------------------------
/src/utils/httpHelper.ts:
--------------------------------------------------------------------------------
1 | import { AxiosResponse } from 'axios'
2 | import { REDIRECT_URL } from '@constants/index'
3 | import { message as $msg } from '@components/message'
4 | import { storage } from './tools'
5 |
6 | class HttpHelper {
7 |
8 | public successHelper (res: AxiosResponse): void {
9 | const url = res.config.url?.split('?')[0]!
10 | const {data: { errors }} = res
11 | switch (res.status) {
12 | case 200 :
13 | const path = url.split('/api')
14 | if (path[1] === '/login') {
15 | $msg.success('登陆成功')
16 | } else if (path[1] === '/logout') {
17 | storage.clear(true)
18 | sessionStorage.clear()
19 | $msg.success('退出登录成功')
20 | setTimeout(() => {
21 | location.href = '/login'
22 | }, 1000)
23 | } else if (path[1] === '/upload-file') {
24 | $msg.success('文件上传成功')
25 | } else if (path[0] === '/graphql' && errors) {
26 | $msg.error(errors[0].message) // graphql status:200 response contain errors
27 | } else {
28 | $msg.success('Succeed')
29 | }
30 | break
31 | default :
32 | //
33 | break
34 | }
35 | }
36 |
37 | public errorHelper (err: AxiosResponse): void {
38 | // console.log(err, 'err.data.msg.statusText')
39 | const path = err.config.url?.split('?')[0]!
40 | const data = err.data // server response data
41 | switch (err.status) {
42 | case 400 :
43 | const arr = path.split('/api')
44 | if (arr[1] === '/login') {
45 | $msg.error('用户名或密码错误')
46 | } else if (arr[1] === '/upload-file') {
47 | $msg.error('文件上传失败')
48 | } else if (arr[0]) {
49 | $msg.error(data.errors[0].message || 'graphql params error')
50 | } else {
51 | $msg.error(data.msg || err.statusText)
52 | }
53 | break
54 | case 401 :
55 | storage.clear(true)
56 | $msg.error('请重新登录')
57 | sessionStorage.setItem(REDIRECT_URL, location.pathname)
58 | setTimeout(() => {
59 | location.href = '/login'
60 | }, 1000)
61 | break
62 | case 403 :
63 | $msg.error(data.msg || '错误, 禁止访问')
64 | break
65 | case 404 :
66 | $msg.error('未找到, 未找到资源,请检查')
67 | break
68 | case 405 :
69 | $msg.error('错误, 此方法不允许')
70 | break
71 | case 406 :
72 | $msg.error('错误, 此方法不接受,请检查')
73 | break
74 | case 500 :
75 | $msg.error(data.msg || data.errors[0])
76 | break
77 | case 503 :
78 | $msg.error('连接被拒绝, 服务不可用')
79 | break
80 | case 504 :
81 | $msg.error('网关超时, 请与运维小郭联系')
82 | break
83 | default :
84 | $msg.error('错误, 服务端未知错误')
85 | break
86 | }
87 | }
88 | }
89 |
90 | export default new HttpHelper
--------------------------------------------------------------------------------
/src/pages/leaveMsg/leaveMsgList.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import {inject, observer} from 'mobx-react'
3 | import { Row, Col, Form, Input, Button, Table, Modal, Badge, } from 'antd'
4 | import { DatePicker } from '@components/datePicker'
5 | import { ColumnProps } from 'antd/lib/table'
6 | import { LeaveMsg } from '@models/leaveMsg'
7 |
8 | const FormItem = Form.Item
9 |
10 |
11 | @inject('leaveMsgListStore')
12 | @observer
13 | export default class LeaveMsgList extends React.Component {
14 |
15 | state = {
16 | modalTitle: '参数详情',
17 | visible: false,
18 | modalTxt: '',
19 | visibleLog: false,
20 | detailInfo: {}
21 | }
22 |
23 | columns: ColumnProps[] = [{
24 | title: 'ID',
25 | dataIndex: 'id',
26 | width: '15%',
27 | }, {
28 | title: '留言内容',
29 | dataIndex: 'description',
30 | width: '240px',
31 | }, {
32 | title: 'IP',
33 | dataIndex: 'ip',
34 | width: '120px',
35 | }, {
36 | title: '创建时间',
37 | width: '120px',
38 | dataIndex: 'createdAt',
39 | key: 'createdAt',
40 | sorter: true
41 | }, {
42 | title: '操作',
43 | dataIndex: '',
44 | width: '80px',
45 | render: (text: string, record) =>
46 | }]
47 |
48 | viewDetail (data: LeaveMsg) {
49 | this.props.history.push(`/blog/message/detail/${data.id}`)
50 | }
51 |
52 | componentDidMount () {
53 | this.props.leaveMsgListStore.search()
54 | }
55 |
56 | render () {
57 | const { value, loading, list, meta, createdAt, inputChange, search, clear } = this.props.leaveMsgListStore
58 |
59 | return
60 |
82 | record.id}
87 | dataSource={list}
88 | pagination={meta}
89 | loading={loading}
90 | onChange={search}
91 | />
92 |
93 |
94 | }
95 | }
--------------------------------------------------------------------------------
/src/pages/comment/commentList.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import {inject, observer} from 'mobx-react'
3 | import { Row, Col, Form, Input, Button, Table, Modal, DatePicker, } from 'antd'
4 | // import { DatePicker } from 'components/datePicker'
5 | import { ColumnProps } from 'antd/lib/table'
6 | import { Comment } from '@models/comment'
7 |
8 | const FormItem = Form.Item
9 |
10 |
11 | @inject('commentListStore')
12 | @observer
13 | export default class CommentList extends React.Component {
14 |
15 | state = {
16 | modalTitle: '参数详情',
17 | visible: false,
18 | modalTxt: '',
19 | visibleLog: false,
20 | detailInfo: {}
21 | }
22 |
23 | columns: ColumnProps[] = [{
24 | title: 'ID',
25 | dataIndex: 'id',
26 | width: '15%',
27 | }, {
28 | title: '评论内容',
29 | dataIndex: 'description',
30 | width: '240px',
31 | }, {
32 | title: '文章ID',
33 | dataIndex: 'articleId',
34 | width: '120px',
35 | }, {
36 | title: 'IP',
37 | dataIndex: 'ip',
38 | width: '100px',
39 | }, {
40 | title: '创建时间',
41 | width: '120px',
42 | dataIndex: 'createdAt',
43 | key: 'createdAt',
44 | sorter: true
45 | }, {
46 | title: '操作',
47 | dataIndex: '',
48 | width: '80px',
49 | render: (text: string, record) =>
50 | }]
51 |
52 | viewDetail (data: Comment) {
53 | this.props.history.push(`/blog/comment/${data.id}`)
54 | }
55 |
56 | componentDidMount () {
57 | this.props.commentListStore.search()
58 | }
59 |
60 | render () {
61 | const { value, loading, list, meta, createdAt, inputChange, search, clear } = this.props.commentListStore
62 |
63 | return
64 |
85 | record.id}
90 | dataSource={list}
91 | pagination={meta}
92 | loading={loading}
93 | onChange={search}
94 | />
95 |
96 |
97 | }
98 | }
--------------------------------------------------------------------------------
/src/pages/tag/tagList.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import {inject, observer} from 'mobx-react'
3 | import { Row, Col, Form, Input, Button, Table, Modal, DatePicker, } from 'antd'
4 | // import { DatePicker } from 'components/datePicker'
5 | import { ColumnProps } from 'antd/lib/table'
6 | import { Tag } from '@models/tag'
7 |
8 | const FormItem = Form.Item
9 |
10 |
11 | @inject('tagListStore')
12 | @observer
13 | export default class ArticleTypeList extends React.Component {
14 |
15 | state = {
16 | modalTitle: '参数详情',
17 | visible: false,
18 | modalTxt: '',
19 | visibleLog: false,
20 | detailInfo: {}
21 | }
22 |
23 | columns: ColumnProps[] = [{
24 | title: 'ID',
25 | dataIndex: 'id',
26 | width: '15%',
27 | }, {
28 | title: '标签名称',
29 | dataIndex: 'name',
30 | width: '100px',
31 | }, {
32 | title: '备注',
33 | dataIndex: 'remark',
34 | width: '120px',
35 | }, {
36 | title: '创建时间',
37 | width: '120px',
38 | dataIndex: 'createdAt',
39 | key: 'createdAt',
40 | sorter: true
41 | }, {
42 | title: '操作',
43 | dataIndex: '',
44 | width: '80px',
45 | render: (text: string, record) =>
46 | }]
47 |
48 | viewDetail (data: Tag) {
49 | this.props.history.push(`/blog/tag/detail/${data.id}`)
50 | }
51 |
52 | create = () => {
53 | this.props.history.push('/blog/tag/create')
54 | }
55 |
56 | componentDidMount () {
57 | this.props.tagListStore.search()
58 | }
59 |
60 | render () {
61 | const { value, loading, list, meta, createdAt, inputChange, search, clear } = this.props.tagListStore
62 |
63 | return
64 |
86 | record.id}
91 | dataSource={list}
92 | pagination={meta}
93 | loading={loading}
94 | onChange={search}
95 | />
96 |
97 |
98 | }
99 | }
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 'env': {
3 | 'browser': true,
4 | 'es6': true
5 | },
6 | 'extends': [
7 | 'eslint:recommended',
8 | 'plugin:react/recommended',
9 | 'plugin:@typescript-eslint/recommended',
10 | ],
11 | 'settings': {
12 | 'react': {
13 | 'pragma': 'React',
14 | 'version': 'detect'
15 | }
16 | },
17 | 'globals': {
18 | 'Atomics': 'readonly',
19 | 'SharedArrayBuffer': 'readonly'
20 | },
21 | 'parser': '@typescript-eslint/parser',
22 | 'parserOptions': {
23 | 'ecmaFeatures': {
24 | 'jsx': true
25 | },
26 | 'ecmaVersion': 2018,
27 | 'sourceType': 'module',
28 | 'project': './tsconfig.json'
29 | },
30 | 'plugins': [
31 | 'react',
32 | '@typescript-eslint'
33 | ],
34 | 'rules': {
35 | 'no-undef': 0,
36 | 'indent': 0,
37 | 'linebreak-style': [ 2, 'unix' ],
38 | 'quotes': 0,
39 | 'semi': 0,
40 | 'no-unused-vars': 0,
41 | 'prefer-spread': 0,
42 | 'prefer-const': 0,
43 | 'switch-colon-spacing': [2, {'after': true, 'before': true}],
44 | 'default-case': 2,
45 | 'no-spaced-func': 2,
46 | 'no-case-declarations': 0,
47 | 'no-sparse-arrays': 0,
48 | 'space-before-function-paren': 0,
49 | 'keyword-spacing': 0,
50 | 'key-spacing': 2,
51 | 'comma-spacing': 0,
52 | 'space-before-blocks': 2,
53 | 'arrow-spacing': 2,
54 | 'semi-spacing': 2,
55 | 'no-irregular-whitespace': 2,
56 |
57 | // react jsx
58 | 'react/display-name': 0,
59 | 'react/jsx-filename-extension': 0,
60 | 'react/jsx-first-prop-new-line': 0,
61 | 'react/jsx-indent': [ 2, 2 ],
62 | 'react/jsx-indent-props': [2, 2],
63 | 'react/prop-types': 0,
64 | 'react/jsx-key': 2,
65 |
66 | // @typescript-eslint
67 | '@typescript-eslint/quotes': [2, 'single'],
68 | '@typescript-eslint/indent': [2, 2],
69 | '@typescript-eslint/camelcase': 0,
70 | '@typescript-eslint/explicit-function-return-type': 0,
71 | '@typescript-eslint/no-non-null-assertion': 0,
72 | '@typescript-eslint/no-use-before-define': 0,
73 | '@typescript-eslint/member-delimiter-style': 0,
74 | '@typescript-eslint/no-unused-vars': 0,
75 | '@typescript-eslint/no-explicit-any': 0,
76 | '@typescript-eslint/explicit-member-accessibility': 0,
77 | '@typescript-eslint/no-angle-bracket-type-assertion': 0,
78 | '@typescript-eslint/interface-name-prefix': 0,
79 | '@typescript-eslint/no-empty-function': 1,
80 | '@typescript-eslint/semi': [2, 'never'],
81 | '@typescript-eslint/no-inferrable-types': 0,
82 | '@typescript-eslint/no-empty-interface': 0,
83 | '@typescript-eslint/class-name-casing': 0,
84 | '@typescript-eslint/explicit-module-boundary-types': 0,
85 | '@typescript-eslint/space-before-function-paren': [2],
86 | '@typescript-eslint/keyword-spacing': 0,
87 | '@typescript-eslint/comma-spacing': 2,
88 | '@typescript-eslint/type-annotation-spacing': 2,
89 | '@typescript-eslint/ban-types': 0
90 | }
91 | }
--------------------------------------------------------------------------------
/src/pages/article/useDetail.ts:
--------------------------------------------------------------------------------
1 | import { Form } from 'antd'
2 | import { useState, useEffect, useRef } from 'react'
3 | import { useParams } from 'react-router-dom'
4 | import { Article, ArticlesData } from '@models/article'
5 | import { ArticleType } from '@models/articleType'
6 | import { Tag } from '@models/tag'
7 | import { useGraphQL } from '@/services/http'
8 | import { parseISO } from 'date-fns'
9 |
10 | const query = `
11 | query article($id: String){
12 | article(id: $id){
13 | id,title,abstract,description,isTop,tag,createdAt,createdBy,
14 | typeId
15 | }
16 | articleTypes(page: 1, pageSize: 99){
17 | list{id,name}
18 | }
19 | tags(page: 1, pageSize: 99){
20 | list{id,name}
21 | }
22 | }`
23 |
24 | const mutation = `
25 | mutation upateArticle($id: String, $title: String!, $abstract: String!, $typeId: String!, $description: String!, $isTop: Int, $tag: String!,){
26 | editArticle(id: $id, title: $title, abstract: $abstract, typeId: $typeId, description: $description, isTop: $isTop, tag: $tag){
27 | id
28 | }
29 | }`
30 |
31 |
32 | // type ResData = {
33 | // article: Article
34 | // articleTypes: {
35 | // list: ArticleType[]
36 | // }
37 | // tags: {
38 | // list: Tag[]
39 | // }
40 | // }
41 |
42 | const mapData = (data: Article, save = false) => {
43 | if(save) {
44 | (data as any).tag = data.tag.join(',');
45 | (data as any).createdAt = undefined
46 | } else {
47 | (data as any).createdAt = parseISO(data.createdAt);
48 | data.tag = (data as any).tag.split(',')
49 | }
50 |
51 | return data
52 | }
53 |
54 | export const useDetail = () => {
55 | const {id} = useParams<{id: string}>()
56 |
57 | const [form] = Form.useForm()
58 |
59 | const [loading, setLoading] = useState(false)
60 |
61 | const optsRef = useRef<{
62 | types: ArticleType[]
63 | tags: Tag[]
64 | }>({
65 | types: [],
66 | tags: [],
67 | })
68 |
69 | const isEdit = !!Form.useWatch('id', form)
70 |
71 | const onSave = (vals: Article) => {
72 | const variables = mapData(vals, true)
73 | setLoading(true)
74 | return useGraphQL(
75 | mutation,
76 | variables
77 | ).finally(() => setLoading(false))
78 | }
79 |
80 | const onQuery = () => {
81 | setLoading(true)
82 | useGraphQL(
83 | query,
84 | { id }
85 | ).then(res => {
86 | const article = res.article;
87 | if(article) {
88 | form.setFieldsValue(mapData(article))
89 | }
90 | // 减少渲染，谨慎使用
91 | optsRef.current = {
92 | types: res.articleTypes.list,
93 | tags: res.tags.list,
94 | }
95 | })
96 | .finally(() => setLoading(false))
97 | }
98 |
99 | useEffect(() => {
100 | onQuery()
101 | }, [id])
102 |
103 | return {
104 | form,
105 | optsRef,
106 | loading,
107 | isEdit,
108 | onQuery,
109 | onSave,
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/src/pages/login/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useEffect } from 'react'
2 | import { useNavigate } from 'react-router-dom'
3 | import { Form, Input, Button, Checkbox, Space, Flex, theme } from 'antd'
4 | import { UserOutlined, LockOutlined } from '@ant-design/icons'
5 | import { onLogin } from '../../services/account'
6 | import { LoginForm } from '@/types/account'
7 | import { storage } from '@utils/tools'
8 | import { JWT_TOKEN, REDIRECT_URL } from '@constants/index'
9 | import { useAppStore, setAuthorized } from '@/stores'
10 | import { WaveComponent } from './wave'
11 | import styles from './style.module.scss'
12 | import Typed from 'typed.js'
13 | import { useTranslation } from 'react-i18next'
14 |
15 | const LoginPage: React.FC = () => {
16 | const {
17 | token: { colorBgBase },
18 | } = theme.useToken()
19 | const { t } = useTranslation()
20 | const navigate = useNavigate()
21 |
22 | const [, dispatch] = useAppStore()
23 |
24 | const [form] = Form.useForm()
25 |
26 | const el = useRef(null)
27 | const [loading, setLoading] = useState(false)
28 |
29 | const onFinish = (values: LoginForm) => {
30 | setLoading(true)
31 | onLogin(values)
32 | .then((res) => {
33 | storage.set(JWT_TOKEN, res) // store jwt token
34 | dispatch(setAuthorized(true))
35 | navigate(sessionStorage.getItem(REDIRECT_URL) || '/')
36 | })
37 | .finally(() => setLoading(false))
38 | }
39 |
40 | // useEffect(() => {
41 | // const typed = new Typed(el.current, {
42 | // strings: [t('introduction')],
43 | // startDelay: 200,
44 | // typeSpeed: 30,
45 | // loop: true,
46 | // })
47 | // return () => {
48 | // typed.destroy()
49 | // }
50 | // }, [])
51 |
52 | return (
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
81 |
record.id}
96 | dataSource={pageData.data}
97 | pagination={pageData.meta}
98 | onChange={onChange}
99 | />
100 |
101 | }
102 |
103 | export default LeaveMsgPage
--------------------------------------------------------------------------------
/src/components/editor/new.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from 'react'
2 | import { QuillOptionsStatic } from 'quill'
3 | import * as Q from 'quill'
4 | // const ImageResize = require('quill-image-resize-module/src/ImageResize.js');
5 | // console.log(ImageResize, 'imageresize')
6 | interface IQuillOptions extends QuillOptionsStatic {
7 | imageResize: {
8 | displaySize: boolean
9 | }
10 | }
11 |
12 | const Quill: any = Q
13 | // Quill.register('modules/imageResize', ImageResize)
14 |
15 | const toolbarOptions = [
16 | ['bold', 'italic', 'underline', 'strike'], // toggled buttons
17 | ['blockquote', 'code-block'],
18 |
19 | [{ header: 1 }, { header: 2 }], // custom button values
20 | [{ list: 'ordered'}, { list: 'bullet' }],
21 | [{ script: 'sub'}, { script: 'super' }], // superscript/subscript
22 | [{ indent: '-1'}, { indent: '+1' }], // outdent/indent
23 | [{ direction: 'rtl' }], // text direction
24 |
25 | [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
26 | [{ header: [1, 2, 3, 4, 5, 6, false] }],
27 |
28 | [{ color: [] as any }, { background: [] as any }], // dropdown with defaults from theme
29 | [{ font: [] as any }],
30 | [{ align: [] as any }],
31 |
32 | ['link', 'image'],
33 |
34 | ['clean'], // remove formatting button
35 | ]
36 |
37 | interface IEditor {
38 | disabled?: boolean
39 | value?: string
40 | onChange?(text: string): () => void
41 | }
42 |
43 | export const QuillEditor: React.FC = ({
44 | disabled,
45 | value,
46 | onChange
47 | }) => {
48 | const divRef = useRef(null)
49 | const editorRef = useRef(null)
50 | const oldVal = useRef('')
51 |
52 | const quillOptions: IQuillOptions = {
53 | // debug: false,
54 | imageResize: {
55 | displaySize: true // default false
56 | },
57 | modules: {
58 | toolbar: toolbarOptions,
59 | },
60 | placeholder: '请在这里写下你的内容...',
61 | readOnly: false,
62 | theme: 'snow',
63 | }
64 |
65 | useEffect(() => {
66 | editorRef.current = new Quill(divRef.current, quillOptions)
67 |
68 | editorRef.current.on('text-change', (delta: any, oldDelta: any, source: any) => {
69 | let _html: string = editorRef.current.root.innerHTML
70 | if (_html === '
') {
71 | _html = ''
72 | }
73 | if (oldVal.current !== _html) {
74 | oldVal.current = _html
75 | onChange && onChange(_html)
76 | }
77 | })
78 | }, [])
79 |
80 | // change editor value
81 | const changeEditorText = () => {
82 | // 赋值
83 | if (oldVal.current !== value && value !== undefined && editorRef.current) {
84 | editorRef.current.root.innerHTML = value
85 | oldVal.current = value
86 | }
87 | }
88 |
89 | useEffect(() => {
90 | changeEditorText()
91 | }, [value])
92 |
93 | return
94 |
95 | {disabled ?
: ''}
96 |
record.id}
102 | dataSource={pageData.data}
103 | pagination={pageData.meta}
104 | onChange={({current, pageSize}) => onQuery(current, pageSize)}
105 | />
106 |
107 | }
108 |
109 | export default ArticleTypePage
110 |
--------------------------------------------------------------------------------
/src/pages/stocks/history.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { Row, Col, Form, Table, Input, Button, Spin, Select } from 'antd'
3 | import { DatePicker } from '@components/datePicker'
4 | import { historyColumns } from './util'
5 | import { stockHistoryPageList, stockHistoryTotal } from '../../services/stockHistory'
6 | import { data2PageData, pageData2Params } from '../../utils/tools'
7 | import { StockHistory } from '../../types/stockHistory'
8 | import { debounce } from 'lodash'
9 | import { stockPageList } from '@/services/stock'
10 | import { StockQuery } from '@/types/stock'
11 |
12 | const StockHistoryList: React.FC = () => {
13 |
14 | const [form] = Form.useForm()
15 |
16 | const [loading, setLoading] = useState(false)
17 | const [pageData, setPageData] = useState(data2PageData({
18 | data: [],
19 | meta: {page: 1, pageSize: 10, total: 0}
20 | }))
21 | const [stockOpts, setStockOpts] = useState[]>([])
22 | const [total, setTotal] = useState(0)
23 |
24 | const onQuery = (params = pageData2Params(pageData.meta)) => {
25 | const vals = form.getFieldsValue()
26 | if(!vals.id) {
27 | return
28 | }
29 | setLoading(true)
30 | stockHistoryPageList({...params, ...vals, }).then(res => {
31 | const data = data2PageData(res)
32 | setPageData(data)
33 | }).finally(() => setLoading(false))
34 | }
35 |
36 | const onSelectSearch = debounce((v: string) => {
37 | if(!v.trim()) {
38 | return
39 | }
40 | stockPageList({
41 | code: v,
42 | name: v,
43 | page: 1,
44 | pageSize: 100,
45 | noPage: true
46 | }).then(res => {
47 | const list = res.data.map>(item => ({value: item.id, label: item.name}))
48 | setStockOpts(list)
49 | })
50 | }, 500)
51 |
52 | useEffect(() => {
53 | onQuery()
54 | stockHistoryTotal().then(setTotal)
55 | }, [])
56 |
57 | const onSelect = (id: number) => {
58 | onQuery({id, page: 1, pageSize: 10} as any)
59 | }
60 |
61 |
62 | return
63 |
84 | onQuery({page, pageSize})
93 | }}
94 | />
95 |
96 | }
97 |
98 |
99 | export default StockHistoryList
--------------------------------------------------------------------------------
/src/components/editor/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { QuillOptionsStatic } from 'quill'
3 | import * as Q from 'quill'
4 | // const ImageResize = require('quill-image-resize-module/src/ImageResize.js');
5 | // console.log(ImageResize, 'imageresize')
6 | interface IQuillOptions extends QuillOptionsStatic {
7 | imageResize: {
8 | displaySize: boolean
9 | }
10 | }
11 |
12 | const Quill: any = Q
13 | // Quill.register('modules/imageResize', ImageResize)
14 |
15 | const toolbarOptions = [
16 | ['bold', 'italic', 'underline', 'strike'], // toggled buttons
17 | ['blockquote', 'code-block'],
18 |
19 | [{ header: 1 }, { header: 2 }], // custom button values
20 | [{ list: 'ordered'}, { list: 'bullet' }],
21 | [{ script: 'sub'}, { script: 'super' }], // superscript/subscript
22 | [{ indent: '-1'}, { indent: '+1' }], // outdent/indent
23 | [{ direction: 'rtl' }], // text direction
24 |
25 | [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
26 | [{ header: [1, 2, 3, 4, 5, 6, false] }],
27 |
28 | [{ color: [] as any }, { background: [] as any }], // dropdown with defaults from theme
29 | [{ font: [] as any }],
30 | [{ align: [] as any }],
31 |
32 | ['link', 'image'],
33 |
34 | ['clean'], // remove formatting button
35 | ]
36 |
37 | interface IEditor {
38 | disabled?: boolean
39 | value: string
40 | onChange(text: string): () => void
41 | }
42 |
43 | export default class QuillEditorComponent extends React.Component {
44 | value: string = this.props.value
45 | oldVal: string = ''
46 |
47 | quillEditor: any = null
48 | quillOptions: IQuillOptions = {
49 | // debug: false,
50 | imageResize: {
51 | displaySize: true // default false
52 | },
53 | modules: {
54 | toolbar: toolbarOptions,
55 | },
56 | placeholder: '请在这里写下你的内容...',
57 | readOnly: false,
58 | theme: 'snow',
59 | }
60 |
61 | $editor: HTMLDivElement | null = null
62 |
63 | componentDidMount () {
64 | const { onChange } = this.props
65 | const { $editor } = this
66 | this.quillEditor = new Quill($editor, this.quillOptions)
67 |
68 | this.quillEditor.on('text-change', (delta: any, oldDelta: any, source: any) => {
69 | let _html: string = this.quillEditor.root.innerHTML
70 | if (_html === '
') {
71 | _html = ''
72 | }
73 | if (this.oldVal !== _html) {
74 | this.oldVal = _html
75 | onChange && onChange(_html)
76 | }
77 | })
78 | }
79 |
80 | // change editor value
81 | changeEditorText = () => {
82 | const { value } = this.props
83 | // 赋值
84 | if (this.oldVal !== value && value !== undefined && this.quillEditor) {
85 | this.quillEditor.root.innerHTML = value
86 | this.oldVal = value
87 | }
88 | }
89 |
90 | render () {
91 | const { disabled } = this.props
92 | this.changeEditorText()
93 |
94 | return
95 |
this.$editor = el}>
96 | {disabled ?
: ''}
97 |
record.id}
97 | dataSource={list}
98 | pagination={meta}
99 | loading={loading}
100 | onChange={search}
101 | />
102 |
103 |
104 | }
105 | }
--------------------------------------------------------------------------------
/src/pages/comment/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { useNavigate } from 'react-router-dom'
3 | import {
4 | Row, Col, Form, Input, Button, Table, Modal,
5 | Flex, Space, Spin,
6 | } from 'antd'
7 | import { DatePicker } from '@components/datePicker'
8 | import { Comment } from '@models/comment'
9 | import { useList } from './useList'
10 | import { ColumnsType, TablePaginationConfig, SorterResult, SortOrder } from 'antd/lib/table/interface'
11 |
12 | const CommentPage: React.FC = () => {
13 |
14 | const navigate = useNavigate()
15 |
16 | const {
17 | form,
18 | loading,
19 | pageData,
20 | onQuery
21 | } = useList()
22 |
23 | const columns: ColumnsType = [{
24 | title: 'ID',
25 | dataIndex: 'id',
26 | width: '10%',
27 | }, {
28 | title: '评论内容',
29 | dataIndex: 'description',
30 | width: '240px',
31 | }, {
32 | title: '文章ID',
33 | dataIndex: 'articleId',
34 | width: '100px',
35 | }, {
36 | title: 'IP',
37 | dataIndex: 'ip',
38 | width: '100px',
39 | }, {
40 | title: '创建时间',
41 | width: '120px',
42 | dataIndex: 'createdAt',
43 | key: 'createdAt',
44 | sorter: true
45 | }, {
46 | title: '编辑时间',
47 | width: '120px',
48 | dataIndex: 'updatedAt',
49 | key: 'updatedAt',
50 | }, {
51 | title: '操作',
52 | dataIndex: '',
53 | width: '80px',
54 | render: (text: string, record: Comment, index: number) =>
55 | }]
56 |
57 | const onView = (data: Comment) => {
58 | navigate(`${data.id}`)
59 | }
60 |
61 | const onChange = ({current, pageSize}: TablePaginationConfig, filters: any, sorter: any) => {
62 | const order = sorter.order, _order: any = {}
63 | if(order) {
64 | const field = sorter.columnKey!
65 | _order[field] = sorter.order === 'ascend' ? 'ASC' : 'DESC'
66 | }
67 | onQuery(current, pageSize, _order)
68 | }
69 |
70 | return
71 |
102 | record.id}
107 | dataSource={pageData.data}
108 | pagination={pageData.meta}
109 | onChange={onChange}
110 | />
111 |
112 | }
113 |
114 | export default CommentPage
--------------------------------------------------------------------------------
/src/pages/user/userEdit.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import {inject, observer} from 'mobx-react'
3 | import { Row, Col, Form, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
4 |
5 | const FormItem = Form.Item
6 |
7 | @inject('userEditStore')
8 | @observer
9 | export default class UserEdit extends React.Component {
10 |
11 | userTypeList = [
12 | {name: '超级用户', value: 0},
13 | {name: '普通用户', value: 1},
14 | {name: '测试用户', value: 9},
15 | ]
16 |
17 | sexList = [
18 | {name: '女', value: 0},
19 | {name: '男', value: 1}
20 | ]
21 |
22 | back = () => {
23 | this.props.history.go(-1)
24 | }
25 |
26 | componentDidMount () {
27 | const {id}: any = this.props.match.params
28 | this.props.userEditStore.getDetail(id)
29 | }
30 |
31 | render () {
32 | const { mainData, inputChange, update } = this.props.userEditStore
33 |
34 | return
35 |
84 |
85 |
86 | }
87 | }
--------------------------------------------------------------------------------
/src/pages/article/detail.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useNavigate } from 'react-router-dom'
3 | import {
4 | Row, Col, Form, Input, Button,
5 | Spin,
6 | FormItemProps,
7 | Space,
8 | Select,
9 | Checkbox,
10 | } from 'antd'
11 | import { useDetail } from './useDetail'
12 | import { Article } from '@models/article'
13 | import { QuillEditor } from '@components/editor/new'
14 | import { DatePicker } from '@components/datePicker'
15 |
16 | const formLayout: FormItemProps = {
17 | labelCol: {
18 | span: 4,
19 | },
20 | wrapperCol: {
21 | span: 16
22 | }
23 | }
24 |
25 | const ArticleDetailPage: React.FC = () => {
26 |
27 | const {
28 | form,
29 | optsRef,
30 | isEdit,
31 | loading,
32 | onSave,
33 | } = useDetail()
34 |
35 | const navigate = useNavigate()
36 |
37 | const { types, tags } = optsRef.current
38 |
39 | const goBack = () => {
40 | navigate(-1)
41 | }
42 |
43 | const onFinish = (vals: Article) => {
44 | onSave(vals).then(goBack)
45 | }
46 |
47 | return
48 | 文章详情
49 |
111 |
112 | }
113 |
114 | export default ArticleDetailPage
--------------------------------------------------------------------------------
/src/pages/home/components/header.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState} from 'react'
2 | import { invert } from 'lodash'
3 | import {
4 | App,
5 | Layout, Space,
6 | Dropdown,
7 | MenuProps,
8 | Button,
9 | Flex,
10 | ColorPicker,
11 | Tag,
12 | Segmented,
13 | SegmentedProps,
14 | theme as antdTheme,
15 | ConfigProvider,
16 | } from 'antd'
17 | import {
18 | UserOutlined,
19 | SunOutlined,
20 | MoonOutlined,
21 | AppleOutlined,
22 | } from '@ant-design/icons'
23 | import { useAppStore, setLang, setPrimary } from '@/stores'
24 | import { onLogout } from '@/services/account'
25 | import { LangI18n, Theme } from '@/types/global'
26 | import { storage } from '@/utils/tools'
27 | import { COLOR_PRIMARY_KEY, PRIMARY_COLOR } from '@/constants'
28 | import { useTheme } from '@/stores/hooks'
29 | import styles from './header.module.scss'
30 | import classNames from 'classnames'
31 |
32 |
33 | const { Header } = Layout
34 |
35 | export const HeaderComponent: React.FC = () => {
36 |
37 | const {
38 | token,
39 | } = antdTheme.useToken();
40 |
41 | const [{
42 | lang,
43 | theme,
44 | colorPrimary,
45 | },
46 | dispatch
47 | ] = useAppStore()
48 |
49 | const { modal } = App.useApp();
50 |
51 | const items: MenuProps['items'] = [
52 | {
53 | label: setLang(lang)}>{invert(LangI18n)[lang]}
,
54 | key: '1',
55 | },
56 | {
57 | type: 'divider',
58 | },
59 | {
60 | label: 'Log out',
61 | key: '9',
62 | onClick: () => {
63 | modal.confirm({
64 | title: 'Are you sure you want to log out?',
65 | onOk: () => {
66 | return onLogout().then(() => {
67 | console.log('退出..')
68 | })
69 | },
70 | })
71 | },
72 | },
73 | ]
74 |
75 | const onChangePrimary = (color: string) => {
76 | storage.set(COLOR_PRIMARY_KEY, color)
77 | dispatch(setPrimary(color))
78 | }
79 |
80 | return (
81 |
82 |
83 |
84 | (
86 |
87 |
88 | Default: onChangePrimary(PRIMARY_COLOR)}
93 | >{PRIMARY_COLOR}
94 |
95 |
96 | Current: {colorPrimary}
97 |
98 | {panel}
99 |
100 | )}
101 | value={colorPrimary}
102 | onChangeComplete={(value) => onChangePrimary(value.toHexString())}
103 | />
104 |
105 | useTheme(value as Theme, dispatch)}
108 | options={Object.values(Theme).map(i => ({
109 | value: i,
110 | icon: i === Theme.Light ? : ,
111 | }))
112 | }
113 | />
114 |
115 | } />
116 |
117 |
118 |
119 | )
120 | }
121 |
--------------------------------------------------------------------------------