Merge pull request '合并dev-zw' (#130) from dev-zw into dev

react-ui/src/components/KFEmpty/index.tsx

@@ -46,7 +46,7 @@ function KFEmpty({
 
   return (
     <div className={classNames('kf-empty', className)} style={style}>
-      <img className="kf-empty__image" src={image} />
+      <img className="kf-empty__image" src={image} draggable={false} alt="" />
       <div className="kf-empty__title">{title}</div>
       <div className="kf-empty__content">{content}</div>
       {hasFooter && (

react-ui/src/components/ModalTitle/index.tsx

@@ -18,7 +18,7 @@ type ModalTitleProps = {
 function ModalTitle({ title, image, style, className }: ModalTitleProps) {
   return (
     <div className={classNames('kf-modal-title', className)} style={style}>
-      {image && <img className={'kf-modal-title__image'} src={image} alt="" />}
+      {image && <img className={'kf-modal-title__image'} src={image} draggable={false} alt="" />}
       {title}
     </div>
   );

react-ui/src/components/SubAreaTitle/index.tsx

@@ -17,7 +17,7 @@ type SubAreaTitleProps = {
 function SubAreaTitle({ title, image, style, className }: SubAreaTitleProps) {
   return (
     <div className={classNames('kf-subarea-title', className)} style={style}>
-      <img src={image} width={14} />
+      <img src={image} width={14} draggable={false} alt="" />
       <span style={{ marginLeft: '8px' }}>{title}</span>
     </div>
   );

react-ui/src/pages/CodeConfig/components/CodeConfigItem/index.tsx

@@ -63,11 +63,16 @@ function CodeConfigItem({ item, onClick, onEdit, onRemove }: CodeConfigItemProps
       </div>
       <Flex justify="space-between">
         <div className={styles['code-config-item__time']}>
-          <img style={{ width: '17px', marginRight: '6px' }} src={creatByImg} alt="" />
+          <img
+            style={{ width: '17px', marginRight: '6px' }}
+            src={creatByImg}
+            alt=""
+            draggable={false}
+          />
           <span>{item.create_by}</span>
         </div>
         <div className={styles['code-config-item__time']}>
-          <img style={{ width: '12px', marginRight: '5px' }} src={clock} alt="" />
+          <img style={{ width: '12px', marginRight: '5px' }} src={clock} alt="" draggable={false} />
           <span>最近更新: {formatDate(item.update_time, 'YYYY-MM-DD')}</span>
         </div>
       </Flex>

react-ui/src/pages/Dataset/components/CategoryItem/index.tsx

@@ -23,12 +23,14 @@ function CategoryItem({ resourceType, item, isSelected, onClick }: CategoryItemP
         style={{ width: '22px' }}
         src={`/assets/images/${config.prefix}/${item.path}.png`}
         alt=""
+        draggable={false}
       />
       <img
         className={styles['category-item__active-icon']}
         style={{ width: '22px' }}
         src={`/assets/images/${config.prefix}/${item.path}-hover.png`}
         alt=""
+        draggable={false}
       />
       <span className={styles['category-item__name']}>{item.name}</span>
     </div>

react-ui/src/pages/Dataset/components/ResourceItem/index.tsx

@@ -39,11 +39,16 @@ function ResourceItem({ item, isPublic, onClick, onRemove }: ResourceItemProps)
       <div className={styles['resource-item__description']}>{item.description}</div>
       <Flex justify="space-between">
         <div className={styles['resource-item__time']}>
-          <img style={{ width: '17px', marginRight: '6px' }} src={creatByImg} alt="" />
+          <img
+            style={{ width: '17px', marginRight: '6px' }}
+            src={creatByImg}
+            draggable={false}
+            alt=""
+          />
           <span>{item.create_by ?? ''}</span>
         </div>
         <div className={styles['resource-item__time']}>
-          <img style={{ width: '12px', marginRight: '5px' }} src={clock} alt="" />
+          <img style={{ width: '12px', marginRight: '5px' }} src={clock} draggable={false} alt="" />
           <span>
             {'最近更新: '}
             {item.update_time ? formatDate(item.update_time, 'YYYY-MM-DD') : item.time_ago ?? ''}

react-ui/src/pages/Dataset/components/ResourcePage/index.tsx

@@ -18,8 +18,8 @@ function ResourcePage({ resourceType }: ResourcePageProps) {
   const [activeTab, setActiveTab] = useState<string>(cacheState?.activeTab ?? CommonTabKeys.Public);
   const [typeList, setTypeList] = useState<CategoryData[]>([]);
   const [tagList, setTagList] = useState<CategoryData[]>([]);
-  const [activeType, setActiveType] = useState<number | undefined>(cacheState?.activeType);
-  const [activeTag, setActiveTag] = useState<number | undefined>(cacheState?.activeTag);
+  const [activeType, setActiveType] = useState<string | undefined>(cacheState?.activeType);
+  const [activeTag, setActiveTag] = useState<string | undefined>(cacheState?.activeTag);
   const dataListRef = useRef<ResourceListRef>(null);
   const config = resourceConfig[resourceType];
 
@@ -34,12 +34,12 @@ function ResourcePage({ resourceType }: ResourcePageProps) {
 
   // 选择类型
   const chooseType = (record: CategoryData) => {
-    setActiveType((prev) => (prev === record.id ? undefined : record.id));
+    setActiveType((prev) => (prev === record.name ? undefined : record.name));
   };
 
   // 选择 Tag
   const chooseTag = (record: CategoryData) => {
-    setActiveTag((prev) => (prev === record.id ? undefined : record.id));
+    setActiveTag((prev) => (prev === record.name ? undefined : record.name));
   };
 
   // 获取分类

react-ui/src/pages/Experiment/components/ExperimentInstance/index.tsx

@@ -116,6 +116,8 @@ function ExperimentInstanceComponent({
             <img
               style={{ width: '17px', marginRight: '7px' }}
               src={experimentStatusInfo[item.status as ExperimentStatus]?.icon}
+              draggable={false}
+              alt=""
             />
             <span
               style={{ color: experimentStatusInfo[item.status as ExperimentStatus]?.color }}

react-ui/src/pages/Experiment/components/ExperimentStatusCell/index.tsx

@@ -14,7 +14,12 @@ function ExperimentStatusCell(status?: ExperimentStatus | null) {
   }
   return (
     <div className={styles['experiment-status-cell']}>
-      <img style={{ width: '17px', marginRight: '7px' }} src={statusInfo[status]?.icon} />
+      <img
+        style={{ width: '17px', marginRight: '7px' }}
+        src={statusInfo[status]?.icon}
+        draggable={false}
+        alt=""
+      />
       <span
         style={{ color: statusInfo[status]?.color }}
         className={styles['experiment-status-cell__label']}

react-ui/src/pages/Experiment/components/TensorBoardStatus/index.tsx

@@ -70,6 +70,8 @@ function TensorBoardStatusCell({
               className={styles['tensorBoard-status__icon']}
               src={statusConfig[status].icon}
               onClick={onClick}
+              draggable={false}
+              alt=""
             />
           )}
         </>

react-ui/src/pages/Experiment/index.jsx

@@ -385,6 +385,8 @@ function Experiment() {
                       style={{ width: '17px', marginRight: '6px' }}
                       key={index}
                       src={experimentStatusInfo[item].icon}
+                      draggable={false}
+                      alt=""
                     />
                   );
                 })

react-ui/src/pages/Pipeline/components/ModelMenu/index.tsx

@@ -48,6 +48,7 @@ const ModelMenu = ({ onComponentDragEnd }: ModelMenuProps) => {
                   <img
                     style={{ height: '16px', marginRight: '15px' }}
                     src={`/assets/images/${ele.icon_path}.png`}
+                    draggable={false}
                     alt=""
                   />
                 )}

react-ui/src/pages/User/Center/components/AvatarCropper/index.tsx

@@ -116,7 +116,12 @@ const AvatarCropperForm: React.FC<AvatarCropperProps> = (props) => {
         </Col>
         <Col span={12} order={2}>
           <div className={styles.avatarPreview}>
-            <img src={previewData} style={{ height: '100%', width: '100%' }} />
+            <img
+              src={previewData}
+              style={{ height: '100%', width: '100%' }}
+              draggable={false}
+              alt=""
+            />
           </div>
         </Col>
       </Row>

react-ui/src/pages/User/Center/index.tsx

@@ -141,7 +141,7 @@ const Center: React.FC = () => {
                     setCropperModalOpen(true);
                   }}
                 >
-                  <img alt="" src={currentUser.avatar} />
+                  <img src={currentUser.avatar} draggable={false} alt="" />
                 </div>
                 {renderUserInfo(currentUser)}
                 <Divider dashed />

react-ui/src/pages/User/Login/index.tsx

@@ -11,7 +11,7 @@ import styles from './login.less';
 const LoginInputPrefix = ({ icon }: { icon: string }) => {
   return (
     <div className={styles['login-input-prefix']}>
-      <img className={styles['login-input-prefix__icon']} src={icon} alt="" />
+      <img className={styles['login-input-prefix__icon']} src={icon} alt="" draggable={false} />
       <div className={styles['login-input-prefix__line']}></div>
     </div>
   );
@@ -98,6 +98,7 @@ const Login = () => {
           <img
             src={require('@/assets/img/logo.png')}
             style={{ width: '32px', marginRight: '12px' }}
+            draggable={false}
             alt=""
           />
           智能材料科研平台
@@ -107,6 +108,7 @@ const Login = () => {
           <img
             src={require('@/assets/img/login-ai-logo.png')}
             className={styles['user-login__left__title__img']}
+            draggable={false}
             alt=""
           />
         </div>
@@ -116,6 +118,7 @@ const Login = () => {
         <img
           className={styles['user-login__left__bottom-img']}
           src={require('@/assets/img/login-left-image.png')}
+          draggable={false}
           alt=""
         />
       </div>

react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx

@@ -31,6 +31,8 @@ function ExperimentTable({ tableData = [], style }: ExperimentTableProps) {
               src={experimentStatusInfo[item.status as ExperimentStatus]?.icon}
               width={17}
               height={17}
+              draggable={false}
+              alt=""
             />
           </div>
           <div className={styles['experiment-table__duration']}>

react-ui/src/pages/Workspace/components/QuickStart/WorkArrow.tsx

@@ -44,6 +44,7 @@ function WorkArrow({
       <img
         className={styles['work-arrow__img']}
         src={require('@/assets/img/blue-triangle.png')}
+        draggable={false}
         alt=""
         width={10}
         height={9}

react-ui/src/pages/Workspace/components/TotalStatistics/index.tsx

@@ -10,7 +10,7 @@ type TotalStatisticsProps = {
 function TotalStatistics({ icon = '', title = '', count = 0, style }: TotalStatisticsProps) {
   return (
     <div className={styles['total-statistics']} style={style}>
-      <img className={styles['total-statistics__icon']} src={icon} />
+      <img className={styles['total-statistics__icon']} src={icon} draggable={false} alt="" />
       <div>
         <div className={styles['total-statistics__title']}>
           <span>{title}</span>

react-ui/src/pages/Workspace/components/UserSpace/index.tsx

@@ -20,7 +20,15 @@ function UserSpace({ users = [] }: UserSpaceProps) {
           className={styles['user-space__avatar']}
           src={currentUser?.avatar}
           alt=""
-          icon={<img src={require('@/assets/img/avatar-default.png')} width={56} height={56} />}
+          icon={
+            <img
+              src={require('@/assets/img/avatar-default.png')}
+              width={56}
+              height={56}
+              draggable={false}
+              alt=""
+            />
+          }
         ></Avatar>
         <div className={styles['user-space__name']}>{currentUser?.nickName}</div>
         <div className={styles['user-space__role']}>{currentUser?.roleNames?.[0]?.roleName}</div>
@@ -34,7 +42,7 @@ function UserSpace({ users = [] }: UserSpaceProps) {
             <div className={styles['user-space__participant__count']}>8</div>
           </Space>
           <Flex align="center" gap={12} wrap="wrap">
-            {users?.map((item, index) => {
+            {users?.map((_item, index) => {
               return (
                 <Avatar
                   key={index}
@@ -42,7 +50,13 @@ function UserSpace({ users = [] }: UserSpaceProps) {
                   src={require(`@/assets/img/user-avatar/${index + 1}.png`)}
                   alt=""
                   icon={
-                    <img src={require('@/assets/img/avatar-default.png')} width={36} height={36} />
+                    <img
+                      src={require('@/assets/img/avatar-default.png')}
+                      width={36}
+                      height={36}
+                      draggable={false}
+                      alt=""
+                    />
                   }
                 ></Avatar>
               );

react-ui/src/pages/Workspace/components/WorkspaceIntro/index.tsx

@@ -15,7 +15,13 @@ function WorkspaceIntro() {
             type="primary"
             style={{ marginRight: '20px' }}
             icon={
-              <img src={require('@/assets/img/functional-material.png')} width={19} height={19} />
+              <img
+                src={require('@/assets/img/functional-material.png')}
+                width={19}
+                height={19}
+                draggable={false}
+                alt=""
+              />
             }
           >
             功能材料自主实验系统
@@ -23,7 +29,13 @@ function WorkspaceIntro() {
           <Button
             type="default"
             icon={
-              <img src={require('@/assets/img/molecular-material.png')} width={19} height={19} />
+              <img
+                src={require('@/assets/img/molecular-material.png')}
+                width={19}
+                height={19}
+                draggable={false}
+                alt=""
+              />
             }
           >
             分子材料自主实验系统
@@ -34,6 +46,8 @@ function WorkspaceIntro() {
         <img
           className={styles['workspace-intro__icon']}
           src={require('@/assets/img/workspace-intro-icon.png')}
+          draggable={false}
+          alt=""
         />
       </div>
     </div>

react-ui/src/pages/Workspace/index.less

@@ -53,6 +53,7 @@
     width: 64px;
     height: 64px;
     background-color: white;
+    border-radius: 10px;
     cursor: pointer;
   }
 }

react-ui/src/pages/Workspace/index.tsx

@@ -76,7 +76,8 @@ function Workspace() {
           className={styles['workspace__robot-img']}
           src={require('@/assets/img/robot.png')}
           onClick={handleClick}
-          onDragStart={(e) => e.preventDefault()}
+          draggable={false}
+          alt=""
         ></img>
       </Draggable>
 

react-ui/src/utils/ui.tsx

@@ -21,6 +21,7 @@ export function modalConfirm({ title, content, onOk, ...rest }: ModalFuncProps)
         <img
           src={require('@/assets/img/delete-icon.png')}
           style={{ width: '120px', marginBottom: '24px' }}
+          draggable={false}
           alt=""
         />
         <div style={{ color: themes.textColor, fontSize: '16px', fontWeight: 500 }}>{title}</div>