feat: option btn

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

@@ -1,10 +1,19 @@
 'use client'
-import Link from 'next/link'
-// import { useTranslation } from 'react-i18next'
-// import s from './style.module.css'
+import cn from 'classnames'
+import { useTranslation } from 'react-i18next'
 import AppModeLabel from '@/app/(commonLayout)/apps/AppModeLabel'
 import type { App } from '@/types/app'
 import AppIcon from '@/app/components/base/app-icon'
+import { PlusIcon } from '@heroicons/react/20/solid'
+import Button from '../../base/button'
+
+import s from './style.module.css'
+
+const CustomizeBtn = (
+  <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.5 2.33366C6.69458 2.33366 6.04167 2.98658 6.04167 3.79199C6.04167 4.59741 6.69458 5.25033 7.5 5.25033C8.30542 5.25033 8.95833 4.59741 8.95833 3.79199C8.95833 2.98658 8.30542 2.33366 7.5 2.33366ZM7.5 2.33366V1.16699M12.75 8.71385C11.4673 10.1671 9.59071 11.0837 7.5 11.0837C5.40929 11.0837 3.53265 10.1671 2.25 8.71385M6.76782 5.05298L2.25 12.8337M8.23218 5.05298L12.75 12.8337" stroke="#344054" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+)
 
 export type AppCardProps = {
   app: App
@@ -13,10 +22,11 @@ export type AppCardProps = {
 const AppCard = ({
   app,
 }: AppCardProps) => {
+  const { t } = useTranslation()
 
   return (
-    <>
-      <Link href={`/app/${app.id}/overview`} className='col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'>
+    <div className={s.wrap}>
+      <div className='col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'>
         <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
           <AppIcon size='small' />
           <div className='relative h-8 text-sm font-medium leading-8 grow'>
@@ -25,10 +35,22 @@ const AppCard = ({
         </div>
         <div className='mb-3 px-[14px] h-9 text-xs leading-normal text-gray-500 line-clamp-2'>{app.model_config?.pre_prompt}</div>
         <div className='flex items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px]'>
-          <AppModeLabel mode={app.mode} />
+          <div className={s.mode}>
+            <AppModeLabel mode={app.mode} />
+          </div>
+          <div className={cn(s.opWrap, 'flex items-center w-full space-x-2')}>
+            <Button type='primary' className='grow flex items-center !h-7 '>
+              <PlusIcon className='w-4 h-4 mr-1' />
+              <span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
+            </Button>
+            <Button className='grow flex items-center !h-7 space-x-1'>
+              {CustomizeBtn}
+              <span className='text-xs'>{t('explore.appCard.customize')}</span>
+            </Button>
+          </div>
         </div>
-      </Link>
-    </>
+      </div>
+    </div>
   )
 }
 

web/app/components/explore/app-card/style.module.css

@@ -0,0 +1,19 @@
+.wrap {
+  min-width: 312px;
+}
+
+.opWrap {
+  display: flex;
+}
+
+.mode {
+  display: none;
+}
+
+.wrap:hover .mode {
+  display: none;
+}
+
+.wrap:hover .opWrap {
+  display: flex;
+}

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

@@ -1,11 +1,12 @@
 'use client'
-
 import React, { FC, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import Category from '@/app/components/explore/category'
 import AppCard from '@/app/components/explore/app-card'
 import { fetchAppList } from '@/service/explore'
 
+import s from './style.module.css'
+
 const mockList = [
   {
     id: 1,
@@ -22,6 +23,24 @@ const mockList = [
     mode: 'completion',
     category: 'news',
   },
+  {
+    id: 3,
+    name: 'Code Translate',
+    mode: 'completion',
+    category: 'news',
+  },
+  {
+    id: 4,
+    name: 'Code Translate',
+    mode: 'completion',
+    category: 'news',
+  },
+  {
+    id: 5,
+    name: 'Code Translate',
+    mode: 'completion',
+    category: 'news',
+  },
 ]
 
 const mockCategories = ['music', 'news']
@@ -59,7 +78,7 @@ const Apps: FC = ({ }) => {
         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'>
+        <nav className={`${s.appList} grid content-start grid-cols-1 gap-4 px-12 pt-6 md:grid-cols-2 grow shrink-0`}>
           {currList.map(item => (
             <AppCard key={item.id} app={item as any} />
           ))}

web/app/components/explore/app-list/style.module.css

@@ -0,0 +1,12 @@
+@media (min-width: 1624px) {
+  .appList {
+    grid-template-columns: repeat(4, minmax(0, 1fr))
+  }
+}
+
+
+/* @media (min-width: 1624px) {
+  .appList {
+    grid-template-columns: repeat(3, minmax(0, 1fr))
+  }
+} */

web/i18n/lang/explore.en.ts

@@ -7,6 +7,10 @@ const translation = {
     title: 'Explore Apps by Dify',
     description: 'Use these template apps instantly or customize your own apps based on the templates.',
     allCategories: 'All Categories',
+  },
+  appCard: {
+    addToWorkspace: 'Add to Workspace',
+    customize: 'Customize',
   }
 }
 

web/i18n/lang/explore.zh.ts

@@ -7,6 +7,10 @@ const translation = {
     title: '探索 Dify 的应用',
     description: '使用这些模板应用程序，或根据模板自定义您自己的应用程序。',
     allCategories: '所有类别',
+  },
+  appCard: {
+    addToWorkspace: '添加到工作区',
+    customize: '自定义',
   }
 }