企业官网建设流程全解析

之前是把样式都交给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转义为一个占位符，这里用的是<|newline|>，然后在前端再将这个占位符转化为\n即可。

后端处理：

前端处理：

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

一些学到的知识点

解构写法

这种写法：

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 对象的属性，提供了键值对存储功能，数据没有过期时间，除非用户手动清除或通过代码删除。