fix: update datasource Step1 style

2026-05-06 02:18:08 +08:00 · 2024-12-16 17:54:48 +08:00
parent 8f56c6a7fa
commit a01a28997e
8 changed files with 185 additions and 168 deletions
--- a/web/app/components/datasets/create/file-preview/index.module.css
+++ b/web/app/components/datasets/create/file-preview/index.module.css
@ -1,6 +1,6 @@
 .filePreview {
    @apply flex flex-col border-l border-gray-200 shrink-0;
-    width: 528px;
+    width: 50%;
    background-color: #fcfcfd;
  }
  
--- a/web/app/components/datasets/create/step-one/index.module.css
+++ b/web/app/components/datasets/create/step-one/index.module.css
@ -2,7 +2,7 @@
  position: sticky;
  top: 0;
  left: 0;
-  padding: 42px 64px 12px;
+  padding: 42px 64px 12px 0;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
@ -14,7 +14,7 @@
 }

 .dataSourceItem {
-  @apply box-border relative shrink-0 flex items-center mr-3 p-3 h-14 bg-white rounded-xl cursor-pointer;
+  @apply box-border relative grow shrink-0 flex items-center p-3 h-14 bg-white rounded-xl cursor-pointer;
  border: 0.5px solid #EAECF0;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  font-weight: 500;
@ -22,27 +22,32 @@
  line-height: 20px;
  color: #101828;
 }
+
 .dataSourceItem:hover {
  background-color: #f5f8ff;
  border: 0.5px solid #B2CCFF;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
 }
+
 .dataSourceItem.active {
  background-color: #f5f8ff;
  border: 1.5px solid #528BFF;
  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
 }
+
 .dataSourceItem.disabled {
  background-color: #f9fafb;
  border: 0.5px solid #EAECF0;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  cursor: default;
 }
+
 .dataSourceItem.disabled:hover {
  background-color: #f9fafb;
  border: 0.5px solid #EAECF0;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
 }
+
 .comingTag {
  @apply flex justify-center items-center bg-white;
  position: absolute;
@ -57,6 +62,7 @@
  line-height: 18px;
  color: #444CE7;
 }
+
 .datasetIcon {
  @apply flex mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat;
  background-color: #F5FAFF;
@ -64,15 +70,18 @@
  background-size: 16px;
  border: 0.5px solid #D1E9FF;
 }
+
 .dataSourceItem:active .datasetIcon,
 .dataSourceItem:hover .datasetIcon {
  background-color: #F5F8FF;
  border: 0.5px solid #E0EAFF;
 }
+
 .datasetIcon.notion {
  background-image: url(../assets/notion.svg);
  background-size: 20px;
 }
+
 .datasetIcon.web {
  background-image: url(../assets/web.svg);
 }
@ -119,6 +128,7 @@
  line-height: 24px;
  color: #374151;
 }
+
 .notionConnectionTip .title::after {
  content: '';
  position: absolute;
@ -129,6 +139,7 @@
  background: center no-repeat url(../assets/Icon-3-dots.svg);
  background-size: contain;
 }
