新增脚本的搜索功能
This commit is contained in:
50
src/App.vue
50
src/App.vue
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user