@king-design/vue 3.7.0 → 3.8.0-beta.0

package/components/xmarkdown/markdown/codeBlockRenderer.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 代码块自定义渲染
+ */
+import type { XMarkdownRenderOptions, XMarkdownRenderedBlockType } from './types';
+/**
+ * 使用自定义代码块渲染器
+ */
+export declare function renderCustomCodeBlock(source: string, info: string, blockType: XMarkdownRenderedBlockType, options: XMarkdownRenderOptions): import("./renderTree").XMarkdownRenderTreeIslandNode | null;

package/components/xmarkdown/markdown/codeBlockRenderer.js

@@ -0,0 +1,52 @@
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+/**
+ * 代码块自定义渲染
+ */
+import { normalizeLanguage } from './highlight';
+import { createIslandNode } from './renderTree';
+/**
+ * 使用自定义代码块渲染器
+ */
+export function renderCustomCodeBlock(source, info, blockType, options) {
+  var context = createCodeBlockRenderContext(source, info, blockType, options);
+  var renderer = resolveCodeBlockRenderer(context, options.codeBlockRenderers);
+  if (!renderer) return null;
+  var rendered = renderer(context);
+  if (rendered === undefined) return null;
+  return createIslandNode(rendered, true);
+}
+/**
+ * 创建代码块渲染上下文
+ */
+function createCodeBlockRenderContext(source, info, blockType, options) {
+  var language = extractCodeBlockLanguage(info);
+  return {
+    source: source,
+    info: info,
+    language: language,
+    normalizedLanguage: normalizeLanguage(language),
+    blockType: blockType,
+    prefixCls: options.prefixCls || 'k',
+    streaming: !!options.streaming,
+    typing: !!options.typing
+  };
+}
+/**
+ * 按 fenced code 语言匹配自定义渲染器
+ */
+function resolveCodeBlockRenderer(context, renderers) {
+  if (!renderers) return;
+  if (context.language && renderers[context.language]) {
+    return renderers[context.language];
+  }
+  if (context.normalizedLanguage && renderers[context.normalizedLanguage]) {
+    return renderers[context.normalizedLanguage];
+  }
+}
+/**
+ * 提取 fenced code 的语言标记
+ */
+function extractCodeBlockLanguage(info) {
+  var _context;
+  return info ? _trimInstanceProperty(_context = info.split(/\s+/, 1)[0]).call(_context).toLowerCase() : '';
+}

package/components/xmarkdown/markdown/codeblock.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 代码块渲染
+ */
+import type { XMarkdownRenderOptions } from './types';
+/**
+ * 渲染代码块
+ */
+export declare function renderCodeBlock(source: string, info: string, options: XMarkdownRenderOptions, env?: any): import("./renderTree").XMarkdownRenderTreeElementNode | import("./renderTree").XMarkdownRenderTreeIslandNode;

package/components/xmarkdown/markdown/codeblock.js

