feat(exam->bodyPositionList): add interaction effects with theme color border on hover or selection

 close #27

src/app.tsx

@@ -51,6 +51,12 @@ function App({ children }: PropsWithChildren<React.ReactNode>) {
     <Provider store={store}>
       <ConfigProvider theme={currentTheme}>
         <IntlProvider locale={locale} messages={messages}>
+          <style>
+            {/*把theme中的colorPrimary转换成变量--color-primary，变量被tailwindcss使用*/}
+            {`:root {
+            --color-primary: ${currentTheme.token.colorPrimary};
+          }`}
+          </style>
           <div
             style={{
               backgroundColor: currentTheme.token.colorBgLayout,

src/pages/exam/components/BodyPositionList.tsx

@@ -54,9 +54,9 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({
   const bodyPositions = useSelector(
     (state: RootState) => state.bodyPositionList.bodyPositions
   );
-  // const selectedBodyPosition = useSelector(
-  //   (state: RootState) => state.bodyPositionList.selectedBodyPosition
-  // );
+  const selectedBodyPosition = useSelector(
+    (state: RootState) => state.bodyPositionList.selectedBodyPosition
+  );
 
   const addBodyPositionClick = () => {
     // dispatch(addBodyPosition({
@@ -78,7 +78,13 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({
                 ? getExposedImageUrl(bodyPosition.sop_instance_uid)
                 : getViewIconUrl(bodyPosition.view_icon_name)
             }
-            className="image-viewer-item w-[50%] mx-auto"
+            className={`image-viewer-item w-[50%] mx-auto hover:border-[var(--color-primary)] hover:border-4
+              ${
+                bodyPosition.sop_instance_uid ===
+                selectedBodyPosition?.sop_instance_uid
+                  ? 'border-4 border-[var(--color-primary)] '
+                  : ''
+              }`}
             onClick={() => handleImageClick(bodyPosition)}
           />
         ))}