feat: add back button

web/app/(commonLayout)/datasets/Container.tsx

@@ -83,7 +83,7 @@ const Container = () => {
 
   return (
     <div ref={containerRef} className='grow relative flex flex-col bg-background-body overflow-y-auto scroll-container'>
-      <CreateModal onSave={(data) => { console.log(data) }} />
+      <CreateModal hasBack onSave={(data) => { console.log(data) }} />
       <div className='sticky top-0 flex justify-between pt-4 px-12 pb-2 leading-[56px] bg-background-body z-10 flex-wrap gap-y-2'>
         <TabSliderNew
           value={activeTab}

web/app/components/base/modal-like-wrap/index.tsx

@@ -9,7 +9,9 @@ import { RiCloseLine } from '@remixicon/react'
 type Props = {
   title: string
   className?: string
+  beforeHeader?: React.ReactNode
   onClose: () => void
+  hideCloseBtn?: boolean
   onConfirm: () => void
   children: React.ReactNode
 }
@@ -17,22 +19,27 @@ type Props = {
 const ModalLikeWrap: FC<Props> = ({
   title,
   className,
+  beforeHeader,
   children,
   onClose,
+  hideCloseBtn,
   onConfirm,
 }) => {
   const { t } = useTranslation()
 
   return (
     <div className={cn('w-[320px] px-3 pt-3.5 pb-4 bg-components-panel-bg shadow-xl rounded-2xl border-[0.5px] border-components-panel-border', className)}>
+      {beforeHeader || null}
       <div className='mb-1 flex h-6 items-center justify-between'>
         <div className='system-xl-semibold text-text-primary'>{title}</div>
-        <div
+        {!hideCloseBtn && (
-          className='p-1.5 text-text-tertiary cursor-pointer'
+          <div
-          onClick={onClose}
+            className='p-1.5 text-text-tertiary cursor-pointer'
-        >
+            onClick={onClose}
-          <RiCloseLine className='size-4' />
+          >
-        </div>
+            <RiCloseLine className='size-4' />
+          </div>
+        )}
       </div>
       <div className='mt-2'>{children}</div>
       <div className='mt-4 flex justify-end'>

web/app/components/datasets/metadata/create-modal.tsx

@@ -7,15 +7,20 @@ import { DataType } from './types'
 import Field from './field'
 import OptionCard from '../../workflow/nodes/_base/components/option-card'
 import Input from '@/app/components/base/input'
+import { RiArrowLeftLine } from '@remixicon/react'
 
 const i18nPrefix = 'dataset.metadata.createMetadata'
 
 type Props = {
   onSave: (data: any) => void
+  hasBack?: boolean
+  onBack?: () => void
 }
 
 const CreateModal: FC<Props> = ({
   onSave,
+  hasBack,
+  onBack,
 }) => {
   const { t } = useTranslation()
   const [type, setType] = useState(DataType.string)
@@ -38,6 +43,13 @@ const CreateModal: FC<Props> = ({
       title={t(`${i18nPrefix}.title`)}
       onClose={() => { }}
       onConfirm={handleSave}
+      hideCloseBtn={hasBack}
+      beforeHeader={hasBack && (
+        <div className='relative left-[-4px] mb-1 flex items-center py-1 space-x-1 text-text-accent cursor-pointer' onClick={onBack}>
+          <RiArrowLeftLine className='size-4' />
+          <div className='system-xs-semibold-uppercase'>{t(`${i18nPrefix}.back`)}</div>
+        </div>
+      )}
     >
       <div className='space-y-3'>
         <Field label={t(`${i18nPrefix}.type`)}>

web/i18n/en-US/dataset.ts

@@ -171,6 +171,7 @@ const translation = {
   metadata: {
     createMetadata: {
       title: 'New Metadata',
+      back: 'Back',
       type: 'Type',
       name: 'Name',
       namePlaceholder: 'Add metadata name',

web/i18n/zh-Hans/dataset.ts

@@ -171,6 +171,7 @@ const translation = {
   metadata: {
     createMetadata: {
       title: '新建元数据',
+      back: '返回',
       type: '类型',
       name: '名称',
       namePlaceholder: '添加元数据名称',