<template>
  <!-- 如果是单页模式，直接显示单页详情组件 -->
  <SinglePageDetail v-if="isSinglePage" />
  <div v-else class="page">
    <!-- 头部，与 AI 智能体列表一致的结构 -->
    <div class="page-header">
      <div class="header-left">
        <h2>{{ t(title) }}</h2>
      </div>
      <div class="header-right">
        <div class="filters">
          <n-input v-model:value="searchQuery" :placeholder="t('Search')" clearable style="width: 200px" />
        </div>
        <!-- 活跃过滤条件标签 -->
        <div v-if="activeFilterTags.length > 0" class="active-filters">
          <div class="filter-tags">
            <span v-for="tag in activeFilterTags" :key="tag.field" class="filter-tag">
              <span class="tag-content">
                <span class="tag-label">{{ tag.label }}</span>
                <span class="tag-separator">:</span>
                <span class="tag-value">{{ tag.value }}</span>
              </span>
              <button @click="removeFilter(tag.field)" class="remove-filter-btn">
                <i class="fa fa-times"></i>
              </button>
            </span>
          </div>
        </div>
        <div class="view-toggle">
          <button 
            class="toggle-btn" 
            :class="{ active: viewMode === 'list' }"
            @click="viewMode = 'list'"
            :title="t('List View')"
          >
            <i class="fa fa-list"></i>
          </button>
          <button 
            class="toggle-btn" 
            :class="{ active: viewMode === 'card' }"
            @click="viewMode = 'card'"
            :title="t('Card View')"
          >
            <i class="fa fa-th-large"></i>
          </button>
        </div>
        <button class="refresh-btn" @click="reload" :disabled="loading">
          <i :class="loading ? 'fa fa-spinner fa-spin' : 'fa fa-refresh'"></i>
        </button>
        <button 
          v-if="selectedKeys.length === 0"
          class="create-btn" 
          @click="createRecordHandler"
          :disabled="loading"
        >
          <i class="fa fa-plus"></i>
          {{ t('Create') }}
        </button>
        <button 
          v-else
          class="delete-btn" 
          @click="handleDeleteSelected" 
          :disabled="loading"
        >
          <i class="fa fa-trash"></i>
          {{ t('Delete Selected') }} ({{ selectedKeys.length }})
        </button>
      </div>
    </div>

    <div class="page-content">
      <!-- 过滤栏 -->
      <FilterBar 
        v-if="!isSinglePage && metaFields.length > 0"
        :fields="metaFields"
        v-model="filters"
        @filter-change="onFilterChange"
      />

      <div v-if="loading" class="loading">
        <i class="fa fa-spinner fa-spin"></i> {{ t('Loading...') }}
      </div>
      <div v-else>
        <!-- 卡片视图 -->
        <div v-if="viewMode === 'card'" class="agent-grid">
          <div 
            v-for="row in filteredRows" 
            :key="row.name" 
            class="agent-card" 
            :class="{ selected: selectedKeys.includes(row.name) }"
            @click="openDetail(row.name)"
          >
            <div class="card-checkbox">
              <input 
                type="checkbox" 
                :checked="selectedKeys.includes(row.name)"
                @click.stop="toggleSelection(row.name)"
              />
            </div>
            <div class="card-content">
              <div class="info" @click.stop="openDetail(row.name)">
                <div class="title">{{ row[primaryLabel] || row.name }}</div>
                <div class="desc">{{ row.name }}</div>
                <div class="meta">
                  <span v-for="f in cardBadges" :key="f.key" class="badge">
                    <template v-if="isBooleanField(f.key) && (row[f.key] === 1 || row[f.key] === 0 || typeof row[f.key] === 'boolean')">
                      <span v-if="row[f.key] === 1 || row[f.key] === true" class="boolean-true">✓</span>
                      <span v-else class="boolean-false">○</span>
                    </template>
                    <template v-else>{{ formatDisplayValue(row[f.key], f.key) }}</template>
                  </span>
                </div>
              </div>
              <div class="card-actions">
                <button class="action-btn" @click.stop="openDetail(row.name)" :title="t('View')">
                  <i class="fa fa-eye"></i>
                </button>
                <button class="action-btn" @click.stop="editRecord(row)" :title="t('Edit')">
                  <i class="fa fa-edit"></i>
                </button>
                <button class="action-btn" @click.stop="deleteRecord(row.name)" :title="t('Delete')">
                  <i class="fa fa-trash"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div v-if="viewMode === 'card'" class="list-pagination">
          <n-pagination v-model:page="page" :page-count="pageCount" size="small" />
        </div>

        <!-- 列表视图 -->
        <div v-else class="agent-list">
          <div class="list-header">
            <div class="col-checkbox">
              <input
                type="checkbox"
                :checked="selectedKeys.length === filteredRows.length && filteredRows.length > 0"
                :indeterminate="selectedKeys.length > 0 && selectedKeys.length < filteredRows.length"
                @change="toggleSelectAll"
              />
            </div>
            <div v-for="col in displayColumns" :key="col.key" :class="`col-${col.key}`">{{ t(col.title) }}</div>
            <div class="col-actions">{{ t('Actions') }}</div>
          </div>
          <div class="list-body">
            <div
              v-for="row in filteredRows"
              :key="row.name"
              class="list-item"
              :class="{ selected: selectedKeys.includes(row.name) }"
              @click="openDetail(row.name)"
            >
              <div class="col-checkbox">
                <input
                  type="checkbox"
                  :checked="selectedKeys.includes(row.name)"
                  @click.stop="toggleSelection(row.name)"
                />
              </div>
              <div v-for="col in displayColumns" :key="col.key" :class="`col-${col.key}`" @click.stop="openDetail(row.name)">
                <template v-if="isBooleanField(col.key) && (row[col.key] === 1 || row[col.key] === 0 || typeof row[col.key] === 'boolean')">
                  <span v-if="row[col.key] === 1 || row[col.key] === true" class="boolean-true">✓</span>
                  <span v-else class="boolean-false">○</span>
                </template>
                <template v-else>{{ formatDisplayValue(row[col.key], col.key) }}</template>
              </div>
              <div class="col-actions">
                <button class="action-btn" @click.stop="openDetail(row.name)" :title="t('View')">
                  <i class="fa fa-eye"></i>
                </button>
                <button class="action-btn" @click.stop="editRecord(row)" :title="t('Edit')">
                  <i class="fa fa-edit"></i>
                </button>
                <button class="action-btn" @click.stop="deleteRecord(row.name)" :title="t('Delete')">
                  <i class="fa fa-trash"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="list-pagination">
            <n-pagination v-model:page="page" :page-count="pageCount" size="small" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { NInput, NPagination, useMessage } from 'naive-ui'
