✨ 首页应用列表完成

src/features/home/Home.tsx

@@ -1,16 +1,35 @@
-import { Component } from 'solid-js';
+import { Component, For } from 'solid-js';
 import { useHomeStore } from './store';
-import AppList from '@/components/AppList';
 import HomeCarousel from '@/components/HomeCarousel';
+import HomeListApps from '@/components/HomeListApps';
 
 const Home: Component = () => {
-  const { apps, loading, slides } = useHomeStore();
+  const { lists, loading, slides } = useHomeStore();
 
   return (
     <div class="p-6 w-full h-full">
-      <HomeCarousel slides={slides() ?? []} loading={loading()} />
-      <h1 class="text-2xl font-bold mb-6">欢迎使用 Spark Store</h1>
-      <AppList apps={apps() ?? []} loading={loading()} />
+      <HomeCarousel slides={slides() ?? []} loading={loading()} class='pb-2'/>
+      {loading() ? (
+        <For each={Array(2).fill(0)}>
+          {() => (
+            <HomeListApps
+              title=""
+              apps={[]}
+              loading={true}
+            />
+          )}
+        </For>
+      ) : (
+        <For each={lists() ?? []}>
+          {(list) => (
+            <HomeListApps
+              title={list.title}
+              apps={list.apps}
+              loading={loading()}
+            />
+          )}
+        </For>
+      )}
     </div>
   );
 };

src/features/home/store.ts

@@ -1,54 +1,33 @@
-import { AppItem } from '@/types/app';
 import { HomeLink } from '@/types/home';
 import { createResource } from 'solid-js';
-import { getHomeLinks } from '@/lib/api/home';
+import { getHomeLinks, getHomeLists, getListApps } from '@/lib/api/home';
 
-const fetchApps = async (): Promise<AppItem[]> => {
-  // 模拟从后端获取数据的延迟
-  await new Promise(resolve => setTimeout(resolve, 1000));
-  
-  return [
-    {
-        pkgname: '1',
-        name: 'Visual Studio Code',
-        more: '轻量级但功能强大的代码编辑器',
-        category: 'development',
-        icon: '/icons/vscode.png',
-        update: ''
-    },
-    {
-        pkgname: '2',
-        name: 'Firefox',
-        more: '注重隐私的开源浏览器',
-        category: 'development',
-        icon: '/icons/firefox.png',
-        update: ''
-    },
-    {
-        pkgname: '3',
-        name: 'GIMP',
-        more: '功能丰富的图像编辑软件',
-        category: 'development',
-        icon: '/icons/gimp.png',
-        update: ''
-    },
-    {
-        pkgname: '4',
-        name: 'Notion',
-        more: '功能强大的笔记软件',
-        category: 'development',
-        icon: '/icons/notion.png',
-        update: ''
-    },
-    {
-        pkgname: '5',
-        name: 'Slack',
-        more: '团队沟通和协作工具',
-        category: 'development',
-        icon: '/icons/slack.png',
-        update: ''
-    },
-  ];
+const fetchLists = async () => {
+  try {
+    // 获取首页列表
+    const homeLists = await getHomeLists();
+    
+    // 如果没有列表数据，返回空数组
+    if (!homeLists || homeLists.length === 0) {
+      return [];
+    }
+
+    // 获取所有列表的应用数据
+    const listsWithApps = await Promise.all(
+      homeLists.map(async (list) => {
+        const apps = await getListApps(list.jsonUrl);
+        return {
+          title: list.name,
+          apps
+        };
+      })
+    );
+    
+    return listsWithApps;
+  } catch (error) {
+    console.error('获取应用列表失败:', error);
+    return [];
+  }
 };
 
 const getCarouselSlides = async (): Promise<HomeLink[]> => {
@@ -56,16 +35,16 @@ const getCarouselSlides = async (): Promise<HomeLink[]> => {
 };
 
 export const useHomeStore = () => {
-  const [apps, { refetch: refetchApps }] = createResource<AppItem[]>(fetchApps);
+  const [lists, { refetch: refetchLists }] = createResource(fetchLists);
   const [slides, { refetch: refetchSlides }] = createResource<HomeLink[]>(getCarouselSlides);
-  const loading = () => apps.loading || slides.loading;
+  const loading = () => lists.loading || slides.loading;
 
   return {
-    apps,
+    lists,
     slides,
     loading,
     refetch: () => {
-      refetchApps();
+      refetchLists();
       refetchSlides();
     }
   };