@blueking/chat-x 0.0.9 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -186,7 +186,7 @@ ContentRender
186
186
  1. **语法自动补全**:`completeMarkdownSyntax` 在解析前补全未闭合的代码块、列表等,避免渲染异常
187
187
  2. **节流解析**:`parseMarkdownContent` 节流 5ms(leading + trailing),大幅降低流式输入时的解析开销
188
188
  3. **不完整状态保护**:当正在输入 LaTeX 命令(如 `$\fra...`)时保持之前的渲染结果,避免闪烁
189
- 4. **CSS contain 性能隔离**:`.markdown-content` 使用 `contain: layout style`,`.markdown-body` 使用 `contain: content`,减少重排影响范围
189
+ 4. **CSS contain 性能隔离**:`.ai-markdown-content` 使用 `contain: layout style`,`.ai-markdown-body` 使用 `contain: content`,减少重排影响范围
190
190
  5. **自动滚动**:每个 token 挂载后触发 `toScrollBottom()`(节流 100ms),与 `MessageContainer` 配合实现流式自动滚动
191
191
 
192
192
  ## 类型定义
@@ -29,7 +29,7 @@ props.content → completeMarkdownSyntax → md.parse → groupTokens → groupe
29
29
 
30
30
  status === 'error' → CommonErrorContent(:content)
31
31
 
32
- else → div.markdown-body[data-theme](contain: content)
32
+ else → div.ai-markdown-body[data-theme](contain: content)
33
33
 
34
34
  v-for groupedToken
35
35
 
@@ -134,23 +134,23 @@ props.content → completeMarkdownSyntax → md.parse → groupTokens → groupe
134
134
 
135
135
  ### 流式优化机制
136
136
 
137
- | 机制 | 实现 | 作用 |
138
- | ----------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
139
- | 极速节流 | `parseMarkdownContent` throttle **5ms**,leading + trailing | 每 5ms 最多解析一次,兼顾实时性与性能 |
140
- | Markdown 语法补全 | `completeMarkdownSyntax(content)` | 自动闭合代码块、行内代码、粗斜体、删除线、链接等未完成语法 |
141
- | LaTeX 防闪烁 | `isIncomplete=true` 且已有渲染结果 → **跳过本次更新** | 正在输入 LaTeX 命令时保持上一帧,避免闪白 |
142
- | 子组件 throttle | `handleTokenMounted` throttle 100ms | 限制子组件挂载后触发的滚动到底部频率 |
143
- | CSS contain | `.ai-markdown-content { contain: layout style }`<br>`.markdown-body { contain: content }` | 限制重排/重绘范围,减少流式渲染的布局开销 |
144
- | 渐显动画 | 每组首 token 追加 `.ai-blueking-markdown-fade-in` | 新内容块淡入,减少视觉跳跃感 |
137
+ | 机制 | 实现 | 作用 |
138
+ | ----------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
139
+ | 极速节流 | `parseMarkdownContent` throttle **5ms**,leading + trailing | 每 5ms 最多解析一次,兼顾实时性与性能 |
140
+ | Markdown 语法补全 | `completeMarkdownSyntax(content)` | 自动闭合代码块、行内代码、粗斜体、删除线、链接等未完成语法 |
141
+ | LaTeX 防闪烁 | `isIncomplete=true` 且已有渲染结果 → **跳过本次更新** | 正在输入 LaTeX 命令时保持上一帧,避免闪白 |
142
+ | 子组件 throttle | `handleTokenMounted` throttle 100ms | 限制子组件挂载后触发的滚动到底部频率 |
143
+ | CSS contain | `.ai-markdown-content { contain: layout style }`<br>`.ai-markdown-body { contain: content }` | 限制重排/重绘范围,减少流式渲染的布局开销 |
144
+ | 渐显动画 | 每组首 token 追加 `.ai-blueking-markdown-fade-in` | 新内容块淡入,减少视觉跳跃感 |
145
145
 
146
146
  ## 主题支持
147
147
 
148
- 组件通过 `data-theme` 属性和内联 CSS 变量覆盖来控制主题,默认为 `light`。引入完整版 `github-markdown.css`(同时包含 light/dark 定义),并通过内联变量强制指定主题色,避免受宿主页面 `@media (prefers-color-scheme)` 影响。
148
+ 组件通过 `data-theme` 属性和本地 `markdown-content.css`(由 GitHub Markdown 样式 vendoring 而来,类前缀为 `ai-markdown-body`)控制主题,默认为 `light`,避免受宿主页面 `@media (prefers-color-scheme)` 影响。
149
149
 
