From b88c0476438aebd84e4c0e5ca1ddafef884cd170 Mon Sep 17 00:00:00 2001
From: "J.Bean" <2780860550@qq.com>
Date: Fri, 18 Oct 2024 18:10:35 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80account=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E4=B8=8Esystem=E4=B8=ADstate=E7=9A=84=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/setting/account/account.vue | 84 ++++++++++++++-------------
 1 file changed, 43 insertions(+), 41 deletions(-)

diff --git a/src/views/setting/account/account.vue b/src/views/setting/account/account.vue
index b2a29957..62a699ac 100644
--- a/src/views/setting/account/account.vue
+++ b/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;
-    color: #2d8cf0;
+.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>