一、问题背景与核心挑战

在接入DeepSeek等AI模型后，前端开发者面临一个典型场景：模型生成的回复中包含普通文本与”深度思考”（DeepThink）模块，两者需要差异化展示。例如普通回答显示为常规段落，而”深度思考”部分需突出显示（如背景色、边框、图标等）。技术挑战在于如何精准识别这类内容并应用独立样式。

1.1 数据结构差异

DeepSeek返回的JSON数据通常包含结构化字段，例如：

{
  "response": {
    "text": "这是普通回答内容...",
    "deepThink": {
      "content": "这是深度思考内容，包含逻辑推导过程...",
      "confidence": 0.95
    }
  }
}

关键点在于deepThink字段的存在性，这成为前端样式控制的触发点。

1.2 渲染逻辑差异

普通文本与深度思考内容的展示需求不同：

• 普通文本：单栏流式布局
• 深度思考：需独立容器、可能包含多级标题、代码块等复杂结构

二、前端实现方案

2.1 数据层处理

2.1.1 接口响应拦截

通过Axios等库的响应拦截器预处理数据：

axios.interceptors.response.use(response => {
  const data = response.data;
  if (data.response?.deepThink) {
    // 标记需要特殊渲染的数据
    data.hasDeepThink = true;
  }
  return data;
});

2.1.2 状态管理

在Redux/Vuex中维护deepThinkVisible状态，控制样式切换：

// Redux reducer示例
const uiReducer = (state = {}, action) => {
  switch (action.type) {
    case 'TOGGLE_DEEP_THINK_STYLE':
      return { ...state, deepThinkExpanded: action.payload };
    default:
      return state;
  }
};

2.2 样式实现方案

2.2.1 CSS方案对比

方案	优点	缺点
BEM命名法	结构清晰，易于维护	需要预先定义所有样式类
CSS Modules	局部作用域，避免冲突	需构建工具支持
Tailwind CSS	实用类优先，开发效率高	类名冗长，定制性受限

推荐方案：采用CSS Modules + BEM混合模式

/* DeepThink.module.css */
.deepThinkContainer {
  @apply bg-gray-50 border border-blue-200 rounded-lg p-4 mb-4;
}
.deepThinkTitle {
  @apply text-lg font-semibold text-blue-800 mb-2 flex items-center;
}
.deepThinkIcon {
  @apply w-5 h-5 mr-2 fill-current;
}

2.2.2 动态样式注入

通过JavaScript动态计算样式：

function applyDeepThinkStyles(element) {
  const styles = window.getComputedStyle(element);
  if (styles.getPropertyValue('--is-deep-think') === 'true') {
    element.classList.add('deep-think-active');
  }
}

2.3 组件化实现

2.3.1 React示例

const DeepThinkDisplay = ({ content }) => {
  const [isExpanded, setIsExpanded] = useState(false);
  return (
    <div className={styles.deepThinkContainer}>
      <div 
        className={styles.deepThinkHeader}
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <DeepThinkIcon />
        <span>深度思考</span>
        <ChevronIcon direction={isExpanded ? 'up' : 'down'} />
      </div>
      {isExpanded && (
        <div className={styles.deepThinkContent}>
          <MarkdownRenderer content={content} />
        </div>
      )}
    </div>
  );
};

2.3.2 Vue示例

<template>
  <div class="deep-think" :class="{ 'expanded': isExpanded }">
    <div class="header" @click="isExpanded = !isExpanded">
      <icon-deep-think />
      <span>深度思考</span>
      <icon-chevron :direction="isExpanded ? 'up' : 'down'" />
    </div>
    <div class="content" v-show="isExpanded">
      <markdown :content="content" />
    </div>
  </div>
</template>
<style scoped>
.deep-think {
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  /* ...其他样式 */
}
</style>

三、性能优化策略

3.1 样式计算优化

• 使用ResizeObserver监听容器变化而非轮询
• 对深度思考内容实施虚拟滚动（当内容较长时）

3.2 渲染优化

// 使用React.memo避免不必要的重渲染
const MemoizedDeepThink = React.memo(DeepThinkDisplay);
// Vue中的v-once指令（当内容不常变化时）
<div v-once v-html="staticContent"></div>

3.3 样式加载策略

• 关键CSS内联
• 非关键CSS异步加载
• 使用prefers-reduced-motion媒体查询适配不同用户需求

四、无障碍设计

4.1 ARIA属性应用

<div class="deep-think" role="region" aria-labelledby="dt-header">
  <h3 id="dt-header">深度思考</h3>
  <div aria-live="polite">
    <!-- 动态内容 -->
  </div>
</div>

4.2 键盘导航

• 实现Tab键聚焦顺序
• 支持Enter键展开/折叠

五、测试与验证

5.1 单元测试示例

test('DeepThink组件应正确渲染展开状态', () => {
  render(<DeepThinkDisplay content="test" />);
  const header = screen.getByText('深度思考');
  fireEvent.click(header);
  expect(screen.getByText('test')).toBeInTheDocument();
});

5.2 视觉回归测试

使用Cypress等工具验证样式一致性：

it('应显示正确的深度思考样式', () => {
  cy.visit('/test-page');
  cy.get('.deep-think-container')
    .should('have.css', 'background-color', 'rgb(243, 244, 246)');
});

六、进阶方案

6.1 主题化支持

通过CSS变量实现主题切换：

:root {
  --dt-bg: #f3f4f6;
  --dt-border: #e5e7eb;
}
[data-theme="dark"] {
  --dt-bg: #1f2937;
  --dt-border: #374151;
}

6.2 动画效果

使用CSS Transition实现平滑展开：

.deep-think-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.expanded .deep-think-content {
  max-height: 1000px; /* 足够大的值 */
}

七、常见问题解决方案

7.1 样式冲突

• 使用CSS-in-JS方案（如styled-components）
• 增加样式命名空间（如.ds-deep-think）

7.2 动态内容高度计算

function calculateContentHeight(element) {
  element.style.height = 'auto';
  const height = element.scrollHeight;
  element.style.height = '0';
  return height;
}

7.3 移动端适配

@media (max-width: 768px) {
  .deep-think-container {
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 0;
  }
}

通过上述方案，开发者可以构建出既符合设计要求又具备良好性能的深度思考内容展示模块。实际实现时需根据项目具体架构和技术栈选择最适合的组合方案。