foggy-data-viewer 1.0.1-beta.0

package/src/components/SearchToolbar.vue

@@ -0,0 +1,406 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import type { EnhancedColumnSchema, SliceRequestDef } from '@/types'
+import { TextFilter, NumberRangeFilter, DateRangeFilter, SelectFilter, BoolFilter } from './filters'
+
+/**
+ * SearchToolbar 组件
+ *
+ * 独立的搜索工具栏组件，可单独使用或集成到 DataTable 的 toolbar 插槽
+ * 支持字段级快速筛选，与 DataTable 的过滤器体系保持一致
+ */
+interface Props {
+  /** 列配置（从 QM Schema 构建） */
+  columns: EnhancedColumnSchema[]
+  /** 可搜索的字段列表（不指定则显示所有可筛选字段） */
+  searchableFields?: string[]
+  /** 当前筛选条件（v-model） */
+  modelValue?: SliceRequestDef[]
+  /** 布局方式 */
+  layout?: 'horizontal' | 'vertical'
+  /** 是否显示操作按钮（搜索、重置） */
+  showActions?: boolean
+  /** 过滤选项加载器（用于维度列） */
+  filterOptionsLoader?: (columnName: string) => Promise<{ label: string; value: string | number }[]>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: 'horizontal',
+  showActions: true
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: SliceRequestDef[]): void
+  (e: 'search'): void
+  (e: 'reset'): void
+}>()
+
+// 内部筛选状态：按字段存储
+const filterValues = ref<Record<string, SliceRequestDef[] | null>>({})
+
+// 根据配置获取可搜索的列
+const searchableColumns = computed(() => {
+  let cols = props.columns.filter(col => col.filterable !== false)
+
+  if (props.searchableFields && props.searchableFields.length > 0) {
+    cols = cols.filter(col => props.searchableFields!.includes(col.name))
+  }
+
+  return cols
+})
+
+// 从 modelValue 初始化
+watch(() => props.modelValue, (slices) => {
+  if (!slices || slices.length === 0) {
+    filterValues.value = {}
+    return
+  }
+
+  // 按 field 分组
+  const grouped: Record<string, SliceRequestDef[]> = {}
+  for (const slice of slices) {
+    if (!slice.field) continue
+    if (!grouped[slice.field]) {
+      grouped[slice.field] = []
+    }
+    grouped[slice.field].push(slice)
+  }
+
+  filterValues.value = grouped
+}, { immediate: true })
+
+// 推断过滤器类型
+function inferFilterType(col: EnhancedColumnSchema): string {
+  const type = col.type?.toUpperCase()
+
+  // 日期类型优先
+  switch (type) {
+    case 'DAY':
+    case 'DATE':
+      return 'date'
+    case 'DATETIME':
+      return 'datetime'
+  }
+
+  // 使用后端返回的 filterType
+  if (col.filterType) {
+    return col.filterType
+  }
+
+  // 回退：根据 type 推断
+  switch (type) {
+    case 'NUMBER':
+    case 'MONEY':
+    case 'BIGDECIMAL':
+    case 'INTEGER':
+    case 'BIGINT':
+    case 'LONG':
+      return 'number'
+    case 'BOOL':
+    case 'BOOLEAN':
+      return 'bool'
+    case 'DICT':
+      return 'dict'
+    default:
+      return 'text'
+  }
+}
+
+// 获取过滤器组件
+function getFilterComponent(col: EnhancedColumnSchema) {
+  if (col.customFilterComponent) {
+    return col.customFilterComponent
+  }
+
+  const filterType = inferFilterType(col)
+
+  switch (filterType) {
+    case 'text':
+      return TextFilter
+    case 'number':
+      return NumberRangeFilter
+    case 'date':
+      return DateRangeFilter
+    case 'datetime':
+      return DateRangeFilter
+    case 'dict':
+      return SelectFilter
+    case 'dimension':
+      return SelectFilter
+    case 'bool':
+      return BoolFilter
+    default:
+      return TextFilter
+  }
+}
+
+// 获取过滤器属性
+function getFilterProps(col: EnhancedColumnSchema) {
+  const filterType = inferFilterType(col)
+  const baseProps: Record<string, unknown> = {
+    field: col.name,
+    modelValue: filterValues.value[col.name] || null,
+    'onUpdate:modelValue': (val: SliceRequestDef[] | null) => updateFilter(col.name, val)
+  }
+
+  switch (filterType) {
+    case 'datetime':
+      return { ...baseProps, showTime: true, format: col.format }
+    case 'date':
+      return { ...baseProps, format: col.format }
+    case 'dict':
+      return {
+        ...baseProps,
+        options: col.dictItems || [],
+        placeholder: `请选择${col.title || col.name}`
+      }
+    case 'dimension':
+      return {
+        ...baseProps,
+        options: [],
+        loading: false,
+        placeholder: `请选择${col.title || col.name}`
+      }
+    default:
+      return {
+        ...baseProps,
+        placeholder: `搜索${col.title || col.name}...`
+      }
+  }
+}
+
+// 更新过滤值
+function updateFilter(columnName: string, value: SliceRequestDef[] | null) {
+  if (value === null || value.length === 0) {
+    delete filterValues.value[columnName]
+  } else {
+    filterValues.value[columnName] = value
+  }
+
+  // 立即同步到 modelValue（实时搜索）
+  emitFilterChange()
+}
+
+// 发送过滤变更事件
+function emitFilterChange() {
+  const allSlices: SliceRequestDef[] = []
+  for (const slices of Object.values(filterValues.value)) {
+    if (slices && slices.length > 0) {
+      allSlices.push(...slices)
+    }
+  }
+  emit('update:modelValue', allSlices)
+}
+
+// 点击搜索按钮
+function handleSearch() {
+  emitFilterChange()
+  emit('search')
+}
+
+// 点击重置按钮
+function handleReset() {
+  filterValues.value = {}
+  emit('update:modelValue', [])
+  emit('reset')
+}
+
+// 暴露方法
+defineExpose({
+  /** 清空所有筛选 */
+  clearFilters: handleReset,
+  /** 获取当前筛选条件 */
+  getFilters: (): SliceRequestDef[] => {
+    const allSlices: SliceRequestDef[] = []
+    for (const slices of Object.values(filterValues.value)) {
+      if (slices && slices.length > 0) {
+        allSlices.push(...slices)
+      }
+    }
+    return allSlices
+  }
+})
+</script>
+
+<template>
+  <div class="search-toolbar" :class="`layout-${layout}`">
+    <div class="search-fields">
+      <div
+        v-for="col in searchableColumns"
+        :key="col.name"
+        class="search-field-item"
+      >
+        <label class="field-label">{{ col.title || col.name }}</label>
+        <div class="field-filter">
+          <component
+            :is="getFilterComponent(col)"
+            v-bind="getFilterProps(col)"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div v-if="showActions" class="search-actions">
+      <button class="btn btn-primary" @click="handleSearch">
+        <span class="btn-icon">🔍</span>
+        搜索
+      </button>
+      <button class="btn btn-default" @click="handleReset">
+        <span class="btn-icon">↻</span>
+        重置
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.search-toolbar {
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+}
+
+/* 水平布局（默认） */
+.search-toolbar.layout-horizontal {
+  flex-direction: row;
+  align-items: flex-end;
+}
+
+.search-toolbar.layout-horizontal .search-fields {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.search-toolbar.layout-horizontal .search-field-item {
+  min-width: 200px;
+  flex: 0 1 auto;
+}
+
+/* 垂直布局 */
+.search-toolbar.layout-vertical {
+  flex-direction: column;
+}
+
+.search-toolbar.layout-vertical .search-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.search-toolbar.layout-vertical .search-field-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.search-toolbar.layout-vertical .field-label {
+  min-width: 100px;
+  text-align: right;
+}
+
+.search-toolbar.layout-vertical .field-filter {
+  flex: 1;
+}
+
+/* 字段样式 */
+.search-field-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.field-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #606266;
+  white-space: nowrap;
+}
+
+.field-filter {
+  min-width: 0;
+}
+
+/* 操作按钮 */
+.search-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 16px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+  height: 32px;
+}
+
+.btn-icon {
+  font-size: 14px;
+}
+
+.btn-primary {
+  background: #409eff;
+  color: white;
+  border-color: #409eff;
+}
+
+.btn-primary:hover {
+  background: #66b1ff;
+  border-color: #66b1ff;
+}
+
+.btn-primary:active {
+  background: #3a8ee6;
+  border-color: #3a8ee6;
+}
+
+.btn-default {
+  background: white;
+  color: #606266;
+  border-color: #dcdfe6;
+}
+
+.btn-default:hover {
+  color: #409eff;
+  border-color: #c6e2ff;
+  background: #ecf5ff;
+}
+
+.btn-default:active {
+  color: #3a8ee6;
+  border-color: #3a8ee6;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+  .search-toolbar.layout-horizontal {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .search-toolbar.layout-horizontal .search-fields {
+    flex-direction: column;
+  }
+
+  .search-toolbar.layout-horizontal .search-field-item {
+    min-width: 0;
+  }
+
+  .search-actions {
+    justify-content: flex-end;
+  }
+}
+</style>

