xto-fronted 0.4.86 → 0.4.87

package/src/views/error/403.vue

@@ -11,11 +11,71 @@ const goBack = () => {
 
 <template>
   <div class="error-page">
-    <div class="error-page__content">
-      <div class="error-page__code">403</div>
-      <div class="error-page__title">无访问权限</div>
-      <div class="error-page__desc">抱歉，您没有权限访问此页面</div>
-      <Button type="primary" @click="goBack">返回首页</Button>
+    <div class="error-container">
+      <!-- 装饰背景 -->
+      <div class="error-bg">
+        <div class="bg-circle circle-1"></div>
+        <div class="bg-circle circle-2"></div>
+        <div class="bg-circle circle-3"></div>
+      </div>
+
+      <!-- 内容 -->
+      <div class="error-content">
+        <div class="error-code">
+          <span class="code-digit">4</span>
+          <span class="code-zero warning">
+            <span class="zero-inner">0</span>
+          </span>
+          <span class="code-digit">3</span>
+        </div>
+
+        <div class="error-illustration">
+          <svg viewBox="0 0 200 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- 盾牌 -->
+            <path d="M100 15 L150 35 L150 70 C150 95 100 110 100 110 C100 110 50 95 50 70 L50 35 Z"
+                  fill="var(--color-warning-lighter)" stroke="var(--color-warning)" stroke-width="2"/>
+            <!-- 锁 -->
+            <rect x="85" y="55" width="30" height="25" rx="4" fill="var(--color-warning)"/>
+            <path d="M92 55 V48 A8 8 0 0 1 108 48 V55" fill="none" stroke="var(--color-warning)" stroke-width="3"/>
+            <!-- 禁止符号 -->
+            <circle cx="100" cy="67" r="6" fill="none" stroke="#fff" stroke-width="2"/>
+            <line x1="96" y1="63" x2="104" y2="71" stroke="#fff" stroke-width="2"/>
+          </svg>
+        </div>
+
+        <h1 class="error-title">无访问权限</h1>
+        <p class="error-desc">抱歉，您没有权限访问此页面，请联系管理员获取权限</p>
+
+        <div class="error-actions">
+          <Button type="primary" size="large" @click="goBack">
+            <template #icon>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
+                <polyline points="9,22 9,12 15,12 15,22"/>
+              </svg>
+            </template>
+            返回首页
+          </Button>
+          <Button size="large" @click="router.go(-1)">
+            <template #icon>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M19 12H5M12 19l-7-7 7-7"/>
+              </svg>
+            </template>
+            返回上一页
+          </Button>
+        </div>
+
+        <!-- 提示 -->
+        <div class="error-tip">
+          <p>可能的原因：</p>
+          <ul>
+            <li>您的账号权限不足</li>
+            <li>该页面需要特定角色才能访问</li>
+            <li>您的登录状态已过期</li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -27,31 +87,166 @@ const goBack = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--bg-color-page);
+  background: var(--bg-color-page);
+  position: relative;
+  overflow: hidden;
+}
+
+.error-container {
+  position: relative;
+  z-index: 2;
+  max-width: 600px;
+  padding: 40px;
+}
+
+.error-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: hidden;
+
+  .bg-circle {
+    position: absolute;
+    border-radius: 50%;
+    opacity: 0.1;
+
+    &.circle-1 {
+      width: 400px;
+      height: 400px;
+      top: -100px;
+      right: -100px;
+      background: var(--color-warning);
+    }
 
-  &__content {
-    text-align: center;
+    &.circle-2 {
+      width: 300px;
+      height: 300px;
+      bottom: -50px;
+      left: -50px;
+      background: var(--color-warning);
+    }
+
+    &.circle-3 {
+      width: 200px;
+      height: 200px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: var(--color-warning-light);
+    }
   }
+}
+
+.error-content {
+  text-align: center;
+}
+
+.error-code {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 32px;
 
-  &__code {
-    font-size: 120px;
-    font-weight: 600;
-    color: var(--color-warning);
+  .code-digit {
+    font-size: 80px;
+    font-weight: 700;
+    color: var(--color-text-primary);
     line-height: 1;
-    margin-bottom: 20px;
   }
 
-  &__title {
-    font-size: 24px;
+  .code-zero {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-light) 100%);
+    border-radius: 50%;
+
+    .zero-inner {
+      font-size: 48px;
+      font-weight: 700;
+      color: #fff;
+    }
+  }
+}
+
+.error-illustration {
+  width: 200px;
+  height: 120px;
+  margin: 0 auto 24px;
+}
+
+.error-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: 12px;
+}
+
+.error-desc {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  margin-bottom: 32px;
+}
+
+.error-actions {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 32px;
+
+  :deep(.x-button) {
+    padding: 12px 24px;
+    border-radius: 8px;
+
+    svg {
+      width: 18px;
+      height: 18px;
+      margin-right: 8px;
+    }
+  }
+}
+
+.error-tip {
+  padding: 20px;
+  background: var(--color-warning-lighter);
+  border-radius: var(--border-radius-large);
+
+  p {
+    font-size: 14px;
     font-weight: 500;
     color: var(--color-text-primary);
-    margin-bottom: 10px;
+    margin-bottom: 12px;
   }
 
-  &__desc {
-    font-size: 14px;
-    color: var(--color-text-secondary);
-    margin-bottom: 30px;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      padding: 4px 0;
+      position: relative;
+      padding-left: 16px;
+
+      &:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 6px;
+        height: 6px;
+        background: var(--color-warning);
+        border-radius: 50%;
+        opacity: 0.6;
+      }
+    }
   }
 }
 </style>

package/src/views/error/404.vue

