feat(StorageConfig): enhance storage settings UI with separate configurations for logged-in and anonymous users

This commit is contained in:
ShiYu
2025-05-24 00:35:13 +08:00
parent 6da267a566
commit 5c5b63e82f
2 changed files with 244 additions and 158 deletions

View File

@@ -441,15 +441,22 @@ public class PictureService(
ImageFormat convertToFormat = ImageFormat.Original,
int quality = 95)
{
// 如果未指定存储类型,则从配置中获取默认存储类型
if (storageType == null)
StorageType GetConfigStorageType(string configKey)
{
var defaultStorageTypeStr = configuration["Storage:DefaultStorage"];
if (string.IsNullOrEmpty(defaultStorageTypeStr) || !Enum.TryParse<StorageType>(defaultStorageTypeStr, out var defaultStorageType))
{
defaultStorageType = StorageType.Local; // 如果配置中没有或解析失败,使用本地存储作为默认
}
storageType = defaultStorageType;
string? configValue = configuration[configKey];
return !string.IsNullOrEmpty(configValue) &&
Enum.TryParse<StorageType>(configValue, out var configStorageType)
? configStorageType
: StorageType.Local;
}
if (userId == null)
{
storageType = GetConfigStorageType("Storage:AnonymousDefaultStorage");
}
else if (storageType == null)
{
storageType = GetConfigStorageType("Storage:DefaultStorage");
}
string originalFileName = fileName;

View File

@@ -190,161 +190,240 @@ const SystemConfig: React.FC = () => {
</TabPane>
<TabPane tab="存储设置" key="Storage">
<div style={{
marginBottom: isMobile ? 16 : 20,
display: 'flex',
flexDirection: isMobile ? 'column' : 'row',
alignItems: isMobile ? 'flex-start' : 'center',
gap: isMobile ? 8 : 0
}}>
<span style={{
marginRight: isMobile ? 0 : 8,
display: 'inline-block',
width: isMobile ? 'auto' : 100,
marginBottom: isMobile ? 4 : 0
{/* 存储类型配置卡片 */}
<Card
size="small"
title="存储类型配置"
style={{ marginBottom: isMobile ? 16 : 24 }}
bodyStyle={{ padding: isMobile ? '12px' : '16px' }}
>
<div style={{
display: 'grid',
gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fit, minmax(300px, 1fr))',
gap: isMobile ? 12 : 16,
marginBottom: 0
}}>
:
</span>
<Select
value={configs.Storage?.DefaultStorage || 'Local'}
onChange={(value) => {
handleSaveConfig('Storage', 'DefaultStorage', value);
}}
style={{ width: isMobile ? '100%' : 200 }}
size={isMobile ? "middle" : "large"}
>
{storageOptions.map(option => (
<Option key={option.value} value={option.value}>
<div style={{ display: 'flex', alignItems: 'center' }}>
{option.icon}
<span style={{ marginLeft: 8 }}>{option.label}</span>
</div>
</Option>
))}
</Select>
</div>
<div style={{
marginBottom: isMobile ? 16 : 20,
display: 'flex',
flexDirection: isMobile ? 'column' : 'row',
alignItems: isMobile ? 'flex-start' : 'center',
gap: isMobile ? 8 : 0
}}>
<span style={{
marginRight: isMobile ? 0 : 8,
display: 'inline-block',
width: isMobile ? 'auto' : 100,
marginBottom: isMobile ? 4 : 0
{/* 登录用户默认存储 */}
<div>
<div style={{
marginBottom: 8,
fontSize: 14,
fontWeight: 500,
color: '#666'
}}>
</div>
<Select
value={configs.Storage?.DefaultStorage || 'Local'}
onChange={(value) => {
handleSaveConfig('Storage', 'DefaultStorage', value);
}}
style={{ width: '100%' }}
size="large"
placeholder="选择登录用户的默认存储方式"
>
{storageOptions.map(option => (
<Option key={option.value} value={option.value}>
<div style={{ display: 'flex', alignItems: 'center' }}>
{option.icon}
<span style={{ marginLeft: 8 }}>{option.label}</span>
</div>
</Option>
))}
</Select>
<div style={{
fontSize: 12,
color: '#999',
marginTop: 4
}}>
</div>
</div>
{/* 匿名用户默认存储 */}
<div>
<div style={{
marginBottom: 8,
fontSize: 14,
fontWeight: 500,
color: '#666'
}}>
</div>
<Select
value={configs.Storage?.AnonymousDefaultStorage || 'Local'}
onChange={(value) => {
handleSaveConfig('Storage', 'AnonymousDefaultStorage', value);
}}
style={{ width: '100%' }}
size="large"
placeholder="选择匿名用户的默认存储方式"
>
{storageOptions.map(option => (
<Option key={option.value} value={option.value}>
<div style={{ display: 'flex', alignItems: 'center' }}>
{option.icon}
<span style={{ marginLeft: 8 }}>{option.label}</span>
</div>
</Option>
))}
</Select>
<div style={{
fontSize: 12,
color: '#999',
marginTop: 4
}}>
</div>
</div>
</div>
</Card>
{/* 存储服务配置卡片 */}
<Card
size="small"
title="存储服务配置"
style={{ marginBottom: isMobile ? 16 : 24 }}
bodyStyle={{ padding: isMobile ? '12px' : '16px' }}
>
<div style={{ marginBottom: 16 }}>
<div style={{
marginBottom: 8,
fontSize: 14,
fontWeight: 500,
color: '#666'
}}>
</div>
<Select
value={storageType}
onChange={(value) => {
setStorageType(value);
}}
style={{ width: isMobile ? '100%' : '300px' }}
size="large"
placeholder="选择需要配置的存储服务类型"
>
{storageOptions.map(option => (
<Option key={option.value} value={option.value}>
<div style={{ display: 'flex', alignItems: 'center' }}>
{option.icon}
<span style={{ marginLeft: 8 }}>{option.label}</span>
</div>
</Option>
))}
</Select>
<div style={{
fontSize: 12,
color: '#999',
marginTop: 4
}}>
</div>
</div>
{/* 存储服务具体配置 */}
<div style={{
border: '1px solid #f0f0f0',
borderRadius: 6,
padding: isMobile ? 12 : 16,
backgroundColor: '#fafafa'
}}>
:
</span>
<Select
value={storageType}
onChange={(value) => {
setStorageType(value);
}}
style={{ width: isMobile ? '100%' : 200 }}
size={isMobile ? "middle" : "large"}
>
{storageOptions.map(option => (
<Option key={option.value} value={option.value}>
<div style={{ display: 'flex', alignItems: 'center' }}>
{option.icon}
<span style={{ marginLeft: 8 }}>{option.label}</span>
</div>
</Option>
))}
</Select>
</div>
{storageType === 'Local' && (
<div style={{ textAlign: 'center', color: '#999', padding: '20px 0' }}>
</div>
)}
{storageType === 'Telegram' && (
<ConfigGroup
groupName="Storage"
configs={{
"TelegramStorageBotToken": configs.Storage?.TelegramStorageBotToken || '',
"TelegramStorageChatId": configs.Storage?.TelegramStorageChatId || ''
}}
onSave={handleSaveConfig}
descriptions={{
"TelegramStorageBotToken": 'Telegram 机器人令牌',
"TelegramStorageChatId": 'Telegram 聊天ID'
}}
isMobile={isMobile}
/>
)}
{storageType === 'Telegram' && (
<ConfigGroup
groupName="Storage"
configs={{
"TelegramStorageBotToken": configs.Storage?.TelegramStorageBotToken || '',
"TelegramStorageChatId": configs.Storage?.TelegramStorageChatId || ''
}}
onSave={handleSaveConfig}
descriptions={{
"TelegramStorageBotToken": 'Telegram 机器人令牌',
"TelegramStorageChatId": 'Telegram 聊天ID'
}}
isMobile={isMobile}
/>
)}
{storageType === 'S3' && (
<ConfigGroup
groupName="Storage"
configs={{
"S3StorageAccessKey": configs.Storage?.S3StorageAccessKey || '',
"S3StorageSecretKey": configs.Storage?.S3StorageSecretKey || '',
"S3StorageBucketName": configs.Storage?.S3StorageBucketName || '',
"S3StorageRegion": configs.Storage?.S3StorageRegion || '',
"S3StorageEndpoint": configs.Storage?.S3StorageEndpoint || '',
"S3StorageCdnUrl": configs.Storage?.S3StorageCdnUrl || '',
"S3StorageUsePathStyleUrls": configs.Storage?.S3StorageUsePathStyleUrls || 'false'
}}
onSave={handleSaveConfig}
descriptions={{
"S3StorageAccessKey": 'S3访问密钥',
"S3StorageSecretKey": 'S3私有密钥',
"S3StorageBucketName": 'S3存储桶名称',
"S3StorageRegion": 'S3区域 (例如:us-east-1)',
"S3StorageEndpoint": 'S3端点URL (可选,默认为AWS S3)',
"S3StorageCdnUrl": 'CDN URL (可选,用于加速文件访问)',
"S3StorageUsePathStyleUrls": '使用路径形式URLs (true/false,兼容非AWS服务)'
}}
isMobile={isMobile}
/>
)}
{storageType === 'S3' && (
<ConfigGroup
groupName="Storage"
configs={{
"S3StorageAccessKey": configs.Storage?.S3StorageAccessKey || '',
"S3StorageSecretKey": configs.Storage?.S3StorageSecretKey || '',
"S3StorageBucketName": configs.Storage?.S3StorageBucketName || '',
"S3StorageRegion": configs.Storage?.S3StorageRegion || '',
"S3StorageEndpoint": configs.Storage?.S3StorageEndpoint || '',
"S3StorageCdnUrl": configs.Storage?.S3StorageCdnUrl || '',
"S3StorageUsePathStyleUrls": configs.Storage?.S3StorageUsePathStyleUrls || 'false'
}}
onSave={handleSaveConfig}
descriptions={{
"S3StorageAccessKey": 'S3访问密钥',
"S3StorageSecretKey": 'S3私有密钥',
"S3StorageBucketName": 'S3存储桶名称',
"S3StorageRegion": 'S3区域 (例如:us-east-1)',
"S3StorageEndpoint": 'S3端点URL (可选,默认为AWS S3)',
"S3StorageCdnUrl": 'CDN URL (可选,用于加速文件访问)',
"S3StorageUsePathStyleUrls": '使用路径形式URLs (true/false,兼容非AWS服务)'
}}
isMobile={isMobile}
/>
)}
{storageType === 'Cos' && (
<ConfigGroup
groupName="Storage"
configs={{
"CosStorageSecretId": configs.Storage?.CosStorageSecretId || '',
"CosStorageSecretKey": configs.Storage?.CosStorageSecretKey || '',
"CosStorageToken": configs.Storage?.CosStorageToken || '',
"CosStorageBucketName": configs.Storage?.CosStorageBucketName || '',
"CosStorageRegion": configs.Storage?.CosStorageRegion || '',
"CosStorageCdnUrl": configs.Storage?.CosStorageCdnUrl || '',
}}
onSave={handleSaveConfig}
descriptions={{
"CosStorageSecretId": '腾讯云COS密钥ID',
"CosStorageSecretKey": '腾讯云COS私有密钥',
"CosStorageToken": '腾讯云COS临时令牌(可选)',
"CosStorageBucketName": 'COS存储桶名称',
"CosStorageRegion": 'COS区域 (例如:ap-shanghai)',
"CosStorageCdnUrl": 'CDN URL (可选,用于加速文件访问)',
}}
isMobile={isMobile}
/>
)}
{storageType === 'WebDAV' && (
<ConfigGroup
groupName="Storage"
configs={{
"WebDAVServerUrl": configs.Storage?.WebDAVServerUrl || '',
"WebDAVUserName": configs.Storage?.WebDAVUserName || '',
"WebDAVPassword": configs.Storage?.WebDAVPassword || '',
"WebDAVBasePath": configs.Storage?.WebDAVBasePath || '',
"WebDAVPublicUrl": configs.Storage?.WebDAVPublicUrl || '',
}}
onSave={handleSaveConfig}
descriptions={{
"WebDAVServerUrl": 'WebDAV 服务器 URL (例如: https://dav.example.com)',
"WebDAVUserName": 'WebDAV 用户名',
"WebDAVPassword": 'WebDAV 密码',
"WebDAVBasePath": 'WebDAV 基础路径 (例如: files/upload)',
"WebDAVPublicUrl": 'WebDAV 公共访问 URL (可选,用于文件访问)',
}}
isMobile={isMobile}
/>
)}
{storageType === 'Cos' && (
<ConfigGroup
groupName="Storage"
configs={{
"CosStorageSecretId": configs.Storage?.CosStorageSecretId || '',
"CosStorageSecretKey": configs.Storage?.CosStorageSecretKey || '',
"CosStorageToken": configs.Storage?.CosStorageToken || '',
"CosStorageBucketName": configs.Storage?.CosStorageBucketName || '',
"CosStorageRegion": configs.Storage?.CosStorageRegion || '',
"CosStorageCdnUrl": configs.Storage?.CosStorageCdnUrl || '',
}}
onSave={handleSaveConfig}
descriptions={{
"CosStorageSecretId": '腾讯云COS密钥ID',
"CosStorageSecretKey": '腾讯云COS私有密钥',
"CosStorageToken": '腾讯云COS临时令牌(可选)',
"CosStorageBucketName": 'COS存储桶名称',
"CosStorageRegion": 'COS区域 (例如:ap-shanghai)',
"CosStorageCdnUrl": 'CDN URL (可选,用于加速文件访问)',
}}
isMobile={isMobile}
/>
)}
{storageType === 'WebDAV' && (
<ConfigGroup
groupName="Storage"
configs={{
"WebDAVServerUrl": configs.Storage?.WebDAVServerUrl || '',
"WebDAVUserName": configs.Storage?.WebDAVUserName || '',
"WebDAVPassword": configs.Storage?.WebDAVPassword || '',
"WebDAVBasePath": configs.Storage?.WebDAVBasePath || '',
"WebDAVPublicUrl": configs.Storage?.WebDAVPublicUrl || '',
}}
onSave={handleSaveConfig}
descriptions={{
"WebDAVServerUrl": 'WebDAV 服务器 URL (例如: https://dav.example.com)',
"WebDAVUserName": 'WebDAV 用户名',
"WebDAVPassword": 'WebDAV 密码',
"WebDAVBasePath": 'WebDAV 基础路径 (例如: files/upload)',
"WebDAVPublicUrl": 'WebDAV 公共访问 URL (可选,用于文件访问)',
}}
isMobile={isMobile}
/>
)}
</div>
</Card>
</TabPane>
</Tabs>
)}