feat(webui): add Tailwind build system and refactor frontend architecture
- Replace Tailwind CDN with local build (PostCSS + autoprefixer + daisyui) - Add CSS build scripts with automatic prepare hook on npm install - Create account-actions.js service layer with unified response format - Extend ErrorHandler.withLoading() for automatic loading state management - Add skeleton screens for initial load, silent refresh for subsequent updates - Implement loading animations for async operations (buttons, modals) - Improve empty states and add ARIA labels for accessibility - Abstract component styles using @apply (buttons, badges, inputs) - Add JSDoc documentation for Dashboard modules - Update README and CLAUDE.md with development guidelines
This commit is contained in:
@@ -26,8 +26,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Grid -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- Skeleton Loading (仅在首次加载时显示) -->
|
||||
<div x-show="$store.data.initialLoad" class="space-y-6">
|
||||
<!-- Skeleton Stats Grid -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="skeleton-stat-card"></div>
|
||||
<div class="skeleton-stat-card"></div>
|
||||
<div class="skeleton-stat-card"></div>
|
||||
<div class="skeleton-stat-card"></div>
|
||||
</div>
|
||||
|
||||
<!-- Skeleton Charts -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="skeleton-chart"></div>
|
||||
<div class="skeleton-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actual Content (首次加载完成后显示) -->
|
||||
<div x-show="!$store.data.initialLoad" class="space-y-6">
|
||||
<!-- Stats Grid -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div
|
||||
class="stat bg-space-900/40 border border-space-border/30 rounded-xl p-6 hover:border-cyan-500/30 hover:bg-cyan-500/5 transition-all duration-300 group relative cursor-pointer"
|
||||
@click="$store.global.activeTab = 'accounts'"
|
||||
@@ -434,4 +453,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- End of x-show="!$store.data.loading" -->
|
||||
</div>
|
||||
Reference in New Issue
Block a user