@aquiferre/ui-kit 0.1.0 → 0.1.3

package/components/Breadcrumb.vue

@@ -0,0 +1,37 @@
+<template>
+  <nav class="breadcrumb" aria-label="Breadcrumb">
+    <ol class="breadcrumb-list">
+      <li v-for="(item, index) in items" :key="index" class="breadcrumb-item">
+        <template v-if="index < items.length - 1">
+          <a v-if="item.path" :href="item.path" class="breadcrumb-link" @click.prevent="handleClick(item)">
+            {{ item.label }}
+          </a>
+          <span v-else class="breadcrumb-text">{{ item.label }}</span>
+        </template>
+        <span v-else class="breadcrumb-current" aria-current="page">{{ item.label }}</span>
+        <span v-if="index < items.length - 1" class="breadcrumb-separator">/</span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+interface BreadcrumbItem {
+  label: string
+  path?: string
+}
+
+const props = defineProps<{
+  items: BreadcrumbItem[]
+}>()
+
+const router = useRouter()
+
+function handleClick(item: BreadcrumbItem) {
+  if (item.path) {
+    router.push(item.path)
+  }
+}
+</script>

package/components/ConfirmDialog.vue

@@ -0,0 +1,68 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div v-if="visible" class="dialog-overlay">
+        <div class="fixed inset-0 bg-bg-overlay" @click="cancel" />
+        <div class="panel-glass dialog max-w-sm">
+          <div class="px-6 py-4">
+            <h3 class="dialog-title">{{ title }}</h3>
+            <p v-if="content" class="text-text-secondary text-sm mt-2">{{ content }}</p>
+          </div>
+          <div class="dialog-actions px-6 py-4 border-t border-border-primary bg-bg-secondary/50 rounded-b-2xl">
+            <button class="btn-secondary" @click="cancel">
+              {{ cancelText }}
+            </button>
+            <button :disabled="loading" :class="confirmClass" @click="confirm">
+              {{ loading ? loadingText : confirmText }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  visible: boolean
+  title?: string
+  content?: string
+  confirmText?: string
+  cancelText?: string
+  loading?: boolean
+  loadingText?: string
+  confirmClass?: string
+}>(), {
+  title: '确认删除',
+  confirmText: '确认删除',
+  cancelText: '取消',
+  loadingText: '删除中...',
+  confirmClass: 'btn-danger',
+})
+
+const emit = defineEmits<{
+  confirm: []
+  cancel: []
+  'update:visible': [value: boolean]
+}>()
+
+function confirm() {
+  emit('confirm')
+}
+
+function cancel() {
+  emit('cancel')
+  emit('update:visible', false)
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/components/DataTable.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="table-container relative w-full">
+    <table class="table">
+      <thead class="table-header">
+        <tr>
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            class="table-header-cell"
+          >
+            {{ col.title }}
+          </th>
+        </tr>
+      </thead>
+      <tbody class="table-body">
+        <tr v-if="!loading && data.length === 0">
+          <td :colspan="columns.length" class="table-empty">
+            {{ emptyText }}
+          </td>
+        </tr>
+        <tr v-for="(row, index) in data" :key="row.id || index" class="table-row">
+          <td v-for="col in columns" :key="col.key" class="table-cell">
+            <slot :name="col.key" :row="row" :value="row[col.key]">
+              {{ row[col.key] }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <!-- Loading overlay -->
+    <div v-if="loading" class="absolute inset-0 flex items-center justify-center bg-bg-elevated/60 backdrop-blur-[1px] z-10">
+      <div class="flex items-center space-x-2 text-text-secondary">
+        <div class="spinner"></div>
+        <span class="text-sm">加载中...</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Column {
+  key: string
+  title: string
+}
+
+defineProps<{
+  columns: Column[]
+  data: any[]
+  loading?: boolean
+  emptyText?: string
+}>()
+</script>

package/components/FileUploader.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <input
+      type="file"
+      multiple
+      :accept="acceptTypes"
+      @change="handleFileSelect"
+      class="hidden"
+      ref="fileInput"
+    />
+
+    <button @click="triggerFileInput" class="btn-primary btn-sm inline-flex items-center gap-1">
+      📎 选择文件
+    </button>
+
+    <div v-if="uploadQueue.length > 0" class="mt-3 space-y-2">
+      <div v-for="item in uploadQueue" :key="item.id" class="bg-bg-secondary rounded-lg p-3">
+        <div class="flex justify-between text-sm mb-1">
+          <span class="text-text-primary font-medium">{{ item.name }}</span>
+          <span class="text-text-tertiary">{{ formatSize(item.size) }}</span>
+        </div>
+
+        <div class="h-2 bg-bg-tertiary rounded-full overflow-hidden">
+          <div
+            class="h-full rounded-full transition-all duration-300"
+            :class="item.status === 'error' ? 'bg-accent-danger' : 'bg-accent-primary'"
+            :style="{ width: item.progress + '%' }"
+          ></div>
+        </div>
+
+        <div class="text-xs mt-1">
+          <span v-if="item.status === 'uploading'" class="text-accent-primary">
+            上传中 {{ item.progress }}%
+          </span>
+          <span v-else-if="item.status === 'success'" class="text-accent-success">✓ 完成</span>
+          <span v-else-if="item.status === 'error'" class="text-accent-danger">✗ {{ item.error }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+
+interface UploadItem {
+  id: string
+  name: string
+  size: number
+  progress: number
+  status: 'pending' | 'uploading' | 'success' | 'error'
+  error?: string
+}
+
+const props = withDefaults(defineProps<{
+  uploadFile: (file: File, onProgress: (percent: number) => void) => Promise<void>
+  acceptTypes?: string
+}>(), {
+  acceptTypes: 'image/*,video/*'
+})
+
+const emit = defineEmits<{
+  uploaded: []
+}>()
+
+const fileInput = ref<HTMLInputElement | null>(null)
+const uploadQueue = ref<UploadItem[]>([])
+
+function triggerFileInput() {
+  fileInput.value?.click()
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return bytes + ' B'
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+  if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+  return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB'
+}
+
+async function handleFileSelect(event: Event) {
+  const input = event.target as HTMLInputElement
+  const files = input.files
+  if (!files || files.length === 0) return
+
+  for (const file of Array.from(files)) {
+    const item = reactive<UploadItem>({
+      id: Math.random().toString(36).substring(2),
+      name: file.name,
+      size: file.size,
+      progress: 0,
+      status: 'uploading'
+    })
+
+    uploadQueue.value.push(item)
+
+    try {
+      await props.uploadFile(file, (percent) => {
+        item.progress = percent
+      })
+      item.status = 'success'
+      emit('uploaded')
+
+      setTimeout(() => {
+        const index = uploadQueue.value.findIndex(i => i.id === item.id)
+        if (index !== -1) {
+          uploadQueue.value.splice(index, 1)
+        }
+      }, 1500)
+    } catch (error: any) {
+      item.status = 'error'
+      item.error = error.message || '上传失败'
+    }
+  }
+
+  input.value = ''
+}
+</script>

package/components/FilterDropdown.vue

@@ -0,0 +1,27 @@
+<template>
+  <select
+    :value="modelValue"
+    class="select"
+    @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
+  >
+    <option v-if="showAll" value="">{{ placeholder || '全部' }}</option>
+    <option v-for="opt in options" :key="opt.value" :value="opt.value">
+      {{ opt.label }}
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  modelValue: string
+  options: Array<{ value: string; label: string }>
+  placeholder?: string
+  showAll?: boolean
+}>(), {
+  showAll: true
+})
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+</script>

package/components/FormDialog.vue

@@ -0,0 +1,69 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div v-if="visible" class="dialog-overlay">
+        <div class="fixed inset-0 bg-bg-overlay" @click="cancel" />
+        <div class="panel-glass" :class="[width || 'max-w-lg', 'dialog']">
+          <div class="flex items-center justify-between px-6 py-4 border-b border-border-primary">
+            <h3 class="text-lg font-medium text-text-primary">{{ title }}</h3>
+            <button class="text-text-tertiary hover:text-text-primary text-2xl leading-none" @click="cancel">&times;</button>
+          </div>
+          <div class="px-6 py-4">
+            <slot />
+          </div>
+          <div class="dialog-actions px-6 py-4 border-t border-border-primary bg-bg-secondary/50 rounded-b-2xl">
+            <button
+              class="btn-secondary"
+              @click="cancel"
+            >
+              取消
+            </button>
+            <button
+              :disabled="loading"
+              class="btn-primary"
+              @click="confirm"
+            >
+              {{ loading ? '提交中...' : (confirmText || '确认') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  visible: boolean
+  title: string
+  loading?: boolean
+  confirmText?: string
+  width?: string
+}>()
+
+const emit = defineEmits<{
+  confirm: []
+  cancel: []
+  'update:visible': [value: boolean]
+}>()
+
+function confirm() {
+  emit('confirm')
+}
+
+function cancel() {
+  emit('cancel')
+  emit('update:visible', false)
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/components/Pagination.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="flex items-center justify-between px-6 py-2">
+    <div class="text-xs text-text-tertiary">
+      共 {{ total }} 条，第 {{ startItem }} - {{ endItem }} 条
+    </div>
+    <div class="flex items-center space-x-1">
+      <button
+        :disabled="page <= 1"
+        class="btn-glass btn-sm disabled:opacity-50"
+        @click="changePage(page - 1)"
+      >
+        ← 上一页
+      </button>
+      <template v-for="p in visiblePages" :key="p">
+        <span v-if="p === '...'" class="btn-glass btn-sm pointer-events-none">…</span>
+        <button
+          v-else
+          :class="p === page ? 'pagination-btn-active btn-sm' : 'btn-glass btn-sm'"
+          @click="changePage(p as number)"
+        >
+          {{ p }}
+        </button>
+      </template>
+      <button
+        :disabled="page >= totalPages"
+        class="btn-glass btn-sm disabled:opacity-50"
+        @click="changePage(page + 1)"
+      >
+        下一页 →
+      </button>
+      <select
+        :value="pageSize"
+        class="select ml-2"
+        @change="changePageSize(Number(($event.target as HTMLSelectElement).value))"
+      >
+        <option :value="10">10条/页</option>
+        <option :value="20">20条/页</option>
+        <option :value="50">50条/页</option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// @ts-nocheck
+import { computed } from 'vue'
+
+const props = defineProps<{
+  page: number
+  pageSize: number
+  total: number
+}>()
+
+const emit = defineEmits<{
+  'update:page': [page: number]
+  'update:pageSize': [size: number]
+  change: [page: number, pageSize: number]
+}>()
+
+const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))
+
+const startItem = computed(() => (props.page - 1) * props.pageSize + 1)
+const endItem = computed(() => Math.min(props.page * props.pageSize, props.total))
+
+/**
+ * 生成可见页码数组，当前页 ±2 范围内显示，其余用 '...' 省略
+ * 始终显示首页和末页
+ */
+const visiblePages = computed(() => {
+  const total = totalPages.value
+  const current = props.page
+  const delta = 2
+  const pages: (number | string)[] = []
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) pages.push(i)
+    return pages
+  }
+
+  // Always show first page
+  pages.push(1)
+
+  const rangeStart = Math.max(2, current - delta)
+  const rangeEnd = Math.min(total - 1, current + delta)
+
+  if (rangeStart > 2) pages.push('...')
+
+  for (let i = rangeStart; i <= rangeEnd; i++) {
+    pages.push(i)
+  }
+
+  if (rangeEnd < total - 1) pages.push('...')
+
+  // Always show last page
+  pages.push(total)
+
+  return pages
+})
+
+function changePage(p: number) {
+  if (p < 1 || p > totalPages.value) return
+  emit('update:page', p)
+  emit('change', p, props.pageSize)
+}
+
+function changePageSize(size: number) {
+  emit('update:pageSize', size)
+  emit('update:page', 1)
+  emit('change', 1, size)
+}
+</script>

