qianlishi 8 月之前
父节点
当前提交
8cc4fdb4b6

+ 82 - 82
Report-V3-TS/src/components/Modal/src/basicModal.vue

@@ -11,7 +11,7 @@
         <n-button @click="closeModal">取消</n-button>
         <n-button type="primary" :loading="subLoading" @click="handleSubmit">{{
           subBtuText
-        }}</n-button>
+          }}</n-button>
       </n-space>
     </template>
     <template v-else #action>
@@ -21,89 +21,89 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCurrentInstance, ref, nextTick, unref, computed, useAttrs } from 'vue';
-  import { basicProps } from './props';
-  import startDrag from '@/utils/Drag';
-  import { deepMerge } from '@/utils';
-  import { FormProps } from '@/components/Form';
-  import { ModalProps, ModalMethods } from './type';
-
-  const attrs = useAttrs();
-  const props = defineProps({ ...basicProps });
-  const emit = defineEmits(['on-close', 'on-ok', 'register']);
-
-  const propsRef = ref<Partial<ModalProps> | null>(null);
-
-  const isModal = ref(false);
-  const subLoading = ref(false);
-
-  const getProps = computed((): FormProps => {
-    return { ...props, ...(unref(propsRef) as any) };
-  });
-
-  const subBtuText = computed(() => {
-    const { subBtuText } = propsRef.value as any;
-    return subBtuText || props.subBtuText;
-  });
-
-  async function setProps(modalProps: Partial<ModalProps>): Promise<void> {
-    propsRef.value = deepMerge(unref(propsRef) || ({} as any), modalProps);
-  }
-
-  const getBindValue = computed(() => {
-    return {
-      ...attrs,
-      ...unref(getProps),
-      ...unref(propsRef),
-    };
-  });
-
-  function setSubLoading(status: boolean) {
-    subLoading.value = status;
-  }
-
-  function openModal() {
-    isModal.value = true;
-    nextTick(() => {
-      const oBox = document.getElementById('basic-modal');
-      const oBar = document.getElementById('basic-modal-bar');
-      startDrag(oBar, oBox);
-    });
-  }
-
-  function closeModal() {
-    isModal.value = false;
-    subLoading.value = false;
-    emit('on-close');
-  }
-
-  function onCloseModal() {
-    isModal.value = false;
-    emit('on-close');
-  }
-
-  function handleSubmit() {
-    subLoading.value = true;
-    emit('on-ok');
-  }
-
-  const modalMethods: ModalMethods = {
-    setProps,
-    openModal,
-    closeModal,
-    setSubLoading,
+import { getCurrentInstance, ref, nextTick, unref, computed, useAttrs } from 'vue';
+import { basicProps } from './props';
+import startDrag from '@/utils/Drag';
+import { deepMerge } from '@/utils';
+import { FormProps } from '@/components/Form';
+import { ModalProps, ModalMethods } from './type';
+
+const attrs = useAttrs();
+const props = defineProps({ ...basicProps });
+const emit = defineEmits(['on-close', 'on-ok', 'register']);
+
+const propsRef = ref<Partial<ModalProps> | null>(null);
+
+const isModal = ref(false);
+const subLoading = ref(false);
+
+const getProps = computed((): FormProps => {
+  return { ...props, ...(unref(propsRef) as any) };
+});
+
+const subBtuText = computed(() => {
+  const { subBtuText } = propsRef.value as any;
+  return subBtuText || props.subBtuText;
+});
+
+async function setProps(modalProps: Partial<ModalProps>): Promise<void> {
+  propsRef.value = deepMerge(unref(propsRef) || ({} as any), modalProps);
+}
+
+const getBindValue = computed(() => {
+  return {
+    ...attrs,
+    ...unref(getProps),
+    ...unref(propsRef),
   };
-
-  const instance = getCurrentInstance();
-  if (instance) {
-    emit('register', modalMethods);
-  }
-
-  defineExpose(modalMethods);
+});
+
+function setSubLoading(status: boolean) {
+  subLoading.value = status;
+}
+
+function openModal() {
+  isModal.value = true;
+  nextTick(() => {
+    const oBox = document.getElementById('basic-modal');
+    const oBar = document.getElementById('basic-modal-bar');
+    startDrag(oBar, oBox);
+  });
+}
+
+function closeModal() {
+  isModal.value = false;
+  subLoading.value = false;
+  emit('on-close');
+}
+
+function onCloseModal() {
+  isModal.value = false;
+  emit('on-close');
+}
+
+function handleSubmit() {
+  subLoading.value = true;
+  emit('on-ok');
+}
+
+const modalMethods: ModalMethods = {
+  setProps,
+  openModal,
+  closeModal,
+  setSubLoading,
+};
+
+const instance = getCurrentInstance();
+if (instance) {
+  emit('register', modalMethods);
+}
+
+defineExpose(modalMethods);
 </script>
 
 <style lang="less">
-  .cursor-move {
-    cursor: move;
-  }
+.cursor-move {
+  cursor: move;
+}
 </style>

+ 8 - 1
Report-V3-TS/src/components/Modal/src/hooks/useModal.ts

@@ -1,3 +1,10 @@
+/*
+ * @Description:
+ * @Author: qianlishi
+ * @Date: 2024-12-08 17:38:28
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2024-12-13 15:33:45
+ */
 import { ref, unref, getCurrentInstance, watch } from 'vue';
 import { isProdMode } from '@/utils/env';
 import { ModalMethods, UseModalReturnType } from '../type';
@@ -31,7 +38,7 @@ export function useModal(props): UseModalReturnType {
       {
         immediate: true,
         deep: true,
-      }
+      },
     );
   };
 

