ngskcloud
/
gcgj-dify-1.7.0
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat：app list dark mode (#16110)

Browse Source
pull/16233/head
KVOJJJin 1 year ago committed by GitHub
parent 6f6ba2f025
commit 7d620ffd5e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 90 additions and 162 deletions
Show Stats Download Patch File Download Diff File

27
web/app/(commonLayout)/apps/AppCard.tsx
Unescape Escape View File

@ -5,8 +5,6 @@ import { useRouter } from 'next/navigation'
import { useCallback, useEffect, useState } from 'react' import { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { RiMoreFill } from '@remixicon/react' import { RiMoreFill } from '@remixicon/react'
import s from './style.module.css'
import cn from '@/utils/classnames'
import type { App } from '@/types/app' import type { App } from '@/types/app'
import Confirm from '@/app/components/base/confirm' import Confirm from '@/app/components/base/confirm'
import Toast, { ToastContext } from '@/app/components/base/toast' 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 { fetchWorkflowDraft } from '@/service/workflow'
import { fetchInstalledAppList } from '@/service/explore' import { fetchInstalledAppList } from '@/service/explore'
import { AppTypeIcon } from '@/app/components/app/type-selector' import { AppTypeIcon } from '@/app/components/app/type-selector'
import cn from '@/utils/classnames'
export type AppCardProps = { export type AppCardProps = {
app: App app: App
@ -227,37 +226,37 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
} }
return ( return (
<div className="relative w-full py-1" onMouseLeave={onMouseLeave}> <div className="relative w-full py-1" onMouseLeave={onMouseLeave}>
<button className={s.actionItem} onClick={onClickSettings}> <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={s.actionName}>{t('app.editApp')}</span> <span className='text-text-secondary system-sm-regular'>{t('app.editApp')}</span>
</button> </button>
<Divider className="!my-1" /> <Divider className="!my-1" />
<button className={s.actionItem} onClick={onClickDuplicate}> <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={s.actionName}>{t('app.duplicate')}</span> <span className='text-text-secondary system-sm-regular'>{t('app.duplicate')}</span>
</button> </button>
<button className={s.actionItem} onClick={onClickExport}> <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={s.actionName}>{t('app.export')}</span> <span className='text-text-secondary system-sm-regular'>{t('app.export')}</span>
</button> </button>
{(app.mode === 'completion' || app.mode === 'chat') && ( {(app.mode === 'completion' || app.mode === 'chat') && (
<> <>
<Divider className="!my-1" /> <Divider className="!my-1" />
<div <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} 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> </div>
</> </>
)} )}
<Divider className="!my-1" /> <Divider className="!my-1" />
<button className={s.actionItem} onClick={onClickInstalledApp}> <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={s.actionName}>{t('app.openInExplore')}</span> <span className='text-text-secondary system-sm-regular'>{t('app.openInExplore')}</span>
</button> </button>
<Divider className="!my-1" /> <Divider className="!my-1" />
<div <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} 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')} {t('common.operation.delete')}
</span> </span>
</div> </div>

29
web/app/(commonLayout)/apps/style.module.css
Unescape Escape View File

@ -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)
} */

18
web/app/(commonLayout)/datasets/DatasetCard.tsx
Unescape Escape View File

