<template>
  <div class="list-page-container">
    <div class="list-page-card">
      <!-- 页面头部 -->
      <div class="list-page-header">
        <div class="flex justify-between items-start">
          <div>
            <h1 class="list-page-title">{{ title }}</h1>
            <p class="list-page-subtitle">{{ subtitle }}</p>
          </div>
          <div class="list-page-actions">
            <slot name="actions" />
          </div>
        </div>
      </div>

      <!-- 筛选区域 -->
      <div v-if="$slots.filters" class="list-page-filters">
        <slot name="filters" />
      </div>

      <!-- 表格区域 -->
      <div class="list-page-table">
        <div class="table-wrapper">
          <slot name="table" />
        </div>
      </div>

      <!-- 分页区域 -->
      <div v-if="$slots.pagination" class="list-page-pagination">
        <slot name="pagination" />
      </div>
    </div>

    <!-- 其他内容 -->
    <slot name="extra" />
  </div>
</template>

<script setup>
import { useMobileTable } from '@/composables/useMobileTable'
import { watch, nextTick, onMounted } from 'vue'

defineProps({
  title: {
    type: String,
    required: true
  },
  subtitle: {
    type: String,
    default: ''
  }
})

// 移动端表格优化
const { isMobile, removeFixedColumns } = useMobileTable()

// 监听表格内容变化，重新应用优化
watch(() => isMobile.value, () => {
  nextTick(() => {
    removeFixedColumns()
  })
})

// 在组件挂载后应用优化
onMounted(() => {
  nextTick(() => {
    removeFixedColumns()
  })
})
</script>

<style scoped>
/* 组件特定样式 */
</style>
