Fix: Image Box Styles

修复异常样式，替换图片请求到压缩服务

app/components/biz/gallery/image-box/index.tsx

@@ -142,12 +142,9 @@ function LightBox({ className, list }: LightBoxProps, ref: Ref<LightBoxInst>) {
         "fixed inset-0 z-50 flex flex-col bg-orange-50 overflow-auto animate-fade-in",
         state.fadeOut && "animate-fade-out",
         state.loading && "loading",
-        className
+        className,
       )}
     >
-      <div className="bg-pink-400 py-5 px-2 h-16 text-center">
-        <h2 className="text-xl/tight text-white">{title}</h2>
-      </div>
       <div className="md:flex md:flex-row flex-1 overflow-auto">
         <div
           className="h-[calc(100%-6em)] md:h-auto flex-1 flex flex-col"
@@ -173,7 +170,7 @@ function LightBox({ className, list }: LightBoxProps, ref: Ref<LightBoxInst>) {
           </div>
           <div
             ref={selectorRef}
-            className="flex gap-4 p-4 overflow-auto bg-black bg-opacity-10"
+            className="flex gap-2 p-4 overflow-auto bg-black/10"
           >
             {list.map((item, index) => (
               <img

app/routes/gallery.tsx

@@ -4,6 +4,7 @@ import LightBox, { useLightBox } from "~/components/biz/gallery/image-box";
 import { StarFill } from "~/components/ui/icons";
 import Pagination from "~/components/ui/pagination";
 import { clsn, siteTitle } from "~/utils";
+import { getImageThumbUrl } from "~/utils/media";
 
 import type { Route } from "./+types/gallery";
 import styles from "./gallery.module.css";
@@ -84,9 +85,9 @@ export default function Gallery({ loaderData }: Route.ComponentProps) {
             className="relative bg-white rounded-xl overflow-hidden border-4 border-transparent hover:border-pink-400 transition-colors border-b-4 border-b-cyan-200 group cursor-pointer"
             onClick={() => open(index)}
           >
-            <img className={styles.image} src={item.thumb_url} alt={item.title} loading="lazy" />
+            <img className={styles.image} src={getImageThumbUrl(item.url)} alt={item.title} loading="lazy" />
             {item.content && (
-              <div className={clsn("absolute top-0 left-0 right-0 bottom-0 bg-opacity-60 bg-black p-4 sm:p-6 text-white leading-7 transition-opacity duration-300 whitespace-pre-wrap opacity-0 group-hover:opacity-100", styles.desc)}>
+              <div className={clsn("absolute top-0 left-0 right-0 bottom-0 bg-black/60 p-4 sm:p-6 text-white leading-7 transition-opacity duration-300 whitespace-pre-wrap opacity-0 group-hover:opacity-100", styles.desc)}>
                 {item.content}
               </div>
             )}

app/routes/index.tsx

@@ -115,9 +115,9 @@ export default function Index({ loaderData }: Route.ComponentProps) {
           {data.data.media.map((item) => (
             <div
               key={item.id}
-              className="flex flex-col overflow-hidden bg-white rounded-xl border-4 border-transparent hover:border-pink-400 transition-colors border-b-cyan-200"
+              className="flex flex-col overflow-hidden bg-white rounded-xl border-4 border-transparent hover:border-pink-400 transition-colors border-b-cyan-200 cursor-pointer"
             >
-              <img className="w-full aspect-4/3 object-cover" src={getImageThumbUrl(item.thumb_url, { height: 450, width: 900 })} alt={item.title} />
+              <img className="w-full aspect-4/3 object-cover" src={getImageThumbUrl(item.url)} alt={item.title} />
               <div className="flex flex-col flex-1 p-5">
                 <h3 className="text-pink-400 text-xl font-semibold flex-1 truncate mb-4">{item.title}</h3>
                 <p className="text-sm opacity-50">{item.take_time.substring(0, 10)}</p>

ecosystem.config.cjs

@@ -2,10 +2,9 @@ module.exports = {
   apps: [
     {
       name: "cupcake",
-      script: "pnpm",
-      args: "start",
+      script: "./node_modules/@react-router/serve/bin.js",
+      args: "./build/server/index.js",
       cwd: __dirname,
-      interpreter: "none",
       instances: 1,
       exec_mode: "fork",
       autorestart: true,