import axios from 'axios'
import { t } from '@/shared/i18n'
import { get_session_api_headers } from '@/shared/api/auth'
import { usePageTypeSlug } from '@/shared/utils/slug'
import { isSinglePageType } from '@/shared/utils/pagetype'
import SinglePageDetail from './SinglePageDetail.vue'
import FilterBar from '@/core/components/FilterBar.vue'

const route = useRoute()
const router = useRouter()
const message = useMessage()

// 使用组合式函数处理URL slug
const { pagetypeSlug, entity } = usePageTypeSlug(route)
const title = computed(() => entity.value)

// 检查是否为单页模式
const isSinglePage = ref(false)
const searchQuery = ref('')
const loading = ref(false)
const rows = ref<any[]>([])
const page = ref(1)
const pageSize = ref(parseInt(localStorage.getItem('itemsPerPage') || '10'))
const pageCount = computed(() => {
  // 确保有总数数据时才计算分页
  if (total.value === 0 || rows.value.length === 0) return 1
  return Math.max(1, Math.ceil(total.value / pageSize.value))
})
const total = ref(0)
const selectedKeys = ref<string[]>([])
const viewMode = ref<'card' | 'list'>(
  (localStorage.getItem(`genericListViewMode:${entity.value}`) as 'card' | 'list') || 'list'
)

// 过滤条件
const filters = ref<Record<string, any>>({})

// 活跃过滤条件标签
const activeFilterTags = computed(() => {
  const tags: Array<{field: string, label: string, value: string}> = []
  Object.entries(filters.value).forEach(([fieldName, value]) => {
    if (value !== null && value !== undefined && value !== '' && 
        !(Array.isArray(value) && value.length === 0)) {
      const field = metaFields.value.find(f => f.fieldname === fieldName)
      const label = field?.label || fieldName
      let displayValue = value
      
      if (Array.isArray(value)) {
        displayValue = value.join(', ')
      } else if (field?.fieldtype === 'Check') {
        displayValue = value === 1 ? t('是') : t('否')
      } else if (field?.options) {
        // 对于有选项的字段，显示选项标签而不是值
        const options = field.options.split('\n').filter((s: string) => s.trim() !== '')
        if (options.includes(value)) {
          displayValue = t(value)
        }
      }
      
      tags.push({ field: fieldName, label, value: displayValue })
    }
  })
  return tags
})

