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:
Wha1eChai
2026-01-11 02:11:35 +08:00
parent ee6d222e4d
commit a56bc06cc1
22 changed files with 2730 additions and 499 deletions

View File

@@ -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>