zant-admin 1.0.0

package/src/views/baiscstatis/iframePage.vue

@@ -0,0 +1,31 @@
+<template>
+  <iframe
+    ref="iframeRef"
+    :src="iframeUrl"
+    frameborder="0"
+    style="width: 100%; height: 100%;"
+  ></iframe>
+
+
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from "vue"
+import { useRoute } from "vue-router"
+
+const route = useRoute()
+const iframeUrl = ref("")
+
+onMounted(() => {
+  console.log("iframeUrl", route.query.url)
+  iframeUrl.value = decodeURIComponent(route.query.url || "")
+})
+
+// 监听路由变化，点击不同内链菜单时更新 iframe
+watch(
+  () => route.query.url,
+  (newUrl) => {
+    iframeUrl.value = decodeURIComponent(newUrl || "")
+  }
+)
+</script>

package/src/views/baiscstatis/notFound.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="not-found-container">
+    <div class="content-wrapper">
+      <div class="error-code">404</div>
+      <div class="error-message">页面未找到</div>
+      <div class="error-description">抱歉，您访问的页面不存在或已被移除</div>
+
+      <div class="action-buttons">
+        <a-button type="primary" size="large" @click="goHome">
+          <template #icon>
+            <HomeOutlined />
+          </template>
+          返回首页
+        </a-button>
+        <a-button size="large" @click="goBack">
+          <template #icon>
+            <ArrowLeftOutlined />
+          </template>
+          返回上页
+        </a-button>
+      </div>
+    </div>
+
+    <div class="background-decoration">
+      <div class="circle circle-1"></div>
+      <div class="circle circle-2"></div>
+      <div class="circle circle-3"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+import { HomeOutlined, ArrowLeftOutlined } from '@ant-design/icons-vue'
+
+// 获取路由实例
+const router = useRouter()
+
+/**
+ * 返回首页
+ */
+const goHome = () => {
+  router.push('/')
+}
+
+/**
+ * 返回上一页
+ */
+const goBack = () => {
+  router.go(-1)
+}
+</script>
+
+<style scoped>
+.not-found-container {
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff;
+  overflow: hidden;
+}
+
+.content-wrapper {
+  text-align: center;
+  z-index: 2;
+  padding: 20px;
+  max-width: 600px;
+}
+
+.error-code {
+  font-size: 120px;
+  font-weight: bold;
+  color: #1890ff;
+  text-shadow: 4px 4px 0 rgba(24, 144, 255, 0.2);
+  margin-bottom: 20px;
+  animation: pulse 2s infinite;
+}
+
+.error-message {
+  font-size: 32px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 16px;
+}
+
+.error-description {
+  font-size: 16px;
+  color: #666;
+  margin-bottom: 40px;
+  line-height: 1.6;
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.background-decoration {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  overflow: hidden;
+}
+
+.circle {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.1;
+}
+
+.circle-1 {
+  width: 300px;
+  height: 300px;
+  background-color: #1890ff;
+  top: -100px;
+  right: -100px;
+  animation: float 8s infinite ease-in-out;
+}
+
+.circle-2 {
+  width: 200px;
+  height: 200px;
+  background-color: #52c41a;
+  bottom: -50px;
+  left: -50px;
+  animation: float 6s infinite ease-in-out reverse;
+}
+
+.circle-3 {
+  width: 150px;
+  height: 150px;
+  background-color: #fa8c16;
+  top: 50%;
+  left: 10%;
+  animation: float 7s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes float {
+  0% {
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-20px) rotate(5deg);
+  }
+  100% {
+    transform: translateY(0) rotate(0deg);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .error-code {
+    font-size: 80px;
+  }
+
+  .error-message {
+    font-size: 24px;
+  }
+
+  .error-description {
+    font-size: 14px;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .action-buttons .ant-btn {
+    width: 200px;
+  }
+}
+</style>