diff --git a/web/src/App.css b/web/src/App.css index abe15a886b5..51c48c430a0 100644 --- a/web/src/App.css +++ b/web/src/App.css @@ -33,12 +33,13 @@ body { background-repeat: no-repeat !important; background-size: cover !important; background-position: center !important; + font-variant-numeric: lining-nums; font-size: 12px; } [data-theme="light"] body { - background-color: #f1f3f5 !important; - background-image: url("/bg.png") !important; + background-color: #eef0f2 !important; + /* background-image: url("/bg.png") !important; */ } [data-theme="dark"] ::-webkit-scrollbar-thumb { diff --git a/web/src/components/CommonIcon/index.tsx b/web/src/components/CommonIcon/index.tsx index 4ca2cf9ada1..b3455e3ce1a 100644 --- a/web/src/components/CommonIcon/index.tsx +++ b/web/src/components/CommonIcon/index.tsx @@ -3,7 +3,7 @@ import { createIcon } from "@chakra-ui/react"; export const MoreIcon = createIcon({ displayName: "MoreIcon", - viewBox: "0 0 4 16", + viewBox: "0 0 4 20", 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", }); diff --git a/web/src/components/Content/index.tsx b/web/src/components/Content/index.tsx index 32c86e01a77..1ea7354ec2d 100644 --- a/web/src/components/Content/index.tsx +++ b/web/src/components/Content/index.tsx @@ -1,5 +1,5 @@ import React from "react"; export default function Content(props: { children: React.ReactNode }) { - return <div className="flex flex-1 flex-col space-y-2 overflow-hidden">{props.children}</div>; + return <div className="flex flex-1 flex-col space-y-1 overflow-hidden">{props.children}</div>; } diff --git a/web/src/components/Editor/FunctionEditor.tsx b/web/src/components/Editor/FunctionEditor.tsx index 013d52bc12e..f9e6f001e40 100644 --- a/web/src/components/Editor/FunctionEditor.tsx +++ b/web/src/components/Editor/FunctionEditor.tsx @@ -37,7 +37,7 @@ monaco?.editor.defineTheme("lafEditorTheme", { inherit: true, rules: [ { - foreground: "#0066ff", + foreground: "#008189", token: "keyword", }, ], @@ -159,7 +159,7 @@ function FunctionEditor(props: { formatOnPaste: true, overviewRulerLanes: 0, lineNumbersMinChars: 4, - fontSize: 14, + fontSize: 13, theme: colorMode === COLOR_MODE.dark ? "lafEditorThemeDark" : "lafEditorTheme", scrollBeyondLastLine: false, }); diff --git a/web/src/components/FileTypeIcon/index.tsx b/web/src/components/FileTypeIcon/index.tsx index c92c1b2dc75..1d4a46525fe 100644 --- a/web/src/components/FileTypeIcon/index.tsx +++ b/web/src/components/FileTypeIcon/index.tsx @@ -75,7 +75,7 @@ export default function FileTypeIcon(props: { type: string; className?: string } case FileType.ts: return ( - <Icon viewBox="0 0 14 15" fontSize={14} className="align-middle"> + <Icon viewBox="0 0 14 15" fontSize={10} className="align-middle"> <rect y="0.5" width="14" height="14" rx="2" fill="#EBF7FD" /> <path 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" diff --git a/web/src/components/Grid/index.tsx b/web/src/components/Grid/index.tsx index 9d781cf29db..d05654792f3 100644 --- a/web/src/components/Grid/index.tsx +++ b/web/src/components/Grid/index.tsx @@ -11,12 +11,15 @@ const Row = forwardRef( className?: string; style?: React.CSSProperties; children: React.ReactNode; + id?: string; }, ref: any, ) => { - const { className, style } = props; + const { className, style, id } = props; + return ( <div + id={id} ref={ref} className={clsx( "flex w-full overflow-hidden", diff --git a/web/src/components/Panel/Header.tsx b/web/src/components/Panel/Header.tsx index 0ea238cd6b0..0067487a095 100644 --- a/web/src/components/Panel/Header.tsx +++ b/web/src/components/Panel/Header.tsx @@ -1,21 +1,70 @@ -import React from "react"; +import React, { useEffect } from "react"; +import { ChevronDownIcon, ChevronUpIcon } from "@chakra-ui/icons"; import { HStack } from "@chakra-ui/react"; import clsx from "clsx"; import styles from "./index.module.scss"; +import useCustomSettingStore, { page } from "@/pages/customSetting"; + const PanelHeader: React.FC<{ children?: React.ReactNode; className?: string; style?: React.CSSProperties; actions?: React.ReactNode[]; title?: React.ReactNode | string; + pageId?: page; + panelId?: string; }> = (props) => { - const { title, actions, children, style = {}, className } = props; + const { title, actions, children, style = {}, className, pageId, panelId } = props; + const store = useCustomSettingStore(); + + const [isUp, setIsUp] = React.useState(false); + + useEffect(() => { + if (!pageId || !panelId) return; + const { id = "", style } = store.getLayoutInfo(pageId, panelId); + if (!id) return; + + if (style.height < 36) { + setIsUp(false); + } else { + setIsUp(true); + } + }, [pageId, panelId, store]); + + const _defaultActions = [ + <div + key="zoomIn" + className="cursor-pointer" + onClick={() => { + if (!pageId || !panelId) return; + const { id = "", style } = store.getLayoutInfo(pageId, panelId); + + const element = document.getElementById(id); + if (element !== null) { + // get element height + const currentHeight = element.style.height; + if (currentHeight === "32px") { + const height = element.getAttribute("data-height"); + element.style.height = height || "100px"; + setIsUp(true); + } else { + setIsUp(false); + element.setAttribute("data-height", style.height + "px"); + element.style.height = "32px"; + } + } + }} + > + {isUp ? <ChevronDownIcon fontSize={16} /> : <ChevronUpIcon fontSize={16} />} + </div>, + ]; + return title ? ( <div className={styles.sectionHeader + " flex justify-between"}> <h4>{title}</h4> - <HStack spacing="2">{actions}</HStack> + <HStack spacing="2">{actions ? actions : _defaultActions}</HStack> </div> ) : ( <div style={style} className={clsx(styles.sectionHeader + " flex justify-between", className)}> diff --git a/web/src/components/Panel/index.module.scss b/web/src/components/Panel/index.module.scss index 807d6a4c255..28ebef542b4 100644 --- a/web/src/components/Panel/index.module.scss +++ b/web/src/components/Panel/index.module.scss @@ -1,17 +1,18 @@ .sectionHeader { - min-height: 50px; + min-height: 32px; + max-height: 32px; display: flex; align-items: center; h4 { - padding-left: 14px; + padding-left: 10px; font-weight: 500; - font-size: 14px; + font-size: 12px; position: relative; &::before { content: " "; - height: 15px; + height: 12px; position: absolute; left: 0; top: 3px; diff --git a/web/src/components/Panel/index.tsx b/web/src/components/Panel/index.tsx index 2a89fe8d624..b90df80c93f 100644 --- a/web/src/components/Panel/index.tsx +++ b/web/src/components/Panel/index.tsx @@ -17,7 +17,7 @@ const Panel = (props: { style={style} bg={bg} onClick={onClick} - className={clsx("flex w-full flex-col rounded px-4", className)} + className={clsx("flex w-full flex-col rounded px-3", className)} > {props.children} </Box> diff --git a/web/src/components/Resize/index.tsx b/web/src/components/Resize/index.tsx index 77e42e4f9c1..3ad78aa1f82 100644 --- a/web/src/components/Resize/index.tsx +++ b/web/src/components/Resize/index.tsx @@ -15,10 +15,8 @@ export default function Resize(props: { }) { const { type, pageId, panelId, reverse, containerRef } = props; const store = useCustomSettingStore(); - const { width, height, minWidth, maxWidth, minHeight, maxHeight, display } = store.getLayoutInfo( - pageId, - panelId, - ); + const { width, height, minWidth, maxWidth, minHeight, maxHeight, display } = + store.getLayoutInfoStyle(pageId, panelId); const { isDragging, position, separatorProps } = useResizable({ axis: type, initial: type === "x" ? width : height, @@ -32,6 +30,7 @@ export default function Resize(props: { width: position, height: position, }; + store.setLayoutInfo(pageId, panelId, newPosition); }, [position, pageId, panelId, store]); const borderColor = useColorModeValue("slate.300", "lafDark.300"); @@ -41,7 +40,7 @@ export default function Resize(props: { {display === "none" ? null : ( <div className={ - type === "x" ? "group h-full w-2 cursor-col-resize" : "h-2 w-full cursor-row-resize" + type === "x" ? "group h-full w-1 cursor-col-resize" : "h-1 w-full cursor-row-resize" } {...separatorProps} > @@ -49,6 +48,7 @@ export default function Resize(props: { {type === "x" && width <= 20 ? ( <div className={clsx( + "z-50", reverse ? "rounded-l-lg" : "rounded-r-lg", "h-[30px] w-2 bg-grayIron-300 leading-loose text-lafWhite-600 transition-colors group-hover:bg-grayIron-400", )} diff --git a/web/src/components/SectionList/index.module.scss b/web/src/components/SectionList/index.module.scss index fc3a791c182..aac7afa915d 100644 --- a/web/src/components/SectionList/index.module.scss +++ b/web/src/components/SectionList/index.module.scss @@ -4,11 +4,10 @@ li { cursor: pointer; display: flex; - height: 40px; - border-radius: 8px; + height: 28px; align-items: center; justify-content: space-between; - padding: 2px 12px; + padding: 0px 12px; margin-bottom: 2px; span { diff --git a/web/src/components/SectionList/index.tsx b/web/src/components/SectionList/index.tsx index 554338259a5..ecbcc8c61da 100644 --- a/web/src/components/SectionList/index.tsx +++ b/web/src/components/SectionList/index.tsx @@ -9,10 +9,7 @@ function SectionList(props: { className?: string; }) { return ( - <ul - className={styles.sectionList + " mb-4 text-grayIron-600 " + props.className} - style={props.style || {}} - > + <ul className={styles.sectionList + " mb-4 " + props.className} style={props.style || {}}> {props.children} </ul> ); diff --git a/web/src/constants/index.ts b/web/src/constants/index.ts index 3098de4ad97..c529b998ad7 100644 --- a/web/src/constants/index.ts +++ b/web/src/constants/index.ts @@ -1,5 +1,5 @@ /* eslint-disable no-unused-vars */ -export const SideBarWidth = 64; +export const SideBarWidth = 52; export const SmallNavHeight = 42; export const VITE_SERVER_BASE_URL = import.meta.env.VITE_SERVER_BASE_URL || ""; diff --git a/web/src/hooks/useResizable.ts b/web/src/hooks/useResizable.ts index 8c5cb018217..1f9f9663217 100644 --- a/web/src/hooks/useResizable.ts +++ b/web/src/hooks/useResizable.ts @@ -61,16 +61,20 @@ const useResizable = ({ return reverse ? left + width - x : x - left; } return reverse ? document.body.offsetWidth - x : x; + } else { + const y = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY; + if (containerRef?.current) { + const containerNode = containerRef.current; + const { top, height } = containerNode.getBoundingClientRect(); + return reverse ? top + height - y : y - top; + } + return reverse ? document.body.offsetHeight - y : y; } - const y = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY; - if (containerRef?.current) { - const containerNode = containerRef.current; - const { top, height } = containerNode.getBoundingClientRect(); - return reverse ? top + height - y : y - top; - } - return reverse ? document.body.offsetHeight - y : y; })(); - if (min < currentPosition && currentPosition < max) { + + if (currentPosition <= 4) return setPosition(4); + + if (min <= currentPosition && currentPosition <= max) { setPosition(currentPosition); } }, diff --git a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx index afbe1a72ced..92cbf74d108 100644 --- a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx +++ b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx @@ -144,7 +144,7 @@ export default function DataPanel() { return ( <> - <Panel.Header className="h-[40px] w-full flex-shrink-0"> + <Panel.Header className="my-1 w-full flex-shrink-0"> <div className="flex items-center"> <AddDataModal schema={currentData.data ? currentData.data : {}} diff --git a/web/src/pages/app/functions/mods/ConsolePanel/index.tsx b/web/src/pages/app/functions/mods/ConsolePanel/index.tsx index 63ee47ced37..6709e7b9f17 100644 --- a/web/src/pages/app/functions/mods/ConsolePanel/index.tsx +++ b/web/src/pages/app/functions/mods/ConsolePanel/index.tsx @@ -31,7 +31,7 @@ function ConsolePanel() { return ( <Panel className="flex-1"> - <Panel.Header title="Console"></Panel.Header> + <Panel.Header title="Console" pageId="functionPage" panelId="ConsolePanel"></Panel.Header> <div className="text-sm relative flex flex-col overflow-y-auto px-2 font-mono" style={{ height: "100%" }} diff --git a/web/src/pages/app/functions/mods/DebugPanel/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/index.tsx index 3a284f8f024..33d98591f0d 100644 --- a/web/src/pages/app/functions/mods/DebugPanel/index.tsx +++ b/web/src/pages/app/functions/mods/DebugPanel/index.tsx @@ -132,8 +132,15 @@ export default function DebugPanel(props: { containerRef: any; showOverlay: bool return ( <> <Panel className="min-w-[200px] flex-grow overflow-hidden !px-0"> - <Tabs width="100%" colorScheme={"primary"} display="flex" flexDirection={"column"} h="full"> - <TabList> + <Tabs + width="100%" + colorScheme={"primary"} + display="flex" + flexDirection={"column"} + h="full" + size={"sm"} + > + <TabList h={"32px"}> <Tab px="4"> <span className={clsx("font-semibold", { @@ -154,7 +161,16 @@ export default function DebugPanel(props: { containerRef: any; showOverlay: bool {t("HomePage.NavBar.docs")} </span> </Tab> */} - <Tab>Laf Pilot</Tab> + <Tab> + <span + className={clsx("font-semibold", { + "text-black": !darkMode, + "text-white": darkMode, + })} + > + Laf Pilot + </span> + </Tab> </TabList> <TabPanels flex={1} className="overflow-hidden"> @@ -169,9 +185,9 @@ export default function DebugPanel(props: { containerRef: any; showOverlay: bool <div className="flex flex-none items-center px-2 py-4"> <span className="mr-3 whitespace-nowrap">{t("FunctionPanel.Methods")}</span> <Select - width="150px" + width="100px" variant="filled" - size="sm" + size="xs" value={runningMethod} disabled={getFunctionUrl() === "" || !currentFunction.methods?.length} onChange={(e) => { @@ -189,6 +205,7 @@ export default function DebugPanel(props: { containerRef: any; showOverlay: bool <Tooltip label={`快捷键: ${displayName.toUpperCase()}`}> <Button variant={"secondary"} + size={"xs"} disabled={getFunctionUrl() === ""} className="ml-2" onClick={() => runningCode()} @@ -277,7 +294,11 @@ export default function DebugPanel(props: { containerRef: any; showOverlay: bool /> <Row {...functionPageConfig.RunningPanel} className="flex-1"> <Panel className="min-w-[200px]"> - <Panel.Header title={t("FunctionPanel.DebugResult")} /> + <Panel.Header + title={t("FunctionPanel.DebugResult")} + pageId="functionPage" + panelId="RunningPanel" + /> <div className="relative flex-1 overflow-auto"> {isLoading ? ( <div className="absolute left-0 right-0"> diff --git a/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx b/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx index 908e4322ca3..50f2356f901 100644 --- a/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx +++ b/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx @@ -212,7 +212,7 @@ const AddDependenceModal = () => { </Box> </Checkbox> )} - <div className="flex items-center space-x-2"> + <div className="flex items-center space-x-1"> {clickItem.package === packageItem.package.name && clickItem.loading ? ( <Spinner size="xs" color="primary.500" /> ) : null} diff --git a/web/src/pages/app/functions/mods/DependencePanel/index.tsx b/web/src/pages/app/functions/mods/DependencePanel/index.tsx index dc9c1c7afd1..bf9da38b128 100644 --- a/web/src/pages/app/functions/mods/DependencePanel/index.tsx +++ b/web/src/pages/app/functions/mods/DependencePanel/index.tsx @@ -31,7 +31,7 @@ export default function DependenceList() { const builtinPackage: TPackage[] = []; const customPackage: TPackage[] = []; - const { height } = store.getLayoutInfo("functionPage", "DependencePanel"); + const { height } = store.getLayoutInfoStyle("functionPage", "DependencePanel"); const SECTION_HEIGHT = height - 90; packageQuery?.data?.data?.forEach((packageItem: TPackage) => { @@ -43,14 +43,14 @@ export default function DependenceList() { }); return ( - <Panel className="min-w-[250px]"> + <Panel className="min-w-[215px]"> <Panel.Header title={t("FunctionPanel.Dependence")} actions={[<AddDependenceModal key="AddDependenceModal" />]} /> - <Tabs variant="soft-rounded" colorScheme={"gray"} size={"sm"}> + <Tabs variant="soft-rounded" colorScheme={"gray"} size={"xs"}> <TabList> - <Tab> + <Tab className="mr-2 px-2"> {t("FunctionPanel.CustomDependence")} {customPackage.length > 0 && ( <Badge rounded={"full"} ml="1"> diff --git a/web/src/pages/app/functions/mods/DeployButton/index.tsx b/web/src/pages/app/functions/mods/DeployButton/index.tsx index bfb9ecb9bed..cf6e81368db 100644 --- a/web/src/pages/app/functions/mods/DeployButton/index.tsx +++ b/web/src/pages/app/functions/mods/DeployButton/index.tsx @@ -79,13 +79,13 @@ export default function DeployButton() { > <Button variant={"text"} + size={"xs"} isLoading={functionDetailQuery.isFetching} disabled={store.getFunctionUrl() === ""} onClick={() => { onOpen(); }} leftIcon={<SynchronizeUpIcon />} - className="w-20" > {t("FunctionPanel.Deploy")} </Button> diff --git a/web/src/pages/app/functions/mods/EditorPanel/index.tsx b/web/src/pages/app/functions/mods/EditorPanel/index.tsx index b4b0c7a93e7..9a4fd617711 100644 --- a/web/src/pages/app/functions/mods/EditorPanel/index.tsx +++ b/web/src/pages/app/functions/mods/EditorPanel/index.tsx @@ -38,7 +38,10 @@ function EditorPanel() { })} > <HStack maxW={"55%"} spacing={2}> - <CopyText className="text-xl font-bold" text={currentFunction?.name}> + <CopyText + className="whitespace-nowrap text-xl font-semibold" + text={currentFunction?.name} + > <span>{currentFunction?.name}</span> </CopyText> <FunctionDetailPopOver /> @@ -54,9 +57,9 @@ function EditorPanel() { ) : null} </HStack> - <HStack spacing={0}> - <CopyText text={getFunctionUrl()} className="mr-4"> - <Input w={"240px"} size="sm" readOnly value={getFunctionUrl()} /> + <HStack spacing={1}> + <CopyText text={getFunctionUrl()}> + <Input w={"220px"} size="xs" readOnly value={getFunctionUrl()} /> </CopyText> <FetchButton /> diff --git a/web/src/pages/app/functions/mods/FetchButton/index.tsx b/web/src/pages/app/functions/mods/FetchButton/index.tsx index 885a9d29bab..5906f86ac57 100644 --- a/web/src/pages/app/functions/mods/FetchButton/index.tsx +++ b/web/src/pages/app/functions/mods/FetchButton/index.tsx @@ -40,13 +40,13 @@ export default function FetchButton() { <Tooltip label={t("FunctionPanel.getCodeOnline")} placement="bottom"> <Button variant={"text"} + size={"xs"} isLoading={functionDetailQuery.isFetching} disabled={store.getFunctionUrl() === ""} onClick={() => { onOpen(); }} leftIcon={<SynchronizeDownIcon />} - className="w-20" > {t("FunctionPanel.Fetch")} </Button> diff --git a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx index 5b7e5490108..4fc3616f06b 100644 --- a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx +++ b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx @@ -127,7 +127,7 @@ export default function FunctionList() { }; return ( - <Panel className="min-w-[250px] flex-grow overflow-hidden"> + <Panel className="min-w-[215px] flex-grow overflow-hidden"> <Panel.Header title={ <div className="flex"> @@ -160,12 +160,13 @@ export default function FunctionList() { <InputGroup className="mb-2"> <InputLeftElement - height={"8"} + height={"6"} pointerEvents="none" children={<Search2Icon color="gray.300" fontSize={12} />} /> <Input - size="sm" + size="xs" + pl={8} rounded={"full"} placeholder={String(t("FunctionPanel.SearchPlaceholder"))} onChange={(e) => { @@ -190,7 +191,7 @@ export default function FunctionList() { navigate(`/app/${currentApp?.appid}/${Pages.function}/${func?.name}`); }} > - <div className="overflow-hidden text-ellipsis whitespace-nowrap font-semibold leading-loose"> + <div className="overflow-hidden text-ellipsis whitespace-nowrap"> <FileTypeIcon type={FileType.ts} /> <span className="ml-2 text-base">{func?.name}</span> </div> diff --git a/web/src/pages/app/logs/index.tsx b/web/src/pages/app/logs/index.tsx index 5932ec7255c..616889d2eb3 100644 --- a/web/src/pages/app/logs/index.tsx +++ b/web/src/pages/app/logs/index.tsx @@ -92,7 +92,7 @@ export default function LogsPage() { logListQuery.refetch(); }} > - <Panel.Header> + <Panel.Header className="my-2"> <HStack spacing={2}> <InputGroup width={300}> <Input diff --git a/web/src/pages/app/mods/StatusBar/index.tsx b/web/src/pages/app/mods/StatusBar/index.tsx index 0a124050725..62f9644df93 100644 --- a/web/src/pages/app/mods/StatusBar/index.tsx +++ b/web/src/pages/app/mods/StatusBar/index.tsx @@ -17,7 +17,7 @@ function StatusBar() { return ( <Panel className="!flex-row justify-between"> - <HStack px={3} py={2} spacing={4}> + <HStack spacing={2}> <div> {t("StatusBar.CurrentApplication")}: {currentApp?.name} </div> @@ -28,7 +28,7 @@ function StatusBar() { </SysSetting> <StatusBadge statusConditions={currentApp?.phase} state={currentApp?.state} /> </HStack> - <HStack px={3} py={2} spacing={4}> + <HStack spacing={4}> <div>CPU: {`${currentApp?.bundle?.resource?.limitCPU! / 1000} ${t("Unit.CPU")}`}</div> <div> {t("Spec.RAM")}: {`${currentApp?.bundle?.resource.limitMemory} ${t("Unit.MB")}`} diff --git a/web/src/pages/app/setting/AppInfoList/InfoDetail/index.tsx b/web/src/pages/app/setting/AppInfoList/InfoDetail/index.tsx index 5e476754762..bfbf436a93f 100644 --- a/web/src/pages/app/setting/AppInfoList/InfoDetail/index.tsx +++ b/web/src/pages/app/setting/AppInfoList/InfoDetail/index.tsx @@ -11,7 +11,7 @@ const InfoDetail = function (props: { }) { const { title, leftData, rightData, className } = props; return ( - <div className={clsx("rounded border px-4 py-4", className)}> + <div className={clsx("mb-4 rounded border px-4 py-4", className)}> <Content> <Row className="mb-2"> <span className={clsx("relative inline-block text-2xl font-semibold text-primary-700")}> diff --git a/web/src/pages/app/storages/mods/FileList/index.tsx b/web/src/pages/app/storages/mods/FileList/index.tsx index 289d41cdcb7..7e5b5ecd1c9 100644 --- a/web/src/pages/app/storages/mods/FileList/index.tsx +++ b/web/src/pages/app/storages/mods/FileList/index.tsx @@ -197,7 +197,7 @@ export default function FileList() { <Td>{file.LastModified ? formatDate(file.LastModified) : "--"}</Td> <Td isNumeric - className={clsx("flex justify-end space-x-2", { + className={clsx("flex justify-end space-x-1", { "text-grayModern-900": !darkMode, })} > diff --git a/web/src/pages/app/storages/mods/StorageListPanel/index.tsx b/web/src/pages/app/storages/mods/StorageListPanel/index.tsx index 6fb42aa9b69..ba6d583e1de 100644 --- a/web/src/pages/app/storages/mods/StorageListPanel/index.tsx +++ b/web/src/pages/app/storages/mods/StorageListPanel/index.tsx @@ -45,7 +45,7 @@ export default function StorageListPanel() { }); return ( - <Panel className="h-full min-w-[250px]"> + <Panel className="h-full min-w-[215px]"> <Panel.Header title={t("StoragePanel.StorageList")} actions={[ diff --git a/web/src/pages/customSetting.ts b/web/src/pages/customSetting.ts index 62fae884475..9e926403275 100644 --- a/web/src/pages/customSetting.ts +++ b/web/src/pages/customSetting.ts @@ -4,6 +4,7 @@ import { devtools, persist } from "zustand/middleware"; import { immer } from "zustand/middleware/immer"; type TLayoutConfig = { + id: string; style: React.CSSProperties; }; @@ -35,6 +36,7 @@ type State = { [K in collectionPanel]: TLayoutConfig; }; }; + getLayoutInfoStyle: (pageId: page, panelId: panel) => any; getLayoutInfo: (pageId: page, panelId: panel) => any; setLayoutInfo: ( pageId: page, @@ -51,46 +53,48 @@ const useCustomSettingStore = create<State>()( layoutInfo: { functionPage: { SideBar: { + id: "SideBar", style: { width: 300, minWidth: 0, - maxWidth: 500, }, }, RightPanel: { + id: "RightPanel", style: { width: 320, minWidth: 0, - maxWidth: 500, }, }, DependencePanel: { + id: "DependencePanel", style: { height: 300, - minHeight: 45, + minHeight: 32, maxHeight: 500, }, }, ConsolePanel: { + id: "ConsolePanel", style: { height: 200, - minHeight: 45, - maxHeight: 500, + minHeight: 32, }, }, RunningPanel: { + id: "RunningPanel", style: { height: 200, - minHeight: 45, - maxHeight: 500, + minHeight: 32, }, }, Bottom: { + id: "Bottom", style: { height: 40, }, @@ -99,24 +103,27 @@ const useCustomSettingStore = create<State>()( collectionPage: { SideBar: { + id: "SideBar", style: { width: 300, minWidth: 0, - maxWidth: 500, }, }, CollectionPanel: { + id: "CollectionPanel", style: {}, }, PolicyPanel: { + id: "PolicyPanel", style: { height: 200, - minHeight: 45, + minHeight: 32, maxHeight: 500, }, }, Bottom: { + id: "Bottom", style: { height: 40, }, @@ -125,6 +132,7 @@ const useCustomSettingStore = create<State>()( storagePage: { SideBar: { + id: "SideBar", style: { width: 300, minWidth: 0, @@ -141,7 +149,8 @@ const useCustomSettingStore = create<State>()( display[panelId].style.display === "none" ? "flex" : "none"; }); }, - getLayoutInfo: (pageId, panelId) => get().layoutInfo[pageId][panelId].style, + getLayoutInfoStyle: (pageId, panelId) => get().layoutInfo[pageId][panelId].style, + getLayoutInfo: (pageId, panelId) => get().layoutInfo[pageId][panelId], setLayoutInfo: (pageId, panelId, position: { width: number; height: number }) => { set((state: any) => { const { display, width } = state.layoutInfo[pageId][panelId].style; @@ -157,7 +166,7 @@ const useCustomSettingStore = create<State>()( { name: "laf_custom_setting", - version: 1, + version: 2, }, ), ), diff --git a/web/src/pages/home/mods/StatusBadge/index.module.scss b/web/src/pages/home/mods/StatusBadge/index.module.scss index ce3f0b6ce78..619b3f7ad1f 100644 --- a/web/src/pages/home/mods/StatusBadge/index.module.scss +++ b/web/src/pages/home/mods/StatusBadge/index.module.scss @@ -14,7 +14,6 @@ } &.primary { - background: var(--chakra-colors-primary-100); color: var(--chakra-colors-primary-600); span::before { @@ -23,7 +22,6 @@ } &.warn { - background: var(--chakra-colors-warn-100); color: var(--chakra-colors-warn-600); span::before { @@ -32,7 +30,6 @@ } &.blue { - background: var(--chakra-colors-blue-100); color: var(--chakra-colors-blue-600); span::before { @@ -41,7 +38,6 @@ } &.error { - background: var(--chakra-colors-error-100); color: var(--chakra-colors-error-600); span::before {