ReactJS

2021-10-30 · 阅读 6775 · 字数 478

按钮放在哪里 如 Antd Pro 示例中，放在过滤设置区域还挺合适的。因为导出 Excel 需要遵循过滤条件，如时间段，类型等。 https://procomponents.ant.design/components/table#%E8%A1%A8%E5%8D%95%E6%93%8D%E4%BD%9C%E8%87%AA%E5%AE%9A%E4%B9%89 button or link link 容易实现吧，target 设置一下，在新 tab 页中下载。 可以确认一下，Ant Design 有没有体验更好的组件。之前用过 Ant Design 的上传组件不错。 Ant Design 中 Bu ...

阅读全文...

2021-10-28 · 阅读 6429 · 字数 432

例如，我要在数据后台拉取一段时间的代理商交易记录，并进行金额数据合计。 展现形式 可以使用 Antd Pro ProTable 的"表格主体自定义"，该区域在 table 列表的上方，更醒目一些。 https://procomponents.ant.design/components/table#%E8%A1%A8%E6%A0%BC%E4%B8%BB%E4%BD%93%E8%87%AA%E5%AE%9A%E4%B9%89 相对 Ant Design Table 的"总结栏"，"表格主体自定义" 格式更灵活，更醒目。 关键的一点是，Pr ...

阅读全文...

2021-10-18 · 阅读 4518 · 字数 488

Antd Pro 写的物联网 IoT 设备管理后台，需要加上一个所有设备的监控大屏。 入口 [X] Antd Pro 顶部菜单栏，“监控大屏”，闪烁图标达到醒目的效果 [X] 左侧菜单，进入 功能模块 基础模板： http://datav-react.jiaminghi.com/demo/construction-data/index.html [X] 修改顶部标题 [X] 废弃。点击全屏 [ ] 实时时间 [ ] 全国地图。飞线图 [ ] 各种设备数字 全屏组件 https://antd-plus.alitajs.com/components/operation/fullscreen ...

阅读全文...

2021-10-09 · 阅读 9938 · 字数 5842

需求 只需要省市二级选择，而不需要省市区。 网上不少示例使用的是 Ant Design select，实际上用 Cascader 级联选择组件更合理。 最终效果： Ant Design Cascader 级联选择组件 https://ant.design/components/cascader-cn/ 从文档看，label 是可选项，猜测不写 label 则同 value。 interface Option { value: string | number; label?: React.ReactNode; disabled?: boolean; children?: Opt ...

阅读全文...

2024-10-28 · 阅读 8206 · 字数 141

虽然修改了 Antd Pro V5 的全局 title，但是在加载时，还没有完全加载完的时候， 还是显示的 Ant Design Pro 的标题。 解决方法： 修改 Antd Pro V5 加载时的 title 打开：src/pages/document.ejs 修改里面的 title 部分。 .ejs 是什么格式？ Embedded JavaScript templating. 看起来就是一种 JS 的模板格式。 favicon.ico 在哪里替换 public 目录 login 页面的 logo > grep logo.svg -r src/ src/pages/user/Login ...

阅读全文...

2021-09-07 · 阅读 5771 · 字数 316

