统一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,61 +16,63 @@
         </n-card>
       </n-grid-item>
       <n-grid-item span="18">
-        <n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
-          <BasicSetting v-if="type === 1" />
-          <SafetySetting v-if="type === 2" />
+        <n-card :bordered="false" size="small" :title="state.typeTitle" class="proCard">
+          <BasicSetting v-if="state.type === 1" />
+          <SafetySetting v-if="state.type === 2" />
         </n-card>
       </n-grid-item>
     </n-grid>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
-  import BasicSetting from './BasicSetting.vue';
-  import SafetySetting from './SafetySetting.vue';
+import { reactive, ref } from 'vue';
+import BasicSetting from './BasicSetting.vue';
+import SafetySetting from './SafetySetting.vue';
 
-  const typeTabList = [
-    {
-      name: '基本设置',
-      desc: '个人账户信息设置',
-      key: 1,
-    },
-    {
-      name: '安全设置',
-      desc: '密码，邮箱等设置',
-      key: 2,
-    },
-  ];
+const typeTabList = [
+  {
+    name: '基本设置',
+    desc: '个人账户信息设置',
+    key: 1,
+  },
+  {
+    name: '安全设置',
+    desc: '密码，邮箱等设置',
+    key: 2,
+  },
+];
 
-  const type = ref(1);
-  const typeTitle = ref('基本设置');
+const state = reactive({
+  type: 1,
+  typeTitle: '基本设置',
+});
 
-  function switchType(e) {
-    type.value = e.key;
-    typeTitle.value = e.name;
-  }
+function switchType(e) {
+  state.type = e.key;
+  state.typeTitle = e.name;
+}
 </script>
 <style lang="less" scoped>
-  .thing-cell {
-    margin: 0 -16px 10px;
-    padding: 5px 16px;
+.thing-cell {
+  margin: 0 -16px 10px;
+  padding: 5px 16px;
 
-    &:hover {
-      background: #f3f3f3;
-      cursor: pointer;
-    }
+  &:hover {
+    background: #f3f3f3;
+    cursor: pointer;
   }
+}
 
-  .thing-cell-on {
-    background: #f0faff;
+.thing-cell-on {
+  background: #f0faff;
+  color: #2d8cf0;
+
+  ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
     color: #2d8cf0;
-
-    ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
-      color: #2d8cf0;
-    }
-
-    &:hover {
-      background: #f0faff;
-    }
   }
+
+  &:hover {
+    background: #f0faff;
+  }
+}
 </style>