如何使用Shadcn UI在React中创建可扩展的KYC入职流程
内容提要
本文介绍如何用Shadcn UI构建B2B SaaS产品的KYC验证流程，包含三步：账户类型选择（单选组）、文件上传（拖拽区）、验证状态（提示框），并配有步骤指示器。文章强调组件代码、状态管理、验证逻辑及无障碍设计，如使用fieldset分组、aria-label等，确保流程简洁、用户友好。
延伸解读
组件库选择：Radix UI 与 Base UI 的差异
文章指出，Shadcn UI 组件并不绑定特定的底层原语库，本流程使用的是 Base UI 而非更常见的 Radix UI。这提醒开发者，在混用不同来源的 Shadcn 风格组件时，需注意其底层库是否一致。虽然混用通常可行，但会引入两套无样式原语库，增加项目复杂度和维护成本。因此，在引入组件前，应确认其目标原语库，避免不必要的依赖冲突。
验证逻辑的集中管理
文件上传组件的验证逻辑被封装在 accept 函数中，并同时被点击浏览和拖拽上传两条路径调用，确保无论用户以何种方式添加文件，都执行相同的 PDF/CSV 格式和大小限制检查。这种设计避免了重复代码，也减少了因路径不同而导致的验证不一致风险。对于需要严格合规的 KYC 流程，这种集中验证的方式值得借鉴。
状态反馈的完整性
验证状态通过 Alert 和进度条双重呈现，文字说明当前状态，进度条提供粗略进度，两者互补，避免单一元素带来的信息缺失。文章特别强调，生产环境中最常遇到的是信息不匹配的情况，但示例流程仅覆盖了“检查中”和“已验证”两种状态，建议为不匹配状态设计专门的 Alert 和明确的下一步操作（如联系支持或重新上传），以提升用户体验和流程的健壮性。
无障碍设计的细节处理
文章在无障碍方面做了细致处理：使用 fieldset 和 sr-only legend 对单选组进行语义分组，为步骤条添加 aria-label 和 aria-current 属性，图标均设置 aria-hidden 以避免冗余朗读，删除按钮提供显式 aria-label。这些细节虽小，但对依赖屏幕阅读器的用户至关重要，也体现了 KYC 流程对合规性和包容性的重视。
Q&A
如何使用Shadcn UI在React中创建KYC入职流程？
本文介绍了使用Shadcn UI在React中创建KYC入职流程的方法，包括三个步骤：账户类型选择（使用单选组）、文件上传（拖拽区）、验证状态（提示框），并配有步骤指示器。文章提供了具体的组件代码、状态管理、验证逻辑和无障碍设计细节。
KYC流程中账户类型选择为什么使用单选组而不是下拉框或复选框？
因为账户类型是单一互斥的选择，单选组可以同时显示所有选项和当前选中状态，而下拉框隐藏选项，复选框允许多选，不适合这种场景。
文件上传组件如何实现拖拽上传和点击上传的统一验证？
文件上传组件通过一个accept函数处理验证，该函数在拖拽事件和点击浏览的change事件中都被调用，确保两种方式上传的文件都经过相同的验证（仅允许PDF或CSV，且小于10MB）。
验证状态提示框和进度条是如何配合使用的？
验证状态使用Alert组件显示文字状态（如“验证进行中”），同时配合进度条显示大致进度（如68%），这样既说明了正在做什么，又给出了进度感，避免单独使用时的不足。
步骤指示器（Stepper）是如何保持可复用性的？
步骤指示器是纯展示组件，只接收当前步骤值，通过比较current和step.number来决定样式。前进逻辑（如是否允许继续）放在父组件中，这样指示器本身不包含业务逻辑，便于复用。
在KYC流程中，有哪些无障碍设计细节？
无障碍设计包括：步骤指示器的nav元素有aria-label，当前步骤有aria-current="step"；单选组使用fieldset和sr-only的legend分组；图标都带有aria-hidden="true"；删除文件按钮有明确的aria-label。
KYC流程中使用了哪些Shadcn UI组件？
使用了Shadcn UI的Alert、Badge、Button、Card、Progress、RadioGroup、Separator等组件，以及Stepper和FileUpload（可能来自Shadcn Components库）。
KYC流程中如何处理文件验证失败的情况？
如果文件类型或大小不符合要求，accept函数会返回错误信息，并通过Alert组件以destructive样式显示错误提示，告知用户具体原因（如“仅支持PDF或CSV”或“文件必须小于10MB”）。
