chore: add offline page

This commit is contained in:
vben
2024-06-09 18:58:30 +08:00
parent 640ad6d9e7
commit 5d829a6d9a
18 changed files with 238 additions and 91 deletions

View File

@@ -36,7 +36,7 @@
"@vben-core/helpers": "workspace:*",
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.10.1",
"@vueuse/core": "^10.11.0",
"vue": "3.4.27"
}
}

View File

@@ -44,7 +44,7 @@
"@vben-core/iconify": "workspace:*",
"@vben-core/shadcn-ui": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.10.1",
"@vueuse/core": "^10.11.0",
"vue": "3.4.27"
}
}

View File

@@ -46,7 +46,7 @@
"@vben-core/shadcn-ui": "workspace:*",
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.10.1",
"@vueuse/core": "^10.11.0",
"vue": "3.4.27"
}
}

View File

@@ -50,7 +50,7 @@
"@vben-core/iconify": "workspace:*",
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.10.1",
"@vueuse/core": "^10.11.0",
"class-variance-authority": "^0.7.0",
"clsx": "2.1.1",
"radix-vue": "^1.8.3",

View File

@@ -50,8 +50,8 @@
"@vben-core/shadcn-ui": "workspace:*",
"@vben-core/toolkit": "workspace:*",
"@vben/locales": "workspace:*",
"@vueuse/core": "^10.10.1",
"@vueuse/integrations": "^10.10.1",
"@vueuse/core": "^10.11.0",
"@vueuse/integrations": "^10.11.0",
"qrcode": "^1.5.3",
"vue": "3.4.27",
"vue-router": "^4.3.3"

View File