@@ -0,0 +1,74 @@
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+/**
+ * 代码块渲染
+ */
+import { _$ } from '../../../i18n';
+import { highlightCode, normalizeLanguage } from './highlight';
+import { renderCustomCodeBlock } from './codeBlockRenderer';
+import { createElementNode, createKeyGenerator, parseHtmlFragment } from './renderTree';
+var COPY_LABEL = _$('复制代码');
+/**
+ * 渲染代码块
+ */
+export function renderCodeBlock(source, info, options, env) {
+  var _context;
+  var customBlock = renderCustomCodeBlock(source, info, 'code', options);
+  if (customBlock) return customBlock;
+  var rawLanguage = info ? _trimInstanceProperty(_context = info.split(/\s+/, 1)[0]).call(_context).toLowerCase() : '';
+  var normalizedLanguage = normalizeLanguage(rawLanguage);
+  var label = rawLanguage || _$('纯文本');
+  var shouldShowToolbar = options.showCodeHeader !== false;
+  var prefixCls = options.prefixCls || 'k';
+  var blockId = registerRenderedBlock(env, 'code', source, label);
+  var nextKey = createKeyGenerator("xmarkdown-code-" + (blockId || 'tail'));
+  var bodyChildren = parseHtmlFragment(highlightCode(source, normalizedLanguage), nextKey);
+  var children = shouldShowToolbar ? [createElementNode('div', {
+    className: prefixCls + "-xmarkdown-code-toolbar"
+  }, [createElementNode('span', {
+    className: prefixCls + "-xmarkdown-code-language"
+  }, [], nextKey('code-language')), createElementNode('div', {
+    className: prefixCls + "-xmarkdown-code-actions"
+  }, [createElementNode('button', {
+    className: prefixCls + "-xmarkdown-toolbar-icon-button",
+    type: 'button',
+    title: COPY_LABEL,
+    'aria-label': COPY_LABEL,
+    'data-kpc-action': 'copy-code',
+    'data-kpc-feedback-mode': 'icon',
+    'data-kpc-default-title': COPY_LABEL,
+    'data-kpc-default-icon': prefixCls + "-icon-clone",
+    'data-kpc-feedback-icon': prefixCls + "-icon-check-outline"
+  }, [createElementNode('i', {
+    className: prefixCls + "-xmarkdown-toolbar-icon " + prefixCls + "-icon " + prefixCls + "-icon-clone",
+    'data-kpc-icon': 'true'
+  }, [], nextKey('copy-icon'))], nextKey('copy-button'))], nextKey('code-actions'))], nextKey('code-toolbar')), createElementNode('div', {
+    className: prefixCls + "-xmarkdown-code-body"
+  }, bodyChildren, nextKey('code-body'))] : bodyChildren;
+  if (shouldShowToolbar) {
+    children[0].children[0].children.push(createTextNode(label));
+  }
+  return createElementNode('div', {
+    className: prefixCls + "-xmarkdown-code-block",
+    'data-kpc-code-block': 'true',
+    'data-kpc-language': label,
+    'data-kpc-block-id': blockId
+  }, children, nextKey('code-block'));
+}
+/**
+ * 注册渲染后的代码块信息
+ */
+function registerRenderedBlock(env, type, source, language) {
+  if (env && typeof env.registerBlock === 'function') {
+    return env.registerBlock(type, source, language);
+  }
+  return '';
+}
+/**
+ * 创建文本节点
+ */
+function createTextNode(content) {
+  return {
+    type: 'text',
+    content: content
+  };
+}

package/components/xmarkdown/markdown/highlight.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 代码高亮
+ *
+ * 基于 highlight.js 实现代码块语法高亮。
+ */
+/**
+ * 注册支持的语法高亮语言
+ */
+export declare function registerHighlightLanguages(): void;
+/**
+ * 标准化语言名称（处理别名）
+ */
+export declare function normalizeLanguage(info: string): string;
+/**
+ * 代码高亮
+ */
+export declare function highlightCode(code: string, language: string): string;

package/components/xmarkdown/markdown/highlight.js

@@ -0,0 +1,83 @@
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+/**
+ * 代码高亮
+ *
+ * 基于 highlight.js 实现代码块语法高亮。
+ */
+import hljs from 'highlight.js/lib/core';
+import bash from 'highlight.js/lib/languages/bash';
+import css from 'highlight.js/lib/languages/css';
+import diff from 'highlight.js/lib/languages/diff';
+import go from 'highlight.js/lib/languages/go';
+import java from 'highlight.js/lib/languages/java';
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import markdown from 'highlight.js/lib/languages/markdown';
+import python from 'highlight.js/lib/languages/python';
+import sql from 'highlight.js/lib/languages/sql';
+import typescript from 'highlight.js/lib/languages/typescript';
+import xml from 'highlight.js/lib/languages/xml';
+import yaml from 'highlight.js/lib/languages/yaml';
+/** 语言别名映射 */
+var LANGUAGE_ALIAS_MAP = {
+  html: 'xml',
+  js: 'javascript',
+  md: 'markdown',
+  py: 'python',
+  shell: 'bash',
+  sh: 'bash',
+  ts: 'typescript',
+  yml: 'yaml',
+  zsh: 'bash'
+};
+/**
+ * 注册支持的语法高亮语言
+ */
+export function registerHighlightLanguages() {
+  hljs.registerLanguage('bash', bash);
+  hljs.registerLanguage('css', css);
+  hljs.registerLanguage('diff', diff);
+  hljs.registerLanguage('go', go);
+  hljs.registerLanguage('java', java);
+  hljs.registerLanguage('javascript', javascript);
+  hljs.registerLanguage('json', json);
+  hljs.registerLanguage('markdown', markdown);
+  hljs.registerLanguage('python', python);
+  hljs.registerLanguage('sql', sql);
+  hljs.registerLanguage('typescript', typescript);
+  hljs.registerLanguage('xml', xml);
+  hljs.registerLanguage('yaml', yaml);
+}
+/**
+ * 标准化语言名称（处理别名）
+ */
+export function normalizeLanguage(info) {
+  var _context;
+  var language = info ? _trimInstanceProperty(_context = info.split(/\s+/, 1)[0]).call(_context).toLowerCase() : '';
+  return LANGUAGE_ALIAS_MAP[language] || language;
+}
+/**
+ * 代码高亮
+ */
+export function highlightCode(code, language) {
+  var normalizedLanguage = language && hljs.getLanguage(language) ? language : '';
+  try {
+    if (!normalizedLanguage) {
+      return "<pre class=\"hljs\"><code class=\"hljs\">" + escapeHtml(code) + "</code></pre>";
+    }
+    var highlighted = hljs.highlight(code, {
+      language: normalizedLanguage,
+      ignoreIllegals: true
+    });
+    var languageClass = highlighted.language ? " language-" + highlighted.language : '';
+    return "<pre class=\"hljs\"><code class=\"hljs" + languageClass + "\">" + highlighted.value + "</code></pre>";
+  } catch (e) {
+    return "<pre class=\"hljs\"><code class=\"hljs\">" + escapeHtml(code) + "</code></pre>";
+  }
+}
+/**
+ * 转义 HTML 特殊字符
+ */
+function escapeHtml(text) {
+  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}

