搜索结果列表页面开发

src/components/Error/config.ts

@@ -0,0 +1,35 @@
+import icon403 from '@/assets/imgs/error/403@2x.png';
+import icon404 from '@/assets/imgs/error/404@2x.png';
+import icon503 from '@/assets/imgs/error/503@2x.png';
+
+const defaultErrorCode = 404;
+const errorConfig = {
+  403: {
+    animation: 'error403',
+    avatar: icon403,
+    title: '抱歉，你无权访问',
+    desc: '',
+    operationList: [
+      { text: '返回首页', href: '/', variant: 'solid', color: 'primary' }
+    ]
+  },
+  404: {
+    animation: 'error404',
+    avatar: icon404,
+    title: '抱歉，你访问的页面找不到了',
+    desc: '请返回首页继续浏览',
+    operationList: [
+      { text: '返回首页', href: '/', variant: 'solid', color: 'primary' }
+    ]
+  },
+  503: {
+    animation: 'error503',
+    avatar: icon503,
+    title: '抱歉，服务器维护中',
+    desc: '服务器暂时维护中，请等待'
+  }
+};
+
+export const getErrorConfig = (errorCode: string|number) => {
+  return errorConfig[errorCode] || errorConfig[defaultErrorCode];
+};

src/components/Error/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="error-page flex " :class="isMobile ? 'flex-col gap-[32px]' : 'h-[240px] gap-[64px]'">
+    <Animation :name="error.animation" width="240px" height="240px" />
+    <div class="bg-CG300 w-[1px]" v-if="!isMobile"></div>
+    <div class="flex flex-col" :class="isMobile ? 'items-center' : 'justify-center'">
+      <img :class="isMobile ? 'w-[108px] height-[40px]' : 'w-[216px] height-[80px]'" :src="error.avatar" />
+      <div :class="isMobile ? 'text-[20px] mt-3' : 'text-[32px] mt-6'">{{ error.title }}</div>
+      <div class="text-light mt-2">{{ error.desc }}</div>
+      <div class="flex gap-4 mt-6 operation-list" :class="isMobile ? 'mt-8' : ''" v-if="error.operationList?.length">
+        <GLink v-for="item in error.operationList" :key="item.text" :href="item.href">
+          <d-button v-bind="item">
+            {{ item.text }}
+          </d-button>
+        </GLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getErrorConfig } from './config';
+import Animation from '@/components/Animation/index.vue';
+import { usePageResize } from '@/utils/hooks/usePageResize';
+const { isMobile } = usePageResize();
+
+const props = withDefaults(defineProps<{
+  code: string | number
+}>(), {
+  code: '404'
+});
+
+const error = computed(() => getErrorConfig(props.code));
+</script>
+
+<style lang="scss" scoped>
+.error-page {
+  .operation-list {
+    :deep(.devui-button) {
+      width: 160px;
+      border-radius: var(--border-radius);
+    }
+  }
+}
+</style>