Add background

2025-09-27 04:17:23 +00:00 · 2025-07-15 15:34:25 +08:00
parent 42848a2863
commit ae3dbb4253
10 changed files with 313 additions and 175 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,6 +11,7 @@
        "@marsidev/react-turnstile": "^1.1.0",
        "@tailwindcss/vite": "^4.1.5",
        "axios": "^1.9.0",
+        "framer-motion": "^12.23.5",
        "i18next": "^25.1.1",
        "i18next-browser-languagedetector": "^8.1.0",
        "masonic": "^4.1.0",
@@ -3371,6 +3372,33 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/framer-motion": {
+      "version": "12.23.5",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.5.tgz",
+      "integrity": "sha512-t+6/f2TUowkr1gVuGwVwxR3ZQupCdCZj0mivG8M8CW2kwHPqtSePomECvmto15qoFCwost77O/XuEsq59MLDKw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.5",
+        "motion-utils": "^12.23.2",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/fresh": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
@@ -4939,6 +4967,21 @@
        "node": "*"
      }
    },
+    "node_modules/motion-dom": {
+      "version": "12.23.5",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.5.tgz",
+      "integrity": "sha512-RrUS4X11w7kIU1COoSVptuYTx1QQ/sViDEI1Yl1zL0nem8UXn3HRcsMrFTCkZSSRLXeVpN540bFP1iS87SicPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.2"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.2",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.2.tgz",
+      "integrity": "sha512-cIEXlBlXAOUyiAtR0S+QPQUM9L3Diz23Bo+zM420NvSd/oPQJwg6U+rT+WRTpp0rizMsBGQOsAwhWIfglUcZfA==",
+      "license": "MIT"
+    },
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -6051,8 +6094,7 @@
      "version": "2.8.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
