From b46f67ed672f572cbaeb5a0b9c88d9ede002ce5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=91=E4=BC=9F=E5=BC=BA?= <iamjoel007@gmail.com>
Date: Wed, 17 May 2023 15:45:30 +0800
Subject: [PATCH] feat: option btn

---
 web/app/components/explore/app-card/index.tsx | 38 +++++++++++++++----
 .../explore/app-card/style.module.css         | 19 ++++++++++
 .../explore/app-card/style.moudle.css         |  0
 web/app/components/explore/app-list/index.tsx | 23 ++++++++++-
 .../explore/app-list/style.module.css         | 12 ++++++
 web/i18n/lang/explore.en.ts                   |  4 ++
 web/i18n/lang/explore.zh.ts                   |  4 ++
 7 files changed, 90 insertions(+), 10 deletions(-)
 create mode 100644 web/app/components/explore/app-card/style.module.css
 delete mode 100644 web/app/components/explore/app-card/style.moudle.css
 create mode 100644 web/app/components/explore/app-list/style.module.css

diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index 1d1f3ac29c..a61ed3bc26 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/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>
   )
 }
 
diff --git a/web/app/components/explore/app-card/style.module.css b/web/app/components/explore/app-card/style.module.css
new file mode 100644
index 0000000000..895d200ef6
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/web/app/components/explore/app-card/style.moudle.css b/web/app/components/explore/app-card/style.moudle.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index 738e1c7c56..ab5012e57a 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/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} />
           ))}
diff --git a/web/app/components/explore/app-list/style.module.css b/web/app/components/explore/app-list/style.module.css
new file mode 100644
index 0000000000..33066d2916
--- /dev/null
+++ b/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))
+  }
+} */
\ No newline at end of file
diff --git a/web/i18n/lang/explore.en.ts b/web/i18n/lang/explore.en.ts
index 7a2ec27335..b82381c2e7 100644
--- a/web/i18n/lang/explore.en.ts
+++ b/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',
   }
 }
 
diff --git a/web/i18n/lang/explore.zh.ts b/web/i18n/lang/explore.zh.ts
index a3e44b1ce3..b449bade59 100644
--- a/web/i18n/lang/explore.zh.ts
+++ b/web/i18n/lang/explore.zh.ts
@@ -7,6 +7,10 @@ const translation = {
     title: '探索 Dify 的应用',
     description: '使用这些模板应用程序，或根据模板自定义您自己的应用程序。',
     allCategories: '所有类别',
+  },
+  appCard: {
+    addToWorkspace: '添加到工作区',
+    customize: '自定义',
   }
 }