<template>
  <div class="block">
    <h1>概述</h1>
    <p>重建项目的列表，可以随着屏幕宽度自适应分布。</p>
  </div>
  
  <div class="block">
    <h1>代码示例</h1>
    <RunCase label="基本用法" file="./project-list/Basic.vue">
      <template #component>
        <Basic />
      </template>
      <template #description>
        <p>基本项目列表，通过thumbneil指定缩略图</p>
      </template>
    </RunCase>
    <RunCase label="demo列表（只读）" file="./project-list/ReadOnly.vue">
      <template #component>
        <ReadOnly />
      </template>
      <template #description>
        <p>设置<code>isReadOnly</code>为true可以让项目列表变成只读，并在右上角展示demo标签，用于演示项目。</p>
      </template>
    </RunCase>
  </div>

  <div class="block">
    <h1>API</h1>
    <h2>props</h2>
    <PropsTable type="project-list"/>
    <h2>events</h2>
    <EventsTable type="project-list"/>
  </div>
  
</template>

<script setup>
import Basic from '../components/project-list/Basic.vue'
import ReadOnly from '../components/project-list/ReadOnly.vue'

</script>