ng-code/backup-original/app/components/document-list.component.html

<div class="document-list-container">
  <div class="document-list-header">
    <mat-icon class="header-icon">folder_open</mat-icon>
    <h3 class="header-title">项目文档</h3>
  </div>
  
  <div class="document-items">
    @for (docType of documentTypeOrder; track docType) {
      @let doc = getDocumentByType(docType);
      @if (doc) {
        <div class="document-item" [class.has-content]="hasContent(doc)" [class.loading]="doc.isLoading">
          <!-- 文档标题区域 -->
          <div class="document-header" (click)="toggleDocument(docType)">
            <div class="document-icon-title">
              <mat-icon class="document-icon">{{ getIcon(docType) }}</mat-icon>
              <span class="document-title">{{ getDisplayName(docType) }}</span>
              @if (doc.isLoading) {
                <mat-spinner diameter="16" class="document-loading-spinner"></mat-spinner>
              }
            </div>
            
            <div class="document-actions">
              @if (hasContent(doc)) {
                <span class="document-updated" matTooltip="最后更新时间">
                  {{ getLastUpdatedText(doc) }}
                </span>
              }
              <mat-icon class="expand-icon">
                {{ expandedStates[docType] ? 'expand_less' : 'expand_more' }}
              </mat-icon>
            </div>
          </div>
          
          <!-- 文档内容区域（可折叠） -->
          @if (expandedStates[docType]) {
            <div class="document-content">
              @if (hasContent(doc)) {
                <div class="document-content-inner" [innerHTML]="doc.content | markdown"></div>
              } @else {
                <div class="document-empty">
                  <mat-icon>inbox</mat-icon>
                  <p>暂无内容</p>
                  @if (doc.isLoading) {
                    <p class="loading-text">正在加载中...</p>
                  }
                </div>
              }
            </div>
          } @else {
            <!-- 折叠状态下的预览 -->
            @if (hasContent(doc)) {
              <div class="document-preview">
                <span class="preview-text">{{ getContentPreview(doc.content) }}</span>
              </div>
            }
          }
        </div>
      } @else {
        <!-- 文档不存在的情况 -->
        <div class="document-item empty">
          <div class="document-header">
            <div class="document-icon-title">
              <mat-icon class="document-icon">{{ getIcon(docType) }}</mat-icon>
              <span class="document-title">{{ getDisplayName(docType) }}</span>
            </div>
            <div class="document-status">
              <span class="status-text">未创建</span>
            </div>
          </div>
        </div>
      }
    }
  </div>
</div>