Merge pull request #10803 from dataease/pr@dev_st

fix(仪表板): 备注对齐方式失效

core/frontend/src/views/chart/view/TitleRemark.vue

@@ -1,7 +1,5 @@
 <template>
-  <span
-    style="display: inline-block;"
-  >
+  <span style="display: inline-block">
     <el-popover
       placement="bottom"
       trigger="hover"
@@ -11,37 +9,66 @@
     >
       <div
         class="remark-style"
-        :style="{backgroundColor:remarkCfg.bgFill}"
-        v-html="$xss(remarkCfg.content)"
+        :style="{ backgroundColor: remarkCfg.bgFill }"
+        v-html="xssRemarkCfgContent"
       />
       <i
         slot="reference"
         class="el-icon-info"
-        style="cursor: pointer;color: gray;font-size: 12px;position: relative;
-    z-index: 10;"
+        style="
+          cursor: pointer;
+          color: gray;
+          font-size: 12px;
+          position: relative;
+          z-index: 10;
+        "
       />
     </el-popover>
   </span>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from "vuex";
+import xss from "xss";
 export default {
-  name: 'TitleRemark',
+  name: "TitleRemark",
   props: {
     remarkCfg: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   computed: {
-    ...mapState(['previewVisible'])
-  }
-}
+    ...mapState(["previewVisible"]),
+    xssRemarkCfgContent() {
+      const myXss = new xss.FilterXSS({
+        css: {
+          whiteList: {
+            "background-color": true,
+            "text-align": true,
+            color: true,
+            "margin-top": true,
+            "margin-bottom": true,
+            "line-height": true,
+            "box-sizing": true,
+            "padding-top": true,
+            "padding-bottom": true,
+          },
+        },
+        whiteList: {
+          ...xss.whiteList,
+          p: ["style"],
+          span: ["style"],
+        },
+      });
+      return myXss.process(this.remarkCfg.content);
+    },
+  },
+};
 </script>
 
 <style scoped>
-.remark-style{
+.remark-style {
   position: relative;
   z-index: 10;
   min-height: 100px;
@@ -52,29 +79,29 @@ export default {
   border-radius: 4px;
 }
 ::-webkit-scrollbar {
-  width: 0px!important;
-  height: 0px!important;
+  width: 0px !important;
+  height: 0px !important;
 }
 ::v-deep ol {
-  display: block!important;
+  display: block !important;
   list-style-type: decimal;
-  margin-block-start: 1em!important;
-  margin-block-end: 1em!important;
-  margin-inline-start: 0px!important;
-  margin-inline-end: 0px!important;
-  padding-inline-start: 40px!important;
+  margin-block-start: 1em !important;
+  margin-block-end: 1em !important;
+  margin-inline-start: 0px !important;
+  margin-inline-end: 0px !important;
+  padding-inline-start: 40px !important;
 }
 ::v-deep ul {
-  display: block!important;
+  display: block !important;
   list-style-type: disc;
-  margin-block-start: 1em!important;
-  margin-block-end: 1em!important;
-  margin-inline-start: 0px!important;
-  margin-inline-end: 0px!important;
-  padding-inline-start: 40px!important;
+  margin-block-start: 1em !important;
+  margin-block-end: 1em !important;
+  margin-inline-start: 0px !important;
+  margin-inline-end: 0px !important;
+  padding-inline-start: 40px !important;
 }
 ::v-deep li {
-  display: list-item!important;
-  text-align: -webkit-match-parent!important;
+  display: list-item !important;
+  text-align: -webkit-match-parent !important;
 }
 </style>