@blueking/ai-ui-sdk 0.3.0-beta.3 → 0.3.0-beta.30

package/dist/components/render-like/index.vue.css

@@ -1,20 +1,20 @@
 
-.dislike-icon[data-v-ltlq3r48] {
+.dislike-icon[data-v-f3ajc6ue] {
   transform: rotateX(180deg);
 }
-.option-items[data-v-ltlq3r48] {
+.option-items[data-v-f3ajc6ue] {
   padding: 1px 8px;
   background-color: #F0F1F5;
   line-height: 22px;
   border-radius: 2px;
 }
-.option-items[data-v-ltlq3r48]:hover {
+.option-items[data-v-f3ajc6ue]:hover {
     background-color: #E1ECFF;
     color: #3A84FF;
 }
-.option-items-selected[data-v-ltlq3r48]{
+.option-items-selected[data-v-f3ajc6ue]{
   background-color: #E1ECFF;
 }
-[data-v-ltlq3r48] .bk-form-item {
+[data-v-f3ajc6ue] .bk-form-item {
   margin-bottom: 17px;
 }

package/dist/components/render-like/index.vue.js

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

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

@@ -83,18 +83,18 @@ export default defineComponent({
             // 切换模式按钮
             const modeSwitchEl = document.createElement('section');
             modeSwitchEl.className = 'toastui-editor-toolbar-custom-button !g-cursor-pointer g-ml-4';
-            modeSwitchEl.innerHTML = '<i class="bkaidev-icon bkaidev-qiehuan g-mr-4 g-text-16"></i>切换代码模式';
+            modeSwitchEl.innerHTML = '<i class="ai-ui-sdk-icon ai-ui-sdk-qiehuan g-mr-4 g-text-16"></i>切换代码模式';
             modeSwitchEl.dataset.mode = defaultMode;
             modeSwitchEl.addEventListener('click', ()=>{
                 const mode = modeSwitchEl.dataset.mode;
                 if (mode === "markdown") {
                     editor.changeMode("wysiwyg");
                     modeSwitchEl.dataset.mode = "wysiwyg";
-                    modeSwitchEl.innerHTML = '<i class="bkaidev-icon bkaidev-qiehuan g-mr-4 g-text-16"></i>切换代码模式';
+                    modeSwitchEl.innerHTML = '<i class="ai-ui-sdk-icon ai-ui-sdk-qiehuan g-mr-4 g-text-16"></i>切换代码模式';
                 } else {
                     editor.changeMode("markdown");
                     modeSwitchEl.dataset.mode = "markdown";
-                    modeSwitchEl.innerHTML = '<i class="bkaidev-icon bkaidev-qiehuan g-mr-4 g-text-16"></i>切换富文本模式';
+                    modeSwitchEl.innerHTML = '<i class="ai-ui-sdk-icon ai-ui-sdk-qiehuan g-mr-4 g-text-16"></i>切换富文本模式';
                 }
             });
             // 全屏按钮复用 use-click-proxy 的全局 full-screen 代理。

package/dist/components/render-markdown/filter-css.d.ts

@@ -1,3 +1,4 @@
 export declare const filterStyle: (style: string) => string;
 export declare const cleanStyleAfterXss: (root: DocumentFragment) => void;
 export declare const filterCSS: (html: string) => string;
+export declare const escapeHtml: (html: string) => string;

package/dist/components/render-markdown/filter-css.ts.js

@@ -1,3 +1,4 @@
+import { filterXss } from '@blueking/xss-filter';
 const NUMERIC_PROPS = new Set([
     'height',
     'top',
@@ -48,6 +49,10 @@ const SAFE_COLOR_KEYWORDS = new Set([
     'pink',
     'brown'
 ]);
+const SAFE_ATTRIBUTES = new Set([
+    'data-nodeid',
+    'data-clipboard-text'
+]);
 const isSafeCssValue = (value)=>{
     return !DANGEROUS_CSS_VALUE_RE.test(value);
 };
@@ -117,3 +122,94 @@ export const filterCSS = (html)=>{
     cleanStyleAfterXss(template.content);
     return template.innerHTML;
 };
+export const escapeHtml = (html)=>{
+    return filterCSS(filterXss(html, {
+        whiteList: {
+            a: [
+                'href',
+                'target',
+                'class',
+                'title',
+                'rel'
+            ],
+            section: [
+                'class'
+            ],
+            i: [
+                'class',
+                'title'
+            ],
+            span: [
+                'class',
+                'style',
+                'data-variable-index',
+                'aria-hidden'
+            ],
+            div: [
+                'class',
+                'style'
+            ],
+            svg: [
+                'class'
+            ],
+            use: [
+                'href'
+            ],
+            ul: [
+                'class'
+            ],
+            li: [
+                'class',
+                'title'
+            ],
+            p: [
+                'class'
+            ],
+            br: [],
+            strong: [
+                'class'
+            ],
+            b: [
+                'class'
+            ],
+            em: [
+                'class'
+            ],
+            code: [
+                'class'
+            ],
+            pre: [
+                'class'
+            ],
+            blockquote: [
+                'class'
+            ],
+            table: [
+                'class'
+            ],
+            thead: [
+                'class'
+            ],
+            tbody: [
+                'class'
+            ],
+            tr: [
+                'class'
+            ],
+            th: [
+                'class',
+                'align'
+            ],
+            td: [
+                'class',
+                'align'
+            ]
+        },
+        onTagAttr (tag, name, value) {
+            if (SAFE_ATTRIBUTES.has(name)) {
+                return `${name}="${value}"`;
+            }
+        },
+        css: false
+    }));
+};

package/dist/components/render-markdown/view.postcss.css

@@ -35,21 +35,21 @@
   }
 
   .aidev-markdown-preview .toastui-editor-contents h1, .toastui-editor .toastui-editor-contents h1, .toastui-editor-md-preview .toastui-editor-contents h1 {
-    margin: 32px 0 20px;
+    margin: 36px 0 20px;
     border-bottom: 2px solid #eaecef;
   }
 
   .aidev-markdown-preview .toastui-editor-contents h2, .toastui-editor .toastui-editor-contents h2, .toastui-editor-md-preview .toastui-editor-contents h2 {
-    margin: 24px 0 16px;
+    margin: 32px 0 16px;
     border-bottom: 1px solid #eaecef;
   }
 
   .aidev-markdown-preview .toastui-editor-contents h3, .toastui-editor .toastui-editor-contents h3, .toastui-editor-md-preview .toastui-editor-contents h3 {
-    margin: 18px 0 12px;
+    margin: 24px 0 12px;
   }
 
   .aidev-markdown-preview .toastui-editor-contents h4, .toastui-editor .toastui-editor-contents h4, .toastui-editor-md-preview .toastui-editor-contents h4 {
-    margin: 14px 0 8px;
+    margin: 18px 0 8px;
   }
 
   .aidev-markdown-preview .toastui-editor-contents h5,
@@ -58,7 +58,7 @@
   .toastui-editor .toastui-editor-contents h6,
   .toastui-editor-md-preview .toastui-editor-contents h5,
   .toastui-editor-md-preview .toastui-editor-contents h6 {
-    margin: 10px 0 4px;
+    margin: 14px 0 4px;
   }
 
   .aidev-markdown-preview .toastui-editor-contents i, .toastui-editor .toastui-editor-contents i, .toastui-editor-md-preview .toastui-editor-contents i {

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

@@ -27,10 +27,9 @@ function _object_spread(target) {
     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 { filterCSS } from './filter-css.ts.js';
+import { escapeHtml } from './filter-css.ts.js';
 import '@toast-ui/editor/dist/toastui-editor-viewer.css';
 import './view.postcss.css';
 export default defineComponent({
@@ -54,96 +53,11 @@ export default defineComponent({
             viewer = new Viewer(_object_spread({
                 el: viewerRef.value,
                 initialValue: props.value,
-                customHTMLSanitizer: (html)=>filterCSS(filterXss(html, {
-                        whiteList: {
-                            a: [
-                                'href',
-                                'target',
-                                'class',
-                                'title',
-                                'rel'
-                            ],
-                            section: [
-                                'class'
-                            ],
-                            i: [
-                                'class'
-                            ],
-                            span: [
-                                'class',
-                                'style',
-                                'data-variable-index',
-                                'aria-hidden'
-                            ],
-                            div: [
-                                'class',
-                                'style'
-                            ],
-                            svg: [
-                                'class'
-                            ],
-                            use: [
-                                'href'
-                            ],
-                            ul: [
-                                'class'
-                            ],
-                            li: [
-                                'class',
-                                'title'
-                            ],
-                            p: [
-                                'class'
-                            ],
-                            br: [],
-                            strong: [
-                                'class'
-                            ],
-                            b: [
-                                'class'
-                            ],
-                            em: [
-                                'class'
-                            ],
-                            code: [
-                                'class'
-                            ],
-                            pre: [
-                                'class'
-                            ],
-                            blockquote: [
-                                'class'
-                            ],
-                            table: [
-                                'class'
-                            ],
-                            thead: [
-                                'class'
-                            ],
-                            tbody: [
-                                'class'
-                            ],
-                            tr: [
-                                'class'
-                            ],
-                            th: [
-                                'class',
-                                'align'
-                            ],
-                            td: [
-                                'class',
-                                'align'
-                            ]
-                        },
-                        css: false,
-                        onTagAttr: (_tag, name, value)=>{
-                            if (name === 'data-nodeid') {
-                                return `${name}="${value}"`;
-                            }
-                            return undefined;
-                        }
-                    }))
+                customHTMLSanitizer: escapeHtml
             }, commonConfig));
+            viewer.eventEmitter.listen('updatePreview', (editResult)=>{
+                editResult.forEach((item)=>viewer.preview.replaceRangeNodes(item));
+            });
         };
         const handleDestroy = ()=>{
             viewer.destroy();

package/dist/components/render-mcp/install/index.script.vue.js.js

@@ -1,19 +1,24 @@
 import { defineComponent as _defineComponent } from 'vue';
-import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+import { unref as _unref, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue";
 const _hoisted_1 = {
     class: "g-flex-row"
 };
 const _hoisted_2 = {
     class: "g-text-14 g-text-gray"
 };
-import { ref } from 'vue';
+import { ref, toRef, watch } from 'vue';
+import RenderInstallGuide from './install-guide.vue.js';
+import { useMcpHttp } from '../../../hooks/use-mcp-http.ts.js';
+import { McpInstallTargetType } from '../../../types/enum.ts.js';
 export default /*@__PURE__*/ _defineComponent({
     props: {
         isShow: {
             type: Boolean
         },
+        mcpConfig: {},
         selectedMcp: {},
-        mcpConfig: {}
+        apiPrefix: {},
+        spaceId: {}
     },
     emits: [
         "update:isShow"
@@ -21,30 +26,13 @@ export default /*@__PURE__*/ _defineComponent({
     setup (__props, { emit: __emit }) {
         const props = __props;
         const emits = __emit;
-        const formData = ref({
-            selectedId: 'Cursor'
-        });
-        const formRef = ref(null);
-        const IDEList = ref([
-            {
-                id: 'Cursor',
-                name: 'Cursor'
-            }
-        ]);
+        const { getMcpInstallTargets } = useMcpHttp(props.apiPrefix, toRef(props, 'spaceId'));
+        const isLoadingInstallTargets = ref(false);
+        const installTargets = ref([]);
+        const selectedInstallTargetType = ref();
         const handleClose = ()=>{
             emits('update:isShow', false);
         };
-        const handleConfirm = ()=>{
-            var _formRef_value;
-            (_formRef_value = formRef.value) === null || _formRef_value === void 0 ? void 0 : _formRef_value.validate().then(()=>{
-                handleMcpInstall();
-            });
-        };
-        const handleMcpInstall = ()=>{
-            if (formData.value.selectedId === IDEList.value[0].id) {
-                handleCursorInstall();
-            }
-        };
         // 安装至 Cursor
         const handleCursorInstall = ()=>{
             const base64Config = btoa(String.fromCharCode(...new TextEncoder().encode(props.mcpConfig)));
@@ -52,16 +40,43 @@ export default /*@__PURE__*/ _defineComponent({
                 name: props.selectedMcp.mcpCode,
                 config: base64Config
             });
-            window.open(`cursor://anysphere.cursor-deeplink/mcp/install?${params}`, '_blank');
+            window.open(`cursor://anysphere.cursor-deeplink/mcp/install?${params}`, '_blank', 'noopener,noreferrer');
+        };
+        const handleConfirm = ()=>{
+            if (selectedInstallTargetType.value === McpInstallTargetType.Cursor) {
+                handleCursorInstall();
+            }
             handleClose();
         };
+        const handleGetInstallTargets = ()=>{
+            isLoadingInstallTargets.value = true;
+            getMcpInstallTargets().then((res)=>{
+                var _res_;
+                installTargets.value = res;
+                selectedInstallTargetType.value = (_res_ = res[0]) === null || _res_ === void 0 ? void 0 : _res_.targetType;
+            }).finally(()=>{
+                isLoadingInstallTargets.value = false;
+            });
+        };
+        const handleClearChoosen = ()=>{
+            selectedInstallTargetType.value = undefined;
+        };
+        watch(()=>props.isShow, (val)=>{
+            if (val) {
+                handleGetInstallTargets();
+            } else {
+                handleClearChoosen();
+            }
+        });
         return (_ctx, _cache)=>{
             const _component_bk_select = _resolveComponent("bk-select");
             const _component_bk_form_item = _resolveComponent("bk-form-item");
             const _component_bk_form = _resolveComponent("bk-form");
             const _component_bk_dialog = _resolveComponent("bk-dialog");
             return _openBlock(), _createBlock(_component_bk_dialog, {
+                width: 600,
                 "is-show": props.isShow,
+                "confirm-text": selectedInstallTargetType.value === _unref(McpInstallTargetType).Cursor ? '安装' : '确认',
                 onClosed: handleClose,
                 onConfirm: handleConfirm
             }, {
@@ -78,31 +93,49 @@ export default /*@__PURE__*/ _defineComponent({
                     ]),
                 default: _withCtx(()=>[
                         _createVNode(_component_bk_form, {
-                            ref_key: "formRef",
-                            ref: formRef,
                             "form-type": "vertical",
-                            model: formData.value
+                            class: "g-small-form g-small-gap-form",
+                            model: {
+                                selectedInstallTargetType: selectedInstallTargetType.value
+                            }
                         }, {
                             default: _withCtx(()=>[
                                     _createVNode(_component_bk_form_item, {
                                         label: "安装至 IDE",
-                                        property: "selectedId",
+                                        property: "selectedInstallTargetType",
                                         required: ""
                                     }, {
                                         default: _withCtx(()=>[
                                                 _createVNode(_component_bk_select, {
-                                                    modelValue: formData.value.selectedId,
-                                                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event)=>formData.value.selectedId = $event),
-                                                    "id-key": "id",
-                                                    "display-key": "name",
-                                                    list: IDEList.value
+                                                    modelValue: selectedInstallTargetType.value,
+                                                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event)=>selectedInstallTargetType.value = $event),
+                                                    "id-key": "targetType",
+                                                    "display-key": "displayName",
+                                                    list: installTargets.value,
+                                                    loading: isLoadingInstallTargets.value,
+                                                    clearable: false
                                                 }, null, 8 /* PROPS */ , [
                                                     "modelValue",
-                                                    "list"
+                                                    "list",
+                                                    "loading"
                                                 ])
                                             ]),
                                         _: 1 /* STABLE */ 
-                                    })
+                                    }),
+                                    selectedInstallTargetType.value ? (_openBlock(), _createBlock(RenderInstallGuide, {
+                                        key: 0,
+                                        "mcp-type": props.selectedMcp.mcpType,
+                                        "mcp-id": props.selectedMcp.id,
+                                        "api-prefix": props.apiPrefix,
+                                        "space-id": props.spaceId,
+                                        "mcp-install-target-type": selectedInstallTargetType.value
+                                    }, null, 8 /* PROPS */ , [
+                                        "mcp-type",
+                                        "mcp-id",
+                                        "api-prefix",
+                                        "space-id",
+                                        "mcp-install-target-type"
+                                    ])) : _createCommentVNode("v-if", true)
                                 ]),
                             _: 1 /* STABLE */ 
                         }, 8 /* PROPS */ , [
@@ -111,7 +144,8 @@ export default /*@__PURE__*/ _defineComponent({
                     ]),
                 _: 1 /* STABLE */ 
             }, 8 /* PROPS */ , [
-                "is-show"
+                "is-show",
+                "confirm-text"
             ]);
         };
     }

package/dist/components/render-mcp/install/index.vue.d.ts

@@ -1,8 +1,10 @@
-import { IMcp } from '@/types/mcp';
+import type { IMcp } from '@/types/mcp';
 interface IProps {
     isShow: boolean;
-    selectedMcp: IMcp;
     mcpConfig?: string;
+    selectedMcp: IMcp;
+    apiPrefix: string;
+    spaceId?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<IProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:isShow": (value: boolean) => any;

package/dist/components/render-mcp/install/install-guide.script.vue.js.js

@@ -0,0 +1,60 @@
+import { defineComponent as _defineComponent } from 'vue';
+import { unref as _unref, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, withCtx as _withCtx } from "vue";
+import { ref, toRef, watch } from 'vue';
+import RenderMarkdown from '../../render-markdown/view.ts.js';
+import RenderSearchEmpty from '../../render-search-empty/index.vue.js';
+import { useMcpHttp } from '../../../hooks/use-mcp-http.ts.js';
+export default /*@__PURE__*/ _defineComponent({
+    props: {
+        apiPrefix: {},
+        spaceId: {},
+        mcpInstallTargetType: {},
+        mcpType: {},
+        mcpId: {}
+    },
+    setup (__props) {
+        const props = __props;
+        const { getMcpInstallGuide } = useMcpHttp(props.apiPrefix, toRef(props, 'spaceId'));
+        const isLoading = ref(false);
+        const installGuide = ref('');
+        const handleGetInstallGuide = ()=>{
+            isLoading.value = true;
+            const params = {
+                targetType: props.mcpInstallTargetType,
+                mcpType: props.mcpType,
+                mcpId: props.mcpId
+            };
+            getMcpInstallGuide(params).then((res)=>{
+                installGuide.value = res.markdown;
+            }).finally(()=>{
+                isLoading.value = false;
+            });
+        };
+        watch(()=>props.mcpInstallTargetType, handleGetInstallGuide, {
+            immediate: true
+        });
+        return (_ctx, _cache)=>{
+            const _component_bk_loading = _resolveComponent("bk-loading");
+            return _openBlock(), _createBlock(_component_bk_loading, {
+                loading: isLoading.value
+            }, {
+                default: _withCtx(()=>[
+                        installGuide.value ? (_openBlock(), _createBlock(_unref(RenderMarkdown), {
+                            key: 0,
+                            value: installGuide.value,
+                            padding: "0"
+                        }, null, 8 /* PROPS */ , [
+                            "value"
+                        ])) : !isLoading.value ? (_openBlock(), _createBlock(RenderSearchEmpty, {
+                            key: 1,
+                            scene: "part",
+                            description: "暂无安装指南"
+                        })) : _createCommentVNode("v-if", true)
+                    ]),
+                _: 1 /* STABLE */ 
+            }, 8 /* PROPS */ , [
+                "loading"
+            ]);
+        };
+    }
+});

package/dist/components/{render-card/base/application-code-suffix.vue.d.ts → render-mcp/install/install-guide.vue.d.ts}

@@ -1,12 +1,10 @@
-import { Module } from '@/types/enum';
+import { McpType } from '@/types/enum';
 interface IProps {
-    appliedBy: string;
-    appliedAt: string;
-    usedBy: {
-        id: number;
-        name: string;
-    }[];
-    module: Module;
+    apiPrefix: string;
+    spaceId?: string;
+    mcpInstallTargetType?: string;
+    mcpType: McpType;
+    mcpId: number;
 }
 declare const __VLS_export: import("vue").DefineComponent<IProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/render-mcp/install/install-guide.vue.js

@@ -0,0 +1,3 @@
+import script from './install-guide.script.vue.js.js';
+script.__file = "./src/components/render-mcp/install/install-guide.vue";
+export default script;

package/dist/components/render-permission-tag/index.script.vue.js

@@ -36,7 +36,7 @@ export default /*@__PURE__*/ _defineComponent({
                 icon: _withCtx(()=>[
                         ..._cache[0] || (_cache[0] = [
                             _createElementVNode("i", {
-                                class: "bkaidev-icon bkaidev-lock-2 g-text-8"
+                                class: "ai-ui-sdk-icon ai-ui-sdk-lock-2 g-text-8"
                             }, null, -1 /* CACHED */ )
                         ])
                     ]),
@@ -84,7 +84,7 @@ export default /*@__PURE__*/ _defineComponent({
                             icon: _withCtx(()=>[
                                     ..._cache[4] || (_cache[4] = [
                                         _createElementVNode("i", {
-                                            class: "bkaidev-icon bkaidev-lock-2 g-text-8"
+                                            class: "ai-ui-sdk-icon ai-ui-sdk-lock-2 g-text-8"
                                         }, null, -1 /* CACHED */ )
                                     ])
                                 ]),