perf: Dataset new ui (#2555)

* perf: dataset detail ui

* fix: collection tag modal

* perf: data card support markdown

* fix :ts

packages/web/components/common/Image/PhotoView.tsx

@@ -5,9 +5,14 @@ import { Box, Image, ImageProps } from '@chakra-ui/react';
 import { useSystem } from '../../../hooks/useSystem';
 import Loading from '../MyLoading';
 
-const MyPhotoView = (props: ImageProps) => {
+const MyPhotoView = ({
+  forbidImgPreview,
+  ...props
+}: ImageProps & { forbidImgPreview?: boolean }) => {
   const { isPc } = useSystem();
-  return (
+  return forbidImgPreview ? (
+    <Image {...props} />
+  ) : (
     <PhotoProvider
       maskOpacity={0.6}
       bannerVisible={!isPc}

packages/web/components/common/MySelect/index.tsx

@@ -19,8 +19,8 @@ import {
 } from '@chakra-ui/react';
 import type { ButtonProps, MenuItemProps } from '@chakra-ui/react';
 import { ChevronDownIcon } from '@chakra-ui/icons';
-import { useLoading } from '../../../hooks/useLoading';
 import MyIcon from '../Icon';
+import { useRequest2 } from '../../../hooks/useRequest';
 
 export type SelectProps<T = any> = ButtonProps & {
   value?: T;
@@ -32,7 +32,7 @@ export type SelectProps<T = any> = ButtonProps & {
     value: T;
   }[];
   isLoading?: boolean;
-  onchange?: (val: T) => void;
+  onchange?: (val: T) => any | Promise<any>;
 };
 
 const MySelect = <T = any,>(
@@ -82,6 +82,10 @@ const MySelect = <T = any,>(
     }
   }, [isOpen]);
 
+  const { runAsync: onChange, loading } = useRequest2((val: T) => onchange?.(val));
+
+  const isSelecting = loading || isLoading;
+
   return (
     <Box
       css={css({
@@ -92,7 +96,7 @@ const MySelect = <T = any,>(
     >
       <Menu
         autoSelect={false}
-        isOpen={isOpen}
+        isOpen={isOpen && !isSelecting}
         onOpen={onOpen}
         onClose={onClose}
         strategy={'fixed'}
@@ -118,7 +122,7 @@ const MySelect = <T = any,>(
           {...props}
         >
           <Flex alignItems={'center'}>
-            {isLoading && <MyIcon mr={2} name={'common/loading'} w={'16px'} />}
+            {isSelecting && <MyIcon mr={2} name={'common/loading'} w={'16px'} />}
             {selectItem?.alias || selectItem?.label || placeholder}
           </Flex>
         </MenuButton>
@@ -160,8 +164,8 @@ const MySelect = <T = any,>(
                     color: 'myGray.900'
                   })}
               onClick={() => {
-                if (onchange && value !== item.value) {
-                  onchange(item.value);
+                if (onChange && value !== item.value) {
+                  onChange(item.value);
                 }
               }}
               whiteSpace={'pre-wrap'}

packages/web/components/common/Tabs/LightRowTabs.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Box, Flex, Grid, Image } from '@chakra-ui/react';
+import { Box, Flex, Grid } from '@chakra-ui/react';
 import type { FlexProps, GridProps } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import Avatar from '../Avatar';
@@ -9,7 +9,7 @@ type Props<ValueType = string> = Omit<GridProps, 'onChange'> & {
   value: ValueType;
   size?: 'sm' | 'md' | 'lg';
   inlineStyles?: FlexProps;
-  activatedColor?: string;
+  activeColor?: string;
   onChange: (value: ValueType) => void;
 };
 
@@ -17,7 +17,7 @@ const LightRowTabs = <ValueType = string,>({
   list,
   size = 'md',
   value,
-  activatedColor = 'primary.600',
+  activeColor = 'primary.600',
   onChange,
   inlineStyles,
   ...props
@@ -68,10 +68,10 @@ const LightRowTabs = <ValueType = string,>({
             whiteSpace={'nowrap'}
             {...(value === item.value
               ? {
-                  color: activatedColor,
+                  color: activeColor,
                   cursor: 'default',
                   fontWeight: 'bold',
-                  borderBottomColor: activatedColor
+                  borderBottomColor: activeColor
                 }
               : {
                   cursor: 'pointer'