xto-fronted 0.4.85 → 0.4.86

package/src/views/error/403.vue

@@ -1,252 +1,57 @@
-<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 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>
-
-<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-warning);
-    }
-
-    &.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-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-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: 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-warning);
-        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-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>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.error-page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-color-page);
+
+  &__content {
+    text-align: center;
+  }
+
+  &__code {
+    font-size: 120px;
+    font-weight: 600;
+    color: var(--color-warning);
+    line-height: 1;
+    margin-bottom: 20px;
+  }
+
+  &__title {
+    font-size: 24px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    margin-bottom: 10px;
+  }
+
+  &__desc {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+    margin-bottom: 30px;
+  }
+}
 </style>

package/src/views/error/404.vue

@@ -1,254 +1,57 @@
-<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-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>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.error-page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-color-page);
+
+  &__content {
+    text-align: center;
+  }
+
+  &__code {
+    font-size: 120px;
+    font-weight: 600;
+    color: var(--color-primary);
+    line-height: 1;
+    margin-bottom: 20px;
+  }
+
+  &__title {
+    font-size: 24px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    margin-bottom: 10px;
+  }
+
+  &__desc {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+    margin-bottom: 30px;
+  }
+}
 </style>