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

Services/Media/PictureService.cs

@@ -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; // 如果配置中没有或解析失败，使用本地存储作为默认
+            string? configValue = configuration[configKey];
+            return !string.IsNullOrEmpty(configValue) && 
+                   Enum.TryParse<StorageType>(configValue, out var configStorageType)
+                   ? configStorageType 
+                   : StorageType.Local;
         }
-            storageType = defaultStorageType;
+        
+        if (userId == null)
+        {
+            storageType = GetConfigStorageType("Storage:AnonymousDefaultStorage");
+        }
+        else if (storageType == null)
+        {
+            storageType = GetConfigStorageType("Storage:DefaultStorage");
         }
 
         string originalFileName = fileName;

Web/src/pages/settings/SystemConfig.tsx

@@ -190,28 +190,37 @@ const SystemConfig: React.FC = () => {
           </TabPane>
 
           <TabPane tab="存储设置" key="Storage">
+            {/* 存储类型配置卡片 */}
+            <Card 
+              size="small" 
+              title="存储类型配置" 
+              style={{ marginBottom: isMobile ? 16 : 24 }}
+              bodyStyle={{ padding: isMobile ? '12px' : '16px' }}
+            >
               <div style={{ 
-              marginBottom: isMobile ? 16 : 20,
-              display: 'flex',
-              flexDirection: isMobile ? 'column' : 'row',
-              alignItems: isMobile ? 'flex-start' : 'center',
-              gap: isMobile ? 8 : 0
+                display: 'grid',
+                gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fit, minmax(300px, 1fr))',
+                gap: isMobile ? 12 : 16,
+                marginBottom: 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'
                   }}>
-                默认存储:
-              </span>
+                    登录用户默认存储
+                  </div>
                   <Select 
                     value={configs.Storage?.DefaultStorage || 'Local'} 
                     onChange={(value) => {
                       handleSaveConfig('Storage', 'DefaultStorage', value);
                     }}
-                style={{ width: isMobile ? '100%' : 200 }}
-                size={isMobile ? "middle" : "large"}
+                    style={{ width: '100%' }}
+                    size="large"
+                    placeholder="选择登录用户的默认存储方式"
                   >
                     {storageOptions.map(option => (
                       <Option key={option.value} value={option.value}>
@@ -222,30 +231,78 @@ const SystemConfig: React.FC = () => {
                       </Option>
                     ))}
                   </Select>
+                  <div style={{ 
+                    fontSize: 12, 
+                    color: '#999', 
+                    marginTop: 4 
+                  }}>
+                    已登录用户上传文件时的默认存储位置
+                  </div>
                 </div>
 
+                {/* 匿名用户默认存储 */}
+                <div>
                   <div style={{ 
-              marginBottom: isMobile ? 16 : 20,
-              display: 'flex',
-              flexDirection: isMobile ? 'column' : 'row',
-              alignItems: isMobile ? 'flex-start' : 'center',
-              gap: isMobile ? 8 : 0
+                    marginBottom: 8,
+                    fontSize: 14,
+                    fontWeight: 500,
+                    color: '#666'
                   }}>
-              <span style={{ 
-                marginRight: isMobile ? 0 : 8,
-                display: 'inline-block', 
-                width: isMobile ? 'auto' : 100,
-                marginBottom: isMobile ? 4 : 0
+                    匿名用户默认存储
+                  </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 
                   }}>
-                配置存储:
-              </span>
+                    未登录用户上传文件时的默认存储位置
+                  </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%' : 200 }}
-                size={isMobile ? "middle" : "large"}
+                  style={{ width: isMobile ? '100%' : '300px' }}
+                  size="large"
+                  placeholder="选择需要配置的存储服务类型"
                 >
                   {storageOptions.map(option => (
                     <Option key={option.value} value={option.value}>
@@ -256,7 +313,27 @@ const SystemConfig: React.FC = () => {
                     </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'
+              }}>
+                {storageType === 'Local' && (
+                  <div style={{ textAlign: 'center', color: '#999', padding: '20px 0' }}>
+                    本地存储无需额外配置
+                  </div>
+                )}
 
                 {storageType === 'Telegram' && (
                   <ConfigGroup
@@ -345,6 +422,8 @@ const SystemConfig: React.FC = () => {
                     isMobile={isMobile}
                   />
                 )}
+              </div>
+            </Card>
           </TabPane>
         </Tabs>
       )}