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

package/components/xmarkdown/useXMarkdownDisplay.js

@@ -0,0 +1,569 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _Promise from "@babel/runtime-corejs3/core-js/promise";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _Object$assign from "@babel/runtime-corejs3/core-js/object/assign";
+/**
+ * 内容显示逻辑
+ *
+ * 负责：
+ * - 打字动画效果
+ * - 流式渲染处理
+ * - Markdown 渲染和缓存
+ * - 数学公式运行时加载
+ */
+import { useInstance } from 'intact-vue-next';
+import { containsFormulaSyntax, createStreamingTailCache, createMarkdownRenderer, renderMarkdownTail, splitMarkdownForStreaming } from './markdown';
+export function useXMarkdownDisplay(getPrefixCls) {
+  var instance = useInstance();
+  var mounted = false;
+  // 打字动画状态
+  var typingTimer = null;
+  var lastCompletedContent = null;
+  var hasPendingCompletion = !!instance.get('loading') || !!instance.get('streaming');
+  var previousContent = instance.get('content');
+  var previousLoading = !!instance.get('loading');
+  var previousStreaming = !!instance.get('streaming');
+  // Markdown 渲染缓存
+  var lastStableMarkdownSource = '';
+  var lastStableMarkdownBlocks = [];
+  var lastStableMarkdownResult = {
+    nodes: [],
+    blocks: {}
+  };
+  var streamingTailCache = createStreamingTailCache();
+  var renderedBlockId = 0;
+  // 数学公式运行时
+  var formulaRuntime = null;
+  var formulaRuntimePromise = null;
+  // 渲染器实例
+  var renderer = createMarkdownRenderer(getRenderOptions());
+  /**
+   * 获取渲染配置
+   */
+  function getRenderOptions() {
+    return {
+      prefixCls: getPrefixCls(),
+      allowHtml: !!instance.get('allowHtml'),
+      showCodeHeader: instance.get('showCodeHeader') !== false,
+      enableMermaid: instance.get('enableMermaid') !== false,
+      enableFormula: instance.get('enableFormula') !== false,
+      formulaDelimiters: instance.get('formulaDelimiters'),
+      formulaMacros: instance.get('formulaMacros'),
+      sanitizeOptions: instance.get('sanitizeOptions'),
+      plugins: instance.get('plugins'),
+      tagAttrs: instance.get('tagAttrs'),
+      tagRenderers: instance.get('tagRenderers'),
+      codeBlockRenderers: instance.get('codeBlockRenderers'),
+      streaming: !!instance.get('streaming'),
+      typing: !!instance.get('typing'),
+      formulaRuntime: formulaRuntime,
+      normalizeRendererOutput: function normalizeRendererOutput(value) {
+        var normalize = instance.constructor.normalize;
+        return normalize ? normalize(value) : value;
+      }
+    };
+  }
+  /**
+   * 刷新渲染器
+   */
+  function refreshRenderer() {
+    renderer = createMarkdownRenderer(getRenderOptions());
+    resetMarkdownCache();
+  }
+  /**
+   * 设置显示内容
+   */
+  function setDisplayContent(value) {
+    if (instance.get('$displayContent') === value) return false;
+    instance.set('$displayContent', value);
+    syncRenderedMarkdown();
+    return true;
+  }
+  /**
+   * 设置打字动画状态
+   */
+  function setTypingActive(value) {
+    if (instance.get('$typingActive') === value) return;
+    instance.set('$typingActive', value);
+  }
+  /**
+   * 设置渲染结果
+   */
+  function setRenderedResult(stable, tailNodes, source) {
+    var _context;
+    instance.set({
+      $renderedStableNodes: stable.nodes,
+      $renderedTailNodes: tailNodes,
+      $renderedMarkdownSource: source,
+      $renderedBlocks: stable.blocks,
+      $renderedNodes: _concatInstanceProperty(_context = []).call(_context, stable.nodes, tailNodes)
+    });
+  }
+  /**
+   * 确保数学公式运行时已加载
+   */
+  function ensureFormulaRuntime(source) {
+    if (instance.get('enableFormula') === false || formulaRuntime || formulaRuntimePromise || !containsFormulaSyntax(source, instance.get('formulaDelimiters'))) {
+      return;
+    }
+    formulaRuntimePromise = _Promise.all([import('katex'), import('markdown-it-texmath'), import('katex/dist/katex.min.css')]).then(function (_ref) {
+      var katexModule = _ref[0],
+        texmathModule = _ref[1];
+      if (instance.$unmounted) return;
+      formulaRuntime = {
+        katex: katexModule.default || katexModule,
+        texmath: texmathModule.default || texmathModule
+      };
+      formulaRuntimePromise = null;
+      refreshRenderer();
+      syncRenderedMarkdown(true);
+    }).catch(function () {
+      formulaRuntimePromise = null;
+    });
+  }
+  /**
+   * 获取打字动画配置
+   */
+  function getTypingOptions() {
+    var typing = instance.get('typing');
+    if (typing && typeof typing === 'object') {
+      return {
+        interval: Math.max(typing.interval || 24, 16),
+        step: Math.max(typing.step || 2, 1)
+      };
+    }
+    return {
+      interval: 24,
+      step: 2
+    };
+  }
+  /**
+   * 停止打字动画
+   */
+  function stopTyping() {
+    if (typingTimer) {
+      clearTimeout(typingTimer);
+      typingTimer = null;
+    }
+    setTypingActive(false);
+  }
+  /**
+   * 重置 Markdown 缓存
+   */
+  function resetMarkdownCache() {
+    lastStableMarkdownSource = '';
+    lastStableMarkdownBlocks = [];
+    lastStableMarkdownResult = {
+      nodes: [],
+      blocks: {}
+    };
+    streamingTailCache = createStreamingTailCache();
+  }
+  /**
+   * 重置完成状态
+   */
+  function resetTypingComplete() {
+    lastCompletedContent = null;
+  }
+  /**
+   * 触发打字完成事件
+   */
+  function triggerTypingComplete(content) {
+    if (lastCompletedContent === content) return;
+    lastCompletedContent = content;
+    hasPendingCompletion = false;
+    instance.trigger('typingComplete', content);
+  }
+  /**
+   * 完成打字动画
+   */
+  function finishTyping(content) {
+    stopTyping();
+    syncRenderedMarkdown(true);
+    triggerTypingComplete(content);
+  }
+  /**
+   * 同步完成状态
+   */
+  function syncCompletionState() {
+    var content = instance.get('content');
+    var loading = !!instance.get('loading');
+    var streaming = !!instance.get('streaming');
+    if (content !== previousContent || loading && !previousLoading || streaming && !previousStreaming) {
+      hasPendingCompletion = true;
+    }
+    previousContent = content;
+    previousLoading = loading;
+    previousStreaming = streaming;
+  }
+  /**
+   * 判断是否应该触发 typingComplete 事件
+   */
+  function shouldEmitTypingComplete(content) {
+    return content.length > 0 || hasPendingCompletion;
+  }
+  /**
+   * 获取当前显示内容
+   */
+  function getDisplayedContent() {
+    return instance.get('$displayContent') || '';
+  }
+  /**
+   * 获取共享前缀
+   */
+  function getSharedPrefix(content) {
+    var displayedContent = getDisplayedContent();
+    if (!displayedContent || _startsWithInstanceProperty(content).call(content, displayedContent)) {
+      return displayedContent;
+    }
+    var i = 0;
+    while (i < displayedContent.length && i < content.length && displayedContent[i] === content[i]) {
+      i++;
+    }
+    return _sliceInstanceProperty(displayedContent).call(displayedContent, 0, i);
+  }
+  /**
+   * 立即渲染 Markdown
+   */
+  function renderMarkdownImmediately(source) {
+    lastStableMarkdownResult = renderStableMarkdown(source);
+    setRenderedResult(lastStableMarkdownResult, [], source);
+  }
+  /**
+   * 渲染 stable 区 Markdown
+   */
+  function renderStableMarkdown(source) {
+    if (source === lastStableMarkdownSource) {
+      return lastStableMarkdownResult;
+    }
+    var sourceBlocks = renderer.parseBlocks(source);
+    var renderedBlocks = reuseStableMarkdownBlocks(sourceBlocks);
+    lastStableMarkdownBlocks = renderedBlocks;
+    lastStableMarkdownSource = source;
+    lastStableMarkdownResult = mergeRenderedBlocks(renderedBlocks);
+    return lastStableMarkdownResult;
+  }
+  /**
+   * 复用 stable 区未变化的 block
+   */
+  function reuseStableMarkdownBlocks(sourceBlocks) {
+    var renderedBlocks = [];
+    var index = 0;
+    // 匹配复用的 block
+    while (index < sourceBlocks.length && index < lastStableMarkdownBlocks.length) {
+      var sourceBlock = sourceBlocks[index];
+      var renderedBlock = lastStableMarkdownBlocks[index];
+      if (!canReuseStableBlock(sourceBlock, renderedBlock)) break; // 如果不能复用，则跳出循环
+      renderedBlocks.push(renderedBlock);
+      index++;
+    }
+    // 渲染新增的 block
+    for (; index < sourceBlocks.length; index++) {
+      renderedBlocks.push(renderer.renderBlock(sourceBlocks[index], registerRenderedBlock));
+    }
+    return renderedBlocks;
+  }
+  /**
+   * 判断 block 是否可以直接复用
+   */
+  function canReuseStableBlock(sourceBlock, renderedBlock) {
+    return !!renderedBlock && sourceBlock.key === renderedBlock.key && sourceBlock.source === renderedBlock.source;
+  }
+  /**
+   * 注册代码块和 Mermaid 块元信息
+   */
+  function registerRenderedBlock(type, source, language) {
+    return "xmarkdown-block-" + renderedBlockId++;
+  }
+  /**
+   * 合并 stable block 的渲染结果
+   */
+  function mergeRenderedBlocks(renderedBlocks) {
+    var nodes = [];
+    var blocks = {};
+    renderedBlocks.forEach(function (block) {
+      nodes.push.apply(nodes, block.nodes);
+      _Object$assign(blocks, block.blocks);
+    });
+    return {
+      nodes: nodes,
+      blocks: blocks
+    };
+  }
+  /**
+   * 判断是否需要渐进式渲染
+   */
+  function shouldRenderMarkdownProgressively() {
+    return !!instance.get('streaming') || isTypingActive();
+  }
+  /**
+   * 渐进式渲染 Markdown
+   */
+  function renderMarkdownProgressively(source) {
+    var _splitMarkdownForStre = splitMarkdownForStreaming(source, streamingTailCache),
+      stableSource = _splitMarkdownForStre.stableSource,
+      tailText = _splitMarkdownForStre.tailText,
+      openFence = _splitMarkdownForStre.openFence;
+    var renderedStableResult = {
+      nodes: [],
+      blocks: {}
+    };
+    if (stableSource) {
+      renderedStableResult = renderStableMarkdown(stableSource);
+    } else if (lastStableMarkdownSource || lastStableMarkdownResult.nodes.length) {
+      resetMarkdownCache();
+    }
+    setRenderedResult(renderedStableResult, renderMarkdownTail(tailText, openFence, getRenderOptions()), source);
+  }
+  /**
+   * 同步 Markdown 渲染
+   */
+  function syncRenderedMarkdown(immediate) {
+    if (immediate === void 0) {
+      immediate = false;
+    }
+    var source = getDisplayedContent();
+    ensureFormulaRuntime(source);
+    if (!source) {
+      resetMarkdownCache();
+      setRenderedResult({
+        nodes: [],
+        blocks: {}
+      }, [], '');
+      return;
+    }
+    if (immediate || !shouldRenderMarkdownProgressively()) {
+      renderMarkdownImmediately(source);
+      return;
+    }
+    renderMarkdownProgressively(source);
+  }
+  /**
+   * 开始打字动画
+   */
+  function startTyping(immediate) {
+    if (immediate === void 0) {
+      immediate = false;
+    }
+    if (typingTimer) return;
+    if (immediate) {
+      setTypingActive(true);
+      runTyping();
+      return;
+    }
+    var _getTypingOptions = getTypingOptions(),
+      interval = _getTypingOptions.interval;
+    setTypingActive(true);
+    typingTimer = window.setTimeout(function () {
+      typingTimer = null;
+      runTyping();
+    }, interval);
+  }
+  /**
+   * 运行打字动画
+   */
+  function runTyping() {
+    syncCompletionState();
+    var content = instance.get('content');
+    var nextValue = content === undefined || content === null ? '' : String(content);
+    // 加载状态处理
+    if (instance.get('loading')) {
+      stopTyping();
+      resetTypingComplete();
+      if (!setDisplayContent('')) {
+        syncRenderedMarkdown();
+      }
+      return;
+    }
+    // 无内容或禁用打字
+    if (!instance.get('typing') || !nextValue) {
+      stopTyping();
+      if (!setDisplayContent(nextValue)) {
+        syncRenderedMarkdown();
+      }
+      if (!instance.get('streaming') && shouldEmitTypingComplete(nextValue)) {
+        triggerTypingComplete(nextValue);
+      }
+      return;
+    }
+    // 内容变化检测
+    var sharedPrefix = getSharedPrefix(nextValue);
+    if (sharedPrefix !== getDisplayedContent()) {
+      resetTypingComplete();
+      setDisplayContent(sharedPrefix);
+    }
+    var currentValue = getDisplayedContent();
+    var _getTypingOptions2 = getTypingOptions(),
+      interval = _getTypingOptions2.interval,
+      step = _getTypingOptions2.step;
+    // 逐步显示内容
+    if (currentValue !== nextValue) {
+      var nextLength = Math.min(currentValue.length + step, nextValue.length);
+      var renderedContent = _sliceInstanceProperty(nextValue).call(nextValue, 0, nextLength);
+      setDisplayContent(renderedContent);
+      instance.trigger('typing', renderedContent, nextValue);
+    }
+    // 完成检测
+    if (getDisplayedContent() === nextValue) {
+      if (instance.get('streaming')) {
+        stopTyping();
+        syncRenderedMarkdown();
+        return;
+      }
+      finishTyping(nextValue);
+      return;
+    }
+    // 继续动画
+    setTypingActive(true);
+    typingTimer = window.setTimeout(function () {
+      typingTimer = null;
+      runTyping();
+    }, interval);
+  }
+  /**
+   * 同步显示内容（入口函数）
+   */
+  function syncDisplayContent() {
+    syncCompletionState();
+    // 加载状态
+    if (instance.get('loading')) {
+      stopTyping();
+      resetTypingComplete();
+      if (!setDisplayContent('')) {
+        syncRenderedMarkdown();
+      }
+      return;
+    }
+    var content = instance.get('content');
+    var nextValue = content === undefined || content === null ? '' : String(content);
+    var typing = instance.get('typing');
+    var streaming = instance.get('streaming');
+    // 空内容或禁用打字效果，直接显示
+    if (!nextValue || !typing) {
+      stopTyping();
+      if (!setDisplayContent(nextValue)) {
+        syncRenderedMarkdown();
+      }
+      if (!streaming && shouldEmitTypingComplete(nextValue)) {
+        triggerTypingComplete(nextValue);
+      }
+      return;
+    }
+    // 内容变化检测
+    var sharedPrefix = getSharedPrefix(nextValue);
+    // 内容发生"非追加"变化时
+    if (sharedPrefix !== getDisplayedContent()) {
+      stopTyping();
+      resetTypingComplete();
+      setDisplayContent(sharedPrefix);
+    }
+    // 已完成
+    if (getDisplayedContent() === nextValue) {
+      if (!streaming) {
+        finishTyping(nextValue);
+      } else {
+        stopTyping();
+        syncRenderedMarkdown();
+      }
+      return;
+    }
+    startTyping(!getDisplayedContent());
+  }
+  /**
+   * 初始化
+   */
+  function bootstrap() {
+    var content = instance.get('content');
+    setTypingActive(false);
+    setDisplayContent(!instance.get('loading') && !instance.get('typing') && content !== undefined && content !== null ? String(content) : '');
+    // 监听核心属性变化
+    ['content', 'loading', 'streaming', 'typing'].forEach(function (key) {
+      instance.watch(key, function () {
+        if (!mounted) return;
+        syncDisplayContent();
+      });
+    });
+    // 监听渲染配置变化
+    ['allowHtml', 'showCodeHeader', 'enableMermaid', 'mermaidConfig', 'enableFormula', 'formulaDelimiters', 'formulaMacros', 'sanitizeOptions', 'plugins', 'tagAttrs', 'tagRenderers', 'codeBlockRenderers'].forEach(function (key) {
+      instance.watch(key, function () {
+        if (!mounted) return;
+        refreshRenderer();
+        syncRenderedMarkdown(true);
+      });
+    });
+  }
+  bootstrap();
+  // 公共方法
+  function hasContentProp() {
+    var content = instance.get('content');
+    return content !== undefined && content !== null;
+  }
+  function hasNonEmptyContentProp() {
+    var content = instance.get('content');
+    if (content === undefined || content === null) return false;
+    return String(content).length > 0;
+  }
+  function hasVisibleContent() {
+    return !!getDisplayedContent();
+  }
+  function shouldShowLoadingShell() {
+    var loading = instance.get('loading');
+    if (loading) return true;
+    var visible = hasVisibleContent();
+    if (visible) return false;
+    if (instance.get('streaming')) return true;
+    return !!instance.get('typing') && hasNonEmptyContentProp();
+  }
+  function shouldShowEmpty() {
+    return !shouldShowLoadingShell() && !hasNonEmptyContentProp() && !hasVisibleContent();
+  }
+  function getRenderedNodes() {
+    return instance.get('$renderedNodes') || [];
+  }
+  function getRenderedStableNodes() {
+    return instance.get('$renderedStableNodes') || [];
+  }
+  function getRenderedTailNodes() {
+    return instance.get('$renderedTailNodes') || [];
+  }
+  function getRenderedContent() {
+    var _context2;
+    return _concatInstanceProperty(_context2 = []).call(_context2, getRenderedStableNodes(), getRenderedTailNodes());
+  }
+  function getRenderedBlockData(id) {
+    var blocks = instance.get('$renderedBlocks');
+    return blocks ? blocks[id] : undefined;
+  }
+  function isTypingActive() {
+    return !!instance.get('$typingActive');
+  }
+  return {
+    onMounted: function onMounted() {
+      mounted = true;
+      if (!hasVisibleContent() && (hasContentProp() || !!instance.get('loading'))) {
+        syncDisplayContent();
+      }
+    },
+    onBeforeUnmount: function onBeforeUnmount() {
+      mounted = false;
+      stopTyping();
+      resetMarkdownCache();
+    },
+    // 状态判断
+    hasContentProp: hasContentProp,
+    hasNonEmptyContentProp: hasNonEmptyContentProp,
+    hasVisibleContent: hasVisibleContent,
+    shouldShowLoadingShell: shouldShowLoadingShell,
+    shouldShowEmpty: shouldShowEmpty,
+    // 内容获取
+    getDisplayedContent: getDisplayedContent,
+    getRenderedContent: getRenderedContent,
+    getRenderedStableNodes: getRenderedStableNodes,
+    getRenderedTailNodes: getRenderedTailNodes,
+    getRenderedBlockData: getRenderedBlockData,
+    getRenderedNodes: getRenderedNodes,
+    // 状态查询
+    isTypingActive: isTypingActive
+  };
+}

