From 4118f025d4d1cd4e032677262ab80ba2d888b82e Mon Sep 17 00:00:00 2001
From: Kunagisa <1549184870@qq.com>
Date: Tue, 8 Jul 2025 18:52:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E9=97=B2=E7=9A=84=E6=B2=A1?=
 =?UTF-8?q?=E4=BA=8B=E7=9E=8E=E5=87=A0=E6=8A=8A=E6=94=B9=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E5=90=8D=E6=8B=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ChangeUsernameDialog.vue | 233 ++++++++++++++++++++++++
 src/components/login_module.vue         |   8 +-
 src/views/index.vue                     |  35 +++-
 3 files changed, 271 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ChangeUsernameDialog.vue

diff --git a/src/components/ChangeUsernameDialog.vue b/src/components/ChangeUsernameDialog.vue
new file mode 100644
index 0000000..66d6cd0
--- /dev/null
+++ b/src/components/ChangeUsernameDialog.vue
@@ -0,0 +1,233 @@
+<template>
+  <div v-if="visible" class="username-dialog-overlay" @click.self="handleClose">
+    <div class="username-dialog">
+      <div class="username-dialog-content">
+        <div class="dialog-title">修改用户名</div>
+        <div class="input-group">
+          <input 
+            v-model="newUsername" 
+            type="text" 
+            placeholder="请输入新的用户名"
+            :disabled="loading"
+            @keyup.enter="handleSubmit"
+          />
+        </div>
+      </div>
+      <div class="username-dialog-footer">
+        <button class="cancel-button" @click="handleClose" :disabled="loading">取消</button>
+        <button class="confirm-button" @click="handleSubmit" :disabled="loading || !newUsername.trim()">
+          {{ loading ? '修改中...' : '确定' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, defineProps, defineEmits } from 'vue'
+import { changeUserName } from '@/api/login.js'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  currentUsername: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['close', 'success', 'error'])
+
+const newUsername = ref('')
+const loading = ref(false)
+
+// 监听弹窗显示状态，重置输入框
+watch(() => props.visible, (visible) => {
+  if (visible) {
+    newUsername.value = props.currentUsername || ''
+  }
+})
+
+const handleClose = () => {
+  if (!loading.value) {
+    newUsername.value = ''
+    emit('close')
+  }
+}
+
+const handleSubmit = async () => {
+  if (!newUsername.value.trim() || loading.value) {
+    return
+  }
+
+  if (newUsername.value.trim() === props.currentUsername) {
+    emit('close')
+    emit('error', '新用户名与当前用户名相同')
+    return
+  }
+
+  loading.value = true
+  
+  try {
+    await changeUserName(newUsername.value.trim())
+    emit('success', newUsername.value.trim())
+    newUsername.value = ''
+    emit('close')
+  } catch (error) {
+    emit('close')
+    console.error('修改用户名失败:', error)
+    const errorMessage = error.response?.data?.message || error.message || '修改用户名失败，请重试'
+    emit('error', errorMessage)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.username-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.username-dialog {
+  background: white;
+  border-radius: 8px;
+  width: 90%;
+  max-width: 400px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+  animation: dialog-fade-in 0.3s ease;
+}
+
+.username-dialog-content {
+  padding: 20px;
+  text-align: center;
+}
+
+.dialog-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.input-group {
+  margin-bottom: 0;
+}
+
+.input-group input {
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 16px;
+  transition: border-color 0.3s;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.input-group input:focus {
+  border-color: #67c23a;
+}
+
+.input-group input:disabled {
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+}
+
+.username-dialog-footer {
+  padding: 10px 20px 20px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+.cancel-button, .confirm-button {
+  padding: 8px 24px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.cancel-button {
+  background-color: #909399;
+  color: white;
+}
+
+.cancel-button:hover:not(:disabled) {
+  background-color: #a6a9ad;
+}
+
+.confirm-button {
+  background-color: #67c23a;
+  color: white;
+}
+
+.confirm-button:hover:not(:disabled) {
+  background-color: #85ce61;
+}
+
+.confirm-button:disabled {
+  background-color: #c0c4cc;
+  cursor: not-allowed;
+}
+
+.cancel-button:disabled {
+  background-color: #c0c4cc;
+  cursor: not-allowed;
+}
+
+@keyframes dialog-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 移动端适配 */
+@media screen and (max-width: 480px) {
+  .username-dialog {
+    width: 85%;
+  }
+
+  .dialog-title {
+    font-size: 16px;
+  }
+
+  .username-dialog-content {
+    padding: 16px;
+  }
+
+  .input-group input {
+    font-size: 14px;
+  }
+
+  .username-dialog-footer {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .cancel-button, .confirm-button {
+    width: 100%;
+    padding: 10px;
+    font-size: 13px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/login_module.vue b/src/components/login_module.vue
index 75262b6..8640e6d 100644
--- a/src/components/login_module.vue
+++ b/src/components/login_module.vue
@@ -159,10 +159,10 @@ const validateForm = () => {
     return false
   }
   // 修正正则表达式：只允许纯数字
-  if (!/^\d+$/.test(username.value)) {
-    usernameError.value = 'QQ号码只能包含数字'
-    return false
-  }
+  // if (!/^\d+$/.test(username.value)) {
+  //   usernameError.value = 'QQ号码只能包含数字'
+  //   return false
+  // }
   if (username.value.length < 4) {
     usernameError.value = 'QQ号码长度不能小于4个字符'
     return false
diff --git a/src/views/index.vue b/src/views/index.vue
index 98d3f7f..85e9af2 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -8,6 +8,7 @@ import { requestTempPrivilege } from '@/api/login.js'
 const PrivilegeRequestDialog = defineAsyncComponent(() => import('@/components/PrivilegeRequestDialog.vue'))
 const SuccessDialog = defineAsyncComponent(() => import('@/components/SuccessDialog.vue'))
 const ErrorDialog = defineAsyncComponent(() => import('@/components/ErrorDialog.vue'))
+const ChangeUsernameDialog = defineAsyncComponent(() => import('@/components/ChangeUsernameDialog.vue'))
 
 const isLoggedIn = computed(() => {
   return !!localStorage.getItem('access_token') && !!currentUserData.value
@@ -175,7 +176,7 @@ onMounted(() => {
         console.log('权限检查失败:', error)
       }
     }
-  }, 10 * 1000) // 10秒
+  }, 100 * 1000) // 10秒
 })
 
 onUnmounted(() => {
@@ -208,6 +209,7 @@ const privilegeDialogVisible = ref(false)
 const privilegeDialogName = ref('')
 const privilegeDialogKey = ref('')
 const successDialog = ref({ visible: false, message: '' })
+const changeUsernameDialogVisible = ref(false)
 
 const privilegeDisplayNames = {
   'lv-admin': '管理员',
@@ -265,6 +267,26 @@ function hasInvalidTempPrivilege(user) {
   const arr = user.temp_privilege.split(';').map(p => p.trim()).filter(Boolean)
   return arr.some(p => !allowedTempPrivileges.includes(p))
 }
+
+// 显示修改用户名对话框
+function showChangeUsernameDialog() {
+  changeUsernameDialogVisible.value = true
+  showDropdown.value = false
+}
+
+// 处理修改用户名成功
+function handleUsernameChangeSuccess(newUsername) {
+  if (currentUserData.value) {
+    currentUserData.value.username = newUsername
+  }
+  successDialog.value = { visible: true, message: '用户名修改成功！' }
+}
+
+// 处理修改用户名错误
+function handleUsernameChangeError(errorMessage) {
+  errorDialogMessage.value = errorMessage
+  errorDialogVisible.value = true
+}
 </script>
 
 <template>
@@ -331,6 +353,10 @@ function hasInvalidTempPrivilege(user) {
             <span v-if="userHighestPrivilege" :class="privilegeTagClass">{{ privilegeDisplayName }}</span>
             <i class="fas fa-chevron-down dropdown-icon"></i>
             <div v-show="showDropdown" class="dropdown-menu">
+              <div class="dropdown-item" @click.stop="showChangeUsernameDialog">
+                <i class="fas fa-edit"></i>
+                修改用户名
+              </div>
               <div v-if="isAdmin" class="dropdown-item" @click.stop="router.push('/backend/dashboard'); showDropdown = false">
                 <i class="fas fa-cog"></i>
                 管理后台
@@ -378,6 +404,13 @@ function hasInvalidTempPrivilege(user) {
       :message="errorDialogMessage"
       @close="errorDialogVisible = false"
     />
+    <ChangeUsernameDialog
+      :visible="changeUsernameDialogVisible"
+      :currentUsername="currentUserData?.username || ''"
+      @close="changeUsernameDialogVisible = false"
+      @success="handleUsernameChangeSuccess"
+      @error="handleUsernameChangeError"
+    />
   </div>
 </template>