From 1959046184748c0712840b7d908d008ffac9bae6 Mon Sep 17 00:00:00 2001 From: alikia2x Date: Wed, 6 Aug 2025 00:42:30 +0800 Subject: [PATCH] ref: rebuild the entire layout, removed navigation rail for desktop TODO: (for desktop view): improve layout for tabs in right side, add some fixed links & contextual actions on the left side --- packages/solid/bun.lock | 6 +-- packages/solid/package.json | 2 +- .../solid/src/components/shell/Layout.tsx | 44 ++++++++++++------- .../solid/src/components/shell/Navigation.tsx | 38 +++------------- .../solid/src/components/song/TabSwitcher.tsx | 42 ++++++++++++++++++ packages/solid/src/routes/song/[id]/info.tsx | 18 ++++---- 6 files changed, 90 insertions(+), 60 deletions(-) create mode 100644 packages/solid/src/components/song/TabSwitcher.tsx diff --git a/packages/solid/bun.lock b/packages/solid/bun.lock index 2134ed0..ad6e313 100644 --- a/packages/solid/bun.lock +++ b/packages/solid/bun.lock @@ -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=="], diff --git a/packages/solid/package.json b/packages/solid/package.json index e5594ef..b578d64 100644 --- a/packages/solid/package.json +++ b/packages/solid/package.json @@ -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", diff --git a/packages/solid/src/components/shell/Layout.tsx b/packages/solid/src/components/shell/Layout.tsx index 458bfcb..2dc68cb 100644 --- a/packages/solid/src/components/shell/Layout.tsx +++ b/packages/solid/src/components/shell/Layout.tsx @@ -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 = (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 ( -
+
{props.children}
); @@ -36,11 +38,21 @@ export const Layout: Component = (props) => { }); return (
- - - {props.children} - + + {props.children}
); }; diff --git a/packages/solid/src/components/shell/Navigation.tsx b/packages/solid/src/components/shell/Navigation.tsx index 5f790d2..3721343 100644 --- a/packages/solid/src/components/shell/Navigation.tsx +++ b/packages/solid/src/components/shell/Navigation.tsx @@ -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) => { - + + + @@ -128,7 +130,7 @@ export const NavigationMobile: Component<{ lang?: "zh" | "en" }> = (props) => {
{ 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) => { ); -}; - -export const NavigationRegion: Component<{ lang?: "zh" | "en" }> = (props) => { - return ( - - ); -}; +}; \ No newline at end of file diff --git a/packages/solid/src/components/song/TabSwitcher.tsx b/packages/solid/src/components/song/TabSwitcher.tsx new file mode 100644 index 0000000..7026ae9 --- /dev/null +++ b/packages/solid/src/components/song/TabSwitcher.tsx @@ -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 ( + + ); +}; diff --git a/packages/solid/src/routes/song/[id]/info.tsx b/packages/solid/src/routes/song/[id]/info.tsx index 8d6e163..c172caf 100644 --- a/packages/solid/src/routes/song/[id]/info.tsx +++ b/packages/solid/src/routes/song/[id]/info.tsx @@ -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]" > - -
+ +
+
+ +
简介 @@ -57,7 +57,9 @@ export default function Info() {
- +
);