From d9214ec2ca2e69378550fffeeffc9dcde062ca59 Mon Sep 17 00:00:00 2001 From: ChenlingasMx <42308734@qq.com> Date: Fri, 9 Jun 2023 11:32:14 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A2=9E=E5=8A=A0=E5=AE=9E=E4=BE=8B?= =?UTF-8?q?=E9=A2=84=E8=A7=882?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/antdp-base2/.editorconfig | 16 + examples/antdp-base2/.env | 1 + examples/antdp-base2/.gitignore | 20 ++ examples/antdp-base2/.prettierignore | 8 + examples/antdp-base2/.prettierrc | 11 + examples/antdp-base2/.stackblitzrc | 4 + examples/antdp-base2/README.md | 19 ++ examples/antdp-base2/config/config.js | 48 +++ examples/antdp-base2/config/proxy.js | 30 ++ examples/antdp-base2/config/router.json | 166 +++++++++ examples/antdp-base2/mock/.gitkeep | 0 examples/antdp-base2/mock/api.js | 281 +++++++++++++++ examples/antdp-base2/mock/login.js | 55 +++ examples/antdp-base2/package.json | 52 +++ examples/antdp-base2/sandbox.config.json | 8 + examples/antdp-base2/src/components/.gitkeep | 0 .../src/components/CardDes/index.jsx | 11 + .../src/components/PageLoading/index.jsx | 6 + .../antdp-base2/src/layouts/BasicLayout.jsx | 93 +++++ .../antdp-base2/src/layouts/UserLayout.jsx | 217 ++++++++++++ examples/antdp-base2/src/layouts/logo.svg | 31 ++ examples/antdp-base2/src/locales/en-US.js | 40 +++ .../antdp-base2/src/locales/en-US/menu.js | 26 ++ examples/antdp-base2/src/locales/zh-CN.js | 28 ++ .../antdp-base2/src/locales/zh-CN/menu.js | 26 ++ examples/antdp-base2/src/models/demo.js | 20 ++ examples/antdp-base2/src/models/user.js | 14 + examples/antdp-base2/src/pages/403.jsx | 5 + examples/antdp-base2/src/pages/404.jsx | 7 + .../src/pages/Components/EditTable/demo1.jsx | 108 ++++++ .../src/pages/Components/EditTable/demo2.jsx | 69 ++++ .../src/pages/Components/EditTable/demo3.jsx | 69 ++++ .../src/pages/Components/EditTable/demo4.jsx | 70 ++++ .../src/pages/Components/EditTable/demo5.jsx | 67 ++++ .../src/pages/Components/EditTable/index.jsx | 29 ++ .../src/pages/Components/FormDetail/index.jsx | 132 +++++++ .../src/pages/Components/FormDetail/item.js | 83 +++++ .../src/pages/Components/ProForm/index.jsx | 126 +++++++ .../src/pages/Components/QuickForm/index.jsx | 38 +++ .../src/pages/Components/QuickForm/item.js | 83 +++++ examples/antdp-base2/src/pages/Demo/index.jsx | 111 ++++++ examples/antdp-base2/src/pages/Demo/item.jsx | 118 +++++++ .../pages/Detail/AdvancedDetails/index.jsx | 143 ++++++++ .../src/pages/Detail/AdvancedDetails/item.js | 200 +++++++++++ .../src/pages/Detail/BasicDetails/index.jsx | 50 +++ .../src/pages/Detail/BasicDetails/item.js | 188 ++++++++++ examples/antdp-base2/src/pages/Home/index.jsx | 323 ++++++++++++++++++ .../antdp-base2/src/pages/Home/style.less | 91 +++++ .../src/pages/List/BasicList/index.jsx | 75 ++++ .../src/pages/List/BasicList/style.less | 3 + .../src/pages/List/CardList/index.jsx | 91 +++++ .../src/pages/List/ProList/index.jsx | 111 ++++++ .../src/pages/List/TableList/index.jsx | 45 +++ .../src/pages/List/TableList/item.jsx | 31 ++ .../Person/PersonalCenter/ApplyLists.jsx | 96 ++++++ .../pages/Person/PersonalCenter/CardLists.jsx | 81 +++++ .../pages/Person/PersonalCenter/Contents.jsx | 33 ++ .../src/pages/Person/PersonalCenter/Lists.jsx | 131 +++++++ .../src/pages/Person/PersonalCenter/User.js | 113 ++++++ .../src/pages/Person/PersonalCenter/index.jsx | 39 +++ .../src/pages/Person/PersonalCenter/item.js | 176 ++++++++++ .../pages/Person/PersonalCenter/style.less | 146 ++++++++ .../Person/PersonalSettings/AccountBind.jsx | 44 +++ .../pages/Person/PersonalSettings/Basic.jsx | 76 +++++ .../pages/Person/PersonalSettings/Edit.jsx | 235 +++++++++++++ .../pages/Person/PersonalSettings/Message.jsx | 47 +++ .../Person/PersonalSettings/SecuritySet.jsx | 41 +++ .../pages/Person/PersonalSettings/index.jsx | 35 ++ .../src/pages/Person/PersonalSettings/item.js | 107 ++++++ .../pages/Person/PersonalSettings/style.less | 3 + .../src/pages/Results/Fail/index.jsx | 34 ++ .../src/pages/Results/Success/index.jsx | 63 ++++ examples/antdp-base2/src/services/api.js | 21 ++ examples/antdp-base2/src/utils/utils.jsx | 16 + .../src/components/Layouts/Navbar/index.tsx | 6 + 75 files changed, 5240 insertions(+) create mode 100755 examples/antdp-base2/.editorconfig create mode 100644 examples/antdp-base2/.env create mode 100644 examples/antdp-base2/.gitignore create mode 100644 examples/antdp-base2/.prettierignore create mode 100644 examples/antdp-base2/.prettierrc create mode 100644 examples/antdp-base2/.stackblitzrc create mode 100644 examples/antdp-base2/README.md create mode 100644 examples/antdp-base2/config/config.js create mode 100644 examples/antdp-base2/config/proxy.js create mode 100644 examples/antdp-base2/config/router.json create mode 100644 examples/antdp-base2/mock/.gitkeep create mode 100644 examples/antdp-base2/mock/api.js create mode 100644 examples/antdp-base2/mock/login.js create mode 100644 examples/antdp-base2/package.json create mode 100644 examples/antdp-base2/sandbox.config.json create mode 100644 examples/antdp-base2/src/components/.gitkeep create mode 100644 examples/antdp-base2/src/components/CardDes/index.jsx create mode 100644 examples/antdp-base2/src/components/PageLoading/index.jsx create mode 100644 examples/antdp-base2/src/layouts/BasicLayout.jsx create mode 100644 examples/antdp-base2/src/layouts/UserLayout.jsx create mode 100644 examples/antdp-base2/src/layouts/logo.svg create mode 100644 examples/antdp-base2/src/locales/en-US.js create mode 100644 examples/antdp-base2/src/locales/en-US/menu.js create mode 100644 examples/antdp-base2/src/locales/zh-CN.js create mode 100644 examples/antdp-base2/src/locales/zh-CN/menu.js create mode 100644 examples/antdp-base2/src/models/demo.js create mode 100644 examples/antdp-base2/src/models/user.js create mode 100644 examples/antdp-base2/src/pages/403.jsx create mode 100644 examples/antdp-base2/src/pages/404.jsx create mode 100644 examples/antdp-base2/src/pages/Components/EditTable/demo1.jsx create mode 100644 examples/antdp-base2/src/pages/Components/EditTable/demo2.jsx create mode 100644 examples/antdp-base2/src/pages/Components/EditTable/demo3.jsx create mode 100644 examples/antdp-base2/src/pages/Components/EditTable/demo4.jsx create mode 100644 examples/antdp-base2/src/pages/Components/EditTable/demo5.jsx create mode 100644 examples/antdp-base2/src/pages/Components/EditTable/index.jsx create mode 100644 examples/antdp-base2/src/pages/Components/FormDetail/index.jsx create mode 100644 examples/antdp-base2/src/pages/Components/FormDetail/item.js create mode 100644 examples/antdp-base2/src/pages/Components/ProForm/index.jsx create mode 100644 examples/antdp-base2/src/pages/Components/QuickForm/index.jsx create mode 100644 examples/antdp-base2/src/pages/Components/QuickForm/item.js create mode 100644 examples/antdp-base2/src/pages/Demo/index.jsx create mode 100644 examples/antdp-base2/src/pages/Demo/item.jsx create mode 100644 examples/antdp-base2/src/pages/Detail/AdvancedDetails/index.jsx create mode 100644 examples/antdp-base2/src/pages/Detail/AdvancedDetails/item.js create mode 100644 examples/antdp-base2/src/pages/Detail/BasicDetails/index.jsx create mode 100644 examples/antdp-base2/src/pages/Detail/BasicDetails/item.js create mode 100644 examples/antdp-base2/src/pages/Home/index.jsx create mode 100644 examples/antdp-base2/src/pages/Home/style.less create mode 100644 examples/antdp-base2/src/pages/List/BasicList/index.jsx create mode 100644 examples/antdp-base2/src/pages/List/BasicList/style.less create mode 100644 examples/antdp-base2/src/pages/List/CardList/index.jsx create mode 100644 examples/antdp-base2/src/pages/List/ProList/index.jsx create mode 100644 examples/antdp-base2/src/pages/List/TableList/index.jsx create mode 100644 examples/antdp-base2/src/pages/List/TableList/item.jsx create mode 100644 examples/antdp-base2/src/pages/Person/PersonalCenter/ApplyLists.jsx create mode 100644 examples/antdp-base2/src/pages/Person/PersonalCenter/CardLists.jsx create mode 100644 examples/antdp-base2/src/pages/Person/PersonalCenter/Contents.jsx create mode 100644 examples/antdp-base2/src/pages/Person/PersonalCenter/Lists.jsx create mode 100644 examples/antdp-base2/src/pages/Person/PersonalCenter/User.js create mode 100644 examples/antdp-base2/src/pages/Person/PersonalCenter/index.jsx create mode 100644 examples/antdp-base2/src/pages/Person/PersonalCenter/item.js create mode 100644 examples/antdp-base2/src/pages/Person/PersonalCenter/style.less create mode 100644 examples/antdp-base2/src/pages/Person/PersonalSettings/AccountBind.jsx create mode 100644 examples/antdp-base2/src/pages/Person/PersonalSettings/Basic.jsx create mode 100644 examples/antdp-base2/src/pages/Person/PersonalSettings/Edit.jsx create mode 100644 examples/antdp-base2/src/pages/Person/PersonalSettings/Message.jsx create mode 100644 examples/antdp-base2/src/pages/Person/PersonalSettings/SecuritySet.jsx create mode 100644 examples/antdp-base2/src/pages/Person/PersonalSettings/index.jsx create mode 100644 examples/antdp-base2/src/pages/Person/PersonalSettings/item.js create mode 100644 examples/antdp-base2/src/pages/Person/PersonalSettings/style.less create mode 100644 examples/antdp-base2/src/pages/Results/Fail/index.jsx create mode 100644 examples/antdp-base2/src/pages/Results/Success/index.jsx create mode 100644 examples/antdp-base2/src/services/api.js create mode 100644 examples/antdp-base2/src/utils/utils.jsx diff --git a/examples/antdp-base2/.editorconfig b/examples/antdp-base2/.editorconfig new file mode 100755 index 000000000..7e3649acc --- /dev/null +++ b/examples/antdp-base2/.editorconfig @@ -0,0 +1,16 @@ +# http://editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false + +[Makefile] +indent_style = tab diff --git a/examples/antdp-base2/.env b/examples/antdp-base2/.env new file mode 100644 index 000000000..7d910f148 --- /dev/null +++ b/examples/antdp-base2/.env @@ -0,0 +1 @@ +SKIP_PREFLIGHT_CHECK=true \ No newline at end of file diff --git a/examples/antdp-base2/.gitignore b/examples/antdp-base2/.gitignore new file mode 100644 index 000000000..bee1cf61c --- /dev/null +++ b/examples/antdp-base2/.gitignore @@ -0,0 +1,20 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/npm-debug.log* +/yarn-error.log +/yarn.lock +/package-lock.json + +# production +/dist + +# misc +.DS_Store + +# umi +/src/.umi +/src/.umi-production +/src/.umi-test +/.env.local diff --git a/examples/antdp-base2/.prettierignore b/examples/antdp-base2/.prettierignore new file mode 100644 index 000000000..0d4222f54 --- /dev/null +++ b/examples/antdp-base2/.prettierignore @@ -0,0 +1,8 @@ +**/*.md +**/*.svg +**/*.ejs +**/*.html +package.json +.umi +.umi-production +.umi-test diff --git a/examples/antdp-base2/.prettierrc b/examples/antdp-base2/.prettierrc new file mode 100644 index 000000000..94beb1484 --- /dev/null +++ b/examples/antdp-base2/.prettierrc @@ -0,0 +1,11 @@ +{ + "singleQuote": true, + "trailingComma": "all", + "printWidth": 80, + "overrides": [ + { + "files": ".prettierrc", + "options": { "parser": "json" } + } + ] +} diff --git a/examples/antdp-base2/.stackblitzrc b/examples/antdp-base2/.stackblitzrc new file mode 100644 index 000000000..a8c490e81 --- /dev/null +++ b/examples/antdp-base2/.stackblitzrc @@ -0,0 +1,4 @@ +{ + "installDependencies": true, + "startCommand": "npm start" +} \ No newline at end of file diff --git a/examples/antdp-base2/README.md b/examples/antdp-base2/README.md new file mode 100644 index 000000000..92320cffd --- /dev/null +++ b/examples/antdp-base2/README.md @@ -0,0 +1,19 @@ +# umi project + +## Getting Started + +Install dependencies, + +```bash +$ yarn +``` + +Start the dev server, + +```bash +$ yarn start +``` + +## Open in CodeSandbox + +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/s/github/antdpro/antdp/tree/master/examples/antdp-base) diff --git a/examples/antdp-base2/config/config.js b/examples/antdp-base2/config/config.js new file mode 100644 index 000000000..5de22d7ae --- /dev/null +++ b/examples/antdp-base2/config/config.js @@ -0,0 +1,48 @@ +import config from '@antdp/config'; +import proxy from './proxy'; +import router from './router.json'; +export default config(router, { + proxy, + npmClient: 'npm', + define: { + // 是否显示 左侧菜单 + // ANTD_MENU_IS_SHOW: false, + // 是否显示 head头部 + // ANTD_HEAD_IS_SHOW: false, + // 是否展示tab栏 + ANTD_IS_TABS: true, + // 是否展示面包屑 + ANTD_IS_BREADCRUMB: false, + ANTD_AUTH_CONF: { + auth_menu: 'authMenu', + auth_btn: 'authBtn', + auth_check_url: '', + }, + ANTD_MENU_TOP_LEFT: false, + ANTD_MENU_SLIDER: false, + /** 是否展示搜索菜单 */ + ANTD_MENU_SEARCH_IS_SHOW: true, + }, + locale: { + // 默认使用 src/locales/zh-CN.ts 作为多语言文件 + default: 'zh-CN', + antd: true, + // default true, when it is true, will use `navigator.language` overwrite default + // baseNavigator: true, + /** + * [国际化] 控制台提示 Warning: The current popular language does not exist, please check the locales folder! 警告信息 + * https://github.com/umijs/umi/issues/4363#issuecomment-616134434 + * 警用 `baseNavigator` 和 `title` 两个配置项 可以解决国际化警告问题 + */ + baseNavigator: false, + title: false, + }, + dva: {}, + model: {}, + request: {}, + reactQuery: { + // 是否开启 react query 官方 devtool 工具 + devtool: false, + queryClient: true, + }, +}); diff --git a/examples/antdp-base2/config/proxy.js b/examples/antdp-base2/config/proxy.js new file mode 100644 index 000000000..3fa70dded --- /dev/null +++ b/examples/antdp-base2/config/proxy.js @@ -0,0 +1,30 @@ +/** + * 在生产环境 代理是无法生效的，所以这里没有生产环境的配置 + * The agent cannot take effect in the production environment + * so there is no configuration of the production environment + * For details, please see + * https://pro.ant.design/docs/deploy + */ +export default { + dev: { + '/api/': { + target: 'https://preview.pro.ant.design', + changeOrigin: true, + pathRewrite: { '^': '' }, + }, + }, + test: { + '/api/': { + target: 'https://preview.pro.ant.design', + changeOrigin: true, + pathRewrite: { '^': '' }, + }, + }, + pre: { + '/api/': { + target: 'your pre url', + changeOrigin: true, + pathRewrite: { '^': '' }, + }, + }, +}; diff --git a/examples/antdp-base2/config/router.json b/examples/antdp-base2/config/router.json new file mode 100644 index 000000000..8d11d6347 --- /dev/null +++ b/examples/antdp-base2/config/router.json @@ -0,0 +1,166 @@ +[ + { + "path": "/login", + "component": "@/layouts/UserLayout" + }, + { + "path": "/", + "component": "@/layouts/BasicLayout", + "routes": [ + { + "path": "/", + "redirectTo": "/welcome" + }, + { + "path": "/*", + "component": "@/pages/404" + }, + { + "path": "/welcome", + "name": "首页", + "locale": "welcome", + "icon": "dashboard", + "component": "@/pages/Home/index" + }, + { + "path": "/dashboard", + "name": "页面实例", + "locale": "dashboard", + "icon": "fileText", + "side": true, + "component": "@/pages/Demo" + }, + { + "path": "/components", + "name": "组件页", + "locale": "components", + "icon": "form", + "routes": [ + { + "path": "/components/quickform", + "name": "快速表单", + "locale": "quickform", + "component": "@/pages/Components/QuickForm" + }, + { + "path": "/components/formdetail", + "name": "详情表单", + "locale": "formdetail", + "component": "@/pages/Components/FormDetail" + }, + { + "path": "/components/edittable", + "name": "编辑表格", + "locale": "edittable", + "component": "@/pages/Components/EditTable" + }, + { + "path": "/components/proform", + "name": "ProForm", + "locale": "proform", + "component": "@/pages/Components/ProForm" + } + ] + }, + { + "path": "/list", + "name": "列表页", + "icon": "table", + "locale": "list", + "routes": [ + { + "path": "/list/basiclist", + "name": "基础列表", + "locale": "basiclist", + "component": "@/pages/List/BasicList" + }, + { + "path": "/list/cardlist", + "name": "卡片列表", + "locale": "cardlist", + "component": "@/pages/List/CardList" + }, + { + "path": "/list/tablelist", + "name": "ProTable", + "locale": "tablelist", + "component": "@/pages/List/TableList" + }, + { + "path": "/list/prolist", + "name": "ProList", + "locale": "prolist", + "component": "@/pages/List/ProList" + } + ] + }, + { + "path": "/detail", + "name": "详情页", + "icon": "profile", + "locale": "detail", + "routes": [ + { + "path": "/detail/basicdetails", + "name": "基础详情页", + "locale": "basicdetails", + "component": "@/pages/Detail/BasicDetails" + }, + { + "path": "/detail/advanceddetails", + "name": "高级详情页", + "locale": "advanceddetails", + "component": "@/pages/Detail/AdvancedDetails" + } + ] + }, + { + "path": "/results", + "name": "结果页", + "locale": "results", + "icon": "checkCircle", + "routes": [ + { + "path": "/results/success", + "name": "成功页", + "locale": "success", + "component": "@/pages/Results/Success" + }, + { + "path": "/results/fail", + "name": "失败页", + "locale": "fail", + "component": "@/pages/Results/Fail" + } + ] + }, + { + "path": "/person", + "name": "个人页", + "icon": "user", + "locale": "person", + "routes": [ + { + "path": "/person/personalCenter", + "name": "个人中心", + "locale": "personalCenter", + "component": "@/pages/Person/PersonalCenter" + }, + { + "path": "/person/personalSettings", + "name": "个人设置", + "locale": "personalSettings", + "component": "@/pages/Person/PersonalSettings" + } + ] + }, + { + "path": "/403", + "name": "403", + "icon": "file-protect", + "component": "@/pages/403", + "hideInMenu": true + } + ] + } +] diff --git a/examples/antdp-base2/mock/.gitkeep b/examples/antdp-base2/mock/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/examples/antdp-base2/mock/api.js b/examples/antdp-base2/mock/api.js new file mode 100644 index 000000000..963547762 --- /dev/null +++ b/examples/antdp-base2/mock/api.js @@ -0,0 +1,281 @@ +const titles = [ + 'Alipay', + 'Angular', + 'Ant Design', + 'Ant Design', + 'Bootstrap', + 'React', + 'Vue', + 'Webpack', +]; + +const avatars = [ + 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay + 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular + 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design + 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design Pro + 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap + 'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React + 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue + 'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack +]; + +const avatars2 = [ + 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png', + 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png', + 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png', + 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png', + 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png', + 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png', + 'https://gw.alipayobjects.com/zos/rmsportal/psOgztMplJMGpVEqfcgF.png', + 'https://gw.alipayobjects.com/zos/rmsportal/ZpBqSxLxVEXfcUNoPKrz.png', + 'https://gw.alipayobjects.com/zos/rmsportal/laiEnJdGHVOhJrUShBaJ.png', + 'https://gw.alipayobjects.com/zos/rmsportal/UrQsqscbKEpNuJcvBZBu.png', +]; + +export default { + 'POST /api/demo/selectPage': (req, res) => { + const { pageSize } = req.body; + const list = []; + for (let i = 0; i < pageSize; i++) { + list[i] = { + id: i, + name: '霞仔', + title: '16', + address: '上海市', + }; + } + setTimeout(() => { + res.send({ + code: 200, + message: '查询成功', + data: { + rows: list, + total: 100, + }, + }); + }, 2000); + }, + 'GET /api/project/notice': (_, res) => { + res.send({ + code: 1, + message: '查询成功', + data: [ + { + id: 'xxx1', + title: titles[0], + logo: avatars[0], + description: '那是一种内在的东西，他们到达不了，也无法触及的', + updatedAt: '2017-07-24', + member: '科学搬砖组', + href: '', + memberLink: '', + }, + { + id: 'xxx2', + title: titles[1], + logo: avatars[1], + description: '希望是一个好东西，也许是最好的，好东西是不会消亡的', + updatedAt: '2017-07-24', + member: '全组都是吴彦祖', + href: '', + memberLink: '', + }, + { + id: 'xxx3', + title: titles[2], + logo: avatars[2], + description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆', + updatedAt: '2017-07-24', + member: '中二少女团', + href: '', + memberLink: '', + }, + { + id: 'xxx4', + title: titles[3], + logo: avatars[3], + description: '那时候我只会想自己想要什么，从不想自己拥有什么', + updatedAt: '2017-07-24', + member: '程序员日常', + href: '', + memberLink: '', + }, + { + id: 'xxx5', + title: titles[4], + logo: avatars[4], + description: '凛冬将至', + updatedAt: '2017-07-24', + member: '高逼格设计天团', + href: '', + memberLink: '', + }, + { + id: 'xxx6', + title: titles[5], + logo: avatars[5], + description: '生命就像一盒巧克力，结果往往出人意料', + updatedAt: '2017-07-24', + member: '骗你来学计算机', + href: '', + memberLink: '', + }, + ], + }); + }, + 'GET /api/activities': (_, res) => { + res.send({ + code: 1, + message: '查询成功', + data: [ + { + id: 'trend-1', + updatedAt: '2017-07-24', + user: { + name: '曲丽丽', + avatar: avatars2[0], + }, + group: { + name: '高逼格设计天团', + link: 'https://github.com/antdpro/antdp', + }, + project: { + name: '六月迭代', + link: 'https://github.com/antdpro/antdp', + }, + template: '在 @{group} 新建项目 @{project}', + }, + { + id: 'trend-2', + updatedAt: '2017-07-24', + user: { + name: '付小小', + avatar: avatars2[1], + }, + group: { + name: '高逼格设计天团', + link: 'https://github.com/antdpro/antdp', + }, + project: { + name: '六月迭代', + link: 'https://github.com/antdpro/antdp', + }, + template: '在 @{group} 新建项目 @{project}', + }, + { + id: 'trend-3', + updatedAt: '2017-07-24', + user: { + name: '林东东', + avatar: avatars2[2], + }, + group: { + name: '中二少女团', + link: 'https://github.com/antdpro/antdp', + }, + project: { + name: '六月迭代', + link: 'https://github.com/antdpro/antdp', + }, + template: '在 @{group} 新建项目 @{project}', + }, + { + id: 'trend-4', + updatedAt: '2017-07-24', + user: { + name: '周星星', + avatar: avatars2[4], + }, + project: { + name: '5 月日常迭代', + link: 'https://github.com/antdpro/antdp', + }, + template: '将 @{project} 更新至已发布状态', + }, + { + id: 'trend-5', + updatedAt: '2017-07-24', + user: { + name: '朱偏右', + avatar: avatars2[3], + }, + project: { + name: '工程效能', + link: 'https://github.com/antdpro/antdp', + }, + comment: { + name: '留言', + link: 'https://github.com/antdpro/antdp', + }, + template: '在 @{project} 发布了 @{comment}', + }, + { + id: 'trend-6', + updatedAt: '2017-07-24', + user: { + name: '乐哥', + avatar: avatars2[5], + }, + group: { + name: '程序员日常', + link: 'https://github.com/antdpro/antdp', + }, + project: { + name: '品牌迭代', + link: 'https://github.com/antdpro/antdp', + }, + template: '在 @{group} 新建项目 @{project}', + }, + ], + }); + }, + 'POST /api/getList': (_, res) => { + res.send({ + code: 1, + message: '查询成功', + data: [ + { + id: 'trend-1', + avatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel', + title: 'Card title', + descriptio: 'antdp 好用', + image: + 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png', + }, + { + id: 'trend-2', + avatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel', + title: 'Card title', + descriptio: 'antdp 好用', + image: + 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png', + }, + { + id: 'trend-3', + avatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel', + title: 'Card title', + descriptio: 'antdp 好用', + image: + 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png', + }, + { + id: 'trend-4', + avatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel', + title: 'Card title', + descriptio: 'antdp 好用', + image: + 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png', + }, + { + id: 'trend-5', + avatar: 'https://xsgames.co/randomusers/avatar.php?g=pixel', + title: 'Card title', + descriptio: 'antdp 好用', + image: + 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png', + }, + ], + }); + }, +}; diff --git a/examples/antdp-base2/mock/login.js b/examples/antdp-base2/mock/login.js new file mode 100644 index 000000000..1b4562520 --- /dev/null +++ b/examples/antdp-base2/mock/login.js @@ -0,0 +1,55 @@ +const menus = [ + '/', + '/welcome', + '/chart', + '/dashboard', + '/components', + '/components/quickform', + '/components/formdetail', + '/components/edittable', + '/components/proform', + '/list', + '/list/basiclist', + '/list/cardlist', + '/list/tablelist', + '/list/prolist', + '/detail', + '/detail/basicdetails', + '/detail/advanceddetails', + '/results', + '/results/success', + '/results/fail', + '/person', + '/person/personalCenter', + '/person/personalSettings', + '/404', + '/403', +]; +const btns = ['/demo/add1', '/demo/add2', '/demo/add3']; + +export default { + 'POST /api/users/login': (req, res) => { + const { username, password, phone, code, type } = req.body; + if ((username === 'admin' && password === 'admin') || (code && phone)) { + res.send({ + code: 1, + message: '登录成功！', + data: { + type, + menus, + btns, + }, + token: '3096208b45df735aeebf072e90a4', + }); + return; + } + res.send({ + code: -1, + message: '登录失败！', + data: { + type, + }, + token: null, + }); + }, +}; diff --git a/examples/antdp-base2/package.json b/examples/antdp-base2/package.json new file mode 100644 index 000000000..c1cc03dab --- /dev/null +++ b/examples/antdp-base2/package.json @@ -0,0 +1,52 @@ +{ + "name": "@example/antdp-base2", + "private": true, + "scripts": { + "start": "max dev", + "build": "max build", + "umiinstall": "max setup", + "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'" + }, + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } + }, + "lint-staged": { + "*.{js,jsx,less,md,json}": [ + "prettier --write" + ] + }, + "dependencies": { + "@ant-design/pro-form": "1.74.7", + "@antdp/antdp-ui": "2.0.16", + "@antdp/edit-table": "2.0.16", + "@antdp/authorized": "2.0.16", + "@antdp/basic-layouts": "2.0.16", + "@antdp/hooks": "2.0.16", + "@antdp/page-loading": "2.0.16", + "@antdp/request": "2.0.16", + "@antdp/user-login": "2.0.16", + "ahooks": "~3.7.2", + "antd": "5.4.7", + "rc-field-form": "~1.27.3", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "overrides": { + "dva": "^2.6.0-beta.20", + "antd": "5.4.7" + }, + "resolutions": { + "dva": "^2.6.0-beta.20", + "antd": "5.4.7" + }, + "devDependencies": { + "@antdp/config": "2.0.16", + "@antdp/dependencies": "2.0.16", + "@umijs/max": "~4.0.47", + "@umijs/plugin-model": "~2.6.2", + "lint-staged": "~13.0.4", + "prettier": "2.8.1" + } +} \ No newline at end of file diff --git a/examples/antdp-base2/sandbox.config.json b/examples/antdp-base2/sandbox.config.json new file mode 100644 index 000000000..dbf358ead --- /dev/null +++ b/examples/antdp-base2/sandbox.config.json @@ -0,0 +1,8 @@ +{ + "template": "node", + "container": { + "node": "16" + }, + "hardReloadOnChange": true, + "infiniteLoopProtection": true +} diff --git a/examples/antdp-base2/src/components/.gitkeep b/examples/antdp-base2/src/components/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/examples/antdp-base2/src/components/CardDes/index.jsx b/examples/antdp-base2/src/components/CardDes/index.jsx new file mode 100644 index 000000000..5573703ef --- /dev/null +++ b/examples/antdp-base2/src/components/CardDes/index.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Card } from 'antd'; + +export default function ({ title = '', description = '' }) { + return ( + +

