新增脚本的搜索功能

This commit is contained in:
宇寒
2024-12-29 22:12:24 +08:00
committed by GitHub
parent e07c892b00
commit 4fd430ffee

View File

@@ -13,6 +13,14 @@
{{ repo.label }} {{ repo.label }}
</a-option> </a-option>
</a-select> </a-select>
<!-- 添加搜索框 -->
<a-input
v-model="treeSearchText"
placeholder="搜索左侧目录"
style="width: 200px"
allow-clear
@input="handleTreeSearch"
/>
<a-typography-text v-if="repoUpdateTime"> <a-typography-text v-if="repoUpdateTime">
更新时间{{ repoUpdateTime }} 更新时间{{ repoUpdateTime }}
</a-typography-text> </a-typography-text>
@@ -23,7 +31,7 @@
<a-row :gutter="16"> <a-row :gutter="16">
<a-col :span="6" v-if="showTree(category)"> <a-col :span="6" v-if="showTree(category)">
<a-tree <a-tree
:data="getCategoryTree(category)" :data="filteredTreeData[category.name] || getCategoryTree(category)"
:defaultExpandedKeys="getExpandedKeys(category)" :defaultExpandedKeys="getExpandedKeys(category)"
@select="(selectedKeys, event) => handleTreeSelect(selectedKeys, event, category.name)" @select="(selectedKeys, event) => handleTreeSelect(selectedKeys, event, category.name)"
> >
@@ -149,6 +157,43 @@ const mirrorUrls = [
"https://mirror.ghproxy.com/{0}" "https://mirror.ghproxy.com/{0}"
]; ];
// 添加树搜索相关的响应式变量
const treeSearchText = ref('');
const filteredTreeData = reactive({});
// 添加树搜索处理函数
const handleTreeSearch = () => {
repoData.value.forEach(category => {
if (showTree(category)) {
if (!treeSearchText.value) {
filteredTreeData[category.name] = getCategoryTree(category);
} else {
const searchText = treeSearchText.value.toLowerCase();
const originalTree = getCategoryTree(category);
filteredTreeData[category.name] = filterTreeNodes(originalTree, searchText);
}
}
});
};
// 添加树节点过滤函数
const filterTreeNodes = (nodes, searchText) => {
return nodes.map(node => {
const newNode = { ...node };
if (newNode.children) {
newNode.children = filterTreeNodes(newNode.children, searchText);
}
if (
newNode.title.toLowerCase().includes(searchText) ||
(newNode.children && newNode.children.length > 0)
) {
return newNode;
}
return null;
}).filter(Boolean);
};
// 修改 repoOptions 的定义 // 修改 repoOptions 的定义
const repoOptions = computed(() => { const repoOptions = computed(() => {
if (mode === 'single') { if (mode === 'single') {
@@ -207,6 +252,7 @@ const fetchRepoData = async () => {
// 清空现有数据 // 清空现有数据
repoDataRaw.value = []; repoDataRaw.value = [];
repoUpdateTime.value = ''; repoUpdateTime.value = '';
treeSearchText.value = ''; // 清空树搜索文本
Object.keys(searchConditions).forEach(key => { Object.keys(searchConditions).forEach(key => {
searchConditions[key] = { searchConditions[key] = {
name: '', name: '',
@@ -571,4 +617,4 @@ onMounted(() => {
overflow: visible; overflow: visible;
text-overflow: clip; text-overflow: clip;
} }
</style> </style>