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

@@ -14,6 +14,7 @@ document.addEventListener('alpine:init', () => {
quotaRows: [], // Filtered view
usageHistory: {}, // Usage statistics history (from /account-limits?includeHistory=true)
loading: false,
initialLoad: true, // Track first load for skeleton screen
connectionStatus: 'connecting',
lastUpdated: '-',
@@ -36,7 +37,10 @@ document.addEventListener('alpine:init', () => {
},
async fetchData() {
this.loading = true;
// Only show skeleton on initial load, not on refresh
if (this.initialLoad) {
this.loading = true;
}
try {
// Get password from global store
const password = Alpine.store('global').webuiPassword;
@@ -72,6 +76,7 @@ document.addEventListener('alpine:init', () => {
store.showToast(store.t('connectionLost'), 'error');
} finally {
this.loading = false;
this.initialLoad = false; // Mark initial load as complete
}
},