mirror of
https://github.com/fawney19/Aether.git
synced 2026-09-03 01:40:21 +08:00
feat: 分页组件支持 pageSize 浏览器缓存
- 为 Pagination 组件添加 cacheKey 属性,支持将 pageSize 缓存到 localStorage - 组件挂载时自动恢复缓存的 pageSize 设置 - 为各页面的分页组件配置独立的缓存键 - 仅在显示 pageSize 选择器时启用缓存恢复 Closes #105 Co-Authored-By: AAEE86 <33052466+AAEE86@users.noreply.github.com>
This commit is contained in:
@@ -74,7 +74,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref } from 'vue'
|
import { computed, ref, onMounted } from 'vue'
|
||||||
import { Button, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui'
|
import { Button, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -83,6 +83,8 @@ interface Props {
|
|||||||
pageSize?: number
|
pageSize?: number
|
||||||
pageSizeOptions?: number[]
|
pageSizeOptions?: number[]
|
||||||
showPageSizeSelector?: boolean
|
showPageSizeSelector?: boolean
|
||||||
|
/** 缓存键名,设置后会将 pageSize 缓存到 localStorage 并在组件挂载时自动恢复 */
|
||||||
|
cacheKey?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Emits {
|
interface Emits {
|
||||||
@@ -154,12 +156,31 @@ function handlePageChange(page: number) {
|
|||||||
function handlePageSizeChange(value: string) {
|
function handlePageSizeChange(value: string) {
|
||||||
const newSize = parseInt(value)
|
const newSize = parseInt(value)
|
||||||
if (newSize !== props.pageSize) {
|
if (newSize !== props.pageSize) {
|
||||||
|
// 缓存到 localStorage
|
||||||
|
if (props.cacheKey) {
|
||||||
|
localStorage.setItem(props.cacheKey, value)
|
||||||
|
}
|
||||||
emit('update:pageSize', newSize)
|
emit('update:pageSize', newSize)
|
||||||
// 切换每页数量时,重置到第一页
|
// 切换每页数量时,重置到第一页
|
||||||
emit('update:current', 1)
|
emit('update:current', 1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 组件挂载时自动从缓存恢复 pageSize(仅当显示选择器时)
|
||||||
|
onMounted(() => {
|
||||||
|
if (props.cacheKey && props.showPageSizeSelector) {
|
||||||
|
const cached = localStorage.getItem(props.cacheKey)
|
||||||
|
if (cached) {
|
||||||
|
const cachedSize = parseInt(cached, 10)
|
||||||
|
if (!isNaN(cachedSize) && props.pageSizeOptions?.includes(cachedSize)) {
|
||||||
|
if (cachedSize !== props.pageSize) {
|
||||||
|
emit('update:pageSize', cachedSize)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
function handleJumpPage() {
|
function handleJumpPage() {
|
||||||
const page = parseInt(jumpPageInput.value)
|
const page = parseInt(jumpPageInput.value)
|
||||||
if (!isNaN(page) && page >= 1 && page <= totalPages.value && page !== props.current) {
|
if (!isNaN(page) && page >= 1 && page <= totalPages.value && page !== props.current) {
|
||||||
|
|||||||
@@ -495,6 +495,7 @@
|
|||||||
:total="totalRecords"
|
:total="totalRecords"
|
||||||
:page-size="pageSize"
|
:page-size="pageSize"
|
||||||
:page-size-options="pageSizeOptions"
|
:page-size-options="pageSizeOptions"
|
||||||
|
cache-key="usage-records-page-size"
|
||||||
@update:current="$emit('update:currentPage', $event)"
|
@update:current="$emit('update:currentPage', $event)"
|
||||||
@update:page-size="$emit('update:pageSize', $event)"
|
@update:page-size="$emit('update:pageSize', $event)"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -302,6 +302,7 @@
|
|||||||
:total="totalRecords"
|
:total="totalRecords"
|
||||||
:page-size="pageSize"
|
:page-size="pageSize"
|
||||||
:page-size-options="[10, 20, 50, 100]"
|
:page-size-options="[10, 20, 50, 100]"
|
||||||
|
cache-key="audit-logs-page-size"
|
||||||
@update:current="handlePageChange"
|
@update:current="handlePageChange"
|
||||||
@update:page-size="pageSize = $event; currentPage = 1; loadLogs()"
|
@update:page-size="pageSize = $event; currentPage = 1; loadLogs()"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -702,6 +702,7 @@ onBeforeUnmount(() => {
|
|||||||
:current="currentPage"
|
:current="currentPage"
|
||||||
:total="affinityList.length"
|
:total="affinityList.length"
|
||||||
:page-size="pageSize"
|
:page-size="pageSize"
|
||||||
|
cache-key="cache-monitoring-page-size"
|
||||||
@update:current="currentPage = $event; handlePageChange()"
|
@update:current="currentPage = $event; handlePageChange()"
|
||||||
@update:page-size="pageSize = $event"
|
@update:page-size="pageSize = $event"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -402,6 +402,7 @@
|
|||||||
:current="catalogCurrentPage"
|
:current="catalogCurrentPage"
|
||||||
:total="filteredGlobalModels.length"
|
:total="filteredGlobalModels.length"
|
||||||
:page-size="catalogPageSize"
|
:page-size="catalogPageSize"
|
||||||
|
cache-key="model-management-page-size"
|
||||||
@update:current="catalogCurrentPage = $event"
|
@update:current="catalogCurrentPage = $event"
|
||||||
@update:page-size="catalogPageSize = $event"
|
@update:page-size="catalogPageSize = $event"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -420,6 +420,7 @@
|
|||||||
:current="currentPage"
|
:current="currentPage"
|
||||||
:total="filteredProviders.length"
|
:total="filteredProviders.length"
|
||||||
:page-size="pageSize"
|
:page-size="pageSize"
|
||||||
|
cache-key="provider-management-page-size"
|
||||||
@update:current="currentPage = $event"
|
@update:current="currentPage = $event"
|
||||||
@update:page-size="pageSize = $event"
|
@update:page-size="pageSize = $event"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -498,6 +498,7 @@
|
|||||||
:current="currentPage"
|
:current="currentPage"
|
||||||
:total="filteredUsers.length"
|
:total="filteredUsers.length"
|
||||||
:page-size="pageSize"
|
:page-size="pageSize"
|
||||||
|
cache-key="users-page-size"
|
||||||
@update:current="currentPage = $event"
|
@update:current="currentPage = $event"
|
||||||
@update:page-size="pageSize = $event"
|
@update:page-size="pageSize = $event"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -310,6 +310,7 @@
|
|||||||
:current="currentPage"
|
:current="currentPage"
|
||||||
:total="total"
|
:total="total"
|
||||||
:page-size="pageSize"
|
:page-size="pageSize"
|
||||||
|
cache-key="announcements-page-size"
|
||||||
@update:current="loadAnnouncements($event)"
|
@update:current="loadAnnouncements($event)"
|
||||||
@update:page-size="pageSize = $event; loadAnnouncements(1)"
|
@update:page-size="pageSize = $event; loadAnnouncements(1)"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -301,6 +301,7 @@
|
|||||||
:current="currentPage"
|
:current="currentPage"
|
||||||
:total="totalTokens"
|
:total="totalTokens"
|
||||||
:page-size="pageSize"
|
:page-size="pageSize"
|
||||||
|
cache-key="management-tokens-page-size"
|
||||||
@update:current="currentPage = $event"
|
@update:current="currentPage = $event"
|
||||||
@update:page-size="handlePageSizeChange"
|
@update:page-size="handlePageSizeChange"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -312,6 +312,7 @@
|
|||||||
:current="currentPage"
|
:current="currentPage"
|
||||||
:total="filteredModels.length"
|
:total="filteredModels.length"
|
||||||
:page-size="pageSize"
|
:page-size="pageSize"
|
||||||
|
cache-key="model-catalog-page-size"
|
||||||
@update:current="currentPage = $event"
|
@update:current="currentPage = $event"
|
||||||
@update:page-size="pageSize = $event"
|
@update:page-size="pageSize = $event"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -339,6 +339,7 @@
|
|||||||
:current="currentPage"
|
:current="currentPage"
|
||||||
:total="apiKeys.length"
|
:total="apiKeys.length"
|
||||||
:page-size="pageSize"
|
:page-size="pageSize"
|
||||||
|
cache-key="my-api-keys-page-size"
|
||||||
@update:current="currentPage = $event"
|
@update:current="currentPage = $event"
|
||||||
@update:page-size="pageSize = $event"
|
@update:page-size="pageSize = $event"
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user