✨ 首页应用列表完成

src/components/AppCard/index.tsx

@@ -15,7 +15,7 @@ const AppCard: Component<AppCardProps> = (props) => {
       href={`/app/${props.category}/${props.pkgname}`}
       class="block p-4 rounded-lg border border-border bg-card hover:border-primary/50 transition-colors"
     >
-      <div class="flex items-start gap-3">
+      <div class="flex items-center gap-3 h-full">
         <div class="w-12 h-12 rounded-lg bg-muted flex items-center justify-center overflow-hidden">
           {props.icon ? (
             <img src={props.icon} alt={props.name} class="w-full h-full object-cover" />

src/components/HomeCarousel/index.tsx

@@ -6,6 +6,7 @@ import { HomeLink } from '@/types/home';
 interface HomeCarouselProps {
   slides?: HomeLink[];
   loading?: boolean;
+  class?: string;
 }
 
 const HomeCarousel: Component<HomeCarouselProps> = (props) => {
@@ -42,6 +43,7 @@ const HomeCarousel: Component<HomeCarouselProps> = (props) => {
 
   return (
     <BaseCarousel
+      class={props.class}
       items={props.slides}
       loading={props.loading}
       renderItem={renderItem}

src/components/HomeListApps/index.tsx

@@ -0,0 +1,63 @@
+import { Component, For } from 'solid-js';
+import { HomeListApp } from '@/types/home';
+import AppCard from '../AppCard';
+import { Skeleton } from "@/components/ui/skeleton";
+
+interface HomeListAppsProps {
+  title: string;
+  apps: HomeListApp[];
+  loading: boolean;
+  category?: string;
+}
+
+const HomeListApps: Component<HomeListAppsProps> = (props) => {
+  return (
+    <div class="mb-2 mt-2">
+      <div class="mb-2">
+        {props.loading ? (
+          <Skeleton height={30} width={120} />
+        ) : (
+          <h2 class="text-2xl font-bold">{props.title}</h2>
+        )}
+      </div>
+      <div class="grid auto-rows-auto grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4 pb-6">
+        {props.loading ? (
+          <For each={Array(8).fill(0)}>
+            {() => (
+              <div class="p-4 rounded-lg border border-border/40 bg-card hover:border-primary/50 transition-colors">
+                <div class="flex items-start gap-3">
+                  <div class="w-12 h-12 rounded-lg bg-muted flex items-center justify-center overflow-hidden">
+                    <Skeleton class="w-full h-full" />
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <div class="flex items-center justify-between gap-2">
+                      <Skeleton class="h-5 w-24" />
+                    </div>
+                    <div class="mt-1">
+                      <Skeleton class="h-4 w-full mt-2" />
+                      <Skeleton class="h-4 w-3/4 mt-2" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </For>
+        ) : (
+          <For each={props.apps}>
+            {(app) => (
+              <AppCard
+                category={props.category || app.Category || ''}
+                pkgname={app.Pkgname}
+                name={app.Name}
+                description={app.More}
+                icon={app.Icon}
+              />
+            )}
+          </For>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default HomeListApps;

src/components/ui/base-carousel.tsx

@@ -14,11 +14,12 @@ interface BaseCarouselProps {
   renderItem: (item: any) => JSX.Element;
   renderSkeleton: () => JSX.Element;
   items?: any[];
+  class?: string;
 }
 
 const BaseCarousel: Component<BaseCarouselProps> = (props) => {
   return (
-    <div class="relative w-full group">
+    <div class={"relative w-full group " + props.class} >
       <Carousel
         opts={{
           align: 'start',