UI界面模拟shadcn admin效果

2025-12-25 15:47:47 +08:00
parent 148fa6ad9a
commit a1a4964cd2
25 changed files with 1061 additions and 636 deletions
@@ -0,0 +1,58 @@
+<template>
+  <div class="state state-error">
+    <el-icon class="state-icon"><CircleCloseFilled /></el-icon>
+    <div class="state-title">{{ title }}</div>
+    <div v-if="description" class="state-desc">{{ description }}</div>
+    <div v-if="$slots.action" class="state-action">
+      <slot name="action" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CircleCloseFilled } from "@element-plus/icons-vue";
+
+withDefaults(
+  defineProps<{
+    title?: string;
+    description?: string;
+  }>(),
+  {
+    title: "加载失败",
+    description: "请稍后重试",
+  }
+);
+</script>
+
+<style scoped>
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 12px;
+  text-align: center;
+}
+
+.state-icon {
+  font-size: 36px;
+  color: var(--ctms-danger);
+  margin-bottom: 10px;
+}
+
+.state-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+}
+
+.state-desc {
+  font-size: 12px;
+  color: var(--ctms-text-secondary);
+  margin-top: 6px;
+}
+
+.state-action {
+  margin-top: 12px;
+}
+</style>