@aquiferre/ui-kit 0.4.1 → 0.4.3

package/components/DataTable.vue

@@ -39,8 +39,9 @@
           :data-testid="rowPrefix ? `${rowPrefix}-${row[rowKey] ?? index}` : undefined"
           class="table-row"
           @click="handleRowClick(row)"
+          @dblclick="handleRowDblClick(row)"
         >
-          <td v-if="selectable" class="table-cell" @click.stop>
+          <td v-if="selectable" class="table-cell" @click.stop @dblclick.stop>
             <input type="checkbox" :checked="isSelected(row)" :data-testid="rowPrefix ? `${rowPrefix}-checkbox-${row[rowKey] ?? index}` : undefined" @change="toggleRow(row)" />
           </td>
           <td
@@ -98,6 +99,7 @@ const rowPrefix = computed<string | undefined>(() => props.rowTestIdPrefix ?? ba
 const emit = defineEmits<{
   'update:selected': [ids: string[]]
   'row-click': [row: any]
+  'row-dblclick': [row: any]
   'sort-change': [payload: { field: string; order: 'asc' | 'desc' } | null]
 }>()
 
@@ -148,4 +150,8 @@ function toggleRow(row: any) {
 function handleRowClick(row: any) {
   emit('row-click', row)
 }
+
+function handleRowDblClick(row: any) {
+  emit('row-dblclick', row)
+}
 </script>

package/components/SideMenu.vue

@@ -1,18 +1,28 @@
 <template>
-  <aside class="sidebar" style="width: 200px;" :data-testid="baseTestId">
-    <nav class="mt-3">
+  <aside class="sidebar transition-all duration-200" :style="{ width: collapsed ? '52px' : '200px' }" :data-testid="baseTestId">
+    <div class="flex items-center justify-end px-1 pt-2 pb-1">
+      <button
+        v-if="collapsible"
+        class="sidebar-collapse-btn text-xs w-5 h-5 flex items-center justify-center rounded hover:bg-white/10 transition-colors"
+        :title="collapsed ? '展开菜单' : '收起菜单'"
+        @click="collapsed = !collapsed"
+      >{{ collapsed ? '▶' : '◀' }}</button>
+    </div>
+    <nav class="mt-1">
       <router-link
+        v-if="showHome"
         to="/"
         class="sidebar-item text-xs"
         exact-active-class="sidebar-item-active"
         :data-testid="baseTestId ? `${baseTestId}-item-home` : undefined"
+        :title="collapsed ? '首页' : undefined"
       >
         <span class="w-5 text-center text-sm">🏠</span>
-        <span class="ml-2">首页</span>
+        <span v-if="!collapsed" 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>
+        <div v-if="!collapsed" class="sidebar-section-title text-[10px]">{{ group.label }}</div>
         <router-link
           v-for="item in group.items"
           :key="item.path"
@@ -20,9 +30,10 @@
           class="sidebar-item text-xs"
           active-class="sidebar-item-active"
           :data-testid="baseTestId ? `${baseTestId}-item-${item.path}` : undefined"
+          :title="collapsed ? item.label : undefined"
         >
           <span class="w-5 text-center text-sm">{{ item.icon }}</span>
-          <span class="ml-2">{{ item.label }}</span>
+          <span v-if="!collapsed" class="ml-2">{{ item.label }}</span>
         </router-link>
       </template>
     </nav>
@@ -30,14 +41,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed, ref, useAttrs } from 'vue'
 import type { MenuGroup } from '../types'
 
 const props = withDefaults(defineProps<{
   menuGroups: MenuGroup[]
   testId?: string
-}>(), {})
+  collapsible?: boolean
+  showHome?: boolean
+}>(), { collapsible: false, showHome: true })
+
+const collapsed = ref(false)
 
 const attrs = useAttrs()
 const baseTestId = computed<string | undefined>(() => props.testId ?? (attrs['data-testid'] as string | undefined))
