DZR/bettergi-scripts-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add scrollbars (#5)

Browse Source 
* Delete src/App.vue

* Add files via upload

* Delete src/App.vue

* Add files via upload
This commit is contained in:
zaodonganqi
2025-02-12 11:36:20 +08:00
committed by GitHub
parent 34138fb94d
commit 0844216924
1 changed files with 666 additions and 656 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/App.vue
View File

@@ -3,12 +3,7 @@
<a-layout-content :style="{ padding: '20px 50px' }">
<a-space direction="vertical" size="large" fill>
<a-space>
<a-select
v-model="selectedRepo"
placeholder="选择脚本仓库"
style="width: 320px"
@change="fetchRepoData"
>
<a-select 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
v-model="treeSearchText"
placeholder="搜索下方目录"
style="margin-bottom: 8px;"
allow-clear
@input="handleTreeSearch"
@clear="handleTreeSearch"
/>
<a-tree
:data="filteredTreeData[category.name] || getCategoryTree(category)"
<a-input-search v-model="treeSearchText" placeholder="搜索下方目录" style="margin-bottom: 8px;" allow-clear
@input="handleTreeSearch" @clear="handleTreeSearch" />
<!-- 添加滚动容器 -->
<div
style="height: calc(100vh - 200px); overflow-y: auto; overflow-x: hidden; border-right: 1px solid #e5e5e5;">
<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
type="text"
size="mini"
<a-button 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-option v-for="author in getUniqueAuthors(category)" :key="author" :value="author">{{ author }}</a-option>
<a-select v-model="searchConditions[category.name].author" placeholder="选择作者" style="width: 100%;"
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
position="right"
v-if="record.description"
:content="record.description"
:mouseEnterDelay="0.5"
:mouseLeaveDelay="0.2"
>
<a-popover position="right" 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="{
flexWrap: 'wrap',
rowGap: '8px'
}">
<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 :style="{ flexWrap: 'wrap', rowGap: '8px' }">
<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
:visible="drawerVisible"
@cancel="closeDrawer"
@ok="closeDrawer"
unmountOnClose
:width="480"
>
<a-drawer :visible="drawerVisible" @cancel="closeDrawer" @ok="closeDrawer" unmountOnClose :width="480">
<template #title>
脚本详情
</template>
@@ -125,13 +121,7 @@
</a-drawer>
<!-- 添加加载模态框 -->
<a-modal
:visible="loading"
:footer="false"
:closable="false"
:mask-closable="false"
:unmount-on-close="true"
>
<a-modal :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 = [
@@ -653,4 +659,8 @@ onMounted(() => {
overflow: visible;
text-overflow: clip;
}
.footer {
position: fixed;
}
</style>