From a5d606d7b7e4df3a9e9c1348abf1a10a42402147 Mon Sep 17 00:00:00 2001
From: hejl <hejl@hundsun.com>
Date: Sun, 7 Sep 2025 17:01:57 +0800
Subject: [PATCH] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E4=B9=8B=E5=89=8D=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98=E4=B8=80=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PermissionManager.vue          |    2 +-
 .../components/RolePermissionAssignment.vue   | 1534 ++++++-------
 .../components/UserRoleAssignment.vue         |    2 +-
 .../role-management/views/RoleManagement.vue  |    4 +-
 .../components/PasswordChangeModal.vue        | 1936 ++++++++---------
 .../user-management/views/UserManagement.vue  |    4 +-
 .../user-management/views/UserProfile.vue     |    2 +-
 7 files changed, 1742 insertions(+), 1742 deletions(-)

diff --git a/gofaster/app/src/renderer/modules/role-management/components/PermissionManager.vue b/gofaster/app/src/renderer/modules/role-management/components/PermissionManager.vue
index 33490fd..8df5805 100644
--- a/gofaster/app/src/renderer/modules/role-management/components/PermissionManager.vue
+++ b/gofaster/app/src/renderer/modules/role-management/components/PermissionManager.vue
@@ -55,7 +55,7 @@
         
         <div class="modal-footer">
           <button class="btn btn-secondary" @click="handleClose">取消</button>
-          <button class="btn btn-primary" @click="savePermissions" :disabled="saving" name="permissionmanager-ufeqez">>
+          <button class="btn btn-primary" @click="savePermissions" :disabled="saving">
             {{ saving ? '保存中...' : '保存权限' }}
           </button>
         </div>
diff --git a/gofaster/app/src/renderer/modules/role-management/components/RolePermissionAssignment.vue b/gofaster/app/src/renderer/modules/role-management/components/RolePermissionAssignment.vue
index 80367bb..f120a56 100644
--- a/gofaster/app/src/renderer/modules/role-management/components/RolePermissionAssignment.vue
+++ b/gofaster/app/src/renderer/modules/role-management/components/RolePermissionAssignment.vue
@@ -1,767 +1,767 @@
-<template>
-  <div class="role-permission-assignment">
-    <div v-if="visible" class="modal-overlay" @click="handleClose">
-      <div class="modal large-modal" @click.stop>
-        <div class="modal-header">
-          <h3>角色权限分配 - {{ currentRole?.name }}</h3>
-          <button class="close-btn" @click="handleClose">
-            <i class="fas fa-times"></i>
-          </button>
-        </div>
-        
-        <div class="modal-body">
-          <div v-if="loading" class="loading">
-            <i class="fas fa-spinner fa-spin"></i>
-            <span>加载中...</span>
-          </div>
-          
-          <div v-else class="permission-content">
-            <!-- 角色信息 -->
-            <div class="role-info">
-              <div class="role-details">
-                <h4>{{ currentRole?.name }}</h4>
-                <p class="role-description">{{ currentRole?.description }}</p>
-                <div class="role-stats">
-                  <span class="stat-item">
-                    <i class="fas fa-shield-alt"></i>
-                    已分配权限: {{ assignedPermissions.length }}
-                  </span>
-                  <span class="stat-item">
-                    <i class="fas fa-list"></i>
-                    总权限数: {{ allPermissions.length }}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <!-- 权限分配区域 -->
-            <div class="permission-assignment">
-              <div class="assignment-tabs">
-                <button 
-                  class="tab-btn" 
-                  :class="{ active: activeTab === 'assigned' }"
-                  @click="activeTab = 'assigned'"
-                >
-                  <i class="fas fa-check-circle"></i>
-                  已分配权限 ({{ assignedPermissions.length }})
-                </button>
-                <button 
-                  class="tab-btn" 
-                  :class="{ active: activeTab === 'available' }"
-                  @click="activeTab = 'available'"
-                >
-                  <i class="fas fa-plus-circle"></i>
-                  可分配权限 ({{ availablePermissions.length }})
-                </button>
-              </div>
-
-              <!-- 已分配权限列表 -->
-              <div v-if="activeTab === 'assigned'" class="permission-list assigned-permissions">
-                <div class="list-header">
-                  <h5>已分配权限</h5>
-                  <div class="list-actions">
-                    <button 
 name="rolepermissionassignment-hve7dn"
-                      class="btn btn-sm btn-danger" 
-                      @click="removeSelectedPermissions"
-                      :disabled="selectedAssignedPermissions.length === 0">
-                      <i class="fas fa-minus"></i>
-                      移除选中 ({{ selectedAssignedPermissions.length }})
-                    </button>
-                    <button 
-                      class="btn btn-sm btn-secondary" 
-                      @click="clearAssignedSelection"
-                    >
-                      清除选择
-                    </button>
-                  </div>
-                </div>
-                
-                <div v-if="assignedPermissions.length === 0" class="empty-state">
-                  <i class="fas fa-inbox"></i>
-                  <p>该角色暂无分配权限</p>
-                </div>
-                
-                <div v-else class="permission-items">
-                  <div 
-                    v-for="permission in assignedPermissions" 
-                    :key="permission.id"
-                    class="permission-item"
-                    :class="{ selected: selectedAssignedPermissions.includes(permission.id) }"
-                    @click="toggleAssignedPermission(permission.id)"
-                  >
-                    <div class="permission-checkbox">
-                      <input 
-                        type="checkbox" 
-                        :checked="selectedAssignedPermissions.includes(permission.id)"
-                        @change="toggleAssignedPermission(permission.id)"
-                      />
-                    </div>
-                    <div class="permission-info">
-                      <div class="permission-name">{{ permission.name }}</div>
-                      <div class="permission-details">
-                        <span class="permission-code">{{ permission.code }}</span>
-                        <span class="permission-resource">{{ permission.resource }}</span>
-                      </div>
-                      <div class="permission-description">{{ permission.description }}</div>
-                    </div>
-                    <div class="permission-actions">
-                      <button 
 name="rolepermissionassignment-nd91kw"
-                        class="btn btn-sm btn-danger"
-                        @click.stop="removePermission(permission.id)"
-                        title="移除权限"
-                      >
-                        <i class="fas fa-minus"></i>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- 可分配权限列表 -->
-              <div v-if="activeTab === 'available'" class="permission-list available-permissions">
-                <div class="list-header">
-                  <h5>可分配权限</h5>
-                  <div class="list-actions">
-                    <button 
 name="rolepermissionassignment-u5nohd"
-                      class="btn btn-sm btn-primary" 
-                      @click="assignSelectedPermissions"
-                      :disabled="selectedAvailablePermissions.length === 0">
-                      <i class="fas fa-plus"></i>
-                      分配选中 ({{ selectedAvailablePermissions.length }})
-                    </button>
-                    <button 
-                      class="btn btn-sm btn-secondary" 
-                      @click="clearAvailableSelection"
-                    >
-                      清除选择
-                    </button>
-                  </div>
-                </div>
-                
-                <div v-if="availablePermissions.length === 0" class="empty-state">
-                  <i class="fas fa-check-circle"></i>
-                  <p>所有权限已分配完毕</p>
-                </div>
-                
-                <div v-else class="permission-items">
-                  <div 
-                    v-for="permission in availablePermissions" 
-                    :key="permission.id"
-                    class="permission-item"
-                    :class="{ selected: selectedAvailablePermissions.includes(permission.id) }"
-                    @click="toggleAvailablePermission(permission.id)"
-                  >
-                    <div class="permission-checkbox">
-                      <input 
-                        type="checkbox" 
-                        :checked="selectedAvailablePermissions.includes(permission.id)"
-                        @change="toggleAvailablePermission(permission.id)"
-                      />
-                    </div>
-                    <div class="permission-info">
-                      <div class="permission-name">{{ permission.name }}</div>
-                      <div class="permission-details">
-                        <span class="permission-code">{{ permission.code }}</span>
-                        <span class="permission-resource">{{ permission.resource }}</span>
-                      </div>
-                      <div class="permission-description">{{ permission.description }}</div>
-                    </div>
-                    <div class="permission-actions">
-                      <button 
 name="rolepermissionassignment-106c2d"
