统一account页面与system中state的封装

src/views/setting/account/account.vue

@@ -7,7 +7,7 @@
             class="thing-cell"
             v-for="item in typeTabList"
             :key="item.key"
-            :class="{ 'thing-cell-on': type === item.key }"
+            :class="{ 'thing-cell-on': state.type === item.key }"
             @click="switchType(item)"
           >
             <template #header>{{ item.name }}</template>
@@ -16,16 +16,16 @@
         </n-card>
       </n-grid-item>
       <n-grid-item span="18">
-        <n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
+        <n-card :bordered="false" size="small" :title="state.typeTitle" class="proCard">
-          <BasicSetting v-if="type === 1" />
+          <BasicSetting v-if="state.type === 1" />
-          <SafetySetting v-if="type === 2" />
+          <SafetySetting v-if="state.type === 2" />
         </n-card>
       </n-grid-item>
     </n-grid>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
+import { reactive, ref } from 'vue';
 import BasicSetting from './BasicSetting.vue';
 import SafetySetting from './SafetySetting.vue';
 
@@ -42,12 +42,14 @@
   },
 ];
 
-  const type = ref(1);
+const state = reactive({
-  const typeTitle = ref('基本设置');
+  type: 1,
+  typeTitle: '基本设置',
+});
 
 function switchType(e) {
-    type.value = e.key;
+  state.type = e.key;
-    typeTitle.value = e.name;
+  state.typeTitle = e.name;
 }
 </script>
 <style lang="less" scoped>