feat: handle add to workspace and customize

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

@@ -16,11 +16,15 @@ const CustomizeBtn = (
 )
 
 export type AppCardProps = {
-  app: App
+  app: App,
+  onCreate: () => void,
+  onAddToWorkspace: (appId: string) => void,
 }
 
 const AppCard = ({
   app,
+  onCreate,
+  onAddToWorkspace
 }: AppCardProps) => {
   const { t } = useTranslation()
 
@@ -39,11 +43,11 @@ const AppCard = ({
             <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 '>
+            <Button type='primary' className='grow flex items-center !h-7' onClick={() => onAddToWorkspace(app.id)}>
               <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'>
+            <Button className='grow flex items-center !h-7 space-x-1' onClick={onCreate}>
               {CustomizeBtn}
               <span className='text-xs'>{t('explore.appCard.customize')}</span>
             </Button>

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

@@ -4,6 +4,7 @@ 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 CreateAppModal from '@/app/components/explore/create-app-modal'
 
 import s from './style.module.css'
 
@@ -65,6 +66,16 @@ const Apps: FC = ({ }) => {
       })()
     }
   }, [])
+
+  const handleAddToWorkspace =  (appId: string) => {
+    console.log('handleAddToWorkspace', appId)
+  }
+
+  const [currApp, setCurrApp] = React.useState<any>(null)
+  const [isShowCreateModal, setIsShowCreateModal] = React.useState(false)
+  const onCreate = ({name}: any) => {
+    console.log({id: currApp.id, name})
+  }
   return (
     <div className='h-full flex flex-col'>
       <div className='shrink-0 pt-6 px-12'>
@@ -80,10 +91,27 @@ const Apps: FC = ({ }) => {
       <div className='flex flex-col overflow-auto bg-gray-100 shrink-0 grow'>
         <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} />
+            <AppCard 
+              key={item.id}
+              app={item as any}
+              onCreate={() => {
+                setCurrApp(item)
+                setIsShowCreateModal(true)
+              }}
+              onAddToWorkspace={handleAddToWorkspace}
+            />
           ))}
         </nav>
       </div>
+
+      {isShowCreateModal && (
+          <CreateAppModal
+            appName={currApp.name}
+            show={isShowCreateModal}
+            onConfirm={onCreate}
+            onHide={() => setIsShowCreateModal(false)}
+          />
+        )}
     </div>
   )
 }

web/app/components/explore/create-app-modal/index.tsx

@@ -0,0 +1,66 @@
+'use client'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import Toast from '@/app/components/base/toast'
+
+import cn from 'classnames'
+import s from './style.module.css'
+
+type IProps = {
+  appName: string,
+  show: boolean,
+  onConfirm: (info: any) => void,
+  onHide: () => void,
+}
+
+const CreateAppModal = ({
+  appName,
+  show = false,
+  onConfirm,
+  onHide,
+}: IProps) => {
+  const { t } = useTranslation()
+
+  const [name, setName] = React.useState('')
+
+  const submit = () => {
+    if(!name.trim()) {
+      Toast.notify({ type: 'error', message: t('explore.appCustomize.nameRequired') })
+      return
+    }
+    onConfirm({
+      name,
+    })
+    onHide()
+  }
+
+  return (
+    <Modal
+      isShow={show}
+      onClose={onHide}
+      className={cn(s.modal, '!max-w-[480px]', 'px-8')}
+    >
+      <span className={s.close} onClick={onHide}/>
+      <div className={s.title}>{t('explore.appCustomize.title', {name: appName})}</div>
+      <div className={s.content}>
+        <div className={s.subTitle}>{t('explore.appCustomize.subTitle')}</div>
+        <div className='flex items-center justify-between space-x-3'>
+          <div className='w-10 h-10 rounded-lg bg-[#EFF1F5]'></div>
+          <input 
+            value={name}
+            onChange={e => setName(e.target.value)}
+            className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow'
+          />
+        </div>
+      </div>      
+      <div className='flex flex-row-reverse'>
+        <Button className='w-24 ml-2' type='primary' onClick={submit}>{t('common.operation.create')}</Button>
+        <Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default CreateAppModal

web/app/components/explore/create-app-modal/style.module.css

@@ -0,0 +1,36 @@
+.modal {
+  position: relative;
+}
+
+.modal .close {
+  position: absolute;
+  right: 16px;
+  top: 25px;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: center no-repeat url(~@/app/components/datasets/create/assets/close.svg);
+  background-size: 16px;
+  cursor: pointer;
+}
+
+.modal .title {
+  @apply mb-9;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 30px;
+  color: #101828;
+}
+
+.modal .content {
+  @apply mb-9;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  color: #101828;
+}
+
+.subTitle {
+  margin-bottom: 8px;
+  font-weight: 500;
+}

web/i18n/lang/common.en.ts

@@ -6,6 +6,7 @@ const translation = {
     remove: 'Removed',
   },
   operation: {
+    create: 'Create',
     confirm: 'Confirm',
     cancel: 'Cancel',
     clear: 'Clear',

web/i18n/lang/common.zh.ts

@@ -6,6 +6,7 @@ const translation = {
     remove: '已移除',
   },
   operation: {
+    create: '创建',
     confirm: '确认',
     cancel: '取消',
     clear: '清空',

web/i18n/lang/explore.en.ts

@@ -11,6 +11,11 @@ const translation = {
   appCard: {
     addToWorkspace: 'Add to Workspace',
     customize: 'Customize',
+  },
+  appCustomize: {
+    title: 'Create app from {{name}}',
+    subTitle: 'App icon & name',
+    nameRequired: 'App name is required',
   }
 }
 

web/i18n/lang/explore.zh.ts

@@ -11,6 +11,11 @@ const translation = {
   appCard: {
     addToWorkspace: '添加到工作区',
     customize: '自定义',
+  },
+  appCustomize: {
+    title: '从 {{name}} 创建应用程序',
+    subTitle: '应用程序图标和名称',
+    nameRequired: '应用程序名称不能为空',
   }
 }