{title}

+ {description} + + ); +} diff --git a/examples/antdp-base2/src/components/PageLoading/index.jsx b/examples/antdp-base2/src/components/PageLoading/index.jsx new file mode 100644 index 000000000..bffc300b5 --- /dev/null +++ b/examples/antdp-base2/src/components/PageLoading/index.jsx @@ -0,0 +1,6 @@ +import React from 'react'; +import PageLoading from '@antdp/page-loading'; + +// loading components from code split +// https://umijs.org/plugin/umi-plugin-react.html#dynamicimport +export default () => ; diff --git a/examples/antdp-base2/src/layouts/BasicLayout.jsx b/examples/antdp-base2/src/layouts/BasicLayout.jsx new file mode 100644 index 000000000..6f47509ba --- /dev/null +++ b/examples/antdp-base2/src/layouts/BasicLayout.jsx @@ -0,0 +1,93 @@ +import { + LogoutOutlined, + SettingOutlined, + UserOutlined, + UnorderedListOutlined, +} from '@ant-design/icons'; +import { useState } from 'react'; +import { FloatButton } from 'antd'; +import Authorized from '@antdp/authorized'; +import BasicLayouts from '@antdp/basic-layouts'; +import { + SelectLang, + useIntl, + useDispatch, + useSelector, + history, +} from '@umijs/max'; +import 'antd/dist/reset.css'; +import logo from './logo.svg'; + +const Layout = () => { + const [dark, setDark] = useState(false); + const dispatch = useDispatch(); + const { token } = useSelector((state) => state.user); + const update = (data) => { + dispatch({ + type: 'user/update', + payload: data, + }); + }; + return ( + + } + > + setDark(!dark)} + /> + + } + // 是否进行权限判定 + // isAuthorized={true} + intlLanguage={useIntl()} + // isBreadcrumb={true} // 是否根据路由进行展示 面包屑 + topRightMenu={[ + { + title: '个人中心', + icon: , + onClick: () => {}, + }, + { + title: '个人设置', + icon: , + onClick: () => {}, + }, + { + divider: true, + }, + { + title: '退出登录', + icon: , + onClick: async () => { + await sessionStorage.removeItem('token'); + await sessionStorage.removeItem('refresh_token'); + await sessionStorage.removeItem('userDate'); + update({ token: '' }); + history.push('/login'); + }, + }, + ]} + /> + + ); +}; + +export default Layout; diff --git a/examples/antdp-base2/src/layouts/UserLayout.jsx b/examples/antdp-base2/src/layouts/UserLayout.jsx new file mode 100644 index 000000000..aca141f8c --- /dev/null +++ b/examples/antdp-base2/src/layouts/UserLayout.jsx @@ -0,0 +1,217 @@ +import { + AlipayOutlined, + LockOutlined, + MobileOutlined, + UserOutlined, + WeiboOutlined, +} from '@ant-design/icons'; +import Authorized from '@antdp/authorized'; +import 'antd/dist/reset.css'; +import { Fragment, useState } from 'react'; +import logo from './logo.svg'; +import { useReactMutation } from '@antdp/hooks'; +import { history, useDispatch, useSelector } from '@umijs/max'; +import { + LoginFormPage, + ProFormCaptcha, + ProFormText, +} from '@ant-design/pro-components'; +import { Divider, message, Space, Tabs } from 'antd'; + +const iconStyles = { + color: 'rgba(0, 0, 0, 0.2)', + fontSize: '18px', + verticalAlign: 'middle', + cursor: 'pointer', +}; + +const otherLoginIconStyles = { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + flexDirection: 'column', + height: 40, + width: 40, + border: '1px solid #D4D8DD', + borderRadius: '50%', +}; + +const UserLayout = (props) => { + const dispatch = useDispatch(); + const { token } = useSelector((state) => state.user); + const [loginType, setLoginType] = useState('account'); + const update = (data) => { + dispatch({ + type: 'user/update', + payload: data, + }); + }; + + const { mutateAsync } = useReactMutation({ + url: '/api/users/login', + onSuccess: async ({ code, data, token }) => { + if (code === 1) { + await sessionStorage.setItem('token', token); + await sessionStorage.setItem('authBtn', JSON.stringify(data.btns)); + await sessionStorage.setItem('authMenu', JSON.stringify(data.menus)); + update({ token: token }); + history.push('/'); + } + }, + }); + + const items = [ + { + key: 'account', + label: `账号密码登录`, + children: ( + + , + }} + placeholder="请输入用户名" + rules={[ + { + required: true, + message: '请输入用户名!', + }, + ]} + /> + , + }} + placeholder="请输入密码" + rules={[ + { + required: true, + message: '请输入密码！', + }, + ]} + /> + + ), + }, + { + key: 'phone', + label: `手机号登录`, + children: ( + + , + }} + name="mobile" + placeholder={'手机号'} + rules={[ + { + required: true, + message: '请输入手机号！', + }, + { + pattern: /^1\d{10}$/, + message: '手机号格式错误！', + }, + ]} + /> + , + }} + captchaProps={{ + size: 'large', + }} + placeholder={'请输入验证码'} + captchaTextRender={(timing, count) => { + if (timing) { + return `${count} ${'获取验证码'}`; + } + return '获取验证码'; + }} + name="captcha" + rules={[ + { + required: true, + message: '请输入验证码！', + }, + ]} + onGetCaptcha={async () => { + message.success('获取验证码成功！验证码为：1234'); + }} + /> + + ), + }, + ]; + + return ( + +
+ + + + 其他登录方式 + + + +
+ +
+
+ +
+ +
+ } + initialValues={{ username: 'admin', password: 'admin' }} + onFinish={(values) => mutateAsync(values)} + > + setLoginType(activeKey)} + /> +
+ + 忘记密码 + +
+ + + + ); +}; + +export default UserLayout; diff --git a/examples/antdp-base2/src/layouts/logo.svg b/examples/antdp-base2/src/layouts/logo.svg new file mode 100644 index 000000000..313e3b708 --- /dev/null +++ b/examples/antdp-base2/src/layouts/logo.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/antdp-base2/src/locales/en-US.js b/examples/antdp-base2/src/locales/en-US.js new file mode 100644 index 000000000..2a8dba4e2 --- /dev/null +++ b/examples/antdp-base2/src/locales/en-US.js @@ -0,0 +1,40 @@ +import menu from './en-US/menu'; + +export default { + 'navBar.lang': 'Languages', + 'layout.user.link.help': 'Help', + 'layout.user.link.privacy': 'Privacy', + 'layout.user.link.terms': 'Terms', + 'app.preview.down.block': 'Download this page to your local project', + 'app.welcome.link.fetch-blocks': 'Get all block', + 'app.welcome.link.block-list': + 'Quickly build standard, pages based on `block` development', + + // tips + 'operation.failed': 'Operation failed', + 'no.access': 'No access', + 'update.password.not.force': 'Change password, cannot force change password', + 'update.password.force': 'Change password, force change password', + 'message.operation.successful': 'The operation was successful', + 'login.failed': 'Login authentication failed', + + 'password.warn.phone': 'Please enter your mobile phone numbe', + + 200: 'The server successfully returned the requested data.', + 201: 'New or modified data succeeded.', + 202: 'A request has entered the background queue (asynchronous task).', + 204: 'Data deleted successfully.', + 400: 'There was an error in the request. The server did not create or modify the data.', + 401: 'The user does not have permission (wrong token, user name, password).', + 403: 'he user is authorized, but access is prohibited.', + 404: 'The request was made for a nonexistent record and the server did not operate.', + 406: 'The format of the request is not available.', + 410: 'The requested resource is permanently deleted and will no longer be available.', + 422: 'A validation error occurred while creating an object.', + 500: 'Server error, please check the server.', + 502: 'Gateway error.', + 503: 'The service is not available, the server is temporarily overloaded or maintained.', + 504: 'The gateway timed out.', + + ...menu, +}; diff --git a/examples/antdp-base2/src/locales/en-US/menu.js b/examples/antdp-base2/src/locales/en-US/menu.js new file mode 100644 index 000000000..9aec0bb8a --- /dev/null +++ b/examples/antdp-base2/src/locales/en-US/menu.js @@ -0,0 +1,26 @@ +export default { + 'menu.welcome': 'home', + 'menu.chart': 'chart', + 'menu.dashboard': 'dashboard', + 'menu.components': 'components pages', + 'menu.components.quickform': 'quickform', + 'menu.components.formdetail': 'formdetail', + 'menu.components.edittable': 'edittable', + 'menu.components.proform': 'proform', + 'menu.list': 'list pages', + 'menu.list.basiclist': 'basiclist', + 'menu.list.cardlist': 'cardlist', + 'menu.list.tablelist': 'tablelist', + 'menu.list.prolist': 'prolist', + 'menu.detail': 'detail', + 'menu.detail.basicdetails': 'basicdetails', + 'menu.detail.advanceddetails': 'advanceddetails', + 'menu.results': 'results', + 'menu.results.success': 'success', + 'menu.results.fail': 'fail', + 'menu.person': 'person', + 'menu.person.personalCenter': 'personalCenter', + 'menu.person.personalSettings': 'personalSettings', + 'menu.404': '404', + 'menu.403': '403', +}; diff --git a/examples/antdp-base2/src/locales/zh-CN.js b/examples/antdp-base2/src/locales/zh-CN.js new file mode 100644 index 000000000..092e7fc21 --- /dev/null +++ b/examples/antdp-base2/src/locales/zh-CN.js @@ -0,0 +1,28 @@ +import menu from './zh-CN/menu'; + +export default { + 'navBar.lang': '语言', + 'layout.user.link.help': '帮助', + 'layout.user.link.privacy': '隐私', + 'layout.user.link.terms': '条款', + 'app.preview.down.block': '下载此页面到本地项目', + 'app.welcome.link.fetch-blocks': '获取全部区块', + 'app.welcome.link.block-list': '基于 block 开发，快速构建标准页面', + + 200: '服务器成功返回请求的数据。', + 201: '新建或修改数据成功。', + 202: '一个请求已经进入后台排队（异步任务）。', + 204: '删除数据成功。', + 400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。', + 401: '用户没有权限（令牌、用户名、密码错误）。', + 403: '用户得到授权，但是访问是被禁止的。', + 404: '发出的请求针对的是不存在的记录，服务器没有进行操作。', + 406: '请求的格式不可得。', + 410: '请求的资源被永久删除，且不会再得到的。', + 422: '当创建一个对象时，发生一个验证错误。', + 500: '服务器发生错误，请检查服务器。', + 502: '网关错误。', + 503: '服务不可用，服务器暂时过载或维护。', + 504: '网关超时。', + ...menu, +}; diff --git a/examples/antdp-base2/src/locales/zh-CN/menu.js b/examples/antdp-base2/src/locales/zh-CN/menu.js new file mode 100644 index 000000000..259496f07 --- /dev/null +++ b/examples/antdp-base2/src/locales/zh-CN/menu.js @@ -0,0 +1,26 @@ +export default { + 'menu.welcome': '首页', + 'menu.chart': '图表页', + 'menu.dashboard': '页面实例', + 'menu.components': '组件页', + 'menu.components.quickform': '快速表单', + 'menu.components.formdetail': '详情表单', + 'menu.components.edittable': '编辑表格', + 'menu.components.proform': 'ProForm', + 'menu.list': '列表页', + 'menu.list.basiclist': '基础列表', + 'menu.list.cardlist': '卡片列表', + 'menu.list.tablelist': 'ProTable', + 'menu.list.prolist': 'ProList', + 'menu.detail': '详情页', + 'menu.detail.basicdetails': '基础详情页', + 'menu.detail.advanceddetails': '高级详情页', + 'menu.results': '结果页', + 'menu.results.success': '成功页', + 'menu.results.fail': '失败页', + 'menu.person': '个人页', + 'menu.person.personalCenter': '个人中心', + 'menu.person.personalSettings': '个人设置', + 'menu.404': '404', + 'menu.403': '403', +}; diff --git a/examples/antdp-base2/src/models/demo.js b/examples/antdp-base2/src/models/demo.js new file mode 100644 index 000000000..83990756a --- /dev/null +++ b/examples/antdp-base2/src/models/demo.js @@ -0,0 +1,20 @@ +import { useState } from 'react'; +import { useBoolean } from 'ahooks'; +export default function useModelDemo() { + // 表单 + const [queryInfo, setInfo] = useState({ time2: 123456, fileList: [] }); + // isView=true查看 isView=false新增&编辑 + const [isView, setIsView] = useState(false); + // drawer弹框 + const [drawerVisible, { setFalse, setTrue }] = useBoolean(false); + + return { + drawerVisible, + setTrue, + setFalse, + queryInfo, + setInfo, + isView, + setIsView, + }; +} diff --git a/examples/antdp-base2/src/models/user.js b/examples/antdp-base2/src/models/user.js new file mode 100644 index 000000000..48ece4468 --- /dev/null +++ b/examples/antdp-base2/src/models/user.js @@ -0,0 +1,14 @@ +const getToken = () => sessionStorage.getItem('token'); +export default { + namespace: 'user', + state: { + token: getToken(), + }, + reducers: { + update: (state, { payload }) => ({ + ...state, + ...payload, + }), + }, + effects: {}, +}; diff --git a/examples/antdp-base2/src/pages/403.jsx b/examples/antdp-base2/src/pages/403.jsx new file mode 100644 index 000000000..d86a167b6 --- /dev/null +++ b/examples/antdp-base2/src/pages/403.jsx @@ -0,0 +1,5 @@ +import React from 'react'; +import { Result } from 'antd'; +export default (props) => { + return ; +}; diff --git a/examples/antdp-base2/src/pages/404.jsx b/examples/antdp-base2/src/pages/404.jsx new file mode 100644 index 000000000..a8800e48c --- /dev/null +++ b/examples/antdp-base2/src/pages/404.jsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { Result } from 'antd'; +export default (props) => { + return ( + + ); +}; diff --git a/examples/antdp-base2/src/pages/Components/EditTable/demo1.jsx b/examples/antdp-base2/src/pages/Components/EditTable/demo1.jsx new file mode 100644 index 000000000..a4d39d591 --- /dev/null +++ b/examples/antdp-base2/src/pages/Components/EditTable/demo1.jsx @@ -0,0 +1,108 @@ +import React from 'react'; +import { Input, Col, InputNumber, Button, Select, Form, Card } from 'antd'; +import EditTable from '@antdp/edit-table'; +import 'antd/dist/reset.css'; +const originData = []; + +for (let i = 0; i < 5; i++) { + originData.push({ + key: i.toString(), + name: `Edrward ${i}`, + age: 32, + address: `London Park no. ${i}`, + }); +} + +const Page = () => { + const [data, setData] = React.useState(originData); + const [tableProps, setTableProps] = React.useState({ + isAdd: true, + isOpt: true, + optIsFirst: false, + }); + const columns = [ + { + title: 'name', + dataIndex: 'name', + width: '20%', + editable: true, + type: 'Input', + }, + { + title: 'age', + dataIndex: 'age', + width: '15%', + editable: true, + type: 'Custom', + rules: [{ required: true, message: '请输入' }], + inputNode: , + }, + { + title: 'isList', + dataIndex: 'list', + width: '15%', + editable: true, + type: 'Custom', + isList: true, + render: (text) => { + return ( + text && + (text || []) + .filter((it) => it) + .map((ite) => ite.first) + .join(',') + ); + }, + inputNode: (fields, { add, remove }, { errors }) => ( + <> + {fields.map(({ key, name, fieldKey, ...restField }, index) => ( +
+ + + +
+ ))} + + + + + + ), + }, + { + title: 'address', + dataIndex: 'address', + width: '30%', + editable: true, + type: 'Input', + }, + ]; + return ( + + setData(list)} + rowKey="key" + dataSource={data} + columns={columns} + onSave={(list) => setData(list)} + {...tableProps} + /> + + ); +}; +export default Page; diff --git a/examples/antdp-base2/src/pages/Components/EditTable/demo2.jsx b/examples/antdp-base2/src/pages/Components/EditTable/demo2.jsx new file mode 100644 index 000000000..54eadc8f9 --- /dev/null +++ b/examples/antdp-base2/src/pages/Components/EditTable/demo2.jsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { Input, Col, InputNumber, Button, Select, Form, Card } from 'antd'; +import EditTable from '@antdp/edit-table'; +import 'antd/dist/reset.css'; +const originData = []; + +for (let i = 0; i < 5; i++) { + originData.push({ + key: i.toString(), + name: `Edrward ${i}`, + age: 32, + // address: `London Park no. ${i}`, + }); +} + +const EditableTable = () => { + const [data, setData] = React.useState(originData); + const [tableProps, setTableProps] = React.useState({ + isAdd: true, + isOpt: true, + optIsFirst: true, + }); + const columns = [ + { + title: 'name', + dataIndex: 'name', + width: '20%', + editable: true, + type: 'Custom', + inputNode: (edit) => { + return ; + }, + }, + { + title: 'age', + dataIndex: 'age', + width: '15%', + editable: true, + type: 'Input', + // rules: [{ required: true, message: '请输入' }], + inputNode: (edit) => { + return ; + }, + }, + { + title: 'address', + dataIndex: 'address', + width: '30%', + editable: true, + type: 'Input', + }, + ]; + return ( + + setData(list)} + rowKey="key" + optIsFirst={true} + dataSource={data} + columns={columns} + onSave={(list) => setData(list)} + isAdd={true} + {...tableProps} + /> + + ); +}; +export default EditableTable; diff --git a/examples/antdp-base2/src/pages/Components/EditTable/demo3.jsx b/examples/antdp-base2/src/pages/Components/EditTable/demo3.jsx new file mode 100644 index 000000000..9e3db535a --- /dev/null +++ b/examples/antdp-base2/src/pages/Components/EditTable/demo3.jsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { Input, Col, InputNumber, Button, Select, Form, Card } from 'antd'; +import EditTable from '@antdp/edit-table'; +import 'antd/dist/reset.css'; +const originData = []; + +for (let i = 0; i < 5; i++) { + originData.push({ + key: i.toString(), + name: `Edrward ${i}`, + age: 32, + // address: `London Park no. ${i}`, + }); +} + +const EditableTable = () => { + const [data, setData] = React.useState(originData); + const [tableProps, setTableProps] = React.useState({ + isAdd: true, + isOpt: true, + isOptDelete: true, + optIsFirst: false, + }); + const columns = [ + { + title: 'name', + dataIndex: 'name', + width: '20%', + editable: true, + type: 'Custom', + inputNode: (edit) => { + return ; + }, + }, + { + title: 'age', + dataIndex: 'age', + width: '15%', + editable: true, + type: 'Custom', + rules: [{ required: true, message: '请输入' }], + inputNode: (edit) => { + return ; + }, + }, + { + title: 'address', + dataIndex: 'address', + width: '30%', + editable: true, + type: 'Input', + }, + ]; + return ( + + setData(list)} + rowKey="key" + dataSource={data} + columns={columns} + onSave={(list) => setData(list)} + isAdd={true} + {...tableProps} + /> + + ); +}; +export default EditableTable; diff --git a/examples/antdp-base2/src/pages/Components/EditTable/demo4.jsx b/examples/antdp-base2/src/pages/Components/EditTable/demo4.jsx new file mode 100644 index 000000000..090c106aa --- /dev/null +++ b/examples/antdp-base2/src/pages/Components/EditTable/demo4.jsx @@ -0,0 +1,70 @@ +import React from 'react'; +import { Input, Col, InputNumber, Button, Select, Form, Card } from 'antd'; +import EditTable from '@antdp/edit-table'; +import 'antd/dist/reset.css'; +const originData = []; + +for (let i = 0; i < 5; i++) { + originData.push({ + key: i.toString(), + name: `Edrward ${i}`, + age: 32, + // address: `London Park no. ${i}`, + }); +} + +const EditableTable = () => { + const [data, setData] = React.useState(originData); + const [tableProps, setTableProps] = React.useState({ + isAdd: true, + isOpt: true, + isOptDelete: true, + optIsFirst: false, + multiple: true, + }); + const columns = [ + { + title: 'name', + dataIndex: 'name', + width: '20%', + editable: true, + type: 'Custom', + inputNode: (edit) => { + return ; + }, + }, + { + title: 'age', + dataIndex: 'age', + width: '15%', + editable: true, + type: 'Custom', + rules: [{ required: true, message: '请输入' }], + inputNode: (edit) => { + return ; + }, + }, + { + title: 'address', + dataIndex: 'address', + width: '30%', + editable: true, + type: 'Input', + }, + ]; + return ( + + setData(list)} + rowKey="key" + dataSource={data} + columns={columns} + onSave={(list) => setData(list)} + isAdd={true} + {...tableProps} + /> + + ); +}; +export default EditableTable; diff --git a/examples/antdp-base2/src/pages/Components/EditTable/demo5.jsx b/examples/antdp-base2/src/pages/Components/EditTable/demo5.jsx new file mode 100644 index 000000000..ab7271375 --- /dev/null +++ b/examples/antdp-base2/src/pages/Components/EditTable/demo5.jsx @@ -0,0 +1,67 @@ +import React from 'react'; +import { Input, Col, InputNumber, Button, Select, Form, Card } from 'antd'; +import EditTable from '@antdp/edit-table'; +import 'antd/dist/reset.css'; +const originData = []; + +for (let i = 0; i < 5; i++) { + originData.push({ + key: i.toString(), + name: `Edrward ${i}`, + age: 32, + // address: `London Park no. ${i}`, + }); +} + +const EditableTable = () => { + const [data, setData] = React.useState(originData); + const [tableProps, setTableProps] = React.useState({ + isOpt: false, + isAdd: false, + }); + const columns = [ + { + title: 'name', + dataIndex: 'name', + width: '20%', + editable: true, + type: 'Custom', + inputNode: (edit) => { + return ; + }, + }, + { + title: 'age', + dataIndex: 'age', + width: '15%', + editable: true, + type: 'Custom', + rules: [{ required: true, message: '请输入' }], + inputNode: (edit) => { + return ; + }, + }, + { + title: 'address', + dataIndex: 'address', + width: '30%', + editable: true, + type: 'Input', + }, + ]; + return ( + + setData(list)} + rowKey="key" + dataSource={data} + columns={columns} + onSave={(list) => setData(list)} + isAdd={true} + {...tableProps} + /> + + ); +}; +export default EditableTable; diff --git a/examples/antdp-base2/src/pages/Components/EditTable/index.jsx b/examples/antdp-base2/src/pages/Components/EditTable/index.jsx new file mode 100644 index 000000000..a3372b8a3 --- /dev/null +++ b/examples/antdp-base2/src/pages/Components/EditTable/index.jsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { Space } from 'antd'; +import CardDes from '@/components/CardDes'; +import Demo1 from './demo1'; +import Demo2 from './demo2'; +import Demo3 from './demo3'; +import Demo4 from './demo4'; +import Demo5 from './demo5'; + +const Page = () => { + return ( + + + +
+ +
+ +
+ +
+ + + ); +}; +export default Page; diff --git a/examples/antdp-base2/src/pages/Components/FormDetail/index.jsx b/examples/antdp-base2/src/pages/Components/FormDetail/index.jsx new file mode 100644 index 000000000..6c032980e --- /dev/null +++ b/examples/antdp-base2/src/pages/Components/FormDetail/index.jsx @@ -0,0 +1,132 @@ +import { FormDetail } from '@antdp/antdp-ui'; +import { Card, Space, Table, Steps } from 'antd'; +import CardDes from '@/components/CardDes'; +import 'antd/dist/reset.css'; +import { useMemo } from 'react'; +import { detailItems, userItems } from './item'; + +const Page = () => { + const columns = [ + { + title: '姓名', + dataIndex: 'name', + filters: [ + { + text: 'Joe', + value: 'Joe', + }, + { + text: 'Jim', + value: 'Jim', + }, + { + text: 'Submenu', + value: 'Submenu', + children: [ + { + text: 'Green', + value: 'Green', + }, + { + text: 'Black', + value: 'Black', + }, + ], + }, + ], + onFilter: (value, record) => record.name.indexOf(value) === 0, + sorter: (a, b) => a.name.length - b.name.length, + sortDirections: ['descend'], + }, + { + title: '年龄', + dataIndex: 'age', + defaultSortOrder: 'descend', + sorter: (a, b) => a.age - b.age, + }, + { + title: '地址', + dataIndex: 'address', + filters: [ + { + text: 'London', + value: 'London', + }, + { + text: 'New York', + value: 'New York', + }, + ], + onFilter: (value, record) => record.address.indexOf(value) === 0, + }, + ]; + const tableData = [ + { + key: '1', + name: 'John Brown', + age: 32, + address: 'New York No. 1 Lake Park', + }, + { + key: '2', + name: 'Jim Green', + age: 42, + address: 'London No. 1 Lake Park', + }, + { + key: '3', + name: 'Joe Black', + age: 32, + address: 'Sydney No. 1 Lake Park', + }, + { + key: '4', + name: 'Jim Red', + age: 32, + address: 'London No. 2 Lake Park', + }, + ]; + + const description = 'antdp 超好用.'; + + return ( + + + + + + + + + +

用户列表

+ + + +

任务进度

+ + + + ); +}; +export default Page; diff --git a/examples/antdp-base2/src/pages/Components/FormDetail/item.js b/examples/antdp-base2/src/pages/Components/FormDetail/item.js new file mode 100644 index 000000000..64182b8d0 --- /dev/null +++ b/examples/antdp-base2/src/pages/Components/FormDetail/item.js @@ -0,0 +1,83 @@ +export const detailItems = [ + { + label: '仓库名', + name: 'remark', + type: 'input', + initialValue: 'uiw', + }, + { + label: '仓库域名', + name: 'remark', + type: 'input', + initialValue: '@nihao.com', + }, + { + label: '仓库域名', + name: 'remark', + type: 'input', + initialValue: 'nihao', + }, + { + label: '仓库管理员', + name: 'remark', + type: 'input', + initialValue: 'xx', + }, + { + label: '审批人', + name: 'remark', + type: 'input', + initialValue: 'xx', + }, + { + label: '生效日期', + name: 'remark', + type: 'input', + initialValue: '2023-4-27', + }, + { + label: '仓库类型', + name: 'remark', + type: 'input', + initialValue: '私有', + }, +]; + +export const userItems = [ + { + label: '任务名', + name: 'remark', + type: 'input', + initialValue: 'uiw', + }, + { + label: '任务描述', + name: 'remark', + type: 'input', + initialValue: '@nihao.com', + }, + { + label: '执行人', + name: 'remark', + type: 'input', + initialValue: 'nihao', + }, + { + label: '责任人', + name: 'remark', + type: 'input', + initialValue: 'xx', + }, + { + label: '生效日期', + name: 'remark', + type: 'input', + initialValue: 'xx', + }, + { + label: '任务类型', + name: 'remark', + type: 'input', + initialValue: '私有', + }, +]; diff --git a/examples/antdp-base2/src/pages/Components/ProForm/index.jsx b/examples/antdp-base2/src/pages/Components/ProForm/index.jsx new file mode 100644 index 000000000..fd534fdde --- /dev/null +++ b/examples/antdp-base2/src/pages/Components/ProForm/index.jsx @@ -0,0 +1,126 @@ +import { BetaSchemaForm } from '@ant-design/pro-components'; +import { Input, Card, Space } from 'antd'; +import CardDes from '@/components/CardDes'; + +const valueEnum = { + all: { text: '全部', status: 'Default' }, + open: { + text: '未解决', + status: 'Error', + }, + closed: { + text: '已解决', + status: 'Success', + disabled: true, + }, + processing: { + text: '解决中', + status: 'Processing', + }, +}; + +const columns = [ + { + title: '标题', + dataIndex: 'title', + initialValue: '必填', + formItemProps: { + rules: [ + { + required: true, + message: '此项为必填项', + }, + ], + }, + width: 'm', + }, + { + title: '状态', + dataIndex: 'state', + valueType: 'select', + valueEnum, + width: 'm', + tooltip: '当title为disabled时状态无法选择', + dependencies: ['title'], + fieldProps: (form) => { + if (form.getFieldValue('title') === 'disabled') { + return { + disabled: true, + placeholder: 'disabled', + }; + } else { + return { + placeholder: 'normal', + }; + } + }, + }, + { + title: '标签', + dataIndex: 'labels', + width: 'm', + tooltip: '当title为必填时此项将为必填', + dependencies: ['title'], + formItemProps(form) { + if (form.getFieldValue('title') === '必填') { + return { + rules: [ + { + required: true, + }, + ], + }; + } else { + return {}; + } + }, + }, + { + valueType: 'dependency', + name: ['title'], + columns: ({ title }) => { + return title !== 'hidden' + ? [ + { + title: 'title为hidden时隐藏', + dataIndex: 'hidden', + valueType: 'date', + renderFormItem: () => { + return ; + }, + }, + ] + : []; + }, + }, + { + title: '创建时间', + key: 'showTime', + dataIndex: 'createName', + valueType: 'date', + }, + { + valueType: 'divider', + }, +]; + +export default () => { + return ( + + + + { + console.log(values); + }} + columns={columns} + /> + + + ); +}; diff --git a/examples/antdp-base2/src/pages/Components/QuickForm/index.jsx b/examples/antdp-base2/src/pages/Components/QuickForm/index.jsx new file mode 100644 index 000000000..fab2678b2 --- /dev/null +++ b/examples/antdp-base2/src/pages/Components/QuickForm/index.jsx @@ -0,0 +1,38 @@ +import { useState } from 'react'; +import { QuickForm, ButtonGroupPro } from '@antdp/antdp-ui'; +import { Card, Space } from 'antd'; +import CardDes from '@/components/CardDes'; +import 'antd/dist/reset.css'; +import { useMemo } from 'react'; +import { detailItems } from './item'; + +const Page = () => { + const [queryInfo, setInfo] = useState({ time2: 123456, fileList: [] }); + + const data = useMemo(() => { + return detailItems({ + queryInfo, + setInfo, + }); + }, [queryInfo, setInfo]); + + return ( + + + + + + {}, + }, + ]} + /> + + + ); +}; +export default Page; diff --git a/examples/antdp-base2/src/pages/Components/QuickForm/item.js b/examples/antdp-base2/src/pages/Components/QuickForm/item.js new file mode 100644 index 000000000..4f964a3f0 --- /dev/null +++ b/examples/antdp-base2/src/pages/Components/QuickForm/item.js @@ -0,0 +1,83 @@ +export const detailItems = ({ isView = false, queryInfo, setInfo }) => [ + { + label: '备注', + name: 'remark', + type: 'input', + initialValue: 'zz爱ff', + }, + { + label: '水果', + name: 'fruit', + type: 'select', + options: [{ label: '苹果', value: 1 }], + initialValue: 1, + }, + { + label: '城市', + name: 'citys', + type: 'treeSelect', + attributes: { + treeData: [ + { label: '上海', value: 1, children: [{ label: '黄浦区', value: 11 }] }, + { label: '北京', value: 2, children: [{ label: '西城区', value: 21 }] }, + ], + allowClear: true, + dropdownStyle: { maxHeight: 400, overflow: 'auto' }, + }, + initialValue: 21, + }, + { + label: '蔬菜', + name: 'fruits', + type: 'radio', + options: [ + { label: '青菜', value: 1 }, + { label: '黄瓜', value: 2 }, + ], + initialValue: 2, + }, + { + label: '蔬菜', + name: 'id', + type: 'checkbox', + options: [ + { label: '黄瓜', value: 2 }, + { label: '番茄', value: 3 }, + ], + initialValue: [2, 3], + }, + { + label: '上报时间', + name: 'time', + type: 'datePicker', + }, + { + label: '照片', + name: 'picture', + type: 'UploadGrid', + full: true, + onlyimg: true, + attributes: { + fileList: queryInfo?.fileList, + onChange: ({ fileList }) => setInfo({ ...queryInfo, fileList: fileList }), + onDownload: (file) => { + console.log('file', file); + }, + action: '', + listType: 'picture-card', + showDownloadIcon: isView, + showRemoveIcon: !isView, + showPreviewIcon: true, + maxCount: 1, + }, + }, + { + label: '验证码', + name: 'time2', + type: 'inputCount', + attributes: { + onChange: (e) => setInfo({ ...queryInfo, time2: e }), + }, + initialValue: queryInfo?.time2, + }, +]; diff --git a/examples/antdp-base2/src/pages/Demo/index.jsx b/examples/antdp-base2/src/pages/Demo/index.jsx new file mode 100644 index 000000000..d52266881 --- /dev/null +++ b/examples/antdp-base2/src/pages/Demo/index.jsx @@ -0,0 +1,111 @@ +import { ButtonGroupPro, FormDetail } from '@antdp/antdp-ui'; +import { useModel } from '@umijs/max'; +import { Drawer } from 'antd'; +import 'antd/dist/reset.css'; +import { useMemo } from 'react'; +import { detailItems } from './item'; +import { ProTable } from '@ant-design/pro-components'; +import { columns } from './item'; +import { selectPage } from '@/services/api'; + +const Demo = () => { + const { + drawerVisible, + setTrue, + setFalse, + queryInfo, + setInfo, + isView, + setIsView, + } = useModel('demo', (model) => ({ + ...model, + })); + + const data = useMemo(() => { + return detailItems({ + isView, + queryInfo, + setInfo, + }); + }, [isView, queryInfo, setInfo]); + + return ( +
+ ( + { + setTrue(); + setIsView(false); + }, + path: '/demo/add1', + }, + { + type: 'primary', + label: '详情', + onClick: () => { + setTrue(); + setIsView(true); + }, + path: '/demo/add2', + }, + { + label: 'Menu', + type: 'primary', + menu: [ + { + key: '1', + label: '新增', + onClick: () => {}, + path: '/demo/add3', + }, + ], + }, + ]} + /> + )} + request={async (params = {}) => { + const { code, data } = await selectPage(params); + if (code && code === 200) { + return { + data: data.rows || [], + total: data.total, + success: true, + }; + } + }} + pagination={{ + showSizeChanger: true, + }} + cardProps={{ + size: 'small', + style: { + padding: 0, + }, + }} + cardBordered + columns={columns} + rowKey="id" + /> + setFalse()} + open={drawerVisible} + > + + +
+ ); +}; +export default Demo; diff --git a/examples/antdp-base2/src/pages/Demo/item.jsx b/examples/antdp-base2/src/pages/Demo/item.jsx new file mode 100644 index 000000000..b0705a8e8 --- /dev/null +++ b/examples/antdp-base2/src/pages/Demo/item.jsx @@ -0,0 +1,118 @@ +import moment from 'moment'; + +export const columns = [ + { + title: '序号', + dataIndex: 'number', + fixed: 'left', + width: 90, + align: 'center', + hideInSearch: true, + render: (text, record, index) => { + return index + 1; + }, + }, + { + title: '姓名', + dataIndex: 'name', + align: 'center', + width: 90, + }, + { + title: '年龄', + dataIndex: 'title', + align: 'center', + width: 90, + }, + { + title: '地址', + dataIndex: 'address', + align: 'center', + width: 90, + }, +]; + +export const detailItems = ({ isView, queryInfo, setInfo }) => [ + { + label: '备注', + name: 'remark', + type: 'input', + initialValue: 'zz爱ff', + }, + { + label: '水果', + name: 'fruit', + type: 'select', + options: [{ label: '苹果', value: 1 }], + initialValue: 1, + }, + { + label: '城市', + name: 'citys', + type: 'treeSelect', + attributes: { + treeData: [ + { label: '上海', value: 1, children: [{ label: '黄浦区', value: 11 }] }, + { label: '北京', value: 2, children: [{ label: '西城区', value: 21 }] }, + ], + allowClear: true, + dropdownStyle: { maxHeight: 400, overflow: 'auto' }, + }, + initialValue: 21, + }, + { + label: '蔬菜', + name: 'fruits', + type: 'radio', + options: [ + { label: '青菜', value: 1 }, + { label: '黄瓜', value: 2 }, + ], + initialValue: 2, + }, + { + label: '蔬菜', + name: 'id', + type: 'checkbox', + options: [ + { label: '黄瓜', value: 2 }, + { label: '番茄', value: 3 }, + ], + initialValue: [2, 3], + }, + { + label: '上报时间', + name: 'time', + type: 'datePicker', + initialValue: moment(), + }, + { + label: '照片', + name: 'picture', + type: 'UploadGrid', + full: true, + onlyimg: true, + attributes: { + fileList: queryInfo?.fileList, + onChange: ({ fileList }) => setInfo({ ...queryInfo, fileList: fileList }), + onDownload: (file) => { + console.log('file', file); + }, + action: '', + listType: 'picture-card', + showDownloadIcon: isView, + showRemoveIcon: !isView, + showPreviewIcon: true, + maxCount: 1, + }, + }, + { + label: '验证码', + name: 'time2', + type: 'inputCount', + attributes: { + onChange: (e) => setInfo({ ...queryInfo, time2: e }), + }, + initialValue: queryInfo?.time2, + }, +]; diff --git a/examples/antdp-base2/src/pages/Detail/AdvancedDetails/index.jsx b/examples/antdp-base2/src/pages/Detail/AdvancedDetails/index.jsx new file mode 100644 index 000000000..38eacafa3 --- /dev/null +++ b/examples/antdp-base2/src/pages/Detail/AdvancedDetails/index.jsx @@ -0,0 +1,143 @@ +import { FormDetail } from '@antdp/antdp-ui'; +import { + Card, + Space, + Table, + Steps, + Row, + Col, + Radio, + Popover, + Empty, + Tabs, +} from 'antd'; +import CardDes from '@/components/CardDes'; +import 'antd/dist/reset.css'; +import { detailItems, userItems, columns1, data1 } from './item'; + +const Page = () => { + const customDot = (dot, { status, index }) => ( + + step {index} status: {status} + + } + > + {dot} + + ); + + const tables = ( +
+ ); + + const items = [ + { + key: '1', + label: `操作日志一`, + children: tables, + }, + { + key: '2', + label: `操作日志二`, + children: tables, + }, + { + key: '3', + label: `操作日志三`, + children: tables, + }, + ]; + return ( + + + +
+
+ +
+
+
+ + 操作一 + 操作二 + 操作三 + +
+ +
+
状态
+
待审批
+ + +
订单金额
+
¥568.08
+ + + + + + + + 项目 ID 23421 + 负责人 曲丽丽 + 生效时间 2016-12-12 ~ 2017-12-12 + + + + + +

信息组

+ + + + + + + + + + + + + + ); +}; +export default Page; diff --git a/examples/antdp-base2/src/pages/Detail/AdvancedDetails/item.js b/examples/antdp-base2/src/pages/Detail/AdvancedDetails/item.js new file mode 100644 index 000000000..ac22e0db9 --- /dev/null +++ b/examples/antdp-base2/src/pages/Detail/AdvancedDetails/item.js @@ -0,0 +1,200 @@ +import { Badge } from 'antd'; + +export const detailItems = [ + { + label: '创建人', + name: 'remark', + type: 'input', + initialValue: 'uiw', + }, + { + label: '订购产品', + name: 'remark', + type: 'input', + initialValue: 'XX 服务', + }, + { + label: '创建时间', + name: 'remark', + type: 'input', + initialValue: '2017-07-07', + }, + { + label: '关联单据', + name: 'remark', + type: 'input', + initialValue: '12421', + }, + { + label: '生效日期', + name: 'remark', + type: 'input', + initialValue: '2017-07-07 ~ 2017-08-08', + }, + { + label: '备注', + name: 'remark', + type: 'input', + initialValue: '请于两个工作日内确认', + }, +]; + +export const userItems = [ + { + label: '用户姓名', + name: 'remark', + type: 'input', + initialValue: 'uiw', + }, + { + label: '联系电话', + name: 'remark', + type: 'input', + initialValue: '18888888888', + }, + { + label: '常用快递', + name: 'remark', + type: 'input', + initialValue: 'nihao', + }, + { + label: '取货地址', + name: 'remark', + type: 'input', + initialValue: 'xx', + }, + { + label: '备注', + name: 'remark', + type: 'input', + initialValue: '无', + }, +]; + +export const columns = [ + { + title: '商品编号', + dataIndex: 'key', + }, + { + title: '商品名称', + dataIndex: 'name', + }, + { + title: '商品条码', + dataIndex: 'barCode', + }, + { + title: '单价', + dataIndex: 'price', + }, + { + title: '数量（件）', + className: 'num', + dataIndex: 'num', + }, + { + title: '金额', + dataIndex: 'money', + align: 'right', + }, +]; +export const data = [ + { + key: '1234561', + name: '矿泉水 550ml', + barCode: '12421432143214321', + price: '2.00 ', + num: '1', + money: '￥2.00', + }, + { + key: '1234562', + name: '凉茶 300ml', + barCode: '12421432143214322', + price: '3.00', + num: '2', + money: '￥6.00', + }, + { + key: '1234563', + name: '好吃的薯片', + barCode: '12421432143214323', + price: '7.00 ', + num: '4', + money: '￥28.00', + }, + { + key: '1234564', + name: '特别好吃的蛋卷', + barCode: '12421432143214324', + price: '8.50 ', + num: '3', + money: '￥25.50', + }, +]; + +export const columns1 = [ + { + title: '时间', + dataIndex: 'key', + }, + { + title: '当前进度', + dataIndex: 'name', + }, + { + title: '状态', + dataIndex: 'barCode', + render: (text) => ( + + ), + }, + { + title: '操作员ID', + dataIndex: 'price', + }, + { + title: '耗时', + className: 'num', + dataIndex: 'num', + }, +]; +export const data1 = [ + { + key: '2017-10-01 14:10', + name: '联系客户', + barCode: '进行中', + price: '取货员 ID1234', + num: '5mins', + }, + { + key: '2017-10-01 14:05', + name: '取货员出发', + barCode: '成功', + price: '取货员 ID1234', + num: '1h', + }, + { + key: '2017-10-01 13:05', + name: '取货员接单', + barCode: '成功', + price: '取货员 ID1234', + num: '5mins', + }, + { + key: '2017-10-01 13:00', + name: '申请审批通过', + barCode: '成功', + price: '系统', + num: '1h', + }, + { + key: '2017-10-01 12:00', + name: '发起退货申请', + barCode: '成功', + price: '用户', + num: '5mins', + }, +]; diff --git a/examples/antdp-base2/src/pages/Detail/BasicDetails/index.jsx b/examples/antdp-base2/src/pages/Detail/BasicDetails/index.jsx new file mode 100644 index 000000000..d0974fcef --- /dev/null +++ b/examples/antdp-base2/src/pages/Detail/BasicDetails/index.jsx @@ -0,0 +1,50 @@ +import { FormDetail } from '@antdp/antdp-ui'; +import { Card, Space, Table, Steps } from 'antd'; +import CardDes from '@/components/CardDes'; +import 'antd/dist/reset.css'; +import { detailItems, userItems, columns, data, columns1, data1 } from './item'; + +const Page = () => { + return ( + + + + + + + + + +

退货商品

+
( +
+
总计
+
￥61.50
+
+ )} + pagination={false} + /> + + +

退货进度

+
+ + + ); +}; +export default Page; diff --git a/examples/antdp-base2/src/pages/Detail/BasicDetails/item.js b/examples/antdp-base2/src/pages/Detail/BasicDetails/item.js new file mode 100644 index 000000000..250f4b31d --- /dev/null +++ b/examples/antdp-base2/src/pages/Detail/BasicDetails/item.js @@ -0,0 +1,188 @@ +import { Badge } from 'antd'; + +export const detailItems = [ + { + label: '取货单号', + name: 'remark', + type: 'input', + initialValue: '1000000000', + }, + { + label: '状态', + name: 'remark', + type: 'input', + initialValue: '已取货', + }, + { + label: '销售单号', + name: 'remark', + type: 'input', + initialValue: '1234123421', + }, + { + label: '子订单', + name: 'remark', + type: 'input', + initialValue: '3214321432', + }, +]; + +export const userItems = [ + { + label: '用户姓名', + name: 'remark', + type: 'input', + initialValue: 'uiw', + }, + { + label: '联系电话', + name: 'remark', + type: 'input', + initialValue: '18888888888', + }, + { + label: '常用快递', + name: 'remark', + type: 'input', + initialValue: 'nihao', + }, + { + label: '取货地址', + name: 'remark', + type: 'input', + initialValue: 'xx', + }, + { + label: '备注', + name: 'remark', + type: 'input', + initialValue: '无', + }, +]; + +export const columns = [ + { + title: '商品编号', + dataIndex: 'key', + }, + { + title: '商品名称', + dataIndex: 'name', + }, + { + title: '商品条码', + dataIndex: 'barCode', + }, + { + title: '单价', + dataIndex: 'price', + }, + { + title: '数量（件）', + className: 'num', + dataIndex: 'num', + }, + { + title: '金额', + dataIndex: 'money', + align: 'right', + }, +]; +export const data = [ + { + key: '1234561', + name: '矿泉水 550ml', + barCode: '12421432143214321', + price: '2.00 ', + num: '1', + money: '￥2.00', + }, + { + key: '1234562', + name: '凉茶 300ml', + barCode: '12421432143214322', + price: '3.00', + num: '2', + money: '￥6.00', + }, + { + key: '1234563', + name: '好吃的薯片', + barCode: '12421432143214323', + price: '7.00 ', + num: '4', + money: '￥28.00', + }, + { + key: '1234564', + name: '特别好吃的蛋卷', + barCode: '12421432143214324', + price: '8.50 ', + num: '3', + money: '￥25.50', + }, +]; + +export const columns1 = [ + { + title: '时间', + dataIndex: 'key', + }, + { + title: '当前进度', + dataIndex: 'name', + }, + { + title: '状态', + dataIndex: 'barCode', + render: (text) => ( + + ), + }, + { + title: '操作员ID', + dataIndex: 'price', + }, + { + title: '耗时', + className: 'num', + dataIndex: 'num', + }, +]; +export const data1 = [ + { + key: '2017-10-01 14:10', + name: '联系客户', + barCode: '进行中', + price: '取货员 ID1234', + num: '5mins', + }, + { + key: '2017-10-01 14:05', + name: '取货员出发', + barCode: '成功', + price: '取货员 ID1234', + num: '1h', + }, + { + key: '2017-10-01 13:05', + name: '取货员接单', + barCode: '成功', + price: '取货员 ID1234', + num: '5mins', + }, + { + key: '2017-10-01 13:00', + name: '申请审批通过', + barCode: '成功', + price: '系统', + num: '1h', + }, + { + key: '2017-10-01 12:00', + name: '发起退货申请', + barCode: '成功', + price: '用户', + num: '5mins', + }, +]; diff --git a/examples/antdp-base2/src/pages/Home/index.jsx b/examples/antdp-base2/src/pages/Home/index.jsx new file mode 100644 index 000000000..9637db40d --- /dev/null +++ b/examples/antdp-base2/src/pages/Home/index.jsx @@ -0,0 +1,323 @@ +import { Link, useRequest } from '@umijs/max'; +import { Avatar, Card, List, Statistic, Divider, Space } from 'antd'; +import { serviceActivities, serviceProject } from '../../services/api'; +import styles from './style.less'; +import { StatisticCard, ProCard } from '@ant-design/pro-components'; + +const PageHeaderContent = ({ currentUser }) => { + const loading = currentUser && Object.keys(currentUser).length; + if (!loading) { + return ; + } + return ( +
+
+ +
+
+
+ 早安， + {currentUser.name} + ，祝你开心每一天！ +
+
+ {currentUser.title} |{currentUser.group} +
+
+
+ ); +}; + +const ExtraContent = () => ( +
+
+ +
+
+ +
+
+ +
+
+); + +export default function Home(props) { + const { data } = useRequest(serviceProject, { manual: false }); + const { data: activities, loading: activitiesLoading } = useRequest( + serviceActivities, + { manual: false }, + ); + + const imgStyle = { + display: 'block', + width: 42, + height: 42, + }; + + const renderActivities = (item) => { + const events = item.template.split(/@\{([^{}]*)\}/gi).map((key) => { + if (item[key]) { + return ( + + {item[key].name} + + ); + } + return key; + }); + return ( + + } + title={ + + {item.user.name} +   + {events} + + } + description={ + + {item.updatedAt} + + } + /> + + ); + }; + + return ( + + + + + + + + + + ), + }} + /> + + ), + }} + /> + + ), + }} + /> + + ), + }} + /> + + + + + + + } + /> + + + } + /> + + + } + /> + + + + + + + + + ), + }} + /> + + ), + }} + /> + + + + + + + + } + /> + + + } + /> + + + + {(data || []).map((item) => ( + + } + title={ +
+ {item.title} +
+ } + description={item.description} + /> + + ))} + + + + renderActivities(item)} + dataSource={activities || []} + size="large" + /> + + + ); +} diff --git a/examples/antdp-base2/src/pages/Home/style.less b/examples/antdp-base2/src/pages/Home/style.less new file mode 100644 index 000000000..7e841e504 --- /dev/null +++ b/examples/antdp-base2/src/pages/Home/style.less @@ -0,0 +1,91 @@ +.textOverflow() { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + word-break: break-all; +} + +.pageHeaderContent { + display: flex; + .avatar { + flex: 0 1 72px; + & > span { + display: block; + width: 72px; + height: 72px; + border-radius: 72px; + } + } + .content { + position: relative; + top: 4px; + flex: 1 1 auto; + margin-left: 24px; + color: '#ccc'; + line-height: 22px; + .contentTitle { + margin-bottom: 12px; + color: #000; + font-weight: 500; + font-size: 20px; + line-height: 28px; + } + } +} + +.extraContent { + zoom: 1; + &::before, + &::after { + display: table; + content: ' '; + } + &::after { + clear: both; + height: 0; + font-size: 0; + visibility: hidden; + } + float: right; + white-space: nowrap; + .statItem { + position: relative; + display: inline-block; + padding: 0 32px; + > p:first-child { + margin-bottom: 4px; + color: #000; + font-size: 14; + line-height: 22px; + } + > p { + margin: 0; + color: #ccc; + font-size: 30px; + line-height: 38px; + > span { + color: #ccc; + font-size: 20px; + } + } + &::after { + position: absolute; + top: 8px; + right: 0; + width: 1px; + height: 40px; + background-color: #fff; + content: ''; + } + &:last-child { + padding-right: 0; + &::after { + display: none; + } + } + } +} + +.projectGrid { + width: 33.33%; +} diff --git a/examples/antdp-base2/src/pages/List/BasicList/index.jsx b/examples/antdp-base2/src/pages/List/BasicList/index.jsx new file mode 100644 index 000000000..fe7a7d62a --- /dev/null +++ b/examples/antdp-base2/src/pages/List/BasicList/index.jsx @@ -0,0 +1,75 @@ +import { Avatar, Button, List, Skeleton, Space, Card } from 'antd'; +import { useEffect, useState } from 'react'; +import styles from './style.less'; +import { useReactMutation } from '@antdp/hooks'; +import CardDes from '@/components/CardDes'; + +const fakeDataUrl = `https://randomuser.me/api/?results=${10}&inc=name,gender,email,nat,picture&noinfo`; + +const App = () => { + const [data, setData] = useState([]); + const { + mutate, + data: result, + isLoading, + } = useReactMutation({ + method: 'GET', + url: fakeDataUrl, + onSuccess: ({ results }) => { + setData([...data, ...results]); + }, + }); + useEffect(() => { + mutate(); + }, []); + + return ( + + + + + + + ) + } + dataSource={data} + renderItem={(item) => ( + edit, + more, + ]} + > + + } + title={ + + {item.name?.last} + + } + description="Ant Design, a design language for background applications, is refined by Ant UED Team" + /> +
content
+ + + )} + /> + + + ); +}; +export default App; diff --git a/examples/antdp-base2/src/pages/List/BasicList/style.less b/examples/antdp-base2/src/pages/List/BasicList/style.less new file mode 100644 index 000000000..9c7c80741 --- /dev/null +++ b/examples/antdp-base2/src/pages/List/BasicList/style.less @@ -0,0 +1,3 @@ +.demo_loadmore_list { + min-height: 350px; +} diff --git a/examples/antdp-base2/src/pages/List/CardList/index.jsx b/examples/antdp-base2/src/pages/List/CardList/index.jsx new file mode 100644 index 000000000..8be33857a --- /dev/null +++ b/examples/antdp-base2/src/pages/List/CardList/index.jsx @@ -0,0 +1,91 @@ +import React, { useEffect, useState } from 'react'; +import { Avatar, Card, Skeleton, Row, Col, Button, Space } from 'antd'; +import { + EditOutlined, + EllipsisOutlined, + SettingOutlined, +} from '@ant-design/icons'; +import { getList } from '@/services/api'; +import { useReactMutation } from '@antdp/hooks'; +import CardDes from '@/components/CardDes'; +const { Meta } = Card; + +export default function () { + const [data, setData] = useState([]); + + const { + mutate, + data: result, + isLoading, + } = useReactMutation({ + method: 'POST', + url: getList, + onSuccess: ({ data: results = [] }) => { + setData([...data, ...results]); + }, + }); + + useEffect(() => { + mutate(); + }, []); + + return ( + + + + + {data.map((item, i) => ( + + } + actions={[ + , + , + , + ]} + > + + } + title={item.title} + description={item.description} + /> + + + + ))} + + {!isLoading && ( +
+ +
+ )} + + + ); +} diff --git a/examples/antdp-base2/src/pages/List/ProList/index.jsx b/examples/antdp-base2/src/pages/List/ProList/index.jsx new file mode 100644 index 000000000..08861279b --- /dev/null +++ b/examples/antdp-base2/src/pages/List/ProList/index.jsx @@ -0,0 +1,111 @@ +import { ProList } from '@ant-design/pro-components'; +import { Button, Space, Tag } from 'antd'; +import { request } from '@umijs/max'; +import CardDes from '@/components/CardDes'; + +export default () => { + return ( + + + { + return [ + , + ]; + }} + search={{}} + rowKey="name" + headerTitle="基础列表" + request={async (params = {}) => + request('https://proapi.azurewebsites.net/github/issues', { + params, + }) + } + pagination={{ + pageSize: 10, + }} + showActions="hover" + metas={{ + title: { + dataIndex: 'user', + title: '用户', + }, + avatar: { + dataIndex: 'avatar', + search: false, + }, + description: { + dataIndex: 'title', + search: false, + }, + subTitle: { + dataIndex: 'labels', + render: (_, row) => { + return ( + + {row.labels?.map((label) => ( + + {label.name} + + ))} + + ); + }, + search: false, + }, + actions: { + render: (text, row) => [ + + 链路 + , + + 报警 + , + + 查看 + , + ], + search: false, + }, + status: { + // 自己扩展的字段，主要用于筛选，不在列表中显示 + title: '状态', + valueType: 'select', + valueEnum: { + all: { text: '全部', status: 'Default' }, + open: { + text: '未解决', + status: 'Error', + }, + closed: { + text: '已解决', + status: 'Success', + }, + processing: { + text: '解决中', + status: 'Processing', + }, + }, + }, + }} + /> + + ); +}; diff --git a/examples/antdp-base2/src/pages/List/TableList/index.jsx b/examples/antdp-base2/src/pages/List/TableList/index.jsx new file mode 100644 index 000000000..2fdc5691c --- /dev/null +++ b/examples/antdp-base2/src/pages/List/TableList/index.jsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { Space } from 'antd'; +import { columns } from './item'; +import { selectPage } from '@/services/api'; +import CardDes from '@/components/CardDes'; +import { ProTable, PageContainer } from '@ant-design/pro-components'; + +const SearchTable = () => { + return ( + + +
+ { + const { code, data } = await selectPage(params); + if (code && code === 200) { + return { + data: data.rows || [], + total: data.total, + success: true, + }; + } + }} + pagination={{ + showSizeChanger: true, + }} + cardProps={{ + size: 'small', + style: { + padding: 0, + }, + }} + cardBordered + columns={columns} + rowKey="id" + /> + + ); +}; +export default SearchTable; diff --git a/examples/antdp-base2/src/pages/List/TableList/item.jsx b/examples/antdp-base2/src/pages/List/TableList/item.jsx new file mode 100644 index 000000000..71ca0aacc --- /dev/null +++ b/examples/antdp-base2/src/pages/List/TableList/item.jsx @@ -0,0 +1,31 @@ +export const columns = [ + { + title: '序号', + dataIndex: 'number', + fixed: 'left', + width: 90, + hideInSearch: true, + align: 'center', + render: (text, record, index) => { + return index + 1; + }, + }, + { + title: '姓名', + dataIndex: 'name', + align: 'center', + width: 90, + }, + { + title: '年龄', + dataIndex: 'title', + align: 'center', + width: 90, + }, + { + title: '地址', + dataIndex: 'address', + align: 'center', + width: 90, + }, +]; diff --git a/examples/antdp-base2/src/pages/Person/PersonalCenter/ApplyLists.jsx b/examples/antdp-base2/src/pages/Person/PersonalCenter/ApplyLists.jsx new file mode 100644 index 000000000..7a8b9016e --- /dev/null +++ b/examples/antdp-base2/src/pages/Person/PersonalCenter/ApplyLists.jsx @@ -0,0 +1,96 @@ +import React, { useEffect, useState } from 'react'; +import { Avatar, Card, Skeleton, Row, Col, Space } from 'antd'; +import { + EditOutlined, + EllipsisOutlined, + SettingOutlined, +} from '@ant-design/icons'; +import { getList } from '@/services/api'; +import { useReactMutation } from '@antdp/hooks'; +import { applyItems } from './item'; +const { Meta } = Card; + +export default function () { + const [data, setData] = useState([]); + + const { + mutate, + data: result, + isLoading, + } = useReactMutation({ + method: 'POST', + url: getList, + onSuccess: ({ data: results = [] }) => { + setData([...data, ...results]); + }, + }); + + useEffect(() => { + mutate(); + }, []); + return ( + + + {applyItems.map((item, i) => ( + + , + , + , + ]} + > + +
+ +
{item.title}
+
+
+
+
+ 活跃用户 +
+
+ {item.maxNum} + 万 +
+
+
+
+ 新增用户 +
+
{item.minNum}
+
+
+ + + + ))} + + + ); +} diff --git a/examples/antdp-base2/src/pages/Person/PersonalCenter/CardLists.jsx b/examples/antdp-base2/src/pages/Person/PersonalCenter/CardLists.jsx new file mode 100644 index 000000000..8daf79b8b --- /dev/null +++ b/examples/antdp-base2/src/pages/Person/PersonalCenter/CardLists.jsx @@ -0,0 +1,81 @@ +import React, { useEffect, useState } from 'react'; +import { Avatar, Card, Skeleton, Row, Col, Button, Space } from 'antd'; +import { + EditOutlined, + EllipsisOutlined, + SettingOutlined, +} from '@ant-design/icons'; +import { getList } from '@/services/api'; +import { useReactMutation } from '@antdp/hooks'; +import { cardItems } from './item'; +const { Meta } = Card; + +export default function () { + const [data, setData] = useState([]); + + const { + mutate, + data: result, + isLoading, + } = useReactMutation({ + method: 'POST', + url: getList, + onSuccess: ({ data: results = [] }) => { + setData([...data, ...results]); + }, + }); + + useEffect(() => { + mutate(); + }, []); + + return ( + + {cardItems.map((item, i) => ( + + + } + > +
+
{item.title}
+
+ {item.content} +
+
+
+
{item.time}
+
+ + + ))} + + ); +} diff --git a/examples/antdp-base2/src/pages/Person/PersonalCenter/Contents.jsx b/examples/antdp-base2/src/pages/Person/PersonalCenter/Contents.jsx new file mode 100644 index 000000000..4e019bb33 --- /dev/null +++ b/examples/antdp-base2/src/pages/Person/PersonalCenter/Contents.jsx @@ -0,0 +1,33 @@ +import { Tabs } from 'antd'; +import Lists from './Lists'; +import CardLists from './CardLists'; +import ApplyLists from './ApplyLists'; +const onChange = (key) => { + console.log(key); +}; + +const items = [ + { + key: '1', + label: `文章(8)`, + children: , + }, + { + key: '2', + label: `应用(8)`, + children: , + }, + { + key: '3', + label: `项目(8)`, + children: , + }, +]; +const Contents = () => { + return ( +
+ +
+ ); +}; +export default Contents; diff --git a/examples/antdp-base2/src/pages/Person/PersonalCenter/Lists.jsx b/examples/antdp-base2/src/pages/Person/PersonalCenter/Lists.jsx new file mode 100644 index 000000000..90cb98f9e --- /dev/null +++ b/examples/antdp-base2/src/pages/Person/PersonalCenter/Lists.jsx @@ -0,0 +1,131 @@ +import { Avatar, Button, List, Skeleton, Space } from 'antd'; +import { useEffect, useState } from 'react'; +import styles from './style.less'; +import { useReactMutation } from '@antdp/hooks'; +import CardDes from '@/components/CardDes'; +import { listItems } from './item'; +import { + CommentOutlined, + HeartOutlined, + LikeOutlined, +} from '@ant-design/icons'; + +const fakeDataUrl = `https://randomuser.me/api/?results=${10}&inc=name,gender,email,nat,picture&noinfo`; + +const App = () => { + const [data, setData] = useState([]); + const { + mutate, + data: result, + isLoading, + } = useReactMutation({ + method: 'GET', + url: fakeDataUrl, + onSuccess: ({ results }) => { + setData([...data, ...results]); + }, + }); + useEffect(() => { + mutate(); + }, []); + + return ( + { + return ( + +
+
{item.title}
+
+ {item.labels.map((a) => { + return ( +
+ {a} +
+ ); + })} +
+
+ {item.content} +
+
+ + + {item.name}{' '} + + 发布 + + https://ant.design + + {item.time} +
+
+ + + {item.star}{' '} + + | + + + {item.good} + + | + + + {item.mess}{' '} + +
+
+ + ); + }} + /> + ); +}; +export default App; diff --git a/examples/antdp-base2/src/pages/Person/PersonalCenter/User.js b/examples/antdp-base2/src/pages/Person/PersonalCenter/User.js new file mode 100644 index 000000000..7bbede1b5 --- /dev/null +++ b/examples/antdp-base2/src/pages/Person/PersonalCenter/User.js @@ -0,0 +1,113 @@ +import React from 'react'; +import { Card, Avatar, Divider } from 'antd'; +import styles from './style.less'; +import { useReactQuery } from '@antdp/hooks'; +import { serviceProject } from '../../../services/api'; +import { UserOutlined } from '@ant-design/icons'; + +const PageHeaderContent = ({ currentUser }) => { + const loading = currentUser && Object.keys(currentUser).length; + const labels = ['很有想法', '专注设计', '海纳百川', '活泼开朗', '川妹子']; + const teams = [ + { + title: '科学搬砖组', + icon: 'user', + }, + { + title: '中二少女团', + icon: 'user', + }, + { + title: '程序员日常', + icon: 'user', + }, + { + title: '高逼格设计', + icon: 'user', + }, + { + title: '科学搬砖组', + icon: 'user', + }, + ]; + if (!loading) { + return ; + } + return ( +
+
+
+ +
+
+
{currentUser.name}
+
海纳百川，有容乃大
+
+
+
+
+ + 交互专家 +
+
+ + 尼好集成有限责任公司 +
+
+ + 浙江省杭州市 +
+
+ +
+
标签
+
+ {labels.map((a) => { + return
{a}
; + })} +
+
+ +
+
团队
+
+ {teams.map((a) => { + return ( +
+ + {a.title} +
+ ); + })} +
+
+
+ ); +}; + +export default function User(props) { + const { data, isLoading } = useReactQuery({ + queryKey: ['project'], + url: serviceProject, + }); + return ( +
+ + + +
+ ); +} diff --git a/examples/antdp-base2/src/pages/Person/PersonalCenter/index.jsx b/examples/antdp-base2/src/pages/Person/PersonalCenter/index.jsx new file mode 100644 index 000000000..c56603aa2 --- /dev/null +++ b/examples/antdp-base2/src/pages/Person/PersonalCenter/index.jsx @@ -0,0 +1,39 @@ +import { Layout, Space } from 'antd'; +import User from './User'; +import Contents from './Contents'; +const { Sider } = Layout; + +const headerStyle = { + textAlign: 'center', + color: '#fff', + backgroundColor: '#7dbcea', +}; +const contentStyle = { + textAlign: 'center', + backgroundColor: '#fff', +}; +const siderStyle = { + textAlign: 'center', + color: '#fff', + backgroundColor: '#fff', +}; + +const App = () => ( + + + + + + + + + + +); +export default App; diff --git a/examples/antdp-base2/src/pages/Person/PersonalCenter/item.js b/examples/antdp-base2/src/pages/Person/PersonalCenter/item.js new file mode 100644 index 000000000..58bc7ee44 --- /dev/null +++ b/examples/antdp-base2/src/pages/Person/PersonalCenter/item.js @@ -0,0 +1,176 @@ +export const applyItems = [ + { + title: 'Alipay', + maxNum: '18', + minNum: '1303', + }, + { + title: 'Alipay', + maxNum: '18', + minNum: '1303', + }, + { + title: 'Alipay', + maxNum: '18', + minNum: '1303', + }, + { + title: 'Alipay', + maxNum: '18', + minNum: '1303', + }, + { + title: 'Alipay', + maxNum: '18', + minNum: '1303', + }, + { + title: 'Alipay', + maxNum: '18', + minNum: '1303', + }, + { + title: 'Alipay', + maxNum: '18', + minNum: '1303', + }, + { + title: 'Alipay', + maxNum: '18', + minNum: '1303', + }, +]; + +export const cardItems = [ + { + title: 'Alipay', + content: '那是一种内在的东西， 他们到达不了，也无法触及的', + time: '几秒前', + }, + { + title: 'Alipay', + content: '那是一种内在的东西， 他们到达不了，也无法触及的', + time: '2 小时前', + }, + { + title: 'Alipay', + content: '那是一种内在的东西， 他们到达不了，也无法触及的', + time: '2 小时前', + }, + { + title: 'Alipay', + content: '那是一种内在的东西， 他们到达不了，也无法触及的', + time: '2 小时前', + }, + { + title: 'Alipay', + content: '那是一种内在的东西， 他们到达不了，也无法触及的', + time: '2 小时前', + }, + { + title: 'Alipay', + content: '那是一种内在的东西， 他们到达不了，也无法触及的', + time: '2 小时前', + }, + { + title: 'Alipay', + content: '那是一种内在的东西， 他们到达不了，也无法触及的', + time: '2 小时前', + }, + { + title: 'Alipay', + content: '那是一种内在的东西， 他们到达不了，也无法触及的', + time: '2 小时前', + }, +]; + +export const listItems = [ + { + title: 'Alipay', + content: + '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', + time: '2023-04-27 13:50', + labels: ['Ant Design', '设计语言'], + name: '付小小 ', + star: 169, + good: 114, + mess: 16, + }, + { + title: 'Alipay', + content: + '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', + time: '2023-04-27 13:50', + labels: ['Ant Design', '设计语言'], + name: '付小小 ', + star: 169, + good: 114, + mess: 16, + }, + { + title: 'Alipay', + content: + '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', + time: '2023-04-27 13:50', + labels: ['Ant Design', '设计语言'], + name: '付小小 ', + star: 169, + good: 114, + mess: 16, + }, + { + title: 'Alipay', + content: + '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', + time: '2023-04-27 13:50', + labels: ['Ant Design', '设计语言'], + name: '付小小 ', + star: 169, + good: 114, + mess: 16, + }, + { + title: 'Alipay', + content: + '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', + time: '2023-04-27 13:50', + labels: ['Ant Design', '设计语言'], + name: '付小小 ', + star: 169, + good: 114, + mess: 16, + }, + { + title: 'Alipay', + content: + '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', + time: '2023-04-27 13:50', + labels: ['Ant Design', '设计语言'], + name: '付小小 ', + star: 169, + good: 114, + mess: 16, + }, + { + title: 'Alipay', + content: + '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', + time: '2023-04-27 13:50', + labels: ['Ant Design', '设计语言'], + name: '付小小 ', + star: 169, + good: 114, + mess: 16, + }, + { + title: 'Alipay', + content: + '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', + time: '2023-04-27 13:50', + labels: ['Ant Design', '设计语言'], + name: '付小小 ', + star: 169, + good: 114, + mess: 16, + }, +]; diff --git a/examples/antdp-base2/src/pages/Person/PersonalCenter/style.less b/examples/antdp-base2/src/pages/Person/PersonalCenter/style.less new file mode 100644 index 000000000..89c78b9b3 --- /dev/null +++ b/examples/antdp-base2/src/pages/Person/PersonalCenter/style.less @@ -0,0 +1,146 @@ +.textOverflow() { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + word-break: break-all; +} + +.pageHeaderContent { + .header { + display: flex; + flex-direction: column; + align-items: center; + + .avatar { + display: flex; + align-content: center; + + & > span { + display: block; + width: 72px; + height: 72px; + border-radius: 72px; + } + } + } + + .content { + position: relative; + top: 4px; + flex: 1 1 auto; + color: '#ccc'; + line-height: 22px; + + .contentTitle { + margin-bottom: 12px; + color: #000; + font-weight: 500; + font-size: 20px; + line-height: 28px; + } + } + + .describe { + margin: 20px; + display: flex; + flex-direction: column; + align-items: self-start; + justify-content: flex-start; + + .title { + font-weight: bold; + margin-bottom: 10px; + } + + .labels { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: self-start; + } + + .labelsItem { + margin: 6px; + border: 1px solid #d9d9d9; + padding: 1px 2px; + font-size: 12px; + background: #fafafa; + } + + .teamsItem { + margin: 6px; + padding: 1px 2px; + } + } +} + +.extraContent { + zoom: 1; + + &::before, + &::after { + display: table; + content: ' '; + } + + &::after { + clear: both; + height: 0; + font-size: 0; + visibility: hidden; + } + + float: right; + white-space: nowrap; + + .statItem { + position: relative; + display: inline-block; + padding: 0 32px; + + > p:first-child { + margin-bottom: 4px; + color: #000; + font-size: 14; + line-height: 22px; + } + + > p { + margin: 0; + color: #ccc; + font-size: 30px; + line-height: 38px; + + > span { + color: #ccc; + font-size: 20px; + } + } + + &::after { + position: absolute; + top: 8px; + right: 0; + width: 1px; + height: 40px; + background-color: #fff; + content: ''; + } + + &:last-child { + padding-right: 0; + + &::after { + display: none; + } + } + } +} + +.projectGrid { + width: 33.33%; +} + +.demo_loadmore_list { + min-height: 350px; +} diff --git a/examples/antdp-base2/src/pages/Person/PersonalSettings/AccountBind.jsx b/examples/antdp-base2/src/pages/Person/PersonalSettings/AccountBind.jsx new file mode 100644 index 000000000..15d9d07e8 --- /dev/null +++ b/examples/antdp-base2/src/pages/Person/PersonalSettings/AccountBind.jsx @@ -0,0 +1,44 @@ +import { Avatar, Button, List, Skeleton } from 'antd'; +import { useEffect, useState } from 'react'; +import { accountItems } from './item'; + +const count = 3; +const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`; +const App = () => { + const [initLoading, setInitLoading] = useState(true); + const [loading, setLoading] = useState(false); + const [data, setData] = useState([]); + const [list, setList] = useState([]); + useEffect(() => { + fetch(fakeDataUrl) + .then((res) => res.json()) + .then((res) => { + setInitLoading(false); + setData(res.results); + setList(res.results); + }); + }, []); + return ( + 账号绑定} + className="demo-loadmore-list" + loading={initLoading} + itemLayout="horizontal" + dataSource={accountItems} + renderItem={(item) => ( + 绑定]}> + + + } + title={{item.title}} + description={item.context} + /> + + + )} + /> + ); +}; +export default App; diff --git a/examples/antdp-base2/src/pages/Person/PersonalSettings/Basic.jsx b/examples/antdp-base2/src/pages/Person/PersonalSettings/Basic.jsx new file mode 100644 index 000000000..a1b679cb9 --- /dev/null +++ b/examples/antdp-base2/src/pages/Person/PersonalSettings/Basic.jsx @@ -0,0 +1,76 @@ +import { useState, useMemo } from 'react'; +import { QuickForm, ButtonGroupPro } from '@antdp/antdp-ui'; +import { Card, Space, Avatar, Button, message, Upload } from 'antd'; +import 'antd/dist/reset.css'; +import { detailItems } from './item'; +import { UploadOutlined } from '@ant-design/icons'; +import Edit from './Edit'; + +const props = { + name: 'file', + action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', + headers: { + authorization: 'authorization-text', + }, + onChange(info) { + if (info.file.status !== 'uploading') { + console.log(info.file, info.fileList); + } + if (info.file.status === 'done') { + message.success(`${info.file.name} file uploaded successfully`); + } else if (info.file.status === 'error') { + message.error(`${info.file.name} file upload failed.`); + } + }, +}; + +const Page = () => { + const [queryInfo, setInfo] = useState({ time2: 123456, fileList: [] }); + + const data = useMemo(() => { + return detailItems({ + queryInfo, + setInfo, + }); + }, [queryInfo, setInfo]); + + return ( +
+
+ 基本设置 +
+
+
+ +
+
+
头像
+
+ + + + +
+
+
+
+ ); +}; +export default Page; diff --git a/examples/antdp-base2/src/pages/Person/PersonalSettings/Edit.jsx b/examples/antdp-base2/src/pages/Person/PersonalSettings/Edit.jsx new file mode 100644 index 000000000..f83442514 --- /dev/null +++ b/examples/antdp-base2/src/pages/Person/PersonalSettings/Edit.jsx @@ -0,0 +1,235 @@ +import { Button, Cascader, Form, Input, Select } from 'antd'; +import { useState } from 'react'; +const { Option } = Select; +const residences = [ + { + value: 'zhejiang', + label: '浙江', + children: [ + { + value: 'hangzhou', + label: '杭州', + children: [ + { + value: 'xihu', + label: '西湖', + }, + ], + }, + ], + }, + { + value: 'jiangsu', + label: '江苏', + children: [ + { + value: 'nanjing', + label: '南京', + children: [ + { + value: 'zhonghuamen', + label: '中华门', + }, + ], + }, + ], + }, +]; +const country = [ + { + value: 'zh', + label: '中国', + }, +]; +const formItemLayout = { + labelCol: { + xs: { + span: 24, + }, + sm: { + span: 8, + }, + }, + wrapperCol: { + xs: { + span: 24, + }, + sm: { + span: 16, + }, + }, +}; +const tailFormItemLayout = { + wrapperCol: { + xs: { + span: 24, + offset: 0, + }, + sm: { + span: 16, + offset: 8, + }, + }, +}; +const App = () => { + const [form] = Form.useForm(); + const onFinish = (values) => { + console.log('Received values of form: ', values); + }; + const prefixSelector = ( + + + + ); + const suffixSelector = ( + + + + ); + const [autoCompleteResult, setAutoCompleteResult] = useState([]); + const onWebsiteChange = (value) => { + if (!value) { + setAutoCompleteResult([]); + } else { + setAutoCompleteResult( + ['.com', '.org', '.net'].map((domain) => `${value}${domain}`), + ); + } + }; + const websiteOptions = autoCompleteResult.map((website) => ({ + label: website, + value: website, + })); + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; +export default App; diff --git a/examples/antdp-base2/src/pages/Person/PersonalSettings/Message.jsx b/examples/antdp-base2/src/pages/Person/PersonalSettings/Message.jsx new file mode 100644 index 000000000..f455fba04 --- /dev/null +++ b/examples/antdp-base2/src/pages/Person/PersonalSettings/Message.jsx @@ -0,0 +1,47 @@ +import { List, Switch } from 'antd'; +import { useEffect, useState } from 'react'; +import { messageItems } from './item'; + +const count = 3; +const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`; +const App = () => { + const [initLoading, setInitLoading] = useState(true); + const [data, setData] = useState([]); + const [list, setList] = useState([]); + useEffect(() => { + fetch(fakeDataUrl) + .then((res) => res.json()) + .then((res) => { + setInitLoading(false); + setData(res.results); + setList(res.results); + }); + }, []); + + return ( + 新消息通知} + className="demo-loadmore-list" + loading={initLoading} + itemLayout="horizontal" + dataSource={messageItems} + renderItem={(item) => ( + , + ]} + > + {item.title}} + description={item.context} + /> + + )} + /> + ); +}; +export default App; diff --git a/examples/antdp-base2/src/pages/Person/PersonalSettings/SecuritySet.jsx b/examples/antdp-base2/src/pages/Person/PersonalSettings/SecuritySet.jsx new file mode 100644 index 000000000..2d90c5c31 --- /dev/null +++ b/examples/antdp-base2/src/pages/Person/PersonalSettings/SecuritySet.jsx @@ -0,0 +1,41 @@ +import { List, Skeleton } from 'antd'; +import { useEffect, useState } from 'react'; +import { securityItems } from './item'; + +const count = 3; +const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`; +const App = () => { + const [initLoading, setInitLoading] = useState(true); + const [loading, setLoading] = useState(false); + const [data, setData] = useState([]); + const [list, setList] = useState([]); + useEffect(() => { + fetch(fakeDataUrl) + .then((res) => res.json()) + .then((res) => { + setInitLoading(false); + setData(res.results); + setList(res.results); + }); + }, []); + return ( + 安全设置} + className="demo-loadmore-list" + loading={initLoading} + itemLayout="horizontal" + dataSource={securityItems} + renderItem={(item) => ( + 修改]}> + + {item.title}} + description={item.context} + /> + + + )} + /> + ); +}; +export default App; diff --git a/examples/antdp-base2/src/pages/Person/PersonalSettings/index.jsx b/examples/antdp-base2/src/pages/Person/PersonalSettings/index.jsx new file mode 100644 index 000000000..5573d945c --- /dev/null +++ b/examples/antdp-base2/src/pages/Person/PersonalSettings/index.jsx @@ -0,0 +1,35 @@ +import { Tabs, Card } from 'antd'; +import SecuritySet from './SecuritySet'; +import AccountBind from './AccountBind'; +import Message from './Message'; +import Basic from './Basic'; +const App = () => { + const items = [ + { + label: `基本设置`, + key: 1, + children: , + }, + { + label: `安全设置`, + key: 2, + children: , + }, + { + label: `账号绑定`, + key: 3, + children: , + }, + { + label: `新消息通知`, + key: 4, + children: , + }, + ]; + return ( + + + + ); +}; +export default App; diff --git a/examples/antdp-base2/src/pages/Person/PersonalSettings/item.js b/examples/antdp-base2/src/pages/Person/PersonalSettings/item.js new file mode 100644 index 000000000..41622f1b1 --- /dev/null +++ b/examples/antdp-base2/src/pages/Person/PersonalSettings/item.js @@ -0,0 +1,107 @@ +export const detailItems = ({ isView = false, queryInfo, setInfo }) => [ + { + label: '邮箱', + name: 'remark', + type: 'input', + initialValue: 'antdesign@alipay.com', + }, + { + label: '昵称', + name: 'name', + type: 'input', + initialValue: 'Serati Ma', + }, + { + label: '个人简介', + name: 'person', + type: 'textarea', + }, + { + label: '国家/地区', + name: 'country', + type: 'select', + attributes: { + treeData: [{ label: '中国', value: 1 }], + allowClear: true, + dropdownStyle: { maxHeight: 400, overflow: 'auto' }, + }, + }, + { + label: '所在省区', + name: 'citys', + type: 'treeSelect', + attributes: { + treeData: [ + { label: '上海', value: 1, children: [{ label: '黄浦区', value: 11 }] }, + { label: '北京', value: 2, children: [{ label: '西城区', value: 21 }] }, + ], + allowClear: true, + dropdownStyle: { maxHeight: 400, overflow: 'auto' }, + }, + initialValue: 21, + }, + { + label: '街道地址', + name: 'dz', + type: 'input', + initialValue: '西湖区工专路 77 号', + }, + { + label: '联系电话', + name: 'phone', + type: 'input', + }, +]; + +export const messageItems = [ + { + title: '账户密码', + context: '其他用户的消息将以站内信的形式通知', + }, + { + title: '系统消息', + context: '系统消息将以站内信的形式通知', + }, + { + title: '待办任务', + context: '待办任务将以站内信的形式通知', + }, +]; + +export const accountItems = [ + { + title: '绑定淘宝', + context: '当前未绑定淘宝账号', + }, + { + title: '绑定支付宝', + context: '当前未绑定支付宝账号', + }, + { + title: '绑定钉钉', + context: '当前未绑定钉钉账号', + }, +]; + +export const securityItems = [ + { + title: '账户密码', + context: '当前密码强度：强', + }, + { + title: '密保手机', + context: '已绑定手机：138****8293', + }, + { + title: '密保问题', + context: '未设置密保问题，密保问题可有效保护账户安全', + }, + { + title: '备用邮箱', + context: '已绑定邮箱：ant***sign.com', + }, + { + title: 'MFA 设备', + context: '未绑定 MFA 设备，绑定后，可以进行二次确认', + }, +]; diff --git a/examples/antdp-base2/src/pages/Person/PersonalSettings/style.less b/examples/antdp-base2/src/pages/Person/PersonalSettings/style.less new file mode 100644 index 000000000..9c7c80741 --- /dev/null +++ b/examples/antdp-base2/src/pages/Person/PersonalSettings/style.less @@ -0,0 +1,3 @@ +.demo_loadmore_list { + min-height: 350px; +} diff --git a/examples/antdp-base2/src/pages/Results/Fail/index.jsx b/examples/antdp-base2/src/pages/Results/Fail/index.jsx new file mode 100644 index 000000000..7028cf964 --- /dev/null +++ b/examples/antdp-base2/src/pages/Results/Fail/index.jsx @@ -0,0 +1,34 @@ +import { Button, Result, Card } from 'antd'; +import { CloseCircleOutlined } from '@ant-design/icons'; +const App = () => ( + + + 返回修改 + , + ]} + /> + +