package/components/SearchInput.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="relative">
+    <input
+      :value="modelValue"
+      type="text"
+      :placeholder="placeholder"
+      class="search-input w-full"
+      @input="onInput"
+    />
+    <button
+      v-if="modelValue"
+      class="absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary hover:text-text-primary"
+      @click="clear"
+    >&times;</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  modelValue: string
+  placeholder?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  search: [value: string]
+}>()
+
+let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+function onInput(e: Event) {
+  const value = (e.target as HTMLInputElement).value
+  emit('update:modelValue', value)
+  if (debounceTimer) clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(() => {
+    emit('search', value)
+  }, 300)
+}
+
+function clear() {
+  emit('update:modelValue', '')
+  emit('search', '')
+}
+</script>

package/components/SideMenu.vue

@@ -0,0 +1,36 @@
+<template>
+  <aside class="sidebar" style="width: 200px;">
+    <nav class="mt-3">
+      <router-link
+        to="/"
+        class="sidebar-item text-xs"
+        exact-active-class="sidebar-item-active"
+      >
+        <span class="w-5 text-center text-sm">🏠</span>
+        <span class="ml-2">首页</span>
+      </router-link>
+
+      <template v-for="group in menuGroups" :key="group.key">
+        <div class="sidebar-section-title text-[10px]">{{ group.label }}</div>
+        <router-link
+          v-for="item in group.items"
+          :key="item.path"
+          :to="item.path"
+          class="sidebar-item text-xs"
+          active-class="sidebar-item-active"
+        >
+          <span class="w-5 text-center text-sm">{{ item.icon }}</span>
+          <span class="ml-2">{{ item.label }}</span>
+        </router-link>
+      </template>
+    </nav>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import type { MenuGroup } from '../types'
+
+withDefaults(defineProps<{
+  menuGroups: MenuGroup[]
+}>(), {})
+</script>

