From 13e58a85390fc17fe1b5c5de51493f093f96610b Mon Sep 17 00:00:00 2001 From: alikia2x Date: Sun, 3 Aug 2025 02:01:08 +0800 Subject: [PATCH] add: new layout of the song info page, switched global font to HarmonyOS Sans. --- .idea/cvsa.iml | 4 + .idea/prettier.xml | 6 + packages/solid/bun.lock | 4 +- packages/solid/package.json | 2 +- packages/solid/src/app.css | 14 +- packages/solid/src/app.tsx | 10 +- .../solid/src/components/shell/Layout.tsx | 17 +- .../solid/src/components/shell/Navigation.tsx | 129 ++++- packages/solid/src/entry-server.tsx | 1 + .../src/fonts/InterFont/Inter-Black.woff2 | 3 - .../fonts/InterFont/Inter-BlackItalic.woff2 | 3 - .../src/fonts/InterFont/Inter-Bold.woff2 | 3 - .../fonts/InterFont/Inter-BoldItalic.woff2 | 3 - .../src/fonts/InterFont/Inter-ExtraBold.woff2 | 3 - .../InterFont/Inter-ExtraBoldItalic.woff2 | 3 - .../fonts/InterFont/Inter-ExtraLight.woff2 | 3 - .../InterFont/Inter-ExtraLightItalic.woff2 | 3 - .../src/fonts/InterFont/Inter-Italic.woff2 | 3 - .../src/fonts/InterFont/Inter-Light.woff2 | 3 - .../fonts/InterFont/Inter-LightItalic.woff2 | 3 - .../src/fonts/InterFont/Inter-Medium.woff2 | 3 - .../fonts/InterFont/Inter-MediumItalic.woff2 | 3 - .../src/fonts/InterFont/Inter-Regular.woff2 | 3 - .../src/fonts/InterFont/Inter-SemiBold.woff2 | 3 - .../InterFont/Inter-SemiBoldItalic.woff2 | 3 - .../src/fonts/InterFont/Inter-Thin.woff2 | 3 - .../fonts/InterFont/Inter-ThinItalic.woff2 | 3 - packages/solid/src/fonts/InterFont/Inter.css | 449 ------------------ .../fonts/InterFont/InterDisplay-Black.woff2 | 3 - .../InterFont/InterDisplay-BlackItalic.woff2 | 3 - .../fonts/InterFont/InterDisplay-Bold.woff2 | 3 - .../InterFont/InterDisplay-BoldItalic.woff2 | 3 - .../InterFont/InterDisplay-ExtraBold.woff2 | 3 - .../InterDisplay-ExtraBoldItalic.woff2 | 3 - .../InterFont/InterDisplay-ExtraLight.woff2 | 3 - .../InterDisplay-ExtraLightItalic.woff2 | 3 - .../fonts/InterFont/InterDisplay-Italic.woff2 | 3 - .../fonts/InterFont/InterDisplay-Light.woff2 | 3 - .../InterFont/InterDisplay-LightItalic.woff2 | 3 - .../fonts/InterFont/InterDisplay-Medium.woff2 | 3 - .../InterFont/InterDisplay-MediumItalic.woff2 | 3 - .../InterFont/InterDisplay-Regular.woff2 | 3 - .../InterFont/InterDisplay-SemiBold.woff2 | 3 - .../InterDisplay-SemiBoldItalic.woff2 | 3 - .../fonts/InterFont/InterDisplay-Thin.woff2 | 3 - .../InterFont/InterDisplay-ThinItalic.woff2 | 3 - .../InterFont/InterVariable-Italic.woff2 | 3 - .../src/fonts/InterFont/InterVariable.woff2 | 3 - .../solid/src/fonts/MiSans/MiSans VF.woff2 | 3 - .../solid/src/fonts/MiSans/MiSans-Bold.woff2 | 3 - .../src/fonts/MiSans/MiSans-Demibold.woff2 | 3 - .../src/fonts/MiSans/MiSans-ExtraLight.woff2 | 3 - .../solid/src/fonts/MiSans/MiSans-Heavy.woff2 | 3 - .../solid/src/fonts/MiSans/MiSans-Light.woff2 | 3 - .../src/fonts/MiSans/MiSans-Medium.woff2 | 3 - .../src/fonts/MiSans/MiSans-Normal.woff2 | 3 - .../src/fonts/MiSans/MiSans-Regular.woff2 | 3 - .../src/fonts/MiSans/MiSans-Semibold.woff2 | 3 - .../solid/src/fonts/MiSans/MiSans-Thin.woff2 | 3 - packages/solid/src/fonts/MiSans/MiSans.css | 87 ---- .../solid/src/routes/en/song/[id]/info.tsx | 75 +++ packages/solid/src/routes/index.tsx | 2 +- packages/solid/src/routes/song/[id]/_info.tsx | 209 ++++++++ packages/solid/src/routes/song/[id]/info.tsx | 252 ++-------- 64 files changed, 483 insertions(+), 925 deletions(-) create mode 100644 .idea/prettier.xml delete mode 100644 packages/solid/src/fonts/InterFont/Inter-Black.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-BlackItalic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-Bold.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-BoldItalic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-ExtraBold.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-ExtraBoldItalic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-ExtraLight.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-ExtraLightItalic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-Italic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-Light.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-LightItalic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-Medium.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-MediumItalic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-Regular.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-SemiBold.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-SemiBoldItalic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-Thin.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter-ThinItalic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/Inter.css delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-Black.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-BlackItalic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-Bold.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-BoldItalic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-ExtraBold.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-ExtraBoldItalic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-ExtraLight.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-ExtraLightItalic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-Italic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-Light.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-LightItalic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-Medium.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-MediumItalic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-Regular.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-SemiBold.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-SemiBoldItalic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-Thin.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterDisplay-ThinItalic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterVariable-Italic.woff2 delete mode 100644 packages/solid/src/fonts/InterFont/InterVariable.woff2 delete mode 100644 packages/solid/src/fonts/MiSans/MiSans VF.woff2 delete mode 100644 packages/solid/src/fonts/MiSans/MiSans-Bold.woff2 delete mode 100644 packages/solid/src/fonts/MiSans/MiSans-Demibold.woff2 delete mode 100644 packages/solid/src/fonts/MiSans/MiSans-ExtraLight.woff2 delete mode 100644 packages/solid/src/fonts/MiSans/MiSans-Heavy.woff2 delete mode 100644 packages/solid/src/fonts/MiSans/MiSans-Light.woff2 delete mode 100644 packages/solid/src/fonts/MiSans/MiSans-Medium.woff2 delete mode 100644 packages/solid/src/fonts/MiSans/MiSans-Normal.woff2 delete mode 100644 packages/solid/src/fonts/MiSans/MiSans-Regular.woff2 delete mode 100644 packages/solid/src/fonts/MiSans/MiSans-Semibold.woff2 delete mode 100644 packages/solid/src/fonts/MiSans/MiSans-Thin.woff2 delete mode 100644 packages/solid/src/fonts/MiSans/MiSans.css create mode 100644 packages/solid/src/routes/en/song/[id]/info.tsx create mode 100644 packages/solid/src/routes/song/[id]/_info.tsx diff --git a/.idea/cvsa.iml b/.idea/cvsa.iml index 56a6e05..3615dc5 100644 --- a/.idea/cvsa.iml +++ b/.idea/cvsa.iml @@ -32,6 +32,10 @@ + + + + diff --git a/.idea/prettier.xml b/.idea/prettier.xml new file mode 100644 index 0000000..b0c1c68 --- /dev/null +++ b/.idea/prettier.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/packages/solid/bun.lock b/packages/solid/bun.lock index 85593d5..0557b4d 100644 --- a/packages/solid/bun.lock +++ b/packages/solid/bun.lock @@ -4,7 +4,7 @@ "": { "name": "example-basic", "dependencies": { - "@m3-components/solid": "0.1.9", + "@m3-components/solid": "0.1.10", "@solidjs/meta": "^0.29.4", "@solidjs/router": "^0.15.3", "@solidjs/start": "^1.1.7", @@ -182,7 +182,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.9", "", { "dependencies": { "animejs": "^4.0.2", "solid-js": "^1.9.5", "tailwind-variants": "^1.0.0" } }, "sha512-gM+qx6C1FEd+dzEeLcpJspKx9kg2L2JyB/BCU8t0ivM7tTHXYVkR5ZHp+gMx/PdWu/wXLGEF6EOreUtnvUs2xg=="], + "@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=="], "@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=="], diff --git a/packages/solid/package.json b/packages/solid/package.json index e0ded9a..15ea7c8 100644 --- a/packages/solid/package.json +++ b/packages/solid/package.json @@ -8,7 +8,7 @@ "version": "vinxi version" }, "dependencies": { - "@m3-components/solid": "0.1.9", + "@m3-components/solid": "0.1.10", "@solidjs/meta": "^0.29.4", "@solidjs/router": "^0.15.3", "@solidjs/start": "^1.1.7", diff --git a/packages/solid/src/app.css b/packages/solid/src/app.css index 1a74d62..0c32a1c 100644 --- a/packages/solid/src/app.css +++ b/packages/solid/src/app.css @@ -1,5 +1,4 @@ -@import url("./fonts/InterFont/Inter.css"); -@import url("./fonts/MiSans/MiSans.css"); +@import url("https://assets.projectcvsa.com/hm-sans/index.css"); @import "tailwindcss"; @@ -132,8 +131,7 @@ a:not(.clear) { } :root { - font-family: "Inter", "MiSans", sans-serif; - font-weight: 400; + font-family: "HarmonyOS Sans SC", sans-serif; @apply bg-surface text-on-surface; } @@ -142,11 +140,3 @@ a:not(.clear) { -webkit-appearance: none; appearance: none; } - -@supports (font-variation-settings: normal) { - :root { - font-family: "Inter Variable", "MiSans VF", sans-serif; - font-optical-sizing: auto; - font-weight: 330; - } -} diff --git a/packages/solid/src/app.tsx b/packages/solid/src/app.tsx index ac1d4d6..6437e76 100644 --- a/packages/solid/src/app.tsx +++ b/packages/solid/src/app.tsx @@ -4,17 +4,9 @@ import { FileRoutes } from "@solidjs/start/router"; import { onMount, Suspense } from "solid-js"; import "./app.css"; import "@m3-components/solid/index.css"; -import { setActiveTab } from "./components/shell/Navigation"; +import { setActiveTab, tabMap } from "./components/shell/Navigation"; import { minimatch } from "minimatch"; -const tabMap = { - "/": 0, - "/song*": 1, - "/song/**/*": 1, - "/albums": 2, - "/album/**/*": 2 -}; - export const refreshTab = (path: string) => { for (const [key, value] of Object.entries(tabMap)) { if (!minimatch(path, key)) continue; diff --git a/packages/solid/src/components/shell/Layout.tsx b/packages/solid/src/components/shell/Layout.tsx index b4399a8..1d7a9d5 100644 --- a/packages/solid/src/components/shell/Layout.tsx +++ b/packages/solid/src/components/shell/Layout.tsx @@ -1,5 +1,5 @@ import { tv } from "tailwind-variants"; -import { navigationExpanded, NavigationRegion } from "./Navigation"; +import { navigationExpanded, NavigationMobile, NavigationRegion } from "./Navigation"; import { DivProps } from "../common"; import { Component } from "solid-js"; import { BeforeLeaveEventArgs, useBeforeLeave } from "@solidjs/router"; @@ -7,11 +7,11 @@ import { refreshTab } from "~/app"; export const BodyRegion: Component = (props) => { const bodyStyle = tv({ - base: "relative px-6 pt-20", + base: "relative", variants: { open: { - true: "left-55 pr-55", - false: "left-24 pr-24" + true: "px-5 md:left-55 md:pr-55", + false: "px-5 md:left-24 md:pr-24" } } }); @@ -22,7 +22,11 @@ export const BodyRegion: Component = (props) => { ); }; -export const Layout: Component = (props) => { +interface LayoutProps extends DivProps { + lang?: "zh" | "en"; +} + +export const Layout: Component = (props) => { useBeforeLeave((e: BeforeLeaveEventArgs) => { if (typeof e.to === "number") { refreshTab(e.to.toString()); @@ -32,7 +36,8 @@ export const Layout: Component = (props) => { }); return (
- + + {props.children} diff --git a/packages/solid/src/components/shell/Navigation.tsx b/packages/solid/src/components/shell/Navigation.tsx index cb47240..3eb1898 100644 --- a/packages/solid/src/components/shell/Navigation.tsx +++ b/packages/solid/src/components/shell/Navigation.tsx @@ -1,4 +1,4 @@ -import { createSignal, For } from "solid-js"; +import { Component, createSignal, For } from "solid-js"; import { HomeIcon } from "../icons/Home"; import { MusicIcon } from "../icons/Music"; import { @@ -6,41 +6,148 @@ import { NavigationRail, NavigationRailAction, NavigationRailActions, - NavigationRailMenu + NavigationRailMenu, + AppBar, + AppBarLeadingElement, + AppBarSearchBox, + AppBarTrailingElementGroup, + AppBarTrailingElement, + IconButton } from "@m3-components/solid"; import { A } from "@solidjs/router"; import { AlbumIcon } from "~/components/icons/Album"; import { SearchIcon } from "../icons/Search"; +import { Portal } from "solid-js/web"; export const [activeTab, setActiveTab] = createSignal(-1); export const [navigationExpanded, setNavigationExpanded] = createSignal(false); -export const actions = [ + +interface Action { + icon: Component; + label: string; + href: string; +} + +export const actions: Action[] = [ { - icon: , + icon: HomeIcon, label: "主页", href: "/" }, { - icon: , + icon: MusicIcon, label: "歌曲", href: "/songs" }, { - icon: , + icon: AlbumIcon, label: "专辑", href: "/albums" } ]; -export const NavigationRegion = () => { +export const actionsEn: Action[] = [ + { + icon: HomeIcon, + label: "Home", + href: "/en/" + }, + { + icon: MusicIcon, + label: "Songs", + href: "/en/songs" + }, + { + icon: AlbumIcon, + label: "Albums", + href: "/en/albums" + } +]; + +export const tabMap = { + "/": 0, + "/song*": 1, + "/song/**/*": 1, + "/albums": 2, + "/album/**/*": 2, + "/en/": 0, + "/en/songs": 1, + "/en/song*": 1, + "/en/song/**/*": 1, + "/en/albums": 2, + "/en/album/**/*": 2 +}; + +const searchT = { + zh: "搜索", + en: "Search" +}; + +export const NavigationMobile: Component<{ lang?: "zh" | "en" }> = (props) => { + let el: HTMLDivElement | undefined; return ( - - setNavigationExpanded(!navigationExpanded())} /> - + <> + setNavigationExpanded(!navigationExpanded())} + /> + + + setNavigationExpanded(!navigationExpanded())} + /> + + + + + + + + + +
+ + + + + + + + {(action, index) => ( + + { + setActiveTab(index); + }} + /> + + )} + + + +
+ + + ); +}; + +export const NavigationRegion: Component<{ lang?: "zh" | "en" }> = (props) => { + return ( +
- + + ); }