Claude前端美化实战：从零构建高可定制化的对话界面

1次阅读

没有评论

共计 2283 个字符，预计需要花费 6 分钟才能阅读完成。

使用原生 Claude API 时，前端开发者常遇到以下典型问题：

原始数据缺乏结构化：API 返回的纯文本消息难以区分系统提示、用户输入和 AI 回复，导致界面呈现混乱
交互体验生硬：消息突然出现、无加载状态、无历史记录管理，影响对话流畅度
样式定制困难：默认样式与产品设计语言冲突，修改成本高
性能隐患：长对话场景下直接渲染所有消息会导致页面卡顿

针对上述问题，我们评估了三种主流方案：

纯 CSS 方案
优点：零依赖、性能最佳
缺点：主题切换困难，动态样式处理繁琐
CSS-in-JS（Emotion）
优点：组件级样式隔离，支持动态主题
缺点：增加包体积，SSR 需要额外配置
UI 框架（如 Material UI）
优点：开箱即用的美观组件
缺点：定制化受限于框架设计

最终选择 Emotion 作为样式方案，因其完美契合需要高频样式修改的对话场景。

创建可复用的 MessageBubble 组件，处理不同消息类型：

interface Message {
  id: string;
  content: string;
  role: 'user' | 'assistant' | 'system';
  timestamp: number;
}

const MessageBubble = ({role, content}: Message) => (
  <div css={[
    baseStyles,
    role === 'user' ? userStyles : assistantStyles
  ]}>
    <MarkdownRenderer content={content} />
  </div>
);

避免 CSS 关键帧导致的布局抖动，采用 FLIP 技术实现平滑入场：

const useMessageAnimation = (ref: RefObject<HTMLElement>) => {useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const first = el.getBoundingClientRect();
    requestAnimationFrame(() => {
      el.style.transition = 'none';
      el.style.opacity = '0';
      el.style.transform = 'translateY(20px)';

      requestAnimationFrame(() => {
        el.style.transition = 'all 0.3s ease';
        el.style.opacity = '1';
        el.style.transform = '';
      });
    });
  }, []);
};

创建可扩展的主题 Provider：

const themes = {
  light: {
    primary: '#ffffff',
    text: '#333333',
    userBubble: '#007aff',
    assistantBubble: '#f2f2f7'
  },
  dark: {
    primary: '#1c1c1e',
    text: '#ffffff',
    userBubble: '#0a84ff',
    assistantBubble: '#2c2c2e'
  }
};

const ThemeContext = createContext(themes.light);

const ThemeProvider = ({children}: {children: ReactNode}) => {const [theme, setTheme] = useState(themes.light);

  const toggleTheme = useCallback(() => {setTheme(prev => prev === themes.light ? themes.dark : themes.light);
  }, []);

  return (<ThemeContext.Provider value={theme}>
      {children}
      <ToggleButton onClick={toggleTheme} />
    </ThemeContext.Provider>
  );
};

使用 react-window 处理长列表：

const VirtualList = () => (
  <FixedSizeList
    height={600}
    itemCount={messages.length}
    itemSize={120}
    width="100%"
  >
    {({index, style}) => (<div style={style}>
        <MessageBubble {...messages[index]} />
      </div>
    )}
  </FixedSizeList>
);

使用 viewport 元标签控制缩放
输入框增加 @media (hover: none) 处理触摸反馈
消息气泡最小宽度设置为 min-width: 0 避免溢出

现象：主题切换时消息气泡短暂显示默认样式
解决：在 ThemeProvider 顶层添加 CSS 重置样式

现象：同时渲染大量消息时动画掉帧
解决：使用will-change: opacity 属性预提示浏览器

现象：API 返回内容可能包含恶意脚本
解决：使用dompurify 对 Markdown 内容进行消毒