404

.env.development

@@ -2,7 +2,7 @@
 NODE_ENV = development
 
 # 标题
-VITE_TITLE = 综窗表单
+VITE_TITLE = 窗口表单
 
 # 基础路径
-VITE_BASE = 'window-form'
+VITE_BASE = window-form

.env.production

@@ -2,7 +2,7 @@
 NODE_ENV = production
 
 # 标题
-VITE_TITLE = 综窗表单
+VITE_TITLE = 窗口表单
 
 # 基础路径
-VITE_BASE = 'window-form'
+VITE_BASE = window-form

src/main.ts

@@ -19,7 +19,7 @@ await initProperties(app)
 initComponent(app)
 // await initRoutes()
 app.use(router)
-app.use(ElementPlus as any)
+app.use(ElementPlus as never)
 app.mount('#app')
 // 设置为 true 以在浏览器开发工具的 performance/timeline 面板中启用对组件初始化、编译、渲染和更新的性能追踪。
 app.config.performance = true

src/router/index.ts

@@ -7,13 +7,13 @@ import { useMenuStore } from '@/stores'
 
 const routes = [
   { path: '/:pathMatch(.*)*', name: 'NotFound', component: Temp404 },
-  {
-    name: 'root',
-    path: '/',
-    component: Layout,
-    redirect: '/demo/list',
-    children: [],
-  },
+  // {
+  //   name: 'root',
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: '/demo/list',
+  //   children: [],
+  // },
 ]
 
 const router = createRouter({
@@ -25,12 +25,12 @@ router.beforeEach((to, from, next) => {
   next()
 })
 export const initRoutes = () => {
-  const MenuStore = useMenuStore()
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      MenuStore.initRoutes(MenuStore.mockApi)
-      resolve(null)
-    }, 2000)
-  })
+  // const MenuStore = useMenuStore()
+  // return new Promise((resolve, reject) => {
+  //   setTimeout(() => {
+  //     MenuStore.initRoutes(MenuStore.mockApi)
+  //     resolve(null)
+  //   }, 2000)
+  // })
 }
 export default router

src/stores/modules/menu.ts

@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia'
 import RouterView from '@/layout/router-view.vue'
-import { defineAsyncComponent } from 'vue'
 import router from '@/router'
 // @ts-ignore
 const modules = import.meta.glob('@/views/**/*.vue')
