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/common/action-buttons.tsx

@@ -36,8 +36,8 @@ const ActionButtons: FC<IActionButtonsProps> = ({
     if (loading)
       return
     handleSave()
-  }
-  , { exactMatch: true, useCapture: true })
+  },
+  { exactMatch: true, useCapture: true })
 
   const isParentChildParagraphMode = useMemo(() => {
     return mode === 'hierarchical' && parentMode === 'paragraph'
@@ -49,8 +49,8 @@ const ActionButtons: FC<IActionButtonsProps> = ({
         onClick={handleCancel}
       >
         <div className='flex items-center gap-x-1'>
-          <span className='text-components-button-secondary-text system-sm-medium'>{t('common.operation.cancel')}</span>
-          <span className='px-[1px] bg-components-kbd-bg-gray rounded-[4px] text-text-tertiary system-kbd'>ESC</span>
+          <span className='system-sm-medium text-components-button-secondary-text'>{t('common.operation.cancel')}</span>
+          <span className='system-kbd rounded-[4px] bg-components-kbd-bg-gray px-[1px] text-text-tertiary'>ESC</span>
         </div>
       </Button>
       {(isParentChildParagraphMode && actionType === 'edit' && !isChildChunk)
@@ -58,7 +58,7 @@ const ActionButtons: FC<IActionButtonsProps> = ({
           onClick={handleRegeneration}
           disabled={loading}
         >
-          <span className='text-components-button-secondary-text system-sm-medium'>
+          <span className='system-sm-medium text-components-button-secondary-text'>
             {t('common.operation.saveAndRegenerate')}
           </span>
         </Button>
@@ -72,8 +72,8 @@ const ActionButtons: FC<IActionButtonsProps> = ({
         <div className='flex items-center gap-x-1'>
           <span className='text-components-button-primary-text'>{t('common.operation.save')}</span>
           <div className='flex items-center gap-x-0.5'>
-            <span className='w-4 h-4 bg-components-kbd-bg-white rounded-[4px] text-text-primary-on-surface system-kbd capitalize'>{getKeyboardKeyNameBySystem('ctrl')}</span>
-            <span className='w-4 h-4 bg-components-kbd-bg-white rounded-[4px] text-text-primary-on-surface system-kbd'>S</span>
+            <span className='system-kbd h-4 w-4 rounded-[4px] bg-components-kbd-bg-white capitalize text-text-primary-on-surface'>{getKeyboardKeyNameBySystem('ctrl')}</span>
+            <span className='system-kbd h-4 w-4 rounded-[4px] bg-components-kbd-bg-white text-text-primary-on-surface'>S</span>
           </div>
         </div>
       </Button>

web/app/components/datasets/documents/detail/completed/common/add-another.tsx

@@ -24,7 +24,7 @@ const AddAnother: FC<AddAnotherProps> = ({
         checked={isChecked}
         onCheck={onCheck}
       />
-      <span className='text-text-tertiary system-xs-medium'>{t('datasetDocuments.segment.addAnother')}</span>
+      <span className='system-xs-medium text-text-tertiary'>{t('datasetDocuments.segment.addAnother')}</span>
     </div>
   )
 }

web/app/components/datasets/documents/detail/completed/common/batch-action.tsx

@@ -44,30 +44,30 @@ const BatchAction: FC<IBatchActionProps> = ({
   }
   return (
     <div className={classNames('w-full flex justify-center gap-x-2', className)}>
-      <div className='flex items-center gap-x-1 p-1 rounded-[10px] bg-components-actionbar-bg-accent border border-components-actionbar-border-accent shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]'>
-        <div className='inline-flex items-center gap-x-2 pl-2 pr-3 py-1'>
-          <span className='w-5 h-5 flex items-center justify-center px-1 py-0.5 bg-text-accent rounded-md text-text-primary-on-surface text-xs font-medium'>
+      <div className='flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]'>
+        <div className='inline-flex items-center gap-x-2 py-1 pl-2 pr-3'>
+          <span className='flex h-5 w-5 items-center justify-center rounded-md bg-text-accent px-1 py-0.5 text-xs font-medium text-text-primary-on-surface'>
             {selectedIds.length}
           </span>
-          <span className='text-text-accent text-[13px] font-semibold leading-[16px]'>{t(`${i18nPrefix}.selected`)}</span>
+          <span className='text-[13px] font-semibold leading-[16px] text-text-accent'>{t(`${i18nPrefix}.selected`)}</span>
         </div>
         <Divider type='vertical' className='mx-0.5 h-3.5 bg-divider-regular' />
         <div className='flex items-center gap-x-0.5 px-3 py-2'>
-          <RiCheckboxCircleLine className='w-4 h-4 text-components-button-ghost-text' />
-          <button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onBatchEnable}>
+          <RiCheckboxCircleLine className='h-4 w-4 text-components-button-ghost-text' />
+          <button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onBatchEnable}>
             {t(`${i18nPrefix}.enable`)}
           </button>
         </div>
         <div className='flex items-center gap-x-0.5 px-3 py-2'>
-          <RiCloseCircleLine className='w-4 h-4 text-components-button-ghost-text' />
-          <button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onBatchDisable}>
+          <RiCloseCircleLine className='h-4 w-4 text-components-button-ghost-text' />
+          <button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onBatchDisable}>
             {t(`${i18nPrefix}.disable`)}
           </button>
         </div>
         {onEditMetadata && (
           <div className='flex items-center gap-x-0.5 px-3 py-2'>
-            <RiDraftLine className='w-4 h-4 text-components-button-ghost-text' />
-            <button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onEditMetadata}>
+            <RiDraftLine className='h-4 w-4 text-components-button-ghost-text' />
+            <button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onEditMetadata}>
               {t('dataset.metadata.metadata')}
             </button>
           </div>
@@ -75,21 +75,21 @@ const BatchAction: FC<IBatchActionProps> = ({
 
         {onArchive && (
           <div className='flex items-center gap-x-0.5 px-3 py-2'>
-            <RiArchive2Line className='w-4 h-4 text-components-button-ghost-text' />
-            <button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onArchive}>
+            <RiArchive2Line className='h-4 w-4 text-components-button-ghost-text' />
+            <button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onArchive}>
               {t(`${i18nPrefix}.archive`)}
             </button>
           </div>
         )}
         <div className='flex items-center gap-x-0.5 px-3 py-2'>
-          <RiDeleteBinLine className='w-4 h-4 text-components-button-destructive-ghost-text' />
-          <button type='button' className='px-0.5 text-components-button-destructive-ghost-text text-[13px] font-medium leading-[16px]' onClick={showDeleteConfirm}>
+          <RiDeleteBinLine className='h-4 w-4 text-components-button-destructive-ghost-text' />
+          <button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-destructive-ghost-text' onClick={showDeleteConfirm}>
             {t(`${i18nPrefix}.delete`)}
           </button>
         </div>
 
         <Divider type='vertical' className='mx-0.5 h-3.5 bg-divider-regular' />
-        <button type='button' className='px-3.5 py-2 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onCancel}>
+        <button type='button' className='px-3.5 py-2 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onCancel}>
           {t(`${i18nPrefix}.cancel`)}
         </button>
       </div>

web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx

@@ -120,9 +120,9 @@ const QATextArea: FC<IQATextAreaProps> = React.memo(({
 
   return (
     <div ref={containerRef} className='h-full overflow-hidden'>
-      <div ref={labelRef} className='text-text-tertiary text-xs font-medium mb-1'>QUESTION</div>
+      <div ref={labelRef} className='mb-1 text-xs font-medium text-text-tertiary'>QUESTION</div>
       <AutoResizeTextArea
-        className='text-text-secondary text-sm tracking-[-0.07px] caret-[#295EFF]'
+        className='text-sm tracking-[-0.07px] text-text-secondary caret-[#295EFF]'
         value={question}
         placeholder={t('datasetDocuments.segment.questionPlaceholder') || ''}
         onChange={e => onQuestionChange(e.target.value)}
@@ -130,9 +130,9 @@ const QATextArea: FC<IQATextAreaProps> = React.memo(({
         containerRef={containerRef}
         labelRef={labelRef}
       />
-      <div className='text-text-tertiary text-xs font-medium mb-1 mt-6'>ANSWER</div>
+      <div className='mb-1 mt-6 text-xs font-medium text-text-tertiary'>ANSWER</div>
       <AutoResizeTextArea
-        className='text-text-secondary text-sm tracking-[-0.07px] caret-[#295EFF]'
+        className='text-sm tracking-[-0.07px] text-text-secondary caret-[#295EFF]'
         value={answer}
         placeholder={t('datasetDocuments.segment.answerPlaceholder') || ''}
         onChange={e => onAnswerChange?.(e.target.value)}
@@ -188,7 +188,7 @@ const ChunkContent: FC<IChunkContentProps> = ({
 
   return (
     <Textarea
-      className='h-full w-full pb-6 body-md-regular text-text-secondary tracking-[-0.07px] caret-[#295EFF]'
+      className='body-md-regular h-full w-full pb-6 tracking-[-0.07px] text-text-secondary caret-[#295EFF]'
       value={question}
       placeholder={t('datasetDocuments.segment.contentPlaceholder') || ''}
       onChange={e => onQuestionChange(e.target.value)}

web/app/components/datasets/documents/detail/completed/common/dot.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 const Dot = () => {
   return (
-    <div className='text-text-quaternary system-xs-medium'>·</div>
+    <div className='system-xs-medium text-text-quaternary'>·</div>
   )
 }
 

web/app/components/datasets/documents/detail/completed/common/empty.tsx

@@ -8,7 +8,7 @@ type IEmptyProps = {
 
 const EmptyCard = React.memo(() => {
   return (
-    <div className='w-full h-32 rounded-xl opacity-30 bg-background-section-burn shrink-0' />
+    <div className='h-32 w-full shrink-0 rounded-xl bg-background-section-burn opacity-30' />
   )
 })
 
@@ -43,34 +43,34 @@ const Empty: FC<IEmptyProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className={'h-full relative flex items-center justify-center z-0'}>
+    <div className={'relative z-0 flex h-full items-center justify-center'}>
       <div className='flex flex-col items-center'>
-        <div className='relative z-10 flex items-center justify-center w-14 h-14 border border-divider-subtle bg-components-card-bg rounded-xl shadow-lg shadow-shadow-shadow-5'>
-          <RiFileList2Line className='w-6 h-6 text-text-secondary' />
+        <div className='relative z-10 flex h-14 w-14 items-center justify-center rounded-xl border border-divider-subtle bg-components-card-bg shadow-lg shadow-shadow-shadow-5'>
+          <RiFileList2Line className='h-6 w-6 text-text-secondary' />
           <Line className='absolute -right-[1px] top-1/2 -translate-y-1/2' />
           <Line className='absolute -left-[1px] top-1/2 -translate-y-1/2' />
-          <Line className='absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
-          <Line className='absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
+          <Line className='absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90' />
+          <Line className='absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 rotate-90' />
         </div>
-        <div className='text-text-tertiary system-md-regular mt-3'>
+        <div className='system-md-regular mt-3 text-text-tertiary'>
           {t('datasetDocuments.segment.empty')}
         </div>
         <button
           type='button'
-          className='text-text-accent system-sm-medium mt-1'
+          className='system-sm-medium mt-1 text-text-accent'
           onClick={onClearFilter}
         >
           {t('datasetDocuments.segment.clearFilter')}
         </button>
       </div>
-      <div className='h-full w-full absolute top-0 left-0 flex flex-col gap-y-3 -z-20 overflow-hidden'>
+      <div className='absolute left-0 top-0 -z-20 flex h-full w-full flex-col gap-y-3 overflow-hidden'>
         {
           Array.from({ length: 10 }).map((_, i) => (
             <EmptyCard key={i} />
           ))
         }
       </div>
-      <div className='h-full w-full absolute top-0 left-0 bg-dataset-chunk-list-mask-bg -z-10' />
+      <div className='absolute left-0 top-0 -z-10 h-full w-full bg-dataset-chunk-list-mask-bg' />
     </div>
   )
 }

web/app/components/datasets/documents/detail/completed/common/keywords.tsx

@@ -24,8 +24,8 @@ const Keywords: FC<IKeywordsProps> = ({
   const { t } = useTranslation()
   return (
     <div className={classNames('flex flex-col', className)}>
-      <div className='text-text-tertiary system-xs-medium-uppercase'>{t('datasetDocuments.segment.keywords')}</div>
-      <div className='text-text-tertiary w-full max-h-[200px] overflow-auto flex flex-wrap gap-1'>
+      <div className='system-xs-medium-uppercase text-text-tertiary'>{t('datasetDocuments.segment.keywords')}</div>
+      <div className='flex max-h-[200px] w-full flex-wrap gap-1 overflow-auto text-text-tertiary'>
         {(!segInfo?.keywords?.length && actionType === 'view')
           ? '-'
           : (

web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx

@@ -20,8 +20,8 @@ const DefaultContent: FC<IDefaultContentProps> = React.memo(({
   return (
     <>
       <div className='pb-4'>
-        <span className='text-text-primary title-2xl-semi-bold'>{t('datasetDocuments.segment.regenerationConfirmTitle')}</span>
-        <p className='text-text-secondary system-md-regular'>{t('datasetDocuments.segment.regenerationConfirmMessage')}</p>
+        <span className='title-2xl-semi-bold text-text-primary'>{t('datasetDocuments.segment.regenerationConfirmTitle')}</span>
+        <p className='system-md-regular text-text-secondary'>{t('datasetDocuments.segment.regenerationConfirmMessage')}</p>
       </div>
       <div className='flex justify-end gap-x-2 pt-6'>
         <Button onClick={onCancel}>
@@ -43,12 +43,12 @@ const RegeneratingContent: FC = React.memo(() => {
   return (
     <>
       <div className='pb-4'>
-        <span className='text-text-primary title-2xl-semi-bold'>{t('datasetDocuments.segment.regeneratingTitle')}</span>
-        <p className='text-text-secondary system-md-regular'>{t('datasetDocuments.segment.regeneratingMessage')}</p>
+        <span className='title-2xl-semi-bold text-text-primary'>{t('datasetDocuments.segment.regeneratingTitle')}</span>
+        <p className='system-md-regular text-text-secondary'>{t('datasetDocuments.segment.regeneratingMessage')}</p>
       </div>
       <div className='flex justify-end pt-6'>
         <Button variant='warning' destructive disabled className='inline-flex items-center gap-x-0.5'>
-          <RiLoader2Line className='w-4 h-4 text-components-button-destructive-primary-text-disabled animate-spin' />
+          <RiLoader2Line className='h-4 w-4 animate-spin text-components-button-destructive-primary-text-disabled' />
           <span>{t('common.operation.regenerate')}</span>
         </Button>
       </div>
@@ -77,8 +77,8 @@ const RegenerationCompletedContent: FC<IRegenerationCompletedContentProps> = Rea
   return (
     <>
       <div className='pb-4'>
-        <span className='text-text-primary title-2xl-semi-bold'>{t('datasetDocuments.segment.regenerationSuccessTitle')}</span>
-        <p className='text-text-secondary system-md-regular'>{t('datasetDocuments.segment.regenerationSuccessMessage')}</p>
+        <span className='title-2xl-semi-bold text-text-primary'>{t('datasetDocuments.segment.regenerationSuccessTitle')}</span>
+        <p className='system-md-regular text-text-secondary'>{t('datasetDocuments.segment.regenerationSuccessMessage')}</p>
       </div>
       <div className='flex justify-end pt-6'>
         <Button variant='primary' onClick={onClose}>

web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx

@@ -27,8 +27,8 @@ export const SegmentIndexTag: FC<ISegmentIndexTagProps> = ({
   }, [positionId, labelPrefix])
   return (
     <div className={cn('flex items-center', className)}>
-      <Chunk className={cn('w-3 h-3 p-[1px] text-text-tertiary mr-0.5', iconClassName)} />
-      <div className={cn('text-text-tertiary system-xs-medium', labelClassName)}>
+      <Chunk className={cn('mr-0.5 h-3 w-3 p-[1px] text-text-tertiary', iconClassName)} />
+      <div className={cn('system-xs-medium text-text-tertiary', labelClassName)}>
         {label || localPositionId}
       </div>
     </div>

web/app/components/datasets/documents/detail/completed/common/tag.tsx

@@ -4,8 +4,8 @@ import cn from '@/utils/classnames'
 const Tag = ({ text, className }: { text: string; className?: string }) => {
   return (
     <div className={cn('inline-flex items-center gap-x-0.5', className)}>
-      <span className='text-text-quaternary text-xs font-medium'>#</span>
-      <span className='text-text-tertiary text-xs max-w-12 line-clamp-1 shrink-0'>{text}</span>
+      <span className='text-xs font-medium text-text-quaternary'>#</span>
+      <span className='line-clamp-1 max-w-12 shrink-0 text-xs text-text-tertiary'>{text}</span>
     </div>
   )
 }