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

Patrickill · Aug 16, 2024 · 0719f7b · 0719f7b
1 parent 9b74437
commit 0719f7b
Show file tree

Hide file tree

Showing 15 changed files with 78 additions and 21 deletions.
diff --git a/packages/web/components/common/Icon/constants.ts b/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'),

diff --git a/packages/web/components/common/Icon/icons/common/add2.svg b/packages/web/components/common/Icon/icons/common/add2.svg
diff --git a/packages/web/components/common/Icon/icons/common/check.svg b/packages/web/components/common/Icon/icons/common/check.svg
diff --git a/packages/web/styles/theme.ts b/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: {

diff --git a/projects/app/src/components/core/app/DatasetParamsModal.tsx b/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>

diff --git a/projects/app/src/components/core/app/InputGuideConfig.tsx b/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]);

diff --git a/projects/app/src/components/core/chat/ChatContainer/ChatBox/index.tsx b/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>

diff --git a/projects/app/src/components/core/dataset/RawSourceBox.tsx b/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'}

diff --git a/projects/app/src/components/support/permission/MemberManager/AddMemberModal.tsx b/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

diff --git a/...c/components/support/user/team/TeamManageModal/components/PermissionManage/AddManager.tsx b/...c/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>

diff --git a/projects/app/src/pages/app/detail/components/SimpleApp/AppCard.tsx b/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>

diff --git a/projects/app/src/pages/dataset/detail/components/CollectionCard/HeaderTagPopOver.tsx b/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();

diff --git a/projects/app/src/pages/dataset/detail/components/CollectionCard/TagManageModal.tsx b/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} />
-              <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>

diff --git a/projects/app/src/pages/dataset/detail/components/CollectionCard/TagsPopOver.tsx b/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}
-                      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>
                   );
                 })}

diff --git a/projects/app/src/pages/dataset/detail/components/CollectionCard/index.tsx b/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>