diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts
index b3eeea4b..201d21d3 100644
--- a/src/hooks/useProcessor.ts
+++ b/src/hooks/useProcessor.ts
@@ -28,6 +28,9 @@ export function useQueryProcessor(config: any) {
   if (!(config.metrics && config.metrics[0])) {
     return;
   }
+  if (!(config.metricTypes && config.metricTypes[0])) {
+    return;
+  }
   const appStore = useAppStoreWithOut();
   const dashboardStore = useDashboardStore();
   const selectorStore = useSelectorStore();
@@ -221,6 +224,12 @@ export function useQueryPodsMetrics(
   config: { metrics: string[]; metricTypes: string[] },
   scope: string
 ) {
+  if (!(config.metrics && config.metrics[0])) {
+    return;
+  }
+  if (!(config.metricTypes && config.metricTypes[0])) {
+    return;
+  }
   const appStore = useAppStoreWithOut();
   const selectorStore = useSelectorStore();
   const conditions: { [key: string]: unknown } = {
diff --git a/src/store/data.ts b/src/store/data.ts
index eba3c3bb..d6d3e01e 100644
--- a/src/store/data.ts
+++ b/src/store/data.ts
@@ -21,14 +21,6 @@ export const NewControl = {
   h: 12,
   i: "0",
   type: "Widget",
-  widget: {
-    title: "",
-  },
-  graph: {},
-  standard: {},
-  metrics: [""],
-  metricTypes: [""],
-  metricConfig: [],
 };
 export const TextConfig = {
   fontColor: "white",
diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts
index fc56a4d1..d06213be 100644
--- a/src/types/dashboard.ts
+++ b/src/types/dashboard.ts
@@ -28,13 +28,12 @@ export interface LayoutConfig {
   w: number;
   h: number;
   i: string;
-  widget: WidgetConfig;
-  graph: GraphConfig;
-  standard: StandardConfig;
-  metrics: string[];
+  widget?: WidgetConfig;
+  graph?: GraphConfig;
+  metrics?: string[];
   type: string;
-  metricTypes: string[];
-  children?: any;
+  metricTypes?: string[];
+  children?: { name: string; children: LayoutConfig[] }[];
   activedTabIndex?: number;
   metricConfig?: MetricConfigOpt[];
 }
@@ -53,20 +52,6 @@ export interface WidgetConfig {
   tips?: string;
 }
 
-export interface StandardConfig {
-  sortOrder?: string;
-  unit?: string;
-  labelsIndex?: string;
-  metricLabels?: string;
-  plus?: string;
-  minus?: string;
-  multiply?: string;
-  divide?: string;
-  milliseconds?: string;
-  seconds?: string;
-  maxItemNum?: number;
-}
-
 export type GraphConfig =
   | BarConfig
   | LineConfig
diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index 13239a6e..6e60c63c 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -16,20 +16,20 @@ limitations under the License. -->
   <div class="widget-config flex-v">
     <div class="graph" v-loading="loading">
       <div class="header">
-        <span>{{ dashboardStore.selectedGrid.widget.title || "" }}</span>
-        <div class="tips" v-show="dashboardStore.selectedGrid.widget.tips">
-          <el-tooltip :content="dashboardStore.selectedGrid.widget.tips || ''">
+        <span>{{ widget.title || "" }}</span>
+        <div class="tips" v-show="widget.tips">
+          <el-tooltip :content="widget.tips || ''">
             <Icon iconName="info_outline" size="sm" />
           </el-tooltip>
         </div>
       </div>
       <div class="render-chart">
         <component
-          :is="dashboardStore.selectedGrid.graph.type"
+          :is="graph.type"
           :intervalTime="appStoreWithOut.intervalTime"
           :data="states.source"
           :config="{
-            ...dashboardStore.selectedGrid.graph,
+            ...graph,
             i: dashboardStore.selectedGrid.i,
             metrics: dashboardStore.selectedGrid.metrics,
             metricTypes: dashboardStore.selectedGrid.metricTypes,
@@ -38,7 +38,7 @@ limitations under the License. -->
           :isEdit="isEdit"
           @changeOpt="setStatus"
         />
-        <div v-show="!dashboardStore.selectedGrid.graph.type" class="no-data">
+        <div v-show="!graph.type" class="no-data">
           {{ t("noData") }}
         </div>
       </div>
@@ -56,7 +56,7 @@ limitations under the License. -->
           />
         </el-collapse-item>
         <el-collapse-item :title="t('graphStyles')" name="2">
-          <component :is="`${dashboardStore.selectedGrid.graph.type}Config`" />
+          <component :is="`${graph.type}Config`" />
         </el-collapse-item>
         <el-collapse-item :title="t('widgetOptions')" name="3">
           <WidgetOptions />
@@ -74,7 +74,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-import { reactive, defineComponent, ref } from "vue";
+import { reactive, defineComponent, ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
@@ -111,6 +111,8 @@ export default defineComponent({
       visType: [],
     });
     const originConfig = dashboardStore.selectedGrid;
+    const widget = computed(() => dashboardStore.selectedGrid.widget || {});
+    const graph = computed(() => dashboardStore.selectedGrid.graph || {});
 
     function getSource(source: unknown) {
       states.source = source;
@@ -148,6 +150,8 @@ export default defineComponent({
       setLoading,
       setStatus,
       isEdit,
+      widget,
+      graph,
     };
   },
 });
diff --git a/src/views/dashboard/configuration/widget/WidgetOptions.vue b/src/views/dashboard/configuration/widget/WidgetOptions.vue
index 0d38ffe2..b9d707ed 100644
--- a/src/views/dashboard/configuration/widget/WidgetOptions.vue
+++ b/src/views/dashboard/configuration/widget/WidgetOptions.vue
@@ -42,12 +42,13 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const { selectedGrid } = dashboardStore;
-const title = ref<string>(selectedGrid.widget.title || "");
-const tips = ref<string>(selectedGrid.widget.tips || "");
+const widget = dashboardStore.selectedGrid.widget || {};
+const title = ref<string>(widget.title || "");
+const tips = ref<string>(widget.tips || "");
 
 function updateWidgetConfig(param: { [key: string]: unknown }) {
   const widget = {
-    ...selectedGrid.widget,
+    ...dashboardStore.selectedGrid.widget,
     ...param,
   };
   dashboardStore.selectWidget({ ...selectedGrid, widget });
diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue
index adad7438..e84e7f42 100644
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/src/views/dashboard/configuration/widget/metric/Index.vue
@@ -43,9 +43,7 @@ limitations under the License. -->
       :value="states.metricTypes[index]"
       :options="states.metricTypeList[index]"
       size="small"
-      :disabled="
-        dashboardStore.selectedGrid.graph.type && !states.isList && index !== 0
-      "
+      :disabled="graph.type && !states.isList && index !== 0"
       @change="changeMetricType(index, $event)"
       class="selectors"
     />
@@ -85,11 +83,11 @@ limitations under the License. -->
   <div>{{ t("visualization") }}</div>
   <div class="chart-types">
     <span
-      v-for="(type, index) in states.visTypes"
+      v-for="(type, index) in setVisTypes"
       :key="index"
       @click="changeChartType(type)"
       :class="{
-        active: type.value === dashboardStore.selectedGrid.graph.type,
+        active: type.value === graph.type,
       }"
     >
       {{ type.label }}
@@ -97,7 +95,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive, ref } from "vue";
+import { reactive, ref, computed } from "vue";
 import { Option } from "@/types/app";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import {
@@ -124,24 +122,26 @@ import Standard from "./Standard.vue";
 const { t } = useI18n();
 const emit = defineEmits(["update", "loading", "changeOpt"]);
 const dashboardStore = useDashboardStore();
-const { metrics, metricTypes, graph } = dashboardStore.selectedGrid;
+const metrics = computed(() => dashboardStore.selectedGrid.metrics || []);
+const graph = computed(() => dashboardStore.selectedGrid.graph || {});
+const metricTypes = computed(
+  () => dashboardStore.selectedGrid.metricTypes || []
+);
 const states = reactive<{
   metrics: string[];
   metricTypes: string[];
   metricTypeList: Option[][];
-  visTypes: Option[];
   isList: boolean;
   metricList: (Option & { type: string })[];
   dashboardName: string;
   dashboardList: ((DashboardItem & { label: string; value: string }) | any)[];
 }>({
-  metrics: metrics && metrics.length ? metrics : [""],
-  metricTypes: metricTypes && metricTypes.length ? metricTypes : [""],
+  metrics: metrics.value.length ? metrics.value : [""],
+  metricTypes: metricTypes.value.length ? metricTypes.value : [""],
   metricTypeList: [],
-  visTypes: [],
   isList: false,
   metricList: [],
-  dashboardName: graph.dashboardName,
+  dashboardName: graph.value.dashboardName,
   dashboardList: [{ label: "", value: "" }],
 });
 const currentMetricConfig = ref<MetricConfigOpt>({
@@ -152,15 +152,33 @@ const currentMetricConfig = ref<MetricConfigOpt>({
   sortOrder: "DES",
 });
 
-states.isList = ListChartTypes.includes(graph.type);
+states.isList = ListChartTypes.includes(graph.value.type);
 const defaultLen = ref<number>(states.isList ? 5 : 20);
-states.visTypes = setVisTypes();
-
 setDashboards();
 setMetricType();
 
+const setVisTypes = computed(() => {
+  let graphs = [];
+  if (dashboardStore.entity === EntityType[0].value) {
+    graphs = ChartTypes.filter(
+      (d: Option) =>
+        ![ChartTypes[7].value, ChartTypes[8].value].includes(d.value)
+    );
+  } else if (dashboardStore.entity === EntityType[1].value) {
+    graphs = ChartTypes.filter(
+      (d: Option) => !PodsChartTypes.includes(d.value)
+    );
+  } else {
+    graphs = ChartTypes.filter(
+      (d: Option) => !ListChartTypes.includes(d.value)
+    );
+  }
+
+  return graphs;
+});
+
 async function setMetricType(chart?: any) {
-  const graph = chart || dashboardStore.selectedGrid.graph;
+  const g = chart || dashboardStore.selectedGrid.graph || {};
   const json = await dashboardStore.fetchMetricList();
   if (json.errors) {
     ElMessage.error(json.errors);
@@ -172,7 +190,7 @@ async function setMetricType(chart?: any) {
         if (d.type === MetricsType.REGULAR_VALUE) {
           return d;
         }
-      } else if (graph.type === "Table") {
+      } else if (g.type === "Table") {
         if (
           d.type === MetricsType.LABELED_VALUE ||
           d.type === MetricsType.REGULAR_VALUE
@@ -203,7 +221,7 @@ async function setMetricType(chart?: any) {
     ...dashboardStore.selectedGrid,
     metrics: states.metrics,
     metricTypes: states.metricTypes,
-    graph,
+    graph: g,
   });
   states.metricTypeList = [];
   for (const metric of metrics) {
@@ -220,7 +238,7 @@ async function setMetricType(chart?: any) {
 }
 
 function setDashboards(type?: string) {
-  const graph = type || dashboardStore.selectedGrid.graph;
+  const chart = type || dashboardStore.selectedGrid.graph || {};
   const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
   const arr = list.reduce(
     (
@@ -229,9 +247,9 @@ function setDashboards(type?: string) {
     ) => {
       if (d.layer === dashboardStore.layerId) {
         if (
-          (d.entity === EntityType[0].value && graph.type === "ServiceList") ||
-          (d.entity === EntityType[2].value && graph.type === "EndpointList") ||
-          (d.entity === EntityType[3].value && graph.type === "InstanceList")
+          (d.entity === EntityType[0].value && chart.type === "ServiceList") ||
+          (d.entity === EntityType[2].value && chart.type === "EndpointList") ||
+          (d.entity === EntityType[3].value && chart.type === "InstanceList")
         ) {
           prev.push({
             ...d,
@@ -248,26 +266,9 @@ function setDashboards(type?: string) {
   states.dashboardList = arr.length ? arr : [{ label: "", value: "" }];
 }
 
-function setVisTypes() {
-  let graphs = [];
-  if (dashboardStore.entity === EntityType[0].value) {
-    graphs = ChartTypes.filter((d: Option) => d.value !== ChartTypes[7].value);
-  } else if (dashboardStore.entity === EntityType[1].value) {
-    graphs = ChartTypes.filter(
-      (d: Option) => !PodsChartTypes.includes(d.value)
-    );
-  } else {
-    graphs = ChartTypes.filter(
-      (d: Option) => !ListChartTypes.includes(d.value)
-    );
-  }
-
-  return graphs;
-}
-
 function changeChartType(item: Option) {
-  const graph = DefaultGraphConfig[item.value];
-  states.isList = ListChartTypes.includes(graph.type);
+  const chart = DefaultGraphConfig[item.value] || {};
+  states.isList = ListChartTypes.includes(chart.type);
   if (states.isList) {
     dashboardStore.selectWidget({
       ...dashboardStore.selectedGrid,
@@ -278,8 +279,8 @@ function changeChartType(item: Option) {
     states.metricTypes = [""];
     defaultLen.value = 5;
   }
-  setMetricType(graph);
-  setDashboards(graph.type);
+  setMetricType(chart);
+  setDashboards(chart.type);
   states.dashboardName = "";
   defaultLen.value = 10;
 }
@@ -415,7 +416,7 @@ function setMetricTypeList(type: string) {
   if (type !== MetricsType.REGULAR_VALUE) {
     return MetricTypes[type];
   }
-  if (states.isList || dashboardStore.selectedGrid.graph.type === "Table") {
+  if (states.isList || graph.value.type === "Table") {
     return [
       { label: "read all values in the duration", value: "readMetricsValues" },
       {
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index 511f59c9..24c54175 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -17,17 +17,17 @@ limitations under the License. -->
     <div class="header flex-h">
       <div>
         <span>
-          {{ data.widget?.title || "" }}
+          {{ widget.title || "" }}
         </span>
       </div>
       <div>
-        <el-tooltip :content="data.widget?.tips">
+        <el-tooltip :content="widget.tips || ''">
           <span>
             <Icon
               iconName="info_outline"
               size="sm"
               class="operation"
-              v-show="data.widget?.tips"
+              v-show="widget.tips"
             />
           </span>
         </el-tooltip>
@@ -51,15 +51,15 @@ limitations under the License. -->
         </el-popover>
       </div>
     </div>
-    <div class="body" v-if="data.graph?.type" v-loading="loading">
+    <div class="body" v-if="graph.type" v-loading="loading">
       <component
-        :is="data.graph.type"
+        :is="graph.type"
         :intervalTime="appStore.intervalTime"
         :data="state.source"
         :config="{
           ...data.graph,
-          metrics: data.metrics,
-          metricTypes: data.metricTypes,
+          metrics: data.metrics || [''],
+          metricTypes: data.metricTypes || [''],
           i: data.i,
           metricConfig: data.metricConfig,
         }"
@@ -70,7 +70,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-import { toRefs, reactive, defineComponent, ref, watch } from "vue";
+import { toRefs, reactive, defineComponent, ref, watch, computed } from "vue";
 import type { PropType } from "vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -88,7 +88,7 @@ import { EntityType, ListChartTypes } from "../data";
 const props = {
   data: {
     type: Object as PropType<LayoutConfig>,
-    default: () => ({ widget: {} }),
+    default: () => ({ widget: {}, graph: {} }),
   },
   activeIndex: { type: String, default: "" },
   needQuery: { type: Boolean, default: false },
@@ -107,14 +107,19 @@ export default defineComponent({
     const appStore = useAppStoreWithOut();
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
-    const isList = ListChartTypes.includes(props.data.graph.type || "");
+    const graph = computed(() => props.data.graph || {});
+    const widget = computed(() => props.data.widget || {});
+    const isList = ListChartTypes.includes(
+      (props.data.graph && props.data.graph.type) || ""
+    );
 
     if ((props.needQuery || !dashboardStore.currentDashboard.id) && !isList) {
       queryMetrics();
     }
 
     async function queryMetrics() {
-      const { metricTypes, metrics } = props.data;
+      const metricTypes = props.data.metricTypes || [];
+      const metrics = props.data.metrics || [];
       const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
       const params = await useQueryProcessor({ ...props.data, catalog });
 
@@ -129,8 +134,8 @@ export default defineComponent({
         return;
       }
       const d = {
-        metrics: props.data.metrics,
-        metricTypes: props.data.metricTypes,
+        metrics: props.data.metrics || [],
+        metricTypes: props.data.metricTypes || [],
         metricConfig: props.data.metricConfig || [],
       };
       state.source = useSourceProcessor(json, d);
@@ -149,7 +154,7 @@ export default defineComponent({
       }
     }
     watch(
-      () => [props.data.metricTypes, props.data.metrics, props.data.standard],
+      () => [props.data.metricTypes, props.data.metrics],
       () => {
         if (!dashboardStore.selectedGrid) {
           return;
@@ -157,7 +162,9 @@ export default defineComponent({
         if (props.data.i !== dashboardStore.selectedGrid.i) {
           return;
         }
-        const isList = ListChartTypes.includes(props.data.graph.type || "");
+        const isList = ListChartTypes.includes(
+          (props.data.graph && props.data.graph.type) || ""
+        );
         if (
           ListChartTypes.includes(dashboardStore.selectedGrid.graph.type) ||
           isList
@@ -170,7 +177,9 @@ export default defineComponent({
     watch(
       () => [selectorStore.currentService, selectorStore.currentDestService],
       () => {
-        const isList = ListChartTypes.includes(props.data.graph.type || "");
+        const isList = ListChartTypes.includes(
+          (props.data.graph && props.data.graph.type) || ""
+        );
         if (isList) {
           return;
         }
@@ -209,6 +218,8 @@ export default defineComponent({
       loading,
       dashboardStore,
       t,
+      graph,
+      widget,
     };
   },
 });
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 4639eebe..91011379 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -96,7 +96,13 @@ const props = defineProps({
         metricTypes: string[];
       } & { metricConfig: MetricConfigOpt[] }
     >,
-    default: () => ({ dashboardName: "", fontSize: 12, i: "" }),
+    default: () => ({
+      metrics: [],
+      metricTypes: [],
+      dashboardName: "",
+      fontSize: 12,
+      i: "",
+    }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
   isEdit: { type: Boolean, default: false },
@@ -128,9 +134,9 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) {
   if (!currentPods.length) {
     return;
   }
-  const metrics = props.config.metrics.filter((d: string) => d);
-
-  if (metrics.length && metrics[0]) {
+  const metrics = (props.config.metrics || []).filter((d: string) => d);
+  const metricTypes = props.config.metricTypes || [];
+  if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
     const params = await useQueryPodsMetrics(
       currentPods,
       props.config,
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index ff608a63..65d76baf 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -166,9 +166,9 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
   if (!currentInstances.length) {
     return;
   }
-  const { metrics } = props.config;
+  const { metrics, metricTypes } = props.config;
 
-  if (metrics.length && metrics[0]) {
+  if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
     const params = await useQueryPodsMetrics(
       currentInstances,
       props.config,
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 7bcac745..8be7cd6f 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -210,9 +210,9 @@ async function queryServiceMetrics(currentServices: Service[]) {
   if (!currentServices.length) {
     return;
   }
-  const { metrics } = props.config;
+  const { metrics, metricTypes } = props.config;
 
-  if (metrics.length && metrics[0]) {
+  if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
     const params = await useQueryPodsMetrics(
       currentServices,
       props.config,