@will1123/lx-ui-utils 1.0.4 → 1.0.5
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.
- package/dist/dist/index.esm.js +130 -75
- package/dist/dist/index.esm.min.js +3746 -3707
- package/dist/dist/index.esm.min.js.map +1 -1
- package/dist/dist/index.umd.js +130 -75
- package/dist/dist/index.umd.min.js +29 -29
- package/dist/dist/index.umd.min.js.map +1 -1
- package/dist/es/markdown.js +1 -1
- package/dist/es/markdown.js.map +1 -1
- package/dist/es/sse.js +2 -2
- package/dist/es/sse.js.map +1 -1
- package/dist/lib/markdown.js +1 -1
- package/dist/lib/markdown.js.map +1 -1
- package/dist/lib/sse.js +2 -2
- package/dist/lib/sse.js.map +1 -1
- package/dist/types/sse.d.ts +4 -4
- package/dist/types/sse.d.ts.map +1 -1
- package/package.json +3 -3
package/dist/es/markdown.js
CHANGED
|
@@ -229,7 +229,7 @@ function bindMarkdownCodeBoxEvents(containerOrConfig, config) {
|
|
|
229
229
|
const codeBox = copyButton.closest(".lx-ui-code-box");
|
|
230
230
|
const codeElement = codeBox == null ? void 0 : codeBox.querySelector(".lx-ui-code-box-content");
|
|
231
231
|
if (codeElement) {
|
|
232
|
-
const text = codeElement.textContent || "";
|
|
232
|
+
const text = (codeElement.textContent || "").trim();
|
|
233
233
|
const success = yield copyToClipboard(text);
|
|
234
234
|
if (success) {
|
|
235
235
|
onCopySuccess == null ? void 0 : onCopySuccess(text);
|
package/dist/es/markdown.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"markdown.js","sources":["../../src/markdown.ts"],"sourcesContent":["import { marked, Marked } from 'marked';\r\nimport { markedHighlight } from 'marked-highlight';\r\nimport hljs from 'highlight.js';\r\nimport katex from 'katex';\r\nimport { copyToClipboard, isDom } from './helper';\r\n\r\n/**\r\n * 代码主题类型\r\n */\r\nexport type CodeTheme = 'dark' | 'light';\r\n\r\n/**\r\n * createMarkdownRender 函数配置\r\n */\r\nexport interface CreateMarkdownRenderConfig {\r\n /** 代码块工具栏是否启用（默认 true） */\r\n codeBoxToolEnable?: boolean;\r\n /** 是否启用 KaTeX 公式支持（默认 true） */\r\n katexEnable?: boolean;\r\n /** KaTeX 配置选项 */\r\n katexOptions?: katex.KatexOptions;\r\n}\r\n\r\n/**\r\n * 代码块工具栏事件配置\r\n */\r\nexport interface CodeBoxEventsConfig {\r\n /** 复制成功回调 */\r\n onCopySuccess?: (text: string) => void;\r\n /** 复制失败回调 */\r\n onCopyError?: (error: Error) => void;\r\n /** 主题切换回调 */\r\n onThemeChange?: (theme: CodeTheme) => void;\r\n}\r\n\r\n/**\r\n * 从 localStorage 获取代码主题\r\n */\r\nexport function getMarkdownCodeTheme(): CodeTheme {\r\n if (typeof window === 'undefined') return 'dark';\r\n return (localStorage.getItem('LxUIMdCodeTheme') as CodeTheme) || 'dark';\r\n}\r\n\r\n/**\r\n * 设置代码主题到 localStorage\r\n */\r\nexport function setMarkdownCodeTheme(theme: CodeTheme): void {\r\n if (typeof window === 'undefined') return;\r\n localStorage.setItem('LxUIMdCodeTheme', theme);\r\n}\r\n\r\n/**\r\n * 切换代码主题\r\n *\r\n * @returns 新主题\r\n *\r\n * @example\r\n * ```typescript\r\n * import { toggleMarkdownCodeTheme } from '@will1123/lx-ui-utils'\r\n *\r\n * // 切换主题\r\n * const newTheme = toggleMarkdownCodeTheme()\r\n * // 注意：此函数只切换 localStorage 中的主题，不会更新 DOM\r\n * // 如需更新 DOM，请配合 updateMarkdownCodeBlocksTheme\r\n * ```\r\n */\r\nexport function toggleMarkdownCodeTheme(): CodeTheme {\r\n const currentTheme = getMarkdownCodeTheme();\r\n const newTheme = currentTheme === 'dark' ? 'light' : 'dark';\r\n setMarkdownCodeTheme(newTheme);\r\n return newTheme;\r\n}\r\n\r\n/**\r\n * 更新 DOM 中所有代码块的主题\r\n *\r\n * @param themeOrContainer - 主题或容器元素（字符串表示主题，DOM 元素表示容器）\r\n * @param theme - 主题（当第一个参数是容器时使用）\r\n *\r\n * @example\r\n * ```typescript\r\n * import { updateMarkdownCodeBlocksTheme } from '@will1123/lx-ui-utils'\r\n *\r\n * // 方式 1：只传主题（更新 document.body 中的所有代码块）\r\n * updateMarkdownCodeBlocksTheme('dark')\r\n *\r\n * // 方式 2：传容器和主题\r\n * const container = document.querySelector('#markdown-container')\r\n * updateMarkdownCodeBlocksTheme(container, 'light')\r\n * ```\r\n */\r\nexport function updateMarkdownCodeBlocksTheme(\r\n themeOrContainer: CodeTheme | HTMLElement | Document,\r\n theme?: CodeTheme\r\n): void {\r\n if (typeof window === 'undefined') return;\r\n\r\n // 解析参数\r\n let actualTheme: CodeTheme;\r\n let container: HTMLElement | Document = document.body;\r\n\r\n if (typeof themeOrContainer === 'string') {\r\n // 第一个参数是 theme\r\n actualTheme = themeOrContainer;\r\n } else {\r\n // 第一个参数是 container\r\n container = themeOrContainer;\r\n actualTheme = theme as CodeTheme;\r\n }\r\n\r\n const codeBoxes = container.querySelectorAll('.lx-ui-code-box');\r\n codeBoxes.forEach(box => {\r\n (box as HTMLElement).setAttribute('data-theme', actualTheme);\r\n });\r\n}\r\n\r\n/**\r\n * 创建配置好的 Marked 实例\r\n */\r\nexport function createMarkdownRender(\r\n createConfig: CreateMarkdownRenderConfig = {}\r\n) {\r\n const {\r\n codeBoxToolEnable = true,\r\n katexEnable = true,\r\n katexOptions\r\n } = createConfig;\r\n\r\n const markedRenderer = new marked.Renderer();\r\n\r\n // 重写链接渲染器 - 自动添加 target=\"_blank\"\r\n const originalLinkRenderer = markedRenderer.link;\r\n markedRenderer.link = (...arg) => {\r\n const html = originalLinkRenderer.call(markedRenderer, ...arg);\r\n return html.replace(/^<a /, '<a target=\"_blank\" ');\r\n };\r\n\r\n // 重写表格渲染器 - 包装在可滚动容器中\r\n const originalTableRenderer = markedRenderer.table;\r\n markedRenderer.table = (...arg) => {\r\n const html = originalTableRenderer.call(markedRenderer, ...arg);\r\n return `<div class=\"lx-ui-table-wrapper\"><div class=\"lx-ui-table-box\">${html}</div></div>`;\r\n };\r\n\r\n // 重写代码块渲染器 - 添加自定义样式和主题\r\n const originalCodeRenderer = markedRenderer.code;\r\n markedRenderer.code = token => {\r\n const html = originalCodeRenderer.call(markedRenderer, token);\r\n const theme = getMarkdownCodeTheme();\r\n const lang = token?.lang || '';\r\n\r\n // 代码块工具栏 HTML（启用工具栏）\r\n const codeBoxToolEnableHtml = `<div class=\"lx-ui-code-box-header\">\r\n <div class=\"lx-ui-code-box-header-left\">\r\n <span class=\"lx-ui-code-language\">${lang}</span>\r\n </div>\r\n <div class=\"lx-ui-code-box-header-right\">\r\n <i class=\"lx-ui-code-box-header-copy lx-ui-icon-copy\" title=\"复制\">复制</i>\r\n <i class=\"lx-ui-code-box-header-theme lx-ui-icon-theme\" title=\"切换主题\">切换主题</i>\r\n </div>\r\n </div>`;\r\n\r\n // 代码块工具栏 HTML（禁用工具栏）\r\n const codeBoxToolDisableHtml = `<div class=\"lx-ui-code-box-header\">\r\n <div class=\"lx-ui-code-box-header-left\">\r\n <span class=\"lx-ui-code-language\">${lang}</span>\r\n </div>\r\n </div>`;\r\n\r\n return `<div class=\"lx-ui-code-box-wrapper\">\r\n <div class=\"lx-ui-code-box\" data-theme=\"${theme}\">\r\n ${codeBoxToolEnable ? codeBoxToolEnableHtml : codeBoxToolDisableHtml}\r\n <div class=\"lx-ui-code-box-content\">\r\n ${html}\r\n </div>\r\n </div>\r\n </div>`;\r\n };\r\n\r\n // 创建 Marked 实例并配置语法高亮\r\n const markdownRender = new Marked(\r\n markedHighlight({\r\n langPrefix: 'hljs language-',\r\n highlight(code, lang) {\r\n const language = hljs.getLanguage(lang) ? lang : 'plaintext';\r\n return hljs.highlight(code, { language }).value;\r\n }\r\n })\r\n );\r\n\r\n // 设置渲染器选项\r\n markdownRender.setOptions({\r\n renderer: markedRenderer\r\n });\r\n\r\n // 如果启用了 KaTeX，注册 KaTeX 扩展\r\n if (katexEnable) {\r\n markdownRender.use(createKatexExtension(katexOptions));\r\n }\r\n\r\n return markdownRender;\r\n}\r\n\r\n/**\r\n * 创建 KaTeX Marked 扩展\r\n * @param katexOptions - KaTeX 配置选项\r\n * @returns Marked 扩展对象\r\n */\r\nfunction createKatexExtension(katexOptions?: katex.KatexOptions) {\r\n return {\r\n extensions: [\r\n {\r\n name: 'blockMath',\r\n level: 'block' as const,\r\n start(src: string) {\r\n return src.indexOf('$$');\r\n },\r\n tokenizer(src: string) {\r\n const match = src.match(/^\\$\\$([\\s\\S]*?)\\$\\$(?:\\n|$)/);\r\n if (match) {\r\n try {\r\n const formula = match[1].trim();\r\n const html = katex.renderToString(formula, {\r\n displayMode: true,\r\n throwOnError: false,\r\n ...katexOptions\r\n });\r\n return {\r\n type: 'blockMath',\r\n raw: match[0],\r\n html: `<div class=\"lx-ui-katex-block\">${html}</div>`\r\n };\r\n } catch (e) {\r\n console.error('块级公式渲染错误:', e);\r\n return {\r\n type: 'blockMath',\r\n raw: match[0],\r\n html: match[0]\r\n };\r\n }\r\n }\r\n },\r\n renderer(token: any) {\r\n return token.html || '';\r\n }\r\n },\r\n {\r\n name: 'inlineMath',\r\n level: 'inline' as const,\r\n start(src: string) {\r\n return src.indexOf('$');\r\n },\r\n tokenizer(src: string) {\r\n // 匹配 $...$ 但排除 $$...$$\r\n const match = src.match(/^\\$(?!\\$)([^\\$\\n]+?)\\$(?!\\$)/);\r\n if (match) {\r\n try {\r\n const formula = match[1].trim();\r\n const html = katex.renderToString(formula, {\r\n displayMode: false,\r\n throwOnError: false,\r\n ...katexOptions\r\n });\r\n return {\r\n type: 'inlineMath',\r\n raw: match[0],\r\n html: `<span class=\"lx-ui-katex-inline\">${html}</span>`\r\n };\r\n } catch (e) {\r\n console.error('行内公式渲染错误:', e);\r\n return {\r\n type: 'inlineMath',\r\n raw: match[0],\r\n html: match[0]\r\n };\r\n }\r\n }\r\n },\r\n renderer(token: any) {\r\n return token.html || '';\r\n }\r\n }\r\n ]\r\n };\r\n}\r\n\r\n/**\r\n * 绑定代码块工具栏事件（函数重载）\r\n */\r\nexport function bindMarkdownCodeBoxEvents(): () => void;\r\nexport function bindMarkdownCodeBoxEvents(\r\n config: CodeBoxEventsConfig\r\n): () => void;\r\nexport function bindMarkdownCodeBoxEvents(\r\n container: HTMLElement | Document\r\n): () => void;\r\nexport function bindMarkdownCodeBoxEvents(\r\n container: HTMLElement | Document,\r\n config: CodeBoxEventsConfig\r\n): () => void;\r\n\r\n/**\r\n * 绑定代码块工具栏事件\r\n * 使用事件委托处理所有代码块的交互\r\n *\r\n * 参数判断逻辑：\r\n * 1. 先判断是否为 DOM 元素（使用 isDom 函数）\r\n * 2. 再判断是否为 config 对象\r\n *\r\n * @param containerOrConfig - 容器元素或配置对象\r\n * @param config - 事件回调配置（当第一个参数是容器时使用）\r\n * @returns 清理函数，调用可解绑事件\r\n *\r\n * @example\r\n * ```typescript\r\n * import { bindMarkdownCodeBoxEvents } from '@will1123/lx-ui-utils'\r\n *\r\n * // 1. 不传参数（默认 document.body）\r\n * const unbind1 = bindMarkdownCodeBoxEvents()\r\n *\r\n * // 2. 只传 config（默认 document.body）\r\n * const unbind2 = bindMarkdownCodeBoxEvents({\r\n * onCopySuccess: (text) => console.log('已复制:', text)\r\n * })\r\n *\r\n * // 3. 只传 container（使用默认配置）\r\n * const container = document.querySelector('#container')\r\n * const unbind3 = bindMarkdownCodeBoxEvents(container)\r\n *\r\n * // 4. 传 container 和 config\r\n * const unbind4 = bindMarkdownCodeBoxEvents(document.body, {\r\n * onCopySuccess: (text) => console.log('已复制:', text),\r\n * onThemeChange: (theme) => console.log('主题切换为:', theme)\r\n * })\r\n *\r\n * // 组件销毁时解绑\r\n * onUnmounted(() => unbind())\r\n * ```\r\n */\r\nexport function bindMarkdownCodeBoxEvents(\r\n containerOrConfig?: HTMLElement | Document | CodeBoxEventsConfig,\r\n config?: CodeBoxEventsConfig\r\n): () => void {\r\n if (typeof window === 'undefined') {\r\n return () => {};\r\n }\r\n\r\n // 解析参数\r\n let container: HTMLElement | Document = document.body;\r\n let eventsConfig: CodeBoxEventsConfig = {};\r\n\r\n // 判断第一个参数的类型：先判断 DOM，再判断 config\r\n if (containerOrConfig) {\r\n if (isDom(containerOrConfig)) {\r\n // 第一个参数是 container\r\n container = containerOrConfig;\r\n // 第二个参数可能是 config\r\n if (config) {\r\n eventsConfig = config;\r\n }\r\n } else {\r\n // 第一个参数是 config\r\n eventsConfig = containerOrConfig as CodeBoxEventsConfig;\r\n }\r\n }\r\n\r\n const { onCopySuccess, onCopyError, onThemeChange } = eventsConfig;\r\n\r\n /**\r\n * 点击事件处理函数\r\n */\r\n const clickHandler = async (e: Event) => {\r\n const target = e.target as HTMLElement;\r\n\r\n // 处理复制按钮\r\n const copyButton = target.closest('.lx-ui-icon-copy') as HTMLElement;\r\n if (copyButton) {\r\n const codeBox = copyButton.closest('.lx-ui-code-box') as HTMLElement;\r\n const codeElement = codeBox?.querySelector('.lx-ui-code-box-content');\r\n\r\n if (codeElement) {\r\n const text = codeElement.textContent || '';\r\n const success = await copyToClipboard(text);\r\n\r\n if (success) {\r\n onCopySuccess?.(text);\r\n } else {\r\n onCopyError?.(new Error('复制失败'));\r\n }\r\n }\r\n\r\n e.stopPropagation();\r\n e.preventDefault();\r\n return;\r\n }\r\n\r\n // 处理主题切换按钮\r\n const themeButton = target.closest('.lx-ui-icon-theme') as HTMLElement;\r\n if (themeButton) {\r\n // 1. 切换 localStorage 中的主题\r\n const newTheme = toggleMarkdownCodeTheme();\r\n\r\n // 2. 更新指定容器内所有代码块的 data-theme\r\n updateMarkdownCodeBlocksTheme(newTheme);\r\n\r\n // 3. 触发回调\r\n onThemeChange?.(newTheme);\r\n\r\n e.stopPropagation();\r\n e.preventDefault();\r\n return;\r\n }\r\n };\r\n\r\n // 绑定事件\r\n container.addEventListener('click', clickHandler);\r\n\r\n // 返回清理函数\r\n return () => {\r\n container.removeEventListener('click', clickHandler);\r\n };\r\n}\r\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"markdown.js","sources":["../../src/markdown.ts"],"sourcesContent":["import { marked, Marked } from 'marked';\r\nimport { markedHighlight } from 'marked-highlight';\r\nimport hljs from 'highlight.js';\r\nimport katex from 'katex';\r\nimport { copyToClipboard, isDom } from './helper';\r\n\r\n/**\r\n * 代码主题类型\r\n */\r\nexport type CodeTheme = 'dark' | 'light';\r\n\r\n/**\r\n * createMarkdownRender 函数配置\r\n */\r\nexport interface CreateMarkdownRenderConfig {\r\n /** 代码块工具栏是否启用（默认 true） */\r\n codeBoxToolEnable?: boolean;\r\n /** 是否启用 KaTeX 公式支持（默认 true） */\r\n katexEnable?: boolean;\r\n /** KaTeX 配置选项 */\r\n katexOptions?: katex.KatexOptions;\r\n}\r\n\r\n/**\r\n * 代码块工具栏事件配置\r\n */\r\nexport interface CodeBoxEventsConfig {\r\n /** 复制成功回调 */\r\n onCopySuccess?: (text: string) => void;\r\n /** 复制失败回调 */\r\n onCopyError?: (error: Error) => void;\r\n /** 主题切换回调 */\r\n onThemeChange?: (theme: CodeTheme) => void;\r\n}\r\n\r\n/**\r\n * 从 localStorage 获取代码主题\r\n */\r\nexport function getMarkdownCodeTheme(): CodeTheme {\r\n if (typeof window === 'undefined') return 'dark';\r\n return (localStorage.getItem('LxUIMdCodeTheme') as CodeTheme) || 'dark';\r\n}\r\n\r\n/**\r\n * 设置代码主题到 localStorage\r\n */\r\nexport function setMarkdownCodeTheme(theme: CodeTheme): void {\r\n if (typeof window === 'undefined') return;\r\n localStorage.setItem('LxUIMdCodeTheme', theme);\r\n}\r\n\r\n/**\r\n * 切换代码主题\r\n *\r\n * @returns 新主题\r\n *\r\n * @example\r\n * ```typescript\r\n * import { toggleMarkdownCodeTheme } from '@will1123/lx-ui-utils'\r\n *\r\n * // 切换主题\r\n * const newTheme = toggleMarkdownCodeTheme()\r\n * // 注意：此函数只切换 localStorage 中的主题，不会更新 DOM\r\n * // 如需更新 DOM，请配合 updateMarkdownCodeBlocksTheme\r\n * ```\r\n */\r\nexport function toggleMarkdownCodeTheme(): CodeTheme {\r\n const currentTheme = getMarkdownCodeTheme();\r\n const newTheme = currentTheme === 'dark' ? 'light' : 'dark';\r\n setMarkdownCodeTheme(newTheme);\r\n return newTheme;\r\n}\r\n\r\n/**\r\n * 更新 DOM 中所有代码块的主题\r\n *\r\n * @param themeOrContainer - 主题或容器元素（字符串表示主题，DOM 元素表示容器）\r\n * @param theme - 主题（当第一个参数是容器时使用）\r\n *\r\n * @example\r\n * ```typescript\r\n * import { updateMarkdownCodeBlocksTheme } from '@will1123/lx-ui-utils'\r\n *\r\n * // 方式 1：只传主题（更新 document.body 中的所有代码块）\r\n * updateMarkdownCodeBlocksTheme('dark')\r\n *\r\n * // 方式 2：传容器和主题\r\n * const container = document.querySelector('#markdown-container')\r\n * updateMarkdownCodeBlocksTheme(container, 'light')\r\n * ```\r\n */\r\nexport function updateMarkdownCodeBlocksTheme(\r\n themeOrContainer: CodeTheme | HTMLElement | Document,\r\n theme?: CodeTheme\r\n): void {\r\n if (typeof window === 'undefined') return;\r\n\r\n // 解析参数\r\n let actualTheme: CodeTheme;\r\n let container: HTMLElement | Document = document.body;\r\n\r\n if (typeof themeOrContainer === 'string') {\r\n // 第一个参数是 theme\r\n actualTheme = themeOrContainer;\r\n } else {\r\n // 第一个参数是 container\r\n container = themeOrContainer;\r\n actualTheme = theme as CodeTheme;\r\n }\r\n\r\n const codeBoxes = container.querySelectorAll('.lx-ui-code-box');\r\n codeBoxes.forEach(box => {\r\n (box as HTMLElement).setAttribute('data-theme', actualTheme);\r\n });\r\n}\r\n\r\n/**\r\n * 创建配置好的 Marked 实例\r\n */\r\nexport function createMarkdownRender(\r\n createConfig: CreateMarkdownRenderConfig = {}\r\n) {\r\n const {\r\n codeBoxToolEnable = true,\r\n katexEnable = true,\r\n katexOptions\r\n } = createConfig;\r\n\r\n const markedRenderer = new marked.Renderer();\r\n\r\n // 重写链接渲染器 - 自动添加 target=\"_blank\"\r\n const originalLinkRenderer = markedRenderer.link;\r\n markedRenderer.link = (...arg) => {\r\n const html = originalLinkRenderer.call(markedRenderer, ...arg);\r\n return html.replace(/^<a /, '<a target=\"_blank\" ');\r\n };\r\n\r\n // 重写表格渲染器 - 包装在可滚动容器中\r\n const originalTableRenderer = markedRenderer.table;\r\n markedRenderer.table = (...arg) => {\r\n const html = originalTableRenderer.call(markedRenderer, ...arg);\r\n return `<div class=\"lx-ui-table-wrapper\"><div class=\"lx-ui-table-box\">${html}</div></div>`;\r\n };\r\n\r\n // 重写代码块渲染器 - 添加自定义样式和主题\r\n const originalCodeRenderer = markedRenderer.code;\r\n markedRenderer.code = token => {\r\n const html = originalCodeRenderer.call(markedRenderer, token);\r\n const theme = getMarkdownCodeTheme();\r\n const lang = token?.lang || '';\r\n\r\n // 代码块工具栏 HTML（启用工具栏）\r\n const codeBoxToolEnableHtml = `<div class=\"lx-ui-code-box-header\">\r\n <div class=\"lx-ui-code-box-header-left\">\r\n <span class=\"lx-ui-code-language\">${lang}</span>\r\n </div>\r\n <div class=\"lx-ui-code-box-header-right\">\r\n <i class=\"lx-ui-code-box-header-copy lx-ui-icon-copy\" title=\"复制\">复制</i>\r\n <i class=\"lx-ui-code-box-header-theme lx-ui-icon-theme\" title=\"切换主题\">切换主题</i>\r\n </div>\r\n </div>`;\r\n\r\n // 代码块工具栏 HTML（禁用工具栏）\r\n const codeBoxToolDisableHtml = `<div class=\"lx-ui-code-box-header\">\r\n <div class=\"lx-ui-code-box-header-left\">\r\n <span class=\"lx-ui-code-language\">${lang}</span>\r\n </div>\r\n </div>`;\r\n\r\n return `<div class=\"lx-ui-code-box-wrapper\">\r\n <div class=\"lx-ui-code-box\" data-theme=\"${theme}\">\r\n ${codeBoxToolEnable ? codeBoxToolEnableHtml : codeBoxToolDisableHtml}\r\n <div class=\"lx-ui-code-box-content\">\r\n ${html}\r\n </div>\r\n </div>\r\n </div>`;\r\n };\r\n\r\n // 创建 Marked 实例并配置语法高亮\r\n const markdownRender = new Marked(\r\n markedHighlight({\r\n langPrefix: 'hljs language-',\r\n highlight(code, lang) {\r\n const language = hljs.getLanguage(lang) ? lang : 'plaintext';\r\n return hljs.highlight(code, { language }).value;\r\n }\r\n })\r\n );\r\n\r\n // 设置渲染器选项\r\n markdownRender.setOptions({\r\n renderer: markedRenderer\r\n });\r\n\r\n // 如果启用了 KaTeX，注册 KaTeX 扩展\r\n if (katexEnable) {\r\n markdownRender.use(createKatexExtension(katexOptions));\r\n }\r\n\r\n return markdownRender;\r\n}\r\n\r\n/**\r\n * 创建 KaTeX Marked 扩展\r\n * @param katexOptions - KaTeX 配置选项\r\n * @returns Marked 扩展对象\r\n */\r\nfunction createKatexExtension(katexOptions?: katex.KatexOptions) {\r\n return {\r\n extensions: [\r\n {\r\n name: 'blockMath',\r\n level: 'block' as const,\r\n start(src: string) {\r\n return src.indexOf('$$');\r\n },\r\n tokenizer(src: string) {\r\n const match = src.match(/^\\$\\$([\\s\\S]*?)\\$\\$(?:\\n|$)/);\r\n if (match) {\r\n try {\r\n const formula = match[1].trim();\r\n const html = katex.renderToString(formula, {\r\n displayMode: true,\r\n throwOnError: false,\r\n ...katexOptions\r\n });\r\n return {\r\n type: 'blockMath',\r\n raw: match[0],\r\n html: `<div class=\"lx-ui-katex-block\">${html}</div>`\r\n };\r\n } catch (e) {\r\n console.error('块级公式渲染错误:', e);\r\n return {\r\n type: 'blockMath',\r\n raw: match[0],\r\n html: match[0]\r\n };\r\n }\r\n }\r\n },\r\n renderer(token: any) {\r\n return token.html || '';\r\n }\r\n },\r\n {\r\n name: 'inlineMath',\r\n level: 'inline' as const,\r\n start(src: string) {\r\n return src.indexOf('$');\r\n },\r\n tokenizer(src: string) {\r\n // 匹配 $...$ 但排除 $$...$$\r\n const match = src.match(/^\\$(?!\\$)([^\\$\\n]+?)\\$(?!\\$)/);\r\n if (match) {\r\n try {\r\n const formula = match[1].trim();\r\n const html = katex.renderToString(formula, {\r\n displayMode: false,\r\n throwOnError: false,\r\n ...katexOptions\r\n });\r\n return {\r\n type: 'inlineMath',\r\n raw: match[0],\r\n html: `<span class=\"lx-ui-katex-inline\">${html}</span>`\r\n };\r\n } catch (e) {\r\n console.error('行内公式渲染错误:', e);\r\n return {\r\n type: 'inlineMath',\r\n raw: match[0],\r\n html: match[0]\r\n };\r\n }\r\n }\r\n },\r\n renderer(token: any) {\r\n return token.html || '';\r\n }\r\n }\r\n ]\r\n };\r\n}\r\n\r\n/**\r\n * 绑定代码块工具栏事件（函数重载）\r\n */\r\nexport function bindMarkdownCodeBoxEvents(): () => void;\r\nexport function bindMarkdownCodeBoxEvents(\r\n config: CodeBoxEventsConfig\r\n): () => void;\r\nexport function bindMarkdownCodeBoxEvents(\r\n container: HTMLElement | Document\r\n): () => void;\r\nexport function bindMarkdownCodeBoxEvents(\r\n container: HTMLElement | Document,\r\n config: CodeBoxEventsConfig\r\n): () => void;\r\n\r\n/**\r\n * 绑定代码块工具栏事件\r\n * 使用事件委托处理所有代码块的交互\r\n *\r\n * 参数判断逻辑：\r\n * 1. 先判断是否为 DOM 元素（使用 isDom 函数）\r\n * 2. 再判断是否为 config 对象\r\n *\r\n * @param containerOrConfig - 容器元素或配置对象\r\n * @param config - 事件回调配置（当第一个参数是容器时使用）\r\n * @returns 清理函数，调用可解绑事件\r\n *\r\n * @example\r\n * ```typescript\r\n * import { bindMarkdownCodeBoxEvents } from '@will1123/lx-ui-utils'\r\n *\r\n * // 1. 不传参数（默认 document.body）\r\n * const unbind1 = bindMarkdownCodeBoxEvents()\r\n *\r\n * // 2. 只传 config（默认 document.body）\r\n * const unbind2 = bindMarkdownCodeBoxEvents({\r\n * onCopySuccess: (text) => console.log('已复制:', text)\r\n * })\r\n *\r\n * // 3. 只传 container（使用默认配置）\r\n * const container = document.querySelector('#container')\r\n * const unbind3 = bindMarkdownCodeBoxEvents(container)\r\n *\r\n * // 4. 传 container 和 config\r\n * const unbind4 = bindMarkdownCodeBoxEvents(document.body, {\r\n * onCopySuccess: (text) => console.log('已复制:', text),\r\n * onThemeChange: (theme) => console.log('主题切换为:', theme)\r\n * })\r\n *\r\n * // 组件销毁时解绑\r\n * onUnmounted(() => unbind())\r\n * ```\r\n */\r\nexport function bindMarkdownCodeBoxEvents(\r\n containerOrConfig?: HTMLElement | Document | CodeBoxEventsConfig,\r\n config?: CodeBoxEventsConfig\r\n): () => void {\r\n if (typeof window === 'undefined') {\r\n return () => {};\r\n }\r\n\r\n // 解析参数\r\n let container: HTMLElement | Document = document.body;\r\n let eventsConfig: CodeBoxEventsConfig = {};\r\n\r\n // 判断第一个参数的类型：先判断 DOM，再判断 config\r\n if (containerOrConfig) {\r\n if (isDom(containerOrConfig)) {\r\n // 第一个参数是 container\r\n container = containerOrConfig;\r\n // 第二个参数可能是 config\r\n if (config) {\r\n eventsConfig = config;\r\n }\r\n } else {\r\n // 第一个参数是 config\r\n eventsConfig = containerOrConfig as CodeBoxEventsConfig;\r\n }\r\n }\r\n\r\n const { onCopySuccess, onCopyError, onThemeChange } = eventsConfig;\r\n\r\n /**\r\n * 点击事件处理函数\r\n */\r\n const clickHandler = async (e: Event) => {\r\n const target = e.target as HTMLElement;\r\n\r\n // 处理复制按钮\r\n const copyButton = target.closest('.lx-ui-icon-copy') as HTMLElement;\r\n if (copyButton) {\r\n const codeBox = copyButton.closest('.lx-ui-code-box') as HTMLElement;\r\n const codeElement = codeBox?.querySelector('.lx-ui-code-box-content');\r\n\r\n if (codeElement) {\r\n const text = (codeElement.textContent || '').trim();\r\n const success = await copyToClipboard(text);\r\n\r\n if (success) {\r\n onCopySuccess?.(text);\r\n } else {\r\n onCopyError?.(new Error('复制失败'));\r\n }\r\n }\r\n\r\n e.stopPropagation();\r\n e.preventDefault();\r\n return;\r\n }\r\n\r\n // 处理主题切换按钮\r\n const themeButton = target.closest('.lx-ui-icon-theme') as HTMLElement;\r\n if (themeButton) {\r\n // 1. 切换 localStorage 中的主题\r\n const newTheme = toggleMarkdownCodeTheme();\r\n\r\n // 2. 更新指定容器内所有代码块的 data-theme\r\n updateMarkdownCodeBlocksTheme(newTheme);\r\n\r\n // 3. 触发回调\r\n onThemeChange?.(newTheme);\r\n\r\n e.stopPropagation();\r\n e.preventDefault();\r\n return;\r\n }\r\n };\r\n\r\n // 绑定事件\r\n container.addEventListener('click', clickHandler);\r\n\r\n // 返回清理函数\r\n return () => {\r\n container.removeEventListener('click', clickHandler);\r\n };\r\n}\r\n"],"names":[],"mappings":"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"}
|
package/dist/es/sse.js
CHANGED
|
@@ -37,7 +37,7 @@ var __async = (__this, __arguments, generator) => {
|
|
|
37
37
|
import { fetchEventSource } from "@microsoft/fetch-event-source";
|
|
38
38
|
function sse(config, handlers) {
|
|
39
39
|
return __async(this, null, function* () {
|
|
40
|
-
const { url, method = "POST", headers = {},
|
|
40
|
+
const { url, method = "POST", headers = {}, params, signal, token, openWhenHidden = true } = config;
|
|
41
41
|
const requestHeaders = __spreadValues({
|
|
42
42
|
"Content-Type": "application/json;charset=utf-8"
|
|
43
43
|
}, headers);
|
|
@@ -47,7 +47,7 @@ function sse(config, handlers) {
|
|
|
47
47
|
yield fetchEventSource(url, {
|
|
48
48
|
method,
|
|
49
49
|
headers: requestHeaders,
|
|
50
|
-
body: JSON.stringify(
|
|
50
|
+
body: JSON.stringify(params),
|
|
51
51
|
signal,
|
|
52
52
|
openWhenHidden,
|
|
53
53
|
onopen(response) {
|
package/dist/es/sse.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sse.js","sources":["../../src/sse.ts"],"sourcesContent":["import { fetchEventSource, type EventSourceMessage } from '@microsoft/fetch-event-source'\r\n\r\n// 重新导出 EventSourceMessage 类型\r\nexport type { EventSourceMessage }\r\n\r\n/**\r\n * SSE 请求配置\r\n */\r\nexport interface SSEConfig {\r\n /** 请求 URL */\r\n url: string\r\n /** 请求方法（默认 'POST'） */\r\n method?: 'GET' | 'POST'\r\n /** 请求头 */\r\n headers?: Record<string, string>\r\n /**
|
|
1
|
+
{"version":3,"file":"sse.js","sources":["../../src/sse.ts"],"sourcesContent":["import { fetchEventSource, type EventSourceMessage } from '@microsoft/fetch-event-source'\r\n\r\n// 重新导出 EventSourceMessage 类型\r\nexport type { EventSourceMessage }\r\n\r\n/**\r\n * SSE 请求配置\r\n */\r\nexport interface SSEConfig {\r\n /** 请求 URL */\r\n url: string\r\n /** 请求方法（默认 'POST'） */\r\n method?: 'GET' | 'POST'\r\n /** 请求头 */\r\n headers?: Record<string, string>\r\n /** 请求参数（对象类型） */\r\n params?: object\r\n /** AbortController 的 signal（用于取消请求） */\r\n signal?: AbortSignal\r\n /** 认证 Token */\r\n token?: string\r\n /** 页面隐藏时是否保持连接（默认 true） */\r\n openWhenHidden?: boolean\r\n}\r\n\r\n/**\r\n * SSE 事件处理器\r\n */\r\nexport interface SSEHandlers {\r\n /** 连接打开时触发（可验证响应） */\r\n onOpen?: (response: Response) => void | Promise<void>;\r\n /** 接收到消息时触发 */\r\n onMessage?: (message: EventSourceMessage) => void;\r\n /** 连接关闭时触发 */\r\n onClose?: () => void;\r\n /** 发生错误时触发 */\r\n onError?: (error: Error) => void;\r\n}\r\n\r\n/**\r\n * 发起 SSE 请求\r\n *\r\n * @example\r\n * ```ts\r\n * // 基础用法\r\n * await sse({\r\n * url: '/api/stream',\r\n * params: { prompt: 'hello' }\r\n * }, {\r\n * onMessage(msg) {\r\n * console.log(msg.data)\r\n * }\r\n * })\r\n *\r\n * // 使用 Token 认证\r\n * await sse({\r\n * url: '/api/stream',\r\n * token: 'Bearer your-token',\r\n * params: { prompt: 'hello' }\r\n * }, {\r\n * onOpen(response) {\r\n * console.log('连接已打开')\r\n * },\r\n * onMessage(msg) {\r\n * console.log(msg.data)\r\n * },\r\n * onError(err) {\r\n * console.error(err)\r\n * }\r\n * })\r\n * ```\r\n */\r\nexport async function sse(\r\n config: SSEConfig,\r\n handlers: SSEHandlers\r\n): Promise<void> {\r\n const { url, method = 'POST', headers = {}, params, signal, token, openWhenHidden = true } = config;\r\n\r\n // 构建请求头，自动添加 Authorization\r\n const requestHeaders: Record<string, string> = {\r\n 'Content-Type': 'application/json;charset=utf-8',\r\n ...headers\r\n };\r\n\r\n if (token) {\r\n requestHeaders['Authorization'] = token;\r\n }\r\n\r\n await fetchEventSource(url, {\r\n method,\r\n headers: requestHeaders,\r\n body: JSON.stringify(params),\r\n signal,\r\n openWhenHidden,\r\n\r\n async onopen(response) {\r\n await handlers.onOpen?.(response);\r\n },\r\n\r\n onmessage(msg) {\r\n handlers.onMessage?.(msg);\r\n },\r\n\r\n onclose() {\r\n handlers.onClose?.();\r\n },\r\n\r\n onerror(err) {\r\n handlers.onError?.(err);\r\n throw err;\r\n }\r\n });\r\n}\r\n"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAsB,IACpB,QACA,UACe;AAAA;AACf,UAAM,EAAE,KAAK,SAAS,QAAQ,UAAU,CAAA,GAAI,QAAQ,QAAQ,OAAO,iBAAiB,KAAA,IAAS;AAG7F,UAAM,iBAAyC;AAAA,MAC7C,gBAAgB;AAAA,OACb;AAGL,QAAI,OAAO;AACT,qBAAe,eAAe,IAAI;AAAA,IACpC;AAEA,UAAM,iBAAiB,KAAK;AAAA,MAC1B;AAAA,MACA,SAAS;AAAA,MACT,MAAM,KAAK,UAAU,MAAM;AAAA,MAC3B;AAAA,MACA;AAAA,MAEM,OAAO,UAAU;AAAA;;AACrB,iBAAMA,MAAA,SAAS,WAAT,gBAAAA,IAAA,eAAkB;AAAA,QAC1B;AAAA;AAAA,MAEA,UAAU,KAAK;;AACb,SAAAA,MAAA,SAAS,cAAT,gBAAAA,IAAA,eAAqB;AAAA,MACvB;AAAA,MAEA,UAAU;;AACR,SAAAA,MAAA,SAAS,YAAT,gBAAAA,IAAA;AAAA,MACF;AAAA,MAEA,QAAQ,KAAK;;AACX,SAAAA,MAAA,SAAS,YAAT,gBAAAA,IAAA,eAAmB;AACnB,cAAM;AAAA,MACR;AAAA,IAAA,CACD;AAAA,EACH;AAAA;"}
|
package/dist/lib/markdown.js
CHANGED
|
@@ -231,7 +231,7 @@ function bindMarkdownCodeBoxEvents(containerOrConfig, config) {
|
|
|
231
231
|
const codeBox = copyButton.closest(".lx-ui-code-box");
|
|
232
232
|
const codeElement = codeBox == null ? void 0 : codeBox.querySelector(".lx-ui-code-box-content");
|
|
233
233
|
if (codeElement) {
|
|
234
|
-
const text = codeElement.textContent || "";
|
|
234
|
+
const text = (codeElement.textContent || "").trim();
|
|
235
235
|
const success = yield helper.copyToClipboard(text);
|
|
236
236
|
if (success) {
|
|
237
237
|
onCopySuccess == null ? void 0 : onCopySuccess(text);
|
package/dist/lib/markdown.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"markdown.js","sources":["../../src/markdown.ts"],"sourcesContent":["import { marked, Marked } from 'marked';\r\nimport { markedHighlight } from 'marked-highlight';\r\nimport hljs from 'highlight.js';\r\nimport katex from 'katex';\r\nimport { copyToClipboard, isDom } from './helper';\r\n\r\n/**\r\n * 代码主题类型\r\n */\r\nexport type CodeTheme = 'dark' | 'light';\r\n\r\n/**\r\n * createMarkdownRender 函数配置\r\n */\r\nexport interface CreateMarkdownRenderConfig {\r\n /** 代码块工具栏是否启用（默认 true） */\r\n codeBoxToolEnable?: boolean;\r\n /** 是否启用 KaTeX 公式支持（默认 true） */\r\n katexEnable?: boolean;\r\n /** KaTeX 配置选项 */\r\n katexOptions?: katex.KatexOptions;\r\n}\r\n\r\n/**\r\n * 代码块工具栏事件配置\r\n */\r\nexport interface CodeBoxEventsConfig {\r\n /** 复制成功回调 */\r\n onCopySuccess?: (text: string) => void;\r\n /** 复制失败回调 */\r\n onCopyError?: (error: Error) => void;\r\n /** 主题切换回调 */\r\n onThemeChange?: (theme: CodeTheme) => void;\r\n}\r\n\r\n/**\r\n * 从 localStorage 获取代码主题\r\n */\r\nexport function getMarkdownCodeTheme(): CodeTheme {\r\n if (typeof window === 'undefined') return 'dark';\r\n return (localStorage.getItem('LxUIMdCodeTheme') as CodeTheme) || 'dark';\r\n}\r\n\r\n/**\r\n * 设置代码主题到 localStorage\r\n */\r\nexport function setMarkdownCodeTheme(theme: CodeTheme): void {\r\n if (typeof window === 'undefined') return;\r\n localStorage.setItem('LxUIMdCodeTheme', theme);\r\n}\r\n\r\n/**\r\n * 切换代码主题\r\n *\r\n * @returns 新主题\r\n *\r\n * @example\r\n * ```typescript\r\n * import { toggleMarkdownCodeTheme } from '@will1123/lx-ui-utils'\r\n *\r\n * // 切换主题\r\n * const newTheme = toggleMarkdownCodeTheme()\r\n * // 注意：此函数只切换 localStorage 中的主题，不会更新 DOM\r\n * // 如需更新 DOM，请配合 updateMarkdownCodeBlocksTheme\r\n * ```\r\n */\r\nexport function toggleMarkdownCodeTheme(): CodeTheme {\r\n const currentTheme = getMarkdownCodeTheme();\r\n const newTheme = currentTheme === 'dark' ? 'light' : 'dark';\r\n setMarkdownCodeTheme(newTheme);\r\n return newTheme;\r\n}\r\n\r\n/**\r\n * 更新 DOM 中所有代码块的主题\r\n *\r\n * @param themeOrContainer - 主题或容器元素（字符串表示主题，DOM 元素表示容器）\r\n * @param theme - 主题（当第一个参数是容器时使用）\r\n *\r\n * @example\r\n * ```typescript\r\n * import { updateMarkdownCodeBlocksTheme } from '@will1123/lx-ui-utils'\r\n *\r\n * // 方式 1：只传主题（更新 document.body 中的所有代码块）\r\n * updateMarkdownCodeBlocksTheme('dark')\r\n *\r\n * // 方式 2：传容器和主题\r\n * const container = document.querySelector('#markdown-container')\r\n * updateMarkdownCodeBlocksTheme(container, 'light')\r\n * ```\r\n */\r\nexport function updateMarkdownCodeBlocksTheme(\r\n themeOrContainer: CodeTheme | HTMLElement | Document,\r\n theme?: CodeTheme\r\n): void {\r\n if (typeof window === 'undefined') return;\r\n\r\n // 解析参数\r\n let actualTheme: CodeTheme;\r\n let container: HTMLElement | Document = document.body;\r\n\r\n if (typeof themeOrContainer === 'string') {\r\n // 第一个参数是 theme\r\n actualTheme = themeOrContainer;\r\n } else {\r\n // 第一个参数是 container\r\n container = themeOrContainer;\r\n actualTheme = theme as CodeTheme;\r\n }\r\n\r\n const codeBoxes = container.querySelectorAll('.lx-ui-code-box');\r\n codeBoxes.forEach(box => {\r\n (box as HTMLElement).setAttribute('data-theme', actualTheme);\r\n });\r\n}\r\n\r\n/**\r\n * 创建配置好的 Marked 实例\r\n */\r\nexport function createMarkdownRender(\r\n createConfig: CreateMarkdownRenderConfig = {}\r\n) {\r\n const {\r\n codeBoxToolEnable = true,\r\n katexEnable = true,\r\n katexOptions\r\n } = createConfig;\r\n\r\n const markedRenderer = new marked.Renderer();\r\n\r\n // 重写链接渲染器 - 自动添加 target=\"_blank\"\r\n const originalLinkRenderer = markedRenderer.link;\r\n markedRenderer.link = (...arg) => {\r\n const html = originalLinkRenderer.call(markedRenderer, ...arg);\r\n return html.replace(/^<a /, '<a target=\"_blank\" ');\r\n };\r\n\r\n // 重写表格渲染器 - 包装在可滚动容器中\r\n const originalTableRenderer = markedRenderer.table;\r\n markedRenderer.table = (...arg) => {\r\n const html = originalTableRenderer.call(markedRenderer, ...arg);\r\n return `<div class=\"lx-ui-table-wrapper\"><div class=\"lx-ui-table-box\">${html}</div></div>`;\r\n };\r\n\r\n // 重写代码块渲染器 - 添加自定义样式和主题\r\n const originalCodeRenderer = markedRenderer.code;\r\n markedRenderer.code = token => {\r\n const html = originalCodeRenderer.call(markedRenderer, token);\r\n const theme = getMarkdownCodeTheme();\r\n const lang = token?.lang || '';\r\n\r\n // 代码块工具栏 HTML（启用工具栏）\r\n const codeBoxToolEnableHtml = `<div class=\"lx-ui-code-box-header\">\r\n <div class=\"lx-ui-code-box-header-left\">\r\n <span class=\"lx-ui-code-language\">${lang}</span>\r\n </div>\r\n <div class=\"lx-ui-code-box-header-right\">\r\n <i class=\"lx-ui-code-box-header-copy lx-ui-icon-copy\" title=\"复制\">复制</i>\r\n <i class=\"lx-ui-code-box-header-theme lx-ui-icon-theme\" title=\"切换主题\">切换主题</i>\r\n </div>\r\n </div>`;\r\n\r\n // 代码块工具栏 HTML（禁用工具栏）\r\n const codeBoxToolDisableHtml = `<div class=\"lx-ui-code-box-header\">\r\n <div class=\"lx-ui-code-box-header-left\">\r\n <span class=\"lx-ui-code-language\">${lang}</span>\r\n </div>\r\n </div>`;\r\n\r\n return `<div class=\"lx-ui-code-box-wrapper\">\r\n <div class=\"lx-ui-code-box\" data-theme=\"${theme}\">\r\n ${codeBoxToolEnable ? codeBoxToolEnableHtml : codeBoxToolDisableHtml}\r\n <div class=\"lx-ui-code-box-content\">\r\n ${html}\r\n </div>\r\n </div>\r\n </div>`;\r\n };\r\n\r\n // 创建 Marked 实例并配置语法高亮\r\n const markdownRender = new Marked(\r\n markedHighlight({\r\n langPrefix: 'hljs language-',\r\n highlight(code, lang) {\r\n const language = hljs.getLanguage(lang) ? lang : 'plaintext';\r\n return hljs.highlight(code, { language }).value;\r\n }\r\n })\r\n );\r\n\r\n // 设置渲染器选项\r\n markdownRender.setOptions({\r\n renderer: markedRenderer\r\n });\r\n\r\n // 如果启用了 KaTeX，注册 KaTeX 扩展\r\n if (katexEnable) {\r\n markdownRender.use(createKatexExtension(katexOptions));\r\n }\r\n\r\n return markdownRender;\r\n}\r\n\r\n/**\r\n * 创建 KaTeX Marked 扩展\r\n * @param katexOptions - KaTeX 配置选项\r\n * @returns Marked 扩展对象\r\n */\r\nfunction createKatexExtension(katexOptions?: katex.KatexOptions) {\r\n return {\r\n extensions: [\r\n {\r\n name: 'blockMath',\r\n level: 'block' as const,\r\n start(src: string) {\r\n return src.indexOf('$$');\r\n },\r\n tokenizer(src: string) {\r\n const match = src.match(/^\\$\\$([\\s\\S]*?)\\$\\$(?:\\n|$)/);\r\n if (match) {\r\n try {\r\n const formula = match[1].trim();\r\n const html = katex.renderToString(formula, {\r\n displayMode: true,\r\n throwOnError: false,\r\n ...katexOptions\r\n });\r\n return {\r\n type: 'blockMath',\r\n raw: match[0],\r\n html: `<div class=\"lx-ui-katex-block\">${html}</div>`\r\n };\r\n } catch (e) {\r\n console.error('块级公式渲染错误:', e);\r\n return {\r\n type: 'blockMath',\r\n raw: match[0],\r\n html: match[0]\r\n };\r\n }\r\n }\r\n },\r\n renderer(token: any) {\r\n return token.html || '';\r\n }\r\n },\r\n {\r\n name: 'inlineMath',\r\n level: 'inline' as const,\r\n start(src: string) {\r\n return src.indexOf('$');\r\n },\r\n tokenizer(src: string) {\r\n // 匹配 $...$ 但排除 $$...$$\r\n const match = src.match(/^\\$(?!\\$)([^\\$\\n]+?)\\$(?!\\$)/);\r\n if (match) {\r\n try {\r\n const formula = match[1].trim();\r\n const html = katex.renderToString(formula, {\r\n displayMode: false,\r\n throwOnError: false,\r\n ...katexOptions\r\n });\r\n return {\r\n type: 'inlineMath',\r\n raw: match[0],\r\n html: `<span class=\"lx-ui-katex-inline\">${html}</span>`\r\n };\r\n } catch (e) {\r\n console.error('行内公式渲染错误:', e);\r\n return {\r\n type: 'inlineMath',\r\n raw: match[0],\r\n html: match[0]\r\n };\r\n }\r\n }\r\n },\r\n renderer(token: any) {\r\n return token.html || '';\r\n }\r\n }\r\n ]\r\n };\r\n}\r\n\r\n/**\r\n * 绑定代码块工具栏事件（函数重载）\r\n */\r\nexport function bindMarkdownCodeBoxEvents(): () => void;\r\nexport function bindMarkdownCodeBoxEvents(\r\n config: CodeBoxEventsConfig\r\n): () => void;\r\nexport function bindMarkdownCodeBoxEvents(\r\n container: HTMLElement | Document\r\n): () => void;\r\nexport function bindMarkdownCodeBoxEvents(\r\n container: HTMLElement | Document,\r\n config: CodeBoxEventsConfig\r\n): () => void;\r\n\r\n/**\r\n * 绑定代码块工具栏事件\r\n * 使用事件委托处理所有代码块的交互\r\n *\r\n * 参数判断逻辑：\r\n * 1. 先判断是否为 DOM 元素（使用 isDom 函数）\r\n * 2. 再判断是否为 config 对象\r\n *\r\n * @param containerOrConfig - 容器元素或配置对象\r\n * @param config - 事件回调配置（当第一个参数是容器时使用）\r\n * @returns 清理函数，调用可解绑事件\r\n *\r\n * @example\r\n * ```typescript\r\n * import { bindMarkdownCodeBoxEvents } from '@will1123/lx-ui-utils'\r\n *\r\n * // 1. 不传参数（默认 document.body）\r\n * const unbind1 = bindMarkdownCodeBoxEvents()\r\n *\r\n * // 2. 只传 config（默认 document.body）\r\n * const unbind2 = bindMarkdownCodeBoxEvents({\r\n * onCopySuccess: (text) => console.log('已复制:', text)\r\n * })\r\n *\r\n * // 3. 只传 container（使用默认配置）\r\n * const container = document.querySelector('#container')\r\n * const unbind3 = bindMarkdownCodeBoxEvents(container)\r\n *\r\n * // 4. 传 container 和 config\r\n * const unbind4 = bindMarkdownCodeBoxEvents(document.body, {\r\n * onCopySuccess: (text) => console.log('已复制:', text),\r\n * onThemeChange: (theme) => console.log('主题切换为:', theme)\r\n * })\r\n *\r\n * // 组件销毁时解绑\r\n * onUnmounted(() => unbind())\r\n * ```\r\n */\r\nexport function bindMarkdownCodeBoxEvents(\r\n containerOrConfig?: HTMLElement | Document | CodeBoxEventsConfig,\r\n config?: CodeBoxEventsConfig\r\n): () => void {\r\n if (typeof window === 'undefined') {\r\n return () => {};\r\n }\r\n\r\n // 解析参数\r\n let container: HTMLElement | Document = document.body;\r\n let eventsConfig: CodeBoxEventsConfig = {};\r\n\r\n // 判断第一个参数的类型：先判断 DOM，再判断 config\r\n if (containerOrConfig) {\r\n if (isDom(containerOrConfig)) {\r\n // 第一个参数是 container\r\n container = containerOrConfig;\r\n // 第二个参数可能是 config\r\n if (config) {\r\n eventsConfig = config;\r\n }\r\n } else {\r\n // 第一个参数是 config\r\n eventsConfig = containerOrConfig as CodeBoxEventsConfig;\r\n }\r\n }\r\n\r\n const { onCopySuccess, onCopyError, onThemeChange } = eventsConfig;\r\n\r\n /**\r\n * 点击事件处理函数\r\n */\r\n const clickHandler = async (e: Event) => {\r\n const target = e.target as HTMLElement;\r\n\r\n // 处理复制按钮\r\n const copyButton = target.closest('.lx-ui-icon-copy') as HTMLElement;\r\n if (copyButton) {\r\n const codeBox = copyButton.closest('.lx-ui-code-box') as HTMLElement;\r\n const codeElement = codeBox?.querySelector('.lx-ui-code-box-content');\r\n\r\n if (codeElement) {\r\n const text = codeElement.textContent || '';\r\n const success = await copyToClipboard(text);\r\n\r\n if (success) {\r\n onCopySuccess?.(text);\r\n } else {\r\n onCopyError?.(new Error('复制失败'));\r\n }\r\n }\r\n\r\n e.stopPropagation();\r\n e.preventDefault();\r\n return;\r\n }\r\n\r\n // 处理主题切换按钮\r\n const themeButton = target.closest('.lx-ui-icon-theme') as HTMLElement;\r\n if (themeButton) {\r\n // 1. 切换 localStorage 中的主题\r\n const newTheme = toggleMarkdownCodeTheme();\r\n\r\n // 2. 更新指定容器内所有代码块的 data-theme\r\n updateMarkdownCodeBlocksTheme(newTheme);\r\n\r\n // 3. 触发回调\r\n onThemeChange?.(newTheme);\r\n\r\n e.stopPropagation();\r\n e.preventDefault();\r\n return;\r\n }\r\n };\r\n\r\n // 绑定事件\r\n container.addEventListener('click', clickHandler);\r\n\r\n // 返回清理函数\r\n return () => {\r\n container.removeEventListener('click', clickHandler);\r\n };\r\n}\r\n"],"names":["marked","Marked","markedHighlight","isDom","copyToClipboard"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"markdown.js","sources":["../../src/markdown.ts"],"sourcesContent":["import { marked, Marked } from 'marked';\r\nimport { markedHighlight } from 'marked-highlight';\r\nimport hljs from 'highlight.js';\r\nimport katex from 'katex';\r\nimport { copyToClipboard, isDom } from './helper';\r\n\r\n/**\r\n * 代码主题类型\r\n */\r\nexport type CodeTheme = 'dark' | 'light';\r\n\r\n/**\r\n * createMarkdownRender 函数配置\r\n */\r\nexport interface CreateMarkdownRenderConfig {\r\n /** 代码块工具栏是否启用（默认 true） */\r\n codeBoxToolEnable?: boolean;\r\n /** 是否启用 KaTeX 公式支持（默认 true） */\r\n katexEnable?: boolean;\r\n /** KaTeX 配置选项 */\r\n katexOptions?: katex.KatexOptions;\r\n}\r\n\r\n/**\r\n * 代码块工具栏事件配置\r\n */\r\nexport interface CodeBoxEventsConfig {\r\n /** 复制成功回调 */\r\n onCopySuccess?: (text: string) => void;\r\n /** 复制失败回调 */\r\n onCopyError?: (error: Error) => void;\r\n /** 主题切换回调 */\r\n onThemeChange?: (theme: CodeTheme) => void;\r\n}\r\n\r\n/**\r\n * 从 localStorage 获取代码主题\r\n */\r\nexport function getMarkdownCodeTheme(): CodeTheme {\r\n if (typeof window === 'undefined') return 'dark';\r\n return (localStorage.getItem('LxUIMdCodeTheme') as CodeTheme) || 'dark';\r\n}\r\n\r\n/**\r\n * 设置代码主题到 localStorage\r\n */\r\nexport function setMarkdownCodeTheme(theme: CodeTheme): void {\r\n if (typeof window === 'undefined') return;\r\n localStorage.setItem('LxUIMdCodeTheme', theme);\r\n}\r\n\r\n/**\r\n * 切换代码主题\r\n *\r\n * @returns 新主题\r\n *\r\n * @example\r\n * ```typescript\r\n * import { toggleMarkdownCodeTheme } from '@will1123/lx-ui-utils'\r\n *\r\n * // 切换主题\r\n * const newTheme = toggleMarkdownCodeTheme()\r\n * // 注意：此函数只切换 localStorage 中的主题，不会更新 DOM\r\n * // 如需更新 DOM，请配合 updateMarkdownCodeBlocksTheme\r\n * ```\r\n */\r\nexport function toggleMarkdownCodeTheme(): CodeTheme {\r\n const currentTheme = getMarkdownCodeTheme();\r\n const newTheme = currentTheme === 'dark' ? 'light' : 'dark';\r\n setMarkdownCodeTheme(newTheme);\r\n return newTheme;\r\n}\r\n\r\n/**\r\n * 更新 DOM 中所有代码块的主题\r\n *\r\n * @param themeOrContainer - 主题或容器元素（字符串表示主题，DOM 元素表示容器）\r\n * @param theme - 主题（当第一个参数是容器时使用）\r\n *\r\n * @example\r\n * ```typescript\r\n * import { updateMarkdownCodeBlocksTheme } from '@will1123/lx-ui-utils'\r\n *\r\n * // 方式 1：只传主题（更新 document.body 中的所有代码块）\r\n * updateMarkdownCodeBlocksTheme('dark')\r\n *\r\n * // 方式 2：传容器和主题\r\n * const container = document.querySelector('#markdown-container')\r\n * updateMarkdownCodeBlocksTheme(container, 'light')\r\n * ```\r\n */\r\nexport function updateMarkdownCodeBlocksTheme(\r\n themeOrContainer: CodeTheme | HTMLElement | Document,\r\n theme?: CodeTheme\r\n): void {\r\n if (typeof window === 'undefined') return;\r\n\r\n // 解析参数\r\n let actualTheme: CodeTheme;\r\n let container: HTMLElement | Document = document.body;\r\n\r\n if (typeof themeOrContainer === 'string') {\r\n // 第一个参数是 theme\r\n actualTheme = themeOrContainer;\r\n } else {\r\n // 第一个参数是 container\r\n container = themeOrContainer;\r\n actualTheme = theme as CodeTheme;\r\n }\r\n\r\n const codeBoxes = container.querySelectorAll('.lx-ui-code-box');\r\n codeBoxes.forEach(box => {\r\n (box as HTMLElement).setAttribute('data-theme', actualTheme);\r\n });\r\n}\r\n\r\n/**\r\n * 创建配置好的 Marked 实例\r\n */\r\nexport function createMarkdownRender(\r\n createConfig: CreateMarkdownRenderConfig = {}\r\n) {\r\n const {\r\n codeBoxToolEnable = true,\r\n katexEnable = true,\r\n katexOptions\r\n } = createConfig;\r\n\r\n const markedRenderer = new marked.Renderer();\r\n\r\n // 重写链接渲染器 - 自动添加 target=\"_blank\"\r\n const originalLinkRenderer = markedRenderer.link;\r\n markedRenderer.link = (...arg) => {\r\n const html = originalLinkRenderer.call(markedRenderer, ...arg);\r\n return html.replace(/^<a /, '<a target=\"_blank\" ');\r\n };\r\n\r\n // 重写表格渲染器 - 包装在可滚动容器中\r\n const originalTableRenderer = markedRenderer.table;\r\n markedRenderer.table = (...arg) => {\r\n const html = originalTableRenderer.call(markedRenderer, ...arg);\r\n return `<div class=\"lx-ui-table-wrapper\"><div class=\"lx-ui-table-box\">${html}</div></div>`;\r\n };\r\n\r\n // 重写代码块渲染器 - 添加自定义样式和主题\r\n const originalCodeRenderer = markedRenderer.code;\r\n markedRenderer.code = token => {\r\n const html = originalCodeRenderer.call(markedRenderer, token);\r\n const theme = getMarkdownCodeTheme();\r\n const lang = token?.lang || '';\r\n\r\n // 代码块工具栏 HTML（启用工具栏）\r\n const codeBoxToolEnableHtml = `<div class=\"lx-ui-code-box-header\">\r\n <div class=\"lx-ui-code-box-header-left\">\r\n <span class=\"lx-ui-code-language\">${lang}</span>\r\n </div>\r\n <div class=\"lx-ui-code-box-header-right\">\r\n <i class=\"lx-ui-code-box-header-copy lx-ui-icon-copy\" title=\"复制\">复制</i>\r\n <i class=\"lx-ui-code-box-header-theme lx-ui-icon-theme\" title=\"切换主题\">切换主题</i>\r\n </div>\r\n </div>`;\r\n\r\n // 代码块工具栏 HTML（禁用工具栏）\r\n const codeBoxToolDisableHtml = `<div class=\"lx-ui-code-box-header\">\r\n <div class=\"lx-ui-code-box-header-left\">\r\n <span class=\"lx-ui-code-language\">${lang}</span>\r\n </div>\r\n </div>`;\r\n\r\n return `<div class=\"lx-ui-code-box-wrapper\">\r\n <div class=\"lx-ui-code-box\" data-theme=\"${theme}\">\r\n ${codeBoxToolEnable ? codeBoxToolEnableHtml : codeBoxToolDisableHtml}\r\n <div class=\"lx-ui-code-box-content\">\r\n ${html}\r\n </div>\r\n </div>\r\n </div>`;\r\n };\r\n\r\n // 创建 Marked 实例并配置语法高亮\r\n const markdownRender = new Marked(\r\n markedHighlight({\r\n langPrefix: 'hljs language-',\r\n highlight(code, lang) {\r\n const language = hljs.getLanguage(lang) ? lang : 'plaintext';\r\n return hljs.highlight(code, { language }).value;\r\n }\r\n })\r\n );\r\n\r\n // 设置渲染器选项\r\n markdownRender.setOptions({\r\n renderer: markedRenderer\r\n });\r\n\r\n // 如果启用了 KaTeX，注册 KaTeX 扩展\r\n if (katexEnable) {\r\n markdownRender.use(createKatexExtension(katexOptions));\r\n }\r\n\r\n return markdownRender;\r\n}\r\n\r\n/**\r\n * 创建 KaTeX Marked 扩展\r\n * @param katexOptions - KaTeX 配置选项\r\n * @returns Marked 扩展对象\r\n */\r\nfunction createKatexExtension(katexOptions?: katex.KatexOptions) {\r\n return {\r\n extensions: [\r\n {\r\n name: 'blockMath',\r\n level: 'block' as const,\r\n start(src: string) {\r\n return src.indexOf('$$');\r\n },\r\n tokenizer(src: string) {\r\n const match = src.match(/^\\$\\$([\\s\\S]*?)\\$\\$(?:\\n|$)/);\r\n if (match) {\r\n try {\r\n const formula = match[1].trim();\r\n const html = katex.renderToString(formula, {\r\n displayMode: true,\r\n throwOnError: false,\r\n ...katexOptions\r\n });\r\n return {\r\n type: 'blockMath',\r\n raw: match[0],\r\n html: `<div class=\"lx-ui-katex-block\">${html}</div>`\r\n };\r\n } catch (e) {\r\n console.error('块级公式渲染错误:', e);\r\n return {\r\n type: 'blockMath',\r\n raw: match[0],\r\n html: match[0]\r\n };\r\n }\r\n }\r\n },\r\n renderer(token: any) {\r\n return token.html || '';\r\n }\r\n },\r\n {\r\n name: 'inlineMath',\r\n level: 'inline' as const,\r\n start(src: string) {\r\n return src.indexOf('$');\r\n },\r\n tokenizer(src: string) {\r\n // 匹配 $...$ 但排除 $$...$$\r\n const match = src.match(/^\\$(?!\\$)([^\\$\\n]+?)\\$(?!\\$)/);\r\n if (match) {\r\n try {\r\n const formula = match[1].trim();\r\n const html = katex.renderToString(formula, {\r\n displayMode: false,\r\n throwOnError: false,\r\n ...katexOptions\r\n });\r\n return {\r\n type: 'inlineMath',\r\n raw: match[0],\r\n html: `<span class=\"lx-ui-katex-inline\">${html}</span>`\r\n };\r\n } catch (e) {\r\n console.error('行内公式渲染错误:', e);\r\n return {\r\n type: 'inlineMath',\r\n raw: match[0],\r\n html: match[0]\r\n };\r\n }\r\n }\r\n },\r\n renderer(token: any) {\r\n return token.html || '';\r\n }\r\n }\r\n ]\r\n };\r\n}\r\n\r\n/**\r\n * 绑定代码块工具栏事件（函数重载）\r\n */\r\nexport function bindMarkdownCodeBoxEvents(): () => void;\r\nexport function bindMarkdownCodeBoxEvents(\r\n config: CodeBoxEventsConfig\r\n): () => void;\r\nexport function bindMarkdownCodeBoxEvents(\r\n container: HTMLElement | Document\r\n): () => void;\r\nexport function bindMarkdownCodeBoxEvents(\r\n container: HTMLElement | Document,\r\n config: CodeBoxEventsConfig\r\n): () => void;\r\n\r\n/**\r\n * 绑定代码块工具栏事件\r\n * 使用事件委托处理所有代码块的交互\r\n *\r\n * 参数判断逻辑：\r\n * 1. 先判断是否为 DOM 元素（使用 isDom 函数）\r\n * 2. 再判断是否为 config 对象\r\n *\r\n * @param containerOrConfig - 容器元素或配置对象\r\n * @param config - 事件回调配置（当第一个参数是容器时使用）\r\n * @returns 清理函数，调用可解绑事件\r\n *\r\n * @example\r\n * ```typescript\r\n * import { bindMarkdownCodeBoxEvents } from '@will1123/lx-ui-utils'\r\n *\r\n * // 1. 不传参数（默认 document.body）\r\n * const unbind1 = bindMarkdownCodeBoxEvents()\r\n *\r\n * // 2. 只传 config（默认 document.body）\r\n * const unbind2 = bindMarkdownCodeBoxEvents({\r\n * onCopySuccess: (text) => console.log('已复制:', text)\r\n * })\r\n *\r\n * // 3. 只传 container（使用默认配置）\r\n * const container = document.querySelector('#container')\r\n * const unbind3 = bindMarkdownCodeBoxEvents(container)\r\n *\r\n * // 4. 传 container 和 config\r\n * const unbind4 = bindMarkdownCodeBoxEvents(document.body, {\r\n * onCopySuccess: (text) => console.log('已复制:', text),\r\n * onThemeChange: (theme) => console.log('主题切换为:', theme)\r\n * })\r\n *\r\n * // 组件销毁时解绑\r\n * onUnmounted(() => unbind())\r\n * ```\r\n */\r\nexport function bindMarkdownCodeBoxEvents(\r\n containerOrConfig?: HTMLElement | Document | CodeBoxEventsConfig,\r\n config?: CodeBoxEventsConfig\r\n): () => void {\r\n if (typeof window === 'undefined') {\r\n return () => {};\r\n }\r\n\r\n // 解析参数\r\n let container: HTMLElement | Document = document.body;\r\n let eventsConfig: CodeBoxEventsConfig = {};\r\n\r\n // 判断第一个参数的类型：先判断 DOM，再判断 config\r\n if (containerOrConfig) {\r\n if (isDom(containerOrConfig)) {\r\n // 第一个参数是 container\r\n container = containerOrConfig;\r\n // 第二个参数可能是 config\r\n if (config) {\r\n eventsConfig = config;\r\n }\r\n } else {\r\n // 第一个参数是 config\r\n eventsConfig = containerOrConfig as CodeBoxEventsConfig;\r\n }\r\n }\r\n\r\n const { onCopySuccess, onCopyError, onThemeChange } = eventsConfig;\r\n\r\n /**\r\n * 点击事件处理函数\r\n */\r\n const clickHandler = async (e: Event) => {\r\n const target = e.target as HTMLElement;\r\n\r\n // 处理复制按钮\r\n const copyButton = target.closest('.lx-ui-icon-copy') as HTMLElement;\r\n if (copyButton) {\r\n const codeBox = copyButton.closest('.lx-ui-code-box') as HTMLElement;\r\n const codeElement = codeBox?.querySelector('.lx-ui-code-box-content');\r\n\r\n if (codeElement) {\r\n const text = (codeElement.textContent || '').trim();\r\n const success = await copyToClipboard(text);\r\n\r\n if (success) {\r\n onCopySuccess?.(text);\r\n } else {\r\n onCopyError?.(new Error('复制失败'));\r\n }\r\n }\r\n\r\n e.stopPropagation();\r\n e.preventDefault();\r\n return;\r\n }\r\n\r\n // 处理主题切换按钮\r\n const themeButton = target.closest('.lx-ui-icon-theme') as HTMLElement;\r\n if (themeButton) {\r\n // 1. 切换 localStorage 中的主题\r\n const newTheme = toggleMarkdownCodeTheme();\r\n\r\n // 2. 更新指定容器内所有代码块的 data-theme\r\n updateMarkdownCodeBlocksTheme(newTheme);\r\n\r\n // 3. 触发回调\r\n onThemeChange?.(newTheme);\r\n\r\n e.stopPropagation();\r\n e.preventDefault();\r\n return;\r\n }\r\n };\r\n\r\n // 绑定事件\r\n container.addEventListener('click', clickHandler);\r\n\r\n // 返回清理函数\r\n return () => {\r\n container.removeEventListener('click', clickHandler);\r\n };\r\n}\r\n"],"names":["marked","Marked","markedHighlight","isDom","copyToClipboard"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCO,SAAS,uBAAkC;AAChD,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAQ,aAAa,QAAQ,iBAAiB,KAAmB;AACnE;AAKO,SAAS,qBAAqB,OAAwB;AAC3D,MAAI,OAAO,WAAW,YAAa;AACnC,eAAa,QAAQ,mBAAmB,KAAK;AAC/C;AAiBO,SAAS,0BAAqC;AACnD,QAAM,eAAe,qBAAA;AACrB,QAAM,WAAW,iBAAiB,SAAS,UAAU;AACrD,uBAAqB,QAAQ;AAC7B,SAAO;AACT;AAoBO,SAAS,8BACd,kBACA,OACM;AACN,MAAI,OAAO,WAAW,YAAa;AAGnC,MAAI;AACJ,MAAI,YAAoC,SAAS;AAEjD,MAAI,OAAO,qBAAqB,UAAU;AAExC,kBAAc;AAAA,EAChB,OAAO;AAEL,gBAAY;AACZ,kBAAc;AAAA,EAChB;AAEA,QAAM,YAAY,UAAU,iBAAiB,iBAAiB;AAC9D,YAAU,QAAQ,CAAA,QAAO;AACtB,QAAoB,aAAa,cAAc,WAAW;AAAA,EAC7D,CAAC;AACH;AAKO,SAAS,qBACd,eAA2C,IAC3C;AACA,QAAM;AAAA,IACJ,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd;AAAA,EAAA,IACE;AAEJ,QAAM,iBAAiB,IAAIA,OAAAA,OAAO,SAAA;AAGlC,QAAM,uBAAuB,eAAe;AAC5C,iBAAe,OAAO,IAAI,QAAQ;AAChC,UAAM,OAAO,qBAAqB,KAAK,gBAAgB,GAAG,GAAG;AAC7D,WAAO,KAAK,QAAQ,QAAQ,qBAAqB;AAAA,EACnD;AAGA,QAAM,wBAAwB,eAAe;AAC7C,iBAAe,QAAQ,IAAI,QAAQ;AACjC,UAAM,OAAO,sBAAsB,KAAK,gBAAgB,GAAG,GAAG;AAC9D,WAAO,iEAAiE,IAAI;AAAA,EAC9E;AAGA,QAAM,uBAAuB,eAAe;AAC5C,iBAAe,OAAO,CAAA,UAAS;AAC7B,UAAM,OAAO,qBAAqB,KAAK,gBAAgB,KAAK;AAC5D,UAAM,QAAQ,qBAAA;AACd,UAAM,QAAO,+BAAO,SAAQ;AAG5B,UAAM,wBAAwB;AAAA;AAAA,4CAEU,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS5C,UAAM,yBAAyB;AAAA;AAAA,4CAES,IAAI;AAAA;AAAA;AAI5C,WAAO;AAAA,gDACqC,KAAK;AAAA,UAC3C,oBAAoB,wBAAwB,sBAAsB;AAAA;AAAA,YAEhE,IAAI;AAAA;AAAA;AAAA;AAAA,EAId;AAGA,QAAM,iBAAiB,IAAIC,OAAAA;AAAAA,IACzBC,gCAAgB;AAAA,MACd,YAAY;AAAA,MACZ,UAAU,MAAM,MAAM;AACpB,cAAM,WAAW,KAAK,YAAY,IAAI,IAAI,OAAO;AACjD,eAAO,KAAK,UAAU,MAAM,EAAE,SAAA,CAAU,EAAE;AAAA,MAC5C;AAAA,IAAA,CACD;AAAA,EAAA;AAIH,iBAAe,WAAW;AAAA,IACxB,UAAU;AAAA,EAAA,CACX;AAGD,MAAI,aAAa;AACf,mBAAe,IAAI,qBAAqB,YAAY,CAAC;AAAA,EACvD;AAEA,SAAO;AACT;AAOA,SAAS,qBAAqB,cAAmC;AAC/D,SAAO;AAAA,IACL,YAAY;AAAA,MACV;AAAA,QACE,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM,KAAa;AACjB,iBAAO,IAAI,QAAQ,IAAI;AAAA,QACzB;AAAA,QACA,UAAU,KAAa;AACrB,gBAAM,QAAQ,IAAI,MAAM,6BAA6B;AACrD,cAAI,OAAO;AACT,gBAAI;AACF,oBAAM,UAAU,MAAM,CAAC,EAAE,KAAA;AACzB,oBAAM,OAAO,MAAM,eAAe,SAAS;AAAA,gBACzC,aAAa;AAAA,gBACb,cAAc;AAAA,iBACX,aACJ;AACD,qBAAO;AAAA,gBACL,MAAM;AAAA,gBACN,KAAK,MAAM,CAAC;AAAA,gBACZ,MAAM,kCAAkC,IAAI;AAAA,cAAA;AAAA,YAEhD,SAAS,GAAG;AACV,sBAAQ,MAAM,aAAa,CAAC;AAC5B,qBAAO;AAAA,gBACL,MAAM;AAAA,gBACN,KAAK,MAAM,CAAC;AAAA,gBACZ,MAAM,MAAM,CAAC;AAAA,cAAA;AAAA,YAEjB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAS,OAAY;AACnB,iBAAO,MAAM,QAAQ;AAAA,QACvB;AAAA,MAAA;AAAA,MAEF;AAAA,QACE,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM,KAAa;AACjB,iBAAO,IAAI,QAAQ,GAAG;AAAA,QACxB;AAAA,QACA,UAAU,KAAa;AAErB,gBAAM,QAAQ,IAAI,MAAM,8BAA8B;AACtD,cAAI,OAAO;AACT,gBAAI;AACF,oBAAM,UAAU,MAAM,CAAC,EAAE,KAAA;AACzB,oBAAM,OAAO,MAAM,eAAe,SAAS;AAAA,gBACzC,aAAa;AAAA,gBACb,cAAc;AAAA,iBACX,aACJ;AACD,qBAAO;AAAA,gBACL,MAAM;AAAA,gBACN,KAAK,MAAM,CAAC;AAAA,gBACZ,MAAM,oCAAoC,IAAI;AAAA,cAAA;AAAA,YAElD,SAAS,GAAG;AACV,sBAAQ,MAAM,aAAa,CAAC;AAC5B,qBAAO;AAAA,gBACL,MAAM;AAAA,gBACN,KAAK,MAAM,CAAC;AAAA,gBACZ,MAAM,MAAM,CAAC;AAAA,cAAA;AAAA,YAEjB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAS,OAAY;AACnB,iBAAO,MAAM,QAAQ;AAAA,QACvB;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;AAuDO,SAAS,0BACd,mBACA,QACY;AACZ,MAAI,OAAO,WAAW,aAAa;AACjC,WAAO,MAAM;AAAA,IAAC;AAAA,EAChB;AAGA,MAAI,YAAoC,SAAS;AACjD,MAAI,eAAoC,CAAA;AAGxC,MAAI,mBAAmB;AACrB,QAAIC,OAAAA,MAAM,iBAAiB,GAAG;AAE5B,kBAAY;AAEZ,UAAI,QAAQ;AACV,uBAAe;AAAA,MACjB;AAAA,IACF,OAAO;AAEL,qBAAe;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,EAAE,eAAe,aAAa,cAAA,IAAkB;AAKtD,QAAM,eAAe,CAAO,MAAa;AACvC,UAAM,SAAS,EAAE;AAGjB,UAAM,aAAa,OAAO,QAAQ,kBAAkB;AACpD,QAAI,YAAY;AACd,YAAM,UAAU,WAAW,QAAQ,iBAAiB;AACpD,YAAM,cAAc,mCAAS,cAAc;AAE3C,UAAI,aAAa;AACf,cAAM,QAAQ,YAAY,eAAe,IAAI,KAAA;AAC7C,cAAM,UAAU,MAAMC,OAAAA,gBAAgB,IAAI;AAE1C,YAAI,SAAS;AACX,yDAAgB;AAAA,QAClB,OAAO;AACL,qDAAc,IAAI,MAAM,MAAM;AAAA,QAChC;AAAA,MACF;AAEA,QAAE,gBAAA;AACF,QAAE,eAAA;AACF;AAAA,IACF;AAGA,UAAM,cAAc,OAAO,QAAQ,mBAAmB;AACtD,QAAI,aAAa;AAEf,YAAM,WAAW,wBAAA;AAGjB,oCAA8B,QAAQ;AAGtC,qDAAgB;AAEhB,QAAE,gBAAA;AACF,QAAE,eAAA;AACF;AAAA,IACF;AAAA,EACF;AAGA,YAAU,iBAAiB,SAAS,YAAY;AAGhD,SAAO,MAAM;AACX,cAAU,oBAAoB,SAAS,YAAY;AAAA,EACrD;AACF;;;;;;;"}
|
package/dist/lib/sse.js
CHANGED
|
@@ -39,7 +39,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
39
39
|
const fetchEventSource = require("@microsoft/fetch-event-source");
|
|
40
40
|
function sse(config, handlers) {
|
|
41
41
|
return __async(this, null, function* () {
|
|
42
|
-
const { url, method = "POST", headers = {},
|
|
42
|
+
const { url, method = "POST", headers = {}, params, signal, token, openWhenHidden = true } = config;
|
|
43
43
|
const requestHeaders = __spreadValues({
|
|
44
44
|
"Content-Type": "application/json;charset=utf-8"
|
|
45
45
|
}, headers);
|
|
@@ -49,7 +49,7 @@ function sse(config, handlers) {
|
|
|
49
49
|
yield fetchEventSource.fetchEventSource(url, {
|
|
50
50
|
method,
|
|
51
51
|
headers: requestHeaders,
|
|
52
|
-
body: JSON.stringify(
|
|
52
|
+
body: JSON.stringify(params),
|
|
53
53
|
signal,
|
|
54
54
|
openWhenHidden,
|
|
55
55
|
onopen(response) {
|
package/dist/lib/sse.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sse.js","sources":["../../src/sse.ts"],"sourcesContent":["import { fetchEventSource, type EventSourceMessage } from '@microsoft/fetch-event-source'\r\n\r\n// 重新导出 EventSourceMessage 类型\r\nexport type { EventSourceMessage }\r\n\r\n/**\r\n * SSE 请求配置\r\n */\r\nexport interface SSEConfig {\r\n /** 请求 URL */\r\n url: string\r\n /** 请求方法（默认 'POST'） */\r\n method?: 'GET' | 'POST'\r\n /** 请求头 */\r\n headers?: Record<string, string>\r\n /**
|
|
1
|
+
{"version":3,"file":"sse.js","sources":["../../src/sse.ts"],"sourcesContent":["import { fetchEventSource, type EventSourceMessage } from '@microsoft/fetch-event-source'\r\n\r\n// 重新导出 EventSourceMessage 类型\r\nexport type { EventSourceMessage }\r\n\r\n/**\r\n * SSE 请求配置\r\n */\r\nexport interface SSEConfig {\r\n /** 请求 URL */\r\n url: string\r\n /** 请求方法（默认 'POST'） */\r\n method?: 'GET' | 'POST'\r\n /** 请求头 */\r\n headers?: Record<string, string>\r\n /** 请求参数（对象类型） */\r\n params?: object\r\n /** AbortController 的 signal（用于取消请求） */\r\n signal?: AbortSignal\r\n /** 认证 Token */\r\n token?: string\r\n /** 页面隐藏时是否保持连接（默认 true） */\r\n openWhenHidden?: boolean\r\n}\r\n\r\n/**\r\n * SSE 事件处理器\r\n */\r\nexport interface SSEHandlers {\r\n /** 连接打开时触发（可验证响应） */\r\n onOpen?: (response: Response) => void | Promise<void>;\r\n /** 接收到消息时触发 */\r\n onMessage?: (message: EventSourceMessage) => void;\r\n /** 连接关闭时触发 */\r\n onClose?: () => void;\r\n /** 发生错误时触发 */\r\n onError?: (error: Error) => void;\r\n}\r\n\r\n/**\r\n * 发起 SSE 请求\r\n *\r\n * @example\r\n * ```ts\r\n * // 基础用法\r\n * await sse({\r\n * url: '/api/stream',\r\n * params: { prompt: 'hello' }\r\n * }, {\r\n * onMessage(msg) {\r\n * console.log(msg.data)\r\n * }\r\n * })\r\n *\r\n * // 使用 Token 认证\r\n * await sse({\r\n * url: '/api/stream',\r\n * token: 'Bearer your-token',\r\n * params: { prompt: 'hello' }\r\n * }, {\r\n * onOpen(response) {\r\n * console.log('连接已打开')\r\n * },\r\n * onMessage(msg) {\r\n * console.log(msg.data)\r\n * },\r\n * onError(err) {\r\n * console.error(err)\r\n * }\r\n * })\r\n * ```\r\n */\r\nexport async function sse(\r\n config: SSEConfig,\r\n handlers: SSEHandlers\r\n): Promise<void> {\r\n const { url, method = 'POST', headers = {}, params, signal, token, openWhenHidden = true } = config;\r\n\r\n // 构建请求头，自动添加 Authorization\r\n const requestHeaders: Record<string, string> = {\r\n 'Content-Type': 'application/json;charset=utf-8',\r\n ...headers\r\n };\r\n\r\n if (token) {\r\n requestHeaders['Authorization'] = token;\r\n }\r\n\r\n await fetchEventSource(url, {\r\n method,\r\n headers: requestHeaders,\r\n body: JSON.stringify(params),\r\n signal,\r\n openWhenHidden,\r\n\r\n async onopen(response) {\r\n await handlers.onOpen?.(response);\r\n },\r\n\r\n onmessage(msg) {\r\n handlers.onMessage?.(msg);\r\n },\r\n\r\n onclose() {\r\n handlers.onClose?.();\r\n },\r\n\r\n onerror(err) {\r\n handlers.onError?.(err);\r\n throw err;\r\n }\r\n });\r\n}\r\n"],"names":["fetchEventSource","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAsB,IACpB,QACA,UACe;AAAA;AACf,UAAM,EAAE,KAAK,SAAS,QAAQ,UAAU,CAAA,GAAI,QAAQ,QAAQ,OAAO,iBAAiB,KAAA,IAAS;AAG7F,UAAM,iBAAyC;AAAA,MAC7C,gBAAgB;AAAA,OACb;AAGL,QAAI,OAAO;AACT,qBAAe,eAAe,IAAI;AAAA,IACpC;AAEA,UAAMA,iBAAAA,iBAAiB,KAAK;AAAA,MAC1B;AAAA,MACA,SAAS;AAAA,MACT,MAAM,KAAK,UAAU,MAAM;AAAA,MAC3B;AAAA,MACA;AAAA,MAEM,OAAO,UAAU;AAAA;;AACrB,iBAAMC,MAAA,SAAS,WAAT,gBAAAA,IAAA,eAAkB;AAAA,QAC1B;AAAA;AAAA,MAEA,UAAU,KAAK;;AACb,SAAAA,MAAA,SAAS,cAAT,gBAAAA,IAAA,eAAqB;AAAA,MACvB;AAAA,MAEA,UAAU;;AACR,SAAAA,MAAA,SAAS,YAAT,gBAAAA,IAAA;AAAA,MACF;AAAA,MAEA,QAAQ,KAAK;;AACX,SAAAA,MAAA,SAAS,YAAT,gBAAAA,IAAA,eAAmB;AACnB,cAAM;AAAA,MACR;AAAA,IAAA,CACD;AAAA,EACH;AAAA;;"}
|
package/dist/types/sse.d.ts
CHANGED
|
@@ -11,8 +11,8 @@ export interface SSEConfig {
|
|
|
11
11
|
method?: 'GET' | 'POST';
|
|
12
12
|
/** 请求头 */
|
|
13
13
|
headers?: Record<string, string>;
|
|
14
|
-
/**
|
|
15
|
-
|
|
14
|
+
/** 请求参数（对象类型） */
|
|
15
|
+
params?: object;
|
|
16
16
|
/** AbortController 的 signal（用于取消请求） */
|
|
17
17
|
signal?: AbortSignal;
|
|
18
18
|
/** 认证 Token */
|
|
@@ -41,7 +41,7 @@ export interface SSEHandlers {
|
|
|
41
41
|
* // 基础用法
|
|
42
42
|
* await sse({
|
|
43
43
|
* url: '/api/stream',
|
|
44
|
-
*
|
|
44
|
+
* params: { prompt: 'hello' }
|
|
45
45
|
* }, {
|
|
46
46
|
* onMessage(msg) {
|
|
47
47
|
* console.log(msg.data)
|
|
@@ -52,7 +52,7 @@ export interface SSEHandlers {
|
|
|
52
52
|
* await sse({
|
|
53
53
|
* url: '/api/stream',
|
|
54
54
|
* token: 'Bearer your-token',
|
|
55
|
-
*
|
|
55
|
+
* params: { prompt: 'hello' }
|
|
56
56
|
* }, {
|
|
57
57
|
* onOpen(response) {
|
|
58
58
|
* console.log('连接已打开')
|
package/dist/types/sse.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sse.d.ts","sourceRoot":"","sources":["../../src/sse.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAGzF,YAAY,EAAE,kBAAkB,EAAE,CAAA;AAElC;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,aAAa;IACb,GAAG,EAAE,MAAM,CAAA;IACX,sBAAsB;IACtB,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACvB,UAAU;IACV,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,
|
|
1
|
+
{"version":3,"file":"sse.d.ts","sourceRoot":"","sources":["../../src/sse.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAGzF,YAAY,EAAE,kBAAkB,EAAE,CAAA;AAElC;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,aAAa;IACb,GAAG,EAAE,MAAM,CAAA;IACX,sBAAsB;IACtB,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACvB,UAAU;IACV,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,eAAe;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,qBAAqB;IACrB,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,eAAe;IACf,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClD,cAAc;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAsB,GAAG,CACvB,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,WAAW,GACpB,OAAO,CAAC,IAAI,CAAC,CAqCf"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@will1123/lx-ui-utils",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "LX UI - 灵曦平台 AI 组件库通用工具函数库",
|
|
6
6
|
"main": "dist/lib/index.js",
|
|
@@ -41,14 +41,14 @@
|
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@microsoft/fetch-event-source": "^2.0.1",
|
|
43
43
|
"highlight.js": "^11.11.1",
|
|
44
|
-
"katex": "0.16.12",
|
|
44
|
+
"katex": "^0.16.12",
|
|
45
45
|
"marked": "^15.0.7",
|
|
46
46
|
"marked-highlight": "^2.2.1"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"@microsoft/fetch-event-source": "^2.0.1",
|
|
50
50
|
"highlight.js": "^11.11.1",
|
|
51
|
-
"katex": "0.16.12",
|
|
51
|
+
"katex": "^0.16.12",
|
|
52
52
|
"marked": "^15.0.7",
|
|
53
53
|
"marked-highlight": "^2.2.1"
|
|
54
54
|
},
|