更新在手机上的 UI 设计

[nerdneilsfield]

Is your feature request related to a problem? Please describe.

当在手机上使用时尝试跟进新问题时,我总是很沮丧,因为很容易不小心点击到提供的参考链接,可能是由于输入框和确认按钮太小,加上它们是悬浮的位置造成的。

描述你希望的解决方案

改进移动设备上的用户界面,例如放大输入框和确认按钮的尺寸,并固定它们的位置以避免意外点击参考链接。如果能开发一个类似Perplexity的应用程序,或者有针对移动设备优化过的用户界面就更好了。

其他补充信息

类似于这样的情况太容易误触了。

[Bohan-J]

收到，我们团队目前还比较小，移动端可能暂时没有办法支持，但是会看看怎么短期内优化 UI

[nerdneilsfield]

想到了一个解决方案。

针对这个问题我想到了一个方案，就是使用自定义脚本 UserScript 来在页面上插入一个置顶的按钮，按这个按钮就会触发原来的回车按钮，这样就避免了手机上原来的按钮太小会误触到参考页面的问题。

下面是相关的代码:

// ==UserScript==
// @name         Add Floating Button to Trigger Search
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Add a floating button to trigger the search button on devv.ai
// @author       You
// @match        https://devv.ai/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to create and add the floating button
    function addFloatingButton() {
        // Create the floating button
        const floatingButton = document.createElement('button');
        floatingButton.innerText = '🔍';
        floatingButton.style.position = 'fixed';
        floatingButton.style.bottom = '20px';
        floatingButton.style.right = '20px';
        floatingButton.style.width = '60px';
        floatingButton.style.height = '60px';
        floatingButton.style.zIndex = '9999';
        floatingButton.style.backgroundColor = '#6200ea';
        floatingButton.style.color = '#ffffff';
        floatingButton.style.border = 'none';
        floatingButton.style.borderRadius = '50%';
        floatingButton.style.fontSize = '24px';
        floatingButton.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
        floatingButton.style.cursor = 'pointer';
        floatingButton.style.transition = 'background-color 0.3s, transform 0.3s';

        // Add hover effect
        floatingButton.addEventListener('mouseover', function() {
            floatingButton.style.backgroundColor = '#3700b3';
            floatingButton.style.transform = 'scale(1.1)';
        });

        floatingButton.addEventListener('mouseout', function() {
            floatingButton.style.backgroundColor = '#6200ea';
            floatingButton.style.transform = 'scale(1)';
        });

        // Add click event to the floating button
        floatingButton.addEventListener('click', function() {
            const searchButton = document.querySelector('button[aria-label="Search"]');
            if (searchButton) {
                searchButton.click();
            } else {
                alert('Search button not found!');
            }
        });

        // Append the floating button to the body
        document.body.appendChild(floatingButton);
    }

    // Run the function to add the floating button
    addFloatingButton();
})(); 

iOS 上可以安装 UserScript 然后安装这个脚本就可以在 Safari 里面用了。Andriod 上面可以用 Firefox 然后安装油猴插件。

显示效果如图: