release-note 版本日志组件

用于呈现产品版本更新明细的组件，同时支持vue2和vue3的项目使用。

安装

npm i @blueking/release-note

使用

在 vue2/3 中引用的区别

• vue2 的引入方式

import ReleaseNote from '@blueking/release-note/vue2'; // 如果构建工具为webpack，版本要求为webpack5
import '@blueking/release-note/vue2/vue2.css';

• vue3 的引入方式

import ReleaseNote from '@blueking/release-note';
import '@blueking/release-note/vue3/vue3.css';

1. 基础用法(vue3)

	<template>
		<ReleaseNote v-model:show="showReleaseNote" :list="releaseList" />
		<Button theme="primary" @click="showReleaseNote = true">查看版本日志</Button>
	</template>
	<script lang="ts" setup>
		import { Button } from 'bkui-vue';
		import { ref } from '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>

2. 动态加载日志详情(vue3)

	<template>
		<Button style="margin-left: 8px" theme="primary" @click="showSyncReleaseNote = true">查看版本日志（动态加载日志详情）</Button>
		<ReleaseNote
			v-model:show="showSyncReleaseNote"
			:list="syncReleaseList"
			:detail="releaseNoteDetail"
			:loading="syncReleaseNoteLoading"
			@selected="handleSelectRelease" />
	</template>
	<script lang="ts" setup>
		import { Button } from 'bkui-vue';
		import { ref } from '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({
					title: `v1.0.${i}`,
					date: `2024-${i + 1}-01`
				});
			}
			return versions;
		})();
		const releaseNoteDetail = ref('');

		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>

3. 使用插槽(vue3)

vue2版本不支持使用插槽。有插槽需求，可以使用bkui-vue2组件库中的VersionLog组件。

	<template>
		<Button style="margin-left: 8px" theme="primary" @click="showSlotReleaseNote = true">查看版本日志（使用插槽）</Button>
		<ReleaseNote v-model:show="showSlotReleaseNote">
			<template #list>
				<div>左侧版本列表区域</div>
			</template>
			<template #detail>
				<div>右侧日志详情区域</div>
			</template>
		</ReleaseNote>
	</template>
	<script lang="ts" setup>
		import { Button } from 'bkui-vue';
		import { ref } from 'vue';
		import ReleaseNote from '@blueking/release-note';
		import '@blueking/release-note/vue3/vue3.css';

		const showSlotReleaseNote = ref(false);

	</script>

Props

| 名称 | 说明 | 类型 | 可选值 | 默认值 | | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- | -------- | | show | 是否显示版本日志 | Boolean | Boolean | false | | list | 版本日志列表，默认格式为[{ title: "v1.0.0", date: "2021-01-01", detail: "### 新增 \n - 增加xxx功能" }, ...], 其中属性都支持自定义key名称 | Array | - | - | | title-key | list属性传入数据中主标题对应key，默认值为title，在list数据中主标题的值需要保证唯一性 | String | - | title | | sub-title-key | list属性传入数据中副标题对应key，默认值为date | String | - | date | | detail-key | list属性传入数据中日志详情对应key，默认值为detail | String | - | detail | | detail | 右侧版本详情区域展示的内容，需要为合法的markdown字符串 | String | - | - | | active | 当前选中的版本，值可设置范围为list属性数据中的主标题 | String | - | - | | current | 当前最新版本，值可设置范围为list属性数据中的主标题 | String | - | - | | current-version-text | 用于标识当前版本的tag文案 | String | - | 当前版本 | | loading | 右侧版本详情区域是否展示loading状态 | Boolean | Boolean | false | | min-left-width | 左侧版本列表区域最小宽度 | Number | - | 180 | | min-left-width | 左侧版本列表区域最大宽度 | Number | - | 580 |

事件

| 方法名 | 说明 | 参数 | | ---------- | -------------------------- | ------------------------- | | showChange | 日志弹窗打开、关闭时触发 | 打开时为true，隐藏为false | | selected | 左侧版本列表选中版本时触发 | 版本详情 |

插槽

| name | 说明 | | ------ | ---------------- | | list | 左侧版本列表区域 | | detail | 右侧日志详情区域 |