@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/blueking/functional-deps/index.tsx

@@ -0,0 +1,146 @@
+/*
+ * 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 { IPropsTableItem } from '../../../typings';
+import BaseDemo from './base-demo.vue';
+import DialogDemo from './dialog-demo.vue';
+import PartialDemo from './partial-demo.vue';
+const menuPropsJson: IPropsTableItem[] = [
+  {
+    name: 'mode',
+    type: "'dialog' | 'page' | 'partial'",
+    default: "'page'",
+    desc: '展示模式',
+    optional: ["'dialog'", "'page'", "'partial'"],
+  },
+  {
+    name: 'showDialog',
+    type: 'boolean',
+    default: 'false',
+    desc: '弹窗dialog模式时是否显示dialog，其他模式下无效',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'title',
+    type: 'string',
+    default: '',
+    desc: '功能依赖标题',
+    optional: [],
+  },
+  {
+    name: 'functionalDesc',
+    type: 'string',
+    default: '',
+    desc: '功能依赖描述',
+    optional: [],
+  },
+  {
+    name: 'guideTitle',
+    type: 'string',
+    default: '',
+    desc: '功能指引标题',
+    optional: [],
+  },
+  {
+    name: 'guideDescList',
+    type: 'string[]',
+    default: '',
+    desc: '功能指引描述列表',
+    optional: [],
+  },
+];
+const eventJson = [
+  {
+    name: 'update:showDialog',
+    desc: '更新showDialog',
+    params: 'value: boolean',
+  },
+  {
+    name: 'gotoMore',
+    desc: '点击了解更多',
+    params: '',
+  },
+];
+const eventColumnMap = {
+  name: '名称',
+  desc: '说明',
+  params: '参数',
+};
+
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='业务组件 Functional Dependency， 用于蓝鲸平台下各个应用中功能依赖项展示使用，支持 Vue2/Vue3 版本 无差别使用'
+          name='Functional Dependency'
+          npmLink='https://www.npmjs.com/package/@blueking/functional-dependency'
+        />
+        <DemoBox
+          componentName='blueking/functional-deps'
+          demoName='base-demo'
+          desc='配置 mode 为 page'
+          subtitle='组件的 page 模式'
+          title='默认展示'
+        >
+          <BaseDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='blueking/functional-deps'
+          demoName='dialog-demo'
+          desc='配置 mode 为 dialog'
+          subtitle='组件的 dialog 弹窗模式'
+          title='弹窗模式'
+        >
+          <DialogDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='blueking/functional-deps'
+          demoName='partial-demo'
+          desc='配置 mode 为 partial'
+          subtitle='组件的 partial 局部展示模式'
+          title='局部展示模式'
+        >
+          <PartialDemo />
+        </DemoBox>
+        <PropsBox
+          propsData={menuPropsJson}
+          title='组件属性'
+        />
+        <PropsBox
+          columnMap={eventColumnMap}
+          propsData={eventJson}
+          title='组件事件'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/blueking/functional-deps/partial-demo.vue

@@ -0,0 +1,19 @@
+<template>
+  <functional-dependency
+    :guide-desc-list="[
+      '1. 配置平台：ES 服务',
+      '2. 蓝鲸监控：监控日志套餐',
+      '3. 容器管理平台：容器管理套餐',
+      '4. 持续集成平台：持续集成套餐',
+    ]"
+    functional-desc="使用容器服务，蓝鲸将为您快速搭建、运维和管理容器集群，您可以轻松对容器进行启动、停止等操作，也可以查看集群、容器及服务的状态。"
+    guide-title="如需使用该功能，需要部署："
+    mode="partial"
+    title="暂无集群容器功能"
+  />
+</template>
+<script setup lang="ts">
+  import FunctionalDependency from '@blueking/functional-dependency';
+
+  import '@blueking/functional-dependency/vue3/vue3.css';
+</script>

package/knowledge/examples/blueking/log-search/base-demo.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="app">
+    <log-search
+      :service-config="serviceConfig"
+      :show-auto-query="true"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+  import LogSearch from '@blueking/log-search';
+  // 如果项目没有安装bkui-vue, dayjs 则可使用全量版本
+  // import LogSearch from '@blueking/log-search/vue3';
+
+  import '@blueking/log-search/dist/vue3-light.css';
+
+  const serviceConfig = {
+    fetchIndexSetList: () => Promise.resolve(), // 索引集列表
+    fetchSearchConditions: () => Promise.resolve(), // 查询条件
+    fetchSearchConditionOptions: () => Promise.resolve(), // 查询条件候选值
+    fetchSearchHistory: () => Promise.resolve(), // 历史查询
+    fetchQueryStringInspect: () => Promise.resolve(), // 检索语句语法检测
+    fetchUserSettings: () => Promise.resolve(), // 用户配置
+    updateUserSettings: () => Promise.resolve(), // 保存用户配置
+    fetchLogSearch: () => Promise.resolve(), // 表格查询
+    fetchLogBarChart: () => Promise.resolve(), // 趋势图查询
+    fetchLogFields: () => Promise.resolve(), // 表格字段
+    fetchFieldsSettings: () => Promise.resolve(), // 用户使用的表格字段配置
+    createFieldSettings: () => Promise.resolve(), // 新增表格字段配置
+    updateFieldSettings: () => Promise.resolve(), // 保存表格字段配置
+    updateUseFieldSettings: () => Promise.resolve(), // 更新用户当前使用表格字段配置
+    deleteFieldSettings: () => Promise.resolve(), // 删除表格字段配置
+    exportLog: () => Promise.resolve(), // 日志下载
+    fetchLogContext: () => Promise.resolve(), // 上下文
+    fetchRealTimeLog: () => Promise.resolve(), // 实时日志
+  };
+</script>

package/knowledge/examples/blueking/log-search/index.tsx

@@ -0,0 +1,102 @@
+/*
+ * 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 { IPropsTableItem } from '../../../typings';
+import BaseDemo from './base-demo.vue';
+import ModuleCombinaDemo from './module-combina-demo.vue';
+const menuPropsJson: IPropsTableItem[] = [
+  {
+    name: 'showAutoQuery',
+    type: 'boolean',
+    default: 'false',
+    desc: '是否展示自动/手动查询配置',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'showChartPanel',
+    type: 'boolean',
+    default: 'true',
+    desc: '是否展示趋势图',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'showStatisticsPanel',
+    type: 'boolean',
+    default: 'true',
+    desc: '是否展示字段统计',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'serviceConfig',
+    type: 'Object',
+    default: null,
+    desc: '数据源配置',
+    optional: [],
+  },
+];
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='业务组件 Log Search， 由索引集选择、查询语句输入、过滤条件选择等多方检索条件组合而成，还包含了自动解析查询语句，切换自动查询或手动查询能力等。支持 Vue2/Vue3 版本 无差别使用'
+          name='Log Search'
+          npmLink='https://www.npmjs.com/package/@blueking/log-search'
+        />
+        <DemoBox
+          componentName='blueking/log-search'
+          demoName='base-demo'
+          desc='配置数据源 serviceConfig 直接使用'
+          subtitle='组件的基础用法'
+          title='基础用法'
+        >
+          <BaseDemo />
+        </DemoBox>
+
+        <DemoBox
+          componentName='blueking/log-search'
+          demoName='module-combina-demo'
+          desc=''
+          showTools={false}
+          subtitle='可对组件功能进行拼装与组合，自定义使用组合形态。'
+          title='功能组合示例'
+        >
+          <ModuleCombinaDemo />
+        </DemoBox>
+
+        <PropsBox
+          propsData={menuPropsJson}
+          title='组件属性'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/blueking/log-search/module-combina-demo.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="app">
+    <p class="title">全功能组合</p>
+    <img
+      class="example-image"
+      :src="examplaImgUlr1"
+    />
+    <p class="title">无查询结果统计/收起查询结果统计（收起时有展开icon）</p>
+    <img
+      class="example-image"
+      :src="examplaImgUlr2"
+    />
+    <p class="title">无查询结果统计与图表趋势</p>
+    <img
+      class="example-image"
+      :src="examplaImgUlr3"
+    />
+  </div>
+</template>
+
+<script setup>
+  import examplaImgUlr1 from '../../../imgs/log-search-example-1.png';
+  import examplaImgUlr2 from '../../../imgs/log-search-example-2.png';
+  import examplaImgUlr3 from '../../../imgs/log-search-example-3.png';
+</script>
+
+<style>
+  .example-image {
+    width: 80%;
+    height: 100%;
+    margin-bottom: 24px;
+    object-fit: cover;
+  }
+
+  .title {
+    font-size: 14px;
+    font-weight: 500;
+  }
+</style>

package/knowledge/examples/blueking/release-note/async-loading-demo.vue

@@ -0,0 +1,40 @@
+<template>
+  <Button theme="primary" @click="showSyncReleaseNote = true">
+      查看版本日志
+  </Button>
+  <ReleaseNote
+    v-model:show="showSyncReleaseNote"
+    :detail="releaseNoteDetail"
+    :list="syncReleaseList"
+    :loading="syncReleaseNoteLoading"
+    @selected="handleSelectRelease"/>
+</template>
+<script setup>
+  import { ref } from 'vue';
+  import { Button } from 'bkui-vue';
+  import ReleaseNote from '@blueking/release-note';
+  import '@blueking/release-note/vue3/vue3.css';
+
+  const showSyncReleaseNote = ref(false);
+  const syncReleaseNoteLoading = ref(false);
+  const syncReleaseList = (() => {
+    const versions = [];
+    for (let i = 0; i < 10; i++) {
+      versions.push({
+        date: `2024-${i + 1}-01`,
+        title: `v1.0.${i}`,
+      });
+    }
+    return versions;
+  })();
+  const releaseNoteDetail = ref('');
+  const showSlotReleaseNote = ref(false);
+
+  const handleSelectRelease = version => {
+    syncReleaseNoteLoading.value = true;
+    setTimeout(() => {
+      releaseNoteDetail.value = `## ${version.title} 版本更新日志 \n ### 新增\n\n- [新增] 内置\` ES6+\` 语言转义能力增强\n- [新增] 任务通知中心\n- [新增] 控制台新增命令 cleanAppCache\n### 优化\n- [优化] 上传时版本号推荐\n- [优化] 云开发云调用快速启动模板\n- [优化] 插件增加工具回退时的保护机制\n- [优化] 素材管理，不再维护的提示\n- [优化] 体验评分支持“iPhone X兼容”检验规则\n### 修复\n- [修复] sitemap，控制台显示当前页面是否索引\n- [优化] project.config.json 中新增设置 uploadWithSourceMap\n- [优化] createUDPSocket bindUDPSocket 改为同步接口\n`;
+      syncReleaseNoteLoading.value = false;
+    }, 1000);
+  };
+</script>

package/knowledge/examples/blueking/release-note/base-demo.vue

@@ -0,0 +1,23 @@
+<template>
+  <Button theme="primary" @click="showReleaseNote = true">查看版本日志</Button>
+  <release-note v-model:show="showReleaseNote" :list="releaseList" />
+</template>
+<script setup>
+  import { ref } from 'vue';
+  import { Button } from 'bkui-vue';
+  import ReleaseNote from '@blueking/release-note';
+  import '@blueking/release-note/vue3/vue3.css';
+
+  const showReleaseNote = ref(false);
+		const releaseList = (() => {
+			const versions = [];
+			for(let i = 0; i < 10; i++) {
+				versions.push({
+					title: `v1.0.${10 - i}`,
+					date: `2024-${12 - i}-01`,
+					detail: `## v1.0.${10 - i} 版本更新日志 \n ### 新增\n\n- [新增] 内置\` ES6+\` 语言转义能力增强\n- [新增] 任务通知中心\n- [新增] 控制台新增命令 cleanAppCache\n### 优化\n- [优化] 上传时版本号推荐\n- [优化] 云开发云调用快速启动模板\n- [优化] 插件增加工具回退时的保护机制\n- [优化] 素材管理，不再维护的提示\n- [优化] 体验评分支持“iPhone X兼容”检验规则\n### 修复\n- [修复] sitemap，控制台显示当前页面是否索引\n- [优化] project.config.json 中新增设置 uploadWithSourceMap\n- [优化] createUDPSocket bindUDPSocket 改为同步接口\n`
+				});
+			}
+			return versions;
+		})();
+</script>

package/knowledge/examples/blueking/release-note/index.tsx

@@ -0,0 +1,208 @@
+/*
+ * 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 AsyncLoadingDemo from './async-loading-demo.vue';
+import BaseDemo from './base-demo.vue';
+import SlotDemo from './slot-demo.vue';
+
+const propsJson = [
+  {
+    name: 'active',
+    type: 'String',
+    default: 'list属性传入值的第一个版本',
+    desc: '当前查看选中版本',
+    optional: [],
+  },
+  {
+    name: 'current',
+    type: 'String',
+    default: 'list属性传入值的第一个版本',
+    desc: '当前最新的版本',
+    optional: [],
+  },
+  {
+    name: 'detail',
+    type: 'String',
+    default: '',
+    desc: '日志详情内容, 即markdown字符串',
+    optional: [],
+  },
+  {
+    name: 'detailKey',
+    type: 'String',
+    default: 'detail',
+    desc: 'list属性传入数据中日志详情对应key',
+    optional: [],
+  },
+  {
+    name: 'list',
+    type: '{ [key: string]: string }[]',
+    default: '[]',
+    desc: '版本列表',
+    optional: [],
+  },
+  {
+    name: 'loading',
+    type: 'Boolean',
+    default: 'false',
+    desc: '版本详情区域loading',
+    optional: [],
+  },
+  {
+    name: 'maxLeftWidth',
+    type: 'Number',
+    default: '580',
+    desc: '左侧版本列表区域拖动最大宽度',
+    optional: [],
+  },
+  {
+    name: 'minLeftWidth',
+    type: 'Number',
+    default: '180',
+    desc: '左侧版本列表区域拖动最小宽度',
+    optional: [],
+  },
+  {
+    name: 'show',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否显示版本日志弹窗',
+    optional: [],
+  },
+  {
+    name: 'subTitleKey',
+    type: 'String',
+    default: 'date',
+    desc: 'list属性传入数据中副标题对应key',
+    optional: [],
+  },
+  {
+    name: 'titleKey',
+    type: 'String',
+    default: 'title',
+    desc: 'list属性传入数据中主标题对应key，在list数据中主标题的值需要保证唯一性',
+    optional: [],
+  },
+  {
+    name: 'currentVersionText',
+    type: 'String',
+    default: '当前版本/Current',
+    desc: '当前版本文本，用于标识当前版本',
+    optional: [],
+  },
+];
+
+const slotsJson = [
+  {
+    name: 'list',
+    desc: '左侧版本列表区域',
+    params: '',
+  },
+  {
+    name: 'detail',
+    desc: '右侧日志详情区域',
+    params: '',
+  },
+];
+
+const eventColumnMap = {
+  name: '名称',
+  desc: '说明',
+  params: '参数',
+};
+
+const eventJson = [
+  {
+    name: 'showChange',
+    desc: '日志弹窗打开、关闭时触发',
+    params: 'value: boolean',
+  },
+  {
+    name: 'selected',
+    desc: '左侧版本列表选中版本时触发',
+    params: 'value: string',
+  },
+];
+
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='业务组件 Release， 用于呈现产品版本更新明细的组件'
+          name='ReleaseNote'
+          npmLink='https://www.npmjs.com/package/@blueking/release-note'
+        />
+        <DemoBox
+          componentName='blueking/release-note'
+          demoName='base-demo'
+          desc=''
+          subtitle=''
+          title='基础用法'
+        >
+          <BaseDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='blueking/release-note'
+          demoName='async-loading-demo'
+          desc=''
+          subtitle=''
+          title='动态加载日志详情'
+        >
+          <AsyncLoadingDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='blueking/release-note'
+          demoName='slot-demo'
+          desc=''
+          subtitle=''
+          title='插槽用法'
+        >
+          <SlotDemo />
+        </DemoBox>
+        <PropsBox
+          propsData={propsJson}
+          title='Props属性'
+        />
+        <PropsBox
+          columnMap={eventColumnMap}
+          propsData={slotsJson}
+          title='Slots属性'
+        />
+        <PropsBox
+          columnMap={eventColumnMap}
+          propsData={eventJson}
+          title='组件事件'
+        />
+      </div>
+    );
+  },
+});