@@ -22,7 +22,7 @@ interface FallbackProps {
/**
* @zh_CN 内置类型
*/
status?: '403' | '404' | '500';
status?: '403' | '404' | '500' | 'offline';
/**
* @zh_CN 页面提示语
*/

View File

@@ -1,17 +1,13 @@
<script setup lang="ts">
import type { FallbackProps } from './fallback';
import { computed } from 'vue';
import { computed, defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router';
import { $t } from '@vben/locales';
import { IcRoundArrowBackIosNew } from '@vben-core/iconify';
import { VbenButton } from '@vben-core/shadcn-ui';
import Icon403 from './icons/icon-403.vue';
import Icon404 from './icons/icon-404.vue';
import Icon500 from './icons/icon-500.vue';
interface Props extends FallbackProps {}
defineOptions({
@@ -27,6 +23,13 @@ const props = withDefaults(defineProps<Props>(), {
title: '',
});
const Icon403 = defineAsyncComponent(() => import('./icons/icon-403.vue'));
const Icon404 = defineAsyncComponent(() => import('./icons/icon-404.vue'));
const Icon500 = defineAsyncComponent(() => import('./icons/icon-500.vue'));
const IconOffline = defineAsyncComponent(
() => import('./icons/icon-offline.vue'),
);
const titleText = computed(() => {
if (props.title) {
return props.title;
@@ -39,6 +42,9 @@ const titleText = computed(() => {
case '500': {
return $t('fallback.internal-error');
}
case 'offline': {
return $t('fallback.offline-error');
}
default: {
return $t('fallback.page-not-found');
}
@@ -56,6 +62,9 @@ const descText = computed(() => {
case '500': {
return $t('fallback.internal-error-desc');
}
case 'offline': {
return $t('fallback.offline-error-desc');
}
default: {
return $t('fallback.page-not-found-desc');
}
@@ -70,6 +79,9 @@ const fallbackIcon = computed(() => {
case '500': {
return Icon500;
}
case 'offline': {
return IconOffline;
}
default: {
return Icon404;
}

View File

@@ -0,0 +1,112 @@
<template>
<svg
height="458.68642"
viewBox="0 0 656 458.68642"
width="656"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<rect fill="#3f3d56" height="2" width="656" y="434.34322" />
<g>
<path
d="M471.97092,210.81397c-6.0733-36.41747-37.72842-64.16942-75.86423-64.16942H240.14931c-38.12099,0-69.76869,27.72972-75.86421,64.12497-.70358,4.16241-1.06653,8.44331-1.06653,12.80573v135.88599c0,4.36237,.36295,8.63589,1.06653,12.79831,4.85126,28.99625,25.92996,52.49686,53.58563,60.84393,7.05095,2.13306,14.53143,3.28104,22.27859,3.28104h155.9574c7.74716,0,15.22763-1.14798,22.27859-3.28104,27.66309-8.35449,48.74921-31.86993,53.58563-60.88837,.6962-4.14758,1.05911-8.40628,1.05911-12.75388V223.57525c0-4.34758-.36292-8.61369-1.05911-12.76128h-.00003Zm-62.66592,222.28954c-4.2883,.76285-8.69516,1.16281-13.19827,1.16281H240.14931c-4.50313,0-8.90997-.39999-13.19829-1.16281-35.01768-6.22885-61.60677-36.83228-61.60677-73.64224v-45.10526c0-127.45004,103.31242-165.58582,230.76244-165.58582,41.31314,0,74.80505,33.49194,74.80505,74.80505v135.88599c-100.29059,13.42047-26.58911,67.41339-61.60678,73.64224l.00003,.00003Z"
fill="#3f3d56"
/>
<polygon
fill="hsl(var(--color-primary))"
points="349.16196 249.18644 355.16196 288.18642 443.16196 276.18642 434.66196 230.6195 349.16196 249.18644"
/>
<rect
fill="#2f2e41"
height="37.66125"
width="36.38461"
x="381.84177"
y="30.34218"
/>
<polygon
fill="#ffb6b6"
points="385.16196 70.18643 394.16196 43.18643 411.70447 43.18643 412.62653 70.18643 385.16196 70.18643"
/>
<polygon
isolation="isolate"
opacity=".1"
points="385.16196 70.18643 394.16196 43.18643 411.70447 43.18643 412.62653 70.18643 385.16196 70.18643"
/>
<path
d="M394.66196,310.68642l-1,104-1,8v11.48425l15,1.51575,1-23s16-45,12-80-2-25-2-25l-24,3Z"
fill="#ffb6b6"
/>
<path
d="M404.18408,318.85363l-36.90134,97.23831-1.97873,7.81567-4.1777,10.69742-14.52368-4.04477,7.43539-21.78796s1.46619-47.7373,17.92432-78.88422,10.9574-22.5596,10.9574-22.5596l21.26434,11.52512v.00003Z"
fill="#ffb6b6"
/>
<path
d="M385.16196,67.18643l-27,12,17.23959,89.01208-2.72385,127.75565-18,38s-3.01575,21.73227,27.98425,7.73227,66-18,66-18l-8.5-58.5-7.5-153.5,1-34-22-14s-26.5,3.5-26.5,3.50001Z"
fill="#2f2e41"
/>
<path
d="M370.1243,335.34322l-29.96231-50.15677,34.23959-116.98792-16.23959-89.01208,28.49045-12.19685s14.74915,14.36248,14.74915,26.20894-31.27728,242.1447-31.27728,242.1447v-.00003Z"
fill="#e6e6e6"
/>
<path
d="M435.1243,325.34322l-27.19693-233.62811c-.34341-2.94999,.16013-5.93678,1.45178-8.6111l7.78284-16.11441,30.5,8.69685-12.26041,95.51208,32.76041,93.98792-33.03769,60.15677Z"
fill="#e6e6e6"
/>
<path
d="M410.66196,433.68642s-19-11-21-5-3,11-3,11c0,0-5,19,10,19s14-8.64172,14-8.64172v-16.35828Z"
fill="#2f2e41"
/>
<path
d="M344.53574,427.60598s21.69977-3.33459,21.3801,2.9819c-.3197,6.31647-1.20709,11.33768-1.20709,11.33768,0,0-2.25433,19.51712-16.22662,14.06046s-9.89713-13.14252-9.89713-13.14252l5.95078-15.23749-.00003-.00003Z"
fill="#2f2e41"
/>
<circle cx="404.10297" cy="33.02146" fill="#ffb6b6" r="24.85993" />
<path
d="M423.96469,10.86766c-1.15707-6.12936-7.44913-10.27514-13.66504-10.79501s-12.30453,1.82726-17.90228,4.57921c-3.79456,1.86548-7.53061,3.96811-10.60425,6.87182s-5.46063,6.69692-6.01202,10.88913c-.19507,1.48324-.1698,3.03289-.77692,4.40016-.75845,1.708-2.38654,2.86795-3.36917,4.4576-1.76227,2.85096-.95267,6.99858,1.75238,8.97753-3.40024,1.44912-6.89398,2.96069-9.48602,5.59563s-4.08878,6.70308-2.66644,10.11462c.50323,1.20699,1.33481,2.26349,1.76489,3.49843,.81668,2.34499,.03943,5.00909-1.40924,7.02585s-3.49316,3.51228-5.50174,4.97226c5.16196,1.01177,10.43097,1.80015,15.66992,1.32811s10.49707-2.30805,14.29086-5.95176c3.79379-3.64371,5.88083-9.26437,4.51974-14.34539-1.04269-3.89231-3.95898-7.30301-3.95712-11.33256,.00143-3.09747,1.7431-5.89158,3.4249-8.49271,3.67291-5.68066,7.34579-11.36132,11.01868-17.04197,.66068-1.02183,1.35739-2.07924,2.4014-2.70425,1.77606-1.06326,4.0798-.59568,5.95227,.28683,1.87244,.88252,3.58304,2.14867,5.57941,2.69585,4.07452,1.11677,8.80106-1.44789,10.08575-5.47261"
fill="#2f2e41"
/>
<path
d="M409.27951,61.42523c-2.07159,2.0061-5.05701,2.65225-7.82379,3.46516s-5.70978,2.09141-6.95499,4.69243c-1.22101,2.55043-.33459,5.78793,1.68692,7.76505s4.95816,2.80999,7.78555,2.77077c2.82736-.03922,5.58282-.86796,8.24176-1.8301,7.27054-2.63087,14.15665-6.32148,20.37314-10.919-4.02679-1.11411-6.66107-5.81614-5.50836-9.83205,.93768-3.26677,3.80499-5.54528,5.75616-8.32809,3.35959-4.79151,3.91925-11.10753,2.80676-16.85277-1.11246-5.74524-3.73163-11.07097-6.32358-16.3176-.81934-1.65853-1.65805-3.34513-2.93619-4.68245-1.27814-1.33731-3.08783-2.29539-4.92776-2.10379-3.05334,.31795-5.00302,3.66989-5.02377,6.7397s1.32593,5.95491,2.34732,8.84988c1.05231,2.98259,1.78381,6.14409,1.50146,9.29425-.2366,2.63989-1.19669,5.21132-2.74811,7.36029-1.19809,1.65954-2.72479,3.05223-4.0275,4.63097-1.00714,1.22055-1.90009,2.60309-2.16486,4.16321-.48181,2.83914,1.18356,5.71186,.72714,8.55519-.48248,3.0056-3.6452,5.3067-6.65341,4.84085"
fill="#2f2e41"
/>
<g>
<circle
cx="333.2486"
cy="323.64455"
fill="hsl(var(--color-primary))"
r="85"
/>
<g>
<path
d="M384.17838,316.82296h-10.56668c-1.64377-9.68713-6.7168-18.46011-14.2923-24.71729-17.43427-14.39993-43.24109-11.94022-57.64099,5.49411-.04913,.05563-.09644,.11282-.14169,.17151-1.15063,1.49146-.87427,3.63333,.61716,4.784,1.49118,1.1507,3.63306,.87448,4.78394-.61697,6.25537-7.5788,15.72369-12.40167,26.31064-12.40167,16.20853,.00195,30.17899,11.40631,33.42572,27.28629h-9.31805c-.3988,.00012-.78458,.13992-1.09082,.39502-.72375,.60281-.82175,1.6781-.21915,2.40186l13.41125,16.09894c.06577,.07889,.13855,.1517,.21759,.21747,.72324,.60327,1.79871,.50583,2.40186-.21747l13.41125-16.09894c.25504-.30624,.3949-.69223,.39514-1.09082,.00027-.94186-.763-1.70566-1.70486-1.70605v.00003Z"
fill="#fff"
/>
<path
d="M364.34329,344.7337c-1.49146-1.15063-3.63333-.87433-4.78394,.6171-4.96201,6.00781-11.83066,10.13629-19.46436,11.69922-18.46167,3.77988-36.49231-8.12213-40.27225-26.58392h9.3183c.94186-.0004,1.70514-.76419,1.70486-1.70605-.00027-.39853-.14011-.78452-.39514-1.09082l-13.41125-16.09888c-.60312-.72336-1.67862-.8208-2.40186-.21753-.07904,.06577-.15182,.13855-.21759,.21753l-13.41125,16.09888c-.6026,.72375-.50461,1.7991,.21915,2.40186,.30624,.25516,.69205,.3949,1.09082,.39502h10.56641c1.64404,9.68723,6.7168,18.46011,14.29254,24.71729,17.43427,14.39999,43.24109,11.94022,57.64099-5.49405,.04913-.05569,.09619-.11295,.14142-.17163,1.15088-1.49146,.87454-3.63327-.61691-4.784h.00006Z"
fill="#fff"
/>
</g>
</g>
<path
id="uuid-da16df1e-5659-4232-96f6-61e8c639a9ec-574"
d="M356.98148,237.19363c-1.02939,7.36621-5.66458,12.80598-10.35239,12.15012-4.68781-.65588-7.65225-7.15837-6.62149-14.52707,.37137-2.94914,1.4436-5.76646,3.12701-8.21626l4.75577-31.15587,14.57297,2.54338-6.23553,30.44414c.94736,2.81844,1.20581,5.82278,.75369,8.76157h-.00003Z"
fill="#ffb6b6"
/>
<path
d="M369.66196,77.68643s-15-5-17,13-4,39.99999-4,39.99999c0,0-9,21-5,32s11,3.3307,4,12.66534-6.02478,40.04724-6.02478,40.04724l22.52478-1.13387s12.5-82.57875,12.5-84.57875-7-52-7-52v.00004Z"
fill="#e6e6e6"
/>
<g>
<path
id="uuid-6bf35aa9-e432-4b51-af77-8f4eb19e6e42-575"
d="M467.16132,233.84998c.27881,7.43257-3.33017,13.60114-8.06033,13.7778s-8.78937-5.70491-9.06732-13.14017c-.15176-2.96857,.40961-5.93028,1.63712-8.63741l-.78369-31.507,14.79315-.05261-.798,31.0659c1.42709,2.60854,2.20859,5.52095,2.27905,8.49347l.00003,.00002Z"
fill="#ffb6b6"
/>
<path
d="M444.06961,77.34876s15.08694-4.73121,16.76505,13.30165,3.28473,51.06508,3.28473,51.06508c0,0,8.62338,21.15744,4.42749,32.08421s-11.05774,3.13365-4.22565,12.59187c6.83212,9.45822,4.37997,36.13126,4.37997,36.13126l-22.50095-1.53612s-10.09427-78.77167-10.05853-80.77133,7.92792-62.86664,7.92792-62.86664l-.00003,.00002Z"
fill="#e6e6e6"
/>
</g>
</g>
</svg>
</template>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.7 KiB

View File

@@ -21,6 +21,9 @@ fallback:
forbidden-desc: Sorry, but you don't have permission to access this page.
internal-error: Oops! Something Went Wrong
internal-error-desc: Sorry, but the server encountered an error.
offline: Offline Page
offline-error: Oops! Network Error
offline-error-desc: Sorry, can't connect to the internet. Check your connection.
widgets:
document: Document

View File

@@ -20,6 +20,9 @@ fallback:
forbidden-desc: 抱歉,您没有权限访问此页面。
internal-error: 哎呀!出错了
internal-error-desc: 抱歉,服务器遇到错误。
offline: 离线页面
offline-error: 哎呀!网络错误
offline-error-desc: 抱歉,无法连接到互联网,请检查您的网络连接并重试。
widgets:
document: 文档