先看运行效果：
任务栏显示，并支持右键菜单
按 Ctrl+Shift+Space 弹出聊天小窗（总在最前）
输入问题 → 逐字流式回复
关闭窗口后仍在系统托盘常驻，可随时热键召回
技术栈与思路
选择pywebview，主要是打包后的文件比较小，因为pywebview通过调用系统原生的 WebView 组件来渲染界面，原生内核一般是安装好的，所以不需要重复安装。
| 层级 | 选型 | 作用 |
|---|---|---|
| 桌面壳 | pywebview 4.x | 内嵌 Chromium，加载本地 HTML |
| 前端 | Vue3（CDN） | 数据绑定 + 流式渲染 |
| 托盘/热键 | pystray + keyboard | 常驻托盘 + 全局快捷键 |
| AI 请求 | openai 官方库 | 流式 SSE，逐句推送 |
| 打包 | pyinstaller | 单文件绿色 exe |
1. 安装依赖
# Python 3.8-3.11 虚拟环境 pip install pywebview pystray keyboard openai pyinstaller
2. 项目结构（单目录即可）
chat_desktop/ ├─ main.py # 入口（托盘+热键+webview） ├─ chat.html # Vue3 页面（CDN） ├─ chat.py # 与 OpenAI 通信的线程 └─ icon.ico # 托盘图标（16×16-64×64）
3. 核心代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>AI 聊天</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<style>
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f5f5f5;}
#app{height:100vh;display:flex;flex-direction:column;}
.header{background:#07c160;color:#fff;padding:8px 12px;font-size:14px;}
.body{flex:1;overflow-y:auto;padding:10px;}
.bubble{margin:6px 0;max-width:80%;padding:8px 12px;border-radius:6px;}
.user{align-self:flex-end;background:#e1ffc7;}
.ai{align-self:flex-start;background:#fff;}
.footer{display:flex;border-top:1px solid #ddd;background:#fff;}
.footer input{flex:1;border:none;padding:10px;font-size:14px;outline:none;}
.footer button{width:70px;border:none;background:#07c160;color:#fff;cursor:pointer;}
</style>
</head>
<body>
<div id="app">
<div class="header">AI 助手</div>
<div class="body">
<div v-for="(m,i) in messages" :key="i" class="bubble" :class="m.role">
<div v-html="m.text"/>
</div>
</div>
<div class="footer">
<input v-model="question" @keyup.enter="send" placeholder="输入消息…">
<button @click="send">发送</button>
</div>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const messages = ref([{role:'ai',text:'你好，我是 AI 助手～'}]);
const question = ref('');
const...点击查看剩余70%
{{collectdata}}
网友评论0