feat: categroy list

web/app/(commonLayout)/explore/apps/page.tsx

@@ -1,37 +1,8 @@
-import React, { FC } from 'react'
+import AppList from "@/app/components/explore/app-list"
-import AppCard from '@/app/components/explore/app-card'
+import React from 'react'
 
-export interface IAppsProps { }
+const Apps = ({ }) => {
-const list = [
+  return <AppList />
-  {
-    id: 1,
-    name: 'Story Bot',
-    mode: 'chat',
-    model_config: {
-      pre_prompt: 'I need you to play the role of a storyteller, and generate creative and vivid short stories based on the keywords I provide.',
-    }
-  },
-  {
-    id: 2,
-    name: 'Code Translate',
-    mode: 'completion',
-  },
-]
-const Apps: FC<IAppsProps> = ({ }) => {
-  return (
-    <div className='h-full flex flex-col'>
-      <div className='shrink-0 pt-6 px-12'>
-        <div className='mb-1 text-primary-600 text-xl font-semibold'>Explore Apps by Dify</div>
-        <div className='text-gray-500 text-sm'>Use these template apps instantly or customize your own apps based on the templates.</div>
-      </div>
-      <div className='grow-1 flex flex-col overflow-auto bg-gray-100 shrink-0 grow'>
-        <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-8 sm:grid-cols-2 lg:grid-cols-4 grow shrink-0'>
-          {list.map(item => (
-            <AppCard key={item.id} app={item as any} />
-          ))}
-        </nav>
-      </div>
-    </div>
-  )
 }
+
 export default React.memo(Apps)

web/app/components/explore/app-list/index.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import React, { FC, useEffect } from 'react'
+import Category from '@/app/components/explore/category'
+import AppCard from '@/app/components/explore/app-card'
+import { fetchAppList } from '@/service/explore'
+
+
+const mockList = [
+  {
+    id: 1,
+    name: 'Story Bot',
+    mode: 'chat',
+    category: 'music',
+    model_config: {
+      pre_prompt: 'I need you to play the role of a storyteller, and generate creative and vivid short stories based on the keywords I provide.',
+    }
+  },
+  {
+    id: 2,
+    name: 'Code Translate',
+    mode: 'completion',
+    category: 'news',
+  },
+]
+
+const mockCategories = ['music', 'news']
+
+const isMock = true
+const Apps: FC = ({ }) => {
+  const [currCategory, setCurrCategory] = React.useState('')
+  const [allList, setAllList] = React.useState(isMock ? mockList : [])
+  const currList = (() => {
+    if(currCategory === '') return allList
+    return allList.filter(item => item.category === currCategory)
+  })()
+  const [categories, setCategories] = React.useState(isMock ? mockCategories : [])
+  useEffect(() => {
+    if(!isMock) {
+      (async () => {
+        const {categories, recommended_apps}:any = await fetchAppList()
+        setCategories(categories)
+        setAllList(recommended_apps)
+      })()
+    }
+  }, [])
+  return (
+    <div className='h-full flex flex-col'>
+      <div className='shrink-0 pt-6 px-12'>
+        <div className='mb-1 text-primary-600 text-xl font-semibold'>Explore Apps by Dify</div>
+        <div className='text-gray-500 text-sm'>Use these template apps instantly or customize your own apps based on the templates.</div>
+      </div>
+      <Category
+        className='mt-6 px-12'
+        list={categories}
+        value={currCategory}
+        onChange={setCurrCategory}
+      />
+      <div className='flex flex-col overflow-auto bg-gray-100 shrink-0 grow'>
+        <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-6 sm:grid-cols-2 lg:grid-cols-4 grow shrink-0'>
+          {currList.map(item => (
+            <AppCard key={item.id} app={item as any} />
+          ))}
+        </nav>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Apps)

web/app/components/explore/category.tsx

@@ -0,0 +1,42 @@
+'use client'
+import React, { FC } from 'react'
+import cn from 'classnames'
+
+export interface ICategoryProps {
+  className?: string
+  list: string[]
+  value: string
+  onChange: (value: string) => void
+}
+
+const Category: FC<ICategoryProps> = ({
+  className,
+  list,
+  value,
+  onChange
+}) => {
+  const itemClassName = (isSelected: boolean) => cn(isSelected ? 'bg-white text-primary-600 border-gray-200 font-semibold' : 'border-transparent font-medium','flex items-center h-7 px-3 border cursor-pointer rounded')
+  const itemStyle = (isSelected: boolean) => isSelected ? {boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)'} : {}
+  return (
+    <div className={cn(className, 'flex space-x-1 text-[13px]')}>
+      <div 
+          className={itemClassName('' === value)}
+          style={itemStyle('' === value)}
+          onClick={() => onChange('')}
+        >
+          All Categories
+        </div>
+      {list.map(name => (
+        <div 
+          key={name}
+          className={itemClassName(name === value)}
+          style={itemStyle(name === value)}
+          onClick={() => onChange(name)}
+        >
+          {name}
+        </div>
+      ))}
+    </div>
+  )
+}
+export default React.memo(Category)

web/service/explore.ts

@@ -0,0 +1,5 @@
+import { get } from './base'
+
+export const fetchAppList = () => {
+  return get('/explore/apps')
+}