// 移除单个过滤条件
function removeFilter(fieldName: string) {
  filters.value[fieldName] = null
  onFilterChange()
}

// 监听过滤条件变化
function onFilterChange() {
  page.value = 1 // 重置到第一页
  loadData()
}

const displayColumns = computed(() => {
  // 生成列表列：优先 in_list_view，并排除分隔类
  const isDisplayable = (f: any) => !['Section Break', 'Column Break', 'Tab Break'].includes(f.fieldtype)
  const display = metaFields.value.filter((f: any) => f.in_list_view && isDisplayable(f))
  const base = (display.length ? display : metaFields.value.filter(isDisplayable)).slice(0, 8)
  const cols: any[] = base.map((f: any) => ({ title: f.label || f.fieldname, key: f.fieldname }))
  // 确保有 name 列
  if (!cols.find(c => c.key === 'name')) cols.unshift({ title: 'ID', key: 'name' })
  return cols
})

const primaryLabel = computed(() => {
  const f = metaFields.value.find((x: any) => x.in_list_view && x.fieldname !== 'name')
  return f?.fieldname || 'name'
})
const cardBadges = computed(() => {
  const keys = displayColumns.value.map((c: any) => c.key).filter((k: string) => k && k !== 'actions' && k !== primaryLabel.value && k !== 'name')
  return keys.slice(0, 2).map((k: string) => ({ key: k }))
})

const metaFields = ref<any[]>([])

async function loadMeta() {
  loading.value = true
  try {
    const url = `/api/data/PageType/${encodeURIComponent(entity.value)}`
    const res = await axios.get(url, { headers: get_session_api_headers(), withCredentials: true })
    metaFields.value = res.data?.data?.fields || []
    
    // 检查是否为单页模式
    isSinglePage.value = await isSinglePageType(entity.value)
  } finally {
    loading.value = false
  }
}

async function loadData() {
  loading.value = true
  try {
    const listUrl = `/api/data/${encodeURIComponent(entity.value)}`
    // 仅请求所需字段，避免接口默认不返回
    const fieldNames = displayColumns.value.map((c: any) => c.key).filter((k: string) => k && k !== 'actions')
    
    // 构建过滤参数
    const params: any = { 
      fields: JSON.stringify(fieldNames), 
      limit_start: (page.value - 1) * pageSize.value, 
      limit_page_length: pageSize.value,
      order_by: 'modified desc'
    }
    
    // 添加过滤条件
    const filterConditions: any[] = []
    Object.entries(filters.value).forEach(([fieldName, value]) => {
      if (value !== null && value !== undefined && value !== '' && 
          !(Array.isArray(value) && value.length === 0)) {
        if (Array.isArray(value)) {
          // 多选字段使用 in 操作符
          filterConditions.push([fieldName, 'in', value])
        } else {
          // 单选字段使用 = 操作符
          filterConditions.push([fieldName, '=', value])
        }
      }
    })
    
    if (filterConditions.length > 0) {
      params.filters = JSON.stringify(filterConditions)
    }
    
    const res = await axios.get(listUrl, { 
      params,
      headers: get_session_api_headers(), withCredentials: true 
    })
    rows.value = res.data?.data || []
    // 后端可能没有返回 total，我们基于第一次请求的数量来估计
    // 如果当前页数据不足 pageSize，说明是最后一页
    if (!res.data?.total) {
      if (res.data?.data?.length < pageSize.value) {
        // 最后一页的情况：total = (page-1) * pageSize + 当前页实际数量
        total.value = (page.value - 1) * pageSize.value + res.data?.data?.length
      } else {
        // 可能还有更多数据，设置一个较大的值确保分页组件工作
        total.value = page.value * pageSize.value + 1
      }
    } else {
      total.value = res.data.total
    }
  } catch (error) {
    console.error('Load data error:', error)
    message.error(t('Load failed'))
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  await loadMeta()
  // 只有在非单页模式下才加载列表数据
  if (!isSinglePage.value) {
    await loadData()
  }
})

// 监听分页变化
watch([page], () => {
  loadData()
})

// 监听路由参数变化，当entity变化时重新加载数据
watch(() => route.params.entity, async (newEntity, oldEntity) => {
  if (newEntity !== oldEntity) {
    // 重置分页和搜索
    page.value = 1
    searchQuery.value = ''
    selectedKeys.value = []
    filters.value = {} // 重置过滤条件
    // 重新加载元数据和数据
    await loadMeta()
    // 只有在非单页模式下才加载列表数据
    if (!isSinglePage.value) {
      await loadData()
    }
  }
}, { immediate: false })

