refactor: convert components to setup syntax

Author: YangFong

src/components/CodemirrorEditor/AboutDialog.vue

@@ -1,25 +1,23 @@
-<script>
-export default {
-  props: {
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: [`close`],
-  methods: {
-    onRedirect(url) {
-      window.open(url)
-    },
+<script setup>
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
   },
+})
+
+defineEmits([`close`])
+
+function onRedirect(url) {
+  window.open(url)
 }
 </script>
 
 <template>
   <el-dialog
     title="关于"
     class="about__dialog"
-    :model-value="visible"
+    :model-value="props.visible"
     width="30%"
     center
     @close="$emit('close')"

src/components/CodemirrorEditor/CssEditor.vue

@@ -1,18 +1,15 @@
-<script>
-export default {
-  name: `CssEditor`,
-  props: {
-    showCssEditor: {
-      type: Boolean,
-      default: false,
-    },
+<script setup>
+const props = defineProps({
+  showCssEditor: {
+    type: Boolean,
+    default: false,
   },
-}
+})
 </script>
 
 <template>
   <transition enter-active-class="bounceInRight">
-    <el-col v-show="showCssEditor" :span="8" class="cssEditor-wrapper h-full">
+    <el-col v-show="props.showCssEditor" :span="8" class="cssEditor-wrapper h-full">
       <textarea
         id="cssEditor"
         type="textarea"

src/components/RunLoading.vue

@@ -1,25 +1,16 @@
-<script>
-import { mapState } from 'pinia'
+<script setup>
+import { onMounted, ref } from 'vue'
 import { useStore } from '@/stores'
 
-export default {
-  name: `RunLoading`,
-  data() {
-    return {
-      loading: true,
-    }
-  },
-  computed: {
-    ...mapState(useStore, {
-      nightMode: ({ nightMode }) => nightMode,
-    }),
-  },
-  mounted() {
-    setTimeout(() => {
-      this.loading = false
-    }, 100)
-  },
-}
+const loading = ref(true)
+
+const nightMode = useStore().nightMode
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false
+  }, 100)
+})
 </script>
 
 <template>