feat: 新增平台更新记录页面
- 添加 changelog 类型定义和导出 - 新增更新记录页面组件,支持从 JSON 文件加载并展示版本变更信息 - 在路由中添加更新记录页面路径 - 在设置抽屉中为版本信息添加点击跳转功能,可查看完整更新记录 - 添加包含历史版本变更的 changelogs.json 数据文件
This commit is contained in:
1
public/changelogs.json
Normal file
1
public/changelogs.json
Normal file
@@ -0,0 +1 @@
|
|||||||
|
[]
|
||||||
13
src/apis/domain/version/changelog.ts
Normal file
13
src/apis/domain/version/changelog.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
export interface ChangeLogDescription {
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Changelog {
|
||||||
|
version: string;
|
||||||
|
date: string;
|
||||||
|
changes: {
|
||||||
|
breaks?: ChangeLogDescription[];
|
||||||
|
fixes?: ChangeLogDescription[];
|
||||||
|
feats?: ChangeLogDescription[];
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -1 +1,2 @@
|
|||||||
|
export * from './changelog';
|
||||||
export * from './version-info';
|
export * from './version-info';
|
||||||
|
|||||||
@@ -13,9 +13,12 @@ import destr from 'destr';
|
|||||||
import { isFunction } from 'es-toolkit';
|
import { isFunction } from 'es-toolkit';
|
||||||
import localforage from 'localforage';
|
import localforage from 'localforage';
|
||||||
import { DownloadIcon, Trash2Icon, UploadIcon } from 'lucide-vue-next';
|
import { DownloadIcon, Trash2Icon, UploadIcon } from 'lucide-vue-next';
|
||||||
import { NButton, NButtonGroup, NDivider, NDrawer, NDrawerContent, NDropdown, NFlex, NFormItem, NIcon, NInput, NInputNumber, NModal, NSwitch, NText, type DropdownOption } from 'naive-ui';
|
import { NButton, NButtonGroup, NDivider, NDrawer, NDrawerContent, NDropdown, NFlex, NFormItem, NIcon, NInput, NInputNumber, NModal, NSwitch, NText, NTooltip, type DropdownOption } from 'naive-ui';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { computed, ref, watch } from 'vue';
|
import { computed, ref, watch } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
const show = defineModel<boolean>('show', { default: false });
|
const show = defineModel<boolean>('show', { default: false });
|
||||||
|
|
||||||
@@ -284,6 +287,11 @@ const onDrawerAfterLeave = () => {
|
|||||||
abortControllers.value.retentionDays.abort();
|
abortControllers.value.retentionDays.abort();
|
||||||
abortControllers.value.snapStatus.abort();
|
abortControllers.value.snapStatus.abort();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onClickVersion = () => {
|
||||||
|
show.value = false;
|
||||||
|
router.push({ path: '/changelog' });
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -383,7 +391,16 @@ const onDrawerAfterLeave = () => {
|
|||||||
</NFlex>
|
</NFlex>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<NFlex vertical justify="flex-end" align="center" style="width: 100%; font-size: 12px; gap: 4px">
|
<NFlex vertical justify="flex-end" align="center" style="width: 100%; font-size: 12px; gap: 4px">
|
||||||
<NText :depth="3">平台版本: {{ versionInfo.version }} ({{ versionInfo.buildTime }})</NText>
|
<NTooltip>
|
||||||
|
<template #trigger>
|
||||||
|
<div @click="onClickVersion">
|
||||||
|
<NText :depth="3" style="cursor: pointer">平台版本: {{ versionInfo.version }} ({{ versionInfo.buildTime }})</NText>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #default>
|
||||||
|
<NText :depth="3">点击可查看平台更新记录</NText>
|
||||||
|
</template>
|
||||||
|
</NTooltip>
|
||||||
</NFlex>
|
</NFlex>
|
||||||
</template>
|
</template>
|
||||||
</NDrawerContent>
|
</NDrawerContent>
|
||||||
|
|||||||
58
src/pages/system/changelog/changelog-page.vue
Normal file
58
src/pages/system/changelog/changelog-page.vue
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { Changelog } from '@/apis';
|
||||||
|
import { useQuery } from '@tanstack/vue-query';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { NH1, NH2, NH3, NLi, NP, NScrollbar, NText, NUl } from 'naive-ui';
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
const CHENGELOGS_QUERY_KEY = 'changelogs-query';
|
||||||
|
|
||||||
|
const { data: changelogs = [] } = useQuery({
|
||||||
|
queryKey: computed(() => [CHENGELOGS_QUERY_KEY]),
|
||||||
|
queryFn: async ({ signal }) => {
|
||||||
|
const response = await axios.get<Changelog[]>(`changelogs.json?t=${Date.now()}`, { signal });
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<NScrollbar content-style="padding: 32px 24px 56px 56px" style="width: 100%; height: 100%">
|
||||||
|
<NH1>平台更新记录</NH1>
|
||||||
|
<template v-for="{ version, date, changes } in changelogs" :key="version">
|
||||||
|
<NH2>{{ version }}</NH2>
|
||||||
|
<NP>
|
||||||
|
<NText code>{{ date }}</NText>
|
||||||
|
</NP>
|
||||||
|
|
||||||
|
<template v-if="(changes.breaks?.length ?? 0) > 0">
|
||||||
|
<NH3>重大变更</NH3>
|
||||||
|
<template v-for="({ content }, index) in changes.breaks" :key="index">
|
||||||
|
<NUl>
|
||||||
|
<NLi>{{ content }}</NLi>
|
||||||
|
</NUl>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="(changes.fixes?.length ?? 0) > 0">
|
||||||
|
<NH3>修复</NH3>
|
||||||
|
<template v-for="({ content }, index) in changes.fixes" :key="index">
|
||||||
|
<NUl>
|
||||||
|
<NLi>{{ content }}</NLi>
|
||||||
|
</NUl>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="(changes.feats?.length ?? 0) > 0">
|
||||||
|
<NH3>新增</NH3>
|
||||||
|
<template v-for="({ content }, index) in changes.feats" :key="index">
|
||||||
|
<NUl>
|
||||||
|
<NLi>{{ content }}</NLi>
|
||||||
|
</NUl>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</NScrollbar>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@@ -56,6 +56,10 @@ const router = createRouter({
|
|||||||
return { path: '/404' };
|
return { path: '/404' };
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'changelog',
|
||||||
|
component: () => import('@/pages/system/changelog/changelog-page.vue'),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/:pathMatch(.*)*',
|
path: '/:pathMatch(.*)*',
|
||||||
component: () => import('@/pages/system/error/not-found-page.vue'),
|
component: () => import('@/pages/system/error/not-found-page.vue'),
|
||||||
|
|||||||
Reference in New Issue
Block a user