// 监听视图模式变化，保存到本地
watch(viewMode, (newMode) => {
  localStorage.setItem(`genericListViewMode:${entity.value}`, newMode)
})

function reload() {
  loadData()
}

const filteredRows = computed(() => {
  if (!searchQuery.value) return rows.value
  const q = searchQuery.value.toLowerCase()
  const keys = displayColumns.value.map((c: any) => c.key).filter((k: string) => k && k !== 'actions')
  return rows.value.filter((r: any) => keys.some((k: string) => String(r[k] ?? '').toLowerCase().includes(q)))
})

function toggleSelection(name: string) {
  const i = selectedKeys.value.indexOf(name)
  if (i > -1) selectedKeys.value.splice(i, 1)
  else selectedKeys.value.push(name)
}

function toggleSelectAll() {
  if (selectedKeys.value.length === filteredRows.value.length) {
    selectedKeys.value = []
  } else {
    selectedKeys.value = filteredRows.value.map(row => row.name)
  }
}

function openDetail(name: string) {
  router.push({ name: 'PageTypeDetail', params: { entity: pagetypeSlug.value, id: name } })
}

async function handleDeleteSelected() {
  if (selectedKeys.value.length === 0) return
  const { deleteRecords } = await import('../../shared/api/common')
  const res = await deleteRecords(entity.value, selectedKeys.value)
  if (res.success) {
    selectedKeys.value = []
    await loadData()
  } else {
    message.error(res.message || t('Delete failed'))
  }
}

function createRecordHandler() {
  const randomStr = Math.random().toString(36).substring(2, 12)
  const tempName = `new-${pagetypeSlug.value}-${randomStr}`
  openDetail(tempName)
}

function editRecord(row: any) {
  openDetail(row.name)
}

async function deleteRecord(name: string) {
  const { deleteRecords } = await import('@/shared/api/common')
  const res = await deleteRecords(entity.value, [name])
  if (res.success) {
    await loadData()
  } else {
    message.error(res.message || t('Delete failed'))
  }
}


function isBooleanField(fieldName: string) {
  // 通过元数据检测布尔字段
  const fieldMeta = metaFields.value.find(f => f.fieldname === fieldName)
  if (fieldMeta) {
    // 检查字段类型
    if (fieldMeta.fieldtype === 'Check') return true
    
    // 检查是否有一个布尔值字段的特征（值为0/1）
    // 或者通过字段名包含布尔关键字检测
    const boolKeywords = ['enabled', 'disabled', 'active', 'status']
    return boolKeywords.some(keyword => fieldName.toLowerCase().includes(keyword))
  }
  return false
}

function formatDisplayValue(value: any, fieldName: string) {
  let result: any = value
  
  // 尝试从字段元数据获取翻译选项
  const fieldMeta = metaFields.value.find(f => f.fieldname === fieldName)
  if (fieldMeta && fieldMeta.options) {
    const options = fieldMeta.options.split('\n').filter((s: string) => s.trim() !== '')
    if (options.includes(value)) {
      result = t(value)
    }
  } else if (typeof value === 'string' && value.length > 0) {
    result = t(value)
  }
  
  // 简单截断：超过50字符就截断
  if (typeof result === 'string' && result.length > 50) {
    result = result.substring(0, 50) + '...'
  }
  
  return result
}
</script>

<style scoped>
.page { 
  padding: 16px; 
  width: 100%;
  min-height: 100vh;
}

.page-header {
  display: flex;
  align-items: flex-start; 
  justify-content: space-between;
  margin-bottom: 24px;
}

