fix: update settings

src/store/data.ts

@@ -105,7 +105,7 @@ export const ConfigData3: any = [
   {
     x: 0,
     y: 0,
-    w: 2,
+    w: 4,
     h: 6,
     i: "1",
     type: "Topology",
@@ -122,7 +122,7 @@ export const ConfigData3: any = [
     },
   },
   {
-    x: 2,
+    x: 4,
     y: 0,
     w: 8,
     h: 12,

src/views/dashboard/configuration/Topology.vue

@@ -27,7 +27,7 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
 import WidgetOptions from "./WidgetOptions.vue";
-import TopologyOptions from "./graph-styles/Topology.vue";
+import TopologyOptions from "./graph-styles/TopologyItem.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();

src/views/dashboard/configuration/graph-styles/TopologyItem.vue

@@ -21,7 +21,7 @@ limitations under the License. -->
       size="small"
       placeholder="Select a color"
       class="input"
-      @change="changeConfig({ backgroundColor })"
+      @change="changeConfig({ backgroundColor: $event[0].value })"
     />
   </div>
   <div class="item">
@@ -45,7 +45,7 @@ limitations under the License. -->
       size="small"
       placeholder="Select a color"
       class="input"
-      @change="changeConfig({ fontColor })"
+      @change="changeConfig({ fontColor: $event[0].value })"
     />
   </div>
   <div class="item">
@@ -78,23 +78,23 @@ const { selectedGrid } = dashboardStore;
 const iconTheme = ref(selectedGrid.graph.iconTheme || true);
 const backgroundColor = ref(selectedGrid.graph.backgroundColor || "green");
 const fontColor = ref(selectedGrid.graph.fontColor || "white");
-const content = ref<string>("");
+const content = ref<string>(selectedGrid.graph.content);
 const fontSize = ref<number>(selectedGrid.graph.fontSize);
 const colors = [
   {
     label: "Green",
-    key: "#67C23A",
     value: "green",
   },
-  { label: "Blue", key: "#409EFF", value: "blue" },
-  { label: "Red", key: "#F56C6C", value: "red" },
-  { label: "Grey", key: "#909399", value: "grey" },
-  { label: "White", key: "#fff", value: "white" },
-  { label: "Black", key: "#000", value: "black" },
-  { label: "Orange", key: "#E6A23C", value: "orange" },
+  { label: "Blue", value: "blue" },
+  { label: "Red", value: "red" },
+  { label: "Grey", value: "grey" },
+  { label: "White", value: "white" },
+  { label: "Black", value: "black" },
+  { label: "Orange", value: "orange" },
 ];
 
 function changeConfig(param: { [key: string]: unknown }) {
+  const { selectedGrid } = dashboardStore;
   const graph = {
     ...selectedGrid.graph,
     ...param,

src/views/dashboard/controls/Topology.vue

@@ -15,10 +15,17 @@ limitations under the License. -->
 <template>
   <div class="topology">
     <div class="header flex-h">
-      <div>title</div>
+      <div>{{ data.widget?.title || "" }}</div>
       <div>
-        <el-tooltip :content="'tips'">
-          <Icon iconName="info_outline" size="sm" class="operation" />
+        <el-tooltip :content="data.widget?.tips">
+          <span>
+            <Icon
+              iconName="info_outline"
+              size="sm"
+              class="operation"
+              v-show="data.widget?.tips"
+            />
+          </span>
         </el-tooltip>
         <el-popover placement="bottom" trigger="click" :width="100">
           <template #reference>
@@ -38,7 +45,7 @@ limitations under the License. -->
     <div
       class="body"
       @click="ViewTopology"
-      :style="`background: ${Colors[data.graph.backgroundColor]}`"
+      :style="{ backgroundColor: Colors[data.graph.backgroundColor] }"
     >
       <Icon
         :iconName="data.graph.iconTheme ? 'topology-light' : 'topology-dark'"
@@ -70,6 +77,7 @@ const props = defineProps({
 });
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
+console.log(Colors[props.data.graph.backgroundColor]);
 function editConfig() {
   dashboardStore.setConfigPanel(true);
   dashboardStore.selectWidget(props.data);

src/views/dashboard/controls/Widget.vue

@@ -18,12 +18,14 @@ limitations under the License. -->
       <div>{{ data.widget?.title || "" }}</div>
       <div>
         <el-tooltip :content="data.widget?.tips">
-          <Icon
-            iconName="info_outline"
-            size="sm"
-            class="operation"
-            v-show="data.widget?.tips"
-          />
+          <span>
+            <Icon
+              iconName="info_outline"
+              size="sm"
+              class="operation"
+              v-show="data.widget?.tips"
+            />
+          </span>
         </el-tooltip>
         <el-popover placement="bottom" trigger="click" :width="100">
           <template #reference>