2025-09-12 19:42:00 +00:00
15 changed files with 143 additions and 96 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -73,6 +73,7 @@
        "tailwind-merge": "^3.3.1",
        "validator": "^13.15.15",
        "ws": "^8.18.3",
+        "xterm": "^5.3.0",
        "zod": "^4.0.5"
      },
      "devDependencies": {
@@ -10830,6 +10831,13 @@
        "node": ">=0.4"
      }
    },
+    "node_modules/xterm": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-5.3.0.tgz",
+      "integrity": "sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==",
+      "deprecated": "This package is now deprecated. Move to @xterm/xterm instead.",
+      "license": "MIT"
+    },
    "node_modules/yargs-parser": {
      "version": "21.1.1",
      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
    "tailwind-merge": "^3.3.1",
    "validator": "^13.15.15",
    "ws": "^8.18.3",
+    "xterm": "^5.3.0",
    "zod": "^4.0.5"
  },
  "devDependencies": {
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -810,5 +810,9 @@
    "invalidVerificationCode": "Invalid verification code",
    "failedToDisableTotp": "Failed to disable TOTP",
    "failedToGenerateBackupCodes": "Failed to generate backup codes"
+  },
+  "mobile": {
+    "selectHostToStart": "Select a host to start your terminal session",
+    "limitedSupportMessage": "Mobile support is currently limited. A dedicated mobile app is coming soon to enhance your experience."
  }
 }
--- a/public/locales/zh/translation.json
+++ b/public/locales/zh/translation.json
@@ -614,7 +614,7 @@
    "firstUserMessage": "您是第一个用户，将被设为管理员。您可以在侧边栏用户下拉菜单中查看管理员设置。如果您认为这是错误，请检查 docker 日志，或创建",
    "external": "外部",
    "loginWithExternal": "使用外部提供商登录",
-    "loginWithExternalDesc": "使用您配置的外部身份提供商登录",
+    "loginWithExternalDesc": "使用您配置的外部身份提供者登录",
    "resetPasswordButton": "重置密码",
    "sendResetCode": "发送重置代码",
    "resetCodeDesc": "输入您的用户名以接收密码重置代码。代码将记录在 docker 容器日志中。",
@@ -852,5 +852,9 @@
    "invalidVerificationCode": "无效的验证码",
    "failedToDisableTotp": "禁用 TOTP 失败",
    "failedToGenerateBackupCodes": "生成备用码失败"
+  },
+  "mobile": {
+    "selectHostToStart": "选择一个主机以开始您的终端会话",
+    "limitedSupportMessage": "移动端支持目前有限。我们即将推出专门的移动应用以提升您的体验。"
  }
 }
--- a/src/index.css
+++ b/src/index.css
@@ -123,6 +123,10 @@
 }

