2026.4.10 星期五

一.pinia

定义 Store | 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。

GitHub - markdown-it/markdown-it: Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed · GitHub

// 简单使用

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.实现语法高亮

highlight.js库

怎样在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来展示本地图片

FileReader.readAsDataURL()

开始读取指定的 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 ，注册自定义协议并拦截基于现有协议的请求。

protocol | Electron

electron中net，快速构建response对象，返回内容

但是不知为什么没有成功，终端并没有打印protocol中的console，也并没有显示图片。

6.重构主进程不同模型处理的逻辑代码

之前是通过if else来处理不同模型对应的代码，但是随着模型增多，会显得冗余

通过抽象出一个类BaseProvider作为基类

OpenAIProvider和QianfanProvider作为子类