@@ -79,8 +78,10 @@ export const useMenuStore = defineStore('menu', {
       router.getRoutes().filter((v) => v.name === 'root')[0].redirect =
         menuRouters[0].redirect || menuRouters[0].path
       this.menus = menuRouters
-      document.getElementById('loader').style.display = 'none'
-      console.log(this.menus)
+      const d = document.getElementById('loader')
+      if (d) {
+        d.style.display = 'none'
+      }
     },
     setMenu(arr: any, parent: any = []) {
       return arr.map((v, i) => {

src/style/index.scss

@@ -24,7 +24,7 @@ body,
 .loader {
   width: 100%;
   height: 100vh;
-  background-color: #000000;
+  background-color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -35,8 +35,9 @@ body,
     display: flex;
     align-items: center;
     justify-content: center;
-    --h: calc(var(--percent) / 100 * 360);
-    color: hsl(var(--h), 100%, 75%);
+    //--h: calc(var(--percent) / 100 * 360);
+    //color: hsl(var(--h), 100%, 75%);
+    color: #409EFF;
     animation: changeColor 5s linear infinite;
     > span {
       position: absolute;

src/views/global/temp/404.vue

@@ -1,7 +1,86 @@
 <template>
-  <div style="font-size: 200px">404</div>
+  <div class="not-found-container">
+    <div class="content-wrapper">
+      <div class="error-code animate-float">404</div>
+      <h1 class="title">页面迷路了...</h1>
+      <p class="description">您寻找的页面可能已经去度假了</p>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted } from 'vue'
 
-<style scoped lang="scss"></style>
+onMounted(() => {
+  const d = document.getElementById('loader')
+  if (d) {
+    d.style.display = 'none'
+  }
+})
+</script>
+
+<style lang="scss">
+$primary-color: #6a8bad;
+$background-color: #f8f9fa;
+$text-color: #2c3e50;
+
+.not-found-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), $background-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+
+  .content-wrapper {
+    text-align: center;
+    max-width: 800px;
+    padding: 2rem;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
+
+    .error-code {
+      font-size: 8rem;
+      font-weight: 700;
+      color: $primary-color;
+      margin-bottom: 1rem;
+      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .title {
+      font-size: 2.5rem;
+      color: $text-color;
+      margin-bottom: 1rem;
+    }
+
+    .description {
+      font-size: 1.2rem;
+      color: lighten($text-color, 20%);
+      margin-bottom: 2rem;
+    }
+  }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-20px); }
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+@media (max-width: 768px) {
+  .not-found-container {
+    .content-wrapper {
+      .error-code {
+        font-size: 6rem;
+      }
+      .title {
+        font-size: 2rem;
+      }
+    }
+  }
+}
+</style>

src/views/menu/menu1.vue

@@ -1,12 +0,0 @@
-<template>
-  <div>菜单1</div>
-</template>
-
-<script setup lang="ts">
-import { getCurrentInstance, reactive } from 'vue'
-
-const { proxy } = getCurrentInstance()
-const state: any = reactive({})
-</script>
-
-<style lang="scss" scoped></style>

src/views/menu/menu2-1.vue

@@ -1,12 +0,0 @@
-<template>
-  <div>菜单2-1</div>
-</template>
-
-<script setup lang="ts">
-import { getCurrentInstance, reactive } from 'vue'
-
-const { proxy } = getCurrentInstance()
-const state: any = reactive({})
-</script>
-
-<style lang="scss" scoped></style>

src/views/menu/menu2-2.vue

@@ -1,12 +0,0 @@
-<template>
-  <div>菜单2-2</div>
-</template>
-
-<script setup lang="ts">
-import { getCurrentInstance, reactive } from 'vue'
-
-const { proxy } = getCurrentInstance()
-const state: any = reactive({})
-</script>
-
-<style lang="scss" scoped></style>

src/views/menu/menu2-3-1-1.vue

@@ -1,12 +0,0 @@
-<template>
-  <div>菜单2-3-1-1</div>
-</template>
-
-<script setup lang="ts">
-import { getCurrentInstance, reactive } from 'vue'
-
-const { proxy } = getCurrentInstance()
-const state: any = reactive({})
-</script>
-
-<style lang="scss" scoped></style>

src/views/menu/menu2-3-1-2.vue

@@ -1,12 +0,0 @@
-<template>
-  <div>菜单2-3-1-2</div>
-</template>
-
-<script setup lang="ts">
-import { getCurrentInstance, reactive } from 'vue'
-
-const { proxy } = getCurrentInstance()
-const state: any = reactive({})
-</script>
-
-<style lang="scss" scoped></style>

src/views/menu/menu2-3-2.vue

@@ -1,12 +0,0 @@
-<template>
-  <div>菜单2-3-2</div>
-</template>
-
-<script setup lang="ts">
-import { getCurrentInstance, reactive } from 'vue'
-
-const { proxy } = getCurrentInstance()
-const state: any = reactive({})
-</script>
-
-<style lang="scss" scoped></style>

src/views/menu/menu3.vue

@@ -1,12 +0,0 @@
-<template>
-  <div>菜单3</div>
-</template>
-
-<script setup lang="ts">
-import { getCurrentInstance, reactive } from 'vue'
-
-const { proxy } = getCurrentInstance()
-const state: any = reactive({})
-</script>
-
-<style lang="scss" scoped></style>

src/views/menu/menu4.vue

@@ -1,12 +0,0 @@
-<template>
-  <div>菜单4</div>
-</template>
-
-<script setup lang="ts">
-import { getCurrentInstance, reactive } from 'vue'
-
-const { proxy } = getCurrentInstance()
-const state: any = reactive({})
-</script>
-
-<style lang="scss" scoped></style>

vite.config.ts

@@ -77,5 +77,5 @@ export default defineConfig(({ mode, command }) => {
     optimizeDeps: {
       include: [],
     },
-  } as any
+  } as never
 })