Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 0719f7bd by heheer Committed by GitHub
Options

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

parent 9b744374
Showing with 79 additions and 21 deletions
packages/web/components/common/Icon/constants.ts
...@@ -7,10 +7,12 @@ export const iconPaths = { ...@@ -7,10 +7,12 @@ export const iconPaths = {
closeSolid: () => import('./icons/closeSolid.svg'), closeSolid: () => import('./icons/closeSolid.svg'),
collectionLight: () => import('./icons/collectionLight.svg'), collectionLight: () => import('./icons/collectionLight.svg'),
collectionSolid: () => import('./icons/collectionSolid.svg'), collectionSolid: () => import('./icons/collectionSolid.svg'),
'common/add2': () => import('./icons/common/add2.svg'),
'common/addCircleLight': () => import('./icons/common/addCircleLight.svg'), 'common/addCircleLight': () => import('./icons/common/addCircleLight.svg'),
'common/addLight': () => import('./icons/common/addLight.svg'), 'common/addLight': () => import('./icons/common/addLight.svg'),
'common/backFill': () => import('./icons/common/backFill.svg'), 'common/backFill': () => import('./icons/common/backFill.svg'),
'common/backLight': () => import('./icons/common/backLight.svg'), 'common/backLight': () => import('./icons/common/backLight.svg'),
'common/check': () => import('./icons/common/check.svg'),
'common/clearLight': () => import('./icons/common/clearLight.svg'), 'common/clearLight': () => import('./icons/common/clearLight.svg'),
'common/closeLight': () => import('./icons/common/closeLight.svg'), 'common/closeLight': () => import('./icons/common/closeLight.svg'),
'common/confirm/commonTip': () => import('./icons/common/confirm/commonTip.svg'), 'common/confirm/commonTip': () => import('./icons/common/confirm/commonTip.svg'),
......
packages/web/components/common/Icon/icons/common/add2.svg 0 → 100644
<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>
packages/web/components/common/Icon/icons/common/check.svg 0 → 100644
<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>
\ No newline at end of file
packages/web/styles/theme.ts
...@@ -477,6 +477,7 @@ const Checkbox = checkBoxMultiStyle({ ...@@ -477,6 +477,7 @@ const Checkbox = checkBoxMultiStyle({
_checked: { _checked: {
bg: 'primary.50', bg: 'primary.50',
borderColor: 'primary.600', borderColor: 'primary.600',
borderWidth: '1px',
color: 'primary.600', color: 'primary.600',
boxShadow: `${shadowLight} !important`, boxShadow: `${shadowLight} !important`,
_hover: { _hover: {
......
projects/app/src/components/core/app/DatasetParamsModal.tsx
...@@ -206,7 +206,12 @@ const DatasetParamsModal = ({ ...@@ -206,7 +206,12 @@ const DatasetParamsModal = ({
</Box> </Box>
</Box> </Box>
<Box position={'relative'} w={'18px'} h={'18px'}> <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 position={'absolute'} top={0} right={0} bottom={0} left={0} zIndex={1}></Box>
</Box> </Box>
</Flex> </Flex>
......
projects/app/src/components/core/app/InputGuideConfig.tsx
...@@ -433,6 +433,7 @@ const LexiconConfigModal = ({ appId, onClose }: { appId: string; onClose: () => ...@@ -433,6 +433,7 @@ const LexiconConfigModal = ({ appId, onClose }: { appId: string; onClose: () =>
<Checkbox <Checkbox
mr={2} mr={2}
isChecked={selected} isChecked={selected}
icon={<MyIcon name={'common/check'} w={'12px'} />}
onChange={(e) => { onChange={(e) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedRows([...selectedRows, item._id]); setSelectedRows([...selectedRows, item._id]);
......
projects/app/src/components/core/chat/ChatContainer/ChatBox/index.tsx
...@@ -57,6 +57,7 @@ import type { StreamResponseType } from '@/web/common/api/fetch'; ...@@ -57,6 +57,7 @@ import type { StreamResponseType } from '@/web/common/api/fetch';
import { useContextSelector } from 'use-context-selector'; import { useContextSelector } from 'use-context-selector';
import { useSystem } from '@fastgpt/web/hooks/useSystem'; import { useSystem } from '@fastgpt/web/hooks/useSystem';
import { useThrottleFn } from 'ahooks'; import { useThrottleFn } from 'ahooks';
import MyIcon from '@fastgpt/web/components/common/Icon';
const ResponseTags = dynamic(() => import('./components/ResponseTags')); const ResponseTags = dynamic(() => import('./components/ResponseTags'));
const FeedbackModal = dynamic(() => import('./components/FeedbackModal')); const FeedbackModal = dynamic(() => import('./components/FeedbackModal'));
...@@ -962,7 +963,10 @@ const ChatBox = ( ...@@ -962,7 +963,10 @@ const ChatBox = (
<MyTooltip <MyTooltip
label={t('common:core.app.feedback.close custom feedback')} 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} {text}
</Checkbox> </Checkbox>
</MyTooltip> </MyTooltip>
......
projects/app/src/components/core/dataset/RawSourceBox.tsx
...@@ -48,7 +48,7 @@ const RawSourceBox = ({ ...@@ -48,7 +48,7 @@ const RawSourceBox = ({
: {})} : {})}
{...props} {...props}
> >
<MyIcon name={icon as any} w={['14px', '16px']} mr={2} /> <MyIcon name={icon as any} w={['16px', '20px']} mr={2} />
<Box <Box
maxW={['200px', '300px']} maxW={['200px', '300px']}
className={props.className ?? 'textEllipsis'} className={props.className ?? 'textEllipsis'}
......
projects/app/src/components/support/permission/MemberManager/AddMemberModal.tsx
...@@ -134,12 +134,16 @@ function AddMemberModal({ onClose }: AddModalPropsType) { ...@@ -134,12 +134,16 @@ function AddMemberModal({ onClose }: AddModalPropsType) {
alignItems="center" alignItems="center"
_hover={{ _hover={{
bgColor: 'myGray.50', bgColor: 'myGray.50',
cursor: 'pointer' cursor: 'pointer',
...(!selectedMemberIdList.includes(member.tmbId)
? { svg: { color: 'myGray.50' } }
: {})
}} }}
> >
<Checkbox <Checkbox
mr="3" mr="3"
isChecked={selectedMemberIdList.includes(member.tmbId)} isChecked={selectedMemberIdList.includes(member.tmbId)}
icon={<MyIcon name={'common/check'} w={'12px'} />}
onChange={onChange} onChange={onChange}
/> />
<Flex <Flex
......
projects/app/src/components/support/user/team/TeamManageModal/components/PermissionManage/AddManager.tsx
...@@ -101,7 +101,10 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces ...@@ -101,7 +101,10 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces
alignItems="center" alignItems="center"
key={member.tmbId} key={member.tmbId}
cursor={'pointer'} cursor={'pointer'}
_hover={{ bg: 'myGray.50' }} _hover={{
bg: 'myGray.50',
...(!selected.includes(member) ? { svg: { color: 'myGray.50' } } : {})
}}
_notLast={{ mb: 2 }} _notLast={{ mb: 2 }}
onClick={() => { onClick={() => {
if (selected.indexOf(member) == -1) { if (selected.indexOf(member) == -1) {
...@@ -111,7 +114,10 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces ...@@ -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" /> <Avatar ml={2} src={member.avatar} w="1.5rem" />
{member.memberName} {member.memberName}
</Flex> </Flex>
......
projects/app/src/pages/app/detail/components/SimpleApp/AppCard.tsx
...@@ -167,7 +167,10 @@ const AppCard = () => { ...@@ -167,7 +167,10 @@ const AppCard = () => {
<ModalBody> <ModalBody>
<Box mb={3}>{appT('transition_to_workflow_create_new_tip')}</Box> <Box mb={3}>{appT('transition_to_workflow_create_new_tip')}</Box>
<HStack cursor={'pointer'} onClick={() => setTransitionCreateNew((state) => !state)}> <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> <Box>{appT('transition_to_workflow_create_new_placeholder')}</Box>
</HStack> </HStack>
</ModalBody> </ModalBody>
......
projects/app/src/pages/dataset/detail/components/CollectionCard/HeaderTagPopOver.tsx
...@@ -96,6 +96,10 @@ const HeaderTagPopOver = () => { ...@@ -96,6 +96,10 @@ const HeaderTagPopOver = () => {
overflow={'hidden'} overflow={'hidden'}
h={['28px', '36px']} h={['28px', '36px']}
fontSize={'sm'} fontSize={'sm'}
_hover={{
boxShadow: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)',
borderColor: 'primary.300'
}}
> >
<Flex flex={'1 0 0'}> <Flex flex={'1 0 0'}>
{t('dataset:tag.tags')} {t('dataset:tag.tags')}
...@@ -158,9 +162,12 @@ const HeaderTagPopOver = () => { ...@@ -158,9 +162,12 @@ const HeaderTagPopOver = () => {
py={1} py={1}
my={1} my={1}
cursor={'pointer'} cursor={'pointer'}
bg={checked ? '#1118240D' : 'transparent'}
color={checked ? 'primary.700' : 'myGray.600'} color={checked ? 'primary.700' : 'myGray.600'}
_hover={{ bg: '#1118240D', color: 'primary.700' }} _hover={{
bg: '#1118240D',
color: 'primary.700',
...(checked ? {} : { svg: { color: '#F3F3F4' } })
}}
borderRadius={'xs'} borderRadius={'xs'}
key={item._id} key={item._id}
onClick={(e) => { onClick={(e) => {
...@@ -174,6 +181,7 @@ const HeaderTagPopOver = () => { ...@@ -174,6 +181,7 @@ const HeaderTagPopOver = () => {
checkTags(item); checkTags(item);
}} }}
size={'md'} size={'md'}
icon={<MyIcon name={'common/check'} w={'12px'} />}
/> />
<Box ml={2}>{item.tag}</Box> <Box ml={2}>{item.tag}</Box>
</Flex> </Flex>
...@@ -186,6 +194,7 @@ const HeaderTagPopOver = () => { ...@@ -186,6 +194,7 @@ const HeaderTagPopOver = () => {
fontSize={'sm'} fontSize={'sm'}
_hover={{ bg: '#1118240D', color: 'primary.700' }} _hover={{ bg: '#1118240D', color: 'primary.700' }}
borderRadius={'none'} borderRadius={'none'}
borderBottomLeftRadius={'md'}
variant={'unstyled'} variant={'unstyled'}
onClick={() => { onClick={() => {
setCheckedTags([]); setCheckedTags([]);
...@@ -202,6 +211,7 @@ const HeaderTagPopOver = () => { ...@@ -202,6 +211,7 @@ const HeaderTagPopOver = () => {
fontSize={'sm'} fontSize={'sm'}
_hover={{ bg: '#1118240D', color: 'primary.700' }} _hover={{ bg: '#1118240D', color: 'primary.700' }}
borderRadius={'none'} borderRadius={'none'}
borderBottomRightRadius={'md'}
variant={'unstyled'} variant={'unstyled'}
onClick={() => { onClick={() => {
onOpenTagManageModal(); onOpenTagManageModal();
......
projects/app/src/pages/dataset/detail/components/CollectionCard/TagManageModal.tsx
...@@ -305,7 +305,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => { ...@@ -305,7 +305,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
}} }}
cursor={'pointer'} cursor={'pointer'}
> >
<MyIcon name="common/addLight" w={4} /> <MyIcon name="common/add2" w={4} />
</Box> </Box>
<Box <Box
className="icon-box" className="icon-box"
...@@ -487,8 +487,14 @@ const AddTagToCollections = ({ ...@@ -487,8 +487,14 @@ const AddTagToCollections = ({
<Flex <Flex
px={2} px={2}
py={1} py={1}
mb={2}
flex={'1'} flex={'1'}
_hover={{ bg: 'myGray.100' }} _hover={{
bg: 'myGray.100',
...(!selectedCollections.includes(collection.id)
? { svg: { color: 'myGray.100' } }
: {})
}}
alignItems={'center'} alignItems={'center'}
borderRadius={'4px'} borderRadius={'4px'}
key={collection.id} key={collection.id}
...@@ -506,6 +512,7 @@ const AddTagToCollections = ({ ...@@ -506,6 +512,7 @@ const AddTagToCollections = ({
<Checkbox <Checkbox
size={'md'} size={'md'}
mr={2} mr={2}
icon={<MyIcon name="common/check" w={'12px'} />}
onChange={() => { onChange={() => {
setSelectedCollections((prev) => { setSelectedCollections((prev) => {
if (prev.includes(collection.id)) { if (prev.includes(collection.id)) {
...@@ -517,8 +524,8 @@ const AddTagToCollections = ({ ...@@ -517,8 +524,8 @@ const AddTagToCollections = ({
}} }}
isChecked={selectedCollections.includes(collection.id)} isChecked={selectedCollections.includes(collection.id)}
/> />
<MyIcon name={collection.icon as any} w={'16px'} mr={2} /> <MyIcon name={collection.icon as any} w={'20px'} mr={2} />
<Box fontSize={'14px'} borderRadius={'6px'}> <Box fontSize={'14px'} borderRadius={'6px'} color={'myGray.900'}>
{collection.name} {collection.name}
</Box> </Box>
</Flex> </Flex>
......
projects/app/src/pages/dataset/detail/components/CollectionCard/TagsPopOver.tsx
...@@ -155,9 +155,10 @@ const TagsPopOver = ({ ...@@ -155,9 +155,10 @@ const TagsPopOver = ({
<Box <Box
key={index} key={index}
h={5} h={5}
mr={1} mr={2}
px={2} px={2}
fontSize={'11px'} fontSize={'11px'}
fontWeight={'500'}
bg={'#F0FBFF'} bg={'#F0FBFF'}
color={'#0884DD'} color={'#0884DD'}
borderRadius={'4px'} borderRadius={'4px'}
...@@ -213,6 +214,7 @@ const TagsPopOver = ({ ...@@ -213,6 +214,7 @@ const TagsPopOver = ({
borderRadius={'xs'} borderRadius={'xs'}
onClick={() => { onClick={() => {
onCreateCollectionTag(searchTag); onCreateCollectionTag(searchTag);
// setCheckedTags([...checkedTags, item]);
}} }}
> >
<MyIcon name={'common/addLight'} w={'14px'} /> <MyIcon name={'common/addLight'} w={'14px'} />
...@@ -228,13 +230,16 @@ const TagsPopOver = ({ ...@@ -228,13 +230,16 @@ const TagsPopOver = ({
alignItems={'center'} alignItems={'center'}
fontSize={'xs'} fontSize={'xs'}
px={1} px={1}
py={0.5} py={1}
my={0.5} my={1}
key={item._id} key={item._id}
cursor={'pointer'} cursor={'pointer'}
bg={tagsList.includes(item.tag) ? '#1118240D' : 'transparent'}
color={tagsList.includes(item.tag) ? '#2B5FD9' : 'myGray.600'} 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'} borderRadius={'xs'}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
...@@ -254,8 +259,9 @@ const TagsPopOver = ({ ...@@ -254,8 +259,9 @@ const TagsPopOver = ({
setCheckedTags(checkedTags.filter((t) => t._id !== item._id)); 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> </Flex>
); );
})} })}
......
projects/app/src/pages/dataset/detail/components/CollectionCard/index.tsx
...@@ -237,12 +237,12 @@ const CollectionCard = () => { ...@@ -237,12 +237,12 @@ const CollectionCard = () => {
> >
<Td minW={'150px'} maxW={['200px', '300px']} draggable py={2}> <Td minW={'150px'} maxW={['200px', '300px']} draggable py={2}>
<Flex alignItems={'center'}> <Flex alignItems={'center'}>
<MyIcon name={collection.icon as any} w={'16px'} mr={2} /> <MyIcon name={collection.icon as any} w={'18px'} mr={2} />
<MyTooltip <MyTooltip
label={t('common:common.folder.Drag Tip')} label={t('common:common.folder.Drag Tip')}
shouldWrapChildren={false} shouldWrapChildren={false}
> >
<Box color={'myGray.900'} className="textEllipsis"> <Box color={'myGray.900'} fontWeight={'500'} className="textEllipsis">
{collection.name} {collection.name}
</Box> </Box>
</MyTooltip> </MyTooltip>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment