update index

src/pages/chatdoc/Index.vue

@@ -1,25 +1,40 @@
 <template>
   <layout>
     <template #chatdoc>
-      <el-card @click="onCreate">
-        <font-awesome-icon :icon="['fas', 'book']" />
-      </el-card>
-      <el-card
-        v-for="(repository, repositoryIndex) in repositories"
-        :key="repositoryIndex"
-        class="repository"
-        @click="onClick(repository)"
-      >
-        {{ repository.id }}
-      </el-card>
+      <el-row class="repositories" :gutter="15">
+        <el-col :xl="3" :md="4" :xm="6" :xs="24">
+          <el-card class="repository" @click="onCreate">
+            <font-awesome-icon :icon="['fas', 'book']" />
+          </el-card>
+        </el-col>
+        <el-col
+          v-for="(repository, repositoryIndex) in repositories"
+          :key="repositoryIndex"
+          :xl="3"
+          :md="4"
+          :xm="6"
+          :xs="24"
+        >
+          <el-card class="repository" @click="onClick(repository)">
+            <h2 class="name">{{ repository.name }}</h2>
+            <p class="id">
+              <font-awesome-icon :icon="['fas', 'book']" />
+              {{ repository.id }}
+            </p>
+            <p class="description">
+              {{ repository.description }}
+            </p>
+          </el-card>
+        </el-col>
+      </el-row>
     </template>
   </layout>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Layout from '@/layouts/Chatdoc.vue';
-import { ElCard } from 'element-plus';
+import { ElCard, ElRow, ElCol } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { IChatdocRepository } from '@/operators';
 import { ROUTE_CHATDOC_KNOWLEDGE } from '@/router';
@@ -29,6 +44,8 @@ export default defineComponent({
   components: {
     Layout,
     ElCard,
+    ElRow,
+    ElCol,
     FontAwesomeIcon
   },
   data() {
@@ -59,7 +76,24 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .repository {
-  width: 300px;
+  width: 100%;
   margin-bottom: 20px;
+  cursor: pointer;
+
+  .name {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  .id {
+    font-size: 12px;
+    color: #333;
+  }
+
+  .description {
+    font-size: 12px;
+    color: #666;
+  }
 }
 </style>