GithubBackup/Foxel
1
0
Fork 0
mirror of https://github.com/DrizzleTime/Foxel.git synced 2026-09-06 08:07:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
shiyu
2026-03-09 11:44:44 +08:00
parent 1cac4f6f98
commit 066bd67273
31 changed files with 1010 additions and 602 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/pages/AdaptersPage.tsx
+2 -1
View File
@@ -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
web/src/pages/AuditLogsPage.tsx
+3 -1
View File
@@ -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 }}
web/src/pages/FileExplorerPage/FileExplorerPage.tsx
+38 -3
View File
@@ -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}
web/src/pages/FileExplorerPage/components/ContextMenu.tsx
+28 -3
View File
@@ -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}
web/src/pages/FileExplorerPage/components/FileListView.tsx
+1
View File
@@ -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),
web/src/pages/FileExplorerPage/components/GridView.tsx
+74 -56
View File
@@ -1,20 +1,23 @@
import React, { useRef, useState, useEffect } from 'react';
import { Tooltip, theme } from 'antd';
import { FolderFilled, PictureOutlined } from '@ant-design/icons';
import { Tooltip, theme, Button } from 'antd';
import { FolderFilled, PictureOutlined, MoreOutlined } from '@ant-design/icons';
import type { VfsEntry } from '../../../api/client';
import { getFileIcon } from './FileIcons';
import { EmptyState } from './EmptyState';
import { useTheme } from '../../../contexts/ThemeContext';
import { useI18n } from '../../../i18n';
interface Props {
entries: VfsEntry[];
thumbs: Record<string, string>;
selectedEntries: string[];
path: string;
mobile?: boolean;
onSelect: (e: VfsEntry, additive?: boolean) => void;
onSelectRange: (names: string[]) => void;
onOpen: (e: VfsEntry) => void;
onContextMenu: (e: React.MouseEvent, entry: VfsEntry) => void;
onOpenMenu?: (entry: VfsEntry, anchor: HTMLElement) => void;
}
const formatSize = (size: number) => {
@@ -24,33 +27,29 @@ const formatSize = (size: number) => {
return (size / 1024 / 1024 / 1024).toFixed(1) + ' GB';
};
export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, path, onSelect, onSelectRange, onOpen, onContextMenu }) => {
export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, path, mobile = false, onSelect, onSelectRange, onOpen, onContextMenu, onOpenMenu }) => {
const { token } = theme.useToken();
const { resolvedMode } = useTheme();
const { t } = useI18n();
const lightenColor = (hex: string, amount: number) => {
const parseHex = (h: string) => {
const s = h.replace('#', '');
const n = s.length === 3 ? s.split('').map(c => c + c).join('') : s;
const n = s.length === 3 ? s.split('').map((c) => c + c).join('') : s;
const num = parseInt(n, 16);
if (Number.isNaN(num) || n.length !== 6) return null;
return {
r: (num >> 16) & 255,
g: (num >> 8) & 255,
b: num & 255,
};
return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };
};
const rgb = parseHex(hex);
if (!rgb) return hex;
const mix = (c: number) => Math.round(c + (255 - c) * amount);
const r = mix(rgb.r);
const g = mix(rgb.g);
const b = mix(rgb.b);
const toHex = (v: number) => v.toString(16).padStart(2, '0');
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
return `#${toHex(mix(rgb.r))}${toHex(mix(rgb.g))}${toHex(mix(rgb.b))}`;
};
const toRgba = (hex: string, alpha: number) => {
const s = hex.replace('#', '');
const normalized = s.length === 3 ? s.split('').map(c => c + c).join('') : s;
const normalized = s.length === 3 ? s.split('').map((c) => c + c).join('') : s;
const num = parseInt(normalized, 16);
if (Number.isNaN(num) || normalized.length !== 6) {
return `rgba(22, 119, 255, ${alpha})`;
@@ -60,13 +59,15 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, pa
const b = num & 255;
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};
const containerRef = useRef<HTMLDivElement | null>(null);
const itemRefs = useRef<Record<string, HTMLDivElement | null>>({});
const startRef = useRef<{ x: number, y: number } | null>(null);
const [rect, setRect] = useState<{ left: number, top: number, width: number, height: number } | null>(null);
const startRef = useRef<{ x: number; y: number } | null>(null);
const [rect, setRect] = useState<{ left: number; top: number; width: number; height: number } | null>(null);
const [selecting, setSelecting] = useState(false);
useEffect(() => {
if (mobile) return;
const grid = containerRef.current;
const scrollContainer = grid?.parentElement;
if (!scrollContainer) return;
@@ -82,9 +83,10 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, pa
scrollContainer.addEventListener('mousedown', onBlankMouseDown);
return () => scrollContainer.removeEventListener('mousedown', onBlankMouseDown);
}, []);
}, [mobile]);
useEffect(() => {
if (mobile) return;
const onMove = (ev: MouseEvent) => {
if (!startRef.current) return;
const cx = ev.clientX;
@@ -99,22 +101,19 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, pa
const onUp = () => {
if (!startRef.current) return;
setSelecting(false);
const r = rect;
if (r) {
const container = containerRef.current;
if (container) {
const sel: string[] = [];
entries.forEach(ent => {
const el = itemRefs.current[ent.name];
if (!el) return;
const br = el.getBoundingClientRect();
const rr = { left: r.left, top: r.top, right: r.left + r.width, bottom: r.top + r.height };
const br2 = { left: br.left, top: br.top, right: br.right, bottom: br.bottom };
const intersect = !(br2.left > rr.right || br2.right < rr.left || br2.top > rr.bottom || br2.bottom < rr.top);
if (intersect) sel.push(ent.name);
});
if (sel.length > 0) onSelectRange(sel);
}
const currentRect = rect;
if (currentRect) {
const sel: string[] = [];
entries.forEach((ent) => {
const el = itemRefs.current[ent.name];
if (!el) return;
const br = el.getBoundingClientRect();
const rr = { left: currentRect.left, top: currentRect.top, right: currentRect.left + currentRect.width, bottom: currentRect.top + currentRect.height };
const br2 = { left: br.left, top: br.top, right: br.right, bottom: br.bottom };
const intersect = !(br2.left > rr.right || br2.right < rr.left || br2.top > rr.bottom || br2.bottom < rr.top);
if (intersect) sel.push(ent.name);
});
if (sel.length > 0) onSelectRange(sel);
}
startRef.current = null;
setRect(null);
@@ -129,10 +128,10 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, pa
window.removeEventListener('mousemove', onMove);
window.removeEventListener('mouseup', onUp);
};
}, [selecting, rect, entries, onSelectRange]);
}, [entries, mobile, onSelectRange, rect, selecting]);
const handleMouseDown = (e: React.MouseEvent) => {
if (e.button !== 0) return;
if (mobile || e.button !== 0) return;
const target = e.target as HTMLElement;
if (target.closest('.fx-grid-item')) {
return;
@@ -144,25 +143,48 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, pa
};
return (
<div className="fx-grid" style={{ padding: 16 }} ref={containerRef} onMouseDown={handleMouseDown}>
{entries.map(ent => {
<div className="fx-grid" style={{ padding: mobile ? 12 : 16 }} ref={containerRef} onMouseDown={handleMouseDown}>
{entries.map((ent) => {
const isImg = thumbs[ent.name];
const ext = ent.name.split('.').pop()?.toLowerCase();
const isPictureType = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].includes(ext || '');
const isSelected = selectedEntries.includes(ent.name);
return (
<div
key={ent.name}
ref={(el) => { itemRefs.current[ent.name] = el; }}
ref={(el) => {
itemRefs.current[ent.name] = el;
}}
className={['fx-grid-item', isSelected ? 'selected' : '', ent.is_dir ? 'dir' : 'file'].join(' ')}
onClick={(ev) => {
const additive = ev.ctrlKey || ev.metaKey;
onSelect(ent, additive);
if (mobile) {
onOpen(ent);
return;
}
onSelect(ent, ev.ctrlKey || ev.metaKey);
}}
onDoubleClick={() => {
if (!mobile) onOpen(ent);
}}
onContextMenu={(e) => {
if (!mobile) onContextMenu(e, ent);
}}
onDoubleClick={() => onOpen(ent)}
onContextMenu={(e) => onContextMenu(e, ent)}
style={{ userSelect: 'none' }}
>
{mobile && onOpenMenu && (
<Button
size="small"
type="text"
icon={<MoreOutlined />}
aria-label={t('More')}
onClick={(e) => {
e.stopPropagation();
onOpenMenu(ent, e.currentTarget);
}}
style={{ position: 'absolute', top: 4, right: 4, zIndex: 2 }}
/>
)}
<div className="thumb" style={{ background: 'var(--ant-color-bg-container, #fff)' }}>
{ent.is_dir && (
<FolderFilled
@@ -172,23 +194,19 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, pa
}}
/>
)}
{!ent.is_dir && (
isImg ? (
<img src={isImg} alt={ent.name} style={{ maxWidth: '100%', maxHeight: '100%' }} />
) : isPictureType ? (
<PictureOutlined style={{ fontSize: 32, color: resolvedMode === 'dark' ? lightenColor(String(token.colorPrimary || '#111111'), 0.72) : 'var(--ant-color-text-tertiary, #8c8c8c)' }} />
) : (
getFileIcon(ent.name, 32, resolvedMode)
)
)}
{!ent.is_dir && (isImg ? <img src={isImg} alt={ent.name} style={{ maxWidth: '100%', maxHeight: '100%' }} /> : isPictureType ? <PictureOutlined style={{ fontSize: 32, color: resolvedMode === 'dark' ? lightenColor(String(token.colorPrimary || '#111111'), 0.72) : 'var(--ant-color-text-tertiary, #8c8c8c)' }} /> : getFileIcon(ent.name, 32, resolvedMode))}
{ent.type === 'mount' && <span className="badge">M</span>}
</div>
<Tooltip title={ent.name}><div className="name ellipsis" style={{ userSelect: 'none' }}>{ent.name}</div></Tooltip>
<div className="meta ellipsis" style={{ fontSize: 11, color: token.colorTextSecondary, userSelect: 'none' }}>{ent.is_dir ? '目录' : formatSize(ent.size)}</div>
<Tooltip title={ent.name}>
<div className="name ellipsis" style={{ userSelect: 'none' }}>{ent.name}</div>
</Tooltip>
<div className="meta ellipsis" style={{ fontSize: 11, color: token.colorTextSecondary, userSelect: 'none' }}>
{ent.is_dir ? t('Folder') : formatSize(ent.size)}
</div>
</div>
)
);
})}
{rect && (
{!mobile && rect && (
<div
style={{
position: 'fixed',
@@ -198,7 +216,7 @@ export const GridView: React.FC<Props> = ({ entries, thumbs, selectedEntries, pa
height: rect.height,
border: '1px dashed var(--ant-color-border, rgba(0,0,0,0.4))',
background: toRgba(String(token.colorPrimary || '#1677ff'), 0.16),
zIndex: 999
zIndex: 999,
}}
/>
)}
web/src/pages/FileExplorerPage/components/Header.tsx
+112 -65
View File
@@ -1,6 +1,6 @@
import React, { useRef, useState } from 'react';
import { Flex, Typography, Divider, Button, Space, Tooltip, Segmented, Breadcrumb, Input, theme, Dropdown } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined, ReloadOutlined, PlusOutlined, UploadOutlined, AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons';
import { ArrowUpOutlined, ArrowDownOutlined, ReloadOutlined, PlusOutlined, UploadOutlined, AppstoreOutlined, UnorderedListOutlined, MoreOutlined, FileAddOutlined } from '@ant-design/icons';
import { Select } from 'antd';
import { useI18n } from '../../../i18n';
import type { ViewMode } from '../types';
@@ -12,10 +12,12 @@ interface HeaderProps {
viewMode: ViewMode;
sortBy: string;
sortOrder: string;
isMobile?: boolean;
onGoUp: () => void;
onNavigate: (path: string) => void;
onRefresh: () => void;
onCreateDir: () => void;
onCreateFile: () => void;
onUploadFile: () => void;
onUploadDirectory: () => void;
onSetViewMode: (mode: ViewMode) => void;
@@ -28,10 +30,12 @@ export const Header: React.FC<HeaderProps> = ({
viewMode,
sortBy,
sortOrder,
isMobile = false,
onGoUp,
onNavigate,
onRefresh,
onCreateDir,
onCreateFile,
onUploadFile,
onUploadDirectory,
onSetViewMode,
@@ -60,6 +64,7 @@ export const Header: React.FC<HeaderProps> = ({
};
const handlePathEdit = () => {
if (isMobile) return;
clearClickTimer();
setEditingPath(true);
setPathInputValue(path);
@@ -78,10 +83,6 @@ export const Header: React.FC<HeaderProps> = ({
setPathInputValue('');
};
const handleBreadcrumbDoubleClick = () => {
handlePathEdit();
};
const renderBreadcrumb = () => {
if (editingPath) {
return (
@@ -104,15 +105,15 @@ export const Header: React.FC<HeaderProps> = ({
const segmentPath = '/' + arr.slice(0, index + 1).join('/');
return {
key: segmentPath,
title: <span style={{ cursor: 'pointer' }} onClick={() => scheduleNavigate(segmentPath)}>{segment}</span>
title: <span style={{ cursor: 'pointer' }} onClick={() => scheduleNavigate(segmentPath)}>{segment}</span>,
};
})
}),
];
return (
<div
style={{
cursor: 'text',
cursor: isMobile ? 'default' : 'text',
padding: `${token.paddingXXS}px ${token.paddingXS}px`,
borderRadius: token.borderRadius,
transition: 'background-color 0.2s',
@@ -121,74 +122,120 @@ export const Header: React.FC<HeaderProps> = ({
height: pathEditorHeight,
boxSizing: 'border-box',
display: 'flex',
alignItems: 'center'
alignItems: 'center',
minWidth: 0,
}}
onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = token.colorFillTertiary; }}
onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
onDoubleClick={handleBreadcrumbDoubleClick}
onMouseEnter={(e) => {
if (!isMobile) e.currentTarget.style.backgroundColor = token.colorFillTertiary;
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = 'transparent';
}}
onDoubleClick={handlePathEdit}
>
<Breadcrumb items={breadcrumbItems} separator="/" style={{ fontSize: token.fontSizeSM }} />
</div>
);
};
const mobileMoreItems = [
{
key: 'new-file',
label: t('New File'),
icon: <FileAddOutlined />,
onClick: onCreateFile,
},
{
key: 'sort',
label: t('Sort By') + `: ${t(sortBy === 'mtime' ? 'Modified Time' : sortBy === 'size' ? 'Size' : 'Name')}`,
children: [
{ key: 'sort-name', label: t('Name'), onClick: () => onSortChange('name', sortOrder) },
{ key: 'sort-size', label: t('Size'), onClick: () => onSortChange('size', sortOrder) },
{ key: 'sort-mtime', label: t('Modified Time'), onClick: () => onSortChange('mtime', sortOrder) },
],
},
{
key: 'sort-order',
label: sortOrder === 'asc' ? t('Ascending') : t('Descending'),
icon: sortOrder === 'asc' ? <ArrowUpOutlined /> : <ArrowDownOutlined />,
onClick: () => onSortChange(sortBy, sortOrder === 'asc' ? 'desc' : 'asc'),
},
];
return (
<Flex align="center" justify="space-between" style={{ padding: '10px 16px', borderBottom: `1px solid ${token.colorBorderSecondary}`, gap: 12 }}>
<Flex align="center" gap={8} style={{ flexWrap: 'wrap', flex: 1, overflow: 'hidden' }}>
<Flex vertical={isMobile} gap={isMobile ? 10 : 12} style={{ padding: isMobile ? '10px 12px' : '10px 16px', borderBottom: `1px solid ${token.colorBorderSecondary}` }}>
<Flex align="center" gap={8} style={{ minWidth: 0 }}>
<Button size="small" icon={<ArrowUpOutlined />} onClick={onGoUp} disabled={path === '/'} />
<Typography.Text strong>{t('File Manager')}</Typography.Text>
<Divider type="vertical" />
{!isMobile && <Typography.Text strong>{t('File Manager')}</Typography.Text>}
{!isMobile && <Divider type="vertical" />}
{renderBreadcrumb()}
</Flex>
<Space size={8} wrap>
<Button size="small" icon={<ReloadOutlined />} onClick={onRefresh} loading={loading}>{t('Refresh')}</Button>
<Button size="small" icon={<PlusOutlined />} onClick={onCreateDir}>{t('New Folder')}</Button>
<Dropdown.Button
size="small"
icon={<UploadOutlined />}
onClick={onUploadFile}
menu={{
items: [
{ key: 'file', label: t('Upload Files') },
{ key: 'folder', label: t('Upload Folder') },
],
onClick: ({ key }) => {
if (key === 'folder') {
onUploadDirectory();
} else {
onUploadFile();
}
},
}}
>
{t('Upload')}
</Dropdown.Button>
<Select
size="small"
value={sortBy}
onChange={(val) => onSortChange(val, sortOrder)}
style={{ width: 80 }}
options={[
{ value: 'name', label: t('Name') },
{ value: 'size', label: t('Size') },
{ value: 'mtime', label: t('Modified Time') },
]}
/>
<Button
size="small"
icon={sortOrder === 'asc' ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
onClick={() => onSortChange(sortBy, sortOrder === 'asc' ? 'desc' : 'asc')}
/>
<Segmented
size="small"
value={viewMode}
onChange={value => onSetViewMode(value as ViewMode)}
options={[
{ label: <Tooltip title={t('Grid')}><AppstoreOutlined /></Tooltip>, value: 'grid' },
{ label: <Tooltip title={t('List')}><UnorderedListOutlined /></Tooltip>, value: 'list' }
]}
/>
</Space>
<Flex align="center" justify="space-between" gap={8} style={{ flexWrap: 'wrap' }}>
<Space size={8} wrap>
<Button size="small" icon={<ReloadOutlined />} onClick={onRefresh} loading={loading} aria-label={t('Refresh')}>
{!isMobile && t('Refresh')}
</Button>
<Button size="small" icon={<PlusOutlined />} onClick={onCreateDir} aria-label={t('New Folder')}>
{!isMobile && t('New Folder')}
</Button>
<Dropdown.Button
size="small"
icon={<UploadOutlined />}
onClick={onUploadFile}
menu={{
items: [
{ key: 'file', label: t('Upload Files') },
{ key: 'folder', label: t('Upload Folder') },
],
onClick: ({ key }) => {
if (key === 'folder') {
onUploadDirectory();
} else {
onUploadFile();
}
},
}}
>
{!isMobile && t('Upload')}
</Dropdown.Button>
{isMobile && (
<Dropdown menu={{ items: mobileMoreItems }}>
<Button size="small" icon={<MoreOutlined />} aria-label={t('More')} />
</Dropdown>
)}
</Space>
{!isMobile && (
<Space size={8} wrap>
<Select
size="small"
value={sortBy}
onChange={(val) => onSortChange(val, sortOrder)}
style={{ width: 112 }}
options={[
{ value: 'name', label: t('Name') },
{ value: 'size', label: t('Size') },
{ value: 'mtime', label: t('Modified Time') },
]}
/>
<Button
size="small"
icon={sortOrder === 'asc' ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
onClick={() => onSortChange(sortBy, sortOrder === 'asc' ? 'desc' : 'asc')}
/>
<Segmented
size="small"
value={viewMode}
onChange={(value) => onSetViewMode(value as ViewMode)}
options={[
{ label: <Tooltip title={t('Grid')}><AppstoreOutlined /></Tooltip>, value: 'grid' },
{ label: <Tooltip title={t('List')}><UnorderedListOutlined /></Tooltip>, value: 'list' },
]}
/>
</Space>
)}
</Flex>
</Flex>
);
};
web/src/pages/FileExplorerPage/components/SearchResultsView.tsx
+69 -45
View File
@@ -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>
web/src/pages/FileExplorerPage/hooks/useContextMenu.ts
+13 -1
View File
@@ -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,
};
}
}
web/src/pages/FileExplorerPage/hooks/useFileSearch.ts
+15 -1
View File
@@ -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,
};
}
web/src/pages/ForgotPasswordPage.tsx
+5 -3
View File
@@ -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={{
web/src/pages/LoginPage.tsx
+104 -92
View File
@@ -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={{
display: 'flex',
width: '100vw',
height: '100vh',
alignItems: 'center',
justifyContent: 'center',
background: 'linear-gradient(to right, var(--ant-color-bg-layout, #f0f2f5), var(--ant-color-fill-secondary, #d7d7d7))'
}}>
<div
style={{
display: 'flex',
width: '100vw',
minHeight: '100dvh',
alignItems: 'center',
justifyContent: 'center',
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={{
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)',
border: '1px solid var(--ant-color-border-secondary, #e5e5e5)',
overflow: 'hidden'
}}>
<div style={{
width: '50%',
<div
style={{
width: '100%',
maxWidth: isMobile ? 420 : 1200,
minHeight: isMobile ? 'auto' : '70vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '48px'
}}>
<div style={{ width: 360 }}>
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: isMobile ? '100%' : '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
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,58 +140,63 @@ export default function LoginPage() {
</Space>
</div>
</div>
<div style={{
width: '50%',
backgroundColor: 'var(--ant-color-fill-tertiary, #f0f2f5)',
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' }}>
<Title level={3}>{t('Your next-generation file manager')}</Title>
<Text type="secondary" style={{ fontSize: '16px', lineHeight: '1.8' }}>
Foxel 旨在提供一个安全、高效且智能的文件管理解决方案，帮助您轻松组织、访问和共享您的数字资产。
</Text>
<div style={{ marginTop: '32px' }}>
<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)' }} />
<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)' }} />
<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)' }} />
<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)' }} />
<Text>{t('Powerful automation to simplify tasks')}</Text>
</Space>
</Card>
</Space>
</div>
<div style={{ marginTop: '48px', 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>
<Button type="text" icon={<WechatOutlined />} onClick={() => setWechatModalOpen(true)}>微信</Button>
{!isMobile && (
<div
style={{
width: '50%',
backgroundColor: 'var(--ant-color-fill-tertiary, #f0f2f5)',
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: 500 }}>
<Title level={3}>{t('Your next-generation file manager')}</Title>
<Text type="secondary" style={{ fontSize: 16, lineHeight: '1.8' }}>
Foxel 旨在提供一个安全、高效且智能的文件管理解决方案，帮助您轻松组织、访问和共享您的数字资产。
</Text>
<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: 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: 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: 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: 20, color: 'var(--ant-color-primary, #1677ff)' }} />
<Text>{t('Powerful automation to simplify tasks')}</Text>
</Space>
</Card>
</Space>
</div>
<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>
<Button type="text" icon={<WechatOutlined />} onClick={() => setWechatModalOpen(true)}>微信</Button>
</div>
</div>
</div>
</div>
)}
</div>
<WeChatModal open={wechatModalOpen} onClose={() => setWechatModalOpen(false)} />
</div>
web/src/pages/OfflineDownloadPage.tsx
+1
View File
@@ -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 }}
web/src/pages/RegisterPage.tsx
+18 -24
View File
@@ -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={{
display: 'flex',
width: '100vw',
height: '100vh',
alignItems: 'center',
justifyContent: 'center',
background: 'linear-gradient(to right, var(--ant-color-bg-layout, #f0f2f5), var(--ant-color-fill-secondary, #d7d7d7))'
}}>
<div
style={{
display: 'flex',
width: '100vw',
minHeight: '100dvh',
alignItems: 'center',
justifyContent: 'center',
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>
);
}
web/src/pages/ResetPasswordPage.tsx
+6 -4
View File
@@ -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={{
web/src/pages/SetupPage.tsx
+1 -1
View File
@@ -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',
web/src/pages/SharePage.tsx
+2 -1
View File
@@ -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>
);
web/src/pages/SystemSettingsPage/SystemSettingsPage.tsx
+3 -1
View File
@@ -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',
web/src/pages/TaskQueuePage.tsx
+1
View File
@@ -287,6 +287,7 @@ const TaskQueuePage = memo(function TaskQueuePage() {
columns={columns}
loading={loading}
pagination={{ pageSize: 10 }}
scroll={{ x: 'max-content' }}
style={{ marginBottom: 0 }}
/>
</PageCard>
web/src/pages/TasksPage.tsx
+2 -1
View File
@@ -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
web/src/pages/UsersPage/UsersPage.tsx
+4 -2
View File
@@ -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(); }}>
web/src/pages/UsersPage/components/RolesTable.tsx
+1 -1
View File
@@ -62,8 +62,8 @@ export const RolesTable = memo(function RolesTable({
columns={columns}
loading={loading}
pagination={false}
scroll={{ x: 'max-content' }}
style={{ marginBottom: 0 }}
/>
);
});
web/src/pages/UsersPage/components/UsersTable.tsx
+1 -1
View File
@@ -78,8 +78,8 @@ export const UsersTable = memo(function UsersTable({
columns={columns}
loading={loading}
pagination={false}
scroll={{ x: 'max-content' }}
style={{ marginBottom: 0 }}
/>
);
});