@blueking/ai-ui-sdk 0.2.0-beta.20 → 0.2.0-beta.22

package/dist/components/render-markdown/view.ts.js

@@ -0,0 +1,116 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+import { defineComponent, h, onMounted, onUnmounted, ref, watch } from 'vue';
+import { filterXss } from '@blueking/xss-filter';
+import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
+import { commonConfig } from './common.ts.js';
+import '@toast-ui/editor/dist/toastui-editor-viewer.css';
+import './view.postcss.css';
+export default defineComponent({
+    props: {
+        value: {
+            type: String
+        },
+        previewBackground: {
+            type: String,
+            default: '#fff'
+        },
+        padding: {
+            type: String,
+            default: '12px 16px'
+        }
+    },
+    setup (props) {
+        const viewerRef = ref();
+        let viewer;
+        const handleInit = ()=>{
+            viewer = new Viewer(_object_spread({
+                el: viewerRef.value,
+                initialValue: props.value,
+                customHTMLSanitizer: (html)=>filterXss(html, {
+                        whiteList: {
+                            a: [
+                                'href',
+                                'target',
+                                'class',
+                                'title'
+                            ],
+                            section: [
+                                'class'
+                            ],
+                            i: [
+                                'class'
+                            ],
+                            span: [
+                                'class',
+                                'data-variable-index'
+                            ],
+                            svg: [
+                                'class'
+                            ],
+                            use: [
+                                'href'
+                            ],
+                            ul: [
+                                'class'
+                            ],
+                            li: [
+                                'class',
+                                'title'
+                            ]
+                        },
+                        onTagAttr: (_tag, name, value)=>{
+                            if (name === 'data-nodeid') {
+                                return `${name}="${value}"`;
+                            }
+                            return undefined;
+                        }
+                    })
+            }, commonConfig));
+        };
+        const handleDestroy = ()=>{
+            viewer.destroy();
+            viewer = null;
+        };
+        watch(()=>props.value, (value)=>{
+            if (!viewer) return;
+            viewer.setMarkdown(value || '');
+        });
+        onMounted(handleInit);
+        onUnmounted(handleDestroy);
+        return ()=>h('section', {
+                ref: viewerRef,
+                class: 'g-height-full g-scrollbar aidev-markdown-preview',
+                style: {
+                    'background-color': props.previewBackground,
+                    padding: props.padding
+                }
+            });
+    }
+});

package/dist/components/render-router-tab/index.vue.css

@@ -1,12 +1,12 @@
 