package/components/xmarkdown/markdown/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Markdown 渲染模块
+ *
+ * 提供可配置的 Markdown 渲染功能，支持：
+ * - 代码语法高亮
+ * - 数学公式（KaTeX）
+ * - Mermaid 图表
+ * - 流式渲染优化
+ * - 自定义标签渲染器
+ */
+export type { XMarkdownFormulaDelimiter, XMarkdownRenderOptions, XMarkdownRenderResult, XMarkdownFormulaRuntime, XMarkdownPlugin, XMarkdownRenderTreeTransform, XMarkdownRenderTreeTransformContext, XMarkdownTagAttrs, XMarkdownTagAttrsGetter, XMarkdownTagRenderers, XMarkdownTagAttrsContext, XMarkdownTagRenderContext, XMarkdownCodeBlockRenderContext, XMarkdownCodeBlockRenderer, XMarkdownCodeBlockRenderers, XMarkdownRenderedIsland, XMarkdownRenderedBlock, XMarkdownRenderedBlockType, XMarkdownRenderedStableBlock, XMarkdownRegisterRenderedBlock, XMarkdownSourceBlock, StreamingMarkdownSegments, OpenFenceInfo, XMarkdownStreamingTailCache, } from './types';
+export type { XMarkdownRenderTreeNode, XMarkdownRenderTreeElementNode, XMarkdownRenderTreeIslandNode, XMarkdownRenderTreeTextNode, } from './renderTree';
+export { createMarkdownRenderer } from './renderer';
+export { containsFormulaSyntax, createStreamingTailCache, splitMarkdownForStreaming, renderMarkdownTail, escapeMarkdownHtml, } from './streaming';

package/components/xmarkdown/markdown/index.js

@@ -0,0 +1,14 @@
+/**
+ * Markdown 渲染模块
+ *
+ * 提供可配置的 Markdown 渲染功能，支持：
+ * - 代码语法高亮
+ * - 数学公式（KaTeX）
+ * - Mermaid 图表
+ * - 流式渲染优化
+ * - 自定义标签渲染器
+ */
+// 渲染器
+export { createMarkdownRenderer } from './renderer';
+// 流式渲染
+export { containsFormulaSyntax, createStreamingTailCache, splitMarkdownForStreaming, renderMarkdownTail, escapeMarkdownHtml } from './streaming';

package/components/xmarkdown/markdown/mermaid.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Mermaid 图表渲染
+ */
+import type { XMarkdownRenderOptions } from './types';
+/**
+ * 渲染 Mermaid 代码块
+ */
+export declare function renderMermaidBlock(source: string, info: string, options: XMarkdownRenderOptions, env?: any): import("./renderTree").XMarkdownRenderTreeElementNode | import("./renderTree").XMarkdownRenderTreeIslandNode;

package/components/xmarkdown/markdown/mermaid.js

