企业官网建设流程全解析

广州做网络服装的网站建设,wordpress新建分类目录,南宁比较有好的网站制作公司,wordpress 更换主机之前是把样式都交给AI写了#xff0c;但是发现AI喜欢每个组件对应一个样式#xff0c;这样子不方便后续维护#xff0c;既然都交给AI了那么还不如直接让AI用Tailwind CSS。经过实测发现AI写Tailwind CSS的水平还是很强的。静态页面交给AI写用Tailwind CSS用的已经很好了。使…之前是把样式都交给AI写了但是发现AI喜欢每个组件对应一个样式这样子不方便后续维护既然都交给AI了那么还不如直接让AI用Tailwind CSS。经过实测发现AI写Tailwind CSS的水平还是很强的。静态页面交给AI写用Tailwind CSS用的已经很好了。使用Ant Desgin Xant-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.FCSidebarProps ({ collapsed false }) {}类型安全TypeScript 确保组件接收正确的 props 类型简洁性解构和默认值在一行完成可读性直接看到组件需要哪些 props自文档化类型定义作为组件的文档React.useEffect的使用useEffect 是 React 中最重要的钩子之一它让你能够在函数组件中执行副作用操作。副作用Side Effects指组件渲染之外的操作如数据获取API调用订阅定时器、事件监听手动修改DOMlocalStorage操作React.useMemo的使用useMemo 是 React 提供的性能优化钩子用于记忆化计算结果避免在每次渲染时重复执行昂贵的计算。localStorage的使用localStorage 是 Web 浏览器提供的一种客户端存储机制允许网站在用户浏览器中持久化存储数据。基本概念localStorage 是 Window 对象的属性提供了键值对存储功能数据没有过期时间除非用户手动清除或通过代码删除。