2026.4.10 星期五
一.pinia
首先安装 npm insatll pinia
1.核心三部分
State 存数据（data）
Getters 计算属性（computed）
Actions 方法/异步操作（methods）
2.基础配置
3.应用
要用直接从store里面获取
tsconfig.json
上面配置了noImplicitThis,下面的this才有items这个值
时间格式
2026-04-13T05:53:33.949Z 是ISO 8601 国际标准时间格式，代表一个精确到毫秒的 UTC（协调世界时）时间戳。
二.基于上下文的聊天
把一系列的信息以数组的形式messages传给sdk，就可以基于上下文聊天了。例如如下：
所以只需要把messages的形式改成数组（传数组），而不是单独只传一个content
目前是只传了一个content
步骤
要传入messages: role: 'xxx',content: 'xxx';的形式
改变类型
传值
重新启动，可以看到已经成功可以基于上下文聊天了。
三.路由守卫
四.优化应用功能
1.渲染markdown文本
我们发现，大模型返回的流式数据并没有按格式正确解析，所以我们要渲染markdown文本。
将markdown解析为html: markdown-it
markdown-it特点：
- 遵循 CommonMark 规范，同时添加语法扩展和增强功能（自动链接 URL，排版美化）
- 易于扩展：由于模块化的设计，用户可以方便地编写自定义插件或者使用社区提供的插件来扩展
markdown-it的功能。 - 快速且高效：
markdown-it被设计为快速和高效的解析器，能够处理大量的 Markdown 文本并将其转换为 HTML。
javascript
// 简单使用
import markdownit from 'markdown-it'
const md = markdownit()
const result = md.render('# markdown-it rulezz!')
// 使用插件
// 插件列表 https://www.npmjs.com/search?q=keywords:markdown-it-plugin
const md = markdownit .use(plugin1)
.use(plugin2, opts, ...)
.use(plugin3);插件列表 https://www.npmjs.com/search?q=keywords:markdown-it-plugin
库：vue-markdown-render
npm install vue-markdown-render --save
如图，效果已经出来了
但是问题是标题并没有显示对应的样式（tailwindcss对所有html元素进行了一个reset，移除默认样式）
使用插件：tailwind typography(提供美观的排版样式)
npm install -D @tailwindcss/typography
加上prose类
出现了一个scope的隔离问题
成功给标题设置格式
都可以自定义设置
prose-* 后缀的类，是用来统一调整整个排版区域的文本、标题、链接、代码块等元素的灰度色调，让 Markdown 渲染的内容和你的 UI 设计风格匹配。
可以自己设置喜欢的
也可以选大小。具体的自己看文档
2.实现语法高亮
怎样在markdown-it集成这个库？---> 用markdown-it-highlightjs插件markdown-it-highlightjs - npm
npm i markdown-it-highlightjs
可以自己选喜欢的导入。
也可以用import 'highlight.js/styles/github-dark.min.css'就是如下效果
3.打开对话自动下滑到最下方
scrollBy()方法 / scrollIntoView()方法 可以在mdn上面查找对应的方法
（1）获取MessageList的DOM的节点
获取他的实例，进而获取DOM节点
（2）使用scrollIntoView()方法
这样就可以实现点击会话自动滚到底部
4.输出内容的时候会自动滚动
将上一步分装好的方法加到发送信息函数里面和第一次创建里面,就可以实现自动滚动
为了提高性能,只有当返回的结果换行,他才会获取实例,向下滚动,如果高度没变,就不需要在执行移除。
5.支持图片上传
(1)在渲染进程选择和展示
使用file Input实现文件选择
<input type="file" accept=" image/* "
但是他的样式很丑，我们选择用另一个元素来手动触发file input的选择过程。
将原有的隐藏hidden,拿到他的DOM节点ref="fileInput",加上一个图片选择的icon。
想要 通过点击icon来选择图片。
上面成功拿到file对象，那么怎么把这个对象展示到输入框上面呢？可以用base64
使用FileRender来展示本地图片
开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个表示文件数据的 data: URL。
(2)将图片数据传递给主进程,调用LLM处理并返回
将图片复制到useData目录下
拷贝图片，放在useData目录下，返回一个新的路径
存放图片的数据信息
由上图知，已经复制路径成功。
LLM返回结果
必须按照格式把数据传给大模型
要拿到图片base64以及图片的格式mimetype
使用 mime-types 来获取对应的类型https://github.com/jshttp/mime-types
npm install mime-types
//以及安装他的类型文件npm i @types/mime-types --save-dev
如果是图片的话，把imagePath传过去，如果不是图片，正常传
现在的问题①发出去没有图片显示②LLM回答的不完整
千问模型
- 带
vl的模型 （如qwen-vl-plus-2025-05-07）：支持图片 ✅ - 不带
vl的模型 （如qwen-long、qwen-turbo）：不支持图片 ❌
显示图片
由于资源保护，electron无法访问所有本地文件，所以无法展示图片。
解决方法：electron中的protocol ，注册自定义协议并拦截基于现有协议的请求。
electron中net，快速构建response对象，返回内容
但是不知为什么没有成功，终端并没有打印protocol中的console，也并没有显示图片。
6.重构主进程不同模型处理的逻辑代码
之前是通过if else来处理不同模型对应的代码，但是随着模型增多，会显得冗余
通过抽象出一个类BaseProvider作为基类
OpenAIProvider和QianfanProvider作为子类
