feature:将修改用户名操作改为模态框

src/components/Account.vue

@@ -6,22 +6,43 @@ const props = defineProps({
   Email: String,
 })
 
+const showModal = ref(false);
+const newUserName = ref('');
+const isSubmitting = ref(false);
+
+function openModal() {
+  newUserName.value = props.UserName;
+  showModal.value = true;
+}
+
+function closeModal() {
+  showModal.value = false;
+  newUserName.value = '';
+}
+
 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);
-    })
+  if (newUserName.value === null || newUserName.value === props.UserName || newUserName.value.length === 0) {
+    return;
   }
+  
+  isSubmitting.value = true;
+  const loginServerUrl = localStorage.getItem('loginServerUrl');
+  const formData = new FormData();
+  formData.append('name', newUserName.value);
+  
+  fetch(loginServerUrl + '/changename', {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${window.localStorage.getItem('bearer')}`
+    },
+    body: formData
+  }).then(res => {
+    isSubmitting.value = false;
+    closeModal();
+    location.reload(true);
+  }).catch(() => {
+    isSubmitting.value = false;
+  })
 }
 </script>
 
@@ -41,7 +62,7 @@ function ChangeUserName() {
           <label class="form-label">用户名</label>
           <div class="form-row">
             <div class="form-value">{{ props.UserName }}</div>
-            <button class="edit-btn" @click="ChangeUserName()">编辑</button>
+            <button class="edit-btn" @click="openModal()">编辑</button>
           </div>
         </div>
         
@@ -83,6 +104,38 @@ function ChangeUserName() {
       </div>
     </div>
   </div>
+
+  <!-- 修改用户名模态窗 -->
+  <div class="modal-overlay" v-if="showModal" @click.self="closeModal()">
+    <div class="modal">
+      <div class="modal-header">
+        <h3 class="modal-title">修改用户名</h3>
+        <button class="modal-close" @click="closeModal()">×</button>
+      </div>
+      <div class="modal-body">
+        <div class="form-group">
+          <label class="form-label">新用户名</label>
+          <input 
+            type="text" 
+            class="form-input" 
+            v-model="newUserName"
+            placeholder="请输入新的用户名"
+            @keyup.enter="ChangeUserName()"
+          />
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-secondary" @click="closeModal()">取消</button>
+        <button 
+          class="btn btn-primary" 
+          @click="ChangeUserName()"
+          :disabled="isSubmitting || newUserName === props.UserName || newUserName.length === 0"
+        >
+          {{ isSubmitting ? '保存中...' : '保存' }}
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
@@ -132,4 +185,145 @@ function ChangeUserName() {
   font-size: 13px;
   color: var(--text-secondary);
 }
+
+/* 模态窗样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.2s ease;
+}
+
+.modal {
+  background: var(--card-bg);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  width: 100%;
+  max-width: 420px;
+  margin: 16px;
+  animation: slideUp 0.2s ease;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.modal-close {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  color: var(--text-secondary);
+  transition: all 0.2s ease;
+}
+
+.modal-close:hover {
+  background: var(--background);
+  color: var(--text-primary);
+}
+
+.modal-body {
+  padding: 24px;
+}
+
+.form-input {
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  font-size: 14px;
+  color: var(--text-primary);
+  background: var(--card-bg);
+  transition: all 0.2s ease;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+.form-input::placeholder {
+  color: var(--text-secondary);
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 24px;
+  border-top: 1px solid var(--border-color);
+}
+
+.btn {
+  padding: 10px 20px;
+  border-radius: var(--radius);
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.btn-secondary {
+  background: var(--background);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+}
+
+.btn-secondary:hover {
+  background: #fee2e2;
+  color: var(--error-color);
+  border-color: #fecaca;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  color: white;
+  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(79, 70, 229, 0.4);
+}
+
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { 
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to { 
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 </style>