package/components/StatusTag.vue

@@ -0,0 +1,32 @@
+<template>
+  <span class="badge" :class="cls">
+    {{ label }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  status: string | number
+  statusMap?: Record<string | number, { label: string; cls: string }>
+}>(), {
+  statusMap: () => ({})
+})
+
+const defaultMap: Record<string, { label: string; cls: string }> = {
+  active: { label: '正常', cls: 'badge-success' },
+  locked: { label: '已锁定', cls: 'badge-danger' },
+  deleted: { label: '已删除', cls: 'badge-danger' },
+  '0': { label: '已停用', cls: 'badge-warning' },
+  '1': { label: '正常', cls: 'badge-success' },
+}
+
+const entry = computed(() => {
+  const key = String(props.status)
+  return props.statusMap[key] || props.statusMap[props.status] || defaultMap[key] || { label: key, cls: 'badge-danger' }
+})
+
+const label = computed(() => entry.value.label)
+const cls = computed(() => entry.value.cls)
+</script>

package/components/Toast.vue

@@ -0,0 +1,54 @@
+<template>
+  <Teleport to="body">
+    <div class="fixed top-4 right-4 z-50 space-y-2">
+      <TransitionGroup name="toast">
+        <div
+          v-for="toast in toasts"
+          :key="toast.id"
+          class="flex items-center p-4 rounded-lg shadow-lg min-w-[300px] border-l-4"
+          :class="typeClasses[toast.type]"
+        >
+          <span class="mr-2">{{ iconMap[toast.type] }}</span>
+          <span class="flex-1 text-text-primary">{{ toast.message }}</span>
+          <button @click="remove(toast.id)" class="ml-2 text-text-tertiary hover:text-text-primary">&times;</button>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useToast } from '../composables/useToast'
+import type { ToastType } from '../types'
+
+const { toasts, remove } = useToast()
+
+const typeClasses: Record<ToastType, string> = {
+  success: 'bg-bg-elevated border-accent-success',
+  error: 'bg-bg-elevated border-accent-danger',
+  warning: 'bg-bg-elevated border-accent-warning',
+  info: 'bg-bg-elevated border-accent-info'
+}
+
+const iconMap: Record<ToastType, string> = {
+  success: '✅',
+  error: '❌',
+  warning: '⚠️',
+  info: 'ℹ️'
+}
+</script>
+
+<style scoped>
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 0.3s ease;
+}
+.toast-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+</style>

