├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github └── workflows │ └── test.yml ├── .gitignore ├── .prettierignore ├── .prettierrc.js ├── .script └── genBlockConfig.js ├── .stylelintrc.js ├── .umirc.js ├── AccountCenter ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── Center.less │ ├── _mock.ts │ ├── components │ ├── Applications │ │ ├── index.less │ │ └── index.tsx │ ├── ArticleListContent │ │ ├── index.less │ │ └── index.tsx │ ├── Articles │ │ ├── index.less │ │ └── index.tsx │ ├── AvatarList │ │ ├── index.less │ │ └── index.tsx │ └── Projects │ │ ├── index.less │ │ └── index.tsx │ ├── data.d.ts │ ├── index.tsx │ └── service.ts ├── AccountSettings ├── .gitignore ├── .umirc.js ├── README.md ├── package.json ├── snapshot.png └── src │ ├── _mock.ts │ ├── components │ ├── BaseView.less │ ├── PhoneView.tsx │ ├── base.tsx │ ├── binding.tsx │ ├── notification.tsx │ └── security.tsx │ ├── data.d.ts │ ├── geographic │ ├── city.json │ └── province.json │ ├── index.tsx │ ├── service.ts │ └── style.less ├── CONTRIBUTING.md ├── DashboardAnalysis ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── _mock.ts │ ├── components │ ├── Charts │ │ ├── Bar │ │ │ └── index.tsx │ │ ├── ChartCard │ │ │ ├── index.less │ │ │ └── index.tsx │ │ ├── Field │ │ │ ├── index.less │ │ │ └── index.tsx │ │ ├── Gauge │ │ │ └── index.tsx │ │ ├── MiniArea │ │ │ └── index.tsx │ │ ├── MiniBar │ │ │ └── index.tsx │ │ ├── MiniProgress │ │ │ └── index.tsx │ │ ├── Pie │ │ │ └── index.tsx │ │ ├── TagCloud │ │ │ └── index.tsx │ │ ├── TimelineChart │ │ │ └── index.tsx │ │ ├── WaterWave │ │ │ └── index.tsx │ │ ├── autoHeight.tsx │ │ ├── index.less │ │ └── index.tsx │ ├── IntroduceRow.tsx │ ├── NumberInfo │ │ ├── index.less │ │ └── index.tsx │ ├── OfflineData.tsx │ ├── PageLoading │ │ └── index.tsx │ ├── ProportionSales.tsx │ ├── SalesCard.tsx │ ├── TopSearch.tsx │ └── Trend │ │ ├── index.less │ │ └── index.tsx │ ├── data.d.ts │ ├── index.tsx │ ├── service.ts │ ├── style.less │ └── utils │ ├── Yuan.tsx │ ├── utils.less │ └── utils.ts ├── DashboardMonitor ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── _mock.ts │ ├── components │ ├── ActiveChart │ │ ├── index.less │ │ └── index.tsx │ ├── Charts │ │ ├── Gauge │ │ │ └── index.tsx │ │ ├── MiniArea │ │ │ └── index.tsx │ │ ├── Pie │ │ │ └── index.tsx │ │ ├── TagCloud │ │ │ └── index.tsx │ │ ├── WaterWave │ │ │ └── index.tsx │ │ └── autoHeight.tsx │ └── Map │ │ └── index.tsx │ ├── data.d.ts │ ├── index.tsx │ ├── service.ts │ └── style.less ├── DashboardWorkplace ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── _mock.ts │ ├── components │ ├── EditableLinkGroup │ │ ├── index.less │ │ └── index.tsx │ └── Radar │ │ ├── autoHeight.tsx │ │ └── index.tsx │ ├── data.d.ts │ ├── index.tsx │ ├── service.ts │ └── style.less ├── EditorFlow ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── common │ └── IconFont │ │ └── index.ts │ ├── components │ ├── EditorContextMenu │ │ ├── FlowContextMenu.tsx │ │ ├── KoniContextMenu.tsx │ │ ├── MenuItem.tsx │ │ ├── MindContextMenu.tsx │ │ ├── index.less │ │ └── index.tsx │ ├── EditorDetailPanel │ │ ├── DetailForm.tsx │ │ ├── FlowDetailPanel.tsx │ │ ├── KoniDetailPanel.tsx │ │ ├── MindDetailPanel.tsx │ │ ├── index.less │ │ └── index.tsx │ ├── EditorItemPanel │ │ ├── FlowItemPanel.tsx │ │ ├── KoniItemPanel.tsx │ │ ├── index.less │ │ └── index.tsx │ ├── EditorMinimap │ │ └── index.tsx │ └── EditorToolbar │ │ ├── FlowToolbar.tsx │ │ ├── KoniToolbar.tsx │ │ ├── MindToolbar.tsx │ │ ├── ToolbarButton.tsx │ │ ├── index.less │ │ └── index.tsx │ ├── index.less │ └── index.tsx ├── EditorKoni ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── common │ └── IconFont │ │ └── index.ts │ ├── components │ ├── EditorContextMenu │ │ ├── FlowContextMenu.tsx │ │ ├── KoniContextMenu.tsx │ │ ├── MenuItem.tsx │ │ ├── MindContextMenu.tsx │ │ ├── index.less │ │ └── index.tsx │ ├── EditorDetailPanel │ │ ├── DetailForm.tsx │ │ ├── FlowDetailPanel.tsx │ │ ├── KoniDetailPanel.tsx │ │ ├── MindDetailPanel.tsx │ │ ├── index.less │ │ └── index.tsx │ ├── EditorItemPanel │ │ ├── FlowItemPanel.tsx │ │ ├── KoniItemPanel.tsx │ │ ├── index.less │ │ └── index.tsx │ ├── EditorMinimap │ │ └── index.tsx │ └── EditorToolbar │ │ ├── FlowToolbar.tsx │ │ ├── KoniToolbar.tsx │ │ ├── MindToolbar.tsx │ │ ├── ToolbarButton.tsx │ │ ├── index.less │ │ └── index.tsx │ ├── index.less │ └── index.tsx ├── EditorMind ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── common │ └── IconFont │ │ └── index.ts │ ├── components │ ├── EditorContextMenu │ │ ├── FlowContextMenu.tsx │ │ ├── KoniContextMenu.tsx │ │ ├── MenuItem.tsx │ │ ├── MindContextMenu.tsx │ │ ├── index.less │ │ └── index.tsx │ ├── EditorDetailPanel │ │ ├── DetailForm.tsx │ │ ├── FlowDetailPanel.tsx │ │ ├── KoniDetailPanel.tsx │ │ ├── MindDetailPanel.tsx │ │ ├── index.less │ │ └── index.tsx │ ├── EditorItemPanel │ │ ├── FlowItemPanel.tsx │ │ ├── KoniItemPanel.tsx │ │ ├── index.less │ │ └── index.tsx │ ├── EditorMinimap │ │ └── index.tsx │ └── EditorToolbar │ │ ├── FlowToolbar.tsx │ │ ├── KoniToolbar.tsx │ │ ├── MindToolbar.tsx │ │ ├── ToolbarButton.tsx │ │ ├── index.less │ │ └── index.tsx │ ├── index.less │ ├── index.tsx │ └── worldCup2018.json ├── EmptyPage ├── .gitignore ├── README.md ├── package.json └── src │ ├── index.less │ └── index.tsx ├── Exception403 ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ └── index.tsx ├── Exception404 ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ └── index.tsx ├── Exception500 ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ └── index.tsx ├── FormAdvancedForm ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── _mock.ts │ ├── components │ └── TableForm.tsx │ ├── index.tsx │ ├── service.ts │ └── style.less ├── FormBasicForm ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── _mock.ts │ ├── index.tsx │ ├── service.ts │ └── style.less ├── FormStepForm ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── _mock.ts │ ├── data.d.ts │ ├── index.tsx │ ├── service.ts │ └── style.less ├── LICENSE ├── ListBasicList ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── _mock.ts │ ├── components │ └── OperationModal.tsx │ ├── data.d.ts │ ├── index.tsx │ ├── service.ts │ ├── style.less │ └── utils │ └── utils.less ├── ListCardList ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── _mock.ts │ ├── data.d.ts │ ├── index.tsx │ ├── service.ts │ ├── style.less │ └── utils │ └── utils.less ├── ListSearch ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ └── index.tsx ├── ListSearchApplications ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── _mock.ts │ ├── components │ ├── StandardFormRow │ │ ├── index.less │ │ └── index.tsx │ └── TagSelect │ │ ├── index.less │ │ └── index.tsx │ ├── data.d.ts │ ├── index.tsx │ ├── service.ts │ ├── style.less │ └── utils │ └── utils.less ├── ListSearchArticles ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── _mock.ts │ ├── components │ ├── ArticleListContent │ │ ├── index.less │ │ └── index.tsx │ ├── StandardFormRow │ │ ├── index.less │ │ └── index.tsx │ └── TagSelect │ │ ├── index.less │ │ └── index.tsx │ ├── data.d.ts │ ├── index.tsx │ ├── service.ts │ └── style.less ├── ListSearchProjects ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── _mock.ts │ ├── components │ ├── AvatarList │ │ ├── index.less │ │ └── index.tsx │ ├── StandardFormRow │ │ ├── index.less │ │ └── index.tsx │ └── TagSelect │ │ ├── index.less │ │ └── index.tsx │ ├── data.d.ts │ ├── index.tsx │ ├── service.ts │ ├── style.less │ └── utils │ └── utils.less ├── ListTableList ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── _mock.ts │ ├── components │ ├── CreateForm.tsx │ └── UpdateForm.tsx │ ├── data.d.ts │ ├── index.tsx │ └── service.ts ├── ProfileAdvanced ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── _mock.ts │ ├── data.d.ts │ ├── index.tsx │ ├── service.ts │ └── style.less ├── ProfileBasic ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── _mock.ts │ ├── data.d.ts │ ├── index.tsx │ ├── service.ts │ └── style.less ├── README.md ├── README.zh-CN.md ├── ResultFail ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── index.less │ └── index.tsx ├── ResultSuccess ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── index.less │ └── index.tsx ├── UserRegister ├── .gitignore ├── README.md ├── package.json ├── snapshot.png └── src │ ├── _mock.ts │ ├── index.tsx │ ├── service.ts │ └── style.less ├── UserRegisterResult ├── .gitignore ├── .umirc.js ├── README.md ├── package.json ├── snapshot.png └── src │ ├── index.tsx │ └── style.less ├── azure-pipelines.yml ├── jsconfig.json ├── lerna.json ├── package.json ├── tsconfig.json ├── typings.d.ts └── umi-block.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [Makefile] 16 | indent_style = tab 17 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /scripts 2 | **/node_modules/** 3 | _scripts 4 | /lambda/mock/** 5 | _test_ 6 | .eslintrc.js 7 | 8 | node_modules -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [require.resolve('@umijs/fabric/dist/eslint')], 3 | rules: { 4 | '@typescript-eslint/camelcase': 0, 5 | '@typescript-eslint/class-name-casing': 0, 6 | 'import/no-extraneous-dependencies': 0, 7 | '@typescript-eslint/no-explicit-any': 0, 8 | 'import/no-unresolved': 0, 9 | '@typescript-eslint/naming-convention': 0, 10 | }, 11 | globals: { 12 | ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true, 13 | page: true, 14 | }, 15 | parserOptions: { 16 | project: './tsconfig.json', 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Test CI 2 | 3 | on: [push, pull_request] 4 | jobs: 5 | test: 6 | runs-on: ubuntu-latest 7 | 8 | steps: 9 | - name: checkout 10 | uses: actions/checkout@master 11 | 12 | - name: install 13 | run: yarn 14 | 15 | - name: lint 16 | run: yarn run lint 17 | 18 | test-js: 19 | runs-on: ubuntu-latest 20 | 21 | steps: 22 | - name: clone 23 | run: git clone https://github.com/ant-design/ant-design-pro.git --depth=1 24 | 25 | - name: install 26 | run: cd ant-design-pro && yarn 27 | 28 | - name: fetch 29 | run: cd ant-design-pro && yarn pro fetch-blocks --js --branch ${GITHUB_REF##*/} 30 | 31 | - name: lint:fix 32 | run: cd ant-design-pro && npm run lint:fix && yarn run prettier 33 | 34 | - name: lint 35 | run: cd ant-design-pro && npm run lint 36 | - name: build 37 | run: cd ant-design-pro && npm run build 38 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | **/node_modules 5 | # roadhog-api-doc ignore 6 | /src/utils/request-temp.js 7 | _roadhog-api-doc 8 | 9 | # production 10 | /dist 11 | /.vscode 12 | 13 | # misc 14 | .DS_Store 15 | npm-debug.log* 16 | yarn-error.log 17 | 18 | /coverage 19 | .idea 20 | yarn.lock 21 | package-lock.json 22 | *bak 23 | .vscode 24 | 25 | # visual studio code 26 | .history 27 | *.log 28 | 29 | functions/mock 30 | .temp/** 31 | 32 | # umi 33 | .umi 34 | .umi-production 35 | 36 | # screenshot 37 | screenshot 38 | .firebase 39 | 40 | .eslintcache 41 | /locales/** 42 | /models/** 43 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | **/*.svg 2 | package.json 3 | .umi 4 | .umi-production 5 | /dist 6 | .dockerignore 7 | .DS_Store 8 | .eslintignore 9 | *.png 10 | *.toml 11 | docker 12 | .editorconfig 13 | Dockerfile* 14 | .gitignore 15 | .prettierignore 16 | LICENSE 17 | .eslintcache 18 | *.lock 19 | yarn-error.log 20 | .history 21 | CNAME 22 | /build 23 | umi-block.json 24 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | const fabric = require('@umijs/fabric'); 2 | 3 | module.exports = { 4 | ...fabric.prettier, 5 | }; 6 | -------------------------------------------------------------------------------- /.stylelintrc.js: -------------------------------------------------------------------------------- 1 | const fabric = require('@umijs/fabric'); 2 | 3 | module.exports = { 4 | ...fabric.stylelint, 5 | }; 6 | -------------------------------------------------------------------------------- /.umirc.js: -------------------------------------------------------------------------------- 1 | export default { 2 | locale: { 3 | // default zh-CN 4 | default: 'zh-CN', 5 | // default true, when it is true, will use `navigator.language` overwrite default 6 | antd: true, 7 | baseNavigator: true, 8 | }, 9 | antd: {}, 10 | targets: { 11 | ie: 11, 12 | }, 13 | chainWebpack(memo) { 14 | memo.module.rule('ts-in-node_modules').include.clear(); 15 | return memo; 16 | }, 17 | dva: {}, 18 | mfsu: {}, 19 | webpack5: {}, 20 | layout: { 21 | disableContentMargin: false, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /AccountCenter/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /AccountCenter/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/accountcenter 2 | 3 | AccountCenter 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/AccountCenter 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /AccountCenter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/account-center", 3 | "version": "0.0.1", 4 | "description": "个人中心一般用于暂时用户的基本信息，已经相关的信息展示。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/accountcenter" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "@ant-design/icons": "^4.0.0", 16 | "classnames": "^2.2.6", 17 | "moment": "^2.24.0", 18 | "numeral": "^2.0.6", 19 | "react-router": "^4.3.1" 20 | }, 21 | "peerDependencies": { 22 | "@ant-design/pro-layout": "^6.0.0" 23 | }, 24 | "blockConfig": { 25 | "specVersion": "0.1" 26 | }, 27 | "devDependencies": { 28 | "@types/express": "^4.17.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /AccountCenter/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/AccountCenter/snapshot.png -------------------------------------------------------------------------------- /AccountCenter/src/Center.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .avatarHolder { 4 | margin-bottom: 24px; 5 | text-align: center; 6 | 7 | & > img { 8 | width: 104px; 9 | height: 104px; 10 | margin-bottom: 20px; 11 | } 12 | 13 | .name { 14 | margin-bottom: 4px; 15 | color: @heading-color; 16 | font-weight: 500; 17 | font-size: 20px; 18 | line-height: 28px; 19 | } 20 | } 21 | 22 | .detail { 23 | p { 24 | position: relative; 25 | margin-bottom: 8px; 26 | padding-left: 26px; 27 | 28 | &:last-child { 29 | margin-bottom: 0; 30 | } 31 | } 32 | 33 | i { 34 | position: absolute; 35 | top: 4px; 36 | left: 0; 37 | width: 14px; 38 | height: 14px; 39 | } 40 | } 41 | 42 | .tagsTitle, 43 | .teamTitle { 44 | margin-bottom: 12px; 45 | color: @heading-color; 46 | font-weight: 500; 47 | } 48 | 49 | .tags { 50 | :global { 51 | .ant-tag { 52 | margin-bottom: 8px; 53 | } 54 | } 55 | } 56 | 57 | .team { 58 | :global { 59 | .ant-avatar { 60 | margin-right: 12px; 61 | } 62 | } 63 | 64 | a { 65 | display: block; 66 | margin-bottom: 24px; 67 | overflow: hidden; 68 | color: @text-color; 69 | white-space: nowrap; 70 | text-overflow: ellipsis; 71 | word-break: break-all; 72 | transition: color 0.3s; 73 | 74 | &:hover { 75 | color: @primary-color; 76 | } 77 | } 78 | } 79 | 80 | .tabsCard { 81 | :global { 82 | .ant-card-head { 83 | padding: 0 16px; 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /AccountCenter/src/components/Applications/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .filterCardList { 4 | margin-bottom: -24px; 5 | :global { 6 | .ant-card-meta-content { 7 | margin-top: 0; 8 | } 9 | // disabled white space 10 | .ant-card-meta-avatar { 11 | font-size: 0; 12 | } 13 | 14 | .ant-list .ant-list-item-content-single { 15 | max-width: 100%; 16 | } 17 | } 18 | .cardInfo { 19 | margin-top: 16px; 20 | margin-left: 40px; 21 | zoom: 1; 22 | &::before, 23 | &::after { 24 | display: table; 25 | content: ' '; 26 | } 27 | &::after { 28 | clear: both; 29 | height: 0; 30 | font-size: 0; 31 | visibility: hidden; 32 | } 33 | & > div { 34 | position: relative; 35 | float: left; 36 | width: 50%; 37 | text-align: left; 38 | p { 39 | margin: 0; 40 | font-size: 24px; 41 | line-height: 32px; 42 | } 43 | p:first-child { 44 | margin-bottom: 4px; 45 | color: @text-color-secondary; 46 | font-size: 12px; 47 | line-height: 20px; 48 | } 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /AccountCenter/src/components/ArticleListContent/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .listContent { 4 | .description { 5 | max-width: 720px; 6 | line-height: 22px; 7 | } 8 | .extra { 9 | margin-top: 16px; 10 | color: @text-color-secondary; 11 | line-height: 22px; 12 | & > :global(.ant-avatar) { 13 | position: relative; 14 | top: 1px; 15 | width: 20px; 16 | height: 20px; 17 | margin-right: 8px; 18 | vertical-align: top; 19 | } 20 | & > em { 21 | margin-left: 16px; 22 | color: @disabled-color; 23 | font-style: normal; 24 | } 25 | } 26 | } 27 | 28 | @media screen and (max-width: @screen-xs) { 29 | .listContent { 30 | .extra { 31 | & > em { 32 | display: block; 33 | margin-top: 8px; 34 | margin-left: 0; 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /AccountCenter/src/components/ArticleListContent/index.tsx: -------------------------------------------------------------------------------- 1 | import { Avatar } from 'antd'; 2 | import React from 'react'; 3 | import moment from 'moment'; 4 | import styles from './index.less'; 5 | 6 | export type ApplicationsProps = { 7 | data: { 8 | content?: string; 9 | updatedAt?: any; 10 | avatar?: string; 11 | owner?: string; 12 | href?: string; 13 | }; 14 | }; 15 | const ArticleListContent: React.FC = ({ 16 | data: { content, updatedAt, avatar, owner, href }, 17 | }) => ( 18 |
19 |
{content}
20 |
21 | 22 | {owner} 发布在 {href} 23 | {moment(updatedAt).format('YYYY-MM-DD HH:mm')} 24 |
25 |
26 | ); 27 | 28 | export default ArticleListContent; 29 | -------------------------------------------------------------------------------- /AccountCenter/src/components/Articles/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .articleList { 4 | :global { 5 | .ant-list-item:first-child { 6 | padding-top: 0; 7 | } 8 | } 9 | } 10 | a.listItemMetaTitle { 11 | color: @heading-color; 12 | } 13 | -------------------------------------------------------------------------------- /AccountCenter/src/components/Articles/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StarTwoTone, LikeOutlined, MessageFilled } from '@ant-design/icons'; 3 | import { useRequest } from 'umi'; 4 | import { List, Tag } from 'antd'; 5 | import ArticleListContent from '../ArticleListContent'; 6 | import type { ListItemDataType } from '../../data.d'; 7 | import { queryFakeList } from '../../service'; 8 | import styles from './index.less'; 9 | 10 | const Articles: React.FC = () => { 11 | const IconText: React.FC<{ 12 | icon: React.ReactNode; 13 | text: React.ReactNode; 14 | }> = ({ icon, text }) => ( 15 | 16 | {icon} {text} 17 | 18 | ); 19 | 20 | // 获取tab列表数据 21 | const { data: listData } = useRequest(() => { 22 | return queryFakeList({ 23 | count: 30, 24 | }); 25 | }); 26 | return ( 27 | 28 | size="large" 29 | className={styles.articleList} 30 | rowKey="id" 31 | itemLayout="vertical" 32 | dataSource={listData?.list || []} 33 | renderItem={(item) => ( 34 | } text={item.star} />, 38 | } text={item.like} />, 39 | } text={item.message} />, 40 | ]} 41 | > 42 | 45 | {item.title} 46 | 47 | } 48 | description={ 49 | 50 | Ant Design 51 | 设计语言 52 | 蚂蚁金服 53 | 54 | } 55 | /> 56 | 57 | 58 | )} 59 | /> 60 | ); 61 | }; 62 | 63 | export default Articles; 64 | -------------------------------------------------------------------------------- /AccountCenter/src/components/AvatarList/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .avatarList { 4 | display: inline-block; 5 | ul { 6 | display: inline-block; 7 | margin-left: 8px; 8 | font-size: 0; 9 | } 10 | } 11 | 12 | .avatarItem { 13 | display: inline-block; 14 | width: @avatar-size-base; 15 | height: @avatar-size-base; 16 | margin-left: -8px; 17 | font-size: @font-size-base; 18 | :global { 19 | .ant-avatar { 20 | border: 1px solid @border-color-base; 21 | } 22 | } 23 | } 24 | 25 | .avatarItemLarge { 26 | width: @avatar-size-lg; 27 | height: @avatar-size-lg; 28 | } 29 | 30 | .avatarItemSmall { 31 | width: @avatar-size-sm; 32 | height: @avatar-size-sm; 33 | } 34 | 35 | .avatarItemMini { 36 | width: 20px; 37 | height: 20px; 38 | :global { 39 | .ant-avatar { 40 | width: 20px; 41 | height: 20px; 42 | line-height: 20px; 43 | 44 | .ant-avatar-string { 45 | font-size: 12px; 46 | line-height: 18px; 47 | } 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /AccountCenter/src/components/Projects/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .coverCardList { 4 | .card { 5 | :global { 6 | .ant-card-meta-title { 7 | margin-bottom: 4px; 8 | & > a { 9 | display: inline-block; 10 | max-width: 100%; 11 | color: @heading-color; 12 | } 13 | } 14 | .ant-card-meta-description { 15 | height: 44px; 16 | overflow: hidden; 17 | line-height: 22px; 18 | } 19 | } 20 | 21 | &:hover { 22 | :global { 23 | .ant-card-meta-title > a { 24 | color: @primary-color; 25 | } 26 | } 27 | } 28 | } 29 | 30 | .cardItemContent { 31 | display: flex; 32 | height: 20px; 33 | margin-top: 16px; 34 | margin-bottom: -4px; 35 | line-height: 20px; 36 | & > span { 37 | flex: 1; 38 | color: @text-color-secondary; 39 | font-size: 12px; 40 | } 41 | .avatarList { 42 | flex: 0 1 auto; 43 | } 44 | } 45 | .cardList { 46 | margin-top: 24px; 47 | } 48 | 49 | :global { 50 | .ant-list .ant-list-item-content-single { 51 | max-width: 100%; 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /AccountCenter/src/components/Projects/index.tsx: -------------------------------------------------------------------------------- 1 | import { Card, List } from 'antd'; 2 | import { useRequest } from 'umi'; 3 | import React from 'react'; 4 | import moment from 'moment'; 5 | import { queryFakeList } from '../../service'; 6 | import AvatarList from '../AvatarList'; 7 | import type { ListItemDataType } from '../../data.d'; 8 | import styles from './index.less'; 9 | 10 | const Projects: React.FC = () => { 11 | // 获取tab列表数据 12 | const { data: listData } = useRequest(() => { 13 | return queryFakeList({ 14 | count: 30, 15 | }); 16 | }); 17 | 18 | return ( 19 | 20 | className={styles.coverCardList} 21 | rowKey="id" 22 | grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }} 23 | dataSource={listData?.list || []} 24 | renderItem={(item) => ( 25 | 26 | }> 27 | {item.title}} description={item.subDescription} /> 28 |
29 | {moment(item.updatedAt).fromNow()} 30 |
31 | 32 | {item.members.map((member) => ( 33 | 38 | ))} 39 | 40 |
41 |
42 | 43 | 44 | )} 45 | /> 46 | ); 47 | }; 48 | 49 | export default Projects; 50 | -------------------------------------------------------------------------------- /AccountCenter/src/data.d.ts: -------------------------------------------------------------------------------- 1 | export type tabKeyType = 'articles' | 'applications' | 'projects'; 2 | export interface TagType { 3 | key: string; 4 | label: string; 5 | } 6 | 7 | export type GeographicType = { 8 | province: { 9 | label: string; 10 | key: string; 11 | }; 12 | city: { 13 | label: string; 14 | key: string; 15 | }; 16 | }; 17 | 18 | export type NoticeType = { 19 | id: string; 20 | title: string; 21 | logo: string; 22 | description: string; 23 | updatedAt: string; 24 | member: string; 25 | href: string; 26 | memberLink: string; 27 | }; 28 | 29 | export type CurrentUser = { 30 | name: string; 31 | avatar: string; 32 | userid: string; 33 | notice: NoticeType[]; 34 | email: string; 35 | signature: string; 36 | title: string; 37 | group: string; 38 | tags: TagType[]; 39 | notifyCount: number; 40 | unreadCount: number; 41 | country: string; 42 | geographic: GeographicType; 43 | address: string; 44 | phone: string; 45 | }; 46 | 47 | export type Member = { 48 | avatar: string; 49 | name: string; 50 | id: string; 51 | }; 52 | 53 | export type ListItemDataType = { 54 | id: string; 55 | owner: string; 56 | title: string; 57 | avatar: string; 58 | cover: string; 59 | status: 'normal' | 'exception' | 'active' | 'success'; 60 | percent: number; 61 | logo: string; 62 | href: string; 63 | body?: any; 64 | updatedAt: number; 65 | createdAt: number; 66 | subDescription: string; 67 | description: string; 68 | activeUser: number; 69 | newUser: number; 70 | star: number; 71 | like: number; 72 | message: number; 73 | content: string; 74 | members: Member[]; 75 | }; 76 | -------------------------------------------------------------------------------- /AccountCenter/src/service.ts: -------------------------------------------------------------------------------- 1 | import { request } from 'umi'; 2 | import type { CurrentUser, ListItemDataType } from './data.d'; 3 | 4 | export async function queryCurrent(): Promise<{ data: CurrentUser }> { 5 | return request('/api/currentUserDetail'); 6 | } 7 | 8 | export async function queryFakeList(params: { 9 | count: number; 10 | }): Promise<{ data: { list: ListItemDataType[] } }> { 11 | return request('/api/fake_list_Detail', { 12 | params, 13 | }); 14 | } 15 | -------------------------------------------------------------------------------- /AccountSettings/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /AccountSettings/.umirc.js: -------------------------------------------------------------------------------- 1 | export default { 2 | locale: { 3 | // default zh-CN 4 | default: 'zh-CN', 5 | // default true, when it is true, will use `navigator.language` overwrite default 6 | antd: true, 7 | baseNavigator: true, 8 | }, 9 | dva: { 10 | hmr: true, 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /AccountSettings/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/accountsettings 2 | 3 | AccountSettings 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/AccountSettings 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /AccountSettings/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/account-settings", 3 | "version": "0.0.1", 4 | "description": "通常是用于用户设置名称、头像、用途、私密性等信息。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/accountsettings" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "@ant-design/icons": "^4.0.0", 16 | "@ant-design/pro-form": "^1.16.0" 17 | }, 18 | "peerDependencies": { 19 | "@ant-design/pro-layout": "^6.0.0" 20 | }, 21 | "blockConfig": { 22 | "specVersion": "0.1" 23 | }, 24 | "devDependencies": { 25 | "@types/express": "^4.17.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /AccountSettings/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/AccountSettings/snapshot.png -------------------------------------------------------------------------------- /AccountSettings/src/_mock.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-extraneous-dependencies 2 | import type { Request, Response } from 'express'; 3 | 4 | const city = require('./geographic/city.json'); 5 | const province = require('./geographic/province.json'); 6 | 7 | function getProvince(_: Request, res: Response) { 8 | return res.json({ 9 | data: province, 10 | }); 11 | } 12 | 13 | function getCity(req: Request, res: Response) { 14 | return res.json({ 15 | data: city[req.params.province], 16 | }); 17 | } 18 | 19 | function getCurrentUse(req: Request, res: Response) { 20 | return res.json({ 21 | data: { 22 | name: 'Serati Ma', 23 | avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png', 24 | userid: '00000001', 25 | email: 'antdesign@alipay.com', 26 | signature: '海纳百川，有容乃大', 27 | title: '交互专家', 28 | group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED', 29 | tags: [ 30 | { 31 | key: '0', 32 | label: '很有想法的', 33 | }, 34 | { 35 | key: '1', 36 | label: '专注设计', 37 | }, 38 | { 39 | key: '2', 40 | label: '辣~', 41 | }, 42 | { 43 | key: '3', 44 | label: '大长腿', 45 | }, 46 | { 47 | key: '4', 48 | label: '川妹子', 49 | }, 50 | { 51 | key: '5', 52 | label: '海纳百川', 53 | }, 54 | ], 55 | notifyCount: 12, 56 | unreadCount: 11, 57 | country: 'China', 58 | geographic: { 59 | province: { 60 | label: '浙江省', 61 | key: '330000', 62 | }, 63 | city: { 64 | label: '杭州市', 65 | key: '330100', 66 | }, 67 | }, 68 | address: '西湖区工专路 77 号', 69 | phone: '0752-268888888', 70 | }, 71 | }); 72 | } 73 | // 代码中会兼容本地 service mock 以及部署站点的静态数据 74 | export default { 75 | // 支持值为 Object 和 Array 76 | 'GET /api/accountSettingCurrentUser': getCurrentUse, 77 | 'GET /api/geographic/province': getProvince, 78 | 'GET /api/geographic/city/:province': getCity, 79 | }; 80 | -------------------------------------------------------------------------------- /AccountSettings/src/components/BaseView.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .baseView { 4 | display: flex; 5 | padding-top: 12px; 6 | 7 | :global { 8 | .ant-legacy-form-item .ant-legacy-form-item-control-wrapper { 9 | width: 100%; 10 | } 11 | } 12 | 13 | .left { 14 | min-width: 224px; 15 | max-width: 448px; 16 | } 17 | .right { 18 | flex: 1; 19 | padding-left: 104px; 20 | .avatar_title { 21 | height: 22px; 22 | margin-bottom: 8px; 23 | color: @heading-color; 24 | font-size: @font-size-base; 25 | line-height: 22px; 26 | } 27 | .avatar { 28 | width: 144px; 29 | height: 144px; 30 | margin-bottom: 12px; 31 | overflow: hidden; 32 | img { 33 | width: 100%; 34 | } 35 | } 36 | .button_view { 37 | width: 144px; 38 | text-align: center; 39 | } 40 | } 41 | } 42 | 43 | .area_code { 44 | width: 72px; 45 | } 46 | .phone_number { 47 | width: 214px; 48 | } 49 | 50 | @media screen and (max-width: @screen-xl) { 51 | .baseView { 52 | flex-direction: column-reverse; 53 | 54 | .right { 55 | display: flex; 56 | flex-direction: column; 57 | align-items: center; 58 | max-width: 448px; 59 | padding: 20px; 60 | .avatar_title { 61 | display: none; 62 | } 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /AccountSettings/src/components/PhoneView.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { Input } from 'antd'; 4 | import styles from './PhoneView.less'; 5 | 6 | type PhoneViewProps = { 7 | value?: string; 8 | onChange?: (value: string) => void; 9 | }; 10 | 11 | const PhoneView: React.FC = (props) => { 12 | const { value, onChange } = props; 13 | let values = ['', '']; 14 | if (value) { 15 | values = value.split('-'); 16 | } 17 | 18 | return ( 19 | <> 20 | { 24 | if (onChange) { 25 | onChange(`${e.target.value}-${values[1]}`); 26 | } 27 | }} 28 | /> 29 | { 32 | if (onChange) { 33 | onChange(`${values[0]}-${e.target.value}`); 34 | } 35 | }} 36 | value={values[1]} 37 | /> 38 | 39 | ); 40 | }; 41 | 42 | export default PhoneView; 43 | -------------------------------------------------------------------------------- /AccountSettings/src/components/binding.tsx: -------------------------------------------------------------------------------- 1 | import { AlipayOutlined, DingdingOutlined, TaobaoOutlined } from '@ant-design/icons'; 2 | import { List } from 'antd'; 3 | import React, { Fragment } from 'react'; 4 | 5 | const BindingView: React.FC = () => { 6 | const getData = () => [ 7 | { 8 | title: '绑定淘宝', 9 | description: '当前未绑定淘宝账号', 10 | actions: [绑定], 11 | avatar: , 12 | }, 13 | { 14 | title: '绑定支付宝', 15 | description: '当前未绑定支付宝账号', 16 | actions: [绑定], 17 | avatar: , 18 | }, 19 | { 20 | title: '绑定钉钉', 21 | description: '当前未绑定钉钉账号', 22 | actions: [绑定], 23 | avatar: , 24 | }, 25 | ]; 26 | 27 | return ( 28 | 29 | ( 33 | 34 | 39 | 40 | )} 41 | /> 42 | 43 | ); 44 | }; 45 | 46 | export default BindingView; 47 | -------------------------------------------------------------------------------- /AccountSettings/src/components/notification.tsx: -------------------------------------------------------------------------------- 1 | import { List, Switch } from 'antd'; 2 | import React, { Fragment } from 'react'; 3 | 4 | type Unpacked = T extends (infer U)[] ? U : T; 5 | 6 | const NotificationView: React.FC = () => { 7 | const getData = () => { 8 | const Action = ; 9 | return [ 10 | { 11 | title: '账户密码', 12 | description: '其他用户的消息将以站内信的形式通知', 13 | actions: [Action], 14 | }, 15 | { 16 | title: '系统消息', 17 | description: '系统消息将以站内信的形式通知', 18 | actions: [Action], 19 | }, 20 | { 21 | title: '待办任务', 22 | description: '待办任务将以站内信的形式通知', 23 | actions: [Action], 24 | }, 25 | ]; 26 | }; 27 | 28 | const data = getData(); 29 | return ( 30 | 31 | > 32 | itemLayout="horizontal" 33 | dataSource={data} 34 | renderItem={(item) => ( 35 | 36 | 37 | 38 | )} 39 | /> 40 | 41 | ); 42 | }; 43 | 44 | export default NotificationView; 45 | -------------------------------------------------------------------------------- /AccountSettings/src/components/security.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { List } from 'antd'; 3 | 4 | type Unpacked = T extends (infer U)[] ? U : T; 5 | 6 | const passwordStrength = { 7 | strong: 强, 8 | medium: 中, 9 | weak: 弱 Weak, 10 | }; 11 | 12 | const SecurityView: React.FC = () => { 13 | const getData = () => [ 14 | { 15 | title: '账户密码', 16 | description: ( 17 | <> 18 | 当前密码强度： 19 | {passwordStrength.strong} 20 | 21 | ), 22 | actions: [修改], 23 | }, 24 | { 25 | title: '密保手机', 26 | description: `已绑定手机：138****8293`, 27 | actions: [修改], 28 | }, 29 | { 30 | title: '密保问题', 31 | description: '未设置密保问题，密保问题可有效保护账户安全', 32 | actions: [设置], 33 | }, 34 | { 35 | title: '备用邮箱', 36 | description: `已绑定邮箱：ant***sign.com`, 37 | actions: [修改], 38 | }, 39 | { 40 | title: 'MFA 设备', 41 | description: '未绑定 MFA 设备，绑定后，可以进行二次确认', 42 | actions: [绑定], 43 | }, 44 | ]; 45 | 46 | const data = getData(); 47 | return ( 48 | <> 49 | > 50 | itemLayout="horizontal" 51 | dataSource={data} 52 | renderItem={(item) => ( 53 | 54 | 55 | 56 | )} 57 | /> 58 | 59 | ); 60 | }; 61 | 62 | export default SecurityView; 63 | -------------------------------------------------------------------------------- /AccountSettings/src/data.d.ts: -------------------------------------------------------------------------------- 1 | export type TagType = { 2 | key: string; 3 | label: string; 4 | }; 5 | 6 | export type GeographicItemType = { 7 | name: string; 8 | id: string; 9 | }; 10 | 11 | export type GeographicType = { 12 | province: GeographicItemType; 13 | city: GeographicItemType; 14 | }; 15 | 16 | export type NoticeType = { 17 | id: string; 18 | title: string; 19 | logo: string; 20 | description: string; 21 | updatedAt: string; 22 | member: string; 23 | href: string; 24 | memberLink: string; 25 | }; 26 | 27 | export type CurrentUser = { 28 | name: string; 29 | avatar: string; 30 | userid: string; 31 | notice: NoticeType[]; 32 | email: string; 33 | signature: string; 34 | title: string; 35 | group: string; 36 | tags: TagType[]; 37 | notifyCount: number; 38 | unreadCount: number; 39 | country: string; 40 | geographic: GeographicType; 41 | address: string; 42 | phone: string; 43 | }; 44 | -------------------------------------------------------------------------------- /AccountSettings/src/service.ts: -------------------------------------------------------------------------------- 1 | import { request } from 'umi'; 2 | import type { CurrentUser, GeographicItemType } from './data'; 3 | 4 | export async function queryCurrent(): Promise<{ data: CurrentUser }> { 5 | return request('/api/accountSettingCurrentUser'); 6 | } 7 | 8 | export async function queryProvince(): Promise<{ data: GeographicItemType[] }> { 9 | return request('/api/geographic/province'); 10 | } 11 | 12 | export async function queryCity(province: string): Promise<{ data: GeographicItemType[] }> { 13 | return request(`/api/geographic/city/${province}`); 14 | } 15 | 16 | export async function query() { 17 | return request('/api/users'); 18 | } 19 | -------------------------------------------------------------------------------- /AccountSettings/src/style.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .main { 4 | display: flex; 5 | width: 100%; 6 | height: 100%; 7 | padding-top: 16px; 8 | padding-bottom: 16px; 9 | background-color: @menu-bg; 10 | .leftMenu { 11 | width: 224px; 12 | border-right: @border-width-base @border-style-base @border-color-split; 13 | :global { 14 | .ant-menu-inline { 15 | border: none; 16 | } 17 | .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { 18 | font-weight: bold; 19 | } 20 | } 21 | } 22 | .right { 23 | flex: 1; 24 | padding: 8px 40px; 25 | .title { 26 | margin-bottom: 12px; 27 | color: @heading-color; 28 | font-weight: 500; 29 | font-size: 20px; 30 | line-height: 28px; 31 | } 32 | } 33 | :global { 34 | .ant-list-split .ant-list-item:last-child { 35 | border-bottom: 1px solid @border-color-split; 36 | } 37 | .ant-list-item { 38 | padding-top: 14px; 39 | padding-bottom: 14px; 40 | } 41 | } 42 | } 43 | :global { 44 | .ant-list-item-meta { 45 | // 账号绑定图标 46 | .taobao { 47 | display: block; 48 | color: #ff4000; 49 | font-size: 48px; 50 | line-height: 48px; 51 | border-radius: @border-radius-base; 52 | } 53 | .dingding { 54 | margin: 2px; 55 | padding: 6px; 56 | color: #fff; 57 | font-size: 32px; 58 | line-height: 32px; 59 | background-color: #2eabff; 60 | border-radius: @border-radius-base; 61 | } 62 | .alipay { 63 | color: #2eabff; 64 | font-size: 48px; 65 | line-height: 48px; 66 | border-radius: @border-radius-base; 67 | } 68 | } 69 | 70 | // 密码强度 71 | font.strong { 72 | color: @success-color; 73 | } 74 | font.medium { 75 | color: @warning-color; 76 | } 77 | font.weak { 78 | color: @error-color; 79 | } 80 | } 81 | 82 | @media screen and (max-width: @screen-md) { 83 | .main { 84 | flex-direction: column; 85 | .leftMenu { 86 | width: 100%; 87 | border: none; 88 | } 89 | .right { 90 | padding: 40px; 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribute 2 | 3 | > Notice: `y` is the alias for `yarn`, `n` is the alias for `npm`. 4 | 5 | ## Set up 6 | 7 | Install dev deps after git clone the repo. 8 | 9 | ```bash 10 | $ y 11 | ``` 12 | 13 | change the package.json 14 | 15 | ```bash 16 | "scripts": { 17 | "dev": "cross-env PAGES_PATH='AccountCenter/src' umi dev", 18 | ... 19 | } 20 | ``` 21 | 22 | `'AccountCenter/src'` is you are going to running 23 | 24 | run dev 25 | 26 | ```bash 27 | $ y dev 28 | ``` 29 | -------------------------------------------------------------------------------- /DashboardAnalysis/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /DashboardAnalysis/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/analysis 2 | 3 | Analysis 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/analysis 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /DashboardAnalysis/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/analysis", 3 | "version": "0.0.1", 4 | "description": "将同一主题下的多种下钻维度呈现在页面中，让用户能够研究多组数据并发现趋势，用户可操作数据，调整数据范围满足更精准的分析需求。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/analysis" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "@ant-design/charts": "^1.2.11", 16 | "@ant-design/icons": "^4.0.0", 17 | "classnames": "^2.2.6", 18 | "moment": "^2.22.2", 19 | "numeral": "^2.0.6" 20 | }, 21 | "devDependencies": { 22 | "@types/numeral": "^0.0.25" 23 | }, 24 | "peerDependencies": { 25 | "@ant-design/pro-layout": "^6.0.0" 26 | }, 27 | "blockConfig": { 28 | "specVersion": "0.1" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /DashboardAnalysis/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/DashboardAnalysis/snapshot.png -------------------------------------------------------------------------------- /DashboardAnalysis/src/components/Charts/ChartCard/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .chartCard { 4 | position: relative; 5 | .chartTop { 6 | position: relative; 7 | width: 100%; 8 | overflow: hidden; 9 | } 10 | .chartTopMargin { 11 | margin-bottom: 12px; 12 | } 13 | .chartTopHasMargin { 14 | margin-bottom: 20px; 15 | } 16 | .metaWrap { 17 | float: left; 18 | } 19 | .avatar { 20 | position: relative; 21 | top: 4px; 22 | float: left; 23 | margin-right: 20px; 24 | img { 25 | border-radius: 100%; 26 | } 27 | } 28 | .meta { 29 | height: 22px; 30 | color: @text-color-secondary; 31 | font-size: @font-size-base; 32 | line-height: 22px; 33 | } 34 | .action { 35 | position: absolute; 36 | top: 4px; 37 | right: 0; 38 | line-height: 1; 39 | cursor: pointer; 40 | } 41 | .total { 42 | height: 38px; 43 | margin-top: 4px; 44 | margin-bottom: 0; 45 | overflow: hidden; 46 | color: @heading-color; 47 | font-size: 30px; 48 | line-height: 38px; 49 | white-space: nowrap; 50 | text-overflow: ellipsis; 51 | word-break: break-all; 52 | } 53 | .content { 54 | position: relative; 55 | width: 100%; 56 | margin-bottom: 12px; 57 | } 58 | .contentFixed { 59 | position: absolute; 60 | bottom: 0; 61 | left: 0; 62 | width: 100%; 63 | } 64 | .footer { 65 | margin-top: 8px; 66 | padding-top: 9px; 67 | border-top: 1px solid @border-color-split; 68 | & > * { 69 | position: relative; 70 | } 71 | } 72 | .footerMargin { 73 | margin-top: 20px; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /DashboardAnalysis/src/components/Charts/Field/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .field { 4 | margin: 0; 5 | overflow: hidden; 6 | white-space: nowrap; 7 | text-overflow: ellipsis; 8 | .label, 9 | .number { 10 | font-size: @font-size-base; 11 | line-height: 22px; 12 | } 13 | .number { 14 | margin-left: 8px; 15 | color: @heading-color; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /DashboardAnalysis/src/components/Charts/Field/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './index.less'; 3 | 4 | export type FieldProps = { 5 | label: React.ReactNode; 6 | value: React.ReactNode; 7 | style?: React.CSSProperties; 8 | }; 9 | 10 | const Field: React.FC = ({ label, value, ...rest }) => ( 11 |
12 | {label} 13 | {value} 14 |
15 | ); 16 | 17 | export default Field; 18 | -------------------------------------------------------------------------------- /DashboardAnalysis/src/components/Charts/MiniBar/index.tsx: -------------------------------------------------------------------------------- 1 | import { Chart, Geom, Tooltip } from 'bizcharts'; 2 | 3 | import React from 'react'; 4 | import autoHeight from '../autoHeight'; 5 | import styles from '../index.less'; 6 | 7 | export type MiniBarProps = { 8 | color?: string; 9 | height?: number; 10 | data: { 11 | x: number | string; 12 | y: number; 13 | }[]; 14 | forceFit?: boolean; 15 | style?: React.CSSProperties; 16 | }; 17 | 18 | const MiniBar: React.FC = (props) => { 19 | const { height = 0, forceFit = true, color = '#1890FF', data = [] } = props; 20 | 21 | const scale = { 22 | x: { 23 | type: 'cat', 24 | }, 25 | y: { 26 | min: 0, 27 | }, 28 | }; 29 | 30 | const padding: [number, number, number, number] = [36, 5, 30, 5]; 31 | 32 | const tooltip: [string, (...args: any[]) => { name?: string; value: string }] = [ 33 | 'x*y', 34 | (x: string, y: string) => ({ 35 | name: x, 36 | value: y, 37 | }), 38 | ]; 39 | 40 | // for tooltip not to be hide 41 | const chartHeight = height + 54; 42 | 43 | return ( 44 |
45 |
46 | 47 | 48 | 49 | 50 |
51 |
52 | ); 53 | }; 54 | export default autoHeight()(MiniBar); 55 | -------------------------------------------------------------------------------- /DashboardAnalysis/src/components/Charts/MiniProgress/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Tooltip } from 'antd'; 3 | import styles from './index.less'; 4 | 5 | export type MiniProgressProps = { 6 | target: number; 7 | targetLabel?: string; 8 | color?: string; 9 | strokeWidth?: number; 10 | percent?: number; 11 | style?: React.CSSProperties; 12 | }; 13 | 14 | const MiniProgress: React.FC = ({ 15 | targetLabel, 16 | target, 17 | color = 'rgb(19, 194, 194)', 18 | strokeWidth, 19 | percent, 20 | }) => ( 21 |
22 | 23 |
24 | 25 | 26 |
27 | 28 |
29 |
37 |
38 |
39 | ); 40 | 41 | export default MiniProgress; 42 | -------------------------------------------------------------------------------- /DashboardAnalysis/src/components/Charts/index.less: -------------------------------------------------------------------------------- 1 | .miniChart { 2 | position: relative; 3 | width: 100%; 4 | .chartContent { 5 | position: absolute; 6 | bottom: -28px; 7 | width: 100%; 8 | > div { 9 | margin: 0 -5px; 10 | overflow: hidden; 11 | } 12 | } 13 | .chartLoading { 14 | position: absolute; 15 | top: 16px; 16 | left: 50%; 17 | margin-left: -7px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /DashboardAnalysis/src/components/Charts/index.tsx: -------------------------------------------------------------------------------- 1 | import numeral from 'numeral'; 2 | import ChartCard from './ChartCard'; 3 | import Field from './Field'; 4 | 5 | const yuan = (val: number | string) => `¥ ${numeral(val).format('0,0')}`; 6 | 7 | const Charts = { 8 | yuan, 9 | ChartCard, 10 | Field, 11 | }; 12 | 13 | export { Charts as default, yuan, ChartCard, Field }; 14 | -------------------------------------------------------------------------------- /DashboardAnalysis/src/components/NumberInfo/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .numberInfo { 4 | .suffix { 5 | margin-left: 4px; 6 | color: @text-color; 7 | font-size: 16px; 8 | font-style: normal; 9 | } 10 | .numberInfoTitle { 11 | margin-bottom: 16px; 12 | color: @text-color; 13 | font-size: @font-size-lg; 14 | transition: all 0.3s; 15 | } 16 | .numberInfoSubTitle { 17 | height: 22px; 18 | overflow: hidden; 19 | color: @text-color-secondary; 20 | font-size: @font-size-base; 21 | line-height: 22px; 22 | white-space: nowrap; 23 | text-overflow: ellipsis; 24 | word-break: break-all; 25 | } 26 | .numberInfoValue { 27 | margin-top: 4px; 28 | overflow: hidden; 29 | font-size: 0; 30 | white-space: nowrap; 31 | text-overflow: ellipsis; 32 | word-break: break-all; 33 | & > span { 34 | display: inline-block; 35 | height: 32px; 36 | margin-right: 32px; 37 | color: @heading-color; 38 | font-size: 24px; 39 | line-height: 32px; 40 | } 41 | .subTotal { 42 | margin-right: 0; 43 | color: @text-color-secondary; 44 | font-size: @font-size-lg; 45 | vertical-align: top; 46 | .anticon { 47 | margin-left: 4px; 48 | font-size: 12px; 49 | transform: scale(0.82); 50 | } 51 | :global { 52 | .anticon-caret-up { 53 | color: @red-6; 54 | } 55 | .anticon-caret-down { 56 | color: @green-6; 57 | } 58 | } 59 | } 60 | } 61 | } 62 | .numberInfolight { 63 | .numberInfoValue { 64 | & > span { 65 | color: @text-color; 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /DashboardAnalysis/src/components/NumberInfo/index.tsx: -------------------------------------------------------------------------------- 1 | import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'; 2 | import React from 'react'; 3 | import classNames from 'classnames'; 4 | import styles from './index.less'; 5 | 6 | export type NumberInfoProps = { 7 | title?: React.ReactNode | string; 8 | subTitle?: React.ReactNode | string; 9 | total?: React.ReactNode | string; 10 | status?: 'up' | 'down'; 11 | theme?: string; 12 | gap?: number; 13 | subTotal?: number; 14 | suffix?: string; 15 | style?: React.CSSProperties; 16 | }; 17 | const NumberInfo: React.FC = ({ 18 | theme, 19 | title, 20 | subTitle, 21 | total, 22 | subTotal, 23 | status, 24 | suffix, 25 | gap, 26 | ...rest 27 | }) => ( 28 |
34 | {title && ( 35 |
36 | {title} 37 |
38 | )} 39 | {subTitle && ( 40 |
44 | {subTitle} 45 |
46 | )} 47 |
48 | 49 | {total} 50 | {suffix && {suffix}} 51 | 52 | {(status || subTotal) && ( 53 | 54 | {subTotal} 55 | {status && status === 'up' ? : } 56 | 57 | )} 58 |
59 |
60 | ); 61 | 62 | export default NumberInfo; 63 | -------------------------------------------------------------------------------- /DashboardAnalysis/src/components/PageLoading/index.tsx: -------------------------------------------------------------------------------- 1 | import { Spin } from 'antd'; 2 | 3 | // loading components from code split 4 | // https://umijs.org/plugin/umi-plugin-react.html#dynamicimport 5 | export default () => ( 6 |
7 | 8 |
9 | ); 10 | -------------------------------------------------------------------------------- /DashboardAnalysis/src/components/Trend/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .trendItem { 4 | display: inline-block; 5 | font-size: @font-size-base; 6 | line-height: 22px; 7 | 8 | .up, 9 | .down { 10 | position: relative; 11 | top: 1px; 12 | margin-left: 4px; 13 | span { 14 | font-size: 12px; 15 | transform: scale(0.83); 16 | } 17 | } 18 | .up { 19 | color: @red-6; 20 | } 21 | .down { 22 | top: -1px; 23 | color: @green-6; 24 | } 25 | 26 | &.trendItemGrey .up, 27 | &.trendItemGrey .down { 28 | color: @text-color; 29 | } 30 | 31 | &.reverseColor .up { 32 | color: @green-6; 33 | } 34 | &.reverseColor .down { 35 | color: @red-6; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /DashboardAnalysis/src/components/Trend/index.tsx: -------------------------------------------------------------------------------- 1 | import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'; 2 | import React from 'react'; 3 | import classNames from 'classnames'; 4 | import styles from './index.less'; 5 | 6 | export type TrendProps = { 7 | colorful?: boolean; 8 | flag: 'up' | 'down'; 9 | style?: React.CSSProperties; 10 | reverseColor?: boolean; 11 | className?: string; 12 | }; 13 | 14 | const Trend: React.FC = ({ 15 | colorful = true, 16 | reverseColor = false, 17 | flag, 18 | children, 19 | className, 20 | ...rest 21 | }) => { 22 | const classString = classNames( 23 | styles.trendItem, 24 | { 25 | [styles.trendItemGrey]: !colorful, 26 | [styles.reverseColor]: reverseColor && colorful, 27 | }, 28 | className, 29 | ); 30 | return ( 31 |
32 | {children} 33 | {flag && ( 34 | 35 | {flag === 'up' ? : } 36 | 37 | )} 38 |
39 | ); 40 | }; 41 | 42 | export default Trend; 43 | -------------------------------------------------------------------------------- /DashboardAnalysis/src/data.d.ts: -------------------------------------------------------------------------------- 1 | import { DataItem } from '@antv/g2plot/esm/interface/config'; 2 | 3 | export { DataItem }; 4 | 5 | export interface VisitDataType { 6 | x: string; 7 | y: number; 8 | } 9 | 10 | export type SearchDataType = { 11 | index: number; 12 | keyword: string; 13 | count: number; 14 | range: number; 15 | status: number; 16 | }; 17 | 18 | export type OfflineDataType = { 19 | name: string; 20 | cvr: number; 21 | }; 22 | 23 | export interface OfflineChartData { 24 | date: number; 25 | type: number; 26 | value: number; 27 | } 28 | 29 | export type RadarData = { 30 | name: string; 31 | label: string; 32 | value: number; 33 | }; 34 | 35 | export interface AnalysisData { 36 | visitData: DataItem[]; 37 | visitData2: DataItem[]; 38 | salesData: DataItem[]; 39 | searchData: DataItem[]; 40 | offlineData: OfflineDataType[]; 41 | offlineChartData: DataItem[]; 42 | salesTypeData: DataItem[]; 43 | salesTypeDataOnline: DataItem[]; 44 | salesTypeDataOffline: DataItem[]; 45 | radarData: RadarData[]; 46 | } 47 | -------------------------------------------------------------------------------- /DashboardAnalysis/src/service.ts: -------------------------------------------------------------------------------- 1 | import { request } from 'umi'; 2 | import type { AnalysisData } from './data'; 3 | 4 | export async function fakeChartData(): Promise<{ data: AnalysisData }> { 5 | return request('/api/fake_analysis_chart_data'); 6 | } 7 | -------------------------------------------------------------------------------- /DashboardAnalysis/src/utils/Yuan.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { yuan } from '../components/Charts'; 3 | /** 减少使用 dangerouslySetInnerHTML */ 4 | export default class Yuan extends React.Component<{ 5 | children: React.ReactText; 6 | }> { 7 | main: HTMLSpanElement | undefined | null = null; 8 | 9 | componentDidMount() { 10 | this.renderToHtml(); 11 | } 12 | 13 | componentDidUpdate() { 14 | this.renderToHtml(); 15 | } 16 | 17 | renderToHtml = () => { 18 | const { children } = this.props; 19 | if (this.main) { 20 | this.main.innerHTML = yuan(children); 21 | } 22 | }; 23 | 24 | render() { 25 | return ( 26 | { 28 | this.main = ref; 29 | }} 30 | /> 31 | ); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /DashboardAnalysis/src/utils/utils.less: -------------------------------------------------------------------------------- 1 | .textOverflow() { 2 | overflow: hidden; 3 | white-space: nowrap; 4 | text-overflow: ellipsis; 5 | word-break: break-all; 6 | } 7 | 8 | .textOverflowMulti(@line: 3, @bg: #fff) { 9 | position: relative; 10 | max-height: @line * 1.5em; 11 | margin-right: -1em; 12 | padding-right: 1em; 13 | overflow: hidden; 14 | line-height: 1.5em; 15 | text-align: justify; 16 | &::before { 17 | position: absolute; 18 | right: 14px; 19 | bottom: 0; 20 | padding: 0 1px; 21 | background: @bg; 22 | content: '...'; 23 | } 24 | &::after { 25 | position: absolute; 26 | right: 14px; 27 | width: 1em; 28 | height: 1em; 29 | margin-top: 0.2em; 30 | background: white; 31 | content: ''; 32 | } 33 | } 34 | 35 | // mixins for clearfix 36 | // ------------------------ 37 | .clearfix() { 38 | zoom: 1; 39 | &::before, 40 | &::after { 41 | display: table; 42 | content: ' '; 43 | } 44 | &::after { 45 | clear: both; 46 | height: 0; 47 | font-size: 0; 48 | visibility: hidden; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /DashboardAnalysis/src/utils/utils.ts: -------------------------------------------------------------------------------- 1 | import moment from 'moment'; 2 | import type { RangePickerProps } from 'antd/es/date-picker/generatePicker'; 3 | 4 | type RangePickerValue = RangePickerProps['value']; 5 | 6 | export function fixedZero(val: number) { 7 | return val * 1 < 10 ? `0${val}` : val; 8 | } 9 | 10 | export function getTimeDistance(type: 'today' | 'week' | 'month' | 'year'): RangePickerValue { 11 | const now = new Date(); 12 | const oneDay = 1000 * 60 * 60 * 24; 13 | 14 | if (type === 'today') { 15 | now.setHours(0); 16 | now.setMinutes(0); 17 | now.setSeconds(0); 18 | return [moment(now), moment(now.getTime() + (oneDay - 1000))]; 19 | } 20 | 21 | if (type === 'week') { 22 | let day = now.getDay(); 23 | now.setHours(0); 24 | now.setMinutes(0); 25 | now.setSeconds(0); 26 | 27 | if (day === 0) { 28 | day = 6; 29 | } else { 30 | day -= 1; 31 | } 32 | 33 | const beginTime = now.getTime() - day * oneDay; 34 | 35 | return [moment(beginTime), moment(beginTime + (7 * oneDay - 1000))]; 36 | } 37 | const year = now.getFullYear(); 38 | 39 | if (type === 'month') { 40 | const month = now.getMonth(); 41 | const nextDate = moment(now).add(1, 'months'); 42 | const nextYear = nextDate.year(); 43 | const nextMonth = nextDate.month(); 44 | 45 | return [ 46 | moment(`${year}-${fixedZero(month + 1)}-01 00:00:00`), 47 | moment(moment(`${nextYear}-${fixedZero(nextMonth + 1)}-01 00:00:00`).valueOf() - 1000), 48 | ]; 49 | } 50 | 51 | return [moment(`${year}-01-01 00:00:00`), moment(`${year}-12-31 23:59:59`)]; 52 | } 53 | -------------------------------------------------------------------------------- /DashboardMonitor/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /DashboardMonitor/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/monitor 2 | 3 | Monitor 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/monitor 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /DashboardMonitor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/monitor", 3 | "version": "0.0.1", 4 | "description": "常用于数据报表细节信息的展示，根据业务诉求可配置文本、列表、可视化图表等。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/monitor" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "@ant-design/charts": "^1.2.11", 16 | "@antv/l7": "^2.3.7", 17 | "@antv/l7-maps": "^2.3.7", 18 | "@antv/l7-react": "^2.1.9", 19 | "numeral": "^2.0.6" 20 | }, 21 | "devDependencies": { 22 | "@types/lodash.debounce": "^4.0.6", 23 | "@types/numeral": "^0.0.25" 24 | }, 25 | "peerDependencies": { 26 | "@ant-design/pro-layout": "^6.0.0" 27 | }, 28 | "blockConfig": { 29 | "specVersion": "0.1" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /DashboardMonitor/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/DashboardMonitor/snapshot.png -------------------------------------------------------------------------------- /DashboardMonitor/src/_mock.ts: -------------------------------------------------------------------------------- 1 | import mockjs from 'mockjs'; 2 | import type { Request, Response } from 'express'; 3 | 4 | const getTags = (_: Request, res: Response) => { 5 | return res.json({ 6 | data: mockjs.mock({ 7 | 'list|100': [{ name: '@city', 'value|1-100': 150, 'type|0-2': 1 }], 8 | }), 9 | }); 10 | }; 11 | 12 | export default { 13 | 'GET /api/tags': getTags, 14 | }; 15 | -------------------------------------------------------------------------------- /DashboardMonitor/src/components/ActiveChart/index.less: -------------------------------------------------------------------------------- 1 | .activeChart { 2 | position: relative; 3 | } 4 | .activeChartGrid { 5 | p { 6 | position: absolute; 7 | top: 80px; 8 | } 9 | p:last-child { 10 | top: 115px; 11 | } 12 | } 13 | .activeChartLegend { 14 | position: relative; 15 | height: 20px; 16 | margin-top: 8px; 17 | font-size: 0; 18 | line-height: 20px; 19 | span { 20 | display: inline-block; 21 | width: 33.33%; 22 | font-size: 12px; 23 | text-align: center; 24 | } 25 | span:first-child { 26 | text-align: left; 27 | } 28 | span:last-child { 29 | text-align: right; 30 | } 31 | } 32 | .dashedLine { 33 | position: relative; 34 | top: -70px; 35 | left: -3px; 36 | height: 1px; 37 | 38 | .line { 39 | position: absolute; 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | height: 100%; 44 | background-image: linear-gradient(to right, transparent 50%, #e9e9e9 50%); 45 | background-size: 6px; 46 | } 47 | } 48 | 49 | .dashedLine:last-child { 50 | top: -36px; 51 | } 52 | -------------------------------------------------------------------------------- /DashboardMonitor/src/data.d.ts: -------------------------------------------------------------------------------- 1 | export type TagType = { 2 | name: string; 3 | value: number; 4 | type: string; 5 | }; 6 | -------------------------------------------------------------------------------- /DashboardMonitor/src/service.ts: -------------------------------------------------------------------------------- 1 | import { request } from 'umi'; 2 | import type { TagType } from './data'; 3 | 4 | export async function queryTags(): Promise<{ data: { list: TagType[] } }> { 5 | return request('/api/tags'); 6 | } 7 | -------------------------------------------------------------------------------- /DashboardMonitor/src/style.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .mapChart { 4 | height: 452px; 5 | padding-top: 24px; 6 | img { 7 | display: inline-block; 8 | max-width: 100%; 9 | max-height: 437px; 10 | } 11 | } 12 | 13 | .pieCard :global(.pie-stat) { 14 | font-size: 24px !important; 15 | } 16 | 17 | @media screen and (max-width: @screen-lg) { 18 | .mapChart { 19 | height: auto; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /DashboardWorkplace/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /DashboardWorkplace/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/workplace 2 | 3 | Workplace 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/Workplace 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /DashboardWorkplace/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/workplace", 3 | "version": "0.0.1", 4 | "description": "工作台将应用中每个部分最关键的数据提取出来，在一个页面呈现，便于全局分析和决策。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/workplace" 8 | }, 9 | "license": "MIT", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "@ant-design/charts": "^1.2.11", 16 | "@ant-design/icons": "^4.0.0", 17 | "moment": "^2.22.2" 18 | }, 19 | "peerDependencies": { 20 | "@ant-design/pro-layout": "^6.0.0" 21 | }, 22 | "blockConfig": { 23 | "specVersion": "0.1" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /DashboardWorkplace/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/DashboardWorkplace/snapshot.png -------------------------------------------------------------------------------- /DashboardWorkplace/src/components/EditableLinkGroup/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .linkGroup { 4 | padding: 20px 0 8px 24px; 5 | font-size: 0; 6 | & > a { 7 | display: inline-block; 8 | width: 25%; 9 | margin-bottom: 13px; 10 | color: @text-color; 11 | font-size: @font-size-base; 12 | &:hover { 13 | color: @primary-color; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /DashboardWorkplace/src/components/EditableLinkGroup/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { createElement } from 'react'; 2 | import { PlusOutlined } from '@ant-design/icons'; 3 | import { Button } from 'antd'; 4 | 5 | import styles from './index.less'; 6 | 7 | export type EditableLink = { 8 | title: string; 9 | href: string; 10 | id?: string; 11 | }; 12 | 13 | type EditableLinkGroupProps = { 14 | onAdd: () => void; 15 | links: EditableLink[]; 16 | linkElement: any; 17 | }; 18 | 19 | const EditableLinkGroup: React.FC = (props) => { 20 | const { links, linkElement, onAdd } = props; 21 | return ( 22 |
23 | {links.map((link) => 24 | createElement( 25 | linkElement, 26 | { 27 | key: `linkGroup-item-${link.id || link.title}`, 28 | to: link.href, 29 | href: link.href, 30 | }, 31 | link.title, 32 | ), 33 | )} 34 | 37 |
38 | ); 39 | }; 40 | 41 | EditableLinkGroup.defaultProps = { 42 | links: [], 43 | onAdd: () => {}, 44 | linkElement: 'a', 45 | }; 46 | 47 | export default EditableLinkGroup; 48 | -------------------------------------------------------------------------------- /DashboardWorkplace/src/service.ts: -------------------------------------------------------------------------------- 1 | import { request } from 'umi'; 2 | import type { NoticeType, ActivitiesType, AnalysisData } from './data'; 3 | 4 | export async function queryProjectNotice(): Promise<{ data: NoticeType[] }> { 5 | return request('/api/project/notice'); 6 | } 7 | 8 | export async function queryActivities(): Promise<{ data: ActivitiesType[] }> { 9 | return request('/api/activities'); 10 | } 11 | 12 | export async function fakeChartData(): Promise<{ data: AnalysisData }> { 13 | return request('/api/fake_workplace_chart_data'); 14 | } 15 | -------------------------------------------------------------------------------- /EditorFlow/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /EditorFlow/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/flow 2 | 3 | flow 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/flow 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /EditorFlow/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/flow", 3 | "version": "0.0.1", 4 | "description": "千言万语不如一张图，流程图是表示算法思路的最好方法。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/flow" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "@ant-design/icons": "^4.0.0", 16 | "@antv/data-set": "^0.11.0", 17 | "bizcharts": "^3.5.3-beta.0", 18 | "bizcharts-plugin-slider": "^2.1.1-beta.1", 19 | "gg-editor": "^2.0.2", 20 | "moment": "^2.22.2", 21 | "numeral": "^2.0.6", 22 | "react-fittext": "^1.0.0" 23 | }, 24 | "peerDependencies": { 25 | "@ant-design/pro-layout": "^6.0.0" 26 | }, 27 | "devDependencies": { 28 | "@types/numeral": "^0.0.25" 29 | }, 30 | "blockConfig": { 31 | "specVersion": "0.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /EditorFlow/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/EditorFlow/snapshot.png -------------------------------------------------------------------------------- /EditorFlow/src/common/IconFont/index.ts: -------------------------------------------------------------------------------- 1 | import { createFromIconfontCN } from '@ant-design/icons'; 2 | 3 | const IconFont = createFromIconfontCN({ 4 | scriptUrl: 'https://at.alicdn.com/t/font_1101588_01zniftxm9yp.js', 5 | }); 6 | 7 | export default IconFont; 8 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorContextMenu/FlowContextMenu.tsx: -------------------------------------------------------------------------------- 1 | import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor'; 2 | 3 | import MenuItem from './MenuItem'; 4 | import styles from './index.less'; 5 | 6 | const FlowContextMenu = () => ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | ); 33 | 34 | export default FlowContextMenu; 35 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorContextMenu/KoniContextMenu.tsx: -------------------------------------------------------------------------------- 1 | import FlowContextMenu from './FlowContextMenu'; 2 | 3 | export default FlowContextMenu; 4 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorContextMenu/MenuItem.tsx: -------------------------------------------------------------------------------- 1 | import { Command } from 'gg-editor'; 2 | import React from 'react'; 3 | import IconFont from '../../common/IconFont'; 4 | import styles from './index.less'; 5 | 6 | const upperFirst = (str: string) => 7 | str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase()); 8 | 9 | type MenuItemProps = { 10 | command: string; 11 | icon?: string; 12 | text?: string; 13 | }; 14 | const MenuItem: React.FC = (props) => { 15 | const { command, icon, text } = props; 16 | 17 | return ( 18 | 19 |
20 | 21 | {text || upperFirst(command)} 22 |
23 | 24 | ); 25 | }; 26 | 27 | export default MenuItem; 28 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorContextMenu/MindContextMenu.tsx: -------------------------------------------------------------------------------- 1 | import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor'; 2 | 3 | import MenuItem from './MenuItem'; 4 | import styles from './index.less'; 5 | 6 | const MindContextMenu = () => ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | 22 | export default MindContextMenu; 23 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorContextMenu/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .contextMenu { 4 | display: none; 5 | overflow: hidden; 6 | background: @component-background; 7 | border-radius: 4px; 8 | box-shadow: @box-shadow-base; 9 | 10 | .item { 11 | display: flex; 12 | align-items: center; 13 | padding: 5px 12px; 14 | cursor: pointer; 15 | transition: all 0.3s; 16 | user-select: none; 17 | 18 | &:hover { 19 | background: @select-item-selected-bg; 20 | } 21 | 22 | span.anticon { 23 | margin-right: 8px; 24 | } 25 | } 26 | 27 | :global { 28 | .disable { 29 | :local { 30 | .item { 31 | color: @disabled-color; 32 | cursor: auto; 33 | 34 | &:hover { 35 | background: @item-hover-bg; 36 | } 37 | } 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorContextMenu/index.tsx: -------------------------------------------------------------------------------- 1 | import FlowContextMenu from './FlowContextMenu'; 2 | import KoniContextMenu from './KoniContextMenu'; 3 | import MindContextMenu from './MindContextMenu'; 4 | 5 | export { FlowContextMenu, MindContextMenu, KoniContextMenu }; 6 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorDetailPanel/FlowDetailPanel.tsx: -------------------------------------------------------------------------------- 1 | import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor'; 2 | 3 | import { Card } from 'antd'; 4 | import DetailForm from './DetailForm'; 5 | import styles from './index.less'; 6 | 7 | const FlowDetailPanel = () => ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | ); 26 | 27 | export default FlowDetailPanel; 28 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorDetailPanel/KoniDetailPanel.tsx: -------------------------------------------------------------------------------- 1 | import FlowDetailPanel from './FlowDetailPanel'; 2 | 3 | export default FlowDetailPanel; 4 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorDetailPanel/MindDetailPanel.tsx: -------------------------------------------------------------------------------- 1 | import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor'; 2 | 3 | import { Card } from 'antd'; 4 | import DetailForm from './DetailForm'; 5 | import styles from './index.less'; 6 | 7 | const MindDetailPanel = () => ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | 18 | export default MindDetailPanel; 19 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorDetailPanel/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .detailPanel { 4 | flex: 1; 5 | background-color: @component-background; 6 | } 7 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorDetailPanel/index.tsx: -------------------------------------------------------------------------------- 1 | import FlowDetailPanel from './FlowDetailPanel'; 2 | import KoniDetailPanel from './KoniDetailPanel'; 3 | import MindDetailPanel from './MindDetailPanel'; 4 | 5 | export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel }; 6 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorItemPanel/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .itemPanel { 4 | flex: 1; 5 | 6 | :global { 7 | .ant-card { 8 | height: 100%; 9 | } 10 | .ant-card-body { 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | > div { 15 | margin-bottom: 16px; 16 | } 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorItemPanel/index.tsx: -------------------------------------------------------------------------------- 1 | import FlowItemPanel from './FlowItemPanel'; 2 | import KoniItemPanel from './KoniItemPanel'; 3 | 4 | export { FlowItemPanel, KoniItemPanel }; 5 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorMinimap/index.tsx: -------------------------------------------------------------------------------- 1 | import { Card } from 'antd'; 2 | import { Minimap } from 'gg-editor'; 3 | 4 | const EditorMinimap = () => ( 5 | 6 | 7 | 8 | ); 9 | 10 | export default EditorMinimap; 11 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorToolbar/FlowToolbar.tsx: -------------------------------------------------------------------------------- 1 | import { Divider } from 'antd'; 2 | import { Toolbar } from 'gg-editor'; 3 | import ToolbarButton from './ToolbarButton'; 4 | import styles from './index.less'; 5 | 6 | const FlowToolbar = () => ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | ); 28 | 29 | export default FlowToolbar; 30 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorToolbar/KoniToolbar.tsx: -------------------------------------------------------------------------------- 1 | import FlowToolbar from './FlowToolbar'; 2 | 3 | export default FlowToolbar; 4 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorToolbar/MindToolbar.tsx: -------------------------------------------------------------------------------- 1 | import { Divider } from 'antd'; 2 | import { Toolbar } from 'gg-editor'; 3 | import ToolbarButton from './ToolbarButton'; 4 | import styles from './index.less'; 5 | 6 | const FlowToolbar = () => ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | 24 | export default FlowToolbar; 25 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorToolbar/ToolbarButton.tsx: -------------------------------------------------------------------------------- 1 | import { Command } from 'gg-editor'; 2 | import React from 'react'; 3 | import { Tooltip } from 'antd'; 4 | import IconFont from '../../common/IconFont'; 5 | import styles from './index.less'; 6 | 7 | const upperFirst = (str: string) => 8 | str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase()); 9 | 10 | type ToolbarButtonProps = { 11 | command: string; 12 | icon?: string; 13 | text?: string; 14 | }; 15 | const ToolbarButton: React.FC = (props) => { 16 | const { command, icon, text } = props; 17 | 18 | return ( 19 | 20 | 25 | 26 | 27 | 28 | ); 29 | }; 30 | 31 | export default ToolbarButton; 32 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorToolbar/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .toolbar { 4 | display: flex; 5 | align-items: center; 6 | 7 | :global { 8 | .command .anticon { 9 | display: inline-block; 10 | width: 27px; 11 | height: 27px; 12 | margin: 0 6px; 13 | padding-top: 6px; 14 | text-align: center; 15 | cursor: pointer; 16 | 17 | &:hover { 18 | border: 1px solid @item-active-bg; 19 | } 20 | } 21 | 22 | .disable .anticon { 23 | color: @text-color-secondary; 24 | cursor: auto; 25 | 26 | &:hover { 27 | border: 1px solid @border-color-base; 28 | } 29 | } 30 | } 31 | } 32 | 33 | .tooltip { 34 | :global { 35 | .ant-tooltip-inner { 36 | font-size: 12px; 37 | border-radius: 0; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /EditorFlow/src/components/EditorToolbar/index.tsx: -------------------------------------------------------------------------------- 1 | import FlowToolbar from './FlowToolbar'; 2 | import KoniToolbar from './KoniToolbar'; 3 | import MindToolbar from './MindToolbar'; 4 | 5 | export { FlowToolbar, MindToolbar, KoniToolbar }; 6 | -------------------------------------------------------------------------------- /EditorFlow/src/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .editor { 4 | display: flex; 5 | flex: 1; 6 | flex-direction: column; 7 | width: 100%; 8 | height: calc(100vh - 250px); 9 | background: @component-background; 10 | } 11 | 12 | .editorHd { 13 | padding: 8px; 14 | background: @descriptions-bg; 15 | border: 1px solid @item-active-bg; 16 | } 17 | 18 | .editorBd { 19 | flex: 1; 20 | } 21 | 22 | .editorSidebar, 23 | .editorContent { 24 | display: flex; 25 | flex-direction: column; 26 | } 27 | 28 | .editorSidebar { 29 | background: @descriptions-bg; 30 | :global { 31 | .g6-editor-minimap-container { 32 | background: none !important ; 33 | } 34 | } 35 | &:first-child { 36 | border-right: 1px solid @item-active-bg; 37 | } 38 | 39 | &:last-child { 40 | border-left: 1px solid @item-active-bg; 41 | } 42 | } 43 | 44 | .flow, 45 | .mind, 46 | .koni { 47 | flex: 1; 48 | } 49 | -------------------------------------------------------------------------------- /EditorFlow/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { Col, Row } from 'antd'; 2 | import GGEditor, { Flow } from 'gg-editor'; 3 | 4 | import { PageContainer } from '@ant-design/pro-layout'; 5 | import EditorMinimap from './components/EditorMinimap'; 6 | import { FlowContextMenu } from './components/EditorContextMenu'; 7 | import { FlowDetailPanel } from './components/EditorDetailPanel'; 8 | import { FlowItemPanel } from './components/EditorItemPanel'; 9 | import { FlowToolbar } from './components/EditorToolbar'; 10 | import styles from './index.less'; 11 | 12 | GGEditor.setTrackable(false); 13 | 14 | export default () => ( 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | ); 38 | -------------------------------------------------------------------------------- /EditorKoni/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /EditorKoni/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/flow 2 | 3 | flow 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/flow 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /EditorKoni/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/koni", 3 | "version": "0.0.1", 4 | "description": "拓扑结构图可以清晰展示网络节点和通信介质构成的网络结构。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/flow" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "@antv/data-set": "^0.11.0", 16 | "bizcharts": "^3.5.3-beta.0", 17 | "bizcharts-plugin-slider": "^2.1.1-beta.1", 18 | "gg-editor": "^2.0.2", 19 | "moment": "^2.22.2", 20 | "numeral": "^2.0.6", 21 | "react-fittext": "^1.0.0" 22 | }, 23 | "devDependencies": { 24 | "@types/numeral": "^0.0.25" 25 | }, 26 | "peerDependencies": { 27 | "@ant-design/pro-layout": "^6.0.0" 28 | }, 29 | "blockConfig": { 30 | "specVersion": "0.1" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /EditorKoni/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/EditorKoni/snapshot.png -------------------------------------------------------------------------------- /EditorKoni/src/common/IconFont/index.ts: -------------------------------------------------------------------------------- 1 | import { createFromIconfontCN } from '@ant-design/icons'; 2 | 3 | const IconFont = createFromIconfontCN({ 4 | scriptUrl: 'https://at.alicdn.com/t/font_1101588_01zniftxm9yp.js', 5 | }); 6 | 7 | export default IconFont; 8 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorContextMenu/FlowContextMenu.tsx: -------------------------------------------------------------------------------- 1 | import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor'; 2 | 3 | import MenuItem from './MenuItem'; 4 | import styles from './index.less'; 5 | 6 | const FlowContextMenu = () => ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | ); 33 | 34 | export default FlowContextMenu; 35 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorContextMenu/KoniContextMenu.tsx: -------------------------------------------------------------------------------- 1 | import FlowContextMenu from './FlowContextMenu'; 2 | 3 | export default FlowContextMenu; 4 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorContextMenu/MenuItem.tsx: -------------------------------------------------------------------------------- 1 | import { Command } from 'gg-editor'; 2 | import React from 'react'; 3 | import IconFont from '../../common/IconFont'; 4 | import styles from './index.less'; 5 | 6 | const upperFirst = (str: string) => 7 | str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase()); 8 | 9 | type MenuItemProps = { 10 | command: string; 11 | icon?: string; 12 | text?: string; 13 | }; 14 | const MenuItem: React.FC = (props) => { 15 | const { command, icon, text } = props; 16 | 17 | return ( 18 | 19 |
20 | 21 | {text || upperFirst(command)} 22 |
23 | 24 | ); 25 | }; 26 | 27 | export default MenuItem; 28 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorContextMenu/MindContextMenu.tsx: -------------------------------------------------------------------------------- 1 | import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor'; 2 | 3 | import MenuItem from './MenuItem'; 4 | import styles from './index.less'; 5 | 6 | const MindContextMenu = () => ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | 22 | export default MindContextMenu; 23 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorContextMenu/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .contextMenu { 4 | display: none; 5 | overflow: hidden; 6 | background: @component-background; 7 | border-radius: 4px; 8 | box-shadow: @box-shadow-base; 9 | .item { 10 | display: flex; 11 | align-items: center; 12 | padding: 5px 12px; 13 | cursor: pointer; 14 | transition: all 0.3s; 15 | user-select: none; 16 | 17 | &:hover { 18 | background: @select-item-selected-bg; 19 | } 20 | 21 | .anticon { 22 | margin-right: 8px; 23 | } 24 | } 25 | 26 | :global { 27 | .disable { 28 | :local { 29 | .item { 30 | color: @disabled-color; 31 | cursor: auto; 32 | 33 | &:hover { 34 | background: @item-hover-bg; 35 | } 36 | } 37 | } 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorContextMenu/index.tsx: -------------------------------------------------------------------------------- 1 | import FlowContextMenu from './FlowContextMenu'; 2 | import KoniContextMenu from './KoniContextMenu'; 3 | import MindContextMenu from './MindContextMenu'; 4 | 5 | export { FlowContextMenu, MindContextMenu, KoniContextMenu }; 6 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorDetailPanel/FlowDetailPanel.tsx: -------------------------------------------------------------------------------- 1 | import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor'; 2 | 3 | import { Card } from 'antd'; 4 | import DetailForm from './DetailForm'; 5 | import styles from './index.less'; 6 | 7 | const FlowDetailPanel = () => ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | ); 26 | 27 | export default FlowDetailPanel; 28 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorDetailPanel/KoniDetailPanel.tsx: -------------------------------------------------------------------------------- 1 | import FlowDetailPanel from './FlowDetailPanel'; 2 | 3 | export default FlowDetailPanel; 4 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorDetailPanel/MindDetailPanel.tsx: -------------------------------------------------------------------------------- 1 | import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor'; 2 | 3 | import { Card } from 'antd'; 4 | import DetailForm from './DetailForm'; 5 | import styles from './index.less'; 6 | 7 | const MindDetailPanel = () => ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | 18 | export default MindDetailPanel; 19 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorDetailPanel/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .detailPanel { 4 | flex: 1; 5 | background-color: @component-background; 6 | } 7 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorDetailPanel/index.tsx: -------------------------------------------------------------------------------- 1 | import FlowDetailPanel from './FlowDetailPanel'; 2 | import KoniDetailPanel from './KoniDetailPanel'; 3 | import MindDetailPanel from './MindDetailPanel'; 4 | 5 | export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel }; 6 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorItemPanel/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .itemPanel { 4 | flex: 1; 5 | 6 | :global { 7 | .ant-card { 8 | height: 100%; 9 | } 10 | .ant-card-body { 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | > div { 15 | margin-bottom: 16px; 16 | } 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorItemPanel/index.tsx: -------------------------------------------------------------------------------- 1 | import FlowItemPanel from './FlowItemPanel'; 2 | import KoniItemPanel from './KoniItemPanel'; 3 | 4 | export { FlowItemPanel, KoniItemPanel }; 5 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorMinimap/index.tsx: -------------------------------------------------------------------------------- 1 | import { Card } from 'antd'; 2 | import { Minimap } from 'gg-editor'; 3 | 4 | const EditorMinimap = () => ( 5 | 6 | 7 | 8 | ); 9 | 10 | export default EditorMinimap; 11 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorToolbar/FlowToolbar.tsx: -------------------------------------------------------------------------------- 1 | import { Divider } from 'antd'; 2 | import { Toolbar } from 'gg-editor'; 3 | import ToolbarButton from './ToolbarButton'; 4 | import styles from './index.less'; 5 | 6 | const FlowToolbar = () => ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | ); 28 | 29 | export default FlowToolbar; 30 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorToolbar/KoniToolbar.tsx: -------------------------------------------------------------------------------- 1 | import FlowToolbar from './FlowToolbar'; 2 | 3 | export default FlowToolbar; 4 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorToolbar/MindToolbar.tsx: -------------------------------------------------------------------------------- 1 | import { Divider } from 'antd'; 2 | import { Toolbar } from 'gg-editor'; 3 | import ToolbarButton from './ToolbarButton'; 4 | import styles from './index.less'; 5 | 6 | const FlowToolbar = () => ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | 24 | export default FlowToolbar; 25 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorToolbar/ToolbarButton.tsx: -------------------------------------------------------------------------------- 1 | import { Command } from 'gg-editor'; 2 | import React from 'react'; 3 | import { Tooltip } from 'antd'; 4 | import IconFont from '../../common/IconFont'; 5 | import styles from './index.less'; 6 | 7 | const upperFirst = (str: string) => 8 | str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase()); 9 | 10 | type ToolbarButtonProps = { 11 | command: string; 12 | icon?: string; 13 | text?: string; 14 | }; 15 | const ToolbarButton: React.FC = (props) => { 16 | const { command, icon, text } = props; 17 | 18 | return ( 19 | 20 | 25 | 26 | 27 | 28 | ); 29 | }; 30 | 31 | export default ToolbarButton; 32 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorToolbar/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .toolbar { 4 | display: flex; 5 | align-items: center; 6 | :global { 7 | .command .anticon { 8 | display: inline-block; 9 | width: 27px; 10 | height: 27px; 11 | margin: 0 6px; 12 | padding-top: 6px; 13 | text-align: center; 14 | cursor: pointer; 15 | 16 | &:hover { 17 | border: 1px solid @item-active-bg; 18 | } 19 | } 20 | 21 | .disable .anticon { 22 | color: @text-color-secondary; 23 | cursor: auto; 24 | 25 | &:hover { 26 | border: 1px solid @border-color-base; 27 | } 28 | } 29 | } 30 | } 31 | 32 | .tooltip { 33 | :global { 34 | .ant-tooltip-inner { 35 | font-size: 12px; 36 | border-radius: 0; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /EditorKoni/src/components/EditorToolbar/index.tsx: -------------------------------------------------------------------------------- 1 | import FlowToolbar from './FlowToolbar'; 2 | import KoniToolbar from './KoniToolbar'; 3 | import MindToolbar from './MindToolbar'; 4 | 5 | export { FlowToolbar, MindToolbar, KoniToolbar }; 6 | -------------------------------------------------------------------------------- /EditorKoni/src/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .editor { 4 | display: flex; 5 | flex: 1; 6 | flex-direction: column; 7 | width: 100%; 8 | height: calc(100vh - 250px); 9 | background: @descriptions-bg; 10 | } 11 | 12 | .editorHd { 13 | padding: 8px; 14 | background: @descriptions-bg; 15 | border: 1px solid @item-active-bg; 16 | } 17 | 18 | .editorBd { 19 | flex: 1; 20 | } 21 | 22 | .editorSidebar, 23 | .editorContent { 24 | display: flex; 25 | flex-direction: column; 26 | } 27 | 28 | .editorContent { 29 | :global { 30 | .graph-container canvas { 31 | vertical-align: middle; 32 | } 33 | } 34 | } 35 | 36 | .editorSidebar { 37 | background: @descriptions-bg; 38 | :global { 39 | .g6-editor-minimap-container { 40 | background: none !important ; 41 | } 42 | } 43 | &:first-child { 44 | border-right: 1px solid @item-active-bg; 45 | } 46 | 47 | &:last-child { 48 | border-left: 1px solid @item-active-bg; 49 | } 50 | } 51 | 52 | .flow, 53 | .mind, 54 | .koni { 55 | flex: 1; 56 | } 57 | -------------------------------------------------------------------------------- /EditorKoni/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { Col, Row } from 'antd'; 2 | import GGEditor, { Koni } from 'gg-editor'; 3 | 4 | import { PageContainer } from '@ant-design/pro-layout'; 5 | import EditorMinimap from './components/EditorMinimap'; 6 | import { KoniContextMenu } from './components/EditorContextMenu'; 7 | import { KoniDetailPanel } from './components/EditorDetailPanel'; 8 | import { KoniItemPanel } from './components/EditorItemPanel'; 9 | import { KoniToolbar } from './components/EditorToolbar'; 10 | import styles from './index.less'; 11 | 12 | GGEditor.setTrackable(false); 13 | 14 | export default () => ( 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | ); 38 | -------------------------------------------------------------------------------- /EditorMind/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /EditorMind/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/flow 2 | 3 | flow 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/flow 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /EditorMind/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/mind", 3 | "version": "0.0.1", 4 | "description": "脑图是表达发散性思维的有效工具，它简单却又很有效，是一种非常实用展示工具。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/flow" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "@antv/data-set": "^0.11.0", 16 | "bizcharts": "^3.5.3-beta.0", 17 | "bizcharts-plugin-slider": "^2.1.1-beta.1", 18 | "gg-editor": "^2.0.2", 19 | "moment": "^2.22.2", 20 | "numeral": "^2.0.6", 21 | "react-fittext": "^1.0.0" 22 | }, 23 | "peerDependencies": { 24 | "@ant-design/pro-layout": "^6.0.0" 25 | }, 26 | "devDependencies": { 27 | "@types/numeral": "^0.0.25" 28 | }, 29 | "blockConfig": { 30 | "specVersion": "0.1" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /EditorMind/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/EditorMind/snapshot.png -------------------------------------------------------------------------------- /EditorMind/src/common/IconFont/index.ts: -------------------------------------------------------------------------------- 1 | import { createFromIconfontCN } from '@ant-design/icons'; 2 | 3 | const IconFont = createFromIconfontCN({ 4 | scriptUrl: 'https://at.alicdn.com/t/font_1101588_01zniftxm9yp.js', 5 | }); 6 | 7 | export default IconFont; 8 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorContextMenu/FlowContextMenu.tsx: -------------------------------------------------------------------------------- 1 | import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor'; 2 | 3 | import MenuItem from './MenuItem'; 4 | import styles from './index.less'; 5 | 6 | const FlowContextMenu = () => ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | ); 33 | 34 | export default FlowContextMenu; 35 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorContextMenu/KoniContextMenu.tsx: -------------------------------------------------------------------------------- 1 | import FlowContextMenu from './FlowContextMenu'; 2 | 3 | export default FlowContextMenu; 4 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorContextMenu/MenuItem.tsx: -------------------------------------------------------------------------------- 1 | import { Command } from 'gg-editor'; 2 | import React from 'react'; 3 | import IconFont from '../../common/IconFont'; 4 | import styles from './index.less'; 5 | 6 | const upperFirst = (str: string) => 7 | str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase()); 8 | 9 | type MenuItemProps = { 10 | command: string; 11 | icon?: string; 12 | text?: string; 13 | }; 14 | const MenuItem: React.FC = (props) => { 15 | const { command, icon, text } = props; 16 | 17 | return ( 18 | 19 |
20 | 21 | {text || upperFirst(command)} 22 |
23 | 24 | ); 25 | }; 26 | 27 | export default MenuItem; 28 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorContextMenu/MindContextMenu.tsx: -------------------------------------------------------------------------------- 1 | import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor'; 2 | 3 | import MenuItem from './MenuItem'; 4 | import styles from './index.less'; 5 | 6 | const MindContextMenu = () => ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | 22 | export default MindContextMenu; 23 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorContextMenu/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .contextMenu { 4 | display: none; 5 | overflow: hidden; 6 | background: @component-background; 7 | border-radius: 4px; 8 | box-shadow: @box-shadow-base; 9 | .item { 10 | display: flex; 11 | align-items: center; 12 | padding: 5px 12px; 13 | cursor: pointer; 14 | transition: all 0.3s; 15 | user-select: none; 16 | 17 | &:hover { 18 | background: @select-item-selected-bg; 19 | } 20 | 21 | .anticon { 22 | margin-right: 8px; 23 | } 24 | } 25 | 26 | :global { 27 | .disable { 28 | :local { 29 | .item { 30 | color: @disabled-color; 31 | cursor: auto; 32 | 33 | &:hover { 34 | background: @item-hover-bg; 35 | } 36 | } 37 | } 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorContextMenu/index.tsx: -------------------------------------------------------------------------------- 1 | import FlowContextMenu from './FlowContextMenu'; 2 | import KoniContextMenu from './KoniContextMenu'; 3 | import MindContextMenu from './MindContextMenu'; 4 | 5 | export { FlowContextMenu, MindContextMenu, KoniContextMenu }; 6 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorDetailPanel/FlowDetailPanel.tsx: -------------------------------------------------------------------------------- 1 | import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor'; 2 | 3 | import { Card } from 'antd'; 4 | import DetailForm from './DetailForm'; 5 | import styles from './index.less'; 6 | 7 | const FlowDetailPanel = () => ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | ); 26 | 27 | export default FlowDetailPanel; 28 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorDetailPanel/KoniDetailPanel.tsx: -------------------------------------------------------------------------------- 1 | import FlowDetailPanel from './FlowDetailPanel'; 2 | 3 | export default FlowDetailPanel; 4 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorDetailPanel/MindDetailPanel.tsx: -------------------------------------------------------------------------------- 1 | import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor'; 2 | 3 | import { Card } from 'antd'; 4 | import DetailForm from './DetailForm'; 5 | import styles from './index.less'; 6 | 7 | const MindDetailPanel = () => ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | 18 | export default MindDetailPanel; 19 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorDetailPanel/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .detailPanel { 4 | flex: 1; 5 | background-color: @component-background; 6 | } 7 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorDetailPanel/index.tsx: -------------------------------------------------------------------------------- 1 | import FlowDetailPanel from './FlowDetailPanel'; 2 | import KoniDetailPanel from './KoniDetailPanel'; 3 | import MindDetailPanel from './MindDetailPanel'; 4 | 5 | export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel }; 6 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorItemPanel/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .itemPanel { 4 | flex: 1; 5 | 6 | :global { 7 | .ant-card { 8 | height: 100%; 9 | } 10 | .ant-card-body { 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | > div { 15 | margin-bottom: 16px; 16 | } 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorItemPanel/index.tsx: -------------------------------------------------------------------------------- 1 | import FlowItemPanel from './FlowItemPanel'; 2 | import KoniItemPanel from './KoniItemPanel'; 3 | 4 | export { FlowItemPanel, KoniItemPanel }; 5 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorMinimap/index.tsx: -------------------------------------------------------------------------------- 1 | import { Card } from 'antd'; 2 | import { Minimap } from 'gg-editor'; 3 | 4 | const EditorMinimap = () => ( 5 | 6 | 7 | 8 | ); 9 | 10 | export default EditorMinimap; 11 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorToolbar/FlowToolbar.tsx: -------------------------------------------------------------------------------- 1 | import { Divider } from 'antd'; 2 | import { Toolbar } from 'gg-editor'; 3 | import ToolbarButton from './ToolbarButton'; 4 | import styles from './index.less'; 5 | 6 | const FlowToolbar = () => ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | ); 28 | 29 | export default FlowToolbar; 30 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorToolbar/KoniToolbar.tsx: -------------------------------------------------------------------------------- 1 | import FlowToolbar from './FlowToolbar'; 2 | 3 | export default FlowToolbar; 4 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorToolbar/MindToolbar.tsx: -------------------------------------------------------------------------------- 1 | import { Divider } from 'antd'; 2 | import { Toolbar } from 'gg-editor'; 3 | import ToolbarButton from './ToolbarButton'; 4 | import styles from './index.less'; 5 | 6 | const FlowToolbar = () => ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | 24 | export default FlowToolbar; 25 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorToolbar/ToolbarButton.tsx: -------------------------------------------------------------------------------- 1 | import { Command } from 'gg-editor'; 2 | import React from 'react'; 3 | import { Tooltip } from 'antd'; 4 | import IconFont from '../../common/IconFont'; 5 | import styles from './index.less'; 6 | 7 | const upperFirst = (str: string) => 8 | str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase()); 9 | 10 | type ToolbarButtonProps = { 11 | command: string; 12 | icon?: string; 13 | text?: string; 14 | }; 15 | const ToolbarButton: React.FC = (props) => { 16 | const { command, icon, text } = props; 17 | 18 | return ( 19 | 20 | 25 | 26 | 27 | 28 | ); 29 | }; 30 | 31 | export default ToolbarButton; 32 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorToolbar/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .toolbar { 4 | display: flex; 5 | align-items: center; 6 | 7 | :global { 8 | .command .anticon { 9 | display: inline-block; 10 | width: 27px; 11 | height: 27px; 12 | margin: 0 6px; 13 | padding-top: 6px; 14 | text-align: center; 15 | cursor: pointer; 16 | 17 | &:hover { 18 | border: 1px solid @item-active-bg; 19 | } 20 | } 21 | 22 | .disable .anticon { 23 | color: @text-color-secondary; 24 | cursor: auto; 25 | 26 | &:hover { 27 | border: 1px solid @border-color-base; 28 | } 29 | } 30 | } 31 | } 32 | 33 | .tooltip { 34 | :global { 35 | .ant-tooltip-inner { 36 | font-size: 12px; 37 | border-radius: 0; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /EditorMind/src/components/EditorToolbar/index.tsx: -------------------------------------------------------------------------------- 1 | import FlowToolbar from './FlowToolbar'; 2 | import KoniToolbar from './KoniToolbar'; 3 | import MindToolbar from './MindToolbar'; 4 | 5 | export { FlowToolbar, MindToolbar, KoniToolbar }; 6 | -------------------------------------------------------------------------------- /EditorMind/src/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .editor { 4 | display: flex; 5 | flex: 1; 6 | flex-direction: column; 7 | width: 100%; 8 | height: calc(100vh - 250px); 9 | background: @descriptions-bg; 10 | } 11 | 12 | .editorHd { 13 | padding: 8px; 14 | background: @descriptions-bg; 15 | border: 1px solid @item-active-bg; 16 | } 17 | 18 | .editorBd { 19 | flex: 1; 20 | } 21 | 22 | .editorSidebar, 23 | .editorContent { 24 | display: flex; 25 | flex-direction: column; 26 | } 27 | 28 | .editorContent { 29 | :global { 30 | .graph-container canvas { 31 | vertical-align: middle; 32 | } 33 | } 34 | } 35 | 36 | .editorSidebar { 37 | background: @descriptions-bg; 38 | :global { 39 | .g6-editor-minimap-container { 40 | background: none !important ; 41 | } 42 | } 43 | &:first-child { 44 | border-right: 1px solid @item-active-bg; 45 | } 46 | 47 | &:last-child { 48 | border-left: 1px solid @item-active-bg; 49 | } 50 | } 51 | 52 | .flow, 53 | .mind, 54 | .koni { 55 | flex: 1; 56 | } 57 | -------------------------------------------------------------------------------- /EditorMind/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { Col, Row } from 'antd'; 2 | import GGEditor, { Mind } from 'gg-editor'; 3 | 4 | import { PageContainer } from '@ant-design/pro-layout'; 5 | import EditorMinimap from './components/EditorMinimap'; 6 | import { MindContextMenu } from './components/EditorContextMenu'; 7 | import { MindDetailPanel } from './components/EditorDetailPanel'; 8 | import { MindToolbar } from './components/EditorToolbar'; 9 | import data from './worldCup2018.json'; 10 | import styles from './index.less'; 11 | 12 | GGEditor.setTrackable(false); 13 | 14 | export default () => ( 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | ); 35 | -------------------------------------------------------------------------------- /EmptyPage/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /EmptyPage/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/flow 2 | 3 | flow 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/flow 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /EmptyPage/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/empty", 3 | "version": "0.0.1", 4 | "description": "一个空白的页面，一切都从这里开始！", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/empty" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "peerDependencies": { 15 | "@ant-design/pro-layout": "^6.0.0" 16 | }, 17 | "blockConfig": { 18 | "specVersion": "0.1" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /EmptyPage/src/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .main { 4 | width: 100%; 5 | background: @component-background; 6 | } 7 | -------------------------------------------------------------------------------- /EmptyPage/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { PageContainer } from '@ant-design/pro-layout'; 2 | import { useState, useEffect } from 'react'; 3 | import { Spin } from 'antd'; 4 | import styles from './index.less'; 5 | 6 | export default () => { 7 | const [loading, setLoading] = useState(true); 8 | useEffect(() => { 9 | setTimeout(() => { 10 | setLoading(false); 11 | }, 3000); 12 | }, []); 13 | return ( 14 | 15 |
16 | 17 |
18 | 19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /Exception403/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /Exception403/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/exception403 2 | 3 | Exception403 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/exception403 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /Exception403/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pro-blocks/exception-403", 3 | "version": "0.0.1", 4 | "description": "403 Forbidden 代表客户端错误，指的是服务器端有能力处理该请求，但是拒绝授权访问，一般是权限异常导致。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/ant-design/pro-blocks/tree/master/Exception403" 8 | }, 9 | "license": "MIT", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "classnames": "^2.2.6" 16 | }, 17 | "blockConfig": { 18 | "specVersion": "0.1" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Exception403/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/Exception403/snapshot.png -------------------------------------------------------------------------------- /Exception403/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { Link } from 'umi'; 2 | import { Result, Button } from 'antd'; 3 | 4 | export default () => ( 5 | 14 | 15 | 16 | } 17 | /> 18 | ); 19 | -------------------------------------------------------------------------------- /Exception404/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /Exception404/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/exception404 2 | 3 | Exception404 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/exception404 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /Exception404/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pro-blocks/exception-404", 3 | "version": "0.0.1", 4 | "description": "404 Not Found 代表请求失败，请求所希望得到的资源未被在服务器上发现", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/ant-design/pro-blocks/tree/master/Exception404" 8 | }, 9 | "license": "MIT", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "classnames": "^2.2.6" 16 | }, 17 | "blockConfig": { 18 | "specVersion": "0.1" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Exception404/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/Exception404/snapshot.png -------------------------------------------------------------------------------- /Exception404/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { Link } from 'umi'; 2 | import { Result, Button } from 'antd'; 3 | 4 | export default () => ( 5 | 14 | 15 | 16 | } 17 | /> 18 | ); 19 | -------------------------------------------------------------------------------- /Exception500/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /Exception500/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/exception500 2 | 3 | Exception500 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/exception500 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /Exception500/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pro-blocks/exception-500", 3 | "version": "0.0.1", 4 | "description": "500 Internal Server Error，是表示服务器端错误的响应状态码。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/ant-design/pro-blocks/tree/master/Exception500" 8 | }, 9 | "license": "MIT", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "classnames": "^2.2.6" 16 | }, 17 | "blockConfig": { 18 | "specVersion": "0.1" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Exception500/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/Exception500/snapshot.png -------------------------------------------------------------------------------- /Exception500/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { Link } from 'umi'; 2 | import { Result, Button } from 'antd'; 3 | 4 | export default () => ( 5 | 14 | 15 | 16 | } 17 | /> 18 | ); 19 | -------------------------------------------------------------------------------- /FormAdvancedForm/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /FormAdvancedForm/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/advancedform 2 | 3 | AdvancedForm 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/advancedform 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /FormAdvancedForm/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/advanced-form", 3 | "version": "0.0.1", 4 | "description": "高级表单常适用于一次性输入和提交大批量数据的场景。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/advancedform" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "@ant-design/icons": "^4.0.0", 16 | "@ant-design/pro-form": "^1.16.0", 17 | "@ant-design/pro-table": "^2.30.0", 18 | "classnames": "^2.2.6" 19 | }, 20 | "peerDependencies": { 21 | "@ant-design/pro-layout": "^6.0.0" 22 | }, 23 | "blockConfig": { 24 | "specVersion": "0.1" 25 | }, 26 | "devDependencies": { 27 | "@types/express": "^4.17.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /FormAdvancedForm/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/FormAdvancedForm/snapshot.png -------------------------------------------------------------------------------- /FormAdvancedForm/src/_mock.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-extraneous-dependencies 2 | import type { Request, Response } from 'express'; 3 | 4 | export default { 5 | 'POST /api/advancedForm': (_: Request, res: Response) => { 6 | res.send({ data: { message: 'Ok' } }); 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /FormAdvancedForm/src/service.ts: -------------------------------------------------------------------------------- 1 | import { request } from 'umi'; 2 | 3 | export async function fakeSubmitForm(params: any) { 4 | return request('/api/advancedForm', { 5 | method: 'POST', 6 | data: params, 7 | }); 8 | } 9 | -------------------------------------------------------------------------------- /FormAdvancedForm/src/style.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .card { 4 | margin-bottom: 24px; 5 | 6 | :global { 7 | .ant-legacy-form-item .ant-legacy-form-item-control-wrapper { 8 | width: 100%; 9 | } 10 | } 11 | } 12 | 13 | .errorIcon { 14 | margin-right: 24px; 15 | color: @error-color; 16 | cursor: pointer; 17 | 18 | span.anticon { 19 | margin-right: 4px; 20 | } 21 | } 22 | 23 | .errorPopover { 24 | :global { 25 | .ant-popover-inner-content { 26 | min-width: 256px; 27 | max-height: 290px; 28 | padding: 0; 29 | overflow: auto; 30 | } 31 | } 32 | } 33 | 34 | .errorListItem { 35 | padding: 8px 16px; 36 | list-style: none; 37 | border-bottom: 1px solid @border-color-split; 38 | cursor: pointer; 39 | transition: all 0.3s; 40 | &:hover { 41 | background: @item-active-bg; 42 | } 43 | &:last-child { 44 | border: 0; 45 | } 46 | .errorIcon { 47 | float: left; 48 | margin-top: 4px; 49 | margin-right: 12px; 50 | padding-bottom: 22px; 51 | color: @error-color; 52 | } 53 | .errorField { 54 | margin-top: 2px; 55 | color: @text-color-secondary; 56 | font-size: 12px; 57 | } 58 | } 59 | 60 | .editable { 61 | td { 62 | padding-top: 13px !important; 63 | padding-bottom: 12.5px !important; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /FormBasicForm/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /FormBasicForm/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/basicform 2 | 3 | BasicForm 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/basicform 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /FormBasicForm/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/basic-form", 3 | "version": "0.0.1", 4 | "description": "表单页用于向用户收集或验证信息，基础表单常用于数据项较少的表单场景。", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "dev": "umi dev" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/basicform" 12 | }, 13 | "dependencies": { 14 | "@ant-design/icons": "^4.0.0", 15 | "@ant-design/pro-form": "^1.16.0" 16 | }, 17 | "peerDependencies": { 18 | "@ant-design/pro-layout": "^6.0.0" 19 | }, 20 | "license": "ISC", 21 | "blockConfig": { 22 | "specVersion": "0.1" 23 | }, 24 | "devDependencies": { 25 | "@types/express": "^4.17.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /FormBasicForm/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/FormBasicForm/snapshot.png -------------------------------------------------------------------------------- /FormBasicForm/src/_mock.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-extraneous-dependencies 2 | import type { Request, Response } from 'express'; 3 | 4 | export default { 5 | 'POST /api/basicForm': (_: Request, res: Response) => { 6 | res.send({ data: { message: 'Ok' } }); 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /FormBasicForm/src/service.ts: -------------------------------------------------------------------------------- 1 | import { request } from 'umi'; 2 | 3 | export async function fakeSubmitForm(params: any) { 4 | return request('/api/basicForm', { 5 | method: 'POST', 6 | data: params, 7 | }); 8 | } 9 | -------------------------------------------------------------------------------- /FormBasicForm/src/style.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .optional { 4 | color: @text-color-secondary; 5 | font-style: normal; 6 | } 7 | -------------------------------------------------------------------------------- /FormStepForm/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /FormStepForm/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/stepform 2 | 3 | StepForm 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/stepform 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /FormStepForm/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/step-form", 3 | "version": "0.0.1", 4 | "description": "分布表单使用与将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成的场景。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/stepform" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "@ant-design/pro-form": "^1.16.0", 16 | "classnames": "^2.2.6", 17 | "nzh": "^1.0.3" 18 | }, 19 | "peerDependencies": { 20 | "@ant-design/pro-layout": "^6.0.0" 21 | }, 22 | "blockConfig": { 23 | "specVersion": "0.1" 24 | }, 25 | "devDependencies": { 26 | "@types/express": "^4.17.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /FormStepForm/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/FormStepForm/snapshot.png -------------------------------------------------------------------------------- /FormStepForm/src/_mock.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-extraneous-dependencies 2 | import type { Request, Response } from 'express'; 3 | 4 | export default { 5 | 'POST /api/stepForm': (_: Request, res: Response) => { 6 | res.send({ data: { message: 'Ok' } }); 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /FormStepForm/src/data.d.ts: -------------------------------------------------------------------------------- 1 | export interface StepDataType { 2 | payAccount: string; 3 | receiverAccount: string; 4 | receiverName: string; 5 | amount: string; 6 | receiverMode: string; 7 | } 8 | 9 | export type CurrentTypes = 'base' | 'confirm' | 'result'; 10 | -------------------------------------------------------------------------------- /FormStepForm/src/service.ts: -------------------------------------------------------------------------------- 1 | import { request } from 'umi'; 2 | 3 | export async function fakeSubmitForm(params: any) { 4 | return request('/api/stepForm', { 5 | method: 'POST', 6 | data: params, 7 | }); 8 | } 9 | -------------------------------------------------------------------------------- /FormStepForm/src/style.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .card { 4 | margin-bottom: 24px; 5 | } 6 | 7 | .result { 8 | max-width: 560px; 9 | margin: 0 auto; 10 | padding: 24px 0 8px; 11 | } 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 umijs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /ListBasicList/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /ListBasicList/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/basiclist 2 | 3 | BasicList 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/basiclist 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /ListBasicList/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/basic-list", 3 | "version": "0.0.1", 4 | "description": "用于陈列一类事务性主题，用户常常将这个页面当做开始事务的入口，主要以浏览方式寻找条目。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/basiclist" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "@ant-design/icons": "^4.0.0", 16 | "@ant-design/pro-form": "^1.16.0", 17 | "ahooks": "^2.0.0", 18 | "classnames": "^2.2.6", 19 | "moment": "^2.22.2" 20 | }, 21 | "peerDependencies": { 22 | "@ant-design/pro-layout": "^6.0.0" 23 | }, 24 | "blockConfig": { 25 | "specVersion": "0.1" 26 | }, 27 | "devDependencies": { 28 | "@types/express": "^4.17.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /ListBasicList/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/ListBasicList/snapshot.png -------------------------------------------------------------------------------- /ListBasicList/src/data.d.ts: -------------------------------------------------------------------------------- 1 | export type Member = { 2 | avatar: string; 3 | name: string; 4 | id: string; 5 | }; 6 | 7 | export type BasicListItemDataType = { 8 | id: string; 9 | owner: string; 10 | title: string; 11 | avatar: string; 12 | cover: string; 13 | status: 'normal' | 'exception' | 'active' | 'success'; 14 | percent: number; 15 | logo: string; 16 | href: string; 17 | body?: any; 18 | updatedAt: number; 19 | createdAt: number; 20 | subDescription: string; 21 | description: string; 22 | activeUser: number; 23 | newUser: number; 24 | star: number; 25 | like: number; 26 | message: number; 27 | content: string; 28 | members: Member[]; 29 | }; 30 | -------------------------------------------------------------------------------- /ListBasicList/src/service.ts: -------------------------------------------------------------------------------- 1 | import { request } from 'umi'; 2 | import type { BasicListItemDataType } from './data.d'; 3 | 4 | type ParamsType = { 5 | count?: number; 6 | } & Partial; 7 | 8 | export async function queryFakeList( 9 | params: ParamsType, 10 | ): Promise<{ data: { list: BasicListItemDataType[] } }> { 11 | return request('/api/get_list', { 12 | params, 13 | }); 14 | } 15 | 16 | export async function removeFakeList( 17 | params: ParamsType, 18 | ): Promise<{ data: { list: BasicListItemDataType[] } }> { 19 | return request('/api/post_fake_list', { 20 | method: 'POST', 21 | data: { 22 | ...params, 23 | method: 'delete', 24 | }, 25 | }); 26 | } 27 | 28 | export async function addFakeList( 29 | params: ParamsType, 30 | ): Promise<{ data: { list: BasicListItemDataType[] } }> { 31 | return request('/api/post_fake_list', { 32 | method: 'POST', 33 | data: { 34 | ...params, 35 | method: 'post', 36 | }, 37 | }); 38 | } 39 | 40 | export async function updateFakeList( 41 | params: ParamsType, 42 | ): Promise<{ data: { list: BasicListItemDataType[] } }> { 43 | return request('/api/post_fake_list', { 44 | method: 'POST', 45 | data: { 46 | ...params, 47 | method: 'update', 48 | }, 49 | }); 50 | } 51 | -------------------------------------------------------------------------------- /ListBasicList/src/utils/utils.less: -------------------------------------------------------------------------------- 1 | .textOverflow() { 2 | overflow: hidden; 3 | white-space: nowrap; 4 | text-overflow: ellipsis; 5 | word-break: break-all; 6 | } 7 | 8 | .textOverflowMulti(@line: 3, @bg: #fff) { 9 | position: relative; 10 | max-height: @line * 1.5em; 11 | margin-right: -1em; 12 | padding-right: 1em; 13 | overflow: hidden; 14 | line-height: 1.5em; 15 | text-align: justify; 16 | &::before { 17 | position: absolute; 18 | right: 14px; 19 | bottom: 0; 20 | padding: 0 1px; 21 | background: @bg; 22 | content: '...'; 23 | } 24 | &::after { 25 | position: absolute; 26 | right: 14px; 27 | width: 1em; 28 | height: 1em; 29 | margin-top: 0.2em; 30 | background: white; 31 | content: ''; 32 | } 33 | } 34 | 35 | // mixins for clearfix 36 | // ------------------------ 37 | .clearfix() { 38 | zoom: 1; 39 | &::before, 40 | &::after { 41 | display: table; 42 | content: ' '; 43 | } 44 | &::after { 45 | clear: both; 46 | height: 0; 47 | font-size: 0; 48 | visibility: hidden; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /ListCardList/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /ListCardList/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/cardlist 2 | 3 | CardList 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/cardlist 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /ListCardList/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/card-list", 3 | "version": "0.0.1", 4 | "description": "卡片组成的列表，一般用于展示有图的列表，更加美观。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/cardlist" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "@ant-design/icons": "^4.0.0", 16 | "ahooks": "^2.0.0" 17 | }, 18 | "peerDependencies": { 19 | "@ant-design/pro-layout": "^6.0.0" 20 | }, 21 | "blockConfig": { 22 | "specVersion": "0.1" 23 | }, 24 | "devDependencies": { 25 | "@types/express": "^4.17.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /ListCardList/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/ListCardList/snapshot.png -------------------------------------------------------------------------------- /ListCardList/src/data.d.ts: -------------------------------------------------------------------------------- 1 | export type Member = { 2 | avatar: string; 3 | name: string; 4 | id: string; 5 | }; 6 | 7 | export type CardListItemDataType = { 8 | id: string; 9 | owner: string; 10 | title: string; 11 | avatar: string; 12 | cover: string; 13 | status: 'normal' | 'exception' | 'active' | 'success'; 14 | percent: number; 15 | logo: string; 16 | href: string; 17 | body?: any; 18 | updatedAt: number; 19 | createdAt: number; 20 | subDescription: string; 21 | description: string; 22 | activeUser: number; 23 | newUser: number; 24 | star: number; 25 | like: number; 26 | message: number; 27 | content: string; 28 | members: Member[]; 29 | }; 30 | -------------------------------------------------------------------------------- /ListCardList/src/service.ts: -------------------------------------------------------------------------------- 1 | import { request } from 'umi'; 2 | import type { CardListItemDataType } from './data.d'; 3 | 4 | export async function queryFakeList(params: { 5 | count: number; 6 | }): Promise<{ data: { list: CardListItemDataType[] } }> { 7 | return request('/api/card_fake_list', { 8 | params, 9 | }); 10 | } 11 | -------------------------------------------------------------------------------- /ListCardList/src/utils/utils.less: -------------------------------------------------------------------------------- 1 | .textOverflow() { 2 | overflow: hidden; 3 | white-space: nowrap; 4 | text-overflow: ellipsis; 5 | word-break: break-all; 6 | } 7 | 8 | .textOverflowMulti(@line: 3, @bg: #fff) { 9 | position: relative; 10 | max-height: @line * 1.5em; 11 | margin-right: -1em; 12 | padding-right: 1em; 13 | overflow: hidden; 14 | line-height: 1.5em; 15 | text-align: justify; 16 | &::before { 17 | position: absolute; 18 | right: 14px; 19 | bottom: 0; 20 | padding: 0 1px; 21 | background: @bg; 22 | content: '...'; 23 | } 24 | &::after { 25 | position: absolute; 26 | right: 14px; 27 | width: 1em; 28 | height: 1em; 29 | margin-top: 0.2em; 30 | background: white; 31 | content: ''; 32 | } 33 | } 34 | 35 | // mixins for clearfix 36 | // ------------------------ 37 | .clearfix() { 38 | zoom: 1; 39 | &::before, 40 | &::after { 41 | display: table; 42 | content: ' '; 43 | } 44 | &::after { 45 | clear: both; 46 | height: 0; 47 | font-size: 0; 48 | visibility: hidden; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /ListSearch/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /ListSearch/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/searchlist 2 | 3 | SearchList 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/searchlist 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /ListSearch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/search-list", 3 | "version": "0.0.1", 4 | "description": "一个基本多标签页面，用于展示搜索列表。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/searchlistapplications" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "classnames": "^2.2.6", 16 | "moment": "^2.22.2", 17 | "numeral": "^2.0.6", 18 | "nzh": "^1.0.3" 19 | }, 20 | "peerDependencies": { 21 | "@ant-design/pro-layout": "^6.0.0" 22 | }, 23 | "blockConfig": { 24 | "specVersion": "0.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /ListSearch/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/ListSearch/snapshot.png -------------------------------------------------------------------------------- /ListSearchApplications/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /ListSearchApplications/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/searchlistapplications 2 | 3 | SearchListApplications 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/searchlistapplications 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /ListSearchApplications/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/search-list-applications", 3 | "version": "0.0.1", 4 | "description": "常用于陈列某一主题下的大量条目，并提供丰富的数据筛选功能帮助用户匹配出需要的数据自己。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/searchlistapplications" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "@ant-design/icons": "^4.0.0", 16 | "ahooks": "^2.0.0", 17 | "classnames": "^2.2.6", 18 | "moment": "^2.22.2", 19 | "numeral": "^2.0.6", 20 | "nzh": "^1.0.3" 21 | }, 22 | "blockConfig": { 23 | "specVersion": "0.1" 24 | }, 25 | "devDependencies": { 26 | "@types/express": "^4.17.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /ListSearchApplications/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/ListSearchApplications/snapshot.png -------------------------------------------------------------------------------- /ListSearchApplications/src/components/StandardFormRow/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .standardFormRow { 4 | display: flex; 5 | margin-bottom: 16px; 6 | padding-bottom: 16px; 7 | border-bottom: 1px dashed @border-color-split; 8 | 9 | :global { 10 | .ant-form-item, 11 | .ant-legacy-form-item { 12 | margin-right: 24px; 13 | } 14 | .ant-form-item-label, 15 | .ant-legacy-form-item-label { 16 | label { 17 | margin-right: 0; 18 | color: @text-color; 19 | } 20 | } 21 | .ant-form-item-label, 22 | .ant-legacy-form-item-label, 23 | .ant-form-item-control, 24 | .ant-legacy-form-item-control { 25 | padding: 0; 26 | line-height: 32px; 27 | } 28 | } 29 | .label { 30 | flex: 0 0 auto; 31 | margin-right: 24px; 32 | color: @heading-color; 33 | font-size: @font-size-base; 34 | text-align: right; 35 | & > span { 36 | display: inline-block; 37 | height: 32px; 38 | line-height: 32px; 39 | &::after { 40 | content: '：'; 41 | } 42 | } 43 | } 44 | .content { 45 | flex: 1 1 0; 46 | :global { 47 | .ant-form-item, 48 | .ant-legacy-form-item { 49 | &:last-child { 50 | margin-right: 0; 51 | } 52 | } 53 | } 54 | } 55 | } 56 | 57 | .standardFormRowLast { 58 | margin-bottom: 0; 59 | padding-bottom: 0; 60 | border: none; 61 | } 62 | 63 | .standardFormRowBlock { 64 | :global { 65 | .ant-form-item, 66 | .ant-legacy-form-item, 67 | div.ant-form-item-control-wrapper, 68 | div.ant-legacy-form-item-control-wrapper { 69 | display: block; 70 | } 71 | } 72 | } 73 | 74 | .standardFormRowGrid { 75 | :global { 76 | .ant-form-item, 77 | .ant-legacy-form-item, 78 | div.ant-form-item-control-wrapper, 79 | div.ant-legacy-form-item-control-wrapper { 80 | display: block; 81 | } 82 | .ant-form-item-label, 83 | .ant-legacy-form-item-label { 84 | float: left; 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /ListSearchApplications/src/components/StandardFormRow/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import styles from './index.less'; 4 | 5 | type StandardFormRowProps = { 6 | title?: string; 7 | last?: boolean; 8 | block?: boolean; 9 | grid?: boolean; 10 | style?: React.CSSProperties; 11 | }; 12 | 13 | const StandardFormRow: React.FC = ({ 14 | title, 15 | children, 16 | last, 17 | block, 18 | grid, 19 | ...rest 20 | }) => { 21 | const cls = classNames(styles.standardFormRow, { 22 | [styles.standardFormRowBlock]: block, 23 | [styles.standardFormRowLast]: last, 24 | [styles.standardFormRowGrid]: grid, 25 | }); 26 | 27 | return ( 28 |
29 | {title && ( 30 |
31 | {title} 32 |
33 | )} 34 |
{children}
35 |
36 | ); 37 | }; 38 | 39 | export default StandardFormRow; 40 | -------------------------------------------------------------------------------- /ListSearchApplications/src/components/TagSelect/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .tagSelect { 4 | position: relative; 5 | max-height: 32px; 6 | margin-left: -8px; 7 | overflow: hidden; 8 | line-height: 32px; 9 | transition: all 0.3s; 10 | user-select: none; 11 | :global { 12 | .ant-tag { 13 | margin-right: 24px; 14 | padding: 0 8px; 15 | font-size: @font-size-base; 16 | } 17 | } 18 | &.expanded { 19 | max-height: 200px; 20 | transition: all 0.3s; 21 | } 22 | .trigger { 23 | position: absolute; 24 | top: 0; 25 | right: 0; 26 | 27 | span.anticon { 28 | font-size: 12px; 29 | } 30 | } 31 | &.hasExpandTag { 32 | padding-right: 50px; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /ListSearchApplications/src/data.d.ts: -------------------------------------------------------------------------------- 1 | export type Member = { 2 | avatar: string; 3 | name: string; 4 | id: string; 5 | }; 6 | 7 | export interface Params { 8 | count: number; 9 | } 10 | 11 | export interface ListItemDataType { 12 | id: string; 13 | owner: string; 14 | title: string; 15 | avatar: string; 16 | cover: string; 17 | status: 'normal' | 'exception' | 'active' | 'success'; 18 | percent: number; 19 | logo: string; 20 | href: string; 21 | body?: any; 22 | updatedAt: number; 23 | createdAt: number; 24 | subDescription: string; 25 | description: string; 26 | activeUser: number; 27 | newUser: number; 28 | star: number; 29 | like: number; 30 | message: number; 31 | content: string; 32 | members: Member[]; 33 | } 34 | -------------------------------------------------------------------------------- /ListSearchApplications/src/service.ts: -------------------------------------------------------------------------------- 1 | import { request } from 'umi'; 2 | import type { Params, ListItemDataType } from './data.d'; 3 | 4 | export async function queryFakeList( 5 | params: Params, 6 | ): Promise<{ data: { list: ListItemDataType[] } }> { 7 | return request('/api/fake_list', { 8 | params, 9 | }); 10 | } 11 | -------------------------------------------------------------------------------- /ListSearchApplications/src/style.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .filterCardList { 4 | :global { 5 | .ant-card-meta-content { 6 | margin-top: 0; 7 | } 8 | // disabled white space 9 | .ant-card-meta-avatar { 10 | font-size: 0; 11 | } 12 | 13 | .ant-list .ant-list-item-content-single { 14 | max-width: 100%; 15 | } 16 | } 17 | .cardInfo { 18 | margin-top: 16px; 19 | margin-left: 40px; 20 | zoom: 1; 21 | &::before, 22 | &::after { 23 | display: table; 24 | content: ' '; 25 | } 26 | &::after { 27 | clear: both; 28 | height: 0; 29 | font-size: 0; 30 | visibility: hidden; 31 | } 32 | & > div { 33 | position: relative; 34 | float: left; 35 | width: 50%; 36 | text-align: left; 37 | p { 38 | margin: 0; 39 | font-size: 24px; 40 | line-height: 32px; 41 | } 42 | p:first-child { 43 | margin-bottom: 4px; 44 | color: @text-color-secondary; 45 | font-size: 12px; 46 | line-height: 20px; 47 | } 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /ListSearchApplications/src/utils/utils.less: -------------------------------------------------------------------------------- 1 | .textOverflow() { 2 | overflow: hidden; 3 | white-space: nowrap; 4 | text-overflow: ellipsis; 5 | word-break: break-all; 6 | } 7 | 8 | .textOverflowMulti(@line: 3, @bg: #fff) { 9 | position: relative; 10 | max-height: @line * 1.5em; 11 | margin-right: -1em; 12 | padding-right: 1em; 13 | overflow: hidden; 14 | line-height: 1.5em; 15 | text-align: justify; 16 | &::before { 17 | position: absolute; 18 | right: 14px; 19 | bottom: 0; 20 | padding: 0 1px; 21 | background: @bg; 22 | content: '...'; 23 | } 24 | &::after { 25 | position: absolute; 26 | right: 14px; 27 | width: 1em; 28 | height: 1em; 29 | margin-top: 0.2em; 30 | background: white; 31 | content: ''; 32 | } 33 | } 34 | 35 | // mixins for clearfix 36 | // ------------------------ 37 | .clearfix() { 38 | zoom: 1; 39 | &::before, 40 | &::after { 41 | display: table; 42 | content: ' '; 43 | } 44 | &::after { 45 | clear: both; 46 | height: 0; 47 | font-size: 0; 48 | visibility: hidden; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /ListSearchArticles/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /ListSearchArticles/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/searchlistarticles 2 | 3 | SearchListArticles 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/searchlistarticles 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /ListSearchArticles/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/search-list-articles", 3 | "version": "0.0.1", 4 | "description": "常用于陈列某一主题下的大量条目，并提供丰富的数据筛选功能帮助用户匹配出需要的数据自己。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/searchlistarticles" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "ahooks": "^2.0.0", 16 | "classnames": "^2.2.6", 17 | "moment": "^2.22.2" 18 | }, 19 | "blockConfig": { 20 | "specVersion": "0.1" 21 | }, 22 | "devDependencies": { 23 | "@types/express": "^4.17.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /ListSearchArticles/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/ListSearchArticles/snapshot.png -------------------------------------------------------------------------------- /ListSearchArticles/src/components/ArticleListContent/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .listContent { 4 | .description { 5 | max-width: 720px; 6 | line-height: 22px; 7 | } 8 | .extra { 9 | margin-top: 16px; 10 | color: @text-color-secondary; 11 | line-height: 22px; 12 | & > :global(.ant-avatar) { 13 | position: relative; 14 | top: 1px; 15 | width: 20px; 16 | height: 20px; 17 | margin-right: 8px; 18 | vertical-align: top; 19 | } 20 | & > em { 21 | margin-left: 16px; 22 | color: @disabled-color; 23 | font-style: normal; 24 | } 25 | } 26 | } 27 | 28 | @media screen and (max-width: @screen-xs) { 29 | .listContent { 30 | .extra { 31 | & > em { 32 | display: block; 33 | margin-top: 8px; 34 | margin-left: 0; 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /ListSearchArticles/src/components/ArticleListContent/index.tsx: -------------------------------------------------------------------------------- 1 | import { Avatar } from 'antd'; 2 | import React from 'react'; 3 | import moment from 'moment'; 4 | import styles from './index.less'; 5 | 6 | type ArticleListContentProps = { 7 | data: { 8 | content: React.ReactNode; 9 | updatedAt: number; 10 | avatar: string; 11 | owner: string; 12 | href: string; 13 | }; 14 | }; 15 | 16 | const ArticleListContent: React.FC = ({ 17 | data: { content, updatedAt, avatar, owner, href }, 18 | }) => ( 19 |
20 |
{content}
21 |
22 | 23 | {owner} 发布在 {href} 24 | {moment(updatedAt).format('YYYY-MM-DD HH:mm')} 25 |
26 |
27 | ); 28 | 29 | export default ArticleListContent; 30 | -------------------------------------------------------------------------------- /ListSearchArticles/src/components/StandardFormRow/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .standardFormRow { 4 | display: flex; 5 | width: 100%; 6 | margin-bottom: 16px; 7 | padding-bottom: 16px; 8 | border-bottom: 1px dashed @border-color-split; 9 | :global { 10 | .ant-form-item, 11 | .ant-legacy-form-item { 12 | margin-right: 24px; 13 | } 14 | .ant-form-item-label, 15 | .ant-legacy-form-item-label { 16 | label { 17 | margin-right: 0; 18 | color: @text-color; 19 | } 20 | } 21 | .ant-form-item-label, 22 | .ant-legacy-form-item-label, 23 | .ant-form-item-control, 24 | .ant-legacy-form-item-control { 25 | padding: 0; 26 | line-height: 32px; 27 | } 28 | } 29 | .label { 30 | flex: 0 0 auto; 31 | margin-right: 24px; 32 | color: @heading-color; 33 | font-size: @font-size-base; 34 | text-align: right; 35 | & > span { 36 | display: inline-block; 37 | height: 32px; 38 | line-height: 32px; 39 | &::after { 40 | content: '：'; 41 | } 42 | } 43 | } 44 | .content { 45 | flex: 1 1 0; 46 | :global { 47 | .ant-form-item, 48 | .ant-legacy-form-item { 49 | &:last-child { 50 | display: block; 51 | margin-right: 0; 52 | } 53 | } 54 | } 55 | } 56 | } 57 | 58 | .standardFormRowLast { 59 | margin-bottom: 0; 60 | padding-bottom: 0; 61 | border: none; 62 | } 63 | 64 | .standardFormRowBlock { 65 | :global { 66 | .ant-form-item, 67 | .ant-legacy-form-item, 68 | div.ant-form-item-control-wrapper, 69 | div.ant-legacy-form-item-control-wrapper { 70 | display: block; 71 | } 72 | } 73 | } 74 | 75 | .standardFormRowGrid { 76 | :global { 77 | .ant-form-item, 78 | .ant-legacy-form-item, 79 | div.ant-form-item-control-wrapper, 80 | div.ant-legacy-form-item-control-wrapper { 81 | display: block; 82 | } 83 | .ant-form-item-label, 84 | .ant-legacy-form-item-label { 85 | float: left; 86 | } 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /ListSearchArticles/src/components/StandardFormRow/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import styles from './index.less'; 4 | 5 | type StandardFormRowProps = { 6 | title?: string; 7 | last?: boolean; 8 | block?: boolean; 9 | grid?: boolean; 10 | style?: React.CSSProperties; 11 | }; 12 | 13 | const StandardFormRow: React.FC = ({ 14 | title, 15 | children, 16 | last, 17 | block, 18 | grid, 19 | ...rest 20 | }) => { 21 | const cls = classNames(styles.standardFormRow, { 22 | [styles.standardFormRowBlock]: block, 23 | [styles.standardFormRowLast]: last, 24 | [styles.standardFormRowGrid]: grid, 25 | }); 26 | 27 | return ( 28 |
29 | {title && ( 30 |
31 | {title} 32 |
33 | )} 34 |
{children}
35 |
36 | ); 37 | }; 38 | 39 | export default StandardFormRow; 40 | -------------------------------------------------------------------------------- /ListSearchArticles/src/components/TagSelect/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .tagSelect { 4 | position: relative; 5 | max-height: 32px; 6 | margin-left: -8px; 7 | overflow: hidden; 8 | line-height: 32px; 9 | transition: all 0.3s; 10 | user-select: none; 11 | :global { 12 | .ant-tag { 13 | margin-right: 24px; 14 | padding: 0 8px; 15 | font-size: @font-size-base; 16 | } 17 | } 18 | &.expanded { 19 | max-height: 200px; 20 | transition: all 0.3s; 21 | } 22 | .trigger { 23 | position: absolute; 24 | top: 0; 25 | right: 0; 26 | span.anticon { 27 | font-size: 12px; 28 | } 29 | } 30 | &.hasExpandTag { 31 | padding-right: 50px; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /ListSearchArticles/src/data.d.ts: -------------------------------------------------------------------------------- 1 | export type Member = { 2 | avatar: string; 3 | name: string; 4 | id: string; 5 | }; 6 | 7 | export interface Params { 8 | count: number; 9 | } 10 | export interface ListItemDataType { 11 | id: string; 12 | owner: string; 13 | title: string; 14 | avatar: string; 15 | cover: string; 16 | status: 'normal' | 'exception' | 'active' | 'success'; 17 | percent: number; 18 | logo: string; 19 | href: string; 20 | body?: any; 21 | updatedAt: number; 22 | createdAt: number; 23 | subDescription: string; 24 | description: string; 25 | activeUser: number; 26 | newUser: number; 27 | star: number; 28 | like: number; 29 | message: number; 30 | content: string; 31 | members: Member[]; 32 | } 33 | -------------------------------------------------------------------------------- /ListSearchArticles/src/service.ts: -------------------------------------------------------------------------------- 1 | import { request } from 'umi'; 2 | import type { Params, ListItemDataType } from './data.d'; 3 | 4 | export async function queryFakeList( 5 | params: Params, 6 | ): Promise<{ data: { list: ListItemDataType[] } }> { 7 | return request('/api/fake_list', { 8 | params, 9 | }); 10 | } 11 | -------------------------------------------------------------------------------- /ListSearchArticles/src/style.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | a.listItemMetaTitle { 4 | color: @heading-color; 5 | } 6 | .listItemExtra { 7 | width: 272px; 8 | height: 1px; 9 | } 10 | .selfTrigger { 11 | margin-left: 12px; 12 | } 13 | 14 | @media screen and (max-width: @screen-xs) { 15 | .selfTrigger { 16 | display: block; 17 | margin-left: 0; 18 | } 19 | } 20 | @media screen and (max-width: @screen-md) { 21 | .selfTrigger { 22 | display: block; 23 | margin-left: 0; 24 | } 25 | } 26 | @media screen and (max-width: @screen-lg) { 27 | .listItemExtra { 28 | width: 0; 29 | height: 1px; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /ListSearchProjects/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /ListSearchProjects/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/searchlistprojects 2 | 3 | SearchListProjects 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/searchlistprojects 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /ListSearchProjects/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/search-list-projects", 3 | "version": "0.0.1", 4 | "description": "常用于陈列某一主题下的大量条目，并提供丰富的数据筛选功能帮助用户匹配出需要的数据自己。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/searchlistprojects" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "ahooks": "^2.0.0", 16 | "classnames": "^2.2.6", 17 | "moment": "^2.22.2" 18 | }, 19 | "blockConfig": { 20 | "specVersion": "0.1" 21 | }, 22 | "devDependencies": { 23 | "@types/express": "^4.17.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /ListSearchProjects/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/ListSearchProjects/snapshot.png -------------------------------------------------------------------------------- /ListSearchProjects/src/components/AvatarList/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .avatarList { 4 | display: inline-block; 5 | ul { 6 | display: inline-block; 7 | margin-left: 8px; 8 | font-size: 0; 9 | } 10 | } 11 | 12 | .avatarItem { 13 | display: inline-block; 14 | width: @avatar-size-base; 15 | height: @avatar-size-base; 16 | margin-left: -8px; 17 | font-size: @font-size-base; 18 | :global { 19 | .ant-avatar { 20 | border: 1px solid @border-color-base; 21 | } 22 | } 23 | } 24 | 25 | .avatarItemLarge { 26 | width: @avatar-size-lg; 27 | height: @avatar-size-lg; 28 | } 29 | 30 | .avatarItemSmall { 31 | width: @avatar-size-sm; 32 | height: @avatar-size-sm; 33 | } 34 | 35 | .avatarItemMini { 36 | width: 20px; 37 | height: 20px; 38 | :global { 39 | .ant-avatar { 40 | width: 20px; 41 | height: 20px; 42 | line-height: 20px; 43 | 44 | .ant-avatar-string { 45 | font-size: 12px; 46 | line-height: 18px; 47 | } 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /ListSearchProjects/src/components/StandardFormRow/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .standardFormRow { 4 | display: flex; 5 | width: 100%; 6 | margin-bottom: 16px; 7 | padding-bottom: 16px; 8 | border-bottom: 1px dashed @border-color-split; 9 | :global { 10 | .ant-form-item, 11 | .ant-legacy-form-item { 12 | margin-right: 24px; 13 | } 14 | .ant-form-item-label, 15 | .ant-legacy-form-item-label { 16 | label { 17 | margin-right: 0; 18 | color: @text-color; 19 | } 20 | } 21 | .ant-form-item-label, 22 | .ant-legacy-form-item-label, 23 | .ant-form-item-control, 24 | .ant-legacy-form-item-control { 25 | padding: 0; 26 | line-height: 32px; 27 | } 28 | } 29 | .label { 30 | flex: 0 0 auto; 31 | margin-right: 24px; 32 | color: @heading-color; 33 | font-size: @font-size-base; 34 | text-align: right; 35 | & > span { 36 | display: inline-block; 37 | height: 32px; 38 | line-height: 32px; 39 | &::after { 40 | content: '：'; 41 | } 42 | } 43 | } 44 | .content { 45 | flex: 1 1 0; 46 | :global { 47 | .ant-form-item, 48 | .ant-legacy-form-item { 49 | &:last-child { 50 | display: block; 51 | margin-right: 0; 52 | } 53 | } 54 | } 55 | } 56 | } 57 | 58 | .standardFormRowLast { 59 | margin-bottom: 0; 60 | padding-bottom: 0; 61 | border: none; 62 | } 63 | 64 | .standardFormRowBlock { 65 | :global { 66 | .ant-form-item, 67 | .ant-legacy-form-item, 68 | div.ant-form-item-control-wrapper, 69 | div.ant-legacy-form-item-control-wrapper { 70 | display: block; 71 | } 72 | } 73 | } 74 | 75 | .standardFormRowGrid { 76 | :global { 77 | .ant-form-item, 78 | .ant-legacy-form-item, 79 | div.ant-form-item-control-wrapper, 80 | div.ant-legacy-form-item-control-wrapper { 81 | display: block; 82 | } 83 | .ant-form-item-label, 84 | .ant-legacy-form-item-label { 85 | float: left; 86 | } 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /ListSearchProjects/src/components/StandardFormRow/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import styles from './index.less'; 4 | 5 | type StandardFormRowProps = { 6 | title?: string; 7 | last?: boolean; 8 | block?: boolean; 9 | grid?: boolean; 10 | style?: React.CSSProperties; 11 | }; 12 | 13 | const StandardFormRow: React.FC = ({ 14 | title, 15 | children, 16 | last, 17 | block, 18 | grid, 19 | ...rest 20 | }) => { 21 | const cls = classNames(styles.standardFormRow, { 22 | [styles.standardFormRowBlock]: block, 23 | [styles.standardFormRowLast]: last, 24 | [styles.standardFormRowGrid]: grid, 25 | }); 26 | 27 | return ( 28 |
29 | {title && ( 30 |
31 | {title} 32 |
33 | )} 34 |
{children}
35 |
36 | ); 37 | }; 38 | 39 | export default StandardFormRow; 40 | -------------------------------------------------------------------------------- /ListSearchProjects/src/components/TagSelect/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .tagSelect { 4 | position: relative; 5 | max-height: 32px; 6 | margin-left: -8px; 7 | overflow: hidden; 8 | line-height: 32px; 9 | transition: all 0.3s; 10 | user-select: none; 11 | :global { 12 | .ant-tag { 13 | margin-right: 24px; 14 | padding: 0 8px; 15 | font-size: @font-size-base; 16 | } 17 | } 18 | &.expanded { 19 | max-height: 200px; 20 | transition: all 0.3s; 21 | } 22 | .trigger { 23 | position: absolute; 24 | top: 0; 25 | right: 0; 26 | span.anticon { 27 | font-size: 12px; 28 | } 29 | } 30 | &.hasExpandTag { 31 | padding-right: 50px; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /ListSearchProjects/src/data.d.ts: -------------------------------------------------------------------------------- 1 | export type Member = { 2 | avatar: string; 3 | name: string; 4 | id: string; 5 | }; 6 | 7 | export interface Params { 8 | count: number; 9 | } 10 | export interface ListItemDataType { 11 | id: string; 12 | owner: string; 13 | title: string; 14 | avatar: string; 15 | cover: string; 16 | status: 'normal' | 'exception' | 'active' | 'success'; 17 | percent: number; 18 | logo: string; 19 | href: string; 20 | body?: any; 21 | updatedAt: number; 22 | createdAt: number; 23 | subDescription: string; 24 | description: string; 25 | activeUser: number; 26 | newUser: number; 27 | star: number; 28 | like: number; 29 | message: number; 30 | content: string; 31 | members: Member[]; 32 | } 33 | -------------------------------------------------------------------------------- /ListSearchProjects/src/service.ts: -------------------------------------------------------------------------------- 1 | import { request } from 'umi'; 2 | import type { Params, ListItemDataType } from './data'; 3 | 4 | export async function queryFakeList( 5 | params: Params, 6 | ): Promise<{ data: { list: ListItemDataType[] } }> { 7 | return request('/api/fake_list', { 8 | params, 9 | }); 10 | } 11 | -------------------------------------------------------------------------------- /ListSearchProjects/src/style.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | @import './utils/utils.less'; 3 | 4 | .coverCardList { 5 | .card { 6 | :global { 7 | .ant-card-meta-title { 8 | margin-bottom: 4px; 9 | & > a { 10 | display: inline-block; 11 | max-width: 100%; 12 | color: @heading-color; 13 | } 14 | } 15 | .ant-card-meta-description { 16 | height: 44px; 17 | overflow: hidden; 18 | line-height: 22px; 19 | } 20 | } 21 | 22 | &:hover { 23 | :global { 24 | .ant-card-meta-title > a { 25 | color: @primary-color; 26 | } 27 | } 28 | } 29 | } 30 | 31 | .cardItemContent { 32 | display: flex; 33 | height: 20px; 34 | margin-top: 16px; 35 | margin-bottom: -4px; 36 | line-height: 20px; 37 | & > span { 38 | flex: 1; 39 | color: @text-color-secondary; 40 | font-size: 12px; 41 | } 42 | .avatarList { 43 | flex: 0 1 auto; 44 | } 45 | } 46 | .cardList { 47 | margin-top: 24px; 48 | } 49 | 50 | :global { 51 | .ant-list .ant-list-item-content-single { 52 | max-width: 100%; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /ListSearchProjects/src/utils/utils.less: -------------------------------------------------------------------------------- 1 | .textOverflow() { 2 | overflow: hidden; 3 | white-space: nowrap; 4 | text-overflow: ellipsis; 5 | word-break: break-all; 6 | } 7 | 8 | .textOverflowMulti(@line: 3, @bg: #fff) { 9 | position: relative; 10 | max-height: @line * 1.5em; 11 | margin-right: -1em; 12 | padding-right: 1em; 13 | overflow: hidden; 14 | line-height: 1.5em; 15 | text-align: justify; 16 | &::before { 17 | position: absolute; 18 | right: 14px; 19 | bottom: 0; 20 | padding: 0 1px; 21 | background: @bg; 22 | content: '...'; 23 | } 24 | &::after { 25 | position: absolute; 26 | right: 14px; 27 | width: 1em; 28 | height: 1em; 29 | margin-top: 0.2em; 30 | background: white; 31 | content: ''; 32 | } 33 | } 34 | 35 | // mixins for clearfix 36 | // ------------------------ 37 | .clearfix() { 38 | zoom: 1; 39 | &::before, 40 | &::after { 41 | display: table; 42 | content: ' '; 43 | } 44 | &::after { 45 | clear: both; 46 | height: 0; 47 | font-size: 0; 48 | visibility: hidden; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /ListTableList/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /ListTableList/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/tablelist 2 | 3 | TableList 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/TableList 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /ListTableList/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/table-list", 3 | "version": "0.0.1", 4 | "description": "一个标准的表格增删改查页面，可以派生出百分之八十的后台页面。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/tablelist" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "@ant-design/icons": "^4.0.0", 16 | "@ant-design/pro-descriptions": "^1.6.0", 17 | "@ant-design/pro-form": "^1.16.0", 18 | "@ant-design/pro-layout": "^6.0.0", 19 | "@ant-design/pro-table": "^2.30.0", 20 | "moment": "^2.22.2" 21 | }, 22 | "peerDependencies": { 23 | "@ant-design/pro-layout": "^6.0.0" 24 | }, 25 | "devDependencies": { 26 | "@types/express": "^4.17.0" 27 | }, 28 | "blockConfig": { 29 | "specVersion": "0.1" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /ListTableList/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/ListTableList/snapshot.png -------------------------------------------------------------------------------- /ListTableList/src/components/CreateForm.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Modal } from 'antd'; 3 | 4 | type CreateFormProps = { 5 | modalVisible: boolean; 6 | onCancel: () => void; 7 | }; 8 | 9 | const CreateForm: React.FC = (props) => { 10 | const { modalVisible, onCancel } = props; 11 | 12 | return ( 13 | onCancel()} 18 | footer={null} 19 | > 20 | {props.children} 21 | 22 | ); 23 | }; 24 | 25 | export default CreateForm; 26 | -------------------------------------------------------------------------------- /ListTableList/src/data.d.ts: -------------------------------------------------------------------------------- 1 | export type TableListItem = { 2 | key: number; 3 | disabled?: boolean; 4 | href: string; 5 | avatar: string; 6 | name: string; 7 | owner: string; 8 | desc: string; 9 | callNo: number; 10 | status: string; 11 | updatedAt: Date; 12 | createdAt: Date; 13 | progress: number; 14 | }; 15 | 16 | export type TableListPagination = { 17 | total: number; 18 | pageSize: number; 19 | current: number; 20 | }; 21 | 22 | export type TableListData = { 23 | list: TableListItem[]; 24 | pagination: Partial; 25 | }; 26 | 27 | export type TableListParams = { 28 | status?: string; 29 | name?: string; 30 | desc?: string; 31 | key?: number; 32 | pageSize?: number; 33 | currentPage?: number; 34 | filter?: Record; 35 | sorter?: Record; 36 | }; 37 | -------------------------------------------------------------------------------- /ListTableList/src/service.ts: -------------------------------------------------------------------------------- 1 | // @ts-ignore 2 | /* eslint-disable */ 3 | import { request } from 'umi'; 4 | import { TableListItem } from './data'; 5 | 6 | /** 获取规则列表 GET /api/rule */ 7 | export async function rule( 8 | params: { 9 | // query 10 | /** 当前的页码 */ 11 | current?: number; 12 | /** 页面的容量 */ 13 | pageSize?: number; 14 | }, 15 | options?: { [key: string]: any }, 16 | ) { 17 | return request<{ 18 | data: TableListItem[]; 19 | /** 列表的内容总数 */ 20 | total?: number; 21 | success?: boolean; 22 | }>('/api/rule', { 23 | method: 'GET', 24 | params: { 25 | ...params, 26 | }, 27 | ...(options || {}), 28 | }); 29 | } 30 | 31 | /** 新建规则 PUT /api/rule */ 32 | export async function updateRule(data: { [key: string]: any }, options?: { [key: string]: any }) { 33 | return request('/api/rule', { 34 | data, 35 | method: 'PUT', 36 | ...(options || {}), 37 | }); 38 | } 39 | 40 | /** 新建规则 POST /api/rule */ 41 | export async function addRule(data: { [key: string]: any }, options?: { [key: string]: any }) { 42 | return request('/api/rule', { 43 | data, 44 | method: 'POST', 45 | ...(options || {}), 46 | }); 47 | } 48 | 49 | /** 删除规则 DELETE /api/rule */ 50 | export async function removeRule(data: { key: number[] }, options?: { [key: string]: any }) { 51 | return request>('/api/rule', { 52 | data, 53 | method: 'DELETE', 54 | ...(options || {}), 55 | }); 56 | } 57 | -------------------------------------------------------------------------------- /ProfileAdvanced/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /ProfileAdvanced/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/advancedprofile 2 | 3 | AdvancedProfile 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/advancedprofile 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /ProfileAdvanced/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/advanced-profile", 3 | "version": "0.0.1", 4 | "description": "一个复杂的详情页，可以展示一个对象的基本信息和其相关的新息和操作。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/advancedprofile" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "@ant-design/icons": "^4.0.0", 16 | "classnames": "^2.2.6", 17 | "lodash-decorators": "^6.0.0" 18 | }, 19 | "peerDependencies": { 20 | "@ant-design/pro-layout": "^6.0.0" 21 | }, 22 | "blockConfig": { 23 | "specVersion": "0.1" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /ProfileAdvanced/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/ProfileAdvanced/snapshot.png -------------------------------------------------------------------------------- /ProfileAdvanced/src/_mock.ts: -------------------------------------------------------------------------------- 1 | import type { Request, Response } from 'express'; 2 | 3 | const advancedOperation1 = [ 4 | { 5 | key: 'op1', 6 | type: '订购关系生效', 7 | name: '曲丽丽', 8 | status: 'agree', 9 | updatedAt: '2017-10-03 19:23:12', 10 | memo: '-', 11 | }, 12 | { 13 | key: 'op2', 14 | type: '财务复审', 15 | name: '付小小', 16 | status: 'reject', 17 | updatedAt: '2017-10-03 19:23:12', 18 | memo: '不通过原因', 19 | }, 20 | { 21 | key: 'op3', 22 | type: '部门初审', 23 | name: '周毛毛', 24 | status: 'agree', 25 | updatedAt: '2017-10-03 19:23:12', 26 | memo: '-', 27 | }, 28 | { 29 | key: 'op4', 30 | type: '提交订单', 31 | name: '林东东', 32 | status: 'agree', 33 | updatedAt: '2017-10-03 19:23:12', 34 | memo: '很棒', 35 | }, 36 | { 37 | key: 'op5', 38 | type: '创建订单', 39 | name: '汗牙牙', 40 | status: 'agree', 41 | updatedAt: '2017-10-03 19:23:12', 42 | memo: '-', 43 | }, 44 | ]; 45 | 46 | const advancedOperation2 = [ 47 | { 48 | key: 'op1', 49 | type: '订购关系生效', 50 | name: '曲丽丽', 51 | status: 'agree', 52 | updatedAt: '2017-10-03 19:23:12', 53 | memo: '-', 54 | }, 55 | ]; 56 | 57 | const advancedOperation3 = [ 58 | { 59 | key: 'op1', 60 | type: '创建订单', 61 | name: '汗牙牙', 62 | status: 'agree', 63 | updatedAt: '2017-10-03 19:23:12', 64 | memo: '-', 65 | }, 66 | ]; 67 | 68 | function getProfileAdvancedData(req: Request, res: Response) { 69 | const result = { 70 | data: { 71 | advancedOperation1, 72 | advancedOperation2, 73 | advancedOperation3, 74 | }, 75 | }; 76 | return res.json(result); 77 | } 78 | 79 | export default { 80 | 'GET /api/profile/advanced': getProfileAdvancedData, 81 | }; 82 | -------------------------------------------------------------------------------- /ProfileAdvanced/src/data.d.ts: -------------------------------------------------------------------------------- 1 | export type AdvancedOperation1 = { 2 | key: string; 3 | type: string; 4 | name: string; 5 | status: string; 6 | updatedAt: string; 7 | memo: string; 8 | }; 9 | 10 | export type AdvancedOperation2 = { 11 | key: string; 12 | type: string; 13 | name: string; 14 | status: string; 15 | updatedAt: string; 16 | memo: string; 17 | }; 18 | 19 | export type AdvancedOperation3 = { 20 | key: string; 21 | type: string; 22 | name: string; 23 | status: string; 24 | updatedAt: string; 25 | memo: string; 26 | }; 27 | 28 | export interface AdvancedProfileData { 29 | advancedOperation1?: AdvancedOperation1[]; 30 | advancedOperation2?: AdvancedOperation2[]; 31 | advancedOperation3?: AdvancedOperation3[]; 32 | } 33 | -------------------------------------------------------------------------------- /ProfileAdvanced/src/service.ts: -------------------------------------------------------------------------------- 1 | import { request } from 'umi'; 2 | 3 | export async function queryAdvancedProfile() { 4 | return request('/api/profile/advanced'); 5 | } 6 | -------------------------------------------------------------------------------- /ProfileAdvanced/src/style.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .main { 4 | :global { 5 | .ant-descriptions-row > td { 6 | padding-bottom: 8px; 7 | } 8 | .ant-page-header-heading-extra { 9 | flex-direction: column; 10 | } 11 | } 12 | } 13 | 14 | .headerList { 15 | margin-bottom: 4px; 16 | :global { 17 | .ant-descriptions-row > td { 18 | padding-bottom: 8px; 19 | } 20 | } 21 | 22 | .stepDescription { 23 | position: relative; 24 | left: 38px; 25 | padding-top: 8px; 26 | font-size: 14px; 27 | text-align: left; 28 | 29 | > div { 30 | margin-top: 8px; 31 | margin-bottom: 4px; 32 | } 33 | } 34 | } 35 | 36 | .pageHeader { 37 | :global { 38 | .ant-page-header-heading-extra > * + * { 39 | margin-left: 8px; 40 | } 41 | } 42 | .moreInfo { 43 | display: flex; 44 | justify-content: space-between; 45 | width: 200px; 46 | } 47 | } 48 | 49 | @media screen and (max-width: @screen-sm) { 50 | .stepDescription { 51 | left: 8px; 52 | } 53 | .pageHeader { 54 | :global { 55 | .ant-pro-page-header-wrap-row { 56 | flex-direction: column; 57 | } 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /ProfileBasic/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /ProfileBasic/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/basicprofile 2 | 3 | BasicProfile 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/basicprofile 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /ProfileBasic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/basic-profile", 3 | "version": "0.0.1", 4 | "description": "详情页可以向用户展示一个对象完整的描述信息,并且可以对一个对象进行编辑操作。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/basicprofile" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "@ant-design/pro-table": "^2.2.7" 16 | }, 17 | "peerDependencies": { 18 | "@ant-design/pro-layout": "^6.0.0" 19 | }, 20 | "blockConfig": { 21 | "specVersion": "0.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /ProfileBasic/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/ProfileBasic/snapshot.png -------------------------------------------------------------------------------- /ProfileBasic/src/_mock.ts: -------------------------------------------------------------------------------- 1 | import type { Request, Response } from 'express'; 2 | 3 | const basicGoods = [ 4 | { 5 | id: '1234561', 6 | name: '矿泉水 550ml', 7 | barcode: '12421432143214321', 8 | price: '2.00', 9 | num: '1', 10 | amount: '2.00', 11 | }, 12 | { 13 | id: '1234562', 14 | name: '凉茶 300ml', 15 | barcode: '12421432143214322', 16 | price: '3.00', 17 | num: '2', 18 | amount: '6.00', 19 | }, 20 | { 21 | id: '1234563', 22 | name: '好吃的薯片', 23 | barcode: '12421432143214323', 24 | price: '7.00', 25 | num: '4', 26 | amount: '28.00', 27 | }, 28 | { 29 | id: '1234564', 30 | name: '特别好吃的蛋卷', 31 | barcode: '12421432143214324', 32 | price: '8.50', 33 | num: '3', 34 | amount: '25.50', 35 | }, 36 | ]; 37 | 38 | const basicProgress = [ 39 | { 40 | key: '1', 41 | time: '2017-10-01 14:10', 42 | rate: '联系客户', 43 | status: 'processing', 44 | operator: '取货员 ID1234', 45 | cost: '5mins', 46 | }, 47 | { 48 | key: '2', 49 | time: '2017-10-01 14:05', 50 | rate: '取货员出发', 51 | status: 'success', 52 | operator: '取货员 ID1234', 53 | cost: '1h', 54 | }, 55 | { 56 | key: '3', 57 | time: '2017-10-01 13:05', 58 | rate: '取货员接单', 59 | status: 'success', 60 | operator: '取货员 ID1234', 61 | cost: '5mins', 62 | }, 63 | { 64 | key: '4', 65 | time: '2017-10-01 13:00', 66 | rate: '申请审批通过', 67 | status: 'success', 68 | operator: '系统', 69 | cost: '1h', 70 | }, 71 | { 72 | key: '5', 73 | time: '2017-10-01 12:00', 74 | rate: '发起退货申请', 75 | status: 'success', 76 | operator: '用户', 77 | cost: '5mins', 78 | }, 79 | ]; 80 | 81 | function getProfileBasic(_: Request, res: Response) { 82 | return res.json({ 83 | data: { 84 | basicProgress, 85 | basicGoods, 86 | }, 87 | }); 88 | } 89 | 90 | export default { 91 | 'GET /api/profile/basic': getProfileBasic, 92 | }; 93 | -------------------------------------------------------------------------------- /ProfileBasic/src/data.d.ts: -------------------------------------------------------------------------------- 1 | export type BasicGood = { 2 | id: string; 3 | name?: string; 4 | barcode?: string; 5 | price?: string; 6 | num?: string | number; 7 | amount?: string | number; 8 | }; 9 | 10 | export type BasicProgress = { 11 | key: string; 12 | time: string; 13 | rate: string; 14 | status: string; 15 | operator: string; 16 | cost: string; 17 | }; 18 | -------------------------------------------------------------------------------- /ProfileBasic/src/service.ts: -------------------------------------------------------------------------------- 1 | import { request } from 'umi'; 2 | import type { BasicGood, BasicProgress } from './data.d'; 3 | 4 | export async function queryBasicProfile(): Promise<{ 5 | data: { 6 | basicProgress: BasicProgress[]; 7 | basicGoods: BasicGood[]; 8 | }; 9 | }> { 10 | return request('/api/profile/basic'); 11 | } 12 | -------------------------------------------------------------------------------- /ProfileBasic/src/style.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .title { 4 | margin-bottom: 16px; 5 | color: @heading-color; 6 | font-weight: 500; 7 | font-size: 16px; 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # pro-blocks 2 | 3 | ![](https://badgen.net/badge/icon/Ant%20Design?icon=https://gw.alipayobjects.com/zos/antfincdn/Pp4WPgVDB3/KDpgvguMpGfqaHPjicRK.svg&label) [![Build Status](https://dev.azure.com/chenshuai2144/pro-blocks/_apis/build/status/ant-design.pro-blocks?branchName=master)](https://dev.azure.com/chenshuai2144/pro-blocks/_build/latest?definitionId=3&branchName=master) 4 | 5 | Ant Design Pro for Umi blocks. 6 | 7 | > [Ant Design Pro V4](https://github.com/ant-design/ant-design-pro/issues/3143) official blockchain 8 | 9 | ## usage 10 | 11 | ```shell 12 | umi block add [block github url] 13 | ``` 14 | 15 | You can visit umi [doc](https://umijs.org/guide/block.html) to learn more about umi block. 16 | 17 | ## contribution 18 | 19 | Enter the name of the block to be developed 20 | 21 | ```shell 22 | npm install 23 | npm run start 'block_name' 24 | ``` 25 | 26 | In complex TypeScript definitions, vscode may crash or tslint report errors. You can restart TypeScript service by "ctrl + shift + p> reload window" 27 | -------------------------------------------------------------------------------- /README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # pro-blocks 2 | 3 | ![](https://badgen.net/badge/icon/Ant%20Design?icon=https://gw.alipayobjects.com/zos/antfincdn/Pp4WPgVDB3/KDpgvguMpGfqaHPjicRK.svg&label) [![Build Status](https://dev.azure.com/chenshuai2144/pro-blocks/_apis/build/status/ant-design.pro-blocks?branchName=master)](https://dev.azure.com/chenshuai2144/pro-blocks/_build/latest?definitionId=3&branchName=master) 4 | 5 | [English README](./README.md) 6 | 7 | Umi 块的 Ant Design Pro。 8 | 9 | > [Ant Design Pro V4](https://github.com/ant-design/ant-design-pro/issues/3143)的官方区块 10 | 11 | ## 用法 12 | 13 | ```shell 14 | umi block add [block github url] 15 | ``` 16 | 17 | 你可以访问 umi [doc](https://umijs.org/guide/block.html)了解更多关于 umi block 的信息。 18 | 19 | ## 贡献 20 | 21 | 输入要开发的 block 名称 22 | 23 | ```shell 24 | npm install 25 | npm run start 'block_name' 26 | ``` 27 | 28 | > 在复杂的 TypeScript 定义中，vscode 可能会崩溃或 tslint 报告错误。您可以通过 “ctrl + shift + p> reload window” 重新启动 TypeScript 服务 29 | -------------------------------------------------------------------------------- /ResultFail/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /ResultFail/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/resulterror 2 | 3 | ResultError 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/resulterror 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /ResultFail/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/result-fail", 3 | "version": "0.0.1", 4 | "description": "告知用户操作后所产生的失败结果，引导用户接下来的行动。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/resultfail" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "classnames": "^2.2.6" 16 | }, 17 | "peerDependencies": { 18 | "@ant-design/pro-layout": "^6.0.0" 19 | }, 20 | "blockConfig": { 21 | "specVersion": "0.1" 22 | } 23 | } -------------------------------------------------------------------------------- /ResultFail/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/ResultFail/snapshot.png -------------------------------------------------------------------------------- /ResultFail/src/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .error_icon { 4 | color: @highlight-color; 5 | } 6 | .title { 7 | margin-bottom: 16px; 8 | color: @heading-color; 9 | font-weight: 500; 10 | font-size: 16px; 11 | } 12 | -------------------------------------------------------------------------------- /ResultFail/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { CloseCircleOutlined, RightOutlined } from '@ant-design/icons'; 2 | import { Button, Card, Result } from 'antd'; 3 | import { Fragment } from 'react'; 4 | 5 | import { GridContent } from '@ant-design/pro-layout'; 6 | import styles from './index.less'; 7 | 8 | const Content = ( 9 | 10 |
11 | 您提交的内容有如下错误： 12 |
13 |
14 | 15 | 您的账户已被冻结 16 | 17 | 立即解冻 18 | 19 | 20 |
21 |
22 | 23 | 您的账户还不具备申请资格 24 | 25 | 立即升级 26 | 27 | 28 |
29 | 30 | ); 31 | 32 | export default () => ( 33 | 34 | 35 | 41 | 返回修改 42 | 43 | } 44 | style={{ marginTop: 48, marginBottom: 16 }} 45 | > 46 | {Content} 47 | 48 | 49 | 50 | ); 51 | -------------------------------------------------------------------------------- /ResultSuccess/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /ResultSuccess/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/resultsuccess 2 | 3 | ResultSuccess 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/resultsuccess 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /ResultSuccess/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/result-success", 3 | "version": "0.0.1", 4 | "description": "告知用户操作后所产生的成功结果，引导用户接下来的行动。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/resultsuccess" 8 | }, 9 | "license": "ISC", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "classnames": "^2.2.6" 16 | }, 17 | "peerDependencies": { 18 | "@ant-design/pro-layout": "^6.0.0" 19 | }, 20 | "blockConfig": { 21 | "specVersion": "0.1" 22 | } 23 | } -------------------------------------------------------------------------------- /ResultSuccess/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/ResultSuccess/snapshot.png -------------------------------------------------------------------------------- /ResultSuccess/src/index.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .title { 4 | position: relative; 5 | color: @text-color; 6 | font-size: 12px; 7 | text-align: center; 8 | } 9 | 10 | .head-title { 11 | margin-bottom: 20px; 12 | color: @heading-color; 13 | font-weight: 500px; 14 | font-size: 16px; 15 | } 16 | -------------------------------------------------------------------------------- /UserRegister/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /UserRegister/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/userregister 2 | 3 | UserRegister 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/UserRegister 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /UserRegister/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/user-register", 3 | "version": "0.0.1", 4 | "description": "用户注册时使用，用于填写基本的账号信息。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/userregister" 8 | }, 9 | "license": "MIT", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "moment": "^2.22.2", 16 | "nzh": "^1.0.3" 17 | }, 18 | "blockConfig": { 19 | "specVersion": "0.1" 20 | }, 21 | "devDependencies": { 22 | "@types/express": "^4.17.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /UserRegister/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/UserRegister/snapshot.png -------------------------------------------------------------------------------- /UserRegister/src/_mock.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-extraneous-dependencies 2 | import type { Request, Response } from 'express'; 3 | 4 | export default { 5 | 'POST /api/register': (_: Request, res: Response) => { 6 | res.send({ 7 | data: { status: 'ok', currentAuthority: 'user' }, 8 | }); 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /UserRegister/src/service.ts: -------------------------------------------------------------------------------- 1 | import { request } from 'umi'; 2 | 3 | export interface StateType { 4 | status?: 'ok' | 'error'; 5 | currentAuthority?: 'user' | 'guest' | 'admin'; 6 | } 7 | 8 | export interface UserRegisterParams { 9 | mail: string; 10 | password: string; 11 | confirm: string; 12 | mobile: string; 13 | captcha: string; 14 | prefix: string; 15 | } 16 | 17 | export async function fakeRegister(params: UserRegisterParams) { 18 | return request('/api/register', { 19 | method: 'POST', 20 | data: params, 21 | }); 22 | } 23 | -------------------------------------------------------------------------------- /UserRegister/src/style.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .main { 4 | width: 368px; 5 | margin: 0 auto; 6 | 7 | h3 { 8 | margin-bottom: 20px; 9 | font-size: 16px; 10 | } 11 | 12 | .password { 13 | margin-bottom: 24px; 14 | :global { 15 | .ant-form-item-explain { 16 | display: none; 17 | } 18 | } 19 | } 20 | 21 | .getCaptcha { 22 | display: block; 23 | width: 100%; 24 | } 25 | 26 | .submit { 27 | width: 50%; 28 | } 29 | 30 | .login { 31 | float: right; 32 | line-height: @btn-height-lg; 33 | } 34 | } 35 | 36 | .success, 37 | .warning, 38 | .error { 39 | transition: color 0.3s; 40 | } 41 | 42 | .success { 43 | color: @success-color; 44 | } 45 | 46 | .warning { 47 | color: @warning-color; 48 | } 49 | 50 | .error { 51 | color: @error-color; 52 | } 53 | 54 | .progress-pass > .progress { 55 | :global { 56 | .ant-progress-bg { 57 | background-color: @warning-color; 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /UserRegisterResult/.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | /dist 4 | /node_modules 5 | 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /UserRegisterResult/.umirc.js: -------------------------------------------------------------------------------- 1 | export default { 2 | locale: { 3 | // default zh-CN 4 | default: 'zh-CN', 5 | // default true, when it is true, will use `navigator.language` overwrite default 6 | antd: true, 7 | baseNavigator: true, 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /UserRegisterResult/README.md: -------------------------------------------------------------------------------- 1 | # @umi-blocks/ant-design-pro/userregisterresult 2 | 3 | UserRegisterResult 4 | 5 | ## Usage 6 | 7 | ```sh 8 | umi block add ant-design-pro/UserRegisterResult 9 | ``` 10 | 11 | ## SNAPSHOT 12 | 13 | ![SNAPSHOT](./snapshot.png) 14 | 15 | ## LICENSE 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /UserRegisterResult/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@umi-block/user-register-result", 3 | "version": "0.0.1", 4 | "description": "用于展示注册的结果。", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/umijs/umi-blocks/ant-design-pro/userregisterresult" 8 | }, 9 | "license": "MIT", 10 | "main": "src/index.js", 11 | "scripts": { 12 | "dev": "umi dev" 13 | }, 14 | "dependencies": { 15 | "classnames": "^2.2.6", 16 | "react-router": "^4.3.1" 17 | }, 18 | "devDependencies": { 19 | "@types/react-router": "^5.0.2" 20 | }, 21 | "blockConfig": { 22 | "specVersion": "0.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /UserRegisterResult/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-design/pro-blocks/63a02c9e0e137061bc876a81113d4cd6bc031a72/UserRegisterResult/snapshot.png -------------------------------------------------------------------------------- /UserRegisterResult/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { Button, Result } from 'antd'; 2 | import { Link } from 'umi'; 3 | import React from 'react'; 4 | import type { RouteChildrenProps } from 'react-router'; 5 | 6 | import styles from './style.less'; 7 | 8 | const actions = ( 9 |
10 | 11 | 14 | 15 | 16 | 17 | 18 |
19 | ); 20 | 21 | export type LocationState = Record; 22 | 23 | const PAGE_NAME_UPPER_CAMEL_CASE: React.FC = ({ location }) => { 24 | const email = location.state 25 | ? (location.state as LocationState).account 26 | : 'AntDesign@example.com'; 27 | return ( 28 | 33 | 你的账户：{email} 注册成功 34 |
35 | } 36 | subTitle="激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。" 37 | extra={actions} 38 | /> 39 | ); 40 | }; 41 | 42 | export default PAGE_NAME_UPPER_CAMEL_CASE; 43 | -------------------------------------------------------------------------------- /UserRegisterResult/src/style.less: -------------------------------------------------------------------------------- 1 | .registerResult { 2 | width: 800px; 3 | min-height: 400px; 4 | margin: auto; 5 | padding: 80px; 6 | background: none; 7 | :global { 8 | .anticon { 9 | font-size: 64px; 10 | } 11 | } 12 | .title { 13 | margin-top: 32px; 14 | font-size: 20px; 15 | line-height: 28px; 16 | } 17 | .actions { 18 | margin-top: 40px; 19 | a + a { 20 | margin-left: 8px; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /azure-pipelines.yml: -------------------------------------------------------------------------------- 1 | # Node.js 2 | # Build a general Node.js project with npm. 3 | # Add steps that analyze code, save build artifacts, deploy, and more: 4 | # https://docs.microsoft.com/azure/devops/pipelines/languages/javascript 5 | name: ant design pro 6 | 7 | trigger: 8 | - master 9 | 10 | jobs: 11 | - job: lintAndBuild 12 | 13 | pool: 14 | vmImage: 'Ubuntu-16.04' 15 | 16 | container: 17 | image: circleci/node:latest-browsers 18 | options: '-u root' 19 | 20 | steps: 21 | - checkout: self 22 | clean: false 23 | - task: NodeTool@0 24 | inputs: 25 | versionSpec: '11.x' 26 | - script: yarn install 27 | displayName: install 28 | - script: npm run lint 29 | displayName: lint 30 | 31 | - job: lintinJs 32 | pool: 33 | vmImage: 'Ubuntu-16.04' 34 | 35 | steps: 36 | - checkout: self 37 | clean: false 38 | - task: NodeTool@0 39 | inputs: 40 | versionSpec: '11.x' 41 | - script: git clone https://github.com/ant-design/ant-design-pro.git --depth=1 42 | - script: cd ant-design-pro 43 | - script: npm install 44 | displayName: install 45 | - script: npm run fetch:blocks 46 | displayName: fetch-blocks 47 | - script: npm run lint 48 | displayName: lint 49 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "emitDecoratorMetadata": true, 4 | "experimentalDecorators": true, 5 | "baseUrl": ".", 6 | "paths": { 7 | "@/*": ["./src/*"] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "independent", 3 | "npmClient": "yarn", 4 | "useWorkspaces": true, 5 | "changelog": { 6 | "repo": "ant-design/pro-block", 7 | "cacheDir": ".changelog" 8 | }, 9 | "ignoreChanges": [ 10 | "**/*.md", 11 | "**/*.test.ts", 12 | "**/*.e2e.ts", 13 | "**/demos/**", 14 | "**/fixtures/**", 15 | "**/dist/**", 16 | "**/lib/**", 17 | "**/es/**", 18 | "**/test/**" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "build/dist", 4 | "module": "esnext", 5 | "target": "esnext", 6 | "lib": ["esnext", "dom"], 7 | "sourceMap": true, 8 | "jsx": "react-jsx", 9 | "resolveJsonModule": true, 10 | "allowSyntheticDefaultImports": true, 11 | "moduleResolution": "node", 12 | "forceConsistentCasingInFileNames": true, 13 | "noImplicitReturns": true, 14 | "suppressImplicitAnyIndexErrors": true, 15 | "noUnusedLocals": true, 16 | "allowJs": true, 17 | "skipLibCheck": true, 18 | "experimentalDecorators": true, 19 | "strict": true, 20 | "baseUrl": ".", 21 | "paths": { 22 | "@/*": ["./src/*"], 23 | "@@/*": ["./.umi/*"] 24 | } 25 | }, 26 | "include": [ 27 | "./mock/**/*", 28 | "./**/src/**/*", 29 | "./.script/**/*", 30 | "typings/**/*", 31 | "config/**/*", 32 | "models/**.ts", 33 | ".eslintrc.js", 34 | "./tests/__tests__/index.test.js", 35 | ".stylelintrc.js", 36 | ".prettierrc.js", 37 | "jest.config.js", 38 | "mock/*", 39 | "typings.d.ts" 40 | ], 41 | "exclude": ["node_modules", "build", "dist", "scripts", "webpack", "jest"] 42 | } 43 | -------------------------------------------------------------------------------- /typings.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'slash2'; 2 | declare module '*.css'; 3 | declare module '*.less'; 4 | declare module '*.scss'; 5 | declare module '*.sass'; 6 | declare module '*.svg'; 7 | declare module '*.png'; 8 | declare module '*.jpg'; 9 | declare module '*.jpeg'; 10 | declare module '*.gif'; 11 | declare module '*.bmp'; 12 | declare module '*.tiff'; 13 | declare module 'omit.js'; 14 | declare module 'numeral'; 15 | declare module '@antv/data-set'; 16 | declare module 'mockjs'; 17 | declare module 'react-fittext'; 18 | declare module 'bizcharts-plugin-slider'; 19 | 20 | // google analytics interface 21 | type GAFieldsObject = { 22 | eventCategory: string; 23 | eventAction: string; 24 | eventLabel?: string; 25 | eventValue?: number; 26 | nonInteraction?: boolean; 27 | }; 28 | 29 | interface Window { 30 | ga: ( 31 | command: 'send', 32 | hitType: 'event' | 'pageview', 33 | fieldsObject: GAFieldsObject | string, 34 | ) => void; 35 | reloadAuthorized: () => void; 36 | } 37 | 38 | declare let ga: () => void; 39 | 40 | // preview.pro.ant.design only do not use in your production ; 41 | // preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。 42 | declare let ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: 'site' | undefined; 43 | 44 | declare const REACT_APP_ENV: 'test' | 'dev' | 'pre' | false; 45 | --------------------------------------------------------------------------------