-</script>
+</script>

package/components/SuggestInput.vue

@@ -0,0 +1,230 @@
+<template>
+  <div ref="rootRef" class="relative w-full" :data-testid="baseTestId">
+    <div class="flex items-center input w-full focus-within:border-accent-primary" :class="disabled ? 'opacity-60 cursor-not-allowed' : ''">
+      <input
+        ref="inputRef"
+        :value="modelValue"
+        :placeholder="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"
+        type="text"
+        @input="onInput"
+        @focus="onFocus"
+      />
+      <button
+        v-if="clearable && modelValue"
+        type="button"
+        class="px-2 text-text-tertiary hover:text-text-primary shrink-0"
+        :data-testid="baseTestId ? `${baseTestId}-clear` : undefined"
+        @click.stop="clear"
+        tabindex="-1"
+      >&times;</button>
+      <!-- 获取模型按钮（loadBtn）：手动触发 loadOptions，点击后加载并展开下拉 -->
+      <button
+        v-if="loadBtn && loadOptions"
+        type="button"
+        class="px-2.5 py-1 m-1 text-xs rounded border border-accent-primary/40 text-accent-primary hover:bg-accent-primary/10 whitespace-nowrap shrink-0"
+        :disabled="loading"
+        :data-testid="baseTestId ? `${baseTestId}-load` : undefined"
+        @click.stop="onLoadBtnClick"
+        tabindex="-1"
+      >{{ loading ? '获取中...' : loadBtnText }}</button>
+      <!-- 无 loadBtn 时提供展开按钮（配合外部 options 模式） -->
+      <button
+        v-if="!loadBtn && loading"
+        type="button"
+        class="px-2 text-text-tertiary shrink-0"
+        disabled
+      ></button>
+      <button
+        v-else-if="!loadBtn"
+        type="button"
+        class="px-2 text-text-tertiary hover:text-text-primary shrink-0"
+        :data-testid="baseTestId ? `${baseTestId}-toggle` : undefined"
+        @click.stop="toggle"
+        tabindex="-1"
+      >▾</button>
+    </div>
+
+    <!-- 下拉弹层：absolute 定位跟随输入框（与 SearchSelect 一致）；父容器勿设 overflow-hidden -->
+    <div
+      v-if="open"
+      class="absolute top-full left-0 mt-1 w-full max-h-60 overflow-auto card shadow-lg z-20 py-1"
+      :data-testid="baseTestId ? `${baseTestId}-dropdown` : undefined"
+    >
+      <!-- 初始加载中 -->
+      <div v-if="initialLoading" class="px-4 py-2 text-sm text-text-tertiary">获取中...</div>
+      <!-- 加载失败 -->
+      <div v-else-if="loadError" class="px-4 py-2">
+        <span class="text-sm text-accent-danger">{{ loadError }}</span>
+        <button class="ml-2 text-xs text-accent-primary hover:text-accent-primary-hover" @click="retryLoad">重试</button>
+      </div>
+      <!-- 无选项 -->
+      <div v-else-if="filtered.length === 0" class="px-4 py-2 text-sm text-text-tertiary">无匹配项</div>
+      <!-- 选项列表 -->
+      <div
+        v-for="opt in filtered"
+        :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="optionTestIdPrefix ? `${optionTestIdPrefix}-option-${opt.value}` : undefined"
+        @mousedown.prevent="select(opt)"
+      >
+        {{ opt.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { match } from 'pinyin-pro'
+import type { SelectOption } from '../types'
+
+const props = withDefaults(defineProps<{
+  modelValue: string
+  options?: SelectOption[]
+  loadOptions?: () => Promise<SelectOption[]>
+  placeholder?: string
+  disabled?: boolean
+  clearable?: boolean
+  testId?: string
+  loadBtn?: boolean
+  loadBtnText?: string
+}>(), {
+  options: () => [],
+  placeholder: '请输入或选择',
+  disabled: false,
+  clearable: true,
+  loadBtn: false,
+  loadBtnText: '获取',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const baseTestId = computed(() => props.testId)
+const optionTestIdPrefix = baseTestId
+
+const rootRef = ref<HTMLElement | null>(null)
+const inputRef = ref<HTMLInputElement | null>(null)
+const open = ref(false)
+const loading = ref(false)
+const initialLoading = ref(false)
+const loadError = ref('')
+
+const innerOptions = ref<SelectOption[]>([])
+
+// 合并外部 options 与异步加载的选项
+const mergedOptions = computed(() => {
+  // 如果提供了 loadOptions，优先使用异步加载的结果
+  if (innerOptions.value.length) return innerOptions.value
+  return props.options
+})
+
+const query = ref('')
+
+const filtered = computed(() => {
+  const opts = mergedOptions.value
+  const q = query.value.trim()
+  if (!q) return opts
+  const ql = q.toLowerCase()
+  return opts.filter(o =>
+    o.label.toLowerCase().includes(ql) || match(o.label, q) !== null
+  )
+})
+
+async function loadAsync() {
+  if (!props.loadOptions) return
+  loadError.value = ''
+  initialLoading.value = true
+  loading.value = true
+  try {
+    const result = await props.loadOptions()
+    innerOptions.value = result
+  } catch (err: any) {
+    loadError.value = err?.message || '获取失败'
+  } finally {
+    initialLoading.value = false
+    loading.value = false
+  }
+}
+
+function retryLoad() {
+  loadAsync()
+}
+
+function onInput(e: Event) {
+  const value = (e.target as HTMLInputElement).value
+  emit('update:modelValue', value)
+  query.value = value
+  if (!open.value) open.value = true
+}
+
+function onFocus() {
+  if (props.disabled) return
+  // 有 loadBtn 时，展开聚焦不自动加载（需用户点击按钮）
+  if (!props.loadBtn && props.loadOptions && innerOptions.value.length === 0 && !loading.value) {
+    loadAsync()
+  }
+  open.value = true
+}
+
+function toggle() {
+  if (props.disabled) return
+  if (open.value) {
+    open.value = false
+    return
+  }
+  // 有 loadBtn 时不自动加载
+  if (!props.loadBtn && props.loadOptions && innerOptions.value.length === 0) {
+    loadAsync()
+  }
+  open.value = true
+  nextTick(() => inputRef.value?.focus())
+}
+
+async function onLoadBtnClick() {
+  if (!props.loadOptions) return
+  await loadAsync()
+  open.value = true
+}
+
+function select(opt: SelectOption) {
+  emit('update:modelValue', opt.value)
+  open.value = false
+  query.value = ''
+}
+
+function clear() {
+  emit('update:modelValue', '')
+  open.value = false
+  query.value = ''
+}
+
+// 下拉关闭（外部点击 / Escape）
+function close() {
+  open.value = false
+}
+
+function handleOutside(e: MouseEvent) {
+  if (rootRef.value && !rootRef.value.contains(e.target as Node)) {
+    open.value = false
+  }
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') close()
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleOutside)
+  document.addEventListener('keydown', onKeydown)
+})
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleOutside)
+  document.removeEventListener('keydown', onKeydown)
+})
+</script>

package/index.ts

@@ -13,6 +13,7 @@ export { default as FileUploader } from './components/FileUploader.vue'
 export { default as UserPicker } from './components/UserPicker.vue'
 export { default as SearchSelect } from './components/SearchSelect.vue'
 export { default as SideMenu } from './components/SideMenu.vue'
+export { default as SuggestInput } from './components/SuggestInput.vue'
 export { default as TopNavbar } from './components/TopNavbar.vue'
 export { default as DateTimePicker } from './components/DateTimePicker.vue'
 export { default as Tree } from './components/Tree.vue'

package/package.json

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