yss-project/src/app/pages/admin/groupchats/groupchats.html

<div class="groupchats-container">
  <div class="page-header">
    <div>
      <h1>群组管理</h1>
      <p class="subtitle">管理企业微信群聊与项目关联 (数据从企业微信同步)</p>
    </div>
    <button class="btn btn-secondary" (click)="exportGroupChats()">导出</button>
  </div>

  <div class="stats-cards">
    <div class="stat-card">
      <div class="stat-value">{{ total() }}</div>
      <div class="stat-label">群组总数</div>
    </div>
  </div>

  <div class="filter-bar">
    <input
      type="text"
      class="search-input"
      placeholder="搜索群名称..."
      [ngModel]="keyword()"
      (ngModelChange)="keyword.set($event)"
    />
    <button class="btn btn-text" (click)="resetFilters()">重置</button>
  </div>

  <div *ngIf="loading()" class="loading-state">加载中...</div>
  <div *ngIf="!loading()" class="data-table">
    <table>
      <thead>
        <tr>
          <th>群名称</th>
          <th>企微群ID</th>
          <th>关联项目</th>
          <th>成员数</th>
          <th>状态</th>
          <th width="120">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let group of filtered" [class.disabled]="group.isDisabled">
          <td>{{ group.name }}</td>
          <td><code>{{ group.chat_id }}</code></td>
          <td>{{ group.project || '未关联' }}</td>
          <td>{{ group.memberCount }}</td>
          <td>
            <span [class]="'status ' + (group.isDisabled ? 'disabled' : 'active')">
              {{ group.isDisabled ? '已禁用' : '正常' }}
            </span>
          </td>
          <td>
            <button class="btn-icon" (click)="viewGroupChat(group)">👁</button>
            <button class="btn-icon" (click)="editGroupChat(group)">✏️</button>
            <button class="btn-icon" (click)="toggleGroupChat(group)">
              {{ group.isDisabled ? '✓' : '🚫' }}
            </button>
          </td>
        </tr>
        <tr *ngIf="filtered.length === 0">
          <td colspan="6" class="empty-state">暂无数据</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- 侧边面板 -->
  <div class="side-panel" [class.open]="showPanel">
    <div class="panel-overlay" (click)="closePanel()"></div>
    <div class="panel-content">
      <div class="panel-header">
        <h2>{{ panelMode === 'edit' ? '编辑群组' : '群组详情' }}</h2>
        <button class="btn-close" (click)="closePanel()">×</button>
      </div>
      <div class="panel-body" *ngIf="currentGroupChat">
        <div *ngIf="panelMode === 'detail'" class="detail-view">
          <div class="detail-item"><label>群名称</label><div>{{ currentGroupChat.name }}</div></div>
          <div class="detail-item"><label>企微群ID</label><div><code>{{ currentGroupChat.chat_id }}</code></div></div>
          <div class="detail-item"><label>关联项目</label><div>{{ currentGroupChat.project || '未关联' }}</div></div>
          <div class="detail-item"><label>成员数</label><div>{{ currentGroupChat.memberCount }}</div></div>
          <div class="detail-item"><label>状态</label><div>{{ currentGroupChat.isDisabled ? '已禁用' : '正常' }}</div></div>
        </div>
        <div *ngIf="panelMode === 'edit'" class="form-view">
          <div class="form-group">
            <label>关联项目</label>
            <select class="form-control" [(ngModel)]="formModel.projectId">
              <option [value]="undefined">未关联</option>
              <option *ngFor="let proj of projects()" [value]="proj.id">{{ proj.title }}</option>
            </select>
          </div>
          <div class="form-group">
            <label>
              <input type="checkbox" [(ngModel)]="formModel.isDisabled" />
              禁用此群组
            </label>
          </div>
        </div>
      </div>
      <div class="panel-footer" *ngIf="panelMode === 'edit'">
        <button class="btn btn-default" (click)="closePanel()">取消</button>
        <button class="btn btn-primary" (click)="updateGroupChat()">更新</button>
      </div>
    </div>
  </div>
</div>