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

packages/web/components/common/Icon/constants.ts

@@ -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'),

packages/web/components/common/Icon/icons/common/add2.svg

@@ -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>

packages/web/components/common/Icon/icons/common/check.svg

@@ -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>

packages/web/styles/theme.ts

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

projects/app/src/components/core/app/DatasetParamsModal.tsx

@@ -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>

projects/app/src/components/core/app/InputGuideConfig.tsx

@@ -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]);

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

@@ -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>

projects/app/src/components/core/dataset/RawSourceBox.tsx

@@ -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'}

projects/app/src/components/support/permission/MemberManager/AddMemberModal.tsx

@@ -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

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

@@ -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>

projects/app/src/pages/app/detail/components/SimpleApp/AppCard.tsx

@@ -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>

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

@@ -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();

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

@@ -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} />
+              <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}
               </Box>
             </Flex>

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

@@ -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}
+                      py={1}
-                      my={0.5}
+                      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>
                   );
                 })}

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

@@ -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>