package/components/xmarkdown/xmarkdown.d.ts

@@ -0,0 +1,61 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import type { MermaidConfig } from 'mermaid';
+import type { Events } from '../types';
+import type { XMarkdownCodeBlockRenderers, XMarkdownFormulaDelimiter, XMarkdownPlugin, XMarkdownTagAttrs, XMarkdownTagRenderers } from './markdown';
+export interface XMarkdownTyping {
+    interval?: number;
+    step?: number;
+}
+export interface XMarkdownProps {
+    content?: string | number;
+    loading?: boolean;
+    typing?: boolean | XMarkdownTyping;
+    streaming?: boolean;
+    allowHtml?: boolean;
+    showCodeHeader?: boolean;
+    enableMermaid?: boolean;
+    mermaidConfig?: Partial<MermaidConfig>;
+    enableFormula?: boolean;
+    formulaDelimiters?: XMarkdownFormulaDelimiter | XMarkdownFormulaDelimiter[];
+    formulaMacros?: Record<string, string>;
+    sanitizeOptions?: Record<string, any>;
+    plugins?: XMarkdownPlugin[];
+    tagAttrs?: XMarkdownTagAttrs;
+    tagRenderers?: XMarkdownTagRenderers;
+    codeBlockRenderers?: XMarkdownCodeBlockRenderers;
+}
+export interface XMarkdownEvents {
+    typing: [string, string];
+    typingComplete: [string];
+    codeCopy: [string, string];
+    mermaidError: [Error, string];
+}
+export interface XMarkdownBlocks {
+    loading: null;
+    empty: null;
+}
+export declare class XMarkdown extends Component<XMarkdownProps, XMarkdownEvents, XMarkdownBlocks> {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<XMarkdownProps>>;
+    static defaults: () => Partial<XMarkdownProps>;
+    static events: Events<XMarkdownEvents>;
+    private config;
+    private display;
+    private contentModel;
+    /**
+     * 挂载后同步展示与交互状态
+     */
+    mounted(): void;
+    /**
+     * 更新后同步交互内容
+     */
+    updated(): void;
+    /**
+     * 卸载前清理资源
+     */
+    beforeUnmount(): void;
+    /**
+     * 获取组件前缀类名
+     */
+    private getPrefixCls;
+}