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

2026-05-06 18:22:44 +08:00 · 2026-03-09 11:44:44 +08:00
parent 1cac4f6f98
commit 066bd67273
31 changed files with 1010 additions and 602 deletions
--- a/web/src/apps/AppWindowsLayer.tsx
+++ b/web/src/apps/AppWindowsLayer.tsx
@@ -3,6 +3,7 @@ import { Space, Button } from 'antd';
 import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined, MinusOutlined } from '@ant-design/icons';
 import type { AppDescriptor, AppComponentProps, AppOpenComponentProps } from './types';
 import type { VfsEntry } from '../api/client';
+import useResponsive from '../hooks/useResponsive';

 export interface AppWindowItem {
  id: string;
@@ -29,6 +30,7 @@ interface AppWindowsLayerProps {
 }

 export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClose, onToggleMax, onBringToFront, onUpdateWindow }) => {
+  const { isMobile } = useResponsive();
  const dragRef = useRef<{
    id: string;
    startX: number;
@@ -124,6 +126,7 @@ export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClo
  }, [onMouseMove, onMouseUp]);

  const startDrag = (e: React.MouseEvent, w: AppWindowItem) => {
+    if (isMobile) return;
    if (e.detail === 2) return; 
    if (w.maximized) return;
    if ((e.target as HTMLElement).closest('button')) return;
@@ -141,6 +144,7 @@ export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClo

  const startResize = (e: React.MouseEvent, w: AppWindowItem, dir: string) => {
    e.stopPropagation();
+    if (isMobile) return;
    if (w.maximized) return;
    onBringToFront(w.id);
    resizeRef.current = {
@@ -202,6 +206,7 @@ export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClo
        const ContentComp = (isFileWindow ? FileComp : OpenComp) as React.FC<any> | undefined;
        const useSystemWindow = w.app.useSystemWindow !== false; // 默认为 true
        const titleText = isFileWindow ? `${w.app.name} - ${w.entry?.name || ''}` : w.app.name;
+        const effectiveMaximized = isMobile || w.maximized;

        if (!ContentComp) {
          return null;
@@ -215,10 +220,10 @@ export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClo
              onMouseDown={() => onBringToFront(w.id)}
              style={{
                position: 'fixed',
-                top: w.maximized ? 0 : w.y,
-                left: w.maximized ? 0 : w.x,
-                width: w.maximized ? '100vw' : w.width,
-                height: w.maximized ? '100vh' : w.height,
+                top: effectiveMaximized ? 0 : w.y,
+                left: effectiveMaximized ? 0 : w.x,
+                width: effectiveMaximized ? '100vw' : w.width,
+                height: effectiveMaximized ? '100dvh' : w.height,
                background: 'transparent',
                border: 'none',
                borderRadius: 0,
@@ -259,14 +264,14 @@ export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClo
            onMouseDown={() => onBringToFront(w.id)}
            style={{
              position: 'fixed',
-              top: w.maximized ? 0 : w.y,     
-              left: w.maximized ? 0 : w.x,    
-              width: w.maximized ? '100vw' : w.width,
-              height: w.maximized ? '100vh' : w.height,
+              top: effectiveMaximized ? 0 : w.y,
+              left: effectiveMaximized ? 0 : w.x,
+              width: effectiveMaximized ? '100vw' : w.width,
+              height: effectiveMaximized ? '100dvh' : w.height,
              background: 'var(--ant-color-bg-elevated, var(--ant-color-bg-container))',
              border: '1px solid var(--ant-color-border-secondary, rgba(255,255,255,0.18))',
-              borderRadius: w.maximized ? 0 : 12,
-              boxShadow: w.maximized
+              borderRadius: effectiveMaximized ? 0 : 12,
+              boxShadow: effectiveMaximized
                ? 'none'
                : interacting
                  ? '0 20px 50px -12px rgba(0,0,0,0.35)'
@@ -282,9 +287,11 @@ export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClo
          >
            <div
              onMouseDown={(e) => startDrag(e, w)}
-              onDoubleClick={() => onToggleMax(w.id)}
+              onDoubleClick={() => {
+                if (!isMobile) onToggleMax(w.id);
+              }}
              style={{
-                height: 40,
+                height: isMobile ? 48 : 40,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
@@ -296,7 +303,7 @@ export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClo
                fontWeight: 600,
                letterSpacing: .2,
                userSelect: 'none',
-                cursor: w.maximized ? 'default' : 'grab'
+                cursor: effectiveMaximized ? 'default' : 'grab'
              }}
            >
              <span
@@ -311,6 +318,7 @@ export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClo
 	                {titleText}
 	              </span>
              <Space size={4}>
+                {!isMobile && (
                  <Button
                    type="text"
                    size="small"
@@ -326,6 +334,8 @@ export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClo
                      justifyContent: 'center'
                    }}
                  />
+                )}
+                {!isMobile && (
                  <Button
                    type="text"
                    size="small"
@@ -341,6 +351,7 @@ export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClo
                      justifyContent: 'center'
                    }}
                  />
+                )}
                <Button
                  type="text"
                  size="small"
@@ -367,7 +378,7 @@ export const AppWindowsLayer: React.FC<AppWindowsLayerProps> = ({ windows, onClo
                overflow: 'hidden'
              }}
            >
-              {!w.maximized && resizeHandles(w)}
+              {!effectiveMaximized && !isMobile && resizeHandles(w)}
              {isFileWindow ? (
                <ContentComp
                  filePath={w.filePath || ''}
--- a/web/src/components/PageCard.tsx
+++ b/web/src/components/PageCard.tsx
@@ -2,7 +2,25 @@ import { Card, type CardProps } from 'antd';
 import { memo } from 'react';

 const PageCard = memo((props: CardProps) => {
-    return <Card styles={{ body: { overflowY: 'auto', height: 'calc(100vh - 145px)' } }} {...props} />;
+    const bodyStyles = (props.styles as { body?: React.CSSProperties } | undefined)?.body;
+
+    return (
+      <Card
+        {...props}
+        style={{ height: '100%', display: 'flex', flexDirection: 'column', ...(props.style || {}) }}
+        styles={{
+          body: {
+            flex: 1,
+            minHeight: 0,
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+            ...(bodyStyles || {}),
+          },
+        } as any}
+      />
+    );
 });

 export default PageCard;
--- a/web/src/global.css
+++ b/web/src/global.css
@@ -1,5 +1,5 @@
-html,body,#root { height: 100%; }
-body { font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif; background: var(--ant-color-bg-layout, #f9f9f9); }
+html,body,#root { min-height: 100%; height: 100%; }
+body { margin: 0; font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif; background: var(--ant-color-bg-layout, #f9f9f9); }

 ::-webkit-scrollbar { width: 8px; height: 8px; }
 ::-webkit-scrollbar-track { background: transparent; }
@@ -283,3 +283,54 @@ body { font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto
 .plugins-tabs .ant-tabs-tabpane-active {
  display: flex;
 }
+
+@media (max-width: 767px) {
+  html, body, #root {
+    min-height: 100dvh;
+  }
+
+  body {
+    overflow-x: hidden;
+  }
+
+  .fx-grid {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 12px;
+  }
+
+  .fx-grid-item {
+    padding: 10px;
+    border-radius: 12px;
+  }
+
+  .fx-grid-item .thumb {
+    height: 104px;
+  }
+
+  .ant-table-wrapper .ant-table-content {
+    overflow-x: auto;
+  }
+
+  .ant-table-wrapper table {
+    min-width: max-content;
+  }
+
+  .ant-drawer .ant-drawer-content-wrapper {
+    max-width: 100vw !important;
+  }
+
+  .ant-drawer-left > .ant-drawer-content-wrapper,
+  .ant-drawer-right > .ant-drawer-content-wrapper {
+    width: 100vw !important;
+  }
+
+  .ant-modal-root .ant-modal {
+    max-width: calc(100vw - 16px) !important;
+    width: calc(100vw - 16px) !important;
+    margin: 8px auto;
+  }
+
+  .ant-modal-root .ant-modal .ant-modal-content {
+    padding: 16px;
+  }
+}
--- a/web/src/hooks/useResponsive.ts
+++ b/web/src/hooks/useResponsive.ts
@@ -0,0 +1,14 @@
+import { Grid } from 'antd';
+
+export function useResponsive() {
+  const screens = Grid.useBreakpoint();
+
+  return {
+    screens,
+    isMobile: !screens.md,
+    isTablet: !!screens.md && !screens.xl,
+    isDesktop: !!screens.md,
+  };
+}
+
+export default useResponsive;
--- a/web/src/layout/SideNav.tsx
+++ b/web/src/layout/SideNav.tsx
@@ -1,4 +1,4 @@
-import { Layout, Menu, theme, Button, Modal, Tag, Tooltip, Descriptions, Alert, Divider, Spin } from 'antd';
+import { Layout, Menu, theme, Button, Modal, Tag, Tooltip, Descriptions, Alert, Divider, Spin, Drawer } from 'antd';
 import { navGroups } from './nav.ts';
 import type { NavItem, NavGroup } from './nav.ts';
 import { memo, useEffect, useState, useMemo } from 'react';
@@ -10,7 +10,7 @@ import {
  MenuFoldOutlined,
  SendOutlined,
  WechatOutlined,
-  WarningOutlined
+  WarningOutlined,
 } from '@ant-design/icons';
 import '../styles/sider-menu.css';
 import { getLatestVersion } from '../api/config.ts';
@@ -20,6 +20,7 @@ import { useI18n } from '../i18n';
 import { useAppWindows } from '../contexts/AppWindowsContext';
 import WeChatModal from '../components/WeChatModal';
 import { useAuth } from '../contexts/AuthContext';
+
 const { Sider } = Layout;

 export interface SideNavProps {
@@ -27,9 +28,20 @@ export interface SideNavProps {
  onToggle(): void;
  activeKey: string;
  onChange(key: string): void;
+  mobile?: boolean;
+  open?: boolean;
+  onClose?: () => void;
 }

-const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle }: SideNavProps) {
+const SideNav = memo(function SideNav({
+  collapsed,
+  activeKey,
+  onChange,
+  onToggle,
+  mobile = false,
+  open = false,
+  onClose,
+}: SideNavProps) {
  const status = useSystemStatus();
  const { token } = theme.useToken();
  const { resolvedMode } = useTheme();
@@ -42,70 +54,63 @@ const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle
    body: string;
  } | null>(null);

-  // 根据用户权限过滤导航项
  const filteredNavGroups = useMemo(() => {
    const isAdmin = user?.is_admin ?? false;
    return navGroups
-      .map(group => ({
+      .map((group) => ({
        ...group,
-        children: group.children.filter(item => !item.adminOnly || isAdmin)
+        children: group.children.filter((item) => !item.adminOnly || isAdmin),
      }))
-      .filter(group => group.children.length > 0);
+      .filter((group) => group.children.length > 0);
  }, [user]);

  useEffect(() => {
-    getLatestVersion().then(resp => {
+    getLatestVersion().then((resp) => {
      if (resp.latest_version && resp.body) {
        setLatestVersion({
          version: resp.latest_version,
-          body: resp.body
+          body: resp.body,
        });
      }
    });
  }, []);

-  const showVersionModal = () => {
-    setIsVersionModalOpen(true);
-  };
-
  const hasUpdate = latestVersion && latestVersion.version !== status?.version;
  const { windows, restoreWindow } = useAppWindows();
-  const minimized = windows.filter(w => w.minimized);
+  const minimized = windows.filter((w) => w.minimized);
  const DEFAULT_APP_ICON =
    'data:image/svg+xml;utf8,' +
    encodeURIComponent(
      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
         <rect x="3" y="3" width="18" height="18" rx="4" ry="4" fill="currentColor" />
         <rect x="7" y="7" width="10" height="10" rx="2" ry="2" fill="#fff"/>
-       </svg>`
+       </svg>`,
    );
-  return (
-    <>
-      <Sider
-        collapsedWidth={60}
-        collapsible
-        trigger={null}
-        collapsed={collapsed}
-        width={208}
+  const currentCollapsed = mobile ? false : collapsed;
+
+  const handleChange = (key: string) => {
+    onChange(key);
+    if (mobile) {
+      onClose?.();
+    }
+  };
+
+  const renderNavBody = (bodyCollapsed: boolean, showCollapseButton: boolean) => (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <div
        style={{
-          background: token.colorBgContainer,
-          borderRight: `1px solid ${token.colorBorderSecondary}`,
-          display: 'flex',
-          flexDirection: 'column'
-        }}
-      >
-        <div style={{
          height: 56,
          display: 'flex',
          alignItems: 'center',
-          justifyContent: collapsed ? 'center' : 'space-between',
+          justifyContent: bodyCollapsed ? 'center' : 'space-between',
          padding: '0 14px',
          fontWeight: 600,
          fontSize: 18,
-          letterSpacing: .5,
-          flexShrink: 0
-        }}>
-          <div style={{ display: 'flex', alignItems: 'center' }}>
+          letterSpacing: 0.5,
+          flexShrink: 0,
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', minWidth: 0 }}>
          <img
            src={status?.logo}
            alt="Foxel"
@@ -113,50 +118,57 @@ const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle
              width: 24,
              height: 24,
              objectFit: 'contain',
-                marginRight: collapsed ? 0 : 8,
+              marginRight: bodyCollapsed ? 0 : 8,
              ...(resolvedMode === 'dark'
                ? { filter: 'brightness(0) invert(1)' }
-                  : (status?.logo?.endsWith('.svg') ? { filter: 'brightness(0) saturate(100%)' } : {}))
+                : status?.logo?.endsWith('.svg')
+                  ? { filter: 'brightness(0) saturate(100%)' }
+                  : {}),
            }}
          />
-            {!collapsed && (
-              <span style={{ fontWeight: 700, color: resolvedMode === 'dark' ? '#fff' : token.colorText }}>
+          {!bodyCollapsed && (
+            <span
+              style={{
+                fontWeight: 700,
+                color: resolvedMode === 'dark' ? '#fff' : token.colorText,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
              {status?.title}
            </span>
          )}
        </div>
-          {/* 展开时显示收缩按钮 */}
-          {!collapsed && (
-            <Button
-              type="text"
-              icon={<MenuFoldOutlined />}
-              onClick={onToggle}
-              style={{ fontSize: 18 }}
-            />
+        {showCollapseButton && !bodyCollapsed && (
+          <Button type="text" icon={<MenuFoldOutlined />} onClick={onToggle} style={{ fontSize: 18 }} />
        )}
      </div>
-        {/* 分组渲染 */}
+
      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '4px 4px 8px' }}>
        {filteredNavGroups.map((group: NavGroup) => (
          <div key={group.key} style={{ marginBottom: 12 }}>
-              {group.title && (
+            {!!group.title && !bodyCollapsed && (
              <div
                style={{
                  fontSize: 11,
                  fontWeight: 600,
-                    letterSpacing: .5,
+                  letterSpacing: 0.5,
                  padding: '6px 10px 4px',
                  color: token.colorTextTertiary,
-                    textTransform: 'uppercase'
+                  textTransform: 'uppercase',
                }}
-                >{t(group.title)}</div>
+              >
+                {t(group.title)}
+              </div>
            )}
            <Menu
              mode="inline"
              selectable
              inlineIndent={12}
+              inlineCollapsed={!mobile && bodyCollapsed}
              selectedKeys={[activeKey]}
-                onClick={(e) => onChange(e.key)}
+              onClick={(e) => handleChange(e.key)}
              items={group.children.map((i: NavItem) => ({ key: i.key, icon: i.icon, label: t(i.label) }))}
              style={{ borderInline: 'none', background: 'transparent' }}
              className="sider-menu-group foxel-sider-menu"
@@ -164,40 +176,34 @@ const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle
          </div>
        ))}
      </div>
+
      <div
        style={{
-            bottom: '10px',
-            position: 'absolute',
-            width: '100%',
          padding: '12px 8px',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: 12,
          flexShrink: 0,
-            borderTop: `1px solid ${token.colorBorderSecondary}`
+          borderTop: `1px solid ${token.colorBorderSecondary}`,
        }}
      >
-          {/* 最小化应用 Dock */}
-          {!collapsed && minimized.length > 0 && (
+        {!bodyCollapsed && minimized.length > 0 && (
          <div
            style={{
              width: '100%',
              display: 'flex',
-                flexDirection: collapsed ? 'column' : 'row',
              justifyContent: 'center',
              alignItems: 'center',
              gap: 8,
-                flexWrap: collapsed ? 'nowrap' : 'wrap',
-                maxHeight: collapsed ? 160 : undefined,
-                overflowY: collapsed ? 'auto' : 'visible',
+              flexWrap: 'wrap',
            }}
          >
-	              {minimized.map(w => {
+            {minimized.map((w) => {
              const src = w.app.iconUrl || DEFAULT_APP_ICON;
-	                const title = w.kind === 'file' ? `${w.app.name} - ${w.entry.name}` : w.app.name;
+              const title = w.kind === 'file' ? `${w.app.name} - ${w.entry?.name || ''}` : w.app.name;
              return (
-	                  <Tooltip key={w.id} title={title} placement={collapsed ? 'right' : 'top'}>
+                <Tooltip key={w.id} title={title} placement={bodyCollapsed ? 'right' : 'top'}>
                  <Button
                    shape="circle"
                    onClick={() => restoreWindow(w.id)}
@@ -208,7 +214,9 @@ const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle
            })}
          </div>
        )}
-          <div style={{
+
+        <div
+          style={{
            fontSize: 12,
            color: token.colorTextSecondary,
            textAlign: 'center',
@@ -216,13 +224,14 @@ const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
-            cursor: 'pointer'
-          }} onClick={showVersionModal}>
+            cursor: 'pointer',
+          }}
+          onClick={() => setIsVersionModalOpen(true)}
+        >
          {hasUpdate ? (
-              <Tooltip title={t('New version found: {version}', { version: latestVersion?.version || '' })} placement={collapsed ? 'right' : 'top'}>
-                <a rel="noopener noreferrer"
-                  style={{ textDecoration: 'none' }}>
-                  {collapsed ? (
+            <Tooltip title={t('New version found: {version}', { version: latestVersion?.version || '' })} placement={bodyCollapsed ? 'right' : 'top'}>
+              <a rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
+                {bodyCollapsed ? (
                  <Tag icon={<WarningOutlined />} color="warning" style={{ marginInlineEnd: 0 }} />
                ) : (
                  <Tag icon={<WarningOutlined />} color="warning">
@@ -231,10 +240,9 @@ const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle
                )}
              </a>
            </Tooltip>
-            ) : (
-              latestVersion ? (
-                <Tooltip title={t('You are on the latest: {version}', { version: status?.version || '' })} placement={collapsed ? 'right' : 'top'}>
-                  {collapsed ? (
+          ) : latestVersion ? (
+            <Tooltip title={t('You are on the latest: {version}', { version: status?.version || '' })} placement={bodyCollapsed ? 'right' : 'top'}>
+              {bodyCollapsed ? (
                <Tag icon={<CheckCircleOutlined />} color="success" style={{ marginInlineEnd: 0 }} />
              ) : (
                <Tag icon={<CheckCircleOutlined />} color="success">
@@ -243,40 +251,51 @@ const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle
              )}
            </Tooltip>
          ) : (
-                collapsed ? null : <Tag>{status?.version}</Tag>
-              )
+            !bodyCollapsed && <Tag>{status?.version}</Tag>
          )}
        </div>
-          {!collapsed && (
+
+        {!bodyCollapsed && (
          <div style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>
-              <Button
-                shape="circle"
-                icon={<GithubOutlined />}
-                href="https://github.com/DrizzleTime/Foxel"
-                target="_blank"
-              />
-              <Button
-                shape="circle"
-                icon={<WechatOutlined />}
-                onClick={() => setIsModalOpen(true)}
-              />
-              <Button
-                shape="circle"
-                icon={<SendOutlined />}
-                href="https://t.me/+thDsBfyqJxZkNTU1"
-                target="_blank"
-              />
-              <Button
-                shape="circle"
-                icon={<FileTextOutlined />}
-                href="https://foxel.cc"
-                target="_blank"
-              />
+            <Button shape="circle" icon={<GithubOutlined />} href="https://github.com/DrizzleTime/Foxel" target="_blank" />
+            <Button shape="circle" icon={<WechatOutlined />} onClick={() => setIsModalOpen(true)} />
+            <Button shape="circle" icon={<SendOutlined />} href="https://t.me/+thDsBfyqJxZkNTU1" target="_blank" />
+            <Button shape="circle" icon={<FileTextOutlined />} href="https://foxel.cc" target="_blank" />
          </div>
        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      {mobile ? (
+        <Drawer
+          placement="left"
+          open={open}
+          onClose={onClose}
+          title={null}
+          width={280}
+          styles={{ body: { padding: 0 } }}
+        >
+          {renderNavBody(false, false)}
+        </Drawer>
+      ) : (
+        <Sider
+          collapsedWidth={60}
+          collapsible
+          trigger={null}
+          collapsed={collapsed}
+          width={208}
+          style={{
+            background: token.colorBgContainer,
+            borderRight: `1px solid ${token.colorBorderSecondary}`,
+          }}
+        >
+          {renderNavBody(currentCollapsed, true)}
+        </Sider>
+      )}

-        </div>
-      </Sider>
      <WeChatModal open={isModalOpen} onClose={() => setIsModalOpen(false)} />
      <Modal
        open={isVersionModalOpen}
@@ -318,31 +337,42 @@ const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle
                />
              )}

-              <Divider titlePlacement="left" plain>{t('Changelog')}</Divider>
-              <div style={{
+              <Divider titlePlacement="left" plain>
+                {t('Changelog')}
+              </Divider>
+              <div
+                style={{
                  maxHeight: '40vh',
                  overflowY: 'auto',
                  padding: '8px 16px',
                  background: token.colorFillAlter,
                  borderRadius: token.borderRadiusLG,
-                border: `1px solid ${token.colorBorderSecondary}`
-              }}>
+                  border: `1px solid ${token.colorBorderSecondary}`,
+                }}
+              >
                <ReactMarkdown
                  components={{
-                    h3: ({ ...props }) => <h3 style={{
+                    h3: ({ ...props }) => (
+                      <h3
+                        style={{
                          fontSize: 16,
                          borderBottom: `1px solid ${token.colorBorderSecondary}`,
                          paddingBottom: 8,
                          marginTop: 24,
                          marginBottom: 16,
-                      color: token.colorTextHeading
-                    }} {...props} />,
+                          color: token.colorTextHeading,
+                        }}
+                        {...props}
+                      />
+                    ),
                    ul: ({ ...props }) => <ul style={{ paddingLeft: 20 }} {...props} />,
                    li: ({ ...props }) => <li style={{ marginBottom: 8 }} {...props} />,
                    p: ({ ...props }) => <p style={{ marginBottom: 8 }} {...props} />,
-                    a: ({ ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />
+                    a: ({ ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />,
                  }}
-                >{latestVersion.body}</ReactMarkdown>
+                >
+                  {latestVersion.body}
+                </ReactMarkdown>
              </div>
            </>
          ) : (
--- a/web/src/layout/TopHeader.tsx
+++ b/web/src/layout/TopHeader.tsx
@@ -10,6 +10,7 @@ import { useAuth } from '../contexts/AuthContext';
 import ProfileModal from '../components/ProfileModal';
 import NoticesModal from '../components/NoticesModal';
 import { useSystemStatus } from '../contexts/SystemContext';
+import useResponsive from '../hooks/useResponsive';

 const { Header } = Layout;

@@ -17,9 +18,10 @@ export interface TopHeaderProps {
  collapsed: boolean;
  onToggle(): void;
  onOpenAiAgent(): void;
+  showMenuButton?: boolean;
 }

-const TopHeader = memo(function TopHeader({ collapsed, onToggle, onOpenAiAgent }: TopHeaderProps) {
+const TopHeader = memo(function TopHeader({ collapsed, onToggle, onOpenAiAgent, showMenuButton }: TopHeaderProps) {
  const { token } = theme.useToken();
  const [searchOpen, setSearchOpen] = useState(false);
  const navigate = useNavigate();
@@ -28,6 +30,7 @@ const TopHeader = memo(function TopHeader({ collapsed, onToggle, onOpenAiAgent }
  const [profileOpen, setProfileOpen] = useState(false);
  const [noticesOpen, setNoticesOpen] = useState(false);
  const status = useSystemStatus();
+  const { isMobile } = useResponsive();

  const handleLogout = () => {
    authApi.logout();
@@ -37,24 +40,39 @@ const TopHeader = memo(function TopHeader({ collapsed, onToggle, onOpenAiAgent }
  const openProfile = () => setProfileOpen(true);

  return (
-    <Header style={{ background: token.colorBgContainer, borderBottom: `1px solid ${token.colorBorderSecondary}`, display: 'flex', alignItems: 'center', gap: 16, backdropFilter: 'saturate(180%) blur(8px)' }}>
-      {collapsed && (
+    <Header
+      style={{
+        background: token.colorBgContainer,
+        borderBottom: `1px solid ${token.colorBorderSecondary}`,
+        display: 'flex',
+        alignItems: 'center',
+        gap: isMobile ? 8 : 16,
+        paddingInline: isMobile ? 12 : 16,
+        minWidth: 0,
+        backdropFilter: 'saturate(180%) blur(8px)',
+      }}
+    >
+      {showMenuButton && (
        <Button
          type="text"
          icon={<MenuUnfoldOutlined />}
          onClick={onToggle}
-          style={{ fontSize: 18, marginRight: 8 }}
+          style={{ fontSize: 18, marginRight: isMobile ? 0 : 8 }}
+          aria-label={collapsed ? t('Open menu') : t('Collapse menu')}
        />
      )}
+
      <Button
        icon={<SearchOutlined />}
-        style={{ maxWidth: 420 }}
+        style={{ maxWidth: isMobile ? 40 : 420, minWidth: isMobile ? 40 : undefined, paddingInline: isMobile ? 0 : undefined }}
        onClick={() => setSearchOpen(true)}
+        aria-label={t('Search files / tags / types')}
      >
-        {t('Search files / tags / types')}
+        {!isMobile && t('Search files / tags / types')}
      </Button>
      <SearchDialog open={searchOpen} onClose={() => setSearchOpen(false)} />
-      <Flex style={{ marginLeft: 'auto' }} align="center" gap={12}>
+
+      <Flex style={{ marginLeft: 'auto', minWidth: 0 }} align="center" gap={isMobile ? 4 : 12}>
        <Tooltip title={t('Notices')}>
          <Button
            type="text"
@@ -78,8 +96,8 @@ const TopHeader = memo(function TopHeader({ collapsed, onToggle, onOpenAiAgent }
          menu={{
            items: [
              { key: 'profile', label: t('Profile'), icon: <UserOutlined />, onClick: openProfile },
-              { key: 'logout', label: t('Log Out'), icon: <LogoutOutlined />, onClick: handleLogout }
-            ]
+              { key: 'logout', label: t('Log Out'), icon: <LogoutOutlined />, onClick: handleLogout },
+            ],
          }}
        >
          <Button type="text" style={{ paddingInline: 8, height: 40 }}>
@@ -87,9 +105,11 @@ const TopHeader = memo(function TopHeader({ collapsed, onToggle, onOpenAiAgent }
              <Avatar size={28} src={user?.gravatar_url}>
                {(user?.full_name || user?.username || 'A').charAt(0).toUpperCase()}
              </Avatar>
+              {!isMobile && (
                <Typography.Text style={{ maxWidth: 160 }} ellipsis>
                  {user?.full_name || user?.username || t('Admin')}
                </Typography.Text>
+              )}
            </Flex>
          </Button>
        </Dropdown>
--- a/web/src/pages/AdaptersPage.tsx
+++ b/web/src/pages/AdaptersPage.tsx
@@ -202,7 +202,7 @@ const AdaptersPage = memo(function AdaptersPage() {
    <PageCard
      title={t('Storage Adapters')}
      extra={
-        <Space>
+        <Space wrap>
          <Button onClick={fetchList} loading={loading}>{t('Refresh')}</Button>
          <Button type="primary" onClick={openCreate}>{t('Create Adapter')}</Button>
        </Space>
@@ -214,6 +214,7 @@ const AdaptersPage = memo(function AdaptersPage() {
        columns={columns as any}
        loading={loading}
        pagination={false}
+        scroll={{ x: 'max-content' }}
        style={{ marginBottom: 0 }}
      />
      <Drawer
--- a/web/src/pages/AuditLogsPage.tsx
+++ b/web/src/pages/AuditLogsPage.tsx
@@ -3,6 +3,7 @@ import { Table, message, Tag, Input, Select, Button, Space, Modal, DatePicker, D
 import PageCard from '../components/PageCard';
 import { auditApi, type AuditLogItem, type PaginatedAuditLogs } from '../api/audit';
 import { useI18n } from '../i18n';
+import useResponsive from '../hooks/useResponsive';
 import { format, formatISO } from 'date-fns';

 const { RangePicker } = DatePicker;
@@ -47,6 +48,7 @@ const renderHttpMethodTag = (method: string) => {
 };

 const AuditLogsPage = memo(function AuditLogsPage() {
+  const { isMobile } = useResponsive();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<PaginatedAuditLogs | null>(null);
  const [filters, setFilters] = useState<{
@@ -264,7 +266,7 @@ const AuditLogsPage = memo(function AuditLogsPage() {
        {selectedLog && (
          <Space direction="vertical" size={16} style={{ width: '100%' }}>
            <Descriptions
-              column={2}
+              column={isMobile ? 1 : 2}
              bordered
              size="small"
              labelStyle={{ minWidth: 120, whiteSpace: 'nowrap', fontWeight: 500 }}
--- a/web/src/pages/FileExplorerPage/FileExplorerPage.tsx
+++ b/web/src/pages/FileExplorerPage/FileExplorerPage.tsx
@@ -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}
--- a/web/src/pages/FileExplorerPage/components/ContextMenu.tsx
+++ b/web/src/pages/FileExplorerPage/components/ContextMenu.tsx
@@ -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}
--- a/web/src/pages/FileExplorerPage/components/FileListView.tsx
+++ b/web/src/pages/FileExplorerPage/components/FileListView.tsx
@@ -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),
--- a/web/src/pages/FileExplorerPage/components/GridView.tsx
+++ b/web/src/pages/FileExplorerPage/components/GridView.tsx
@@ -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,23 +101,20 @@ 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 currentRect = rect;
+      if (currentRect) {
        const sel: string[] = [];
-          entries.forEach(ent => {
+        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 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);
      window.removeEventListener('mousemove', onMove);
@@ -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,
          }}
        />
      )}
--- a/web/src/pages/FileExplorerPage/components/Header.tsx
+++ b/web/src/pages/FileExplorerPage/components/Header.tsx
@@ -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,28 +122,63 @@ 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>
+
+      <Flex align="center" justify="space-between" gap={8} style={{ flexWrap: 'wrap' }}>
        <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>
+          <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 />}
@@ -161,13 +197,22 @@ export const Header: React.FC<HeaderProps> = ({
              },
            }}
          >
-          {t('Upload')}
+            {!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: 80 }}
+              style={{ width: 112 }}
              options={[
                { value: 'name', label: t('Name') },
                { value: 'size', label: t('Size') },
@@ -182,13 +227,15 @@ export const Header: React.FC<HeaderProps> = ({
            <Segmented
              size="small"
              value={viewMode}
-          onChange={value => onSetViewMode(value as 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' }
+                { label: <Tooltip title={t('List')}><UnorderedListOutlined /></Tooltip>, value: 'list' },
              ]}
            />
          </Space>
+        )}
+      </Flex>
    </Flex>
  );
 };
--- a/web/src/pages/FileExplorerPage/components/SearchResultsView.tsx
+++ b/web/src/pages/FileExplorerPage/components/SearchResultsView.tsx
@@ -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>
--- a/web/src/pages/FileExplorerPage/hooks/useContextMenu.ts
+++ b/web/src/pages/FileExplorerPage/hooks/useContextMenu.ts
@@ -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,
  };
 }
--- a/web/src/pages/FileExplorerPage/hooks/useFileSearch.ts
+++ b/web/src/pages/FileExplorerPage/hooks/useFileSearch.ts
@@ -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,
  };
 }
-
--- a/web/src/pages/ForgotPasswordPage.tsx
+++ b/web/src/pages/ForgotPasswordPage.tsx
@@ -5,6 +5,7 @@ import { useNavigate } from 'react-router';
 import { authApi } from '../api/auth';
 import { useI18n } from '../i18n';
 import LanguageSwitcher from '../components/LanguageSwitcher';
+import useResponsive from '../hooks/useResponsive';

 const { Title, Text } = Typography;

@@ -13,6 +14,7 @@ export default function ForgotPasswordPage() {
  const navigate = useNavigate();
  const [submitting, setSubmitting] = useState(false);
  const [sent, setSent] = useState(false);
+  const { isMobile } = useResponsive();

  const handleSubmit = async (values: { email: string }) => {
    setSubmitting(true);
@@ -29,12 +31,12 @@ export default function ForgotPasswordPage() {

  return (
    <div style={{
-      minHeight: '100vh',
+      minHeight: '100dvh',
      background: 'linear-gradient(to right, var(--ant-color-bg-layout, #f0f2f5), var(--ant-color-fill-secondary, #d7d7d7))',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
-      padding: '48px 16px',
+      padding: isMobile ? '72px 12px 20px' : '48px 16px',
      position: 'relative'
    }}>
      <div style={{ position: 'absolute', top: 16, right: 16 }}>
@@ -48,7 +50,7 @@ export default function ForgotPasswordPage() {
          boxShadow: '0 24px 60px rgba(15,23,42,0.12)',
          border: '1px solid rgba(99,102,241,0.12)',
        }}
-        styles={{ body: { padding: '40px 36px' } }}
+        styles={{ body: { padding: isMobile ? '24px 18px' : '40px 36px' } }}
      >
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <div style={{
--- a/web/src/pages/LoginPage.tsx
+++ b/web/src/pages/LoginPage.tsx
@@ -7,6 +7,7 @@ import { useNavigate } from 'react-router';
 import { useI18n } from '../i18n';
 import LanguageSwitcher from '../components/LanguageSwitcher';
 import WeChatModal from '../components/WeChatModal';
+import useResponsive from '../hooks/useResponsive';

 const { Title, Text } = Typography;

@@ -20,6 +21,7 @@ export default function LoginPage() {
  const [wechatModalOpen, setWechatModalOpen] = useState(false);
  const navigate = useNavigate();
  const { t } = useI18n();
+  const { isMobile } = useResponsive();

  const handleSubmit = async () => {
    const u = username.trim();
@@ -28,14 +30,12 @@ export default function LoginPage() {
      setErr(t('Please enter username and password'));
      return;
    }
-    console.debug('[LoginPage] submit ->', { username: u, passwordLength: p.length });
    setErr('');
    setLoading(true);
    try {
      await login(u, p);
      navigate('/');
    } catch (e: any) {
-      console.error('[LoginPage] login failed:', e);
      setErr(e.message || t('Login failed'));
    } finally {
      setLoading(false);
@@ -43,48 +43,60 @@ export default function LoginPage() {
  };

  return (
-    <div style={{
+    <div
+      style={{
        display: 'flex',
        width: '100vw',
-      height: '100vh',
+        minHeight: '100dvh',
        alignItems: 'center',
        justifyContent: 'center',
-      background: 'linear-gradient(to right, var(--ant-color-bg-layout, #f0f2f5), var(--ant-color-fill-secondary, #d7d7d7))'
-    }}>
+        padding: isMobile ? '72px 12px 20px' : '24px',
+        boxSizing: 'border-box',
+        background: 'linear-gradient(to right, var(--ant-color-bg-layout, #f0f2f5), var(--ant-color-fill-secondary, #d7d7d7))',
+      }}
+    >
      <div style={{ position: 'fixed', top: 12, right: 12, zIndex: 1000 }}>
        <LanguageSwitcher />
      </div>
-      <div style={{
+
+      <div
+        style={{
+          width: '100%',
+          maxWidth: isMobile ? 420 : 1200,
+          minHeight: isMobile ? 'auto' : '70vh',
          display: 'flex',
-        width: '80%',
-        maxWidth: '1200px',
-        height: '70%',
-        maxHeight: '700px',
-        backgroundColor: 'var(--ant-color-bg-container, #fff)',
-        borderRadius: '20px',
-        boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)',
-        backdropFilter: 'blur(5px)',
+          flexDirection: isMobile ? 'column' : 'row',
+          borderRadius: 20,
+          background: 'rgba(255,255,255,0.74)',
+          backdropFilter: 'blur(16px)',
          border: '1px solid var(--ant-color-border-secondary, #e5e5e5)',
-        overflow: 'hidden'
-      }}>
-        <div style={{
-          width: '50%',
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          style={{
+            width: isMobile ? '100%' : '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
-          padding: '48px'
-        }}>
-          <div style={{ width: 360 }}>
+            padding: isMobile ? '24px 18px' : '48px',
+          }}
+        >
+          <div style={{ width: '100%', maxWidth: 360 }}>
            <Space direction="vertical" size="large" style={{ width: '100%' }}>
-              <div style={{ marginBottom: '24px' }}>
+              <div style={{ marginBottom: 24 }}>
                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginBottom: 8 }}>
                  <img src={status?.logo} alt="Foxel Logo" style={{ width: 32, marginRight: 16 }} />
-                  <Title level={2} style={{ margin: 0, color: 'var(--ant-color-text, #111)' }}>{t('Welcome Back')}</Title>
+                  <Title level={2} style={{ margin: 0, color: 'var(--ant-color-text, #111)', textAlign: 'center' }}>
+                    {t('Welcome Back')}
+                  </Title>
                </div>
-                <Text type="secondary" style={{ display: 'block', textAlign: 'center' }}>{t('Sign in to your Foxel account')}</Text>
+                <Text type="secondary" style={{ display: 'block', textAlign: 'center' }}>
+                  {t('Sign in to your Foxel account')}
+                </Text>
              </div>

-              {err && <Alert message={err} type="error" showIcon style={{ marginBottom: 24 }} />}
+              {err && <Alert message={err} type="error" showIcon style={{ marginBottom: 8 }} />}

              <Form onFinish={handleSubmit} layout="vertical" size="large">
                <Form.Item>
@@ -92,7 +104,7 @@ export default function LoginPage() {
                    prefix={<UserOutlined />}
                    placeholder={t('Username / Email')}
                    value={username}
-                    onChange={e => setUsername(e.target.value)}
+                    onChange={(e) => setUsername(e.target.value)}
                    required
                  />
                </Form.Item>
@@ -102,7 +114,7 @@ export default function LoginPage() {
                    prefix={<LockOutlined />}
                    placeholder={t('Password')}
                    value={password}
-                    onChange={e => setPassword(e.target.value)}
+                    onChange={(e) => setPassword(e.target.value)}
                    required
                  />
                </Form.Item>
@@ -114,12 +126,7 @@ export default function LoginPage() {
                </Form.Item>

                <Form.Item>
-                  <Button
-                    type="primary"
-                    htmlType="submit"
-                    loading={loading}
-                    style={{ width: '100%' }}
-                  >
+                  <Button type="primary" htmlType="submit" loading={loading} style={{ width: '100%' }}>
                    {t('Sign In')}
                  </Button>
                </Form.Item>
@@ -133,51 +140,55 @@ export default function LoginPage() {
            </Space>
          </div>
        </div>
-        <div style={{
+
+        {!isMobile && (
+          <div
+            style={{
              width: '50%',
              backgroundColor: 'var(--ant-color-fill-tertiary, #f0f2f5)',
-          backgroundImage: `radial-gradient(var(--ant-color-fill-secondary, #d7d7d7) 1px, transparent 1px)`,
+              backgroundImage: 'radial-gradient(var(--ant-color-fill-secondary, #d7d7d7) 1px, transparent 1px)',
              backgroundSize: '16px 16px',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
-          padding: '48px'
-        }}>
-          <div style={{ maxWidth: '500px' }}>
+              padding: '48px',
+            }}
+          >
+            <div style={{ maxWidth: 500 }}>
              <Title level={3}>{t('Your next-generation file manager')}</Title>
-            <Text type="secondary" style={{ fontSize: '16px', lineHeight: '1.8' }}>
+              <Text type="secondary" style={{ fontSize: 16, lineHeight: '1.8' }}>
                Foxel 旨在提供一个安全、高效且智能的文件管理解决方案，帮助您轻松组织、访问和共享您的数字资产。
              </Text>
-            <div style={{ marginTop: '32px' }}>
+              <div style={{ marginTop: 32 }}>
                <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                  <Card size="small" variant="borderless" style={{ backgroundColor: 'var(--ant-color-bg-container)' }}>
                    <Space>
-                    <CloudSyncOutlined style={{ fontSize: '20px', color: 'var(--ant-color-primary, #1677ff)' }} />
+                      <CloudSyncOutlined style={{ fontSize: 20, color: 'var(--ant-color-primary, #1677ff)' }} />
                      <Text>{t('Cross-platform sync, access anywhere')}</Text>
                    </Space>
                  </Card>
                  <Card size="small" variant="borderless" style={{ backgroundColor: 'var(--ant-color-bg-container)' }}>
                    <Space>
-                    <SearchOutlined style={{ fontSize: '20px', color: 'var(--ant-color-primary, #1677ff)' }} />
+                      <SearchOutlined style={{ fontSize: 20, color: 'var(--ant-color-primary, #1677ff)' }} />
                      <Text>{t('AI-powered search for quick find')}</Text>
                    </Space>
                  </Card>
                  <Card size="small" variant="borderless" style={{ backgroundColor: 'var(--ant-color-bg-container)' }}>
                    <Space>
-                    <ShareAltOutlined style={{ fontSize: '20px', color: 'var(--ant-color-primary, #1677ff)' }} />
+                      <ShareAltOutlined style={{ fontSize: 20, color: 'var(--ant-color-primary, #1677ff)' }} />
                      <Text>{t('Flexible sharing and collaboration')}</Text>
                    </Space>
                  </Card>
                  <Card size="small" variant="borderless" style={{ backgroundColor: 'var(--ant-color-bg-container)' }}>
                    <Space>
-                    <ApartmentOutlined style={{ fontSize: '20px', color: 'var(--ant-color-primary, #1677ff)' }} />
+                      <ApartmentOutlined style={{ fontSize: 20, color: 'var(--ant-color-primary, #1677ff)' }} />
                      <Text>{t('Powerful automation to simplify tasks')}</Text>
                    </Space>
                  </Card>
                </Space>
              </div>
-            <div style={{ marginTop: '48px', textAlign: 'center' }}>
+              <div style={{ marginTop: 48, textAlign: 'center' }}>
                <Text type="secondary">{t('Join our community:')}</Text>
                <Button type="text" icon={<GithubOutlined />} href="https://github.com/DrizzleTime/Foxel" target="_blank">GitHub</Button>
                <Button type="text" icon={<SendOutlined />} href="https://t.me/+thDsBfyqJxZkNTU1" target="_blank">Telegram</Button>
@@ -185,6 +196,7 @@ export default function LoginPage() {
              </div>
            </div>
          </div>
+        )}
      </div>
      <WeChatModal open={wechatModalOpen} onClose={() => setWechatModalOpen(false)} />
    </div>
--- a/web/src/pages/OfflineDownloadPage.tsx
+++ b/web/src/pages/OfflineDownloadPage.tsx
@@ -161,6 +161,7 @@ const OfflineDownloadPage = memo(function OfflineDownloadPage() {
          dataSource={tasks}
          loading={loading}
          pagination={false}
+          scroll={{ x: 'max-content' }}
          locale={{ emptyText: t('No offline download tasks') }}
          rowKey="id"
          style={{ marginBottom: 0 }}
--- a/web/src/pages/RegisterPage.tsx
+++ b/web/src/pages/RegisterPage.tsx
@@ -5,6 +5,7 @@ import { useAuth } from '../contexts/AuthContext';
 import { useNavigate, Navigate } from 'react-router';
 import { useI18n } from '../i18n';
 import LanguageSwitcher from '../components/LanguageSwitcher';
+import useResponsive from '../hooks/useResponsive';

 const { Title, Text } = Typography;

@@ -14,6 +15,7 @@ export default function RegisterPage() {
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();
  const { t } = useI18n();
+  const { isMobile } = useResponsive();

  if (isAuthenticated) {
    return <Navigate to="/" replace />;
@@ -39,19 +41,23 @@ export default function RegisterPage() {
  };

  return (
-    <div style={{
+    <div
+      style={{
        display: 'flex',
        width: '100vw',
-      height: '100vh',
+        minHeight: '100dvh',
        alignItems: 'center',
        justifyContent: 'center',
-      background: 'linear-gradient(to right, var(--ant-color-bg-layout, #f0f2f5), var(--ant-color-fill-secondary, #d7d7d7))'
-    }}>
+        padding: isMobile ? '72px 12px 20px' : '24px',
+        boxSizing: 'border-box',
+        background: 'linear-gradient(to right, var(--ant-color-bg-layout, #f0f2f5), var(--ant-color-fill-secondary, #d7d7d7))',
+      }}
+    >
      <div style={{ position: 'fixed', top: 12, right: 12, zIndex: 1000 }}>
        <LanguageSwitcher />
      </div>

-      <Card style={{ width: 420 }}>
+      <Card style={{ width: '100%', maxWidth: 420 }} styles={{ body: { padding: isMobile ? '20px 16px' : '24px' } }}>
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <div style={{ textAlign: 'center' }}>
            <Title level={2} style={{ marginBottom: 8 }}>{t('Create Account')}</Title>
@@ -61,11 +67,7 @@ export default function RegisterPage() {
          {err && <Alert message={err} type="error" showIcon />}

          <Form layout="vertical" size="large" onFinish={onFinish}>
-            <Form.Item
-              label={t('Username')}
-              name="username"
-              rules={[{ required: true, message: t('Please input username!') }]}
-            >
+            <Form.Item label={t('Username')} name="username" rules={[{ required: true, message: t('Please input username!') }]}>
              <Input prefix={<UserOutlined />} />
            </Form.Item>

@@ -80,18 +82,11 @@ export default function RegisterPage() {
              <Input prefix={<MailOutlined />} />
            </Form.Item>

-            <Form.Item
-              label={t('Full Name')}
-              name="full_name"
-            >
+            <Form.Item label={t('Full Name')} name="full_name">
              <Input prefix={<UserOutlined />} />
            </Form.Item>

-            <Form.Item
-              label={t('Password')}
-              name="password"
-              rules={[{ required: true, message: t('Please enter password') }]}
-            >
+            <Form.Item label={t('Password')} name="password" rules={[{ required: true, message: t('Please enter password') }]}>
              <Input.Password prefix={<LockOutlined />} />
            </Form.Item>

@@ -133,4 +128,3 @@ export default function RegisterPage() {
    </div>
  );
 }
-
--- a/web/src/pages/ResetPasswordPage.tsx
+++ b/web/src/pages/ResetPasswordPage.tsx
@@ -5,6 +5,7 @@ import { useLocation, useNavigate } from 'react-router';
 import { authApi } from '../api/auth';
 import { useI18n } from '../i18n';
 import LanguageSwitcher from '../components/LanguageSwitcher';
+import useResponsive from '../hooks/useResponsive';

 const { Title, Text } = Typography;

@@ -19,6 +20,7 @@ export default function ResetPasswordPage() {
  const [userInfo, setUserInfo] = useState<{ username: string; email: string } | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [success, setSuccess] = useState(false);
+  const { isMobile } = useResponsive();

  useEffect(() => {
    if (!token) {
@@ -58,7 +60,7 @@ export default function ResetPasswordPage() {

  if (error) {
    return (
-      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <div style={{ minHeight: '100dvh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px' }}>
        <Result
          status="error"
          title={t('Reset failed')}
@@ -75,12 +77,12 @@ export default function ResetPasswordPage() {

  return (
    <div style={{
-      minHeight: '100vh',
+      minHeight: '100dvh',
      background: 'linear-gradient(to right, var(--ant-color-bg-layout, #f0f2f5), var(--ant-color-fill-secondary, #d7d7d7))',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
-      padding: '48px 16px',
+      padding: isMobile ? '72px 12px 20px' : '48px 16px',
      position: 'relative'
    }}>
      <div style={{ position: 'absolute', top: 16, right: 16 }}>
@@ -94,7 +96,7 @@ export default function ResetPasswordPage() {
          border: '1px solid rgba(99,102,241,0.14)',
          boxShadow: '0 24px 60px rgba(79,70,229,0.18)',
        }}
-        bodyStyle={{ padding: '40px 36px' }}
+        styles={{ body: { padding: isMobile ? '24px 18px' : '40px 36px' } }}
      >
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <div style={{
--- a/web/src/pages/SetupPage.tsx
+++ b/web/src/pages/SetupPage.tsx
@@ -359,7 +359,7 @@ const SetupPage = () => {
    <div style={{
      display: 'flex',
      width: '100%',
-      minHeight: '100vh',
+      minHeight: '100dvh',
      alignItems: isMobile ? 'flex-start' : 'center',
      justifyContent: 'center',
      padding: isMobile ? '64px 12px 24px' : '32px 24px',
--- a/web/src/pages/SharePage.tsx
+++ b/web/src/pages/SharePage.tsx
@@ -111,7 +111,7 @@ const SharePage = memo(function SharePage() {
    <PageCard
      title={t('My Shares')}
      extra={
-        <Space>
+        <Space wrap>
          <Button onClick={fetchList} loading={loading}>{t('Refresh')}</Button>
          <Popconfirm title={t('Confirm clear expired shares?')} onConfirm={handleClearExpired}>
            <Button danger>{t('Clear expired shares')}</Button>
@@ -125,6 +125,7 @@ const SharePage = memo(function SharePage() {
        columns={columns as any}
        loading={loading}
        pagination={false}
+        scroll={{ x: 'max-content' }}
      />
    </PageCard>
  );
--- a/web/src/pages/SystemSettingsPage/SystemSettingsPage.tsx
+++ b/web/src/pages/SystemSettingsPage/SystemSettingsPage.tsx
@@ -6,6 +6,7 @@ import { AppstoreOutlined, RobotOutlined, DatabaseOutlined, SkinOutlined, MailOu
 import { useTheme } from '../../contexts/ThemeContext';
 import '../../styles/settings-tabs.css';
 import { useI18n } from '../../i18n';
+import useResponsive from '../../hooks/useResponsive';
 import AppearanceSettingsTab from './components/AppearanceSettingsTab';
 import AppSettingsTab from './components/AppSettingsTab';
 import AiSettingsTab from './components/AiSettingsTab';
@@ -51,6 +52,7 @@ export default function SystemSettingsPage({ tabKey, onTabNavigate }: SystemSett
  );
  const { refreshTheme } = useTheme();
  const { t } = useI18n();
+  const { isMobile } = useResponsive();

  useEffect(() => {
    getAllConfig()
@@ -132,7 +134,7 @@ export default function SystemSettingsPage({ tabKey, onTabNavigate }: SystemSett
          className="fx-settings-tabs"
          activeKey={activeTab}
          onChange={handleTabChange}
-          centered
+          centered={!isMobile}
          items={[
            {
              key: 'appearance',
--- a/web/src/pages/TaskQueuePage.tsx
+++ b/web/src/pages/TaskQueuePage.tsx
@@ -287,6 +287,7 @@ const TaskQueuePage = memo(function TaskQueuePage() {
          columns={columns}
          loading={loading}
          pagination={{ pageSize: 10 }}
+          scroll={{ x: 'max-content' }}
          style={{ marginBottom: 0 }}
        />
      </PageCard>
--- a/web/src/pages/TasksPage.tsx
+++ b/web/src/pages/TasksPage.tsx
@@ -153,7 +153,7 @@ const TasksPage = memo(function TasksPage() {
    <PageCard
      title={t('Automation Tasks')}
      extra={
-        <Space>
+        <Space wrap>
          <Button onClick={fetchList} loading={loading}>{t('Refresh')}</Button>
          <Button type="primary" onClick={openCreate}>{t('Create Task')}</Button>
        </Space>
@@ -165,6 +165,7 @@ const TasksPage = memo(function TasksPage() {
        columns={columns as any}
        loading={loading}
        pagination={false}
+        scroll={{ x: 'max-content' }}
        style={{ marginBottom: 0 }}
      />
      <Drawer
--- a/web/src/pages/UsersPage/UsersPage.tsx
+++ b/web/src/pages/UsersPage/UsersPage.tsx
@@ -11,6 +11,7 @@ import {
 } from '../../api/roles';
 import { permissionsApi, type PermissionInfo } from '../../api/permissions';
 import { useI18n } from '../../i18n';
+import useResponsive from '../../hooks/useResponsive';
 import { RolesTable } from './components/RolesTable';
 import { RoleEditorDrawer } from './components/RoleEditorDrawer';
 import { PathRuleEditorDrawer } from './components/PathRuleEditorDrawer';
@@ -23,6 +24,7 @@ type TabKey = 'users' | 'roles';

 const UsersPage = memo(function UsersPage() {
  const { t } = useI18n();
+  const { isMobile } = useResponsive();
  const [loading, setLoading] = useState(false);
  const [activeTab, setActiveTab] = useState<TabKey>('users');
  const [searchText, setSearchText] = useState('');
@@ -462,13 +464,13 @@ const UsersPage = memo(function UsersPage() {
    <PageCard
      title={t('User Management')}
      extra={
-        <Space>
+        <Space wrap>
          <Input.Search
            allowClear
            value={searchText}
            placeholder={t('Search users or roles')}
            onChange={(e) => setSearchText(e.target.value)}
-            style={{ width: 260 }}
+            style={{ width: isMobile ? '100%' : 260 }}
          />
          <Button onClick={fetchData} loading={loading}>{t('Refresh')}</Button>
          <Button type="primary" onClick={() => { setActiveTab('users'); openCreateUser(); }}>
--- a/web/src/pages/UsersPage/components/RolesTable.tsx
+++ b/web/src/pages/UsersPage/components/RolesTable.tsx
@@ -62,8 +62,8 @@ export const RolesTable = memo(function RolesTable({
      columns={columns}
      loading={loading}
      pagination={false}
+      scroll={{ x: 'max-content' }}
      style={{ marginBottom: 0 }}
    />
  );
 });
-
--- a/web/src/pages/UsersPage/components/UsersTable.tsx
+++ b/web/src/pages/UsersPage/components/UsersTable.tsx
@@ -78,8 +78,8 @@ export const UsersTable = memo(function UsersTable({
      columns={columns}
      loading={loading}
      pagination={false}
+      scroll={{ x: 'max-content' }}
      style={{ marginBottom: 0 }}
    />
  );
 });
-
--- a/web/src/router/LayoutShell.tsx
+++ b/web/src/router/LayoutShell.tsx
@@ -18,26 +18,44 @@ import UsersPage from '../pages/UsersPage/UsersPage.tsx';
 import { AppWindowsProvider, useAppWindows } from '../contexts/AppWindowsContext';
 import { AppWindowsLayer } from '../apps/AppWindowsLayer';
 import AiAgentWidget from '../components/AiAgentWidget';
+import useResponsive from '../hooks/useResponsive';

 const ShellBody = memo(function ShellBody() {
  const params = useParams<{ navKey?: string; '*': string }>();
  const navKey = params.navKey ?? 'files';
  const subPath = params['*'] ?? '';
  const navigate = useNavigate();
+  const { isMobile } = useResponsive();
  const COLLAPSED_KEY = 'layout.siderCollapsed';
  const [collapsed, setCollapsed] = useState(() => localStorage.getItem(COLLAPSED_KEY) === '1');
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  const [agentOpen, setAgentOpen] = useState(false);
+
  useEffect(() => {
    localStorage.setItem(COLLAPSED_KEY, collapsed ? '1' : '0');
  }, [collapsed]);
+
+  useEffect(() => {
+    setMobileNavOpen(false);
+  }, [isMobile, navKey, subPath]);
+
  const { windows, closeWindow, toggleMax, bringToFront, updateWindow } = useAppWindows();
  const settingsTab = navKey === 'settings' ? (subPath.split('/')[0] || undefined) : undefined;
  const agentCurrentPath = navKey === 'files' ? ('/' + subPath).replace(/\/+/g, '/').replace(/\/+$/, '') || '/' : null;
+  const handleToggleNav = () => {
+    if (isMobile) {
+      setMobileNavOpen(true);
+      return;
+    }
+    setCollapsed((value) => !value);
+  };
+
  return (
-    <Layout style={{ minHeight: '100vh', background: 'var(--ant-color-bg-layout)' }}>
+    <Layout style={{ minHeight: '100dvh', background: 'var(--ant-color-bg-layout)' }}>
+      {!isMobile && (
        <SideNav
          collapsed={collapsed}
-        onToggle={() => setCollapsed(c => !c)}
+          onToggle={handleToggleNav}
          activeKey={navKey}
          onChange={(key) => {
            if (key === 'settings') {
@@ -47,11 +65,44 @@ const ShellBody = memo(function ShellBody() {
            }
          }}
        />
-      <Layout style={{ background: 'var(--ant-color-bg-layout)' }}>
-        <TopHeader collapsed={collapsed} onToggle={() => setCollapsed(c => !c)} onOpenAiAgent={() => setAgentOpen(true)} />
-        <Layout.Content style={{ padding: 16, background: 'var(--ant-color-bg-layout)' }}>
-          <div style={{ minHeight: 'calc(100vh - 56px - 32px)', background: 'var(--ant-color-bg-layout)' }}>
-            <Flex vertical gap={16}>
+      )}
+
+      {isMobile && (
+        <SideNav
+          mobile
+          open={mobileNavOpen}
+          onClose={() => setMobileNavOpen(false)}
+          collapsed={false}
+          onToggle={handleToggleNav}
+          activeKey={navKey}
+          onChange={(key) => {
+            if (key === 'settings') {
+              navigate('/settings/appearance', { replace: true });
+            } else {
+              navigate(`/${key}`);
+            }
+          }}
+        />
+      )}
+
+      <Layout style={{ background: 'var(--ant-color-bg-layout)', minWidth: 0 }}>
+        <TopHeader
+          collapsed={collapsed}
+          onToggle={handleToggleNav}
+          onOpenAiAgent={() => setAgentOpen(true)}
+          showMenuButton={isMobile || collapsed}
+        />
+        <Layout.Content
+          style={{
+            padding: isMobile ? 12 : 16,
+            background: 'var(--ant-color-bg-layout)',
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 0,
+          }}
+        >
+          <div style={{ flex: 1, minHeight: 0, background: 'var(--ant-color-bg-layout)' }}>
+            <Flex vertical gap={16} style={{ minHeight: '100%', height: '100%' }}>
              {navKey === 'adapters' && <AdaptersPage />}
              {navKey === 'files' && <FileExplorerPage />}
              {navKey === 'share' && <SharePage />}
@@ -61,10 +112,7 @@ const ShellBody = memo(function ShellBody() {
              {navKey === 'offline' && <OfflineDownloadPage />}
              {navKey === 'plugins' && <PluginsPage />}
              {navKey === 'settings' && (
-                <SystemSettingsPage
-                  tabKey={settingsTab}
-                  onTabNavigate={(key, options) => navigate(`/settings/${key}`, options)}
-                />
+                <SystemSettingsPage tabKey={settingsTab} onTabNavigate={(key, options) => navigate(`/settings/${key}`, options)} />
              )}
              {navKey === 'audit' && <AuditLogsPage />}
              {navKey === 'backup' && <BackupPage />}
@@ -73,7 +121,7 @@ const ShellBody = memo(function ShellBody() {
          </div>
        </Layout.Content>
      </Layout>
-      {/* 常驻渲染应用窗口（过滤最小化在内部处理） */}
+
      <AppWindowsLayer
        windows={windows}
        onClose={closeWindow}
--- a/web/src/styles/settings-tabs.css
+++ b/web/src/styles/settings-tabs.css
@@ -46,3 +46,22 @@ html[data-theme='light'] .fx-settings-tabs .ant-tabs-tab-active .ant-tabs-tab-bt
 .fx-settings-tabs .ant-tabs-ink-bar {
  background: var(--ant-color-primary) !important;
 }
+
+@media (max-width: 767px) {
+  .fx-settings-tabs .ant-tabs-nav {
+    overflow-x: auto;
+  }
+
+  .fx-settings-tabs .ant-tabs-nav-list {
+    width: max-content;
+    min-width: 100%;
+    flex-wrap: nowrap;
+    padding: 2px 4px;
+  }
+
+  .fx-settings-tabs .ant-tabs-tab {
+    flex: 0 0 auto;
+    justify-content: flex-start;
+    white-space: nowrap;
+  }
+}