add scrollbars (#5)

* Delete src/App.vue

* Add files via upload

* Delete src/App.vue

* Add files via upload

src/App.vue

@@ -3,12 +3,7 @@
     <a-layout-content :style="{ padding: '20px 50px' }">
       <a-space direction="vertical" size="large" fill>
         <a-space>
-          <a-select
+          <a-select v-model="selectedRepo" placeholder="选择脚本仓库" style="width: 320px" @change="fetchRepoData">
-            v-model="selectedRepo"
-            placeholder="选择脚本仓库"
-            style="width: 320px"
-            @change="fetchRepoData"
-          >
             <a-option v-for="(repo, index) in repoOptions" :key="index" :value="repo.value">
               {{ repo.label }}
             </a-option>
@@ -23,57 +18,56 @@
             <a-row :gutter="16">
               <a-col :span="6" v-if="showTree(category)">
                 <!-- 添加搜索框 -->
-                <a-input-search
+                <a-input-search v-model="treeSearchText" placeholder="搜索下方目录" style="margin-bottom: 8px;" allow-clear
-                  v-model="treeSearchText"
+                  @input="handleTreeSearch" @clear="handleTreeSearch" />
-                  placeholder="搜索下方目录"
+                <!-- 添加滚动容器 -->
-                  style="margin-bottom: 8px;"
+                <div
-                  allow-clear
+                  style="height: calc(100vh - 200px); overflow-y: auto; overflow-x: hidden; border-right: 1px solid #e5e5e5;">
-                  @input="handleTreeSearch"
+                  <a-tree :data="filteredTreeData[category.name] || getCategoryTree(category)"
-                  @clear="handleTreeSearch"
-                />
-                <a-tree
-                  :data="filteredTreeData[category.name] || getCategoryTree(category)"
                     :defaultExpandedKeys="getExpandedKeys(category)"
-                  @select="(selectedKeys, event) => handleTreeSelect(selectedKeys, event, category.name)"
+                    @select="(selectedKeys, event) => handleTreeSelect(selectedKeys, event, category.name)">
-                >
                     <template #extra="nodeData">
-                    <a-button
+                      <a-button type="text" size="mini"
-                      type="text"
-                      size="mini"
                         style="position: absolute; right: 8px; top: 6px; color: #3370ff;"
-                      @click.stop="() => onTreeIconClick(nodeData)"
+                        @click.stop="() => onTreeIconClick(nodeData)">
-                    >
                         订阅
                       </a-button>
                     </template>
                   </a-tree>
+                </div>
               </a-col>
               <a-col :span="showTree(category) ? 18 : 24">
+
                 <a-space direction="vertical" size="medium" style="width: 100%;">
                   <a-row :gutter="16">
                     <a-col :span="8">
-                      <a-input v-model="searchConditions[category.name].name" placeholder="搜索名称" allow-clear @change="filterData(category.name)" />
+                      <a-input v-model="searchConditions[category.name].name" placeholder="搜索名称" allow-clear
+                        @change="filterData(category.name)" />
                     </a-col>
                     <a-col :span="8">
-                      <a-select v-model="searchConditions[category.name].author" placeholder="选择作者" style="width: 100%;" allow-clear @change="filterData(category.name)">
+                      <a-select v-model="searchConditions[category.name].author" placeholder="选择作者" style="width: 100%;"
-                        <a-option v-for="author in getUniqueAuthors(category)" :key="author" :value="author">{{ author }}</a-option>
+                        allow-clear @change="filterData(category.name)">
+                        <a-option v-for="author in getUniqueAuthors(category)" :key="author" :value="author">{{ author
+                          }}</a-option>
                       </a-select>
                     </a-col>
                     <a-col :span="8">
-                      <a-select v-model="searchConditions[category.name].tags" placeholder="选择标签" style="width: 100%;" :filter-option="handleTagFilter" allow-clear @change="handleTagSelect(category.name)" multiple>
+                      <a-select v-model="searchConditions[category.name].tags" placeholder="选择标签" style="width: 100%;"
+                        :filter-option="handleTagFilter" allow-clear @change="handleTagSelect(category.name)" multiple>
                         <a-option v-for="tag in getUniqueTags(category)" :key="tag" :value="tag">{{ tag }}</a-option>
                       </a-select>
                     </a-col>
                   </a-row>
-                  <a-table :columns="columns" :data="filteredData[category.name]" :pagination="{ pageSize, showPageSize: true }" @page-size-change="handlePageSizeChange">
+                  <!-- 大盒子，整体高度 calc(100vh - 200px) -->
+                  <div style="height: calc(100vh - 200px); display: flex; flex-direction: column; flex: 1">
+                    <!-- 表格内容区域，占满剩余空间并启用滚动 -->
+                    <div class="table-scroll-container" style="flex: 1; overflow-y: auto; overflow-x: hidden; padding-left: 16px;">
+                      <!-- 表格内容 -->
+                      <a-table :columns="columns" :data="filteredData[category.name].slice((currentPage - 1) * pageSize, currentPage*pageSize)" :pagination="false"
+                        @page-size-change="handlePageSizeChange" :stickyHeader="true">
                         <template #name="{ record }">
-                      <a-popover
+                          <a-popover position="right" v-if="record.description" :content="record.description"
-                        position="right"
+                            :mouseEnterDelay="0.5" :mouseLeaveDelay="0.2">
-                        v-if="record.description"
-                        :content="record.description"
-                        :mouseEnterDelay="0.5"
-                        :mouseLeaveDelay="0.2"
-                      >
                             <span :ellipsis="{ rows: 1, showTooltip: false }">
                               {{ record.name }}
                             </span>
@@ -83,16 +77,15 @@
                           </span>
                         </template>
                         <template #tags="{ record }">
-                      <a-space :style="{
+                          <a-space :style="{ flexWrap: 'wrap', rowGap: '8px' }">
-                        flexWrap: 'wrap',
+                            <a-tag v-for="tag in record.tags" :key="tag" :color="getTagColor(tag)"
-                        rowGap: '8px'
+                              style="cursor: pointer" @click="handleTagClick(tag, category.name)">{{ tag }}</a-tag>
-                      }">
-                        <a-tag v-for="tag in record.tags" :key="tag" :color="getTagColor(tag)" style="cursor: pointer" @click="handleTagClick(tag, category.name)">{{ tag }}</a-tag>
                           </a-space>
                         </template>
                         <template #operations="{ record }">
                           <a-space>
