diff --git a/src/app/OlMap/Controls/StyleEditorPanel.tsx b/src/app/OlMap/Controls/StyleEditorPanel.tsx
index 8040ed4..4483bde 100644
--- a/src/app/OlMap/Controls/StyleEditorPanel.tsx
+++ b/src/app/OlMap/Controls/StyleEditorPanel.tsx
@@ -42,8 +42,9 @@ interface StyleConfig {
   maxStrokeWidth: number; // 最大线宽
   fixedStrokeWidth: number; // 固定线宽
   colorType: string; // 颜色类型
-  startColor: string;
-  endColor: string;
+  singlePaletteIndex: number;
+  gradientPaletteIndex: number;
+  rainbowPaletteIndex: number;
   showLabels: boolean;
   opacity: number;
   adjustWidthByProperty: boolean; // 是否根据属性调整线条宽度
@@ -51,7 +52,7 @@ interface StyleConfig {
 }
 
 // 图层样式状态接口
-interface LayerStyleState {
+export interface LayerStyleState {
   layerId: string;
   layerName: string;
   styleConfig: StyleConfig;
@@ -191,28 +192,26 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
     maxStrokeWidth: 6,
     fixedStrokeWidth: 3,
     colorType: "single",
-    startColor: "rgba(51, 153, 204, 0.9)",
-    endColor: "rgba(204, 51, 51, 0.9)",
+    singlePaletteIndex: 0,
+    gradientPaletteIndex: 0,
+    rainbowPaletteIndex: 0,
     showLabels: false,
     opacity: 0.9,
     adjustWidthByProperty: true,
     customBreaks: [],
   });
 
-  // 颜色方案选择
-  const [singlePaletteIndex, setSinglePaletteIndex] = useState(0);
-  const [gradientPaletteIndex, setGradientPaletteIndex] = useState(0);
-  const [rainbowPaletteIndex, setRainbowPaletteIndex] = useState(0);
   // 根据分段数生成相应数量的渐进颜色
   const generateGradientColors = useCallback(
     (segments: number): string[] => {
-      const { start, end } = GRADIENT_PALETTES[gradientPaletteIndex];
+      const { start, end } =
+        GRADIENT_PALETTES[styleConfig.gradientPaletteIndex];
       const colors: string[] = [];
       const startColor = parseColor(start);
       const endColor = parseColor(end);
 
       for (let i = 0; i < segments; i++) {
-        const ratio = i / (segments - 1);
+        const ratio = segments > 1 ? i / (segments - 1) : 1;
         const r = Math.round(
           startColor.r + (endColor.r - startColor.r) * ratio
         );
@@ -226,13 +225,14 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
       }
       return colors;
     },
-    [gradientPaletteIndex, parseColor]
+    [styleConfig.gradientPaletteIndex, parseColor]
   );
 
   // 根据分段数生成彩虹色
   const generateRainbowColors = useCallback(
     (segments: number): string[] => {
-      const baseColors = RAINBOW_PALETTES[rainbowPaletteIndex].colors;
+      const baseColors =
+        RAINBOW_PALETTES[styleConfig.rainbowPaletteIndex].colors;
 
       if (segments <= baseColors.length) {
         // 如果分段数小于等于基础颜色数,均匀选取
@@ -249,7 +249,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
         );
       }
     },
-    [rainbowPaletteIndex]
+    [styleConfig.rainbowPaletteIndex]
   );
   // 保存当前图层的样式状态
   const saveLayerStyle = useCallback(
@@ -473,7 +473,7 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
       styleConfig.colorType === "single"
         ? // 单一色重复多次
           Array.from({ length: breaksLength }, () => {
-            return SINGLE_COLOR_PALETTES[singlePaletteIndex].color;
+            return SINGLE_COLOR_PALETTES[styleConfig.singlePaletteIndex].color;
           })
         : styleConfig.colorType === "gradient"
         ? generateGradientColors(breaksLength)
@@ -901,8 +901,13 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
         >
           <InputLabel>单一色方案</InputLabel>
           <Select
-            value={singlePaletteIndex}
-            onChange={(e) => setSinglePaletteIndex(Number(e.target.value))}
+            value={styleConfig.singlePaletteIndex}
+            onChange={(e) =>
+              setStyleConfig((prev) => ({
+                ...prev,
+                singlePaletteIndex: Number(e.target.value),
+              }))
+            }
           >
             {SINGLE_COLOR_PALETTES.map((p, idx) => {
               return (
@@ -940,8 +945,13 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
         >
           <InputLabel>渐进色方案</InputLabel>
           <Select
-            value={gradientPaletteIndex}
-            onChange={(e) => setGradientPaletteIndex(Number(e.target.value))}
+            value={styleConfig.gradientPaletteIndex}
+            onChange={(e) =>
+              setStyleConfig((prev) => ({
+                ...prev,
+                gradientPaletteIndex: Number(e.target.value),
+              }))
+            }
           >
             {GRADIENT_PALETTES.map((p, idx) => {
               return (
@@ -978,8 +988,13 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
         >
           <InputLabel>离散彩虹方案</InputLabel>
           <Select
-            value={rainbowPaletteIndex}
-            onChange={(e) => setRainbowPaletteIndex(Number(e.target.value))}
+            value={styleConfig.rainbowPaletteIndex}
+            onChange={(e) =>
+              setStyleConfig((prev) => ({
+                ...prev,
+                rainbowPaletteIndex: Number(e.target.value),
+              }))
+            }
           >
             {RAINBOW_PALETTES.map((p, idx) => {
               // 根据当前分段数生成该方案的预览颜色
@@ -1040,13 +1055,15 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
   const getSizeSetting = () => {
     let colors: string[] = [];
     if (styleConfig.colorType === "single") {
-      const color = SINGLE_COLOR_PALETTES[singlePaletteIndex].color;
+      const color = SINGLE_COLOR_PALETTES[styleConfig.singlePaletteIndex].color;
       colors = [color, color];
     } else if (styleConfig.colorType === "gradient") {
-      const { start, end } = GRADIENT_PALETTES[gradientPaletteIndex];
+      const { start, end } =
+        GRADIENT_PALETTES[styleConfig.gradientPaletteIndex];
       colors = [start, end];
     } else if (styleConfig.colorType === "rainbow") {
-      const rainbowColors = RAINBOW_PALETTES[rainbowPaletteIndex].colors;
+      const rainbowColors =
+        RAINBOW_PALETTES[styleConfig.rainbowPaletteIndex].colors;
       colors = [rainbowColors[0], rainbowColors[rainbowColors.length - 1]];
     }
 
diff --git a/src/app/OlMap/Controls/Toolbar.tsx b/src/app/OlMap/Controls/Toolbar.tsx
index ff935f5..25c0a66 100644
--- a/src/app/OlMap/Controls/Toolbar.tsx
+++ b/src/app/OlMap/Controls/Toolbar.tsx
@@ -15,47 +15,12 @@ import { FeatureLike } from "ol/Feature";
 import Feature from "ol/Feature";
 import StyleEditorPanel from "./StyleEditorPanel";
 import StyleLegend from "./StyleLegend"; // 引入图例组件
-
 import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
 
 import { config } from "@/config/config";
 const backendUrl = config.BACKEND_URL;
 
-// 图层样式状态接口
-interface StyleConfig {
-  property: string;
-  classificationMethod: string;
-  segments: number;
-  minSize: number;
-  maxSize: number;
-  minStrokeWidth: number;
-  maxStrokeWidth: number;
-  fixedStrokeWidth: number;
-  colorType: string;
-  startColor: string;
-  endColor: string;
-  showLabels: boolean;
-  opacity: number;
-  adjustWidthByProperty: boolean;
-}
-
-interface LegendStyleConfig {
-  layerId: string;
-  layerName: string;
-  property: string;
-  colors: string[];
-  type: string;
-  dimensions: number[];
-  breaks: number[];
-}
-
-interface LayerStyleState {
-  layerId: string;
-  layerName: string;
-  styleConfig: StyleConfig;
-  legendConfig: LegendStyleConfig;
-  isActive: boolean;
-}
+import { LayerStyleState } from "./StyleEditorPanel";
 
 // 添加接口定义隐藏按钮的props
 interface ToolbarProps {
@@ -93,8 +58,9 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
         maxStrokeWidth: 8,
         fixedStrokeWidth: 3,
         colorType: "gradient",
-        startColor: "rgba(51, 153, 204, 0.9)",
-        endColor: "rgba(204, 51, 51, 0.9)",
+        singlePaletteIndex: 0,
+        gradientPaletteIndex: 0,
+        rainbowPaletteIndex: 0,
         showLabels: false,
         opacity: 0.9,
         adjustWidthByProperty: true,
@@ -123,8 +89,9 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
         maxStrokeWidth: 8,
         fixedStrokeWidth: 3,
         colorType: "gradient",
-        startColor: "rgba(51, 153, 204, 0.9)",
-        endColor: "rgba(204, 51, 51, 0.9)",
+        singlePaletteIndex: 0,
+        gradientPaletteIndex: 0,
+        rainbowPaletteIndex: 0,
         showLabels: false,
         opacity: 0.9,
         adjustWidthByProperty: true,
@@ -149,7 +116,10 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
       layerName: state.layerName,
       layerId: state.layerId,
     }));
-
+  useEffect(() => {
+    console.log(layerStyleStates);
+    console.log("Active Legends:", activeLegendConfigs);
+  }, [layerStyleStates]);
   // 创建高亮图层
   useEffect(() => {
     if (!map) return;