2025跨平台Tauri桌面端ai系统 - 基于tauri2.0+vue3.5+deepseek+arco+openai搭建windows版流式输出Ai对话系统。

uni-app+deepseek-v3跨三端ai流式输出对话模板

实战跨平台Electron35+DeepSeek-V3搭建客户端AI模板

deepseek-v3+vue3.5网页版webai流式对话模板

运用技术

• 技术框架：vite^6.3.5+vue^3.5.15+vue-router^4.5.1
  
• 大模型框架：DeepSeek-V3-0324 + OpenAI
  
• 跨平台框架：tauri^2.5.0
  
• 组件库：arco-design^2.57.0 (字节桌面端组件库)
  
• 状态管理：pinia^3.0.3
  
• 本地缓存：pinia-plugin-persistedstate^4.3.0
  
• 高亮插件：highlight.js^11.11.1
  
• markdown插件：markdown-it

项目功能性

1. 基于Tauri2.0接入DeepSeek-V3，体积小、性能优、效果丝滑
   
2. 封装多窗口管理、支持暗黑+浅色主题模式、展开/收缩侧边栏
   
3. 支持各种代码高亮效果、易于展示分享代码片段
   
4. 支持上下文多轮对话、提示词生成图片及预览功能
   
5. 支持在浏览器打开会话里面的链接
   
6. 使用arco-design组件库，保证UI风格统一性

项目结构目录

入口配置main.js

/**
 * 渲染页面入口main.js
 * @author andy
 */

import { createApp } from "vue"
import App from "./App.vue"
import './style.scss'

// 引入插件配置
import Plugins from './plugins'

// 引入路由/状态管理
import Router from './router'
import Pinia from './pinia'

createApp(App)
.use(Plugins)
.use(Router)
.use(Pinia)
.mount("#app");

配置.env

# 项目名称
VITE_APPNAME = 'Tauri2-DeepSeek'

# 运行端口
VITE_PORT = 1420

# DeepSeek API配置
VITE_DEEPSEEK_API_KEY = 替换为你的 API Key
VITE_DEEPSEEK_BASE_URL = https://api.deepseek.com

项目布局模板

<script setup>
  import { appState } from '@/pinia/modules/app'

  import Titlebar from '@/layouts/components/titlebar/index.vue'
  import Sidebar from '@/layouts/components/sidebar/index.vue'

  const appstate = appState()
</script>

<template>
  <div class="vu__chatbot">
    <div class="vu__container" :style="{'--themeSkin': appstate.config.skin}">
      <div class="vu__layout flexbox flex-col">
        <!-- 导航栏 -->
        <Titlebar />

        <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>
  </div>
</template>

tauri2接入deepseek流式ai

const completion = await openai.chat.completions.create({
  // 单一会话
  messages: [ {role: 'user', content: editorValue} ],
  // 多轮会话
  // messages: props.multiConversation ? historySession.value : [{role: 'user', content: editorValue}],
  model: 'deepseek-chat',
  stream: true, // 流式输出
  max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096)
  temperature: 0.4, // 严谨采样 越低越严谨(默认1)
})

// 使用数组存储chunk内容，提高拼接效率
let chunks = []
let lastUpdate = 0

// 处理流式输出
for await (const chunk of completion) {
  const content = chunk.choices[0]?.delta?.content || ''
  if(content) {
    chunks.push(content)
    // 限制更新频率：每100ms最多更新一次
    const now = Date.now()
    if (now - lastUpdate > 100) {
      sessionstate.updateSession(botKey, {content: chunks.join('')})
      lastUpdate = now
      // 滚动最底部
      if (sessionstate.reachBottom) {
        props.scrollBottom()
      }
    }
  }
  if(chunk.choices[0]?.finish_reason === 'stop') {
    sessionstate.loading = false
    // 确保最终内容完整更新
    sessionstate.updateSession(botKey, {content: chunks.join(''), loading: false})
    if (sessionstate.reachBottom) {
      props.scrollBottom()
    }
  }
}

作者：xiaoyan2017
链接：https://www.cnblogs.com/xiaoyan2017/p/18932240
来源：博客园
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。