feat: 完善 UI 一致性 - 添加皮肤预设、仪表盘组件、多账号、WebSocket

- 新增 11 个皮肤预设 CSS
- 新增 4 个仪表盘组件 (QuickActions, Notifications, Tasks, Calendar)
- 实现多账号认证与切换功能
- 添加 WebSocket 实时通知服务

Author: h7ml

src/app/core/services/auth.service.ts

@@ -9,6 +9,13 @@ export interface User {
   permissions?: string[];
 }
 
+export interface Account {
+  id: string;
+  label: string;
+  token: string;
+  user: User;
+}
+
 // 标准权限列表
 export const PERMISSIONS = {
   // 仪表盘
@@ -55,16 +62,24 @@ export const ROLES = {
 
 const AUTH_TOKEN_KEY = 'auth_token';
 const AUTH_USER_KEY = 'auth_user';
+const AUTH_ACCOUNTS_KEY = 'auth_accounts';
+const AUTH_ACTIVE_ACCOUNT_KEY = 'auth_active_account';
 
 @Injectable({ providedIn: 'root' })
 export class AuthService {
   private readonly tokenSignal = signal<string | null>(this.getStoredToken());
   private readonly userSignal = signal<User | null>(this.getStoredUser());
   private readonly loadingSignal = signal(false);
+  private readonly accountsSignal = signal<Account[]>(this.getStoredAccounts());
+  private readonly activeAccountIdSignal = signal<string | null>(this.getStoredActiveAccountId());
 
   readonly isAuthenticated = computed(() => !!this.tokenSignal());
   readonly user = computed(() => this.userSignal());
   readonly loading = computed(() => this.loadingSignal());
+  readonly accounts = this.accountsSignal.asReadonly();
+  readonly activeAccount = computed(() =>
+    this.accountsSignal().find((acc) => acc.id === this.activeAccountIdSignal()) || null
+  );
 
   constructor() {
     // Sync token changes to localStorage
@@ -85,6 +100,30 @@ export class AuthService {
         localStorage.removeItem(AUTH_USER_KEY);
       }
     });
+
+    effect(() => {
+      if (typeof localStorage === 'undefined') return;
+      localStorage.setItem(AUTH_ACCOUNTS_KEY, JSON.stringify(this.accountsSignal()));
+    });
+
+    effect(() => {
+      if (typeof localStorage === 'undefined') return;
+      const activeId = this.activeAccountIdSignal();
+      if (activeId) {
+        localStorage.setItem(AUTH_ACTIVE_ACCOUNT_KEY, activeId);
+      } else {
+        localStorage.removeItem(AUTH_ACTIVE_ACCOUNT_KEY);
+      }
+    });
+
+    // Keep token/user in sync with active account
+    effect(() => {
+      const active = this.activeAccount();
+      if (active) {
+        this.tokenSignal.set(active.token);
+        this.userSignal.set(active.user);
+      }
+    });
   }
 
   get token(): string | null {
@@ -94,6 +133,19 @@ export class AuthService {
   setAuth(token: string, user: User): void {
     this.tokenSignal.set(token);
     this.userSignal.set(user);
+
+    const existing = this.accountsSignal();
+    const account: Account = {
+      id: user.id,
+      label: user.name || user.email,
+      token,
+      user,
+    };
+    const next = existing.some((a) => a.id === account.id)
+      ? existing.map((a) => (a.id === account.id ? account : a))
+      : [...existing, account];
+    this.accountsSignal.set(next);
+    this.activeAccountIdSignal.set(account.id);
   }
 
   setLoading(loading: boolean): void {
@@ -103,6 +155,7 @@ export class AuthService {
   logout(): void {
     this.tokenSignal.set(null);
     this.userSignal.set(null);
+    this.activeAccountIdSignal.set(null);
   }
 
   /**
@@ -163,4 +216,35 @@ export class AuthService {
       return null;
     }
   }
+
+  private getStoredAccounts(): Account[] {
+    if (typeof localStorage === 'undefined') return [];
+    const stored = localStorage.getItem(AUTH_ACCOUNTS_KEY);
+    if (!stored) return [];
+    try {
+      return JSON.parse(stored) as Account[];
+    } catch {
+      return [];
+    }
+  }
+
+  private getStoredActiveAccountId(): string | null {
+    if (typeof localStorage === 'undefined') return null;
+    return localStorage.getItem(AUTH_ACTIVE_ACCOUNT_KEY);
+  }
+
+  switchAccount(accountId: string): void {
+    const target = this.accountsSignal().find((acc) => acc.id === accountId);
+    if (!target) return;
+    this.activeAccountIdSignal.set(accountId);
+    this.tokenSignal.set(target.token);
+    this.userSignal.set(target.user);
+  }
+
+  removeAccount(accountId: string): void {
+    this.accountsSignal.update((accounts) => accounts.filter((a) => a.id !== accountId));
+    if (this.activeAccountIdSignal() === accountId) {
+      this.activeAccountIdSignal.set(this.accountsSignal()[0]?.id ?? null);
+    }
+  }
 }

src/app/core/services/websocket.service.ts

@@ -0,0 +1,63 @@
+import { Injectable, computed, signal } from '@angular/core';
+
+export interface RealtimeNotification {
+  id: string;
+  title: string;
+  body?: string;
+  type: 'info' | 'warning' | 'success';
+  createdAt: number;
+}
+
+@Injectable({ providedIn: 'root' })
+export class WebsocketService {
+  private readonly connectedSignal = signal(false);
+  private readonly messagesSignal = signal<RealtimeNotification[]>([]);
+  private timer?: number;
+
+  readonly connected = this.connectedSignal.asReadonly();
+  readonly notifications = computed(() => this.messagesSignal());
+
+  constructor() {
+    // Auto-connect on creation
+    this.connect();
+  }
+
+  connect(): void {
+    if (this.connectedSignal()) return;
+    this.connectedSignal.set(true);
+    // Mock stream similar to Next.js MockWebSocket
+    this.timer = window.setInterval(() => {
+      const now = Date.now();
+      const types: RealtimeNotification['type'][] = ['info', 'warning', 'success'];
+      const titles = [
+        '新用户注册',
+        '系统通知',
+        '任务更新',
+        '安全提醒',
+        '数据备份完成',
+        '服务器资源警告',
+      ];
+      const next: RealtimeNotification = {
+        id: `${now}`,
+        title: titles[now % titles.length],
+        body: '这是通过 WebSocket 服务推送的模拟通知。',
+        type: types[now % types.length],
+        createdAt: now,
+      };
+      this.messagesSignal.update((list) => [next, ...list].slice(0, 20));
+    }, 8000);
+  }
+
+  disconnect(): void {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = undefined;
+    }
+    this.connectedSignal.set(false);
+  }
+
+  // Allow components to mark messages as read
+  clear(): void {
+    this.messagesSignal.set([]);
+  }
+}

src/app/features/dashboard/dashboard.page.ts

@@ -5,7 +5,7 @@ import { ButtonComponent } from '../../shared/components/ui';
 import { LineChartComponent, BarChartComponent, PieChartComponent } from '../../shared/components/charts';
 import { LucideAngularModule, Edit, Check, RotateCcw, Plus } from 'lucide-angular';
 import { DashboardStore, DashboardWidget } from './dashboard.store';
-import { WidgetWrapperComponent, StatsWidgetComponent, RecentActivityWidgetComponent } from './widgets';
+import { WidgetWrapperComponent, StatsWidgetComponent, RecentActivityWidgetComponent, QuickActionsWidgetComponent, NotificationsWidgetComponent, TasksWidgetComponent, CalendarWidgetComponent } from './widgets';
 
 @Component({
   selector: 'app-dashboard-page',
@@ -20,6 +20,10 @@ import { WidgetWrapperComponent, StatsWidgetComponent, RecentActivityWidgetCompo
     WidgetWrapperComponent,
     StatsWidgetComponent,
     RecentActivityWidgetComponent,
+    QuickActionsWidgetComponent,
+    NotificationsWidgetComponent,
+    TasksWidgetComponent,
+    CalendarWidgetComponent,
   ],
   template: `
     <div class="space-y-4">
@@ -92,6 +96,18 @@ import { WidgetWrapperComponent, StatsWidgetComponent, RecentActivityWidgetCompo
                 @case ('recent-activity') {
                   <app-recent-activity-widget />
                 }
+                @case ('quick-actions') {
+                  <app-quick-actions-widget />
+                }
+                @case ('notifications') {
+                  <app-notifications-widget />
+                }
+                @case ('tasks') {
+                  <app-tasks-widget />
+                }
+                @case ('calendar') {
+                  <app-calendar-widget />
+                }
               }
             </app-widget-wrapper>
           </gridster-item>

src/app/features/dashboard/dashboard.store.ts

@@ -3,7 +3,16 @@ import { GridsterItem } from 'angular-gridster2';
 
 export interface WidgetConfig {
   id: string;
-  type: 'stats' | 'chart-line' | 'chart-bar' | 'chart-pie' | 'recent-activity' | 'quick-actions';
+  type:
+    | 'stats'
+    | 'chart-line'
+    | 'chart-bar'
+    | 'chart-pie'
+    | 'recent-activity'
+    | 'quick-actions'
+    | 'notifications'
+    | 'tasks'
+    | 'calendar';
   title: string;
   settings?: Record<string, unknown>;
 }
@@ -24,6 +33,10 @@ const defaultWidgets: DashboardWidget[] = [
   { id: 'chart-pie', x: 6, y: 2, cols: 6, rows: 4, widget: { id: 'chart-pie', type: 'chart-pie', title: '用户分布' } },
   { id: 'chart-bar', x: 0, y: 6, cols: 6, rows: 4, widget: { id: 'chart-bar', type: 'chart-bar', title: '月度收入' } },
   { id: 'recent-activity', x: 6, y: 6, cols: 6, rows: 4, widget: { id: 'recent-activity', type: 'recent-activity', title: '最近活动' } },
+  { id: 'quick-actions', x: 0, y: 10, cols: 4, rows: 3, widget: { id: 'quick-actions', type: 'quick-actions', title: '快捷操作' } },
+  { id: 'notifications', x: 4, y: 10, cols: 4, rows: 3, widget: { id: 'notifications', type: 'notifications', title: '通知' } },
+  { id: 'tasks', x: 8, y: 10, cols: 4, rows: 3, widget: { id: 'tasks', type: 'tasks', title: '任务' } },
+  { id: 'calendar', x: 0, y: 13, cols: 12, rows: 4, widget: { id: 'calendar', type: 'calendar', title: '日历' } },
 ];
 
 @Injectable({ providedIn: 'root' })

src/app/features/dashboard/widgets/calendar-widget.component.ts

@@ -0,0 +1,71 @@
+import { Component, computed, signal } from '@angular/core';
+import { LucideAngularModule, ChevronLeft, ChevronRight } from 'lucide-angular';
+
+interface CalendarDay {
+  date: number;
+  label: string;
+  highlight?: boolean;
+}
+
+@Component({
+  selector: 'app-calendar-widget',
+  standalone: true,
+  imports: [LucideAngularModule],
+  template: `
+    <div class="space-y-3">
+      <div class="flex items-center justify-between">
+        <button type="button" class="h-8 w-8 flex items-center justify-center rounded-md hover:bg-accent" (click)="prevMonth()">
+          <lucide-angular [img]="ChevronLeftIcon" class="h-4 w-4" />
+        </button>
+        <div class="text-sm font-semibold text-foreground">{{ currentLabel() }}</div>
+        <button type="button" class="h-8 w-8 flex items-center justify-center rounded-md hover:bg-accent" (click)="nextMonth()">
+          <lucide-angular [img]="ChevronRightIcon" class="h-4 w-4" />
+        </button>
+      </div>
+      <div class="grid grid-cols-7 gap-2 text-center text-xs text-muted-foreground">
+        <span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span class="font-medium text-foreground">六</span><span class="font-medium text-foreground">日</span>
+      </div>
+      <div class="grid grid-cols-7 gap-2">
+        @for (day of days(); track day.date) {
+          <div class="h-10 rounded-md border border-border/60 flex items-center justify-center text-sm"
+            [class.bg-primary/10]="day.highlight"
+            [class.text-primary]="day.highlight">
+            <span>{{ day.label }}</span>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+})
+export class CalendarWidgetComponent {
+  readonly ChevronLeftIcon = ChevronLeft;
+  readonly ChevronRightIcon = ChevronRight;
+
+  private readonly month = signal(0); // month offset from current
+
+  readonly currentLabel = computed(() => {
+    const date = new Date();
+    date.setMonth(date.getMonth() + this.month());
+    return `${date.getFullYear()} 年 ${date.getMonth() + 1} 月`;
+  });
+
+  readonly days = computed<CalendarDay[]>(() => {
+    const date = new Date();
+    date.setDate(1);
+    date.setMonth(date.getMonth() + this.month());
+    const totalDays = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+    return Array.from({ length: totalDays }).map((_, idx) => ({
+      date: idx + 1,
+      label: `${idx + 1}`,
+      highlight: (idx + 1) % 5 === 0, // placeholder highlight days
+    }));
+  });
+
+  prevMonth(): void {
+    this.month.update((m) => m - 1);
+  }
+
+  nextMonth(): void {
+    this.month.update((m) => m + 1);
+  }
+}

src/app/features/dashboard/widgets/index.ts

@@ -1,3 +1,7 @@
 export { WidgetWrapperComponent } from './widget-wrapper.component';
 export { StatsWidgetComponent } from './stats-widget.component';
 export { RecentActivityWidgetComponent } from './recent-activity-widget.component';
+export { QuickActionsWidgetComponent } from './quick-actions-widget.component';
+export { NotificationsWidgetComponent } from './notifications-widget.component';
+export { TasksWidgetComponent } from './tasks-widget.component';
+export { CalendarWidgetComponent } from './calendar-widget.component';