@@ -11,11 +11,73 @@ const goBack = () => {
 
 <template>
   <div class="error-page">
-    <div class="error-page__content">
-      <div class="error-page__code">404</div>
-      <div class="error-page__title">页面不存在</div>
-      <div class="error-page__desc">抱歉，您访问的页面不存在或已被删除</div>
-      <Button type="primary" @click="goBack">返回首页</Button>
+    <div class="error-container">
+      <!-- 装饰背景 -->
+      <div class="error-bg">
+        <div class="bg-circle circle-1"></div>
+        <div class="bg-circle circle-2"></div>
+        <div class="bg-circle circle-3"></div>
+      </div>
+
+      <!-- 内容 -->
+      <div class="error-content">
+        <div class="error-code">
+          <span class="code-digit">4</span>
+          <span class="code-zero">
+            <span class="zero-inner">0</span>
+          </span>
+          <span class="code-digit">4</span>
+        </div>
+
+        <div class="error-illustration">
+          <svg viewBox="0 0 200 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- 页面图标 -->
+            <rect x="40" y="20" width="120" height="80" rx="8" fill="var(--color-fill)" stroke="var(--color-border)" stroke-width="2"/>
+            <rect x="50" y="30" width="100" height="60" rx="4" fill="var(--bg-color)"/>
+            <line x1="60" y1="45" x2="140" y2="45" stroke="var(--color-border-light)" stroke-width="2"/>
+            <line x1="60" y1="55" x2="120" y2="55" stroke="var(--color-border-light)" stroke-width="2"/>
+            <line x1="60" y1="65" x2="100" y2="65" stroke="var(--color-border-light)" stroke-width="2"/>
+            <!-- 问号 -->
+            <text x="100" y="75" text-anchor="middle" fill="var(--color-primary)" font-size="24" font-weight="600">?</text>
+            <!-- 搜索图标 -->
+            <circle cx="150" cy="35" r="12" stroke="var(--color-primary)" stroke-width="2" fill="none"/>
+            <line x1="158" y1="43" x2="168" y2="53" stroke="var(--color-primary)" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </div>
+
+        <h1 class="error-title">页面不存在</h1>
+        <p class="error-desc">抱歉，您访问的页面不存在或已被删除</p>
+
+        <div class="error-actions">
+          <Button type="primary" size="large" @click="goBack">
+            <template #icon>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
+                <polyline points="9,22 9,12 15,12 15,22"/>
+              </svg>
+            </template>
+            返回首页
+          </Button>
+          <Button size="large" @click="router.go(-1)">
+            <template #icon>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M19 12H5M12 19l-7-7 7-7"/>
+              </svg>
+            </template>
+            返回上一页
+          </Button>
+        </div>
+
+        <!-- 提示 -->
+        <div class="error-tip">
+          <p>您可以尝试：</p>
+          <ul>
+            <li>检查您输入的网址是否正确</li>
+            <li>返回首页重新浏览</li>
+            <li>联系管理员反馈问题</li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -27,31 +89,166 @@ const goBack = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--bg-color-page);
+  background: var(--bg-color-page);
+  position: relative;
+  overflow: hidden;
+}
+
+.error-container {
+  position: relative;
+  z-index: 2;
+  max-width: 600px;
+  padding: 40px;
+}
+
+.error-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: hidden;
+
+  .bg-circle {
+    position: absolute;
+    border-radius: 50%;
+    opacity: 0.1;
+
+    &.circle-1 {
+      width: 400px;
+      height: 400px;
+      top: -100px;
+      right: -100px;
+      background: var(--color-primary);
+    }
 
-  &__content {
-    text-align: center;
+    &.circle-2 {
+      width: 300px;
+      height: 300px;
+      bottom: -50px;
+      left: -50px;
+      background: var(--color-info);
+    }
+
+    &.circle-3 {
+      width: 200px;
+      height: 200px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: var(--color-primary-light-3);
+    }
   }
+}
+
+.error-content {
+  text-align: center;
+}
+
+.error-code {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 32px;
 
-  &__code {
-    font-size: 120px;
-    font-weight: 600;
-    color: var(--color-primary);
+  .code-digit {
+    font-size: 80px;
+    font-weight: 700;
+    color: var(--color-text-primary);
     line-height: 1;
-    margin-bottom: 20px;
   }
 
-  &__title {
-    font-size: 24px;
+  .code-zero {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light-1) 100%);
+    border-radius: 50%;
+
+    .zero-inner {
+      font-size: 48px;
+      font-weight: 700;
+      color: #fff;
+    }
+  }
+}
+
+.error-illustration {
+  width: 200px;
+  height: 120px;
+  margin: 0 auto 24px;
+}
+
+.error-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: 12px;
+}
+
+.error-desc {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  margin-bottom: 32px;
+}
+
+.error-actions {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 32px;
+
+  :deep(.x-button) {
+    padding: 12px 24px;
+    border-radius: 8px;
+
+    svg {
+      width: 18px;
+      height: 18px;
+      margin-right: 8px;
+    }
+  }
+}
+
+.error-tip {
+  padding: 20px;
+  background: var(--color-fill-light);
+  border-radius: var(--border-radius-large);
+
+  p {
+    font-size: 14px;
     font-weight: 500;
     color: var(--color-text-primary);
-    margin-bottom: 10px;
+    margin-bottom: 12px;
   }
 
-  &__desc {
-    font-size: 14px;
-    color: var(--color-text-secondary);
-    margin-bottom: 30px;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      padding: 4px 0;
+      position: relative;
+      padding-left: 16px;
+
+      &:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 6px;
+        height: 6px;
+        background: var(--color-primary);
+        border-radius: 50%;
+        opacity: 0.6;
+      }
+    }
   }
 }
 </style>