zhouchengcheng/ctms
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(ui): unify loading empty error states

Browse Source
This commit is contained in:
Cheng Zhou
2026-03-04 16:40:18 +08:00
parent a3036c2233
commit 5caf4c51cc
5 changed files with 83 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/StateEmpty.vue
+6 -26
View File
@@ -1,12 +1,12 @@
<template>
<div class="state state-empty">
<el-icon class="state-icon"><Document /></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">
<section class="ctms-state state state-empty">
<el-icon class="ctms-state-icon state-icon"><Document /></el-icon>
<h3 class="ctms-state-title state-title">{{ title }}</h3>
<p v-if="description" class="ctms-state-desc state-desc">{{ description }}</p>
<div v-if="$slots.action" class="ctms-state-action state-action">
<slot name="action" />
</div>
</div>
</section>
</template>
<script setup lang="ts">
@@ -26,35 +26,15 @@ withDefaults(
</script>
<style scoped>
.state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 12px;
color: var(--ctms-text-secondary);
text-align: center;
}
.state-icon {
font-size: 36px;
color: var(--ctms-text-disabled);
margin-bottom: 10px;
}
.state-title {
font-size: 14px;
font-weight: 600;
color: var(--ctms-text-regular);
}
.state-desc {
font-size: 12px;
color: var(--ctms-text-secondary);
margin-top: 6px;
}
.state-action {
margin-top: 12px;
}
</style>
frontend/src/components/StateError.vue
+6 -26
View File
@@ -1,12 +1,12 @@
<template>
<div class="state state-error">
<el-icon class="state-icon"><CircleClose /></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">
<section class="ctms-state state state-error">
<el-icon class="ctms-state-icon state-icon"><CircleClose /></el-icon>
<h3 class="ctms-state-title state-title">{{ title }}</h3>
<p v-if="description" class="ctms-state-desc state-desc">{{ description }}</p>
<div v-if="$slots.action" class="ctms-state-action state-action">
<slot name="action" />
</div>
</div>
</section>
</template>
<script setup lang="ts">
@@ -26,35 +26,15 @@ withDefaults(
</script>
<style scoped>
.state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 12px;
color: var(--ctms-text-secondary);
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>
frontend/src/components/StateLoading.vue
+11 -12
View File
@@ -1,25 +1,24 @@
<template>
<div class="state state-loading">
<el-skeleton :rows="rows" animated />
</div>
<section class="ctms-state ctms-state-loading state state-loading">
<h3 class="ctms-state-title state-title">{{ title }}</h3>
<p class="ctms-state-desc state-desc">{{ description }}</p>
<el-skeleton :rows="rows" animated class="ctms-state-skeleton" />
</section>
</template>
<script setup lang="ts">
import { TEXT } from "../locales";
withDefaults(
defineProps<{
rows?: number;
title?: string;
description?: string;
}>(),
{
rows: 4,
title: TEXT.common.loading,
description: TEXT.common.messages.loadSuccess,
}
);
</script>
<style scoped>
.state-loading {
padding: 24px;
border: 1px solid var(--ctms-border-color);
border-radius: var(--ctms-radius);
background-color: #ffffff;
}
</style>
frontend/src/styles/main.css
+39
View File
@@ -437,6 +437,45 @@ body {
font-weight: 600;
}
/* Unified loading / empty / error states */
.ctms-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 28px 16px;
text-align: center;
border: 1px solid var(--ctms-border-color);
border-radius: var(--ctms-radius);
background: #ffffff;
}
.ctms-state-icon {
font-size: 34px;
}
.ctms-state-title {
margin: 0;
font-size: 15px;
font-weight: 600;
}
.ctms-state-desc {
margin: 0;
font-size: 13px;
color: var(--ctms-text-secondary);
}
.ctms-state-action {
margin-top: 4px;
}
.ctms-state-loading .ctms-state-skeleton {
width: min(560px, 100%);
margin-top: 4px;
}
/* Tool classes */
.text-main {
color: var(--ctms-text-main);