From 36146aebf6347c9b8769c9712d819a18acf1f6a0 Mon Sep 17 00:00:00 2001 From: alikia2x Date: Wed, 30 Jul 2025 00:13:47 +0800 Subject: [PATCH] update: data fetching, fixed some bugs about navigation rail --- packages/solid/bun.lock | 4 +-- packages/solid/package.json | 2 +- packages/solid/src/app.tsx | 18 ++++++---- .../solid/src/components/icons/Search.tsx | 10 ++++++ .../solid/src/components/shell/Layout.tsx | 19 +++++++++-- .../solid/src/components/shell/Navigation.tsx | 12 ++++++- packages/solid/src/routes/index.tsx | 33 ++++++++++++++++++- packages/solid/src/routes/songs/index.tsx | 4 +-- 8 files changed, 85 insertions(+), 17 deletions(-) create mode 100644 packages/solid/src/components/icons/Search.tsx diff --git a/packages/solid/bun.lock b/packages/solid/bun.lock index c4610bc..6856e00 100644 --- a/packages/solid/bun.lock +++ b/packages/solid/bun.lock @@ -4,7 +4,7 @@ "": { "name": "example-basic", "dependencies": { - "@m3-components/solid": "0.1.4", + "@m3-components/solid": "0.1.7", "@solidjs/meta": "^0.29.4", "@solidjs/router": "^0.15.0", "@solidjs/start": "^1.1.0", @@ -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.4", "", { "dependencies": { "animejs": "^4.0.2", "solid-js": "^1.9.5", "tailwind-variants": "^1.0.0" } }, "sha512-pAq1v8bx2WZoc2AsbcoAgKrfCgMTmQskCM9KbnJZdw9RcaDBu23uNAyhPqmrxxuPi177Rnd2ZVfFAfXi8+NvnQ=="], + "@m3-components/solid": ["@m3-components/solid@0.1.7", "", { "dependencies": { "animejs": "^4.0.2", "solid-js": "^1.9.5", "tailwind-variants": "^1.0.0" } }, "sha512-15BNlsxMoH7RnV6vBH2DSr/SYuxpPznr+bwtqbpWlq3D54ZODhFUT3/zhIXCE1L1wXG7/xu158wvuWfmhr8ZSQ=="], "@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 947b6d4..c2676ca 100644 --- a/packages/solid/package.json +++ b/packages/solid/package.json @@ -8,7 +8,7 @@ "version": "vinxi version" }, "dependencies": { - "@m3-components/solid": "0.1.4", + "@m3-components/solid": "0.1.7", "@solidjs/meta": "^0.29.4", "@solidjs/router": "^0.15.0", "@solidjs/start": "^1.1.0", diff --git a/packages/solid/src/app.tsx b/packages/solid/src/app.tsx index 13612f2..ac1d4d6 100644 --- a/packages/solid/src/app.tsx +++ b/packages/solid/src/app.tsx @@ -15,14 +15,20 @@ const tabMap = { "/album/**/*": 2 }; +export const refreshTab = (path: string) => { + for (const [key, value] of Object.entries(tabMap)) { + if (!minimatch(path, key)) continue; + setActiveTab(value); + break; + } +} + export default function App() { onMount(() => { - const path = window.location.pathname; - for (const [key, value] of Object.entries(tabMap)) { - if (!minimatch(path, key)) continue; - setActiveTab(value); - break; - } + refreshTab(location.pathname); + window.addEventListener('popstate', (event) => { + refreshTab(location.pathname); + }); }); return ( diff --git a/packages/solid/src/components/icons/Search.tsx b/packages/solid/src/components/icons/Search.tsx new file mode 100644 index 0000000..9de0040 --- /dev/null +++ b/packages/solid/src/components/icons/Search.tsx @@ -0,0 +1,10 @@ +import { SVGIconComponent } from "~/components/icons/types"; + +export const SearchIcon: SVGIconComponent = (props) => { + return ( + + + + ); +}; \ No newline at end of file diff --git a/packages/solid/src/components/shell/Layout.tsx b/packages/solid/src/components/shell/Layout.tsx index c8dff6d..4747140 100644 --- a/packages/solid/src/components/shell/Layout.tsx +++ b/packages/solid/src/components/shell/Layout.tsx @@ -2,14 +2,16 @@ import { tv } from "tailwind-variants"; import { navigationExpanded, NavigationRegion } from "./Navigation"; import { DivProps } from "../common"; import { Component } from "solid-js"; +import { BeforeLeaveEventArgs, useBeforeLeave } from "@solidjs/router"; +import { refreshTab } from "~/app"; export const BodyRegion: Component = (props) => { const bodyStyle = tv({ base: "relative", variants: { open: { - true: "left-90", - false: "left-24" + true: "left-55 pr-55", + false: "left-24 pr-24" } } }); @@ -22,10 +24,21 @@ export const BodyRegion: Component = (props) => { }; export const Layout: Component = (props) => { + useBeforeLeave((e: BeforeLeaveEventArgs) => { + if (typeof e.to === "number") { + refreshTab(e.to.toString()); + return; + } + refreshTab(e.to); + }); return (
- {props.children} + +
+ {props.children} +
+
); }; diff --git a/packages/solid/src/components/shell/Navigation.tsx b/packages/solid/src/components/shell/Navigation.tsx index 15231be..cb47240 100644 --- a/packages/solid/src/components/shell/Navigation.tsx +++ b/packages/solid/src/components/shell/Navigation.tsx @@ -1,9 +1,16 @@ import { createSignal, For } from "solid-js"; import { HomeIcon } from "../icons/Home"; import { MusicIcon } from "../icons/Music"; -import { NavigationRail, NavigationRailAction, NavigationRailActions, NavigationRailMenu } from "@m3-components/solid"; +import { + NavigationRailFAB, + NavigationRail, + NavigationRailAction, + NavigationRailActions, + NavigationRailMenu +} from "@m3-components/solid"; import { A } from "@solidjs/router"; import { AlbumIcon } from "~/components/icons/Album"; +import { SearchIcon } from "../icons/Search"; export const [activeTab, setActiveTab] = createSignal(-1); export const [navigationExpanded, setNavigationExpanded] = createSignal(false); @@ -29,6 +36,9 @@ export const NavigationRegion = () => { return ( setNavigationExpanded(!navigationExpanded())} /> + + + {(action, index) => ( diff --git a/packages/solid/src/routes/index.tsx b/packages/solid/src/routes/index.tsx index 35cf959..6ae7070 100644 --- a/packages/solid/src/routes/index.tsx +++ b/packages/solid/src/routes/index.tsx @@ -1,5 +1,36 @@ import { Layout } from "~/components/shell/Layout"; +import { dbMain } from "~/drizzle"; +import { bilibiliMetadata, latestVideoSnapshot } from "~db/main/schema"; +import { and, desc, eq, gte, lt } from "drizzle-orm"; +import { createAsync, query } from "@solidjs/router"; +import { For, Suspense } from "solid-js"; + +const getVideoCloseTo1M = query(async () => { + "use server"; + return dbMain + .select() + .from(bilibiliMetadata) + .leftJoin(latestVideoSnapshot, eq(latestVideoSnapshot.aid, bilibiliMetadata.aid)) + .where(and(gte(latestVideoSnapshot.views, 900000), lt(latestVideoSnapshot.views, 1000000))) + .orderBy(desc(latestVideoSnapshot.views)) + .limit(20); +}, "data"); export default function Home() { - return ; + const videos = createAsync(() => getVideoCloseTo1M()); + return ( + + 中V档案馆 +
+

中 V 档案馆

+

传说助攻

+ +
+ Loading...
}> + {(video) =>
  • {video.bilibili_metadata.aid}
    • }     + + +
    +     + ); } diff --git a/packages/solid/src/routes/songs/index.tsx b/packages/solid/src/routes/songs/index.tsx index d5ec7f6..e9489bd 100644 --- a/packages/solid/src/routes/songs/index.tsx +++ b/packages/solid/src/routes/songs/index.tsx @@ -3,9 +3,7 @@ import { Layout } from "~/components/shell/Layout"; export default function SongsHome() { return ( -
    -

    歌曲

    -
    +

    歌曲

     ); }