diff --git a/src/App.vue b/src/App.vue
index 1847bc8..81c0af2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,6 +12,7 @@ const activeNav = ref('profile');
 var bearer = localStorage.getItem('bearer');
 const loginClientUrl = 'https://www.cloudy233.top/UniAuth';
 const loginServerUrl = 'https://www.cloudy233.top:6699';
+localStorage.setItem('loginServerUrl', loginServerUrl);
 
 onMounted(() => {
   BearerVerify();
diff --git a/src/components/Account.vue b/src/components/Account.vue
index 31bd95d..720a846 100644
--- a/src/components/Account.vue
+++ b/src/components/Account.vue
@@ -1,8 +1,28 @@
 <script setup>
+import { ref } from 'vue';
+
 const props = defineProps({
   UserName: String,
   Email: String,
 })
+
+function ChangeUserName() {
+  let newUserName = prompt('请输入新的用户名');
+  if (newUserName !== null && newUserName !== props.UserName && newUserName.length > 0) {
+    const loginServerUrl = localStorage.getItem('loginServerUrl');
+    const formData = new FormData();
+    formData.append('name', newUserName);
+    fetch(loginServerUrl + '/changename', {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${window.localStorage.getItem('bearer')}`
+      },
+      body: formData
+    }).then(res => {
+      location.reload(true);
+    })
+  }
+}
 </script>
 
 <template>
@@ -21,7 +41,7 @@ const props = defineProps({
           <label class="form-label">用户名</label>
           <div class="form-row">
             <div class="form-value">{{ props.UserName }}</div>
-            <button class="edit-btn" disabled>编辑</button>
+            <button class="edit-btn" @click="ChangeUserName()">编辑</button>
           </div>
         </div>