您提交的内容有如下错误：

+

+ + 您的账户已被冻结 +

+

+ + 您的账户还不具备申请资格 +

+ + +); +export default App; diff --git a/examples/antdp-base2/src/pages/Results/Success/index.jsx b/examples/antdp-base2/src/pages/Results/Success/index.jsx new file mode 100644 index 000000000..f63fd4253 --- /dev/null +++ b/examples/antdp-base2/src/pages/Results/Success/index.jsx @@ -0,0 +1,63 @@ +import { Button, Result, Popover, Steps, Row, Col, Card } from 'antd'; +const customDot = (dot, { status, index }) => ( + + step {index} status: {status} + + } + > + {dot} + +); +const App = () => ( + + + 返回列表 + , + , + , + ]} + /> + + + 项目 ID 23421 + 负责人 曲丽丽 + 生效时间 2016-12-12 ~ 2017-12-12 + + + + +); +export default App; diff --git a/examples/antdp-base2/src/services/api.js b/examples/antdp-base2/src/services/api.js new file mode 100644 index 000000000..52248460c --- /dev/null +++ b/examples/antdp-base2/src/services/api.js @@ -0,0 +1,21 @@ +import request from '@antdp/request'; + +// 模拟分页请求 +export const selectPage = async (params) => { + return request('/api/demo/selectPage', { + method: 'POST', + data: params, + }); +}; + +export async function userLogin(params) { + return request('/api/users/login', { + method: 'POST', + data: params, + }); +} + +// 使用react-query请求 +export const serviceProject = '/api/project/notice'; +export const serviceActivities = '/api/activities'; +export const getList = '/api/getList'; diff --git a/examples/antdp-base2/src/utils/utils.jsx b/examples/antdp-base2/src/utils/utils.jsx new file mode 100644 index 000000000..3e20c42c5 --- /dev/null +++ b/examples/antdp-base2/src/utils/utils.jsx @@ -0,0 +1,16 @@ +// 处理表单ref异步 +export const asyncAwaitForm = async (form) => { + return ( + (form && + form.validateFields && + form + .validateFields() + .then(async (vals) => { + return vals; + }) + .catch((errorInfo) => { + return errorInfo; + })) || + {} + ); +}; diff --git a/examples/website/src/components/Layouts/Navbar/index.tsx b/examples/website/src/components/Layouts/Navbar/index.tsx index 5811df05f..86936a6dd 100644 --- a/examples/website/src/components/Layouts/Navbar/index.tsx +++ b/examples/website/src/components/Layouts/Navbar/index.tsx @@ -40,6 +40,12 @@ const Navbar: FC> = (props) => { > 实例预览 + + 实例预览2 + 教程 组件