1.一套基于 Ant Design 和 Blazor 的开源企业级组件库
2.解读Ant Design Form中的onChange
3.Ant Design Vue 3.0 的那些正经事儿
4.ant-design+ts：封装Table模仿element实现表格高度自适应(百分百-干货)
5.MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统（8）-Ant Design Blazor前端框架搭建
6.Ant Design of Vue pro 安装与配置

一套基于 Ant Design 和 Blazor 的开源企业级组件库

       Ant Design Blazor是一套开源的、基于Ant Design和Blazor的企业级组件库，采用MIT License，旨在为开发者提供免费且具有Ant Design风格的组件选择。

       Blazor是一种以.NET和Razor为基础的新兴Web框架，它利用最新的网页版wms系统源码Web技术和.NET框架的优势，通过C#编写Web应用，大幅提升了开发效率与用户体验，同时提高了代码的可维护性。

       对于使用Ant Design风格的开发者，Ant Design Blazor是一个理想的选择。它结合了Blazor的现代Web开发功能和Ant Design的视觉设计，提供了丰富的组件库。

       如果你对Blazor和Ant Design风格感兴趣，Ant Design Blazor组件库是值得一试的。通过访问项目源码地址，你可以深入了解各个组件的功能和用法。

       该项目已收录于C#/.NET/.NET Core优秀项目和框架精选中。关注此精选页面，可以让你随时获取C#、.NET和.NET Core领域的最新动态与最佳实践，优化开发过程。

       如果你发现了优秀的项目或框架，欢迎积极参与，通过提交PR推荐或自荐，帮助提升这些项目和框架的可见度，共同促进社区的php基础源码发展。

解读Ant Design Form中的onChange

       深入解析 Ant Design Form 中的 onChange 机制

       Ant Design Form 组件在处理表单数据时，内部实现了一套复杂的逻辑，包括数据双向绑定、校验、数据提交等。本文主要探讨 onChange 事件及其在 Form 组件中的应用。

       Form 组件是一个高阶组件 (HOC)，为被包装的组件（如 Input）提供了表单功能。Form.create 初始化这个组件，注入了 form 对象和 getFieldProps 方法，用于获取输入框等表单组件的 onChange、value 等属性，从而实现数据双向绑定。

       创建 Form 的基本步骤包括：通过 Form.create 初始化组件，注入 form 对象和 getFieldProps 方法。getFieldProps 返回 onChange 和 value 属性，用于在表单组件上绑定数据变化事件。

       当表单提交时，可以调用 form.validateFields 或 form.validateFieldsAndScroll 来执行数据校验和提交。

       在表单内部，onChange 事件通过 onCollect 方法进行处理，该方法将收集到的表单数据存储在 fieldsStore 对象中。最终，通过 setFields 方法更新 fieldsStore，并触发组件重新渲染。

       在特定场景下，消息推送源码例如渠道多选控件，当需要在 onChange 中进行复杂的数据处理并更新数据时，直接在 onChange 中设置 fieldsValue 可能会导致问题。因为 onChange 事件处理逻辑在 onCollect 中执行，而 setFieldsValue 方法的调用并未影响最终的 fieldsStore 数据。

       为了解决这个问题，可以将对 fieldsValue 的设置放入下一个事件循环中执行。尽管这可以实现功能需求，但引入了额外的渲染步骤，增加了性能开销。进一步探索源码，可以发现 Ant Design 提供了 normalize 属性来处理数据转换，避免不必要的渲染。

       normalize 方法在字段值改变时调用，在重新渲染前进行数据转换，确保渲染时数据符合预期，同时减少渲染次数。对于有校验规则的表单组件，normalize 方法在数据改变时被调用两次，一次是常规的数据更新，一次是校验后的数据更新。

       总结而言，使用 Ant Design Form 时，应避免在 onChange 事件中直接设置 fieldsValue，而是利用 normalize 属性进行数据转换。同时，网页密码源码通过深入理解源码，可以更高效地解决表单组件在实际应用中遇到的问题。

Ant Design Vue 3.0 的那些正经事儿

       Ant Design Vue 3.0 的发布并非仓促之举，它标志着一个重要的里程碑，旨在提供更深入的源码重构、增强的功能特性、优化的易用性和性能提升。以下是3.0版本的主要亮点：

       1. **源码重构与提升**：从 TypeScript 和 Composition API 开始，大部分组件已切换至这种架构，以提升类型提示和管理复杂度。虽然Vue 3在TS支持上有所增强，但组件库的泛型组件和属性类型复用仍面临挑战。团队鼓励对TS技术熟练者加入，共同改进。

       2. **功能同步更新**：3.0引入了AntD 4.x的多项功能，如自定义时间库、虚拟滚动、暗黑主题、无障碍辅助和RTL支持，以及CSS Variables。

       3. **易用性优化**：在Table、TreeSelect等组件的自定义渲染API上，3.0简化了配置，引入统一的`v-slot`命名，减少了配置膨胀和未来扩展的风险。

       4. **性能改进**：FormItem的源码编制器渲染优化、TreeNode的废弃以及Tree和TreeSelect的虚拟滚动功能，旨在提升组件的性能和大数据渲染能力。

       尽管Table暂未支持虚拟滚动，但团队计划推出专门的产品解决大数据问题，预计在接下来的1-2个月推出。

       升级Ant Design Vue 3.0，你可以期待更简洁的代码、更好的性能，以及与社区的持续互动。如果你对这些改变感兴趣，别错过月日的Vue专场会议，详细内容可通过关注公众号获取。

