合作页面的内容

client/src/components/admin/AdminLayout.vue

@@ -45,12 +45,7 @@
           </li>
         </ul>
       </nav>
-      <div class="sidebar-footer">
-        <button @click="handleLogout" class="logout-btn">
-          <span class="nav-icon">🚪</span>
-          <span class="nav-text">退出登录</span>
-        </button>
-      </div>
+      <!-- Sidebar Footer removed as per request -->
     </aside>
 
     <!-- Main Content Area -->
@@ -63,9 +58,33 @@
           </button>
         </div>
         <div class="header-right">
-          <div class="user-info">
-            <span class="username">{{ currentUser.username }}</span>
-            <span class="role">({{ currentUser.role }})</span>
+          <div class="user-dropdown relative" ref="dropdownRef">
+            <button class="user-info-btn" @click="toggleUserDropdown">
+              <span class="username">{{ currentUser.username }}</span>
+              <span class="role">({{ currentUser.role }})</span>
+              <span class="arrow" :class="{ 'rotated': isUserDropdownOpen }">▼</span>
+            </button>
+            
+            <div v-if="isUserDropdownOpen" class="dropdown-menu">
+              <div class="dropdown-header">
+                <span class="user-email">管理员</span>
+              </div>
+              <ul class="dropdown-list">
+                <li>
+                  <button @click="handleChangePassword" class="dropdown-item">
+                    <span class="icon">🔒</span>
+                    修改密码
+                  </button>
+                </li>
+                <li class="divider"></li>
+                <li>
+                  <button @click="handleLogout" class="dropdown-item text-red-400">
+                    <span class="icon">🚪</span>
+                    退出登录
+                  </button>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </header>
@@ -79,7 +98,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useToast } from '../../composables/useToast'
 
@@ -88,6 +107,26 @@ const toast = useToast()
 const isSidebarOpen = ref(true)
 const currentUser = ref(JSON.parse(localStorage.getItem('user') || '{}'))
 
+// Dropdown logic
+const isUserDropdownOpen = ref(false)
+const dropdownRef = ref<HTMLElement | null>(null)
+
+const toggleUserDropdown = () => {
+  isUserDropdownOpen.value = !isUserDropdownOpen.value
+}
+
+const closeDropdown = (e: MouseEvent) => {
+  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {
+    isUserDropdownOpen.value = false
+  }
+}
+
+const handleChangePassword = () => {
+  // Implement change password logic or navigate to page
+  toast.showToast('功能开发中...', 'info')
+  isUserDropdownOpen.value = false
+}
+
 interface MenuItem {
   title: string
   icon: string
@@ -173,6 +212,11 @@ onMounted(() => {
   if (!token) {
     router.push('/login')
   }
+  document.addEventListener('click', closeDropdown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeDropdown)
 })
 </script>
 
@@ -184,6 +228,105 @@ onMounted(() => {
   color: #ececec;
 }
 
+/* User Dropdown Styles */
+.user-dropdown {
+  position: relative;
+}
+
+.user-info-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 0.375rem;
+  transition: background-color 0.2s;
+}
+
+.user-info-btn:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.arrow {
+  font-size: 0.7rem;
+  color: rgba(255, 255, 255, 0.5);
+  transition: transform 0.2s;
+}
+
+.arrow.rotated {
+  transform: rotate(180deg);
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 0.5rem;
+  width: 200px;
+  background: #1a1a1a;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  z-index: 100;
+  overflow: hidden;
+  animation: slideIn 0.2s ease-out;
+}
+
+@keyframes slideIn {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.dropdown-header {
+  padding: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.user-email {
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.5);
+  display: block;
+}
+
+.dropdown-list {
+  list-style: none;
+  padding: 0.5rem 0;
+  margin: 0;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background: transparent;
+  border: none;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.9rem;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.2s;
+}
+
+.dropdown-item:hover {
+  background-color: rgba(212, 179, 131, 0.1);
+  color: #d4b383;
+}
+
+.dropdown-item .icon {
+  font-size: 1.1rem;
+}
+
+.divider {
+  height: 1px;
+  background-color: rgba(255, 255, 255, 0.05);
+  margin: 0.5rem 0;
+}
+
 /* Sidebar Styles */
 .admin-sidebar {
   width: 250px;