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/plugins/card/base/card-icon.tsx

@@ -42,7 +42,7 @@ const Icon = ({
 
   return (
     <div
-      className={cn('shrink-0 relative rounded-md bg-center bg-no-repeat bg-contain', iconSizeMap[size], className)}
+      className={cn('relative shrink-0 rounded-md bg-contain bg-center bg-no-repeat', iconSizeMap[size], className)}
       style={{
         backgroundImage: `url(${src})`,
       }}
@@ -50,13 +50,13 @@ const Icon = ({
       {
         installed
         && <div className={cn(iconClassName, 'bg-state-success-solid')}>
-          <RiCheckLine className='w-3 h-3 text-text-primary-on-surface' />
+          <RiCheckLine className='h-3 w-3 text-text-primary-on-surface' />
         </div>
       }
       {
         installFailed
         && <div className={cn(iconClassName, 'bg-state-destructive-solid')}>
-          <RiCloseLine className='w-3 h-3 text-text-primary-on-surface' />
+          <RiCloseLine className='h-3 w-3 text-text-primary-on-surface' />
         </div>
       }
     </div>

web/app/components/plugins/card/base/corner-mark.tsx

@@ -2,9 +2,9 @@ import { LeftCorner } from '../../../base/icons/src/vender/plugin'
 
 const CornerMark = ({ text }: { text: string }) => {
   return (
-    <div className='absolute top-0 right-0 flex pl-[13px] '>
+    <div className='absolute right-0 top-0 flex pl-[13px] '>
       <LeftCorner className="text-background-section" />
-      <div className="h-5 leading-5 rounded-tr-xl pr-2 bg-background-section text-text-tertiary system-2xs-medium-uppercase">{text}</div>
+      <div className="system-2xs-medium-uppercase h-5 rounded-tr-xl bg-background-section pr-2 leading-5 text-text-tertiary">{text}</div>
     </div>
   )
 }

web/app/components/plugins/card/base/description.tsx

@@ -22,7 +22,7 @@ const Description: FC<Props> = ({
       return 'h-12 line-clamp-3'
   }, [descriptionLineRows])
   return (
-    <div className={cn('text-text-tertiary system-xs-regular', lineClassName, className)}>
+    <div className={cn('system-xs-regular text-text-tertiary', lineClassName, className)}>
       {text}
     </div>
   )

web/app/components/plugins/card/base/download-count.tsx

@@ -10,7 +10,7 @@ const DownloadCount = ({
 }: Props) => {
   return (
     <div className="flex items-center space-x-1 text-text-tertiary">
-      <RiInstallLine className="shrink-0 w-3 h-3" />
+      <RiInstallLine className="h-3 w-3 shrink-0" />
       <div className="system-xs-regular">{formatNumber(downloadCount)}</div>
     </div>
   )

web/app/components/plugins/card/base/org-info.tsx

@@ -13,14 +13,14 @@ const OrgInfo = ({
   packageNameClassName,
 }: Props) => {
   return (
-    <div className={cn('flex items-center h-4 space-x-0.5', className)}>
+    <div className={cn('flex h-4 items-center space-x-0.5', className)}>
       {orgName && (
         <>
-          <span className='shrink-0 text-text-tertiary system-xs-regular'>{orgName}</span>
-          <span className='shrink-0 text-text-quaternary system-xs-regular'>/</span>
+          <span className='system-xs-regular shrink-0 text-text-tertiary'>{orgName}</span>
+          <span className='system-xs-regular shrink-0 text-text-quaternary'>/</span>
         </>
       )}
-      <span className={cn('shrink-0 w-0 grow truncate text-text-tertiary system-xs-regular', packageNameClassName)}>
+      <span className={cn('system-xs-regular w-0 shrink-0 grow truncate text-text-tertiary', packageNameClassName)}>
         {packageName}
       </span>
     </div>

web/app/components/plugins/card/base/placeholder.tsx

@@ -9,7 +9,7 @@ type Props = {
 }
 
 export const LoadingPlaceholder = ({ className }: { className?: string }) => (
-  <div className={cn('h-2 rounded-sm opacity-20 bg-text-quaternary', className)} />
+  <div className={cn('h-2 rounded-sm bg-text-quaternary opacity-20', className)} />
 )
 
 const Placeholder = ({
@@ -20,15 +20,15 @@ const Placeholder = ({
     <div className={wrapClassName}>
       <SkeletonRow>
         <div
-          className='flex w-10 h-10 p-1 justify-center items-center gap-2 rounded-[10px]
-              border-[0.5px] border-components-panel-border bg-background-default backdrop-blur-sm'>
-          <div className='flex w-5 h-5 justify-center items-center'>
+          className='flex h-10 w-10 items-center justify-center gap-2 rounded-[10px] border-[0.5px]
+              border-components-panel-border bg-background-default p-1 backdrop-blur-sm'>
+          <div className='flex h-5 w-5 items-center justify-center'>
             <Group className='text-text-tertiary' />
           </div>
         </div>
         <div className="grow">
           <SkeletonContainer>
-            <div className="flex items-center h-5">
+            <div className="flex h-5 items-center">
               {loadingFileName ? (
                 <Title title={loadingFileName} />
               ) : (

web/app/components/plugins/card/base/title.tsx

@@ -4,7 +4,7 @@ const Title = ({
   title: string
 }) => {
   return (
-    <div className='truncate text-text-secondary system-md-semibold'>
+    <div className='system-md-semibold truncate text-text-secondary'>
       {title}
     </div>
   )

web/app/components/plugins/card/card-more-info.tsx

@@ -10,16 +10,16 @@ const CardMoreInfo = ({
   tags,
 }: Props) => {
   return (
-    <div className="flex items-center h-5">
+    <div className="flex h-5 items-center">
       {downloadCount !== undefined && <DownloadCount downloadCount={downloadCount} />}
-      {downloadCount !== undefined && tags && tags.length > 0 && <div className="mx-2 text-text-quaternary system-xs-regular">·</div>}
+      {downloadCount !== undefined && tags && tags.length > 0 && <div className="system-xs-regular mx-2 text-text-quaternary">·</div>}
       {tags && tags.length > 0 && (
         <>
-          <div className="flex flex-wrap space-x-2 h-4 overflow-hidden">
+          <div className="flex h-4 flex-wrap space-x-2 overflow-hidden">
             {tags.map(tag => (
               <div
                 key={tag}
-                className="flex space-x-1 system-xs-regular max-w-[120px] overflow-hidden"
+                className="system-xs-regular flex max-w-[120px] space-x-1 overflow-hidden"
                 title={`# ${tag}`}
               >
                 <span className="text-text-quaternary">#</span>

web/app/components/plugins/card/index.tsx

@@ -54,7 +54,7 @@ const Card = ({
     obj ? renderI18nObject(obj, locale) : ''
   const isPartner = badges.includes('partner')
 
-  const wrapClassName = cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)
+  const wrapClassName = cn('hover-bg-components-panel-on-panel-item-bg relative rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 pb-3 shadow-xs', className)
   if (isLoading) {
     return (
       <Placeholder
@@ -71,10 +71,10 @@ const Card = ({
       <div className="flex">
         <Icon src={icon} installed={installed} installFailed={installFailed} />
         <div className="ml-3 w-0 grow">
-          <div className="flex items-center h-5">
+          <div className="flex h-5 items-center">
             <Title title={getLocalizedText(label)} />
-            {isPartner && <Partner className='w-4 h-4 ml-0.5' text={t('plugin.marketplace.partnerTip')} />}
-            {verified && <Verified className='w-4 h-4 ml-0.5' text={t('plugin.marketplace.verifiedTip')} />}
+            {isPartner && <Partner className='ml-0.5 h-4 w-4' text={t('plugin.marketplace.partnerTip')} />}
+            {verified && <Verified className='ml-0.5 h-4 w-4' text={t('plugin.marketplace.verifiedTip')} />}
             {titleLeft} {/* This can be version badge */}
           </div>
           <OrgInfo