@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/code-diff/demo/basic.vue

@@ -0,0 +1,87 @@
+<template>
+  <bk-code-diff
+    :diff-context="state.diffContext"
+    :hljs="hljs"
+    :language="state.language"
+    :new-content="NEW_STR"
+    :old-content="OLD_STR"
+  />
+</template>
+
+<script setup>
+  import { onMounted, reactive, ref } from 'vue';
+
+  import hljs from 'highlight.js';
+
+  import { NEW_STR, OLD_STR } from './demo';
+
+  /**
+   * 动态引入语法包
+   * [string] language
+   */
+  function languageDynamicImport(language) {
+    switch (language) {
+      case 'css':
+        return import('highlight.js/lib/languages/css');
+      case 'java':
+        return import('highlight.js/lib/languages/java');
+      case 'javascript':
+        return import('highlight.js/lib/languages/javascript');
+      case 'json':
+        return import('highlight.js/lib/languages/json');
+      case 'scss':
+        return import('highlight.js/lib/languages/scss');
+      case 'less':
+        return import('highlight.js/lib/languages/less');
+      case 'stylus':
+        return import('highlight.js/lib/languages/stylus');
+      case 'shell':
+        return import('highlight.js/lib/languages/shell');
+      case 'bash':
+        return import('highlight.js/lib/languages/bash');
+      case 'cpp':
+        return import('highlight.js/lib/languages/cpp');
+      case 'go':
+        return import('highlight.js/lib/languages/go');
+      case 'xml':
+        return import('highlight.js/lib/languages/xml');
+      case 'python':
+        return import('highlight.js/lib/languages/python');
+      case 'typescript':
+        return import('highlight.js/lib/languages/typescript');
+      case 'sql':
+        return import('highlight.js/lib/languages/sql');
+      case 'ruby':
+        return import('highlight.js/lib/languages/ruby');
+      case 'vim':
+        return import('highlight.js/lib/languages/vim');
+      case 'php':
+        return import('highlight.js/lib/languages/php');
+      case 'perl':
+        return import('highlight.js/lib/languages/perl');
+      case 'powershell':
+        return import('highlight.js/lib/languages/powershell');
+      case 'makefile':
+        return import('highlight.js/lib/languages/makefile');
+    }
+  }
+
+  const languageModuleMap = ref({});
+  const state = reactive({
+    language: 'javascript',
+  });
+
+  onMounted(async () => {
+    let languageModule = languageModuleMap.value[state.language];
+    if (languageModule === undefined) {
+      const mod = await languageDynamicImport(state.language);
+      languageModule = mod.default;
+
+      languageModuleMap.value = {
+        ...languageModuleMap.value,
+        language: languageModule,
+      };
+    }
+    hljs.registerLanguage(state.language, languageModule);
+  });
+</script>

package/knowledge/examples/code-diff/demo/demo.ts

@@ -0,0 +1,111 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+export const NEW_STR = `
+Vue.component('app-exception', Exception)
+Vue.component('app-auth', AuthComponent)
+
+auth.requestCurrentUser().then(user => {
+    injectCSRFTokenToHeaders();
+    if (!user.isAuthenticated) {
+        auth.redirectToLogin();
+    } else {
+        global.bus = bus;
+        global.mainComponent = new Vue({
+            el: '#app',
+            router,
+            store,
+            template: '<App/>',
+            components: {
+                App
+            }
+        })
+    }
+}, err => {
+    let message;
+    if (err.status === 403) {
+        message = 'Sorry，您的权限不足!';
+        if (err.data && err.data.msg) {
+            message = err.data.msg;
+        }
+    } else {
+        message = '无法连接到后端服务，请稍候再试。'
+    }
+
+    const divStyle = ''
+        + 'text-align: left;'
+        + 'width: 400px;'
+        + 'margin: auto;'
+        + 'position: absolute;'
+        + 'left: 50%;'
+        + 'transform: translate(-50%, -50%);'
+
+    const h2Style = 'font-size: 20px;color: #979797; margin: 32px 0;font-weight: normal'
+})
+`;
+
+export const OLD_STR = `
+Vue.component('app-exception', Exception)
+// Vue.component('app-auth', AuthComponent)
+
+auth.requestCurrentUser().then(user => {
+    injectCSRFTokenToHeaders();
+    if (!user.isAuthenticated) {
+        auth.redirectToLogin()
+    } else {
+        global.bus = bus
+        global.mainComponent = new Vue({
+            el: '#app',
+            router,
+            store,
+            template: '<App/>',
+            components: {
+                App
+            }
+        })
+    }
+}, err => {
+    let message;
+    if (err.status === 403) {
+        message = 'Sorry，您的权限不足!'
+        if (err.data && err.data.msg) {
+            message = err.data.msg;
+        }
+    } else {
+        message = '服务暂时未响应，请稍后再试。'
+    }
+
+    const divStyle = ''
+        + 'text-align: center;'
+        + 'width: 400px;'
+        + 'margin: auto;'
+        + 'position: absolute;'
+        + 'top: 50%;'
+        + 'left: 50%;'
+        + 'transform: translate(-50%, -50%);'
+
+    const h2Style = 'font-size: 20px;color: #979797; margin: 32px 0;font-weight: normal'
+})
+`;

