76 lines
1.6 KiB
Vue
76 lines
1.6 KiB
Vue
<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>
|