优化页面、修复BUG

2026-06-26 17:00:02 +08:00
parent 396272908b
commit e4ab62ab7e
44 changed files with 1058 additions and 688 deletions
--- a/client/src/components/admin/AdminLayout.vue
+++ b/client/src/components/admin/AdminLayout.vue
@@ -28,15 +28,20 @@
      
      <!-- User Footer -->
      <div class="p-4 border-t border-white/5">
-        <div class="flex items-center gap-3">
-           <div class="w-8 h-8 rounded-full bg-art-accent/10 flex items-center justify-center text-art-accent font-bold text-xs shrink-0">
-             {{ currentUser.username?.charAt(0).toUpperCase() || 'A' }}
+        <router-link
+          to="/admin/profile"
+          class="flex items-center gap-3 rounded-md p-1 -m-1 hover:bg-white/5 transition-colors"
+          :class="{ 'justify-center': !isSidebarOpen }"
+        >
+           <div class="w-8 h-8 rounded-full bg-art-accent/10 flex items-center justify-center text-art-accent font-bold text-xs shrink-0 overflow-hidden">
+             <img v-if="currentUser.avatar" :src="currentUser.avatar" :alt="currentUser.username" class="w-full h-full object-cover" />
+             <span v-else>{{ currentUser.username?.charAt(0).toUpperCase() || 'A' }}</span>
           </div>
           <div class="min-w-0 transition-opacity duration-300" :class="{ 'opacity-0 w-0': !isSidebarOpen }">
             <p class="text-sm font-medium text-white truncate">{{ currentUser.username }}</p>
-             <p class="text-xs text-art-muted truncate">Administrator</p>
+             <p class="text-xs text-art-muted truncate">个人中心</p>
           </div>
-        </div>
+        </router-link>
      </div>
    </aside>

@@ -84,7 +89,11 @@
              v-if="isUserDropdownOpen"
              class="absolute right-0 mt-2 w-48 bg-art-admin-card border border-white/10 rounded-lg shadow-xl py-1 z-50 origin-top-right animate-reveal"
            >
-              <button @click="handleChangePassword" class="flex items-center gap-2 w-full px-4 py-2.5 text-sm text-art-muted hover:text-white hover:bg-white/5 text-left transition-colors">
+              <button @click="goToProfile" class="flex items-center gap-2 w-full px-4 py-2.5 text-sm text-art-muted hover:text-white hover:bg-white/5 text-left transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                个人中心
+              </button>
+              <button @click="goToProfilePassword" class="flex items-center gap-2 w-full px-4 py-2.5 text-sm text-art-muted hover:text-white hover:bg-white/5 text-left transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                修改密码
              </button>
@@ -116,12 +125,13 @@ import { useToast } from '../../composables/useToast'
 import { useAuth } from '../../composables/useAuth'
 import SessionExpiredModal from './SessionExpiredModal.vue'
 import AdminMenuItem from './AdminMenuItem.vue'
+import { getCurrentUser } from '../../services/api'
 import { openActiveMenuAncestors, findRouteTitle, type MenuItem } from './adminMenuTypes'

 const router = useRouter()
 const route = useRoute()
 const toast = useToast()
-const { logout, scheduleExpiryCheck, getUser, isAuthenticated } = useAuth()
+const { logout, scheduleExpiryCheck, getUser, isAuthenticated, setUser } = useAuth()
 const isSidebarOpen = ref(true)
 const currentUser = ref(getUser())

@@ -139,8 +149,13 @@ const closeDropdown = (e: MouseEvent) => {
  }
 }