package/knowledge/examples/code-diff/demo/diff-context.vue

@@ -0,0 +1,93 @@
+<template>
+  <suspense>
+    <bk-code-diff
+      :diff-context="state.diffContext"
+      :hljs="hljs"
+      :language="state.language"
+      :new-content="NEW_STR"
+      :old-content="OLD_STR"
+    />
+
+    <template #fallback>
+      <bk-loading loading />
+    </template>
+  </suspense>
+</template>
+
+<script setup>
+  import { onMounted, reactive, ref } from 'vue';
+
+  import hljs from 'highlight.js';
+
+  import { NEW_STR, OLD_STR } from './demo';
+
+  /**
+   * 动态引入语法包
+   * [string] language
+   */
+  function languageDynamicImport(language) {
+    switch (language) {
+      case 'css':
+        return import('highlight.js/lib/languages/css');
+      case 'java':
+        return import('highlight.js/lib/languages/java');
+      case 'javascript':
+        return import('highlight.js/lib/languages/javascript');
+      case 'json':
+        return import('highlight.js/lib/languages/json');
+      case 'scss':
+        return import('highlight.js/lib/languages/scss');
+      case 'less':
+        return import('highlight.js/lib/languages/less');
+      case 'stylus':
+        return import('highlight.js/lib/languages/stylus');
+      case 'shell':
+        return import('highlight.js/lib/languages/shell');
+      case 'bash':
+        return import('highlight.js/lib/languages/bash');
+      case 'cpp':
+        return import('highlight.js/lib/languages/cpp');
+      case 'go':
+        return import('highlight.js/lib/languages/go');
+      case 'xml':
+        return import('highlight.js/lib/languages/xml');
+      case 'python':
+        return import('highlight.js/lib/languages/python');
+      case 'typescript':
+        return import('highlight.js/lib/languages/typescript');
+      case 'sql':
+        return import('highlight.js/lib/languages/sql');
+      case 'ruby':
+        return import('highlight.js/lib/languages/ruby');
+      case 'vim':
+        return import('highlight.js/lib/languages/vim');
+      case 'php':
+        return import('highlight.js/lib/languages/php');
+      case 'perl':
+        return import('highlight.js/lib/languages/perl');
+      case 'powershell':
+        return import('highlight.js/lib/languages/powershell');
+      case 'makefile':
+        return import('highlight.js/lib/languages/makefile');
+    }
+  }
+
+  const languageModuleMap = ref({});
+  const state = reactive({
+    language: 'javascript',
+  });
+
+  onMounted(async () => {
+    let languageModule = languageModuleMap.value[state.language];
+    if (languageModule === undefined) {
+      const mod = await languageDynamicImport(state.language);
+      languageModule = mod.default;
+
+      languageModuleMap.value = {
+        ...languageModuleMap.value,
+        language: languageModule,
+      };
+    }
+    hljs.registerLanguage(state.language, languageModule);
+  });
+</script>

package/knowledge/examples/code-diff/demo/format.vue

