t20260403/src/app/docs.component.html

<div class="docs-container">
  <header class="docs-header">
    <h1>图表库组件文档</h1>
    <p>Charts Library ESM - 功能强大、美观易用的Angular图表组件库</p>
  </header>

  <div class="docs-content">
    <aside class="docs-sidebar">
      <nav class="category-nav">
        <h3>组件分类</h3>
        <ul>
          <li *ngFor="let category of categories" 
              [class.active]="selectedCategory === category.id"
              (click)="selectCategory(category.id)">
            <span class="category-icon">{{ getCategoryIcon(category.id) }}</span>
            <span class="category-name">{{ category.name }}</span>
            <span class="category-count">
              {{ getCategoryCount(category.id) }}
            </span>
          </li>
        </ul>
      </nav>

      <nav class="component-list">
        <h3>组件列表</h3>
        <ul>
          <li *ngFor="let component of filteredComponents"
              [class.active]="isComponentSelected(component)"
              (click)="selectComponent(component)">
            <span class="component-name">{{ component.name }}</span>
            <span class="component-category">{{ getCategoryName(component.category) }}</span>
          </li>
        </ul>
      </nav>
    </aside>

    <main class="docs-main">
      <div *ngIf="selectedComponent" class="component-detail">
        <div class="component-header">
          <h2>{{ selectedComponent.name }}</h2>
          <span class="component-badge">{{ getCategoryName(selectedComponent.category) }}</span>
        </div>

        <div class="component-description">
          <p>{{ selectedComponent.description }}</p>
        </div>

        <div class="component-demo">
          <h3>组件演示</h3>
          <div class="demo-container">
            <lib-pie-chart-basic *ngIf="selectedComponentId === 'pie-basic'"></lib-pie-chart-basic>
            <lib-pie-chart-rose *ngIf="selectedComponentId === 'pie-rose'"></lib-pie-chart-rose>
            <lib-pie-chart-doughnut *ngIf="selectedComponentId === 'pie-doughnut'"></lib-pie-chart-doughnut>
            <lib-pie-chart-gradient *ngIf="selectedComponentId === 'pie-gradient'"></lib-pie-chart-gradient>
            <lib-pie-chart-label *ngIf="selectedComponentId === 'pie-label'"></lib-pie-chart-label>
            <lib-bar-chart-basic *ngIf="selectedComponentId === 'bar-basic'"></lib-bar-chart-basic>
            <lib-bar-chart-stacked *ngIf="selectedComponentId === 'bar-stacked'"></lib-bar-chart-stacked>
            <lib-bar-chart-gradient *ngIf="selectedComponentId === 'bar-gradient'"></lib-bar-chart-gradient>
            <lib-bar-chart-rounded *ngIf="selectedComponentId === 'bar-rounded'"></lib-bar-chart-rounded>
            <lib-bar-chart-mixed *ngIf="selectedComponentId === 'bar-mixed'"></lib-bar-chart-mixed>
            <lib-column-chart-basic *ngIf="selectedComponentId === 'column-basic'"></lib-column-chart-basic>
            <lib-column-chart-stacked *ngIf="selectedComponentId === 'column-stacked'"></lib-column-chart-stacked>
            <lib-column-chart-gradient *ngIf="selectedComponentId === 'column-gradient'"></lib-column-chart-gradient>
            <lib-column-chart-rounded *ngIf="selectedComponentId === 'column-rounded'"></lib-column-chart-rounded>
            <lib-column-chart-mixed *ngIf="selectedComponentId === 'column-mixed'"></lib-column-chart-mixed>
            <lib-candlestick-chart-basic *ngIf="selectedComponentId === 'candlestick-basic'"></lib-candlestick-chart-basic>
            <lib-candlestick-chart-ma *ngIf="selectedComponentId === 'candlestick-ma'"></lib-candlestick-chart-ma>
            <lib-candlestick-chart-volume *ngIf="selectedComponentId === 'candlestick-volume'"></lib-candlestick-chart-volume>
            <lib-candlestick-chart-brush *ngIf="selectedComponentId === 'candlestick-brush'"></lib-candlestick-chart-brush>
            <lib-candlestick-chart-dynamic *ngIf="selectedComponentId === 'candlestick-dynamic'"></lib-candlestick-chart-dynamic>
          </div>
        </div>

        <div class="component-usage">
          <h3>使用方法</h3>
          <div class="code-block">
            <pre><code>{{ componentUsage }}</code></pre>
          </div>
        </div>

        <div class="component-props">
          <h3>属性说明</h3>
          <table class="props-table">
            <thead>
              <tr>
                <th>属性名</th>
                <th>类型</th>
                <th>默认值</th>
                <th>说明</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><code>data</code></td>
                <td>any[]</td>
                <td>见下方</td>
                <td>图表数据</td>
              </tr>
              <tr>
                <td><code>width</code></td>
                <td>number</td>
                <td>600</td>
                <td>图表宽度（像素）</td>
              </tr>
              <tr>
                <td><code>height</code></td>
                <td>number</td>
                <td>400</td>
                <td>图表高度（像素）</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="component-data">
          <h3>数据格式</h3>
          <div class="code-block">
            <pre><code>{{ componentDataFormat }}</code></pre>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>