优化页面、修复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/AuthorInfo.vue
+++ b/client/src/components/AuthorInfo.vue
@@ -1,10 +1,14 @@
 <template>
-  <div
-    class="author-info flex items-center gap-2 min-w-0"
+  <component
+    :is="clickable && userId ? 'button' : 'div'"
+    type="button"
+    class="author-info flex items-center gap-2 min-w-0 text-left"
    :class="[
      variant === 'compact' ? 'gap-2' : 'gap-3 md:gap-4',
-      themeClasses.wrapper
+      themeClasses.wrapper,
+      clickable && userId ? 'cursor-pointer group/author hover:opacity-90 transition-opacity border-0 bg-transparent p-0 m-0' : ''
    ]"
+    @click="handleClick"
  >
    <div
      class="shrink-0 overflow-hidden flex items-center justify-center border rounded-full"
@@ -47,11 +51,12 @@
        用户#{{ userId }}
      </div>
    </div>
-  </div>
+  </component>
 </template>

 <script setup lang="ts">
 import { computed } from 'vue'
+import { useUserProfileModal } from '../composables/useUserProfileModal'

 const props = withDefaults(defineProps<{
  name?: string
@@ -62,13 +67,23 @@ const props = withDefaults(defineProps<{
  variant?: 'full' | 'compact'
  theme?: 'default' | 'onDark' | 'onImage'
  showEmail?: boolean
+  clickable?: boolean
 }>(), {
  size: 'sm',
  variant: 'compact',
  theme: 'default',
-  showEmail: true
+  showEmail: true,
+  clickable: true,
 })

+const { openUserProfile } = useUserProfileModal()
+
+const handleClick = () => {
+  if (props.clickable && props.userId) {
+    openUserProfile(props.userId)
+  }
+}
+
 const displayName = computed(() => {
  if (props.name) return props.name
  if (props.userId) return `用户#${props.userId}`
--- a/client/src/components/Footer.vue
+++ b/client/src/components/Footer.vue
@@ -1,14 +1,54 @@
 <template>
  <footer class="py-8 text-center border-t border-white/5 relative z-10">
    <div class="flex justify-center items-center gap-4 mb-4">
+      <a
+        v-if="contactEmail"
+        :href="`mailto:${contactEmail}`"
+        class="text-xs text-art-muted/50 hover:text-art-accent transition-colors"
+      >
+        {{ contactEmail }}
+      </a>
      <a @click="openAdmin" class="text-xs text-art-muted/30 hover:text-art-accent cursor-pointer">管理入口</a>
    </div>
-    <p class="text-art-muted text-xs font-mono tracking-widest opacity-50">&copy; 2026 年糕崽崽. 保留所有权利.</p>
+    <p v-if="footerIcp" class="text-art-muted text-xs font-mono tracking-widest opacity-50 mb-2">
+      <a
+        v-if="icpHref"
+        :href="icpHref"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="hover:text-art-accent transition-colors"
+      >
+        {{ footerIcp }}
+      </a>
+      <span v-else>{{ footerIcp }}</span>
+    </p>
+    <p class="text-art-muted text-xs font-mono tracking-widest opacity-50">
+      &copy; {{ currentYear }} {{ siteTitle }}. 保留所有权利.
+    </p>
  </footer>
 </template>

 <script setup lang="ts">
+import { computed } from 'vue'
+import { usePublicSettings } from '../composables/usePublicSettings'
+
+const { cache } = usePublicSettings()
+
+const currentYear = new Date().getFullYear()
+const siteTitle = computed(() => cache.value?.site_title?.trim() || '年糕崽崽')
+const footerIcp = computed(() => cache.value?.footer_icp?.trim() || '')
+const contactEmail = computed(() => cache.value?.contact_email?.trim() || '')
+
+const icpHref = computed(() => {
+  const icp = footerIcp.value
+  if (!icp) return null
+  if (/ICP|备案|备\d|icp/i.test(icp) || /\d{8,}/.test(icp)) {
+    return 'https://beian.miit.gov.cn/'
+  }
+  return null
+})
+
 const openAdmin = () => {
  window.open('/admin', '_blank')
 }
-</script>
+</script>
--- a/client/src/components/Header.vue
+++ b/client/src/components/Header.vue
@@ -185,11 +185,12 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { getPublicSettings } from '../services/api'
+import { usePublicSettings } from '../composables/usePublicSettings'
 import Icon from './Icon.vue'

 const router = useRouter()
 const route = useRoute()
+const { cache, getStringSetting } = usePublicSettings()
 const activeNav = ref('home')
 const siteTitle = ref<string>('')
 const visibleMenus = ref<string[]>(['home', 'blog', 'columns', 'works', 'snippets', 'about', 'services'])
@@ -211,31 +212,30 @@ const updateActiveNav = () => {
  else if (path === '/about') activeNav.value = 'about'
 }

-const loadSiteSettings = async () => {
-  try {
-    const settings = await getPublicSettings()
-    if (settings.site_title) {
-      siteTitle.value = settings.site_title
-    }
+const applySettingsFromCache = () => {
+  const title = getStringSetting('site_title')
+  if (title) siteTitle.value = title

-    if (settings.visible_menus) {
-      try {
-        const parsed = JSON.parse(settings.visible_menus)
-        if (Array.isArray(parsed)) {
-          visibleMenus.value = parsed
-        }
-      } catch {
-        visibleMenus.value = settings.visible_menus.split(',').map((m: string) => m.trim()).filter((m: string) => m)
+  const menusRaw = getStringSetting('visible_menus')
+  if (menusRaw) {
+    try {
+      const parsed = JSON.parse(menusRaw)
+      if (Array.isArray(parsed)) {
+        visibleMenus.value = parsed
      }
+    } catch {
+      visibleMenus.value = menusRaw.split(',').map((m: string) => m.trim()).filter((m: string) => m)
    }
-  } catch (error) {
-    console.error('Failed to load site settings:', error)
  }
 }

 onMounted(() => {
  updateActiveNav()
-  loadSiteSettings()
+  applySettingsFromCache()
+})
+
+watch(cache, () => {
+  applySettingsFromCache()
 })

 watch(
--- a/client/src/components/ImageUploader.vue
+++ b/client/src/components/ImageUploader.vue
@@ -1,159 +0,0 @@
-<template>
-  <div class="image-uploader">
-    <div 
-      v-if="!imageUrl"
-      @click="triggerFileInput"
-      @dragover.prevent
-      @dragenter.prevent
-      @drop.prevent="handleDrop"
-      class="upload-area border-2 border-dashed border-white/20 rounded-lg p-8 text-center cursor-pointer hover:border-art-accent transition-colors"
-      :class="{ 'border-art-accent': isDragging }"
-    >
-      <input
-        ref="fileInput"
-        type="file"
-        accept="image/*"
-        @change="handleFileSelect"
-        class="hidden"
-      />
-      <div class="space-y-2">
-        <i data-lucide="upload" class="w-12 h-12 mx-auto text-art-muted"></i>
-        <p class="text-sm text-art-muted">点击或拖拽图片到此处上传</p>
-        <p class="text-xs text-art-muted/50">支持 JPG、PNG、GIF 格式</p>
-      </div>
-    </div>
-    
-    <div v-else class="image-preview relative group">
-      <img :src="imageUrl" alt="Preview" class="w-full h-auto rounded-lg" />
-      <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center gap-2">
-        <button
-          @click="removeImage"
-          class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors"
-        >
-          删除
-        </button>
-        <button
-          @click="triggerFileInput"
-          class="px-4 py-2 bg-art-accent text-white rounded hover:bg-opacity-80 transition-colors"
-        >
-          更换
-        </button>
-      </div>
-    </div>
-    
-    <div v-if="uploading" class="mt-4 text-center">
-      <div class="inline-flex items-center gap-2 text-art-accent">
-        <div class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-art-accent"></div>
-        <span class="text-sm">上传中...</span>
-      </div>
-    </div>
-    
-    <div v-if="error" class="mt-4 text-center text-red-500 text-sm">
-      {{ error }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import { useToast } from '../composables/useToast'
-
-const props = defineProps<{
-  modelValue?: string
-  categoryId?: number
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-}>()
-
-const fileInput = ref<HTMLInputElement | null>(null)
-const imageUrl = ref<string>(props.modelValue || '')
-const uploading = ref(false)
-const error = ref('')
-const isDragging = ref(false)
-
-const toast = useToast()
-
-watch(() => props.modelValue, (newVal) => {
-  imageUrl.value = newVal || ''
-})
-
-const triggerFileInput = () => {
-  fileInput.value?.click()
-}
-
-const handleFileSelect = (e: Event) => {
-  const target = e.target as HTMLInputElement
-  if (target.files && target.files[0]) {
-    uploadFile(target.files[0])
-  }
-}
-
-const handleDrop = (e: DragEvent) => {
-  isDragging.value = false
-  if (e.dataTransfer?.files && e.dataTransfer.files[0]) {
-    uploadFile(e.dataTransfer.files[0])
-  }
-}
-
-const uploadFile = async (file: File) => {
-  if (!file.type.startsWith('image/')) {
-    error.value = '请选择图片文件'
-    return
-  }
-
-  uploading.value = true
-  error.value = ''
-
-  try {
-    const formData = new FormData()
-    formData.append('file', file)
-    if (props.categoryId) {
-      formData.append('categoryId', props.categoryId.toString())
-    }
-    formData.append('storageType', 'local')
-
-    const token = localStorage.getItem('token')
-    const response = await fetch('/api/admin/attachments/upload', {
-      method: 'POST',
-      headers: {
-        ...(token ? { Authorization: `Bearer ${token}` } : {})
-      },
-      body: formData
-    })
-
-    if (!response.ok) {
-      const errorData = await response.json()
-      throw new Error(errorData.message || '上传失败')
-    }
-
-    const data = await response.json()
-    imageUrl.value = data.result.fileUrl
-    emit('update:modelValue', data.result.fileUrl)
-    toast.showToast('图片上传成功', 'success')
-  } catch (err: any) {
-    error.value = err.message || '上传失败，请重试'
-    toast.showToast(error.value, 'error')
-  } finally {
-    uploading.value = false
-  }
-}
-
-const removeImage = () => {
-  imageUrl.value = ''
-  emit('update:modelValue', '')
-  if (fileInput.value) {
-    fileInput.value.value = ''
-  }
-}
-</script>
-
-<style scoped>
-.upload-area {
-  min-height: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>
--- a/client/src/components/MobileMenu.vue
+++ b/client/src/components/MobileMenu.vue
@@ -14,31 +14,23 @@

 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import { onMounted, onUpdated, ref } from 'vue'
-import { getPublicSettings } from '../services/api'
+import { onMounted, onUpdated, ref, watch } from 'vue'
+import { usePublicSettings } from '../composables/usePublicSettings'

 const router = useRouter()
-const visibleMenus = ref<string[]>(['home', 'blog', 'columns', 'works', 'snippets', 'about', 'services']) // 默认显示所有菜单
+const { cache, getStringSetting } = usePublicSettings()
+const visibleMenus = ref<string[]>(['home', 'blog', 'columns', 'works', 'snippets', 'about', 'services'])

-// 获取菜单显示配置
-const loadMenuSettings = async () => {
+const applyMenuSettings = () => {
+  const menusRaw = getStringSetting('visible_menus')
+  if (!menusRaw) return
  try {
-    const settings = await getPublicSettings()
-    if (settings.visible_menus) {
-      try {
-        // 尝试解析JSON格式
-        const parsed = JSON.parse(settings.visible_menus)
-        if (Array.isArray(parsed)) {
-          visibleMenus.value = parsed
-        }
-      } catch {
-        // 如果不是JSON，按逗号分隔
-        visibleMenus.value = settings.visible_menus.split(',').map((m: string) => m.trim()).filter((m: string) => m)
-      }
+    const parsed = JSON.parse(menusRaw)
+    if (Array.isArray(parsed)) {
+      visibleMenus.value = parsed
    }
-  } catch (error) {
-    console.error('Failed to load menu settings:', error)
-    // 使用默认值
+  } catch {
+    visibleMenus.value = menusRaw.split(',').map((m: string) => m.trim()).filter((m: string) => m)
  }
 }

@@ -68,7 +60,11 @@ const refreshIcons = () => {

 onMounted(() => {
  refreshIcons()
-  loadMenuSettings()
+  applyMenuSettings()
+})
+
+watch(cache, () => {
+  applyMenuSettings()
 })
 onUpdated(refreshIcons)
 </script>
--- a/client/src/components/SnippetModal.vue
+++ b/client/src/components/SnippetModal.vue
@@ -216,10 +216,37 @@ const showCollapseToggle = computed(
  () => showHtmlPreview.value && activeRightTab.value === 'preview'
 )

-const renderedDescription = computed(() => {
-  if (!props.description) return ''
-  return renderMarkdown(props.description)
-})
+const renderedDescription = ref('')
+let descriptionGeneration = 0
+
+const renderDescription = (content: string) => {
+  const generation = ++descriptionGeneration
+  renderedDescription.value = ''
+
+  const run = async () => {
+    try {
+      const html = await renderMarkdown(content)
+      if (generation !== descriptionGeneration) return
+      renderedDescription.value = html
+    } catch (err) {
+      console.error('Failed to render snippet description:', err)
+    }
+  }
+
+  void run()
+}
+
+watch(
+  [() => props.description, () => props.isOpen],
+  ([description, isOpen]) => {
+    if (!isOpen || !description) {
+      renderedDescription.value = ''
+      return
+    }
+    renderDescription(description)
+  },
+  { immediate: true }
+)

 const highlightCode = () => {
  if (codeBlock.value) {
--- 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"
--- a/client/src/components/ui/EmailAutocomplete.vue
+++ b/client/src/components/ui/EmailAutocomplete.vue
@@ -3,7 +3,7 @@
    <input 
      :name="name" 
      type="text" 
-      class="inquiry-input peer w-full bg-transparent border-b border-white/20 py-2 text-white font-serif text-lg focus:border-art-accent outline-none transition-colors placeholder-transparent" 
+      :class="inputClass"
      :placeholder="inputPlaceholder"
      :value="modelValue"
      :required="required"
@@ -13,14 +13,33 @@
      autocomplete="off"
    >
    <label 
+      v-if="variant === 'inquiry'"
      class="absolute left-0 top-2 text-white/30 text-xs font-mono transition-all pointer-events-none peer-focus:-top-4 peer-focus:text-art-accent peer-[:not(:placeholder-shown)]:-top-4 peer-[:not(:placeholder-shown)]:text-white/50 peer-autofill:-top-4 peer-autofill:text-white/50"
    >{{ label }}</label>

    <!-- Autocomplete Dropdown -->
-    <div v-if="showDropdown && suggestions.length > 0" class="absolute z-[9999] left-0 right-0 top-full mt-1 bg-[#1a1a1a] border border-white/10 shadow-lg max-h-48 overflow-y-auto rounded-b-md">
+    <div v-if="showDropdown && (suggestions.length > 0 || matchedUsers.length > 0)" class="absolute z-[9999] left-0 right-0 top-full mt-1 bg-[#1a1a1a] border border-white/10 shadow-lg max-h-48 overflow-y-auto rounded-b-md">
+      <div v-if="matchedUsers.length > 0" class="border-b border-white/5">
+        <div class="px-3 py-1.5 text-[10px] text-art-muted uppercase tracking-wider">已注册用户</div>
+        <div
+          v-for="user in matchedUsers"
+          :key="user.id"
+          class="px-4 py-2 text-sm text-white/70 hover:bg-art-accent hover:text-black cursor-pointer transition-colors flex items-center gap-2"
+          @mousedown.prevent="selectUser(user)"
+        >
+          <div class="w-6 h-6 rounded-full overflow-hidden bg-white/10 shrink-0 flex items-center justify-center text-xs text-art-accent">
+            <img v-if="user.avatar" :src="user.avatar" :alt="user.username" class="w-full h-full object-cover" />
+            <span v-else>{{ user.username.charAt(0).toUpperCase() }}</span>
+          </div>
+          <div class="min-w-0">
+            <div class="truncate font-medium">{{ user.username }}</div>
+            <div class="truncate text-xs opacity-70">{{ user.email }}</div>
+          </div>
+        </div>
+      </div>
      <div 
        v-for="(suggestion, index) in suggestions" 
-        :key="index"
+        :key="'s-' + index"
        class="px-4 py-2 text-sm text-white/70 hover:bg-art-accent hover:text-black cursor-pointer transition-colors font-mono"
        @mousedown.prevent="selectSuggestion(suggestion)"
      >
@@ -32,43 +51,74 @@

 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { fetchEmailSuffixes } from '../../services/api'
+import { fetchEmailSuffixes, getUsersPaginated, type User } from '../../services/api'
+import { useUserProfileModal } from '../../composables/useUserProfileModal'

-const props = defineProps<{
+const props = withDefaults(defineProps<{
  name: string
  label: string
  placeholder?: string
  modelValue: string
  required?: boolean
-}>()
+  userLookup?: boolean
+  variant?: 'inquiry' | 'admin'
+}>(), {
+  userLookup: false,
+  variant: 'inquiry',
+})

-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'user-select'])

-const inputPlaceholder = computed(() => props.placeholder ?? ' ')
+const { openUserProfile } = useUserProfileModal()
+
+const inputPlaceholder = computed(() => props.placeholder ?? (props.variant === 'inquiry' ? ' ' : ''))
+
+const inputClass = computed(() => {
+  if (props.variant === 'admin') {
+    return 'admin-input w-full peer'
+  }
+  return 'inquiry-input peer w-full bg-transparent border-b border-white/20 py-2 text-white font-serif text-lg focus:border-art-accent outline-none transition-colors placeholder-transparent'
+})

 const showDropdown = ref(false)
 const emailSuffixes = ref<string[]>([])
+const matchedUsers = ref<User[]>([])
 const containerRef = ref<HTMLElement | null>(null)
+let userSearchTimer: ReturnType<typeof setTimeout> | null = null

-// Load suffixes from API
 onMounted(async () => {
  try {
    const suffixes = await fetchEmailSuffixes()
    emailSuffixes.value = suffixes.map(s => s.suffix)
-  } catch (e) {
-    // Fallback defaults if API fails
+  } catch {
    emailSuffixes.value = ['@gmail.com', '@163.com', '@qq.com', '@outlook.com']
  }
 })

+const searchUsers = (keyword: string) => {
+  if (!props.userLookup || !keyword.includes('@') || keyword.length < 3) {
+    matchedUsers.value = []
+    return
+  }
+  if (userSearchTimer) clearTimeout(userSearchTimer)
+  userSearchTimer = setTimeout(async () => {
+    try {
+      const result = await getUsersPaginated({ page: 1, pageSize: 5, keyword })
+      matchedUsers.value = result.list
+    } catch {
+      matchedUsers.value = []
+    }
+  }, 300)
+}
+
 const handleInput = (e: Event) => {
  const val = (e.target as HTMLInputElement).value
  emit('update:modelValue', val)
  showDropdown.value = true
+  searchUsers(val)
 }

 const handleBlur = () => {
-  // Delay hiding to allow click event on dropdown to fire
  setTimeout(() => {
    showDropdown.value = false
  }, 200)
@@ -83,6 +133,12 @@ const selectSuggestion = (val: string) => {
  emit('update:modelValue', val)
  showDropdown.value = false
 }
+
+const selectUser = (user: User) => {
+  emit('user-select', user)
+  openUserProfile(user.id)
+  showDropdown.value = false
+}
 </script>

 <style scoped>