支持 Vue 3.2.x 语法升级为，script setup

src/views/setting/account/BasicSetting.vue

@@ -28,8 +28,8 @@
   </n-grid>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, ref, toRefs } from 'vue';
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
   import { useMessage } from 'naive-ui';
 
   const rules = {
@@ -49,37 +49,23 @@
       trigger: 'input',
     },
   };
+  const formRef: any = ref(null);
+  const message = useMessage();
 
-  export default defineComponent({
-    setup() {
-      const formRef: any = ref(null);
-      const message = useMessage();
-
-      const state = reactive({
-        formValue: {
-          name: '',
-          mobile: '',
-          email: '',
-          address: '',
-        },
-      });
-
-      function formSubmit() {
-        formRef.value.validate((errors) => {
-          if (!errors) {
-            message.success('验证成功');
-          } else {
-            message.error('验证失败，请填写完整信息');
-          }
-        });
-      }
-
-      return {
-        formRef,
-        ...toRefs(state),
-        rules,
-        formSubmit,
-      };
-    },
+  const formValue = reactive({
+    name: '',
+    mobile: '',
+    email: '',
+    address: '',
   });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        message.success('验证成功');
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
 </script>

src/views/setting/account/SafetySetting.vue

@@ -49,58 +49,4 @@
   </n-grid>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, ref, toRefs } from 'vue';
-  import { useMessage } from 'naive-ui';
-
-  const rules = {
-    name: {
-      required: true,
-      message: '请输入昵称',
-      trigger: 'blur',
-    },
-    email: {
-      required: true,
-      message: '请输入邮箱',
-      trigger: 'blur',
-    },
-    mobile: {
-      required: true,
-      message: '请输入联系电话',
-      trigger: 'input',
-    },
-  };
-
-  export default defineComponent({
-    setup() {
-      const formRef: any = ref(null);
-      const message = useMessage();
-
-      const state = reactive({
-        formValue: {
-          name: '',
-          mobile: '',
-          email: '',
-          address: '',
-        },
-      });
-
-      function formSubmit() {
-        formRef.value.validate((errors) => {
-          if (!errors) {
-            message.success('验证成功');
-          } else {
-            message.error('验证失败，请填写完整信息');
-          }
-        });
-      }
-
-      return {
-        formRef,
-        ...toRefs(state),
-        rules,
-        formSubmit,
-      };
-    },
-  });
-</script>
+<script lang="ts" setup></script>

src/views/setting/account/account.vue

@@ -24,8 +24,8 @@
     </n-grid>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, reactive, toRefs } from 'vue';
+<script lang="ts" setup>
+  import { ref } from 'vue';
   import BasicSetting from './BasicSetting.vue';
   import SafetySetting from './SafetySetting.vue';
 
@@ -41,26 +41,14 @@
       key: 2,
     },
   ];
-  export default defineComponent({
-    components: { BasicSetting, SafetySetting },
-    setup() {
-      const state = reactive({
-        type: 1,
-        typeTitle: '基本设置',
-      });
 
-      function switchType(e) {
-        state.type = e.key;
-        state.typeTitle = e.name;
-      }
+  const type = ref(1);
+  const typeTitle = ref('基本设置');
 
-      return {
-        ...toRefs(state),
-        switchType,
-        typeTabList,
-      };
-    },
-  });
+  function switchType(e) {
+    type.value = e.key;
+    typeTitle.value = e.name;
+  }
 </script>
 <style lang="less" scoped>
   .thing-cell {