From fecd53c31e2912d62915902e8e6679dc254b450a Mon Sep 17 00:00:00 2001
From: YangFong <yangfong2022@qq.com>
Date: Sun, 28 Jul 2024 22:54:45 +0800
Subject: [PATCH] refactor: convert components to setup syntax

---
 .../CodemirrorEditor/AboutDialog.vue          | 26 +++++++---------
 src/components/CodemirrorEditor/CssEditor.vue | 17 +++++-----
 src/components/RunLoading.vue                 | 31 +++++++------------
 3 files changed, 30 insertions(+), 44 deletions(-)

diff --git a/src/components/CodemirrorEditor/AboutDialog.vue b/src/components/CodemirrorEditor/AboutDialog.vue
index 4bf82c0ac..a9618fa79 100644
--- a/src/components/CodemirrorEditor/AboutDialog.vue
+++ b/src/components/CodemirrorEditor/AboutDialog.vue
@@ -1,17 +1,15 @@
-<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>
 
@@ -19,7 +17,7 @@ export default {
   <el-dialog
     title="关于"
     class="about__dialog"
-    :model-value="visible"
+    :model-value="props.visible"
     width="30%"
     center
     @close="$emit('close')"
diff --git a/src/components/CodemirrorEditor/CssEditor.vue b/src/components/CodemirrorEditor/CssEditor.vue
index a0198e86d..b0779efcc 100644
--- a/src/components/CodemirrorEditor/CssEditor.vue
+++ b/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"
diff --git a/src/components/RunLoading.vue b/src/components/RunLoading.vue
index f88164fc0..ed5b65588 100644
--- a/src/components/RunLoading.vue
+++ b/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>