+ 1 - 1
Report-V3-TS/src/enums/pageEnum.ts

@@ -6,7 +6,7 @@ export enum PageEnum {
   REDIRECT = '/redirect',
   REDIRECT_NAME = 'Redirect',
   // 首页
-  BASE_HOME = '/dashboard',
+  BASE_HOME = '/dashboard/index',
   //首页跳转默认路由
   BASE_HOME_REDIRECT = '/dashboard/index',
   // 错误

+ 190 - 221
Report-V3-TS/src/layout/index.vue

@@ -1,39 +1,17 @@
 <template>
   <n-layout class="layout" :position="fixedMenu" has-sider>
-    <n-layout-sider
-      v-if="
-        !isMobile && isMixMenuNoneSub && (navMode === 'vertical' || navMode === 'horizontal-mix')
-      "
-      show-trigger="bar"
-      @collapse="collapsed = true"
-      :position="fixedMenu"
-      @expand="collapsed = false"
-      :collapsed="collapsed"
-      collapse-mode="width"
-      :collapsed-width="64"
-      :width="leftMenuWidth"
-      :native-scrollbar="false"
-      :inverted="inverted"
-      class="layout-sider"
-    >
+    <n-layout-sider v-if="
+      !isMobile && isMixMenuNoneSub && (navMode === 'vertical' || navMode === 'horizontal-mix')
+    " show-trigger="bar" @collapse="collapsed = true" :position="fixedMenu" @expand="collapsed = false"
+      :collapsed="collapsed" collapse-mode="width" :collapsed-width="64" :width="leftMenuWidth"
+      :native-scrollbar="false" :inverted="inverted" class="layout-sider">
       <Logo :collapsed="collapsed" />
       <AsideMenu v-model:collapsed="collapsed" v-model:location="getMenuLocation" />
     </n-layout-sider>
 
-    <n-drawer
-      v-model:show="showSideDrawer"
-      :width="menuWidth"
-      :placement="'left'"
-      class="layout-side-drawer"
-    >
-      <n-layout-sider
-        :position="fixedMenu"
-        :collapsed="false"
-        :width="menuWidth"
-        :native-scrollbar="false"
-        :inverted="inverted"
-        class="layout-sider"
-      >
+    <n-drawer v-model:show="showSideDrawer" :width="menuWidth" :placement="'left'" class="layout-side-drawer">
+      <n-layout-sider :position="fixedMenu" :collapsed="false" :width="menuWidth" :native-scrollbar="false"
+        :inverted="inverted" class="layout-sider">
         <Logo :collapsed="collapsed" />
         <AsideMenu v-model:location="getMenuLocation" />
       </n-layout-sider>
@@ -44,26 +22,17 @@
         <PageHeader v-model:collapsed="collapsed" :inverted="inverted" />
       </n-layout-header>
 
-      <n-layout-content
-        class="layout-content"
-        :class="{ 'layout-default-background': getDarkTheme === false }"
-      >
-        <div
-          class="layout-content-main"
-          :class="{
-            'layout-content-main-fix': fixedMulti,
-            'fluid-header': fixedHeader === 'static',
-          }"
-        >
+      <n-layout-content class="layout-content" :class="{ 'layout-default-background': getDarkTheme === false }">
+        <div class="layout-content-main" :class="{
+          'layout-content-main-fix': fixedMulti,
+          'fluid-header': fixedHeader === 'static',
+        }">
           <TabsView v-if="isMultiTabs" v-model:collapsed="collapsed" />
