# @desource/context7-widget-svelte 中文文档
规范地址：https://npmcn.com/package/%40desource/context7-widget-svelte/
版本：0\.2\.3
npm 元数据更新时间：2026-10-31T16:12:24.420Z
中文译文更新时间：2026-11-12T01:41:01.411Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40desource/context7-widget-svelte
原文对照：https://npmcn.com/package/%40desource/context7-widget-svelte/?lang=original
项目主页：https://github.com/DeSource-Labs/context7-widget/tree/main/packages/svelte#readme
源码仓库：https://github.com/DeSource-Labs/context7-widget
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：101 kB，17 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：svelte ^5\.20\.0
- 首次发布：2026-09-09T22:04:37.046Z
- 最新版本发布：2026-10-31T16:12:24.009Z
- 近 30 天下载量：16708（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 5 个）
## 中文简介
Svelte 5 组件和可自定义上下文7 文档聊天部件的活性控制器.
## 安装
```sh
npm install @desource/context7-widget-svelte
```
也可以使用：`pnpm add @desource/context7-widget-svelte`、`yarn add @desource/context7-widget-svelte`、`bun add @desource/context7-widget-svelte`
## README
# @ desource/context7-widget- svelte (英语)
[](https://www.npmjs.com/package/@desource/context7-widget-svelte) [](https://codecov.io/gh/DeSource-Labs/context7-widget) [](https://sonarcloud.io/summary/new_code?id=DeSource-Labs_context7-widget) [](https://context7.com/desource-labs/context7-widget) [](https://deepwiki.com/DeSource-Labs/context7-widget) [](https://github.com/DeSource-Labs/context7-widget/blob/main/LICENSE)
背景7 文档在您可以为您的 Svelte 应用程序样式的部件中解答 . 使用您自己的颜色、 类型和触发内容, 有 Svelte 5 片段, 可绑定 状态和反应控制.
## 为什么要使用这个部件 ?
上下文7提供了其文件部件并免费托管了 AI 答案 。 这个项目 围绕该服务添加自定义接口 .
官方背景7部件提供了基本的视觉设置. 这个版本让你 将助手装入精心设计的站点并添加聊天细节访问者 每天使用:多行问题、可复制代码、停止、重试和滚动 这使得他们控制.
[升级已存在的上下文7 脚本](https://github.com/DeSource-Labs/context7-widget#existing-context7-widget-user) 或使用下面具有相同库和域设置的本地组件. 对于新网站,请向参观者提供一种方法,以探索您图书馆的能力和 问如何是起起起. Svelte 手柄渲染; 核心套件共享聊天 发动机、运输、Markdown和布局辅助工具.
## 开始前
使用您在背景7上声称的图书馆 。 在其 **管理 – 聊天** 设置, 启用部件, 将您的站点域添加到允许的域并保存 . 替换 `/owner/repo` 以该图书馆的编号为例。 图书馆 仅索引无法在您的网站上聊天 . 见 [背景7 的部件设置](https://context7.com/docs/howto/chat-widget)。 。 。 .
## 安装
```bash
npm install @desource/context7-widget-svelte
```
一次导入部件样式表 :
```ts
import '@desource/context7-widget-svelte/styles.css';
```
## 实例
### 构成部分
```svelte
console.log(detail.question)}
/>
```
`customTrigger` 支持四种模式: 为内置发射器省略, 通过 `true` 用于Svelte 管理的按钮,通过一个元素 ID 或 CSS 选择器作为外部触发器,或通过一个 `Element`。使用 Svelte 5 片段自定义管理下的触发器 :
```svelte
{#snippet trigger({ label })}
? {label}
{/snippet}
```
组件绑定曝光 `open`, (中文(简体) ), `close`, (中文(简体) ), `toggle`, (中文(简体) ), `send`, (中文(简体) ), `cancel`, (中文(简体) ), `retry`, (中文(简体) ), `reset`, (中文(简体) ), `isOpen`, (中文(简体) ), `isBusy`, (中文(简体) ), `getMessages`,以及 `subscribe`。 。 。 .
### 反应控制器
`createContext7Widget` 可以通过 `widgetId`数字 :
```svelte
{docs.messages.length} messages
```
控制器暴露出反应性 `element`, (中文(简体) ), `isOpenState`, (中文(简体) ), `isBusyState`,以及 `messages` 获取器和全部必须API. `mount(overrides)` 创建或更新一个自有部件; `update(options)` 应用直播选项而不替换它.
## 自定义
支持每个共同选项: `library`, (中文(简体) ), `theme`, (中文(简体) ), `preset`, (中文(简体) ), `position`, (中文(简体) ), `color`, (中文(简体) ), `customTrigger`, (中文(简体) ), `backdrop`, (中文(简体) ), `closeOnOutsideClick`, (中文(简体) ), `defaultOpen`, (中文(简体) ), `initialMessage`, (中文(简体) ), `labels`, (中文(简体) ), `launcherLabel`, (中文(简体) ), `launcherVariant`, (中文(简体) ), `linkBaseUrl`, (中文(简体) ), `panelHeight`, (中文(简体) ), `panelWidth`, (中文(简体) ), `placeholder`, (中文(简体) ), `title`,以及 `widgetId`。 。 。 .
使用 `labels` 用于本地化可见和辅助文本。 相对 Markdown 链接解析与上下文 7 库页面相对,除非 `linkBaseUrl` 提供另一个文件来源.
该组件使原生斯维尔特光DOM. 样式公开 `part` 下面的属性 `.context7-widget`,并在此根上设置 CSS 变量:
```css
.context7-widget {
--c7-accent: #7c3aed;
--c7-font-family: Inter, system-ui, sans-serif;
}
.context7-widget [part~='panel'] {
border-color: color-mix(in srgb, var(--c7-accent), transparent 65%);
}
.context7-widget-trigger {
--c7-trigger-background: #7c3aed;
--c7-trigger-radius: 10px;
}
```
回调道具是 `onReady`, (中文(简体) ), `onOpen`, (中文(简体) ), `onClose`, (中文(简体) ), `onCancel`, (中文(简体) ), `onQuestion`, (中文(简体) ), `onFirstToken`, (中文(简体) ), `onAnswer`, (中文(简体) ), `onAnswerComplete`, (中文(简体) ), `onToolCall`, (中文(简体) ), `onToolResult`,以及 `onError`。消费者召回失败的报告不会损坏部件状态或跳过状态的听众.
## UX 与无障碍
作曲者支持多行输入: 输入发送并 Shift+Enter 插入一行新行. 在流出过程中, Send 成为启用的 Stop 动作 。 已完成的答案和代码块有明确的复制动作,错误会暴露重试,并取消保留部分答案. 阅读器-意识滚动只跟随新输出,而对话则停留在底部附近.
触发同步 `aria-controls`, (中文(简体) ), `aria-expanded`,以及 `aria-haspopup`. 居中对话框陷阱焦点,隔离背景内容,并锁定页面滚动;角板和锚板仍然是非模式的。 外部触发属性在卸载后被还原.
## 数据流动和隐私
浏览器直接发送库 ID 和对话信件到 `https://context7.com/api/v2/widget/chat`Desource Labs不代理聊天内容. 该套件没有添加分析,饼干,或持续的浏览器存储. 不发送机密或敏感个人数据;审查后端处理和保留的背景7政策.
## 包装
软件包使用 Svelte 5 runes 和 官方 `svelte` 出口条件。 进口是SSR-安全;DOM工作只从组件挂载或明确控制器开始 `mount()`. 斯维尔特和 `@desource/context7-widget/kit` 仍然是消费者退化的外部依赖。 样式是分开的,而摇树元数据只标出CSS作为副作用.
## 相关软件包
- [`@desource/context7-widget`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/core) 提供浏览器自定义元素,滴入脚本,TypeScript帮助器,以及共享的无头引擎.
- [`@desource/context7-widget-vue`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/vue) 提供本地 Vue 3 组件,可堆肥,插件默认,以及自定义触发槽.
- [`@desource/context7-widget-nuxt`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/nuxt) 为 Nuxt 3 和 4 添加自动导入,自动样式和全应用程序默认值.
- [`@desource/context7-widget-react`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/react) 提供本地反应组件,控制开口状态,程序钩,以及自定义触发器.
- [`@desource/context7-widget-angular`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/angular) 提供独立的Angular组件,信号,应用程序默认,以及可注射控制.
## 常见问题
### @desource/context7-widget-svelte 是什么？
Svelte 5 组件和可自定义上下文7 文档聊天部件的活性控制器\.
### 如何安装 @desource/context7-widget-svelte？
在项目目录运行 npm install @desource/context7-widget-svelte，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：svelte（^5\.20\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @desource/context7-widget-svelte 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @desource/context7-widget-svelte 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @desource/context7-widget-svelte 可以商用吗？
@desource/context7-widget-svelte 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @desource/context7-widget-svelte 的下载量有多少？
根据 npm 官方下载统计，@desource/context7-widget-svelte 在 2026/10/12 – 2026/11/10 这 30 天内被下载 16,708 次，日均约 557 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @desource/context7-widget-svelte 还在维护吗？
最新版本 0\.2\.3 发布于 2026/11/01（11 天前）；至今共发布 5 个版本，其中过去 12 个月发布了 5 个；首次发布于 2026/09/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。