diff --git a/packages/@core/preferences/src/config.ts b/packages/@core/preferences/src/config.ts index 68f7d555..248d7cc4 100644 --- a/packages/@core/preferences/src/config.ts +++ b/packages/@core/preferences/src/config.ts @@ -4,7 +4,7 @@ const defaultPreferences: Preferences = { app: { accessMode: 'frontend', authPageLayout: 'panel-right', - checkUpdatesPollingTime: 1, + checkUpdatesInterval: 1, colorGrayMode: false, colorWeakMode: false, compact: false, diff --git a/packages/@core/preferences/src/types.ts b/packages/@core/preferences/src/types.ts index fc58415c..81c10d23 100644 --- a/packages/@core/preferences/src/types.ts +++ b/packages/@core/preferences/src/types.ts @@ -22,7 +22,7 @@ interface AppPreferences { /** 登录注册页面布局 */ authPageLayout: AuthPageLayoutType; /** 检查更新轮询时间 */ - checkUpdatesPollingTime: number; + checkUpdatesInterval: number; /** 是否开启灰色模式 */ colorGrayMode: boolean; /** 是否开启色弱模式 */ diff --git a/packages/effects/layouts/src/basic/layout.vue b/packages/effects/layouts/src/basic/layout.vue index 31da64da..c5cbf3bf 100644 --- a/packages/effects/layouts/src/basic/layout.vue +++ b/packages/effects/layouts/src/basic/layout.vue @@ -313,7 +313,7 @@ watch( diff --git a/packages/effects/layouts/src/widgets/check-updates/check-updates.vue b/packages/effects/layouts/src/widgets/check-updates/check-updates.vue index ccdbf165..291de5b8 100644 --- a/packages/effects/layouts/src/widgets/check-updates/check-updates.vue +++ b/packages/effects/layouts/src/widgets/check-updates/check-updates.vue @@ -6,13 +6,13 @@ import { ToastAction, useToast } from '@vben-core/shadcn-ui'; interface Props { // 轮训时间,分钟 - pollingTime?: number; + checkUpdatesInterval?: number; } defineOptions({ name: 'CheckUpdates' }); const props = withDefaults(defineProps(), { - pollingTime: 1, + checkUpdatesInterval: 1, }); const lastVersionTag = ref(''); @@ -38,7 +38,6 @@ async function getVersionTag() { async function checkForUpdates() { const versionTag = await getVersionTag(); - if (!versionTag) { return; } @@ -50,12 +49,11 @@ async function checkForUpdates() { } if (lastVersionTag.value !== versionTag) { - lastVersionTag.value = versionTag; clearInterval(timer.value); - handleNotice(); + handleNotice(versionTag); } } -function handleNotice() { +function handleNotice(versionTag: string) { const { dismiss } = toast({ action: h('div', [ h( @@ -74,6 +72,7 @@ function handleNotice() { altText: $t('common.refresh'), class: 'bg-primary hover:bg-primary-hover mx-1', onClick: () => { + lastVersionTag.value = versionTag; window.location.reload(); }, }, @@ -90,7 +89,10 @@ function handleNotice() { function start() { // 每5分钟检查一次 - timer.value = setInterval(checkForUpdates, props.pollingTime * 60 * 1000); + timer.value = setInterval( + checkForUpdates, + props.checkUpdatesInterval * 60 * 1000, + ); } function handleVisibilitychange() { diff --git a/website/.vitepress/config.mts b/website/.vitepress/config.mts index a2ededfd..782ef5a4 100644 --- a/website/.vitepress/config.mts +++ b/website/.vitepress/config.mts @@ -247,8 +247,9 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] { // { link: 'in-depth/layout', text: '布局' }, { link: 'in-depth/theme', text: '主题' }, { link: 'in-depth/access', text: '权限' }, - { link: 'in-depth/features', text: '功能' }, { link: 'in-depth/locale', text: '国际化' }, + { link: 'in-depth/features', text: '常用功能' }, + { link: 'in-depth/check-updates', text: '检查更新' }, { link: 'in-depth/loading', text: '全局loading' }, ], }, diff --git a/website/src/guide/essentials/settings.md b/website/src/guide/essentials/settings.md index fba157fd..c92abfae 100644 --- a/website/src/guide/essentials/settings.md +++ b/website/src/guide/essentials/settings.md @@ -174,7 +174,7 @@ const defaultPreferences: Preferences = { app: { accessMode: 'frontend', authPageLayout: 'panel-right', - checkUpdatesPollingTime: 1, + checkUpdatesInterval: 1, colorGrayMode: false, colorWeakMode: false, compact: false, @@ -291,7 +291,7 @@ interface AppPreferences { /** 登录注册页面布局 */ authPageLayout: AuthPageLayoutType; /** 检查更新轮询时间 */ - checkUpdatesPollingTime: number; + checkUpdatesInterval: number; /** 是否开启灰色模式 */ colorGrayMode: boolean; /** 是否开启色弱模式 */ diff --git a/website/src/guide/in-depth/check-updates.md b/website/src/guide/in-depth/check-updates.md new file mode 100644 index 00000000..19f6f6a6 --- /dev/null +++ b/website/src/guide/in-depth/check-updates.md @@ -0,0 +1,48 @@ +# 检查更新 + +## 介绍 + +当网站更新时,你可能会想要检查更新,框架提供了这个能力,通过轮训检查更新,你可以在应用的 `preferences.ts` 文件中配置 `checkUpdatesInterval` 和 `enableCheckUpdates` 字段,用于开启和设置检查更新的时间间隔,单位为`分钟`。 + +```ts +import { defineOverridesPreferences } from '@vben/preferences'; + +export const overridesPreferences = defineOverridesPreferences({ + // overrides + app: { + // 是否开启检查更新 + enableCheckUpdates: true, + // 检查更新的时间间隔,单位为分钟 + checkUpdatesInterval: 1, + }, +}); +``` + +## 效果 + +当检测到更新时,会弹出提示框,提示用户是否刷新页面: + +![check-updates](/guide/update-notice.png) + +## 替换为检测 + +如果你需要通过其他方式检查更新,比如通过接口,以便更灵活的控制更新的逻辑,可以做到强制刷新、显示更新内容等,你可以通过修改 `@vben/layouts` 下面的 `src/widgets/check-updates/check-updates.vue`文件来实现。 + +```ts +// 这里可以替换为你的检查更新逻辑 +async function getVersionTag() { + try { + const response = await fetch('/', { + cache: 'no-cache', + method: 'HEAD', + }); + + return ( + response.headers.get('etag') || response.headers.get('last-modified') + ); + } catch { + console.error('Failed to fetch version tag'); + return null; + } +} +``` diff --git a/website/src/guide/in-depth/features.md b/website/src/guide/in-depth/features.md index 1ecfd73c..b3124e1c 100644 --- a/website/src/guide/in-depth/features.md +++ b/website/src/guide/in-depth/features.md @@ -1,4 +1,4 @@ -# 功能 +# 常用功能 一些常用的功能合集。 @@ -59,7 +59,7 @@ export const overridesPreferences = defineOverridesPreferences({ - 默认值:`false` -开启后网页会显示水印。在应用目录下的`preferences.ts`,开启或者关闭即可。 +开启后网页会显示水印,在应用目录下的`preferences.ts`,开启或者关闭即可。 ```ts export const overridesPreferences = defineOverridesPreferences({ @@ -70,7 +70,7 @@ export const overridesPreferences = defineOverridesPreferences({ }); ``` -如果你想更新水印的内容,可以这么做,参数可以参考 [watermark-js-plus](https://zhensherlock.github.io/watermark-js-plus/): +如果你想更新水印的内容,可以这么做,参数可以参考 [watermark-js-plus](https://zhensherlock.github.io/watermark-js-plus/): ```ts import { useWatermark } from '@vben/hooks'; diff --git a/website/src/public/guide/update-notice.png b/website/src/public/guide/update-notice.png new file mode 100644 index 00000000..a4436cfb Binary files /dev/null and b/website/src/public/guide/update-notice.png differ