feat(func): media library

.github/workflows/build_media.yml

@@ -0,0 +1,79 @@
+# This workflow builds a media branch version of the OpenList frontend and publishes it on GitHub.
+#
+# This will:
+#
+# - Upload the release assets to GitHub (always git tagged `beta-media`).
+#
+# This workflow can be triggered on pushes to the `dev-media` branch, or manually via the GitHub Actions UI.
+
+name: Media Build
+
+on:
+  push:
+    branches:
+      - dev-media
+  workflow_dispatch:
+    inputs:
+      draft:
+        description: "Create draft release"
+        required: false
+        default: true
+        type: boolean
+
+jobs:
+  media:
+    name: Media Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+          submodules: recursive
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: "22"
+          registry-url: "https://registry.npmjs.org"
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          run_install: false
+
+      - name: Build Media Pre-release
+        run: |
+          chmod +x build.sh
+          ./build.sh --dev --compress
+        env:
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+
+      - name: Read version and determine tag name
+        id: version
+        run: |
+          version=$(cat dist/VERSION)
+          echo "version=$version" >> $GITHUB_OUTPUT
+          echo "tag_name=beta-media" >> $GITHUB_OUTPUT
+
+      - name: Remove the existing pre-release
+        run: gh release delete ${{ steps.version.outputs.tag_name }} --cleanup-tag --yes || true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Publish media pre-release on GitHub
+        run: |
+          gh release create \
+            --title "Media Pre-release ${{ steps.version.outputs.version }}" \
+            --notes "Media branch pre-release build for ${{ steps.version.outputs.version }}<br>This is a development build for the media library feature and not intended for production use." \
+            --prerelease \
+            --draft=${{ github.event_name == 'workflow_dispatch' && github.event.inputs.draft || false }} \
+            ${{ steps.version.outputs.tag_name }} \
+            dist/openlist-frontend-dist-v*-*.tar.gz
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+permissions:
+  contents: write

src/app/App.tsx

@@ -19,11 +19,17 @@ import { base_path, bus, handleRespWithoutAuthAndNotify, r } from "~/utils"
 import { MustUser, UserOrGuest } from "./MustUser"
 import "./index.css"
 import { globalStyles } from "./theme"
+import { MusicPlayer } from "~/pages/media/music/MusicLibrary"
+import { RootLayout } from "./RootLayout"
 
 const Home = lazy(() => import("~/pages/home/Layout"))
 const Manage = lazy(() => import("~/pages/manage"))
 const Login = lazy(() => import("~/pages/login"))
 const Test = lazy(() => import("~/pages/test"))
+const VideoLibrary = lazy(() => import("~/pages/media/video/VideoLibrary"))
+const MusicLibrary = lazy(() => import("~/pages/media/music/MusicLibrary"))
+const ImageLibrary = lazy(() => import("~/pages/media/image/ImageLibrary"))
+const BookLibrary = lazy(() => import("~/pages/media/book/BookLibrary"))
 
 const App: Component = () => {
   const t = useT()
@@ -91,19 +97,68 @@ const App: Component = () => {
                 </MustUser>
               }
             />
+            {/* 带侧边栏的路由：媒体库各页面 */}
+            <Route
+              path="/@media/video/*"
+              element={
+                <MustUser>
+                  <RootLayout>
+                    <MusicPlayer />
+                    <VideoLibrary />
+                  </RootLayout>
+                </MustUser>
+              }
+            />
+            <Route
+              path="/@media/music/*"
+              element={
+                <MustUser>
+                  <RootLayout>
+                    <MusicPlayer />
+                    <MusicLibrary />
+                  </RootLayout>
+                </MustUser>
+              }
+            />
+            <Route
+              path="/@media/image/*"
+              element={
+                <MustUser>
+                  <RootLayout>
+                    <MusicPlayer />
+                    <ImageLibrary />
+                  </RootLayout>
+                </MustUser>
+              }
+            />
+            <Route
+              path="/@media/books/*"
+              element={
+                <MustUser>
+                  <RootLayout>
+                    <MusicPlayer />
+                    <BookLibrary />
+                  </RootLayout>
+                </MustUser>
+              }
+            />
             <Route
               path={["/@s/*", "/%40s/*"]}
               element={
                 <UserOrGuest>
-                  <Home />
+                  <RootLayout>
+                    <Home />
+                  </RootLayout>
                 </UserOrGuest>
               }
             />
             <Route
               path="*"
               element={
                 <MustUser>
-                  <Home />
+                  <RootLayout>
+                    <Home />
+                  </RootLayout>
                 </MustUser>
               }
             />