任务执行1-19

src/components/page-state/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="page-state" :class="[`page-state-${status}`]">
+    <a-spin v-if="status === 'loading'" :tip="loadingText" class="page-state-spin">
+      <slot />
+    </a-spin>
+
+    <a-result v-else-if="status === 'error'" status="500" :title="errorTitle" :subtitle="errorText">
+      <template #extra>
+        <a-button type="primary" @click="$emit('retry')">重试</a-button>
+      </template>
+    </a-result>
+
+    <a-result v-else-if="status === 'unauthorized'" status="403" :title="unauthorizedTitle" :subtitle="unauthorizedText" />
+
+    <template v-else>
+      <a-alert v-if="status === 'partial'" type="warning" show-icon class="page-state-alert">
+        {{ partialText }}
+      </a-alert>
+      <slot />
+      <a-empty v-if="status === 'empty'" :description="emptyText" class="page-state-empty" />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  status: {
+    type: String,
+    default: 'success',
+    validator: (value: string) => ['loading', 'empty', 'error', 'success', 'partial', 'unauthorized'].includes(value),
+  },
+  loadingText: {
+    type: String,
+    default: '加载中',
+  },
+  emptyText: {
+    type: String,
+    default: '暂无数据',
+  },
+  errorTitle: {
+    type: String,
+    default: '加载失败',
+  },
+  errorText: {
+    type: String,
+    default: '数据暂时不可用，请稍后重试。',
+  },
+  partialText: {
+    type: String,
+    default: '部分数据加载失败，当前页面展示可用数据。',
+  },
+  unauthorizedTitle: {
+    type: String,
+    default: '无权限访问',
+  },
+  unauthorizedText: {
+    type: String,
+    default: '当前账号没有访问或操作该页面的权限。',
+  },
+})
+
+defineEmits<{
+  (e: 'retry'): void
+}>()
+</script>
+
+<script lang="ts">
+export default {
+  name: 'PageState',
+}
+</script>
+
+<style scoped lang="less">
+.page-state {
+  min-width: 0;
+}
+
+.page-state-spin {
+  width: 100%;
+}
+
+.page-state-alert {
+  margin-bottom: 12px;
+}
+
+.page-state-empty {
+  padding: 32px 0;
+}
+</style>