@@ -0,0 +1,94 @@
+<template>
+  <suspense>
+    <bk-code-diff
+      :diff-context="state.diffContext"
+      :hljs="hljs"
+      :language="state.language"
+      :new-content="NEW_STR"
+      :old-content="OLD_STR"
+      diff-format="side-by-side"
+    />
+    <template #fallback>
+      <bk-loading loading />
+    </template>
+  </suspense>
+</template>
+
+<script setup>
+  import { onMounted, reactive, ref } from 'vue';
+
+  import hljs from 'highlight.js';
+
+  import { NEW_STR, OLD_STR } from './demo';
+
+  /**
+   * 动态引入语法包
+   * [string] language
+   */
+  function languageDynamicImport(language) {
+    switch (language) {
+      case 'css':
+        return import('highlight.js/lib/languages/css');
+      case 'java':
+        return import('highlight.js/lib/languages/java');
+      case 'javascript':
+        return import('highlight.js/lib/languages/javascript');
+      case 'json':
+        return import('highlight.js/lib/languages/json');
+      case 'scss':
+        return import('highlight.js/lib/languages/scss');
+      case 'less':
+        return import('highlight.js/lib/languages/less');
+      case 'stylus':
+        return import('highlight.js/lib/languages/stylus');
+      case 'shell':
+        return import('highlight.js/lib/languages/shell');
+      case 'bash':
+        return import('highlight.js/lib/languages/bash');
+      case 'cpp':
+        return import('highlight.js/lib/languages/cpp');
+      case 'go':
+        return import('highlight.js/lib/languages/go');
+      case 'xml':
+        return import('highlight.js/lib/languages/xml');
+      case 'python':
+        return import('highlight.js/lib/languages/python');
+      case 'typescript':
+        return import('highlight.js/lib/languages/typescript');
+      case 'sql':
+        return import('highlight.js/lib/languages/sql');
+      case 'ruby':
+        return import('highlight.js/lib/languages/ruby');
+      case 'vim':
+        return import('highlight.js/lib/languages/vim');
+      case 'php':
+        return import('highlight.js/lib/languages/php');
+      case 'perl':
+        return import('highlight.js/lib/languages/perl');
+      case 'powershell':
+        return import('highlight.js/lib/languages/powershell');
+      case 'makefile':
+        return import('highlight.js/lib/languages/makefile');
+    }
+  }
+
+  const languageModuleMap = ref({});
+  const state = reactive({
+    language: 'javascript',
+    diffContext: 20,
+  });
+
+  onMounted(async () => {
+    let languageModule = languageModuleMap.value[state.language];
+    if (languageModule === undefined) {
+      const mod = await languageDynamicImport(state.language);
+      languageModule = mod.default;
+
+      languageModuleMap.value = {
+        ...languageModuleMap.value,
+        language: languageModule,
+      };
+    }
+    hljs.registerLanguage(state.language, languageModule);
+  });
+</script>

package/knowledge/examples/code-diff/demo/theme.vue

@@ -0,0 +1,96 @@
+<template>
+  <suspense>
+    <bk-code-diff
+      :diff-context="state.diffContext"
+      :hljs="hljs"
+      :language="state.language"
+      :new-content="NEW_STR"
+      :old-content="OLD_STR"
+      :theme="theme"
+      diff-format="side-by-side"
+    />
+
+    <template #fallback>
+      <bk-loading loading />
+    </template>
+  </suspense>
+</template>
+
+<script setup>
+  import { onMounted, reactive, ref } from 'vue';
+
+  import hljs from 'highlight.js';
+
+  import { NEW_STR, OLD_STR } from './demo';
+
+  /**
+   * 动态引入语法包
+   * [string] language
+   */
+  function languageDynamicImport(language) {
+    switch (language) {
+      case 'css':
+        return import('highlight.js/lib/languages/css');
+      case 'java':
+        return import('highlight.js/lib/languages/java');
+      case 'javascript':
+        return import('highlight.js/lib/languages/javascript');
+      case 'json':
+        return import('highlight.js/lib/languages/json');
+      case 'scss':
+        return import('highlight.js/lib/languages/scss');
+      case 'less':
+        return import('highlight.js/lib/languages/less');
+      case 'stylus':
+        return import('highlight.js/lib/languages/stylus');
+      case 'shell':
+        return import('highlight.js/lib/languages/shell');
+      case 'bash':
+        return import('highlight.js/lib/languages/bash');
+      case 'cpp':
+        return import('highlight.js/lib/languages/cpp');
+      case 'go':
+        return import('highlight.js/lib/languages/go');
+      case 'xml':
+        return import('highlight.js/lib/languages/xml');
+      case 'python':
+        return import('highlight.js/lib/languages/python');
+      case 'typescript':
+        return import('highlight.js/lib/languages/typescript');
+      case 'sql':
+        return import('highlight.js/lib/languages/sql');
+      case 'ruby':
+        return import('highlight.js/lib/languages/ruby');
+      case 'vim':
+        return import('highlight.js/lib/languages/vim');
+      case 'php':
+        return import('highlight.js/lib/languages/php');
+      case 'perl':
+        return import('highlight.js/lib/languages/perl');
+      case 'powershell':
+        return import('highlight.js/lib/languages/powershell');
+      case 'makefile':
+        return import('highlight.js/lib/languages/makefile');
+    }
+  }
+
+  const theme = ref('dark');
+  const languageModuleMap = ref({});
+  const state = reactive({
+    language: 'javascript',
+  });
+
+  onMounted(async () => {
+    let languageModule = languageModuleMap.value[state.language];
+    if (languageModule === undefined) {
+      const mod = await languageDynamicImport(state.language);
+      languageModule = mod.default;
+
+      languageModuleMap.value = {
+        ...languageModuleMap.value,
+        language: languageModule,
+      };
+    }
+    hljs.registerLanguage(state.language, languageModule);
+  });
+</script>

