diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
index b6f553cd..0e28b64f 100644
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
+++ b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
@@ -2,19 +2,24 @@ import { ThemeEnum } from '@/enums/styleEnum'
 
 export interface ChartLayoutType {
   // 图层控制
-  layers: true,
+  layers: boolean,
   // 图表组件
-  charts: true,
+  charts: boolean,
   // 详情设置
-  details: true,
+  details: boolean,
   // 对齐线
-  alignLine: true,
+  alignLine: boolean,
   // 滤镜
   filter: {
     // 色相
+    hueRotate: number,
     // 饱和度
+    saturate: number,
     // 亮度
+    brightness: number,
     // 对比度
+    contrast: number,
     // 不透明度
+    unOpacity: number
   }
 }
diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
new file mode 100644
index 00000000..130dfd30
--- /dev/null
+++ b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia'
+import { store } from '@/store'
+import { ChartLayoutType } from './chartLayoutStore.d'
+
+export const useChartLayoutStore = defineStore({
+  id: 'useChartLayoutStore',
+  state: (): ChartLayoutType => ({
+    // 图层控制
+    layers: true,
+    // 图表组件
+    charts: true,
+    // 详情设置
+    details: true,
+    // 对齐线
+    alignLine: true,
+    // 滤镜
+    filter: {
+      // 色相
+      hueRotate: 0,
+      // 饱和度
+      saturate: 0,
+      // 亮度
+      brightness: 100,
+      // 对比度
+      contrast: 100,
+      // 不透明度
+      unOpacity: 100
+    }
+  }),
+  getters: {
+    getLayers(e): boolean {
+      return this.layers
+    },
+    getCharts(): boolean {
+      return this.charts
+    },
+    getDetails(): boolean {
+      return this.details
+    },
+    getAlignLine(): boolean {
+      return this.alignLine
+    },
+    getFilter(): object {
+      return this.filter
+    }
+  }
+})
+
+
+export function useChartLayoutSettingWithOut() {
+  return useChartLayoutStore(store)
+}
\ No newline at end of file
diff --git a/src/store/types.ts b/src/store/types.ts
index bc8f814b..1a38eb23 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -1,7 +1,9 @@
 import { DesignStateType } from '@/store/modules/designStore/designStore.d';
 import { LangStateType } from '@/store/modules/langStore/langStore.d';
+import { ChartLayoutType } from '@/store/modules/chartLayoutStore/chartLayoutStore.d';
 
 export interface allStore {
   useDesignStore: DesignStateType;
   useLangStore: LangStateType;
+  useChartLayoutStore: ChartLayoutType;
 }
diff --git a/src/views/chart/index.vue b/src/views/chart/index.vue
index 37a720bc..e4eb150b 100644
--- a/src/views/chart/index.vue
+++ b/src/views/chart/index.vue
@@ -12,7 +12,9 @@
           <HeaderRightBtn />
         </template>
       </HeaderPro>
-      <n-layout-content> </n-layout-content>
+      <n-layout-content>
+        <n-space></n-space>
+      </n-layout-content>
     </n-layout>
   </div>
 </template>