@@ -0,0 +1,104 @@
+/**
+ * Mermaid 图表渲染
+ */
+import { _$ } from '../../../i18n';
+import { normalizeLanguage } from './highlight';
+import { renderCustomCodeBlock } from './codeBlockRenderer';
+import { createElementNode, createKeyGenerator, createTextNode } from './renderTree';
+var COPY_SOURCE_LABEL = _$('复制源码');
+var VIEW_SOURCE_LABEL = _$('源码');
+var VIEW_DIAGRAM_LABEL = _$('图表');
+var ZOOM_OUT_LABEL = _$('缩小');
+var ZOOM_IN_LABEL = _$('放大');
+var RESET_ZOOM_LABEL = _$('重置缩放');
+var DOWNLOAD_IMAGE_LABEL = _$('下载图片');
+var MERMAID_CANVAS_LABEL = _$('Mermaid 图表');
+/**
+ * 渲染 Mermaid 代码块
+ */
+export function renderMermaidBlock(source, info, options, env) {
+  var customBlock = renderCustomCodeBlock(source, info, 'mermaid', options);
+  if (customBlock) return customBlock;
+  var label = normalizeLanguage(info) || 'mermaid';
+  var prefixCls = options.prefixCls || 'k';
+  var blockId = registerRenderedBlock(env, 'mermaid', source, label);
+  var nextKey = createKeyGenerator("xmarkdown-mermaid-" + (blockId || 'tail'));
+  return createElementNode('div', {
+    className: prefixCls + "-xmarkdown-mermaid-block",
+    'data-kpc-mermaid': 'true',
+    'data-kpc-render-state': 'idle',
+    'data-kpc-view': 'diagram',
+    'data-kpc-language': label,
+    'data-kpc-block-id': blockId,
+    'data-kpc-scale': '1'
+  }, [createElementNode('div', {
+    className: prefixCls + "-xmarkdown-code-toolbar"
+  }, [createElementNode('span', {
+    className: prefixCls + "-xmarkdown-code-language"
+  }, [createTextNode('Mermaid')], nextKey('language')), createElementNode('div', {
+    className: prefixCls + "-xmarkdown-code-actions"
+  }, [createElementNode('div', {
+    className: prefixCls + "-xmarkdown-toolbar-toggle-group"
+  }, [createToggleButton(prefixCls, 'set-mermaid-view-diagram', VIEW_DIAGRAM_LABEL, true, nextKey('toggle-diagram')), createToggleButton(prefixCls, 'set-mermaid-view-source', VIEW_SOURCE_LABEL, false, nextKey('toggle-source'))], nextKey('toggle-group')), createElementNode('div', {
+    className: prefixCls + "-xmarkdown-toolbar-action-group"
+  }, [createIconButton(prefixCls, 'zoom-mermaid-out', ZOOM_OUT_LABEL, 'zoom-out', undefined, nextKey('zoom-out')), createIconButton(prefixCls, 'reset-mermaid-zoom', RESET_ZOOM_LABEL, 'refresh', undefined, nextKey('reset')), createIconButton(prefixCls, 'zoom-mermaid-in', ZOOM_IN_LABEL, 'zoom-in', undefined, nextKey('zoom-in')), createIconButton(prefixCls, 'download-mermaid', DOWNLOAD_IMAGE_LABEL, 'download', 'check-outline', nextKey('download')), createIconButton(prefixCls, 'copy-mermaid', COPY_SOURCE_LABEL, 'clone', 'check-outline', nextKey('copy'))], nextKey('action-group'))], nextKey('actions'))], nextKey('toolbar')), createElementNode('div', {
+    className: prefixCls + "-xmarkdown-mermaid-body"
+  }, [createElementNode('div', {
+    className: prefixCls + "-xmarkdown-mermaid-canvas",
+    'data-kpc-mermaid-canvas': 'true'
+  }, [createElementNode('div', {
+    className: prefixCls + "-xmarkdown-mermaid-viewport",
+    'data-kpc-mermaid-viewport': 'true',
+    title: MERMAID_CANVAS_LABEL
+  }, [createElementNode('div', {
+    className: prefixCls + "-xmarkdown-mermaid-stage",
+    'data-kpc-mermaid-stage': 'true'
+  }, [createTextNode(_$('Mermaid 渲染中...'))], nextKey('stage'))], nextKey('viewport'))], nextKey('canvas')), createElementNode('pre', {
+    className: prefixCls + "-xmarkdown-mermaid-source"
+  }, [createElementNode('code', {
+    className: 'hljs language-mermaid'
+  }, [createTextNode(source)], nextKey('source-code'))], nextKey('source'))], nextKey('body'))], nextKey('block'));
+}
+/**
+ * 创建视图切换按钮
+ */
+function createToggleButton(prefixCls, action, label, selected, key) {
+  return createElementNode('button', {
+    className: prefixCls + "-xmarkdown-toolbar-toggle",
+    type: 'button',
+    'aria-label': label,
+    'aria-pressed': String(selected),
+    'data-kpc-action': action,
+    'data-kpc-selected': String(selected)
+  }, [createTextNode(label)], key);
+}
+/**
+ * 创建工具栏图标按钮
+ */
+function createIconButton(prefixCls, action, label, icon, feedbackIcon, key) {
+  var defaultIconClass = prefixCls + "-icon-" + icon;
+  var feedbackIconClass = feedbackIcon ? prefixCls + "-icon-" + feedbackIcon : defaultIconClass;
+  return createElementNode('button', {
+    className: prefixCls + "-xmarkdown-toolbar-icon-button",
+    type: 'button',
+    title: label,
+    'aria-label': label,
+    'data-kpc-action': action,
+    'data-kpc-feedback-mode': 'icon',
+    'data-kpc-default-title': label,
+    'data-kpc-default-icon': defaultIconClass,
+    'data-kpc-feedback-icon': feedbackIconClass
+  }, [createElementNode('i', {
+    className: prefixCls + "-xmarkdown-toolbar-icon " + prefixCls + "-icon " + defaultIconClass,
+    'data-kpc-icon': 'true'
+  }, [], key + "-icon")], key);
+}
+/**
+ * 注册渲染后的 Mermaid 块信息
+ */
+function registerRenderedBlock(env, type, source, language) {
+  if (env && typeof env.registerBlock === 'function') {
+    return env.registerBlock(type, source, language);
+  }
+  return '';
+}

