add decorations

src/locales/lang/en.ts

@@ -386,5 +386,6 @@ const msg = {
   tabExpressions: "Tab Expressions",
   hierarchyNodeMetrics: "Metrics for Hierarchy Graph Node",
   hierarchyNodeDashboard: "As dashboard for Hierarchy Graph Node",
+  contentDecorations: "Content Decorations",
 };
 export default msg;

src/locales/lang/es.ts

@@ -386,5 +386,6 @@ const msg = {
   tabExpressions: "Tab Expressions",
   hierarchyNodeMetrics: "Metrics for Hierarchy Graph Node",
   hierarchyNodeDashboard: "As dashboard for Hierarchy Graph Node",
+  contentDecorations: "Content Decorations",
 };
 export default msg;

src/locales/lang/zh.ts

@@ -384,5 +384,6 @@ const msg = {
   tabExpressions: "Tab表达式",
   hierarchyNodeMetrics: "层次图节点的指标",
   hierarchyNodeDashboard: "作为层次图节点的dashboard",
+  contentDecorations: "内容装饰",
 };
 export default msg;

src/views/dashboard/configuration/widget/graph-styles/Card.vue

@@ -13,6 +13,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
+  <div>
+    <span class="label">{{ t("contentDecorations") }}</span>
+    <content-decorations />
+  </div>
   <div>
     <span class="label">{{ t("fontSize") }}</span>
     <el-slider
@@ -26,7 +30,7 @@ limitations under the License. -->
       @change="updateConfig({ fontSize })"
     />
   </div>
-  <div class="item">
+  <div>
     <span class="label">{{ t("showUnit") }}</span>
     <el-switch v-model="showUnit" active-text="Yes" inactive-text="No" @change="updateConfig({ showUnit })" />
   </div>
@@ -35,6 +39,7 @@ limitations under the License. -->
   import { ref } from "vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
+  import ContentDecorations from "./components/ContentDecorations.vue";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();

src/views/dashboard/configuration/widget/graph-styles/components/ContentDecorations.vue

@@ -0,0 +1,82 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div v-for="(key, index) in Object.keys(decorations)" :key="index" class="mb-10 flex-h">
+    <div class="content-decoration" contenteditable="true" @blur="changeKeys($event, index)">
+      {{ key }}
+    </div>
+    <div>: </div>
+    <div class="content-decoration" contenteditable="true" @blur="changeValues($event, index)">
+      {{ decorations[key] }}
+    </div>
+    <div>
+      <Icon
+        class="cp mr-5"
+        v-if="index === Object.keys(decorations).length - 1"
+        iconName="add_circle_outlinecontrol_point"
+        size="middle"
+        @click="addDecoration"
+      />
+      <Icon class="cp" iconName="remove_circle_outline" size="middle" @click="deleteDecoration(index)" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from "vue";
+  import { useDashboardStore } from "@/store/modules/dashboard";
+
+  const dashboardStore = useDashboardStore();
+  const graph = dashboardStore.selectedGrid.graph || {};
+  const decorations = ref<{ [key: string]: string }>(graph.contentDecorations || { value: "content" });
+
+  function changeKeys(event: any) {
+    console.log(event);
+    // decorations.value[]
+  }
+
+  function addDecoration() {
+    decorations.value = {
+      ...decorations.value,
+      value: "content",
+    };
+  }
+
+  function deleteDecoration(index: number) {
+    const keys = Object.keys(decorations.value);
+    if (!keys.length) {
+      return;
+    }
+    if (!keys[index]) {
+      return;
+    }
+    delete decorations.value[keys[index]];
+  }
+</script>
+<style lang="scss" scoped>
+  .content-decoration {
+    width: 200px;
+    border: 1px solid $border-color;
+    cursor: text;
+    padding: 0 5px;
+    border-radius: 3px;
+    outline: none;
+    margin-right: 5px;
+    min-height: 26px;
+
+    &:focus {
+      border-color: $active-color;
+    }
+  }
+</style>