瀏覽代碼

chore: update docs [deploy]

vben 8 月之前
父節點
當前提交
9307093fbc

+ 1 - 1
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,

+ 1 - 1
packages/@core/preferences/src/types.ts

@@ -22,7 +22,7 @@ interface AppPreferences {
   /** 登录注册页面布局 */
   authPageLayout: AuthPageLayoutType;
   /** 检查更新轮询时间 */
-  checkUpdatesPollingTime: number;
+  checkUpdatesInterval: number;
   /** 是否开启灰色模式 */
   colorGrayMode: boolean;
   /** 是否开启色弱模式 */

+ 1 - 1
packages/effects/layouts/src/basic/layout.vue

@@ -313,7 +313,7 @@ watch(
       <Toaster />
       <CheckUpdates
         v-if="preferences.app.enableCheckUpdates"
-        :polling-time="preferences.app.checkUpdatesPollingTime"
+        :check-updates-interval="preferences.app.checkUpdatesInterval"
       />
 
       <Transition v-if="preferences.widget.lockScreen" name="slide-up">

+ 9 - 7
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<Props>(), {
-  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() {

+ 2 - 1
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' },
       ],
     },

+ 2 - 2
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;
   /** 是否开启色弱模式 */

+ 48 - 0
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;
+  }
+}
+```

+ 3 - 3
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';

二進制
website/src/public/guide/update-notice.png