YG-Soft/X-Financial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): finalize shared shells and loading states

Browse Source
This commit is contained in:
caoxiaozhu
2026-05-29 13:17:39 +08:00
parent 64cc76c970
commit e080105f9f
52 changed files with 1559 additions and 861 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
web/src/components/shared/FloatingLightBandWindow.vue Normal file
View File

@@ -0,0 +1,267 @@
<template>
<div class="floating-light-band-window" :class="[variant, tone, motionClass]">
<span class="floating-light-band-window__mark" aria-hidden="true">
<i :class="icon"></i>
</span>
<div v-if="hasCopy" class="floating-light-band-window__copy">
<strong v-if="displayTitle">{{ displayTitle }}</strong>
<span v-if="displayMessage">{{ displayMessage }}</span>
</div>
<span class="floating-light-band-window__progress" aria-hidden="true"></span>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
icon: { type: String, default: 'mdi mdi-loading' },
message: { type: String, default: '' },
motion: {
type: String,
default: 'loop',
validator: (value) => ['loop', 'entry'].includes(value)
},
title: { type: String, default: '' },
tone: {
type: String,
default: 'theme',
validator: (value) => ['theme', 'sky', 'success'].includes(value)
},
variant: {
type: String,
default: 'panel',
validator: (value) => ['entry', 'panel', 'detail', 'overlay', 'drawer', 'banner'].includes(value)
}
})
const displayTitle = computed(() => (props.variant === 'banner' && props.message ? '' : props.title))
const displayMessage = computed(() => props.message || (props.variant === 'banner' ? props.title : ''))
const hasCopy = computed(() => Boolean(displayTitle.value || displayMessage.value))
const motionClass = computed(() => `motion-${props.motion}`)
</script>
<style scoped>
.floating-light-band-window {
--accent: var(--theme-primary);
--accent-deep: var(--theme-primary-active);
--accent-rgb: var(--theme-primary-rgb, 58, 124, 165);
width: min(380px, 100%);
max-width: 100%;
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 12px 14px;
align-items: center;
padding: 22px 24px 20px;
border: 1px solid rgba(148, 163, 184, 0.26);
border-radius: 4px;
background: #fff;
box-shadow: 0 20px 46px rgba(15, 23, 42, 0.14);
color: var(--muted);
animation: floatingLightBandWindowIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.floating-light-band-window.theme,
.floating-light-band-window.sky {
--accent: var(--theme-primary);
--accent-deep: var(--theme-primary-active);
--accent-rgb: var(--theme-primary-rgb, 58, 124, 165);
}
.floating-light-band-window.success {
--accent: var(--success);
--accent-deep: var(--success-hover);
--accent-rgb: var(--success-rgb, 47, 133, 90);
}
.floating-light-band-window.entry {
width: min(360px, calc(100% - 48px));
}
.floating-light-band-window.detail,
.floating-light-band-window.drawer {
grid-template-columns: 38px minmax(0, 1fr);
padding: 18px 20px 16px;
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}
.floating-light-band-window.overlay {
width: min(360px, 100%);
}
.floating-light-band-window.banner {
width: 100%;
grid-template-columns: 28px minmax(0, 1fr);
gap: 8px 10px;
padding: 8px 10px 7px;
border-color: rgba(var(--accent-rgb), 0.18);
background: rgba(255, 255, 255, 0.78);
box-shadow: none;
animation: none;
}
.floating-light-band-window__mark {
width: 42px;
height: 42px;
display: inline-grid;
place-items: center;
border: 1px solid rgba(var(--accent-rgb), 0.2);
border-radius: 4px;
background: color-mix(in srgb, var(--accent) 10%, white);
color: var(--accent-deep);
font-size: 22px;
}
.floating-light-band-window.detail .floating-light-band-window__mark,
.floating-light-band-window.drawer .floating-light-band-window__mark {
width: 38px;
height: 38px;
font-size: 20px;
}
.floating-light-band-window.banner .floating-light-band-window__mark {
width: 28px;
height: 28px;
font-size: 16px;
}
.floating-light-band-window__copy {
min-width: 0;
display: grid;
gap: 4px;
text-align: left;
}
.floating-light-band-window__copy strong {
color: var(--ink);
font-size: 16px;
line-height: 1.35;
font-weight: 750;
overflow-wrap: anywhere;
}
.floating-light-band-window__copy span {
color: var(--muted);
font-size: 13px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.floating-light-band-window.detail .floating-light-band-window__copy strong,
.floating-light-band-window.drawer .floating-light-band-window__copy strong {
font-size: 14px;
font-weight: 800;
}
.floating-light-band-window.banner .floating-light-band-window__copy {
gap: 0;
}
.floating-light-band-window.banner .floating-light-band-window__copy strong,
.floating-light-band-window.banner .floating-light-band-window__copy span {
color: var(--accent-deep);
font-size: 12px;
font-weight: 760;
line-height: 1.4;
}
.floating-light-band-window__progress {
position: relative;
grid-column: 1 / -1;
height: 3px;
overflow: hidden;
background:
linear-gradient(
90deg,
rgba(var(--accent-rgb), 0.08),
rgba(var(--accent-rgb), 0.16),
rgba(var(--accent-rgb), 0.08)
);
}
.floating-light-band-window.banner .floating-light-band-window__progress {
height: 2px;
}
.floating-light-band-window__progress::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 46%;
background:
linear-gradient(
90deg,
rgba(var(--accent-rgb), 0),
var(--accent),
var(--accent-deep),
color-mix(in srgb, var(--accent) 40%, white),
rgba(var(--accent-rgb), 0)
);
box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.36);
transform: translateX(-105%);
will-change: transform;
}
.floating-light-band-window.motion-loop .floating-light-band-window__progress::before {
animation: floatingLightBandSweep 980ms cubic-bezier(0.2, 0, 0, 1) infinite;
}
.floating-light-band-window.motion-entry .floating-light-band-window__progress::before {
width: 100%;
background: var(--accent);
transform-origin: left center;
animation: floatingLightBandEntry 840ms cubic-bezier(0.2, 0, 0, 1) both;
}
@keyframes floatingLightBandWindowIn {
from {
opacity: 0;
transform: scale3d(0.92, 0.92, 1);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes floatingLightBandSweep {
from {
transform: translateX(-105%);
}
to {
transform: translateX(215%);
}
}
@keyframes floatingLightBandEntry {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@media (prefers-reduced-motion: reduce) {
.floating-light-band-window {
animation: none !important;
}
.floating-light-band-window.motion-entry .floating-light-band-window__progress::before {
width: 100%;
background: var(--accent);
animation: none !important;
transform: none;
}
.floating-light-band-window.motion-loop .floating-light-band-window__progress::before {
animation: floatingLightBandSweep 1800ms linear infinite !important;
}
}
</style>

171
web/src/components/shared/TableLoadingState.vue
View File

@@ -1,25 +1,30 @@
<template>
<div
class="table-loading"
:class="[variant, tone]"
role="status"
:aria-label="ariaLabel"
aria-live="polite"
>
<span class="table-loading__spinner" aria-hidden="true">
<i :class="icon"></i>
</span>
<div v-if="hasCopy" class="table-loading__copy">
<strong v-if="title">{{ title }}</strong>
<p v-if="message">{{ message }}</p>
<span v-if="floating" class="table-loading-anchor" aria-hidden="true"></span>
<Teleport to="body" :disabled="!floating">
<div
class="table-loading"
:class="[variant, tone, { 'screen-floating': floating, 'modal-floating': floating && blocking }]"
role="status"
:aria-label="ariaLabel"
aria-live="polite"
>
<FloatingLightBandWindow
:icon="icon"
:message="message"
:motion="motion"
:title="title"
:tone="tone"
:variant="variant"
/>
</div>
</div>
</Teleport>
</template>
<script setup>
import { computed } from 'vue'
import FloatingLightBandWindow from './FloatingLightBandWindow.vue'
const props = defineProps({
variant: {
type: String,
@@ -34,50 +39,75 @@ const props = defineProps({
title: { type: String, default: '' },
message: { type: String, default: '' },
icon: { type: String, default: 'mdi mdi-loading' },
motion: {
type: String,
default: 'loop',
validator: (value) => ['loop', 'entry'].includes(value)
},
floating: { type: Boolean, default: false },
blocking: { type: Boolean, default: false },
showSkeleton: { type: Boolean, default: true },
skeletonRows: { type: Number, default: 5 }
})
const hasCopy = computed(() => Boolean(props.title || props.message))
const ariaLabel = computed(() => [props.title, props.message].filter(Boolean).join(', ') || 'Loading')
</script>
<style scoped>
.table-loading {
--accent: var(--theme-primary);
--accent-deep: var(--theme-primary-active);
width: 100%;
color: #64748b;
}
.table-loading.theme,
.table-loading.sky {
--accent: var(--theme-primary);
--accent-deep: var(--theme-primary-active);
.table-loading-anchor {
display: block;
width: 0;
height: 0;
overflow: hidden;
}
.table-loading.success {
--accent: var(--success);
--accent-deep: var(--success-hover);
.table-loading.screen-floating {
position: fixed;
inset: 0;
z-index: 430;
width: 100vw;
height: 100dvh;
min-height: 100dvh;
display: grid;
place-items: center;
padding: 24px;
background: rgba(248, 250, 252, 0.08);
backdrop-filter: blur(0.5px);
-webkit-backdrop-filter: blur(0.5px);
pointer-events: none;
}
.table-loading.screen-floating.modal-floating {
z-index: 560;
background: rgba(15, 23, 42, 0.18);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
pointer-events: auto;
}
.table-loading.panel {
min-height: 220px;
display: grid;
place-items: center;
gap: 12px;
padding: 28px 24px;
text-align: center;
}
.table-loading.panel.screen-floating {
min-height: 100dvh;
padding: 24px;
}
.table-loading.detail {
min-height: 180px;
display: flex;
display: grid;
align-items: center;
gap: 14px;
justify-items: center;
padding: 22px 24px;
text-align: left;
}
.table-loading.overlay,
@@ -97,86 +127,9 @@ const ariaLabel = computed(() => [props.title, props.message].filter(Boolean).jo
}
.table-loading.banner {
display: inline-flex;
align-items: center;
gap: 8px;
display: block;
min-height: 0;
padding: 0;
color: #255b7d;
}
.table-loading__spinner {
width: 38px;
height: 38px;
display: inline-grid;
place-items: center;
border: 3px solid #e2e8f0;
border-top-color: var(--accent);
border-radius: 50%;
color: var(--accent-deep);
animation: table-spinner-rotate 0.8s linear infinite !important;
}
.table-loading.detail .table-loading__spinner {
width: 34px;
height: 34px;
}
.table-loading.banner .table-loading__spinner {
width: 18px;
height: 18px;
border-width: 2px;
}
.table-loading__spinner i {
display: none;
}
.table-loading__copy {
display: grid;
gap: 6px;
min-width: 0;
}
.table-loading.panel .table-loading__copy,
.table-loading.overlay .table-loading__copy,
.table-loading.drawer .table-loading__copy {
max-width: 360px;
}
.table-loading.detail .table-loading__copy {
flex: 1;
}
.table-loading.banner .table-loading__copy {
display: inline;
}
.table-loading__copy strong {
color: #0f172a;
font-size: 14px;
font-weight: 850;
line-height: 1.4;
}
.table-loading__copy p {
margin: 0;
font-size: 13px;
line-height: 1.65;
}
.table-loading.banner .table-loading__copy strong {
display: none;
}
.table-loading.banner .table-loading__copy p {
font-size: 12px;
font-weight: 700;
}
@keyframes table-spinner-rotate {
to {
transform: rotate(360deg);
}
}
</style>