feat(func): media library

Author: PIKACHUIM

src/app/RootLayout.tsx

@@ -15,6 +15,7 @@ import { useColorMode, Icon } from "@hope-ui/solid"
 import { TbChevronLeft, TbChevronRight } from "solid-icons/tb"
 import { Nav } from "~/pages/home/Nav"
 import { Layout } from "~/pages/home/header/layout"
+import { TopBarActions } from "~/pages/home/toolbar/Right"
 import { useRouter } from "~/hooks"
 import { getSetting, objStore, State } from "~/store"
 import { BsSearch } from "solid-icons/bs"
@@ -61,49 +62,6 @@ const TopBar = () => {
         gap: "8px",
       }}
     >
-      {/* 侧边栏收起/展开按钮 */}
-      <button
-        onClick={() => setSidebarCollapsed(!sidebarCollapsed())}
-        title={sidebarCollapsed() ? "展开侧边栏" : "收起侧边栏"}
-        style={{
-          background: isDark() ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)",
-          border: `1px solid ${isDark() ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`,
-          "border-radius": "7px",
-          width: "28px",
-          height: "28px",
-          cursor: "pointer",
-          display: "flex",
-          "align-items": "center",
-          "justify-content": "center",
-          color: mutedColor(),
-          transition: "all 0.18s ease",
-          "flex-shrink": "0",
-        }}
-        onMouseEnter={(e) => {
-          const el = e.currentTarget as HTMLButtonElement
-          el.style.background = isDark()
-            ? "rgba(59,130,246,0.15)"
-            : "rgba(59,130,246,0.08)"
-          el.style.color = "#3b82f6"
-          el.style.borderColor = "rgba(59,130,246,0.3)"
-        }}
-        onMouseLeave={(e) => {
-          const el = e.currentTarget as HTMLButtonElement
-          el.style.background = isDark()
-            ? "rgba(255,255,255,0.06)"
-            : "rgba(0,0,0,0.05)"
-          el.style.color = mutedColor()
-          el.style.borderColor = isDark()
-            ? "rgba(255,255,255,0.08)"
-            : "rgba(0,0,0,0.08)"
-        }}
-      >
-        <Icon
-          as={sidebarCollapsed() ? TbChevronRight : TbChevronLeft}
-          boxSize="14px"
-        />
-      </button>
-
       {/* 面包屑导航 / 页面标题 */}
       <div style={{ flex: "1", "min-width": "0", overflow: "hidden" }}>
         <Show
@@ -116,24 +74,70 @@ const TopBar = () => {
                 "font-weight": "600",
               }}
             >
-              媒体库
+              📺 媒体库
             </span>
           }
         >
           <Nav />
         </Show>
       </div>
 
-      {/* 右侧工具区（仅文件浏览时显示） */}
-      <Show when={isFileBrowser()}>
-        <div
+      {/* 右侧工具区 */}
+      <div
+        style={{
+          display: "flex",
+          "align-items": "center",
+          gap: "6px",
+          "flex-shrink": "0",
+        }}
+      >
+        {/* 侧边栏收起/展开按钮 */}
+        <button
+          onClick={() => setSidebarCollapsed(!sidebarCollapsed())}
+          title={sidebarCollapsed() ? "展开侧边栏" : "收起侧边栏"}
           style={{
+            background: isDark()
+              ? "rgba(255,255,255,0.06)"
+              : "rgba(0,0,0,0.05)",
+            border: `1px solid ${isDark() ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`,
+            "border-radius": "7px",
+            width: "28px",
+            height: "28px",
+            cursor: "pointer",
             display: "flex",
             "align-items": "center",
-            gap: "6px",
+            "justify-content": "center",
+            color: mutedColor(),
+            transition: "all 0.18s ease",
             "flex-shrink": "0",
           }}
+          onMouseEnter={(e) => {
+            const el = e.currentTarget as HTMLButtonElement
+            el.style.background = isDark()
+              ? "rgba(59,130,246,0.15)"
+              : "rgba(59,130,246,0.08)"
+            el.style.color = "#3b82f6"
+            el.style.borderColor = "rgba(59,130,246,0.3)"
+          }}
+          onMouseLeave={(e) => {
+            const el = e.currentTarget as HTMLButtonElement
+            el.style.background = isDark()
+              ? "rgba(255,255,255,0.06)"
+              : "rgba(0,0,0,0.05)"
+            el.style.color = mutedColor()
+            el.style.borderColor = isDark()
+              ? "rgba(255,255,255,0.08)"
+              : "rgba(0,0,0,0.08)"
+          }}
         >
+          <Icon
+            as={sidebarCollapsed() ? TbChevronRight : TbChevronLeft}
+            boxSize="14px"
+          />
+        </button>
+
+        {/* 搜索按钮和布局切换（仅文件浏览时显示） */}
+        <Show when={isFileBrowser()}>
           {/* 搜索按钮 */}
           <Show when={isFolder() && getSetting("search_index") !== "none"}>
             <button
@@ -179,12 +183,15 @@ const TopBar = () => {
             </button>
           </Show>
 
+          {/* 工具操作按钮 */}
+          <TopBarActions />
+
           {/* 布局切换 */}
           <Show when={isFolder()}>
             <Layout />
           </Show>
-        </div>
-      </Show>
+        </Show>
+      </div>
     </div>
   )
 }

src/components/GlobalSidebar.tsx

@@ -17,6 +17,7 @@ import {
   TbMenu2,
   TbLayersIntersect,
   TbSettings,
+  TbAdjustments,
 } from "solid-icons/tb"
 import { BsPlayCircleFill, BsCardImage } from "solid-icons/bs"
 import { BiSolidBookContent } from "solid-icons/bi"