执行 tyarn build 完成后，会看到 Antd Pro 项目根目录下多了个 dist 目录。这个即是打包好的线上代码。 从 package.json 可以看到 build 对应的实际命令： "build": "umi build", 将 dist 目录 scp 到生产服务器上，然后增加 nginx 配置： location / { root /home/path_of_project/dist; index index.html index.htm; try_files $uri $uri/ /index.htm ...

阅读全文...

2022-01-25 · 阅读 9926 · 字数 858

以一个会员管理系统为例，采用前后端分离的架构，前端 Antd Pro V5, 后端 Golang Gin。 整理这个笔记是为了把操作流程串联起来，方便以后新建此类项目，节省时间。 原则 从看的见的部分入手，即先搞前端，然后后端。这样很容易了解哪部分需要调整，否值后台写着写着就迷失了方向。不知道下一步该搞什么。写程序确实很难标准化流程，这导致有时效率会不尽人意，总结一些可以遵守的原则，可以少走弯路。 尽量不要从头搭框架，特别是 Antd Pro 这种代码质量不行的框架，每次踩坑都是浪费时间。要么复制之前项目的代码，要么自己 fork 一份，自己维护 项目目录结构 考虑了一下，还是将后端、前端 ...

阅读全文...

2021-08-08 · 阅读 5310 · 字数 94

Ant Design Pro V5 如何去掉全局底部呢？ > grep 蚂蚁集团 -r src/ src/components/Footer/index.tsx: defaultMessage: '蚂蚁集团体验技术部出品', src/locales/zh-CN.ts: 'app.copyright.produced': '蚂蚁集团体验技术部出品', 打开文件 src/components/Footer/index.tsx 进行修改, 修改为 return 空字符串即可。 --- a/member_frontend/src/components/Footer/index.tsx ...

阅读全文...

2021-07-22 · 阅读 9160 · 字数 233

配置其实很简单，奈何 Ant Design Pro 文档写的有点晦涩，且代码不是最新的 Ant Design Pro 5。 整理了一下。 真实场景是，总部管理员与代理商登录后台看到的功能模块不一样，即左侧菜单显示不同。 需要修改三个地方： src/access.ts return 中添加各种权限配置。 currentUser 为调用后台的用户信息查询接口。 export default function access(initialState: { currentUser?: API.CurrentUser | undefined }) { const { currentUser } = ...

阅读全文...

2021-07-20 · 阅读 14471 · 字数 593

需求 我想在 Ant Design Pro 管理后台页面中实现这样一个功能： 统一的系统配置项管理 新增配置项时，需要选择配置项类型：例如字符串、图片、富文本 根据字段类型，分别展示不同的对应 Ant Design 组件：例如 Input 输入框，图片上传组件，富文本编辑组件 这就需要根据类型字段，动态地显示不同的字段。 getFieldValue 搜到需要使用 getFieldValue 来获取依赖字段的当前值，以此为依据来判断该显示不同的组件。 用 github 搜到一段示例代码： https://github.com/SANGET/custom-platform-tool/blob/ ...

阅读全文...

2021-07-22 · 阅读 8827 · 字数 260

想在 Ant Design Pro 后台中，通过后台接口异步加载 Select 的选项，例如文章的作者。 思路 react effect hook 拉取数据，但是如何保证只在加载时运行一次，而不是结束时还运行一次。实际上用中括号就没有这个烦恼，不指定返回的匿名函数就可以。 获取的数据，如何传递给 select 组件。使用 useState Show me the code: 以 Antd Pro 代码为例 例如下拉选择文章的作者： 引入依赖 import React, {useState, useEffect} from 'react'; import {getAuthors} fro ...

阅读全文...

2021-06-26 · 阅读 8953 · 字数 246

Ant Design Pro V5 默认的登录页面功能繁多，而实际项目需要精简一下。 修改项 去掉手机号登录。因为不想加短信验证功能。 去掉底部的其他登录方式 去掉忘记密码 修改标题 修改文件 src/pages/user/Login/index.tsx 去掉手机登录 删除 Tab 选项卡 - <Tabs.TabPane - key="mobile" - tab={intl.formatMessage({ - id: 'pages.login.p ...

阅读全文...

2021-06-24 · 阅读 5720 · 字数 624

安装 Ant Design Charts 依赖 参考 https://charts.ant.design/zh-CN/guide/start tyarn add @ant-design/charts 多数据曲线 Ant Design Charts 并没有给出同一图表多条曲线的配置方法。 查了一下，Ant Design Charts 是基于 G2Plot 的，所以看一下 G2Plot 的文档。 Ant Design Charts 是 G2Plot 的 React 版本，基于 React、TypeScript 封装了所有的 G2Plot 图表，继承了 G2Plot 的所有配置，对 React ...

阅读全文...

2022-09-27 · 阅读 3353 · 字数 452

我想在 Antd Pro 中为数据图表拉取数据，查实现方法时，发现了 React Effect Hook 这个概念。 参考 https://reactjs.org/docs/hooks-effect.html The Effect Hook lets you perform side effects in function components。 什么是 side effect 呢？ 之前在 Android Jetpack Compose 中也看到过 side effect 这个词，但是并不知道这是什么意思？ 官方文档中给出的解释是，side effect 包含： 数据拉取 (正是我所涉 ...

阅读全文...

2021-06-03 · 阅读 15949 · 字数 712

现象 在 Antd Pro 中使用了 Antd Form 来编辑报修单的进度状态。 但是在选中一条记录，在使用 Select 组件进行编辑时，总是显示状态码，而非状态描述。 看起来是之前遇到过的，select value 的整型与字符串的转换问题。 Warning: children should be Select.Option or Select.OptGroup instead of Option 原始代码： <Form.Item name="status" label="状态"> <Select> <Optio ...

阅读全文...