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/documents/detail/completed/skeleton/full-doc-list-skeleton.tsx

@@ -3,10 +3,10 @@ import React from 'react'
 const Slice = React.memo(() => {
   return (
     <div className='flex flex-col gap-y-1'>
-      <div className='w-full h-5 bg-state-base-hover flex items-center'>
-        <span className='w-[30px] h-5 bg-state-base-hover-alt' />
+      <div className='flex h-5 w-full items-center bg-state-base-hover'>
+        <span className='h-5 w-[30px] bg-state-base-hover-alt' />
       </div>
-      <div className='w-2/3 h-5 bg-state-base-hover' />
+      <div className='h-5 w-2/3 bg-state-base-hover' />
     </div>
   )
 })
@@ -15,8 +15,8 @@ Slice.displayName = 'Slice'
 
 const FullDocListSkeleton = () => {
   return (
-    <div className='w-full grow flex flex-col gap-y-3 relative z-10 overflow-y-hidden'>
-      <div className='absolute top-0 left-0 bottom-14 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
+    <div className='relative z-10 flex w-full grow flex-col gap-y-3 overflow-y-hidden'>
+      <div className='absolute bottom-14 left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg' />
       {[...Array.from({ length: 15 })].map((_, index) => <Slice key={index} />)}
     </div>
   )

web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx

@@ -10,8 +10,8 @@ import Divider from '@/app/components/base/divider'
 
 export const CardSkelton = React.memo(() => {
   return (
-    <SkeletonContainer className='p-1 pb-2 gap-y-0'>
-      <SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
+    <SkeletonContainer className='gap-y-0 p-1 pb-2'>
+      <SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
         <SkeletonRow className='py-0.5'>
           <SkeletonRectangle className='w-[72px] bg-text-quaternary' />
           <SkeletonPoint className='opacity-20' />
@@ -20,7 +20,7 @@ export const CardSkelton = React.memo(() => {
           <SkeletonRectangle className='w-24 bg-text-quaternary' />
           <SkeletonRow className='grow justify-end gap-1'>
             <SkeletonRectangle className='w-12 bg-text-quaternary' />
-            <SkeletonRectangle className='w-2 bg-text-quaternary mx-1' />
+            <SkeletonRectangle className='mx-1 w-2 bg-text-quaternary' />
           </SkeletonRow>
         </SkeletonRow>
         <SkeletonRow className='py-0.5'>
@@ -48,20 +48,20 @@ CardSkelton.displayName = 'CardSkelton'
 
 const GeneralListSkeleton = () => {
   return (
-    <div className='relative flex flex-col grow overflow-y-hidden z-10'>
-      <div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
+    <div className='relative z-10 flex grow flex-col overflow-y-hidden'>
+      <div className='absolute left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg' />
       {[...Array.from({ length: 10 })].map((_, index) => {
         return (
           <div key={index} className='flex items-start gap-x-2'>
             <Checkbox
               key={`${index}-checkbox`}
-              className='shrink-0 mt-3.5'
+              className='mt-3.5 shrink-0'
               disabled
             />
             <div className='grow'>
               <CardSkelton />
               {index !== 9 && <div className='w-full px-3'>
-                <Divider type='horizontal' className='bg-divider-subtle my-1' />
+                <Divider type='horizontal' className='my-1 bg-divider-subtle' />
               </div>}
             </div>
           </div>

web/app/components/datasets/documents/detail/completed/skeleton/paragraph-list-skeleton.tsx

@@ -11,8 +11,8 @@ import Divider from '@/app/components/base/divider'
 
 const CardSkelton = React.memo(() => {
   return (
-    <SkeletonContainer className='p-1 pb-2 gap-y-0'>
-      <SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
+    <SkeletonContainer className='gap-y-0 p-1 pb-2'>
+      <SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
         <SkeletonRow className='py-0.5'>
           <SkeletonRectangle className='w-[72px] bg-text-quaternary' />
           <SkeletonPoint className='opacity-20' />
@@ -21,7 +21,7 @@ const CardSkelton = React.memo(() => {
           <SkeletonRectangle className='w-24 bg-text-quaternary' />
           <SkeletonRow className='grow justify-end gap-1'>
             <SkeletonRectangle className='w-12 bg-text-quaternary' />
-            <SkeletonRectangle className='w-2 bg-text-quaternary mx-1' />
+            <SkeletonRectangle className='mx-1 w-2 bg-text-quaternary' />
           </SkeletonRow>
         </SkeletonRow>
         <SkeletonRow className='py-0.5'>
@@ -36,8 +36,8 @@ const CardSkelton = React.memo(() => {
       </SkeletonContainer>
       <SkeletonContainer className='p-1 pb-2'>
         <SkeletonRow>
-          <SkeletonRow className='h-7 pl-1 pr-3 gap-x-0.5 rounded-lg bg-dataset-child-chunk-expand-btn-bg'>
-            <RiArrowRightSLine className='w-4 h-4 text-text-secondary opacity-20' />
+          <SkeletonRow className='h-7 gap-x-0.5 rounded-lg bg-dataset-child-chunk-expand-btn-bg pl-1 pr-3'>
+            <RiArrowRightSLine className='h-4 w-4 text-text-secondary opacity-20' />
             <SkeletonRectangle className='w-32 bg-text-quaternary' />
           </SkeletonRow>
         </SkeletonRow>
@@ -50,20 +50,20 @@ CardSkelton.displayName = 'CardSkelton'
 
 const ParagraphListSkeleton = () => {
   return (
-    <div className='relative flex flex-col h-full overflow-y-hidden z-10'>
-      <div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
+    <div className='relative z-10 flex h-full flex-col overflow-y-hidden'>
+      <div className='absolute left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg' />
       {[...Array.from({ length: 10 })].map((_, index) => {
         return (
           <div key={index} className='flex items-start gap-x-2'>
             <Checkbox
               key={`${index}-checkbox`}
-              className='shrink-0 mt-3.5'
+              className='mt-3.5 shrink-0'
               disabled
             />
             <div className='grow'>
               <CardSkelton />
               {index !== 9 && <div className='w-full px-3'>
-                <Divider type='horizontal' className='bg-divider-subtle my-1' />
+                <Divider type='horizontal' className='my-1 bg-divider-subtle' />
               </div>}
             </div>
           </div>

web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx

@@ -11,8 +11,8 @@ const ParentChunkCardSkelton = () => {
   const { t } = useTranslation()
   return (
     <div className='flex flex-col pb-2'>
-      <SkeletonContainer className='p-1 pb-0 gap-y-0'>
-        <SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
+      <SkeletonContainer className='gap-y-0 p-1 pb-0'>
+        <SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
           <SkeletonRow className='py-0.5'>
             <SkeletonRectangle className='w-[72px] bg-text-quaternary' />
             <SkeletonPoint className='opacity-20' />
@@ -31,8 +31,8 @@ const ParentChunkCardSkelton = () => {
           </SkeletonRow>
         </SkeletonContainer>
       </SkeletonContainer>
-      <div className='flex items-center px-3 mt-0.5'>
-        <button type='button' className='pt-0.5 text-components-button-secondary-accent-text-disabled system-xs-semibold-uppercase' disabled>
+      <div className='mt-0.5 flex items-center px-3'>
+        <button type='button' className='system-xs-semibold-uppercase pt-0.5 text-components-button-secondary-accent-text-disabled' disabled>
           {t('common.operation.viewMore')}
         </button>
       </div>