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