xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

uasge页面H5兼容

Browse Source
This commit is contained in:
北枳 2025-09-28 20:45:08 +08:00
parent 72ddf9c25f
commit 515c7cac25
2 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/usage/page.tsx
View File

@ -5,7 +5,7 @@ import UsageView from "@/components/pages/usage-view";
const UsagePage: React.FC = () => { const UsagePage: React.FC = () => {
return ( return (
<div data-alt="usage-page" className="h-screen overflow-auto px-4 py-6"> <div data-alt="usage-page" className="mobile-viewport-height min-h-screen mobile-safe-bottom overflow-hidden px-4 py-6 pb-[max(1rem,env(safe-area-inset-bottom))]">
<UsageView /> <UsageView />
</div> </div>
); );

17
components/pages/usage-view.tsx
View File

@ -191,8 +191,9 @@ const UsageView: React.FC = () => {
}, []); }, []);
return ( return (
<div data-alt="usage-view-container" className="mx-auto max-w-5xl p-4 sm:p-6"> <div data-alt="usage-view-container" className="mx-auto max-w-5xl h-full flex flex-col p-4 sm:p-6 pb-[max(5rem,env(safe-area-inset-bottom))]">
<div data-alt="header" className="mb-6 flex items-center justify-between"> <div data-alt="top-meta" className="sticky top-0 z-10 -mx-4 sm:-mx-6 px-4 sm:px-6 pt-2 pb-3 bg-black/60 backdrop-blur supports-[backdrop-filter]:bg-black/40">
<div data-alt="header" className="mb-3 flex items-center justify-between">
<h2 className="text-base sm:text-xl font-semibold text-white">Credit Usage Details</h2> <h2 className="text-base sm:text-xl font-semibold text-white">Credit Usage Details</h2>
<div data-alt="period-switch" className="inline-flex rounded-lg bg-white/5 p-1"> <div data-alt="period-switch" className="inline-flex rounded-lg bg-white/5 p-1">
{([7, 30, 90] as PeriodDays[]).map((d) => ( {([7, 30, 90] as PeriodDays[]).map((d) => (
@ -212,13 +213,13 @@ const UsageView: React.FC = () => {
</button> </button>
))} ))}
</div> </div>
</div>
<div data-alt="meta" className="text-xs sm:text-sm text-white/70">
<span data-alt="meta-period">Period: {periodLabel || "-"} days</span>
</div>
</div> </div>
<div data-alt="meta" className="mb-3 text-xs sm:text-sm text-white/70"> <div data-alt="table-wrapper" className="flex-1 min-h-0 overflow-auto rounded-lg border border-white/10">
<span data-alt="meta-period">Period: {periodLabel || "-"} days</span>
</div>
<div data-alt="table-wrapper" className="overflow-hidden overflow-x-auto rounded-lg border border-white/10">
<table data-alt="table" className="min-w-[32rem] sm:min-w-full table-auto"> <table data-alt="table" className="min-w-[32rem] sm:min-w-full table-auto">
<thead className="bg-white/5"> <thead className="bg-white/5">
<tr> <tr>
@ -332,7 +333,7 @@ const UsageView: React.FC = () => {
</table> </table>
</div> </div>
<div data-alt="pagination" className="mt-4 flex items-center justify-between text-xs sm:text-sm text-white/80"> <div data-alt="pagination" className="sticky bottom-[max(1rem,env(safe-area-inset-bottom))] z-10 -mx-4 sm:-mx-6 px-4 sm:px-6 mt-4 mb-[max(4rem,env(safe-area-inset-bottom))] flex items-center justify-between text-xs sm:text-sm text-white/80 bg-black/60 backdrop-blur supports-[backdrop-filter]:bg-black/40">
<div data-alt="total-info"> <div data-alt="total-info">
Total {Number.isFinite(total) ? total : 0} Total {Number.isFinite(total) ? total : 0}
</div> </div>