cd-vue-filter 2.2.5 → 2.2.7

package/src/components/cd-filter.vue

@@ -1,1002 +0,0 @@
-<template>
-  <t-dialog header="方案设置" placement="center" :visible="visible" @update:visible="$emit('update:visible', $event)"
-    :width="width" :z-index="999" :footer="true" @close="closeDialog" id="leader-line-clip-container">
-    <template #body>
-      <div class="filter-dialog-content">
-        <div class="leader-line-container">
-          <div class="filter-scroll-wrapper" id="filter-scroll-wrapper">
-            <!-- 中间筛选内容 -->
-            <div class="filter-dialog-middle" id="filter-dialog-middle">
-              <!-- Tabs 切换 -->
-              <t-tabs v-model="activeTab" size="medium">
-                <t-tab-panel value="filter" label="筛选">
-                  <div class="filter-tab-content">
-                    <!-- 左侧顶层连接器 -->
-                    <div class="filter-dialog-left" v-if="innerFilterCards.length > 1">
-                      <div class="connectors-container">
-                        <t-radio-group :size="size" class="connector-selector" v-model="innerTopOp">
-                          <t-radio-button value="and">且</t-radio-button>
-                          <t-radio-button value="or">或</t-radio-button>
-                        </t-radio-group>
-                      </div>
-                    </div>
-                    <div class="filter-cards">
-                      <!-- 筛选卡片 -->
-                      <div v-for="(card, cardIndex) in innerFilterCards" :key="card.id" class="filter-card-item">
-                        <div class="filter-card-header">
-                          <div class="filter-card-header-left">
-                            <span class="filter-card-title">筛选卡片 {{ cardIndex + 1 }}</span>
-                            <t-radio-group :size="size" v-model="card.connector" class="connector-selector">
-                              <t-radio-button value="and">且</t-radio-button>
-                              <t-radio-button value="or">或</t-radio-button>
-                            </t-radio-group>
-                          </div>
-                          <t-button theme="default" variant="text" :size="size" @click="removeFilterCard(cardIndex)"
-                            :disabled="innerFilterCards.length === 1">
-                            <template #icon>
-                              <t-icon name="close" />
-                            </template>
-                          </t-button>
-                        </div>
-                        <div class="filter-card-content">
-                          <div v-for="(condition, condIndex) in card.conditions" :key="condIndex"
-                            class="filter-combination">
-                            <FilterComponent :field-options="fieldOptions"
-                              :filter-condition="card.conditions[condIndex]" :select-options="selectOptions"
-                              :size="size" />
-                            <t-button theme="default" variant="text" :size="size"
-                              @click="removeConditionFromCard(cardIndex, condIndex)"
-                              :disabled="card.conditions.length === 1">
-                              <template #icon>
-                                <t-icon name="minus" />
-                              </template>
-                            </t-button>
-                          </div>
-                          <div class="filter-card-actions">
-                            <t-button theme="default" :size="size" @click="addConditionToCard(cardIndex)">
-                              <template #icon>
-                                <t-icon name="add" />
-                              </template>
-                              添加条件
-                            </t-button>
-                          </div>
-                        </div>
-                      </div>
-                      <!-- 增加筛选卡片按钮 -->
-                      <div class="add-filter-card" @click="addFilterCard">
-                        <div class="add-card-content">
-                          <t-icon name="add" />
-                          <span>增加筛选卡片</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </t-tab-panel>
-                <t-tab-panel value="column" label="列配置">
-                  <div class="column-settings-panel">
-                    <div class="column-settings-header">
-                      <t-checkbox v-model="selectAllColumns" @change="handleSelectAllChange">全选</t-checkbox>
-                    </div>
-                    <!-- 标题行 -->
-                    <div class="column-title-row">
-                      <div class="column-title-name">名称</div>
-                      <div class="column-title-show">显示</div>
-                      <div class="column-title-width">宽度</div>
-                      <div class="column-title-sort">排序</div>
-                    </div>
-                    <div class="column-list">
-                      <div v-for="(field, index) in sortedFieldOptions" :key="field.value" class="column-item-row"
-                        draggable="true" @dragstart="handleDragStart(index, $event)"
-                        @dragover="handleDragOver(index, $event)" @dragend="handleDragEnd"
-                        @drop="handleDrop(index, $event)" :class="{ 'dragging': draggedIndex === index }">
-                        <div class="column-name">
-                          <t-icon name="move" style="cursor: move; color: #999; margin-right: 8px;" />
-                          {{ field.label }}
-                        </div>
-                        <div class="column-show">
-                          <t-checkbox :checked="selectedColumns.includes(field.value)"
-                            @change="(checked) => handleSingleColumnChange(field.value, checked)" />
-                        </div>
-                        <div class="column-width">
-                          <t-input-number v-model="columnWidths[field.value]" :min="50" :max="500" :step="10"
-                            size="small" placeholder="" style="width: 130px;" suffix="px" />
-                        </div>
-                        <div class="column-sort-buttons">
-                          <t-button theme="default" variant="text" size="small" @click="moveColumnUp(index)"
-                            :disabled="index === 0">
-                            <template #icon>
-                              <t-icon name="chevron-up" />
-                            </template>
-                          </t-button>
-                          <t-button theme="default" variant="text" size="small" @click="moveColumnDown(index)"
-                            :disabled="index === sortedFieldOptions.length - 1">
-                            <template #icon>
-                              <t-icon name="chevron-down" />
-                            </template>
-                          </t-button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </t-tab-panel>
-              </t-tabs>
-            </div>
-            <!-- 右侧方案列表 -->
-            <div class="filter-dialog-right">
-              <div class="filter-plan-title">我的方案</div>
-              <div class="filter-plan-list">
-                <div v-for="plan in planFilterOptions" :key="plan.value"
-                  :class="['filter-plan-item', { active: selectedPlanFilter?.value === plan.value }]"
-                  @click="handlePlanClick(plan)">
-                  <t-icon name="file-text" class="plan-icon" />
-                  <span class="plan-name">{{ plan.content }}</span>
-                  <div class="plan-actions" @click.stop>
-                     <t-tooltip content="编辑" placement="top">
-                      <t-button theme="default" variant="text" size="small" @click.stop="handleEditPlan(plan)"
-                        :disabled="!plan.value || plan.value === 'empty'">
-                        <template #icon>
-                          <t-icon name="edit" 
-                            :style="{ color: '#0052d9' }" />
-                        </template>
-                      </t-button>
-                    </t-tooltip>
-                    <t-tooltip content="设置为默认方案" placement="top">
-                      <t-button theme="default" variant="text" size="small" @click="handleSetDefaultPlan(plan)"
-                        :disabled="!plan.value || plan.value === 'empty'">
-                        <template #icon>
-                          <t-icon :name="plan.isDefault ? 'check-circle-filled' : 'check-circle'" 
-                            :style="{ color: plan.isDefault ? '#0052d9' : '#bbb' }" />
-                        </template>
-                      </t-button>
-                    </t-tooltip>
-                    <t-tooltip content="复制方案" placement="top">
-                      <t-button theme="default" variant="text" size="small" @click="handleCopyPlan(plan)"
-                        :disabled="!plan.value || plan.value === 'empty'">
-                        <template #icon>
-                          <t-icon name="file-copy" />
-                        </template>
-                      </t-button>
-                    </t-tooltip>
-                    <t-tooltip content="删除方案" placement="top">
-                      <t-button theme="default" variant="text" size="small" @click="handleDeletePlan(plan)"
-                        :disabled="!plan.value || plan.value === 'empty'">
-                        <template #icon>
-                          <t-icon name="delete" />
-                        </template>
-                      </t-button>
-                    </t-tooltip>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <div class="filter-dialog-footer-container">
-        <div class="filter-dialog-footer-left">
-          <t-button theme="default" :size="size" @click="handleSavePlan">
-            <template #icon>
-              <t-icon name="save" />
-            </template>
-            保存方案
-          </t-button>
-        </div>
-        <div class="filter-dialog-footer-right">
-          <t-button theme="default" @click="handleReset">重置</t-button>
-          <t-button theme="primary" @click="handleConfirm">确定</t-button>
-        </div>
-      </div>
-    </template>
-  </t-dialog>
-  <!-- 保存方案对话框 -->
-  <SavePlanDialog 
-    v-model:visible="savePlanDialogVisible" 
-    :is-editing="isEditingPlan"
-    :plan-name="editingPlanName"
-    :original-share-mode="editingPlanShareMode"
-    :original-share-type="editingPlanShareType"
-    :original-selected-users="editingPlanSelectedUsers"
-    :tabs="personTabs" 
-    :organizations="personOrganizations"
-    :dept-members-data-prop="deptMembersData" 
-    @confirm="handleSavePlanConfirm" 
-    @load-users="handleLoadUsers"
-    @search="handleSearch" 
-    @dept-click="handleDeptClick" 
-  />
-</template>
-<script setup>
-import { ref, watch } from 'vue'
-import { MessagePlugin } from 'tdesign-vue-next'
-import FilterComponent from './FilterComponent.vue'
-import SavePlanDialog from './SavePlanDialog.vue'
-// Props
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false
-  },
-  fieldOptions: {
-    type: Array,
-    required: true
-  },
-  selectOptions: {
-    type: Array,
-    default: () => []
-  },
-  planFilterOptions: {
-    type: Array,
-    default: () => []
-  },
-  filterCards: {
-    type: Array,
-    default: () => [
-      {
-        id: 1,
-        connector: 'and',
-        conditions: [
-          { field: '', operator: 'eq', value: '' },
-          { field: '', operator: 'eq', value: '' }
-        ]
-      }
-    ]
-  },
-  topOp: {
-    type: String,
-    default: 'and'
-  },
-  size: {
-    type: String,
-    default: 'small'
-  },
-  width: {
-    type: String,
-    default: '1000px'
-  },
-  personTabs: {
-    type: Array,
-    default: () => []
-  },
-  personOrganizations: {
-    type: Array,
-    default: () => []
-  },
-  visibleColumns: {
-    type: Array,
-    default: () => []
-  }
-})
-// Emits
-const emit = defineEmits([
-  'update:visible',
-  'confirm',
-  'reset',
-  'plan-click',
-  'save-plan',
-  'delete-plan',
-  'copy-plan',
-  'set-default-plan',
-  'update-plan',
-  'load-users',
-  'search',
-  'dept-click',
-  'column-change'
-])
-// 内部状态
-const innerFilterCards = ref(JSON.parse(JSON.stringify(props.filterCards)))
-const innerTopOp = ref(props.topOp)
-const selectedPlanFilter = ref(null)
-const savePlanDialogVisible = ref(false)
-const deptMembersData = ref([])
-const activeTab = ref('filter') // 默认显示筛选tab
-const isEditingPlan = ref(false) // 是否正在编辑方案
-const editingPlanName = ref('') // 正在编辑的方案名称
-const editingPlanShareMode = ref('none') // 正在编辑的方案共享模式
-const editingPlanShareType = ref('specific') // 正在编辑的方案共享范围
-const editingPlanSelectedUsers = ref([]) // 正在编辑的方案共享用户
-const editingPlan = ref(null) // 正在编辑的方案对象
-let nextCardId = 100
-// 监听 props 变化
-watch(() => props.filterCards, (newVal) => {
-  innerFilterCards.value = JSON.parse(JSON.stringify(newVal))
-}, { deep: true })
-watch(() => props.topOp, (newVal) => {
-  innerTopOp.value = newVal
-})
-// 添加筛选卡片
-const addFilterCard = () => {
-  innerFilterCards.value.push({
-    id: nextCardId++,
-    connector: 'and',
-    conditions: [{ field: '', operator: 'eq', value: '' }]
-  })
-}
-// 删除筛选卡片
-const removeFilterCard = (cardIndex) => {
-  if (innerFilterCards.value.length > 1) {
-    innerFilterCards.value.splice(cardIndex, 1)
-  } else {
-    MessagePlugin.warning('至少需要保留一个筛选卡片')
-  }
-}
-// 向指定卡片添加筛选条件
-const addConditionToCard = (cardIndex) => {
-  if (cardIndex >= 0 && cardIndex < innerFilterCards.value.length) {
-    innerFilterCards.value[cardIndex].conditions.push({
-      field: '',
-      operator: 'eq',
-      value: ''
-    })
-  }
-}
-// 从指定卡片中删除筛选条件
-const removeConditionFromCard = (cardIndex, condIndex) => {
-  if (cardIndex >= 0 && cardIndex < innerFilterCards.value.length) {
-    const card = innerFilterCards.value[cardIndex]
-    if (card.conditions.length > 1 && condIndex >= 0 && condIndex < card.conditions.length) {
-      card.conditions.splice(condIndex, 1)
-    } else if (card.conditions.length <= 1) {
-      MessagePlugin.warning('每个卡片至少需要一个筛选条件')
-    }
-  }
-}
-// 清理筛选卡片，保证字段有效
-const cleanFilterCards = (cards) => {
-  return cards
-    .map((card) => {
-      const validConditions = card.conditions
-        .filter((condition) => condition.field && condition.field.trim() !== '')
-        .map((condition) => {
-          let cleanValue = ''
-          if (condition.value !== null && condition.value !== undefined) {
-            if (Array.isArray(condition.value)) {
-              cleanValue = condition.value.join('/')
-            } else {
-              cleanValue = String(condition.value)
-            }
-          }
-          return {
-            field: condition.field.trim(),
-            operator: condition.operator || 'eq',
-            value: cleanValue
-          }
-        })
-      return {
-        ...card,
-        connector: card.connector || 'and',
-        conditions: validConditions.length > 0 ? validConditions : [{ field: '', operator: 'eq', value: '' }]
-      }
-    })
-    .filter((card) => card.conditions.length > 0 && card.conditions[0].field !== '')
-}
-// 方案点击
-const handlePlanClick = (plan) => {
-  if (plan.value === 'empty') return
-  selectedPlanFilter.value = plan
-  emit('plan-click', plan)
-  // 根据方案更新本地卡片与顶层关联
-  if (plan.precepts) {
-    innerFilterCards.value = JSON.parse(JSON.stringify(plan.precepts))
-  }
-  if (plan.sqlConnectType) {
-    innerTopOp.value = plan.sqlConnectType
-  }
-  // 恢复列配置
-  if (plan.columns && plan.columns.length > 0) {
-    // 清空之前的宽度设置
-    columnWidths.value = {}
-    // 恢复显示状态和宽度
-    selectedColumns.value = plan.columns.filter(col => col.show !== false).map(col => col.value)
-    plan.columns.forEach(col => {
-      if (col.width) {
-        columnWidths.value[col.value] = parseInt(col.width)
-      }
-    })
-    // 根据方案的列顺序排序
-    const columnOrder = plan.columns.map(col => col.value)
-    const visibleFields = columnOrder.map(value =>
-      props.fieldOptions.find(f => f.value === value)
-    ).filter(Boolean)
-    const remainingFields = props.fieldOptions.filter(f =>
-      !columnOrder.includes(f.value)
-    )
-    sortedFieldOptions.value = [...visibleFields, ...remainingFields]
-    selectAllColumns.value = selectedColumns.value.length === props.fieldOptions.length
-    // 通知父组件列配置变化（只传递显示的列）
-    const visibleColumns = plan.columns.filter(col => col.show !== false)
-    emit('column-change', visibleColumns)
-  }
-}
-// 保存方案
-const handleSavePlan = () => {
-  isEditingPlan.value = false
-  editingPlan.value = null
-  editingPlanName.value = ''
-  editingPlanShareMode.value = 'none'
-  editingPlanShareType.value = 'specific'
-  editingPlanSelectedUsers.value = []
-  savePlanDialogVisible.value = true
-}
-// 保存方案确认
-const handleSavePlanConfirm = (planData) => {
-  // 构建列配置信息（包含所有列，保存显示状态和宽度）
-  const columnsConfig = sortedFieldOptions.value.map(field => {
-    const width = columnWidths.value[field.value]
-    return {
-      value: field.value,
-      show: selectedColumns.value.includes(field.value), // 是否显示
-      width: width ? `${width}px` : '120px'
-    }
-  })
-  
-  if (isEditingPlan.value && editingPlan.value) {
-    // 编辑模式：触发更新事件
-    emit('update-plan', {
-      ...planData,
-      plan: editingPlan.value,
-      filterCards: innerFilterCards.value,
-      topOp: innerTopOp.value,
-      columns: columnsConfig
-    })
-  } else {
-    // 新建模式：触发保存事件
-    emit('save-plan', {
-      ...planData,
-      filterCards: innerFilterCards.value,
-      topOp: innerTopOp.value,
-      columns: columnsConfig
-    })
-  }
-  
-  // 重置编辑状态
-  isEditingPlan.value = false
-  editingPlan.value = null
-}
-// 编辑方案
-const handleEditPlan = (plan) => {
-  isEditingPlan.value = true
-  editingPlan.value = plan
-  editingPlanName.value = plan.content || ''
-  editingPlanShareMode.value = plan.shareMode || 'none'
-  editingPlanShareType.value = plan.shareType || 'specific'
-  editingPlanSelectedUsers.value = plan.selectedUsers || []
-  savePlanDialogVisible.value = true
-}
-// 复制方案
-const handleCopyPlan = (plan) => {
-  emit('copy-plan', plan)
-}
-// 删除方案
-const handleDeletePlan = (plan) => {
-  emit('delete-plan', plan)
-}
-// 设置默认方案
-const handleSetDefaultPlan = (plan) => {
-  emit('set-default-plan', plan)
-}
-// 重置
-const handleReset = () => {
-  selectedPlanFilter.value = null
-  innerFilterCards.value = [
-    {
-      id: 1,
-      connector: 'and',
-      conditions: [
-        { field: '', operator: 'eq', value: '' },
-        { field: '', operator: 'eq', value: '' }
-      ]
-    }
-  ]
-  innerTopOp.value = 'and'
-  emit('reset')
-}
-// 确定
-const handleConfirm = () => {
-  if (activeTab.value === 'filter') {
-    // 筛选tab：保存筛选条件
-    const cleaned = cleanFilterCards(innerFilterCards.value)
-    emit('confirm', {
-      filterCards: cleaned,
-      type1: innerTopOp.value
-    })
-  } else if (activeTab.value === 'column') {
-    // 列配置tab：保存列设置
-    confirmColumnSettings()
-  }
-}
-// 关闭对话框
-const closeDialog = () => {
-  emit('update:visible', false)
-}
-// 加载用户
-const handleLoadUsers = (payload) => {
-  emit('load-users', payload)
-}
-// 搜索
-const handleSearch = (payload) => {
-  emit('search', payload)
-}
-// 部门点击
-const handleDeptClick = (dept) => {
-  // 创建一个回调函数来接收部门成员数据
-  const callback = (members) => {
-    deptMembersData.value = members
-  }
-  emit('dept-click', { dept, callback })
-}
-// ========== 列设置相关 ==========
-const selectedColumns = ref([])
-const selectAllColumns = ref(false)
-const columnWidths = ref({})
-const sortedFieldOptions = ref([])
-const draggedIndex = ref(null)
-const dragOverIndex = ref(null)
-// 初始化选中的列和宽度
-watch(() => props.visibleColumns, (newVal) => {
-  // 清空之前的宽度设置
-  columnWidths.value = {}
-  if (newVal && newVal.length > 0) {
-    // 如果visibleColumns包含对象（带宽度信息）
-    if (typeof newVal[0] === 'object') {
-      // 恢复显示状态和宽度
-      selectedColumns.value = newVal.filter(col => col.show !== false).map(col => col.value)
-      newVal.forEach(col => {
-        if (col.width) {
-          columnWidths.value[col.value] = parseInt(col.width)
-        }
-      })
-      // 根据visibleColumns的顺序排序fieldOptions
-      const visibleOrder = newVal.map(col => col.value)
-      const visibleFields = visibleOrder.map(value =>
-        props.fieldOptions.find(f => f.value === value)
-      ).filter(Boolean)
-      const remainingFields = props.fieldOptions.filter(f =>
-        !visibleOrder.includes(f.value)
-      )
-      sortedFieldOptions.value = [...visibleFields, ...remainingFields]
-    } else {
-      // 如果只是简单的值数组
-      selectedColumns.value = [...newVal]
-      const visibleFields = newVal.map(value =>
-        props.fieldOptions.find(f => f.value === value)
-      ).filter(Boolean)
-      const remainingFields = props.fieldOptions.filter(f =>
-        !newVal.includes(f.value)
-      )
-      sortedFieldOptions.value = [...visibleFields, ...remainingFields]
-    }
-    selectAllColumns.value = selectedColumns.value.length === props.fieldOptions.length
-  } else if (props.fieldOptions.length > 0) {
-    selectedColumns.value = props.fieldOptions.map(field => field.value)
-    sortedFieldOptions.value = [...props.fieldOptions]
-    selectAllColumns.value = true
-  }
-}, { immediate: true })
-// 同步监听fieldOptions的变化
-watch(() => props.fieldOptions, (newVal) => {
-  if (!sortedFieldOptions.value.length) {
-    sortedFieldOptions.value = [...newVal]
-  }
-}, { immediate: true })
-// 单个列选择变化
-const handleSingleColumnChange = (value, checked) => {
-  if (checked) {
-    if (!selectedColumns.value.includes(value)) {
-      selectedColumns.value.push(value)
-    }
-  } else {
-    const index = selectedColumns.value.indexOf(value)
-    if (index > -1) {
-      selectedColumns.value.splice(index, 1)
-    }
-  }
-  selectAllColumns.value = selectedColumns.value.length === props.fieldOptions.length
-}
-// 全选/取消全选
-const handleSelectAllChange = (checked) => {
-  if (checked) {
-    selectedColumns.value = sortedFieldOptions.value.map(field => field.value)
-  } else {
-    selectedColumns.value = []
-  }
-}
-// 向上移动列
-const moveColumnUp = (index) => {
-  if (index > 0) {
-    const temp = sortedFieldOptions.value[index]
-    sortedFieldOptions.value[index] = sortedFieldOptions.value[index - 1]
-    sortedFieldOptions.value[index - 1] = temp
-    // 触发响应式更新
-    sortedFieldOptions.value = [...sortedFieldOptions.value]
-  }
-}
-// 向下移动列
-const moveColumnDown = (index) => {
-  if (index < sortedFieldOptions.value.length - 1) {
-    const temp = sortedFieldOptions.value[index]
-    sortedFieldOptions.value[index] = sortedFieldOptions.value[index + 1]
-    sortedFieldOptions.value[index + 1] = temp
-    // 触发响应式更新
-    sortedFieldOptions.value = [...sortedFieldOptions.value]
-  }
-}
-// 拖拽开始
-const handleDragStart = (index, event) => {
-  draggedIndex.value = index
-  event.dataTransfer.effectAllowed = 'move'
-  event.dataTransfer.setData('text/html', event.target.innerHTML)
-}
-// 拖拽经过
-const handleDragOver = (index, event) => {
-  event.preventDefault()
-  event.dataTransfer.dropEffect = 'move'
-  dragOverIndex.value = index
-}
-// 拖拽结束
-const handleDragEnd = () => {
-  draggedIndex.value = null
-  dragOverIndex.value = null
-}
-// 放下
-const handleDrop = (dropIndex, event) => {
-  event.preventDefault()
-  const dragIndex = draggedIndex.value
-  if (dragIndex === null || dragIndex === dropIndex) {
-    return
-  }
-  const items = [...sortedFieldOptions.value]
-  const draggedItem = items[dragIndex]
-  // 移除拖拽项
-  items.splice(dragIndex, 1)
-  // 在目标位置插入
-  items.splice(dropIndex, 0, draggedItem)
-  sortedFieldOptions.value = items
-  draggedIndex.value = null
-  dragOverIndex.value = null
-}
-// 确认列设置
-const confirmColumnSettings = () => {
-  // 按照sortedFieldOptions的顺序构建列配置（只传递显示的列给父组件）
-  const columnsConfig = sortedFieldOptions.value
-    .filter(field => selectedColumns.value.includes(field.value))
-    .map(field => {
-      const width = columnWidths.value[field.value]
-      return {
-        value: field.value,
-        show: true, // 已通过filter筛选，都是显示的
-        width: width ? `${width}px` : '120px' // 没有设置宽度时使用默认值120px
-      }
-    })
-  emit('column-change', columnsConfig)
-}
-</script>
-<style scoped lang="scss">
-.filter-dialog-content {
-  min-height: 400px;
-  position: relative;
-}
-.leader-line-container {
-  position: relative;
-  flex: 1;
-  overflow: hidden;
-}
-.filter-scroll-wrapper {
-  display: flex;
-  flex: 1;
-  overflow: auto;
-  height: auto;
-  background-color: #f2f4f7;
-  position: relative;
-}
-.filter-tab-content .filter-dialog-left {
-  width: 150px;
-  background-color: #f2f4f7;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  justify-content: center;
-}
-.filter-tab-content .filter-dialog-left::before {
-  content: "";
-  position: absolute;
-  width: 100px;
-  left: 78px;
-  border: 1px solid #6aa2ff;
-  border-right-color: transparent;
-  top: 50px;
-  bottom: 50px;
-  z-index: 1;
-}
-.connectors-container {
-  background: #fff;
-  position: relative;
-  z-index: 9;
-  display: flex;
-  align-items: center;
-}
-.connector-selector {
-  min-width: 60px;
-}
-.filter-dialog-middle {
-  flex: 2;
-  border-right: 1px solid #e7e7e7;
-  z-index: 99;
-  display: flex;
-  flex-direction: column;
-}
-.filter-dialog-middle :deep(.t-tabs) {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.filter-dialog-middle :deep(.t-tabs__content) {
-  flex: 1;
-  overflow: auto;
-}
-.filter-tab-content {
-  display: flex;
-  flex: 1;
-  overflow: auto;
-  height: 100%;
-  background-color: #f2f4f7;
-  position: relative;
-}
-.filter-cards {
-  flex: 1;
-  background-color: #f2f4f7;
-  padding: 15px 10px;
-  margin-bottom: 10px;
-  padding-left: 20px;
-}
-.filter-card-item {
-  background: #fff;
-  border-radius: 6px;
-  padding: 10px;
-  margin-bottom: 10px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
-}
-.filter-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.filter-card-header-left {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-.filter-card-title {
-  font-weight: 500;
-  color: var(--td-text-color-primary);
-  margin-right: 20px;
-}
-.filter-card-content .filter-combination {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-.filter-card-actions {
-  margin-top: 12px;
-  padding-top: 8px;
-  border-top: 1px dashed var(--td-component-stroke);
-}
-.add-filter-card {
-  border: 1px dashed var(--td-brand-color-light);
-  border-radius: 6px;
-  padding: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background-color: #f9f9f9;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
-  transition: all .3s ease;
-}
-.add-card-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  color: var(--td-brand-color);
-}
-.add-filter-card:hover {
-  transform: translateY(-2px);
-}
-.filter-dialog-right {
-  padding-left: 20px;
-  background: #fff;
-  padding-right: 10px;
-  width: 300px;
-}
-.filter-plan-title {
-  font-size: 14px;
-  font-weight: 600;
-  margin: 10px 10px;
-}
-.filter-plan-list {
-  max-height: 300px;
-  overflow-y: auto;
-  margin-bottom: 16px;
-}
-.filter-plan-item {
-  background: #fafafa;
-  display: flex;
-  align-items: center;
-  padding: 2px 12px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color .2s ease;
-  margin-bottom: 8px;
-}
-.filter-plan-item:hover {
-  background-color: rgba(0, 82, 217, 0.05);
-}
-.filter-plan-item.active {
-  background-color: rgba(0, 82, 217, 0.1);
-}
-.plan-icon {
-  color: #0052d9;
-}
-.plan-name {
-  flex: 1;
-  font-size: 14px;
-}
-.plan-actions {
-  display: flex;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-.filter-plan-item:hover .plan-actions {
-  opacity: 1;
-}
-.plan-actions .t-icon[name="star-filled"] {
-  color: #ff9800 !important;
-}
-.plan-actions .t-icon[name="star"] {
-  color: #bbb !important;
-}
-.plan-actions .t-button:hover .t-icon[name="star"] {
-  color: #ff9800 !important;
-}
-.plan-actions .t-icon[name="delete"] {
-  color: #f44336 !important;
-}
-.plan-actions .t-button:hover .t-icon[name="delete"] {
-  color: #d32f2f !important;
-}
-.filter-dialog-footer-container {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-.filter-dialog-footer-left {
-  display: flex;
-  gap: 8px;
-}
-.filter-dialog-footer-right {
-  display: flex;
-  gap: 8px;
-}
-.filter-dialog-footer-right .t-button {
-  margin-right: 8px;
-}
-/* 连接器选择器样式 - 为"且"和"或"添加背景区分 */
-.connector-selector {
-  :deep(.t-radio-button.t-is-checked) {
-    background-color: #e8f4ff;
-    border-color: #0052d9;
-    .t-radio-button__label {
-      color: #0052d9;
-      font-weight: 500;
-    }
-  }
-  :deep(.t-radio-button:last-child.t-is-checked) {
-    background-color: #fff3e8;
-    border-color: #ff8800;
-    .t-radio-button__label {
-      color: #ff8800;
-      font-weight: 500;
-    }
-  }
-}
-/* 列设置面板样式 */
-.column-settings-panel {
-  padding: 20px 10px;
-  background-color: #f2f4f7;
-  height: 100%;
-  overflow: auto;
-}
-.column-settings-header {
-  padding: 8px 0 16px 0;
-}
-.column-title-row {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 8px 12px;
-  font-weight: 600;
-  color: #666;
-  border-bottom: 1px solid #e7e7e7;
-  margin-bottom: 8px;
-}
-.column-title-name {
-  flex: 1;
-  min-width: 120px;
-  text-align: left;
-}
-.column-title-show {
-  width: 60px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.column-title-width {
-  width: 150px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.column-title-sort {
-  width: 80px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.column-list {
-  max-height: 400px;
-  overflow-y: auto;
-}
-.column-item-row {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 8px 12px;
-  border-radius: 4px;
-  transition: background-color 0.2s, opacity 0.2s;
-  margin-bottom: 8px;
-  cursor: move;
-  border: 2px solid transparent;
-}
-.column-item-row:hover {
-  background-color: var(--td-bg-color-container-hover, #f5f5f5);
-}
-.column-item-row.dragging {
-  opacity: 0.5;
-  border-color: #0052d9;
-  background-color: #e8f4ff;
-}
-.column-name {
-  flex: 1;
-  min-width: 120px;
-  display: flex;
-  align-items: center;
-}
-.column-show {
-  width: 60px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.column-width {
-  width: 150px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.column-sort-buttons {
-  width: 80px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-}
-.column-sort-buttons .t-button {
-  padding: 0;
-  width: 24px;
-  height: 24px;
-}
-</style>