Chore: frontend infrastructure upgrade (#16420)

Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>

web/app/components/datasets/create/website/base/checkbox-with-label.tsx

@@ -23,7 +23,7 @@ const CheckboxWithLabel: FC<Props> = ({
   tooltip,
 }) => {
   return (
-    <label className={cn(className, 'flex items-center h-7 space-x-2')}>
+    <label className={cn(className, 'flex h-7 items-center space-x-2')}>
       <Checkbox checked={isChecked} onCheck={() => onChange(!isChecked)} />
       <div className={cn('text-sm font-normal text-text-secondary', labelClassName)}>{label}</div>
       {tooltip && (

web/app/components/datasets/create/website/base/crawled-result-item.tsx

@@ -28,12 +28,12 @@ const CrawledResultItem: FC<Props> = ({
     onCheckChange(!isChecked)
   }, [isChecked, onCheckChange])
   return (
-    <div className={cn(isPreview ? 'bg-state-base-active' : 'group hover:bg-state-base-hover', 'rounded-lg p-2 cursor-pointer')}>
+    <div className={cn(isPreview ? 'bg-state-base-active' : 'group hover:bg-state-base-hover', 'cursor-pointer rounded-lg p-2')}>
       <div className='relative flex'>
-        <div className='h-5 flex items-center'>
+        <div className='flex h-5 items-center'>
           <Checkbox className='mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
         </div>
-        <div className='flex flex-col grow min-w-0'>
+        <div className='flex min-w-0 grow flex-col'>
           <div
             className='truncate text-sm font-medium text-text-secondary'
             title={payload.title}
@@ -49,7 +49,7 @@ const CrawledResultItem: FC<Props> = ({
         </div>
         <Button
           onClick={onPreview}
-          className='hidden group-hover:block group-hover:absolute top-0 right-0 h-6 px-1.5 text-xs font-medium uppercase'
+          className='right-0 top-0 hidden h-6 px-1.5 text-xs font-medium uppercase group-hover:absolute group-hover:block'
         >
           {t('datasetCreation.stepOne.website.preview')}
         </Button>

web/app/components/datasets/create/website/base/crawled-result.tsx

@@ -58,7 +58,7 @@ const CrawledResult: FC<Props> = ({
 
   return (
     <div className={cn(className, 'border-t-[0.5px] border-divider-regular shadow-xs shadow-shadow-shadow-3')}>
-      <div className='flex items-center justify-between h-[34px] px-4'>
+      <div className='flex h-[34px] items-center justify-between px-4'>
         <CheckboxWithLabel
           isChecked={isCheckAll}
           onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}

web/app/components/datasets/create/website/base/crawling.tsx

@@ -19,8 +19,8 @@ const Crawling: FC<Props> = ({
 
   return (
     <div className={className}>
-      <div className='flex items-center h-[34px] px-4 shadow-xs shadow-shadow-shadow-3
-        border-y-[0.5px] border-divider-regular text-xs text-text-tertiary'>
+      <div className='flex h-[34px] items-center border-y-[0.5px] border-divider-regular px-4
+        text-xs text-text-tertiary shadow-xs shadow-shadow-shadow-3'>
         {t('datasetCreation.stepOne.website.totalPageScraped')} {crawledNum}/{totalNum}
       </div>
 

web/app/components/datasets/create/website/base/error-message.tsx

@@ -16,13 +16,13 @@ const ErrorMessage: FC<Props> = ({
   errorMsg,
 }) => {
   return (
-    <div className={cn(className, 'py-2 px-4 border-t border-divider-subtle bg-dataset-warning-message-bg opacity-40')}>
-      <div className='flex items-center h-5'>
-        <AlertTriangle className='mr-2 w-4 h-4 text-text-warning-secondary' />
+    <div className={cn(className, 'border-t border-divider-subtle bg-dataset-warning-message-bg px-4 py-2 opacity-40')}>
+      <div className='flex h-5 items-center'>
+        <AlertTriangle className='mr-2 h-4 w-4 text-text-warning-secondary' />
         <div className='system-md-medium text-text-warning'>{title}</div>
       </div>
       {errorMsg && (
-        <div className='mt-1 pl-6 system-xs-regular text-text-secondary'>{errorMsg}</div>
+        <div className='system-xs-regular mt-1 pl-6 text-text-secondary'>{errorMsg}</div>
       )}
     </div>
   )

web/app/components/datasets/create/website/base/field.tsx

@@ -31,7 +31,7 @@ const Field: FC<Props> = ({
   return (
     <div className={cn(className)}>
       <div className='flex py-[7px]'>
-        <div className={cn(labelClassName, 'flex items-center h-[16px] text-[13px] font-semibold text-text-secondary')}>{label} </div>
+        <div className={cn(labelClassName, 'flex h-[16px] items-center text-[13px] font-semibold text-text-secondary')}>{label} </div>
         {isRequired && <span className='ml-0.5 text-xs font-semibold text-text-destructive'>*</span>}
         {tooltip && (
           <Tooltip

web/app/components/datasets/create/website/base/input.tsx

@@ -50,12 +50,12 @@ const Input: FC<Props> = ({
       {...otherOption}
       value={value}
       onChange={handleChange}
-      className='flex h-8 w-full p-2 rounded-lg system-xs-regular text-components-input-text-filled bg-components-input-bg-normal
-      caret-[#295eff] border border-transparent
-        hover:bg-components-input-bg-hover hover:border hover:border-components-input-border-hover
-        focus-visible:outline-none focus:bg-components-inout-border-active focus:border focus:border-components-input-border-active
+      className='system-xs-regular focus:bg-components-inout-border-active flex h-8 w-full rounded-lg border border-transparent
+      bg-components-input-bg-normal p-2 text-components-input-text-filled
+        caret-[#295eff] placeholder:text-components-input-text-placeholder hover:border
+        hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border focus:border-components-input-border-active
         focus:shadow-xs focus:shadow-shadow-shadow-3
-        placeholder:text-components-input-text-placeholder'
+        focus-visible:outline-none'
       placeholder={placeholder}
     />
   )

web/app/components/datasets/create/website/base/options-wrap.tsx

@@ -34,14 +34,14 @@ const OptionsWrap: FC<Props> = ({
   return (
     <div className={cn(className, !fold ? 'mb-0' : 'mb-3')}>
       <div
-        className='flex items-center gap-x-1 h-[26px] py-1 cursor-pointer select-none'
+        className='flex h-[26px] cursor-pointer select-none items-center gap-x-1 py-1'
         onClick={foldToggle}
       >
-        <div className='flex items-center grow'>
-          <RiEqualizer2Line className='mr-1 w-4 h-4 text-text-secondary' />
-          <span className='text-[13px] leading-[16px] font-semibold text-text-secondary uppercase'>{t(`${I18N_PREFIX}.options`)}</span>
+        <div className='flex grow items-center'>
+          <RiEqualizer2Line className='mr-1 h-4 w-4 text-text-secondary' />
+          <span className='text-[13px] font-semibold uppercase leading-[16px] text-text-secondary'>{t(`${I18N_PREFIX}.options`)}</span>
         </div>
-        <ChevronRight className={cn(!fold && 'rotate-90', 'w-4 h-4 shrink-0 text-text-tertiary')} />
+        <ChevronRight className={cn(!fold && 'rotate-90', 'h-4 w-4 shrink-0 text-text-tertiary')} />
       </div>
       {!fold && (
         <div className='mb-4'>