AI Office Assistant
语言:
Next.js logo

AI 办公助理

基于 Ant Design X 构建的智能办公助理应用

我是您的智能办公助理,可以帮您处理各种任务

主题架构演示

1. Ant Design Theme Token (100% 覆盖)
所有 Ant Design 组件都通过 Theme Token 自动适配当前主题色:blue
2. CSS Modules (模块化样式)

CSS Modules 卡片

使用 CSS Modules 实现的样式,支持主题切换

3. TailwindCSS (原子化样式)

TailwindCSS 卡片

使用 TailwindCSS 实现的响应式卡片,支持暗色模式

与 Ant Design 联动

使用 CSS 变量与 Ant Design 主题系统联动

4. CSS-in-JS (推荐用法)

CSS-in-JS 样式组件 (模拟)

这是使用 CSS Modules 模拟 CSS-in-JS 的组件,可以动态响应主题变化。 推荐使用 styled-components 或 emotion 库来实现更优雅的 CSS-in-JS 解决方案。

注意:这里使用内联样式仅作演示。实际项目中推荐使用 styled-components 或 emotion 库。
主题控制
当前主题:亮色
主题色切换:
当前主题色:blue (#1890ff)

全局状态管理演示

用户状态
认证状态: 未登录
会话管理
当前会话:
会话统计: 总数: 0活跃: 0已完成: 0总消息: 0
UI状态
当前视图: chat
加载状态: 空闲
通知系统
通知数量:

Ant Design X 组件演示

对话功能

🤖

欢迎使用 AI 助理

我是您的智能办公助理,可以帮您处理各种任务

对话

欢迎使用 AI 助理
我是您的智能办公助理,可以帮您处理各种任务

智能提示

智能提示
帮我写一份会议纪要

帮我写一份会议纪要

制作一个项目计划

制作一个项目计划

分析这份数据报告

分析这份数据报告

翻译这段文字

翻译这段文字

对话