@ -84,17 +84,17 @@ const DatasetCard = ({
} }
return ( return (
<div className="relative w-full py-1" onMouseLeave={onMouseLeave}> <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}> <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-gray-700 text-sm'>{t('common.operation.settings')}</span> <span className='text-text-secondary text-sm'>{t('common.operation.settings')}</span>
</div> </div>
{props.showDelete && ( {props.showDelete && (
<> <>
<Divider className="!my-1" /> <Divider className="!my-1" />
<div <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} 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')} {t('common.operation.delete')}
</span> </span>
</div> </div>
@ -135,7 +135,7 @@ const DatasetCard = ({
<Tooltip <Tooltip
popupContent={t('dataset.unavailableTip')} 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> </Tooltip>
)} )}
</div> </div>
@ -150,9 +150,9 @@ const DatasetCard = ({
</> </>
: <> : <>
<span>{dataset.document_count}{t('dataset.documentCount')}</span> <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>{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> <span>{dataset.app_count}{t('dataset.appCount')}</span>
</> </>
} }
@ -192,7 +192,7 @@ const DatasetCard = ({
/> />
</div> </div>
</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'> <div className='!hidden group-hover:!flex shrink-0'>
<CustomPopover <CustomPopover
htmlContent={<Operations showDelete={!isCurrentWorkspaceDatasetOperator} />} htmlContent={<Operations showDelete={!isCurrentWorkspaceDatasetOperator} />}
@ -202,7 +202,7 @@ const DatasetCard = ({
<div <div
className='flex items-center justify-center w-8 h-8 cursor-pointer rounded-md' 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> </div>
} }
btnClassName={open => btnClassName={open =>

6
web/app/(commonLayout)/datasets/DatasetFooter.tsx
Unescape Escape View File

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

16
web/app/components/app/duplicate-modal/index.tsx
Unescape Escape View File

@ -1,8 +1,8 @@
'use client' 'use client'
import React, { useState } from 'react' import React, { useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { RiCloseLine } from '@remixicon/react'
import AppIconPicker from '../../base/app-icon-picker' import AppIconPicker from '../../base/app-icon-picker'
import s from './style.module.css'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import Modal from '@/app/components/base/modal' import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button' import Button from '@/app/components/base/button'
@ -13,7 +13,7 @@ import { useProviderContext } from '@/context/provider-context'
import AppsFull from '@/app/components/billing/apps-full-in-dialog' import AppsFull from '@/app/components/billing/apps-full-in-dialog'
import type { AppIconType } from '@/types/app' import type { AppIconType } from '@/types/app'
export interface DuplicateAppModalProps { export type DuplicateAppModalProps = {
appName: string appName: string
icon_type: AppIconType | null icon_type: AppIconType | null
icon: string icon: string
@ -72,12 +72,14 @@ const DuplicateAppModal = ({
<Modal <Modal
isShow={show} isShow={show}
onClose={() => { }} onClose={() => { }}
className={cn(s.modal, '!max-w-[480px]', 'px-8')} className={cn('relative !max-w-[480px]', 'px-8')}
> >
<span className={s.close} onClick={onHide} /> <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onHide}>
<div className={s.title}>{t('app.duplicateTitle')}</div> <RiCloseLine className='w-4 h-4 text-text-tertiary' />
<div className={s.content}> </div>
<div className={s.subTitle}>{t('explore.appCustomize.subTitle')}</div> <div className='relative mt-3 mb-9 text-xl font-semibold leading-[30px] text-text-primary'>{t('app.duplicateTitle')}</div>
<div className='mb-9 system-sm-regular text-text-secondary'>
<div className='mb-2 system-md-medium'>{t('explore.appCustomize.subTitle')}</div>
<div className='flex items-center justify-between space-x-2'> <div className='flex items-center justify-between space-x-2'>
<AppIcon <AppIcon
size='large' size='large'

36
web/app/components/app/duplicate-modal/style.module.css
Unescape Escape View File

@ -1,36 +0,0 @@
.modal {
position: relative;
}
.modal .close {
position: absolute;
right: 16px;
top: 25px;
width: 32px;
height: 32px;
border-radius: 8px;
background: center no-repeat url(~@/app/components/datasets/create/assets/close.svg);
background-size: 16px;
cursor: pointer;
}
.modal .title {
@apply mb-9;
font-weight: 600;
font-size: 20px;
line-height: 30px;
color: #101828;
}
.modal .content {
@apply mb-9;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #101828;
}
.subTitle {
margin-bottom: 8px;
font-weight: 500;
}

19
web/app/components/app/switch-app-modal/index.tsx
Unescape Escape View File

@ -6,7 +6,6 @@ import { useContext } from 'use-context-selector'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { RiCloseLine } from '@remixicon/react' import { RiCloseLine } from '@remixicon/react'
import AppIconPicker from '../../base/app-icon-picker' import AppIconPicker from '../../base/app-icon-picker'
import s from './style.module.css'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import Checkbox from '@/app/components/base/checkbox' import Checkbox from '@/app/components/base/checkbox'
import Button from '@/app/components/base/button' import Button from '@/app/components/base/button'
@ -25,7 +24,7 @@ import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/aler
import AppIcon from '@/app/components/base/app-icon' import AppIcon from '@/app/components/base/app-icon'
import { useStore as useAppStore } from '@/app/components/app/store' import { useStore as useAppStore } from '@/app/components/app/store'
interface SwitchAppModalProps { type SwitchAppModalProps = {
show: boolean show: boolean
appDetail: App appDetail: App
onSuccess?: () => void onSuccess?: () => void
@ -95,24 +94,24 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
return ( return (
<> <>
<Modal <Modal
className={cn('p-8 max-w-[600px] w-[600px]', s.bg)} className={cn('p-8 max-w-[600px] w-[600px]')}
isShow={show} isShow={show}
onClose={() => { }} onClose={() => { }}
> >
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}> <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
<RiCloseLine className='w-4 h-4 text-gray-500' /> <RiCloseLine className='w-4 h-4 text-text-tertiary' />
</div> </div>
<div className='w-12 h-12 p-3 bg-white rounded-xl border-[0.5px] border-gray-100 shadow-xl'> <div className='w-12 h-12 p-3 bg-background-default-burn rounded-xl border-[0.5px] border-divider-regular shadow-xl'>
<AlertTriangle className='w-6 h-6 text-[rgb(247,144,9)]' /> <AlertTriangle className='w-6 h-6 text-[rgb(247,144,9)]' />
</div> </div>
<div className='relative mt-3 text-xl font-semibold leading-[30px] text-gray-900'>{t('app.switch')}</div> <div className='relative mt-3 text-xl font-semibold leading-[30px] text-text-primary'>{t('app.switch')}</div>
<div className='my-1 text-gray-500 text-sm leading-5'> <div className='my-1 text-text-tertiary text-sm leading-5'>
<span>{t('app.switchTipStart')}</span> <span>{t('app.switchTipStart')}</span>
<span className='text-gray-700 font-medium'>{t('app.switchTip')}</span> <span className='text-text-secondary font-medium'>{t('app.switchTip')}</span>
<span>{t('app.switchTipEnd')}</span> <span>{t('app.switchTipEnd')}</span>
</div> </div>
<div className='pb-4'> <div className='pb-4'>
<div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.switchLabel')}</div> <div className='py-2 text-sm font-medium leading-[20px] text-text-primary'>{t('app.switchLabel')}</div>
<div className='flex items-center justify-between space-x-2'> <div className='flex items-center justify-between space-x-2'>
<AppIcon <AppIcon
size='large' size='large'
@ -147,7 +146,7 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
<div className='pt-6 flex justify-between items-center'> <div className='pt-6 flex justify-between items-center'>
<div className='flex items-center'> <div className='flex items-center'>
<Checkbox className='shrink-0' checked={removeOriginal} onCheck={() => setRemoveOriginal(!removeOriginal)} /> <Checkbox className='shrink-0' checked={removeOriginal} onCheck={() => setRemoveOriginal(!removeOriginal)} />
<div className="ml-2 text-sm leading-5 text-gray-700 cursor-pointer" onClick={() => setRemoveOriginal(!removeOriginal)}>{t('app.removeOriginal')}</div> <div className="ml-2 text-sm leading-5 text-text-secondary cursor-pointer" onClick={() => setRemoveOriginal(!removeOriginal)}>{t('app.removeOriginal')}</div>
</div> </div>
<div className='flex items-center'> <div className='flex items-center'>
<Button className='mr-2' onClick={onClose}>{t('app.newApp.Cancel')}</Button> <Button className='mr-2' onClick={onClose}>{t('app.newApp.Cancel')}</Button>

3
web/app/components/app/switch-app-modal/style.module.css
Unescape Escape View File

@ -1,3 +0,0 @@
.bg {
background: linear-gradient(180deg, rgba(247, 144, 9, 0.05) 0%, rgba(247, 144, 9, 0.00) 24.41%), #F9FAFB;
}

6
web/app/components/base/tag-management/index.tsx
Unescape Escape View File

@ -64,13 +64,13 @@ const TagManagementModal = ({ show, type }: TagManagementModalProps) => {
isShow={show} isShow={show}
onClose={() => setShowTagManagementModal(false)} onClose={() => setShowTagManagementModal(false)}
> >
<div className='relative pb-2 text-xl font-semibold leading-[30px] text-gray-900'>{t('common.tag.manageTags')}</div> <div className='relative pb-2 text-xl font-semibold leading-[30px] text-text-primary'>{t('common.tag.manageTags')}</div>
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={() => setShowTagManagementModal(false)}> <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={() => setShowTagManagementModal(false)}>
<RiCloseLine className='w-4 h-4 text-gray-500' /> <RiCloseLine className='w-4 h-4 text-text-tertiary' />
</div> </div>
<div className='mt-3 flex flex-wrap gap-2'> <div className='mt-3 flex flex-wrap gap-2'>
<input <input
className='shrink-0 w-[100px] px-2 py-1 rounded-lg border border-dashed border-gray-200 text-sm leading-5 text-gray-700 outline-none appearance-none placeholder:text-gray-300 caret-primary-600 focus:border-solid' className='shrink-0 w-[100px] px-2 py-1 bg-transparent rounded-lg border border-dashed border-divider-regular text-sm leading-5 text-text-secondary outline-none appearance-none placeholder:text-text-quaternary caret-primary-600 focus:border-solid'
placeholder={t('common.tag.addNew') || ''} placeholder={t('common.tag.addNew') || ''}
autoFocus autoFocus
value={name} value={name}

34
web/app/components/base/tag-management/selector.tsx
Unescape Escape View File

@ -125,8 +125,8 @@ const Panel = (props: PanelProps) => {
}) })
return ( return (
<div className='relative w-full bg-white rounded-lg border-[0.5px] border-gray-200'> <div className='relative w-full bg-components-input-bg-hover rounded-lg border-[0.5px] border-components-panel-border'>
<div className='p-2 border-b-[0.5px] border-black/5'> <div className='p-2 border-b-[0.5px] border-divider-regular'>
<Input <Input
showLeftIcon showLeftIcon
showClearIcon showClearIcon
@ -138,9 +138,9 @@ const Panel = (props: PanelProps) => {
</div> </div>
{keywords && notExisted && ( {keywords && notExisted && (
<div className='p-1'> <div className='p-1'>
<div className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-100' onClick={createNewTag}> <div className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-state-base-hover' onClick={createNewTag}>
<RiAddLine className='h-4 w-4 text-gray-500' /> <RiAddLine className='h-4 w-4 text-text-tertiary' />
<div className='grow text-sm text-gray-700 leading-5 truncate'> <div className='grow text-sm text-text-secondary leading-5 truncate'>
{`${t('common.tag.create')} `} {`${t('common.tag.create')} `}
<span className='font-medium'>{`"${keywords}"`}</span> <span className='font-medium'>{`"${keywords}"`}</span>
</div> </div>
@ -155,7 +155,7 @@ const Panel = (props: PanelProps) => {
{filteredSelectedTagList.map(tag => ( {filteredSelectedTagList.map(tag => (
<div <div
key={tag.id} key={tag.id}
className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-100' className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-state-base-hover'
onClick={() => selectTag(tag)} onClick={() => selectTag(tag)}
> >
<Checkbox <Checkbox
@ -163,13 +163,13 @@ const Panel = (props: PanelProps) => {
checked={selectedTagIDs.includes(tag.id)} checked={selectedTagIDs.includes(tag.id)}
onCheck={() => { }} onCheck={() => { }}
/> />
<div title={tag.name} className='grow text-sm text-gray-700 leading-5 truncate'>{tag.name}</div> <div title={tag.name} className='grow text-sm text-text-secondary leading-5 truncate'>{tag.name}</div>
</div> </div>
))} ))}
{filteredTagList.map(tag => ( {filteredTagList.map(tag => (
<div <div
key={tag.id} key={tag.id}
className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-100' className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-state-base-hover'
onClick={() => selectTag(tag)} onClick={() => selectTag(tag)}
> >
<Checkbox <Checkbox
@ -177,7 +177,7 @@ const Panel = (props: PanelProps) => {
checked={selectedTagIDs.includes(tag.id)} checked={selectedTagIDs.includes(tag.id)}
onCheck={() => { }} onCheck={() => { }}
/> />
<div title={tag.name} className='grow text-sm text-gray-700 leading-5 truncate'>{tag.name}</div> <div title={tag.name} className='grow text-sm text-text-secondary leading-5 truncate'>{tag.name}</div>
</div> </div>
))} ))}
</div> </div>
@ -185,16 +185,16 @@ const Panel = (props: PanelProps) => {
{!keywords && !filteredTagList.length && !filteredSelectedTagList.length && ( {!keywords && !filteredTagList.length && !filteredSelectedTagList.length && (
<div className='p-1'> <div className='p-1'>
<div className='p-3 flex flex-col items-center gap-1'> <div className='p-3 flex flex-col items-center gap-1'>
<Tag03 className='h-6 w-6 text-gray-300' /> <Tag03 className='h-6 w-6 text-text-quaternary' />
<div className='text-gray-500 text-xs leading-[14px]'>{t('common.tag.noTag')}</div> <div className='text-text-tertiary text-xs leading-[14px]'>{t('common.tag.noTag')}</div>
</div> </div>
</div> </div>
)} )}
<Divider className='!h-[1px] !my-0' /> <Divider className='!h-[1px] !my-0' />
<div className='p-1'> <div className='p-1'>
<div className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-100' onClick={() => setShowTagManagementModal(true)}> <div className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-state-base-hover' onClick={() => setShowTagManagementModal(true)}>
<Tag03 className='h-4 w-4 text-gray-500' /> <Tag03 className='h-4 w-4 text-text-tertiary' />
<div className='grow text-sm text-gray-700 leading-5 truncate'> <div className='grow text-sm text-text-secondary leading-5 truncate'>
{t('common.tag.manageTags')} {t('common.tag.manageTags')}
</div> </div>
</div> </div>
@ -232,7 +232,7 @@ const TagSelector: FC<TagSelectorProps> = ({
const Trigger = () => { const Trigger = () => {
return ( return (
<div className={cn( <div className={cn(
'group/tip relative w-full flex items-center gap-1 px-2 py-[7px] rounded-md cursor-pointer hover:bg-gray-100', 'group/tip relative w-full flex items-center gap-1 px-2 py-[7px] rounded-md cursor-pointer hover:bg-state-base-hover',
)}> )}>
<Tag01 className='shrink-0 w-3 h-3' /> <Tag01 className='shrink-0 w-3 h-3' />
<div className='grow text-xs text-start leading-[18px] font-normal truncate'> <div className='grow text-xs text-start leading-[18px] font-normal truncate'>
@ -261,8 +261,8 @@ const TagSelector: FC<TagSelectorProps> = ({
btnElement={<Trigger />} btnElement={<Trigger />}
btnClassName={open => btnClassName={open =>
cn( cn(
open ? '!bg-gray-100 !text-gray-700' : '!bg-transparent', open ? '!bg-state-base-hover !text-text-secondary' : '!bg-transparent',
'!w-full !p-0 !border-0 !text-gray-500 hover:!bg-gray-100 hover:!text-gray-700', '!w-full !p-0 !border-0 !text-text-tertiary hover:!bg-state-base-hover hover:!text-text-secondary',
) )
} }
popupClassName='!w-full !ring-0' popupClassName='!w-full !ring-0'

3
web/app/components/base/tag-management/style.module.css
Unescape Escape View File

@ -1,3 +0,0 @@
.bg {
background: linear-gradient(180deg, rgba(247, 144, 9, 0.05) 0%, rgba(247, 144, 9, 0.00) 24.41%), #F9FAFB;
}

16
web/app/components/base/tag-management/tag-item-editor.tsx
Unescape Escape View File

@ -103,29 +103,29 @@ const TagItemEditor: FC<TagItemEditorProps> = ({
return ( return (
<> <>
<div className={cn('shrink-0 flex items-center gap-0.5 pr-1 pl-2 py-1 rounded-lg border border-gray-200 text-sm leading-5 text-gray-700')}> <div className={cn('shrink-0 flex items-center gap-0.5 pr-1 pl-2 py-1 rounded-lg border border-components-panel-border text-sm leading-5 text-text-secondary')}>
{!isEditing && ( {!isEditing && (
<> <>
<div className='text-sm leading-5 text-gray-700'> <div className='text-sm leading-5 text-text-secondary'>
{tag.name} {tag.name}
</div> </div>
<div className='shrink-0 px-1 text-sm leading-4.5 text-gray-500 font-medium'>{tag.binding_count}</div> <div className='shrink-0 px-1 text-sm leading-4.5 text-text-tertiary font-medium'>{tag.binding_count}</div>
<div className='group/edit shrink-0 p-1 rounded-md cursor-pointer hover:bg-black/5' onClick={() => setIsEditing(true)}> <div className='group/edit shrink-0 p-1 rounded-md cursor-pointer hover:bg-state-base-hover' onClick={() => setIsEditing(true)}>
<RiEditLine className='w-3 h-3 text-gray-500 group-hover/edit:text-gray-800' /> <RiEditLine className='w-3 h-3 text-text-tertiary group-hover/edit:text-text-secondary' />
</div> </div>
<div className='group/remove shrink-0 p-1 rounded-md cursor-pointer hover:bg-black/5' onClick={() => { <div className='group/remove shrink-0 p-1 rounded-md cursor-pointer hover:bg-state-base-hover' onClick={() => {
if (tag.binding_count) if (tag.binding_count)
setShowRemoveModal(true) setShowRemoveModal(true)
else else
handleRemove() handleRemove()
}}> }}>
<RiDeleteBinLine className='w-3 h-3 text-gray-500 group-hover/remove:text-gray-800' /> <RiDeleteBinLine className='w-3 h-3 text-text-tertiary group-hover/remove:text-text-secondary' />
</div> </div>
</> </>
)} )}
{isEditing && ( {isEditing && (
<input <input
className='shrink-0 outline-none appearance-none placeholder:text-gray-300 caret-primary-600' className='shrink-0 outline-none appearance-none placeholder:text-text-quaternary caret-primary-600'
autoFocus autoFocus
value={name} value={name}
onChange={e => setName(e.target.value)} onChange={e => setName(e.target.value)}

11
web/app/components/base/tag-management/tag-remove-modal.tsx
Unescape Escape View File

@ -2,7 +2,6 @@
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { RiCloseLine } from '@remixicon/react' import { RiCloseLine } from '@remixicon/react'
import s from './style.module.css'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import Button from '@/app/components/base/button' import Button from '@/app/components/base/button'
import Modal from '@/app/components/base/modal' import Modal from '@/app/components/base/modal'
@ -21,21 +20,21 @@ const TagRemoveModal = ({ show, tag, onConfirm, onClose }: TagRemoveModalProps)
return ( return (
<Modal <Modal
className={cn('p-8 max-w-[480px] w-[480px]', s.bg)} className={cn('p-8 max-w-[480px] w-[480px]')}
isShow={show} isShow={show}
onClose={() => { }} onClose={() => { }}
> >
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}> <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
<RiCloseLine className='w-4 h-4 text-gray-500' /> <RiCloseLine className='w-4 h-4 text-text-tertiary' />
</div> </div>
<div className='w-12 h-12 p-3 bg-white rounded-xl border-[0.5px] border-gray-100 shadow-xl'> <div className='w-12 h-12 p-3 bg-background-default-burn rounded-xl border-[0.5px] border-divider-regular shadow-xl'>
<AlertTriangle className='w-6 h-6 text-[rgb(247,144,9)]' /> <AlertTriangle className='w-6 h-6 text-[rgb(247,144,9)]' />
</div> </div>
<div className='mt-3 text-xl font-semibold leading-[30px] text-gray-900'> <div className='mt-3 text-xl font-semibold leading-[30px] text-text-primary'>
{`${t('common.tag.delete')} `} {`${t('common.tag.delete')} `}
<span>{`"${tag.name}"`}</span> <span>{`"${tag.name}"`}</span>
</div> </div>
<div className='my-1 text-gray-500 text-sm leading-5'> <div className='my-1 text-text-tertiary text-sm leading-5'>
{t('common.tag.deleteTip')} {t('common.tag.deleteTip')}
</div> </div>
<div className='pt-6 flex items-center justify-end'> <div className='pt-6 flex items-center justify-end'>

2
web/app/components/datasets/create/website/base/checkbox-with-label.tsx
Unescape Escape View File

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

10
web/app/components/datasets/rename-modal/index.tsx
Unescape Escape View File

@ -14,7 +14,7 @@ import { ToastContext } from '@/app/components/base/toast'
import type { DataSet } from '@/models/datasets' import type { DataSet } from '@/models/datasets'
import { updateDatasetSetting } from '@/service/datasets' import { updateDatasetSetting } from '@/service/datasets'
interface RenameDatasetModalProps { type RenameDatasetModalProps = {
show: boolean show: boolean
dataset: DataSet dataset: DataSet
onSuccess?: () => void onSuccess?: () => void
@ -68,13 +68,13 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
isShow={show} isShow={show}
onClose={() => { }} onClose={() => { }}
> >
<div className='relative pb-2 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetSettings.title')}</div> <div className='relative pb-2 text-xl font-medium leading-[30px] text-text-primary'>{t('datasetSettings.title')}</div>
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}> <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
<RiCloseLine className='w-4 h-4 text-gray-500' /> <RiCloseLine className='w-4 h-4 text-text-tertiary' />
</div> </div>
<div> <div>
<div className={cn('flex justify-between py-4 flex-wrap items-center')}> <div className={cn('flex justify-between py-4 flex-wrap items-center')}>
<div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-gray-900'> <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
{t('datasetSettings.form.name')} {t('datasetSettings.form.name')}
</div> </div>
<Input <Input
@ -85,7 +85,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
/> />
</div> </div>
<div className={cn('flex justify-between py-4 flex-wrap items-center')}> <div className={cn('flex justify-between py-4 flex-wrap items-center')}>
<div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-gray-900'> <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
{t('datasetSettings.form.desc')} {t('datasetSettings.form.desc')}
</div> </div>
<div className='w-full'> <div className='w-full'>

16
web/app/components/explore/create-app-modal/index.tsx
Unescape Escape View File

@ -14,7 +14,7 @@ import { useProviderContext } from '@/context/provider-context'
import AppsFull from '@/app/components/billing/apps-full-in-dialog' import AppsFull from '@/app/components/billing/apps-full-in-dialog'
import type { AppIconType } from '@/types/app' import type { AppIconType } from '@/types/app'
export interface CreateAppModalProps { export type CreateAppModalProps = {
show: boolean show: boolean
isEditModal?: boolean isEditModal?: boolean
appName: string appName: string
@ -89,18 +89,18 @@ const CreateAppModal = ({
className='relative !max-w-[480px] px-8' className='relative !max-w-[480px] px-8'
> >
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onHide}> <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onHide}>
<RiCloseLine className='w-4 h-4 text-gray-500' /> <RiCloseLine className='w-4 h-4 text-text-tertiary' />
</div> </div>
{isEditModal && ( {isEditModal && (
<div className='mb-9 font-semibold text-xl leading-[30px] text-gray-900'>{t('app.editAppTitle')}</div> <div className='mb-9 font-semibold text-xl leading-[30px] text-text-primary'>{t('app.editAppTitle')}</div>
)} )}
{!isEditModal && ( {!isEditModal && (
<div className='mb-9 font-semibold text-xl leading-[30px] text-gray-900'>{t('explore.appCustomize.title', { name: appName })}</div> <div className='mb-9 font-semibold text-xl leading-[30px] text-text-primary'>{t('explore.appCustomize.title', { name: appName })}</div>
)} )}
<div className='mb-9'> <div className='mb-9'>
{/* icon & name */} {/* icon & name */}
<div className='pt-2'> <div className='pt-2'>
<div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.newApp.captionName')}</div> <div className='py-2 text-sm font-medium leading-[20px] text-text-primary'>{t('app.newApp.captionName')}</div>
<div className='flex items-center justify-between space-x-2'> <div className='flex items-center justify-between space-x-2'>
<AppIcon <AppIcon
size='large' size='large'
@ -121,7 +121,7 @@ const CreateAppModal = ({
</div> </div>
{/* description */} {/* description */}
<div className='pt-2'> <div className='pt-2'>
<div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.newApp.captionDescription')}</div> <div className='py-2 text-sm font-medium leading-[20px] text-text-primary'>{t('app.newApp.captionDescription')}</div>
<Textarea <Textarea
className='resize-none' className='resize-none'
placeholder={t('app.newApp.appDescriptionPlaceholder') || ''} placeholder={t('app.newApp.appDescriptionPlaceholder') || ''}
@ -133,13 +133,13 @@ const CreateAppModal = ({
{isEditModal && (appMode === 'chat' || appMode === 'advanced-chat' || appMode === 'agent-chat') && ( {isEditModal && (appMode === 'chat' || appMode === 'advanced-chat' || appMode === 'agent-chat') && (
<div className='pt-2'> <div className='pt-2'>
<div className='flex justify-between items-center'> <div className='flex justify-between items-center'>
<div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.answerIcon.title')}</div> <div className='py-2 text-sm font-medium leading-[20px] text-text-primary'>{t('app.answerIcon.title')}</div>
<Switch <Switch
defaultValue={useIconAsAnswerIcon} defaultValue={useIconAsAnswerIcon}
onChange={v => setUseIconAsAnswerIcon(v)} onChange={v => setUseIconAsAnswerIcon(v)}
/> />
</div> </div>
<p className='body-xs-regular text-gray-500'>{t('app.answerIcon.descriptionInExplore')}</p> <p className='body-xs-regular text-text-tertiary'>{t('app.answerIcon.descriptionInExplore')}</p>
</div> </div>
)} )}
{!isEditModal && isAppsFull && <AppsFull loc='app-explore-create' />} {!isEditModal && isAppsFull && <AppsFull loc='app-explore-create' />}

Write Preview
Loading…
Cancel
Save