package/src/components/composables/index.ts

@@ -0,0 +1,2 @@
+export { useTableSelection } from './useTableSelection'
+export { useTableSummary } from './useTableSummary'

package/src/components/composables/useTableSelection.test.ts

@@ -0,0 +1,248 @@
+import { describe, it, expect } from 'vitest'
+import { useTableSelection } from './useTableSelection'
+
+describe('useTableSelection', () => {
+  describe('selectedRows', () => {
+    it('should initialize with empty array', () => {
+      const { selectedRows } = useTableSelection()
+
+      expect(selectedRows.value).toEqual([])
+    })
+  })
+
+  describe('onCheckboxChange', () => {
+    it('should update selected rows when checkbox changes', () => {
+      const { selectedRows, onCheckboxChange } = useTableSelection()
+
+      const mockRecords = [
+        { id: 1, name: 'Test 1' },
+        { id: 2, name: 'Test 2' }
+      ]
+
+      onCheckboxChange({ records: mockRecords })
+
+      expect(selectedRows.value).toEqual(mockRecords)
+    })
+
+    it('should handle single row selection', () => {
+      const { selectedRows, onCheckboxChange } = useTableSelection()
+
+      const mockRecord = [{ id: 1, name: 'Test 1' }]
+
+      onCheckboxChange({ records: mockRecord })
+
+      expect(selectedRows.value).toHaveLength(1)
+      expect(selectedRows.value[0]).toEqual(mockRecord[0])
+    })
+
+    it('should handle deselection', () => {
+      const { selectedRows, onCheckboxChange } = useTableSelection()
+
+      // 先选中
+      onCheckboxChange({ records: [{ id: 1, name: 'Test 1' }] })
+      expect(selectedRows.value).toHaveLength(1)
+
+      // 取消选中
+      onCheckboxChange({ records: [] })
+      expect(selectedRows.value).toHaveLength(0)
+    })
+
+    it('should replace previous selection', () => {
+      const { selectedRows, onCheckboxChange } = useTableSelection()
+
+      onCheckboxChange({ records: [{ id: 1, name: 'Test 1' }] })
+      expect(selectedRows.value[0].id).toBe(1)
+
+      onCheckboxChange({ records: [{ id: 2, name: 'Test 2' }] })
+      expect(selectedRows.value).toHaveLength(1)
+      expect(selectedRows.value[0].id).toBe(2)
+    })
+  })
+
+  describe('onCheckboxAll', () => {
+    it('should select all rows', () => {
+      const { selectedRows, onCheckboxAll } = useTableSelection()
+
+      const mockRecords = [
+        { id: 1, name: 'Test 1' },
+        { id: 2, name: 'Test 2' },
+        { id: 3, name: 'Test 3' }
+      ]
+
+      onCheckboxAll({ records: mockRecords })
+
+      expect(selectedRows.value).toEqual(mockRecords)
+      expect(selectedRows.value).toHaveLength(3)
+    })
+
+    it('should deselect all rows', () => {
+      const { selectedRows, onCheckboxAll } = useTableSelection()
+
+      // 先全选
+      onCheckboxAll({ records: [
+        { id: 1, name: 'Test 1' },
+        { id: 2, name: 'Test 2' }
+      ] })
+      expect(selectedRows.value).toHaveLength(2)
+
+      // 取消全选
+      onCheckboxAll({ records: [] })
+      expect(selectedRows.value).toHaveLength(0)
+    })
+
+    it('should replace previous selection with all rows', () => {
+      const { selectedRows, onCheckboxChange, onCheckboxAll } = useTableSelection()
+
+      // 先选中一行
+      onCheckboxChange({ records: [{ id: 1, name: 'Test 1' }] })
+      expect(selectedRows.value).toHaveLength(1)
+
+      // 全选
+      const allRecords = [
+        { id: 1, name: 'Test 1' },
+        { id: 2, name: 'Test 2' },
+        { id: 3, name: 'Test 3' }
+      ]
+      onCheckboxAll({ records: allRecords })
+      expect(selectedRows.value).toHaveLength(3)
+    })
+  })
+
+  describe('clearSelection', () => {
+    it('should clear all selected rows', () => {
+      const { selectedRows, onCheckboxChange, clearSelection } = useTableSelection()
+
+      onCheckboxChange({ records: [
+        { id: 1, name: 'Test 1' },
+        { id: 2, name: 'Test 2' }
+      ] })
+      expect(selectedRows.value).toHaveLength(2)
+
+      clearSelection()
+      expect(selectedRows.value).toEqual([])
+    })
+
+    it('should work when no rows are selected', () => {
+      const { selectedRows, clearSelection } = useTableSelection()
+
+      expect(selectedRows.value).toHaveLength(0)
+      clearSelection()
+      expect(selectedRows.value).toHaveLength(0)
+    })
+
+    it('should be idempotent', () => {
+      const { selectedRows, onCheckboxChange, clearSelection } = useTableSelection()
+
+      onCheckboxChange({ records: [{ id: 1, name: 'Test 1' }] })
+
+      clearSelection()
+      expect(selectedRows.value).toHaveLength(0)
+
+      clearSelection()
+      expect(selectedRows.value).toHaveLength(0)
+    })
+  })
+
+  describe('getSelectedCount', () => {
+    it('should return 0 when no rows selected', () => {
+      const { getSelectedCount } = useTableSelection()
+
+      expect(getSelectedCount()).toBe(0)
+    })
+
+    it('should return correct count of selected rows', () => {
+      const { onCheckboxChange, getSelectedCount } = useTableSelection()
+
+      onCheckboxChange({ records: [
+        { id: 1, name: 'Test 1' },
+        { id: 2, name: 'Test 2' }
+      ] })
+
+      expect(getSelectedCount()).toBe(2)
+    })
+
+    it('should update when selection changes', () => {
+      const { onCheckboxChange, clearSelection, getSelectedCount } = useTableSelection()
+
+      expect(getSelectedCount()).toBe(0)
+
+      onCheckboxChange({ records: [{ id: 1, name: 'Test 1' }] })
+      expect(getSelectedCount()).toBe(1)
+
+      onCheckboxChange({ records: [
+        { id: 1, name: 'Test 1' },
+        { id: 2, name: 'Test 2' }
+      ] })
+      expect(getSelectedCount()).toBe(2)
+
+      clearSelection()
+      expect(getSelectedCount()).toBe(0)
+    })
+  })
+
+  describe('Type Safety', () => {
+    interface CustomRow {
+      customId: number
+      customName: string
+    }
+
+    it('should support custom row types', () => {
+      const { selectedRows, onCheckboxChange } = useTableSelection<CustomRow>()
+
+      const mockRecords: CustomRow[] = [
+        { customId: 1, customName: 'Custom 1' },
+        { customId: 2, customName: 'Custom 2' }
+      ]
+
+      onCheckboxChange({ records: mockRecords })
+
+      expect(selectedRows.value).toEqual(mockRecords)
+      expect(selectedRows.value[0].customId).toBe(1)
+      expect(selectedRows.value[0].customName).toBe('Custom 1')
+    })
+  })
+
+  describe('Integration', () => {
+    it('should work together in complete workflow', () => {
+      const { selectedRows, onCheckboxChange, onCheckboxAll, clearSelection, getSelectedCount } =
+        useTableSelection()
+
+      // 初始状态
+      expect(getSelectedCount()).toBe(0)
+
+      // 选中一行
+      onCheckboxChange({ records: [{ id: 1, name: 'Test 1' }] })
+      expect(getSelectedCount()).toBe(1)
+
+      // 全选
+      onCheckboxAll({ records: [
+        { id: 1, name: 'Test 1' },
+        { id: 2, name: 'Test 2' },
+        { id: 3, name: 'Test 3' }
+      ] })
+      expect(getSelectedCount()).toBe(3)
+
+      // 取消选中一行
+      onCheckboxChange({ records: [
+        { id: 1, name: 'Test 1' },
+        { id: 3, name: 'Test 3' }
+      ] })
+      expect(getSelectedCount()).toBe(2)
+
+      // 清空选择
+      clearSelection()
+      expect(getSelectedCount()).toBe(0)
+      expect(selectedRows.value).toEqual([])
+    })
+
+    it('should handle rapid selection changes', () => {
+      const { onCheckboxChange, getSelectedCount } = useTableSelection()
+
+      // 快速连续选择
+      for (let i = 1; i <= 5; i++) {
+        onCheckboxChange({ records: Array.from({ length: i }, (_, j) => ({ id: j + 1 })) })
+        expect(getSelectedCount()).toBe(i)
+      }
+    })
+  })
+})

package/src/components/composables/useTableSelection.ts

@@ -0,0 +1,44 @@
+import { ref } from 'vue'
+
+/**
+ * 表格行选择逻辑
+ */
+export function useTableSelection<T = Record<string, unknown>>() {
+  const selectedRows = ref<T[]>([])
+
+  /**
+   * checkbox 变化处理
+   */
+  function onCheckboxChange({ records }: { records: T[] }) {
+    selectedRows.value = records
+  }
+
+  /**
+   * 全选变化处理
+   */
+  function onCheckboxAll({ records }: { records: T[] }) {
+    selectedRows.value = records
+  }
+
+  /**
+   * 清空选择
+   */
+  function clearSelection() {
+    selectedRows.value = []
+  }
+
+  /**
+   * 获取选中行数
+   */
+  function getSelectedCount() {
+    return selectedRows.value.length
+  }
+
+  return {
+    selectedRows,
+    onCheckboxChange,
+    onCheckboxAll,
+    clearSelection,
+    getSelectedCount
+  }
+}