cykj/shanxia2.0
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
zlwu committed 2026-05-24 08:34:01 +08:00
1 parent ea5dedf059
commit 07ed8c7a60
92 files changed
+808 -336
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web-admin/src/components/core/views/exception/ArtException.vue
+253 -22
View File
@@ -1,44 +1,80 @@
<template>
<div class="page-content !border-0 !bg-transparent min-h-screen flex-cc">
<div class="flex-cc max-md:!block max-md:text-center">
<ThemeSvg :src="data.imgUrl" size="100%" class="!w-100" />
<div class="ml-15 w-75 max-md:mx-auto max-md:mt-10 max-md:w-full max-md:text-center">
<p class="text-xl leading-7 text-g-600 max-md:text-lg">{{ data.desc }}</p>
<ElButton type="primary" size="large" @click="backHome" v-ripple class="mt-5">{{
data.btnText
}}</ElButton>
</div>
<div class="exception-page">
<div class="exception-page__bg" aria-hidden="true">
<span class="exception-page__blob exception-page__blob--1" />
<span class="exception-page__blob exception-page__blob--2" />
</div>
<header class="exception-page__brand">
<img src="/logo.png" alt="中科兴皖" class="exception-page__logo" />
<span class="exception-page__brand-name">中科兴皖</span>
</header>
<main class="exception-page__main">
<div class="exception-page__card">
<div class="exception-page__visual">
<ExceptionIllustration :variant="variant" />
</div>
<div class="exception-page__content">
<span class="exception-page__code">{{ code }}</span>
<h1 class="exception-page__title">{{ title }}</h1>
<p class="exception-page__desc">{{ desc }}</p>
<p v-if="hint" class="exception-page__hint">{{ hint }}</p>
<div class="exception-page__actions">
<ElButton size="large" class="exception-page__btn-back" @click="goBack">
<ElIcon :size="16"><ArrowLeft /></ElIcon>
<span>{{ backText }}</span>
</ElButton>
<ElButton type="primary" size="large" class="exception-page__btn-home" @click="backHome">
<ElIcon :size="16"><HomeFilled /></ElIcon>
<span>{{ homeText }}</span>
</ElButton>
</div>
</div>
</div>
</main>
<footer class="exception-page__footer">一体化管理门户</footer>
</div>
</template>
<script setup lang="ts">
import { ArrowLeft, HomeFilled } from '@element-plus/icons-vue'
import ExceptionIllustration from './ExceptionIllustration.vue'
import { useCommon } from '@/hooks/core/useCommon'
import { useUserStore } from '@/store/modules/user'
const router = useRouter()
const userStore = useUserStore()
interface ExceptionData {
/** 标题 */
title: string
/** 描述 */
desc: string
/** 按钮文本 */
btnText: string
/** 图片地址 */
imgUrl: string
}
withDefaults(
defineProps<{
data: ExceptionData
code: string
title: string
desc: string
hint?: string
variant: 'forbidden' | 'not-found' | 'server-error'
homeText?: string
backText?: string
}>(),
{}
{
homeText: '返回首页',
backText: '返回上页'
}
)
const { homePath } = useCommon()
const goBack = () => {
if (window.history.length > 1) {
router.back()
return
}
backHome()
}
const backHome = () => {
const targetHomePath = homePath.value || '/'
@@ -53,3 +89,198 @@
router.push(targetHomePath)
}
</script>
<style scoped lang="scss">
.exception-page {
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
background: var(--mint-bg-page);
}
.exception-page__bg {
position: absolute;
inset: 0;
pointer-events: none;
}
.exception-page__blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.55;
}
.exception-page__blob--1 {
top: -120px;
right: -80px;
width: 360px;
height: 360px;
background: rgba(16, 185, 129, 0.18);
}
.exception-page__blob--2 {
bottom: -100px;
left: -60px;
width: 320px;
height: 320px;
background: rgba(5, 150, 105, 0.12);
}
.exception-page__brand {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 28px 32px 0;
}
.exception-page__logo {
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 8px;
background: #fff;
padding: 4px;
box-shadow: var(--mint-shadow);
}
.exception-page__brand-name {
font-size: 16px;
font-weight: 600;
color: var(--mint-text);
}
.exception-page__main {
position: relative;
z-index: 1;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 24px 48px;
}
.exception-page__card {
display: flex;
align-items: center;
gap: 48px;
width: min(920px, 100%);
padding: 40px 48px;
background: var(--mint-surface);
border: 1px solid var(--mint-border);
border-radius: var(--mint-radius);
box-shadow: 0 16px 48px rgba(15, 23, 42, 0.06);
}
.exception-page__visual {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.exception-page__content {
flex: 1;
min-width: 0;
}
.exception-page__code {
display: inline-block;
font-size: 72px;
font-weight: 700;
line-height: 1;
letter-spacing: -2px;
background: linear-gradient(135deg, var(--mint-primary) 0%, var(--mint-primary-dark) 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.exception-page__title {
margin: 12px 0 0;
font-size: 24px;
font-weight: 600;
line-height: 1.3;
color: var(--mint-text);
}
.exception-page__desc {
margin: 12px 0 0;
font-size: 15px;
line-height: 1.6;
color: var(--mint-text-muted);
}
.exception-page__hint {
margin: 8px 0 0;
font-size: 13px;
line-height: 1.5;
color: var(--mint-text-muted);
opacity: 0.85;
}
.exception-page__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.exception-page__btn-back,
.exception-page__btn-home {
:deep(.el-icon) {
margin-right: 6px;
}
}
.exception-page__btn-back {
--el-button-bg-color: var(--mint-surface);
--el-button-border-color: var(--mint-border);
--el-button-text-color: var(--mint-text);
--el-button-hover-bg-color: var(--mint-row-hover);
--el-button-hover-border-color: var(--mint-primary);
--el-button-hover-text-color: var(--mint-primary-dark);
}
.exception-page__footer {
position: relative;
z-index: 1;
padding: 0 24px 24px;
text-align: center;
font-size: 12px;
color: var(--mint-text-muted);
}
@media screen and (max-width: 768px) {
.exception-page__brand {
padding: 20px 20px 0;
}
.exception-page__main {
padding: 24px 16px 32px;
}
.exception-page__card {
flex-direction: column;
gap: 24px;
padding: 28px 24px;
text-align: center;
}
.exception-page__code {
font-size: 56px;
}
.exception-page__title {
font-size: 20px;
}
.exception-page__actions {
justify-content: center;
}
}
</style>
web-admin/src/components/core/views/exception/ExceptionIllustration.vue
+132
View File
@@ -0,0 +1,132 @@
<template>
<svg
class="exception-illustration"
:class="`exception-illustration--${variant}`"
viewBox="0 0 320 240"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<template v-if="variant === 'forbidden'">
<rect x="48" y="52" width="224" height="156" rx="16" fill="var(--mint-primary-bg)" />
<rect x="48" y="52" width="224" height="156" rx="16" stroke="var(--mint-border)" stroke-width="2" />
<path
d="M160 88c-14.9 0-27 12.1-27 27v12h54v-12c0-14.9-12.1-27-27-27Z"
fill="#fff"
stroke="var(--mint-primary-dark)"
stroke-width="2"
stroke-linejoin="round"
/>
<rect
x="118"
y="127"
width="84"
height="58"
rx="10"
fill="#fff"
stroke="var(--mint-primary-dark)"
stroke-width="2"
/>
<circle cx="160" cy="156" r="10" fill="var(--mint-primary-bg)" stroke="var(--mint-primary)" stroke-width="2" />
<path
d="M160 162v8"
stroke="var(--mint-primary-dark)"
stroke-width="2.5"
stroke-linecap="round"
/>
<path
d="M96 118h128"
stroke="var(--mint-border)"
stroke-width="2"
stroke-linecap="round"
stroke-dasharray="6 6"
/>
<circle cx="248" cy="72" r="22" fill="var(--mint-primary)" opacity="0.15" />
<path
d="M248 64v16M240 72h16"
stroke="var(--mint-primary-dark)"
stroke-width="2.5"
stroke-linecap="round"
/>
</template>
<template v-else-if="variant === 'not-found'">
<circle cx="160" cy="120" r="78" fill="var(--mint-primary-bg)" />
<circle cx="160" cy="120" r="78" stroke="var(--mint-border)" stroke-width="2" />
<path
d="M160 62v24M160 154v24M82 120h24M214 120h24"
stroke="var(--mint-primary)"
stroke-width="2"
stroke-linecap="round"
opacity="0.45"
/>
<circle cx="160" cy="120" r="34" fill="#fff" stroke="var(--mint-primary-dark)" stroke-width="2" />
<path
d="M148 120c0-6.6 5.4-12 12-12s12 5.4 12 12-5.4 12-12 12"
stroke="var(--mint-primary-dark)"
stroke-width="2.5"
stroke-linecap="round"
/>
<circle cx="172" cy="108" r="3" fill="var(--mint-primary-dark)" />
<path
d="M72 188c18-10 38-15 88-15s70 5 88 15"
stroke="var(--mint-primary)"
stroke-width="2"
stroke-linecap="round"
opacity="0.35"
/>
<rect x="208" y="48" width="56" height="36" rx="8" fill="#fff" stroke="var(--mint-border)" stroke-width="2" />
<path
d="M220 66h32M220 58h20"
stroke="var(--mint-text-muted)"
stroke-width="2"
stroke-linecap="round"
/>
</template>
<template v-else>
<rect x="56" y="64" width="208" height="128" rx="14" fill="var(--mint-primary-bg)" />
<rect x="56" y="64" width="208" height="128" rx="14" stroke="var(--mint-border)" stroke-width="2" />
<rect x="76" y="84" width="168" height="18" rx="6" fill="#fff" stroke="var(--mint-border)" stroke-width="1.5" />
<rect x="76" y="112" width="120" height="12" rx="4" fill="#fff" stroke="var(--mint-border)" stroke-width="1.5" />
<rect x="76" y="132" width="148" height="12" rx="4" fill="#fff" stroke="var(--mint-border)" stroke-width="1.5" />
<rect x="76" y="152" width="96" height="12" rx="4" fill="#fff" stroke="var(--mint-border)" stroke-width="1.5" />
<circle cx="228" cy="92" r="5" fill="var(--mint-primary)" />
<circle cx="244" cy="92" r="5" fill="#fbbf24" />
<circle cx="260" cy="92" r="5" fill="#f87171" />
<path
d="M248 176l18-30 18 30"
stroke="var(--mint-primary-dark)"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M266 176v14H230v-14"
stroke="var(--mint-primary-dark)"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M160 44l8 14h16l-13 10 5 14-16-11-16 11 5-14-13-10h16l8-14Z"
fill="var(--mint-primary)"
opacity="0.85"
/>
</template>
</svg>
</template>
<script setup lang="ts">
defineProps<{
variant: 'forbidden' | 'not-found' | 'server-error'
}>()
</script>
<style scoped lang="scss">
.exception-illustration {
display: block;
width: min(320px, 72vw);
height: auto;
}
</style>