56 lines
1.2 KiB
Vue
56 lines
1.2 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>
|
||
|
|
defineProps({
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
subtitle: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* 组件特定样式 */
|
||
|
|
</style>
|