foggy-data-viewer 1.0.1-beta.0

package/src/components/filters/DateRangeFilter.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import type { SliceRequestDef } from '@/types'
+
+interface Props {
+  field: string
+  modelValue?: SliceRequestDef[] | null
+  format?: string
+  showTime?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  format: 'YYYY-MM-DD',
+  showTime: false
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: SliceRequestDef[] | null): void
+}>()
+
+// 日期范围值 [开始, 结束]
+const dateRange = ref<[Date, Date] | null>(null)
+
+// 是否显示时间选择
+const isDatetime = computed(() => props.showTime || props.format?.includes('HH'))
+
+// 日期格式
+const dateFormat = computed(() => {
+  if (isDatetime.value) {
+    return 'YYYY-MM-DD HH:mm'
+  }
+  return 'YYYY-MM-DD'
+})
+
+// 从 modelValue 初始化
+watch(() => props.modelValue, (slices) => {
+  if (!slices || slices.length === 0) {
+    dateRange.value = null
+    return
+  }
+
+  // 从 slice 中解析日期范围
+  // 支持 [) 操作符或两个 >= <= 条件
+  const rangeSlice = slices.find(s => s.op === '[)' || s.op === '[]')
+  if (rangeSlice && Array.isArray(rangeSlice.value)) {
+    const [start, end] = rangeSlice.value as [string, string]
+    dateRange.value = [
+      new Date(start.replace(' ', 'T')),
+      new Date(end.replace(' ', 'T'))
+    ]
+  } else {
+    // 尝试从 >= 和 <= 条件解析
+    const gteSlice = slices.find(s => s.op === '>=')
+    const lteSlice = slices.find(s => s.op === '<=' || s.op === '<')
+    if (gteSlice || lteSlice) {
+      const start = gteSlice ? new Date(String(gteSlice.value).replace(' ', 'T')) : null
+      const end = lteSlice ? new Date(String(lteSlice.value).replace(' ', 'T')) : null
+      if (start && end) {
+        dateRange.value = [start, end]
+      } else if (start) {
+        dateRange.value = [start, start]
+      } else if (end) {
+        dateRange.value = [end, end]
+      }
+    } else {
+      dateRange.value = null
+    }
+  }
+}, { immediate: true })
+
+function formatDate(date: Date): string {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+
+  if (isDatetime.value) {
+    const hours = String(date.getHours()).padStart(2, '0')
+    const minutes = String(date.getMinutes()).padStart(2, '0')
+    const seconds = String(date.getSeconds()).padStart(2, '0')
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+  }
+
+  return `${year}-${month}-${day}`
+}
+
+function handleChange(val: [Date, Date] | null) {
+  if (!val || val.length !== 2) {
+    emit('update:modelValue', null)
+    return
+  }
+
+  const [start, end] = val
+  const startVal = formatDate(start)
+  // 对于日期，结束日期使用 < 下一天来实现左闭右开
+  let endVal: string
+  if (isDatetime.value) {
+    endVal = formatDate(end)
+  } else {
+    // 日期范围：结束日期+1天，使用 [) 左闭右开
+    const nextDay = new Date(end)
+    nextDay.setDate(nextDay.getDate() + 1)
+    endVal = formatDate(nextDay)
+  }
+
+  // 生成 DSL slice: { field, op: "[)", value: [start, end] }
+  emit('update:modelValue', [{
+    field: props.field,
+    op: '[)',
+    value: [startVal, endVal]
+  }])
+}
+</script>
+
+<template>
+  <div class="filter-date-range">
+    <el-date-picker
+      v-model="dateRange"
+      :type="isDatetime ? 'datetimerange' : 'daterange'"
+      :format="dateFormat"
+      range-separator="~"
+      start-placeholder="开始"
+      end-placeholder="结束"
+      size="small"
+      :clearable="true"
+      :editable="false"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<style scoped>
+.filter-date-range {
+  width: 100%;
+}
+
+.filter-date-range :deep(.el-date-editor) {
+  width: 100% !important;
+  max-width: 100%;
+  height: 26px;
+}
+
+.filter-date-range :deep(.el-range-input) {
+  font-size: 11px;
+  flex: 1;
+  min-width: 0;
+}
+
+.filter-date-range :deep(.el-range-separator) {
+  font-size: 11px;
+  padding: 0 2px;
+  line-height: 24px;
+  flex-shrink: 0;
+}
+
+.filter-date-range :deep(.el-input__wrapper) {
+  padding: 0 4px;
+  height: 26px;
+  box-sizing: border-box;
+}
+
+/* 控制图标大小 */
+.filter-date-range :deep(.el-input__prefix),
+.filter-date-range :deep(.el-input__suffix) {
+  display: flex;
+  align-items: center;
+  height: 26px;
+}
+
+.filter-date-range :deep(.el-input__prefix-inner),
+.filter-date-range :deep(.el-input__suffix-inner) {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.filter-date-range :deep(.el-input__prefix .el-icon),
+.filter-date-range :deep(.el-input__suffix .el-icon) {
+  font-size: 12px !important;
+  width: 12px;
+  height: 12px;
+  line-height: 12px;
+}
+
+.filter-date-range :deep(.el-icon svg) {
+  width: 12px;
+  height: 12px;
+}
+
+/* 确保不会换行 */
+.filter-date-range :deep(.el-range-editor--small .el-range__close-icon) {
+  font-size: 12px;
+  line-height: 24px;
+}
+</style>

package/src/components/filters/NumberRangeFilter.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { SliceRequestDef } from '@/types'
+
+interface Props {
+  field: string
+  modelValue?: SliceRequestDef[] | null
+  placeholderMin?: string
+  placeholderMax?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholderMin: '最小',
+  placeholderMax: '最大'
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: SliceRequestDef[] | null): void
+}>()
+
+const minValue = ref<string>('')
+const maxValue = ref<string>('')
+
+// 从 modelValue 初始化
+watch(() => props.modelValue, (slices) => {
+  if (!slices || slices.length === 0) {
+    minValue.value = ''
+    maxValue.value = ''
+    return
+  }
+
+  // 解析 [] 范围操作符
+  const rangeSlice = slices.find(s => s.op === '[]' || s.op === '[)')
+  if (rangeSlice && Array.isArray(rangeSlice.value)) {
+    const [min, max] = rangeSlice.value as [number, number]
+    minValue.value = min != null ? String(min) : ''
+    maxValue.value = max != null ? String(max) : ''
+  } else {
+    // 解析 >= 和 <= 条件
+    const gteSlice = slices.find(s => s.op === '>=')
+    const lteSlice = slices.find(s => s.op === '<=')
+    minValue.value = gteSlice?.value != null ? String(gteSlice.value) : ''
+    maxValue.value = lteSlice?.value != null ? String(lteSlice.value) : ''
+  }
+}, { immediate: true })
+
+function emitChange() {
+  const min = minValue.value.trim()
+  const max = maxValue.value.trim()
+
+  if (!min && !max) {
+    emit('update:modelValue', null)
+    return
+  }
+
+  const minNum = min ? parseFloat(min) : null
+  const maxNum = max ? parseFloat(max) : null
+
+  // 验证数字
+  if (min && isNaN(minNum!)) return
+  if (max && isNaN(maxNum!)) return
+
+  // 生成 DSL slice
+  if (minNum !== null && maxNum !== null) {
+    // 两个都有值：使用 [] 闭区间
+    emit('update:modelValue', [{
+      field: props.field,
+      op: '[]',
+      value: [minNum, maxNum]
+    }])
+  } else if (minNum !== null) {
+    // 只有最小值：>=
+    emit('update:modelValue', [{
+      field: props.field,
+      op: '>=',
+      value: minNum
+    }])
+  } else if (maxNum !== null) {
+    // 只有最大值：<=
+    emit('update:modelValue', [{
+      field: props.field,
+      op: '<=',
+      value: maxNum
+    }])
+  }
+}
+
+function clear() {
+  minValue.value = ''
+  maxValue.value = ''
+  emit('update:modelValue', null)
+}
+</script>
+
+<template>
+  <div class="filter-number-range">
+    <input
+      v-model="minValue"
+      type="text"
+      :placeholder="placeholderMin"
+      @change="emitChange"
+      @keyup.enter="emitChange"
+    />
+    <span class="separator">-</span>
+    <input
+      v-model="maxValue"
+      type="text"
+      :placeholder="placeholderMax"
+      @change="emitChange"
+      @keyup.enter="emitChange"
+    />
+    <span v-if="minValue || maxValue" class="clear-btn" @click="clear">×</span>
+  </div>
+</template>
+
+<style scoped>
+.filter-number-range {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: relative;
+}
+
+.filter-number-range input {
+  flex: 1;
+  min-width: 0;
+  width: 50px;
+  height: 26px;
+  padding: 0 6px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 26px;
+  outline: none;
+  text-align: right;
+  transition: border-color 0.2s;
+}
+
+.filter-number-range input:focus {
+  border-color: #409eff;
+}
+
+.separator {
+  color: #909399;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.clear-btn {
+  position: absolute;
+  right: -16px;
+  color: #c0c4cc;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.clear-btn:hover {
+  color: #909399;
+}
+</style>