add interactive

master
Zhang Chaojie 2023-04-20 10:48:07 +08:00
parent c7265dac70
commit 5d7acd26d9
17 changed files with 4124 additions and 2026 deletions

1652
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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"
},

View File

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

View File

@ -1,9 +1,11 @@
import { memo } from 'react';
import type { FC } from 'react';
import { memo } from "react";
import type { FC } from "react";
import resets from '../../_resets.module.css';
import { Frame2 } from '../Frame2/Frame2';
import classes from './Frame427319538.module.css';
import resets from "../../_resets.module.css";
import { Frame2 } from "../Frame2/Frame2";
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}>
<div className={classes.unnamed2}></div>
<div className={classes.line62}></div>
<div className={classes.frame427319536}>
<div className={classes._2}>2</div>
<div className={classes.unnamed3}></div>
<Popover content={<RiskContent></RiskContent>}>
<div className={classes.frame427319537}>
<div className={classes.unnamed2}></div>
<div className={classes.line62}></div>
<div className={classes.frame427319536}>
<div className={classes._2}>2</div>
<div className={classes.unnamed3}></div>
</div>
</div>
</div>
</Popover>
</div>
<div className={classes.frame427319534}>
<div className={classes._22}>

View File

@ -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>
);
};

View File

@ -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: "标杆项目" },
]}
/>
);
};

View File

@ -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级项目" },
]}
/>
);
};

View File

@ -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;

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -1,14 +1,14 @@
import { memo } from 'react';
import type { FC, ReactNode } from 'react';
import { DOMAttributes, memo } from "react";
import type { FC, ReactNode } from "react";
import resets from '../../_resets.module.css';
import { Checkbox_Property1WithoutLabel } from '../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel';
import { Keyboard_arrow_down } from '../Keyboard_arrow_down/Keyboard_arrow_down';
import { Point } from '../Point/Point';
import classes from './_OffRegular.module.css';
import { Ellipse1Icon } from './Ellipse1Icon.js';
import resets from "../../_resets.module.css";
import { Checkbox_Property1WithoutLabel } from "../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel";
import { Keyboard_arrow_down } from "../Keyboard_arrow_down/Keyboard_arrow_down";
import { Point } from "../Point/Point";
import classes from "./_OffRegular.module.css";
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

View File

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

View File

@ -1,26 +1,33 @@
import { memo } from 'react';
import type { FC, ReactNode } from 'react';
import { DOMAttributes, memo } from "react";
import type { FC, ReactNode } from "react";
import resets from '../../_resets.module.css';
import { Checkbox_Property1WithoutLabel } from '../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel';
import { Keyboard_arrow_down } from '../Keyboard_arrow_down/Keyboard_arrow_down';
import { Point2 } from '../Point2/Point2';
import classes from './_OffSelected.module.css';
import { Rectangle295Icon } from './Rectangle295Icon.js';
import resets from "../../_resets.module.css";
import { Checkbox_Property1WithoutLabel } from "../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel";
import { Keyboard_arrow_down } from "../Keyboard_arrow_down/Keyboard_arrow_down";
import { Point2 } from "../Point2/Point2";
import classes from "./_OffSelected.module.css";
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}>

View File

@ -1,20 +1,20 @@
import { memo } from 'react';
import type { FC, ReactNode } from 'react';
import { DOMAttributes, memo } from "react";
import type { FC, ReactNode } from "react";
import resets from '../../_resets.module.css';
import { Checkbox_Property1WithoutLabel } from '../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel';
import { Keyboard_arrow_down } from '../Keyboard_arrow_down/Keyboard_arrow_down';
import { NotebookOne } from '../NotebookOne/NotebookOne';
import classes from './_OnRegular.module.css';
import { UnionIcon2 } from './UnionIcon2.js';
import { UnionIcon3 } from './UnionIcon3.js';
import { UnionIcon4 } from './UnionIcon4.js';
import { UnionIcon5 } from './UnionIcon5.js';
import { UnionIcon6 } from './UnionIcon6.js';
import { UnionIcon } from './UnionIcon.js';
import { VectorIcon } from './VectorIcon.js';
import resets from "../../_resets.module.css";
import { Checkbox_Property1WithoutLabel } from "../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel";
import { Keyboard_arrow_down } from "../Keyboard_arrow_down/Keyboard_arrow_down";
import { NotebookOne } from "../NotebookOne/NotebookOne";
import classes from "./_OnRegular.module.css";
import { UnionIcon2 } from "./UnionIcon2.js";
import { UnionIcon3 } from "./UnionIcon3.js";
import { UnionIcon4 } from "./UnionIcon4.js";
import { UnionIcon5 } from "./UnionIcon5.js";
import { UnionIcon6 } from "./UnionIcon6.js";
import { UnionIcon } from "./UnionIcon.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

View File

@ -1,20 +1,21 @@
import { memo } from 'react';
import type { FC, ReactNode } from 'react';
import { DOMAttributes, memo } from "react";
import type { FC, ReactNode } from "react";
import resets from '../../_resets.module.css';
import { Checkbox_Property1WithoutLabel } from '../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel';
import { Keyboard_arrow_up } from '../Keyboard_arrow_up/Keyboard_arrow_up';
import { NotebookOne } from '../NotebookOne/NotebookOne';
import classes from './_OnSelected.module.css';
import { UnionIcon2 } from './UnionIcon2.js';
import { UnionIcon3 } from './UnionIcon3.js';
import { UnionIcon4 } from './UnionIcon4.js';
import { UnionIcon5 } from './UnionIcon5.js';
import { UnionIcon6 } from './UnionIcon6.js';
import { UnionIcon } from './UnionIcon.js';
import { VectorIcon } from './VectorIcon.js';
import resets from "../../_resets.module.css";
import { Checkbox_Property1WithoutLabel } from "../Checkbox_Property1WithoutLabel/Checkbox_Property1WithoutLabel";
import { Keyboard_arrow_up } from "../Keyboard_arrow_up/Keyboard_arrow_up";
import { NotebookOne } from "../NotebookOne/NotebookOne";
import classes from "./_OnSelected.module.css";
import { UnionIcon2 } from "./UnionIcon2.js";
import { UnionIcon3 } from "./UnionIcon3.js";
import { UnionIcon4 } from "./UnionIcon4.js";
import { UnionIcon5 } from "./UnionIcon5.js";
import { UnionIcon6 } from "./UnionIcon6.js";
import { UnionIcon } from "./UnionIcon.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

View File

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

View File

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