feat: 前端界面优化

platform_web/pages/ProfileSettingsPage.tsx

@@ -5,15 +5,11 @@ import type { PageComponentProps } from "../contracts/page";
 import { defaultPageForUser } from "../routes/routes";
 import {
   applyBackgroundImage,
-  applyThemeBackgroundPreset,
   applyThemePalette,
   loadThemeState,
   persistBackgroundImage,
-  persistThemeBackgroundPreset,
   persistThemePalette,
-  themeBackgroundPresets,
   themePalettes,
-  type ThemeBackgroundId,
   type ThemePaletteId,
   type WorkspaceThemeState
 } from "../theme/tokens";
@@ -46,9 +42,8 @@ export function ProfileSettingsPage({ session, onNavigate, onLogout, onProfileSa
   }, [session]);
 
   const activePalette = useMemo(() => themePalettes.find((palette) => palette.id === themeState.paletteId) ?? themePalettes[0], [themeState.paletteId]);
-  const activeBackground = useMemo(() => themeBackgroundPresets.find((preset) => preset.id === themeState.backgroundPresetId) ?? themeBackgroundPresets[0], [themeState.backgroundPresetId]);
   const hasCustomBackground = Boolean(themeState.backgroundImage);
-  const backgroundMetricValue = hasCustomBackground ? "自定义背景" : activeBackground.label;
+  const backgroundMetricValue = hasCustomBackground ? "已上传" : "主题配色";
 
   async function saveProfile(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -91,16 +86,6 @@ export function ProfileSettingsPage({ session, onNavigate, onLogout, onProfileSa
     });
   }
 
-  function selectBackgroundPreset(backgroundPresetId: ThemeBackgroundId) {
-    applyThemeBackgroundPreset(backgroundPresetId);
-    persistThemeBackgroundPreset(backgroundPresetId);
-    setThemeState((current) => {
-      const nextState = { ...current, backgroundPresetId };
-      void persistThemePreference(nextState);
-      return nextState;
-    });
-  }
-
   function handleBackgroundUpload(event: ChangeEvent<HTMLInputElement>) {
     const file = event.target.files?.[0];
     event.target.value = "";
@@ -219,31 +204,8 @@ export function ProfileSettingsPage({ session, onNavigate, onLogout, onProfileSa
             ))}
           </div>
           <div className="profile-panel-title">
-            <MoonStar size={15} />
-            <strong>背景桌面</strong>
-          </div>
-          <div className="background-preset-grid profile-background-grid">
-            {themeBackgroundPresets.map((preset) => {
-              const isFallbackPreset = preset.id === themeState.backgroundPresetId;
-              const isVisiblePreset = isFallbackPreset && !hasCustomBackground;
-              return (
-                <button
-                  key={preset.id}
-                  type="button"
-                  className={cx("background-preset-option", isVisiblePreset && "background-preset-option-active", hasCustomBackground && isFallbackPreset && "background-preset-option-fallback")}
-                  aria-pressed={isVisiblePreset}
-                  title={hasCustomBackground ? `${preset.summary}，当前自定义背景正在显示；此预设会在移除上传背景后显示` : preset.summary}
-                  onClick={() => selectBackgroundPreset(preset.id)}
-                >
-                  <span className="background-preset-preview" style={{ background: preset.preview }} aria-hidden="true" />
-                  <span className="background-preset-label">
-                    {isVisiblePreset ? <Sparkles size={13} /> : <MoonStar size={13} />}
-                    {preset.label}
-                    {hasCustomBackground && isFallbackPreset && <span className="background-preset-fallback-badge">备用</span>}
-                  </span>
-                </button>
-              );
-            })}
+            <Upload size={15} />
+            <strong>自定义背景</strong>
           </div>
           <div className="theme-background-actions">
             <label className="theme-upload" title="上传自定义背景桌面">
@@ -258,7 +220,7 @@ export function ProfileSettingsPage({ session, onNavigate, onLogout, onProfileSa
               </button>
             )}
           </div>
-          <span className="theme-background-note">{themeState.backgroundImage ? `当前显示自定义上传背景；${activeBackground.label} 仅作为移除上传后的备用桌面。` : "当前使用内置背景桌面。"}</span>
+          <span className="theme-background-note">{themeState.backgroundImage ? "当前显示自定义上传背景；移除后回到主题配色背景。" : "当前仅使用主题配色背景。"}</span>
         </section>
       </section>
     </div>