Skip to content

Commit

Permalink
refactor(web): optimize create function & function template component (…
Browse files Browse the repository at this point in the history 
…#1416)

* refactor(web): optimize create function component

* refactor(web): adjust function template files

* fix(web): fix frequent avatar flickering

* fix(web): fix billing icon & app list loading
  • Loading branch information
@newfish-cmyk
newfish-cmyk authored Jul 25, 2023
1 parent d261113 commit 7f16d4d
Show file tree
Hide file tree
Showing 26 changed files with 340 additions and 616 deletions.
8 changes: 7 additions & 1 deletion web/src/components/CommonIcon/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,10 +287,16 @@ export const DomainIcon = createIcon({

export const FilterIcon = createIcon({
displayName: "FilterIcon",
viewBox: "0 0 10 9",
viewBox: "0 0 10 8",
d: "M9.5 0V1H9L6.5 4.75V9H3.5V4.75L1 1H0.5V0H9.5ZM2.202 1L4.5 4.447V8H5.5V4.447L7.798 1H2.202Z",
});

export const CalendarIcon = createIcon({
displayName: "CalendarIcon",
viewBox: "0 0 12 12",
d: "M2.5 11C2.225 11 1.9895 10.9022 1.7935 10.7065C1.59783 10.5105 1.5 10.275 1.5 10V3C1.5 2.725 1.59783 2.48967 1.7935 2.294C1.9895 2.098 2.225 2 2.5 2H3V1.4875C3 1.34583 3.04783 1.22917 3.1435 1.1375C3.2395 1.04583 3.35833 1 3.5 1C3.64167 1 3.7605 1.04783 3.8565 1.1435C3.95217 1.2395 4 1.35833 4 1.5V2H8V1.4875C8 1.34583 8.048 1.22917 8.144 1.1375C8.23967 1.04583 8.35833 1 8.5 1C8.64167 1 8.76033 1.04783 8.856 1.1435C8.952 1.2395 9 1.35833 9 1.5V2H9.5C9.775 2 10.0105 2.098 10.2065 2.294C10.4022 2.48967 10.5 2.725 10.5 3V10C10.5 10.275 10.4022 10.5105 10.2065 10.7065C10.0105 10.9022 9.775 11 9.5 11H2.5ZM2.5 10H9.5V5H2.5V10ZM2.5 4H9.5V3H2.5V4ZM2.5 4V3V4Z",
});

export const ExitIcon = createIcon({
displayName: "ExitIcon",
viewBox: "0 0 20 20",
Expand Down
8 changes: 8 additions & 0 deletions web/src/constants/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,11 @@ export const COLOR_MODE = {
};

export const LAF_AI_URL = "https://htr4n1.laf.run/laf-gpt";

export const DEFAULT_CODE = `import cloud from '@lafjs/cloud'
export default async function (ctx: FunctionContext) {
console.log('Hello World')
return { data: 'hi, laf' }
}
`;
234 changes: 69 additions & 165 deletions web/src/layouts/Header/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { HamburgerIcon, MoonIcon, SunIcon } from "@chakra-ui/icons";
import { Menu, MenuButton, MenuItem, MenuList, useColorMode } from "@chakra-ui/react";
import { MoonIcon, SunIcon } from "@chakra-ui/icons";
import { useColorMode } from "@chakra-ui/react";
import clsx from "clsx";

import { ChatIcon, TextIcon } from "@/components/CommonIcon";
Expand All @@ -16,7 +16,7 @@ import Language from "@/pages/homepage/language";
const Header = (props: { width: string }) => {
const { width } = props;
const { t } = useTranslation();
const { userInfo } = useGlobalStore((state) => state);
const { userInfo, avatarUpdatedAt } = useGlobalStore((state) => state);

const { colorMode } = useColorMode();
const darkMode = colorMode === COLOR_MODE.dark;
Expand All @@ -39,11 +39,6 @@ const Header = (props: { width: string }) => {
ref: "https://forum.laf.run/",
icon: <ChatIcon color={darkMode ? "#FFFFFF" : "#5A646E"} />,
},
// {
// text: t("HomePage.NavBar.contact"),
// ref: "https://www.wenjuan.com/s/I36ZNbl/",
// icon: <ContactIcon />,
// },
];

useEffect(() => {
Expand All @@ -52,170 +47,79 @@ const Header = (props: { width: string }) => {
}
}, []);

function isMobileDevice() {
const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
return mobileRegex.test(navigator.userAgent);
}

return (
<>
{!isMobileDevice() ? (
<div
className={clsx(
"flex h-[52px] w-full justify-between font-medium",
{ [width]: !!width },
darkMode ? "" : "text-grayModern-600",
)}
>
<div className="flex items-center pl-12">
<a href="/">
<img
src={darkMode ? "/logo_light.png" : "/logo_text.png"}
className="mr-9 h-auto w-20"
alt={"logo"}
/>
</a>
<div
className={clsx(
"flex h-[52px] w-full justify-between font-medium",
{ [width]: !!width },
darkMode ? "" : "text-grayModern-600",
)}
>
<div className="flex items-center pl-12">
<a href="/">
<img
src={darkMode ? "/logo_light.png" : "/logo_text.png"}
className="mr-9 h-auto w-20"
alt={"logo"}
/>
</a>

{navList_left.map((item, index) => {
return (
<a
key={index}
target={item.ref.startsWith("http") ? "_blank" : "_self"}
href={item.ref}
className={clsx(
"mr-8 text-lg",
item.value === chosenItem && !darkMode
? "font-semibold text-grayModern-900"
: "",
item.value === chosenItem && darkMode
? "font-semibold text-grayModern-100"
: "",
)}
rel="noreferrer"
>
{item.text}
</a>
);
})}
</div>
{navList_left.map((item, index) => {
return (
<a
key={index}
target={item.ref.startsWith("http") ? "_blank" : "_self"}
href={item.ref}
className={clsx(
"mr-8 text-lg",
item.value === chosenItem && !darkMode ? "font-semibold text-grayModern-900" : "",
item.value === chosenItem && darkMode ? "font-semibold text-grayModern-100" : "",
)}
rel="noreferrer"
>
{item.text}
</a>
);
})}
</div>

<div className="flex items-center pr-9">
{navList_right.map((item, index) => {
return (
<a
key={index}
target={item.ref.startsWith("http") ? "_blank" : "_self"}
href={item.ref}
className="mr-8 flex items-center text-lg"
rel="noreferrer"
>
<span className={clsx("pr-2", index !== 1 && "pb-1")}>{item.icon}</span>
<span>{item.text}</span>
</a>
);
})}
<Language fontSize={20} />
<div
className="mr-8 cursor-pointer pb-1"
onClick={() => {
toggleColorMode();
window.dispatchEvent(new Event("ColorModeChange"));
}}
>
{darkMode ? <MoonIcon /> : <SunIcon boxSize={4} />}
</div>
{userInfo?._id ? (
<>
<UserSetting
name={userInfo?.username!}
avatar={getAvatarUrl(userInfo?._id || "")}
width={"2.25rem"}
/>
</>
) : null}
<div className="flex items-center pr-9">
{navList_right.map((item, index) => {
return (
<a
key={index}
target={item.ref.startsWith("http") ? "_blank" : "_self"}
href={item.ref}
className="mr-8 flex items-center text-lg"
rel="noreferrer"
>
<span className={clsx("pr-2", index !== 1 && "pb-1")}>{item.icon}</span>
<span>{item.text}</span>
</a>
);
})}
<Language fontSize={20} />
<div
className="mr-8 cursor-pointer pb-1"
onClick={() => {
toggleColorMode();
window.dispatchEvent(new Event("ColorModeChange"));
}}
>
{darkMode ? <MoonIcon /> : <SunIcon boxSize={4} />}
</div>
</div>
) : (
<div
className={clsx(
"flex h-[52px] w-full justify-between font-medium",
{ [width]: !!width },
darkMode ? "" : "text-grayModern-600",
)}
>
<div className="mt-3 flex w-full items-center px-5">
<Menu>
<MenuButton>
<HamburgerIcon w={7} h={7} />
</MenuButton>
<MenuList minW={"150px"}>
{navList_left.map((item, index) => {
return (
<MenuItem key={index}>
<a
target={item.ref.startsWith("http") ? "_blank" : "_self"}
href={item.ref}
className={clsx(
"mr-8 text-lg",
item.value === chosenItem && !darkMode
? "font-semibold text-grayModern-900"
: "",
item.value === chosenItem && darkMode
? "font-semibold text-grayModern-100"
: "",
)}
rel="noreferrer"
>
{item.text}
</a>
</MenuItem>
);
})}
{navList_right.map((item, index) => {
return (
<MenuItem key={index}>
<a
target={item.ref.startsWith("http") ? "_blank" : "_self"}
href={item.ref}
className="flex items-center text-lg"
rel="noreferrer"
>
<span className={clsx("pr-2")}>{item.icon}</span>
<span>{item.text}</span>
</a>
</MenuItem>
);
})}
</MenuList>
</Menu>
<a href="/" className="pl-3">
<img
src={darkMode ? "/logo_light.png" : "/logo_text.png"}
className="mr-9 h-auto w-20"
alt={"logo"}
{userInfo?._id ? (
<>
<UserSetting
name={userInfo?.username!}
avatar={getAvatarUrl(userInfo?._id, avatarUpdatedAt)}
width={"2.25rem"}
/>
</a>
<div
className="ml-auto mr-3 flex cursor-pointer justify-end"
onClick={() => {
toggleColorMode();
window.dispatchEvent(new Event("ColorModeChange"));
}}
>
{darkMode ? <MoonIcon /> : <SunIcon w={7} h={7} />}
</div>
{userInfo?._id ? (
<>
<UserSetting
name={userInfo?.username!}
avatar={getAvatarUrl(userInfo?._id || "")}
width={"1.95rem"}
/>
</>
) : null}
</div>
</>
) : null}
</div>
)}
</div>
</>
);
};
Expand Down
99 changes: 0 additions & 99 deletions web/src/pages/app/functions/mods/FunctionPanel/CreateModal/functionTemplates.ts
View file

This file was deleted.

Loading

0 comments on commit 7f16d4d

Please sign in to comment.