schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update style of website page card

Browse Source
This commit is contained in:
moonrailgun 2024-10-01 20:20:51 +08:00
parent 1337eaa2c0
commit b778f8c982
2 changed files with 14 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/routes/website/$websiteId/config.tsx
View File

@ -13,10 +13,10 @@ import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/website/$websiteId/config')({ export const Route = createFileRoute('/website/$websiteId/config')({
beforeLoad: routeAuthBeforeLoad, beforeLoad: routeAuthBeforeLoad,
component: WebsiteDetailComponent, component: PageComponent,
}); });
function WebsiteDetailComponent() { function PageComponent() {
const { websiteId } = Route.useParams<{ websiteId: string }>(); const { websiteId } = Route.useParams<{ websiteId: string }>();
const workspaceId = useCurrentWorkspaceId(); const workspaceId = useCurrentWorkspaceId();
const { data: website, isLoading } = trpc.website.info.useQuery({ const { data: website, isLoading } = trpc.website.info.useQuery({

27
src/client/routes/website/$websiteId/index.tsx
View File

@ -6,17 +6,14 @@ import { Loading } from '@/components/Loading';
import { NotFoundTip } from '@/components/NotFoundTip'; import { NotFoundTip } from '@/components/NotFoundTip';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'; import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
import { Separator } from '@/components/ui/separator';
import { WebsiteCodeBtn } from '@/components/website/WebsiteCodeBtn'; import { WebsiteCodeBtn } from '@/components/website/WebsiteCodeBtn';
import { WebsiteLighthouseBtn } from '@/components/website/WebsiteLighthouseBtn'; import { WebsiteLighthouseBtn } from '@/components/website/WebsiteLighthouseBtn';
import { WebsiteMetricsTable } from '@/components/website/WebsiteMetricsTable'; import { WebsiteMetricsTable } from '@/components/website/WebsiteMetricsTable';
import { WebsiteOverview } from '@/components/website/WebsiteOverview'; import { WebsiteOverview } from '@/components/website/WebsiteOverview';
import { WebsiteVisitorMapBtn } from '@/components/website/WebsiteVisitorMapBtn'; import { WebsiteVisitorMapBtn } from '@/components/website/WebsiteVisitorMapBtn';
import { useGlobalRangeDate } from '@/hooks/useGlobalRangeDate'; import { useGlobalRangeDate } from '@/hooks/useGlobalRangeDate';
import { import { useCurrentWorkspaceId, useHasAdminPermission } from '@/store/user';
useCurrentWorkspaceId,
useHasAdminPermission,
useHasPermission,
} from '@/store/user';
import { routeAuthBeforeLoad } from '@/utils/route'; import { routeAuthBeforeLoad } from '@/utils/route';
import { useTranslation } from '@i18next-toolkit/react'; import { useTranslation } from '@i18next-toolkit/react';
import { createFileRoute, useNavigate } from '@tanstack/react-router'; import { createFileRoute, useNavigate } from '@tanstack/react-router';
@ -25,10 +22,10 @@ import { LuSettings } from 'react-icons/lu';
export const Route = createFileRoute('/website/$websiteId/')({ export const Route = createFileRoute('/website/$websiteId/')({
beforeLoad: routeAuthBeforeLoad, beforeLoad: routeAuthBeforeLoad,
component: WebsiteDetailComponent, component: PageComponent,
}); });
function WebsiteDetailComponent() { function PageComponent() {
const { websiteId } = Route.useParams<{ websiteId: string }>(); const { websiteId } = Route.useParams<{ websiteId: string }>();
const { t } = useTranslation(); const { t } = useTranslation();
const workspaceId = useCurrentWorkspaceId(); const workspaceId = useCurrentWorkspaceId();
@ -87,10 +84,10 @@ function WebsiteDetailComponent() {
/> />
} }
> >
<ScrollArea className="h-full overflow-hidden p-4"> <ScrollArea className="h-full overflow-hidden">
<ScrollBar orientation="horizontal" /> <ScrollBar orientation="horizontal" />
<Card> <Card bordered={false} className="bg-transparent">
<Card.Grid hoverable={false} className="!w-full"> <Card.Grid hoverable={false} className="!w-full">
<WebsiteOverview website={website} showDateFilter={true} /> <WebsiteOverview website={website} showDateFilter={true} />
</Card.Grid> </Card.Grid>
@ -120,7 +117,7 @@ function WebsiteDetailComponent() {
</Card.Grid> </Card.Grid>
<Card.Grid <Card.Grid
hoverable={false} hoverable={false}
className="!w-full sm:min-h-[470px] sm:!w-1/3" className="!w-full sm:min-h-[470px] sm:!w-1/2 md:!w-1/3"
> >
<WebsiteMetricsTable <WebsiteMetricsTable
websiteId={websiteId} websiteId={websiteId}
@ -132,7 +129,7 @@ function WebsiteDetailComponent() {
</Card.Grid> </Card.Grid>
<Card.Grid <Card.Grid
hoverable={false} hoverable={false}
className="!w-full sm:min-h-[470px] sm:!w-1/3" className="!w-full sm:min-h-[470px] sm:!w-1/2 md:!w-1/3"
> >
<WebsiteMetricsTable <WebsiteMetricsTable
websiteId={websiteId} websiteId={websiteId}
@ -144,7 +141,7 @@ function WebsiteDetailComponent() {
</Card.Grid> </Card.Grid>
<Card.Grid <Card.Grid
hoverable={false} hoverable={false}
className="!w-full sm:min-h-[470px] sm:!w-1/3" className="!w-full sm:min-h-[470px] sm:!w-1/2 md:!w-1/3"
> >
<WebsiteMetricsTable <WebsiteMetricsTable
websiteId={websiteId} websiteId={websiteId}
@ -156,7 +153,7 @@ function WebsiteDetailComponent() {
</Card.Grid> </Card.Grid>
<Card.Grid <Card.Grid
hoverable={false} hoverable={false}
className="!w-full sm:min-h-[470px] sm:!w-1/3" className="!w-full sm:min-h-[470px] sm:!w-1/2 md:!w-1/3"
> >
<WebsiteMetricsTable <WebsiteMetricsTable
websiteId={websiteId} websiteId={websiteId}
@ -168,7 +165,7 @@ function WebsiteDetailComponent() {
</Card.Grid> </Card.Grid>
<Card.Grid <Card.Grid
hoverable={false} hoverable={false}
className="!w-full sm:min-h-[470px] sm:!w-1/3" className="!w-full sm:min-h-[470px] sm:!w-1/2 md:!w-1/3"
> >
<WebsiteMetricsTable <WebsiteMetricsTable
websiteId={websiteId} websiteId={websiteId}
@ -184,7 +181,7 @@ function WebsiteDetailComponent() {
</Card.Grid> </Card.Grid>
<Card.Grid <Card.Grid
hoverable={false} hoverable={false}
className="!w-full sm:min-h-[470px] sm:!w-1/3" className="!w-full sm:min-h-[470px] sm:!w-1/2 md:!w-1/3"
> >
<WebsiteMetricsTable <WebsiteMetricsTable
websiteId={websiteId} websiteId={websiteId}