alikia2x/cvsa
1
0
Fork 0
Code

add: a logo that respond to color scheme changes

Browse Source 
modified the layout
fixed the navigation rail on mobile
This commit is contained in:
alikia2x (寒寒) 2025-08-03 02:23:17 +08:00
parent 7cdd42054a
commit 3dd5e77d39
7 changed files with 92 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/solid/bun.lock
View File

@ -5,11 +5,13 @@
"name": "example-basic",
"dependencies": {
"@m3-components/solid": "0.1.10",
"@solid-primitives/media": "^2.3.3",
"@solidjs/meta": "^0.29.4",
"@solidjs/router": "^0.15.3",
"@solidjs/start": "^1.1.7",
"@tailwindcss/vite": "^4.1.11",
"@types/luxon": "^3.7.1",
"animejs": "^4.1.2",
"axios": "^1.11.0",
"dotenv": "^16.6.1",
"drizzle-orm": "^0.44.4",
@ -320,6 +322,16 @@
"@sindresorhus/merge-streams": ["@sindresorhus/merge-streams@2.3.0", "", {}, "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg=="],
"@solid-primitives/event-listener": ["@solid-primitives/event-listener@2.4.3", "", { "dependencies": { "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-h4VqkYFv6Gf+L7SQj+Y6puigL/5DIi7x5q07VZET7AWcS+9/G3WfIE9WheniHWJs51OEkRB43w6lDys5YeFceg=="],
"@solid-primitives/media": ["@solid-primitives/media@2.3.3", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.3", "@solid-primitives/rootless": "^1.5.2", "@solid-primitives/static-store": "^0.1.2", "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-hQ4hLOGvfbugQi5Eu1BFWAIJGIAzztq9x0h02xgBGl2l0Jaa3h7tg6bz5tV1NSuNYVGio4rPoa7zVQQLkkx9dA=="],
"@solid-primitives/rootless": ["@solid-primitives/rootless@1.5.2", "", { "dependencies": { "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-9HULb0QAzL2r47CCad0M+NKFtQ+LrGGNHZfteX/ThdGvKIg2o2GYhBooZubTCd/RTu2l2+Nw4s+dEfiDGvdrrQ=="],
"@solid-primitives/static-store": ["@solid-primitives/static-store@0.1.2", "", { "dependencies": { "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-ReK+5O38lJ7fT+L6mUFvUr6igFwHBESZF+2Ug842s7fvlVeBdIVEdTCErygff6w7uR6+jrr7J8jQo+cYrEq4Iw=="],
"@solid-primitives/utils": ["@solid-primitives/utils@6.3.2", "", { "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-hZ/M/qr25QOCcwDPOHtGjxTD8w2mNyVAYvcfgwzBHq2RwNqHNdDNsMZYap20+ruRwW4A3Cdkczyoz0TSxLCAPQ=="],
"@solidjs/meta": ["@solidjs/meta@0.29.4", "", { "peerDependencies": { "solid-js": ">=1.8.4" } }, "sha512-zdIWBGpR9zGx1p1bzIPqF5Gs+Ks/BH8R6fWhmUa/dcK1L2rUC8BAcZJzNRYBQv74kScf1TSOs0EY//Vd/I0V8g=="],
"@solidjs/router": ["@solidjs/router@0.15.3", "", { "peerDependencies": { "solid-js": "^1.8.6" } }, "sha512-iEbW8UKok2Oio7o6Y4VTzLj+KFCmQPGEpm1fS3xixwFBdclFVBvaQVeibl1jys4cujfAK5Kn6+uG2uBm3lxOMw=="],
@ -454,7 +466,7 @@
"agent-base": ["agent-base@7.1.3", "", {}, "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw=="],
"animejs": ["animejs@4.1.1", "", {}, "sha512-IQiV/Mxg5/ViKlRPGUYcZzj9Me6zQRTQQOTtNTXEEVY4VjeokGjGxpKjaBf7nO+q/kgaqC2HKfUlawGvvnrPwQ=="],
"animejs": ["animejs@4.1.2", "", {}, "sha512-QojQzHzN4ZCOGk4Seir5CWPHGKFPpMAsen3KEj/BHsIKDceH0xKd3FBWflyKiNefKG2fn3+ofpY9jD/UXhpY6A=="],
"ansi-align": ["ansi-align@3.0.1", "", { "dependencies": { "string-width": "^4.1.0" } }, "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w=="],
@ -1486,6 +1498,8 @@
"@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

@ -9,11 +9,13 @@
},
"dependencies": {
"@m3-components/solid": "0.1.10",
"@solid-primitives/media": "^2.3.3",
"@solidjs/meta": "^0.29.4",
"@solidjs/router": "^0.15.3",
"@solidjs/start": "^1.1.7",
"@tailwindcss/vite": "^4.1.11",
"@types/luxon": "^3.7.1",
"animejs": "^4.1.2",
"axios": "^1.11.0",
"dotenv": "^16.6.1",
"drizzle-orm": "^0.44.4",

0
packages/solid/public/icons/zh/appbar_desktop-light.svg → packages/solid/public/icons/zh/appbar_desktop_light.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

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

@ -10,8 +10,8 @@ export const BodyRegion: Component<DivProps> = (props) => {
base: "relative",
variants: {
open: {
true: "px-5 md:left-55 md:pr-55",
false: "px-5 md:left-24 md:pr-24"
true: "px-5 lg:left-55 lg:pr-55",
false: "px-5 lg:left-24 lg:pr-24"
}
}
});

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

@ -1,4 +1,4 @@
import { Component, createSignal, For } from "solid-js";
import { Component, createEffect, createMemo, createSignal, For, on, onMount } from "solid-js";
import { HomeIcon } from "../icons/Home";
import { MusicIcon } from "../icons/Music";
import {
@ -18,6 +18,8 @@ import { A } from "@solidjs/router";
import { AlbumIcon } from "~/components/icons/Album";
import { SearchIcon } from "../icons/Search";
import { Portal } from "solid-js/web";
import { animate, createTimer, utils } from "animejs";
import { tv } from "tailwind-variants";
export const [activeTab, setActiveTab] = createSignal(-1);
export const [navigationExpanded, setNavigationExpanded] = createSignal(false);
@ -84,19 +86,38 @@ const searchT = {
};
export const NavigationMobile: Component<{ lang?: "zh" | "en" }> = (props) => {
let el: HTMLDivElement | undefined;
const [el, setEl] = createSignal<HTMLElement | null>(null);
createEffect(() => {
if (!el) return;
if (navigationExpanded()) {
animate(el()!, {
x: 0,
duration: 500,
z: 100,
ease: "cubicBezier(0.27, 1.06, 0.18, 1.00)"
});
} else {
animate(el()!, {
x: -340,
duration: 500,
z: 0,
ease: "cubicBezier(0.27, 1.06, 0.18, 1.00)"
});
}
});
return (
<>
<NavigationRailMenu
class="top-0 left-0 flex fixed z-100 md:hidden"
onClick={() => setNavigationExpanded(!navigationExpanded())}
class="top-3 left-4 fixed z-100 bg-surface-container/60 backdrop-blur-md lg:hidden"
onClick={() => {
setNavigationExpanded(!navigationExpanded());
}}
/>
<AppBar class="md:hidden" variant="search">
<AppBar class="lg:hidden" variant="search">
<AppBarLeadingElement>
<NavigationRailMenu
class="flex fixed z-100 md:hidden"
onClick={() => setNavigationExpanded(!navigationExpanded())}
/>
<NavigationRailMenu class="invisible" />
</AppBarLeadingElement>
<AppBarSearchBox placeholder="搜索" />
<AppBarTrailingElementGroup>
@ -106,14 +127,19 @@ export const NavigationMobile: Component<{ lang?: "zh" | "en" }> = (props) => {
</AppBarTrailingElementGroup>
</AppBar>
<Portal mount={document.getElementById("modal") || undefined}>
<div class="fixed md:hidden top-0 left-0 h-full z-50">
<div
class="fixed lg:invisible top-0 left-0 h-full z-50"
style="transform: translateX(-300px);"
ref={(el) => {
setEl(el);
}}
>
<NavigationRail
class="md:hidden top-0 bg-surface-container rounded-r-2xl shadow-shadow shadow-2xl"
width={220}
class="top-0 bg-surface-container rounded-r-2xl shadow-shadow shadow-2xl"
width={256}
expanded={true}
>
<NavigationRailMenu class="opacity-0 pointer-events-none" />
<NavigationRailFAB text={searchT[props.lang || "zh"]} color="primary">
<NavigationRailFAB text={searchT[props.lang || "zh"]} class="pr-6 mt-6" color="primary">
<SearchIcon />
</NavigationRailFAB>
<NavigationRailActions>
@ -141,8 +167,8 @@ export const NavigationMobile: Component<{ lang?: "zh" | "en" }> = (props) => {
export const NavigationRegion: Component<{ lang?: "zh" | "en" }> = (props) => {
return (
<NavigationRail class="hidden md:flex top-0 bg-surface-container" width={220} expanded={navigationExpanded()}>
<NavigationRailMenu class="md:flex left-7" onClick={() => setNavigationExpanded(!navigationExpanded())} />
<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>

22
packages/solid/src/components/utils/DynamicImage.tsx Normal file
View File

@ -0,0 +1,22 @@
import { createPrefersDark } from "@solid-primitives/media";
import { Component, JSX, Match, splitProps, Switch } from "solid-js";
interface Props extends JSX.ImgHTMLAttributes<HTMLImageElement> {
lightSrc: string;
darkSrc: string;
}
export const DynamicImage: Component<Props> = (props) => {
const isDark = createPrefersDark();
const [v, rest] = splitProps(props, ["lightSrc", "darkSrc", "alt"]);
return (
<Switch>
<Match when={isDark()}>
<img src={v.darkSrc} alt={v.alt} {...rest} />
</Match>
<Match when={!isDark()}>
<img src={v.lightSrc} alt={v.alt} {...rest} />
</Match>
</Switch>
)
}

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

@ -1,16 +1,21 @@
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";
export default function Info() {
return (
<Layout>
<title></title>
<div
class="w-full md:grid md:grid-cols-[1fr_540px_minmax(200px,_1fr)] lg:grid-cols-[1fr_576px_1fr]
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></nav>
<main class="mt-14 lg:mt-8 md:pl-6 lg:pl-0">
<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">
<Card variant="outlined" class="w-full">
<CardMedia
round={false}
@ -52,9 +57,7 @@ export default function Info() {
</Typography.Body>
</article>
</main>
<nav>
</nav>
<nav></nav>
</div>
</Layout>
);