Skip to content

Commit

Permalink
refactor: expand scrollbar component to cover the pageWrapper container
Browse files Browse the repository at this point in the history
  • Loading branch information
@kirklin
kirklin committed May 9, 2024
1 parent 3e6d7ee commit 0fa07a8
Show file tree
Hide file tree
Showing 8 changed files with 573 additions and 562 deletions.
1 change: 1 addition & 0 deletions apps/admin/autoResolver/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ declare module 'vue' {
CAAppNaiveUIProvider: typeof import('@celeris/components')['CAAppNaiveUIProvider']
CACharts: typeof import('@celeris/components')['CACharts']
CAIcon: typeof import('@celeris/components')['CAIcon']
NAlert: typeof import('@celeris/ca-components')['NAlert']
NAvatar: typeof import('@celeris/ca-components')['NAvatar']
NBadge: typeof import('@celeris/ca-components')['NBadge']
NBreadcrumb: typeof import('@celeris/ca-components')['NBreadcrumb']
Expand Down
17 changes: 16 additions & 1 deletion apps/admin/src/component/PageWrapper/src/PageWrapper.vue
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,29 @@
<script setup lang="ts">
interface PageWrapperProps {
useScrollbar?: boolean;
}
withDefaults(defineProps<PageWrapperProps>(), {
useScrollbar: true,
});
</script>

<template>
<div class="page-wrapper rounded-2xl w-full h-full min-h-full">
<slot />
<NScrollbar v-if="useScrollbar" class="rounded-2xl">
<slot />
</NScrollbar>
<slot v-else />
</div>
</template>

<style scoped>
/*
TODO: Explore alternative methods for styling the scrollbar within the pageWrapper component.
*/
/*
Enhance scrollbar appearance within the pageWrapper container to maintain content visibility
*/
.page-wrapper :deep(.ca-scrollbar-container) {
padding: 0 8px;
}
Expand Down
2 changes: 1 addition & 1 deletion apps/admin/src/pages/chat/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ defineOptions({
</script>

<template>
<PageWrapper>
<PageWrapper :use-scrollbar="false">
<ChatLayout />
</PageWrapper>
</template>
Expand Down
114 changes: 56 additions & 58 deletions apps/admin/src/pages/components/headless-table/pagination/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,68 +59,66 @@ function handlePageSizeChange(pageSize: number) {

<template>
<PageWrapper>
<NScrollbar class="rounded-2xl">
<NCard title="分页表单">
<NTable :bordered="true" :single-line="false" striped>
<thead>
<tr
v-for="headerGroup in table.getHeaderGroups()"
:key="headerGroup.id"
<NCard title="分页表单">
<NTable :bordered="true" :single-line="false" striped>
<thead>
<tr
v-for="headerGroup in table.getHeaderGroups()"
:key="headerGroup.id"
>
<th
v-for="(header) in headerGroup.headers"
:key="header.id"
:colspan="header.colSpan"
class="font-bold!"
scope="col"
>
<th
v-for="(header) in headerGroup.headers"
:key="header.id"
:colspan="header.colSpan"
class="font-bold!"
scope="col"
>
<FlexRender
:render="header.column.columnDef.header"
:props="header.getContext()"
/>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="row in table.getRowModel().rows"
:key="row.id"
<FlexRender
:render="header.column.columnDef.header"
:props="header.getContext()"
/>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="row in table.getRowModel().rows"
:key="row.id"
>
<td
v-for="(cell) in row.getVisibleCells()"
:key="cell.id"
>
<td
v-for="(cell) in row.getVisibleCells()"
:key="cell.id"
>
<div>
<div>
<div>
<FlexRender
:render="cell.column.columnDef.cell"
:props="cell.getContext()"
/>
</div>
<FlexRender
:render="cell.column.columnDef.cell"
:props="cell.getContext()"
/>
</div>
</td>
</tr>
<tr v-if="table.getRowModel().rows.length === 0">
<td
:colspan="table.getAllColumns().length"
>
<NEmpty />
</td>
</tr>
</tbody>
</NTable>
<template #action>
<NPagination
:page="table.getState().pagination.pageIndex + 1"
:page-count="table.getPageCount()"
show-size-picker
:page-sizes="[10, 20, 30, 40, 50]"
@update:page="handlePageChange"
@update:page-size="handlePageSizeChange"
/>
</template>
</NCard>
</NScrollbar>
</div>
</td>
</tr>
<tr v-if="table.getRowModel().rows.length === 0">
<td
:colspan="table.getAllColumns().length"
>
<NEmpty />
</td>
</tr>
</tbody>
</NTable>
<template #action>
<NPagination
:page="table.getState().pagination.pageIndex + 1"
:page-count="table.getPageCount()"
show-size-picker
:page-sizes="[10, 20, 30, 40, 50]"
@update:page="handlePageChange"
@update:page-size="handlePageSizeChange"
/>
</template>
</NCard>
</PageWrapper>
</template>

Expand Down
56 changes: 27 additions & 29 deletions apps/admin/src/pages/dashboard/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,35 +12,33 @@ defineOptions({

<template>
<PageWrapper>
<NScrollbar class="rounded-2xl">
<NSpace :vertical="true" :size="16">
<NGrid cols="24" :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
<NGridItem span="24 l:18">
<!-- 数据总览 -->
<DataOverview />
</NGridItem>
<NGridItem span="24 l:6">
<!-- 性能指标和API健康指标组件 -->
<NSpace :vertical="true" :size="16">
<PerformanceMetrics />
<APIHealthMetrics />
</NSpace>
</NGridItem>
</NGrid>
<!-- 用户分析模块 -->
<UserAnalysis />
<NGrid cols="1 m:2" responsive="screen" :x-gap="16" :y-gap="16">
<NGridItem>
<!-- TODO: 热门AI助手展示组件 -->
<!-- <PopularAssistants /> -->
</NGridItem>
<NGridItem>
<!-- TODO: 回复类型占比组件 -->
<!-- <ResponseTypeDistribution /> -->
</NGridItem>
</NGrid>
</NSpace>
</NScrollbar>
<NSpace :vertical="true" :size="16">
<NGrid cols="24" :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
<NGridItem span="24 l:18">
<!-- 数据总览 -->
<DataOverview />
</NGridItem>
<NGridItem span="24 l:6">
<!-- 性能指标和API健康指标组件 -->
<NSpace :vertical="true" :size="16">
<PerformanceMetrics />
<APIHealthMetrics />
</NSpace>
</NGridItem>
</NGrid>
<!-- 用户分析模块 -->
<UserAnalysis />
<NGrid cols="1 m:2" responsive="screen" :x-gap="16" :y-gap="16">
<NGridItem>
<!-- TODO: 热门AI助手展示组件 -->
<!-- <PopularAssistants /> -->
</NGridItem>
<NGridItem>
<!-- TODO: 回复类型占比组件 -->
<!-- <ResponseTypeDistribution /> -->
</NGridItem>
</NGrid>
</NSpace>
</PageWrapper>
</template>

Expand Down
26 changes: 12 additions & 14 deletions apps/admin/src/pages/design/palette/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,18 @@ defineOptions({

<template>
<PageWrapper>
<NScrollbar class="rounded-2xl">
<NGrid cols="4" :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
<NGridItem v-for="(color, name) in presetPrimaryColors" :key="color">
<NCard>
<ColorPalette
:key="name"
:color-name="name"
color-type="hex"
:primary-color="color"
/>
</NCard>
</NGridItem>
</NGrid>
</NScrollbar>
<NGrid cols="4" :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
<NGridItem v-for="(color, name) in presetPrimaryColors" :key="color">
<NCard>
<ColorPalette
:key="name"
:color-name="name"
color-type="hex"
:primary-color="color"
/>
</NCard>
</NGridItem>
</NGrid>
</PageWrapper>
</template>

Expand Down
Loading

0 comments on commit 0fa07a8

Please sign in to comment.