@@ -85,7 +86,7 @@ export const GlobalSidebar = () => {
   })
 
   const isVisible = createMemo(() => !isMobile() || sidebarVisible())
-  const sidebarWidth = createMemo(() => (sidebarCollapsed() ? "48px" : "128px"))
+  const sidebarWidth = createMemo(() => (sidebarCollapsed() ? "48px" : "130px"))
 
   // Logo：从设置读取，支持亮/暗两套（与 Header.tsx 保持完全一致）
   const logos = getSetting("logo").split("\n")
@@ -152,6 +153,12 @@ export const GlobalSidebar = () => {
     if (isMobile()) setSidebarVisible(false)
   }
 
+  // ─── 系统设置跳转 ─────────────────────────────────────────
+  const handleSettings = () => {
+    window.location.href = joinBase("/@manage/settings/site")
+    if (isMobile()) setSidebarVisible(false)
+  }
+
   // ─── 透明模式切换 ─────────────────────────────────────────
   const toggleTransparent = () => {
     const next = !sidebarTransparent()
@@ -409,6 +416,7 @@ export const GlobalSidebar = () => {
             padding: sidebarCollapsed() ? "8px 0" : "8px 8px",
             "border-top": `1px solid ${borderColor()}`,
             display: "flex",
+            "flex-direction": sidebarCollapsed() ? "column" : "row",
             "align-items": "center",
             "justify-content": sidebarCollapsed() ? "center" : "space-between",
             gap: "6px",
@@ -446,54 +454,83 @@ export const GlobalSidebar = () => {
             <Icon as={isDark() ? FiSun : FiMoon} boxSize="15px" />
           </button>
 
-          {/* 透明模式切换（折叠时隐藏） */}
-          <Show when={!sidebarCollapsed()}>
-            <button
-              onClick={toggleTransparent}
-              title={sidebarTransparent() ? "关闭透明模式" : "开启透明模式"}
-              style={{
-                background: sidebarTransparent()
-                  ? isDark()
-                    ? "rgba(6,182,212,0.18)"
-                    : "rgba(6,182,212,0.10)"
-                  : btnBg(),
-                border: `1px solid ${sidebarTransparent() ? "rgba(6,182,212,0.35)" : btnBorder()}`,
-                "border-radius": "7px",
-                height: "28px",
-                padding: "0 8px",
-                cursor: "pointer",
-                display: "flex",
-                "align-items": "center",
-                gap: "4px",
-                "font-size": "11px",
-                color: sidebarTransparent()
-                  ? isDark()
-                    ? "#67e8f9"
-                    : "#0891b2"
-                  : textSecondary(),
-                "font-weight": sidebarTransparent() ? "600" : "400",
-                transition: "all 0.18s ease",
-                "white-space": "nowrap",
-              }}
-              onMouseEnter={(e) => {
-                if (!sidebarTransparent()) {
-                  const el = e.currentTarget as HTMLButtonElement
-                  el.style.background = isDark()
-                    ? "rgba(6,182,212,0.10)"
-                    : "rgba(6,182,212,0.06)"
-                }
-              }}
-              onMouseLeave={(e) => {
-                if (!sidebarTransparent()) {
-                  ;(e.currentTarget as HTMLButtonElement).style.background =
-                    btnBg()
-                }
-              }}
-            >
-              <Icon as={TbLayersIntersect} boxSize="14px" />
-              透明
-            </button>
-          </Show>
+          {/* 系统设置 */}
+          <button
+            onClick={handleSettings}
+            title="系统设置"
+            style={{
+              background: btnBg(),
+              border: `1px solid ${btnBorder()}`,
+              "border-radius": "7px",
+              width: "28px",
+              height: "28px",
+              cursor: "pointer",
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "center",
+              color: textSecondary(),
+              transition: "all 0.18s ease",
+              "flex-shrink": "0",
+            }}
+            onMouseEnter={(e) => {
+              const el = e.currentTarget as HTMLButtonElement
+              el.style.background = isDark()
+                ? "rgba(59,130,246,0.15)"
+                : "rgba(59,130,246,0.08)"
+              el.style.color = "#3b82f6"
+            }}
+            onMouseLeave={(e) => {
+              const el = e.currentTarget as HTMLButtonElement
+              el.style.background = btnBg()
+              el.style.color = textSecondary()
+            }}
+          >
+            <Icon as={TbAdjustments} boxSize="15px" />
+          </button>
+
+          {/* 透明模式切换 */}
+          <button
+            onClick={toggleTransparent}
+            title={sidebarTransparent() ? "关闭透明模式" : "开启透明模式"}
+            style={{
+              background: sidebarTransparent()
+                ? isDark()
+                  ? "rgba(6,182,212,0.18)"
+                  : "rgba(6,182,212,0.10)"
+                : btnBg(),
+              border: `1px solid ${sidebarTransparent() ? "rgba(6,182,212,0.35)" : btnBorder()}`,
+              "border-radius": "7px",
+              width: "28px",
+              height: "28px",
+              cursor: "pointer",
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "center",
+              color: sidebarTransparent()
+                ? isDark()
+                  ? "#67e8f9"
+                  : "#0891b2"
+                : textSecondary(),
+              transition: "all 0.18s ease",
+              "flex-shrink": "0",
+            }}
+            onMouseEnter={(e) => {
+              if (!sidebarTransparent()) {
+                const el = e.currentTarget as HTMLButtonElement
+                el.style.background = isDark()
+                  ? "rgba(6,182,212,0.10)"
+                  : "rgba(6,182,212,0.06)"
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!sidebarTransparent()) {
+                ;(e.currentTarget as HTMLButtonElement).style.background =
+                  btnBg()
+              }
+            }}
+          >
+            <Icon as={TbLayersIntersect} boxSize="15px" />
+          </button>
         </div>
       </div>