-          <div
-            class="main-view"
-            :class="{
-              'main-view-fix': fixedMulti,
-              noMultiTabs: !isMultiTabs,
-              'mt-3': !isMultiTabs,
-            }"
-          >
+          <div class="main-view" :class="{
+            'main-view-fix': fixedMulti,
+            noMultiTabs: !isMultiTabs,
+            'mt-3': !isMultiTabs,
+          }">
             <MainView />
           </div>
         </div>
@@ -78,195 +47,195 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, unref, computed, onMounted } from 'vue';
-  import { Logo } from './components/Logo';
-  import { TabsView } from './components/TagsView';
-  import { MainView } from './components/Main';
-  import { AsideMenu } from './components/Menu';
-  import { PageHeader } from './components/Header';
-  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
-  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
-  import { useRoute } from 'vue-router';
-  import { useProjectSettingStore } from '@/store/modules/projectSetting';
-
-  const { getDarkTheme } = useDesignSetting();
-  const {
-    // showFooter,
-    navMode,
-    navTheme,
-    headerSetting,
-    menuSetting,
-    multiTabsSetting,
-  } = useProjectSetting();
-
-  const settingStore = useProjectSettingStore();
-
-  const collapsed = ref<boolean>(false);
-
-  const { mobileWidth, menuWidth } = unref(menuSetting);
-
-  const isMobile = computed<boolean>({
-    get: () => settingStore.getIsMobile,
-    set: (val) => settingStore.setIsMobile(val),
-  });
-
-  const fixedHeader = computed(() => {
-    const { fixed } = unref(headerSetting);
-    return fixed ? 'absolute' : 'static';
-  });
-
-  const isMixMenuNoneSub = computed(() => {
-    const mixMenu = unref(menuSetting).mixMenu;
-    const currentRoute = useRoute();
-    if (unref(navMode) != 'horizontal-mix') return true;
-    if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
-      return false;
-    }
-    return true;
-  });
-
-  const fixedMenu = computed(() => {
-    const { fixed } = unref(headerSetting);
-    return fixed ? 'absolute' : 'static';
-  });
-
-  const isMultiTabs = computed(() => {
-    return unref(multiTabsSetting).show;
-  });
-
-  const fixedMulti = computed(() => {
-    return unref(multiTabsSetting).fixed;
-  });
-
-  const inverted = computed(() => {
-    return ['dark', 'header-dark'].includes(unref(navTheme));
-  });
-
-  const getHeaderInverted = computed(() => {
-    return ['light', 'header-dark'].includes(unref(navTheme)) ? unref(inverted) : !unref(inverted);
-  });
-
-  const leftMenuWidth = computed(() => {
-    const { minMenuWidth, menuWidth } = unref(menuSetting);
-    return collapsed.value ? minMenuWidth : menuWidth;
-  });
-
-  const getMenuLocation = computed(() => {
-    return 'left';
-  });
-
-  // 控制显示或隐藏移动端侧边栏
-  const showSideDrawer = computed({
-    get: () => isMobile.value && collapsed.value,
-    set: (val) => (collapsed.value = val),
-  });
-
-  //判断是否触发移动端模式
-  const checkMobileMode = () => {
-    if (document.body.clientWidth <= mobileWidth) {
-      isMobile.value = true;
-    } else {
-      isMobile.value = false;
-    }
-    collapsed.value = false;
-  };
-
-  const watchWidth = () => {
-    const Width = document.body.clientWidth;
-    if (Width <= 950) {
-      collapsed.value = true;
-    } else collapsed.value = false;
-
-    checkMobileMode();
-  };
-
-  onMounted(() => {
-    checkMobileMode();
-    window.addEventListener('resize', watchWidth);
-  });
+import { ref, unref, computed, onMounted } from 'vue';
+import { Logo } from './components/Logo';
+import { TabsView } from './components/TagsView';
+import { MainView } from './components/Main';
+import { AsideMenu } from './components/Menu';
+import { PageHeader } from './components/Header';
+import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+import { useRoute } from 'vue-router';
+import { useProjectSettingStore } from '@/store/modules/projectSetting';
+
+const { getDarkTheme } = useDesignSetting();
+const {
+  // showFooter,
+  navMode,
+  navTheme,
+  headerSetting,
+  menuSetting,
+  multiTabsSetting,
+} = useProjectSetting();
+
+const settingStore = useProjectSettingStore();
+
+const collapsed = ref<boolean>(false);
+
+const { mobileWidth, menuWidth } = unref(menuSetting);
+
+const isMobile = computed<boolean>({
+  get: () => settingStore.getIsMobile,
+  set: (val) => settingStore.setIsMobile(val),
+});
+
+const fixedHeader = computed(() => {
+  const { fixed } = unref(headerSetting);
+  return fixed ? 'absolute' : 'static';
+});
+
+const isMixMenuNoneSub = computed(() => {
+  const mixMenu = unref(menuSetting).mixMenu;
+  const currentRoute = useRoute();
+  if (unref(navMode) != 'horizontal-mix') return true;
+  if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
+    return false;
+  }
+  return true;
+});
+
+const fixedMenu = computed(() => {
+  const { fixed } = unref(headerSetting);
+  return fixed ? 'absolute' : 'static';
+});
+
+const isMultiTabs = computed(() => {
+  return unref(multiTabsSetting).show;
+});
+
+const fixedMulti = computed(() => {
+  return unref(multiTabsSetting).fixed;
+});
+
+const inverted = computed(() => {
+  return ['dark', 'header-dark'].includes(unref(navTheme));
+});
+
+const getHeaderInverted = computed(() => {
+  return ['light', 'header-dark'].includes(unref(navTheme)) ? unref(inverted) : !unref(inverted);
+});
+
+const leftMenuWidth = computed(() => {
+  const { minMenuWidth, menuWidth } = unref(menuSetting);
+  return collapsed.value ? minMenuWidth : menuWidth;
+});
+
+const getMenuLocation = computed(() => {
+  return 'left';
+});
+
+// 控制显示或隐藏移动端侧边栏
+const showSideDrawer = computed({
+  get: () => isMobile.value && collapsed.value,
+  set: (val) => (collapsed.value = val),
+});
+
+//判断是否触发移动端模式
+const checkMobileMode = () => {
+  if (document.body.clientWidth <= mobileWidth) {
+    isMobile.value = true;
+  } else {
+    isMobile.value = false;
+  }
+  collapsed.value = false;
+};
+
+const watchWidth = () => {
+  const Width = document.body.clientWidth;
+  if (Width <= 950) {
+    collapsed.value = true;
+  } else collapsed.value = false;
+
+  checkMobileMode();
+};
+
+onMounted(() => {
+  checkMobileMode();
+  window.addEventListener('resize', watchWidth);
+});
 </script>
 
 <style lang="less">
