alikia2x/cvsa
1
0
Fork 0
Code

ref: rebuild the entire layout, removed navigation rail for desktop

Browse Source 
TODO: (for desktop view): improve layout for tabs in right side,
add some fixed links & contextual actions on the left side
This commit is contained in:
alikia2x (寒寒) 2025-08-06 00:42:30 +08:00
parent 3dd5e77d39
commit 1959046184
6 changed files with 90 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/solid/bun.lock
View File

@ -4,7 +4,7 @@
"": {
"name": "example-basic",
"dependencies": {
"@m3-components/solid": "0.1.10",
"@m3-components/solid": "0.1.17",
"@solid-primitives/media": "^2.3.3",
"@solidjs/meta": "^0.29.4",
"@solidjs/router": "^0.15.3",
@ -184,7 +184,7 @@
"@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.25", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="],
"@m3-components/solid": ["@m3-components/solid@0.1.10", "", { "dependencies": { "animejs": "^4.0.2", "solid-js": "^1.9.5", "tailwind-variants": "^1.0.0" } }, "sha512-dTD8Q++kIXEyKKFCOvdS5DylbUL94T0A+1kMPVMDuAKAavnWVyRkcwV6yh5Ih2fTXGyWLhnSi1jeM0eN1FADZg=="],
"@m3-components/solid": ["@m3-components/solid@0.1.17", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.3", "animejs": "^4.0.2", "solid-js": "^1.9.5", "tailwind-variants": "^1.0.0" } }, "sha512-KXNovjVIl0Tr0WhASn71t07DFO98S2VyDMa0453Q6Z4CA8FA91h65uaGkMxL4r9SmUdMOraxMeKNG8GJgV/bZQ=="],
"@mapbox/node-pre-gyp": ["@mapbox/node-pre-gyp@2.0.0", "", { "dependencies": { "consola": "^3.2.3", "detect-libc": "^2.0.0", "https-proxy-agent": "^7.0.5", "node-fetch": "^2.6.7", "nopt": "^8.0.0", "semver": "^7.5.3", "tar": "^7.4.0" }, "bin": { "node-pre-gyp": "bin/node-pre-gyp" } }, "sha512-llMXd39jtP0HpQLVI37Bf1m2ADlEb35GYSh1SDSLsBhR+5iCxiNGlT31yqbNtVHygHAtMy6dWFERpU2JgufhPg=="],
@ -1498,8 +1498,6 @@
"@isaacs/cliui/wrap-ansi": ["wrap-ansi@8.1.0", "", { "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } }, "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ=="],
"@m3-components/solid/animejs": ["animejs@4.1.1", "", {}, "sha512-IQiV/Mxg5/ViKlRPGUYcZzj9Me6zQRTQQOTtNTXEEVY4VjeokGjGxpKjaBf7nO+q/kgaqC2HKfUlawGvvnrPwQ=="],
"@mapbox/node-pre-gyp/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
"@netlify/zip-it-and-ship-it/@netlify/serverless-functions-api": ["@netlify/serverless-functions-api@2.1.2", "", {}, "sha512-uEFA0LAcBGd3+fgDSLkTTsrgyooKqu8mN/qA+F/COS2A7NFWRcLFnjVKH/xZhxq+oQkrSa+XPS9qj2wgQosiQw=="],

2
packages/solid/package.json
View File

@ -8,7 +8,7 @@
"version": "vinxi version"
},
"dependencies": {
"@m3-components/solid": "0.1.10",
"@m3-components/solid": "0.1.17",
"@solid-primitives/media": "^2.3.3",
"@solidjs/meta": "^0.29.4",
"@solidjs/router": "^0.15.3",

44
packages/solid/src/components/shell/Layout.tsx
View File

@ -1,22 +1,24 @@
import { tv } from "tailwind-variants";
import { navigationExpanded, NavigationMobile, NavigationRegion } from "./Navigation";
import { NavigationMobile } from "./Navigation";
import { DivProps } from "../common";
import { Component } from "solid-js";
import { BeforeLeaveEventArgs, useBeforeLeave } from "@solidjs/router";
import { refreshTab } from "~/app";
import LogoLight from "/icons/zh/appbar_desktop_light.svg";
import LogoDark from "/icons/zh/appbar_desktop_dark.svg";
import { DynamicImage } from "~/components/utils/DynamicImage";
import {
AppBar,
AppBarLeadingElement,
AppBarSearchBox,
AppBarSearchContainer,
AppBarTrailingElement,
AppBarTrailingElementGroup,
IconButton
} from "@m3-components/solid";
export const BodyRegion: Component<DivProps> = (props) => {
const bodyStyle = tv({
base: "relative",
variants: {
open: {
true: "px-5 lg:left-55 lg:pr-55",
false: "px-5 lg:left-24 lg:pr-24"
}
}
});
return (
<div class={bodyStyle({ open: navigationExpanded() })} {...props}>
<div class="pt-12 px-4" {...props}>
{props.children}
</div>
);
@ -36,11 +38,21 @@ export const Layout: Component<LayoutProps> = (props) => {
});
return (
<div class="relatve w-screen min-h-screen">
<NavigationRegion lang={props.lang} />
<NavigationMobile lang={props.lang} />
<BodyRegion>
{props.children}
</BodyRegion>
<AppBar class="hidden lg:flex h-20 xl:h-22 2xl:h-24" variant="search">
<AppBarLeadingElement class="h-full grow shrink basis-0">
<DynamicImage class="lg:block h-full" darkSrc={LogoDark} lightSrc={LogoLight} />
</AppBarLeadingElement>
<AppBarSearchContainer>
<AppBarSearchBox class="mx-auto text-center" placeholder="搜索" />
</AppBarSearchContainer>
<AppBarTrailingElementGroup class="h-full grow shrink basis-0">
<AppBarTrailingElement>
<IconButton></IconButton>
</AppBarTrailingElement>
</AppBarTrailingElementGroup>
</AppBar>
<BodyRegion>{props.children}</BodyRegion>
</div>
);
};

38
packages/solid/src/components/shell/Navigation.tsx
View File

@ -12,7 +12,7 @@ import {
AppBarSearchBox,
AppBarTrailingElementGroup,
AppBarTrailingElement,
IconButton
IconButton, AppBarSearchContainer
} from "@m3-components/solid";
import { A } from "@solidjs/router";
import { AlbumIcon } from "~/components/icons/Album";
@ -119,7 +119,9 @@ export const NavigationMobile: Component<{ lang?: "zh" | "en" }> = (props) => {
<AppBarLeadingElement>
<NavigationRailMenu class="invisible" />
</AppBarLeadingElement>
<AppBarSearchBox placeholder="搜索" />
<AppBarSearchContainer class="w-[calc(100%-7.9rem)]">
<AppBarSearchBox placeholder="搜索" />
</AppBarSearchContainer>
<AppBarTrailingElementGroup>
<AppBarTrailingElement>
<IconButton></IconButton>
@ -128,7 +130,7 @@ export const NavigationMobile: Component<{ lang?: "zh" | "en" }> = (props) => {
</AppBar>
<Portal mount={document.getElementById("modal") || undefined}>
<div
class="fixed lg:invisible top-0 left-0 h-full z-50"
class="fixed lg:hidden top-0 left-0 h-full z-50"
style="transform: translateX(-300px);"
ref={(el) => {
setEl(el);
@ -151,6 +153,7 @@ export const NavigationMobile: Component<{ lang?: "zh" | "en" }> = (props) => {
label={action.label}
icon={action.icon}
onClick={() => {
setNavigationExpanded(false);
setActiveTab(index);
}}
/>
@ -163,31 +166,4 @@ export const NavigationMobile: Component<{ lang?: "zh" | "en" }> = (props) => {
</Portal>
</>
);
};
export const NavigationRegion: Component<{ lang?: "zh" | "en" }> = (props) => {
return (
<NavigationRail class="hidden lg:flex top-0 bg-surface-container" width={220} expanded={navigationExpanded()}>
<NavigationRailMenu class="lg:flex left-7" onClick={() => setNavigationExpanded(!navigationExpanded())} />
<NavigationRailFAB text={searchT[props.lang || "zh"]} color="primary">
<SearchIcon />
</NavigationRailFAB>
<NavigationRailActions>
<For each={props.lang == "en" ? actionsEn : actions}>
{(action, index) => (
<A href={action.href} class="clear">
<NavigationRailAction
activated={activeTab() == index()}
label={action.label}
icon={action.icon}
onClick={() => {
setActiveTab(index);
}}
/>
</A>
)}
</For>
</NavigationRailActions>
</NavigationRail>
);
};
};

42
packages/solid/src/components/song/TabSwitcher.tsx Normal file
View File

@ -0,0 +1,42 @@
import { Button } from "@m3-components/solid";
import { A } from "@solidjs/router";
import { tv } from "tailwind-variants";
import { navigationExpanded } from "~/components/shell/Navigation";
export const TabSwitcher = () => {
const tabsContainerStyle = tv({
base: "w-full lg:w-48 gap-4 flex lg:flex-col items-center",
variants: {
expanded: {
true: "lg:self-start xl:self-center",
false: "self-center"
}
}
});
return (
<nav class="flex flex-col lg:h-screen lg:px-6 lg:pt-12">
<div class={tabsContainerStyle({ expanded: navigationExpanded() })}>
<A class="w-full" href="../info">
<Button class="w-full" variant="filled">
信息
</Button>
</A>
<A class="w-full" href="../lyrics">
<Button class="w-full" variant="outlined">
歌词
</Button>
</A>
<A class="w-full" href="../analytics">
<Button class="w-full" variant="outlined">
数据
</Button>
</A>
<A class="w-full" href="../relations">
<Button class="w-full" variant="outlined">
相关
</Button>
</A>
</div>
</nav>
);
};

18
packages/solid/src/routes/song/[id]/info.tsx
View File

@ -1,8 +1,7 @@
import { Layout } from "~/components/shell/Layout";
import { Card, CardContent, CardMedia, Typography } from "@m3-components/solid";
import LogoLight from "/icons/zh/appbar_desktop_light.svg";
import LogoDark from "/icons/zh/appbar_desktop_dark.svg";
import { DynamicImage } from "~/components/utils/DynamicImage";
import { TabSwitcher } from "~/components/song/TabSwitcher";
export default function Info() {
return (
@ -12,10 +11,8 @@ export default function Info() {
class="w-full sm:w-120 sm:mx-auto lg:w-full lg:grid lg:grid-cols-[1fr_560px_minmax(300px,_1fr)]
xl:grid-cols-[1fr_648px_1fr]"
>
<nav class="hidden opacity-0 pointer-events-none lg:block xl:opacity-100 xl:pointer-events-auto pt-4">
<DynamicImage class="hidden xl:block 2xl:w-8/9" darkSrc={LogoDark} lightSrc={LogoLight} />
</nav>
<main class="mt-14 lg:mt-8 sm:pl-6 lg:pl-0">
<nav class="hidden opacity-0 pointer-events-none lg:block xl:opacity-100 xl:pointer-events-auto pt-4"></nav>
<main>
<Card variant="outlined" class="w-full">
<CardMedia
round={false}
@ -43,6 +40,9 @@ export default function Info() {
</div>
</CardContent>
</Card>
<div class="my-6 lg:hidden">
<TabSwitcher />
</div>
<article class="mt-6">
<Typography.Headline variant="medium">简介</Typography.Headline>
<Typography.Body class="mt-2" variant="large">
@ -57,7 +57,9 @@ export default function Info() {
</Typography.Body>
</article>
</main>
<nav></nav>
<div class="hidden lg:block">
<TabSwitcher />
</div>
</div>
</Layout>
);