chore: update docs [deploy]

pull/48/MERGE
vben 2024-07-29 23:56:59 +08:00
parent a80a9135fc
commit 9307093fbc
9 changed files with 67 additions and 16 deletions

View File

@ -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,

View File

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

View File

@ -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">

View File

@ -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() {

View File

@ -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' },
], ],
}, },

View File

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

View File

@ -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;
}
}
```

View File

@ -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