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,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## 效果
|
||||||
|
|
||||||
|
当检测到更新时,会弹出提示框,提示用户是否刷新页面:
|
||||||
|
|
||||||
|
![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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
|
@ -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