-.router-tab[data-v-29xvcqpd] {
+.router-tab[data-v-i9x5wla3] {
   margin-top: 2px;
   height: 42px;
   background: #FFFFFF;
   box-shadow: 0 2px 4px 0 #1919290d;
   padding: 0 24px;
 }
-.router-tab a[data-v-29xvcqpd] {
+.router-tab a[data-v-i9x5wla3] {
     padding: 0 8px;
     margin-right: 24px;
     font-size: 14px;
@@ -15,7 +15,7 @@
     color: #4D4F56;
     box-sizing: border-box;
 }
-.router-tab a.router-link-exact-active[data-v-29xvcqpd] {
+.router-tab a.router-link-exact-active[data-v-i9x5wla3] {
       color: #3A84FF;
       border-bottom: 2px solid #3A84FF;
 }

package/dist/components/render-router-tab/index.vue.js

@@ -1,5 +1,5 @@
 import script from './index.script.vue.js.js';
-script.__scopeId = "data-v-29xvcqpd";
+script.__scopeId = "data-v-i9x5wla3";
 script.__file = "./src/components/render-router-tab/index.vue";
 import './index.vue.css';
 export default script;

package/dist/components/render-t-table/index.vue.css

@@ -1,12 +1,12 @@
 
-.t-t-pagination[data-v-jscjte99] {
+.t-t-pagination[data-v-0m307x41] {
   position: relative;
   padding: 16px 16px 0 16px;
 }
-.t-t-pagination[data-v-jscjte99] .bk-pagination-list.is-last {
+.t-t-pagination[data-v-0m307x41] .bk-pagination-list.is-last {
     margin-left: auto;
 }
-.pagination-loading[data-v-jscjte99]::after {
+.pagination-loading[data-v-0m307x41]::after {
     content: '';
     position: absolute;
     top: 0;
@@ -16,93 +16,93 @@
     background-color: rgba(255, 255, 255, 0.6);
     z-index: 72;
 }
-.pagination-border[data-v-jscjte99] {
+.pagination-border[data-v-0m307x41] {
   border-right: 1px solid #dcdee5;
   border-left: 1px solid #dcdee5;
   border-bottom: 1px solid #dcdee5;
   padding-bottom: 16px;
 }
-.t-t-table[data-v-jscjte99] {
+.t-t-table[data-v-0m307x41] {
   display: inline;
   font-size: 12px;
 }
-.t-t-table[data-v-jscjte99] .t-table__th-cell-inner {
+.t-t-table[data-v-0m307x41] .t-table__th-cell-inner {
     color: #313238;
 }
-.t-t-table[data-v-jscjte99] th {
+.t-t-table[data-v-0m307x41] th {
     padding: 0 16px;
     height: 42px;
     background-color: #FAFBFD !important;
 }
-.t-t-table[data-v-jscjte99] .t-table__body tr {
+.t-t-table[data-v-0m307x41] .t-table__body tr {
     color: #63656e;
     font-size: 12px;
 }
-.t-t-table[data-v-jscjte99] .t-table__body tr td {
+.t-t-table[data-v-0m307x41] .t-table__body tr td {
       padding: 0 16px;
       height: 40px;
       background-color: #fff;
 }
-.t-t-table[data-v-jscjte99] .t-table__body tr:hover td {
+.t-t-table[data-v-0m307x41] .t-table__body tr:hover td {
     background-color: #f5f7fa !important;
     color: #63656E;
 }
-.t-t-table[data-v-jscjte99] .t-table__content .t-table__body .t-table__empty-row {
+.t-t-table[data-v-0m307x41] .t-table__content .t-table__body .t-table__empty-row {
     background-color: #fff !important;
 }
-.t-t-table[data-v-jscjte99] .t-table__content .t-table__body .t-table__empty-row >td {
+.t-t-table[data-v-0m307x41] .t-table__content .t-table__body .t-table__empty-row >td {
       border: none;
 }
-.t-t-table[data-v-jscjte99] th .t-table__ellipsis {
+.t-t-table[data-v-0m307x41] th .t-table__ellipsis {
     width: auto !important;
 }
-.t-t-table[data-v-jscjte99] .t-loading__gradient.t-icon-loading {
+.t-t-table[data-v-0m307x41] .t-loading__gradient.t-icon-loading {
     display: none;
 }
-.t-t-table[data-v-jscjte99]:first-of-type .t-table__affixed-header-elm-wrap{
+.t-t-table[data-v-0m307x41]:first-of-type .t-table__affixed-header-elm-wrap{
       width: calc(100% - 6px) !important;
 }
-.t-t-table[data-v-jscjte99] .t-table__affixed-header-elm-wrap>div {
+.t-t-table[data-v-0m307x41] .t-table__affixed-header-elm-wrap>div {
       width: 100% !important;
       scrollbar-width: none;
 }
-.t-t-table[data-v-jscjte99] .t-table--layout-fixed{
+.t-t-table[data-v-0m307x41] .t-table--layout-fixed{
     width: 100% !important;
 }
-.t-t-table[data-v-jscjte99] .bk-exception-description{
+.t-t-table[data-v-0m307x41] .bk-exception-description{
     margin-bottom: 0;
 }
-.t-t-table[data-v-jscjte99] .t-table__content{
+.t-t-table[data-v-0m307x41] .t-table__content{
     z-index: 2;
     max-height: 100%;
     overflow: auto;
 }
-.t-t-table[data-v-jscjte99] .t-table__content::-webkit-scrollbar {
+.t-t-table[data-v-0m307x41] .t-table__content::-webkit-scrollbar {
       width: 6px;
       height: 6px;
 }
-.t-t-table[data-v-jscjte99] .t-table__content::-webkit-scrollbar-thumb {
+.t-t-table[data-v-0m307x41] .t-table__content::-webkit-scrollbar-thumb {
       width: 6px;
       height: 6px;
       border-radius: 3px;
       background-color: #dcdee5;
 }
-.t-t-table[data-v-jscjte99] .t-table__content::-webkit-scrollbar-thumb:hover {
+.t-t-table[data-v-0m307x41] .t-table__content::-webkit-scrollbar-thumb:hover {
         background-color: #979ba5;
 }
-.t-t-table[data-v-jscjte99] .t-table__ellipsis.t-text-ellipsis:has(.checkbox){
+.t-t-table[data-v-0m307x41] .t-table__ellipsis.t-text-ellipsis:has(.checkbox){
     line-height: 100%;
 }
-.t-t-table[data-v-jscjte99] .t-table__cell--sort-trigger.t-table__double-icons{
+.t-t-table[data-v-0m307x41] .t-table__cell--sort-trigger.t-table__double-icons{
     gap: 5px;
 }
-.t-t-table[data-v-jscjte99] .t-table__sort-icon--active>i{
+.t-t-table[data-v-0m307x41] .t-table__sort-icon--active>i{
     color: #3a84ff !important;
 }
-.t-t-table[data-v-jscjte99] .t-table__cell--fixed-left:has(.checkbox){
+.t-t-table[data-v-0m307x41] .t-table__cell--fixed-left:has(.checkbox){
     line-height: 100%;
 }
-.t-t-table[data-v-jscjte99] .t-table__filter-icon.t-is-focus>span{
+.t-t-table[data-v-0m307x41] .t-table__filter-icon.t-is-focus>span{
     color: #3a84ff !important;
 }
 

package/dist/components/render-t-table/index.vue.js

@@ -1,5 +1,5 @@
 import script from './index.script.vue.js';
-script.__scopeId = "data-v-jscjte99";
+script.__scopeId = "data-v-0m307x41";
 script.__file = "./src/components/render-t-table/index.vue";
 import './index.vue.css';
 export default script;

package/dist/components/render-tag-tree/index.vue.css

@@ -1,28 +1,28 @@
 
-.tag-tree[data-v-o0k1bin7] {
+.tag-tree[data-v-hzalychi] {
   font-size: 12px;
   height: auto;
   max-height: calc(100% - 44px);
 }
-.tag-tree .manage-tree-item[data-v-o0k1bin7] {
+.tag-tree .manage-tree-item[data-v-hzalychi] {
     height: 32px;
     flex: 1;
 }
-.tag-tree .quick-icon[data-v-o0k1bin7] {
+.tag-tree .quick-icon[data-v-hzalychi] {
     margin-left: -24px;
     padding-left: 8px;
 }
-.tag-tree[data-v-o0k1bin7] .tree-item:has(.bottom-line) {
+.tag-tree[data-v-hzalychi] .tree-item:has(.bottom-line) {
       border-bottom: 1px solid #F0F1F5;
 }
-.tag-tree[data-v-o0k1bin7] .tree-item.active .quick-icon {
+.tag-tree[data-v-hzalychi] .tree-item.active .quick-icon {
         color: #3A84FF;
 }
-.tag-tree[data-v-o0k1bin7] .tree-item.active .tag-number {
+.tag-tree[data-v-hzalychi] .tree-item.active .tag-number {
         background: #A3C5FD;
         color: #fff;
 }
-.tag-number[data-v-o0k1bin7] {
+.tag-number[data-v-hzalychi] {
   line-height: 16px;
   padding: 0 4px;
   background-color: #F0F1F5;

package/dist/components/render-tag-tree/index.vue.js

@@ -1,5 +1,5 @@
 import script from './index.script.vue.js.js';
-script.__scopeId = "data-v-o0k1bin7";
+script.__scopeId = "data-v-hzalychi";
 script.__file = "./src/components/render-tag-tree/index.vue";
 import './index.vue.css';
 export default script;

package/dist/components.d.ts

@@ -10,10 +10,11 @@ import RenderDatasetList from './components/render-dataset-list/index.vue';
 import RenderDropdown from './components/render-dropdown/index.vue';
 import RenderHeader from './components/render-header/index.vue';
 import RenderLike from './components/render-like/index.vue';
-import RenderMarkdown from './components/render-markdown/mark-down';
+import RenderMarkdownEdit from './components/render-markdown/edit';
+import RenderMarkdown from './components/render-markdown/view';
 import RenderSearchEmpty from './components/render-search-empty/index.vue';
 import RenderSearchSelect from './components/render-search-select/index.vue';
 import RenderTTable from './components/render-t-table/index.vue';
 import RenderTagTree from './components/render-tag-tree/index.vue';
 import RenderTree from './components/render-tree/index.vue';
-export { renderAuthDialog, RenderAutoRefresh, RenderDataset, RenderDatasetDetail, RenderDatasetList, RenderHeader, RenderAutoHeightTextarea, RenderDatasetDetailOriginData, RenderCheckbox, RenderChooseTag, RenderMarkdown, RenderSearchEmpty, RenderSearchSelect, RenderLike, RenderTree, RenderTagTree, RenderTTable, RenderDropdown, };
+export { renderAuthDialog, RenderAutoRefresh, RenderDataset, RenderDatasetDetail, RenderDatasetList, RenderHeader, RenderAutoHeightTextarea, RenderDatasetDetailOriginData, RenderCheckbox, RenderChooseTag, RenderMarkdown, RenderMarkdownEdit, RenderSearchEmpty, RenderSearchSelect, RenderLike, RenderTree, RenderTagTree, RenderTTable, RenderDropdown, };

package/dist/components.ts.js

@@ -11,10 +11,11 @@ import RenderDatasetList from './components/render-dataset-list/index.vue.js';
 import RenderDropdown from './components/render-dropdown/index.vue.js';
 import RenderHeader from './components/render-header/index.vue.js';
 import RenderLike from './components/render-like/index.vue.js';
-import RenderMarkdown from './components/render-markdown/mark-down.ts.js';
+import RenderMarkdownEdit from './components/render-markdown/edit.ts.js';
+import RenderMarkdown from './components/render-markdown/view.ts.js';
 import RenderSearchEmpty from './components/render-search-empty/index.vue.js';
 import RenderSearchSelect from './components/render-search-select/index.vue.js';
 import RenderTTable from './components/render-t-table/index.vue.js';
 import RenderTagTree from './components/render-tag-tree/index.vue.js';
 import RenderTree from './components/render-tree/index.vue.js';
-export { renderAuthDialog, RenderAutoRefresh, RenderDataset, RenderDatasetDetail, RenderDatasetList, RenderHeader, RenderAutoHeightTextarea, RenderDatasetDetailOriginData, RenderCheckbox, RenderChooseTag, RenderMarkdown, RenderSearchEmpty, RenderSearchSelect, RenderLike, RenderTree, RenderTagTree, RenderTTable, RenderDropdown };
+export { renderAuthDialog, RenderAutoRefresh, RenderDataset, RenderDatasetDetail, RenderDatasetList, RenderHeader, RenderAutoHeightTextarea, RenderDatasetDetailOriginData, RenderCheckbox, RenderChooseTag, RenderMarkdown, RenderMarkdownEdit, RenderSearchEmpty, RenderSearchSelect, RenderLike, RenderTree, RenderTagTree, RenderTTable, RenderDropdown };

package/dist/css/tailwind.css

@@ -706,10 +706,6 @@
   max-height: 600px;
 }
 
-.g-height-max-400 {
-  max-height: 400px;
-}
-
 .g-height-full {
   height: 100% !important;
 }

package/dist/hooks/use-form-leave-confirm.ts.js

@@ -1,10 +1,12 @@
 import { InfoBox } from 'bkui-vue';
+import { hideTargetPopover } from '../util.ts.js';
 export const useFormLeaveConfirm = ()=>{
     let copyValue;
     const handleInitFormLeaveConfirm = (val)=>{
         copyValue = JSON.parse(JSON.stringify(val));
     };
     const handleFormLeaveConfirm = (leaveCallBack, val, noValidate)=>{
+        hideTargetPopover();
         if (!noValidate && copyValue && JSON.stringify(copyValue) !== JSON.stringify(val)) {
             InfoBox({
                 title: '确认离开当前页？',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueking/ai-ui-sdk",
-  "version": "0.2.0-beta.20",
+  "version": "0.2.0-beta.22",
   "description": "蓝鲸AI UI SDK",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -77,13 +77,16 @@
   "author": "",
   "license": "ISC",
   "peerDependencies": {
+    "@blueking/xss-filter": "^0.0.10",
+    "@toast-ui/editor": "^3.2.2",
+    "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
     "bkui-vue": "*",
-    "tdesign-vue-next": "^1.16.0",
     "dayjs": "^1.11.13",
+    "prismjs": "^1.30.0",
+    "tdesign-vue-next": "^1.16.0",
     "tippy.js": "^6.3.7",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.1",
-    "x-mavon-editor": "0.0.20"
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
     "@blueking/babel-preset-bk": "2.1.0",

package/dist/components/render-markdown/mark-down-code.d.ts

@@ -1,2 +0,0 @@
-import type MarkdownIt from 'markdown-it';
-export declare const MarkDownCodePlugin: (markdownIt: MarkdownIt) => void;

package/dist/components/render-markdown/mark-down-code.ts.js

@@ -1,171 +0,0 @@
-const languageSuffixMap = {
-    c: '.c',
-    'c++': '.cpp',
-    java: '.java',
-    python: '.py',
-    html: '.html',
-    css: '.css',
-    javascript: '.js',
-    js: '.js',
-    php: '.php',
-    ruby: '.rb',
-    swift: '.swift',
-    go: '.go',
-    perl: '.pl',
-    sql: '.sql',
-    xml: '.xml',
-    json: '.json',
-    vue: '.vue',
-    rust: '.rs',
-    jsx: '.jsx',
-    tsx: '.tsx',
-    typescript: '.ts',
-    ts: '.ts',
-    bash: '.sh'
-};
-const getLanguageSuffix = (name)=>languageSuffixMap[name.toLowerCase()] || '.txt';
-let originalFence;
-// 自定义代码块
-export const MarkDownCodePlugin = (markdownIt)=>{
-    // 如果 originalFence 不存在，则获取原始的 fence 函数，防止嵌套调用
-    if (!originalFence) {
-        originalFence = markdownIt.renderer.rules.fence;
-    }
-    // 重写 fence 规则
-    markdownIt.block.ruler.at('fence', (state, startLine, endLine, silent)=>{
-        let pos = state.bMarks[startLine] + state.tShift[startLine];
-        let max = state.eMarks[startLine];
-        // 检查是否缩进过多
-        if (state.sCount[startLine] - state.blkIndent >= 4) {
-            return false;
-        }
-        // 检查是否有足够的字符
-        if (pos + 3 > max) {
-            return false;
-        }
-        const marker = state.src.charCodeAt(pos);
-        // 检查是否是有效的标记字符
-        if (marker !== 0x7E /* ~ */  && marker !== 0x60 /* ` */ ) {
-            return false;
-        }
-        // 获取标记的长度
-        let mem = pos;
-        pos = state.skipChars(pos, marker);
-        const len = pos - mem;
-        if (len < 3) {
-            return false;
-        }
-        const markup = state.src.slice(mem, pos);
-        const params = state.src.slice(pos, max);
-        // 检查参数中是否包含标记字符
-        if (marker === 0x60 /* ` */ ) {
-            if (params.indexOf(String.fromCharCode(marker)) >= 0) {
-                return false;
-            }
-        }
-        // 验证模式直接返回
-        if (silent) {
-            return true;
-        }
-        // 寻找结束标记
-        let nextLine = startLine;
-        let haveEndMarker = false;
-        for(;;){
-            nextLine += 1;
-            if (nextLine >= endLine) {
-                break;
-            }
-            pos = state.bMarks[nextLine] + state.tShift[nextLine];
-            mem = pos;
-            max = state.eMarks[nextLine];
-            if (pos < max && state.sCount[nextLine] < state.blkIndent) {
-                break;
-            }
-            // 如果不是标记字符，继续
-            if (state.src.charCodeAt(pos) !== marker) {
-                continue;
-            }
-            // 检查标记长度
-            if (state.sCount[nextLine] - state.blkIndent >= 4) {
-                continue;
-            }
-            pos = state.skipChars(pos, marker);
-            // 结束标记必须至少和开始标记一样长
-            if (pos - mem < len) {
-                continue;
-            }
-            // 检查标记后是否只有空格
-            pos = state.skipSpaces(pos);
-            if (pos < max) {
-                continue;
-            }
-            haveEndMarker = true;
-            break;
-        }
-        // 设置结束行
-        state.line = nextLine + (haveEndMarker ? 1 : 0);
-        // 创建 token
-        const token = state.push('fence', 'code', 0);
-        token.info = params;
-        token.content = state.getLines(startLine + 1, nextLine, state.sCount[startLine], true);
-        token.markup = markup;
-        token.map = [
-            startLine,
-            state.line
-        ];
-        token.haveEndMarker = haveEndMarker;
-        return true;
-    }, {
-        alt: [
-            'paragraph',
-            'reference',
-            'blockquote',
-            'list'
-        ]
-    });
-    // 自定义代码块渲染
-    markdownIt.renderer.rules.fence = (tokens, idx, options, env, self)=>{
-        const token = tokens[idx];
-        const hasEndBlock = token.haveEndMarker;
-        let language = token.info.trim();
-        let code = token.content;
-        // 原始渲染
-        const originalCode = originalFence(tokens, idx, options, env, self);
-        // 1. 如果代码块和语言不为空，则渲染代码块
-        if (code.trim() && language && hasEndBlock) {
-            const encodeCode = encodeURIComponent(code);
-            return `<section class="full-screen-wrap markdown-body" style="background-color: #2e2e2e;">
-      <section class="code-header g-flex-row">
-        <span>${language}</span>
-        <span class="g-flex-row">
-          <i class="ai-ui-sdk-icon ai-ui-sdk-un-full-screen click-un-full-screen"></i>
-          <i class="ai-ui-sdk-icon ai-ui-sdk-full-screen click-full-screen"></i>
-          <i class="ai-ui-sdk-icon ai-ui-sdk-copy click-copy" data-clipboard-text="${encodeCode}"></i>
-          <i class="ai-ui-sdk-icon ai-ui-sdk-dongzuo-xiazai click-download" data-clipboard-text="${encodeCode}" data-file-name="ai${getLanguageSuffix(language)}"></i>
-        </span>
-      </section>
-      ${originalCode}
-  </section>`;
-        }
-        // 2. 如果有结束标记并且有代码内容，则返回原始代码块
-        if (code.trim() && hasEndBlock) {
-            return originalCode;
-        }
-        // 3. 否则返回原始内容
-        // 开始标记
-        const start = token.markup;
-        // 结束标记
-        let end = '';
-        // 如果代码块长度大于行数，则添加结束标记（markdown不封闭语法）
-        if (hasEndBlock) {
-            end = '```';
-        }
-        // 如果代码块不为空，则添加换行符
-        if (code) {
-            code = code.replace(/\n/g, '<br>');
-        }
-        language = `${language}<br>`;
-        // 返回原始字符串
-        return `${start}${language}${code}${end}`;
-    };
-};

package/dist/components/render-markdown/mark-down-emoji.d.ts

@@ -1,2 +0,0 @@
-import type MarkdownIt from 'markdown-it';
-export declare const MarkDownEmojiPlugin: (markdownIt: MarkdownIt) => void;

package/dist/components/render-markdown/mark-down-emoji.ts.js

@@ -1,4 +0,0 @@
-// 关闭emoji
-export const MarkDownEmojiPlugin = (markdownIt)=>{
-    markdownIt.core.ruler.disable('emoji');
-};