feat: add default file view mode configuration and UI support

This commit is contained in:
shiyu
2026-05-08 21:56:08 +08:00
parent ee4de697fc
commit 19825c21d5
5 changed files with 34 additions and 0 deletions

View File

@@ -19,6 +19,7 @@ PUBLIC_CONFIG_KEYS = [
"THEME_BORDER_RADIUS",
"THEME_CUSTOM_TOKENS",
"THEME_CUSTOM_CSS",
"DEFAULT_FILE_VIEW_MODE",
]

View File

@@ -34,6 +34,7 @@
"English": "English",
"Default Language": "Default Language",
"Used when the user has not selected a language": "Used when the user has not selected a language",
"Default File View Mode": "Default File View Mode",
"Full Name": "Full Name",
"Email": "Email",
"Change Password": "Change Password",

View File

@@ -57,6 +57,7 @@
"English": "English",
"Default Language": "默认语言",
"Used when the user has not selected a language": "用户未手动选择语言时使用",
"Default File View Mode": "默认文件展示方式",
"Full Name": "昵称",
"Email": "邮箱",
"Change Password": "修改密码",

View File

@@ -28,6 +28,7 @@ import { MoveCopyModal } from './components/Modals/MoveCopyModal';
import { SearchResultsView } from './components/SearchResultsView';
import type { ViewMode } from './types';
import { vfsApi, type VfsEntry } from '../../api/client';
import { getPublicConfig } from '../../api/config';
import { LoadingSkeleton } from './components/LoadingSkeleton';
import useResponsive from '../../hooks/useResponsive';
@@ -106,6 +107,21 @@ const FileExplorerPage = memo(function FileExplorerPage() {
load(routePath, 1, pagination.pageSize, sortBy, sortOrder);
}, [routePath, navKey, load, pagination.pageSize, sortBy, sortOrder]);
useEffect(() => {
let mounted = true;
getPublicConfig()
.then((cfg) => {
if (!mounted || isMobile) return;
setViewMode(cfg.DEFAULT_FILE_VIEW_MODE === 'list' ? 'list' : 'grid');
})
.catch(() => {
if (mounted && !isMobile) setViewMode('grid');
});
return () => {
mounted = false;
};
}, [isMobile]);
useEffect(() => {
if (isMobile && viewMode !== 'grid') {
setViewMode('grid');

View File

@@ -54,6 +54,7 @@ export default function AppSettingsTab({
return {
...Object.fromEntries(configKeys.map(({ key, default: def }) => [key, config[key] ?? def ?? ''])),
APP_DEFAULT_LANGUAGE: normalizeLang(config.APP_DEFAULT_LANGUAGE, 'zh'),
DEFAULT_FILE_VIEW_MODE: config.DEFAULT_FILE_VIEW_MODE === 'list' ? 'list' : 'grid',
AUTH_ALLOW_REGISTER: allowRegister,
AUTH_DEFAULT_REGISTER_ROLE_ID: Number.isFinite(roleId) ? roleId : undefined,
};
@@ -70,6 +71,7 @@ export default function AppSettingsTab({
}
const defaultLanguage = normalizeLang(vals.APP_DEFAULT_LANGUAGE, 'zh');
payload.APP_DEFAULT_LANGUAGE = defaultLanguage;
payload.DEFAULT_FILE_VIEW_MODE = vals.DEFAULT_FILE_VIEW_MODE === 'list' ? 'list' : 'grid';
const allow = !!vals.AUTH_ALLOW_REGISTER;
payload.AUTH_ALLOW_REGISTER = allow ? 'true' : 'false';
if (allow) {
@@ -103,6 +105,19 @@ export default function AppSettingsTab({
/>
</Form.Item>
<Form.Item
name="DEFAULT_FILE_VIEW_MODE"
label={t('Default File View Mode')}
>
<Select
size="large"
options={[
{ value: 'grid', label: t('Grid') },
{ value: 'list', label: t('List') },
]}
/>
</Form.Item>
<Divider titlePlacement="left">{t('Registration Settings')}</Divider>
<Alert