foggy-data-viewer 1.0.1-beta.0

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "foggy-data-viewer",
+  "version": "1.0.1-beta.0",
+  "description": "A Vue 3 data table component with advanced features",
+  "author": "Foggy Framework",
+  "license": "Apache-2.0",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./src/index.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist",
+    "build:lib": "vite build --mode lib",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage"
+  },
+  "dependencies": {
+    "axios": "^1.6.0",
+    "element-plus": "^2.13.0",
+    "vue": "^3.4.0",
+    "vxe-table": "^4.6.0",
+    "xe-utils": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vitest/coverage-v8": "^1.0.0",
+    "@vitest/ui": "^1.0.0",
+    "@vue/test-utils": "^2.4.0",
+    "happy-dom": "^12.10.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vitest": "^1.0.0",
+    "vue-tsc": "^1.8.0"
+  }
+}

package/src/App.vue

@@ -0,0 +1,469 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import DataViewer from './components/DataViewer.vue'
+import { createQuery, type CreateQueryRequest } from './api/viewer'
+
+// 从 URL 中获取 queryId
+const queryId = computed(() => {
+  const path = window.location.pathname
+  // 匹配 /data-viewer/view/{queryId} 格式
+  const match = path.match(/\/data-viewer\/view\/([^/]+)/)
+  return match ? match[1] : null
+})
+
+// DSL 输入相关状态
+const dslInput = ref('')
+const isSubmitting = ref(false)
+const errorMessage = ref('')
+
+// 示例 DSL 查询
+const examples = [
+  {
+    name: '销售明细查询',
+    description: '查询2024年12月的销售订单明细',
+    dsl: {
+      model: 'FactSalesQueryModel',
+      title: '销售明细查询',
+      payload: {
+        columns: ['orderId', 'salesDate$caption', 'product$caption', 'customer$caption', 'quantity', 'salesAmount', 'profitAmount'],
+        slice: [
+          { field: 'salesDate$caption', op: '>=', value: '2024-12-01' },
+          { field: 'salesDate$caption', op: '<', value: '2024-12-31' }
+        ],
+        orderBy: [{ field: 'salesDate$caption', order: 'desc' }]
+      }
+    }
+  },
+  {
+    name: '订单查询',
+    description: '查询2024年12月的订单信息',
+    dsl: {
+      model: 'FactOrderQueryModel',
+      title: '订单查询',
+      payload: {
+        columns: ['orderId', 'orderStatus', 'paymentStatus', 'orderTime', 'customer$caption', 'amount', 'payAmount'],
+        slice: [
+          { field: 'orderDate$caption', op: '>=', value: '2024-12-01' },
+          { field: 'orderDate$caption', op: '<', value: '2024-12-31' }
+        ],
+        orderBy: [{ field: 'orderTime', order: 'desc' }]
+      }
+    }
+  },
+  {
+    name: '商品列表',
+    description: '查询所有商品基础信息',
+    dsl: {
+      model: 'DimProductQueryModel',
+      title: '商品列表',
+      payload: {
+        columns: ['productName', 'productId', 'brand', 'categoryName', 'subCategoryName', 'unitPrice', 'unitCost'],
+        slice: [
+          { field: 'status', op: '=', value: '正常' }
+        ],
+        orderBy: [{ field: 'productName', order: 'asc' }]
+      }
+    }
+  },
+  {
+    name: '客户列表',
+    description: '查询VIP会员客户',
+    dsl: {
+      model: 'DimCustomerQueryModel',
+      title: 'VIP客户列表',
+      payload: {
+        columns: ['customerName', 'customerId', 'customerType', 'memberLevel', 'gender', 'province', 'city'],
+        slice: [
+          { field: 'memberLevel', op: '=', value: 'VIP' }
+        ],
+        orderBy: [{ field: 'customerName', order: 'asc' }]
+      }
+    }
+  },
+  {
+    name: '门店业绩',
+    description: '2024年Q4按门店汇总销售业绩',
+    dsl: {
+      model: 'FactSalesQueryModel',
+      title: '门店业绩汇总',
+      payload: {
+        columns: ['store$caption', 'store$storeType', 'store$province', 'store$city', 'quantity', 'salesAmount', 'profitAmount'],
+        slice: [
+          { field: 'salesDate$caption', op: '>=', value: '2024-10-01' },
+          { field: 'salesDate$caption', op: '<', value: '2024-12-31' }
+        ],
+        groupBy: [{ field: 'store$id' }],
+        orderBy: [{ field: 'salesAmount', order: 'desc' }]
+      }
+    }
+  }
+]
+
+// 获取相对日期（用于示例）
+function getDateOffset(days: number): string {
+  const date = new Date()
+  date.setDate(date.getDate() + days)
+  return date.toISOString().split('T')[0]
+}
+
+// 选择示例
+function selectExample(example: typeof examples[0]) {
+  dslInput.value = JSON.stringify(example.dsl, null, 2)
+  errorMessage.value = ''
+}
+
+// 提交查询
+async function submitQuery() {
+  errorMessage.value = ''
+
+  if (!dslInput.value.trim()) {
+    errorMessage.value = '请输入查询 DSL'
+    return
+  }
+
+  let request: CreateQueryRequest
+  try {
+    request = JSON.parse(dslInput.value)
+  } catch (e) {
+    errorMessage.value = 'JSON 格式错误: ' + (e as Error).message
+    return
+  }
+
+  isSubmitting.value = true
+  try {
+    const response = await createQuery(request)
+    if (response.success && response.viewerUrl) {
+      // 跳转到查询页面
+      window.location.href = response.viewerUrl
+    } else {
+      errorMessage.value = response.error || '创建查询失败'
+    }
+  } catch (e) {
+    errorMessage.value = '请求失败: ' + (e as Error).message
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div id="app">
+    <DataViewer v-if="queryId" :query-id="queryId" />
+    <div v-else class="landing-page">
+      <div class="hero">
+        <h1>Foggy Data Viewer</h1>
+        <p class="subtitle">请通过有效的查询链接访问数据浏览器，或者输入 Foggy DSL 查询参数来浏览数据</p>
+      </div>
+
+      <div class="main-content">
+        <div class="examples-section">
+          <h2>示例查询</h2>
+          <p class="section-desc">点击示例将 DSL 填入输入框</p>
+          <div class="examples-grid">
+            <div
+              v-for="example in examples"
+              :key="example.name"
+              class="example-card"
+              @click="selectExample(example)"
+            >
+              <h3>{{ example.name }}</h3>
+              <p>{{ example.description }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="input-section">
+          <h2>DSL 查询输入</h2>
+          <p class="section-desc">输入 JSON 格式的查询参数</p>
+          <textarea
+            v-model="dslInput"
+            class="dsl-textarea"
+            placeholder='{
+  "model": "FactSalesQueryModel",
+  "title": "我的查询",
+  "payload": {
+    "columns": ["orderId", "salesDate", "salesAmount"],
+    "slice": [
+      { "field": "salesDate", "op": ">=", "value": "2024-01-01" }
+    ]
+  }
+}'
+            :disabled="isSubmitting"
+          ></textarea>
+
+          <div v-if="errorMessage" class="error-message">
+            {{ errorMessage }}
+          </div>
+
+          <button
+            class="submit-btn"
+            @click="submitQuery"
+            :disabled="isSubmitting"
+          >
+            {{ isSubmitting ? '提交中...' : '提交查询' }}
+          </button>
+        </div>
+      </div>
+
+      <div class="help-section">
+        <h3>DSL 参数说明</h3>
+        <table class="help-table">
+          <thead>
+            <tr>
+              <th>参数</th>
+              <th>类型</th>
+              <th>必填</th>
+              <th>说明</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>model</code></td>
+              <td>string</td>
+              <td>是</td>
+              <td>查询模型名称，如 FactSalesQueryModel</td>
+            </tr>
+            <tr>
+              <td><code>payload</code></td>
+              <td>object</td>
+              <td>是</td>
+              <td>查询参数对象（与 dataset.query_model 格式一致）</td>
+            </tr>
+            <tr>
+              <td><code>payload.columns</code></td>
+              <td>string[]</td>
+              <td>是</td>
+              <td>要查询的列名列表</td>
+            </tr>
+            <tr>
+              <td><code>payload.slice</code></td>
+              <td>object[]</td>
+              <td>是</td>
+              <td>过滤条件，每项包含 field、op、value</td>
+            </tr>
+            <tr>
+              <td><code>payload.groupBy</code></td>
+              <td>object[]</td>
+              <td>否</td>
+              <td>分组字段，用于聚合查询</td>
+            </tr>
+            <tr>
+              <td><code>payload.orderBy</code></td>
+              <td>object[]</td>
+              <td>否</td>
+              <td>排序字段，包含 field 和 order</td>
+            </tr>
+            <tr>
+              <td><code>title</code></td>
+              <td>string</td>
+              <td>否</td>
+              <td>查询标题</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #app {
+  width: 100%;
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.landing-page {
+  min-height: 100%;
+  padding: 40px 20px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+.hero {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.hero h1 {
+  font-size: 2.5rem;
+  color: #303133;
+  margin-bottom: 12px;
+}
+
+.subtitle {
+  font-size: 1.1rem;
+  color: #606266;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.main-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+  max-width: 1200px;
+  margin: 0 auto 40px;
+}
+
+@media (max-width: 900px) {
+  .main-content {
+    grid-template-columns: 1fr;
+  }
+}
+
+.examples-section,
+.input-section {
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.examples-section h2,
+.input-section h2 {
+  font-size: 1.3rem;
+  color: #303133;
+  margin-bottom: 8px;
+}
+
+.section-desc {
+  font-size: 0.9rem;
+  color: #909399;
+  margin-bottom: 16px;
+}
+
+.examples-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.example-card {
+  padding: 16px;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.example-card:hover {
+  border-color: #409eff;
+  background: #f0f7ff;
+  transform: translateY(-2px);
+}
+
+.example-card h3 {
+  font-size: 1rem;
+  color: #303133;
+  margin-bottom: 4px;
+}
+
+.example-card p {
+  font-size: 0.85rem;
+  color: #909399;
+}
+
+.dsl-textarea {
+  width: 100%;
+  height: 300px;
+  padding: 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 8px;
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  resize: vertical;
+  transition: border-color 0.2s;
+}
+
+.dsl-textarea:focus {
+  outline: none;
+  border-color: #409eff;
+}
+
+.dsl-textarea:disabled {
+  background: #f5f7fa;
+}
+
+.error-message {
+  margin-top: 12px;
+  padding: 10px 12px;
+  background: #fef0f0;
+  border: 1px solid #fde2e2;
+  border-radius: 6px;
+  color: #f56c6c;
+  font-size: 0.9rem;
+}
+
+.submit-btn {
+  margin-top: 16px;
+  width: 100%;
+  padding: 12px 24px;
+  background: #409eff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.submit-btn:hover:not(:disabled) {
+  background: #337ecc;
+}
+
+.submit-btn:disabled {
+  background: #a0cfff;
+  cursor: not-allowed;
+}
+
+.help-section {
+  max-width: 1200px;
+  margin: 0 auto;
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.help-section h3 {
+  font-size: 1.1rem;
+  color: #303133;
+  margin-bottom: 16px;
+}
+
+.help-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.help-table th,
+.help-table td {
+  padding: 10px 12px;
+  text-align: left;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.help-table th {
+  background: #f5f7fa;
+  font-weight: 600;
+  color: #606266;
+}
+
+.help-table td {
+  color: #606266;
+}
+
+.help-table code {
+  background: #f5f7fa;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'Consolas', 'Monaco', monospace;
+  color: #409eff;
+}
+</style>

package/src/api/viewer.ts

@@ -0,0 +1,163 @@
+import axios from 'axios'
+import type { QueryMetaResponse, ViewerQueryRequest, ViewerDataResponse, FilterOptionsResponse, ColumnSchema } from '@/types'
+
+const apiClient = axios.create({
+  baseURL: '/data-viewer/api',
+  timeout: 30000,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+/**
+ * 查询 payload（与 dataset.query_model 格式一致）
+ */
+export interface QueryPayload {
+  columns: string[]
+  slice: Array<{ field: string; op: string; value?: unknown }>
+  groupBy?: Array<{ field: string; agg?: string }>
+  orderBy?: Array<{ field: string; order: 'asc' | 'desc' }>
+  calculatedFields?: Array<{ name: string; expression: string; agg?: string }>
+}
+
+/**
+ * 创建查询请求类型
+ */
+export interface CreateQueryRequest {
+  model: string
+  payload: QueryPayload
+  title?: string
+}
+
+/**
+ * 创建查询响应类型
+ */
+export interface CreateQueryResponse {
+  success: boolean
+  queryId: string | null
+  viewerUrl: string | null
+  error: string | null
+}
+
+/**
+ * 创建查询（从 DSL 输入）
+ */
+export async function createQuery(request: CreateQueryRequest): Promise<CreateQueryResponse> {
+  const response = await apiClient.post<any>('/query/create', request)
+
+  // Handle RX response format: { code: 200, msg: "", data: {} }
+  if (!response.data || response.data.code !== 200) {
+    // Return the error response if available in data
+    if (response.data?.data) {
+      return response.data.data
+    }
+    throw new Error(response.data?.msg || '创建查询失败')
+  }
+
+  return response.data.data
+}
+
+/**
+ * 获取查询元数据
+ */
+export async function fetchQueryMeta(queryId: string): Promise<QueryMetaResponse> {
+  const response = await apiClient.get<any>(`/query/${queryId}/meta`)
+
+  // Handle RX response format: { code: 200, msg: "", data: {} }
+  if (!response.data || response.data.code !== 200) {
+    throw new Error(response.data?.msg || '获取查询元数据失败')
+  }
+
+  return response.data.data
+}
+
+/**
+ * 查询数据
+ */
+export async function fetchQueryData(
+  queryId: string,
+  request: ViewerQueryRequest
+): Promise<ViewerDataResponse> {
+  const response = await apiClient.post<any>(`/query/${queryId}/data`, request)
+
+  // Handle RX response format: { code: 200, msg: "", data: {} }
+  if (!response.data || response.data.code !== 200) {
+    // If it's an expired query (status 410), return the expired response
+    if (response.data?.data?.expired) {
+      return response.data.data
+    }
+    throw new Error(response.data?.msg || '查询数据失败')
+  }
+
+  return response.data.data
+}
+
+/**
+ * 获取过滤选项（维度成员或字典项）
+ */
+export async function fetchFilterOptions(
+  queryId: string,
+  columnName: string
+): Promise<FilterOptionsResponse> {
+  const response = await apiClient.get<FilterOptionsResponse>(
+    `/query/${queryId}/filter-options/${encodeURIComponent(columnName)}`
+  )
+  return response.data
+}
+
+/**
+ * 获取 QM Schema（查询模型的字段元数据）
+ */
+export async function fetchQmSchema(qmModel: string): Promise<ColumnSchema[]> {
+  const response = await apiClient.get<any>(`/schema/${encodeURIComponent(qmModel)}`)
+
+  // Handle RX response format: { code: 200, msg: "", data: {} }
+  if (!response.data || response.data.code !== 200) {
+    throw new Error(response.data?.msg || '获取 QM Schema 失败')
+  }
+
+  const data = response.data.data
+
+  // 解析 SemanticMetadataResponse V3 格式
+  // 返回格式：{ "version": "v3", "fields": { "fieldName": { "name": "显示名", "type": "TEXT", ... } }, "models": {...} }
+  if (!data || !data.fields) {
+    return []
+  }
+
+  // 遍历 fields 对象，转换为 ColumnSchema 数组
+  const columns: ColumnSchema[] = []
+  for (const [fieldName, fieldInfo] of Object.entries(data.fields)) {
+    const field = fieldInfo as any
+
+    // 直接使用后端返回的字段（不再解析 meta）
+    columns.push({
+      name: fieldName,
+      title: field.name || fieldName,
+      type: field.type || 'TEXT',
+      filterable: field.filterable !== false,
+      aggregatable: field.aggregatable || false,
+      measure: field.measure || false,
+      filterType: field.filterType,
+      dictId: field.dictId,
+      format: field.format
+    })
+  }
+
+  return columns
+}
+
+/**
+ * 错误处理
+ */
+apiClient.interceptors.response.use(
+  response => response,
+  error => {
+    if (error.response?.status === 410) {
+      return Promise.reject(new Error('查询链接已过期，请重新获取'))
+    }
+    if (error.response?.status === 404) {
+      return Promise.reject(new Error('查询不存在'))
+    }
+    return Promise.reject(error)
+  }
+)