React：使用Tailwind CSS、Streamdown与Ant Design X

使用Tailwind CSS

Tailwind CSS 简介是“用于快速用户界面开发的原子化 CSS 框架。”
Tailwind CSS 是一个功能优先的实用优先（utility-first）CSS框架，它通过提供大量原子化的工具类（utility classes），让开发者直接在HTML中构建自定义设计，而无需编写传统的CSS。与传统框架如Bootstrap不同，Tailwind不提供预设的UI组件，而是专注于底层样式，如flex、pt-4（padding-top: 1rem）、text-center等，这些类名直接对应CSS属性，使得样式声明高度语义化且可预测。其核心优势在于解决了“自定义CSS命名混乱”和“维护复杂”的问题，同时通过配置文件（如tailwind.config.js）支持主题定制、响应式设计（如md:text-lg）和状态变体（如hover:bg-blue-500），灵活适配各种项目需求。
先通过官网：https://tailwindcss.com/docs/installation/using-vite将Tailwind CSS 作为 Vite 插件进行安装。
之前是把样式都交给AI写了，但是发现AI喜欢每个组件对应一个样式，这样子不方便后续维护，既然都交给AI了那么还不如直接让AI用Tailwind CSS。经过实测发现AI写Tailwind CSS的水平还是很强的。

静态页面交给AI写用Tailwind CSS用的已经很好了。
使用Ant Desgin X

@ant-design/x 是一个专注于 React 生态的先进 AI 组件库，旨在简化与人工智能集成的开发过程。
该库包括高度定制化的 AI 组件，允许开发者轻松地将对话 AI 集成到他们的应用中。除了丰富的 UI 组件，@ant-design/x 还提供了一揽子 API 解决方案，支持开发者通过令牌认证直接接入现有 AI 服务，无缝衔接与 AI 的对话和交互。无论是建立智能聊天应用、提升用户交互体验还是加快 AI 能力的集成，@ant-design/x 都是 React 开发者进入 AI 世界的理想伙伴。
官方仓库地址：https://github.com/ant-design/x
官方文档地址：https://x.ant.design/components/overview-cn
这个组件比较新直接让AI来写是不太行的，需要自己看下文档，不过文档已经提供了比较详细的示例代码了，自己看懂之后，复制粘贴一下交给AI，当做AI的上下文，写起来估计问题也不大。
目前使用Ant Desgin X做了一个简单的AI聊天界面了，自己用AI写的组件的质量跟大厂写的肯定是不能比的，既然大厂都做的这么好了，直接用大厂做好的轮子就行了。

AI对Ant Design这个组件库很熟练，使用这个组件库的Menu + React Router代替了之前写的自定义样式 + React Router。
使用Ant Design做了一个模型配置页面：

个人感觉让AI用知名组件库来写比纯让AI自己写还是好多了。
使用Streamdown

这个也是一个新东西直接让AI来写是不太行的，需要自己先看下仓库介绍。
Streamdown的简介是“react-markdown 的即插即用替代品，专为 AI 驱动的流式传输而设计。”
官方仓库地址：https://github.com/vercel/streamdown
用起来在流式传输方面确实比之前使用的react-markdown效果要好一点。
渲染代码效果：

渲染表格效果：

渲染mermaid图效果：

遇到的问题

被一个SSE传输导致前端总是没有换行的一个问题困扰最久。
之前的效果是这样的：

总是只有一行，我能发现应该是后端传过来的换行符没有被正常解析导致的，但是叫AI改了很久还是没有很好地解决，自己上网查了一下，果然发现有很多人都遇到过这个问题。
一个很不错的解决方案就是进行转义，因为SSE传输有他自己的格式：

前端在处理的时候一般喜欢将所有\n都去掉，就导致了AI回复就只有一段话。
可以在后端将AI回复中的\n转义为一个占位符，这里用的是，然后在前端再将这个占位符转化为\n即可。
后端处理：

前端处理：

这样AI回复就不会就只有一段内容了，AI回复中带有的换行能正常保留了。
一些学到的知识点

解构写法
这种写法：

1. const Sidebar: React.FC<SidebarProps> = ({ collapsed = false }) => {}

复制代码

类型安全：TypeScript 确保组件接收正确的 props 类型
简洁性：解构和默认值在一行完成
可读性：直接看到组件需要哪些 props
自文档化：类型定义作为组件的"文档"
React.useEffect的使用
useEffect 是 React 中最重要的钩子之一，它让你能够在函数组件中执行副作用操作。
副作用（Side Effects）：指组件渲染之外的操作，如：
数据获取（API调用）
订阅（定时器、事件监听）
手动修改DOM
localStorage操作
React.useMemo的使用
useMemo 是 React 提供的性能优化钩子，用于记忆化计算结果，避免在每次渲染时重复执行昂贵的计算。
localStorage的使用
localStorage 是 Web 浏览器提供的一种客户端存储机制，允许网站在用户浏览器中持久化存储数据。
基本概念
localStorage 是 Window 对象的属性，提供了键值对存储功能，数据没有过期时间，除非用户手动清除或通过代码删除。
特点
持久性存储：数据在浏览器关闭后仍然保留
同源策略：只能访问同一域名下的数据
字符串存储：所有数据都以字符串形式存储
同步操作：读写操作是同步的

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

分享、互助 让互联网精神温暖你我

谢谢楼主提供！

感谢分享，学习下。