🔱: [client] sync upgrade with 12 commits [trident-sync]

refactor: 1.11.0
refactor: 1.11.0
refactor: 1.11.0
refactor: 1.11.0
refactor: ts化
refactor: ts化
feat: 全面TS化
perf: 全面ts化
refactor: 继续优化ts
perf: ts定义优化
fix: 修复wangeditor无法上传视频的bug

packages/ui/certd-client/src/components/highlight/index.vue

@@ -1,15 +1,18 @@
 <template>
-  <pre class="fs-highlight hljs" v-html="highlightHTML"></pre>
+  <pre class="fs-highlight hljs" v-html="highlightHTMLRef"></pre>
 </template>
 
-<script>
+<script lang="ts">
 // 相关文档
 // https://highlightjs.org/usage/
 // http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
 import highlight from "highlight.js";
+import { ref, watch } from "vue";
+import { defineComponent, Ref } from "vue";
 import "../highlight-styles/github-gist.css";
-import htmlFormat from "./libs/htmlFormat";
-export default {
+//@ts-ignore
+import htmlFormat from "./libs/htmlFormat.js";
+export default defineComponent({
   name: "FsHighlight",
   props: {
     code: {
@@ -28,34 +31,31 @@ export default {
       default: ""
     }
   },
-  data() {
+  setup(props: any, ctx: any) {
+    const highlightHTMLRef: Ref = ref("");
+
+    watch(
+      () => {
+        return props.code;
+      },
+      () => {
+        doHighlight();
+      },
+      {
+        immediate: true
+      }
+    );
+
+    function doHighlight() {
+      const code = props.formatHtml ? htmlFormat(props.code) : props.code;
+      highlightHTMLRef.value = (highlight as any).highlightAuto(code, [props.lang, "html", "javascript", "json", "css", "scss", "less"]).value;
+    }
     return {
-      highlightHTML: ""
+      highlightHTMLRef,
+      doHighlight
     };
-  },
-  watch: {
-    code() {
-      this.highlight();
-    }
-  },
-  mounted() {
-    this.highlight();
-  },
-  methods: {
-    highlight() {
-      const code = this.formatHtml ? htmlFormat(this.code) : this.code;
-      this.highlightHTML = highlight.highlightAuto(code, [
-        this.lang,
-        "html",
-        "javascript",
-        "json",
-        "css",
-        "scss",
-        "less"
-      ]).value;
-    }
   }
-};
+});
 </script>
 
 <style lang="less">

packages/ui/certd-client/src/components/index.ts

@@ -1,7 +1,7 @@
 import { defineAsyncComponent } from "vue";
 const AsyncHighLight = defineAsyncComponent(() => import("./highlight/index.vue"));
 export default {
-  install(app) {
+  install(app: any) {
     app.component("FsHighlight", AsyncHighLight);
   }
 };