Skip to content

Commit 1bf7eca

Browse files
LeezQLeezQ
authored
feat(web): opt function editor ui (#1233)
1 parent ede4029 commit 1bf7eca

File tree

30 files changed

+172
-82
lines changed

30 files changed

+172
-82
lines changed

‎web/src/App.css

+3-2
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,13 @@ body {
3333
background-repeat: no-repeat !important;
3434
background-size: cover !important;
3535
background-position: center !important;
36+
font-variant-numeric: lining-nums;
3637
font-size: 12px;
3738
}
3839

3940
[data-theme="light"] body {
40-
background-color: #f1f3f5 !important;
41-
background-image: url("/bg.png") !important;
41+
background-color: #eef0f2 !important;
42+
/* background-image: url("/bg.png") !important; */
4243
}
4344

4445
[data-theme="dark"] ::-webkit-scrollbar-thumb {

‎web/src/components/CommonIcon/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { createIcon } from "@chakra-ui/react";
33

44
export const MoreIcon = createIcon({
55
displayName: "MoreIcon",
6-
viewBox: "0 0 4 16",
6+
viewBox: "0 0 4 20",
77
d: "M2 16C1.45 16 0.979334 15.8043 0.588 15.413C0.196 15.021 0 14.55 0 14C0 13.45 0.196 12.979 0.588 12.587C0.979334 12.1957 1.45 12 2 12C2.55 12 3.021 12.1957 3.413 12.587C3.80433 12.979 4 13.45 4 14C4 14.55 3.80433 15.021 3.413 15.413C3.021 15.8043 2.55 16 2 16ZM2 10C1.45 10 0.979334 9.804 0.588 9.412C0.196 9.02067 0 8.55 0 8C0 7.45 0.196 6.979 0.588 6.587C0.979334 6.19567 1.45 6 2 6C2.55 6 3.021 6.19567 3.413 6.587C3.80433 6.979 4 7.45 4 8C4 8.55 3.80433 9.02067 3.413 9.412C3.021 9.804 2.55 10 2 10ZM2 4C1.45 4 0.979334 3.804 0.588 3.412C0.196 3.02067 0 2.55 0 2C0 1.45 0.196 0.979333 0.588 0.588C0.979334 0.196 1.45 0 2 0C2.55 0 3.021 0.196 3.413 0.588C3.80433 0.979333 4 1.45 4 2C4 2.55 3.80433 3.02067 3.413 3.412C3.021 3.804 2.55 4 2 4Z",
88
});
99

‎web/src/components/Content/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
22

33
export default function Content(props: { children: React.ReactNode }) {
4-
return <div className="flex flex-1 flex-col space-y-2 overflow-hidden">{props.children}</div>;
4+
return <div className="flex flex-1 flex-col space-y-1 overflow-hidden">{props.children}</div>;
55
}

‎web/src/components/Editor/FunctionEditor.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ monaco?.editor.defineTheme("lafEditorTheme", {
3737
inherit: true,
3838
rules: [
3939
{
40-
foreground: "#0066ff",
40+
foreground: "#008189",
4141
token: "keyword",
4242
},
4343
],
@@ -159,7 +159,7 @@ function FunctionEditor(props: {
159159
formatOnPaste: true,
160160
overviewRulerLanes: 0,
161161
lineNumbersMinChars: 4,
162-
fontSize: 14,
162+
fontSize: 13,
163163
theme: colorMode === COLOR_MODE.dark ? "lafEditorThemeDark" : "lafEditorTheme",
164164
scrollBeyondLastLine: false,
165165
});

‎web/src/components/FileTypeIcon/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export default function FileTypeIcon(props: { type: string; className?: string }
7575

7676
case FileType.ts:
7777
return (
78-
<Icon viewBox="0 0 14 15" fontSize={14} className="align-middle">
78+
<Icon viewBox="0 0 14 15" fontSize={10} className="align-middle">
7979
<rect y="0.5" width="14" height="14" rx="2" fill="#EBF7FD" />
8080
<path
8181
d="M1.3196 5.59553V4.45455H6.69531V5.59553H4.69141V11H3.32351V5.59553H1.3196ZM11.1314 6.337C11.1058 6.07919 10.9961 5.87891 10.8022 5.73615C10.6083 5.59339 10.3452 5.52202 10.0128 5.52202C9.78693 5.52202 9.59624 5.55398 9.4407 5.6179C9.28516 5.67969 9.16584 5.76598 9.08274 5.87678C9.00178 5.98757 8.96129 6.11328 8.96129 6.25391C8.95703 6.37109 8.98153 6.47337 9.0348 6.56072C9.0902 6.64808 9.16584 6.72372 9.26172 6.78764C9.3576 6.84943 9.46839 6.90376 9.59411 6.95064C9.71982 6.99538 9.85405 7.03374 9.9968 7.0657L10.5849 7.20632C10.8704 7.27024 11.1325 7.35547 11.3711 7.462C11.6097 7.56854 11.8164 7.69957 11.9911 7.85511C12.1658 8.01065 12.3011 8.19389 12.397 8.40483C12.495 8.61577 12.5451 8.8576 12.5472 9.13033C12.5451 9.53089 12.4428 9.8782 12.2404 10.1722C12.0401 10.4641 11.7504 10.6911 11.3711 10.853C10.994 11.0128 10.5391 11.0927 10.0064 11.0927C9.47798 11.0927 9.01776 11.0117 8.62571 10.8498C8.2358 10.6879 7.93111 10.4482 7.71165 10.1307C7.49432 9.81108 7.38033 9.41584 7.36967 8.94496H8.70881C8.72372 9.16442 8.78658 9.34766 8.89737 9.49467C9.0103 9.63956 9.16051 9.74929 9.34801 9.82386C9.53764 9.89631 9.75178 9.93253 9.99041 9.93253C10.2248 9.93253 10.4283 9.89844 10.6009 9.83026C10.7756 9.76207 10.9109 9.66726 11.0067 9.54581C11.1026 9.42436 11.1506 9.2848 11.1506 9.12713C11.1506 8.98011 11.1069 8.85653 11.0195 8.75639C10.9343 8.65625 10.8086 8.57102 10.6424 8.50071C10.4783 8.4304 10.277 8.36648 10.0384 8.30895L9.32564 8.12997C8.77379 7.99574 8.33807 7.78587 8.01847 7.50036C7.69886 7.21484 7.54013 6.83026 7.54226 6.34659C7.54013 5.95028 7.6456 5.60405 7.85866 5.30788C8.07386 5.01172 8.36896 4.78054 8.74396 4.61435C9.11896 4.44815 9.5451 4.36506 10.0224 4.36506C10.5082 4.36506 10.9322 4.44815 11.2944 4.61435C11.6587 4.78054 11.9421 5.01172 12.1445 5.30788C12.3469 5.60405 12.4513 5.94709 12.4577 6.337H11.1314Z"

‎web/src/components/Grid/index.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,15 @@ const Row = forwardRef(
1111
className?: string;
1212
style?: React.CSSProperties;
1313
children: React.ReactNode;
14+
id?: string;
1415
},
1516
ref: any,
1617
) => {
17-
const { className, style } = props;
18+
const { className, style, id } = props;
19+
1820
return (
1921
<div
22+
id={id}
2023
ref={ref}
2124
className={clsx(
2225
"flex w-full overflow-hidden",

‎web/src/components/Panel/Header.tsx

+55-3
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,73 @@
1-
import React from "react";
1+
import React, { useEffect } from "react";
2+
import { ChevronDownIcon, ChevronUpIcon } from "@chakra-ui/icons";
23
import { HStack } from "@chakra-ui/react";
34
import clsx from "clsx";
45

6+
import { PanelMinHeight } from "@/constants";
7+
58
import styles from "./index.module.scss";
69

10+
import useCustomSettingStore, { page } from "@/pages/customSetting";
11+
712
const PanelHeader: React.FC<{
813
children?: React.ReactNode;
914
className?: string;
1015
style?: React.CSSProperties;
1116
actions?: React.ReactNode[];
1217
title?: React.ReactNode | string;
18+
pageId?: page;
19+
panelId?: string;
1320
}> = (props) => {
14-
const { title, actions, children, style = {}, className } = props;
21+
const { title, actions, children, style = {}, className, pageId, panelId } = props;
22+
const store = useCustomSettingStore();
23+
24+
const [isUp, setIsUp] = React.useState(false);
25+
26+
useEffect(() => {
27+
if (!pageId || !panelId) return;
28+
const { id = "", style } = store.getLayoutInfo(pageId, panelId);
29+
if (!id) return;
30+
31+
if (style.height < PanelMinHeight + 10) {
32+
// 10px is the margin
33+
setIsUp(false);
34+
} else {
35+
setIsUp(true);
36+
}
37+
}, [pageId, panelId, store]);
38+
39+
const _defaultActions = [
40+
<div
41+
key="zoomIn"
42+
className="cursor-pointer"
43+
onClick={() => {
44+
if (!pageId || !panelId) return;
45+
const { id = "", style } = store.getLayoutInfo(pageId, panelId);
46+
47+
const element = document.getElementById(id);
48+
if (element !== null) {
49+
// get element height
50+
const currentHeight = element.style.height;
51+
if (currentHeight === `${PanelMinHeight}px`) {
52+
const height = element.getAttribute("data-height");
53+
element.style.height = height || "100px";
54+
setIsUp(true);
55+
} else {
56+
setIsUp(false);
57+
element.setAttribute("data-height", style.height + "px");
58+
element.style.height = `${PanelMinHeight}px`;
59+
}
60+
}
61+
}}
62+
>
63+
{isUp ? <ChevronDownIcon fontSize={16} /> : <ChevronUpIcon fontSize={16} />}
64+
</div>,
65+
];
66+
1567
return title ? (
1668
<div className={styles.sectionHeader + " flex justify-between"}>
1769
<h4>{title}</h4>
18-
<HStack spacing="2">{actions}</HStack>
70+
<HStack spacing="2">{actions ? actions : _defaultActions}</HStack>
1971
</div>
2072
) : (
2173
<div style={style} className={clsx(styles.sectionHeader + " flex justify-between", className)}>

‎web/src/components/Panel/index.module.scss

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
.sectionHeader {
2-
min-height: 50px;
2+
min-height: 32px;
3+
max-height: 32px;
34
display: flex;
45
align-items: center;
56

67
h4 {
7-
padding-left: 14px;
8+
padding-left: 10px;
89
font-weight: 500;
9-
font-size: 14px;
10+
font-size: 12px;
1011
position: relative;
1112

1213
&::before {
1314
content: " ";
14-
height: 15px;
15+
height: 12px;
1516
position: absolute;
1617
left: 0;
1718
top: 3px;

‎web/src/components/Panel/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const Panel = (props: {
1717
style={style}
1818
bg={bg}
1919
onClick={onClick}
20-
className={clsx("flex w-full flex-col rounded px-4", className)}
20+
className={clsx("flex w-full flex-col rounded px-3", className)}
2121
>
2222
{props.children}
2323
</Box>

‎web/src/components/Resize/index.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,8 @@ export default function Resize(props: {
1515
}) {
1616
const { type, pageId, panelId, reverse, containerRef } = props;
1717
const store = useCustomSettingStore();
18-
const { width, height, minWidth, maxWidth, minHeight, maxHeight, display } = store.getLayoutInfo(
19-
pageId,
20-
panelId,
21-
);
18+
const { width, height, minWidth, maxWidth, minHeight, maxHeight, display } =
19+
store.getLayoutInfoStyle(pageId, panelId);
2220
const { isDragging, position, separatorProps } = useResizable({
2321
axis: type,
2422
initial: type === "x" ? width : height,
@@ -32,6 +30,7 @@ export default function Resize(props: {
3230
width: position,
3331
height: position,
3432
};
33+
3534
store.setLayoutInfo(pageId, panelId, newPosition);
3635
}, [position, pageId, panelId, store]);
3736
const borderColor = useColorModeValue("slate.300", "lafDark.300");
@@ -41,14 +40,15 @@ export default function Resize(props: {
4140
{display === "none" ? null : (
4241
<div
4342
className={
44-
type === "x" ? "group h-full w-2 cursor-col-resize" : "h-2 w-full cursor-row-resize"
43+
type === "x" ? "group h-full w-1 cursor-col-resize" : "h-1 w-full cursor-row-resize"
4544
}
4645
{...separatorProps}
4746
>
4847
<Center className="relative h-full w-full">
4948
{type === "x" && width <= 20 ? (
5049
<div
5150
className={clsx(
51+
"z-50",
5252
reverse ? "rounded-l-lg" : "rounded-r-lg",
5353
"h-[30px] w-2 bg-grayIron-300 leading-loose text-lafWhite-600 transition-colors group-hover:bg-grayIron-400",
5454
)}

‎web/src/components/SectionList/index.module.scss

+2-3
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@
44
li {
55
cursor: pointer;
66
display: flex;
7-
height: 40px;
8-
border-radius: 8px;
7+
height: 28px;
98
align-items: center;
109
justify-content: space-between;
11-
padding: 2px 12px;
10+
padding: 0px 12px;
1211
margin-bottom: 2px;
1312

1413
span {

‎web/src/components/SectionList/index.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@ function SectionList(props: {
99
className?: string;
1010
}) {
1111
return (
12-
<ul
13-
className={styles.sectionList + " mb-4 text-grayIron-600 " + props.className}
14-
style={props.style || {}}
15-
>
12+
<ul className={styles.sectionList + " mb-4 " + props.className} style={props.style || {}}>
1613
{props.children}
1714
</ul>
1815
);

‎web/src/constants/index.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable no-unused-vars */
2-
export const SideBarWidth = 64;
2+
export const SideBarWidth = 52;
33
export const SmallNavHeight = 42;
4+
export const PanelMinHeight = 32;
45

56
export const VITE_SERVER_BASE_URL = import.meta.env.VITE_SERVER_BASE_URL || "";
67

‎web/src/hooks/useResizable.ts

+12-8
Original file line numberDiff line numberDiff line change
@@ -61,16 +61,20 @@ const useResizable = ({
6161
return reverse ? left + width - x : x - left;
6262
}
6363
return reverse ? document.body.offsetWidth - x : x;
64+
} else {
65+
const y = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
66+
if (containerRef?.current) {
67+
const containerNode = containerRef.current;
68+
const { top, height } = containerNode.getBoundingClientRect();
69+
return reverse ? top + height - y : y - top;
70+
}
71+
return reverse ? document.body.offsetHeight - y : y;
6472
}
65-
const y = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
66-
if (containerRef?.current) {
67-
const containerNode = containerRef.current;
68-
const { top, height } = containerNode.getBoundingClientRect();
69-
return reverse ? top + height - y : y - top;
70-
}
71-
return reverse ? document.body.offsetHeight - y : y;
7273
})();
73-
if (min < currentPosition && currentPosition < max) {
74+
75+
if (currentPosition <= 4) return setPosition(4);
76+
77+
if (min <= currentPosition && currentPosition <= max) {
7478
setPosition(currentPosition);
7579
}
7680
},

‎web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ export default function DataPanel() {
144144

145145
return (
146146
<>
147-
<Panel.Header className="h-[40px] w-full flex-shrink-0">
147+
<Panel.Header className="my-1 w-full flex-shrink-0">
148148
<div className="flex items-center">
149149
<AddDataModal
150150
schema={currentData.data ? currentData.data : {}}

‎web/src/pages/app/functions/mods/ConsolePanel/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function ConsolePanel() {
3131

3232
return (
3333
<Panel className="flex-1">
34-
<Panel.Header title="Console"></Panel.Header>
34+
<Panel.Header title="Console" pageId="functionPage" panelId="ConsolePanel"></Panel.Header>
3535
<div
3636
className="text-sm relative flex flex-col overflow-y-auto px-2 font-mono"
3737
style={{ height: "100%" }}

‎web/src/pages/app/functions/mods/DebugPanel/index.tsx

+28-7
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import JSONViewer from "@/components/Editor/JSONViewer";
2121
import { Row } from "@/components/Grid";
2222
import Panel from "@/components/Panel";
2323
import Resize from "@/components/Resize";
24-
import { COLOR_MODE, Pages } from "@/constants";
24+
import { COLOR_MODE, Pages, PanelMinHeight } from "@/constants";
2525

2626
import { useCompileMutation, useUpdateFunctionMutation } from "../../service";
2727
import useFunctionStore from "../../store";
@@ -132,8 +132,15 @@ export default function DebugPanel(props: { containerRef: any; showOverlay: bool
132132
return (
133133
<>
134134
<Panel className="min-w-[200px] flex-grow overflow-hidden !px-0">
135-
<Tabs width="100%" colorScheme={"primary"} display="flex" flexDirection={"column"} h="full">
136-
<TabList>
135+
<Tabs
136+
width="100%"
137+
colorScheme={"primary"}
138+
display="flex"
139+
flexDirection={"column"}
140+
h="full"
141+
size={"sm"}
142+
>
143+
<TabList h={PanelMinHeight}>
137144
<Tab px="4">
138145
<span
139146
className={clsx("font-semibold", {
@@ -154,7 +161,16 @@ export default function DebugPanel(props: { containerRef: any; showOverlay: bool
154161
{t("HomePage.NavBar.docs")}
155162
</span>
156163
</Tab> */}
157-
<Tab>Laf Pilot</Tab>
164+
<Tab>
165+
<span
166+
className={clsx("font-semibold", {
167+
"text-black": !darkMode,
168+
"text-white": darkMode,
169+
})}
170+
>
171+
Laf Pilot
172+
</span>
173+
</Tab>
158174
</TabList>
159175

160176
<TabPanels flex={1} className="overflow-hidden">
@@ -169,9 +185,9 @@ export default function DebugPanel(props: { containerRef: any; showOverlay: bool
169185
<div className="flex flex-none items-center px-2 py-4">
170186
<span className="mr-3 whitespace-nowrap">{t("FunctionPanel.Methods")}</span>
171187
<Select
172-
width="150px"
188+
width="100px"
173189
variant="filled"
174-
size="sm"
190+
size="xs"
175191
value={runningMethod}
176192
disabled={getFunctionUrl() === "" || !currentFunction.methods?.length}
177193
onChange={(e) => {
@@ -189,6 +205,7 @@ export default function DebugPanel(props: { containerRef: any; showOverlay: bool
189205
<Tooltip label={`快捷键: ${displayName.toUpperCase()}`}>
190206
<Button
191207
variant={"secondary"}
208+
size={"xs"}
192209
disabled={getFunctionUrl() === ""}
193210
className="ml-2"
194211
onClick={() => runningCode()}
@@ -277,7 +294,11 @@ export default function DebugPanel(props: { containerRef: any; showOverlay: bool
277294
/>
278295
<Row {...functionPageConfig.RunningPanel} className="flex-1">
279296
<Panel className="min-w-[200px]">
280-
<Panel.Header title={t("FunctionPanel.DebugResult")} />
297+
<Panel.Header
298+
title={t("FunctionPanel.DebugResult")}
299+
pageId="functionPage"
300+
panelId="RunningPanel"
301+
/>
281302
<div className="relative flex-1 overflow-auto">
282303
{isLoading ? (
283304
<div className="absolute left-0 right-0">

‎web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ const AddDependenceModal = () => {
212212
</Box>
213213
</Checkbox>
214214
)}
215-
<div className="flex items-center space-x-2">
215+
<div className="flex items-center space-x-1">
216216
{clickItem.package === packageItem.package.name && clickItem.loading ? (
217217
<Spinner size="xs" color="primary.500" />
218218
) : null}

0 commit comments

Comments
 (0)