150
- - **Light 模式**(默认):`.markdown-body[data-theme="light"]`,内联 light 变量 + `color-scheme: light`
151
- - **Dark 模式**:`.markdown-body[data-theme="dark"]`,内联 dark 变量 + `color-scheme: dark`
150
+ - **Light 模式**(默认):`.ai-markdown-body[data-theme="light"]`,light 变量 + `color-scheme: light`
151
+ - **Dark 模式**:`.ai-markdown-body[data-theme="dark"]`,dark 变量 + `color-scheme: dark`
152
152
 
153
- > 根容器类名为 `.ai-markdown-content`(而非 `.markdown-content`),以避免与 `github-markdown-css` 库自身样式冲突。
153
+ > 外层包裹类名为 `.ai-markdown-content`,内层正文区为 `.ai-markdown-body`,避免与宿主或其他库的 `.markdown-body` 全局样式冲突。
154
154
 
155
155
  ## API
156
156
 
@@ -31,7 +31,7 @@ AI 思维链(Chain-of-Thought)推理过程展示组件。由**可点击标
31
31
  │ .ai-reasoning-message-content │
32
32
  │ <MarkdownContent> × content.length │
33
33
  │ (Error 时改为 CommonErrorContent) │
34
- │ .markdown-body { color: #979ba5 }(灰色文字) │
34
+ │ .ai-markdown-body { color: #979ba5 }(灰色文字) │
35
35
  └─────────────────────────────────────────────────┘
36
36
  ```
37
37
 
@@ -1,7 +1,7 @@
1
1
  <!-- AI SUMMARY -->
2
2
  ## 快速了解
3
3
 
4
- 说明通过 SCSS 变量(尺寸、颜色、z-index)与 CSS 类覆盖(chat-input、用户/助手消息、shortcut-btns、markdown-body、tool-btn 等)自定义主题。 含渐变边框 mixin、ai-markdown-fade-in 与弹窗过渡。暗色示例通过根 class 切换。组件随包引入样式,业务侧按需覆写。
4
+ 说明通过 SCSS 变量(尺寸、颜色、z-index)与 CSS 类覆盖(chat-input、用户/助手消息、shortcut-btns、ai-markdown-body、tool-btn 等)自定义主题。 含渐变边框 mixin、ai-markdown-fade-in 与弹窗过渡。暗色示例通过根 class 切换。组件随包引入样式,业务侧按需覆写。
5
5
 
6
6
  ### 关联组件
7
7
  - **chat-container** — 整体布局与侧栏
@@ -163,8 +163,8 @@ $selection-z-index: $shortcut-menu-z-index + 1;
163
163
 
164
164
  ```scss
165
165
  // Markdown 内容
166
- .markdown-content {
167
- .markdown-body {
166
+ .ai-markdown-content {
167
+ .ai-markdown-body {
168
168
  font-size: 14px;
169
169
  line-height: 1.6;
170
170
 
@@ -220,7 +220,7 @@ $selection-z-index: $shortcut-menu-z-index + 1;
220
220
  }
221
221
 
222
222
  // Markdown 内容
223
- .markdown-content .markdown-body {
223
+ .ai-markdown-content .ai-markdown-body {
224
224
  color: #e0e0e0;
225
225
 
226
226
  h1,
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": "2.0.0",
3
- "generatedAt": "2026-03-31T14:09:38.769Z",
3
+ "generatedAt": "2026-04-01T02:09:13.831Z",
4
4
  "domains": {
5
5
  "message": {
6
6
  "label": "消息展示",
@@ -1258,7 +1258,7 @@
1258
1258
  "slug": "theme",
1259
1259
  "category": "theme",
1260
1260
  "description": "`@blueking/chat-x` 使用 SCSS 变量和 CSS 类来控制样式,支持通过覆盖变量或样式来自定义主题。",
1261
- "aiSummary": "说明通过 SCSS 变量(尺寸、颜色、z-index)与 CSS 类覆盖(chat-input、用户/助手消息、shortcut-btns、markdown-body、tool-btn 等)自定义主题。 含渐变边框 mixin、ai-markdown-fade-in 与弹窗过渡。暗色示例通过根 class 切换。组件随包引入样式,业务侧按需覆写。",
1261
+ "aiSummary": "说明通过 SCSS 变量(尺寸、颜色、z-index)与 CSS 类覆盖(chat-input、用户/助手消息、shortcut-btns、ai-markdown-body、tool-btn 等)自定义主题。 含渐变边框 mixin、ai-markdown-fade-in 与弹窗过渡。暗色示例通过根 class 切换。组件随包引入样式,业务侧按需覆写。",
1262
1262
  "relatedComponents": [
1263
1263
  {
1264
1264
  "slug": "chat-container",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blueking/chat-x",
3
- "version": "0.0.9",
3
+ "version": "0.0.11",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/readme.md DELETED
File without changes