-                        class="btn btn-sm btn-primary"
-                        @click.stop="assignPermission(permission.id)"
-                        title="分配权限"
-                      >
-                        <i class="fas fa-plus"></i>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <div class="modal-footer">
-          <button class="btn btn-secondary" @click="handleClose">关闭</button>
-          <button class="btn btn-primary" @click="refreshPermissions" :disabled="loading">
-            <i class="fas fa-sync-alt"></i>
-            刷新权限
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, watch, computed } from 'vue'
-import roleService from '../services/roleService.js'
-
-export default {
-  name: 'RolePermissionAssignment',
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false
-    },
-    role: {
-      type: Object,
-      default: null
-    }
-  },
-  emits: ['update:modelValue', 'permissions-updated'],
-  setup(props, { emit }) {
-    const visible = ref(false)
-    const loading = ref(false)
-    const currentRole = ref(null)
-    const allPermissions = ref([])
-    const assignedPermissions = ref([])
-    const selectedAssignedPermissions = ref([])
-    const selectedAvailablePermissions = ref([])
-    const activeTab = ref('assigned')
-
-    // 计算可分配权限
-    const availablePermissions = computed(() => {
-      const assignedIds = assignedPermissions.value.map(p => p.id)
-      return allPermissions.value.filter(p => !assignedIds.includes(p.id))
-    })
-
-    // 监听visible变化
-    watch(() => props.modelValue, (newVal) => {
-      visible.value = newVal
-      if (newVal && props.role) {
-        currentRole.value = props.role
-        loadData()
-      }
-    })
-
-    // 加载数据
-    const loadData = async () => {
-      if (!currentRole.value) return
-      
-      loading.value = true
-      try {
-        await Promise.all([
-          loadAllPermissions(),
-          loadRolePermissions()
-        ])
-      } catch (error) {
-        console.error('加载权限数据失败:', error)
-      } finally {
-        loading.value = false
-      }
-    }
-
-    // 加载所有权限
-    const loadAllPermissions = async () => {
-      try {
-        const response = await roleService.getPermissions()
-        if (response.code === 200) {
-          allPermissions.value = response.data || []
-        }
-      } catch (error) {
-        console.error('加载权限列表失败:', error)
-      }
-    }
-
-    // 加载角色权限
-    const loadRolePermissions = async () => {
-      try {
-        const response = await roleService.getRolePermissions(currentRole.value.id)
-        if (response.code === 200) {
-          assignedPermissions.value = response.data || []
-        }
-      } catch (error) {
-        console.error('加载角色权限失败:', error)
-      }
-    }
-
-    // 切换已分配权限选择
-    const toggleAssignedPermission = (permissionId) => {
-      const index = selectedAssignedPermissions.value.indexOf(permissionId)
-      if (index > -1) {
-        selectedAssignedPermissions.value.splice(index, 1)
-      } else {
-        selectedAssignedPermissions.value.push(permissionId)
-      }
-    }
-
-    // 切换可分配权限选择
-    const toggleAvailablePermission = (permissionId) => {
-      const index = selectedAvailablePermissions.value.indexOf(permissionId)
-      if (index > -1) {
-        selectedAvailablePermissions.value.splice(index, 1)
-      } else {
-        selectedAvailablePermissions.value.push(permissionId)
-      }
-    }
-
-    // 清除已分配权限选择
-    const clearAssignedSelection = () => {
-      selectedAssignedPermissions.value = []
-    }
-
-    // 清除可分配权限选择
-    const clearAvailableSelection = () => {
-      selectedAvailablePermissions.value = []
-    }
-
-    // 分配单个权限
-    const assignPermission = async (permissionId) => {
-      try {
-        const response = await roleService.assignPermissionsToRole(currentRole.value.id, [permissionId])
-        if (response.code === 200) {
-          await loadRolePermissions()
-          emit('permissions-updated')
-        }
-      } catch (error) {
-        console.error('分配权限失败:', error)
-      }
-    }
-
-    // 移除单个权限
-    const removePermission = async (permissionId) => {
-      try {
-        const response = await roleService.removePermissionsFromRole(currentRole.value.id, [permissionId])
-        if (response.code === 200) {
-          await loadRolePermissions()
-          emit('permissions-updated')
-        }
-      } catch (error) {
-        console.error('移除权限失败:', error)
-      }
-    }
-
-    // 批量分配权限
-    const assignSelectedPermissions = async () => {
-      if (selectedAvailablePermissions.value.length === 0) return
-      
-      try {
-        const response = await roleService.assignPermissionsToRole(
-          currentRole.value.id, 
-          selectedAvailablePermissions.value
-        )
-        if (response.code === 200) {
-          selectedAvailablePermissions.value = []
-          await loadRolePermissions()
-          emit('permissions-updated')
-        }
-      } catch (error) {
-        console.error('批量分配权限失败:', error)
-      }
-    }
-
-    // 批量移除权限
-    const removeSelectedPermissions = async () => {
-      if (selectedAssignedPermissions.value.length === 0) return
-      
-      try {
-        const response = await roleService.removePermissionsFromRole(
-          currentRole.value.id, 
-          selectedAssignedPermissions.value
-        )
-        if (response.code === 200) {
-          selectedAssignedPermissions.value = []
-          await loadRolePermissions()
-          emit('permissions-updated')
-        }
-      } catch (error) {
-        console.error('批量移除权限失败:', error)
-      }
-    }
-
-    // 刷新权限
-    const refreshPermissions = async () => {
-      await loadData()
-    }
-
-    // 关闭对话框
-    const handleClose = () => {
-      visible.value = false
-      emit('update:modelValue', false)
-      // 重置状态
-      selectedAssignedPermissions.value = []
-      selectedAvailablePermissions.value = []
-      activeTab.value = 'assigned'
-    }
-
-    return {
-      visible,
-      loading,
-      currentRole,
-      allPermissions,
-      assignedPermissions,
-      availablePermissions,
-      selectedAssignedPermissions,
-      selectedAvailablePermissions,
-      activeTab,
-      toggleAssignedPermission,
-      toggleAvailablePermission,
-      clearAssignedSelection,
-      clearAvailableSelection,
-      assignPermission,
-      removePermission,
-      assignSelectedPermissions,
-      removeSelectedPermissions,
-      refreshPermissions,
-      handleClose
-    }
-  }
-}
-</script>
-
-<style scoped>
-.role-permission-assignment {
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-.large-modal {
-  width: 90%;
-  max-width: 1200px;
-  height: 80vh;
-  max-height: 800px;
-}
-
-.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;
-}
-
-.modal {
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  display: flex;
-  flex-direction: column;
-  max-height: 90vh;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 24px;
-  border-bottom: 1px solid #e5e7eb;
-  background: #f9fafb;
-  border-radius: 8px 8px 0 0;
-}
-
-.modal-header h3 {
-  margin: 0;
-  color: #1f2937;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 18px;
-  cursor: pointer;
-  color: #6b7280;
-  padding: 4px;
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.close-btn:hover {
-  background: #e5e7eb;
-  color: #374151;
-}
-
-.modal-body {
-  flex: 1;
-  padding: 24px;
-  overflow-y: auto;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 20px 24px;
-  border-top: 1px solid #e5e7eb;
-  background: #f9fafb;
-  border-radius: 0 0 8px 8px;
-}
-
-.loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px;
-  color: #6b7280;
-}
-
-.loading i {
-  font-size: 24px;
-  margin-bottom: 12px;
-}
-
-.role-info {
-  margin-bottom: 24px;
-  padding: 16px;
-  background: #f8fafc;
-  border-radius: 8px;
-  border: 1px solid #e2e8f0;
-}
-
-.role-details h4 {
-  margin: 0 0 8px 0;
-  color: #1e293b;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.role-description {
-  margin: 0 0 12px 0;
-  color: #64748b;
-  font-size: 14px;
-}
-
-.role-stats {
-  display: flex;
-  gap: 16px;
-}
-
-.stat-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: #475569;
-  font-size: 14px;
-}
-
-.stat-item i {
-  color: #3b82f6;
-}
-
-.permission-assignment {
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.assignment-tabs {
-  display: flex;
-  background: #f1f5f9;
-  border-bottom: 1px solid #e2e8f0;
-}
-
-.tab-btn {
-  flex: 1;
-  padding: 12px 16px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  color: #64748b;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-.tab-btn.active {
-  background: white;
-  color: #3b82f6;
-  border-bottom: 2px solid #3b82f6;
-}
-
-.tab-btn:hover:not(.active) {
-  background: #e2e8f0;
-  color: #475569;
-}
-
-.permission-list {
-  padding: 20px;
-}
-
-.list-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.list-header h5 {
-  margin: 0;
-  color: #1e293b;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.list-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.empty-state {
-  text-align: center;
-  padding: 40px 20px;
-  color: #64748b;
-}
-
-.empty-state i {
-  font-size: 48px;
-  margin-bottom: 16px;
-  opacity: 0.5;
-}
-
-.empty-state p {
-  margin: 0;
-  font-size: 14px;
-}
-
-.permission-items {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.permission-item {
-  display: flex;
-  align-items: center;
-  padding: 12px;
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s;
-  background: white;
-}
-
-.permission-item:hover {
-  border-color: #3b82f6;
-  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
-}
-
-.permission-item.selected {
-  border-color: #3b82f6;
-  background: #eff6ff;
-}
-
-.permission-checkbox {
-  margin-right: 12px;
-}
-
-.permission-checkbox input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-}
-
-.permission-info {
-  flex: 1;
-}
-
-.permission-name {
-  font-weight: 500;
-  color: #1e293b;
-  margin-bottom: 4px;
-}
-
-.permission-details {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 4px;
-}
-
-.permission-code {
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-  color: #64748b;
-  background: #f1f5f9;
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-
-.permission-resource {
-  font-size: 12px;
-  color: #8b5cf6;
-  background: #f3f4f6;
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-
-.permission-description {
-  font-size: 12px;
-  color: #64748b;
-  line-height: 1.4;
-}
-
-.permission-actions {
-  margin-left: 12px;
-}
-
-.btn {
-  padding: 6px 12px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 500;
-  transition: all 0.2s;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.btn-sm {
-  padding: 4px 8px;
-  font-size: 11px;
-}
-
-.btn-primary {
-  background: #3b82f6;
-  color: white;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: #2563eb;
-}
-
-.btn-primary:disabled {
-  background: #9ca3af;
-  cursor: not-allowed;
-}
-
-.btn-danger {
-  background: #ef4444;
-  color: white;
-}
-
-.btn-danger:hover:not(:disabled) {
-  background: #dc2626;
-}
-
-.btn-danger:disabled {
-  background: #9ca3af;
-  cursor: not-allowed;
-}
-
-.btn-secondary {
-  background: #6b7280;
-  color: white;
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background: #4b5563;
-}
-
-.btn-secondary:disabled {
-  background: #9ca3af;
-  cursor: not-allowed;
-}
-</style>
+<template>
+  <div class="role-permission-assignment">
+    <div v-if="visible" class="modal-overlay" @click="handleClose">
+      <div class="modal large-modal" @click.stop>
+        <div class="modal-header">
+          <h3>角色权限分配 - {{ currentRole?.name }}</h3>
+          <button class="close-btn" @click="handleClose">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        
+        <div class="modal-body">
+          <div v-if="loading" class="loading">
+            <i class="fas fa-spinner fa-spin"></i>
+            <span>加载中...</span>
+          </div>
+          
+          <div v-else class="permission-content">
+            <!-- 角色信息 -->
+            <div class="role-info">
+              <div class="role-details">
+                <h4>{{ currentRole?.name }}</h4>
+                <p class="role-description">{{ currentRole?.description }}</p>
+                <div class="role-stats">
+                  <span class="stat-item">
+                    <i class="fas fa-shield-alt"></i>
+                    已分配权限: {{ assignedPermissions.length }}
+                  </span>
+                  <span class="stat-item">
+                    <i class="fas fa-list"></i>
+                    总权限数: {{ allPermissions.length }}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <!-- 权限分配区域 -->
+            <div class="permission-assignment">
+              <div class="assignment-tabs">
+                <button 
+                  class="tab-btn" 
+                  :class="{ active: activeTab === 'assigned' }"
+                  @click="activeTab = 'assigned'"
+                >
+                  <i class="fas fa-check-circle"></i>
+                  已分配权限 ({{ assignedPermissions.length }})
+                </button>
+                <button 
+                  class="tab-btn" 
+                  :class="{ active: activeTab === 'available' }"
+                  @click="activeTab = 'available'"
+                >
+                  <i class="fas fa-plus-circle"></i>
+                  可分配权限 ({{ availablePermissions.length }})
+                </button>
+              </div>
+
+              <!-- 已分配权限列表 -->
+              <div v-if="activeTab === 'assigned'" class="permission-list assigned-permissions">
+                <div class="list-header">
+                  <h5>已分配权限</h5>
+                  <div class="list-actions">
+                    <button 
+                      class="btn btn-sm btn-danger" 
+                      @click="removeSelectedPermissions"
+                      :disabled="selectedAssignedPermissions.length === 0">
+                      <i class="fas fa-minus"></i>
+                      移除选中 ({{ selectedAssignedPermissions.length }})
+                    </button>
+                    <button 
+                      class="btn btn-sm btn-secondary" 
+                      @click="clearAssignedSelection"
+                    >
+                      清除选择
+                    </button>
+                  </div>
+                </div>
+                
+                <div v-if="assignedPermissions.length === 0" class="empty-state">
+                  <i class="fas fa-inbox"></i>
+                  <p>该角色暂无分配权限</p>
+                </div>
+                
+                <div v-else class="permission-items">
+                  <div 
+                    v-for="permission in assignedPermissions" 
+                    :key="permission.id"
+                    class="permission-item"
+                    :class="{ selected: selectedAssignedPermissions.includes(permission.id) }"
+                    @click="toggleAssignedPermission(permission.id)"
+                  >
+                    <div class="permission-checkbox">
+                      <input 
+                        type="checkbox" 
+                        :checked="selectedAssignedPermissions.includes(permission.id)"
+                        @change="toggleAssignedPermission(permission.id)"
+                      />
+                    </div>
+                    <div class="permission-info">
+                      <div class="permission-name">{{ permission.name }}</div>
+                      <div class="permission-details">
+                        <span class="permission-code">{{ permission.code }}</span>
+                        <span class="permission-resource">{{ permission.resource }}</span>
+                      </div>
+                      <div class="permission-description">{{ permission.description }}</div>
+                    </div>
+                    <div class="permission-actions">
+                      <button 
+                        class="btn btn-sm btn-danger"
+                        @click.stop="removePermission(permission.id)"
+                        title="移除权限"
+                      >
+                        <i class="fas fa-minus"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 可分配权限列表 -->
+              <div v-if="activeTab === 'available'" class="permission-list available-permissions">
+                <div class="list-header">
+                  <h5>可分配权限</h5>
+                  <div class="list-actions">
+                    <button 
+                      class="btn btn-sm btn-primary" 
+                      @click="assignSelectedPermissions"
+                      :disabled="selectedAvailablePermissions.length === 0">
+                      <i class="fas fa-plus"></i>
+                      分配选中 ({{ selectedAvailablePermissions.length }})
+                    </button>
+                    <button 
+                      class="btn btn-sm btn-secondary" 
+                      @click="clearAvailableSelection"
+                    >
+                      清除选择
+                    </button>
+                  </div>
+                </div>
+                
+                <div v-if="availablePermissions.length === 0" class="empty-state">
+                  <i class="fas fa-check-circle"></i>
+                  <p>所有权限已分配完毕</p>
+                </div>
+                
+                <div v-else class="permission-items">
+                  <div 
+                    v-for="permission in availablePermissions" 
+                    :key="permission.id"
+                    class="permission-item"
+                    :class="{ selected: selectedAvailablePermissions.includes(permission.id) }"
+                    @click="toggleAvailablePermission(permission.id)"
+                  >
+                    <div class="permission-checkbox">
+                      <input 
+                        type="checkbox" 
+                        :checked="selectedAvailablePermissions.includes(permission.id)"
+                        @change="toggleAvailablePermission(permission.id)"
+                      />
+                    </div>
+                    <div class="permission-info">
+                      <div class="permission-name">{{ permission.name }}</div>
+                      <div class="permission-details">
+                        <span class="permission-code">{{ permission.code }}</span>
+                        <span class="permission-resource">{{ permission.resource }}</span>
+                      </div>
+                      <div class="permission-description">{{ permission.description }}</div>
+                    </div>
+                    <div class="permission-actions">
+                      <button 
+                        class="btn btn-sm btn-primary"
+                        @click.stop="assignPermission(permission.id)"
+                        title="分配权限"
+                      >
+                        <i class="fas fa-plus"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="handleClose">关闭</button>
+          <button class="btn btn-primary" @click="refreshPermissions" :disabled="loading">
+            <i class="fas fa-sync-alt"></i>
+            刷新权限
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, watch, computed } from 'vue'
+import roleService from '../services/roleService.js'
+
+export default {
+  name: 'RolePermissionAssignment',
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    role: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ['update:modelValue', 'permissions-updated'],
+  setup(props, { emit }) {
+    const visible = ref(false)
+    const loading = ref(false)
+    const currentRole = ref(null)
+    const allPermissions = ref([])
+    const assignedPermissions = ref([])
+    const selectedAssignedPermissions = ref([])
+    const selectedAvailablePermissions = ref([])
+    const activeTab = ref('assigned')
+
+    // 计算可分配权限
+    const availablePermissions = computed(() => {
+      const assignedIds = assignedPermissions.value.map(p => p.id)
+      return allPermissions.value.filter(p => !assignedIds.includes(p.id))
+    })
+
+    // 监听visible变化
+    watch(() => props.modelValue, (newVal) => {
+      visible.value = newVal
+      if (newVal && props.role) {
+        currentRole.value = props.role
+        loadData()
+      }
+    })
+
+    // 加载数据
+    const loadData = async () => {
+      if (!currentRole.value) return
+      
+      loading.value = true
+      try {
+        await Promise.all([
+          loadAllPermissions(),
+          loadRolePermissions()
+        ])
+      } catch (error) {
+        console.error('加载权限数据失败:', error)
+      } finally {
+        loading.value = false
+      }
+    }
+
+    // 加载所有权限
+    const loadAllPermissions = async () => {
+      try {
+        const response = await roleService.getPermissions()
+        if (response.code === 200) {
+          allPermissions.value = response.data || []
+        }
+      } catch (error) {
+        console.error('加载权限列表失败:', error)
+      }
+    }
+
+    // 加载角色权限
+    const loadRolePermissions = async () => {
+      try {
+        const response = await roleService.getRolePermissions(currentRole.value.id)
+        if (response.code === 200) {
+          assignedPermissions.value = response.data || []
+        }
+      } catch (error) {
+        console.error('加载角色权限失败:', error)
+      }
+    }
+
+    // 切换已分配权限选择
+    const toggleAssignedPermission = (permissionId) => {
+      const index = selectedAssignedPermissions.value.indexOf(permissionId)
+      if (index > -1) {
+        selectedAssignedPermissions.value.splice(index, 1)
+      } else {
+        selectedAssignedPermissions.value.push(permissionId)
+      }
+    }
+
+    // 切换可分配权限选择
+    const toggleAvailablePermission = (permissionId) => {
+      const index = selectedAvailablePermissions.value.indexOf(permissionId)
+      if (index > -1) {
+        selectedAvailablePermissions.value.splice(index, 1)
+      } else {
+        selectedAvailablePermissions.value.push(permissionId)
+      }
+    }
+
+    // 清除已分配权限选择
+    const clearAssignedSelection = () => {
+      selectedAssignedPermissions.value = []
+    }
+
+    // 清除可分配权限选择
+    const clearAvailableSelection = () => {
+      selectedAvailablePermissions.value = []
+    }
+
+    // 分配单个权限
+    const assignPermission = async (permissionId) => {
+      try {
+        const response = await roleService.assignPermissionsToRole(currentRole.value.id, [permissionId])
+        if (response.code === 200) {
+          await loadRolePermissions()
+          emit('permissions-updated')
+        }
+      } catch (error) {
+        console.error('分配权限失败:', error)
+      }
+    }
+
+    // 移除单个权限
+    const removePermission = async (permissionId) => {
+      try {
+        const response = await roleService.removePermissionsFromRole(currentRole.value.id, [permissionId])
+        if (response.code === 200) {
+          await loadRolePermissions()
+          emit('permissions-updated')
+        }
+      } catch (error) {
+        console.error('移除权限失败:', error)
+      }
+    }
+
+    // 批量分配权限
+    const assignSelectedPermissions = async () => {
+      if (selectedAvailablePermissions.value.length === 0) return
+      
+      try {
+        const response = await roleService.assignPermissionsToRole(
+          currentRole.value.id, 
+          selectedAvailablePermissions.value
+        )
+        if (response.code === 200) {
+          selectedAvailablePermissions.value = []
+          await loadRolePermissions()
+          emit('permissions-updated')
+        }
+      } catch (error) {
+        console.error('批量分配权限失败:', error)
+      }
+    }
+
+    // 批量移除权限
+    const removeSelectedPermissions = async () => {
+      if (selectedAssignedPermissions.value.length === 0) return
+      
+      try {
+        const response = await roleService.removePermissionsFromRole(
+          currentRole.value.id, 
+          selectedAssignedPermissions.value
+        )
+        if (response.code === 200) {
+          selectedAssignedPermissions.value = []
+          await loadRolePermissions()
+          emit('permissions-updated')
+        }
+      } catch (error) {
+        console.error('批量移除权限失败:', error)
+      }
+    }
+
+    // 刷新权限
+    const refreshPermissions = async () => {
+      await loadData()
+    }
+
+    // 关闭对话框
+    const handleClose = () => {
+      visible.value = false
+      emit('update:modelValue', false)
+      // 重置状态
+      selectedAssignedPermissions.value = []
+      selectedAvailablePermissions.value = []
+      activeTab.value = 'assigned'
+    }
+
+    return {
+      visible,
+      loading,
+      currentRole,
+      allPermissions,
+      assignedPermissions,
+      availablePermissions,
+      selectedAssignedPermissions,
+      selectedAvailablePermissions,
+      activeTab,
+      toggleAssignedPermission,
+      toggleAvailablePermission,
+      clearAssignedSelection,
+      clearAvailableSelection,
+      assignPermission,
+      removePermission,
+      assignSelectedPermissions,
+      removeSelectedPermissions,
+      refreshPermissions,
+      handleClose
+    }
+  }
+}
+</script>
+
+<style scoped>
+.role-permission-assignment {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.large-modal {
+  width: 90%;
+  max-width: 1200px;
+  height: 80vh;
+  max-height: 800px;
+}
+
+.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;
+}
+
+.modal {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid #e5e7eb;
+  background: #f9fafb;
+  border-radius: 8px 8px 0 0;
+}
+
+.modal-header h3 {
+  margin: 0;
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+  color: #6b7280;
+  padding: 4px;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.close-btn:hover {
+  background: #e5e7eb;
+  color: #374151;
+}
+
+.modal-body {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 20px 24px;
+  border-top: 1px solid #e5e7eb;
+  background: #f9fafb;
+  border-radius: 0 0 8px 8px;
+}
+
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  color: #6b7280;
+}
+
+.loading i {
+  font-size: 24px;
+  margin-bottom: 12px;
+}
+
+.role-info {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: #f8fafc;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+}
+
+.role-details h4 {
+  margin: 0 0 8px 0;
+  color: #1e293b;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.role-description {
+  margin: 0 0 12px 0;
+  color: #64748b;
+  font-size: 14px;
+}
+
+.role-stats {
+  display: flex;
+  gap: 16px;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #475569;
+  font-size: 14px;
+}
+
+.stat-item i {
+  color: #3b82f6;
+}
+
+.permission-assignment {
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.assignment-tabs {
+  display: flex;
+  background: #f1f5f9;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.tab-btn {
+  flex: 1;
+  padding: 12px 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: #64748b;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.tab-btn.active {
+  background: white;
+  color: #3b82f6;
+  border-bottom: 2px solid #3b82f6;
+}
+
+.tab-btn:hover:not(.active) {
+  background: #e2e8f0;
+  color: #475569;
+}
+
+.permission-list {
+  padding: 20px;
+}
+
+.list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.list-header h5 {
+  margin: 0;
+  color: #1e293b;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.list-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  color: #64748b;
+}
+
+.empty-state i {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.empty-state p {
+  margin: 0;
+  font-size: 14px;
+}
+
+.permission-items {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.permission-item {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: white;
+}
+
+.permission-item:hover {
+  border-color: #3b82f6;
+  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
+}
+
+.permission-item.selected {
+  border-color: #3b82f6;
+  background: #eff6ff;
+}
+
+.permission-checkbox {
+  margin-right: 12px;
+}
+
+.permission-checkbox input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.permission-info {
+  flex: 1;
+}
+
+.permission-name {
+  font-weight: 500;
+  color: #1e293b;
+  margin-bottom: 4px;
+}
+
+.permission-details {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.permission-code {
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+  color: #64748b;
+  background: #f1f5f9;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.permission-resource {
+  font-size: 12px;
+  color: #8b5cf6;
+  background: #f3f4f6;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.permission-description {
+  font-size: 12px;
+  color: #64748b;
+  line-height: 1.4;
+}
+
+.permission-actions {
+  margin-left: 12px;
+}
+
+.btn {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.btn-sm {
+  padding: 4px 8px;
+  font-size: 11px;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.btn-primary:disabled {
+  background: #9ca3af;
+  cursor: not-allowed;
+}
+
+.btn-danger {
+  background: #ef4444;
+  color: white;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: #dc2626;
+}
+
+.btn-danger:disabled {
+  background: #9ca3af;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  background: #6b7280;
+  color: white;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: #4b5563;
+}
+
+.btn-secondary:disabled {
+  background: #9ca3af;
+  cursor: not-allowed;
+}
+</style>
diff --git a/gofaster/app/src/renderer/modules/role-management/components/UserRoleAssignment.vue b/gofaster/app/src/renderer/modules/role-management/components/UserRoleAssignment.vue
index 5856439..7617b7d 100644
--- a/gofaster/app/src/renderer/modules/role-management/components/UserRoleAssignment.vue
+++ b/gofaster/app/src/renderer/modules/role-management/components/UserRoleAssignment.vue
@@ -82,7 +82,7 @@
         
         <div class="modal-footer">
           <button class="btn btn-secondary" @click="handleClose">取消</button>
-          <button class="btn btn-primary" @click="saveRoleAssignment" :disabled="saving" name="userroleassignment-snvkol">>
+          <button class="btn btn-primary" @click="saveRoleAssignment" :disabled="saving">
             {{ saving ? '保存中...' : '保存分配' }}
           </button>
         </div>
diff --git a/gofaster/app/src/renderer/modules/role-management/views/RoleManagement.vue b/gofaster/app/src/renderer/modules/role-management/views/RoleManagement.vue
index 56b0c94..52fa2cf 100644
--- a/gofaster/app/src/renderer/modules/role-management/views/RoleManagement.vue
+++ b/gofaster/app/src/renderer/modules/role-management/views/RoleManagement.vue
@@ -58,7 +58,7 @@
                 <button class="btn btn-sm btn-primary" @click="assignPermissions(role)" title="分配权限">
                   <i class="fas fa-shield-alt"></i>
                 </button>
-                <button class="btn btn-sm btn-danger" @click="deleteRole(role)" title="删除角色" name="rolemanagement-gih20x">>
+                <button class="btn btn-sm btn-danger" @click="deleteRole(role)" title="删除角色">
                   <i class="fas fa-trash"></i>
                 </button>
               </div>
@@ -177,7 +177,7 @@
               <button type="button" class="btn btn-secondary" @click="showCreateDialog = false">
                 取消
               </button>
-              <button type="submit" class="btn btn-primary" :disabled="saving" name="rolemanagement-7gjwbd">>
+              <button type="submit" class="btn btn-primary" :disabled="saving">
                 {{ saving ? '保存中...' : (editingRole ? '更新' : '创建') }}
               </button>
             </div>
diff --git a/gofaster/app/src/renderer/modules/user-management/components/PasswordChangeModal.vue b/gofaster/app/src/renderer/modules/user-management/components/PasswordChangeModal.vue
index 43ff743..5a35846 100644
--- a/gofaster/app/src/renderer/modules/user-management/components/PasswordChangeModal.vue
+++ b/gofaster/app/src/renderer/modules/user-management/components/PasswordChangeModal.vue
@@ -1,968 +1,968 @@
-<template>
-  <div v-if="visible" class="password-modal-overlay" @click="handleOverlayClick">
-    <div class="password-modal" @click.stop>
-      <div class="modal-header">
-        <h3>{{ title }}</h3>
-        <button class="close-btn" @click="handleClose">
-          <i class="fas fa-times"></i>
-        </button>
-      </div>
-      
-      <div class="modal-body">
-        <form @submit.prevent="handleSubmit">
-          <!-- 当前密码 -->
-          <div class="form-group" v-if="!isForceChange">
-            <label>当前密码 *</label>
-            <input 
-              v-model="form.currentPassword" 
-              type="password" 
-              required
-              placeholder="请输入当前密码"
-              @input="clearCurrentPasswordError"
-              :class="{ 'error': errors.currentPassword }"
-              :disabled="loading"
-              ref="currentPasswordInput"
-              tabindex="1"
-              autocomplete="current-password"
-            />
-            <div v-if="errors.currentPassword" class="error-message">
-              {{ errors.currentPassword }}
-            </div>
-          </div>
-          
-          <!-- 新密码 -->
-          <div class="form-group">
-            <label>新密码 *</label>
-            <input 
-              v-model="form.newPassword" 
-              type="password" 
-              required
-              placeholder="请输入新密码"
-              @input="handleNewPasswordInput"
-              @keyup="updateRequirements(form.newPassword)"
-              :class="{ 'error': errors.newPassword }"
-              :disabled="loading"
-              ref="newPasswordInput"
-              tabindex="2"
-              autocomplete="new-password"
-            />
-            <div v-if="errors.newPassword" class="error-message">
-              {{ errors.newPassword }}
-            </div>
-            
-            <!-- 密码强度指示器 -->
-            <div class="password-strength" >
-              <div class="strength-bar">
-                <div 
-                  class="strength-fill" 
-                  :class="strengthClass"
-                  :style="{ width: strengthPercentage + '%' }"
-                ></div>
-              </div>
-              <div class="strength-text">
-                强度: {{ strengthText }} ({{ passwordLevel }}级)
-              </div>
-            </div>
-            
-            <!-- 密码要求提示 -->
-            <div class="password-requirements" >
-              <div class="requirement" :class="{ 'met': requirements.length }">
-                ✓ 密码长度{{ form.newPassword.length }}位
-              </div>
-              <div class="requirement" :class="{ 'met': requirements.uppercase }">
-                ✓ 包含大写字母
-              </div>
-              <div class="requirement" :class="{ 'met': requirements.lowercase }">
-                ✓ 包含小写字母
-              </div>
-              <div class="requirement" :class="{ 'met': requirements.numbers }">
-                ✓ 包含数字
-              </div>
-              <div class="requirement" :class="{ 'met': requirements.special }">
-                ✓ 包含特殊字符
-              </div>
-            </div>
-          </div>
-          
-          <!-- 确认新密码 -->
-          <div class="form-group">
-            <label>确认新密码 *</label>
-            <input 
-              v-model="form.confirmPassword" 
-              type="password" 
-              required
-              placeholder="请再次输入新密码"
-              @input="handleConfirmPasswordInput"
-              :class="{ 'error': errors.confirmPassword }"
-              :disabled="loading"
-              ref="confirmPasswordInput"
-              tabindex="3"
-              autocomplete="new-password"
-            />
-            <div v-if="errors.confirmPassword" class="error-message">
-              {{ errors.confirmPassword }}
-            </div>
-          </div>
-          
-          <!-- 操作按钮 -->
-          <div class="form-actions">
-            <button 
-              type="button" 
-              class="btn btn-secondary" 
-              @click="handleClose"
-              :disabled="loading"
-            >
-              取消
-            </button>
-            <button 
 name="passwordchangemodal-4ud6kv"
-              type="submit" 
-              class="btn btn-primary" 
-              :disabled="loading || !isFormValid"
->
-              <span v-if="loading" class="loading-spinner"></span>
-              {{ submitText }}
-            </button>
-          </div>
-          
-          <!-- 强制修改密码提示 -->
-          <div v-if="isForceChange" class="force-change-notice">
-            <div class="notice-icon">⚠️</div>
-            <div class="notice-text">
-              <strong>重要提示：</strong>您的密码已被重置，必须立即修改密码才能继续使用系统。
-            </div>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue'
-import { userService } from '../services/userService.js'
-
-export default {
-  name: 'PasswordChangeModal',
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    isForceChange: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['close', 'success'],
-  setup(props, { emit }) {
-    const loading = ref(false)
-    const policy = ref({
-      minLength: 6,
-      minCharTypes: 1,
-      preventReuse: 3,
-      level: 1,
-      minRequiredLevel: 1,
-      requireUppercase: false,
-      requireLowercase: false,
-      requireNumbers: false,
-      requireSpecial: false
-    })
-    
-    const form = reactive({
-      currentPassword: '',
-      newPassword: '',
-      confirmPassword: ''
-    })
-    
-    const errors = reactive({
-      currentPassword: '',
-      newPassword: '',
-      confirmPassword: ''
-    })
-    
-    const requirements = reactive({
-      length: false,
-      uppercase: false,
-      lowercase: false,
-      numbers: false,
-      special: false
-    })
-    
-    const passwordStrength = ref(0)
-    const passwordLevel = ref(0)
-    
-    // 计算属性
-    const title = computed(() => {
-      return props.isForceChange ? '强制修改密码' : '修改密码'
-    })
-    
-    const submitText = computed(() => {
-      return props.isForceChange ? '确认修改' : '修改密码'
-    })
-    
-    const strengthClass = computed(() => {
-      if (passwordStrength.value >= 4) return 'strong'
-      if (passwordStrength.value >= 3) return 'medium'
-      if (passwordStrength.value >= 2) return 'weak'
-      return 'very-weak'
-    })
-    
-    const strengthText = computed(() => {
-      if (passwordStrength.value >= 4) return '强'
-      if (passwordStrength.value >= 3) return '中'
-      if (passwordStrength.value >= 2) return '弱'
-      return '很弱'
-    })
-    
-    const strengthPercentage = computed(() => {
-      // 将0-5的等级转换为0-100的百分比显示
-      return (passwordStrength.value / 5) * 100
-    })
-    
-    const isFormValid = computed(() => {
-      if (props.isForceChange) {
-        return form.newPassword && form.confirmPassword && 
-               form.newPassword === form.confirmPassword && 
-               !errors.newPassword && !errors.confirmPassword
-      }
-      return form.currentPassword && form.newPassword && form.confirmPassword &&
-             form.newPassword === form.confirmPassword &&
-             !errors.currentPassword && !errors.newPassword && !errors.confirmPassword
-    })
-    
-    // 方法
-    const loadPasswordPolicy = async () => {
-      try {
-        const response = await userService.getPasswordPolicy()
-        
-        // 修复：直接检查response.data的结构
-        if (response.data && response.data.code === 200 && response.data.data) {
-          policy.value = response.data.data
-        } else if (response && response.code === 200 && response.data) {
-          // 备用检查：如果response.data不存在，直接检查response
-          policy.value = response.data
-        } else {
-          console.warn('密码策略响应格式不正确:', response)
-          console.warn('尝试解析响应结构...')
-          if (response.data) {
-            console.warn('response.data.code:', response.data.code)
-            console.warn('response.data.data:', response.data.data)
-          }
-          if (response) {
-            console.warn('response.code:', response.code)
-            console.warn('response.data:', response.data)
-          }
-          // 使用默认策略作为后备
-          policy.value = {
-            minLength: 6,
-            minCharTypes: 1,
-            preventReuse: 3,
-            level: 1,
-            minRequiredLevel: 1,
-            requireUppercase: false,
-            requireLowercase: false,
-            requireNumbers: false,
-            requireSpecial: false
-          }
-        }
-      } catch (error) {
-        console.error('加载密码策略失败:', error)
-        // 使用默认策略作为后备
-        policy.value = {
-          minLength: 6,
-          minCharTypes: 1,
-          preventReuse: 3,
-          level: 1,
-          minRequiredLevel: 1,
-          requireUppercase: false,
-          requireLowercase: false,
-          requireNumbers: false,
-          requireSpecial: false
-        }
-      }
-    }
-    
-    const validatePassword = async () => {
-      errors.newPassword = ''
-      
-      if (!form.newPassword) {
-        // 如果密码为空，重置所有要求状态
-        updateRequirements('')
-        return
-      }
-      
-      try {
-        const response = await userService.validatePassword(form.newPassword)
-        
-        // 修复：检查多种可能的响应结构
-        let result = null
-        if (response.data && response.data.code === 200 && response.data.data) {
-          result = response.data.data
-        } else if (response && response.code === 200 && response.data) {
-          result = response.data
-        }
-        
-        if (result) {
-          
-          if (!result.is_valid) {
-            // 确保错误信息是数组格式
-            if (Array.isArray(result.errors)) {
-              errors.newPassword = result.errors.join('; ')
-            } else if (typeof result.errors === 'string') {
-              errors.newPassword = result.errors
-            } else {
-              errors.newPassword = '密码验证失败'
-            }
-          }
-          
-          passwordStrength.value = result.strength || 0
-          passwordLevel.value = result.level || 0
-          
-          // 更新要求满足状态
-          updateRequirements(form.newPassword)
-        } else {
-          console.warn('密码验证响应格式不正确:', response)
-          // 即使验证失败，也要更新要求状态
-          updateRequirements(form.newPassword)
-        }
-      } catch (error) {
-        console.error('密码验证失败:', error)
-        // 即使验证失败，也要更新要求状态
-        updateRequirements(form.newPassword)
-      }
-    }
-    
-    const updateRequirements = (password) => {
-      
-      // 重置所有状态
-      requirements.length = false
-      requirements.uppercase = false
-      requirements.lowercase = false
-      requirements.numbers = false
-      requirements.special = false
-      
-      // 如果密码为空，直接返回
-      if (!password || password.length === 0) {
-        return
-      }
-      
-      let hasUppercase = false
-      let hasLowercase = false
-      let hasNumbers = false
-      let hasSpecial = false
-      
-      for (const char of password) {
-        // 使用更准确的字符类型检测
-        const charCode = char.charCodeAt(0)
-        
-        if (charCode >= 65 && charCode <= 90) { // A-Z
-          hasUppercase = true
-        } else if (charCode >= 97 && charCode <= 122) { // a-z
-          hasLowercase = true
-        } else if (charCode >= 48 && charCode <= 57) { // 0-9
-          hasNumbers = true
-        } else {
-          // 特殊字符：包括标点符号、符号、空格等
-          hasSpecial = true
-        }
-      }
-      
-      // 更新要求状态
-      requirements.length = password.length >= 6 // 要求至少6位
-      requirements.uppercase = hasUppercase
-      requirements.lowercase = hasLowercase
-      requirements.numbers = hasNumbers
-      requirements.special = hasSpecial
-      
-      // 计算字符类型数量
-      let charTypes = 0
-      if (hasUppercase) charTypes++
-      if (hasLowercase) charTypes++
-      if (hasNumbers) charTypes++
-      if (hasSpecial) charTypes++
-      
-      // 计算密码强度
-      const strength = calculatePasswordStrength(password, charTypes)
-      passwordStrength.value = strength
-      passwordLevel.value = strength
-    }
-    
-    // 前端密码强度计算方法
-    const calculatePasswordStrength = (password, charTypes) => {
-      // 从最高等级开始判断，一旦满足条件就返回对应等级
-      
-      // 5级：长度>=8，字符类型>=4
-      if (password.length >= 8 && charTypes >= 4) {
-        return 5
-      }
-      
-      // 4级：长度>=8，字符类型>=3
-      if (password.length >= 8 && charTypes >= 3) {
-        return 4
-      }
-      
-      // 3级：长度>=6，字符类型>=3
-      if (password.length >= 6 && charTypes >= 3) {
-        return 3
-      }
-      
-      // 2级：长度>=6，字符类型>=2
-      if (password.length >= 6 && charTypes >= 2) {
-        return 2
-      }
-      
-      // 1级：长度>=6，字符类型>=1
-      if (password.length >= 6 && charTypes >= 1) {
-        return 1
-      }
-      
-      // 0级：长度>=1，字符类型>=1（任何密码都至少有一种字符类型）
-      if (password.length >= 1) {
-        return 0
-      }
-      
-      // 如果连0级都不满足，返回0
-      return 0
-    }
-    
-    const validateConfirmPassword = () => {
-      errors.confirmPassword = ''
-      
-      if (form.newPassword !== form.confirmPassword) {
-        errors.confirmPassword = '两次输入的密码不一致'
-      }
-    }
-    
-    const handleSubmit = async () => {
-      if (!isFormValid.value) return
-      
-      loading.value = true
-      
-      // 清除之前的错误信息
-      Object.keys(errors).forEach(key => {
-        errors[key] = ''
-      })
-      
-      try {
-        const requestData = {
-          current_password: form.currentPassword,
-          new_password: form.newPassword,
-          confirm_password: form.confirmPassword
-        }
-        
-        const response = await userService.changePassword(requestData)
-        
-        // 成功处理
-        // 显示成功消息
-        if (window.showToast) {
-          window.showToast({
-            type: 'success',
-            title: '密码修改成功',
-            content: '您的密码已成功修改'
-          })
-        } else {
-          // 如果没有全局toast，使用alert作为后备
-          alert('密码修改成功！')
-        }
-        
-        // 延迟关闭弹窗，让用户看到成功提示
-        setTimeout(() => {
-          emit('success')
-          handleClose()
-        }, 1500)
-        
-      } catch (error) {
-        
-        // 改进错误信息处理
-        let errorMessage = '修改密码失败，请重试'
-        let targetField = 'newPassword'
-        
-        if (error.response?.data) {
-          const responseData = error.response.data
-          
-          // 处理不同的错误情况
-          if (responseData.error) {
-            // 优先使用error字段，这通常包含具体的错误信息
-            errorMessage = responseData.error
-            
-            // 根据错误信息内容判断应该显示在哪个字段
-            if (errorMessage.includes('当前密码') || errorMessage.includes('current password')) {
-              targetField = 'currentPassword'
-            } else if (errorMessage.includes('新密码') || errorMessage.includes('new password')) {
-              targetField = 'newPassword'
-            } else if (errorMessage.includes('确认密码') || errorMessage.includes('confirm password')) {
-              targetField = 'confirmPassword'
-            }
-          } else if (responseData.message) {
-            // 如果没有error字段，使用message字段
-            errorMessage = responseData.message
-            
-            // 根据错误信息内容判断应该显示在哪个字段
-            if (errorMessage.includes('当前密码') || errorMessage.includes('current password')) {
-              targetField = 'currentPassword'
-            } else if (errorMessage.includes('新密码') || errorMessage.includes('new password')) {
-              targetField = 'newPassword'
-            } else if (errorMessage.includes('确认密码') || errorMessage.includes('confirm password')) {
-              targetField = 'confirmPassword'
-            }
-          }
-        } else if (error.message) {
-          errorMessage = error.message
-        }
-        
-        // 显示错误信息
-        errors[targetField] = errorMessage
-        
-        // 如果是强制修改密码模式，错误信息也显示在newPassword字段
-        if (props.isForceChange && targetField === 'currentPassword') {
-          errors.newPassword = errorMessage
-        }
-      } finally {
-        loading.value = false
-      }
-    }
-    
-    const handleClose = () => {
-      if (loading.value) return
-      
-      // 使用统一的重置函数
-      resetFormState()
-      
-      emit('close')
-    }
-    
-    const handleOverlayClick = () => {
-      // 密码修改模态窗不应该在点击外部区域时关闭
-      // 避免用户意外丢失已输入的密码内容
-      // 只有通过明确的取消按钮或关闭按钮才能关闭
-      return false
-    }
-
-    const clearCurrentPasswordError = () => {
-      errors.currentPassword = ''
-    }
-
-    const clearNewPasswordError = () => {
-      errors.newPassword = ''
-    }
-
-    const clearConfirmPasswordError = () => {
-      errors.confirmPassword = ''
-    }
-
-    const handleNewPasswordInput = () => {
-      clearNewPasswordError()
-      validatePassword()
-    }
-
-    const handleConfirmPasswordInput = () => {
-      clearConfirmPasswordError()
-      validateConfirmPassword()
-    }
-    
-    // 监听器
-    watch(() => props.visible, (newVal) => {
-      if (newVal) {
-        
-        // 每次打开弹窗时，确保完全重置所有状态
-        resetFormState()
-        
-        loadPasswordPolicy()
-        
-        // 延迟测试输入框焦点和强制聚焦
-        nextTick(() => {
-          if (!props.isForceChange && form.currentPassword === '') {
-            // 尝试强制聚焦到第一个输入框
-            try {
-              const currentPasswordInput = document.querySelector('input[type="password"]')
-              if (currentPasswordInput) {
-                currentPasswordInput.focus()
-              }
-            } catch (error) {
-              console.error('聚焦失败:', error)
-            }
-          } else {
-            // 尝试强制聚焦到新密码输入框
-            try {
-              const newPasswordInput = document.querySelectorAll('input[type="password"]')[1]
-              if (newPasswordInput) {
-                newPasswordInput.focus()
-              }
-            } catch (error) {
-              console.error('聚焦失败:', error)
-            }
-          }
-        })
-      }
-    })
-    
-    // 重置表单状态的函数
-    const resetFormState = () => {
-      
-      // 重置表单数据
-      form.currentPassword = ''
-      form.newPassword = ''
-      form.confirmPassword = ''
-      
-      // 清除所有错误信息
-      Object.keys(errors).forEach(key => {
-        errors[key] = ''
-      })
-      
-      // 重置密码要求状态
-      Object.keys(requirements).forEach(key => {
-        requirements[key] = false
-      })
-      
-      // 重置密码强度和等级
-      passwordStrength.value = 0
-      passwordLevel.value = 0
-      
-      // 重置加载状态 - 这是关键！
-      loading.value = false
-      
-      // 强制触发响应式更新
-      nextTick(() => {
-      })
-    }
-    
-    // 监听密码变化，实时更新要求状态
-    watch(() => form.newPassword, (newPassword) => {
-      if (newPassword) {
-        updateRequirements(newPassword)
-      } else {
-        // 密码为空时重置所有状态
-        Object.keys(requirements).forEach(key => {
-          requirements[key] = false
-        })
-        // 重置密码强度
-        passwordStrength.value = 0
-        passwordLevel.value = 0
-      }
-    })
-    
-    // 生命周期
-    onMounted(() => {
-      if (props.visible) {
-        loadPasswordPolicy()
-      }
-      // 如果有初始密码内容，计算强度
-      if (form.newPassword) {
-        updateRequirements(form.newPassword)
-      }
-    })
-    
-    return {
-      loading,
-      policy,
-      form,
-      errors,
-      requirements,
-      passwordStrength,
-      passwordLevel,
-      title,
-      submitText,
-      strengthClass,
-      strengthText,
-      strengthPercentage,
-      isFormValid,
-      validatePassword,
-      validateConfirmPassword,
-      updateRequirements,
-      handleSubmit,
-      handleClose,
-      handleOverlayClick,
-      clearCurrentPasswordError,
-      clearNewPasswordError,
-      clearConfirmPasswordError,
-      handleNewPasswordInput,
-      handleConfirmPasswordInput,
-      resetFormState // 暴露重置函数
-    }
-  }
-}
-</script>
-
-<style scoped>
-.password-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;
-}
-
-.password-modal {
-  background: var(--card-bg);
-  border-radius: 12px;
-  width: 90%;
-  max-width: 500px;
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: 0 8px 32px var(--shadow-color);
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.modal-header h3 {
-  margin: 0;
-  color: var(--text-primary);
-  font-size: 18px;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: var(--text-muted);
-  padding: 4px;
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.close-btn:hover {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-}
-
-.modal-body {
-  padding: 24px;
-}
-
-.form-group {
-  margin-bottom: 20px;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-.form-group input {
-  width: 100%;
-  padding: 12px;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  font-size: 14px;
-  background: var(--input-bg);
-  color: var(--text-primary);
-  transition: all 0.2s;
-  box-sizing: border-box;
-}
-
-.form-group input:focus {
-  outline: none;
-  border-color: var(--accent-color);
-  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
-}
-
-.form-group input.error {
-  border-color: #f44336;
-}
-
-/* 确保禁用状态下的输入框仍然可见 */
-.form-group input:disabled {
-  opacity: 0.7;
-  background: var(--bg-secondary);
-  cursor: not-allowed;
-}
-
-/* 测试焦点样式 */
-.form-group input:focus {
-  outline: 2px solid #ff9800;
-  outline-offset: 2px;
-}
-
-.error-message {
-  color: #f44336;
-  font-size: 12px;
-  margin-top: 4px;
-}
-
-/* 密码强度指示器 */
-.password-strength {
-  margin-top: 12px;
-}
-
-.strength-bar {
-  width: 100%;
-  height: 6px;
-  background: #e0e0e0;
-  border-radius: 3px;
-  overflow: hidden;
-  margin-bottom: 8px;
-}
-
-.strength-fill {
-  height: 100%;
-  transition: width 0.3s ease;
-}
-
-.strength-fill.very-weak {
-  background: #f44336;
-}
-
-.strength-fill.weak {
-  background: #ff9800;
-}
-
-.strength-fill.medium {
-  background: #ffc107;
-}
-
-.strength-fill.strong {
-  background: #4caf50;
-}
-
-.strength-text {
-  font-size: 12px;
-  color: var(--text-secondary);
-  text-align: center;
-}
-
-/* 密码要求提示 */
-.password-requirements {
-  margin-top: 12px;
-  padding: 12px;
-  background: var(--bg-secondary);
-  border-radius: 6px;
-  font-size: 12px;
-}
-
-.requirement {
-  color: var(--text-muted);
-  margin-bottom: 4px;
-  transition: color 0.2s;
-}
-
-.requirement.met {
-  color: #4caf50;
-}
-
-.requirement:last-child {
-  margin-bottom: 0;
-}
-
-/* 操作按钮 */
-.form-actions {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-  margin-top: 30px;
-}
-
-/* 强制修改密码提示 */
-.force-change-notice {
-  margin-top: 20px;
-  padding: 16px;
-  background: #fff3cd;
-  border: 1px solid #ffeaa7;
-  border-radius: 8px;
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-}
-
-.notice-icon {
-  font-size: 20px;
-  flex-shrink: 0;
-}
-
-.notice-text {
-  color: #856404;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.notice-text strong {
-  color: #856404;
-}
-
-.btn {
-  padding: 12px 24px;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.btn-primary {
-  background: var(--accent-color);
-  color: white;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: var(--accent-hover);
-}
-
-.btn-secondary {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  border: 1px solid var(--border-color);
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background: var(--bg-tertiary);
-}
-
-/* 加载动画 */
-.loading-spinner {
-  width: 16px;
-  height: 16px;
-  border: 2px solid transparent;
-  border-top: 2px solid currentColor;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .password-modal {
-    width: 95%;
-    margin: 20px;
-  }
-  
-  .modal-header,
-  .modal-body {
-    padding: 16px;
-  }
-  
-  .form-actions {
-    flex-direction: column;
-  }
-  
-  .btn {
-    width: 100%;
-    justify-content: center;
-  }
-}
-</style>
+<template>
+  <div v-if="visible" class="password-modal-overlay" @click="handleOverlayClick">
+    <div class="password-modal" @click.stop>
+      <div class="modal-header">
+        <h3>{{ title }}</h3>
+        <button class="close-btn" @click="handleClose">
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+      
+      <div class="modal-body">
+        <form @submit.prevent="handleSubmit">
+          <!-- 当前密码 -->
+          <div class="form-group" v-if="!isForceChange">
+            <label>当前密码 *</label>
+            <input 
+              v-model="form.currentPassword" 
+              type="password" 
+              required
+              placeholder="请输入当前密码"
+              @input="clearCurrentPasswordError"
+              :class="{ 'error': errors.currentPassword }"
+              :disabled="loading"
+              ref="currentPasswordInput"
+              tabindex="1"
+              autocomplete="current-password"
+            />
+            <div v-if="errors.currentPassword" class="error-message">
+              {{ errors.currentPassword }}
+            </div>
+          </div>
+          
+          <!-- 新密码 -->
+          <div class="form-group">
+            <label>新密码 *</label>
+            <input 
+              v-model="form.newPassword" 
+              type="password" 
+              required
+              placeholder="请输入新密码"
+              @input="handleNewPasswordInput"
+              @keyup="updateRequirements(form.newPassword)"
+              :class="{ 'error': errors.newPassword }"
+              :disabled="loading"
+              ref="newPasswordInput"
+              tabindex="2"
+              autocomplete="new-password"
+            />
+            <div v-if="errors.newPassword" class="error-message">
+              {{ errors.newPassword }}
+            </div>
+            
+            <!-- 密码强度指示器 -->
+            <div class="password-strength" >
+              <div class="strength-bar">
+                <div 
+                  class="strength-fill" 
+                  :class="strengthClass"
+                  :style="{ width: strengthPercentage + '%' }"
+                ></div>
+              </div>
+              <div class="strength-text">
+                强度: {{ strengthText }} ({{ passwordLevel }}级)
+              </div>
+            </div>
+            
+            <!-- 密码要求提示 -->
+            <div class="password-requirements" >
+              <div class="requirement" :class="{ 'met': requirements.length }">
+                ✓ 密码长度{{ form.newPassword.length }}位
+              </div>
+              <div class="requirement" :class="{ 'met': requirements.uppercase }">
+                ✓ 包含大写字母
+              </div>
+              <div class="requirement" :class="{ 'met': requirements.lowercase }">
+                ✓ 包含小写字母
+              </div>
+              <div class="requirement" :class="{ 'met': requirements.numbers }">
+                ✓ 包含数字
+              </div>
+              <div class="requirement" :class="{ 'met': requirements.special }">
+                ✓ 包含特殊字符
+              </div>
+            </div>
+          </div>
+          
+          <!-- 确认新密码 -->
+          <div class="form-group">
+            <label>确认新密码 *</label>
+            <input 
+              v-model="form.confirmPassword" 
+              type="password" 
+              required
+              placeholder="请再次输入新密码"
+              @input="handleConfirmPasswordInput"
+              :class="{ 'error': errors.confirmPassword }"
+              :disabled="loading"
+              ref="confirmPasswordInput"
+              tabindex="3"
+              autocomplete="new-password"
+            />
+            <div v-if="errors.confirmPassword" class="error-message">
+              {{ errors.confirmPassword }}
+            </div>
+          </div>
+          
+          <!-- 操作按钮 -->
+          <div class="form-actions">
+            <button 
+              type="button" 
+              class="btn btn-secondary" 
+              @click="handleClose"
+              :disabled="loading"
+            >
+              取消
+            </button>
+            <button 
+              type="submit" 
+              class="btn btn-primary" 
+              :disabled="loading || !isFormValid"
+>
+              <span v-if="loading" class="loading-spinner"></span>
+              {{ submitText }}
+            </button>
+          </div>
+          
+          <!-- 强制修改密码提示 -->
+          <div v-if="isForceChange" class="force-change-notice">
+            <div class="notice-icon">⚠️</div>
+            <div class="notice-text">
+              <strong>重要提示：</strong>您的密码已被重置，必须立即修改密码才能继续使用系统。
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue'
+import { userService } from '../services/userService.js'
+
+export default {
+  name: 'PasswordChangeModal',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    isForceChange: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['close', 'success'],
+  setup(props, { emit }) {
+    const loading = ref(false)
+    const policy = ref({
+      minLength: 6,
+      minCharTypes: 1,
+      preventReuse: 3,
+      level: 1,
+      minRequiredLevel: 1,
+      requireUppercase: false,
+      requireLowercase: false,
+      requireNumbers: false,
+      requireSpecial: false
+    })
+    
+    const form = reactive({
+      currentPassword: '',
+      newPassword: '',
+      confirmPassword: ''
+    })
+    
+    const errors = reactive({
+      currentPassword: '',
+      newPassword: '',
+      confirmPassword: ''
+    })
+    
+    const requirements = reactive({
+      length: false,
+      uppercase: false,
+      lowercase: false,
+      numbers: false,
+      special: false
+    })
+    
+    const passwordStrength = ref(0)
+    const passwordLevel = ref(0)
+    
+    // 计算属性
+    const title = computed(() => {
+      return props.isForceChange ? '强制修改密码' : '修改密码'
+    })
+    
+    const submitText = computed(() => {
+      return props.isForceChange ? '确认修改' : '修改密码'
+    })
+    
+    const strengthClass = computed(() => {
+      if (passwordStrength.value >= 4) return 'strong'
+      if (passwordStrength.value >= 3) return 'medium'
+      if (passwordStrength.value >= 2) return 'weak'
+      return 'very-weak'
+    })
+    
+    const strengthText = computed(() => {
+      if (passwordStrength.value >= 4) return '强'
+      if (passwordStrength.value >= 3) return '中'
+      if (passwordStrength.value >= 2) return '弱'
+      return '很弱'
+    })
+    
+    const strengthPercentage = computed(() => {
+      // 将0-5的等级转换为0-100的百分比显示
+      return (passwordStrength.value / 5) * 100
+    })
+    
+    const isFormValid = computed(() => {
+      if (props.isForceChange) {
+        return form.newPassword && form.confirmPassword && 
+               form.newPassword === form.confirmPassword && 
+               !errors.newPassword && !errors.confirmPassword
+      }
+      return form.currentPassword && form.newPassword && form.confirmPassword &&
+             form.newPassword === form.confirmPassword &&
+             !errors.currentPassword && !errors.newPassword && !errors.confirmPassword
+    })
+    
+    // 方法
+    const loadPasswordPolicy = async () => {
+      try {
+        const response = await userService.getPasswordPolicy()
+        
+        // 修复：直接检查response.data的结构
+        if (response.data && response.data.code === 200 && response.data.data) {
+          policy.value = response.data.data
+        } else if (response && response.code === 200 && response.data) {
+          // 备用检查：如果response.data不存在，直接检查response
+          policy.value = response.data
+        } else {
+          console.warn('密码策略响应格式不正确:', response)
+          console.warn('尝试解析响应结构...')
+          if (response.data) {
+            console.warn('response.data.code:', response.data.code)
+            console.warn('response.data.data:', response.data.data)
+          }
+          if (response) {
+            console.warn('response.code:', response.code)
+            console.warn('response.data:', response.data)
+          }
+          // 使用默认策略作为后备
+          policy.value = {
+            minLength: 6,
+            minCharTypes: 1,
+            preventReuse: 3,
+            level: 1,
+            minRequiredLevel: 1,
+            requireUppercase: false,
+            requireLowercase: false,
+            requireNumbers: false,
+            requireSpecial: false
+          }
+        }
+      } catch (error) {
+        console.error('加载密码策略失败:', error)
+        // 使用默认策略作为后备
+        policy.value = {
+          minLength: 6,
+          minCharTypes: 1,
+          preventReuse: 3,
+          level: 1,
+          minRequiredLevel: 1,
+          requireUppercase: false,
+          requireLowercase: false,
+          requireNumbers: false,
+          requireSpecial: false
+        }
+      }
+    }
+    
+    const validatePassword = async () => {
+      errors.newPassword = ''
+      
+      if (!form.newPassword) {
+        // 如果密码为空，重置所有要求状态
+        updateRequirements('')
+        return
+      }
+      
+      try {
+        const response = await userService.validatePassword(form.newPassword)
+        
+        // 修复：检查多种可能的响应结构
+        let result = null
+        if (response.data && response.data.code === 200 && response.data.data) {
+          result = response.data.data
+        } else if (response && response.code === 200 && response.data) {
+          result = response.data
+        }
+        
+        if (result) {
+          
+          if (!result.is_valid) {
+            // 确保错误信息是数组格式
+            if (Array.isArray(result.errors)) {
+              errors.newPassword = result.errors.join('; ')
+            } else if (typeof result.errors === 'string') {
+              errors.newPassword = result.errors
+            } else {
+              errors.newPassword = '密码验证失败'
+            }
+          }
+          
+          passwordStrength.value = result.strength || 0
+          passwordLevel.value = result.level || 0
+          
+          // 更新要求满足状态
+          updateRequirements(form.newPassword)
+        } else {
+          console.warn('密码验证响应格式不正确:', response)
+          // 即使验证失败，也要更新要求状态
+          updateRequirements(form.newPassword)
+        }
+      } catch (error) {
+        console.error('密码验证失败:', error)
+        // 即使验证失败，也要更新要求状态
+        updateRequirements(form.newPassword)
+      }
+    }
+    
+    const updateRequirements = (password) => {
+      
+      // 重置所有状态
+      requirements.length = false
+      requirements.uppercase = false
+      requirements.lowercase = false
+      requirements.numbers = false
+      requirements.special = false
+      
+      // 如果密码为空，直接返回
+      if (!password || password.length === 0) {
+        return
+      }
+      
+      let hasUppercase = false
+      let hasLowercase = false
+      let hasNumbers = false
+      let hasSpecial = false
+      
+      for (const char of password) {
+        // 使用更准确的字符类型检测
+        const charCode = char.charCodeAt(0)
+        
+        if (charCode >= 65 && charCode <= 90) { // A-Z
+          hasUppercase = true
+        } else if (charCode >= 97 && charCode <= 122) { // a-z
+          hasLowercase = true
+        } else if (charCode >= 48 && charCode <= 57) { // 0-9
+          hasNumbers = true
+        } else {
+          // 特殊字符：包括标点符号、符号、空格等
+          hasSpecial = true
+        }
+      }
+      
+      // 更新要求状态
+      requirements.length = password.length >= 6 // 要求至少6位
+      requirements.uppercase = hasUppercase
+      requirements.lowercase = hasLowercase
+      requirements.numbers = hasNumbers
+      requirements.special = hasSpecial
+      
+      // 计算字符类型数量
+      let charTypes = 0
+      if (hasUppercase) charTypes++
+      if (hasLowercase) charTypes++
+      if (hasNumbers) charTypes++
+      if (hasSpecial) charTypes++
+      
+      // 计算密码强度
+      const strength = calculatePasswordStrength(password, charTypes)
+      passwordStrength.value = strength
+      passwordLevel.value = strength
+    }
+    
+    // 前端密码强度计算方法
+    const calculatePasswordStrength = (password, charTypes) => {
+      // 从最高等级开始判断，一旦满足条件就返回对应等级
+      
+      // 5级：长度>=8，字符类型>=4
+      if (password.length >= 8 && charTypes >= 4) {
+        return 5
+      }
+      
+      // 4级：长度>=8，字符类型>=3
+      if (password.length >= 8 && charTypes >= 3) {
+        return 4
+      }
+      
+      // 3级：长度>=6，字符类型>=3
+      if (password.length >= 6 && charTypes >= 3) {
+        return 3
+      }
+      
+      // 2级：长度>=6，字符类型>=2
+      if (password.length >= 6 && charTypes >= 2) {
+        return 2
+      }
+      
+      // 1级：长度>=6，字符类型>=1
+      if (password.length >= 6 && charTypes >= 1) {
+        return 1
+      }
+      
+      // 0级：长度>=1，字符类型>=1（任何密码都至少有一种字符类型）
+      if (password.length >= 1) {
+        return 0
+      }
+      
+      // 如果连0级都不满足，返回0
+      return 0
+    }
+    
+    const validateConfirmPassword = () => {
+      errors.confirmPassword = ''
+      
+      if (form.newPassword !== form.confirmPassword) {
+        errors.confirmPassword = '两次输入的密码不一致'
+      }
+    }
+    
+    const handleSubmit = async () => {
+      if (!isFormValid.value) return
+      
+      loading.value = true
+      
+      // 清除之前的错误信息
+      Object.keys(errors).forEach(key => {
+        errors[key] = ''
+      })
+      
+      try {
+        const requestData = {
+          current_password: form.currentPassword,
+          new_password: form.newPassword,
+          confirm_password: form.confirmPassword
+        }
+        
+        const response = await userService.changePassword(requestData)
+        
+        // 成功处理
+        // 显示成功消息
+        if (window.showToast) {
+          window.showToast({
+            type: 'success',
+            title: '密码修改成功',
+            content: '您的密码已成功修改'
+          })
+        } else {
+          // 如果没有全局toast，使用alert作为后备
+          alert('密码修改成功！')
+        }
+        
+        // 延迟关闭弹窗，让用户看到成功提示
+        setTimeout(() => {
+          emit('success')
+          handleClose()
+        }, 1500)
+        
+      } catch (error) {
+        
+        // 改进错误信息处理
+        let errorMessage = '修改密码失败，请重试'
+        let targetField = 'newPassword'
+        
+        if (error.response?.data) {
+          const responseData = error.response.data
+          
+          // 处理不同的错误情况
+          if (responseData.error) {
+            // 优先使用error字段，这通常包含具体的错误信息
+            errorMessage = responseData.error
+            
+            // 根据错误信息内容判断应该显示在哪个字段
+            if (errorMessage.includes('当前密码') || errorMessage.includes('current password')) {
+              targetField = 'currentPassword'
+            } else if (errorMessage.includes('新密码') || errorMessage.includes('new password')) {
+              targetField = 'newPassword'
+            } else if (errorMessage.includes('确认密码') || errorMessage.includes('confirm password')) {
+              targetField = 'confirmPassword'
+            }
+          } else if (responseData.message) {
+            // 如果没有error字段，使用message字段
+            errorMessage = responseData.message
+            
+            // 根据错误信息内容判断应该显示在哪个字段
+            if (errorMessage.includes('当前密码') || errorMessage.includes('current password')) {
+              targetField = 'currentPassword'
+            } else if (errorMessage.includes('新密码') || errorMessage.includes('new password')) {
+              targetField = 'newPassword'
+            } else if (errorMessage.includes('确认密码') || errorMessage.includes('confirm password')) {
+              targetField = 'confirmPassword'
+            }
+          }
+        } else if (error.message) {
+          errorMessage = error.message
+        }
+        
+        // 显示错误信息
+        errors[targetField] = errorMessage
+        
+        // 如果是强制修改密码模式，错误信息也显示在newPassword字段
+        if (props.isForceChange && targetField === 'currentPassword') {
+          errors.newPassword = errorMessage
+        }
+      } finally {
+        loading.value = false
+      }
+    }
+    
+    const handleClose = () => {
+      if (loading.value) return
+      
+      // 使用统一的重置函数
+      resetFormState()
+      
+      emit('close')
+    }
+    
+    const handleOverlayClick = () => {
+      // 密码修改模态窗不应该在点击外部区域时关闭
+      // 避免用户意外丢失已输入的密码内容
+      // 只有通过明确的取消按钮或关闭按钮才能关闭
+      return false
+    }
+
+    const clearCurrentPasswordError = () => {
+      errors.currentPassword = ''
+    }
+
+    const clearNewPasswordError = () => {
+      errors.newPassword = ''
+    }
+
+    const clearConfirmPasswordError = () => {
+      errors.confirmPassword = ''
+    }
+
+    const handleNewPasswordInput = () => {
+      clearNewPasswordError()
+      validatePassword()
+    }
+
+    const handleConfirmPasswordInput = () => {
+      clearConfirmPasswordError()
+      validateConfirmPassword()
+    }
+    
+    // 监听器
+    watch(() => props.visible, (newVal) => {
+      if (newVal) {
+        
+        // 每次打开弹窗时，确保完全重置所有状态
+        resetFormState()
+        
+        loadPasswordPolicy()
+        
+        // 延迟测试输入框焦点和强制聚焦
+        nextTick(() => {
+          if (!props.isForceChange && form.currentPassword === '') {
+            // 尝试强制聚焦到第一个输入框
+            try {
+              const currentPasswordInput = document.querySelector('input[type="password"]')
+              if (currentPasswordInput) {
+                currentPasswordInput.focus()
+              }
+            } catch (error) {
+              console.error('聚焦失败:', error)
+            }
+          } else {
+            // 尝试强制聚焦到新密码输入框
+            try {
+              const newPasswordInput = document.querySelectorAll('input[type="password"]')[1]
+              if (newPasswordInput) {
+                newPasswordInput.focus()
+              }
+            } catch (error) {
+              console.error('聚焦失败:', error)
+            }
+          }
+        })
+      }
+    })
+    
+    // 重置表单状态的函数
+    const resetFormState = () => {
+      
+      // 重置表单数据
+      form.currentPassword = ''
+      form.newPassword = ''
+      form.confirmPassword = ''
+      
+      // 清除所有错误信息
+      Object.keys(errors).forEach(key => {
+        errors[key] = ''
+      })
+      
+      // 重置密码要求状态
+      Object.keys(requirements).forEach(key => {
+        requirements[key] = false
+      })
+      
+      // 重置密码强度和等级
+      passwordStrength.value = 0
+      passwordLevel.value = 0
+      
+      // 重置加载状态 - 这是关键！
+      loading.value = false
+      
+      // 强制触发响应式更新
+      nextTick(() => {
+      })
+    }
+    
+    // 监听密码变化，实时更新要求状态
+    watch(() => form.newPassword, (newPassword) => {
+      if (newPassword) {
+        updateRequirements(newPassword)
+      } else {
+        // 密码为空时重置所有状态
+        Object.keys(requirements).forEach(key => {
+          requirements[key] = false
+        })
+        // 重置密码强度
+        passwordStrength.value = 0
+        passwordLevel.value = 0
+      }
+    })
+    
+    // 生命周期
+    onMounted(() => {
+      if (props.visible) {
+        loadPasswordPolicy()
+      }
+      // 如果有初始密码内容，计算强度
+      if (form.newPassword) {
+        updateRequirements(form.newPassword)
+      }
+    })
+    
+    return {
+      loading,
+      policy,
+      form,
+      errors,
+      requirements,
+      passwordStrength,
+      passwordLevel,
+      title,
+      submitText,
+      strengthClass,
+      strengthText,
+      strengthPercentage,
+      isFormValid,
+      validatePassword,
+      validateConfirmPassword,
+      updateRequirements,
+      handleSubmit,
+      handleClose,
+      handleOverlayClick,
+      clearCurrentPasswordError,
+      clearNewPasswordError,
+      clearConfirmPasswordError,
+      handleNewPasswordInput,
+      handleConfirmPasswordInput,
+      resetFormState // 暴露重置函数
+    }
+  }
+}
+</script>
+
+<style scoped>
+.password-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;
+}
+
+.password-modal {
+  background: var(--card-bg);
+  border-radius: 12px;
+  width: 90%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 32px var(--shadow-color);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.modal-header h3 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 18px;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: var(--text-muted);
+  padding: 4px;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.close-btn:hover {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.modal-body {
+  padding: 24px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.form-group input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  font-size: 14px;
+  background: var(--input-bg);
+  color: var(--text-primary);
+  transition: all 0.2s;
+  box-sizing: border-box;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
+}
+
+.form-group input.error {
+  border-color: #f44336;
+}
+
+/* 确保禁用状态下的输入框仍然可见 */
+.form-group input:disabled {
+  opacity: 0.7;
+  background: var(--bg-secondary);
+  cursor: not-allowed;
+}
+
+/* 测试焦点样式 */
+.form-group input:focus {
+  outline: 2px solid #ff9800;
+  outline-offset: 2px;
+}
+
+.error-message {
+  color: #f44336;
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+/* 密码强度指示器 */
+.password-strength {
+  margin-top: 12px;
+}
+
+.strength-bar {
+  width: 100%;
+  height: 6px;
+  background: #e0e0e0;
+  border-radius: 3px;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.strength-fill {
+  height: 100%;
+  transition: width 0.3s ease;
+}
+
+.strength-fill.very-weak {
+  background: #f44336;
+}
+
+.strength-fill.weak {
+  background: #ff9800;
+}
+
+.strength-fill.medium {
+  background: #ffc107;
+}
+
+.strength-fill.strong {
+  background: #4caf50;
+}
+
+.strength-text {
+  font-size: 12px;
+  color: var(--text-secondary);
+  text-align: center;
+}
+
+/* 密码要求提示 */
+.password-requirements {
+  margin-top: 12px;
+  padding: 12px;
+  background: var(--bg-secondary);
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+.requirement {
+  color: var(--text-muted);
+  margin-bottom: 4px;
+  transition: color 0.2s;
+}
+
+.requirement.met {
+  color: #4caf50;
+}
+
+.requirement:last-child {
+  margin-bottom: 0;
+}
+
+/* 操作按钮 */
+.form-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 30px;
+}
+
+/* 强制修改密码提示 */
+.force-change-notice {
+  margin-top: 20px;
+  padding: 16px;
+  background: #fff3cd;
+  border: 1px solid #ffeaa7;
+  border-radius: 8px;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.notice-icon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.notice-text {
+  color: #856404;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.notice-text strong {
+  color: #856404;
+}
+
+.btn {
+  padding: 12px 24px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--accent-color);
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.btn-secondary {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--bg-tertiary);
+}
+
+/* 加载动画 */
+.loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid transparent;
+  border-top: 2px solid currentColor;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .password-modal {
+    width: 95%;
+    margin: 20px;
+  }
+  
+  .modal-header,
+  .modal-body {
+    padding: 16px;
+  }
+  
+  .form-actions {
+    flex-direction: column;
+  }
+  
+  .btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/gofaster/app/src/renderer/modules/user-management/views/UserManagement.vue b/gofaster/app/src/renderer/modules/user-management/views/UserManagement.vue
index 6d98ccd..16d8c52 100644
--- a/gofaster/app/src/renderer/modules/user-management/views/UserManagement.vue
+++ b/gofaster/app/src/renderer/modules/user-management/views/UserManagement.vue
@@ -71,7 +71,7 @@
                 <button class="btn btn-sm btn-primary" @click="assignRoles(user)">
                   <i class="fas fa-user-shield"></i>
                 </button>
-                <button class="btn btn-sm btn-danger" @click="deleteUser(user.id)" name="usermanagement-25s1yv">>
+                <button class="btn btn-sm btn-danger" @click="deleteUser(user.id)">
                   <i class="fas fa-trash"></i>
                 </button>
               </div>
@@ -200,7 +200,7 @@
               <button type="button" class="btn btn-secondary" @click="closeModal">
                 取消
               </button>
-              <button type="submit" class="btn btn-primary" name="usermanagement-elrh6q">>
+              <button type="submit" class="btn btn-primary">
                 {{ showEditUserModal ? '更新' : '创建' }}
               </button>
             </div>
diff --git a/gofaster/app/src/renderer/modules/user-management/views/UserProfile.vue b/gofaster/app/src/renderer/modules/user-management/views/UserProfile.vue
index 081c414..9338279 100644
--- a/gofaster/app/src/renderer/modules/user-management/views/UserProfile.vue
+++ b/gofaster/app/src/renderer/modules/user-management/views/UserProfile.vue
@@ -16,7 +16,7 @@
       <div class="error-icon"><i class="fas fa-exclamation-triangle"></i></div>
       <h3>加载失败</h3>
       <p>{{ error }}</p>
-      <button @click="loadUserProfile" class="retry-btn" name="userprofile-sdddz1">>
+      <button @click="loadUserProfile" class="retry-btn">
         <i class="fas fa-redo"></i> 重试
       </button>
     </div>