clz/billai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): 修复弹窗裁切/宽度与日期选择器

Browse Source
This commit is contained in:
clz
2026-01-18 20:17:48 +08:00
parent f5afb0c135
commit c61691249f
9 changed files with 40 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/analysis/CategoryRanking.svelte
View File

@@ -199,7 +199,7 @@
<!-- 分类详情弹窗 -->
<Drawer.Root bind:open={dialogOpen}>
<Drawer.Content class="sm:max-w-4xl">
<Drawer.Content class="md:max-w-4xl">
<Drawer.Header>
<Drawer.Title class="flex items-center gap-2">
<PieChartIcon class="h-5 w-5" />

2
web/src/lib/components/analysis/DailyTrendChart.svelte
View File

@@ -836,7 +836,7 @@
<!-- 当日详情 Drawer -->
<Drawer.Root bind:open={dialogOpen}>
<Drawer.Content class="sm:max-w-4xl">
<Drawer.Content class="md:max-w-4xl">
<Drawer.Header>
<Drawer.Title class="flex items-center gap-2">
<Calendar class="h-5 w-5" />

6
web/src/lib/components/ui/date-range-picker/date-range-picker.svelte
View File

@@ -18,7 +18,7 @@
let { startDate = $bindable(), endDate = $bindable(), onchange, class: className }: Props = $props();
// 将 YYYY-MM-DD 字符串转换为 CalendarDate
function parseDate(dateStr: string): DateValue | undefined {
function parseDate(dateStr?: string): DateValue | undefined {
if (!dateStr) return undefined;
const [year, month, day] = dateStr.split('-').map(Number);
return new CalendarDate(year, month, day);
@@ -101,7 +101,11 @@
<Popover.Content class="w-auto p-0" align="start">
<RangeCalendar
bind:value
class="rounded-md border"
numberOfMonths={2}
pagedNavigation={true}
fixedWeeks={true}
weekdayFormat="short"
locale="zh-CN"
weekStartsOn={1}
/>

2
web/src/lib/components/ui/dialog/dialog-content.svelte
View File

@@ -27,7 +27,7 @@
bind:ref
data-slot="dialog-content"
class={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-4 left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-0 gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg max-h-[calc(100dvh-2rem)] overflow-y-auto md:top-[50%] md:translate-y-[-50%] md:max-h-[85vh]",
className
)}
{...restProps}

4
web/src/lib/components/ui/drawer/drawer-content.svelte
View File

@@ -20,14 +20,14 @@
{#if isMobile.current}
<Sheet.Content
{side}
class={cn('max-h-[90vh] overflow-hidden flex flex-col', className)}
class={cn('max-h-[90vh] overflow-y-auto flex flex-col', className)}
>
<!-- 拖拽指示器 (移动端抽屉常见设计) -->
<div class="mx-auto mt-2 h-1.5 w-12 shrink-0 rounded-full bg-muted"></div>
{@render children?.()}
</Sheet.Content>
{:else}
<Dialog.Content class={cn('max-h-[85vh] overflow-hidden flex flex-col', className)}>
<Dialog.Content class={cn('max-h-[85vh] overflow-y-auto flex flex-col', className)}>
{@render children?.()}
</Dialog.Content>
{/if}