update text

src/locales/lang/en.ts

@@ -126,6 +126,7 @@ const msg = {
   kubernetesCluster: "Cluster",
   kubernetes: "Kubernetes",
   textUrl: "Text Hyperlink",
+  textAlign: "Text Align",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/zh.ts

@@ -126,6 +126,7 @@ const msg = {
   kubernetesCluster: "集群",
   kubernetes: "Kubernetes",
   textUrl: "文本超链接",
+  textAlign: "文本对齐",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/views/dashboard/configuration/Text.vue

@@ -29,6 +29,17 @@ limitations under the License. -->
       @change="changeConfig({ content })"
     />
   </div>
+  <div class="item">
+    <span class="label">{{ t("textAlign") }}</span>
+    <Selector
+      :value="textAlign"
+      :options="AlignStyle"
+      size="small"
+      placeholder="Select a color"
+      class="input"
+      @change="changeConfig({ textAlign: $event[0].value })"
+    />
+  </div>
   <div class="item">
     <span class="label">{{ t("backgroundColors") }}</span>
     <Selector
@@ -85,6 +96,7 @@ const backgroundColor = ref(originConfig.graph.backgroundColor || "green");
 const fontColor = ref(originConfig.graph.fontColor || "white");
 const content = ref<string>(originConfig.graph.content || "");
 const fontSize = ref<number>(originConfig.graph.fontSize || 12);
+const textAlign = ref(originConfig.graph.textAlign || "left");
 const Colors = [
   {
     label: "Green",
@@ -97,6 +109,14 @@ const Colors = [
   { label: "Black", value: "black" },
   { label: "Orange", value: "orange" },
 ];
+const AlignStyle = [
+  {
+    label: "Left",
+    value: "left",
+  },
+  { label: "Center", value: "center" },
+  { label: "Right", value: "right" },
+];
 function changeConfig(param: { [key: string]: unknown }) {
   const { selectedGrid } = dashboardStore;
   const graph = {

src/views/dashboard/controls/Text.vue

@@ -36,18 +36,17 @@ limitations under the License. -->
     </div>
     <div
       class="body"
-      :style="{ backgroundColor: TextColors[data.graph.backgroundColor] }"
+      :class="data.graph.textAlign === 'center' ? 'center' : ''"
+      :style="{
+        backgroundColor: TextColors[data.graph.backgroundColor],
+        color: TextColors[data.graph.fontColor],
+        fontSize: data.graph.fontSize + 'px',
+        textAlign: data.graph.textAlign,
+      }"
     >
-      <div
-        :style="{
-          color: TextColors[data.graph.fontColor],
-          fontSize: data.graph.fontSize + 'px',
-        }"
-      >
-        <a :href="data.graph.url" target="_blank">
-          {{ data.graph.content }}
-        </a>
-      </div>
+      <a :href="data.graph.url" target="_blank">
+        {{ data.graph.content }}
+      </a>
     </div>
   </div>
 </template>
@@ -75,14 +74,6 @@ function editConfig() {
   dashboardStore.setConfigPanel(true);
   dashboardStore.selectWidget(props.data);
 }
-function viewText() {
-  const path = props.data.graph.url;
-  console.log(path);
-  if (!path) {
-    return;
-  }
-  window.open(path, "_blank");
-}
 </script>
 <style lang="scss" scoped>
 .topology {
@@ -97,21 +88,21 @@ function viewText() {
 
 .header {
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 5px;
+  right: 5px;
 }
 
 .body {
   text-align: center;
   width: 100%;
   height: 100%;
+  line-height: 100%;
   cursor: pointer;
-  box-sizing: border-box;
-  color: #333;
-  display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
-  -webkit-box-align: center;
+  box-sizing: border-box;
+  display: -webkit-box;
+  // -webkit-box-align: left;
 }
 
 .tools {