Skip to content

Conversation

@chm3778
Copy link

@chm3778 chm3778 commented Jan 21, 2026

本 PR 对 Prisma 的前端界面进行了全面的视觉优化,重点改进了"专家执行"区域的显示方式,并统一了整体设计语言。
主要改动

  1. 可折叠专家卡片 (ExpertCard)
    问题: 原有的专家卡片在多个专家并行工作时占用大量屏幕空间,信息密度过高,影响阅读体验。

  2. 整体视觉风格统一

  • Header:玻璃拟态效果、标识优化(Prisma.ai)
  • Sidebar:会话列表悬停状态、当前会话高亮、删除按钮动效
  • ChatArea:欢迎页动画、消息间距调整
  • ChatMessage:用户 / AI 消息区分度增强、复制按钮交互优化、思考过程展开器重设计
  • InputSection:浮动卡片效果、聚焦状态光环
  • SettingsModal:现代化弹窗样式
  • 增加和优化了若干动画质感
  1. 设计系统
  • 主色调: Indigo (靛蓝) 作为强调色
  • 中性色: Slate 灰阶体系
  • 阴影: 精简为仅保留 shadow-floating 一个自定义阴影
  • 动画: 新增 animate-infade-inzoom-in-95 等过渡动画类

主要文件:

  • ExpertCard.tsx (+158/-76) - 核心重构
  • index.html (+35/-42) - Tailwind 配置精简
  • index.css (+30/-1) - 动画工具类
  • 其余为各组件样式微调

效果预览

image image

chm3778 and others added 2 commits January 21, 2026 15:06
…ling

- Redesign ExpertCard to be collapsible by default with live rolling text preview
- Add modal view for detailed expert reasoning/output on click
- Refine Header, Sidebar, ChatArea, ChatMessage styling with Indigo accent
- Add custom animations for smooth modal transitions
- Simplify Tailwind CDN config (remove unused tokens)
- Improve visual hierarchy with better spacing, shadows, and hover states
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant