add interactive

package.json

@@ -9,6 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/icons": "^5.0.1",
+    "antd": "^5.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/components/Yidian/Frame427319538/Frame427319538.module.css

@@ -51,6 +51,7 @@
   flex-direction: column;
 }
 .frame427319537 {
+  cursor: pointer;
   width: min-content;
   height: min-content;
   align-items: center;

src/components/Yidian/Frame427319538/Frame427319538.tsx

@@ -1,9 +1,11 @@
-import { memo } from 'react';
+import { memo } from "react";
-import type { FC } from 'react';
+import type { FC } from "react";
 
-import resets from '../../_resets.module.css';
+import resets from "../../_resets.module.css";
-import { Frame2 } from '../Frame2/Frame2';
+import { Frame2 } from "../Frame2/Frame2";
-import classes from './Frame427319538.module.css';
+import classes from "./Frame427319538.module.css";
+import { Popover } from "antd";
+import { RiskContent } from "../RiskContent";
 
 interface Props {
   className?: string;
@@ -12,23 +14,31 @@ interface Props {
   };
 }
 /* @figmaId 5628:6390 */
-export const Frame427319538: FC<Props> = memo(function Frame427319538(props = {}) {
+export const Frame427319538: FC<Props> = memo(function Frame427319538(
+  props = {}
+) {
   return (
-    <div className={`${resets.storybrainResets} ${props.classes?.root || ''} ${props.className || ''} ${classes.root}`}>
+    <div
+      className={`${resets.storybrainResets} ${props.classes?.root || ""} ${
+        props.className || ""
+      } ${classes.root}`}
+    >
       <div className={classes.frame427319539}>
         <div className={classes.frame427319542}>
           <div className={classes.frame427319541}>
             <Frame2 classes={{ vector: classes.vector }} />
             <div className={classes.unnamed}>上海市大数据中心</div>
           </div>
-          <div className={classes.frame427319537}>
+          <Popover content={<RiskContent></RiskContent>}>
-            <div className={classes.unnamed2}>风险点</div>
+            <div className={classes.frame427319537}>
-            <div className={classes.line62}></div>
+              <div className={classes.unnamed2}>风险点</div>
-            <div className={classes.frame427319536}>
+              <div className={classes.line62}></div>
-              <div className={classes._2}>2</div>
+              <div className={classes.frame427319536}>
-              <div className={classes.unnamed3}>个</div>
+                <div className={classes._2}>2</div>
+                <div className={classes.unnamed3}>个</div>
+              </div>
             </div>
-          </div>
+          </Popover>
         </div>
         <div className={classes.frame427319534}>
           <div className={classes._22}>

src/components/Yidian/RiskContent.tsx

@@ -0,0 +1,36 @@
+import { FC } from "react";
+import classes from "./Yidian.module.css";
+
+export const RiskContent: FC<{}> = () => {
+  return (
+    <div className={classes.riskContent}>
+      <div className={classes.riskItemRed}>
+        <div className={classes.riskItemContent}>
+          <div className={classes.title2}>2022年标准化考点建设项目 有欠款</div>
+          <div className={classes.detail}>
+            <div className={classes.date}>2023-03-26 截止</div>
+            <div className={classes.name}>古丽-zhuk</div>
+          </div>
+        </div>
+      </div>
+      <div className={classes.riskItemYellow}>
+        <div className={classes.frame4273194633}>
+          <div className={classes.unnamed158}>合同到期请查看</div>
+          <div className={classes.frame4273194623}>
+            <div className={classes._20233263}>2023-03-26 截止</div>
+            <div className={classes.Zhuk3}>古丽-zhuk</div>
+          </div>
+        </div>
+      </div>
+      <div className={classes.riskItemYellow2}>
+        <div className={classes.frame4273194634}>
+          <div className={classes.unnamed159}>合同到期请查看</div>
+          <div className={classes.frame4273194624}>
+            <div className={classes._20233264}>2023-03-26 截止</div>
+            <div className={classes.Zhuk4}>古丽-zhuk</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/Yidian/SelectPride.tsx

@@ -0,0 +1,16 @@
+import { Select } from "antd";
+import { FC } from "react";
+
+export const SelectPride: FC<{}> = () => {
+  return (
+    <Select
+      defaultValue="jack"
+      style={{ width: 120 }}
+      disabled={false}
+      options={[
+        { value: "jack", label: "优秀项目" },
+        { value: "lucy", label: "标杆项目" },
+      ]}
+    />
+  );
+};

src/components/Yidian/SelectRank.tsx

@@ -0,0 +1,17 @@
+import { Select } from "antd";
+import { FC } from "react";
+
+export const SelectRank: FC<{}> = () => {
+  return (
+    <Select
+      defaultValue="jack"
+      style={{ width: 120 }}
+      disabled={false}
+      options={[
+        { value: "jack", label: "A级项目" },
+        { value: "lucy", label: "B级项目" },
+        { value: "Yiminghe", label: "C级项目" },
+      ]}
+    />
+  );
+};

src/components/Yidian/Yidian.module.css

@@ -2663,6 +2663,7 @@
   background-color: #fff;
 }
 .frame427319500 {
+  cursor: pointer;
   width: min-content;
   height: min-content;
   align-items: center;
@@ -2962,6 +2963,7 @@
   flex-direction: column;
 }
 .unnamed93 {
+  cursor: pointer;
   color: #4e5969;
   font-size: 14px;
   line-height: 20px;
@@ -3983,6 +3985,7 @@
   flex-direction: column;
 }
 .frame9114 {
+  cursor: pointer;
   width: min-content;
   height: min-content;
   align-items: center;
@@ -6623,11 +6626,15 @@
   flex-direction: column;
 }
 .frame91115 {
+  cursor: pointer;
   width: min-content;
   height: min-content;
   align-items: center;
   gap: 4px;
 }
+.frame91115:hover{
+  opacity: 0.9;
+}
 .text31 {
   color: #86909c;
   font-size: 14px;
@@ -6841,6 +6848,7 @@
   flex-direction: column;
 }
 .frame91116 {
+  cursor: pointer;
   width: min-content;
   height: min-content;
   align-items: center;

src/components/Yidian/_OffRegular/_OffRegular.module.css

@@ -11,6 +11,7 @@
   width: 225px;
   height: 48px;
   align-items: flex-start;
+  cursor: pointer;
 }
 .frame681 {
   position: absolute;

src/components/Yidian/_OffRegular/_OffRegular.tsx

@@ -1,14 +1,14 @@
-import { memo } from 'react';
+import { DOMAttributes, memo } from "react";
-import type { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from "react";
 
-import resets from '../../_resets.module.css';
+import resets from "../../_resets.module.css";
-import { Checkbox_Property1WithoutLabel } from '../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel';
+import { Checkbox_Property1WithoutLabel } from "../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel";
-import { Keyboard_arrow_down } from '../Keyboard_arrow_down/Keyboard_arrow_down';
+import { Keyboard_arrow_down } from "../Keyboard_arrow_down/Keyboard_arrow_down";
-import { Point } from '../Point/Point';
+import { Point } from "../Point/Point";
-import classes from './_OffRegular.module.css';
+import classes from "./_OffRegular.module.css";
-import { Ellipse1Icon } from './Ellipse1Icon.js';
+import { Ellipse1Icon } from "./Ellipse1Icon.js";
 
-interface Props {
+type Props = {
   className?: string;
   hide?: {
     point?: boolean;
@@ -16,14 +16,21 @@ interface Props {
   text?: {
     normal?: ReactNode;
   };
-}
+} & DOMAttributes<Element>;
 /* @figmaId 5401:45189 */
 export const _OffRegular: FC<Props> = memo(function _OffRegular(props = {}) {
   return (
-    <div className={`${resets.storybrainResets} ${classes.root}`}>
+    <div
+      className={`${resets.storybrainResets} ${classes.root}`}
+      onClick={props.onClick}
+    >
       <div className={classes.frame681}>
         <div className={classes.frame680}>
-          {props.text?.normal != null ? props.text?.normal : <div className={classes.normal}>item</div>}
+          {props.text?.normal != null ? (
+            props.text?.normal
+          ) : (
+            <div className={classes.normal}>item</div>
+          )}
         </div>
         {!props.hide?.point && (
           <Point

src/components/Yidian/_OffSelected/_OffSelected.module.css

@@ -4,6 +4,7 @@
   height: 48px;
   align-items: flex-start;
   background-color: #0066ff1a;
+  cursor: pointer;
 }
 .frame681 {
   position: absolute;

src/components/Yidian/_OffSelected/_OffSelected.tsx

@@ -1,26 +1,33 @@
-import { memo } from 'react';
+import { DOMAttributes, memo } from "react";
-import type { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from "react";
 
-import resets from '../../_resets.module.css';
+import resets from "../../_resets.module.css";
-import { Checkbox_Property1WithoutLabel } from '../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel';
+import { Checkbox_Property1WithoutLabel } from "../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel";
-import { Keyboard_arrow_down } from '../Keyboard_arrow_down/Keyboard_arrow_down';
+import { Keyboard_arrow_down } from "../Keyboard_arrow_down/Keyboard_arrow_down";
-import { Point2 } from '../Point2/Point2';
+import { Point2 } from "../Point2/Point2";
-import classes from './_OffSelected.module.css';
+import classes from "./_OffSelected.module.css";
-import { Rectangle295Icon } from './Rectangle295Icon.js';
+import { Rectangle295Icon } from "./Rectangle295Icon.js";
 
-interface Props {
+type Props = {
   className?: string;
   text?: {
     normal?: ReactNode;
   };
-}
+} & DOMAttributes<Element>;
 /* @figmaId 5401:45205 */
 export const _OffSelected: FC<Props> = memo(function _OffSelected(props = {}) {
   return (
-    <div className={`${resets.storybrainResets} ${classes.root}`}>
+    <div
+      className={`${resets.storybrainResets} ${classes.root}`}
+      onClick={props.onClick}
+    >
       <div className={classes.frame681}>
         <div className={classes.frame680}>
-          {props.text?.normal != null ? props.text?.normal : <div className={classes.normal}>item</div>}
+          {props.text?.normal != null ? (
+            props.text?.normal
+          ) : (
+            <div className={classes.normal}>item</div>
+          )}
         </div>
       </div>
       <div className={classes.rectangle295}>

src/components/Yidian/_OnRegular/_OnRegular.tsx

@@ -1,20 +1,20 @@
-import { memo } from 'react';
+import { DOMAttributes, memo } from "react";
-import type { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from "react";
 
-import resets from '../../_resets.module.css';
+import resets from "../../_resets.module.css";
-import { Checkbox_Property1WithoutLabel } from '../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel';
+import { Checkbox_Property1WithoutLabel } from "../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel";
-import { Keyboard_arrow_down } from '../Keyboard_arrow_down/Keyboard_arrow_down';
+import { Keyboard_arrow_down } from "../Keyboard_arrow_down/Keyboard_arrow_down";
-import { NotebookOne } from '../NotebookOne/NotebookOne';
+import { NotebookOne } from "../NotebookOne/NotebookOne";
-import classes from './_OnRegular.module.css';
+import classes from "./_OnRegular.module.css";
-import { UnionIcon2 } from './UnionIcon2.js';
+import { UnionIcon2 } from "./UnionIcon2.js";
-import { UnionIcon3 } from './UnionIcon3.js';
+import { UnionIcon3 } from "./UnionIcon3.js";
-import { UnionIcon4 } from './UnionIcon4.js';
+import { UnionIcon4 } from "./UnionIcon4.js";
-import { UnionIcon5 } from './UnionIcon5.js';
+import { UnionIcon5 } from "./UnionIcon5.js";
-import { UnionIcon6 } from './UnionIcon6.js';
+import { UnionIcon6 } from "./UnionIcon6.js";
-import { UnionIcon } from './UnionIcon.js';
+import { UnionIcon } from "./UnionIcon.js";
-import { VectorIcon } from './VectorIcon.js';
+import { VectorIcon } from "./VectorIcon.js";
 
-interface Props {
+type Props = {
   className?: string;
   swap?: {
     notebookOne?: ReactNode;
@@ -25,14 +25,21 @@ interface Props {
   text?: {
     normal?: ReactNode;
   };
-}
+} & DOMAttributes<Element>;
 /* @figmaId 5401:45181 */
 export const _OnRegular: FC<Props> = memo(function _OnRegular(props = {}) {
   return (
-    <div className={`${resets.storybrainResets} ${classes.root}`}>
+    <div
+      className={`${resets.storybrainResets} ${classes.root}`}
+      onClick={props.onClick}
+    >
       <div className={classes.frame681}>
         <div className={classes.frame680}>
-          {props.text?.normal != null ? props.text?.normal : <div className={classes.normal}>item</div>}
+          {props.text?.normal != null ? (
+            props.text?.normal
+          ) : (
+            <div className={classes.normal}>item</div>
+          )}
         </div>
         {props.swap?.notebookOne || (
           <NotebookOne

src/components/Yidian/_OnSelected/_OnSelected.tsx

@@ -1,20 +1,21 @@
-import { memo } from 'react';
+import { DOMAttributes, memo } from "react";
-import type { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from "react";
 
-import resets from '../../_resets.module.css';
+import resets from "../../_resets.module.css";
-import { Checkbox_Property1WithoutLabel } from '../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel';
+import { Checkbox_Property1WithoutLabel } from "../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel";
-import { Keyboard_arrow_up } from '../Keyboard_arrow_up/Keyboard_arrow_up';
+import { Keyboard_arrow_up } from "../Keyboard_arrow_up/Keyboard_arrow_up";
-import { NotebookOne } from '../NotebookOne/NotebookOne';
+import { NotebookOne } from "../NotebookOne/NotebookOne";
-import classes from './_OnSelected.module.css';
+import classes from "./_OnSelected.module.css";
-import { UnionIcon2 } from './UnionIcon2.js';
+import { UnionIcon2 } from "./UnionIcon2.js";
-import { UnionIcon3 } from './UnionIcon3.js';
+import { UnionIcon3 } from "./UnionIcon3.js";
-import { UnionIcon4 } from './UnionIcon4.js';
+import { UnionIcon4 } from "./UnionIcon4.js";
-import { UnionIcon5 } from './UnionIcon5.js';
+import { UnionIcon5 } from "./UnionIcon5.js";
-import { UnionIcon6 } from './UnionIcon6.js';
+import { UnionIcon6 } from "./UnionIcon6.js";
-import { UnionIcon } from './UnionIcon.js';
+import { UnionIcon } from "./UnionIcon.js";
-import { VectorIcon } from './VectorIcon.js';
+import { VectorIcon } from "./VectorIcon.js";
+import { PageName } from "../Yidian";
 
-interface Props {
+type Props = {
   className?: string;
   swap?: {
     notebookOne?: ReactNode;
@@ -22,14 +23,21 @@ interface Props {
   text?: {
     normal?: ReactNode;
   };
-}
+} & DOMAttributes<Element>;
 /* @figmaId 5401:45221 */
 export const _OnSelected: FC<Props> = memo(function _OnSelected(props = {}) {
   return (
-    <div className={`${resets.storybrainResets} ${classes.root}`}>
+    <div
+      className={`${resets.storybrainResets} ${classes.root}`}
+      onClick={props.onClick}
+    >
       <div className={classes.frame681}>
         <div className={classes.frame680}>
-          {props.text?.normal != null ? props.text?.normal : <div className={classes.normal}>item</div>}
+          {props.text?.normal != null ? (
+            props.text?.normal
+          ) : (
+            <div className={classes.normal}>item</div>
+          )}
         </div>
         {props.swap?.notebookOne || (
           <NotebookOne

src/components/Yidian/unnamed13/unnamed13.tsx

@@ -12,8 +12,8 @@ interface Props {
   };
   text?: {
     _2022613?: ReactNode;
-    Unnamed?: ReactNode;
+    unnamed?: ReactNode;
-    Unnamed2?: ReactNode;
+    unnamed2?: ReactNode;
   };
 }
 /* @figmaId 5633:6850 */

src/components/Yidian/unnamed14/unnamed14.tsx

@@ -24,11 +24,11 @@ interface Props {
     projectorTwo?: boolean;
   };
   text?: {
-    Unnamed?: ReactNode;
+    unnamed?: ReactNode;
     _1?: ReactNode;
-    Unnamed2?: ReactNode;
+    unnamed2?: ReactNode;
-    Unnamed3?: ReactNode;
+    unnamed3?: ReactNode;
-    Unnamed4?: ReactNode;
+    unnamed4?: ReactNode;
   };
 }
 /* @figmaId 5404:5460 */