foggy-data-viewer 1.0.1-beta.0

package/src/components/DataTableWithSearch.vue

@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import { ref, computed, useAttrs } from 'vue'
+import type { EnhancedColumnSchema, SliceRequestDef, FilterOption } from '@/types'
+import SearchToolbar from './SearchToolbar.vue'
+import DataTable from './DataTable.vue'
+
+// 禁用自动继承属性
+defineOptions({
+  inheritAttrs: false
+})
+
+// 获取透传的属性和事件
+const attrs = useAttrs()
+
+/**
+ * DataTableWithSearch 组件
+ *
+ * 组合了 SearchToolbar 和 DataTable 的高级组件
+ * 支持完整的属性和事件透传到底层组件
+ */
+interface Props {
+  // ========== DataTable Props ==========
+  /** 列配置（必填） */
+  columns: EnhancedColumnSchema[]
+  /** 表格数据（必填） */
+  data: Record<string, unknown>[]
+  /** 总数据量（必填） */
+  total: number
+  /** 加载状态 */
+  loading: boolean
+  /** 每页大小 */
+  pageSize?: number
+  /** 是否显示表头过滤器 */
+  showFilters?: boolean
+  /** 初始筛选条件 */
+  initialSlice?: SliceRequestDef[]
+  /** 服务端汇总数据 */
+  serverSummary?: Record<string, unknown> | null
+  /** 过滤选项加载器 */
+  filterOptionsLoader?: (columnName: string) => Promise<FilterOption[]>
+  /** 自定义过滤器组件映射 */
+  customFilterComponents?: Record<string, unknown>
+
+  // ========== SearchToolbar Props ==========
+  /** 是否显示搜索工具栏 */
+  showSearchToolbar?: boolean
+  /** 搜索工具栏可搜索字段（不指定则使用所有可筛选字段） */
+  searchableFields?: string[]
+  /** 搜索工具栏布局 */
+  searchLayout?: 'horizontal' | 'vertical'
+  /** 是否显示搜索按钮 */
+  showSearchActions?: boolean
+
+  // ========== 组合配置 ==========
+  /** 搜索工具栏和表头过滤器的筛选条件合并模式 */
+  filterMergeMode?: 'replace' | 'merge'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  pageSize: 50,
+  showFilters: true,
+  showSearchToolbar: true,
+  searchLayout: 'horizontal',
+  showSearchActions: true,
+  filterMergeMode: 'merge'
+})
+
+const emit = defineEmits<{
+  // DataTable 事件
+  (e: 'page-change', page: number, size: number): void
+  (e: 'sort-change', field: string | null, order: 'asc' | 'desc' | null): void
+  (e: 'filter-change', slices: SliceRequestDef[]): void
+  (e: 'row-click', row: Record<string, unknown>, column: EnhancedColumnSchema): void
+  (e: 'row-dblclick', row: Record<string, unknown>, column: EnhancedColumnSchema): void
+  // SearchToolbar 事件
+  (e: 'search', slices: SliceRequestDef[]): void
+  (e: 'reset'): void
+}>()
+
+// 组件引用
+const searchToolbarRef = ref<InstanceType<typeof SearchToolbar>>()
+const dataTableRef = ref<InstanceType<typeof DataTable>>()
+
+// 搜索工具栏筛选条件
+const searchSlices = ref<SliceRequestDef[]>([])
+// 表头筛选条件
+const tableSlices = ref<SliceRequestDef[]>([])
+
+// 合并后的筛选条件
+const mergedSlices = computed(() => {
+  if (props.filterMergeMode === 'replace') {
+    // 替换模式：搜索工具栏优先，如果为空则使用表头筛选
+    return searchSlices.value.length > 0 ? searchSlices.value : tableSlices.value
+  } else {
+    // 合并模式：两者合并（去重）
+    const merged = [...searchSlices.value]
+    const searchFields = new Set(searchSlices.value.map(s => s.field))
+
+    // 添加表头筛选中不在搜索工具栏中的字段
+    for (const slice of tableSlices.value) {
+      if (!searchFields.has(slice.field)) {
+        merged.push(slice)
+      }
+    }
+
+    return merged
+  }
+})
+
+// 处理搜索工具栏筛选变化
+function handleSearchChange(slices: SliceRequestDef[]) {
+  searchSlices.value = slices
+  emit('filter-change', mergedSlices.value)
+}
+
+// 处理搜索按钮点击
+function handleSearch() {
+  emit('search', searchSlices.value)
+  emit('filter-change', mergedSlices.value)
+}
+
+// 处理重置按钮点击
+function handleReset() {
+  searchSlices.value = []
+  emit('reset')
+  emit('filter-change', mergedSlices.value)
+}
+
+// 处理表头筛选变化
+function handleTableFilterChange(slices: SliceRequestDef[]) {
+  tableSlices.value = slices
+  emit('filter-change', mergedSlices.value)
+}
+
+// 分离 DataTable 的 props 和用户自定义的 props
+const dataTableProps = computed(() => {
+  // 从 attrs 中提取非事件属性
+  const userProps = Object.keys(attrs)
+    .filter(key => !key.startsWith('on'))
+    .reduce((acc, key) => ({ ...acc, [key]: attrs[key] }), {})
+
+  return {
+    columns: props.columns,
+    data: props.data,
+    total: props.total,
+    loading: props.loading,
+    pageSize: props.pageSize,
+    showFilters: props.showFilters,
+    initialSlice: props.initialSlice,
+    serverSummary: props.serverSummary,
+    filterOptionsLoader: props.filterOptionsLoader,
+    customFilterComponents: props.customFilterComponents,
+    ...userProps
+  }
+})
+
+// 提取用户传入的事件监听器
+const dataTableEvents = computed(() => {
+  const userEvents: Record<string, Function> = {}
+  Object.keys(attrs).forEach(key => {
+    if (key.startsWith('on')) {
+      const eventName = key.slice(2, 3).toLowerCase() + key.slice(3)
+      userEvents[eventName] = attrs[key] as Function
+    }
+  })
+
+  return {
+    'page-change': (...args: any[]) => {
+      emit('page-change', ...args as [number, number])
+      if (userEvents['pageChange']) {
+        userEvents['pageChange'](...args)
+      }
+    },
+    'sort-change': (...args: any[]) => {
+      emit('sort-change', ...args as [string | null, 'asc' | 'desc' | null])
+      if (userEvents['sortChange']) {
+        userEvents['sortChange'](...args)
+      }
+    },
+    'filter-change': handleTableFilterChange,
+    'row-click': (...args: any[]) => {
+      emit('row-click', ...args as [Record<string, unknown>, EnhancedColumnSchema])
+      if (userEvents['rowClick']) {
+        userEvents['rowClick'](...args)
+      }
+    },
+    'row-dblclick': (...args: any[]) => {
+      emit('row-dblclick', ...args as [Record<string, unknown>, EnhancedColumnSchema])
+      if (userEvents['rowDblclick']) {
+        userEvents['rowDblclick'](...args)
+      }
+    }
+  }
+})
+
+// 暴露方法和子组件引用
+defineExpose({
+  /** 获取 SearchToolbar 实例 */
+  getSearchToolbar: () => searchToolbarRef.value,
+  /** 获取 DataTable 实例 */
+  getDataTable: () => dataTableRef.value,
+  /** 清空搜索工具栏筛选 */
+  clearSearchFilters: () => searchToolbarRef.value?.clearFilters(),
+  /** 清空表头筛选 */
+  clearTableFilters: () => dataTableRef.value?.clearFilters(),
+  /** 清空所有筛选 */
+  clearAllFilters: () => {
+    searchToolbarRef.value?.clearFilters()
+    dataTableRef.value?.clearFilters()
+  },
+  /** 获取合并后的筛选条件 */
+  getMergedFilters: () => mergedSlices.value,
+  /** 重置分页 */
+  resetPagination: () => dataTableRef.value?.resetPagination()
+})
+</script>
+
+<template>
+  <div class="data-table-with-search">
+    <!-- 搜索工具栏 -->
+    <div v-if="showSearchToolbar" class="search-toolbar-wrapper">
+      <SearchToolbar
+        ref="searchToolbarRef"
+        :columns="columns"
+        :searchable-fields="searchableFields"
+        :layout="searchLayout"
+        :show-actions="showSearchActions"
+        :filter-options-loader="filterOptionsLoader"
+        v-model="searchSlices"
+        @update:model-value="handleSearchChange"
+        @search="handleSearch"
+        @reset="handleReset"
+      />
+    </div>
+
+    <!-- 数据表格 -->
+    <div class="data-table-wrapper">
+      <DataTable
+        ref="dataTableRef"
+        v-bind="dataTableProps"
+        v-on="dataTableEvents"
+      >
+        <!-- 透传所有插槽 -->
+        <template v-for="(_, name) in $slots" #[name]="slotData">
+          <slot :name="name" v-bind="slotData || {}" />
+        </template>
+      </DataTable>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.data-table-with-search {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  height: 100%;
+}
+
+.search-toolbar-wrapper {
+  flex-shrink: 0;
+}
+
+.data-table-wrapper {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.data-table-wrapper :deep(.data-table) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/src/components/DataViewer.vue

@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import DataTable from './DataTable.vue'
+import { fetchQueryMeta, fetchQueryData, fetchFilterOptions, fetchQmSchema } from '@/api/viewer'
+import { buildTableColumns } from '@/utils/schemaHelper'
+import type { QueryMetaResponse, ViewerQueryRequest, SliceRequestDef, OrderRequestDef, FilterOption, EnhancedColumnSchema, ColumnSchema } from '@/types'
+
+const props = defineProps<{
+  queryId: string
+}>()
+
+// 状态
+const loading = ref(false)
+const error = ref<string | null>(null)
+const expired = ref(false)
+const meta = ref<QueryMetaResponse | null>(null)
+const qmSchema = ref<ColumnSchema[]>([])
+const columns = ref<EnhancedColumnSchema[]>([])
+const data = ref<Record<string, unknown>[]>([])
+const total = ref(0)
+const serverSummary = ref<Record<string, unknown> | null>(null)
+
+// 查询参数 (DSL 格式)
+const queryParams = ref<ViewerQueryRequest>({
+  start: 0,
+  limit: 50,
+  slice: [],
+  orderBy: []
+})
+
+const dataTableRef = ref<InstanceType<typeof DataTable>>()
+
+// 计算属性
+const title = computed(() => meta.value?.title || '数据浏览器')
+const expiresAt = computed(() => {
+  if (!meta.value?.expiresAt) return ''
+  return new Date(meta.value.expiresAt).toLocaleString('zh-CN')
+})
+
+// 加载元数据
+async function loadMeta() {
+  try {
+    loading.value = true
+    error.value = null
+
+    // 1. 获取查询元数据（包含 tableConfig）
+    meta.value = await fetchQueryMeta(props.queryId)
+
+    // 2. 获取 QM Schema
+    if (meta.value.tableConfig.qmModel) {
+      qmSchema.value = await fetchQmSchema(meta.value.tableConfig.qmModel)
+
+      // 3. 使用 buildTableColumns 构建列配置
+      columns.value = buildTableColumns(qmSchema.value, meta.value.tableConfig)
+    }
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : '加载元数据失败'
+  } finally {
+    loading.value = false
+  }
+}
+
+// 加载数据
+async function loadData() {
+  if (!meta.value) return
+
+  try {
+    loading.value = true
+    error.value = null
+
+    const response = await fetchQueryData(props.queryId, queryParams.value)
+
+    if (response.expired) {
+      expired.value = true
+      error.value = response.errorMessage || '查询已过期'
+      return
+    }
+
+    if (!response.success) {
+      error.value = response.errorMessage || '查询失败'
+      return
+    }
+
+    data.value = response.items
+    total.value = response.total
+    // 提取汇总数据
+    serverSummary.value = response.totalData ?? null
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : '加载数据失败'
+  } finally {
+    loading.value = false
+  }
+}
+
+// 事件处理
+function handlePageChange(page: number, size: number) {
+  queryParams.value.start = (page - 1) * size
+  queryParams.value.limit = size
+  loadData()
+}
+
+function handleSortChange(field: string | null, order: 'asc' | 'desc' | null) {
+  if (field && order) {
+    queryParams.value.orderBy = [{ field, order }]
+  } else {
+    queryParams.value.orderBy = []
+  }
+  loadData()
+}
+
+function handleFilterChange(slices: SliceRequestDef[]) {
+  queryParams.value.slice = slices
+  queryParams.value.start = 0
+  dataTableRef.value?.resetPagination()
+  loadData()
+}
+
+// 加载维度选项
+async function loadFilterOptions(columnName: string): Promise<FilterOption[]> {
+  try {
+    const response = await fetchFilterOptions(props.queryId, columnName)
+    return response.options || []
+  } catch (e) {
+    console.error('Failed to load filter options:', e)
+    return []
+  }
+}
+
+// 刷新数据
+function refresh() {
+  loadData()
+}
+
+// 初始化
+onMounted(async () => {
+  await loadMeta()
+  if (meta.value) {
+    // 应用初始过滤条件（如果有）
+    if (meta.value.initialSlice && meta.value.initialSlice.length > 0) {
+      queryParams.value.slice = meta.value.initialSlice
+    }
+    await loadData()
+  }
+})
+</script>
+
+<template>
+  <div class="data-viewer">
+    <header class="viewer-header">
+      <h1 class="viewer-title">{{ title }}</h1>
+      <div class="viewer-info">
+        <span v-if="meta?.tableConfig?.qmModel" class="info-item">
+          模型: <strong>{{ meta.tableConfig.qmModel }}</strong>
+        </span>
+        <span v-if="meta?.estimatedRowCount" class="info-item">
+          预估行数: <strong>{{ meta.estimatedRowCount.toLocaleString() }}</strong>
+        </span>
+        <span v-if="expiresAt" class="info-item">
+          过期时间: <strong>{{ expiresAt }}</strong>
+        </span>
+        <button class="refresh-btn" @click="refresh" :disabled="loading">
+          刷新
+        </button>
+      </div>
+    </header>
+
+    <div v-if="expired" class="viewer-expired">
+      <div class="expired-content">
+        <h2>链接已过期</h2>
+        <p>请联系AI助手重新生成查询链接</p>
+      </div>
+    </div>
+
+    <div v-else-if="error && !data.length" class="viewer-error">
+      <div class="error-content">
+        <h2>加载失败</h2>
+        <p>{{ error }}</p>
+        <button @click="loadData">重试</button>
+      </div>
+    </div>
+
+    <main v-else class="viewer-main">
+      <DataTable
+        ref="dataTableRef"
+        :columns="columns"
+        :data="data"
+        :total="total"
+        :loading="loading"
+        :initial-slice="meta?.initialSlice"
+        :filter-options-loader="loadFilterOptions"
+        :server-summary="serverSummary"
+        @page-change="handlePageChange"
+        @sort-change="handleSortChange"
+        @filter-change="handleFilterChange"
+      />
+    </main>
+
+    <footer class="viewer-footer">
+      <span>Foggy Data Viewer</span>
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+.data-viewer {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #f5f7fa;
+}
+
+.viewer-header {
+  padding: 16px 24px;
+  background-color: #fff;
+  border-bottom: 1px solid #e4e7ed;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.viewer-title {
+  margin: 0 0 8px 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.viewer-info {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  font-size: 14px;
+  color: #606266;
+}
+
+.info-item strong {
+  color: #303133;
+}
+
+.refresh-btn {
+  margin-left: auto;
+  padding: 6px 16px;
+  background-color: #409eff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.refresh-btn:hover {
+  background-color: #66b1ff;
+}
+
+.refresh-btn:disabled {
+  background-color: #a0cfff;
+  cursor: not-allowed;
+}
+
+.viewer-main {
+  flex: 1;
+  padding: 16px 24px;
+  overflow: hidden;
+}
+
+.viewer-expired,
+.viewer-error {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.expired-content,
+.error-content {
+  text-align: center;
+  padding: 32px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.expired-content h2,
+.error-content h2 {
+  margin: 0 0 12px 0;
+  color: #f56c6c;
+}
+
+.expired-content p,
+.error-content p {
+  margin: 0 0 16px 0;
+  color: #909399;
+}
+
+.error-content button {
+  padding: 8px 24px;
+  background-color: #409eff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.viewer-footer {
+  padding: 8px 24px;
+  text-align: center;
+  font-size: 12px;
+  color: #909399;
+  background-color: #fff;
+  border-top: 1px solid #e4e7ed;
+}
+</style>