-      "optional": true
+      "license": "0BSD"
    },
    "node_modules/turbo-stream": {
      "version": "2.4.0",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
    "@marsidev/react-turnstile": "^1.1.0",
    "@tailwindcss/vite": "^4.1.5",
    "axios": "^1.9.0",
+    "framer-motion": "^12.23.5",
    "i18next": "^25.1.1",
    "i18next-browser-languagedetector": "^8.1.0",
    "masonic": "^4.1.0",
--- a/frontend/src/components/comment_tile.tsx
+++ b/frontend/src/components/comment_tile.tsx
@@ -24,7 +24,7 @@ export function CommentTile({
    <a
      href={link}
      className={
-        "block card bg-base-100 p-2 my-3 transition-shadow cursor-pointer" +
+        "block card bg-base-100-tr82 p-2 my-3 transition-shadow cursor-pointer" +
        (!elevation || elevation == "normal"
          ? " shadow-xs hover:shadow"
          : " shadow hover:shadow-md")
@@ -35,8 +35,7 @@ export function CommentTile({
      }}
    >
      <div className={"flex flex-row items-center my-1 mx-1"}>
-        <a
-          href={userLink}
+        <p
          className="flex flex-row items-center avatar cursor-pointer"
          onClick={(e) => {
            e.stopPropagation();
@@ -49,7 +48,7 @@ export function CommentTile({
          </span>
          <span className={"w-2"}></span>
          <span className={"text-sm font-bold"}>{comment.user.username}</span>
-        </a>
+        </p>

        <div className={"grow"}></div>
        <Badge className={"badge-ghost badge-sm"}>
--- a/frontend/src/components/navigator.tsx
+++ b/frontend/src/components/navigator.tsx
@@ -8,6 +8,7 @@ import UploadingSideBar from "./uploading_side_bar.tsx";
 import { ThemeSwitcher } from "./theme_switcher.tsx";
 import { IoLogoGithub } from "react-icons/io";
 import { useAppContext } from "./AppContext.tsx";
+import { AnimatePresence, motion } from "framer-motion";

 export default function Navigator() {
  const outlet = useOutlet();
@@ -16,21 +17,86 @@ export default function Navigator() {

  const [key, setKey] = useState(0);

+  const [background, setBackground] = useState<string | undefined>(undefined);
+
  const appContext = useAppContext();

  const [naviContext, _] = useState<NavigatorContext>({
    refresh: () => {
      setKey(key + 1);
    },
+    setBackground: (b: string) => {
+      if (b !== background) {
+        setBackground(b);
+      }
+    },
  });

  const { t } = useTranslation();

  return (
-    <>
-      <FloatingToTopButton />
+    <div style={{
+      position: "relative",
+      overflowY: "hidden",
+      overflowX: "hidden",
+      minHeight: "100vh",
+    }}>
+      {/* background */}
+      {background && (
        <div
-        className="navbar bg-base-100 shadow-sm fixed top-0 z-1 lg:z-10"
+          className="background-wrapper"
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            zIndex: -2,
+            filter: "blur(8px)",
+          }}
+        >
+          <AnimatePresence mode="wait">
+            <motion.img
+              key={background}
+              src={background}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.5 }}
+              className="absolute w-full h-full object-cover"
+            />
+          </AnimatePresence>
+        </div>
+      )}
+
+      {/* Background overlay */}
+      {background && (
+        <div
+          className="bg-base-100 opacity-60 dark:opacity-40"
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            zIndex: -1,
+          }}
+        />
+      )}
+
+      {/* Content overlay with backdrop blur */}
+      <div
+        style={{
+          position: "relative",
+          zIndex: 1,
+          minHeight: "100vh",
+        }}
+      >
+        <FloatingToTopButton />
+        <div className="z-1 fixed top-0 w-full backdrop-blur h-16"/>
+        <div className="z-2 fixed top-0 w-full h-16 bg-base-100 opacity-80"/>
+        <div
+          className="navbar shadow-sm fixed top-0 z-3 lg:z-10 bg-transparent h-16"
          key={key}
        >
          <div className={"flex-1 max-w-7xl mx-auto flex items-center"}>
@@ -202,18 +268,23 @@ export default function Navigator() {
        <navigatorContext.Provider value={naviContext}>
          <div className={"max-w-7xl mx-auto pt-16"}>{outlet}</div>
        </navigatorContext.Provider>
-    </>
+      </div>
+    </div>
  );
 }

 interface NavigatorContext {
  refresh: () => void;
+  setBackground: (background: string) => void;
 }

 const navigatorContext = createContext<NavigatorContext>({
  refresh: () => {
    // do nothing
  },
+  setBackground: (_) => {
+    // do nothing
+  },
 });

 export function useNavigator() {
--- a/frontend/src/components/resource_card.tsx
+++ b/frontend/src/components/resource_card.tsx
@@ -20,7 +20,7 @@ export default function ResourceCard({ resource }: { resource: Resource }) {
        navigate(`/resources/${resource.id}`);
      }}
    >
-      <div className={"card shadow hover:shadow-md transition-shadow"}>
+      <div className={"card shadow hover:shadow-md transition-shadow bg-base-100-tr82"}>
        {resource.image != null && (
          <figure>
            <img
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -8,6 +8,7 @@
  prefersdark: false;
  color-scheme: "light dark";
  --color-base-100: oklch(99% 0.014 343.198);
+  --color-base-100-rgb: 255 246 251; /* 99% oklch(343.198) 近似RGB */
  --color-base-200: oklch(97% 0.028 342.258);
  --color-base-300: oklch(84% 0.061 343.231);
  --color-base-content: oklch(0% 0 0);
@@ -40,6 +41,7 @@
@media (prefers-color-scheme: dark) {
  [data-theme="pink"] {
    --color-base-100: oklch(28% 0.022 277.508);
+    --color-base-100-rgb: 54 34 56; /* 28% oklch(277.508) 近似RGB */
    --color-base-200: oklch(24% 0.02 277.508);
    --color-base-300: oklch(40% 0.153 2.432);
    --color-base-content: oklch(97.747% 0.007 106.545);
@@ -69,6 +71,7 @@
  prefersdark: false;
  color-scheme: "light dark";
  --color-base-100: oklch(98% 0.005 240);
+  --color-base-100-rgb: 245 249 255; /* 98% oklch(240) 近似RGB */
  --color-base-200: oklch(96% 0.01 240);
  --color-base-300: oklch(92% 0.015 240);
  --color-base-content: oklch(20% 0.01 240);
@@ -101,6 +104,7 @@
@media (prefers-color-scheme: dark) {
  [data-theme="ocean"] {
    --color-base-100: oklch(15% 0.02 240);
+    --color-base-100-rgb: 17 19 38; /* 15% oklch(240) 近似RGB */
    --color-base-200: oklch(12% 0.015 240);
    --color-base-300: oklch(25% 0.03 240);
    --color-base-content: oklch(90% 0.01 240);
@@ -130,6 +134,7 @@
  prefersdark: false;
  color-scheme: "light dark";
  --color-base-100: oklch(98% 0.005 140);
+  --color-base-100-rgb: 241 255 245; /* 98% oklch(140) 近似RGB */
  --color-base-200: oklch(96% 0.01 140);
  --color-base-300: oklch(92% 0.015 140);
  --color-base-content: oklch(20% 0.01 140);
@@ -162,6 +167,7 @@
@media (prefers-color-scheme: dark) {
  [data-theme="mint"] {
    --color-base-100: oklch(15% 0.02 140);
+    --color-base-100-rgb: 19 38 24; /* 15% oklch(140) 近似RGB */
    --color-base-200: oklch(12% 0.015 140);
    --color-base-300: oklch(25% 0.03 140);
    --color-base-content: oklch(90% 0.01 140);
@@ -191,6 +197,7 @@
  prefersdark: false;
  color-scheme: "light dark";
  --color-base-100: oklch(98% 0.005 50);
+  --color-base-100-rgb: 255 253 241; /* 98% oklch(50) 近似RGB */
  --color-base-200: oklch(96% 0.01 50);
  --color-base-300: oklch(92% 0.015 50);
  --color-base-content: oklch(20% 0.01 50);
@@ -223,6 +230,7 @@
@media (prefers-color-scheme: dark) {
  [data-theme="glow"] {
    --color-base-100: oklch(15% 0.02 50);
+    --color-base-100-rgb: 38 36 19; /* 15% oklch(50) 近似RGB */
    --color-base-200: oklch(12% 0.015 50);
    --color-base-300: oklch(25% 0.03 50);
    --color-base-content: oklch(90% 0.01 50);
@@ -304,3 +312,7 @@ body {
  font-size: 1rem;
  line-height: 1.5rem;
 }
+
+.bg-base-100-tr82 {
+  background-color: rgb(var(--color-base-100-rgb) / 0.82);
+}
--- a/frontend/src/pages/activities_page.tsx
+++ b/frontend/src/pages/activities_page.tsx
@@ -144,7 +144,7 @@ function ActivityCard({ activity }: { activity: Activity }) {
  return (
    <div
      className={
-        "card shadow m-4 p-4 hover:shadow-md transition-shadow cursor-pointer"
+        "card shadow m-4 p-4 hover:shadow-md transition-shadow cursor-pointer bg-base-100-tr82"
      }
      onClick={() => {
        if (
--- a/frontend/src/pages/resource_details_page.tsx
+++ b/frontend/src/pages/resource_details_page.tsx
@@ -49,6 +49,7 @@ import { useAppContext } from "../components/AppContext.tsx";
 import { BiLogoSteam } from "react-icons/bi";
 import { CommentTile } from "../components/comment_tile.tsx";
 import { CommentInput } from "../components/comment_input.tsx";
+import { useNavigator } from "../components/navigator.tsx";

 export default function ResourcePage() {
  const params = useParams();
@@ -64,6 +65,8 @@ export default function ResourcePage() {

  const location = useLocation();

+  const navigator = useNavigator();
+
  const reload = useCallback(async () => {
    if (!isNaN(id)) {
      setResource(null);
@@ -97,7 +100,6 @@ export default function ResourcePage() {
          network.getResourceDetails(id).then((res) => {
            if (res.success) {
              setResource(res.data!);
-              document.title = res.data!.title;
            } else {
              showToast({ message: res.message, type: "error" });
            }
@@ -107,6 +109,15 @@ export default function ResourcePage() {
    }
  }, [id, location.state]);

+  useEffect(() => {
+    if (resource) {
+      document.title = resource.title;
+      if (resource.images.length > 0) {
+        navigator.setBackground(network.getImageUrl(resource.images[0].id));
+      }
+    }
+  }, [resource])
+
  const navigate = useNavigate();

  // 标签页与hash的映射
@@ -195,7 +206,7 @@ export default function ResourcePage() {
                <a href={l.url} target={"_blank"}>
                  <span
                    className={
-                      "py-1 px-3 inline-flex items-center m-1 border border-base-300 rounded-2xl hover:bg-base-200 transition-colors cursor-pointer select-none"
+                      "py-1 px-3 inline-flex items-center m-1 border border-base-300 bg-base-100 opacity-90 rounded-2xl hover:bg-base-200 transition-colors cursor-pointer select-none"
                    }
                  >
                    {l.url.includes("steampowered.com") ? (
@@ -211,7 +222,9 @@ export default function ResourcePage() {
          </p>
        )}

-        <div className="tabs tabs-box my-4 mx-2 p-4">
+        <div className="tabs tabs-box my-4 mx-2 p-4 shadow" style={{
+          backgroundColor: "rgb(var(--color-base-100-rgb) / 0.82)",
+        }}>
          <label className="tab transition-all">
            <input
              type="radio"
@@ -302,11 +315,11 @@ function Tags({ tags }: { tags: Tag[] }) {
    <>
      {Array.from(tagsMap.entries()).map(([type, tags]) => (
        <p key={type} className={"px-4"}>
-          <Badge key={type}>{type == "" ? t("Other") : type}</Badge>
+          <Badge className="shadow-xs" key={type}>{type == "" ? t("Other") : type}</Badge>
          {tags.map((tag) => (
            <Badge
              key={tag.name}
-              className={"m-1 cursor-pointer badge-soft badge-primary"}
+              className={"m-1 cursor-pointer badge-soft badge-primary shadow-xs"}
              onClick={() => {
                navigate(`/tag/${tag.name}`);
              }}
--- a/frontend/src/pages/tags_page.tsx
+++ b/frontend/src/pages/tags_page.tsx
@@ -65,7 +65,7 @@ export default function TagsPage() {
                  navigate(`/tag/${tag.name}`);
                }}
                key={tag.name}
-                className={"m-1 cursor-pointer badge-soft badge-primary"}
+                className={"m-1 cursor-pointer badge-soft badge-primary shadow-xs"}
              >
                {tag.name +
                  (tag.resources_count > 0 ? ` (${tag.resources_count})` : "")}
--- a/frontend/src/pages/user_page.tsx
+++ b/frontend/src/pages/user_page.tsx
@@ -332,7 +332,7 @@ function FilesList({
          >
            <div
              className={
-                "card shadow p-4 my-2 hover:shadow-md transition-shadow"
+                "card shadow p-4 my-2 hover:shadow-md transition-shadow bg-base-100-tr82"
              }
            >
              <h4 className={"font-bold pb-2"}>{file!.filename}</h4>