Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: adjust scrollbar style in pageWrapper container to prevent it from obscuring content area #25

Merged
merged 2 commits into from
May 9, 2024
Merged

fix: adjust scrollbar style in pageWrapper container to prevent it from obscuring content area #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e6d7ee
fix: adjust scrollbar style in pageWrapper container to prevent it fr…
Aaron-zon May 7, 2024
0fa07a8
refactor: expand scrollbar component to cover the pageWrapper container
kirklin May 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/admin/autoResolver/components.d.ts
View file
Open in desktop
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
23 changes: 22 additions & 1 deletion apps/admin/src/component/PageWrapper/src/PageWrapper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,30 @@
<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;
}
</style>
2 changes: 1 addition & 1 deletion apps/admin/src/pages/chat/index.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading