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

package/components/xmarkdown/useXMarkdownContent.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 内容渲染和交互处理
+ */
+import type { XMarkdownRenderedBlock } from './markdown';
+/**
+ * 管理内容区渲染后的交互能力
+ */
+export declare function useXMarkdownContent(getRenderedBlockData: (id: string) => XMarkdownRenderedBlock | undefined, getPrefixCls: () => string): {
+    rootRef: import('intact-vue-next').RefObject<HTMLDivElement>;
+    contentRef: import('intact-vue-next').RefObject<HTMLDivElement>;
+    onMounted: () => void;
+    onUpdated: () => void;
+    onBeforeUnmount: () => void;
+};

package/components/xmarkdown/useXMarkdownContent.js

@@ -0,0 +1,218 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+/**
+ * 内容渲染和交互处理
+ */
+import { createRef, useInstance } from 'intact-vue-next';
+import { _$ } from '../../i18n';
+import { useMermaid, copyText } from './useMermaid';
+/**
+ * 管理内容区渲染后的交互能力
+ */
+export function useXMarkdownContent(getRenderedBlockData, getPrefixCls) {
+  var instance = useInstance();
+  var mermaid = useMermaid(getRenderedBlockData, getPrefixCls);
+  var rootRef = createRef();
+  var contentRef = createRef();
+  var activeContentElement = null;
+  /**
+   * 同步当前内容区的交互绑定和 Mermaid 渲染
+   */
+  function syncInteractiveContent() {
+    bindContentElement();
+    var contentElement = contentRef.value;
+    if (contentElement) {
+      void mermaid.syncBlocks(contentElement);
+    }
+  }
+  /**
+   * 绑定内容区事件
+   */
+  function bindContentElement() {
+    var contentElement = contentRef.value;
+    if (!contentElement) {
+      unbindContentElement();
+      return;
+    }
+    if (activeContentElement === contentElement) return;
+    unbindContentElement();
+    activeContentElement = contentElement;
+    contentElement.addEventListener('click', handleClick);
+    contentElement.addEventListener('wheel', handleWheel, {
+      passive: false
+    });
+    contentElement.addEventListener('pointerdown', handlePointerDown);
+    window.addEventListener('pointermove', handleWindowPointerMove);
+    window.addEventListener('pointerup', handleWindowPointerUp);
+    window.addEventListener('pointercancel', handleWindowPointerUp);
+  }
+  /**
+   * 解绑内容区事件
+   */
+  function unbindContentElement() {
+    var _activeContentElement, _activeContentElement2, _activeContentElement3;
+    (_activeContentElement = activeContentElement) == null || _activeContentElement.removeEventListener('click', handleClick);
+    (_activeContentElement2 = activeContentElement) == null || _activeContentElement2.removeEventListener('wheel', handleWheel);
+    (_activeContentElement3 = activeContentElement) == null || _activeContentElement3.removeEventListener('pointerdown', handlePointerDown);
+    window.removeEventListener('pointermove', handleWindowPointerMove);
+    window.removeEventListener('pointerup', handleWindowPointerUp);
+    window.removeEventListener('pointercancel', handleWindowPointerUp);
+    mermaid.finishDrag();
+    activeContentElement = null;
+  }
+  /**
+   * 处理内容区点击动作
+   */
+  var handleClick = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+      var _contentRef$value;
+      var target, actionElement, action, block, _block, _block2, success, _block3, blockId, renderedBlock, source, language, _success;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            target = e.target;
+            actionElement = target == null ? void 0 : target.closest('[data-kpc-action]');
+            if (!(!actionElement || !((_contentRef$value = contentRef.value) != null && _contentRef$value.contains(actionElement)))) {
+              _context.next = 4;
+              break;
+            }
+            return _context.abrupt("return");
+          case 4:
+            action = actionElement.dataset.kpcAction;
+            if (action) {
+              _context.next = 7;
+              break;
+            }
+            return _context.abrupt("return");
+          case 7:
+            if (!(action === 'set-mermaid-view-diagram')) {
+              _context.next = 10;
+              break;
+            }
+            mermaid.setView(actionElement, 'diagram');
+            return _context.abrupt("return");
+          case 10:
+            if (!(action === 'set-mermaid-view-source')) {
+              _context.next = 13;
+              break;
+            }
+            mermaid.setView(actionElement, 'source');
+            return _context.abrupt("return");
+          case 13:
+            if (!(action === 'zoom-mermaid-in')) {
+              _context.next = 17;
+              break;
+            }
+            block = actionElement.closest('[data-kpc-mermaid="true"]');
+            if (block) mermaid.stepScale(block, 0.2);
+            return _context.abrupt("return");
+          case 17:
+            if (!(action === 'zoom-mermaid-out')) {
+              _context.next = 21;
+              break;
+            }
+            _block = actionElement.closest('[data-kpc-mermaid="true"]');
+            if (_block) mermaid.stepScale(_block, -0.2);
+            return _context.abrupt("return");
+          case 21:
+            if (!(action === 'reset-mermaid-zoom')) {
+              _context.next = 25;
+              break;
+            }
+            _block2 = actionElement.closest('[data-kpc-mermaid="true"]');
+            if (_block2) mermaid.resetScale(_block2);
+            return _context.abrupt("return");
+          case 25:
+            if (!(action === 'download-mermaid')) {
+              _context.next = 31;
+              break;
+            }
+            _context.next = 28;
+            return mermaid.download(actionElement);
+          case 28:
+            success = _context.sent;
+            mermaid.showFeedback(actionElement, success ? _$('已下载') : _$('下载失败'));
+            return _context.abrupt("return");
+          case 31:
+            if (!(action === 'copy-code' || action === 'copy-mermaid')) {
+              _context.next = 46;
+              break;
+            }
+            _block3 = actionElement.closest('[data-kpc-code-block="true"], [data-kpc-mermaid="true"]');
+            if (_block3) {
+              _context.next = 35;
+              break;
+            }
+            return _context.abrupt("return");
+          case 35:
+            blockId = _block3.dataset.kpcBlockId || '';
+            renderedBlock = getRenderedBlockData(blockId);
+            source = (renderedBlock == null ? void 0 : renderedBlock.source) || '';
+            language = (renderedBlock == null ? void 0 : renderedBlock.language) || _block3.dataset.kpcLanguage || '';
+            if (source) {
+              _context.next = 41;
+              break;
+            }
+            return _context.abrupt("return");
+          case 41:
+            _context.next = 43;
+            return copyText(source);
+          case 43:
+            _success = _context.sent;
+            mermaid.showFeedback(actionElement, _success ? _$('已复制') : _$('复制失败'));
+            if (_success) {
+              instance.trigger('codeCopy', source, language);
+            }
+          case 46:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleClick(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  /**
+   * 处理 Mermaid 滚轮缩放
+   */
+  var handleWheel = function handleWheel(e) {
+    var contentElement = contentRef.value;
+    if (!contentElement) return;
+    mermaid.handleWheel(e, contentElement);
+  };
+  /**
+   * 处理 Mermaid 拖拽开始
+   */
+  var handlePointerDown = function handlePointerDown(e) {
+    var contentElement = contentRef.value;
+    if (!contentElement) return;
+    mermaid.handlePointerDown(e, contentElement);
+  };
+  /**
+   * 处理全局拖拽移动
+   */
+  var handleWindowPointerMove = function handleWindowPointerMove(e) {
+    mermaid.handlePointerMove(e);
+  };
+  /**
+   * 处理全局拖拽结束
+   */
+  var handleWindowPointerUp = function handleWindowPointerUp(e) {
+    mermaid.handlePointerUp(e);
+  };
+  return {
+    rootRef: rootRef,
+    contentRef: contentRef,
+    onMounted: function onMounted() {
+      syncInteractiveContent();
+    },
+    onUpdated: function onUpdated() {
+      syncInteractiveContent();
+    },
+    onBeforeUnmount: function onBeforeUnmount() {
+      unbindContentElement();
+      mermaid.clearFeedbackTimers();
+    }
+  };
+}

package/components/xmarkdown/useXMarkdownDisplay.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 内容显示逻辑
+ *
+ * 负责：
+ * - 打字动画效果
+ * - 流式渲染处理
+ * - Markdown 渲染和缓存
+ * - 数学公式运行时加载
+ */
+import { type XMarkdownRenderedBlock } from './markdown';
+export declare function useXMarkdownDisplay(getPrefixCls: () => string): {
+    onMounted: () => void;
+    onBeforeUnmount: () => void;
+    hasContentProp: () => boolean;
+    hasNonEmptyContentProp: () => boolean;
+    hasVisibleContent: () => boolean;
+    shouldShowLoadingShell: () => boolean;
+    shouldShowEmpty: () => boolean;
+    getDisplayedContent: () => string;
+    getRenderedContent: () => any[];
+    getRenderedStableNodes: () => any;
+    getRenderedTailNodes: () => any;
+    getRenderedBlockData: (id: string) => XMarkdownRenderedBlock | undefined;
+    getRenderedNodes: () => any;
+    isTypingActive: () => boolean;
+};