Alist V3嵌套挂载xiaoya后搜索框重复，且无法搜索

[zheng-fc]

使用Alist V3嵌套挂载后，无法在Alist中搜索，搜索框重复，且无法使用搜索

在alist中创建搜素索引后仍无法搜索xiaoya中挂载的内容

本地环境在黑群晖docker中创建

[zheng-fc]

version: '3.8'

networks:

alist-network:
driver: bridge

services:
alist:
image: 'xhofe/alist:latest'
container_name: alist
volumes:
- /volume2/docker/alist:/opt/alist/data
- /volume2/Video/TVshows:/tv
- /volume2/Video/Movies:/movie

    ports:
        - 5244:5244
    networks:
        - alist-network
    environment:
        - TZ=Asia/Shanghai
        - PGID=100
        - PUID=1026
        - UMASK=022
    depends_on:
        - xiaoya
    restart: unless-stopped

xiaoya:
    image: xiaoyaliu/alist
    container_name: xiaoya
    volumes:
        - /volume2/docker/xiaoya/data:/data
    ports:
        - 5678:80
    networks:
        - alist-network
    environment:
        - TZ=Asia/Shanghai
        - PGID=$(id -g)
        - PUID=$(id -u)
        - UMASK=022
    restart: unless-stopped
    
    
    使用docker compose挂载，仅配置了基本的阿里云盘相关，未启用tvbox等其他内容

[Lanfei]

小雅的搜索是小雅在 README.md 里 fake 出来的，只有在小雅的 alist 才能用。

不过似乎 README.md 被挂载了两次，导致里面 fake 搜索框的代码被执行了两次，这个估计倒是 alist 的问题。

我自己 Hijack 了一个支持小雅的搜索，但因为涉及到跨域请求，需要想办法给小雅的搜索加上 Access-Control-Allow-Origin 头，比如用 nginx 反向代理的方式。

方式如下，仅供参考：

在 alist 后台新建一个小雅路径的元信息，顶部说明里输入以下代码，并把 xyPath 和 xyUrl 改成你自己的：

<style>
    #searchform {
        display: none;
    }

    #xy-result {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: var(--hope-sizes-full);
    }

    #xy-result .link {
        display: flex;
        align-items: center;
        flex-direction: row;
        word-break: break-all;
        overflow-wrap: break-word;
        width: var(--hope-sizes-full);
        border-radius: var(--hope-radii-md);
        padding-inline-start: var(--hope-space-2);
        padding-inline-end: var(--hope-space-2);
        border-bottom: 1px solid rgba(132, 133, 141, 0.18);
    }

    #xy-result .link:hover {
        background-color: rgba(132, 133, 141, 0.18);
    }

    #xy-result .wrapper {
        flex: 1 1 0%;
        display: flex;
        align-items: start;
        flex-direction: column;
        row-gap: var(--hope-space-1);
        padding: var(--hope-space-1);
        width: var(--hope-sizes-full);
    }

    #xy-result .mark {
        padding-inline: 1px;
        color: var(--hope-colors-info11);
        border-radius: var(--hope-radii-md);
        background: var(--hope-colors-info4);
        font-weight: var(--hope-fontWeights-bold);
    }

    #xy-result .desc {
        color: var(--hope-colors-neutral10);
        font-size: var(--hope-fontSizes-xs);
        line-height: var(--hope-lineHeights-4);
    }

    #xy-result .info {
        margin-top: var(--hope-space-8);
        margin-bottom: var(--hope-space-8);
    }

    #xy-result .empty {
        margin-top: var(--hope-space-8);
        margin-bottom: var(--hope-space-8);
        font-size: var(--hope-fontSizes-2xl);
        line-height: var(--hope-lineHeights-8);
    }
</style>
<script>
    window.removeEventListener('keydown', window['xySearchHijack']);
    window.addEventListener('keydown', window['xySearchHijack'] = e => {
        const xyPath = '/网盘/小雅'; // 小雅网盘的挂载路径
        const xyUrl = 'http://xiaoya.example.com'; // 小雅网盘的地址，需要添加 Access-Control-Allow-Origin 头
        if (e.key === 'Enter' && decodeURIComponent(location.pathname).startsWith(xyPath)) {
            const input = document.querySelector('#search-input');
            if (input) {
                const keyword = input.value;
                const result = document.createElement('div');
                const controller = new AbortController();
                const signal = controller.signal;
                result.id = 'xy-result';
                result.innerHTML = '<p class="info">正在搜索小雅...</p>';
                while (input.parentElement.nextElementSibling) {
                    input.parentElement.parentElement.removeChild(input.parentElement.nextElementSibling);
                }
                input.parentElement.parentElement.appendChild(result);
                window['xyController']?.abort();
                window['xyController'] = controller;
                fetch(`${xyUrl}/search?box=${encodeURIComponent(keyword)}&type=all&url=`, {signal})
                    .then(res => res.text())
                    .then(html => {
                        const parser = new DOMParser();
                        const doc = parser.parseFromString(html, 'text/html');
                        const links = doc.querySelectorAll('div ul a');
                        result.innerHTML = '';
                        if (links.length === 0) {
                            result.innerHTML = '<div class="empty">暂无结果</div>';
                            return;
                        }
                        links.forEach(link => {
                            const filePath = `${xyPath}/${link.innerText}`;
                            const fileName = filePath.split('/').at(-1);
                            const fileDir = filePath.replace(`/${fileName}`, '');
                            const html = `
<a class="link" href="${filePath}?from=search">
    <div class="wrapper">
        <p>${fileName.replace(keyword, `<mark class="mark">${keyword}</mark>`)}</p>
        <p class="desc">${fileDir}</p>
    </div>
</a>
`;
                            result.innerHTML += html;
                        });
                    });
            }
            e.stopImmediatePropagation();
        }
    }, true);
</script>

小雅的索引似乎有点问题，有些搜到的结果实际上并不存在。