Vite7+Vue3+DeepSeek-R1 流式 AI 聊天系统实战

布局模板

主布局包含侧边栏与主面板区域，利用 Vue Router 实现路由视图的动态加载。

<script setup>
import Sidebar from '@/layouts/components/sidebar/index.vue'
</script>

<template>
  <div class="vu__container">
    <div class="vu__layout flexbox flex-col">
      <div class="vu__layout-body flex1 flexbox">
        <!-- 侧边区域 -->
        <Sidebar />
        <!-- 主面板区域 -->
        <div class="vu__layout-main flex1">
          <router-view v-slot="{ Component, route }">
            <keep-alive>
              <component :is="Component" :key="route.path" />
            </keep-alive>
          </router-view>
        </div>
      </div>
    </div>
  </div>
</template>

深度思考模式实现

通过判断会话状态，动态切换 deepseek-chat 或 deepseek-reasoner 模型。

// 调用 deepseek 接口
const completion = await openai.chat.completions.create({
  // 多轮会话
  messages: props.multiConversation ? historySession.value : [{ role: 'user', content: editorValue }],
  // deepseek-chat 对话模型 / deepseek-reasoner 推理模型
  model: sessionState.thinkingEnabled ? 'deepseek-reasoner' : 'deepseek-chat',
  stream: true,
  max_tokens: 8192,
  temperature: 0.4
})

插件集成：Katex 与 Mermaid

在 Markdown 渲染器中注册自定义插件，支持数学公式与图表的实时渲染。

import { katex } from '@mdit/plugin-katex';
import 'katex/dist/katex.min.css';
import { markdownItMermaidPlugin } from '@/components/markdown/plugins/mermaidPlugin';

// 渲染流式输出 Markdown
<Markdown 
  :source="item.content" 
  :html="true" 
  :linkify="true" 
  :typographer="true" 
  :plugins="[[katex,{delimiters:'all'}],[markdownItMermaidPlugin,{...}]]" 
  @copy="onCopy"
/>

Mermaid 渲染逻辑

由于 Mermaid 需要 DOM 节点存在才能渲染，我们使用 MutationObserver 监听容器变化，并在缓存命中时直接返回 SVG。

export const markdownItMermaidPlugin = (md, options) => {
  const defaultFence = md.renderer.rules.fence;
  md.renderer.rules.fence = (...args) => {
    const [tokens, idx] = args;
    const token = tokens[idx];
    const lang = token.info.replace(/\[.*\]/, '').trim() || '';

    if (lang === 'mermaid') {
      const code = token.content.trim();
      const hash = generateHash(code);
      const uuid = `${hash}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;

      if (renderCache.has(hash)) {
        return `${defaultFence(...args)} <div>${renderCache.get(hash)}</div>`;
      }
      nextTickRender(uuid);
      return `${defaultFence(...args)} <div> <div>📊Mermaid 图表加载中...</div> </div>`;
    }
    return defaultFence(...args);
  };

  function nextTickRender(containerId) {
    if (document.getElementById(containerId)) {
      renderMermaidDiagram(containerId);
      return;
    }
    const observer = new MutationObserver((mutations, ob) => {
      const container = document.getElementById(containerId);
      if (container) {
        ob.disconnect();
        renderMermaidDiagram(containerId);
      }
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }

  async function renderMermaidDiagram(containerId) {
    const container = document.getElementById(containerId);
    if (!container) return;
    const code = decodeURIComponent(container.dataset.mermaidCode);
    const hash = container.dataset.mermaidHash;
    if (!code) return;

    if (typeof window.mermaid === 'undefined') {
      showError(container, 'Mermaid 库未加载!');
      return;
    }

    try {
      if (!window.mermaid.initialized) {
        window.mermaid.initialize({ startOnLoad: false, theme: 'default', securityLevel: 'loose' });
        window.mermaid.initialized = true;
      }
      let svg;
      if (renderCache.has(hash)) {
        svg = renderCache.get(hash);
      } else {
        const { isValid } = await verifyMermaid(code);
        if (!isValid) {
          showError(container, `<pre>渲染语法错误：\n${code}\n</pre>`);
          return;
        }
        const { svg: renderedSvg } = await window.mermaid.render(`mermaid-${containerId}`, code);
        svg = renderedSvg;
        renderCache.set(hash, svg);
      }
      container.innerHTML = svg;
      container.removeAttribute('data-mermaid-hash');
      container.removeAttribute('data-mermaid-code');
      if (options?.reachBottom) options?.onRender?.();
    } catch (error) {
      console.error('Mermaid 渲染失败:', error);
      showError(container, `<pre>渲染图表时出错：\n ${error.message}\n</pre>`);
    }
  }
};

API 调用与流式处理

对接 OpenAI SDK 兼容接口，处理流式响应中的普通内容与推理内容分离。

// 调用 deepseek 接口
const completion = await openai.chat.completions.create({
  messages: props.multiConversation ? historySession.value : [{ role: 'user', content: editorValue }],
  model: sessionState.thinkingEnabled ? 'deepseek-reasoner' : 'deepseek-chat',
  stream: true,
  max_tokens: 8192,
  temperature: 0.4
});

// 处理流式生成内容
for await (const chunk of completion) {
  if (sessionState.aborted) break;
  const content = chunk.choices[0]?.delta?.content || '';
  const reasoningContent = chunk.choices[0]?.delta?.reasoning_content || '';

  if (content || reasoningContent) {
    answerText += content;
    reasoningText += reasoningContent;
    // 限制更新频率：每 100ms 最多更新一次
    const now = Date.now();
    if (now - lastUpdate > 100) {
      lastUpdate = now;
      requestAnimationFrame(() => { /* ... */ });
    }
  }

  if (chunk.choices[0]?.finish_reason === 'stop') {
    // 结束处理
  }
}