u

code/link56/link56-frontend/src/components/CustomEmpty.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '这里什么也没有',
+  },
+  inContainer: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const containerClass = computed(() => {
+  return props.inContainer ? 'container-inner' : 'container-fixed'
+})
+</script>
+
+<template>
+  <div :class="containerClass">
+    <div class="empty-wrapper">
+      <img class="empty-image" src="/no-data.svg">
+
+      <div v-if="title" class="empty-title">
+        {{ title }}
+      </div>
+
+      <div v-if="$slots.extra" class="empty-extra">
+        <slot name="extra" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-inner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.container-fixed {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.empty-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 24px;
+}
+
+.empty-image {
+  width: 360px;
+  max-width: 100%;
+}
+
+.empty-title {
+  margin-top: 24px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #666;
+  line-height: 1.4;
+}
+
+.empty-extra {
+  margin-top: 28px;
+}
+</style>