package/components/xmarkdown/markdown/renderTree.d.ts

@@ -0,0 +1,54 @@
+import type { XMarkdownRenderOptions } from './types';
+export interface XMarkdownRenderTreeTextNode {
+    type: 'text';
+    content: string;
+}
+export interface XMarkdownRenderTreeElementNode {
+    type: 'element';
+    tag: string;
+    attrs: Record<string, any>;
+    children: XMarkdownRenderTreeNode[];
+    key?: string;
+}
+export interface XMarkdownRenderTreeIslandNode {
+    type: 'island';
+    value: any;
+    block: boolean;
+}
+export type XMarkdownRenderTreeNode = XMarkdownRenderTreeTextNode | XMarkdownRenderTreeElementNode | XMarkdownRenderTreeIslandNode;
+/**
+ * 创建节点 key 生成器
+ */
+export declare function createKeyGenerator(prefix?: string): (scope?: string) => string;
+/**
+ * 创建文本节点
+ */
+export declare function createTextNode(content: string): XMarkdownRenderTreeTextNode;
+/**
+ * 创建元素节点
+ */
+export declare function createElementNode(tag: string, attrs?: Record<string, any>, children?: XMarkdownRenderTreeNode[], key?: string): XMarkdownRenderTreeElementNode;
+/**
+ * 创建自定义渲染节点
+ */
+export declare function createIslandNode(value: any, block?: boolean): XMarkdownRenderTreeIslandNode;
+/**
+ * 清洗并解析 HTML 片段
+ */
+export declare function parseSanitizedHtmlFragment(html: string, options: XMarkdownRenderOptions, nextKey: (scope?: string) => string): XMarkdownRenderTreeNode[];
+/**
+ * 解析 HTML 片段为渲染树节点
+ */
+export declare function parseHtmlFragment(html: string, nextKey: (scope?: string) => string): XMarkdownRenderTreeNode[];
+/**
+ * 将渲染树节点转换为 VNode
+ */
+export declare function renderTreeNodes(nodes: XMarkdownRenderTreeNode[], options: XMarkdownRenderOptions): any[];
+/**
+ * 序列化渲染树节点
+ */
+export declare function serializeRenderTreeNodes(nodes: XMarkdownRenderTreeNode[]): string;
+/**
+ * 获取渲染树的纯文本内容
+ */
+export declare function getTextContent(nodes: XMarkdownRenderTreeNode[]): string;