@layer base {
+    html, body {
+        height: 100%;
+    }
+
    * {
        @apply border-border outline-ring/50;
    }
--- a/src/ui/Mobile/Apps/Navigation/BottomNavbar.tsx
+++ b/src/ui/Mobile/Apps/Navigation/BottomNavbar.tsx
@@ -1,46 +0,0 @@
-import {Button} from "@/components/ui/button";
-import {Menu, X, Terminal as TerminalIcon} from "lucide-react";
-import {useTabs} from "@/ui/Mobile/Apps/Navigation/Tabs/TabContext.tsx";
-import {cn} from "@/lib/utils.ts";
-
-interface MenuProps {
-    onSidebarOpenClick?: () => void;
-}
-
-export function BottomNavbar({onSidebarOpenClick}: MenuProps) {
-    const {tabs, currentTab, setCurrentTab, removeTab} = useTabs();
-
-    return (
-        <div className="w-full h-[80px] bg-[#18181B] flex items-center p-2 gap-2">
-            <Button className="w-[40px] h-[40px] flex-shrink-0" variant="outline" onClick={onSidebarOpenClick}>
-                <Menu/>
-            </Button>
-            <div className="flex-1 overflow-x-auto whitespace-nowrap thin-scrollbar">
-                <div className="inline-flex gap-2">
-                    {tabs.map(tab => (
-                        <div key={tab.id} className="inline-flex rounded-md shadow-sm" role="group">
-                            <Button
-                                variant="outline"
-                                className={cn(
-                                    "h-10 rounded-r-none !px-3 border-1 border-[#303032]",
-                                    tab.id === currentTab && '!bg-[#09090b] !text-white'
-                                )}
-                                onClick={() => setCurrentTab(tab.id)}
-                            >
-                                <TerminalIcon className="mr-1 h-4 w-4"/>
-                                {tab.title}
-                            </Button>
-                            <Button
-                                variant="outline"
-                                className="h-10 rounded-l-none !px-2 border-1 border-[#303032]"
-                                onClick={() => removeTab(tab.id)}
-                            >
-                                <X className="h-4 w-4"/>
-                            </Button>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}
--- a/src/ui/Mobile/Apps/Terminal/Terminal.tsx
+++ b/src/ui/Mobile/Apps/Terminal/Terminal.tsx
@@ -97,17 +97,6 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
        return () => window.removeEventListener('resize', handleWindowResize);
    }, []);

-    useEffect(() => {
-        if (!terminal) return;
-
-        const textarea = (terminal as any)._core?._textarea as HTMLTextAreaElement | undefined;
-        if (textarea) {
-            textarea.setAttribute("readonly", "true");
-            textarea.setAttribute("inputmode", "none");
-            textarea.style.caretColor = "transparent";
-        }
-    }, [terminal]);
-
    function handleWindowResize() {
        if (!isVisibleRef.current) return;
        fitAddonRef.current?.fit();
@@ -158,7 +147,7 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
        if (!terminal || !xtermRef.current || !hostConfig) return;

        terminal.options = {
-            cursorBlink: true,
+            cursorBlink: false,
            cursorStyle: 'bar',
            scrollback: 10000,
            fontSize: 14,
@@ -173,6 +162,8 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
            fastScrollModifier: 'alt',
            fastScrollSensitivity: 5,
            allowProposedApi: true,
+            disableStdin: true,
+            cursorInactiveStyle: "bar",
        };

        const fitAddon = new FitAddon();
@@ -187,6 +178,14 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
        terminal.loadAddon(webLinksAddon);
        terminal.open(xtermRef.current);

+        const textarea = xtermRef.current.querySelector('.xterm-helper-textarea') as HTMLTextAreaElement | null;
+        if (textarea) {
+            textarea.readOnly = true;
+            textarea.blur();
+        }
+
+        terminal.focus = () => {};
+
        const resizeObserver = new ResizeObserver(() => {
            if (resizeTimeout.current) clearTimeout(resizeTimeout.current);
            resizeTimeout.current = setTimeout(() => {
--- a/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
+++ b/src/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx
@@ -1,18 +1,26 @@
-import React, {useState} from "react";
+import React, {useState, useCallback, useEffect} from "react";
 import Keyboard from "react-simple-keyboard";
 import "react-simple-keyboard/build/css/index.css";
 import "./kb-dark-theme.css";

 interface TerminalKeyboardProps {
    onSendInput: (input: string) => void;
+    onLayoutChange: () => void;
 }

-export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
+export function TerminalKeyboard({onSendInput, onLayoutChange}: TerminalKeyboardProps) {
    const [layoutName, setLayoutName] = useState("default");
    const [isCtrl, setIsCtrl] = useState(false);
    const [isAlt, setIsAlt] = useState(false);

-    const onKeyPress = async (button: string) => {
+    useEffect(() => {
+        if (onLayoutChange) {
+            const timeoutId = setTimeout(() => onLayoutChange(), 100);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [layoutName, onLayoutChange]);
+
+    const onKeyPress = useCallback((button: string) => {
        if (button === "{shift}") {
            setLayoutName("shift");
            return;
@@ -47,20 +55,6 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
            return;
        }

-        if (button === "{paste}") {
-            if (navigator.clipboard?.readText) {
-                try {
-                    const text = await navigator.clipboard.readText();
-                    if (text) {
-                        onSendInput(text);
-                    }
-                } catch (err) {
-
-                }
-            }
-            return;
-        }
-
        let input = button;

        const specialKeyMap: { [key: string]: string } = {
@@ -90,8 +84,16 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
            input = `\x1b${input}`;
        }

+        try {
+            if (navigator.vibrate) {
+                navigator.vibrate(20);
+            }
+        } catch (e) {
+            console.error("Vibration failed:", e);
+        }
+
        onSendInput(input);
-    };
+    }, [onSendInput, isCtrl, isAlt]);

    const buttonTheme = [
        {
@@ -104,7 +106,7 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
        },
        {
            class: "hg-space-small",
-            buttons: "{hide} {less} {more}",
+            buttons: "{hide} {unhide} {less} {more}",
        }
    ];

@@ -116,7 +118,7 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
    }

    return (
-        <div className="">
+        <div className="z-10">
            <Keyboard
                layout={{
                    default: [
@@ -139,7 +141,7 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
                        "! @ # $ % ^ & * ( ) _ +",
                        "[ ] { } | \\ ; : ' \" , . / < >",
                        "F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12",
-                        "{arrowLeft} {arrowRight} {arrowUp} {arrowDown} {paste} {backspace}",
+                        "{arrowLeft} {arrowRight} {arrowUp} {arrowDown} {backspace}",
                        "{hide} {less} {space} {enter}",
                    ],
                    hide: [
@@ -166,7 +168,6 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
                    "{tab}": "tab",
                    "{ctrl}": "ctrl",
                    "{alt}": "alt",
-                    "{paste}": "paste",
                    "{end}": "end",
                    "{home}": "home",
                    "{pgUp}": "pgUp",
@@ -174,6 +175,7 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
                }}
                theme={"hg-theme-default dark-theme"}
                useTouchEvents={true}
+                disableButtonHold={true}
                buttonTheme={buttonTheme}
            />
        </div>
--- a/src/ui/Mobile/Apps/Terminal/kb-dark-theme.css
+++ b/src/ui/Mobile/Apps/Terminal/kb-dark-theme.css
@@ -32,7 +32,7 @@
 }

 .hg-space-medium {
-    width: 60px;
+    width: 70px;
 }

 .hg-space-small {
--- a/src/ui/Mobile/MobileApp.tsx
+++ b/src/ui/Mobile/MobileApp.tsx
@@ -1,11 +1,12 @@
 import React, {useRef, FC, useState, useEffect} from "react";
 import {Terminal} from "@/ui/Mobile/Apps/Terminal/Terminal.tsx";
 import {TerminalKeyboard} from "@/ui/Mobile/Apps/Terminal/TerminalKeyboard.tsx";
-import {BottomNavbar} from "@/ui/Mobile/Apps/Navigation/BottomNavbar.tsx";
-import {LeftSidebar} from "@/ui/Mobile/Apps/Navigation/LeftSidebar.tsx";
-import {TabProvider, useTabs} from "@/ui/Mobile/Apps/Navigation/Tabs/TabContext.tsx";
+import {BottomNavbar} from "@/ui/Mobile/Navigation/BottomNavbar.tsx";
+import {LeftSidebar} from "@/ui/Mobile/Navigation/LeftSidebar.tsx";
+import {TabProvider, useTabs} from "@/ui/Mobile/Navigation/Tabs/TabContext.tsx";
 import {getUserInfo} from "@/ui/main-axios.ts";
 import {HomepageAuth} from "@/ui/Mobile/Homepage/HomepageAuth.tsx";
+import {useTranslation} from "react-i18next";

 function getCookie(name: string) {
    return document.cookie.split('; ').reduce((r, v) => {
@@ -15,6 +16,7 @@ function getCookie(name: string) {
 }

 const AppContent: FC = () => {
+    const {t} = useTranslation();
    const {tabs, currentTab, getTab} = useTabs();
    const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
    const [ready, setReady] = React.useState(true);
@@ -58,6 +60,14 @@ const AppContent: FC = () => {
        return () => window.removeEventListener('storage', handleStorageChange)
    }, [])

+    useEffect(() => {
+        const interval = setInterval(() => {
+            fitCurrentTerminal()
+        }, 2000);
+
+        return () => clearInterval(interval);
+    }, []);
+
    const handleAuthSuccess = (authData: { isAdmin: boolean; username: string | null; userId: string | null }) => {
        setIsAuthenticated(true)
        setIsAdmin(authData.isAdmin)
@@ -85,6 +95,10 @@ const AppContent: FC = () => {

    const closeSidebar = () => setIsSidebarOpen(false);

+    const handleKeyboardLayoutChange = () => {
+        fitCurrentTerminal();
+    }
+
    function handleKeyboardInput(input: string) {
        const currentTerminalTab = getTab(currentTab as number);
        if (currentTerminalTab && currentTerminalTab.terminalRef?.current?.sendInput) {
@@ -95,7 +109,7 @@ const AppContent: FC = () => {
    if (authLoading) {
        return (
            <div className="h-screen w-screen flex items-center justify-center bg-[#09090b]">
-                <p className="text-white">Loading...</p>
+                <p className="text-white">{t('common.loading')}</p>
            </div>
        )
    }
@@ -126,7 +140,7 @@ const AppContent: FC = () => {
                {tabs.map(tab => (
                    <div
                        key={tab.id}
-                        className="absolute inset-0"
+                        className="absolute inset-0 mb-2"
                        style={{
                            visibility: tab.id === currentTab ? 'visible' : 'hidden',
                            opacity: ready ? 1 : 0,
@@ -140,12 +154,21 @@ const AppContent: FC = () => {
                    </div>
                ))}
                {tabs.length === 0 && (
-                    <div className="flex items-center justify-center h-full text-white">
-                        Select a host to start a terminal session.
+                    <div className="flex flex-col items-center justify-center h-full text-white gap-3 px-4 text-center">
+                        <h1 className="text-lg font-semibold">
+                            {t('mobile.selectHostToStart')}
+                        </h1>
+                        <p className="text-sm text-gray-300 max-w-xs">
+                            {t('mobile.limitedSupportMessage')}
+                        </p>
                    </div>
                )}
            </div>
-            {currentTab && <TerminalKeyboard onSendInput={handleKeyboardInput}/>}
+            {currentTab &&
+                <div className="mb-1 z-10">
+                    <TerminalKeyboard onSendInput={handleKeyboardInput} onLayoutChange={handleKeyboardLayoutChange}/>
+                </div>
+            }
            <BottomNavbar
                onSidebarOpenClick={() => setIsSidebarOpen(true)}
            />
--- a/src/ui/Mobile/Navigation/BottomNavbar.tsx
+++ b/src/ui/Mobile/Navigation/BottomNavbar.tsx
@@ -0,0 +1,48 @@
+import {Button} from "@/components/ui/button.tsx";
+import {Menu, X, Terminal as TerminalIcon} from "lucide-react";
+import {useTabs} from "@/ui/Mobile/Navigation/Tabs/TabContext.tsx";
+import {cn} from "@/lib/utils.ts";
+
+interface MenuProps {
+    onSidebarOpenClick?: () => void;
+}
+
+export function BottomNavbar({onSidebarOpenClick}: MenuProps) {
+    const {tabs, currentTab, setCurrentTab, removeTab} = useTabs();
+
+    return (
+        <div className="w-full h-[50px] bg-[#18181B] items-center p-1">
+            <div className="flex gap-2 !mb-0.5">
+                <Button className="w-[40px] h-[40px] flex-shrink-0" variant="outline" onClick={onSidebarOpenClick}>
+                    <Menu/>
+                </Button>
+                <div className="flex-1 overflow-x-auto whitespace-nowrap thin-scrollbar">
+                    <div className="inline-flex gap-2">
+                        {tabs.map(tab => (
+                            <div key={tab.id} className="inline-flex rounded-md shadow-sm" role="group">
+                                <Button
+                                    variant="outline"
+                                    className={cn(
+                                        "h-10 rounded-r-none !px-3 border-1 border-[#303032]",
+                                        tab.id === currentTab && '!bg-[#09090b] !text-white'
+                                    )}
+                                    onClick={() => setCurrentTab(tab.id)}
+                                >
+                                    <TerminalIcon className="mr-1 h-4 w-4"/>
+                                    {tab.title}
+                                </Button>
+                                <Button
+                                    variant="outline"
+                                    className="h-10 rounded-l-none !px-2 border-1 border-[#303032]"
+                                    onClick={() => removeTab(tab.id)}
+                                >
+                                    <X className="h-4 w-4"/>
+                                </Button>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
--- a/src/ui/Mobile/Apps/Navigation/Hosts/FolderCard.tsx
+++ b/src/ui/Mobile/Apps/Navigation/Hosts/FolderCard.tsx
@@ -3,7 +3,7 @@ import {CardTitle} from "@/components/ui/card.tsx";
 import {ChevronDown, Folder} from "lucide-react";
 import {Button} from "@/components/ui/button.tsx";
 import {Separator} from "@/components/ui/separator.tsx";
-import {Host} from "@/ui/Mobile/Apps/Navigation/Hosts/Host.tsx";
+import {Host} from "@/ui/Mobile/Navigation/Hosts/Host.tsx";

 interface SSHHost {
    id: number;
--- a/src/ui/Mobile/Apps/Navigation/Hosts/Host.tsx
+++ b/src/ui/Mobile/Apps/Navigation/Hosts/Host.tsx
@@ -4,7 +4,7 @@ import {Button} from "@/components/ui/button.tsx";
 import {ButtonGroup} from "@/components/ui/button-group.tsx";
 import {Server, Terminal} from "lucide-react";
 import {getServerStatusById} from "@/ui/main-axios.ts";
-import {useTabs} from "@/ui/Mobile/Apps/Navigation/Tabs/TabContext.tsx";
+import {useTabs} from "@/ui/Mobile/Navigation/Tabs/TabContext.tsx";

 interface SSHHost {
    id: number;
--- a/src/ui/Mobile/Apps/Navigation/LeftSidebar.tsx
+++ b/src/ui/Mobile/Apps/Navigation/LeftSidebar.tsx
@@ -10,7 +10,7 @@ import {Button} from "@/components/ui/button.tsx";
 import {ChevronUp, Menu, User2} from "lucide-react";
 import React, {useState, useEffect, useMemo, useCallback} from "react";
 import {Separator} from "@/components/ui/separator.tsx";
-import {FolderCard} from "@/ui/Mobile/Apps/Navigation/Hosts/FolderCard.tsx";
+import {FolderCard} from "@/ui/Mobile/Navigation/Hosts/FolderCard.tsx";
 import {getSSHHosts} from "@/ui/main-axios.ts";
 import {useTranslation} from "react-i18next";
 import {Input} from "@/components/ui/input.tsx";
@@ -153,7 +153,7 @@ export function LeftSidebar({isSidebarOpen, setIsSidebarOpen, onHostConnect, dis
                    </SidebarHeader>
                    <Separator/>
                    <SidebarContent className="px-2 py-2">
-                        <div className="!bg-[#222225] rounded-lg mb-2">
+                        <div className="!bg-[#222225] rounded-lg">
                            <Input
                                value={search}
                                onChange={e => setSearch(e.target.value)}
--- a/src/ui/Mobile/Apps/Navigation/Tabs/TabContext.tsx
+++ b/src/ui/Mobile/Apps/Navigation/Tabs/TabContext.tsx