@aquiferre/ui-kit 0.1.9 → 0.2.0

package/components/Breadcrumb.vue

@@ -1,7 +1,7 @@
 <template>
-  <nav class="breadcrumb" aria-label="Breadcrumb">
+  <nav class="breadcrumb" aria-label="Breadcrumb" :data-testid="baseTestId">
     <ol class="breadcrumb-list">
-      <li v-for="(item, index) in items" :key="index" class="breadcrumb-item">
+      <li v-for="(item, index) in items" :key="index" class="breadcrumb-item" :data-testid="baseTestId ? `${baseTestId}-item-${index}` : undefined">
         <template v-if="index < items.length - 1">
           <a v-if="item.path" :href="item.path" class="breadcrumb-link" @click.prevent="handleClick(item)">
             {{ item.label }}
@@ -16,6 +16,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, useAttrs } from 'vue'
 import { useRouter } from 'vue-router'
 
 interface BreadcrumbItem {
@@ -25,8 +26,12 @@ interface BreadcrumbItem {
 
 const props = defineProps<{
   items: BreadcrumbItem[]
+  testId?: string
 }>()
 
+const attrs = useAttrs()
+const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
+
 const router = useRouter()
 
 function handleClick(item: BreadcrumbItem) {

package/components/ConfirmDialog.vue

@@ -1,18 +1,18 @@
 <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 v-if="visible" class="dialog-overlay" :data-testid="testId">
+        <div class="fixed inset-0 bg-bg-overlay" :data-testid="testId ? `${testId}-mask` : undefined" @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 v-if="showCancel" class="btn-secondary" @click="cancel">
+            <button v-if="showCancel" class="btn-secondary" :data-testid="testId ? `${testId}-cancel` : undefined" @click="cancel">
               {{ cancelText }}
             </button>
-            <button :disabled="loading" :class="confirmClass" @click="confirm">
+            <button :disabled="loading" :class="confirmClass" :data-testid="testId ? `${testId}-confirm` : 'confirm-btn'" @click="confirm">
               {{ loading ? loadingText : confirmText }}
             </button>
           </div>
@@ -33,6 +33,7 @@ withDefaults(defineProps<{
   loading?: boolean
   loadingText?: string
   confirmClass?: string
+  testId?: string
 }>(), {
   title: '确认删除',
   confirmText: '确认删除',

package/components/DataTable.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="table-container" :class="{ relative: loading }">
+  <div class="table-container" :class="{ relative: loading }" :data-testid="baseTestId">
     <table class="table">
       <thead class="table-header">
         <tr>
           <th v-if="selectable" class="table-header-cell w-8">
-            <input type="checkbox" :checked="allSelected" @change="toggleAll" />
+            <input type="checkbox" :checked="allSelected" :data-testid="rowPrefix ? `${rowPrefix}-select-all` : undefined" @change="toggleAll" />
           </th>
           <th
             v-for="col in columns"
@@ -12,6 +12,7 @@
             class="table-header-cell"
             :class="[col.width, col.sortable ? 'cursor-pointer select-none' : '']"
             :style="col.align ? `text-align:${col.align}` : undefined"
+            :data-testid="rowPrefix && col.sortable ? `${rowPrefix}-sort-${col.sortField || col.key}` : undefined"
             @click="col.sortable ? onSortClick(col) : undefined"
           >
             <span class="inline-flex items-center gap-1">
@@ -35,11 +36,12 @@
         <tr
           v-for="(row, index) in data"
           :key="row[rowKey] ?? index"
+          :data-testid="rowPrefix ? `${rowPrefix}-${row[rowKey] ?? index}` : undefined"
           class="table-row"
           @click="handleRowClick(row)"
         >
           <td v-if="selectable" class="table-cell" @click.stop>
-            <input type="checkbox" :checked="isSelected(row)" @change="toggleRow(row)" />
+            <input type="checkbox" :checked="isSelected(row)" :data-testid="rowPrefix ? `${rowPrefix}-checkbox-${row[rowKey] ?? index}` : undefined" @change="toggleRow(row)" />
           </td>
           <td
             v-for="col in columns"
@@ -65,7 +67,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import type { Column } from '../types'
 
 const props = withDefaults(defineProps<{
@@ -77,6 +79,8 @@ const props = withDefaults(defineProps<{
   selected?: string[]
   rowKey?: string
   sort?: { field: string; order: 'asc' | 'desc' } | null
+  rowTestIdPrefix?: string
+  testId?: string
 }>(), {
   loading: false,
   emptyText: '暂无数据',
@@ -84,8 +88,13 @@ const props = withDefaults(defineProps<{
   selected: () => [],
   rowKey: 'id',
   sort: null,
+  rowTestIdPrefix: undefined,
 })
 
+const attrs = useAttrs()
+const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
+const rowPrefix = computed<string | undefined>(() => props.rowTestIdPrefix ?? baseTestId.value)
+
 const emit = defineEmits<{
   'update:selected': [ids: string[]]
   'row-click': [row: any]

package/components/FileUploader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :data-testid="baseTestId">
     <input
       type="file"
       multiple
@@ -7,14 +7,15 @@
       @change="handleFileSelect"
       class="hidden"
       ref="fileInput"
+      :data-testid="baseTestId ? `${baseTestId}-input` : undefined"
     />
 
-    <button @click="triggerFileInput" class="btn-primary btn-sm inline-flex items-center gap-1">
+    <button @click="triggerFileInput" class="btn-primary btn-sm inline-flex items-center gap-1" :data-testid="baseTestId ? `${baseTestId}-trigger` : undefined">
       📎 选择文件
     </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 v-for="item in uploadQueue" :key="item.id" class="bg-bg-secondary rounded-lg p-3" :data-testid="baseTestId ? `${baseTestId}-item-${item.id}` : undefined">
         <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>
@@ -41,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed, useAttrs } from 'vue'
 
 interface UploadItem {
   id: string
@@ -55,10 +56,14 @@ interface UploadItem {
 const props = withDefaults(defineProps<{
   uploadFile: (file: File, onProgress: (percent: number) => void) => Promise<void>
   acceptTypes?: string
+  testId?: string
 }>(), {
   acceptTypes: 'image/*,video/*'
 })
 
+const attrs = useAttrs()
+const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
+
 const emit = defineEmits<{
   uploaded: []
 }>()

package/components/FilterDropdown.vue

@@ -2,21 +2,25 @@
   <select
     :value="modelValue"
     class="select"
+    :data-testid="baseTestId"
     @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">
+    <option v-for="opt in options" :key="opt.value" :value="opt.value" :data-testid="baseTestId ? `${baseTestId}-option-${opt.value}` : undefined">
       {{ opt.label }}
     </option>
   </select>
 </template>
 
 <script setup lang="ts">
-withDefaults(defineProps<{
+import { computed, useAttrs } from 'vue'
+
+const props = withDefaults(defineProps<{
   modelValue: string
   options: Array<{ value: string; label: string }>
   placeholder?: string
   showAll?: boolean
+  testId?: string
 }>(), {
   showAll: true
 })
@@ -24,4 +28,7 @@ withDefaults(defineProps<{
 defineEmits<{
   'update:modelValue': [value: string]
 }>()
+
+const attrs = useAttrs()
+const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
 </script>

package/components/FormDialog.vue

@@ -1,12 +1,12 @@
 <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 v-if="visible" class="dialog-overlay" :data-testid="testId">
+        <div class="fixed inset-0 bg-bg-overlay" :data-testid="testId ? `${testId}-mask` : undefined" @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>
+            <button class="text-text-tertiary hover:text-text-primary text-2xl leading-none" :data-testid="testId ? `${testId}-close` : undefined" @click="cancel">&times;</button>
           </div>
           <div class="px-6 py-4">
             <slot />
@@ -14,6 +14,7 @@
           <div class="dialog-actions px-6 py-4 border-t border-border-primary bg-bg-secondary/50 rounded-b-2xl">
             <button
               class="btn-secondary"
+              :data-testid="testId ? `${testId}-cancel` : undefined"
               @click="cancel"
             >
               取消
@@ -21,6 +22,7 @@
             <button
               :disabled="loading"
               class="btn-primary"
+              :data-testid="testId ? `${testId}-submit` : 'submit-btn'"
               @click="confirm"
             >
               {{ loading ? '提交中...' : (confirmText || '确认') }}
@@ -39,6 +41,7 @@ defineProps<{
   loading?: boolean
   confirmText?: string
   width?: string
+  testId?: string
 }>()
 
 const emit = defineEmits<{

package/components/Modal.vue

@@ -1,21 +1,22 @@
 <template>
   <Teleport to="body">
     <Transition name="fade">
-      <div v-if="visible" class="dialog-overlay">
-        <div class="fixed inset-0 bg-bg-overlay" @click="onOverlayClick" />
+      <div v-if="visible" class="dialog-overlay" :data-testid="testId">
+        <div class="fixed inset-0 bg-bg-overlay" :data-testid="testId ? `${testId}-mask` : undefined" @click="onOverlayClick" />
         <div class="panel-glass dialog" :class="[sizeClass, customClass]">
           <div v-if="title" 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
               v-if="closable"
               class="text-text-tertiary hover:text-text-primary text-2xl leading-none"
+              :data-testid="testId ? `${testId}-close` : undefined"
               @click="close"
             >&times;</button>
           </div>
           <div class="px-6 py-4">
             <slot />
           </div>
-          <div v-if="$slots.footer" class="px-6 py-4 border-t border-border-primary bg-bg-secondary/50 rounded-b-2xl">
+          <div v-if="$slots.footer" class="px-6 py-4 border-t border-border-primary bg-bg-secondary/50 rounded-b-2xl" :data-testid="testId ? `${testId}-footer` : undefined">
             <slot name="footer" />
           </div>
         </div>
@@ -34,6 +35,7 @@ const props = withDefaults(defineProps<{
   closable?: boolean
   maskClosable?: boolean
   customClass?: string
+  testId?: string
 }>(), {
   closable: true,
   maskClosable: true,

package/components/Pagination.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center justify-between px-6 py-2">
+  <div class="flex items-center justify-between px-6 py-2" :data-testid="baseTestId">
     <div class="text-xs text-text-tertiary">
       共 {{ total }} 条，第 {{ startItem }} - {{ endItem }} 条
     </div>
@@ -7,6 +7,7 @@
       <button
         :disabled="page <= 1"
         class="btn-glass btn-sm disabled:opacity-50"
+        :data-testid="baseTestId ? `${baseTestId}-prev` : undefined"
         @click="changePage(page - 1)"
       >
         ← 上一页
@@ -16,6 +17,7 @@
         <button
           v-else
           :class="p === page ? 'pagination-btn-active btn-sm' : 'btn-glass btn-sm'"
+          :data-testid="baseTestId ? `${baseTestId}-page-${p}` : undefined"
           @click="changePage(p as number)"
         >
           {{ p }}
@@ -24,6 +26,7 @@
       <button
         :disabled="page >= totalPages"
         class="btn-glass btn-sm disabled:opacity-50"
+        :data-testid="baseTestId ? `${baseTestId}-next` : undefined"
         @click="changePage(page + 1)"
       >
         下一页 →
@@ -31,6 +34,7 @@
       <select
         :value="pageSize"
         class="select ml-2"
+        :data-testid="baseTestId ? `${baseTestId}-size-select` : undefined"
         @change="changePageSize(Number(($event.target as HTMLSelectElement).value))"
       >
         <option :value="10">10条/页</option>
@@ -43,14 +47,18 @@
 
 <script setup lang="ts">
 // @ts-nocheck
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 
 const props = defineProps<{
   page: number
   pageSize: number
   total: number
+  testId?: string
 }>()
 
+const attrs = useAttrs()
+const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
+
 const emit = defineEmits<{
   'update:page': [page: number]
   'update:pageSize': [size: number]

package/components/SearchInput.vue

@@ -1,26 +1,34 @@
 <template>
-  <div class="relative">
+  <div class="relative" :data-testid="baseTestId">
     <input
       :value="modelValue"
       type="text"
       :placeholder="placeholder"
       class="search-input w-full"
+      :data-testid="baseTestId ? `${baseTestId}-input` : undefined"
       @input="onInput"
     />
     <button
       v-if="modelValue"
       class="absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary hover:text-text-primary"
+      :data-testid="baseTestId ? `${baseTestId}-clear` : undefined"
       @click="clear"
     >&times;</button>
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import { computed, useAttrs } from 'vue'
+
+const props = defineProps<{
   modelValue: string
   placeholder?: string
+  testId?: string
 }>()
 
+const attrs = useAttrs()
+const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
+
 const emit = defineEmits<{
   'update:modelValue': [value: string]
   search: [value: string]

package/components/SearchSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="rootRef" class="relative w-full">
+  <div ref="rootRef" class="relative w-full" :data-testid="baseTestId">
     <div
       class="input flex items-center w-full focus-within:border-accent-primary"
       :class="disabled ? 'opacity-60 cursor-not-allowed' : ''"
@@ -10,6 +10,7 @@
         :placeholder="displayLabel || placeholder"
         :disabled="disabled"
         class="flex-1 min-w-0 bg-transparent border-none outline-none text-input-text placeholder:text-input-placeholder"
+        :data-testid="baseTestId ? `${baseTestId}-input` : undefined"
         @focus="onFocus"
         @input="onInput"
       />
@@ -17,12 +18,14 @@
         v-if="clearable && modelValue"
         type="button"
         class="px-2 text-text-tertiary hover:text-text-primary"
+        :data-testid="baseTestId ? `${baseTestId}-clear` : undefined"
         @click.stop="clear"
         tabindex="-1"
       >✕</button>
       <button
         type="button"
         class="px-2 text-text-tertiary hover:text-text-primary"
+        :data-testid="baseTestId ? `${baseTestId}-toggle` : undefined"
         @click.stop="toggle"
         tabindex="-1"
       >▾</button>
@@ -38,6 +41,7 @@
         :key="opt.value"
         class="px-4 py-2 text-sm text-text-primary hover:bg-bg-hover cursor-pointer"
         :class="opt.value === modelValue ? 'bg-bg-secondary' : ''"
+        :data-testid="optionPrefix ? `${optionPrefix}-option-${opt.value}` : undefined"
         @mousedown.prevent="select(opt)"
       >
         {{ opt.label }}
@@ -47,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, useAttrs } from 'vue'
 import { match } from 'pinyin-pro'
 import type { SelectOption } from '../types'
 
@@ -57,12 +61,19 @@ const props = withDefaults(defineProps<{
   placeholder?: string
   clearable?: boolean
   disabled?: boolean
+  optionTestIdPrefix?: string
+  testId?: string
 }>(), {
   placeholder: '请选择',
   clearable: true,
   disabled: false,
+  optionTestIdPrefix: '',
 })
 
+const attrs = useAttrs()
+const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
+const optionPrefix = computed<string | undefined>(() => props.optionTestIdPrefix || baseTestId.value)
+
 const emit = defineEmits<{
   'update:modelValue': [value: string]
   'change': [value: string]

package/components/SideMenu.vue

@@ -1,10 +1,11 @@
 <template>
-  <aside class="sidebar" style="width: 200px;">
+  <aside class="sidebar" style="width: 200px;" :data-testid="baseTestId">
     <nav class="mt-3">
       <router-link
         to="/"
         class="sidebar-item text-xs"
         exact-active-class="sidebar-item-active"
+        :data-testid="baseTestId ? `${baseTestId}-item-home` : undefined"
       >
         <span class="w-5 text-center text-sm">🏠</span>
         <span class="ml-2">首页</span>
@@ -18,6 +19,7 @@
           :to="item.path"
           class="sidebar-item text-xs"
           active-class="sidebar-item-active"
+          :data-testid="baseTestId ? `${baseTestId}-item-${item.path}` : undefined"
         >
           <span class="w-5 text-center text-sm">{{ item.icon }}</span>
           <span class="ml-2">{{ item.label }}</span>
@@ -28,9 +30,14 @@
 </template>
 
 <script setup lang="ts">
+import { computed, useAttrs } from 'vue'
 import type { MenuGroup } from '../types'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   menuGroups: MenuGroup[]
+  testId?: string
 }>(), {})
+
+const attrs = useAttrs()
+const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
 </script>

package/components/StatusTag.vue

@@ -1,19 +1,23 @@
 <template>
-  <span class="badge" :class="cls">
+  <span class="badge" :class="cls" :data-testid="baseTestId">
     {{ label }}
   </span>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 
 const props = withDefaults(defineProps<{
   status: string | number
   statusMap?: Record<string | number, { label: string; cls: string }>
+  testId?: string
 }>(), {
   statusMap: () => ({})
 })
 
+const attrs = useAttrs()
+const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
+
 const defaultMap: Record<string, { label: string; cls: string }> = {
   active: { label: '正常', cls: 'badge-success' },
   locked: { label: '已锁定', cls: 'badge-danger' },

package/components/Toast.vue

@@ -1,16 +1,17 @@
 <template>
   <Teleport to="body">
-    <div class="fixed top-4 right-4 z-50 space-y-2">
+    <div class="fixed top-4 right-4 z-50 space-y-2" :data-testid="testId">
       <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]"
+          :data-testid="`${testId}-item-${toast.id}`"
         >
           <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>
+          <button @click="remove(toast.id)" class="ml-2 text-text-tertiary hover:text-text-primary" :data-testid="`${testId}-close-${toast.id}`">&times;</button>
         </div>
       </TransitionGroup>
     </div>
@@ -21,6 +22,12 @@
 import { useToast } from '../composables/useToast'
 import type { ToastType } from '../types'
 
+withDefaults(defineProps<{
+  testId?: string
+}>(), {
+  testId: 'toast',
+})
+
 const { toasts, remove } = useToast()
 
 const typeClasses: Record<ToastType, string> = {

package/components/TopNavbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="navbar">
+  <header class="navbar" :data-testid="testId || 'nav-bar'">
     <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">
@@ -20,6 +20,7 @@
           :class="activeModule === mod.key
             ? 'font-medium border-accent-primary'
             : 'text-text-secondary hover:text-text-primary border-transparent'"
+          :data-testid="testId ? `${testId}-module-${mod.key}` : undefined"
         >
           {{ mod.label }}
         </router-link>
@@ -33,6 +34,7 @@
           @click="showThemeDropdown = !showThemeDropdown"
           :title="`当前主题: ${themeStore.currentThemeInfo?.label}`"
           class="btn-icon text-text-secondary hover:text-text-primary"
+          :data-testid="testId ? `${testId}-theme-toggle` : undefined"
         >
           {{ themeIcon }}
         </button>
@@ -44,6 +46,7 @@
               :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'"
+              :data-testid="testId ? `${testId}-theme-${t.mode}` : undefined"
               @click="selectTheme(t.mode)"
             >
               <span>{{ t.icon }}</span>
@@ -57,6 +60,7 @@
       <div class="relative" ref="userDropdownRef">
         <button
           class="flex items-center gap-2 p-1 rounded-lg hover:bg-bg-tertiary transition-colors"
+          :data-testid="testId ? `${testId}-avatar` : 'avatar-button'"
           @click="showUserDropdown = !showUserDropdown"
         >
           <div class="navbar-avatar">{{ avatarInitial }}</div>
@@ -80,6 +84,7 @@
                 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'"
+                :data-testid="item.danger ? (testId ? `${testId}-logout` : 'logout-btn') : (testId ? `${testId}-menu-${idx}` : undefined)"
                 @click="handleItemClick(item)"
               >
                 <span v-if="item.icon">{{ item.icon }}</span>
@@ -105,6 +110,7 @@ const props = withDefaults(defineProps<{
   modules?: NavModule[]
   activeModule?: string
   userDropdownItems?: DropdownItem[]
+  testId?: string
 }>(), {
   title: '医疗设备智能平台',
   avatarText: 'U',

package/components/UserPicker.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="user-picker">
+  <div class="user-picker" :data-testid="baseTestId">
     <div class="mb-3">
       <input
         class="input w-full"
         v-model="keyword"
         placeholder="搜索用户..."
+        :data-testid="baseTestId ? `${baseTestId}-search` : undefined"
         @input="handleSearch"
       />
     </div>
@@ -20,6 +21,7 @@
         :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'"
+        :data-testid="baseTestId ? `${baseTestId}-item-${user.id}` : undefined"
         @click="selectUser(user)"
       >
         <div class="flex items-center justify-between">
@@ -44,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed, useAttrs } from 'vue'
 
 interface UserBasicInfo {
   id: string
@@ -56,8 +58,12 @@ interface UserBasicInfo {
 
 const props = defineProps<{
   fetchUsers: (keyword?: string) => Promise<UserBasicInfo[]>
+  testId?: string
 }>()
 
+const attrs = useAttrs()
+const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
+
 const emit = defineEmits<{
   select: [user: UserBasicInfo]
 }>()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquiferre/ui-kit",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "private": false,
   "type": "module",
   "main": "index.ts",