-const handleChangePassword = () => {
-  toast.showToast('功能开发中...', 'success')
+const goToProfile = () => {
+  router.push('/admin/profile')
+  isUserDropdownOpen.value = false
+}
+
+const goToProfilePassword = () => {
+  router.push({ path: '/admin/profile', hash: '#password' })
  isUserDropdownOpen.value = false
 }

@@ -266,6 +281,15 @@ onMounted(() => {
  scheduleExpiryCheck()
  document.addEventListener('click', closeDropdown)
  openActiveMenuAncestors(menuItems.value, isActive)
+
+  getCurrentUser()
+    .then(user => {
+      currentUser.value = user
+      setUser(user)
+    })
+    .catch(() => {
+      currentUser.value = getUser()
+    })
 })

 watch(() => route.path, () => {
--- a/client/src/components/admin/AdminTableFilter.vue
+++ b/client/src/components/admin/AdminTableFilter.vue
@@ -40,7 +40,7 @@
      </button>

      <div class="filter-actions">
-        <button type="button" class="admin-btn-secondary" @click="emit('search')">查询</button>
+        <button type="button" class="admin-btn-search" @click="emit('search')">查询</button>
        <button type="button" class="admin-btn-secondary opacity-70" @click="emit('reset')">重置</button>
      </div>
    </div>
--- a/client/src/components/admin/ImagePicker.vue
+++ b/client/src/components/admin/ImagePicker.vue
@@ -24,15 +24,30 @@

      <!-- 操作区 -->
      <div class="flex-1 min-w-0 space-y-2">
+        <div
+          @click="triggerFileInput"
+          @dragover.prevent="handleDragOver"
+          @dragenter.prevent="handleDragEnter"
+          @dragleave.prevent="handleDragLeave"
+          @drop.prevent="handleDrop"
+          class="upload-area border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors"
+          :class="[
+            isDragging ? 'border-art-accent bg-art-accent/5' : 'border-white/20 hover:border-art-accent/50',
+            disabled || uploading ? 'opacity-50 cursor-not-allowed' : ''
+          ]"
+        >
+          <input
+            ref="fileInput"
+            type="file"
+            :accept="accept"
+            class="hidden"
+            :disabled="disabled"
+            @change="handleFileSelect"
+          />
+          <p class="text-xs text-art-muted">点击或拖拽图片到此处上传</p>
+        </div>
+
        <div class="flex flex-wrap gap-2">
-          <button
-            type="button"
-            class="admin-btn-secondary text-xs"
-            :disabled="disabled || uploading"
-            @click="triggerFileInput"
-          >
-            {{ uploading ? '上传中...' : '上传图片' }}
-          </button>
          <button
            type="button"
            class="admin-btn-secondary text-xs"
@@ -53,18 +68,10 @@
        </div>
        <p v-if="hint" class="text-xs text-art-muted/60">{{ hint }}</p>
        <p v-if="error" class="text-xs text-red-400">{{ error }}</p>
+        <p v-if="uploading" class="text-xs text-art-accent">上传中...</p>
      </div>
    </div>

-    <input
-      ref="fileInput"
-      type="file"
-      :accept="accept"
-      class="hidden"
-      :disabled="disabled"
-      @change="handleFileSelect"
-    />
-
    <AttachmentLibraryModal
      :show="showLibraryModal"
      :multiple="false"
@@ -78,6 +85,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useToast } from '../../composables/useToast'
+import { useImageDropUpload } from '../../composables/useImageDropUpload'
 import { API_BASE, authFetch, parseApiResponse } from '../../services/api'
 import AttachmentLibraryModal from './AttachmentLibraryModal.vue'

@@ -122,6 +130,11 @@ const previewSizeClass = computed(() => {
  return props.size === 'sm' ? 'w-20 h-20' : props.size === 'lg' ? 'w-40 h-40' : 'w-28 h-28'
 })

+const { isDragging, handleDragOver, handleDragEnter, handleDragLeave, handleDrop } = useImageDropUpload({
+  disabled: () => props.disabled || uploading.value,
+  onFiles: (files) => uploadFile(files[0]),
+})
+
 const triggerFileInput = () => {
  if (props.disabled || uploading.value) return
  fileInput.value?.click()
@@ -187,3 +200,12 @@ const handleLibrarySelect = (urls: string[]) => {
  }
 }
 </script>
+
+<style scoped>
+.upload-area {
+  min-height: 72px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
--- a/client/src/components/admin/ImageUpload.vue
+++ b/client/src/components/admin/ImageUpload.vue
@@ -53,6 +53,7 @@
        <img :src="imageUrl" alt="Preview" class="w-full h-auto rounded-lg max-h-64 object-contain bg-white/5" />
        <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center gap-2">
          <button
+            type="button"
            @click.stop="() => removeImage()"
            class="px-4 py-2 bg-red-500/80 text-white rounded hover:bg-red-500 transition-colors text-sm"
            :disabled="disabled"
@@ -60,6 +61,7 @@
            删除
          </button>
          <button
+            type="button"
            @click.stop="triggerFileInput"
            class="px-4 py-2 bg-art-accent text-black rounded hover:opacity-90 transition-colors text-sm"
            :disabled="disabled"
@@ -94,6 +96,7 @@
            <img :src="url" :alt="`Image ${index + 1}`" class="w-full h-full object-cover" />
            <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
              <button
+                type="button"
                @click="() => removeImage(index)"
                class="px-3 py-1.5 bg-red-500/80 text-white rounded hover:bg-red-500 transition-colors text-xs"
                :disabled="disabled"