package/components/TopNavbar.vue

@@ -0,0 +1,159 @@
+<template>
+  <header class="navbar">
+    <div class="flex items-center gap-3">
+      <slot name="brand">
+        <div class="w-8 h-8 rounded-lg bg-accent-primary flex items-center justify-center">
+          <svg class="w-5 h-5 text-text-inverse" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+          </svg>
+        </div>
+        <span class="navbar-brand">{{ title }}</span>
+      </slot>
+      <span v-if="tenantLabel" class="text-xs text-text-tertiary">| {{ tenantLabel }}</span>
+
+      <nav v-if="modules.length > 0" class="flex items-center gap-1 ml-4">
+        <router-link
+          v-for="mod in modules"
+          :key="mod.key"
+          :to="mod.href"
+          class="px-3 py-1.5 text-sm rounded-t-md transition-all duration-150 border-b-2"
+          :class="activeModule === mod.key
+            ? 'font-medium border-accent-primary'
+            : 'text-text-secondary hover:text-text-primary border-transparent'"
+        >
+          {{ mod.label }}
+        </router-link>
+      </nav>
+    </div>
+
+    <div class="navbar-user">
+      <!-- 主题切换 -->
+      <div class="relative" ref="themeDropdownRef">
+        <button 
+          @click="showThemeDropdown = !showThemeDropdown"
+          :title="`当前主题: ${themeStore.currentThemeInfo?.label}`"
+          class="btn-icon text-text-secondary hover:text-text-primary"
+        >
+          {{ themeIcon }}
+        </button>
+
+        <Transition name="dropdown">
+          <div v-if="showThemeDropdown" class="absolute right-0 mt-2 w-40 card shadow-lg z-50 py-1">
+            <button
+              v-for="t in themeStore.themeList"
+              :key="t.mode"
+              class="w-full px-4 py-2 text-left text-sm flex items-center gap-2 hover:bg-bg-tertiary"
+              :class="themeStore.theme === t.mode ? 'text-accent-primary' : 'text-text-secondary'"
+              @click="selectTheme(t.mode)"
+            >
+              <span>{{ t.icon }}</span>
+              <span>{{ t.label }}</span>
+            </button>
+          </div>
+        </Transition>
+      </div>
+
+      <!-- 用户头像下拉 -->
+      <div class="relative" ref="userDropdownRef">
+        <button
+          class="flex items-center gap-2 p-1 rounded-lg hover:bg-bg-tertiary transition-colors"
+          @click="showUserDropdown = !showUserDropdown"
+        >
+          <div class="navbar-avatar">{{ avatarInitial }}</div>
+          <svg class="w-3 h-3 text-text-tertiary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+
+        <Transition name="dropdown">
+          <div v-if="showUserDropdown" class="absolute right-0 mt-2 w-48 card shadow-lg z-50 py-1">
+            <template v-for="(item, idx) in userDropdownItems" :key="idx">
+              <!-- 用户信息区 -->
+              <div v-if="item.type === 'user-info'" class="px-4 py-3 border-b border-border-primary">
+                <div class="text-sm font-medium text-text-primary">{{ item.label }}</div>
+                <div v-if="item.subtitle" class="text-xs text-text-tertiary mt-1">{{ item.subtitle }}</div>
+              </div>
+              <!-- 分割线 -->
+              <div v-else-if="item.type === 'divider'" class="border-t border-border-primary my-1" />
+              <!-- 普通菜单项 -->
+              <button
+                v-else
+                class="w-full px-4 py-2 text-left text-sm flex items-center gap-2 hover:bg-bg-tertiary"
+                :class="item.danger ? 'text-accent-danger' : 'text-text-secondary'"
+                @click="handleItemClick(item)"
+              >
+                <span v-if="item.icon">{{ item.icon }}</span>
+                <span>{{ item.label }}</span>
+              </button>
+            </template>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { useThemeStore } from '@aquiferre/theme-kit'
+import type { NavModule, DropdownItem } from '../types'
+
+const props = withDefaults(defineProps<{
+  title?: string
+  avatarText?: string
+  tenantLabel?: string
+  modules?: NavModule[]
+  activeModule?: string
+  userDropdownItems?: DropdownItem[]
+}>(), {
+  title: '医疗设备智能平台',
+  avatarText: 'U',
+  tenantLabel: '',
+  modules: () => [],
+  activeModule: '',
+  userDropdownItems: () => []
+})
+
+const themeStore = useThemeStore()
+const showUserDropdown = ref(false)
+const showThemeDropdown = ref(false)
+const userDropdownRef = ref<HTMLElement | null>(null)
+const themeDropdownRef = ref<HTMLElement | null>(null)
+
+const themeIcon = computed(() => themeStore.currentThemeInfo?.icon || '🎨')
+const avatarInitial = computed(() => props.avatarText.charAt(0).toUpperCase())
+
+function selectTheme(mode: 'light' | 'dark' | 'neutral') {
+  themeStore.setTheme(mode)
+  showThemeDropdown.value = false
+}
+
+function handleItemClick(item: DropdownItem) {
+  if (item.onClick) item.onClick()
+  showUserDropdown.value = false
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (userDropdownRef.value && !userDropdownRef.value.contains(event.target as Node)) {
+    showUserDropdown.value = false
+  }
+  if (themeDropdownRef.value && !themeDropdownRef.value.contains(event.target as Node)) {
+    showThemeDropdown.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', handleClickOutside))
+onUnmounted(() => document.removeEventListener('click', handleClickOutside))
+</script>
+
+<style scoped>
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.15s ease;
+}
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>

package/components/UserPicker.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="user-picker">
+    <div class="mb-3">
+      <input
+        class="input w-full"
+        v-model="keyword"
+        placeholder="搜索用户..."
+        @input="handleSearch"
+      />
+    </div>
+
+    <div v-if="loading" class="text-center py-4 text-text-secondary">
+      <div class="spinner mx-auto mb-2"></div>
+      <p>加载中...</p>
+    </div>
+
+    <div v-else-if="users.length > 0" class="user-list space-y-2 max-h-64 overflow-y-auto">
+      <div
+        v-for="user in users"
+        :key="user.id"
+        class="user-item p-3 rounded-lg border-2 cursor-pointer transition-all"
+        :class="selectedUser?.id === user.id ? 'border-accent-primary bg-accent-primary/10' : 'border-bg-tertiary hover:border-accent-primary/50'"
+        @click="selectUser(user)"
+      >
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="font-medium text-text-primary">{{ user.displayName || user.username }}</p>
+            <p class="text-xs text-text-tertiary">{{ user.email }}</p>
+            <p v-if="user.phone" class="text-xs text-text-tertiary">{{ user.phone }}</p>
+          </div>
+          <div v-if="selectedUser?.id === user.id" class="text-accent-primary">
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="text-center py-4 text-text-tertiary">
+      <p>未找到符合条件的用户</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+interface UserBasicInfo {
+  id: string
+  username: string
+  displayName: string
+  email: string
+  phone: string
+}
+
+const props = defineProps<{
+  fetchUsers: (keyword?: string) => Promise<UserBasicInfo[]>
+}>()
+
+const emit = defineEmits<{
+  select: [user: UserBasicInfo]
+}>()
+
+const users = ref<UserBasicInfo[]>([])
+const loading = ref(false)
+const keyword = ref('')
+const selectedUser = ref<UserBasicInfo | null>(null)
+
+let searchTimeout: ReturnType<typeof setTimeout> | null = null
+
+async function loadUsers() {
+  loading.value = true
+  try {
+    users.value = await props.fetchUsers(keyword.value || undefined)
+  } catch {
+    users.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleSearch() {
+  if (searchTimeout) clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    loadUsers()
+  }, 300)
+}
+
+function selectUser(user: UserBasicInfo) {
+  selectedUser.value = user
+  emit('select', user)
+}
+
+onMounted(() => {
+  loadUsers()
+})
+</script>

package/composables/useToast.ts

@@ -0,0 +1,32 @@
+import { ref } from 'vue'
+import type { ToastType } from '../types'
+
+interface ToastItem {
+  id: number
+  type: ToastType
+  message: string
+}
+
+const toasts = ref<ToastItem[]>([])
+let nextId = 0
+
+function add(type: ToastType, message: string) {
+  const id = nextId++
+  toasts.value.push({ id, type, message })
+  setTimeout(() => remove(id), 3000)
+}
+
+function remove(id: number) {
+  toasts.value = toasts.value.filter(t => t.id !== id)
+}
+
+export function useToast() {
+  return {
+    toasts,
+    success: (msg: string) => add('success', msg),
+    error: (msg: string) => add('error', msg),
+    warning: (msg: string) => add('warning', msg),
+    info: (msg: string) => add('info', msg),
+    remove
+  }
+}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@aquiferre/ui-kit",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "private": false,
   "type": "module",
   "main": "index.ts",
   "exports": {
     ".": "./index.ts"
   },
-  "files": ["*.ts", "*.vue"],
+  "files": ["*.ts", "*.vue", "components/**/*.vue", "composables/**/*.ts"],
   "peerDependencies": {
     "vue": ">=3.0.0",
     "pinia": ">=2.0.0",

package/types.ts

@@ -23,6 +23,7 @@ export interface NavModule {
   href: string
   paths: string[]
   permissions: string[]
+  superAdminOnly?: boolean
 }
 
 export interface DropdownItem {