xto-fronted 0.4.85 → 0.4.87

package/src/views/error/404.vue

@@ -1,254 +1,254 @@
-<script setup lang="ts">
-import { useRouter } from 'vue-router'
-import { Button } from '@xto/base'
-
-const router = useRouter()
-
-const goBack = () => {
-  router.push('/')
-}
-</script>
-
-<template>
-  <div class="error-page">
-    <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>
-
-<style lang="scss" scoped>
-.error-page {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  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);
-    }
-
-    &.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-digit {
-    font-size: 80px;
-    font-weight: 700;
-    color: var(--color-text-primary);
-    line-height: 1;
-  }
-
-  .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: 12px;
-  }
-
-  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;
-      }
-    }
-  }
-}
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { Button } from '@xto/base'
+
+const router = useRouter()
+
+const goBack = () => {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="error-page">
+    <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>
+
+<style lang="scss" scoped>
+.error-page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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);
+    }
+
+    &.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-digit {
+    font-size: 80px;
+    font-weight: 700;
+    color: var(--color-text-primary);
+    line-height: 1;
+  }
+
+  .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: 12px;
+  }
+
+  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>