ant-design+ts：封装Table模仿element实现表格高度自适应(百分百-干货)

       在面对需要自定义表格组件的场景时，通常我们会选择直接在标签上设定height和width属性，以实现表格的高度和宽度自适应，尤其当追求产品体验和客户满意度时。尽管如此，这样的做法并非总能满足需求，特别是当涉及到复杂的动态数据展示时。

       元素组件（element）内部源码已为我们提供了高度自适应的解决方案，但Ant Design并未直接提供这样的功能。尽管Ant Design允许开发者进行高度的定制化，但对于一些特定需求，如表格高度的自适应，我们需要更直接的解决方案。有传言称，通过购买特定的代码定制套餐，开发者能够接触到更深层次的源码，其中包括Table组件自适应高度的相关钩子。然而，这类功能似乎并未公开开放，更多地被视为商业服务的一部分。

       面对公司不支持购买相关服务的情况，我们不得不自行探索解决方案。在这个过程中，我们可能需要自己构建或定制表格组件，这不仅耗时，也可能影响项目排期。为了简化这个过程，我们可能需要额外的导入文件，以确保所需的工具和功能得以实现。例如，window自定义监听事件钩子和math.js计算库封装的工具包，这些都有助于我们更好地处理数据和实现自定义功能。

       在技术探索的道路上，面对挫折和挑战，我们可能会感到沮丧和焦虑。知乎作为一个开放的交流平台，成为了我们表达和寻求共鸣的空间。在这个过程中，我们不仅分享了自己的困扰，也从他人的经历中获得了理解和支持。尽管面对未来的不确定性，我们依然保持着学习和解决问题的热情。在这个过程中，我们可能需要重新审视和调整自己的心态，以更积极的态度面对生活中的各种挑战。

MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统（8）-Ant Design Blazor前端框架搭建

       前言

       选用Ant Design Blazor作为前端框架搭建ToDoList系统，因其设计规范与风格符合使用经验。此篇将指导如何搭建系统前端。

       Ant Design Blazor源码地址：github.com/ant-design-b...

       MongoDB从入门到实战相关教程链接

       YyFlight.ToDoList项目源码地址：github.com/YSGStudyHard...

       安装.NET 7SDK

       若本地未安装.NET 7 SDK，需先进行安装，可从dotnet.microsoft.com/en...获取。

       新建YyToDoBlazor应用

       注意：应用选用Wasm托管模式开发。

       AntDesign.Templates：开箱即用的中台前端/设计解决方案，包含丰富组件和布局，适用于构建管理系统。它基于Ant Design Pro框架，并为Blazor项目提供模板和脚手架。

       安装AntDesign.Templates模板

       在项目目录下，通过cmd打开终端，运行以下命令安装模板：

       模板创建 Ant Design Blazor Pro 项目

       配置模板参数

       BasicLayout.razor 定义网站整体布局，包含导航、菜单、内容和页脚，提供统一风格的页面模板。

       预览效果展示

Ant Design of Vue pro 安装与配置

       欢迎来到Ant Design of Vue pro的安装与配置教程！今天，我们将一起探索如何快速设置并使用这套专为Vue框架打造的中后台管理系统前端集成组件库。

       让我们从基础开始，Ant Design of Vue pro为开发者提供了一套美观且规范化的UI组件库，助力快速构建专业级的后台界面。但要注意，初期Ant Design仅提供React版本，对Vue开发者来说，这可能是一个挑战。然而，随着Vue的日益流行，Ant Design也适时推出了Vue版本，即Ant Design of Vue，为Vue开发者提供了便捷的解决方案。

       1. 下载与安装

       首先，我们需要从Git或Gitee获取Ant Design of Vue pro的源代码。如果网络不佳，使用Gitee是一个不错的选择。解压下载的文件后，我们会在目录中找到项目结构。

       接下步，使用yarn或npm安装项目依赖。yarn是一个强大的包管理工具，具备离线下载和性能优化功能，而npm是Node.js的标准包管理器。你可以通过全局安装yarn并运行相关命令来完成依赖安装。

       如果在从Git仓库克隆项目时遇到问题，只需确保创建本地仓库并重新提交代码，以解决可能的冲突。

       项目安装完成后，访问运行地址（例如：http://localhost:），登录页面将自动展示。首次登录时，账号信息通常已配置好，具体信息请参考项目文档或代码。

       2. 配置线上访问的域名

       在实现初步项目搭建后，我们需要对内置的mock进行调整，以适应线上开发环境。具体操作如下：

       在`main.js`文件中，注释掉mock相关代码，然后在`vue.config.js`文件中配置代理域名，以实现前端与后端服务器的交互。例如，将本地端口代理到服务器的端口，确保前后端接口能正常调用。

       此外，Ant Design Vue pro已经封装了前端token管理，从登录接口自动获取token并存储，用于后续请求中携带，实现对用户身份的验证。

       3. 前端自定义配置

       为了满足个性化需求，Ant Design Vue pro提供了多种布局选项与自定义功能。

       通过修改`src/layouts/BasicLayout.js`文件，我们可以调整左侧菜单与顶部导航栏的固定状态，利用pro-layout组件实现布局自定义。

       关闭严格模式，同样在`vue.config.js`文件中进行配置，确保项目在重启后生效。

       为了实现自定义主题颜色，我们需要在`vue.config.js`文件中进行相应的配置。这样，项目启动时便能自动应用所选主题色，为界面增添个性化的视觉风格。

       至此，Ant Design of Vue pro的安装与配置教程告一段落。通过上述步骤，你将能够快速搭建并定制一套符合专业标准的后台管理系统，为项目开发提速增效。