package/knowledge/examples/code-diff/index.tsx

@@ -0,0 +1,171 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { defineComponent } from 'vue';
+
+import DemoBox from '../../components/demo-box';
+import DemoTitle from '../../components/demo-title';
+import PropsBox from '../../components/props-box';
+import { type IPropsTableItem } from '../../typings';
+import Basic from './demo/basic.vue';
+import DiffContext from './demo/diff-context.vue';
+import Format from './demo/format.vue';
+import Theme from './demo/theme.vue';
+// 输入框属性列表
+const codeDiffProps: IPropsTableItem[] = [
+  {
+    name: 'old-content',
+    type: 'String',
+    default: '',
+    desc: '旧内容',
+    optional: [],
+  },
+  {
+    name: 'new-content',
+    type: 'String',
+    default: '',
+    desc: '新内容',
+    optional: [],
+  },
+  {
+    name: 'diff-format',
+    type: 'String',
+    default: 'line-by-line',
+    desc: '展示方式',
+    optional: ['line-by-line', 'side-by-side'],
+  },
+  {
+    name: 'diff-context',
+    type: 'String',
+    default: '',
+    desc: '不同地方间隔多少行不隐藏	',
+    optional: [],
+  },
+  {
+    name: 'theme',
+    type: 'String',
+    default: 'light',
+    desc: '主题风格	',
+    optional: ['light', 'dark'],
+  },
+  {
+    name: 'language',
+    type: 'String',
+    default: 'javascript',
+    desc: '语法高亮',
+    optional: [
+      'css',
+      'java',
+      'javascript',
+      'json',
+      'scss',
+      'less',
+      'stylus',
+      'shell',
+      'bash',
+      'cpp',
+      'go',
+      'xml',
+      'python',
+      'typescript',
+      'sql',
+      'ruby',
+      'vim',
+      'php',
+      'perl',
+      'powershell',
+      'makefile',
+    ],
+  },
+  {
+    name: 'hljs',
+    type: 'Object',
+    default: null,
+    desc: 'highlight 对象',
+    optional: [],
+  },
+];
+
+const demos = [
+  {
+    // '基础输入框',
+    title: '基本用法',
+    desc: '配置对比内容 old-content 和 new-content',
+    componentName: 'code-diff',
+    demoName: 'demo/basic',
+    DemoComponent: Basic,
+  },
+  {
+    // '基础输入框',
+    title: '展示方式配置',
+    desc: '配置展示方式format',
+    componentName: 'code-diff',
+    demoName: 'demo/format',
+    DemoComponent: Format,
+  },
+  {
+    // '基础输入框',
+    title: '暗黑主题配置',
+    desc: '配置Theme',
+    componentName: 'code-diff',
+    demoName: 'demo/theme',
+    DemoComponent: Theme,
+  },
+  {
+    // '基础输入框',
+    title: '不隐藏行数配置',
+    desc: '配置diffContext',
+    componentName: 'code-diff',
+    demoName: 'demo/diff-context',
+    DemoComponent: DiffContext,
+  },
+];
+
+export default defineComponent({
+  name: 'Input',
+
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='代码差异对比使用highlight.js做代码高亮，所以在使用该组件之前，请先安装highlight.js依赖'
+          npmLink={`${import.meta.env.VITE_APP_BASE_URL ?? ''}/code-diff`}
+          name='Diff 差异对比'
+        />
+        {demos.map(({ DemoComponent, ...demo }) => (
+          <DemoBox {...demo}>
+            <DemoComponent />
+          </DemoBox>
+        ))}
+        <PropsBox
+          propsData={codeDiffProps}
+          subtitle=''
+          title='CodeDiff 属性'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/collapse/demo/collapse-accordion.vue

@@ -0,0 +1,32 @@
+<template>
+  <bk-collapse
+    class="bk-collapse-demo"
+    v-model="activeIndex"
+    :list="list"
+    accordion
+  />
+</template>
+<script setup>
+  import { ref } from 'vue';
+
+  import BkCollapse from '@bkui-vue/collapse';
+
+  const activeIndex = ref([0]);
+  const list = ref([
+    { name: '方案成熟', content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维' },
+    {
+      name: '覆盖全面',
+      content:
+        '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+    },
+    {
+      name: '开放平台',
+      content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+    },
+  ]);
+</script>
+<style scoped>
+  .bk-collapse-demo {
+    box-shadow: 0 0 8px 0px #ccc;
+  }
+</style>