1

app/src/config/settingsPresets.ts

@@ -83,7 +83,7 @@ const clampRange = (value: number, min: number, max: number) =>
   Math.min(Math.max(value, min), max);
 
 export type LayoutDensityPreset = {
-  value: 1 | 2 | 3 | 4;
+  value: number;
   label: string;
   cellSize: number;
   gap: number;
@@ -119,19 +119,46 @@ export const layoutDensityPresets: LayoutDensityPreset[] = [
   },
 ];
 
-export const getLayoutDensityPreset = (value?: number) =>
-  layoutDensityPresets.find(item => item.value === value) ?? layoutDensityPresets[1];
+export const layoutDensityRange = {
+  min: 1,
+  max: 4,
+  step: 0.1,
+  default: 2,
+};
+
+export const getLayoutDensityPreset = (value?: number) => {
+  const normalized = clampRange(
+    typeof value === 'number' ? value : layoutDensityRange.default,
+    layoutDensityRange.min,
+    layoutDensityRange.max
+  );
+  const lower = Math.floor(normalized);
+  const upper = Math.ceil(normalized);
+  if (lower === upper) {
+    return layoutDensityPresets[lower - 1] ?? layoutDensityPresets[1];
+  }
+  const lowerPreset = layoutDensityPresets[lower - 1] ?? layoutDensityPresets[0];
+  const upperPreset = layoutDensityPresets[upper - 1] ??
+    layoutDensityPresets[layoutDensityPresets.length - 1];
+  const t = (normalized - lower) / (upper - lower);
+  return {
+    value: normalized,
+    label: t < 0.5 ? lowerPreset.label : upperPreset.label,
+    cellSize: Math.round(lowerPreset.cellSize + (upperPreset.cellSize - lowerPreset.cellSize) * t),
+    gap: Math.round(lowerPreset.gap + (upperPreset.gap - lowerPreset.gap) * t),
+  };
+};
 
 export const iconDensityRange = {
   min: 0,
-  max: 10,
+  max: 50,
   step: 1,
-  default: 5,
+  default: 25,
 };
 
 const iconDensityScaleRange = {
-  loose: 1.3,
-  dense: 0.05,
+  loose: 2,
+  dense: 0,
 };
 
 export const getIconDensityScale = (value?: number) => {
@@ -140,6 +167,7 @@ export const getIconDensityScale = (value?: number) => {
     iconDensityRange.min,
     iconDensityRange.max
   );
+  const ease = (t: number) => Math.pow(t, 0.5);
   if (normalized === iconDensityRange.default) {
     return 1;
   }
@@ -147,11 +175,12 @@ export const getIconDensityScale = (value?: number) => {
     // Smaller slider value = denser布局
     const t = (iconDensityRange.default - normalized) /
       (iconDensityRange.default - iconDensityRange.min);
-    return 1 - t * (1 - iconDensityScaleRange.dense);
+    return 1 - ease(t) * (1 - iconDensityScaleRange.dense);
   }
+
   const t = (normalized - iconDensityRange.default) /
     (iconDensityRange.max - iconDensityRange.default);
-  return 1 + t * (iconDensityScaleRange.loose - 1);
+  return 1 + ease(t) * (iconDensityScaleRange.loose - 1);
 };
 
 export const iconSizeRange = {