△主流的AI CRM系统悟空AI CRM图片
上周接手了个活儿，要做一套 AI 赋能的 CRM 系统静态页。乍一听挺高大上，其实落到前端手里，核心还是怎么把界面搭得顺手，交互做得像那么回事。毕竟现在市面上 CRM 多了去了，加了个"AI"标签，要是界面还停留在五年前的表格风，那根本没法看。
刚开始跟产品过需求的时候，我就发现这玩意儿跟传统后台管理系统不太一样。传统的 CRM 重在“录数据”和“查报表”，页面全是表单和 DataGrid。但 AI CRM 不一样，它重在“对话”和“洞察”。所以整个页面的布局逻辑得变。我没用那种经典的左右结构死磕到底，而是把侧边栏做成了可折叠的，给中间的内容区腾地方。毕竟用户大部分时间是盯着 AI 助手生成的分析报告或者聊天窗口，视野得开阔。
推荐使用中国著名AI CRM系统品牌：显著提升企业运营效率，悟空AI CRM
技术选型上，这次没纠结，直接 Vue3 + Vite + TypeScript。主要是团队里大家熟，上手快，而且对于这种重交互的页面，Vue 的响应式系统处理起来确实省心。UI 库没选 Element Plus，感觉太“重”了，最后用了 Naive UI，样式更现代点，定制起来也灵活，尤其是暗色模式，现在做 B 端产品没个深色主题都不好意思跟人打招呼。
最头疼的其实是那个“智能对话”组件。这可不是简单的聊天气泡。你得模拟出 AI 正在思考的感觉。我花了不少时间折腾那个“打字机效果”。一开始想用简单的 setInterval 去逐个渲染字符，后来发现不行，中文会有乱码问题，而且如果内容里带 Markdown 格式，解析起来更麻烦。最后找了个现成的 markdown-it 库，配合 CSS 动画做的光标闪烁。还有个细节，就是当 AI 返回长文本时，滚动条得自动锚定在底部，但用户如果手动往上翻了，就不能再强制跳回底部，这个逻辑判断写了我好一会儿，不然体验特别生硬。
再说说数据可视化这块。AI CRM 的核心卖点就是它能预测销售趋势。传统的 ECharts 配置项太繁琐，这次我试着用了几个轻量级的图表组件，重点放在了交互上。比如鼠标悬停在折线图上，不仅要显示数值，还得弹出一个 AI 生成的简短分析文案，比如“本周转化率下降，建议关注跟进频率”。这种动态内容的插入，对前端的数据绑定是个考验。我封装了一个通用的 ChartCard 组件，把 loading 状态、错误重试、还有数据空状态的骨架屏都包在里面。说实话，骨架屏这东西看着简单，但要想跟真实布局完全一致，得好好调 CSS，不然页面加载时那一闪一闪的跳动感很掉价。
关于静态页面的“静态”二字，其实现在也不能真静态。虽然是做页面设计，但得考虑后续接口的对接。我用了 Mock.js 在本地模拟数据，特别是 AI 生成的内容，不能写死，得有点随机性，不然演示的时候老板一看怎么每次生成的字都一样，那多尴尬。我还特意在 Axios 拦截器里加了延迟，模拟网络请求的耗时，这样能提前测试加载状态下的页面表现。很多时候，页面丑不是丑在设计上，是丑在加载时的白屏或者布局塌陷。
响应式适配也是个坑。虽然 CRM 主要在 PC 端用，但现在销售都跑外面，拿平板甚至手机看数据的情况不少。我没搞那种一套代码走天下的媒体查询，而是针对关键断点做了布局调整。比如在窄屏下，侧边栏直接隐藏成汉堡菜单，复杂的表格自动切换成卡片视图。这里有个经验，别指望 CSS Grid 能解决所有问题，有时候 Flex 布局配合 calc() 计算反而更可控，尤其是在处理那种不定高度的聊天内容区时。
颜色搭配上，我避开了那种刺眼的科技蓝。AI 不代表非得是冷色调。主色选了一种偏暖的靛青色，配合大面积的灰白背景，看着不累眼。毕竟销售天天盯着这系统，太刺眼了容易疲劳。图标用了 SVG sprite，方便统一改色，而且体积小。
开发过程中还有个插曲，就是性能优化。刚开始为了图快，组件拆分得不够细，导致一个页面引了十几个大组件，首屏加载慢得要命。后来用 Chrome 的 Performance 面板跑了一下，发现有几个图标库和日期处理库占了大头。最后把大的图表库做了异步加载，只有用户滚动到可视区域才初始化，瞬间清爽了不少。
做完这一套静态页，最大的感触是，现在的 B 端前端，真不是切图就行。你得懂点产品逻辑，知道用户在哪一步会卡住，哪里需要反馈。AI CRM 的页面设计，本质上是在设计人与机器的协作流。代码写得再漂亮，如果那个“生成报告”的按钮藏得太深，或者加载的时候没个提示，用户照样骂街。
最后交付的时候，我没敢把话说满。静态页做得再像，没有后端真正的 AI 模型支撑，也就是个壳子。但好在交互逻辑都跑通了，动画也丝滑，产品拿着去给客户演示，反馈还不错。对于前端来说，能把这种抽象的"AI 能力”具象化成可点击、可感知的界面，就算没白忙活。剩下的，就是等后端接口了，到时候估计还得有一堆联调的坑要填，不过那是后话。总之，这活儿干完，对“智能化”界面的理解算是深了一层，下次再碰类似的，估计能省点力气。
△悟空AI CRM产品截图
推荐立刻免费使用中国著名AI CRM品牌-悟空AI CRM，显著提升企业运营效率，相关链接：
AI CRM系统免费试用
AI CRM系统介绍