diff --git a/web/app/components/explore/app-list/__tests__/index.spec.tsx b/web/app/components/explore/app-list/__tests__/index.spec.tsx index 47542c4e42..7598a2c2ca 100644 --- a/web/app/components/explore/app-list/__tests__/index.spec.tsx +++ b/web/app/components/explore/app-list/__tests__/index.spec.tsx @@ -216,6 +216,24 @@ describe('AppList', () => { expect(screen.getAllByText('explore.continueWork.editedAt:{"time":"3 minutes ago"}')).toHaveLength(5) expect(screen.getByRole('link', { name: 'explore.continueWork.exploreStudio' })).toHaveAttribute('href', '/apps') }) + + it('should render learn dify templates without badges or template metadata', () => { + mockExploreData = { + categories: ['Writing'], + allList: [createApp()], + } + + renderAppList() + + expect(screen.getByRole('heading', { name: 'explore.learnDify.title' })).toBeInTheDocument() + expect(screen.getByText('Your first Workflow - say hello to AI')).toBeInTheDocument() + expect(screen.getByText('Build a working Agent with Workflow')).toBeInTheDocument() + expect(screen.getByRole('link', { name: 'explore.learnDify.moreTemplates' })).toHaveAttribute('href', '/explore/apps') + expect(screen.queryByText('Run this first')).not.toBeInTheDocument() + expect(screen.queryByText('Then try this')).not.toBeInTheDocument() + expect(screen.queryByText('workflow')).not.toBeInTheDocument() + expect(screen.queryByText('3 min')).not.toBeInTheDocument() + }) }) describe('Props', () => { diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx index 958c4459a1..e5f7a4f13f 100644 --- a/web/app/components/explore/app-list/index.tsx +++ b/web/app/components/explore/app-list/index.tsx @@ -19,6 +19,7 @@ import Banner from '@/app/components/explore/banner/banner' import Category from '@/app/components/explore/category' import ContinueWork from '@/app/components/explore/continue-work' import CreateAppModal from '@/app/components/explore/create-app-modal' +import LearnDify from '@/app/components/explore/learn-dify' import { useAppContext } from '@/context/app-context' import { useImportDSL } from '@/hooks/use-import-dsl' import { @@ -193,6 +194,7 @@ const Apps = ({ )} +
{ + const { t } = useTranslation() + + return ( +
+
+
+
+

+ {t('learnDify.title', { ns: 'explore' })} +

+ +
+
+

+ {t('learnDify.description', { ns: 'explore' })} +

+ + {t('learnDify.moreTemplates', { ns: 'explore' })} + +
+
+
+
+ {learnDifyItems.map(item => ( + + ))} +
+
+ ) +} + +export default React.memo(LearnDify) diff --git a/web/app/components/explore/learn-dify/item.tsx b/web/app/components/explore/learn-dify/item.tsx new file mode 100644 index 0000000000..9d463f3fbe --- /dev/null +++ b/web/app/components/explore/learn-dify/item.tsx @@ -0,0 +1,35 @@ +'use client' + +import type { LearnDifyItem as LearnDifyItemData } from './data' +import * as React from 'react' +import AppIcon from '@/app/components/base/app-icon' + +type LearnDifyItemProps = { + item: LearnDifyItemData +} + +const LearnDifyItem = ({ + item, +}: LearnDifyItemProps) => { + return ( +
+
+ +

+ {item.title} +

+
+

+ {item.description} +

+
+ ) +} + +export default React.memo(LearnDifyItem) diff --git a/web/i18n/en-US/explore.json b/web/i18n/en-US/explore.json index 3b17980a35..58c63413cd 100644 --- a/web/i18n/en-US/explore.json +++ b/web/i18n/en-US/explore.json @@ -23,6 +23,10 @@ "continueWork.editedAt": "Edited {{time}}", "continueWork.exploreStudio": "Explore Studio →", "continueWork.title": "Continue work with", + "learnDify.description": "Follow the path - or jump to whichever step you're ready for.", + "learnDify.hide": "Hide", + "learnDify.moreTemplates": "More learning templates →", + "learnDify.title": "Learn Dify", "sidebar.action.delete": "Delete", "sidebar.action.pin": "Pin", "sidebar.action.rename": "Rename", diff --git a/web/i18n/zh-Hans/explore.json b/web/i18n/zh-Hans/explore.json index 2e8aaf5d1c..23695939cd 100644 --- a/web/i18n/zh-Hans/explore.json +++ b/web/i18n/zh-Hans/explore.json @@ -23,6 +23,10 @@ "continueWork.editedAt": "{{time}}编辑", "continueWork.exploreStudio": "探索工作室 →", "continueWork.title": "继续处理", + "learnDify.description": "按路径学习,或直接跳到你准备好的步骤。", + "learnDify.hide": "隐藏", + "learnDify.moreTemplates": "更多学习模板 →", + "learnDify.title": "学习 Dify", "sidebar.action.delete": "删除", "sidebar.action.pin": "置顶", "sidebar.action.rename": "重命名",