300 ? "80vw" : "190px",
47 | display: visible ? "" : "none",
48 | }}
49 | >
50 | {text}
51 |
57 |
,
58 | document.body,
59 | )
60 | : null;
61 | };
62 |
63 | const Bubble: React.FC
19 | {children}
20 |
21 | );
22 | };
23 |
24 | export default React.memo(IF);
25 |
--------------------------------------------------------------------------------
/src/components/Tab/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import classNames from "classnames";
3 | import styles from "./styles.less";
4 |
5 | interface TabProps {
6 | className?: string;
7 | items: Array
24 | {items.map((label, idx) => (
25 |
35 | ))}
36 |
37 | );
38 | });
39 |
40 | const areEqual = (prevProps: TabProps, nextProps: TabProps) =>
41 | prevProps.className === nextProps.className &&
42 | prevProps.items === nextProps.items &&
43 | prevProps.onChange === nextProps.onChange;
44 |
45 | export default React.memo(Tab, areEqual);
46 |
--------------------------------------------------------------------------------
/src/components/Tab/styles.less:
--------------------------------------------------------------------------------
1 | .tab {
2 | font-size: 12px;
3 | line-height: 18px;
4 | border-bottom: 1px solid var(--theme-color-50);
5 | }
6 |
7 | .tab .active {
8 | color: var(--theme-text-primary);
9 | border-bottom: 1px solid var(--theme-brand-color);
10 | }
11 |
12 | .tab button {
13 | background: none;
14 | outline: none;
15 | border: none;
16 | padding-bottom: 5px;
17 | color: var(--theme-color-g400);
18 | margin-bottom: -1px;
19 | }
20 |
21 | .tab button:nth-child(n + 2) {
22 | margin-left: 16px;
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/Tooltip/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom";
3 | import classNames from "classnames";
4 | import styles from "./styles.less";
5 |
6 | interface TipProps {
7 | left: number;
8 | top: number;
9 | tipText: string;
10 | visible: boolean;
11 | shortcutKey?: string[];
12 | }
13 |
14 | interface TooltipProps {
15 | className?: string;
16 | icon?: React.ReactNode;
17 | tipText: string;
18 | shortcutKey?: string[];
19 | onClick?: (e: React.MouseEvent) => void;
20 | }
21 |
22 | const Tip: React.FC
50 | {tipText}
51 | {shortcutKey.map((key, idx) => (
52 |
53 | {key}
54 | {idx === shortcutKey.length - 1 ? "" : "+"}
55 |
56 | ))}
57 |
63 |
,
64 | document.body,
65 | );
66 | };
67 |
68 | const Tooltip = React.forwardRef
93 | {icon}
94 |
95 |
13 | {list.length === 0 ? (
14 |
19 | );
20 | };
21 |
22 | export default ArticleList;
23 |
--------------------------------------------------------------------------------
/src/plugins/block-sharing/components/BluePrint.tsx:
--------------------------------------------------------------------------------
1 | import styles from "../styles.less";
2 | import React, { useRef } from "react";
3 | import { Spinner } from "@gandi-ide/gandi-ui";
4 | import classNames from "classnames";
5 |
6 | interface BluePrintProps {
7 | content: {
8 | url: string;
9 | block: string;
10 | detail?: { creationRelease: { coverGifLink: number; coverLink: number }; description: string; type: Array{msg("plugins.blockSharing.noArticle")}
15 | ) : ( 16 | list.map((item, index) => ) 17 | )} 18 |
37 | {loading && (
38 | 
53 |
54 | );
55 | };
56 |
57 | export default BluePrint;
58 |
--------------------------------------------------------------------------------
/src/plugins/block-sharing/components/BluePrintList.tsx:
--------------------------------------------------------------------------------
1 | import styles from "../styles.less";
2 | import React from "react";
3 | import BluePrint from "./BluePrint";
4 |
5 | interface BluePrintListProps {
6 | list: Array<{ url: string; block: string }>;
7 | msg: (key: string) => string;
8 | }
9 |
10 | const BluePrintList: React.FC
39 |
41 | )}
42 |
13 | {list.length === 0 ? (
14 |
19 | );
20 | };
21 |
22 | export default BluePrintList;
23 |
--------------------------------------------------------------------------------
/src/plugins/block-sharing/components/Demo.tsx:
--------------------------------------------------------------------------------
1 | import styles from "../styles.less";
2 | import React, { useRef } from "react";
3 | import { Spinner } from "@gandi-ide/gandi-ui";
4 | import classNames from "classnames";
5 |
6 | interface BluePrintProps {
7 | content: {
8 | url: string;
9 | block: string;
10 | detail?: { creationRelease: { coverGifLink: number; coverLink: number }; description: string; type: Array{msg("plugins.blockSharing.noBluePrint")}
15 | ) : ( 16 | list.map((item, index) =>
27 | {loading && (
28 | 
46 |
47 | );
48 | };
49 |
50 | export default BluePrint;
51 |
--------------------------------------------------------------------------------
/src/plugins/block-sharing/components/DemoList.tsx:
--------------------------------------------------------------------------------
1 | import styles from "../styles.less";
2 | import React from "react";
3 | import Demo from "./Demo";
4 |
5 | interface BluePrintListProps {
6 | list: Array<{ url: string; block: string }>;
7 | msg: (key: string) => string;
8 | }
9 |
10 | const BluePrintList: React.FC
29 |
31 | )}
32 |
13 | {list.length === 0 ? (
14 |
19 | );
20 | };
21 |
22 | export default BluePrintList;
23 |
--------------------------------------------------------------------------------
/src/plugins/block-sharing/components/Home.tsx:
--------------------------------------------------------------------------------
1 | import styles from "../styles.less";
2 | import React, { useRef } from "react";
3 | import { Spinner } from "@gandi-ide/gandi-ui";
4 | import hack from "../hack";
5 |
6 | interface ArticleProps {
7 | name: string;
8 | Jump: string;
9 | }
10 |
11 | const Article: React.FC{msg("plugins.blockSharing.noDemo")}
15 | ) : ( 16 | list.map((item, index) =>
37 | {loading && (
38 |
53 | );
54 | };
55 |
56 | export default Article;
57 |
--------------------------------------------------------------------------------
/src/plugins/block-sharing/icons/home.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/plugins/block-sharing/manifest.ts:
--------------------------------------------------------------------------------
1 | export default {
2 | name: "block-sharing",
3 | type: "component",
4 | description: "为编程提供更多可能",
5 | credits: [
6 | {
7 | name: "白猫@CCW",
8 | link: "https://www.ccw.site/student/6173f57f48cf8f4796fc860e",
9 | },
10 | ],
11 | };
12 |
--------------------------------------------------------------------------------
/src/plugins/block-sharing/material-drag.ts:
--------------------------------------------------------------------------------
1 | // 整理拖拽的数据源，以及传递到GUI。
2 | // eslint-disable-next-line require-jsdoc
3 | export default function materialDrag(data: any): void {
4 | const dragData = {
5 | ...data,
6 | ...(data.payload && {
7 | payload: {
8 | ...data.payload,
9 | bodyUrl: data.payload.uri,
10 | body: data.payload.uri.substring(data.payload.uri.lastIndexOf("/") + 1),
11 | },
12 | }),
13 | };
14 | return dragData;
15 | }
16 |
--------------------------------------------------------------------------------
/src/plugins/block-sharing/styles.less:
--------------------------------------------------------------------------------
1 | .container {
2 | position: relative;
3 | border-radius: 0 0 8px 8px;
4 | font-size: 12px;
5 | line-height: 18px;
6 | padding: 9px;
7 | color: var(--theme-color-g300);
8 | height: calc(100% - 25px);
9 | }
10 |
11 | .tab-wrapper {
12 | height: calc(100% - 15px);
13 | overflow: hidden;
14 | }
15 |
16 | .tab {
17 | margin: 0px;
18 | display: flex;
19 | flex-grow: 1; // 使 Tab 占据剩余空间
20 | }
21 |
22 | .icon {
23 | display: flex;
24 | align-items: center;
25 | justify-content: center;
26 | width: 32px !important;
27 | height: 32px !important;
28 | border-radius: 4px;
29 | cursor: pointer;
30 | }
31 |
32 | .inner {
33 | height: calc(100% - 10px);
34 | color: var(--theme-text-primary);
35 | overflow: hidden;
36 | }
37 |
38 | .loading {
39 | position: absolute;
40 | width: 20px;
41 | height: 20px;
42 | z-index: 1;
43 | }
44 |
45 | .window {
46 | width: 100%;
47 | height: calc(100% - 14px);
48 | overflow: hidden;
49 | overflow-y: auto;
50 | text-align: center;
51 | color: #000;
52 | background-color: #ffffff;
53 | margin-top: 5px;
54 | }
55 |
56 | .windows {
57 | position: absolute;
58 | display: grid;
59 | place-items: center;
60 | justify-content: center;
61 | align-items: center;
62 | width: calc(100% - 18px);
63 | height: calc(100% - 42px);
64 | background: var(--theme-color-300);
65 | }
66 |
67 | .imgCard {
68 | margin-top: 5px;
69 | margin-bottom: 5px;
70 | position: relative;
71 | left: 10px;
72 | width: calc(100% - 20px);
73 | max-height: 200px;
74 | border-radius: 5px;
75 | transition: all 0.2s linear;
76 | overflow: hidden;
77 | }
78 |
79 | .imgCard:hover {
80 | background: #ffffff;
81 | transform: scale(1.01);
82 | box-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.076), 7px 0px 15px 0px rgba(0, 0, 0, 0.076);
83 | }
84 |
85 | .imgCardLoad {
86 | width: 100%;
87 | height: 100%;
88 | border-radius: 5px;
89 | }
90 |
91 | .block {
92 | cursor: move;
93 | }
94 |
95 | .url {
96 | cursor: pointer;
97 | }
98 |
99 | .BackButtonIcon {
100 | display: flex;
101 | }
102 |
103 | .iconBox {
104 | margin-right: 6px;
105 | border-radius: 6px;
106 | transition: all 0.1s linear;
107 | padding: 3px;
108 | width: 20px;
109 | height: 20px;
110 | cursor: pointer;
111 | margin-bottom: 4px;
112 |
113 | &:hover {
114 | background: var(--theme-color-200);
115 | }
116 | }
117 |
118 | .p {
119 | margin-top: 16px;
120 | font-size: 11px;
121 | }
--------------------------------------------------------------------------------
/src/plugins/clean-pro/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import styles from "./styles.less";
3 | import ReactMarkdown from "react-markdown";
4 | import CleanProIcon from "../../assets/icon--clean-pro.svg";
5 | const CleanPro: React.FC
39 |
41 | )}
42 |
52 |
37 |
44 |
46 |
47 |
49 |
50 | );
51 | };
52 |
53 | DevToolsPluginContent.displayName = "DevToolsPluginContent";
54 |
55 | export default DevToolsPluginContent;
56 |
--------------------------------------------------------------------------------
/src/plugins/dev-tools/components/Content/styles.less:
--------------------------------------------------------------------------------
1 | .container {
2 | position: relative;
3 | border-radius: 0 0 8px 8px;
4 | font-size: 12px;
5 | line-height: 18px;
6 | padding: 9px 0;
7 | color: var(--theme-color-g300);
8 | height: calc(100% - 25px);
9 | }
10 |
11 | .container ul {
12 | list-style: none;
13 | position: relative;
14 | /* 这里必须设置背景色，用来遮盖住 未添加变量 的提示 */
15 | background: var(--theme-color-300);
16 | }
17 |
18 | .container ul+li,
19 | .container li+li {
20 | margin-top: 6px;
21 | }
22 |
23 | .container svg+span {
24 | margin-left: 4px;
25 | }
26 |
27 | .tab-wrapper {
28 | height: calc(100% - 15px);
29 | overflow: auto;
30 | }
31 |
32 | .tab {
33 | margin: 0 9px;
34 | }
--------------------------------------------------------------------------------
/src/plugins/dev-tools/components/Entrance/styles.less:
--------------------------------------------------------------------------------
1 | .dev-tools {
2 | position: relative;
3 | }
4 |
5 | .search-icon {
6 | display: flex;
7 | align-items: center;
8 | justify-content: center;
9 | width: 32px;
10 | height: 32px;
11 | border-radius: 4px;
12 | cursor: pointer;
13 | }
14 |
--------------------------------------------------------------------------------
/src/plugins/dev-tools/components/ListView/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import Bubble from "components/Bubble";
3 | import { useVirtualizer } from "@tanstack/react-virtual";
4 |
5 | import type { ListVariable } from "../../lib/dev-tools-observer";
6 | import styles from "./styles.less";
7 |
8 | export interface ListViewProps {
9 | value: ListVariable;
10 | }
11 |
12 | const ListView: React.FC
24 | {/* The large inner element to hold all of the items */}
25 |
49 | );
50 | };
51 |
52 | ListView.displayName = "ListView";
53 |
54 | export default ListView;
55 |
--------------------------------------------------------------------------------
/src/plugins/dev-tools/components/ListView/styles.less:
--------------------------------------------------------------------------------
1 | .virtual-list-container {
2 | width: 100%;
3 | max-height: 240px;
4 | overflow: auto;
5 | }
6 |
7 | .virtual-list-container-inner {
8 | width: 100%;
9 | position: relative;
10 | }
11 |
12 | .virtual-list-item {
13 | position: absolute;
14 | left: 0;
15 | top: 0;
16 | width: 100%;
17 | padding-top: 6px;
18 | padding-left: 54px;
19 | overflow: hidden;
20 | text-overflow: ellipsis;
21 | white-space: nowrap;
22 | }
23 |
24 | .index {
25 | display: inline-block;
26 | padding: 0 2px;
27 | color: var(--theme-color-400);
28 | background: var(--theme-color-g400);
29 | border-radius: 14px;
30 | margin-right: 2px;
31 | min-width: 14px;
32 | line-height: 14px;
33 | text-align: center;
34 | }
35 |
36 | .text {
37 | color: var(--theme-color-g300);
38 | }
39 |
--------------------------------------------------------------------------------
/src/plugins/dev-tools/components/TackedVariableView/styles.less:
--------------------------------------------------------------------------------
1 | .row > li {
2 | padding: 3px 9px;
3 | }
4 |
5 | :global(.react-draggable-dragging).row {
6 | position: relative;
7 | z-index: 1;
8 | }
9 |
10 | .clone-list {
11 | padding-top: 6px;
12 | }
13 |
14 | .draggable-icon {
15 | position: relative;
16 | }
17 |
--------------------------------------------------------------------------------
/src/plugins/dev-tools/components/TackedVariables/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { defineMessages } from "react-intl";
3 | import { useDevToolsContext } from "src/plugins/dev-tools/lib/context";
4 | import { devToolsObserver } from "src/plugins/dev-tools/lib/dev-tools-observer";
5 | import { enableLegendStateReact, observer } from "@legendapp/state/react";
6 | import { DraggableData } from "react-draggable";
7 | import TackedVariableView from "../TackedVariableView";
8 |
9 | import styles from "./styles.less";
10 |
11 | enableLegendStateReact();
12 |
13 | const messages = defineMessages({
14 | tackedVariablesEmpty: {
15 | id: "plugins.devTools.tackedVariablesEmpty",
16 | defaultMessage: "No monitoring variable added.",
17 | description: "No monitoring variable added. \n Click the 'pin' button in front of the variable to monitor it.",
18 | },
19 | });
20 |
21 | const TackedVariables: React.FC = observer(() => {
22 | const { intl } = useDevToolsContext();
23 | const [variableIdList, setVariableIdList] = React.useState([]);
24 | const variableIdListRef = React.useRef(variableIdList);
25 |
26 | const handleDrag = React.useCallback(
27 | (index: number, ui: DraggableData) => {
28 | const draggedItem = variableIdListRef.current[index];
29 | const newList = [...variableIdListRef.current];
30 | newList.splice(Number(index), 1);
31 | newList.splice(ui.y / 24 + index, 0, draggedItem);
32 | devToolsObserver.tackedVariables.set(
33 | newList.reduce(
34 | (acc, v, index) => ({
35 | ...acc,
36 | [v.key]: {
37 | ...v,
38 | index,
39 | },
40 | }),
41 | {},
42 | ),
43 | );
44 | },
45 | [variableIdList],
46 | );
47 |
48 | const handleTackedVariables = React.useCallback(() => {
49 | const tackedVariables = devToolsObserver.tackedVariables.peek();
50 | const newList = Object.keys(tackedVariables).map((key) => ({
51 | key,
52 | ...tackedVariables[key],
53 | }));
54 | newList.sort((a, b) => a.index - b.index);
55 | setVariableIdList(newList);
56 | }, []);
57 |
58 | React.useEffect(() => {
59 | handleTackedVariables();
60 | const dispose = devToolsObserver.tackedVariables.onChange(() => {
61 | handleTackedVariables();
62 | });
63 | return () => {
64 | dispose();
65 | };
66 | }, []);
67 |
68 | React.useEffect(() => {
69 | variableIdListRef.current = [...variableIdList];
70 | }, [variableIdList]);
71 |
72 | return (
73 |
31 | {/* Only the visible items in the virtualizer, manually positioned to be in view */}
32 | {rowVirtualizer.getVirtualItems().map((virtualItem) => (
33 |
48 |
41 | {virtualItem.index + 1}
42 |
43 | {value[virtualItem.index]}
44 |
45 |
46 | ))}
47 | -
74 | {variableIdList.map((item, index) => (
75 |
- {intl.formatMessage(messages.tackedVariablesEmpty)} 79 | )} 80 |