Feat：app list dark mode (#16110)

web/app/(commonLayout)/apps/AppCard.tsx

@@ -5,8 +5,6 @@ import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiMoreFill } from '@remixicon/react'
-import s from './style.module.css'
-import cn from '@/utils/classnames'
 import type { App } from '@/types/app'
 import Confirm from '@/app/components/base/confirm'
 import Toast, { ToastContext } from '@/app/components/base/toast'
@@ -31,6 +29,7 @@ import DSLExportConfirmModal from '@/app/components/workflow/dsl-export-confirm-
 import { fetchWorkflowDraft } from '@/service/workflow'
 import { fetchInstalledAppList } from '@/service/explore'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
+import cn from '@/utils/classnames'
 
 export type AppCardProps = {
   app: App
@@ -227,37 +226,37 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
     }
     return (
       <div className="relative w-full py-1" onMouseLeave={onMouseLeave}>
-        <button className={s.actionItem} onClick={onClickSettings}>
-          <span className={s.actionName}>{t('app.editApp')}</span>
+        <button className='h-8 w-[calc(100%_-_8px)] py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-state-base-hover rounded-lg cursor-pointer' onClick={onClickSettings}>
+          <span className='text-text-secondary system-sm-regular'>{t('app.editApp')}</span>
         </button>
         <Divider className="!my-1" />
-        <button className={s.actionItem} onClick={onClickDuplicate}>
-          <span className={s.actionName}>{t('app.duplicate')}</span>
+        <button className='h-8 w-[calc(100%_-_8px)] py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-state-base-hover rounded-lg cursor-pointer' onClick={onClickDuplicate}>
+          <span className='text-text-secondary system-sm-regular'>{t('app.duplicate')}</span>
         </button>
-        <button className={s.actionItem} onClick={onClickExport}>
-          <span className={s.actionName}>{t('app.export')}</span>
+        <button className='h-8 w-[calc(100%_-_8px)] py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-state-base-hover rounded-lg cursor-pointer' onClick={onClickExport}>
+          <span className='text-text-secondary system-sm-regular'>{t('app.export')}</span>
         </button>
         {(app.mode === 'completion' || app.mode === 'chat') && (
           <>
             <Divider className="!my-1" />
             <div
-              className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer'
+              className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-state-base-hover rounded-lg cursor-pointer'
               onClick={onClickSwitch}
             >
-              <span className='text-gray-700 text-sm leading-5'>{t('app.switch')}</span>
+              <span className='text-text-secondary text-sm leading-5'>{t('app.switch')}</span>
             </div>
           </>
         )}
         <Divider className="!my-1" />
-        <button className={s.actionItem} onClick={onClickInstalledApp}>
-          <span className={s.actionName}>{t('app.openInExplore')}</span>
+        <button className='h-8 w-[calc(100%_-_8px)] py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-state-base-hover rounded-lg cursor-pointer' onClick={onClickInstalledApp}>
+          <span className='text-text-secondary system-sm-regular'>{t('app.openInExplore')}</span>
         </button>
         <Divider className="!my-1" />
         <div
-          className={cn(s.actionItem, s.deleteActionItem, 'group')}
+          className='group h-8 w-[calc(100%_-_8px)] py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-state-destructive-hover rounded-lg cursor-pointer'
           onClick={onClickDelete}
         >
-          <span className={cn(s.actionName, 'group-hover:text-red-500')}>
+          <span className='text-text-secondary system-sm-regular group-hover:text-text-destructive'>
             {t('common.operation.delete')}
           </span>
         </div>

web/app/(commonLayout)/apps/style.module.css

@@ -1,29 +0,0 @@
-
-.commonIcon {
-  @apply w-4 h-4 inline-block align-middle;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: contain;
-}
-.actionIcon {
-  @apply bg-gray-500;
-  mask-image: url(~@/assets/action.svg);
-}
-.actionItem {
-  @apply h-8 py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer;
-  width: calc(100% - 0.5rem);
-}
-.deleteActionItem {
-  @apply hover:bg-red-50 !important;
-}
-.actionName {
-  @apply text-gray-700 text-sm;
-}
-
-/* .completionPic {
-  background-image: url(~@/app/components/app-sidebar/completion.png)
-}
-    
-.expertPic {
-  background-image: url(~@/app/components/app-sidebar/expert.png)
-} */

web/app/(commonLayout)/datasets/DatasetCard.tsx

@@ -84,17 +84,17 @@ const DatasetCard = ({
     }
     return (
       <div className="relative w-full py-1" onMouseLeave={onMouseLeave}>
-        <div className='h-8 py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer' onClick={onClickRename}>
-          <span className='text-gray-700 text-sm'>{t('common.operation.settings')}</span>
+        <div className='h-8 py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-state-base-hover rounded-lg cursor-pointer' onClick={onClickRename}>
+          <span className='text-text-secondary text-sm'>{t('common.operation.settings')}</span>
         </div>
         {props.showDelete && (
           <>
             <Divider className="!my-1" />
             <div
-              className='group h-8 py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-red-50 rounded-lg cursor-pointer'
+              className='group h-8 py-[6px] px-3 mx-1 flex items-center gap-2 hover:bg-state-destructive-hover rounded-lg cursor-pointer'
               onClick={onClickDelete}
             >
-              <span className={cn('text-gray-700 text-sm', 'group-hover:text-red-500')}>
+              <span className={cn('text-text-secondary text-sm', 'group-hover:text-text-destructive')}>
                 {t('common.operation.delete')}
               </span>
             </div>
@@ -135,7 +135,7 @@ const DatasetCard = ({
                 <Tooltip
                   popupContent={t('dataset.unavailableTip')}
                 >
-                  <span className='shrink-0 inline-flex w-max ml-1 px-1 border border-gray-200 rounded-md text-gray-500 text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
+                  <span className='shrink-0 inline-flex w-max ml-1 px-1 border border-divider-regular rounded-md text-text-tertiary text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
                 </Tooltip>
               )}
             </div>
@@ -150,9 +150,9 @@ const DatasetCard = ({
                   </>
                   : <>
                     <span>{dataset.document_count}{t('dataset.documentCount')}</span>
-                    <span className='shrink-0 mx-0.5 w-1 text-gray-400'>·</span>
+                    <span className='shrink-0 mx-0.5 w-1 text-text-tertiary'>·</span>
                     <span>{Math.round(dataset.word_count / 1000)}{t('dataset.wordCount')}</span>
-                    <span className='shrink-0 mx-0.5 w-1 text-gray-400'>·</span>
+                    <span className='shrink-0 mx-0.5 w-1 text-text-tertiary'>·</span>
                     <span>{dataset.app_count}{t('dataset.appCount')}</span>
                   </>
                 }
@@ -192,7 +192,7 @@ const DatasetCard = ({
               />
             </div>
           </div>
-          <div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px] bg-gray-200' />
+          <div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px] bg-divider-regular' />
           <div className='!hidden group-hover:!flex shrink-0'>
             <CustomPopover
               htmlContent={<Operations showDelete={!isCurrentWorkspaceDatasetOperator} />}
@@ -202,7 +202,7 @@ const DatasetCard = ({
                 <div
                   className='flex items-center justify-center w-8 h-8 cursor-pointer rounded-md'
                 >
-                  <RiMoreFill className='w-4 h-4 text-gray-700' />
+                  <RiMoreFill className='w-4 h-4 text-text-secondary' />
                 </div>
               }
               btnClassName={open =>

web/app/(commonLayout)/datasets/DatasetFooter.tsx

@@ -8,9 +8,9 @@ const DatasetFooter = () => {
   return (
     <footer className='px-12 py-6 grow-0 shrink-0'>
       <h3 className='text-xl font-semibold leading-tight text-gradient'>{t('dataset.didYouKnow')}</h3>
-      <p className='mt-1 text-sm font-normal leading-tight text-gray-700'>
-        {t('dataset.intro1')}<span className='inline-flex items-center gap-1 text-blue-600'>{t('dataset.intro2')}</span>{t('dataset.intro3')}<br />
-        {t('dataset.intro4')}<span className='inline-flex items-center gap-1 text-blue-600'>{t('dataset.intro5')}</span>{t('dataset.intro6')}
+      <p className='mt-1 text-sm font-normal leading-tight text-text-secondary'>
+        {t('dataset.intro1')}<span className='inline-flex items-center gap-1 text-text-accent'>{t('dataset.intro2')}</span>{t('dataset.intro3')}<br />
+        {t('dataset.intro4')}<span className='inline-flex items-center gap-1 text-text-accent'>{t('dataset.intro5')}</span>{t('dataset.intro6')}
       </p>
     </footer>
   )