diff --git a/src/views/account-settings/components/accountManagement.vue b/src/views/account-settings/components/accountManagement.vue
index a91fd3d1f..eab889f38 100644
--- a/src/views/account-settings/components/accountManagement.vue
+++ b/src/views/account-settings/components/accountManagement.vue
@@ -1,42 +1,50 @@
 <script setup lang="ts">
-// 仅提供示例，请根据具体业务自行实现
+import { ref } from "vue";
+import { message } from "@/utils/message";
+
+const list = ref([
+  {
+    title: "账户密码",
+    illustrate: "当前密码强度：强",
+    button: "修改"
+  },
+  {
+    title: "密保手机",
+    illustrate: "已经绑定手机：158****6789",
+    button: "修改"
+  },
+  {
+    title: "密保问题",
+    illustrate: "未设置密保问题，密保问题可有效保护账户安全",
+    button: "修改"
+  },
+  {
+    title: "备用邮箱",
+    illustrate: "已绑定邮箱：pure***@163.com",
+    button: "修改"
+  }
+]);
+
+function onClick(item) {
+  console.log(item.title);
+  message("仅提供示例，请根据具体业务自行实现", { type: "success" });
+}
 </script>
 
 <template>
   <div class="ml-[120px] min-w-[180px] max-w-[70%]">
     <h3 class="my-8">账户管理</h3>
-    <div class="flex items-center">
-      <div class="flex-1">
-        <p>账户密码</p>
-        <el-text class="mx-1" type="info">当前密码强度：强</el-text>
+    <div v-for="(item, index) in list" :key="index">
+      <div class="flex items-center">
+        <div class="flex-1">
+          <p>{{ item.title }}</p>
+          <el-text class="mx-1" type="info">{{ item.illustrate }}</el-text>
+        </div>
+        <el-button type="primary" text @click="onClick(item)">
+          {{ item.button }}
+        </el-button>
       </div>
-      <el-button type="primary" text>修改</el-button>
-    </div>
-    <el-divider />
-    <div class="flex items-center">
-      <div class="flex-1">
-        <p>密保手机</p>
-        <el-text class="mx-1" type="info">已经绑定手机：158****6789</el-text>
-      </div>
-      <el-button type="primary" text>修改</el-button>
-    </div>
-    <el-divider />
-    <div class="flex items-center">
-      <div class="flex-1">
-        <p>密保问题</p>
-        <el-text class="mx-1" type="info">
-          未设置密保问题，密保问题可有效保护账户安全
-        </el-text>
-      </div>
-      <el-button type="primary" text>修改</el-button>
-    </div>
-    <el-divider />
-    <div class="flex items-center">
-      <div class="flex-1">
-        <p>备用邮箱</p>
-        <el-text class="mx-1" type="info">已绑定邮箱：pure***@163.com</el-text>
-      </div>
-      <el-button type="primary" text>修改</el-button>
+      <el-divider />
     </div>
   </div>
 </template>
diff --git a/src/views/account-settings/components/preferences.vue b/src/views/account-settings/components/preferences.vue
index c42674028..27c8bbef8 100644
--- a/src/views/account-settings/components/preferences.vue
+++ b/src/views/account-settings/components/preferences.vue
@@ -16,7 +16,7 @@ const list = ref([
   {
     title: "待办任务",
     illustrate: "待办任务将以站内信的形式通知",
-    checked: false
+    checked: true
   }
 ]);