ChatGPT/FastGPT
1
0
Fork 0
mirror of https://github.com/labring/FastGPT.git synced 2025-07-23 13:03:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): dataset-tags (#2415)

Browse Source
This commit is contained in:
heheer
2024-08-16 18:32:20 +08:00
committed by GitHub
parent 9b74437417
commit 0719f7bd4a
15 changed files with 78 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/components/common/Icon/constants.ts
View File

@@ -7,10 +7,12 @@ export const iconPaths = {
closeSolid: () => import('./icons/closeSolid.svg'),
collectionLight: () => import('./icons/collectionLight.svg'),
collectionSolid: () => import('./icons/collectionSolid.svg'),
'common/add2': () => import('./icons/common/add2.svg'),
'common/addCircleLight': () => import('./icons/common/addCircleLight.svg'),
'common/addLight': () => import('./icons/common/addLight.svg'),
'common/backFill': () => import('./icons/common/backFill.svg'),
'common/backLight': () => import('./icons/common/backLight.svg'),
'common/check': () => import('./icons/common/check.svg'),
'common/clearLight': () => import('./icons/common/clearLight.svg'),
'common/closeLight': () => import('./icons/common/closeLight.svg'),
'common/confirm/commonTip': () => import('./icons/common/confirm/commonTip.svg'),

5
packages/web/components/common/Icon/icons/common/add2.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon/line/add2">
<path id="Union" d="M8.73348 2.13337C8.73348 1.69155 8.37531 1.33337 7.93348 1.33337C7.49165 1.33337 7.13348 1.69155 7.13348 2.13337V7.33337H2.20015C1.75832 7.33337 1.40015 7.69155 1.40015 8.13337C1.40015 8.5752 1.75832 8.93337 2.20015 8.93337H7.13348V13.8667C7.13348 14.3085 7.49165 14.6667 7.93348 14.6667C8.37531 14.6667 8.73348 14.3085 8.73348 13.8667V8.93337H13.9335C14.3753 8.93337 14.7335 8.5752 14.7335 8.13337C14.7335 7.69155 14.3753 7.33337 13.9335 7.33337H8.73348V2.13337Z" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 597 B

3
packages/web/components/common/Icon/icons/common/check.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 10" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.82531 2.05806C9.06939 1.81398 9.46512 1.81398 9.70919 2.05806C9.95327 2.30214 9.95327 2.69786 9.7092 2.94194L5.12586 7.52528C4.88178 7.76935 4.48606 7.76935 4.24198 7.52528L2.15864 5.44194C1.91457 5.19786 1.91457 4.80214 2.15864 4.55806C2.40272 4.31398 2.79845 4.31398 3.04253 4.55806L4.68392 6.19945L8.82531 2.05806Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 456 B

1
packages/web/styles/theme.ts
View File

@@ -477,6 +477,7 @@ const Checkbox = checkBoxMultiStyle({
_checked: {
bg: 'primary.50',
borderColor: 'primary.600',
borderWidth: '1px',
color: 'primary.600',
boxShadow: `${shadowLight} !important`,
_hover: {

7
projects/app/src/components/core/app/DatasetParamsModal.tsx
View File

@@ -206,7 +206,12 @@ const DatasetParamsModal = ({
</Box>
</Box>
<Box position={'relative'} w={'18px'} h={'18px'}>
<Checkbox colorScheme="primary" isChecked={getValues('usingReRank')} size="lg" />
<Checkbox
colorScheme="primary"
isChecked={getValues('usingReRank')}
size="lg"
icon={<MyIcon name={'common/check'} w={'12px'} />}
/>
<Box position={'absolute'} top={0} right={0} bottom={0} left={0} zIndex={1}></Box>
</Box>
</Flex>

1
projects/app/src/components/core/app/InputGuideConfig.tsx
View File

@@ -433,6 +433,7 @@ const LexiconConfigModal = ({ appId, onClose }: { appId: string; onClose: () =>
<Checkbox
mr={2}
isChecked={selected}
icon={<MyIcon name={'common/check'} w={'12px'} />}
onChange={(e) => {
if (e.target.checked) {
setSelectedRows([...selectedRows, item._id]);

6
projects/app/src/components/core/chat/ChatContainer/ChatBox/index.tsx
View File

@@ -57,6 +57,7 @@ import type { StreamResponseType } from '@/web/common/api/fetch';
import { useContextSelector } from 'use-context-selector';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
import { useThrottleFn } from 'ahooks';
import MyIcon from '@fastgpt/web/components/common/Icon';
const ResponseTags = dynamic(() => import('./components/ResponseTags'));
const FeedbackModal = dynamic(() => import('./components/FeedbackModal'));
@@ -962,7 +963,10 @@ const ChatBox = (
<MyTooltip
label={t('common:core.app.feedback.close custom feedback')}
>
<Checkbox onChange={onCloseCustomFeedback(item, i)}>
<Checkbox
onChange={onCloseCustomFeedback(item, i)}
icon={<MyIcon name={'common/check'} w={'12px'} />}
>
{text}
</Checkbox>
</MyTooltip>

2
projects/app/src/components/core/dataset/RawSourceBox.tsx
View File

@@ -48,7 +48,7 @@ const RawSourceBox = ({
: {})}
{...props}
>
<MyIcon name={icon as any} w={['14px', '16px']} mr={2} />
<MyIcon name={icon as any} w={['16px', '20px']} mr={2} />
<Box
maxW={['200px', '300px']}
className={props.className ?? 'textEllipsis'}

6
projects/app/src/components/support/permission/MemberManager/AddMemberModal.tsx
View File

@@ -134,12 +134,16 @@ function AddMemberModal({ onClose }: AddModalPropsType) {
alignItems="center"
_hover={{
bgColor: 'myGray.50',
cursor: 'pointer'
cursor: 'pointer',
...(!selectedMemberIdList.includes(member.tmbId)
? { svg: { color: 'myGray.50' } }
: {})
}}
>
<Checkbox
mr="3"
isChecked={selectedMemberIdList.includes(member.tmbId)}
icon={<MyIcon name={'common/check'} w={'12px'} />}
onChange={onChange}
/>
<Flex

10
projects/app/src/components/support/user/team/TeamManageModal/components/PermissionManage/AddManager.tsx
View File

@@ -101,7 +101,10 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces
alignItems="center"
key={member.tmbId}
cursor={'pointer'}
_hover={{ bg: 'myGray.50' }}
_hover={{
bg: 'myGray.50',
...(!selected.includes(member) ? { svg: { color: 'myGray.50' } } : {})
}}
_notLast={{ mb: 2 }}
onClick={() => {
if (selected.indexOf(member) == -1) {
@@ -111,7 +114,10 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces
}
}}
>
<Checkbox isChecked={selected.includes(member)} />
<Checkbox
isChecked={selected.includes(member)}
icon={<MyIcon name={'common/check'} w={'12px'} />}
/>
<Avatar ml={2} src={member.avatar} w="1.5rem" />
{member.memberName}
</Flex>

5
projects/app/src/pages/app/detail/components/SimpleApp/AppCard.tsx
View File

@@ -167,7 +167,10 @@ const AppCard = () => {
<ModalBody>
<Box mb={3}>{appT('transition_to_workflow_create_new_tip')}</Box>
<HStack cursor={'pointer'} onClick={() => setTransitionCreateNew((state) => !state)}>
<Checkbox isChecked={transitionCreateNew} />
<Checkbox
isChecked={transitionCreateNew}
icon={<MyIcon name={'common/check'} w={'12px'} />}
/>
<Box>{appT('transition_to_workflow_create_new_placeholder')}</Box>
</HStack>
</ModalBody>

14
projects/app/src/pages/dataset/detail/components/CollectionCard/HeaderTagPopOver.tsx
View File

@@ -96,6 +96,10 @@ const HeaderTagPopOver = () => {
overflow={'hidden'}
h={['28px', '36px']}
fontSize={'sm'}
_hover={{
boxShadow: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)',
borderColor: 'primary.300'
}}
>
<Flex flex={'1 0 0'}>
{t('dataset:tag.tags')}
@@ -158,9 +162,12 @@ const HeaderTagPopOver = () => {
py={1}
my={1}
cursor={'pointer'}
bg={checked ? '#1118240D' : 'transparent'}
color={checked ? 'primary.700' : 'myGray.600'}
_hover={{ bg: '#1118240D', color: 'primary.700' }}
_hover={{
bg: '#1118240D',
color: 'primary.700',
...(checked ? {} : { svg: { color: '#F3F3F4' } })
}}
borderRadius={'xs'}
key={item._id}
onClick={(e) => {
@@ -174,6 +181,7 @@ const HeaderTagPopOver = () => {
checkTags(item);
}}
size={'md'}
icon={<MyIcon name={'common/check'} w={'12px'} />}
/>
<Box ml={2}>{item.tag}</Box>
</Flex>
@@ -186,6 +194,7 @@ const HeaderTagPopOver = () => {
fontSize={'sm'}
_hover={{ bg: '#1118240D', color: 'primary.700' }}
borderRadius={'none'}
borderBottomLeftRadius={'md'}
variant={'unstyled'}
onClick={() => {
setCheckedTags([]);
@@ -202,6 +211,7 @@ const HeaderTagPopOver = () => {
fontSize={'sm'}
_hover={{ bg: '#1118240D', color: 'primary.700' }}
borderRadius={'none'}
borderBottomRightRadius={'md'}
variant={'unstyled'}
onClick={() => {
onOpenTagManageModal();

15
projects/app/src/pages/dataset/detail/components/CollectionCard/TagManageModal.tsx
View File

@@ -305,7 +305,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
}}
cursor={'pointer'}
>
<MyIcon name="common/addLight" w={4} />
<MyIcon name="common/add2" w={4} />
</Box>
<Box
className="icon-box"
@@ -487,8 +487,14 @@ const AddTagToCollections = ({
<Flex
px={2}
py={1}
mb={2}
flex={'1'}
_hover={{ bg: 'myGray.100' }}
_hover={{
bg: 'myGray.100',
...(!selectedCollections.includes(collection.id)
? { svg: { color: 'myGray.100' } }
: {})
}}
alignItems={'center'}
borderRadius={'4px'}
key={collection.id}
@@ -506,6 +512,7 @@ const AddTagToCollections = ({
<Checkbox
size={'md'}
mr={2}
icon={<MyIcon name="common/check" w={'12px'} />}
onChange={() => {
setSelectedCollections((prev) => {
if (prev.includes(collection.id)) {
@@ -517,8 +524,8 @@ const AddTagToCollections = ({
}}
isChecked={selectedCollections.includes(collection.id)}
/>
<MyIcon name={collection.icon as any} w={'16px'} mr={2} />
<Box fontSize={'14px'} borderRadius={'6px'}>
<MyIcon name={collection.icon as any} w={'20px'} mr={2} />
<Box fontSize={'14px'} borderRadius={'6px'} color={'myGray.900'}>
{collection.name}
</Box>
</Flex>

18
projects/app/src/pages/dataset/detail/components/CollectionCard/TagsPopOver.tsx
View File

@@ -155,9 +155,10 @@ const TagsPopOver = ({
<Box
key={index}
h={5}
mr={1}
mr={2}
px={2}
fontSize={'11px'}
fontWeight={'500'}
bg={'#F0FBFF'}
color={'#0884DD'}
borderRadius={'4px'}
@@ -213,6 +214,7 @@ const TagsPopOver = ({
borderRadius={'xs'}
onClick={() => {
onCreateCollectionTag(searchTag);
// setCheckedTags([...checkedTags, item]);
}}
>
<MyIcon name={'common/addLight'} w={'14px'} />
@@ -228,13 +230,16 @@ const TagsPopOver = ({
alignItems={'center'}
fontSize={'xs'}
px={1}
py={0.5}
my={0.5}
py={1}
my={1}
key={item._id}
cursor={'pointer'}
bg={tagsList.includes(item.tag) ? '#1118240D' : 'transparent'}
color={tagsList.includes(item.tag) ? '#2B5FD9' : 'myGray.600'}
_hover={{ bg: '#1118240D', color: '#2B5FD9' }}
_hover={{
bg: '#1118240D',
color: '#2B5FD9',
...(tagsList.includes(item.tag) ? {} : { svg: { color: '#F3F3F4' } })
}}
borderRadius={'xs'}
onClick={(e) => {
e.preventDefault();
@@ -254,8 +259,9 @@ const TagsPopOver = ({
setCheckedTags(checkedTags.filter((t) => t._id !== item._id));
}
}}
icon={<MyIcon name={'common/check'} w={'12px'} />}
/>
<Box ml={1}>{item.tag}</Box>
<Box ml={2}>{item.tag}</Box>
</Flex>
);
})}

4
projects/app/src/pages/dataset/detail/components/CollectionCard/index.tsx
View File

@@ -237,12 +237,12 @@ const CollectionCard = () => {
>
<Td minW={'150px'} maxW={['200px', '300px']} draggable py={2}>
<Flex alignItems={'center'}>
<MyIcon name={collection.icon as any} w={'16px'} mr={2} />
<MyIcon name={collection.icon as any} w={'18px'} mr={2} />
<MyTooltip
label={t('common:common.folder.Drag Tip')}
shouldWrapChildren={false}
>
<Box color={'myGray.900'} className="textEllipsis">
<Box color={'myGray.900'} fontWeight={'500'} className="textEllipsis">
{collection.name}
</Box>
</MyTooltip>