.header-left h2 { font-size: 28px; font-weight: 700; color: #1f2937; margin: 0; }

.header-right { display: flex; align-items: center; gap: 12px; }
.filters { display: flex; gap: 8px; align-items: center; }

.refresh-btn { width: 36px; height: 36px; border: none; border-radius: 8px; background: #f8fafc; color: #64748b; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.refresh-btn:hover { background: #e2e8f0; color: #475569; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.refresh-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }
.refresh-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.refresh-btn:disabled:hover { background: #f8fafc; color: #64748b; transform: none; box-shadow: none; }

.agent-list { background: white; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.list-pagination { padding: 16px 20px; border-top: 1px solid #e5e7eb; background: #f9fafb; display: flex; justify-content: center; }

.loading { display: flex; align-items: center; justify-content: center; padding: 60px 20px; color: #6b7280; font-size: 16px; }
.loading i { margin-right: 8px; }

/* 卡片视图样式（对齐 AgentList 设计） */
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 24px; }
.agent-card { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.agent-card:hover { border-color: #2563eb; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1); transform: translateY(-2px); }
.agent-card.selected { border-color: #3b82f6; background: #f0f9ff; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); }
.card-checkbox { position: absolute; top: 12px; right: 12px; z-index: 10; }
.card-checkbox input[type="checkbox"] { cursor: pointer; accent-color: #3b82f6; }
.card-content { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.title { font-size: 16px; font-weight: 600; color: #111827; line-height: 1.4; }
.desc { font-size: 14px; color: #6b7280; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge { background: #f3f4f6; color: #374151; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.card-actions { display: flex; align-items: center; gap: 6px; }
.action-btn { width: 28px; height: 28px; border: none; background: #f3f4f6; color: #6b7280; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
 .action-btn:hover { background: #3b82f6; color: white; }

/* 工具栏样式（对齐 AgentList） */
.header-right { display: flex; align-items: center; gap: 12px; }
.filters { display: flex; gap: 8px; align-items: center; }

/* 视图切换按钮 */
.view-toggle { display: flex; background: #f8fafc; border-radius: 8px; padding: 2px; border: 1px solid #e2e8f0; }
.toggle-btn { 
  width: 32px; height: 32px; border: none; Background: transparent; color: #64748b; 
  cursor: pointer; display: flex; align-items: center; justify-content: center; 
  border-radius: 6px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
}
.toggle-btn:hover { background: #e2e8f0; color: #475569; }
.toggle-btn.active { background: #2563eb; color: white; }

/* 刷新按钮 */
.refresh-btn {
  width: 36px; height: 36px; border: none; border-radius: 8px; background: #f8fafc;
  color: #64748b; cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 14px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; overflow: hidden;
}
.refresh-btn:hover { background: #e2e8f0; color: #475569; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.refresh-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }
.refresh-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.refresh-btn:disabled:hover { background: #f8fafc; color: #64748b; transform: none; box-shadow: none; }

/* 新建按钮 */
.create-btn {
  height: 36px; padding: 0 16px; border: none; border-radius: 8px; background: #2563eb;
  color: white; cursor: pointer; display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; overflow: hidden;
}
.create-btn:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); }
.create-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3); }
.create-btn i { font-size: 12px; }

/* 删除选中按钮 */
.delete-btn {
  background: #ef4444; color: white; border: none; padding: 8px 16px; border-radius: 6px;
  cursor: pointer; font-size: 14px; font-weight: 500; display: flex; align-items: center;
  gap: 6px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;
}
.delete-btn:hover { background: #dc2626; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }
.delete-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3); }
.delete-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.delete-btn i { font-size: 12px; }

/* 表格操作列样式 - 与 AgentList 完全一致 */
.col-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
 }

/* 列表样式 - 与 AgentList 完全一致 */
.col-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
}

.list-header {
  display: grid;
  grid-template-columns: 40px repeat(auto-fit, minmax(120px, 1fr)) 140px;
  gap: 16px;
  padding: 16px 20px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.list-body {
  max-height: 600px;
  overflow-y: auto;
}

.list-item {
  display: grid;
  grid-template-columns: 40px repeat(auto-fit, minmax(120px, 1fr)) 140px;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.list-item:hover {
  background: #f9fafb;
}

.list-item:last-child {
  border-bottom: none;
}

.list-item.selected {
  background: #f0f9ff;
  border-color: #3b82f6;
}

.col-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.action-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-btn:hover {
  background: #3b82f6;
  color: white;
}

/* 布尔值样式 */
.boolean-true {
  color: #059669;
  font-weight: bold;
  font-size: 16px;
}

.boolean-false {
  color: #9ca3af;
  font-weight: bold;
  font-size: 16px;
}

/* 通用截断样式 */
.col-title,
.col-subtitle,
.col-description,
.col-content {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 /* 简洁的活跃过滤条件标签样式 */
.active-filters {
  margin-right: 12px;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  background: #3b82f6;
  color: white;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  transition: all 0.2s ease;
}

.filter-tag:hover {
  background: #2563eb;
}

.tag-content {
  display: flex;
  align-items: center;
  padding: 2px 6px;
}

.tag-label {
  font-weight: 600;
}

.tag-separator {
  margin: 0 2px;
  opacity: 0.8;
}

.tag-value {
  opacity: 0.9;
}

.remove-filter-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 3px 3px 0;
  transition: all 0.2s ease;
}

.remove-filter-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.remove-filter-btn i {
  font-size: 7px;
}
</style>