+
 .notionConnectionTip .tip {
  margin-bottom: 20px;
  font-style: normal;
@ -136,4 +147,4 @@
  font-size: 13px;
  line-height: 18px;
  color: #6B7280;
-}
+}
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@ -127,161 +127,163 @@ const StepOne = ({

  return (
    <div className='flex w-full h-full'>
-      <div className='grow overflow-y-auto relative'>
-        {
-          shouldShowDataSourceTypeList && (
-            <div className={classNames(s.stepHeader, 'text-text-secondary')}>{t('datasetCreation.steps.one')}</div>
-          )
-        }
-        <div className={classNames(s.form)}>
-          {
-            shouldShowDataSourceTypeList && (
-              <div className='flex items-center mb-8 flex-wrap gap-y-4'>
-                <div
-                  className={cn(
-                    s.dataSourceItem,
-                    dataSourceType === DataSourceType.FILE && s.active,
-                    dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
-                  )}
-                  onClick={() => {
-                    if (dataSourceTypeDisable)
-                      return
-                    changeType(DataSourceType.FILE)
-                    hideFilePreview()
-                    hideNotionPagePreview()
-                  }}
-                >
-                  <span className={cn(s.datasetIcon)} />
-                  {t('datasetCreation.stepOne.dataSourceType.file')}
-                </div>
-                <div
-                  className={cn(
-                    s.dataSourceItem,
-                    dataSourceType === DataSourceType.NOTION && s.active,
-                    dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
-                  )}
-                  onClick={() => {
-                    if (dataSourceTypeDisable)
-                      return
-                    changeType(DataSourceType.NOTION)
-                    hideFilePreview()
-                    hideNotionPagePreview()
-                  }}
-                >
-                  <span className={cn(s.datasetIcon, s.notion)} />
-                  {t('datasetCreation.stepOne.dataSourceType.notion')}
-                </div>
-                <div
-                  className={cn(
-                    s.dataSourceItem,
-                    dataSourceType === DataSourceType.WEB && s.active,
-                    dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
-                  )}
-                  onClick={() => changeType(DataSourceType.WEB)}
-                >
-                  <span className={cn(s.datasetIcon, s.web)} />
-                  {t('datasetCreation.stepOne.dataSourceType.web')}
-                </div>
-              </div>
-            )
-          }
-          {dataSourceType === DataSourceType.FILE && (
-            <>
-              <FileUploader
-                fileList={files}
-                titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg !font-semibold !text-gray-900' : undefined}
-                prepareFileList={updateFileList}
-                onFileListUpdate={updateFileList}
-                onFileUpdate={updateFile}
-                onPreview={updateCurrentFile}
-                notSupportBatchUpload={notSupportBatchUpload}
-              />
-              {isShowVectorSpaceFull && (
-                <div className='max-w-[640px] mb-4'>
-                  <VectorSpaceFull />
-                </div>
-              )}
-              <div className="flex justify-end gap-2 max-w-[640px]">
-                {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
-                <Button disabled={nextDisabled} variant='primary' onClick={onStepChange}>
-                  <span className="flex gap-0.5 px-[10px]">
-                    <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
-                    <RiArrowRightLine className="size-4" />
-                  </span>
-                </Button>
-              </div>
-            </>
-          )}
-          {dataSourceType === DataSourceType.NOTION && (
-            <>
-              {!hasConnection && <NotionConnector onSetting={onSetting} />}
-              {hasConnection && (
-                <>
-                  <div className='mb-8 w-[640px]'>
-                    <NotionPageSelector
-                      value={notionPages.map(page => page.page_id)}
-                      onSelect={updateNotionPages}
-                      onPreview={updateCurrentPage}
-                    />
+      <div className='w-1/2 overflow-y-auto relative'>
+        <div className='flex justify-end'>
+          <div className={classNames(s.form)}>
+            {
+              shouldShowDataSourceTypeList && (
+                <div className={classNames(s.stepHeader, 'text-text-secondary')}>{t('datasetCreation.steps.one')}</div>
+              )
+            }
+            {
+              shouldShowDataSourceTypeList && (
+                <div className='flex items-center mb-8 flex-wrap gap-4'>
+                  <div
+                    className={cn(
+                      s.dataSourceItem,
+                      dataSourceType === DataSourceType.FILE && s.active,
+                      dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
+                    )}
+                    onClick={() => {
+                      if (dataSourceTypeDisable)
+                        return
+                      changeType(DataSourceType.FILE)
+                      hideFilePreview()
+                      hideNotionPagePreview()
+                    }}
+                  >
+                    <span className={cn(s.datasetIcon)} />
+                    {t('datasetCreation.stepOne.dataSourceType.file')}
                  </div>
-                  {isShowVectorSpaceFull && (
-                    <div className='max-w-[640px] mb-4'>
-                      <VectorSpaceFull />
-                    </div>
-                  )}
-                  <div className="flex justify-end gap-2 max-w-[640px]">
-                    {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
-                    <Button disabled={isShowVectorSpaceFull || !notionPages.length} variant='primary' onClick={onStepChange}>
-                      <span className="flex gap-0.5 px-[10px]">
-                        <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
-                        <RiArrowRightLine className="size-4" />
-                      </span>
-                    </Button>
+                  <div
+                    className={cn(
+                      s.dataSourceItem,
+                      dataSourceType === DataSourceType.NOTION && s.active,
+                      dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
+                    )}
+                    onClick={() => {
+                      if (dataSourceTypeDisable)
+                        return
+                      changeType(DataSourceType.NOTION)
+                      hideFilePreview()
+                      hideNotionPagePreview()
+                    }}
+                  >
+                    <span className={cn(s.datasetIcon, s.notion)} />
+                    {t('datasetCreation.stepOne.dataSourceType.notion')}
                  </div>
-                </>
-              )}
-            </>
-          )}
-          {dataSourceType === DataSourceType.WEB && (
-            <>
-              <div className={cn('mb-8 w-[640px]', !shouldShowDataSourceTypeList && 'mt-12')}>
-                <Website
-                  onPreview={setCurrentWebsite}
-                  checkedCrawlResult={websitePages}
-                  onCheckedCrawlResultChange={updateWebsitePages}
-                  onCrawlProviderChange={onWebsiteCrawlProviderChange}
-                  onJobIdChange={onWebsiteCrawlJobIdChange}
-                  crawlOptions={crawlOptions}
-                  onCrawlOptionsChange={onCrawlOptionsChange}
+                  <div
+                    className={cn(
+                      s.dataSourceItem,
+                      dataSourceType === DataSourceType.WEB && s.active,
+                      dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
+                    )}
+                    onClick={() => changeType(DataSourceType.WEB)}
+                  >
+                    <span className={cn(s.datasetIcon, s.web)} />
+                    {t('datasetCreation.stepOne.dataSourceType.web')}
+                  </div>
+                </div>
+              )
+            }
+            {dataSourceType === DataSourceType.FILE && (
+              <>
+                <FileUploader
+                  fileList={files}
+                  titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg !font-semibold !text-gray-900' : undefined}
+                  prepareFileList={updateFileList}
+                  onFileListUpdate={updateFileList}
+                  onFileUpdate={updateFile}
+                  onPreview={updateCurrentFile}
+                  notSupportBatchUpload={notSupportBatchUpload}
                />
-              </div>
-              {isShowVectorSpaceFull && (
-                <div className='max-w-[640px] mb-4'>
-                  <VectorSpaceFull />
+                {isShowVectorSpaceFull && (
+                  <div className='max-w-[640px] mb-4'>
+                    <VectorSpaceFull />
+                  </div>
+                )}
+                <div className="flex justify-end gap-2 max-w-[640px]">
+                  {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
+                  <Button disabled={nextDisabled} variant='primary' onClick={onStepChange}>
+                    <span className="flex gap-0.5 px-[10px]">
+                      <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
+                      <RiArrowRightLine className="size-4" />
+                    </span>
+                  </Button>
                </div>
-              )}
-              <div className="flex justify-end gap-2 max-w-[640px]">
-                {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
-                <Button disabled={isShowVectorSpaceFull || !websitePages.length} variant='primary' onClick={onStepChange}>
-                  <span className="flex gap-0.5 px-[10px]">
-                    <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
-                    <RiArrowRightLine className="size-4" />
-                  </span>
-                </Button>
-              </div>
-            </>
-          )}
-          {!datasetId && (
-            <>
-              <div className={s.dividerLine} />
-              <span className="inline-flex items-center cursor-pointer text-[13px] leading-4 text-text-accent" onClick={modalShowHandle}>
-                <RiFolder6Line className="size-4 mr-1" />
-                {t('datasetCreation.stepOne.emptyDatasetCreation')}
-              </span>
-            </>
-          )}
+              </>
+            )}
+            {dataSourceType === DataSourceType.NOTION && (
+              <>
+                {!hasConnection && <NotionConnector onSetting={onSetting} />}
+                {hasConnection && (
+                  <>
+                    <div className='mb-8 w-[640px]'>
+                      <NotionPageSelector
+                        value={notionPages.map(page => page.page_id)}
+                        onSelect={updateNotionPages}
+                        onPreview={updateCurrentPage}
+                      />
+                    </div>
+                    {isShowVectorSpaceFull && (
+                      <div className='max-w-[640px] mb-4'>
+                        <VectorSpaceFull />
+                      </div>
+                    )}
+                    <div className="flex justify-end gap-2 max-w-[640px]">
+                      {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
+                      <Button disabled={isShowVectorSpaceFull || !notionPages.length} variant='primary' onClick={onStepChange}>
+                        <span className="flex gap-0.5 px-[10px]">
+                          <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
+                          <RiArrowRightLine className="size-4" />
+                        </span>
+                      </Button>
+                    </div>
+                  </>
+                )}
+              </>
+            )}
+            {dataSourceType === DataSourceType.WEB && (
+              <>
+                <div className={cn('mb-8 w-[640px]', !shouldShowDataSourceTypeList && 'mt-12')}>
+                  <Website
+                    onPreview={setCurrentWebsite}
+                    checkedCrawlResult={websitePages}
+                    onCheckedCrawlResultChange={updateWebsitePages}
+                    onCrawlProviderChange={onWebsiteCrawlProviderChange}
+                    onJobIdChange={onWebsiteCrawlJobIdChange}
+                    crawlOptions={crawlOptions}
+                    onCrawlOptionsChange={onCrawlOptionsChange}
+                  />
+                </div>
+                {isShowVectorSpaceFull && (
+                  <div className='max-w-[640px] mb-4'>
+                    <VectorSpaceFull />
+                  </div>
+                )}
+                <div className="flex justify-end gap-2 max-w-[640px]">
+                  {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
+                  <Button disabled={isShowVectorSpaceFull || !websitePages.length} variant='primary' onClick={onStepChange}>
+                    <span className="flex gap-0.5 px-[10px]">
+                      <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
+                      <RiArrowRightLine className="size-4" />
+                    </span>
+                  </Button>
+                </div>
+              </>
+            )}
+            {!datasetId && (
+              <>
+                <div className={s.dividerLine} />
+                <span className="inline-flex items-center cursor-pointer text-[13px] leading-4 text-text-accent" onClick={modalShowHandle}>
+                  <RiFolder6Line className="size-4 mr-1" />
+                  {t('datasetCreation.stepOne.emptyDatasetCreation')}
+                </span>
+              </>
+            )}
+          </div>
+          <EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
        </div>
-        <EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
      </div>
      {currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />}
      {currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />}
--- a/web/app/components/datasets/create/stepper/index.tsx
+++ b/web/app/components/datasets/create/stepper/index.tsx
@ -19,7 +19,7 @@ export const Stepper: FC<StepperProps> = (props) => {
            activeIndex={activeIndex}
            index={index}
          />
-          {!isLast && <div className="w-4 h-px bg-text-quaternary" />}
+          {!isLast && <div className='w-4 h-px bg-divider-deep' />}
        </Fragment>
      )
    })}
--- a/web/app/components/datasets/create/stepper/step.tsx
+++ b/web/app/components/datasets/create/stepper/step.tsx
@ -21,27 +21,26 @@ export const StepperStep: FC<StepperStepProps> = (props) => {
      isActive
        ? 'bg-state-accent-solid'
        : !isDisabled
-          ? 'border border-text-tertiary'
+          ? 'border border-text-quaternary'
          : 'border border-divider-deep',
    )}>
      <div className={classNames(
-        'text-center text-[10px] font-semibold uppercase leading-3',
+        'text-center system-2xs-semibold-uppercase',
        isActive
          ? 'text-text-primary-on-surface'
          : !isDisabled
            ? 'text-text-tertiary'
-            : 'text-text-tertiary opacity-30',
+            : 'text-text-quaternary',
      )}>
        {label}
      </div>
    </div>
-    <div className={classNames(
-      ' text-xs font-medium uppercase leading-none',
+    <div className={classNames('system-xs-medium-uppercase',
      isActive
-        ? 'text-text-accent'
+        ? 'text-text-accent system-xs-semibold-uppercase'
        : !isDisabled
          ? 'text-text-tertiary'
-          : 'text-text-tertiary opacity-30',
+          : 'text-text-quaternary',
    )}>{name}</div>
  </div>
 }
--- a/web/app/components/datasets/create/top-bar/index.tsx
+++ b/web/app/components/datasets/create/top-bar/index.tsx
@ -18,10 +18,10 @@ const STEP_T_MAP: Record<number, string> = {
 export const Topbar: FC<TopbarProps> = (props) => {
  const { className, ...rest } = props
  const { t } = useTranslation()
-  return <div className={classNames('flex items-center justify-between relative border-b border-b-divider-subtle', className)}>
+  return <div className={classNames('flex h-[52px] items-center justify-between relative border-b border-b-divider-subtle', className)}>
    <Link href={'/datasets'} className="h-12 pl-2 pr-6 py-2 justify-start items-center gap-1 inline-flex">
      <RiArrowLeftLine className='size-4 mr-2 text-text-primary' />
-      <p className="text-text-primary text-[13px] font-semibold uppercase leading-none">
+      <p className="text-text-primary system-sm-semibold-uppercase">
        {t('datasetCreation.steps.header.creation')}
      </p>
    </Link>