feat(web): add first-pass mobile responsive support

2026-09-07 08:36:49 +08:00 · 2026-03-09 11:44:44 +08:00
parent 1cac4f6f98
commit 066bd67273
31 changed files with 1010 additions and 602 deletions
@@ -29,10 +29,12 @@ import { SearchResultsView } from './components/SearchResultsView';
 import type { ViewMode } from './types';
 import { vfsApi, type VfsEntry } from '../../api/client';
 import { LoadingSkeleton } from './components/LoadingSkeleton';
+import useResponsive from '../../hooks/useResponsive';

 const FileExplorerPage = memo(function FileExplorerPage() {
  const { navKey = 'files', '*': restPath = '' } = useParams();
  const { token } = theme.useToken();
+  const { isMobile } = useResponsive();
  const [viewMode, setViewMode] = useState<ViewMode>('grid');
  const [isDragging, setIsDragging] = useState(false);
  const [showSkeleton, setShowSkeleton] = useState(false);
@@ -43,7 +45,7 @@ const FileExplorerPage = memo(function FileExplorerPage() {
  const { path, entries, loading, pagination, processorTypes, sortBy, sortOrder, load, navigateTo, goUp, handlePaginationChange, refresh, handleSortChange } = useFileExplorer(navKey);
  const { selectedEntries, handleSelect, handleSelectRange, clearSelection, setSelectedEntries } = useFileSelection();
  const { openFileWithDefaultApp, confirmOpenWithApp } = useAppWindows();
-  const { ctxMenu, blankCtxMenu, openContextMenu, openBlankContextMenu, closeContextMenus } = useContextMenu();
+  const { ctxMenu, blankCtxMenu, openContextMenu, openBlankContextMenu, openContextMenuAt, closeContextMenus } = useContextMenu();
  const uploader = useUploader(path, refresh);
  const { handleFileDrop, openFilePicker, openDirectoryPicker, handleFileInputChange, handleDirectoryInputChange } = uploader;
  const { thumbs } = useThumbnails(entries, path);
@@ -91,6 +93,7 @@ const FileExplorerPage = memo(function FileExplorerPage() {
    openResult: openSearchResult,
    selectResult: selectSearchResult,
    openResultContextMenu: openSearchContextMenu,
+    openResultContextMenuAt: openSearchContextMenuAt,
    clearSelection: clearSearchSelection,
  } = fileSearch;

@@ -103,6 +106,12 @@ const FileExplorerPage = memo(function FileExplorerPage() {
    load(routePath, 1, pagination.pageSize, sortBy, sortOrder);
  }, [routePath, navKey, load, pagination.pageSize, sortBy, sortOrder]);

+  useEffect(() => {
+    if (isMobile && viewMode !== 'grid') {
+      setViewMode('grid');
+    }
+  }, [isMobile, viewMode]);
+
  const effectiveRefresh = useCallback(() => {
    if (isSearching) {
      refreshSearch();
@@ -230,13 +239,32 @@ const FileExplorerPage = memo(function FileExplorerPage() {
    void handleFileDrop(e.dataTransfer);
  };

+  const getAnchorPoint = useCallback((anchor: HTMLElement) => {
+    const rect = anchor.getBoundingClientRect();
+    return {
+      x: Math.min(rect.right, window.innerWidth - 24),
+      y: Math.min(rect.bottom + 8, window.innerHeight - 24),
+    };
+  }, []);
+
+  const openEntryMenuFromAnchor = useCallback((entry: VfsEntry, anchor: HTMLElement) => {
+    const point = getAnchorPoint(anchor);
+    openContextMenuAt(entry, point.x, point.y);
+  }, [getAnchorPoint, openContextMenuAt]);
+
+  const openSearchMenuFromAnchor = useCallback((fullPath: string, anchor: HTMLElement) => {
+    const point = getAnchorPoint(anchor);
+    void openSearchContextMenuAt(point.x, point.y, fullPath);
+  }, [getAnchorPoint, openSearchContextMenuAt]);
+
  return (
    <div
      style={{
        background: token.colorBgContainer,
        border: `1px solid ${token.colorBorderSecondary}`,
        borderRadius: token.borderRadius,
-        height: 'calc(100vh - 88px)',
+        height: '100%',
+        minHeight: 0,
        display: 'flex',
        flexDirection: 'column',
        position: 'relative'
@@ -254,10 +282,12 @@ const FileExplorerPage = memo(function FileExplorerPage() {
        viewMode={viewMode}
        sortBy={sortBy}
        sortOrder={sortOrder}
+        isMobile={isMobile}
        onGoUp={goUp}
        onNavigate={navigateTo}
        onRefresh={effectiveRefresh}
        onCreateDir={() => setCreatingDir(true)}
+        onCreateFile={() => setCreatingFile(true)}
        onUploadFile={openFilePicker}
        onUploadDirectory={openDirectoryPicker}
        onSetViewMode={setViewMode}
@@ -279,7 +309,7 @@ const FileExplorerPage = memo(function FileExplorerPage() {
        onChange={handleDirectoryInputChange}
      />

-      <div style={{ flex: 1, overflow: 'auto', paddingBottom: shouldReserveBottomBar ? '80px' : '0' }} onContextMenu={openBlankContextMenu}>
+      <div style={{ flex: 1, overflow: 'auto', minHeight: 0, paddingBottom: shouldReserveBottomBar ? '80px' : '0' }} onContextMenu={isMobile ? undefined : openBlankContextMenu}>
        {isSearching ? (
          <SearchResultsView
            viewMode={viewMode}
@@ -289,10 +319,12 @@ const FileExplorerPage = memo(function FileExplorerPage() {
            items={searchItems}
            selectedPaths={searchSelectedPaths}
            entrySnapshot={searchEntrySnapshot}
+            mobile={isMobile}
            onClearSearch={clearSearchParams}
            onSelect={selectSearchResult}
            onOpen={(fullPath) => { void openSearchResult(fullPath); }}
            onContextMenu={(e, fullPath) => { void openSearchContextMenu(e, fullPath); }}
+            onOpenMenu={openSearchMenuFromAnchor}
          />
        ) : showSkeleton && loading && (entries.length === 0 || path !== routePath) ? (
          <LoadingSkeleton mode={viewMode} />
@@ -304,10 +336,12 @@ const FileExplorerPage = memo(function FileExplorerPage() {
            thumbs={thumbs}
            selectedEntries={selectedEntries}
            path={path}
+            mobile={isMobile}
            onSelect={handleSelect}
            onSelectRange={handleSelectRange}
            onOpen={handleOpenEntry}
            onContextMenu={openContextMenu}
+            onOpenMenu={openEntryMenuFromAnchor}
          />
        ) : (
          <FileListView
@@ -408,6 +442,7 @@ const FileExplorerPage = memo(function FileExplorerPage() {
        <ContextMenu
          x={ctxMenu?.x || blankCtxMenu!.x}
          y={ctxMenu?.y || blankCtxMenu!.y}
+          mobile={isMobile}
          entry={ctxMenu?.entry}
          entries={isSearching ? searchContextEntries : entries}
          selectedEntries={isSearching ? searchSelectedNames : selectedEntries}
@@ -1,5 +1,5 @@
 import React, { useLayoutEffect, useRef, useState } from 'react';
-import { Menu, theme } from 'antd';
+import { Drawer, Menu, theme } from 'antd';
 import type { MenuProps } from 'antd';
 import type { VfsEntry } from '../../../api/client';
 import type { ProcessorTypeMeta } from '../../../api/processors';
@@ -14,6 +14,7 @@ import {
 interface ContextMenuProps {
  x: number;
  y: number;
+  mobile?: boolean;
  entry?: VfsEntry;
  entries: VfsEntry[];
  selectedEntries: string[];
@@ -51,7 +52,7 @@ interface ActionMenuItem {
 export const ContextMenu: React.FC<ContextMenuProps> = (props) => {
  const { token } = theme.useToken();
  const { t } = useI18n();
-  const { x, y, entry, entries, selectedEntries, processorTypes, onClose, ...actions } = props;
+  const { x, y, mobile = false, entry, entries, selectedEntries, processorTypes, onClose, ...actions } = props;
  const containerRef = useRef<HTMLDivElement>(null);
  const [position, setPosition] = useState({ left: x, top: y });

@@ -244,12 +245,36 @@ export const ContextMenu: React.FC<ContextMenuProps> = (props) => {
    }
  }, [position.left, position.top, items.length]);

+  if (mobile) {
+    return (
+      <Drawer
+        open
+        placement="bottom"
+        onClose={onClose}
+        title={entry ? t('Actions') : t('Quick Actions')}
+        height="auto"
+        styles={{ body: { padding: 8 } }}
+      >
+        <Menu
+          items={items}
+          selectable={false}
+          onClick={({ key }) => {
+            const handler = handlerMap.get(String(key));
+            if (handler) handler();
+            onClose();
+          }}
+          style={{ borderRadius: token.borderRadius, background: 'transparent', border: 'none' }}
+        />
+      </Drawer>
+    );
+  }
+
  return (
    <div
      ref={containerRef}
      style={{ position: 'fixed', top: position.top, left: position.left, zIndex: 9999, boxShadow: '0 4px 16px rgba(0,0,0,.15)', borderRadius: token.borderRadius, background: token.colorBgElevated }}
      onContextMenu={(e) => e.preventDefault()}
-      onClick={onClose} // Close on any click inside the menu area
+      onClick={onClose}
    >
      <Menu
        items={items}
@@ -106,6 +106,7 @@ export const FileListView: React.FC<FileListViewProps> = ({
      dataSource={entries}
      columns={columns as any}
      pagination={false}
+      scroll={{ x: 'max-content' }}
      onRow={(r) => ({
        onClick: (e: any) => onRowClick(r, e),
        onDoubleClick: () => onOpen(r),
@@ -1,20 +1,23 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { Tooltip, theme } from 'antd';
-import { FolderFilled, PictureOutlined } from '@ant-design/icons';
+import { Tooltip, theme, Button } from 'antd';
+import { FolderFilled, PictureOutlined, MoreOutlined } from '@ant-design/icons';
 import type { VfsEntry } from '../../../api/client';
 import { getFileIcon } from './FileIcons';
 import { EmptyState } from './EmptyState';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { useI18n } from '../../../i18n';

 interface Props {
  entries: VfsEntry[];
  thumbs: Record<string, string>;
  selectedEntries: string[];
  path: string;
+  mobile?: boolean;
  onSelect: (e: VfsEntry, additive?: boolean) => void;
  onSelectRange: (names: string[]) => void;
  onOpen: (e: VfsEntry) => void;
  onContextMenu: (e: React.MouseEvent, entry: VfsEntry) => void;
+  onOpenMenu?: (entry: VfsEntry, anchor: HTMLElement) => void;
 }

 const formatSize = (size: number) => {
@@ -24,33 +27,29 @@ const formatSize = (size: number) => {
  return (size / 1024 / 1024 / 1024).toFixed(1) + ' GB';
 };

-export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, path, onSelect, onSelectRange, onOpen, onContextMenu }) => {
+export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, path, mobile = false, onSelect, onSelectRange, onOpen, onContextMenu, onOpenMenu }) => {
  const { token } = theme.useToken();
  const { resolvedMode } = useTheme();
+  const { t } = useI18n();
+
  const lightenColor = (hex: string, amount: number) => {
    const parseHex = (h: string) => {
      const s = h.replace('#', '');
-      const n = s.length === 3 ? s.split('').map(c => c + c).join('') : s;
+      const n = s.length === 3 ? s.split('').map((c) => c + c).join('') : s;
      const num = parseInt(n, 16);
      if (Number.isNaN(num) || n.length !== 6) return null;
-      return {
-        r: (num >> 16) & 255,
-        g: (num >> 8) & 255,
-        b: num & 255,
-      };
+      return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };
    };
    const rgb = parseHex(hex);
    if (!rgb) return hex;
    const mix = (c: number) => Math.round(c + (255 - c) * amount);
-    const r = mix(rgb.r);
-    const g = mix(rgb.g);
-    const b = mix(rgb.b);
    const toHex = (v: number) => v.toString(16).padStart(2, '0');
-    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+    return `#${toHex(mix(rgb.r))}${toHex(mix(rgb.g))}${toHex(mix(rgb.b))}`;
  };
+
  const toRgba = (hex: string, alpha: number) => {
    const s = hex.replace('#', '');
-    const normalized = s.length === 3 ? s.split('').map(c => c + c).join('') : s;
+    const normalized = s.length === 3 ? s.split('').map((c) => c + c).join('') : s;
    const num = parseInt(normalized, 16);
    if (Number.isNaN(num) || normalized.length !== 6) {
      return `rgba(22, 119, 255, ${alpha})`;
@@ -60,13 +59,15 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, pa
    const b = num & 255;
    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
  };
+
  const containerRef = useRef<HTMLDivElement | null>(null);
  const itemRefs = useRef<Record<string, HTMLDivElement | null>>({});
-  const startRef = useRef<{ x: number, y: number } | null>(null);
-  const [rect, setRect] = useState<{ left: number, top: number, width: number, height: number } | null>(null);
+  const startRef = useRef<{ x: number; y: number } | null>(null);
+  const [rect, setRect] = useState<{ left: number; top: number; width: number; height: number } | null>(null);
  const [selecting, setSelecting] = useState(false);

  useEffect(() => {
+    if (mobile) return;
    const grid = containerRef.current;
    const scrollContainer = grid?.parentElement;
    if (!scrollContainer) return;
@@ -82,9 +83,10 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, pa

    scrollContainer.addEventListener('mousedown', onBlankMouseDown);
    return () => scrollContainer.removeEventListener('mousedown', onBlankMouseDown);
-  }, []);
+  }, [mobile]);

  useEffect(() => {
+    if (mobile) return;
    const onMove = (ev: MouseEvent) => {
      if (!startRef.current) return;
      const cx = ev.clientX;
@@ -99,22 +101,19 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, pa
    const onUp = () => {
      if (!startRef.current) return;
      setSelecting(false);
-      const r = rect;
-      if (r) {
-        const container = containerRef.current;
-        if (container) {
-          const sel: string[] = [];
-          entries.forEach(ent => {
-            const el = itemRefs.current[ent.name];
-            if (!el) return;
-            const br = el.getBoundingClientRect();
-            const rr = { left: r.left, top: r.top, right: r.left + r.width, bottom: r.top + r.height };
-            const br2 = { left: br.left, top: br.top, right: br.right, bottom: br.bottom };
-            const intersect = !(br2.left > rr.right || br2.right < rr.left || br2.top > rr.bottom || br2.bottom < rr.top);
-            if (intersect) sel.push(ent.name);
-          });
-          if (sel.length > 0) onSelectRange(sel);
-        }
+      const currentRect = rect;
+      if (currentRect) {
+        const sel: string[] = [];
+        entries.forEach((ent) => {
+          const el = itemRefs.current[ent.name];
+          if (!el) return;
+          const br = el.getBoundingClientRect();
+          const rr = { left: currentRect.left, top: currentRect.top, right: currentRect.left + currentRect.width, bottom: currentRect.top + currentRect.height };
+          const br2 = { left: br.left, top: br.top, right: br.right, bottom: br.bottom };
+          const intersect = !(br2.left > rr.right || br2.right < rr.left || br2.top > rr.bottom || br2.bottom < rr.top);
+          if (intersect) sel.push(ent.name);
+        });
+        if (sel.length > 0) onSelectRange(sel);
      }
      startRef.current = null;
      setRect(null);
@@ -129,10 +128,10 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, pa
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
    };
-  }, [selecting, rect, entries, onSelectRange]);
+  }, [entries, mobile, onSelectRange, rect, selecting]);

  const handleMouseDown = (e: React.MouseEvent) => {
-    if (e.button !== 0) return;
+    if (mobile || e.button !== 0) return;
    const target = e.target as HTMLElement;
    if (target.closest('.fx-grid-item')) {
      return;
@@ -144,25 +143,48 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, pa
  };

  return (
-    <div className="fx-grid" style={{ padding: 16 }} ref={containerRef} onMouseDown={handleMouseDown}>
-      {entries.map(ent => {
+    <div className="fx-grid" style={{ padding: mobile ? 12 : 16 }} ref={containerRef} onMouseDown={handleMouseDown}>
+      {entries.map((ent) => {
        const isImg = thumbs[ent.name];
        const ext = ent.name.split('.').pop()?.toLowerCase();
        const isPictureType = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].includes(ext || '');
        const isSelected = selectedEntries.includes(ent.name);
+
        return (
          <div
            key={ent.name}
-            ref={(el) => { itemRefs.current[ent.name] = el; }}
+            ref={(el) => {
+              itemRefs.current[ent.name] = el;
+            }}
            className={['fx-grid-item', isSelected ? 'selected' : '', ent.is_dir ? 'dir' : 'file'].join(' ')}
            onClick={(ev) => {
-              const additive = ev.ctrlKey || ev.metaKey;
-              onSelect(ent, additive);
+              if (mobile) {
+                onOpen(ent);
+                return;
+              }
+              onSelect(ent, ev.ctrlKey || ev.metaKey);
+            }}
+            onDoubleClick={() => {
+              if (!mobile) onOpen(ent);
+            }}
+            onContextMenu={(e) => {
+              if (!mobile) onContextMenu(e, ent);
            }}
-            onDoubleClick={() => onOpen(ent)}
-            onContextMenu={(e) => onContextMenu(e, ent)}
            style={{ userSelect: 'none' }}
          >
+            {mobile && onOpenMenu && (
+              <Button
+                size="small"
+                type="text"
+                icon={<MoreOutlined />}
+                aria-label={t('More')}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onOpenMenu(ent, e.currentTarget);
+                }}
+                style={{ position: 'absolute', top: 4, right: 4, zIndex: 2 }}
+              />
+            )}
            <div className="thumb" style={{ background: 'var(--ant-color-bg-container, #fff)' }}>
              {ent.is_dir && (
                <FolderFilled
@@ -172,23 +194,19 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, pa
                  }}
                />
              )}
-              {!ent.is_dir && (
-                isImg ? (
-                  <img src={isImg} alt={ent.name} style={{ maxWidth: '100%', maxHeight: '100%' }} />
-                ) : isPictureType ? (
-                  <PictureOutlined style={{ fontSize: 32, color: resolvedMode === 'dark' ? lightenColor(String(token.colorPrimary || '#111111'), 0.72) : 'var(--ant-color-text-tertiary, #8c8c8c)' }} />
-                ) : (
-                  getFileIcon(ent.name, 32, resolvedMode)
-                )
-              )}
+              {!ent.is_dir && (isImg ? <img src={isImg} alt={ent.name} style={{ maxWidth: '100%', maxHeight: '100%' }} /> : isPictureType ? <PictureOutlined style={{ fontSize: 32, color: resolvedMode === 'dark' ? lightenColor(String(token.colorPrimary || '#111111'), 0.72) : 'var(--ant-color-text-tertiary, #8c8c8c)' }} /> : getFileIcon(ent.name, 32, resolvedMode))}
              {ent.type === 'mount' && <span className="badge">M</span>}
            </div>
-            <Tooltip title={ent.name}><div className="name ellipsis" style={{ userSelect: 'none' }}>{ent.name}</div></Tooltip>
-            <div className="meta ellipsis" style={{ fontSize: 11, color: token.colorTextSecondary, userSelect: 'none' }}>{ent.is_dir ? '目录' : formatSize(ent.size)}</div>
+            <Tooltip title={ent.name}>
+              <div className="name ellipsis" style={{ userSelect: 'none' }}>{ent.name}</div>
+            </Tooltip>
+            <div className="meta ellipsis" style={{ fontSize: 11, color: token.colorTextSecondary, userSelect: 'none' }}>
+              {ent.is_dir ? t('Folder') : formatSize(ent.size)}
+            </div>
          </div>
-        )
+        );
      })}
-      {rect && (
+      {!mobile && rect && (
        <div
          style={{
            position: 'fixed',
@@ -198,7 +216,7 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, pa
            height: rect.height,
            border: '1px dashed var(--ant-color-border, rgba(0,0,0,0.4))',
            background: toRgba(String(token.colorPrimary || '#1677ff'), 0.16),
-            zIndex: 999
+            zIndex: 999,
          }}
        />
      )}
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { Flex, Typography, Divider, Button, Space, Tooltip, Segmented, Breadcrumb, Input, theme, Dropdown } from 'antd';
-import { ArrowUpOutlined, ArrowDownOutlined, ReloadOutlined, PlusOutlined, UploadOutlined, AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import { ArrowUpOutlined, ArrowDownOutlined, ReloadOutlined, PlusOutlined, UploadOutlined, AppstoreOutlined, UnorderedListOutlined, MoreOutlined, FileAddOutlined } from '@ant-design/icons';
 import { Select } from 'antd';
 import { useI18n } from '../../../i18n';
 import type { ViewMode } from '../types';
@@ -12,10 +12,12 @@ interface HeaderProps {
  viewMode: ViewMode;
  sortBy: string;
  sortOrder: string;
+  isMobile?: boolean;
  onGoUp: () => void;
  onNavigate: (path: string) => void;
  onRefresh: () => void;
  onCreateDir: () => void;
+  onCreateFile: () => void;
  onUploadFile: () => void;
  onUploadDirectory: () => void;
  onSetViewMode: (mode: ViewMode) => void;
@@ -28,10 +30,12 @@ export const Header: React.FC<HeaderProps> = ({
  viewMode,
  sortBy,
  sortOrder,
+  isMobile = false,
  onGoUp,
  onNavigate,
  onRefresh,
  onCreateDir,
+  onCreateFile,
  onUploadFile,
  onUploadDirectory,
  onSetViewMode,
@@ -60,6 +64,7 @@ export const Header: React.FC<HeaderProps> = ({
  };

  const handlePathEdit = () => {
+    if (isMobile) return;
    clearClickTimer();
    setEditingPath(true);
    setPathInputValue(path);
@@ -78,10 +83,6 @@ export const Header: React.FC<HeaderProps> = ({
    setPathInputValue('');
  };

-  const handleBreadcrumbDoubleClick = () => {
-    handlePathEdit();
-  };
-
  const renderBreadcrumb = () => {
    if (editingPath) {
      return (
@@ -104,15 +105,15 @@ export const Header: React.FC<HeaderProps> = ({
        const segmentPath = '/' + arr.slice(0, index + 1).join('/');
        return {
          key: segmentPath,
-          title: <span style={{ cursor: 'pointer' }} onClick={() => scheduleNavigate(segmentPath)}>{segment}</span>
+          title: <span style={{ cursor: 'pointer' }} onClick={() => scheduleNavigate(segmentPath)}>{segment}</span>,
        };
-      })
+      }),
    ];

    return (
      <div
        style={{
-          cursor: 'text',
+          cursor: isMobile ? 'default' : 'text',
          padding: `${token.paddingXXS}px ${token.paddingXS}px`,
          borderRadius: token.borderRadius,
          transition: 'background-color 0.2s',
@@ -121,74 +122,120 @@ export const Header: React.FC<HeaderProps> = ({
          height: pathEditorHeight,
          boxSizing: 'border-box',
          display: 'flex',
-          alignItems: 'center'
+          alignItems: 'center',
+          minWidth: 0,
        }}
-        onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = token.colorFillTertiary; }}
-        onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
-        onDoubleClick={handleBreadcrumbDoubleClick}
+        onMouseEnter={(e) => {
+          if (!isMobile) e.currentTarget.style.backgroundColor = token.colorFillTertiary;
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.backgroundColor = 'transparent';
+        }}
+        onDoubleClick={handlePathEdit}
      >
        <Breadcrumb items={breadcrumbItems} separator="/" style={{ fontSize: token.fontSizeSM }} />
      </div>
    );
  };

+  const mobileMoreItems = [
+    {
+      key: 'new-file',
+      label: t('New File'),
+      icon: <FileAddOutlined />,
+      onClick: onCreateFile,
+    },
+    {
+      key: 'sort',
+      label: t('Sort By') + `: ${t(sortBy === 'mtime' ? 'Modified Time' : sortBy === 'size' ? 'Size' : 'Name')}`,
+      children: [
+        { key: 'sort-name', label: t('Name'), onClick: () => onSortChange('name', sortOrder) },
+        { key: 'sort-size', label: t('Size'), onClick: () => onSortChange('size', sortOrder) },
+        { key: 'sort-mtime', label: t('Modified Time'), onClick: () => onSortChange('mtime', sortOrder) },
+      ],
+    },
+    {
+      key: 'sort-order',
+      label: sortOrder === 'asc' ? t('Ascending') : t('Descending'),
+      icon: sortOrder === 'asc' ? <ArrowUpOutlined /> : <ArrowDownOutlined />,
+      onClick: () => onSortChange(sortBy, sortOrder === 'asc' ? 'desc' : 'asc'),
+    },
+  ];
+
  return (
-    <Flex align="center" justify="space-between" style={{ padding: '10px 16px', borderBottom: `1px solid ${token.colorBorderSecondary}`, gap: 12 }}>
-      <Flex align="center" gap={8} style={{ flexWrap: 'wrap', flex: 1, overflow: 'hidden' }}>
+    <Flex vertical={isMobile} gap={isMobile ? 10 : 12} style={{ padding: isMobile ? '10px 12px' : '10px 16px', borderBottom: `1px solid ${token.colorBorderSecondary}` }}>
+      <Flex align="center" gap={8} style={{ minWidth: 0 }}>
        <Button size="small" icon={<ArrowUpOutlined />} onClick={onGoUp} disabled={path === '/'} />
-        <Typography.Text strong>{t('File Manager')}</Typography.Text>
-        <Divider type="vertical" />
+        {!isMobile && <Typography.Text strong>{t('File Manager')}</Typography.Text>}
+        {!isMobile && <Divider type="vertical" />}
        {renderBreadcrumb()}
      </Flex>
-      <Space size={8} wrap>
-        <Button size="small" icon={<ReloadOutlined />} onClick={onRefresh} loading={loading}>{t('Refresh')}</Button>
-        <Button size="small" icon={<PlusOutlined />} onClick={onCreateDir}>{t('New Folder')}</Button>
-        <Dropdown.Button
-          size="small"
-          icon={<UploadOutlined />}
-          onClick={onUploadFile}
-          menu={{
-            items: [
-              { key: 'file', label: t('Upload Files') },
-              { key: 'folder', label: t('Upload Folder') },
-            ],
-            onClick: ({ key }) => {
-              if (key === 'folder') {
-                onUploadDirectory();
-              } else {
-                onUploadFile();
-              }
-            },
-          }}
-        >
-          {t('Upload')}
-        </Dropdown.Button>
-        <Select
-          size="small"
-          value={sortBy}
-          onChange={(val) => onSortChange(val, sortOrder)}
-          style={{ width: 80 }}
-          options={[
-            { value: 'name', label: t('Name') },
-            { value: 'size', label: t('Size') },
-            { value: 'mtime', label: t('Modified Time') },
-          ]}
-        />
-        <Button
-          size="small"
-          icon={sortOrder === 'asc' ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
-          onClick={() => onSortChange(sortBy, sortOrder === 'asc' ? 'desc' : 'asc')}
-        />
-        <Segmented
-          size="small"
-          value={viewMode}
-          onChange={value => onSetViewMode(value as ViewMode)}
-          options={[
-            { label: <Tooltip title={t('Grid')}><AppstoreOutlined /></Tooltip>, value: 'grid' },
-            { label: <Tooltip title={t('List')}><UnorderedListOutlined /></Tooltip>, value: 'list' }
-          ]}
-        />
-      </Space>
+
+      <Flex align="center" justify="space-between" gap={8} style={{ flexWrap: 'wrap' }}>
+        <Space size={8} wrap>
+          <Button size="small" icon={<ReloadOutlined />} onClick={onRefresh} loading={loading} aria-label={t('Refresh')}>
+            {!isMobile && t('Refresh')}
+          </Button>
+          <Button size="small" icon={<PlusOutlined />} onClick={onCreateDir} aria-label={t('New Folder')}>
+            {!isMobile && t('New Folder')}
+          </Button>
+          <Dropdown.Button
+            size="small"
+            icon={<UploadOutlined />}
+            onClick={onUploadFile}
+            menu={{
+              items: [
+                { key: 'file', label: t('Upload Files') },
+                { key: 'folder', label: t('Upload Folder') },
+              ],
+              onClick: ({ key }) => {
+                if (key === 'folder') {
+                  onUploadDirectory();
+                } else {
+                  onUploadFile();
+                }
+              },
+            }}
+          >
+            {!isMobile && t('Upload')}
+          </Dropdown.Button>
+          {isMobile && (
+            <Dropdown menu={{ items: mobileMoreItems }}>
+              <Button size="small" icon={<MoreOutlined />} aria-label={t('More')} />
+            </Dropdown>
+          )}
+        </Space>
+
+        {!isMobile && (
+          <Space size={8} wrap>
+            <Select
+              size="small"
+              value={sortBy}
+              onChange={(val) => onSortChange(val, sortOrder)}
+              style={{ width: 112 }}
+              options={[
+                { value: 'name', label: t('Name') },
+                { value: 'size', label: t('Size') },
+                { value: 'mtime', label: t('Modified Time') },
+              ]}
+            />
+            <Button
+              size="small"
+              icon={sortOrder === 'asc' ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
+              onClick={() => onSortChange(sortBy, sortOrder === 'asc' ? 'desc' : 'asc')}
+            />
+            <Segmented
+              size="small"
+              value={viewMode}
+              onChange={(value) => onSetViewMode(value as ViewMode)}
+              options={[
+                { label: <Tooltip title={t('Grid')}><AppstoreOutlined /></Tooltip>, value: 'grid' },
+                { label: <Tooltip title={t('List')}><UnorderedListOutlined /></Tooltip>, value: 'list' },
+              ]}
+            />
+          </Space>
+        )}
+      </Flex>
    </Flex>
  );
 };
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Empty, Flex, Spin, Tag, Typography, theme } from 'antd';
+import { Empty, Flex, Spin, Tag, Typography, theme, Button } from 'antd';
+import { MoreOutlined } from '@ant-design/icons';
 import { useI18n } from '../../../i18n';
 import type { VfsEntry } from '../../../api/client';
 import type { ViewMode } from '../types';
@@ -13,10 +14,12 @@ interface SearchResultsViewProps {
  items: SearchDisplayItem[];
  selectedPaths: string[];
  entrySnapshot: Record<string, VfsEntry>;
+  mobile?: boolean;
  onClearSearch: () => void;
  onSelect: (fullPath: string, additive: boolean) => void;
  onOpen: (fullPath: string) => void;
  onContextMenu: (e: React.MouseEvent, fullPath: string) => void;
+  onOpenMenu?: (fullPath: string, anchor: HTMLElement) => void;
 }

 export const SearchResultsView: React.FC<SearchResultsViewProps> = ({
@@ -27,10 +30,12 @@ export const SearchResultsView: React.FC<SearchResultsViewProps> = ({
  items,
  selectedPaths,
  entrySnapshot,
+  mobile = false,
  onClearSearch,
  onSelect,
  onOpen,
  onContextMenu,
+  onOpenMenu,
 }) => {
  const { token } = theme.useToken();
  const { t } = useI18n();
@@ -75,13 +80,11 @@ export const SearchResultsView: React.FC<SearchResultsViewProps> = ({
  };

  return (
-    <div style={{ padding: 16 }}>
+    <div style={{ padding: mobile ? 12 : 16 }}>
      <Flex align="center" justify="space-between" style={{ marginBottom: 12, gap: 12, flexWrap: 'wrap' }}>
        <Flex align="center" style={{ gap: 8, flexWrap: 'wrap' }}>
          <Typography.Text strong>{t('Search Results')}</Typography.Text>
-          <Tag color={mode === 'filename' ? 'green' : 'blue'}>
-            {mode === 'filename' ? t('Name Search') : t('Smart Search')}
-          </Tag>
+          <Tag color={mode === 'filename' ? 'green' : 'blue'}>{mode === 'filename' ? t('Name Search') : t('Smart Search')}</Tag>
          <Tag closable onClose={(ev) => { ev.preventDefault(); onClearSearch(); }}>
            {query}
          </Tag>
@@ -97,10 +100,7 @@ export const SearchResultsView: React.FC<SearchResultsViewProps> = ({
          <Empty description={t('No files found')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
        </Flex>
      ) : viewMode === 'grid' ? (
-        <div
-          className="fx-grid"
-          style={{ padding: 0, gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))' }}
-        >
+        <div className="fx-grid" style={{ padding: 0, gridTemplateColumns: mobile ? 'repeat(auto-fill, minmax(160px, 1fr))' : 'repeat(auto-fill, minmax(220px, 1fr))' }}>
          {items.map(({ item, fullPath, dir, name }) => {
            const selected = selectedPaths.includes(fullPath);
            const scoreText = Number.isFinite(item.score) ? item.score.toFixed(2) : '-';
@@ -110,16 +110,37 @@ export const SearchResultsView: React.FC<SearchResultsViewProps> = ({
              <div
                key={fullPath}
                className={['fx-grid-item', selected ? 'selected' : '', 'file'].join(' ')}
-                onClick={(ev) => onSelect(fullPath, ev.ctrlKey || ev.metaKey)}
-                onDoubleClick={() => onOpen(fullPath)}
-                onContextMenu={(ev) => onContextMenu(ev, fullPath)}
+                onClick={(ev) => {
+                  if (mobile) {
+                    onOpen(fullPath);
+                    return;
+                  }
+                  onSelect(fullPath, ev.ctrlKey || ev.metaKey);
+                }}
+                onDoubleClick={() => {
+                  if (!mobile) onOpen(fullPath);
+                }}
+                onContextMenu={(ev) => {
+                  if (!mobile) onContextMenu(ev, fullPath);
+                }}
                style={{ userSelect: 'none' }}
              >
+                {mobile && onOpenMenu && (
+                  <Button
+                    size="small"
+                    type="text"
+                    icon={<MoreOutlined />}
+                    aria-label={t('More')}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onOpenMenu(fullPath, e.currentTarget);
+                    }}
+                    style={{ position: 'absolute', top: 4, right: 4, zIndex: 2 }}
+                  />
+                )}
                <div className="thumb" style={{ background: 'var(--ant-color-bg-container, #fff)' }}>
                  <span className="badge score-badge">{scoreText}</span>
-                  {isDir
-                    ? <Typography.Text style={{ fontSize: 32, color: token.colorPrimary }}>📁</Typography.Text>
-                    : <Typography.Text style={{ fontSize: 32, color: token.colorTextTertiary }}>📄</Typography.Text>}
+                  {isDir ? <Typography.Text style={{ fontSize: 32, color: token.colorPrimary }}>📁</Typography.Text> : <Typography.Text style={{ fontSize: 32, color: token.colorTextTertiary }}>📄</Typography.Text>}
                </div>
                <div className="name ellipsis">{name}</div>
                <Typography.Text type="secondary" className="ellipsis" style={{ fontSize: 12 }}>
@@ -141,45 +162,48 @@ export const SearchResultsView: React.FC<SearchResultsViewProps> = ({
              <div
                key={fullPath}
                className={selected ? 'row-selected' : ''}
-                onClick={(ev) => onSelect(fullPath, ev.ctrlKey || ev.metaKey)}
-                onDoubleClick={() => onOpen(fullPath)}
-                onContextMenu={(ev) => onContextMenu(ev, fullPath)}
+                onClick={(ev) => {
+                  if (mobile) {
+                    onOpen(fullPath);
+                    return;
+                  }
+                  onSelect(fullPath, ev.ctrlKey || ev.metaKey);
+                }}
+                onDoubleClick={() => {
+                  if (!mobile) onOpen(fullPath);
+                }}
+                onContextMenu={(ev) => {
+                  if (!mobile) onContextMenu(ev, fullPath);
+                }}
                style={{
                  padding: '10px 12px',
                  borderRadius: token.borderRadius,
                  background: token.colorFillTertiary,
                  cursor: 'pointer',
                  userSelect: 'none',
+                  position: 'relative',
                }}
              >
-                <Flex vertical style={{ gap: 6 }}>
-                  <Typography.Text strong className="ellipsis">
-                    {name}
-                  </Typography.Text>
-                  <Typography.Text type="secondary" className="ellipsis" style={{ fontSize: 12 }}>
-                    {fullPath}
-                  </Typography.Text>
-                  {snippet ? (
-                    <Typography.Paragraph ellipsis={{ rows: 3 }} style={{ marginBottom: 0 }}>
-                      {snippet}
-                    </Typography.Paragraph>
-                  ) : null}
+                {mobile && onOpenMenu && (
+                  <Button
+                    size="small"
+                    type="text"
+                    icon={<MoreOutlined />}
+                    aria-label={t('More')}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onOpenMenu(fullPath, e.currentTarget);
+                    }}
+                    style={{ position: 'absolute', top: 6, right: 6 }}
+                  />
+                )}
+                <Flex vertical style={{ gap: 6, paddingRight: mobile ? 28 : 0 }}>
+                  <Typography.Text strong className="ellipsis">{name}</Typography.Text>
+                  <Typography.Text type="secondary" className="ellipsis" style={{ fontSize: 12 }}>{fullPath}</Typography.Text>
+                  {snippet ? <Typography.Paragraph ellipsis={{ rows: 3 }} style={{ marginBottom: 0 }}>{snippet}</Typography.Paragraph> : null}
                  <Flex align="center" style={{ gap: 8, flexWrap: 'wrap' }}>
-                    {retrieval ? (
-                      <Tag color={sourceColor(retrieval)} style={{ marginRight: 0 }}>
-                        {renderSourceLabel(retrieval)}
-                      </Tag>
-                    ) : null}
-                    <Tag
-                      style={{
-                        marginRight: 0,
-                        background: token.colorBgContainer,
-                        borderColor: token.colorBorderSecondary,
-                        color: token.colorText,
-                      }}
-                    >
-                      {scoreText}
-                    </Tag>
+                    {retrieval ? <Tag color={sourceColor(retrieval)} style={{ marginRight: 0 }}>{renderSourceLabel(retrieval)}</Tag> : null}
+                    <Tag style={{ marginRight: 0, background: token.colorBgContainer, borderColor: token.colorBorderSecondary, color: token.colorText }}>{scoreText}</Tag>
                  </Flex>
                </Flex>
              </div>
@@ -15,6 +15,16 @@ export function useContextMenu() {
    setBlankCtxMenu({ x: e.clientX, y: e.clientY });
  }, []);

+  const openContextMenuAt = useCallback((entry: VfsEntry, x: number, y: number) => {
+    setBlankCtxMenu(null);
+    setCtxMenu({ entry, x, y });
+  }, []);
+
+  const openBlankContextMenuAt = useCallback((x: number, y: number) => {
+    setCtxMenu(null);
+    setBlankCtxMenu({ x, y });
+  }, []);
+
  const closeContextMenus = useCallback(() => {
    setCtxMenu(null);
    setBlankCtxMenu(null);
@@ -25,6 +35,8 @@ export function useContextMenu() {
    blankCtxMenu,
    openContextMenu,
    openBlankContextMenu,
+    openContextMenuAt,
+    openBlankContextMenuAt,
    closeContextMenus,
  };
-}
+}
@@ -251,6 +251,20 @@ export function useFileSearch({
    openContextMenu(e, entry);
  }, [actionPath, ensureEntry, itemByPath, openContextMenu]);

+  const openResultContextMenuAt = useCallback(async (x: number, y: number, fullPath: string) => {
+    const info = itemByPath.get(fullPath);
+    if (!info) return;
+    setActionPath(info.dir);
+    setSelectedPaths((prev) => {
+      if (actionPath !== info.dir) {
+        return [fullPath];
+      }
+      return prev.includes(fullPath) ? prev : [fullPath];
+    });
+    const entry = await ensureEntry(info.fullPath, info.name);
+    openContextMenu({ preventDefault() {}, clientX: x, clientY: y } as React.MouseEvent, entry);
+  }, [actionPath, ensureEntry, itemByPath, openContextMenu]);
+
  const selectedNames = useMemo(() => {
    const names: string[] = [];
    for (const p of selectedPaths) {
@@ -308,7 +322,7 @@ export function useFileSearch({
    openResult,
    selectResult,
    openResultContextMenu,
+    openResultContextMenuAt,
    clearSelection,
  };
 }
-