-                        <a-button v-if="category.name !== 'pathing'" type="primary" size="mini" @click="downloadScript(record)">
+                            <a-button v-if="category.name !== 'pathing'" type="primary" size="mini"
+                              @click="downloadScript(record)">
                               订阅
                             </a-button>
                             <a-button size="mini" @click="showDetails(record)">
@@ -101,6 +94,15 @@
                           </a-space>
                         </template>
                       </a-table>
+                    </div>
+
+                    <!-- 分页器区域，固定在大盒子底部 -->
+                    <div style="margin-top: 10px;">
+                      <a-pagination v-model:current="currentPage" :total="filteredData[category.name]?.length"
+                        :pageSize="pageSize" :show-page-size="true" @change="handlePageChange" @page-size-change="handlePageSizeChange"
+                        style="display: flex; align-items: center; justify-content: flex-end;" />
+                    </div>
+                  </div>
                 </a-space>
               </a-col>
             </a-row>
@@ -111,13 +113,7 @@
       </a-space>
     </a-layout-content>
 
-    <a-drawer
+    <a-drawer :visible="drawerVisible" @cancel="closeDrawer" @ok="closeDrawer" unmountOnClose :width="480">
-      :visible="drawerVisible"
-      @cancel="closeDrawer"
-      @ok="closeDrawer"
-      unmountOnClose
-      :width="480"
-    >
       <template #title>
         脚本详情
       </template>
@@ -125,13 +121,7 @@
     </a-drawer>
 
     <!-- 添加加载模态框 -->
-    <a-modal
+    <a-modal :visible="loading" :footer="false" :closable="false" :mask-closable="false" :unmount-on-close="true">
-      :visible="loading"
-      :footer="false"
-      :closable="false"
-      :mask-closable="false"
-      :unmount-on-close="true"
-    >
       <div style="text-align: center;">
         <a-spin size="large" />
         <p style="margin-top: 16px;">正在加载仓库数据...</p>
@@ -241,10 +231,26 @@ const loading = ref(false);
 // 添加新的响应式量
 const repoUpdateTime = ref('');
 
+const currentPage = ref(1);
 const pageSize = ref(20);
 
+const handlePageChange = (newPage) => {
+  currentPage.value = newPage;
+
+  const tableContainer = document.querySelector('.table-scroll-container');
+  if (tableContainer) {
+    tableContainer.scrollTop = 0;
+  }
+};
+
 const handlePageSizeChange = (newPageSize) => {
   pageSize.value = newPageSize;
+  currentPage.value = 1;
+
+  const tableContainer = document.querySelector('.table-scroll-container');
+  if (tableContainer) {
+    tableContainer.scrollTop = 0;
+  }
 };
 
 const columns = [
@@ -568,7 +574,7 @@ const getCategoryDisplayName = (name) => {
 };
 
 const onTreeIconClick = (nodeData) => {
-  downloadScript({name: nodeData.title, path: nodeData.key});
+  downloadScript({ name: nodeData.title, path: nodeData.key });
 };
 
 // 修改日期格式化函数
@@ -653,4 +659,8 @@ onMounted(() => {
   overflow: visible;
   text-overflow: clip;
 }
+
+.footer {
+  position: fixed;
+}
 </style>