-  .layout-side-drawer {
-    background-color: rgb(0, 20, 40);
-
-    .layout-sider {
-      min-height: 100vh;
-      box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
-      position: relative;
-      z-index: 13;
-      transition: all 0.2s ease-in-out;
-    }
+.layout-side-drawer {
+  background-color: rgb(0, 20, 40);
+
+  .layout-sider {
+    min-height: 100vh;
+    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+    position: relative;
+    z-index: 13;
+    transition: all 0.2s ease-in-out;
   }
+}
 </style>
 <style lang="less" scoped>
-  .layout {
-    display: flex;
-    flex-direction: row;
-    flex: auto;
+.layout {
+  display: flex;
+  flex-direction: row;
+  flex: auto;
 
-    &-default-background {
-      background: #f5f7f9;
-    }
-
-    .layout-sider {
-      min-height: 100vh;
-      box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
-      position: relative;
-      z-index: 13;
-      transition: all 0.2s ease-in-out;
-    }
-
-    .layout-sider-fix {
-      position: fixed;
-      top: 0;
-      left: 0;
-    }
-
-    .ant-layout {
-      overflow: hidden;
-    }
-
-    .layout-right-fix {
-      overflow-x: hidden;
-      padding-left: 200px;
-      min-height: 100vh;
-      transition: all 0.2s ease-in-out;
-    }
-
-    .layout-content {
-      flex: auto;
-      min-height: 100vh;
-    }
-
-    .n-layout-header.n-layout-header--absolute-positioned {
-      z-index: 11;
-    }
-
-    .n-layout-footer {
-      background: none;
-    }
+  &-default-background {
+    background: #f5f7f9;
   }
 
-  .layout-content-main {
-    margin: 0 10px 10px;
+  .layout-sider {
+    min-height: 100vh;
+    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
     position: relative;
-    padding-top: 64px;
+    z-index: 13;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .layout-sider-fix {
+    position: fixed;
+    top: 0;
+    left: 0;
   }
 
-  .layout-content-main-fix {
-    padding-top: 64px;
+  .ant-layout {
+    overflow: hidden;
   }
 
-  .fluid-header {
-    padding-top: 0;
+  .layout-right-fix {
+    overflow-x: hidden;
+    padding-left: 200px;
+    min-height: 100vh;
+    transition: all 0.2s ease-in-out;
   }
 
-  .main-view-fix {
-    padding-top: 44px;
+  .layout-content {
+    flex: auto;
+    min-height: 100vh;
   }
 
-  .noMultiTabs {
-    padding-top: 0;
+  .n-layout-header.n-layout-header--absolute-positioned {
+    z-index: 11;
   }
+
+  .n-layout-footer {
+    background: none;
+  }
+}
+
+.layout-content-main {
+  margin: 0 10px 10px;
+  position: relative;
+  padding-top: 64px;
+}
+
+.layout-content-main-fix {
+  padding-top: 64px;
+}
+
+.fluid-header {
+  padding-top: 0;
+}
+
+.main-view-fix {
+  padding-top: 44px;
+}
+
+.noMultiTabs {
+  padding-top: 0;
+}
 </style>

+ 3 - 32
Report-V3-TS/src/router/modules/exception.ts → Report-V3-TS/src/router/base/constRoutes.ts

@@ -1,17 +1,8 @@
-/*
- * @Description:
- * @Author: qianlishi
- * @Date: 2024-12-08 03:56:09
- * @LastEditors: qianlishi
- * @LastEditTime: 2024-12-08 16:57:02
- */
 import { RouteRecordRaw } from 'vue-router';
 import { Layout } from '@/router/base/index';
-import { ExclamationCircleOutlined } from '@vicons/antd';
-import { renderIcon } from '@/utils/index';
 
 /**
- * @descipt 异常页面
+ * @descript 没有权限露路由
  * @param name 路由名称, 必须设置,且不能重名
  * @param meta 路由元信息(路由附带扩展信息)
  * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
@@ -22,26 +13,16 @@ import { renderIcon } from '@/utils/index';
  * @param meta.sort 排序越小越排前
  *
  * */
-const routes: Array<RouteRecordRaw> = [
+export const constRoutes: Array<RouteRecordRaw> = [
   {
-    path: '/exception',
+    path: '/404',
     name: 'Exception',
-    redirect: '/exception/403',
     component: Layout,
     meta: {
       title: '异常页面',
-      icon: renderIcon(ExclamationCircleOutlined),
       sort: 10,
     },
     children: [
-      {
-        path: '403',
-        name: 'exception-403',
-        meta: {
-          title: '403',
-        },
-        component: () => import('@/views/exception/403.vue'),
-      },
       {
         path: '404',
         name: 'exception-404',
@@ -50,16 +31,6 @@ const routes: Array<RouteRecordRaw> = [
         },
         component: () => import('@/views/exception/404.vue'),
       },
-      {
-        path: '500',
-        name: 'exception-500',
-        meta: {
-          title: '500',
-        },
-        component: () => import('@/views/exception/500.vue'),
-      },
     ],
   },
 ];
-
-export default routes;

+ 16 - 10
Report-V3-TS/src/router/index.ts

@@ -1,7 +1,8 @@
 import { App } from 'vue';
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 import { RedirectRoute } from '@/router/base/index';
-// import { PageEnum } from '@/enums/pageEnum';
+import { constRoutes } from '@/router/base/constRoutes';
+import { PageEnum } from '@/enums/pageEnum';
 import { createRouterGuards } from './guards/index';
 import type { IModuleType } from './types/index';
 
@@ -19,14 +20,14 @@ function sortRoute(a, b) {
 
 routeModuleList.sort(sortRoute);
 
-// export const RootRoute: RouteRecordRaw = {
-//   path: '/',
-//   name: 'Root',
-//   redirect: PageEnum.BASE_HOME,
-//   meta: {
-//     title: 'Root',
-//   },
-// };
+export const RootRoute: RouteRecordRaw = {
+  path: '/',
+  name: 'Root',
+  redirect: PageEnum.BASE_HOME,
+  meta: {
+    title: 'Root',
+  },
+};
 
 export const LoginRoute: RouteRecordRaw = {
   path: '/login',
@@ -41,7 +42,12 @@ export const LoginRoute: RouteRecordRaw = {
 export const asyncRoutes = [...routeModuleList];
 
 //普通路由 无需验证权限
-export const constantRouter: RouteRecordRaw[] = [LoginRoute, RedirectRoute];
+export const constantRouter: RouteRecordRaw[] = [
+  LoginRoute,
+  RootRoute,
+  RedirectRoute,
+  ...constRoutes,
+];
 
 const router = createRouter({
   history: createWebHistory(),

+ 1 - 0
Report-V3-TS/src/router/modules/home.ts

@@ -32,6 +32,7 @@ const routes: Array<RouteRecordRaw> = [
         name: 'index',
         meta: {
           title: '首页',
+          affix: true,
         },
         component: () => import('@/views/dashboard/index.vue'),
       },

+ 2 - 1
Report-V3-TS/src/views/dashboard/index.vue

@@ -1,6 +1,7 @@
 <template>
-  <div>首页</div>  
+  <div>111</div>
 </template>
 <script setup lang="ts">
+
 </script>
 <style lang="less" scoped></style>

+ 0 - 40
Report-V3-TS/src/views/exception/403.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="flex flex-col justify-center page-container">
-    <div class="text-center">
-      <img src="~@/assets/images/exception/403.svg" alt="" />
-    </div>
-    <div class="text-center">
-      <h1 class="text-base text-gray-500">抱歉,你无权访问该页面</h1>
-      <n-button type="info" @click="goHome">回到首页</n-button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { useRouter } from 'vue-router';
-  const router = useRouter();
-  function goHome() {
-    router.push('/');
-  }
-</script>
-
-<style lang="less" scoped>
-  .page-container {
-    width: 100%;
-    border-radius: 4px;
-    padding: 50px 0;
-    height: 100vh;
-
-    .text-center {
-      h1 {
-        color: #666;
-        padding: 20px 0;
-      }
-    }
-
-    img {
-      width: 350px;
-      margin: 0 auto;
-    }
-  }
-</style>

+ 0 - 40
Report-V3-TS/src/views/exception/500.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="flex flex-col justify-center page-container">
-    <div class="text-center">
-      <img src="~@/assets/images/exception/500.svg" alt="" />
-    </div>
-    <div class="text-center">
-      <h1 class="text-base text-gray-500">抱歉,服务器出错了</h1>
-      <n-button type="info" @click="goHome">回到首页</n-button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { useRouter } from 'vue-router';
-  const router = useRouter();
-  function goHome() {
-    router.push('/');
-  }
-</script>
-
-<style lang="less" scoped>
-  .page-container {
-    width: 100%;
-    border-radius: 4px;
-    padding: 50px 0;
-    height: 100vh;
-
-    .text-center {
-      h1 {
-        color: #666;
-        padding: 20px 0;
-      }
-    }
-
-    img {
-      width: 350px;
-      margin: 0 auto;
-    }
-  }
-</style>