chore: update docs [deploy]
							parent
							
								
									a80a9135fc
								
							
						
					
					
						commit
						9307093fbc
					
				|  | @ -4,7 +4,7 @@ const defaultPreferences: Preferences = { | ||||||
|   app: { |   app: { | ||||||
|     accessMode: 'frontend', |     accessMode: 'frontend', | ||||||
|     authPageLayout: 'panel-right', |     authPageLayout: 'panel-right', | ||||||
|     checkUpdatesPollingTime: 1, |     checkUpdatesInterval: 1, | ||||||
|     colorGrayMode: false, |     colorGrayMode: false, | ||||||
|     colorWeakMode: false, |     colorWeakMode: false, | ||||||
|     compact: false, |     compact: false, | ||||||
|  |  | ||||||
|  | @ -22,7 +22,7 @@ interface AppPreferences { | ||||||
|   /** 登录注册页面布局 */ |   /** 登录注册页面布局 */ | ||||||
|   authPageLayout: AuthPageLayoutType; |   authPageLayout: AuthPageLayoutType; | ||||||
|   /** 检查更新轮询时间 */ |   /** 检查更新轮询时间 */ | ||||||
|   checkUpdatesPollingTime: number; |   checkUpdatesInterval: number; | ||||||
|   /** 是否开启灰色模式 */ |   /** 是否开启灰色模式 */ | ||||||
|   colorGrayMode: boolean; |   colorGrayMode: boolean; | ||||||
|   /** 是否开启色弱模式 */ |   /** 是否开启色弱模式 */ | ||||||
|  |  | ||||||
|  | @ -313,7 +313,7 @@ watch( | ||||||
|       <Toaster /> |       <Toaster /> | ||||||
|       <CheckUpdates |       <CheckUpdates | ||||||
|         v-if="preferences.app.enableCheckUpdates" |         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"> |       <Transition v-if="preferences.widget.lockScreen" name="slide-up"> | ||||||
|  |  | ||||||
|  | @ -6,13 +6,13 @@ import { ToastAction, useToast } from '@vben-core/shadcn-ui'; | ||||||
| 
 | 
 | ||||||
| interface Props { | interface Props { | ||||||
|   // 轮训时间,分钟 |   // 轮训时间,分钟 | ||||||
|   pollingTime?: number; |   checkUpdatesInterval?: number; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| defineOptions({ name: 'CheckUpdates' }); | defineOptions({ name: 'CheckUpdates' }); | ||||||
| 
 | 
 | ||||||
| const props = withDefaults(defineProps<Props>(), { | const props = withDefaults(defineProps<Props>(), { | ||||||
|   pollingTime: 1, |   checkUpdatesInterval: 1, | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| const lastVersionTag = ref(''); | const lastVersionTag = ref(''); | ||||||
|  | @ -38,7 +38,6 @@ async function getVersionTag() { | ||||||
| 
 | 
 | ||||||
| async function checkForUpdates() { | async function checkForUpdates() { | ||||||
|   const versionTag = await getVersionTag(); |   const versionTag = await getVersionTag(); | ||||||
| 
 |  | ||||||
|   if (!versionTag) { |   if (!versionTag) { | ||||||
|     return; |     return; | ||||||
|   } |   } | ||||||
|  | @ -50,12 +49,11 @@ async function checkForUpdates() { | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   if (lastVersionTag.value !== versionTag) { |   if (lastVersionTag.value !== versionTag) { | ||||||
|     lastVersionTag.value = versionTag; |  | ||||||
|     clearInterval(timer.value); |     clearInterval(timer.value); | ||||||
|     handleNotice(); |     handleNotice(versionTag); | ||||||
|   } |   } | ||||||
| } | } | ||||||
| function handleNotice() { | function handleNotice(versionTag: string) { | ||||||
|   const { dismiss } = toast({ |   const { dismiss } = toast({ | ||||||
|     action: h('div', [ |     action: h('div', [ | ||||||
|       h( |       h( | ||||||
|  | @ -74,6 +72,7 @@ function handleNotice() { | ||||||
|           altText: $t('common.refresh'), |           altText: $t('common.refresh'), | ||||||
|           class: 'bg-primary hover:bg-primary-hover mx-1', |           class: 'bg-primary hover:bg-primary-hover mx-1', | ||||||
|           onClick: () => { |           onClick: () => { | ||||||
|  |             lastVersionTag.value = versionTag; | ||||||
|             window.location.reload(); |             window.location.reload(); | ||||||
|           }, |           }, | ||||||
|         }, |         }, | ||||||
|  | @ -90,7 +89,10 @@ function handleNotice() { | ||||||
| 
 | 
 | ||||||
| function start() { | function start() { | ||||||
|   // 每5分钟检查一次 |   // 每5分钟检查一次 | ||||||
|   timer.value = setInterval(checkForUpdates, props.pollingTime * 60 * 1000); |   timer.value = setInterval( | ||||||
|  |     checkForUpdates, | ||||||
|  |     props.checkUpdatesInterval * 60 * 1000, | ||||||
|  |   ); | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| function handleVisibilitychange() { | function handleVisibilitychange() { | ||||||
|  |  | ||||||
|  | @ -247,8 +247,9 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] { | ||||||
|         // { link: 'in-depth/layout', text: '布局' },
 |         // { link: 'in-depth/layout', text: '布局' },
 | ||||||
|         { link: 'in-depth/theme', text: '主题' }, |         { link: 'in-depth/theme', text: '主题' }, | ||||||
|         { link: 'in-depth/access', text: '权限' }, |         { link: 'in-depth/access', text: '权限' }, | ||||||
|         { link: 'in-depth/features', text: '功能' }, |  | ||||||
|         { link: 'in-depth/locale', text: '国际化' }, |         { link: 'in-depth/locale', text: '国际化' }, | ||||||
|  |         { link: 'in-depth/features', text: '常用功能' }, | ||||||
|  |         { link: 'in-depth/check-updates', text: '检查更新' }, | ||||||
|         { link: 'in-depth/loading', text: '全局loading' }, |         { link: 'in-depth/loading', text: '全局loading' }, | ||||||
|       ], |       ], | ||||||
|     }, |     }, | ||||||
|  |  | ||||||
|  | @ -174,7 +174,7 @@ const defaultPreferences: Preferences = { | ||||||
|   app: { |   app: { | ||||||
|     accessMode: 'frontend', |     accessMode: 'frontend', | ||||||
|     authPageLayout: 'panel-right', |     authPageLayout: 'panel-right', | ||||||
|     checkUpdatesPollingTime: 1, |     checkUpdatesInterval: 1, | ||||||
|     colorGrayMode: false, |     colorGrayMode: false, | ||||||
|     colorWeakMode: false, |     colorWeakMode: false, | ||||||
|     compact: false, |     compact: false, | ||||||
|  | @ -291,7 +291,7 @@ interface AppPreferences { | ||||||
|   /** 登录注册页面布局 */ |   /** 登录注册页面布局 */ | ||||||
|   authPageLayout: AuthPageLayoutType; |   authPageLayout: AuthPageLayoutType; | ||||||
|   /** 检查更新轮询时间 */ |   /** 检查更新轮询时间 */ | ||||||
|   checkUpdatesPollingTime: number; |   checkUpdatesInterval: number; | ||||||
|   /** 是否开启灰色模式 */ |   /** 是否开启灰色模式 */ | ||||||
|   colorGrayMode: boolean; |   colorGrayMode: boolean; | ||||||
|   /** 是否开启色弱模式 */ |   /** 是否开启色弱模式 */ | ||||||
|  |  | ||||||
|  | @ -0,0 +1,48 @@ | ||||||
|  | # 检查更新 | ||||||
|  | 
 | ||||||
|  | ## 介绍 | ||||||
|  | 
 | ||||||
|  | 当网站更新时,你可能会想要检查更新,框架提供了这个能力,通过轮训检查更新,你可以在应用的 `preferences.ts` 文件中配置 `checkUpdatesInterval` 和 `enableCheckUpdates` 字段,用于开启和设置检查更新的时间间隔,单位为`分钟`。 | ||||||
|  | 
 | ||||||
|  | ```ts | ||||||
|  | import { defineOverridesPreferences } from '@vben/preferences'; | ||||||
|  | 
 | ||||||
|  | export const overridesPreferences = defineOverridesPreferences({ | ||||||
|  |   // overrides | ||||||
|  |   app: { | ||||||
|  |     // 是否开启检查更新 | ||||||
|  |     enableCheckUpdates: true, | ||||||
|  |     // 检查更新的时间间隔,单位为分钟 | ||||||
|  |     checkUpdatesInterval: 1, | ||||||
|  |   }, | ||||||
|  | }); | ||||||
|  | ``` | ||||||
|  | 
 | ||||||
|  | ## 效果 | ||||||
|  | 
 | ||||||
|  | 当检测到更新时,会弹出提示框,提示用户是否刷新页面: | ||||||
|  | 
 | ||||||
|  |  | ||||||
|  | 
 | ||||||
|  | ## 替换为检测 | ||||||
|  | 
 | ||||||
|  | 如果你需要通过其他方式检查更新,比如通过接口,以便更灵活的控制更新的逻辑,可以做到强制刷新、显示更新内容等,你可以通过修改 `@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; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | ``` | ||||||
|  | @ -1,4 +1,4 @@ | ||||||
| # 功能 | # 常用功能 | ||||||
| 
 | 
 | ||||||
| 一些常用的功能合集。 | 一些常用的功能合集。 | ||||||
| 
 | 
 | ||||||
|  | @ -59,7 +59,7 @@ export const overridesPreferences = defineOverridesPreferences({ | ||||||
| 
 | 
 | ||||||
| - 默认值:`false` | - 默认值:`false` | ||||||
| 
 | 
 | ||||||
| 开启后网页会显示水印。在应用目录下的`preferences.ts`,开启或者关闭即可。 | 开启后网页会显示水印,在应用目录下的`preferences.ts`,开启或者关闭即可。 | ||||||
| 
 | 
 | ||||||
| ```ts | ```ts | ||||||
| export const overridesPreferences = defineOverridesPreferences({ | 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 | ```ts | ||||||
| import { useWatermark } from '@vben/hooks'; | import { useWatermark } from '@vben/hooks'; | ||||||
|  |  | ||||||
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 400 KiB | 
		Loading…
	
		Reference in New Issue
	
	 vben
						vben