ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-13 04:45:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

feat：计费页面优化，宽度应该自适应

Browse source
This commit is contained in:
sylarchen1389 2025-12-07 23:11:37 +08:00
parent e78488e131
commit 9121bc7022
1 changed files with 30 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/routes/(app)/billing/+page.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import { onMount, getContext } from 'svelte';
import { balance } from '$lib/stores';
import { balance, showSidebar } from '$lib/stores';
import { getBalance } from '$lib/apis/billing';
import BalanceDisplay from '$lib/components/billing/BalanceDisplay.svelte';
import BillingLogsTable from '$lib/components/billing/BillingLogsTable.svelte';
@ -24,30 +24,38 @@
<title>{$i18n.t('计费中心')} | Cakumi</title>
</svelte:head>
<div class="billing-page max-w-7xl mx-auto px-4 py-6 space-y-6">
<!-- 页面标题 -->
<div class="page-header">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">{$i18n.t('计费中心')}</h1>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
查看您的余额、消费记录和统计信息
</p>
</div>
<div
class="flex flex-col h-screen max-h-[100dvh] flex-1 transition-width duration-200 ease-in-out w-full max-w-full {$showSidebar
? 'md:max-w-[calc(100%-260px)]'
: 'md:max-w-[calc(100%-49px)]'}"
>
<div class="flex-1 overflow-y-auto min-w-[320px]">
<div class="billing-page max-w-4xl mx-auto px-4 py-6 space-y-6 pb-16">
<!-- 页面标题 -->
<div class="page-header">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">{$i18n.t('计费中心')}</h1>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
{$i18n.t('查看您的余额、消费记录和统计信息')}
</p>
</div>
<!-- 余额不足警告 -->
<LowBalanceAlert />
<!-- 余额不足警告 -->
<LowBalanceAlert />
<!-- 余额卡片 -->
<div class="balance-section">
<BalanceDisplay />
</div>
<!-- 余额卡片 -->
<div class="balance-section">
<BalanceDisplay />
</div>
<!-- 统计图表 -->
<div class="stats-section">
<BillingStatsChart />
</div>
<!-- 统计图表 -->
<div class="stats-section">
<BillingStatsChart />
</div>
<!-- 消费记录 -->
<div class="logs-section">
<BillingLogsTable />
<!-- 消费记录 -->
<div class="logs-section">
<BillingLogsTable />
</div>
</div>
</div>
</div>